/* Slurkio · familie kf (Mønstring-layout). Tokens: /brand/kf-tokens.css (aksent #007EB7, #67D2FF i mørk modus).
   Flatt, ingen effekter. Fonter selvhostet. */
@font-face { font-family: 'Geist Variable'; src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono Variable'; src: url('/fonts/geist-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Source Serif 4 Variable'; src: url('/fonts/source-serif-4-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }

/* Mørk modus etter system (verdier fra Mønstring-tokens) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg-l: 0.145; --bg2-l: 0.185; --card-solid-l: 0.2;
    --line: oklch(1 0 0 / 0.1); --line-strong: oklch(1 0 0 / 0.22);
    --fg: oklch(0.975 0.005 90); --fg-2: oklch(0.8 0.01 90); --fg-3: oklch(0.68 0.012 90);
    --ok: oklch(0.8 0.17 155); --warn: oklch(0.83 0.15 80); --bad: oklch(0.72 0.19 22);
    --shadow: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 16px 32px -20px oklch(0 0 0 / 0.7);
  }
}
:root { --pad: 1.25rem; --tap: 3rem; --nav-h: 5.25rem; --max: 44rem; --warn-fg: #7a4a00; }
@media (prefers-color-scheme: dark) { :root { --warn-fg: #f1c36a; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg);
  font: 400 1rem/1.5 var(--font-sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overscroll-behavior-y: none;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent-text); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 0.5rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--card-solid); padding: 0.75rem 1rem; z-index: 100; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.muted { color: var(--fg-2); }
.small { font-size: 0.875rem; }
[hidden] { display: none !important; }

/* Topp: bare merke, ingen knapper i hjørnene */
.topbar { padding: calc(env(safe-area-inset-top) + 0.75rem) var(--pad) 0; max-width: var(--max); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap); text-decoration: none; color: var(--fg); font-weight: 650; letter-spacing: -0.01em; }
.brand img { border-radius: 0.5rem; }
#app { display: block; max-width: var(--max); margin: 0 auto; padding: 0.5rem var(--pad) calc(var(--nav-h) + env(safe-area-inset-bottom) + 2rem); outline: none; }
body.no-nav #app { padding-bottom: calc(env(safe-area-inset-bottom) + 2rem); }
body.has-cta #app { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 6.5rem); }

