/* The Wait Is Over – gullkortet
   Tokens og typografi fra KFC-designsystemet (tokens.json / bundle.css).
   Finner-flyten står på rødt lerret (surface-red), dashbordet på «Standard (hvit)». */

@font-face { font-family: "Kentucky Fried Serif"; src: url("assets/fonts/KentuckyFriedSerif-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("assets/fonts/KentuckyFriedSerif-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("assets/fonts/KentuckyFriedSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("assets/fonts/KentuckyFriedSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("assets/fonts/KentuckyFriedSerif-HeavyItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Kentucky Fried Sans"; src: url("assets/fonts/KentuckyFriedSans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Sans"; src: url("assets/fonts/KentuckyFriedSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Stripes"; src: url("assets/fonts/KentuckyFriedStripes-Heavy.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --kfc-red: #f5002b;
  --kfc-white: #ffffff;
  --kfc-black: #000000;
  --kfc-herbs: #bfe036;
  --kfc-spices: #ff9b17;

  --font-serif: "Kentucky Fried Serif", Optima, Candara, "Segoe UI", sans-serif;
  --font-sans: "Kentucky Fried Sans", "Helvetica Neue", Arial, sans-serif;
  --font-stripes: "Kentucky Fried Stripes", "Arial Black", Impact, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-none: 0; --radius-sm: 4px;

  /* Bevegelse */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 160ms;
  --dur: 420ms;
  --dur-slow: 700ms;
}

/* Rødt lerret: finner-flyten */
body[data-theme="red"] {
  --surface: var(--kfc-red);
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, .78);
  --line: rgba(255, 255, 255, .32);
  --line-strong: rgba(255, 255, 255, .6);
  --field: #ffffff;
  --field-ink: #000000;
  --field-muted: #666666;
  --action: #000000;
  --on-action: #ffffff;
  --action-hover: #ffffff;
  --on-action-hover: #000000;
  --accent-block: #000000;
  --on-accent-block: #ffffff;
  --error: #000000;
  --focus-ring: #ffffff;
  --link: #ffffff;
}

/* Svart lerret: forsiden med gullkortet */
body[data-theme="black"] {
  --surface: #000000;
  --ink: #ffffff;
  --ink-muted: rgba(255, 255, 255, .62);
  --line: rgba(255, 255, 255, .2);
  --line-strong: rgba(255, 255, 255, .5);
  --field: #ffffff;
  --field-ink: #000000;
  --field-muted: #666666;
  --action: #ffffff;
  --on-action: #000000;
  --action-hover: var(--kfc-red);
  --on-action-hover: #ffffff;
  --accent-block: var(--kfc-red);
  --on-accent-block: #ffffff;
  --error: #ff5c5c;
  --focus-ring: #ffffff;
  --link: #ffffff;
}
body[data-theme="black"] .t-subheading { color: var(--ink-muted); }

/* Hvitt lerret: dashbord */
body[data-theme="light"] {
  --surface: #ffffff;
  --ink: #000000;
  --ink-muted: #666666;
  --line: #e5e5e5;
  --line-strong: #8c8c8c;
  --field: #fafafa;
  --field-ink: #000000;
  --field-muted: #666666;
  --action: var(--kfc-red);
  --on-action: #ffffff;
  --action-hover: #000000;
  --on-action-hover: #ffffff;
  --error: var(--kfc-red);
  --focus-ring: #000000;
  --link: #000000;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease-out);
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Typografi (navn fra tokens.json) */
.t-display, .t-heading, .t-heading-s, .t-caption, .t-cta {
  font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: uppercase; margin: 0;
}
.t-display { font-size: clamp(44px, 12vw, 60px); line-height: .92; }
.t-heading { font-size: clamp(32px, 9vw, 44px); line-height: .95; }
.t-heading-s { font-size: 24px; line-height: 1; }
.t-subheading { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: 24px; line-height: 1.25; margin: 0; color: var(--ink-muted); }
.t-caption { font-size: 13px; line-height: 16px; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; margin: 0; }
.t-meta { font-family: var(--font-sans); font-size: 13px; line-height: 18px; margin: 0; }
.t-muted { color: var(--ink-muted); }

/* Lettermark: den leverte SVG-filen, farget via mask (filen endres ikke). */
.lettermark {
  display: inline-block; width: 56px; aspect-ratio: 526.4192 / 179.8894; flex: none;
  background: var(--ink);
  -webkit-mask: url("assets/img/kfc-lettermark-red.svg") no-repeat center / contain;
  mask: url("assets/img/kfc-lettermark-red.svg") no-repeat center / contain;
}
body[data-theme="light"] .lettermark { background: var(--kfc-red); }
body[data-theme="red"] .t-subheading { color: #000; }

/* Knapper */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 52px; padding: 0 var(--space-6); width: 100%;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: uppercase;
  font-size: 19px; line-height: 24px; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: 80ms; }
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--primary:hover { background: var(--action-hover); color: var(--on-action-hover); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); }
.btn--auto { width: auto; }
.btn--sm { min-height: 40px; font-size: 16px; padding: 0 var(--space-4); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Lasting i knapp */
.btn .btn__label { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn .btn__spinner {
  position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0; transform: translateY(4px); }
.btn.is-loading .btn__spinner { opacity: 1; transform: scale(1); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Badge */
.badge {
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 12px; line-height: 16px;
}
.badge--red { background: var(--kfc-red); color: #ffffff; }
.badge--outline { border: 1px solid var(--line-strong); color: var(--ink); }

/* ---------- Finner-flyt (mobil først) ---------- */
.finder { min-height: 100vh; display: flex; flex-direction: column; }
.finder__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-6) 0; min-height: 56px; }
.back { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: #000; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finder__main { flex: 1; width: 100%; max-width: 440px; margin: 0 auto; padding: var(--space-12) var(--space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--space-12); }
.finder__footer { padding: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }
.finder__footer p { margin: 0; font-size: 12px; line-height: 16px; }

.hero { display: flex; flex-direction: column; gap: var(--space-3); }
.hero .t-display, .hero .t-heading { text-wrap: balance; }

/* Inntoning: hvert barn får --i fra JS */
.finder__main > *, .finder__top > *, .finder__footer > *, .form > *, .code-form > * {
  animation: rise var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.form > *, .code-form > * { animation-delay: calc(140ms + var(--i, 0) * 50ms); }
.finder__footer > * { animation-delay: 400ms; animation-duration: var(--dur); }
.finder__top > * { animation-name: fade; animation-duration: var(--dur); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Uttoning ved skjermbytte */
.finder.is-leaving { animation: leave var(--dur-fast) var(--ease-out) both; }
@keyframes leave { to { opacity: 0; transform: translateY(-6px); } }

/* Kodeinntasting */
.code-form { display: flex; flex-direction: column; gap: var(--space-3); }
.code-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.code-cell { position: relative; }
.code-box {
  width: 100%; height: 84px; text-align: center; text-transform: uppercase;
  font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 44px; line-height: 1; padding: 0;
  background: var(--field); color: var(--field-ink); border: 2px solid transparent; border-radius: var(--radius-sm);
  caret-color: transparent; outline: none; position: relative;
  transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.code-box::selection { background: transparent; }
/* Tom rute i ro: en dempet prikk */
.code-box:placeholder-shown:not(:focus) { background-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,.16) 3px, transparent 3.5px); }
/* Aktiv rute løfter seg */
.code-box.is-active { transform: translateY(-4px); border-color: #000; box-shadow: 0 18px 30px -12px rgba(0,0,0,.45); }
/* Egen markør */
.caret {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 40px; margin: -20px 0 0 -1.5px; border-radius: 2px;
  background: var(--kfc-red); opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.code-cell.is-active.is-empty .caret { opacity: 1; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
/* Tegn kommer inn */
.code-box.is-filled { animation: land 320ms var(--ease-spring); }
@keyframes land { 0% { transform: scale(.92) translateY(6px); } 55% { transform: scale(1.05) translateY(-2px); } 100% { transform: none; } }
/* Fremdrift under rutene */
.code-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); height: 3px; margin-top: calc(-1 * var(--space-1)); }
.code-progress span { display: block; height: 100%; background: rgba(0,0,0,.18); border-radius: 2px; transform-origin: left center; position: relative; overflow: hidden; }
.code-progress span::after { content: ""; position: absolute; inset: 0; background: #000; transform: scaleX(0); transform-origin: left center; transition: transform 320ms var(--ease-out); }
.code-progress span.on::after { transform: scaleX(1); }
/* Riktig kode: rutene blir svarte én etter én */
.code-box.is-success { background: #000; color: #fff; border-color: #000; transform: none; box-shadow: none; transition-delay: calc(var(--i, 0) * 70ms); }
.code-form.is-success .code-progress span::after { background: #fff; }
/* Feil kode */
.code-form.is-error .code-boxes { animation: shake 420ms var(--ease-out); }
.code-form.is-error .code-box { border-color: var(--error); }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); }
}
.field-error { color: var(--error); font-family: var(--font-sans); font-size: 14px; line-height: 20px; margin: 0; animation: rise var(--dur) var(--ease-out) both; }
.code-form .btn { margin-top: var(--space-2); }
.field-error { color: var(--error); font-family: var(--font-sans); font-size: 14px; line-height: 20px; margin: 0; animation: rise var(--dur) var(--ease-out) both; }

/* Skjema */
.form { display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field label { font-family: var(--font-sans); font-size: 14px; line-height: 18px; color: var(--ink); }
.field input { width: 100%; min-width: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"] {
  min-height: 52px; padding: 0 var(--space-4); font: inherit; font-size: 16px;
  color: var(--field-ink); background: var(--field); border: 1px solid transparent; border-radius: var(--radius-sm);
  color-scheme: light; outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder { color: var(--field-muted); }
.field input:focus { box-shadow: 0 0 0 3px rgba(0,0,0,.35); }
.field.is-error input { border-color: var(--error); animation: shake 420ms var(--ease-out); }
.field .err { color: var(--error); font-size: 13px; line-height: 18px; display: none; }
.field.is-error .err { display: block; animation: rise var(--dur) var(--ease-out) both; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.checks { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-3); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; cursor: pointer; }
.check input {
  appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid #000; border-radius: var(--radius-sm);
  background: transparent; display: grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.check input::after {
  content: ""; width: 11px; height: 6px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform var(--dur-fast) var(--ease-spring);
}
.check input:checked { background: #000; animation: pop 260ms var(--ease-spring); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }

.check span { font-size: 15px; line-height: 20px; color: var(--ink); }
.check.is-error input { border-color: var(--error); box-shadow: 0 0 0 3px rgba(0,0,0,.25); }

/* Bekreftelse: hvitt panel med detaljene, som feltene i onboardingen */
.summary { background: var(--field); color: var(--field-ink); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-4); }
.summary__row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid #ececec; }
.summary__row:last-child { border-bottom: 0; }
.summary__row span { font-size: 13px; line-height: 16px; color: var(--field-muted); }
.summary__row strong { font-weight: 400; font-size: 16px; line-height: 22px; }

.kentucky {
  background: var(--accent-block); color: var(--on-accent-block); padding: var(--space-8) var(--space-6);
  margin-inline: calc(-1 * var(--space-6)); display: flex; flex-direction: column; gap: var(--space-3);
  animation: reveal var(--dur-slow) var(--ease-spring) 900ms both !important;
}
.kentucky .t-display, .kentucky .t-subheading { color: var(--on-accent-block); }
@keyframes reveal { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Onboarding (wizard) ---------- */
.wizard { display: flex; flex-direction: column; gap: var(--space-8); }
.wizard__progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); height: 3px; }
.wizard__progress span { display: block; height: 100%; background: rgba(0,0,0,.18); border-radius: 2px; position: relative; overflow: hidden; }
.wizard__progress span::after { content: ""; position: absolute; inset: 0; background: #000; transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--ease-out); }
.wizard__progress span.on::after { transform: scaleX(1); }
.wizard__viewport { position: relative; }
.step { display: flex; flex-direction: column; gap: var(--space-8); animation: stepIn var(--dur) var(--ease-out) both; }
.step.is-out { animation: stepOut var(--dur-fast) var(--ease-out) both; pointer-events: none; }
.step.is-back { animation-name: stepInBack; }
.step.is-out.is-back { animation-name: stepOutBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes stepOut { to { opacity: 0; transform: translateX(-20px); } }
@keyframes stepInBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes stepOutBack { to { opacity: 0; transform: translateX(20px); } }
.step .hero { gap: var(--space-3); }
.step__fields { display: flex; flex-direction: column; gap: var(--space-3); }
.step__actions { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.step .btn { width: 100%; }
.skip { background: none; border: 0; padding: var(--space-2); font: inherit; font-size: 14px; color: rgba(0,0,0,.75); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.skip:hover { color: #000; }
/* Inntoning gjelder ikke inni steg (de har egen animasjon) */
.step > * { animation: none; }
.finder__main > .wizard { animation: fade var(--dur) var(--ease-out) both; }

/* ---------- Datovelger: bunnark med tre hjul ---------- */
.field-btn {
  width: 100%; min-height: 52px; padding: 0 var(--space-4); text-align: left; font: inherit; font-size: 16px;
  color: var(--field-ink); background: var(--field); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.field-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,.35); outline: none; }
.field-btn.is-empty { color: var(--field-muted); }
.field-btn svg { width: 20px; height: 20px; flex: none; color: #000; }
.field.is-error .field-btn { border-color: var(--error); animation: shake 420ms var(--ease-out); }

.sheet-root { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet-root::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: fade var(--dur) var(--ease-out) both; }
.sheet-root.is-closing::before { animation: fadeOut var(--dur-fast) var(--ease-out) both; }
.sheet {
  position: relative; width: 100%; max-width: 520px; background: #fff; color: #000;
  border-radius: 16px 16px 0 0; padding: var(--space-3) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--space-4);
  animation: sheetUp var(--dur) var(--ease-out) both; box-shadow: 0 -20px 60px rgba(0,0,0,.25);
}
.sheet-root.is-closing .sheet { animation: sheetDown var(--dur-fast) var(--ease-out) both; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetDown { to { transform: translateY(100%); } }
@keyframes fadeOut { to { opacity: 0; } }
.sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: #e5e5e5; margin: 0 auto; }
.sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sheet__title { font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 20px; line-height: 1; margin: 0; }
.sheet__age { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: #666; font-variant-numeric: tabular-nums; transition: color var(--dur-fast) var(--ease-out); }
.sheet__age.is-under { color: var(--kfc-red); }
.sheet .btn--primary { background: #000; color: #fff; }
.sheet .btn--primary:hover { background: var(--kfc-red); color: #fff; }

.wheels { position: relative; display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: var(--space-2); height: 220px; }
.wheels::before {
  content: ""; position: absolute; left: 0; right: 0; top: 88px; height: 44px; border-radius: 8px;
  background: #f2f2f2; pointer-events: none;
}
.wheel {
  position: relative; height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
  padding: 88px 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.wheel::-webkit-scrollbar { display: none; }
.wheel__item {
  height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center;
  font-family: var(--font-sans); font-size: 18px; line-height: 1; color: #8c8c8c; font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); cursor: pointer; user-select: none;
}
.wheel__item.is-selected { color: #000; font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 22px; }

@media (min-width: 720px) {
  .sheet-root { align-items: center; }
  .sheet { border-radius: 12px; padding-bottom: var(--space-6); animation-name: reveal; }
  .sheet-root.is-closing .sheet { animation-name: fadeOut; }
  .sheet__grab { display: none; }
}

/* ---------- Dashbord ---------- */
.dash { min-height: 100vh; display: flex; flex-direction: column; }
.dash__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dash__top-left { display: flex; align-items: center; gap: var(--space-4); }
.dash__main { flex: 1; padding: var(--space-8) var(--space-6) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); max-width: 1280px; width: 100%; margin: 0 auto; }
.dash__main > * { animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.dash__head { display: flex; flex-direction: column; gap: var(--space-2); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
.stat { border: 1px solid var(--line); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.stat:hover { border-color: var(--ink); transform: translateY(-1px); }
.stat__num { font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: 48px; line-height: .95; font-variant-numeric: tabular-nums; }
.stat__num--red { color: var(--kfc-red); }
.stat__label { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chip:hover { border-color: var(--ink); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.toolbar__right { display: flex; gap: var(--space-2); align-items: center; }
.toolbar__right input {
  min-height: 40px; padding: 0 var(--space-3); font: inherit; font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--field); color: var(--ink); min-width: 220px; outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.toolbar__right input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table.cards { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; min-width: 980px; }
.cards th, .cards td { text-align: left; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.cards th { font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 13px; line-height: 16px; background: var(--surface); position: sticky; top: 0; }
.cards tbody tr { animation: rise var(--dur) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 18ms); transition: background var(--dur-fast) var(--ease-out); }
.cards tbody tr:hover { background: #fafafa; }
.cards td.num { font-variant-numeric: tabular-nums; }
.cards td.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .15em; }
.cards td .sub { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; white-space: normal; }
.cards td.actions { text-align: right; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn + .link-btn { margin-left: var(--space-3); }
.empty { padding: var(--space-8); text-align: center; color: var(--ink-muted); }

.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; }
.status::before { content: ""; width: 10px; height: 10px; background: var(--line-strong); }
.status--reserved::before { background: var(--line); border: 1px solid var(--line-strong); }
.status--hidden::before { background: var(--line-strong); }
.status--scanned::before { background: var(--kfc-spices); }
.status--claimed::before { background: var(--kfc-red); }
.status--void::before { background: #000; }

dialog { border: 0; padding: 0; background: var(--surface); color: var(--ink); max-width: 520px; width: calc(100% - 32px); }
dialog[open] { animation: reveal var(--dur) var(--ease-spring) both; }
dialog::backdrop { background: rgba(0,0,0,.5); animation: fade var(--dur) var(--ease-out) both; }
.dialog__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.dialog__body dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: 14px; }
.dialog__body dt { color: var(--ink-muted); }
.dialog__body dd { margin: 0; }
.dialog__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

.gate { min-height: 100vh; display: grid; place-items: center; padding: var(--space-4); }
.gate__box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-6); border: 1px solid var(--line); padding: var(--space-8); animation: reveal var(--dur-slow) var(--ease-out) both; }

/* ---------- Dashbord: rediger kort ---------- */
.edit { display: flex; flex-direction: column; gap: var(--space-3); }
.edit .field label { font-size: 13px; color: var(--ink-muted); }
.edit select { width: 100%; min-height: 48px; padding: 0 var(--space-3); font: inherit; font-size: 16px; background: var(--field); color: var(--field-ink); border: 1px solid var(--line-strong); border-radius: var(--radius-none); }
.edit .check { padding-top: var(--space-2); }
.edit .btn { align-self: flex-start; }
.table-wrap .link-btn { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; text-decoration: none; }
.table-wrap .actions .link-btn { font-family: inherit; font-size: inherit; text-decoration: underline; }
.gate__box .field input[type="email"] { width: 100%; }


/* ---------- Forside: 3D-gullkort ---------- */
.finder__main--home { max-width: none; padding: 0; gap: 0; justify-content: flex-start; }
.finder__main--home > * { animation: none; }
.stage { height: 220vh; position: relative; }
.stage__sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 5vh, 48px); padding: 72px var(--space-6) var(--space-12); overflow: hidden; }

.scene { position: relative; perspective: 1400px; width: min(92vw, 480px); aspect-ratio: 1.3; flex: none; }
.scene__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; pointer-events: none; z-index: 0; }
.stage__sticky > .scene, .stage__sticky > .beats { position: relative; z-index: 1; }
.stage__sticky > .scroll-hint { z-index: 1; }
.scene--gl .card3d { display: none; }
.scene:not(.scene--gl) .card3d { filter: none; }
.scene:not(.scene--gl) { filter: drop-shadow(0 40px 50px rgba(0,0,0,.6)); }
.card3d {
  position: absolute; left: 0; right: 0; top: 50%; width: 100%; aspect-ratio: 1.586; margin-top: -31.5%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -24deg));
  will-change: transform;
}
.card3d__face {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  color: #3a2a06;
  background:
    linear-gradient(135deg, #9a7210 0%, #e8c66a 22%, #f7e6ad 36%, #c89a2a 52%, #f3d885 66%, #b4841a 82%, #e2bf5e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 0 2px rgba(120,80,0,.25);
}
/* Børstet metall */
.card3d__face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 2px);
  mix-blend-mode: overlay;
}
/* Lysrefleks som følger rotasjonen */
.card3d__face::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.55) 47%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.4) 53%, transparent 62%);
  transform: translateX(var(--shine, 0%));
  mix-blend-mode: soft-light; opacity: .9;
}
.card3d__edge { position: absolute; inset: 0; border-radius: 16px; background: linear-gradient(180deg, #7a5a0e, #b8891c 50%, #6e500a); transform: translateZ(0); }
.card3d__face--front { transform: translateZ(1.6px); padding: 7% 7.5%; display: flex; flex-direction: column; justify-content: space-between; }
.card3d__face--back { transform: rotateY(180deg) translateZ(1.6px); padding: 7% 7.5%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto; gap: 4% 6%; align-items: end; }

.card3d__mark { width: 17%; background: #fff; filter: drop-shadow(0 1px 1px rgba(80,50,0,.45)); }
.card3d__title {
  margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 8.6vw, 42px); line-height: .9; letter-spacing: .01em;
  color: #8a6512;
  text-shadow: 0 1px 0 rgba(255,245,210,.85), 0 -1px 0 rgba(70,45,0,.55), 0 2px 3px rgba(0,0,0,.12);
}
.card3d__row { display: flex; justify-content: space-between; font-family: var(--font-sans); font-size: clamp(10px, 2.6vw, 12px); letter-spacing: .16em; text-transform: uppercase; color: #6f5210; text-shadow: 0 1px 0 rgba(255,245,210,.7); }

.card3d__qr {
  grid-row: 1 / 3; width: clamp(72px, 24vw, 110px); aspect-ratio: 1; background: #fff; border-radius: 6px; padding: 7%;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  background-image:
    linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000),
    repeating-linear-gradient(0deg, #000 0 9%, transparent 9% 18%),
    repeating-linear-gradient(90deg, #000 0 9%, transparent 9% 18%);
  background-size: 26% 26%, 26% 26%, 26% 26%, 44% 44%, 44% 44%;
  background-position: 8% 8%, 92% 8%, 8% 92%, 90% 90%, 90% 90%;
  background-repeat: no-repeat; background-blend-mode: normal, normal, normal, multiply, multiply;
  background-color: #fff; background-clip: content-box;
}
.card3d__scratch {
  grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin-top: 2%;
  width: 62%; aspect-ratio: 3.2; border-radius: 6px;
  background: linear-gradient(135deg, #cfcfcf, #f2f2f2 40%, #b8b8b8 70%, #e6e6e6);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2);
  display: grid; place-items: center;
  font-family: var(--font-sans); font-size: clamp(9px, 2.4vw, 11px); letter-spacing: .18em; text-transform: uppercase; color: #555;
}
.card3d__hint { grid-column: 2; grid-row: 2; margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 700; font-size: clamp(13px, 3.6vw, 17px); line-height: 1.1; color: #8a6512; text-shadow: 0 1px 0 rgba(255,245,210,.8); }
.card3d__legal { grid-column: 1 / -1; grid-row: 3; margin: 0; font-family: var(--font-sans); font-size: clamp(7px, 1.9vw, 9px); letter-spacing: .04em; color: #6f5210; }

.beats { position: relative; width: min(86vw, 420px); min-height: 150px; flex: none; }
.beat { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--space-3); opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); pointer-events: none; }
.beat.is-on { opacity: 1; transform: none; }
.beat .t-display { font-size: clamp(38px, 10vw, 56px); }
.beat .t-subheading { font-size: 20px; }

.scroll-hint { position: absolute; left: 50%; bottom: 18px; width: 22px; height: 34px; margin-left: -11px; border: 2px solid rgba(255,255,255,.7); border-radius: 12px; transition: opacity var(--dur) var(--ease-out); }
.scroll-hint span { position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; background: #fff; border-radius: 2px; animation: scrollhint 1.6s var(--ease-out) infinite; }
.scroll-hint.is-hidden { opacity: 0; }
@keyframes scrollhint { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

@media (min-width: 720px) {
  .scene { width: min(60vw, 600px); }
  .card3d__title { font-size: 52px; }
  .beats { width: min(60vw, 520px); }
}

@media (min-width: 720px) {
  .code-box { height: 96px; font-size: 52px; }
  .caret { height: 48px; margin-top: -24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}