/* Slurkio · glassmorphism (standardstil). Martin valgte «ekstrem» 20.10.2026 22:32, og godkjente dermed gradient som bevisst avvik fra GROK.md §4c.
   Lastes alltid etter app.css og bygger på tokens fra kf-tokens.css (aksent #007EB7 / #67D2FF, Geist). Ingen nye fonter, bilder eller animasjon; logoen er uendret.
   Elementer fra web.kunstigflyt.no: flytende glasspille (nav__bar), glasskort (blur + saturate, kantlinje, innerlys, myk skygge), myke fargeblobber og tett sporing.
   Blur ligger på containere (header, bunnmeny, ark, frittstående kort, ett lag per kortliste), ikke på hvert listeelement.
   Kontrast (WCAG AA) er målt i design-glass/final/RAPPORT.md. Reserve: prefers-reduced-transparency og @supports not (backdrop-filter) gir solide flater. */

/* ---------- Tokens ---------- */
:root {
  --g-filter: blur(20px) saturate(1.6);
  --g-radius: 1.75rem;
  --g-base: #bee6f8;
  --g-bg:
    radial-gradient(60% 38% at 12% 6%, #86d6f8, transparent 70%),
    radial-gradient(55% 36% at 96% 30%, #4fd6c4, transparent 70%),
    radial-gradient(65% 40% at 86% 94%, #ffb48c, transparent 70%),
    radial-gradient(60% 36% at 4% 76%, #a5def8, transparent 70%),
    linear-gradient(180deg, #eaf8fe, #bee6f8);
  --g-surface: rgb(255 255 255 / 0.84);
  --g-tile: rgb(255 255 255 / 0.5);
  --g-bar: rgb(255 255 255 / 0.84);
  --g-sheet: rgb(255 255 255 / 0.93);
  --g-btn2: rgb(255 255 255 / 0.84);
  --g-btnp: rgb(0 98 142 / 0.94);
  --g-inp: rgb(255 255 255 / 0.9);
  --g-head: #e6f3fa;
  --g-btn-fill: #0079b0; /* primærfyll: #007EB7 gir bare 4,50:1 med hvit tekst i grenseland, #0079b0 gir ≥ 4,5:1 med margin */
  --g-edge: rgb(255 255 255 / 0.7);
  --g-hi: inset 0 1px 0 rgb(255 255 255 / 0.8);
  --g-shadow: 0 2px 4px rgb(10 60 90 / 0.08), 0 20px 44px -16px rgb(30 90 140 / 0.16);
  --g-btn-shadow: 0 4px 14px -6px rgb(10 60 90 / 0.3);
  --g-ring: rgb(255 255 255 / 0.6);
  background: var(--g-base);
}
@media (prefers-color-scheme: dark) {
  :root {
    --g-base: #07192a;
    --g-bg:
      radial-gradient(60% 38% at 12% 6%, #0a4f7c, transparent 70%),
      radial-gradient(55% 36% at 96% 30%, #0b5560, transparent 70%),
      radial-gradient(65% 40% at 86% 94%, #7a3e1e, transparent 70%),
      radial-gradient(60% 36% at 4% 76%, #12304a, transparent 70%),
      linear-gradient(180deg, #0a2540, #07192a);
    --g-surface: rgb(8 20 34 / 0.72);
    --g-tile: rgb(255 255 255 / 0.06);
    --g-bar: rgb(8 20 34 / 0.74);
    --g-sheet: rgb(8 20 34 / 0.94);
    --g-btn2: rgb(8 20 34 / 0.72);
    --g-btnp: rgb(103 210 255 / 0.94);
    --g-inp: rgb(8 20 34 / 0.85);
    --g-head: #10283c;
    --g-btn-fill: #67d2ff;
    --g-edge: rgb(255 255 255 / 0.14);
    --g-hi: inset 0 1px 0 rgb(255 255 255 / 0.16);
    --g-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.7);
    --g-btn-shadow: 0 4px 14px -6px rgb(0 0 0 / 0.5);
    --g-ring: rgb(255 255 255 / 0.18);
  }
}

/* ---------- Bakgrunn bak glasset: fast lag av CSS-gradienter ---------- */
body { background: transparent; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--g-bg); pointer-events: none; }
body.scanning { background: #000; }
body.scanning::before { display: none; }

/* ---------- Header: flytende glasspille (som nav__bar på web.kunstigflyt.no) ---------- */
.topbar { position: sticky; top: 0; z-index: 20; pointer-events: none; padding-bottom: 0.25rem; }
.topbar .brand {
  pointer-events: auto; padding: 0 1.1rem 0 0.7rem; border-radius: 999px; background: var(--g-bar); border: 1px solid var(--g-edge);
  box-shadow: var(--g-hi), var(--g-shadow); -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}

/* ---------- Bunnmeny ---------- */
.tabbar .pill {
  border-radius: 999px; background: var(--g-bar); border: 1px solid var(--g-edge); box-shadow: var(--g-hi), var(--g-shadow);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}
.tab.scan { border-color: var(--g-ring); background: var(--g-btn-fill); }

/* ---------- Bunnark (innsjekk, paringer) ---------- */
.sheet-backdrop { background: oklch(0.1 0.01 80 / 0.5); }
.sheet {
  background: var(--g-sheet); border: 1px solid var(--g-edge); border-bottom: 0; border-radius: 2.25rem 2.25rem 0 0;
  box-shadow: var(--g-hi), 0 -12px 44px -12px rgb(10 40 70 / 0.35);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}
.sheet .save-bar { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--g-sheet) 55%, transparent) 1.25rem); }
.sheet .handle { background: var(--fg-3); }

/* ---------- Felt og små kontroller: tydelig kant (UI ≥ 3:1) ---------- */
.input { background: var(--g-inp); border-color: var(--fg-3); border-radius: 1.2rem; }
.input::placeholder { color: var(--fg-2); opacity: 1; }
.switch .track { background: var(--g-inp); border-color: var(--fg-3); }
.switch[aria-checked='true'] .track { background: var(--g-btn-fill); border-color: var(--g-btn-fill); }
.stars-val { color: var(--fg-2); }
.stars-ro { color: var(--accent-text); }
.combo-list { background: var(--g-sheet); border-radius: 1.2rem; }

/* ---------- Typografi fra kf-web ---------- */
.hero h1 { font-weight: 600; letter-spacing: -0.045em; }
.section > h2, .sub { letter-spacing: -0.03em; }
.drink-head h1 { font-weight: 600; letter-spacing: -0.035em; }

/* ---------- Knapper og chips: glass, store radier; primærfyll solid så hvit/mørk tekst består 4,5:1 ---------- */
.btn:not(.primary):not(.quiet), .chip:not([aria-pressed='true']):not(.fp-chip), .round, .vote:not([aria-pressed='true']) {
  background: var(--g-btn2); border-color: var(--g-edge); box-shadow: var(--g-hi), var(--g-btn-shadow);
}
.btn.primary, .chip[aria-pressed='true'], .vote[aria-pressed='true'], .fp-chip { background: var(--g-btnp); border-color: transparent; }
.btn.primary, .chip[aria-pressed='true'], .vote[aria-pressed='true'], .fp-chip, .tab.scan { color: var(--accent-fg); }
.btn.primary { box-shadow: var(--g-hi), 0 8px 22px -8px rgb(0 98 142 / 0.6); }
.btn.quiet { background: var(--g-btn2); border-radius: 999px; }
.hero .btn, .cta .btn { -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter); }

/* ---------- Kort: glass; lister av kort har ett blurlag på containeren, kortene inni er lette felt ---------- */
.card {
  background: var(--g-surface); border: 1px solid var(--g-edge); border-radius: var(--g-radius);
  box-shadow: var(--g-hi), var(--g-shadow); -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}
ul:has(> .card) {
  padding: 0.5rem; border-radius: calc(var(--g-radius) + 0.25rem); background: var(--g-surface); border: 1px solid var(--g-edge);
  box-shadow: var(--g-hi), var(--g-shadow); -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}
ul > .card {
  background: var(--g-tile); border-color: var(--g-edge); border-radius: calc(var(--g-radius) - 0.25rem);
  box-shadow: var(--g-hi); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.banner { background: var(--g-surface); border-color: var(--g-edge); }
.skel { background: var(--g-tile); }
.thumb { background: var(--g-tile); }

/* Tekst uten flate under (kicker, bunntekst, kreditering) får glass, så teksten holder 4,5:1 mot den fargerike bakgrunnen */
.kicker { width: fit-content; justify-self: start; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--g-surface); border: 1px solid var(--g-edge); box-shadow: var(--g-hi); }
.foot, .credit {
  padding: 1rem 1.1rem; border: 1px solid var(--g-edge); border-radius: var(--g-radius); background: var(--g-surface);
  box-shadow: var(--g-hi), var(--g-shadow); -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}
.credit { padding: 0.5rem 1rem; margin: 0.75rem 0 0; }
.credit[hidden] { display: none; }
.credit .tap-link { display: inline; min-height: 0; padding: 1rem 0; } /* løpende tekst; trykkflaten ≥ 48 px via padding */

/* ---------- Flervalg for mat (chips, søk, avkrysning) ---------- */
.fp-list {
  background: var(--g-inp); border: 1px solid var(--g-edge); border-radius: 1.2rem; box-shadow: var(--g-hi);
}
.fp-head { background: var(--g-head); }
.fp-opt { border-top-color: var(--line); }
.fp-box { background: var(--g-inp); border: 1.5px solid var(--fg-3); }
.fp-check:checked + .fp-box { background: var(--g-btn-fill); border-color: var(--g-btn-fill); }
.fp-opt:has(.fp-check:checked) { background: color-mix(in srgb, var(--g-btn-fill) 14%, transparent); }
.fp-chip { box-shadow: var(--g-hi), 0 4px 12px -6px rgb(0 98 142 / 0.6); }

/* ---------- Tilgjengelighet og reserve ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --g-filter: none;
    --g-surface: var(--card-solid); --g-tile: var(--bg-2); --g-bar: var(--card-solid); --g-sheet: var(--card-solid);
    --g-btn2: var(--card-solid); --g-inp: var(--card-solid); --g-btnp: var(--g-btn-fill); --g-edge: var(--line-strong);
  }
  .topbar .brand, .tabbar .pill, .sheet, .card, ul:has(> .card), .btn, .foot, .credit { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --g-surface: var(--card-solid); --g-tile: var(--bg-2); --g-bar: var(--card-solid); --g-sheet: var(--card-solid);
    --g-btn2: var(--card-solid); --g-inp: var(--card-solid); --g-btnp: var(--g-btn-fill); --g-edge: var(--line-strong);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}