/* T464 «Slik virker det». Film-flate. Tokens fra ../tokens.css. Sporing: media/inspo/2026-10-04-how-it-works.md */
:root{--stage-h:100svh;--rail-h:84px}
*{box-sizing:border-box}
html{background:var(--film);-webkit-text-size-adjust:100%;scroll-padding-top:12px}
body{margin:0;background:var(--film);color:var(--cream);font:18px/1.5 var(--font-text);overflow-wrap:anywhere}
a{color:inherit}
::selection{background:var(--lean-600);color:var(--paper)}
.hopp{position:absolute;left:12px;top:-60px;background:var(--cream);color:var(--ink);padding:.6em 1em;z-index:20;font:500 .8rem var(--font-data)}
.hopp:focus{top:8px}
:focus-visible{outline:2px solid var(--lean-400);outline-offset:3px}

/* ---- topp ---- */
.topp{display:flex;align-items:center;padding:16px var(--marg)}
.merke{display:flex;align-items:center;gap:10px;text-decoration:none;font:500 1.25rem var(--font-wordmark);letter-spacing:-.025em;color:var(--cream)}
.merke img{width:32px;height:32px}
.hoyre-topp{display:flex;align-items:center;gap:1.2em}
.hoyre-topp a{font:400 .75rem var(--font-data);letter-spacing:.08em;color:var(--muted-dark);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.hoyre-topp a:hover{color:var(--cream)}
.hoyre-topp .sprak{border:1px solid rgba(232,223,204,.25);padding:0 .8em}
.topp .topnav{margin-left:auto}
.topp .hoyre-topp{margin-left:0}
@media(max-width:760px){.topp .hoyre-topp{margin-left:auto}}

/* ---- hero ---- */
.hero{padding:clamp(36px,8vw,96px) var(--marg) clamp(28px,5vw,56px);max-width:1280px;margin:0 auto}
.hero h1{font:800 clamp(2.6rem,8vw,5.2rem)/1.02 var(--font-display);letter-spacing:-.022em;margin:0 0 .35em;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--lean-400)}
.lede{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.45;color:var(--muted-dark);max-width:44ch;margin:0 0 1.6em}
.key{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:0;list-style:none}
.key li{display:flex;align-items:center;gap:.6em;font:400 .8rem/1.3 var(--font-data);color:var(--muted-dark)}

/* ---- statusmerker: form + tekst, aldri bare farge ---- */
.chip{display:inline-flex;align-items:center;gap:.55em;font:500 .75rem/1 var(--font-data);letter-spacing:.06em;text-transform:uppercase;padding:.55em .8em;border:1px solid var(--edge);color:var(--cream);border-radius:3px;white-space:nowrap}
.chip::before{content:'';width:.7em;height:.7em;flex:none;border:1.5px solid currentColor;box-sizing:border-box}
.chip[data-k=live]::before{background:currentColor}                       /* fylt = bygget og testet */
.chip[data-k=bench]::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)} /* halv = benk */
.chip[data-k=sim]::before{background:linear-gradient(0deg,currentColor 50%,transparent 50%);border-radius:50%} /* halv rund = simulator */
.chip[data-k=planned]{border-style:dashed;color:var(--muted-dark)}
.chip[data-k=planned]::before{border-style:dashed}                          /* stiplet = ikke bygget */
.chip[data-k=live]{border-color:var(--cream)}

/* ---- flyten ---- */
.flow{position:relative;max-width:1280px;margin:0 auto;padding:0 var(--marg)}
.stage{display:none}
.step{padding:clamp(28px,5vw,56px) 0;border-top:1px solid rgba(232,223,204,.14)}
.step .scene{margin:0 0 20px;background:var(--film-2);border:1px solid rgba(232,223,204,.12);border-radius:6px;overflow:hidden}
.scene svg{display:block;width:100%;height:auto}
.txt{max-width:46ch}
.txt h2{font:800 clamp(1.7rem,4.4vw,2.5rem)/1.08 var(--font-display);letter-spacing:-.02em;margin:0 0 .45em}
.txt p{margin:0 0 .9em}
.txt .body{color:var(--cream)}
.status{display:grid;gap:.55em;margin:1.1em 0 0;padding-top:1em;border-top:1px solid rgba(232,223,204,.14)}
.status p{margin:0;font-size:.98rem;color:var(--muted-dark)}
.step .more{margin-top:.8em}
.more a{font:500 .8rem var(--font-data);letter-spacing:.02em;text-decoration:none;color:var(--cream);border-bottom:1px solid var(--lean-400);padding:.5em 0;display:inline-block;min-height:44px}
.more a:hover{color:var(--lean-400)}

/* statisk: to kolonner pr. steg på bred skjerm */
@media(min-width:900px){
  :is(.flow.static,html:not(.js) .flow) .step{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
  :is(.flow.static,html:not(.js) .flow) .step .scene{margin:0}
  :is(.flow.static,html:not(.js) .flow) .step:nth-child(even) .scene{order:2}
}
@media(min-width:900px) and (prefers-reduced-motion:reduce){
  html.js .flow .step{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
  html.js .flow .step .scene{margin:0}
  html.js .flow .step:nth-child(even) .scene{order:2}
}


/* live: festet scene */
.flow.live{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.flow.live .stage{display:block;grid-column:2;grid-row:1;position:sticky;top:0;height:var(--stage-h);align-self:start;padding:clamp(16px,3vh,40px) 0}
.flow.live .steps{grid-column:1;grid-row:1}
.flow.live .step{min-height:92svh;display:flex;align-items:center;border-top:0;opacity:.32;transition:opacity .4s var(--ease-out)}
.flow.live .step[aria-current=step]{opacity:1}
.flow.live .step .scene{display:none}
.flow.live .step:first-child{margin-top:8svh}
.flow.live .step:last-child{min-height:70svh;margin-bottom:12svh}
.stage-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px}
.frame{position:relative;flex:1;min-height:0;max-height:700px;background:var(--film-2);border:1px solid rgba(232,223,204,.14);border-radius:6px;overflow:hidden}
.frame::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(23,21,16,.55)}
.frame .perf{position:absolute;right:8px;top:0;bottom:0;width:8px;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(232,223,204,.16) 14px 24px);-webkit-mask:linear-gradient(#000,#000);opacity:.8}
.stage .scene{position:absolute;inset:0;margin:0;opacity:0;transform:scale(.985);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out);display:flex;align-items:center;justify-content:center}
.stage .scene.on{opacity:1;transform:none}
.stage .scene svg{width:100%;height:100%}
.counter{position:absolute;left:14px;top:12px;z-index:2;font:500 .75rem var(--font-data);letter-spacing:.1em;color:var(--muted-dark);pointer-events:none}
.counter b{color:var(--cream);font-weight:500}
.illu{position:absolute;right:26px;bottom:10px;z-index:2;font:400 .75rem var(--font-data);letter-spacing:.06em;color:var(--muted-dark);pointer-events:none;text-transform:uppercase}

/* skinne */
.rail{list-style:none;margin:0;padding:0;position:relative;display:flex;justify-content:space-between;flex:none;height:var(--rail-h)}
.rail::before{content:'';position:absolute;left:8px;right:8px;top:12px;height:2px;background:rgba(232,223,204,.2)}
.rail::after{content:'';position:absolute;left:8px;top:12px;height:2px;width:calc((100% - 16px)*var(--prog,0));background:var(--lean-500);transition:none}
.rail li{position:relative;z-index:1;flex:1;text-align:center}
.rail li:first-child{text-align:left;flex:0 0 auto}
.rail li:last-child{text-align:right;flex:0 0 auto}
.rail a{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;min-width:44px;min-height:44px;font:400 .75rem/1.15 var(--font-data);letter-spacing:.04em;color:var(--muted-dark);padding-top:5px}
.rail a::before{content:'';width:16px;height:16px;border-radius:50%;background:var(--film);border:2px solid var(--edge);transition:background .25s var(--ease-out),border-color .25s var(--ease-out),transform .25s var(--ease-out)}
.rail li:first-child a{align-items:flex-start}.rail li:last-child a{align-items:flex-end}
.rail a.done::before{border-color:var(--lean-500);background:var(--lean-500)}
.rail a[aria-current=step]{color:var(--cream)}
.rail a[aria-current=step]::before{border-color:var(--lean-400);background:var(--lean-400);transform:scale(1.35)}
.rail a:hover{color:var(--cream)}
.rail .lbl{max-width:9ch;text-align:inherit}

/* scenetekst (SVG) */
.scene text{font-family:var(--font-data);fill:var(--cream)}
.scene .t-mut{fill:var(--muted-dark)}
.scene .t-acc{fill:var(--lean-400)}
.scene .big{font-family:var(--font-display);font-weight:800;font-variant-numeric:tabular-nums}
.scene .ln{fill:none;stroke:var(--cream);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene .ln-m{fill:none;stroke:var(--muted-dark);stroke-width:1.5}
.scene .ln-a{fill:none;stroke:var(--lean-400);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.scene .fill-d{fill:var(--film)}
.scene .fill-2{fill:var(--film-2)}

/* ---- status på papir ---- */
.today{background:var(--paper-surface,var(--paper));color:var(--ink);padding:clamp(48px,8vw,104px) var(--marg);--muted:var(--muted-paper)}
.today-in{max-width:880px;margin:0 auto}
.today h2{font:800 clamp(1.9rem,5vw,3rem)/1.08 var(--font-display);letter-spacing:-.02em;margin:0 0 .4em}
.today .lead{color:var(--muted-paper);max-width:52ch;margin:0 0 1.6em;font-size:1.15rem}
.today table{width:100%;border-collapse:collapse}
.today th,.today td{text-align:left;vertical-align:top;padding:.85em .6em .85em 0;border-bottom:1px solid rgba(31,28,24,.18)}
.today thead th{font:500 .75rem var(--font-data);letter-spacing:.02em;color:var(--muted-paper)}
.today tbody th{font-weight:500;width:34%}
.today .chip{color:var(--ink);border-color:var(--muted-paper)}
.today .chip[data-k=planned]{color:var(--muted-paper)}
.today .chip[data-k=live]{border-color:var(--ink)}
.today td p{margin:0;font-size:.98rem;color:var(--muted-paper)}
.today .note{margin-top:1.6em;font-size:.98rem;color:var(--muted-paper);max-width:60ch}
.today .note a{color:var(--lean-700)}
@media(max-width:640px){
  .today table,.today tbody,.today tr,.today th,.today td{display:block;width:100%}
  .today thead{display:none}
  .today tr{padding:.9em 0;border-bottom:1px solid rgba(31,28,24,.18)}
  .today th,.today td{border:0;padding:.2em 0}
  .today tbody th{width:auto}
}

/* ---- mobil: scenen festes øverst ---- */
@media(max-width:899px){
  :root{--stage-h:46svh;--rail-h:30px}
  .flow.live{display:block;padding-top:0}
  .flow.live .stage{position:sticky;top:0;z-index:5;margin:0 calc(var(--marg)*-1);padding:8px var(--marg) 16px;background:linear-gradient(var(--film) 86%,transparent)}
  .flow.live .step{min-height:80svh;align-items:flex-start;padding-top:clamp(24px,6svh,56px)}
  .flow.live .step:first-child{margin-top:0}
  .rail .lbl{display:none}
  .rail a{padding-top:0}
  .rail{height:30px}
  .rail::before,.rail::after{top:7px}
  .rail a::before{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.flow .step,.stage .scene,.rail a::before{transition:none}}

/* T508: gjør live-oppsettet gjeldende fra første maling (unngår CLS 0,16 når how.js bytter fra storyboard til live) */
@media(prefers-reduced-motion:no-preference){
html.js .flow:not(.static){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
html.js .flow:not(.static) .stage{display:block;grid-column:2;grid-row:1;position:sticky;top:0;height:var(--stage-h);align-self:start;padding:clamp(16px,3vh,40px) 0}
html.js .flow:not(.static) .steps{grid-column:1;grid-row:1}
html.js .flow:not(.static) .step{min-height:92svh;display:flex;align-items:center;border-top:0;opacity:.32;transition:opacity .4s var(--ease-out)}
html.js .flow:not(.static) .step[aria-current=step]{opacity:1}
html.js .flow:not(.static) .step .scene{display:none}
html.js .flow:not(.static) .step:first-child{margin-top:8svh}
html.js .flow:not(.static) .step:last-child{min-height:70svh;margin-bottom:12svh}
@media(max-width:899px){
  html.js .flow:not(.static){display:block;padding-top:0}
  html.js .flow:not(.static) .stage{position:sticky;top:0;z-index:5;margin:0 calc(var(--marg)*-1);padding:8px var(--marg) 16px;background:linear-gradient(var(--film) 86%,transparent)}
  html.js .flow:not(.static) .step{min-height:80svh;align-items:flex-start;padding-top:clamp(24px,6svh,56px)}
  html.js .flow:not(.static) .step:first-child{margin-top:0}
}
}