/* Hero: kicker + tittel + to knapper */
.hero { padding: 1.25rem 0 1.5rem; display: grid; gap: 0.9rem; }
.kicker { font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.hero p { color: var(--fg-2); max-width: 34rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--tap); min-width: var(--tap);
  padding: 0 1.4rem; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent;
  font-weight: 600; text-decoration: none; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn.block { width: 100%; min-height: 3.5rem; font-size: 1.0625rem; }
.btn { white-space: nowrap; }
.btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn:active:not([disabled]) { transform: scale(0.98); }
.btn.quiet { border-color: transparent; color: var(--accent-text); padding: 0 0.75rem; }

/* Kort og lister */
.section { margin-top: 1.75rem; display: grid; gap: 0.75rem; }
.section > h2 { font: 650 1.25rem/1.2 var(--font-sans); letter-spacing: -0.02em; }
.card { background: var(--card-solid); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 1.25rem; }
.grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid { grid-template-columns: 1fr 1fr; } }
.drink-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.625rem 0.625rem 0.625rem; min-height: 4.5rem; }
.drink-card a.main { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; min-height: var(--tap); color: inherit; text-decoration: none; }
.thumb { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 0.9rem; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb svg { width: 1.6rem; height: 1.6rem; }
.drink-card .txt { min-width: 0; display: grid; gap: 0.15rem; }
.drink-card .name { font-weight: 600; overflow-wrap: anywhere; }
.drink-card .meta { color: var(--fg-2); font-size: 0.875rem; overflow-wrap: anywhere; }
.round { flex: none; width: var(--tap); height: var(--tap); border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--accent); }
.round svg { width: 1.4rem; height: 1.4rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: transparent; cursor: pointer; font-weight: 500; font-size: 0.9375rem;
}
.chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tag { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 0.6rem; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.02em; color: var(--fg-2); }
.tag.unverified { border-color: var(--warn); color: var(--warn-fg); background: color-mix(in oklch, var(--warn) 12%, transparent); }
.tag.alc { color: var(--fg); }
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; }
.facts dt { font: 500 0.75rem/1.6 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.drink-head { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: start; padding-top: 0.5rem; }
.drink-head .thumb { width: 7.5rem; height: 7.5rem; border-radius: 1.4rem; }
.drink-head .thumb svg { width: 3rem; height: 3rem; }
.drink-head h1 { font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
@media (max-width: 380px) { .drink-head { grid-template-columns: 6rem 1fr; } .drink-head .thumb { width: 6rem; height: 6rem; } }

.list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.row { padding: 0.8rem 1rem; display: grid; gap: 0.25rem; }
.row .top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.stars-ro { font-family: var(--font-mono); font-size: 0.9375rem; white-space: nowrap; color: var(--accent); }

/* Skjema */
.field { display: grid; gap: 0.35rem; }
.field label, .field .lbl { font-weight: 600; font-size: 0.9375rem; }
.field .hint { color: var(--fg-2); font-size: 0.875rem; }
.input {
  width: 100%; min-height: 3rem; padding: 0.6rem 0.9rem; font-size: 1rem; border-radius: 0.9rem;
  border: 1.5px solid var(--line-strong); background: var(--card-solid); color: var(--fg);
}
textarea.input { min-height: 6rem; resize: vertical; }
.input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.err { color: var(--bad); font-size: 0.9375rem; }
.banner { padding: 0.9rem 1rem; border-radius: 1rem; border: 1px solid var(--line-strong); background: var(--bg-2); }
.banner.bad { border-color: var(--bad); }

/* Bunnmeny: fast, avrundet pille. Skann er størst. */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; pointer-events: none; padding: 0 0.75rem calc(env(safe-area-inset-bottom) + 0.6rem); }
.tabbar .pill { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; width: 100%; max-width: 26rem; padding: 0.375rem 0.5rem; border-radius: 999px; background: var(--card-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.tab { flex: 1; min-width: var(--tap); min-height: 3.5rem; display: grid; place-items: center; align-content: center; gap: 0.1rem; border-radius: 999px; text-decoration: none; color: var(--fg-2); font-size: 0.75rem; font-weight: 600; }
.tab svg { width: 1.5rem; height: 1.5rem; }
.tab[aria-current='page'] { color: var(--accent-text); }
.tab.scan { flex: none; width: 4.5rem; height: 4.5rem; min-height: 4.5rem; margin: -0.9rem 0.25rem; background: var(--accent); color: var(--accent-fg); border: 4px solid var(--bg); }
.tab.scan svg { width: 1.9rem; height: 1.9rem; }
.tab.scan[aria-current='page'] { color: var(--accent-fg); }

/* Fast handling over bunnmenyen (drikkeside) */
.cta { position: fixed; left: 0; right: 0; z-index: 25; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.25rem); display: flex; justify-content: center; padding: 0 var(--pad); pointer-events: none; }
.cta .btn { pointer-events: auto; max-width: 26rem; box-shadow: var(--shadow); }

/* Bunnark */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: oklch(0.1 0.01 80 / 0.5); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; margin: 0 auto; max-width: 32rem; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card-solid); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 1.75rem 1.75rem 0 0;
  padding: 0.5rem var(--pad) 0; display: grid; gap: 1rem; align-content: start;
  animation: sheet-in 0.28s var(--ease);
}
.sheet .handle { width: 2.75rem; height: 0.3rem; border-radius: 999px; background: var(--line-strong); margin: 0.25rem auto 0; }
.sheet h2 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.sheet .save-bar { position: sticky; bottom: 0; background: var(--card-solid); padding: 0.5rem 0 calc(env(safe-area-inset-bottom) + 1.25rem); display: grid; gap: 0.5rem; }
body.sheet-open { overflow: hidden; }
@keyframes sheet-in { from { transform: translateY(2rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* Stjerner: store, trykk og sveip */
.stars-wrap { display: grid; gap: 0.35rem; justify-items: center; }
.stars { display: flex; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: pointer; border-radius: 1rem; padding: 0.25rem 0; width: 100%; max-width: 21rem; }
.star { position: relative; flex: 1 1 20%; aspect-ratio: 1; max-width: 4.2rem; }
.star svg { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0.4rem; }
.star .empty { color: var(--fg-3); }
.star .fill { position: absolute; inset: 0; color: var(--accent); clip-path: inset(0 100% 0 0); }
.stars-val { font: 500 1.0625rem/1 var(--font-mono); color: var(--fg-2); min-height: 1.25rem; }

/* Kjede for «Mer» */
.more-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--tap); padding: 0 0.25rem; background: none; border: 0; border-top: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.more-btn svg { width: 1.25rem; height: 1.25rem; transition: transform 0.2s; }
.more-btn[aria-expanded='true'] svg { transform: rotate(180deg); }
.more { display: grid; gap: 1rem; }
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.photo-row .thumb { width: 4rem; height: 4rem; }
input[type='file'].visually { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Skjelett: puls */
.skel-wrap { display: grid; gap: 0.75rem; padding-top: 1rem; }
.skel { background: var(--bg-2); border-radius: var(--radius); animation: pulse 1.4s ease-in-out infinite; }
.skel-hero { height: 7rem; } .skel-row { height: 4.5rem; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* Toast */
#toasts { position: fixed; left: 0; right: 0; z-index: 80; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.5rem); display: grid; justify-items: center; gap: 0.5rem; padding: 0 var(--pad); pointer-events: none; }
.toast { pointer-events: auto; max-width: 26rem; padding: 0.85rem 1.1rem; border-radius: 1rem; background: var(--ink, #16120c); color: #faf8f4; box-shadow: var(--shadow); animation: sheet-in 0.25s var(--ease); font-weight: 500; }
@media (prefers-color-scheme: dark) { .toast { background: #faf8f4; color: #16120c; } }

.foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--fg-2); font-size: 0.875rem; display: grid; gap: 0.25rem; }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap); }
.center { text-align: center; }
.age { min-height: calc(100dvh - 8rem); display: grid; align-content: center; gap: 1.25rem; }
.age .btn-col { display: grid; gap: 0.75rem; }
.more-row { display: flex; justify-content: center; margin-top: 0.5rem; }
.placeholder { padding: 2rem 1.25rem; display: grid; gap: 0.75rem; justify-items: start; }
.placeholder svg { width: 2.5rem; height: 2.5rem; color: var(--accent); }
.prose { display: grid; gap: 0.9rem; max-width: 36rem; }
.prose h2 { font-size: 1.125rem; margin-top: 0.75rem; letter-spacing: -0.01em; }

@media (min-width: 900px) {
  :root { --max: 56rem; }
  .hero { padding-top: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.section.flush { margin: 0; }
.gap-top { margin-top: 0.75rem; }

/* ---------- Fase 1b: skanner, mat og paring ---------- */
body.scanning { background: #000; }
body.scanning #app { max-width: none; padding: 0; }
.scanner { position: fixed; inset: 0; z-index: 40; background: #000; color: #fff; overflow: hidden; }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; left: 50%; top: 34%; width: min(78vw, 22rem); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 1.5rem; box-shadow: 0 0 0 100vmax oklch(0 0 0 / 0.45); pointer-events: none; }
.scan-panel { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.75rem; max-width: 32rem; margin: 0 auto; padding: 1rem var(--pad) calc(env(safe-area-inset-bottom) + 1rem); background: oklch(0.145 0.01 80 / 0.92); border-radius: 1.75rem 1.75rem 0 0; }
.scan-status { font-weight: 500; color: #fff; min-height: 1.5rem; }
.scan-result { display: grid; gap: 0.75rem; color: #fff; }
.scan-result p { color: #e8e4dc; }
.scan-bar { display: flex; gap: 0.5rem; }
.scan-btn { flex: 1; min-height: 3.5rem; min-width: var(--tap); display: grid; place-items: center; align-content: center; gap: 0.15rem; padding: 0.25rem 0.4rem; border-radius: 1.2rem; border: 1.5px solid oklch(1 0 0 / 0.35); background: transparent; color: #fff; font-size: 0.75rem; font-weight: 600; cursor: pointer; text-align: center; }
.scan-btn svg { width: 1.4rem; height: 1.4rem; }
.scan-btn[aria-pressed='true'] { background: var(--accent-dark, #67d2ff); border-color: #67d2ff; color: #16120c; }
.scan-manual { display: grid; gap: 0.4rem; }
.scan-manual .lbl { font-weight: 600; font-size: 0.9375rem; color: #fff; }
.scan-row { display: flex; gap: 0.5rem; }
.scan-row .input { flex: 1; min-width: 0; color: #16120c; background: #faf8f4; }
.scan-manual .err { color: #ff9b8f; }
.scanner .btn { color: #fff; border-color: oklch(1 0 0 / 0.45); }
.scanner .btn.primary { background: #67d2ff; border-color: #67d2ff; color: #16120c; }

.pair { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem 0.4rem 0.75rem; min-height: 4rem; }
.pair-food { flex: 1; min-width: 0; min-height: var(--tap); display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.pair-food .txt, .pair-food > span:not(.thumb) { display: grid; gap: 0.1rem; min-width: 0; }
.pair-food .name { font-weight: 600; overflow-wrap: anywhere; }
.votes { flex: none; display: flex; align-items: center; gap: 0.25rem; }
.vote { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0 0.6rem; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; cursor: pointer; font: 600 0.9375rem/1 var(--font-mono); }
.vote svg { width: 1.2rem; height: 1.2rem; }
.vote[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.score { min-width: 1.75rem; text-align: right; color: var(--fg-2); font-size: 0.875rem; }
.food-group h2 { font-size: 1.125rem; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.food-group h2 a { color: var(--fg); text-decoration: none; }
.food-group { display: block; }
.section h3 { font-size: 1rem; }
@media (max-width: 380px) { .vote { padding: 0 0.45rem; } .pair { padding-left: 0.5rem; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Fase 1c: søk, profil, alkoholfilter ---------- */
.filter-row { display: flex; }
.switch { display: inline-flex; align-items: center; gap: 0.75rem; min-height: var(--tap); padding: 0 0.25rem; background: none; border: 0; cursor: pointer; font-weight: 600; color: var(--fg); -webkit-tap-highlight-color: transparent; }
.switch .track { flex: none; position: relative; width: 3.25rem; height: 1.9rem; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--bg-2); transition: background 0.15s; }
.switch .knob { position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 999px; background: var(--fg-2); transition: transform 0.15s, background 0.15s; }
.switch[aria-checked='true'] .track { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked='true'] .knob { transform: translateX(1.35rem); background: var(--accent-fg); }
.search-form { position: relative; display: block; }
.search-form > svg { position: absolute; left: 0.95rem; top: 50%; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); color: var(--fg-2); pointer-events: none; }
.search-form .input { padding-left: 2.8rem; min-height: 3.25rem; border-radius: 999px; -webkit-appearance: none; appearance: none; }
.search-form + .filter-row, .search-form + p { margin-top: 0.5rem; }
.food-hit { display: grid; gap: 0.1rem; min-height: var(--tap); text-decoration: none; color: inherit; padding: 0.8rem 1rem; }
.food-hit .name { font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.stat { padding: 1rem; display: grid; gap: 0.15rem; }
.stat .big { font-size: 2.25rem; line-height: 1.1; font-weight: 600; color: var(--accent-text); }
.sub { font: 650 1rem/1.3 var(--font-sans); margin: 1rem 0 0.5rem; }
.cat-row { display: flex; justify-content: space-between; align-items: center; min-height: 3rem; }
.cat-row .name { font-weight: 500; }
.cat-row .mono { color: var(--accent-text); font-weight: 600; }
.btn.fav[aria-pressed='true'] { border-color: var(--accent); color: var(--accent-text); }
.btn.fav svg { width: 1.25rem; height: 1.25rem; }

/* Navneforslag (combobox i «legg til drikke») */
.combo-list { list-style: none; margin: 0.15rem 0 0; padding: 0.25rem; border: 1.5px solid var(--line-strong); border-radius: 0.9rem; background: var(--card-solid); }
.combo-list[hidden] { display: none; }
.combo-opt { display: flex; align-items: center; min-height: 3rem; padding: 0.4rem 0.75rem; border-radius: 0.65rem; border-left: 4px solid transparent; font-size: 1rem; overflow-wrap: anywhere; cursor: pointer; }
.combo-opt[aria-selected='true'] { background: var(--bg-2); border-left-color: var(--accent); font-weight: 600; }

/* Flervalg for mat («Passer til») */
.fp { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.6rem; }
.fp legend { font-weight: 600; font-size: 0.9375rem; padding: 0; margin-bottom: 0.35rem; }
.fp .hint { color: var(--fg-2); font-size: 0.875rem; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.fp-chips[hidden] { display: none; }
.fp-chip { gap: 0.4rem; padding: 0 0.75rem 0 1rem; background: var(--accent); border-color: var(--accent); color: var(--accent-fg); max-width: 100%; }
.fp-chip span { overflow-wrap: anywhere; text-align: left; }
.fp-chip svg { flex: none; width: 1.1rem; height: 1.1rem; }
.fp-none, .fp-empty { margin: 0; }
.fp-list { max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; border: 1.5px solid var(--line-strong); border-radius: 0.9rem; background: var(--card-solid); }
.fp-head { position: sticky; top: 0; z-index: 1; padding: 0.5rem 0.9rem; background: var(--bg-2); font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.fp-opt { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.35rem 0.9rem; cursor: pointer; border-top: 1px solid var(--line); }
.fp-opt[hidden], .fp-group[hidden] { display: none; }
.fp-opt.d1 { padding-left: 1.9rem; }
.fp-opt.d2 { padding-left: 2.9rem; }
.fp-opt .txt { display: grid; min-width: 0; }
.fp-opt .name { overflow-wrap: anywhere; }
.fp-opt { position: relative; }
/* Selve avkrysningsboksen dekker hele raden (usynlig, ≥ 48 px trykkflate); den synlige ruten tegnes av .fp-box */
.fp-check { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fp-box { flex: none; position: relative; width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--line-strong); border-radius: 0.4rem; background: var(--card-solid); }
.fp-check:checked + .fp-box { background: var(--accent); border-color: var(--accent); }
.fp-check:checked + .fp-box::after { content: ''; position: absolute; left: 0.43rem; top: 0.18rem; width: 0.35rem; height: 0.7rem; border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fp-check:disabled + .fp-box { opacity: 0.4; }
.fp-opt:has(.fp-check:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.fp-opt:has(.fp-check:checked) { background: color-mix(in oklch, var(--accent) 12%, transparent); }

/* Lenker i løpende tekst med ≥ 48 px trykkflate */
.tap-link { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 0.25rem; }
.tap-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }