/* Look-lag for webappen (W5, Opus). Kilde: gas--app v9 (design/app/app.mal.html) og W5a (design/w5a/). Klasser og DOM:
   docs/klient/kontrakt-v1.md §3; bevegelse §5; avvik fra v9 bare etter §6. Notat: design/w5/NOTAT.md.

   Token-blokkene under er de eneste #app-reglene (kontrastporten, W2b). Fargeverdiene er v9 ordrett (mal:98-103 L1,
   mal:117-122 M2). L1-blokka bærer i tillegg typografi, mål, glass og bevegelse; M2 bare farger. Ingen kommentarer inne
   i blokkene (porten deler dem på semikolon).
   - Typografi (A6): roten følger systemets tekststørrelse (iOS: -apple-system-body, ellers 17 px ved standard). Rollene
     vokser med --vekst = rem over 17 px, med gulv i v9-størrelsen og tak på 1,6 × brødtekst (10,2 px); titler vokser
     saktere enn brødtekst, som Dynamic Type.
   - Mål: trykkflater --ctl/--btn/--hit (56/60/44, MP-A1); safe area fra env() (AV-21), aldri under 8/12 px;
     maks-bredde --maks (A5, AV-20) som kolonne midt i #app; --kant-v/--kant-h er margen utenfor kolonnen.
   - Bevegelse (§5): varighetene W4a2-motoren leser (--d-fade, --d-ark-opp, --d-ark-ned, --d-dlg) og resten av v9s tall.
   - l.html har id="app" på <main> (W4a5), så token-blokkene og mørk modus gjelder også der. */
#app{
  --bg:#EAEEF3; --surface:#F6F8FA; --surface-2:#E0E4E9; --track:#C8CCD1; --ink:#0D151C; --ink-2:#434B54;
  --accent:#1B33D6; --on-accent:#FFFFFF; --kvitt-fyll:#1B33D6; --on-kvitt:#FFFFFF;
  --prim-fyll:#0D151C; --prim-tekst:#EAEEF3; --sek-fyll:#0D151C; --sek-tekst:#EAEEF3;
  --brand:#123865; --brand-flate:#123865; --sj-bla:#029DE0; --sj-gronn:#88B33D; --sj-m-bla:#029DE0; --sj-m-gronn:#88B33D; --sj-sort:#000000; --sj-hvit:#FFFFFF; --on-brand:#EAEEF3; --on-brand-tekst:#EAEEF3;
  --p-dag:#085491; --p-uke:#005E78; --p-mnd:#7B4C00; --p-ar:#5E457A;
  --destructive:#B7191C; --glass:#E0E4E9CC; --glass-kant:#C8CCD1; --scrim:#0D151C52; --avvik:#F5C400; --papir:#FFFFFF;
  --hj-knott:#FFFFFF; --hj-knott-skygge:#00000033;
  --vekst:clamp(0px, calc(1rem - 17px), 10.2px);
  --t-hero:calc(40px + var(--vekst) * .5); --l-hero:calc(44px + var(--vekst) * .55);
  --t-title:calc(28px + var(--vekst) * .6); --l-title:calc(34px + var(--vekst) * .7);
  --t-sec:calc(22px + var(--vekst) * .8); --l-sec:calc(28px + var(--vekst) * .95);
  --t-name:calc(20px + var(--vekst)); --l-name:calc(26px + var(--vekst) * 1.25);
  --t-row:calc(19px + var(--vekst)); --l-row:calc(24px + var(--vekst) * 1.25);
  --t-body:calc(17px + var(--vekst)); --l-body:calc(22px + var(--vekst) * 1.25);
  --t-sub:calc(15px + var(--vekst)); --l-sub:calc(20px + var(--vekst) * 1.25);
  --ctl:56px; --btn:60px; --hit:44px; --tick:32px; --pad:20px; --radius:16px;
  --maks:560px;
  --safe-top:max(env(safe-area-inset-top, 0px), 8px); --safe-bottom:max(env(safe-area-inset-bottom, 0px), 12px);
  --kant-v:max(env(safe-area-inset-left, 0px), calc((100% - var(--maks)) / 2));
  --kant-h:max(env(safe-area-inset-right, 0px), calc((100% - var(--maks)) / 2));
  --glass-filter:blur(18px) saturate(1.8);
  --ease:cubic-bezier(.2,.8,.2,1); --d-zoom:250ms; --d-tilbake:187.5ms; --d-fade:150ms;
  --d-ark-opp:280ms; --d-ark-ned:200ms; --d-dlg:200ms; --d-kvitt:240ms; --d-trykk:120ms; --d-nikk:240ms;
  color-scheme:light
}
#app[data-tema="mork"]{
  --bg:#1F262E; --surface:#283038; --surface-2:#323A42; --track:#494F56; --ink:#E8ECEF; --ink-2:#BFC5CA;
  --accent:#A6BCFE; --on-accent:#000000; --kvitt-fyll:#A6BCFE; --on-kvitt:#000000;
  --prim-fyll:#2C4F94; --prim-tekst:#E8ECEF; --sek-fyll:#323A42; --sek-tekst:#E8ECEF;
  --brand:#A6C7F1; --brand-flate:#063365; --sj-bla:#0287C1; --sj-gronn:#779E35; --on-brand:#A6C7F1; --on-brand-tekst:#A6C7F1;
  --p-dag:#8CC3FC; --p-uke:#77CCE6; --p-mnd:#EABB79; --p-ar:#CAB1E8;
  --destructive:#FF7A6E; --glass:#323A42CC; --glass-kant:#494F56; --scrim:#060C138C; --avvik:#FFD43B; --papir:#FFFFFF;
  color-scheme:dark
}
@media (prefers-color-scheme: dark){
#app:not([data-tema]){
  --bg:#1F262E; --surface:#283038; --surface-2:#323A42; --track:#494F56; --ink:#E8ECEF; --ink-2:#BFC5CA;
  --accent:#A6BCFE; --on-accent:#000000; --kvitt-fyll:#A6BCFE; --on-kvitt:#000000;
  --prim-fyll:#2C4F94; --prim-tekst:#E8ECEF; --sek-fyll:#323A42; --sek-tekst:#E8ECEF;
  --brand:#A6C7F1; --brand-flate:#063365; --sj-bla:#0287C1; --sj-gronn:#779E35; --on-brand:#A6C7F1; --on-brand-tekst:#A6C7F1;
  --p-dag:#8CC3FC; --p-uke:#77CCE6; --p-mnd:#EABB79; --p-ar:#CAB1E8;
  --destructive:#FF7A6E; --glass:#323A42CC; --glass-kant:#494F56; --scrim:#060C138C; --avvik:#FFD43B; --papir:#FFFFFF;
  color-scheme:dark
}
}

/* ================= grunnlag ================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* A6: roten er systemets brødtekst. Uten -apple-system-body (Android, desktop) gir 106,25 % 17 px ved standard. */
html{font-size:106.25%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (font: -apple-system-body){html{font:-apple-system-body}}
html,body{height:100%;overscroll-behavior:none}
[hidden]:not(.ark):not(.dlg){display:none!important}

/* #app: hele viewporten; lagene og modalene ligger absolutt, bunnstabelen og dokka i et grid nederst (K §3.8).
   Kolonner: kant | pad | innhold | knapp | pad | kant. Rader: fyll + én rad per stabelelement i låst rekkefølge. */
.app{
  position:fixed;inset:0;overflow:hidden;overflow:clip;isolation:isolate;container:app / inline-size;
  display:grid;grid-template-columns:var(--kant-v) var(--pad) minmax(0,1fr) auto var(--pad) var(--kant-h);
  grid-template-rows:[fyll] minmax(0,1fr) [synk] auto [melding] auto [prov] auto [stotte] auto [dokk] auto [slutt];
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,system-ui,sans-serif;font-size:var(--t-body);line-height:var(--l-body);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent
}
.app :where(button,a){font:inherit;color:inherit;background:none;border:0;text-align:left;text-decoration:none;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.app :where(input){font:inherit;color:inherit}
.app :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.app [tabindex="-1"]:focus{outline:none}
/* fokusringen følger formen: runde kontroller rund, rader og tekstknapper myke hjørner (v9) */
.dag,.who,.ring,.pil{border-radius:50%}
.lukk,.unit-link,.datebtn,.open,.step,.unit{border-radius:12px}
.varsel{border-radius:var(--radius)}
.ik{display:block;flex:none}
.n{color:var(--ink);font-weight:700}

/* chevron (FORMER.chevron peker mot høyre, kvadratisk boks): størrelse og strek per bruk gir v9s mål ved standard tekst;
   chevroner i tekst måles i em og vokser med teksten, som SF Symbols */
.chev{display:block;flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.unit>.chev{width:.824em;height:.824em;color:var(--ink-2);margin:0 -3px}
.name .chev,.dnavn .chev{display:inline-block;width:.6em;height:.6em;margin-left:.15em;vertical-align:.05em;color:var(--ink-2)}
.krad b .chev,.vtittel .chev{display:inline-block;width:.706em;height:.706em;margin-left:.18em;vertical-align:.06em;color:var(--ink-2)}
.unit-link .chev,.datebtn .chev{width:.706em;height:.706em;stroke-width:2.9;transform:rotate(90deg)}
.backbtn .chev{width:15px;height:15px;stroke-width:1.65;transform:rotate(180deg)}
.pil .chev{width:15px;height:15px;stroke-width:2.3}
.pil[data-a="kal-forrige"] .chev{transform:rotate(180deg)}

/* ================= lag (skjermer) og overganger (§5 M1–M3) ================= */
.lag{position:absolute;inset:0;isolation:isolate;background:var(--bg);transform-origin:var(--ox,50%) var(--oy,50%);
  transition:transform var(--dur,var(--d-zoom)) var(--ease),opacity var(--dur,var(--d-zoom)) var(--ease),visibility 0s}
.lag.av{visibility:hidden;opacity:0;pointer-events:none;
  transition:transform var(--dur,var(--d-zoom)) var(--ease),opacity var(--dur,var(--d-zoom)) var(--ease),visibility 0s linear var(--dur,var(--d-zoom))}
.lag.foran{transform:scale(.86)}
.lag.bak{transform:scale(1.05)}
.lag.stille,.lag.stille.av{transition:none}
.lag.kopi{z-index:2;pointer-events:none;transition:opacity var(--d-fade) var(--ease)}
.lag.kopi.ut{opacity:0}
/* innholdet ruller i hele bredden; kolonnen er padding, så rullingen virker også utenfor den på brede skjermer */
.view{position:absolute;inset:var(--safe-top) 0 var(--safe-bottom);overflow-y:auto;overscroll-behavior:contain;
  padding:0 calc(var(--kant-h) + var(--pad)) calc(max(var(--dock-h,0px) - var(--safe-bottom), 0px) + 24px) calc(var(--kant-v) + var(--pad))}

/* ================= typografi (roller fra v9, størrelser fra tokens) ================= */
.hero{font-size:var(--t-hero);line-height:var(--l-hero);font-weight:700;letter-spacing:-.03em}
.title{min-width:0;font-size:var(--t-title);line-height:var(--l-title);font-weight:700;letter-spacing:-.025em;overflow-wrap:anywhere}
.title.lang{font-size:calc(var(--t-title) - 4px);line-height:1.1}
.meta{margin-top:2px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ================= topplinje: merket + enhet til venstre, brukeren til høyre ================= */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--hit);margin-top:4px}
.merke{display:flex;align-items:center;gap:10px;min-width:0;color:var(--brand)}
.merke>.ik{width:28px;height:28px}
.merke:has(>.unit-link)>.ik,.sh-top .merke>.ik{width:24px;height:24px}
.merke b{min-width:0;font-size:var(--t-body);font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.unit-link{display:flex;align-items:center;gap:8px;min-width:0;min-height:var(--hit);font-size:var(--t-body);font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.who{display:flex;align-items:center;justify-content:center;flex:none;width:var(--hit);height:var(--hit);
  background:var(--sek-fyll);color:var(--sek-tekst);font-size:15px;line-height:1;font-weight:700;letter-spacing:.02em;text-align:center}

/* ================= knapper (primær = prim-fyll, sekundær = sek-fyll, omriss = ton) ================= */
.btn{display:flex;align-items:center;justify-content:center;min-height:var(--btn);padding:6px 24px;border-radius:calc(var(--btn) / 2);
  font-size:var(--t-body);line-height:var(--l-body);font-weight:700;letter-spacing:-.01em;text-align:center}
.btn.full{width:100%}
.btn.prim{background:var(--prim-fyll);color:var(--prim-tekst)}
.btn.sek{background:var(--sek-fyll);color:var(--sek-tekst)}
/* «Logg ut» i menyen: blekk på arkflaten i begge moduser, så knappen er like tydelig i mørk som i lys (G3a) */
#meny .btn.sek{background:var(--ink);color:var(--bg)}
/* v9: omriss 2 pt ink, gjennomsiktig (brukerens valg for «Ferdig» ved siden av «Marker alle»); W5a V10 for nye flater */
.btn.ton{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
/* «Bekrefter …» (disabled mens seremonien pågår) er statustekst: full kontrast */
.btn[data-a="bekreft"]:disabled{opacity:1}
/* M8: trykk = skala 0,97 (120 ms), aldri fyllbytte; selektoren er v9s (mal:184-185) */
.btn,.unit,.open,.step,.ring,.dbtn,.backbtn,.datebtn,.unit-link,.who,.lukk,.pil,.dag,.varsel{transition:transform var(--d-trykk) var(--ease)}
:is(.btn,.unit,.open,button.step,.ring:not([aria-disabled="true"]),.dbtn,.backbtn,.datebtn,.unit-link,button.who,.lukk,.pil,.dag,.varsel):not(:disabled):active{transform:scale(.97)}

/* ================= S0 logg inn og registrering (W5a 1, 1b, 2, 2b) ================= */
.login{inset:0;display:flex;flex-direction:column;padding:0}
.brandflate{flex:0 1 416px;min-height:220px;position:relative;overflow:hidden}
/* v7 flate A (eiers valg, plan 2026-10-22-sjdykk-innlogging-v6): fast flate kant til kant øverst, under statuslinja. Feltlaget
   strekkes i bredden, kunstlaget står fast og midtstilt. Lav skjerm: flaten krymper før kroppen, kunsten skaleres med høyden. */
.sjp-felt,.sjp-kunst{position:absolute;top:0;height:100%}
.sjp-felt{left:0;width:100%}
.sjp-kunst{left:50%;width:393px;margin-left:-196.5px}
.sj-bla{fill:var(--sj-bla)}
.sj-gronn{fill:var(--sj-gronn)}
/* SJ Dykks logofarger (kundens merke, eiervedtak 2026-10-22/24), aldri status; merket beholder fargene i mørk som i mockupen */
.sj-m-bla{fill:var(--sj-m-bla)}
.sj-m-gronn{fill:var(--sj-m-gronn)}
.sj-sort{fill:var(--sj-sort)}
.sj-sort-strek{stroke:var(--sj-sort)}
.sj-hvit{fill:var(--sj-hvit)}
/* SJ-merket er en flate med farger: avrundet som et appikon */
.sj-m{border-radius:22%;overflow:hidden}
.login-body{flex:1 0 auto;display:flex;flex-direction:column;
  padding:28px calc(var(--kant-h) + var(--pad)) max(calc(var(--dock-h,0px) + 24px), calc(var(--safe-bottom) + 12px)) calc(var(--kant-v) + var(--pad))}
.login-body>*{flex:none}
.login .forklaring{margin:8px 0 28px;color:var(--ink-2)}
.login [data-a="logginn"]{margin-top:auto}
.login-body>.btn+.btn{margin-top:12px}
/* registreringen åpen: merkeflaten blir et bånd (merket 44), så skjemaet får plass uten rulling ved standard tekst */
.login:has(#registrering:not([hidden])) .brandflate{flex-basis:calc(var(--safe-top) + 120px);min-height:0}
.login:has(#registrering:not([hidden])) [data-a="logginn"]{margin-top:0}
.registrering{display:flex;flex-direction:column;margin-top:24px;padding-top:20px;box-shadow:0 -1px 0 var(--track)}
.felt-etikett{font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink)}
.felt{display:block;width:100%;min-height:var(--ctl);margin-top:8px;padding:0 16px;border:0;border-radius:12px;background:var(--surface);
  box-shadow:inset 0 0 0 1.5px var(--ink-2);font-size:var(--t-body);line-height:var(--l-body);color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.app .felt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hjelp{margin-top:6px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
/* REG-ugyldig (V14): samme .hjelp i ink 600, feltet får ink-kant; [aria-invalid] bærer tilstanden, ingen ny klasse */
.felt[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.felt[aria-invalid="true"]+.hjelp{font-weight:600;color:var(--ink)}
.registrering .btn{margin-top:16px}

/* ================= venter og l.html: tittel, tekst, handlinger nederst i tommelsonen (W5a 3, 4a–4e) ================= */
.view.venter,.lenke .view{display:flex;flex-direction:column;padding-top:24px}
.view.venter>*,.lenke .view>*,#formal>*{flex:none}
.view.venter>p:not([class]):not([id]){margin-top:8px;color:var(--ink-2)}
.kode-etikett{margin-top:36px;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink-2)}
/* V15: hero-rollen med sperring for høytlesing; ingen ny typografirolle */
.kode{margin-top:8px;padding:20px;border-radius:var(--radius);background:var(--surface);font-size:var(--t-hero);line-height:var(--l-hero);
  font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
#venter-til{margin:10px 0 28px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.view.venter [data-a="sjekk"]{margin-top:auto}
.view.venter .btn+.btn{margin-top:12px}
.lenke .melding{margin:12px 0 28px;font-size:var(--t-body);line-height:var(--l-body)}
.lenke .melding:empty{display:none}
#formal{flex:1 0 auto;display:flex;flex-direction:column}
#forklaring{margin:8px 0 28px;color:var(--ink-2)}
#opprett,#sjekk{margin-top:auto}
#formal:not([hidden])+#sjekk{margin-top:12px}

/* ================= S1 velg enhet ================= */
.gruppe{list-style:none;background:var(--surface);border-radius:var(--radius);padding:0 0 0 16px}
.gruppe>li+li{box-shadow:0 -1px 0 var(--track)}
.units{margin-top:18px}
.unit{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:12px 16px 12px 0}
.uik{color:var(--ink-2)}
.uik>svg{display:block;width:28px;height:28px}
.utxt{flex:1;min-width:0}
.utxt b{display:block;font-size:var(--t-name);line-height:var(--l-name);font-weight:600;letter-spacing:-.015em}
.uline{display:block;margin-top:2px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
/* tom liste og admin uten medlemskap (V12): tekst under h1, lenken som .btn.ton under teksten */
.tom{margin-top:8px;color:var(--ink-2)}
.view>a.btn{margin-top:24px}

/* ================= S2 enhet: tittelrad, perioder, grupperader ================= */
.tittelrad{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:14px}
.datebtn{display:inline-flex;align-items:center;gap:8px;min-height:var(--hit);margin-block:-8px;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.data{margin-top:4px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hero-sec>.gruppe{margin-top:14px}
.sec{margin-top:36px}
/* periodetonene som klasser (K §3.1 pkt 2: v9s style="--tone" er klasser) */
.tone-dag{--tone:var(--p-dag)}
.tone-uke{--tone:var(--p-uke)}
.tone-mnd{--tone:var(--p-mnd)}
.tone-ar{--tone:var(--p-ar)}
.sec-h{display:flex;align-items:center;gap:8px;color:var(--tone)}
.sec-h>svg{display:block;flex:none;width:20px;height:20px}
.sec-h h2{font-size:var(--t-sec);line-height:var(--l-sec);font-weight:700;letter-spacing:-.02em}
.sec-n{margin-top:2px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.sec>.gruppe{margin-top:12px}
.item{display:grid;grid-template-columns:1fr var(--ctl);column-gap:10px;align-items:center;min-height:72px;padding:8px 12px 8px 0}
.open{display:flex;align-items:center;width:100%;min-width:0;min-height:var(--ctl)}
.otxt{min-width:0;overflow-wrap:anywhere}
.name{display:block;font-size:var(--t-name);line-height:var(--l-name);font-weight:600;letter-spacing:-.015em}
.nw{white-space:nowrap}
/* Forstørret tekst eller smal skjerm: et navn bredere enn åpneflaten får bryte i stedet for å gå inn i ringens treffflate */
@container app (max-width:20em){.nw{white-space:normal;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}}
/* Siste tegn og chevronen brytes aldri fra hverandre, heller ikke når .nw får bryte (G2-M2-15) */
.lim{white-space:nowrap}
.linje{display:grid;margin-top:1px}
.linje>*{grid-area:1/1}
.state{display:block;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.state.rcpt{color:var(--accent);font-weight:600}
/* ringen: synlig 32 (hakens mål), trykkflaten er hele 56-knappen (v7 B8) */
.ring{position:relative;display:block;width:var(--ctl);height:var(--ctl)}
.ring[aria-disabled="true"]{cursor:default}
.ring.skjult{visibility:hidden}
.ring svg{position:absolute;top:50%;left:50%;width:var(--tick);height:var(--tick);margin:calc(var(--tick) / -2) 0 0 calc(var(--tick) / -2);overflow:visible}
.tick svg{display:block;width:100%;height:100%;overflow:visible}
/* FORMER ring/bue/hake/retur: klassene er krokene; statusen bæres av formen, aldri av farge alene (MP-A2) */
.g-track{fill:none;stroke:var(--ink);stroke-width:3}
.g-track.tom{stroke-width:2.5}
.g-track.del{stroke:var(--track);stroke-width:3.5}
.g-arc{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round}
.g-fill{fill:var(--kvitt-fyll);stroke:none}
.g-check{fill:none;stroke:var(--on-kvitt);stroke-linecap:round;stroke-linejoin:round}
.g-retur{fill:none;stroke:var(--ink);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}

/* ================= nav-lag med glass: S2 rullet, S3 tittelrad (glass bare her, v9) ================= */
.navlag{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;gap:12px}
.s2nav{justify-content:space-between;min-height:calc(56px + var(--safe-top));
  padding:calc(6px + var(--safe-top)) calc(var(--kant-h) + var(--pad)) 6px calc(var(--kant-v) + var(--pad));
  opacity:0;visibility:hidden;transition:opacity var(--d-fade) var(--ease),visibility 0s linear var(--d-fade)}
.rullet .s2nav{opacity:1;visibility:visible;transition:opacity var(--d-fade) var(--ease),visibility 0s}
/* S3: glass fra første rullepiksel (.under), ikke først når tittelen er borte (K §3.7, W8g4d) */
.s2nav,.under .navrad,.rullet .navrad{background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:0 1px 0 var(--glass-kant)}
.navdato{flex:1;min-width:0;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navrad{min-height:calc(60px + var(--safe-top));padding:calc(2px + var(--safe-top)) calc(var(--kant-h) + var(--pad)) 2px calc(var(--kant-v) + var(--pad))}
.backbtn{display:flex;align-items:center;justify-content:center;flex:none;width:var(--ctl);height:var(--ctl);margin:0 -10px;color:var(--ink)}
.backbtn .sirkel{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--glass);
  -webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:inset 0 0 0 1px var(--glass-kant)}
.ntittel{flex:1;min-width:0;font-size:var(--t-body);line-height:var(--l-body);font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity var(--d-fade) var(--ease)}
.under .ntittel,.rullet .ntittel{opacity:1}

/* ================= S3 gruppe: tittel på tilbakeknappens rad (56 − 10 + 12 − marg 20 = 38 + 10), huskeliste på --bg ================= */
.tittel3{display:flex;align-items:center;min-height:60px;padding:2px 0 2px 48px}
.bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:14px}
.bar i{height:4px;border-radius:2px;background:var(--track)}
.bar i.on{background:var(--accent)}
.steps{list-style:none;margin-top:10px}
.steps>li+li{box-shadow:0 -1px 0 var(--track)}
.step{display:flex;align-items:flex-start;gap:16px;width:100%;min-height:64px;padding:18px 0 17px;
  font-size:var(--t-row);line-height:var(--l-row);font-weight:500;letter-spacing:-.01em}
.step[aria-disabled="true"]{cursor:default}
.step.done .ptxt{color:var(--ink-2)}
.tick{flex:none;width:var(--tick);height:var(--tick);margin-top:calc((var(--l-row) - var(--tick)) / 2)}
.tick.skjult{visibility:hidden}
.step .txt{flex:1;min-width:0;overflow-wrap:anywhere}
.ptxt{display:block}
.rcpt,.vent{display:block;margin-top:3px;font-size:var(--t-sub);line-height:var(--l-sub);letter-spacing:0;font-variant-numeric:tabular-nums}
.step .rcpt{font-weight:600;color:var(--accent)}
.vent{font-weight:400;color:var(--ink-2)}
.rcpt .fjernes{font-weight:400;color:var(--ink-2)}
/* AV-16/AV-33: i transitt (sendes, usikker) stiplet ring i ink-2; ikke sendt = formen retur; teksten skiller dem */
.step.sendes .g-track,.step.usikker .g-track{stroke:var(--ink-2);stroke-linecap:round;stroke-dasharray:3 4.72}
.step.usikker .vent,.step.feilet .vent{color:var(--ink);font-weight:600}

/* ================= bunnstabel og dokk (K §3.8, V13, AV-35) =================
   Ett panel: #app::before dekker radene synk → slutt i hele bredden. Rekkefølge ovenfra: #synk-status, #melding
   (+ #prov-igjen til høyre), #stotte, dokka. Elementene har ingen marger utover egen topp-padding, så panelets høyde er
   summen av det som er synlig; --dock-h (W4a4) = #app sin bunn − toppen av første synlige element. Uten dokk gir ::after
   bunnluft over safe area. */
.app::before,.app::after{content:"";grid-column:1/-1;display:none}
.app::before{grid-row:synk/slutt;z-index:3;margin-top:-2px;background:var(--surface);box-shadow:0 -1px 0 var(--track)}
.app::after{grid-row:dokk;height:calc(var(--safe-bottom) + 12px)}
.app:has(>#synk-status:not([hidden]),>#melding:not([hidden]),>#stotte:not([hidden]),>#prov-igjen:not([hidden]),>.dock:not([hidden]):not(:empty))::before{display:block}
.app:has(>#synk-status:not([hidden]),>#melding:not([hidden]),>#stotte:not([hidden]),>#prov-igjen:not([hidden])):not(:has(>.dock:not([hidden]):not(:empty)))::after{display:block}
.app>#synk-status,.app>#melding,.app>#stotte,.app>#prov-igjen,.app>.dock{position:relative;z-index:4}
.app>#synk-status{grid-row:synk;grid-column:3/5;padding-top:12px}
.app>#melding{grid-row:melding;grid-column:3/5;align-self:center;padding-top:12px;text-wrap:balance}
.app:has(>#prov-igjen:not([hidden]))>#melding{grid-column:3}
.app>#prov-igjen{grid-row:melding;grid-column:4;min-width:116px;margin:12px 0 0 16px}
.app>#stotte{grid-row:stotte;grid-column:3/5;padding-top:12px}
.melding{font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink)}
.synk{font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.dock{grid-row:dokk;grid-column:3/5;display:flex;flex-direction:column;gap:12px;padding:12px 0 calc(var(--safe-bottom) + 12px);container:dokk / inline-size}
.dock:empty{display:none}
.dock.nikk{animation:nikk var(--d-nikk) var(--ease)}
@keyframes nikk{50%{transform:translateX(4px)}}
.confirm{display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:12px;align-items:center}
.confirm p{font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
.confirm.hi p{color:var(--ink);font-weight:600}
.confirm .btn{min-width:116px}
/* historikkdokka: tekst over, knapp i full bredde (v9 C11) */
.confirm.hist{grid-template-columns:1fr}
.knapprad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.knapprad .btn{padding:6px 12px}
/* forstørret tekst (A6, AV-04): knappraden og bekreftelseslinja stables; meldingen står over «Hent på nytt» */
@container dokk (max-width: 17.5em){
  .knapprad,.confirm{grid-template-columns:1fr}
  .confirm .btn{width:100%}
}
@container app (max-width: 19.5em){
  .app:has(>#prov-igjen:not([hidden]))>#melding{grid-column:3/5}
  .app>#prov-igjen{grid-row:prov;grid-column:3/5;margin-left:0}
}

/* ================= kvittering (M7): ring/hake fylles 240 ms, så kryssfader linja 150 ms ================= */
@keyframes vent{50%{opacity:.4}}
.ring.venter svg,.step.sendes .tick svg{animation:vent 1.2s var(--ease) infinite}
.just .g-fill{transform-box:fill-box;transform-origin:center;animation:fyll var(--d-kvitt) var(--ease) both}
.just .g-check{stroke-dasharray:1;animation:strek var(--d-kvitt) var(--ease) both}
.just-tekst{animation:inn var(--d-fade) var(--ease) var(--d-kvitt) both}
.just-ut{animation:ut var(--d-fade) var(--ease) var(--d-kvitt) both}
@keyframes fyll{from{transform:scale(.6);opacity:.35}}
@keyframes strek{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes inn{from{opacity:0}}
@keyframes ut{to{opacity:0}}

/* ================= modaler: scrim, løftet rad, dialog, ark (M4–M6) =================
   Ark og dialog står i DOM hele tiden: [hidden] skjuler dem ikke med display, så utgangen får sin overgang; lukket er de
   visibility:hidden og inert (modal.js). --dur (motoren) overstyrer varigheten ved redusert bevegelse. */
.scrim{position:absolute;inset:0;z-index:5;background:var(--scrim);opacity:0;visibility:hidden;
  transition:opacity var(--d-ut,var(--d-ark-ned)) var(--ease),visibility 0s linear var(--d-ut,var(--d-ark-ned))}
.scrim.pa{opacity:1;visibility:visible;transition:opacity var(--d-inn,var(--d-ark-opp)) var(--ease),visibility 0s}
/* raden løftes over scrimet; posisjon fra --x/--y/--w når visningen setter dem på #loft, ellers står den utenfor bildet */
.loft{position:absolute;z-index:6;left:calc(var(--x, -200vw) - 12px);top:var(--y, -200vh);width:calc(var(--w, 0px) + 24px);
  height:var(--h,auto);list-style:none;padding:0 12px;border-radius:18px;background:var(--surface);pointer-events:none;opacity:0;transition:opacity var(--d-dlg) var(--ease)}
.loft.pa{opacity:1}
.loft.steps{margin-top:0}
/* S2-kortet har 16 px venstre innrykk; S3 beholder den symmetriske 12 px løfteflaten. */
.loft:has(>.item){left:calc(var(--x, -200vw) - 16px);width:calc(var(--w, 0px) + 16px);padding:0 0 0 16px}
.loft>.item{height:var(--h,auto)}
/* dialogen under raden når den får plass, ellers over (dialog.js: --y, og --dy > 0 = under); 10 pt fra raden (v9);
   den løftes ut fra raden: starter 8 pt nærmere raden og glir på plass */
/* uten plass over eller under raden klemmes --y inn i viewporten (dialog.js, K §3.9, W8g4a); høyere enn viewporten ruller den selv */
.dlg{position:absolute;z-index:7;left:calc(var(--kant-v) + 16px);right:calc(var(--kant-h) + 16px);top:var(--y, 30%);margin-top:calc(var(--dy, 8px) * 1.25);
  max-height:calc(100% - var(--safe-top) - 24px);overflow-y:auto;overscroll-behavior:contain;
  padding:22px 20px 18px;border-radius:var(--radius);background:var(--surface);box-shadow:inset 0 0 0 1px var(--track);
  opacity:0;visibility:hidden;transform:translateY(calc(var(--dy, 8px) * -1));
  transition:opacity var(--dur,var(--d-dlg)) var(--ease),transform var(--dur,var(--d-dlg)) var(--ease),visibility 0s linear var(--dur,var(--d-dlg))}
.dlg.pa{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur,var(--d-dlg)) var(--ease),transform var(--dur,var(--d-dlg)) var(--ease),visibility 0s}
.app>.dlg[hidden],.app>.ark[hidden]{display:block}
.dlg h2,.sh-top h2{font-size:var(--t-sec);line-height:var(--l-sec);font-weight:700;letter-spacing:-.02em}
.dlg p{margin-top:6px;color:var(--ink-2)}
.knapper{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.dbtn{display:flex;align-items:center;min-height:var(--ctl);font-weight:700}
.dbtn span{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:4px 12px;border-radius:24px;text-align:center}
.dbtn.avbryt span{background:var(--surface-2);color:var(--ink)}
.dbtn.fjern span{background:var(--destructive);color:var(--on-accent)}
.app .dbtn:focus-visible{outline:none}
.dbtn:focus-visible span{outline:3px solid var(--accent);outline-offset:2px}
.ark{position:absolute;left:var(--kant-v);right:var(--kant-h);bottom:0;z-index:7;max-height:calc(100% - var(--safe-top) - 16px);overflow-y:auto;overscroll-behavior:contain;
  padding:8px var(--pad) calc(var(--safe-bottom) + 14px);border-radius:var(--radius) var(--radius) 0 0;background:var(--surface);
  transform:translateY(100%);visibility:hidden;
  transition:transform var(--dur,var(--d-ark-ned)) var(--ease),opacity var(--dur,var(--d-ark-ned)) var(--ease),visibility 0s linear var(--dur,var(--d-ark-ned))}
.ark.pa{transform:none;visibility:visible;
  transition:transform var(--dur,var(--d-ark-opp)) var(--ease),opacity var(--dur,var(--d-ark-opp)) var(--ease),visibility 0s}
.sh-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:var(--ctl)}
.lukk{min-width:var(--ctl);min-height:var(--ctl);font-weight:600;text-align:right}
/* redusert bevegelse per kall (motoren setter .stille og --dur = --d-fade): ark og dialog toner uten forflytning */
.ark.stille,.dlg.stille,.dlg.stille.pa{transform:none}
.ark.stille{opacity:0}
.ark.stille.pa{opacity:1}

/* ================= brukermeny: utseende (Auto · Lys · Mørk) til venstre for «Lukk» (v7 B2) ================= */
.sh-hoyre{display:flex;align-items:center;gap:8px}
.useg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:2px;border-radius:12px;background:var(--surface-2)}
.useg button{min-width:56px;min-height:var(--hit);padding:0 8px;border-radius:10px;font-size:var(--t-sub);font-weight:600;color:var(--ink-2);text-align:center}
.useg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px var(--scrim)}
#app[data-tema="mork"] .useg button[aria-pressed="true"]{background:var(--track);box-shadow:none}
@media (prefers-color-scheme: dark){#app:not([data-tema]) .useg button[aria-pressed="true"]{background:var(--track);box-shadow:none}}
.app .useg button:focus-visible{outline-offset:-1px}
.ident{display:flex;align-items:center;gap:14px}
.ident b{display:block;font-size:var(--t-name);line-height:var(--l-name);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.ident .org{display:block;color:var(--ink-2)}
.meg{margin-top:20px}
.ark .btn{margin-top:28px}
.ark .btn+.btn{margin-top:12px}
/* Feil i kalenderarket (K §3.10, W7B-F1): meldingen står i arket, over «Hent på nytt». */
.ark .kfeil{margin-top:16px;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink);text-wrap:pretty}

/* ================= M2: kalender-ark (v8/v9) ================= */
.mnd{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.mnd b{font-size:var(--t-row);line-height:var(--l-row);font-weight:700}
.piler{display:flex;gap:8px}
.pil{display:flex;align-items:center;justify-content:center;width:var(--hit);height:var(--hit);background:var(--surface-2)}
.pil:disabled{opacity:.35;cursor:default}
.ukedager,.rute{display:grid;grid-template-columns:repeat(7,44px);column-gap:clamp(0px, calc((100% - 308px) / 6), 4px);justify-content:space-between}
/* 320 px (G2-M2-06, MP-A6): sju celler på 44 trenger 308 px; under 372 px viewport går rutenettet 14 px inn i sidemargen */
@media (max-width:371px){.ark .ukedager,.ark .rute{margin-inline:calc(6px - var(--pad))}}
.ukedager{margin-top:14px;font-size:calc(13px + var(--vekst) * .5);line-height:calc(16px + var(--vekst) * .6);font-weight:600;color:var(--ink-2);text-align:center}
.rute{margin-top:8px;row-gap:6px}
/* forstørret tekst (G2-M2-08, AV-04; v9 `mal:332`): dagtallet vokser med --vekst, cellen holder 44 px i bredden */
.dag{position:relative;display:flex;flex-direction:column;align-items:center;width:44px;height:calc(44px + var(--vekst) * .4);font-size:calc(17px + var(--vekst) * .6);line-height:calc(22px + var(--vekst) * .6);font-weight:500;font-variant-numeric:tabular-nums;text-align:center}
.dag .num{display:flex;align-items:center;justify-content:center;width:calc(34px + var(--vekst) * .4);height:calc(34px + var(--vekst) * .4);border-radius:50%}
.dag i{display:block;width:6px;height:6px;margin-top:2px;border-radius:50%;background:var(--accent)}
.dag.idag .num{box-shadow:inset 0 0 0 2px var(--ink);font-weight:700}
.dag.valgt .num{background:var(--ink);color:var(--bg);font-weight:700}
.dag:disabled{color:var(--ink-2);opacity:.45;cursor:default}
/* passert frist (v7 B4/B5, v8): rødt merke med blekk-kontur; statuskontrasten bæres av konturen og teksten ved siden av */
.fmerke{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--destructive);box-shadow:inset 0 0 0 1.5px var(--ink)}
.dag .prikker{display:flex;align-items:center;gap:3px;height:8px;margin-top:1px}
.dag .prikker i{margin-top:0}
.dag .fmerke{width:8px;height:8px}
.ark .forklaring{display:flex;flex-direction:column;gap:6px;margin-top:16px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
.ark .forklaring span{display:flex;align-items:center;gap:10px}
.ark .forklaring i{display:block;flex:none;width:6px;height:6px;margin:0 1px;border-radius:50%;background:var(--accent)}
.kliste{margin-top:18px}
.kliste h3{display:flex;align-items:center;gap:10px;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink)}
.kliste .ingen{font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink)}
.kgruppe{margin-top:8px;border-radius:var(--radius);background:var(--surface-2);overflow:hidden}
.krad{display:block;width:100%;min-height:var(--ctl);padding:10px 16px;text-align:left}
.krad+.krad{box-shadow:inset 0 1px 0 var(--track)}
/* flaten klipper (overflow:hidden): fokusringen tegnes innenfor raden (v8 M1) */
.app .krad:focus-visible{outline-offset:-3px;border-radius:var(--radius)}
.krad b{display:block;font-size:var(--t-body);line-height:var(--l-body);font-weight:700}
.krad>span{display:block;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink);font-variant-numeric:tabular-nums}

/* ================= M2: varselkort og friststatus ================= */
.fstatus{display:inline-flex;align-items:center;gap:6px;margin-left:6px;color:var(--ink);font-weight:600}
.varsel{display:block;width:100%;margin-top:14px;padding:14px 16px;background:var(--surface);min-height:var(--ctl)}
.vtittel{display:flex;align-items:center;gap:10px;font-size:var(--t-body);line-height:var(--l-body);font-weight:700;letter-spacing:-.01em}
.vlinje{display:block;margin-top:2px;padding-left:20px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ================= M2: lederoversikt (W5a 7a–7c; ingen dokk) ================= */
.leder .datebtn{margin-top:10px}
.leder .units{margin-top:16px}
.leder-forkl{margin-top:16px;color:var(--ink-2)}
.leder-forkl+.btn{margin-top:24px}
.lsec{margin-top:28px}
.lgruppe{margin-top:16px;font-size:var(--t-name);line-height:var(--l-name);font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.steps+.lgruppe{margin-top:14px}
.lsec .steps{margin-top:0}

/* ================= runde 2 (R3d, Opus): avvik og kommentar (v11) + dokumenter (v12) =================
   Port fra design/app/app.mal.html (mal:378-503 avvik/kalender, mal:523-712 dokumenter) til klientens DOM i
   docs/klient/kontrakt-v2.md §3, pluss de nye flatene fra R1g (design/runde2/nye-flater.css). Mockupens tegnede
   systemflater (tastatur, delingsark, filvelger, «Nylige») og de tegnede dokumentsidene portes ikke.
   Tilpasninger: .app[data-tema="mork"] → #app[data-tema="mork"] + prefers-color-scheme-tvilling (som .useg);
   .app[data-str="xl"] → @container app i em (vokser med systemets tekst, som .nw); --tast-h → --kb (visualViewport);
   [data-dok] → id-ene i §3.0. Mønstrene for maskinlesbar stil (§3.15): --kb, --zoom, --sb, --sh, --fremdrift. */

/* ---- S3: punktraden (§3.1, mal:386-412) ----
   «⋯» henger i radens høyremarg; en død sone på 8 pt skiller den fra avhukingen (A-4). Ekstralinjene ligger under «⋯»
   og får hele tekstkolonnen; rombene står i hakekolonnen. */
.steps>li{position:relative}
.steps>li.medvalg .step .ptxt::before{content:"";float:right;width:32px;height:var(--l-row)}
.radtopp{position:relative}
.dod{position:absolute;z-index:1;top:0;bottom:0;right:-12px;width:52px}
.valg{position:absolute;z-index:2;top:calc((var(--l-row) - 56px) / 2 + 18px);right:-12px;display:flex;align-items:center;justify-content:center;
  width:var(--hit);height:var(--ctl);border-radius:14px;color:var(--ink-2);transition:transform var(--d-trykk) var(--ease)}
.valg svg{display:block;fill:currentColor}
.valg:active{transform:scale(.9)}
li.medekstra .step{padding-bottom:0;min-height:var(--ctl)}
.ekstra{display:flex;flex-direction:column}
.ekstra>button,.ekstra>p{position:relative;display:flex;align-items:flex-start;gap:8px;width:100%;min-height:var(--hit);margin:0;padding:3px 0 21px 48px;border-radius:10px}
.ekstra>p{min-height:0}
.avl,.kml{min-width:0;margin-top:3px;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:400;letter-spacing:0;
  color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:left}
.avl b{font-weight:600;color:var(--ink)}
.kml .kt{color:var(--ink)}
.kutt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* kommentarlinja får høyst to linjer (V2-1), så selve kommentaren syns på raden */
.kml .kutt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
.ekstra .avl>.rombe{position:absolute;left:10.5px;top:calc(3px + (var(--l-sub) - 11px) / 2)}
/* forstørret tekst (mal: data-str="xl"): avvikslinja brytes, kommentaren vises hel */
@container app (max-width:21.5em){
  .kutt{white-space:normal}
  .kml .kutt{display:block;-webkit-line-clamp:none}
}

/* ---- romben (mal:381-385): --avvik er bare fyll, aldri tekst; konturen i --ink bærer kontrasten ---- */
.rombe{display:block;flex:none;overflow:visible}
/* R5 (rigg F1/F3/F4): størrelsen sto som attributter i mockupens markup (rombe(11), rombe(10) i kalenderen, PRIKKER3
   20 × 5, glyf(navn, px)); svg() i klienten setter ingen, så den bor her */
.rombe{width:11px;height:11px}
.rombe[viewBox="0 0 18 12"]{width:16.5px}
.dag .prikker .rombe{width:10px;height:10px}
.dag .prikker .rombe[viewBox="0 0 18 12"]{width:15px}
.valg svg{width:20px;height:5px}
.dkvitt>svg,.dok-stat>svg{flex:none;width:22px;height:22px}
.btn.ldel>svg{flex:none;width:22px;height:22px}
.dny-g>svg{width:22px;height:22px}
.btn.dtom-knapp>svg{flex:none;width:20px;height:20px}
.lzoom svg{width:24px;height:24px}
.dfil>svg{flex:none;width:36px;height:36px}
.rombe path{fill:var(--avvik);stroke:var(--ink);stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ---- S2: gruppens avvikslinje (§3.2, mal:414-417) ---- */
.gav{display:flex;align-items:center;gap:7px;margin-top:1px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.gav b{font-weight:600;color:var(--ink)}
.gav .rombe{margin-left:.5px}

.skjult-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* R1a-9: filinputen er visuelt skjult, ikke display:none (iOS åpner ellers ikke velgeren fra .click()) */
.skjult-input{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}

/* ---- avviksarket #avv (§3.3, mal:418-441): én flate som bytter innhold i trinn ---- */
#avv{transition:transform var(--dur,var(--d-ark-ned)) var(--ease),opacity var(--dur,var(--d-ark-ned)) var(--ease),visibility 0s linear var(--dur,var(--d-ark-ned)),bottom var(--d-ark-opp) var(--ease)}
#avv.pa{transition:transform var(--dur,var(--d-ark-opp)) var(--ease),opacity var(--dur,var(--d-ark-opp)) var(--ease),visibility 0s,bottom var(--d-ark-opp) var(--ease)}
#avv .sh-top h2{flex:1;min-width:0;padding-right:12px;overflow-wrap:anywhere}
.sh-top>.lukk{flex:none}
#avv .sh-top h2.lang{font-size:var(--t-body);line-height:var(--l-body)}
.vliste{margin-top:6px;border-radius:var(--radius);background:var(--surface-2);overflow:hidden}
.vrad{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--btn);padding:10px 16px;font-size:var(--t-body);line-height:var(--l-body);font-weight:600}
.vrad+.vrad{box-shadow:inset 0 1px 0 var(--track)}
.app .vrad:focus-visible{outline-offset:-3px;border-radius:var(--radius)}
.vrad>span{flex:1;min-width:0}
.vrad small{display:block;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.vrad .ahode{display:flex;align-items:center;gap:10px}
.vrad>.chev{width:14px;height:14px;color:var(--ink-2)}  /* G2c: kvadratisk viewBox; 8 px bredde krympet pilen */
.kontekst{margin-top:-4px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
.dstatus{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink)}
.dtekst{margin-top:8px;font-size:var(--t-name);line-height:var(--l-name);font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.dmeldt{margin-top:6px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.dfolg{margin-top:18px;padding-top:14px;box-shadow:inset 0 1px 0 var(--track);color:var(--ink)}
.dfolg.ut{font-size:var(--t-sub);line-height:var(--l-sub);font-variant-numeric:tabular-nums}
#avv .btn.detaljknapp{margin-top:20px}
#avv .knapper{margin-top:18px}
.bekrefttekst{margin-top:6px;color:var(--ink-2)}
.dbtn.bekreft span{background:var(--prim-fyll);color:var(--prim-tekst)}
/* R5 (G2c): runde 2-knappene har teksten direkte i knappen (kontrakt §3, uten span); pillen på 48 px tegnes på knappen
   selv, med en gjennomsiktig kant som holder trykkflaten på --ctl */
.knapper>.dbtn:not(:has(>span)){justify-content:center;padding:0 8px;border:4px solid transparent;border-radius:28px;
  background-clip:padding-box;text-align:center}
.knapper>.dbtn.avbryt:not(:has(>span)){background-color:var(--surface-2);color:var(--ink)}
.knapper>.dbtn.fjern:not(:has(>span)){background-color:var(--destructive);color:var(--on-accent)}
.knapper>.dbtn.bekreft:not(:has(>span)){background-color:var(--prim-fyll);color:var(--prim-tekst)}
.knapper>.dbtn:not(:has(>span)):focus-visible{outline:3px solid var(--accent);outline-offset:-2px}

/* ---- skrivearket, utforming 2 «Over tastaturet» (§3.4, mal:442-468) ----
   Arket står med bunnen på tastaturet (--kb fra visual viewport, tastatur.js), bare så høyt som innholdet. Feltet er rolig:
   17 pt, markør og understrek i --accent, aldri ramme i ramme. Høyden følger --sh (1–5 linjer), aldri style.height. */
#avv.tast{bottom:var(--kb,0px);padding-bottom:12px;max-height:calc(var(--tast-h,100%) - var(--safe-top))}
/* R4b/R4c: når arket er høyere enn plassen over tastaturet (xL, fem linjer, liggende) ruller innholdet, og knapperaden
   står fast nederst i arket over tastaturet */
#avv.tast .s-rad{position:sticky;bottom:0;z-index:1;padding-bottom:0;background:var(--surface);box-shadow:0 -8px 8px -8px var(--surface)}
.skriv .kontekst{margin-top:0}
.s-etikett{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px;row-gap:4px}
.s-etikett label{font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink-2)}
.bytt{display:flex;align-items:center;min-height:var(--hit);font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink);text-align:left}
.s-rad{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px}
.s-rad .bytt{margin:0 auto 0 0}
.s-rad .btn{flex:1 0 148px}
.s-felt textarea{display:block;width:100%;height:var(--sh,auto);max-height:calc(var(--l-body) * 5 + 9px);margin:0;padding:0;border:0;border-radius:0;resize:none;overflow-y:auto;background:transparent;
  font:inherit;font-size:var(--t-body);line-height:var(--l-body);font-weight:400;letter-spacing:-.005em;color:var(--ink);caret-color:var(--accent);scrollbar-width:none}
.s-felt textarea::placeholder{color:var(--ink-2);opacity:1}
.app .s-felt textarea:focus-visible,.s-felt textarea:focus{outline:none}
.merk{font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
.ark .skriv .btn{margin:0}
.u2 .s-felt{margin-top:12px}
.u2 .s-etikett{margin-bottom:4px}
.u2 .s-felt textarea{padding-bottom:9px;box-shadow:inset 0 -1.5px 0 var(--accent)}
.u2 .merk{margin-top:10px}
.u2 .s-rad{margin-top:12px}

/* ---- kalender-arket (§3.6, mal:492-503): arket kan rulle innvendig; rombene står i prikkraden ---- */
#kal.medavvik{max-height:calc(100% - var(--safe-top) + 6px);padding-bottom:calc(var(--safe-bottom) + 2px);scrollbar-width:none}
#kal::-webkit-scrollbar{display:none}
.ark .forklaring.rad{flex-direction:row;flex-wrap:wrap;column-gap:22px}
.dag .prikker .rombe{margin:0 -1px}
.kliste+.kliste{margin-top:8px}
.kliste h3 .rombe{margin:0 -1px}
/* A-3: kompakt liste, én tekstblokk per avvik, første setning halvfet, pilen på siste ord */
.krad.av{min-height:var(--hit);padding:4px 16px}
.kliste.avk .kgruppe{margin-top:6px}
.krad.av b{display:inline;font-size:inherit;line-height:inherit;font-weight:600}
.krad.av>span{color:var(--ink)}
.krad.av[aria-disabled="true"]{opacity:.55;cursor:default}

/* ---- S2: mapperaden (§3.7, mal:523-526) ---- */
.dokinn{margin-top:36px}
.dinn{display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:12px 16px 12px 0;border-radius:12px}
.dinn>.chev{width:.824em;height:.824em;color:var(--ink-2);margin:0 -3px}
.dinn .utxt b{letter-spacing:-.015em}

/* ---- dokumentlista #lag-dok (§3.8, mal:527-546) ---- */
#lag-dok .dview .meta{margin-top:0}
.dkvitt{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;border-radius:var(--radius);background:var(--surface);
  font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink);animation:inn var(--d-fade) var(--ease)}
.dkvitt .ik{color:var(--ink-2)}
.dforst{margin-top:20px}
.dkvitt+.dforst{margin-top:12px}
.dny{display:flex;align-items:center;gap:14px;width:100%;min-height:var(--btn);padding:0 16px 0 0;border-radius:12px;font-size:var(--t-body);line-height:var(--l-body);font-weight:600;color:var(--ink)}
.dny-g{display:flex;align-items:center;justify-content:center;flex:none;width:36px}
#lag-dok .dsek{margin-top:28px}
#lag-dok .dsek+.dsek{margin-top:32px}
#lag-dok .dsek h2{font-size:var(--t-sec);line-height:var(--l-sec);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#lag-dok .dsek>.gruppe{margin-top:10px}
.dokrad{display:flex;align-items:flex-start;gap:14px;width:100%;min-height:72px;padding:13px 16px 13px 0;border-radius:12px;text-align:left}
/* miniatyren er papir: hvit flate med tynn kant i begge temaer (mal .mini); glyfen står når bildet mangler */
.dmini{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:46px;overflow:hidden;border-radius:3px;object-fit:cover;object-position:top;
  background:var(--papir);box-shadow:0 0 0 1px var(--track),0 1px 2px var(--scrim)}
.dmini.glyf{background:var(--surface-2);color:var(--ink-2);box-shadow:none}
.dmini.glyf>svg{width:24px;height:24px}
.dtxt{flex:1;min-width:0;padding-top:1px}
.dnavn{display:block;font-size:var(--t-body);line-height:var(--l-body);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.dmeta{display:block;margin-top:2px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.dmerk{margin-top:20px;padding:0 16px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
.dtom{display:flex;flex-direction:column;align-items:center;margin-top:88px;padding:0 12px;text-align:center;color:var(--ink)}
.dtom>svg{width:44px;height:44px;color:var(--ink-2)}
.dtom h2{margin-top:14px;font-size:var(--t-name);line-height:var(--l-name);font-weight:700;letter-spacing:-.015em}
.dtom p{margin-top:6px;color:var(--ink-2)}
.btn.dtom-knapp{gap:10px;margin-top:24px;padding:0 26px}

/* ---- leseren #dok-leser (§3.9, mal:547-575): heldekkende lag over appen, under #dok-scrim og menyen ---- */
.leser{position:absolute;inset:0;z-index:7;background:var(--surface-2);visibility:hidden}
.leser.pa{visibility:visible;animation:inn var(--d-ark-opp) var(--ease)}
#app[data-tema="mork"] .leser{background:var(--bg)}
@media (prefers-color-scheme: dark){#app:not([data-tema]) .leser{background:var(--bg)}}
#dok-scrim{z-index:8}
#dok-trinn,#dok-fjern{z-index:9}
.lview{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:none;
  padding:calc(var(--safe-top) + 72px) calc(var(--kant-h) + 16px) calc(var(--safe-bottom) + 104px) calc(var(--kant-v) + 16px)}
.lview::-webkit-scrollbar{display:none}
.lnav{position:absolute;z-index:2;top:0;left:0;right:0;display:grid;grid-template-columns:72px 1fr 72px;column-gap:8px;align-items:center;min-height:calc(var(--safe-top) + 56px);
  padding:var(--safe-top) calc(var(--kant-h) + 8px) 4px calc(var(--kant-v) + 8px);background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:0 1px 0 var(--glass-kant)}
.llukk{min-width:var(--ctl);min-height:var(--ctl);padding:0 12px;border-radius:12px;font-weight:600;color:var(--ink)}
.ltittel{min-width:0;padding:6px 0;text-wrap:balance;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:700;letter-spacing:-.01em;text-align:center;overflow-wrap:anywhere}
.lvalg{justify-self:end;display:flex;align-items:center;justify-content:center;width:var(--ctl);height:var(--ctl);border-radius:14px;color:var(--ink)}
.lvalg svg{fill:currentColor}
/* sidene: --sb/--sh er sidens CSS-mål ved gjeldende zoomtrinn (felles/pdf.js). Under klypet er --zoom faktoren mot
   trinnet; lerretet strekkes i layout (rulleflaten følger), og sidene tegnes på nytt når zoomen festes (R1a-8). */
.lside{position:relative;width:var(--sb,100%);height:var(--sh,auto);margin-inline:auto;overflow:hidden;border-radius:2px;background:var(--papir);
  box-shadow:0 0 0 .5px var(--scrim),0 2px 8px var(--scrim)}
.lview.zoomer .lside{width:calc(var(--sb,100%) * var(--zoom,1));height:calc(var(--sh,0px) * var(--zoom,1))}
.lview.lzoomet .lside{margin-inline:0}
.lside+.lside{margin-top:16px}
.lcanvas{display:block;width:100%;height:100%}
.lside.lbilde{background:transparent;box-shadow:none}
.linfo{margin-top:20px;padding:0 4px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.lsidetall{position:absolute;z-index:2;left:50%;bottom:calc(var(--safe-bottom) + 92px);transform:translateX(-50%);padding:5px 14px;border-radius:16px;white-space:nowrap;
  font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:inset 0 0 0 1px var(--glass-kant)}
.lkontroll{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;
  padding:12px calc(var(--kant-h) + var(--pad)) calc(var(--safe-bottom) + 8px) calc(var(--kant-v) + var(--pad));
  background:var(--glass);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:0 -1px 0 var(--glass-kant)}
.btn.ldel{flex:1;gap:10px;min-height:var(--ctl);border-radius:calc(var(--ctl) / 2)}
/* C01: i mørk modus legges glasset dobbelt, så tekst over hvitt papir holder ≥ 7:1 */
#app[data-tema="mork"] :is(.lnav,.lsidetall,.lkontroll){background:linear-gradient(var(--glass),var(--glass)) var(--glass)}
@media (prefers-color-scheme: dark){#app:not([data-tema]) :is(.lnav,.lsidetall,.lkontroll){background:linear-gradient(var(--glass),var(--glass)) var(--glass)}}
.lzoom{display:flex;flex:none;border-radius:calc(var(--ctl) / 2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--glass-kant)}
.lzoom button{display:flex;align-items:center;justify-content:center;width:var(--btn);height:var(--ctl);color:var(--ink)}
.lzoom button:first-child{border-radius:28px 0 0 28px}
.lzoom button+button{box-shadow:inset 1px 0 0 var(--track);border-radius:0 28px 28px 0}
.lzoom button:disabled{opacity:.4;cursor:default}
/* «Åpner …», «Kan ikke vise» og «kunne ikke hentes»: midt i flaten; teksten i --ink (≥ 7:1 på --surface-2), glyfen i --ink-2 */
.dok-vent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:100%;padding:0 12px;color:var(--ink);text-align:center;text-wrap:balance}
.dok-vent>svg{width:44px;height:44px;color:var(--ink-2)}

/* ---- opplastingsarket #dok-ark (§3.10, mal:576-588, 680-700) ---- */
#dok-ark{transition:transform var(--dur,var(--d-ark-ned)) var(--ease),opacity var(--dur,var(--d-ark-ned)) var(--ease),visibility 0s linear var(--dur,var(--d-ark-ned)),bottom var(--d-ark-opp) var(--ease)}
#dok-ark.pa{transition:transform var(--dur,var(--d-ark-opp)) var(--ease),opacity var(--dur,var(--d-ark-opp)) var(--ease),visibility 0s,bottom var(--d-ark-opp) var(--ease)}
#dok-ark.tast{bottom:var(--kb,0px);padding-bottom:12px;max-height:calc(100% - var(--safe-top) - var(--kb,0px))}
#dok-ark .sh-top h2{padding-right:12px}
.dfil{display:flex;align-items:center;gap:14px;margin-top:6px}
.dfil>svg,.dfil>.dmini.glyf{color:var(--ink-2)}
.dfiltxt{display:flex;flex-direction:column;flex:1;min-width:0}
.dfilnavn{min-width:0;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);overflow-wrap:anywhere}
.dok-progress{height:4px;margin-top:10px;border-radius:2px;overflow:hidden;background:var(--track)}
.dok-progress>i{display:block;width:calc(var(--fremdrift,0) * 1%);height:100%;border-radius:2px;background:var(--ink);transition:width var(--d-fade) linear}
.dok-stat{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2);font-variant-numeric:tabular-nums}
.dok-stat[role="status"]{margin-top:18px;font-size:var(--t-body);line-height:var(--l-body);font-weight:600;color:var(--ink)}
.dfelt{margin-top:20px}
/* G3c 8b: merknad om helseopplysninger mellom tittelfeltet og «Last opp» */
.dhelse{margin:12px 0 0;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
.dfelt label{display:block;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink-2)}
.dfelt input{display:block;width:100%;min-height:var(--hit);margin:4px 0 0;padding:4px 0 9px;border:0;border-radius:0;background:transparent;font-size:var(--t-name);line-height:var(--l-name);
  font-weight:600;letter-spacing:-.015em;color:var(--ink);caret-color:var(--accent);box-shadow:inset 0 -1.5px 0 var(--track);outline:none}
.dfelt input:focus,.app .dfelt input:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--accent)}
#dok-tom{margin-top:8px;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink)}
#dok-ark .btn.dlast{margin-top:24px}
#dok-ark .btn.dsek{margin-top:10px}
.dok-plass{height:calc(var(--btn) + 24px)}
.dok-feil{margin-top:18px;color:var(--ink);overflow-wrap:anywhere}

/* ---- leserens meny og fjern-dialogen (§3.11, mal:711-716) ---- */
#dok-trinn.dok-handling{left:calc(var(--kant-v) + 8px);right:calc(var(--kant-h) + 8px);padding:0 0 calc(var(--safe-bottom) + 8px);background:transparent;border-radius:0}
.dok-hg{border-radius:14px;background:var(--surface);overflow:hidden}
.dok-hg+.dok-hg{margin-top:8px}
.dok-hg button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:57px;padding:0 16px;font-size:var(--t-body);line-height:var(--l-body);text-align:center}
.app .dok-hg button:focus-visible{outline-offset:-3px;border-radius:14px}
.dok-hg .rod{color:var(--destructive);font-weight:600}
.dok-hg .fet{font-weight:700}
/* fjern-dialogen står midt på skjermen (ikke ved en rad); den toner og glir 8 pt som .dlg */
#dok-fjern{top:50%;margin-top:0;transform:translateY(calc(-50% + 8px));max-height:calc(100% - var(--safe-top) - var(--safe-bottom))}
#dok-fjern.pa,#dok-fjern.stille,#dok-fjern.stille.pa{transform:translateY(-50%)}
#dok-fjern [role="alert"]{color:var(--ink);font-weight:600}

/* ---- R1g-flatene (design/runde2/nye-flater.css, kritikk og verdikt i design/adjudisering-r1g-runde2.md) ----
   Status er aldri farge alene: hver linje har tekst, og glyfen i hakekolonnen skiller «venter» (klokke) fra «trenger deg»
   (varsel). Linja som åpner noe har chevron; teksten kuttes aldri. */
.mstatus{font-size:var(--t-sub);line-height:var(--l-sub);font-weight:400;color:var(--ink);text-align:left;text-wrap:pretty}
.ekstra>.mstatus{margin-top:0}
.mstatus>span{min-width:0}
.mstatus>.mg{position:absolute;left:8px;top:calc(3px + (var(--l-sub) - 16px) / 2);width:16px;height:16px;color:var(--ink)}
button.mstatus{padding-right:24px}
button.mstatus>.chev{position:absolute;right:2px;top:calc(3px + (var(--l-sub) - .706em) / 2);width:.706em;height:.706em;stroke-width:2.4;color:var(--ink-2)}
.mstatus.sender{color:var(--ink-2)}
/* utdatert: punktet finnes ikke å henge linja på, så den står som kort øverst i S3-lista */
.mstatus.mtopp{position:relative;display:block;width:100%;min-height:var(--ctl);margin:10px 0 2px;padding:12px 40px 12px 46px;border-radius:var(--radius);background:var(--surface)}
.mstatus.mtopp>.mg{left:16px;top:calc(12px + (var(--l-sub) - 18px) / 2);width:18px;height:18px}
.mstatus.mtopp>.chev{right:16px;top:50%;margin-top:-.353em}
/* 409/400-varselet i skrivearket: rolig flate i --bg på arkets --surface, glyf + tekst, ingen varselfarge */
.svarsel{display:flex;align-items:flex-start;gap:10px;margin:2px 0 12px;padding:10px 12px;border-radius:12px;background:var(--bg);
  font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink);text-wrap:pretty}
.svarsel>.mg{flex:none;width:18px;height:18px;margin-top:calc((var(--l-sub) - 18px) / 2)}
/* «Ikke send» kaster teksten: egen trykkflate på 56 pt, teksten på linje med feltet */
.s-rad [data-a="m-trekk"]{min-height:var(--ctl);padding-inline:12px;margin-left:-12px}
/* utdatert: readonly-felt med --track-strek, ingen primærknapp; arket står mot bunnen uten tastatur */
.u2 .s-felt textarea[readonly]{box-shadow:inset 0 -1px 0 var(--track)}
.skriv.utdatert .s-felt{margin-bottom:6px}
/* B2: fjernet tekst står der teksten sto, i --ink-2 */
.kml .kt.fjernet{color:var(--ink-2)}
.dtekst.fjernet{font-size:var(--t-body);line-height:var(--l-body);font-weight:400;letter-spacing:0;color:var(--ink-2)}
/* leseren uten kopi (dok.hentFeil): «Prøv igjen» i flaten under teksten */
.dok-vent .btn.ton{min-width:180px;margin-top:6px;padding:0 24px}
/* opplastingsarket uten primærhandling (lagringFull): bare «Avbryt», med primærknappens avstand */
#dok-ark .dok-feil+.btn.dsek{margin-top:28px}

/* ================= redusert bevegelse (§5-kolonnen): alt blir kryssfade 150 ms, nikk og trykkskala bortfaller ================= */
@media (prefers-reduced-motion: reduce){
  .ring.venter svg,.step.sendes .tick svg{animation:none;opacity:.55}
  .lag.foran,.lag.bak{transform:none}
  .ark,.ark.pa,.dlg,.dlg.pa{transform:none}
  .ark{opacity:0;transition:opacity var(--d-fade) var(--ease),visibility 0s linear var(--d-fade)}
  .ark.pa{opacity:1;transition:opacity var(--d-fade) var(--ease),visibility 0s}
  .dlg{transition:opacity var(--d-fade) var(--ease),visibility 0s linear var(--d-fade)}
  .dlg.pa{transition:opacity var(--d-fade) var(--ease),visibility 0s}
  .just .g-fill,.just .g-check,.just-tekst{animation:inn var(--d-fade) var(--ease) both}
  .just-ut{animation:ut var(--d-fade) var(--ease) both}
  .dock.nikk{animation:none}
  .app :active{transform:none!important}
  #dok-fjern,#dok-fjern.pa{transform:translateY(-50%)}
  .leser.pa,.dkvitt{animation:inn var(--d-fade) var(--ease)}
  .dok-progress>i{transition:none}
}

/* ================= runde 3 (K2, Opus): gruppefelt, «Slik gjør du det» og avviksoppføringer (v15) =================
   Port fra design/app/app.mal.html (mal:449-531) til klientens DOM i docs/klient/kontrakt-v3.md §3. Mockupens .avark.oform
   og .avark.rull er ikke klasser her: skjemaene gjenkjennes på innholdet (#avv:has), og #avv ruller allerede som .ark.
   Ingen nye tokens; godkjentForBruk gir ingen klasse, farge eller form utover Ja/Nei-knappens trykket-tilstand (§7). */

/* ---- S3: utfører som metalinje, merknaden ordrett på nøytral flate (§3.1, mal:451-453). ⚠ er tekstglyf (U+FE0E) i --ink,
   aldri emoji-gult som ville lignet avviksfargen ---- */
.utforer{margin-top:2px;color:var(--ink-2)}
.merknad{margin-top:20px;padding:12px 16px;border-radius:var(--radius);background:var(--surface);font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink);overflow-wrap:anywhere}
.merknad+.merknad{margin-top:8px}
/* lang tittel som fortsatt tar mer enn 2,5 linjer (xL): én rolle ned (mal:259 .lengre); s3.js setter .lang2 */
.title.lang.lang2{font-size:var(--t-name);line-height:var(--l-name);letter-spacing:-.015em}

/* ---- veiledningstrinnet (§3.2, mal:458-468): tilbakepil, eksempelbildet på papir, steg nummerert, kilden under ---- */
.sh-top .tilbakepil{display:flex;align-items:center;justify-content:center;flex:none;width:var(--hit);height:var(--ctl);margin:0 2px 0 -12px;border-radius:12px;color:var(--ink)}
.tilbakepil .chev{width:22px;height:22px;stroke-width:1.65;transform:rotate(180deg)}
.sh-top h2.medpil{flex:1;min-width:0}
/* strektegning fra manualen: hvitt papir i begge temaer. Kanten tegnes over bildet (1.4, mal-sarpen:488-491), så den ikke
   brytes der bildet fyller høyden; utsnittenes ytterste 3 px (rester av manualens figurramme) klippes */
.vbilde{position:relative;display:flex;justify-content:center;margin-top:12px;border-radius:14px;background:var(--papir);overflow:hidden}
.vbilde::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--track);pointer-events:none}
.vbilde img{display:block;width:auto;max-width:100%;height:240px;object-fit:contain;clip-path:inset(3px)}
.vsteg{margin-top:16px;padding-left:0;list-style:none;counter-reset:vs}
/* uten bilde (ikke satt, eller lastet ikke): stegene står rett under konteksten, med litt mer luft enn under bildet */
.kontekst+.vsteg{margin-top:20px}
.vsteg li{position:relative;padding:0 0 0 34px;counter-increment:vs;overflow-wrap:anywhere}
.vsteg li+li{margin-top:10px}
.vsteg li::before{content:counter(vs);position:absolute;left:0;top:0;width:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.vkilde{margin-top:18px;padding-top:12px;box-shadow:inset 0 1px 0 var(--track);font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink-2)}
/* ---- Versjon 1.4 (plan 2026-10-19 v2 §2.4, mal-sarpen:483-503): lange veiledninger, bilde i steget, advarsler ----
   Overskriften med tilbake og «Lukk» blir stående øverst når arket rulles (#avv er rulleflaten; .ark har 8 px topp-padding) */
#avv .sh-top:has(>.tilbakepil){position:sticky;top:-8px;z-index:1;margin:-8px calc(var(--pad) * -1) 0;padding:8px var(--pad) 0;background:var(--surface)}
/* bildet hører til steget: det står under stegteksten og går ut til kolonnens venstre kant (forbi nummeret) */
.vsteg li>.vbilde{margin:10px 0 4px -34px}
/* manualens advarsler mellom stegene: uten nummer, på merknadsflaten; ⚠ er tekstglyf i blekk */
.vsteg li.vadv{counter-increment:none;padding:12px 16px;border-radius:14px;background:var(--surface-2)}
.vsteg li.vadv::before{content:none}
/* hvilken maske veiledningen gjelder (over stegene) og hva kilden ikke dekker (under, med kant, ikke fylt som advarslene) */
.vgjelder{margin-top:14px;font-weight:600;color:var(--ink)}
.vgjelder+.vsteg{margin-top:12px}
.vmerk{margin-top:16px;padding:12px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--track);color:var(--ink);overflow-wrap:anywhere}
/* S3: kundens hjelpetekst under punktet («Utfør SJA»), i sekundærfarge, ikke en del av punktnavnet (mal-sarpen:298) */
.step .help{display:block;margin-top:4px;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:400;letter-spacing:0;color:var(--ink-2)}

/* ---- avviksdetaljen (§3.4, mal:470-477): meldingens felt og oppføringene, kronologisk, hver med person og tid ---- */
.mfelt{margin-top:8px;font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink);font-variant-numeric:tabular-nums}
.mfelt p+p{margin-top:2px}
.opp{margin-top:16px;padding-top:14px;box-shadow:inset 0 1px 0 var(--track);font-size:var(--t-sub);line-height:var(--l-sub);color:var(--ink);font-variant-numeric:tabular-nums}
.opp .ohode{font-weight:600}
.opp p+p{margin-top:2px}
.opp .ol,.mfelt .ol{color:var(--ink-2)}
.opp p:not(.ohode),.mfelt p{overflow-wrap:anywhere}
#avv .btn.ton.full{margin-top:10px}
/* ventende tiltak/utbedret: statuslinja står under en hårstrek som .dfolg, glyfen i venstremargen; når den har en
   handling er hele linja knappen (.mhandling, ≥ 44), med chevron i høyrekanten som på punktraden */
#avv>.mstatus{position:relative;margin-top:18px;padding:14px 0 0 26px;box-shadow:inset 0 1px 0 var(--track)}
#avv>.mstatus>.mg{left:0;top:calc(14px + (var(--l-sub) - 16px) / 2)}
#avv>.mstatus:has(>.mhandling){padding-left:0}
.mhandling{position:relative;display:block;width:100%;min-height:var(--hit);padding:0 24px 0 26px;border-radius:10px;text-align:left}
.mhandling>.mg{position:absolute;left:0;top:calc((var(--l-sub) - 16px) / 2);width:16px;height:16px;color:var(--ink)}
.mhandling>.chev{position:absolute;right:2px;top:calc((var(--l-sub) - .706em) / 2);width:.706em;height:.706em;stroke-width:2.4;color:var(--ink-2)}
#avv>.mstatus+.bytt{margin-top:4px}

/* ---- meldeskjemaet og oppføringsskjemaet (§3.3, §3.5, mal:479-498, 524-531): én flate; feltene ruller, knapperaden står
   fast nederst i arket, også over tastaturet (#avv.tast gir bunn og makshøyde) ---- */
.avinn{animation:inn var(--d-fade) var(--ease) both}
#avv:has(>.meld,>.avinn>.o-felter){display:flex;flex-direction:column}
#avv>.meld,#avv>.avinn:has(>.o-felter){display:flex;flex-direction:column;flex:0 1 auto;min-height:0}
.o-felter{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 4px}
.o-felter::-webkit-scrollbar{display:none}
/* konteksten trekkes ikke opp under kanten på rulleflaten (den ville bli klippet) */
.o-felter>.kontekst:first-child{margin-top:0}
.o-bunn{flex:none;padding-top:12px}
.o-bunn .btn{margin:0;width:100%}
.o-felt{margin-top:16px}
.o-felt .o-etikett{display:block;font-size:var(--t-sub);line-height:var(--l-sub);font-weight:600;color:var(--ink-2)}
/* Ja/Nei: to knapper uten forhåndsvalg; valgt = fylt blekk + hake (form), aldri grønt, aldri farge alene. Haken er
   FORMER.hake uten skiven: bare streken, i knappens tekstfarge (mal:1387) */
.jn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.jn button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ctl);padding:0 12px;border-radius:calc(var(--ctl) / 2);font-weight:700;text-align:center;
  color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-2);transition:transform var(--d-trykk) var(--ease)}
.jn button[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.jn .hake{display:none;flex:none;width:24px;height:24px;margin:-4px}
.jn [aria-pressed="true"] .hake{display:block}
.jn .hake .g-fill{display:none}
.jn .hake .g-check{stroke:currentColor}
.jn button:active{transform:scale(.97)}
.o-felt textarea{display:block;width:100%;height:var(--sh,auto);max-height:calc(var(--l-body) * 5 + 11px);margin:4px 0 0;padding:2px 0 9px;border:0;border-radius:0;resize:none;overflow-y:auto;background:transparent;
  font:inherit;font-size:var(--t-body);line-height:var(--l-body);color:var(--ink);caret-color:var(--accent);box-shadow:inset 0 -1.5px 0 var(--track);scrollbar-width:none}
.app .o-felt textarea:focus-visible,.o-felt textarea:focus{outline:none;box-shadow:inset 0 -2px 0 var(--accent)}
/* meldeskjemaet: avviksfeltet er rolig som de andre feltene (--track), aksent når det har fokus */
.meld .s-felt{margin-top:12px}
.meld .s-felt textarea{box-shadow:inset 0 -1.5px 0 var(--track)}
.meld .s-felt textarea:focus{box-shadow:inset 0 -2px 0 var(--accent)}
.meld .merk{margin-top:16px}
.meld .o-bunn .s-rad{margin-top:0}
.meld .o-bunn .btn{width:auto}

/* ---- hjemskjerm-veiledningen (webapp v3, T, Opus): portert fra v9-Sarpen-mockupen (gas--app--sarpen v9) ---- */
.hj-tittel{margin-top:18px;font-size:var(--t-title);line-height:var(--l-title);font-weight:700;letter-spacing:-.025em}
.hj-tekst{margin-top:8px;color:var(--ink-2)}
.hj-steg{list-style:none;margin:22px 0 0;padding:0 0 0 16px;background:var(--surface);border-radius:16px;counter-reset:hj}
.hj-steg>li{display:flex;align-items:center;gap:14px;min-height:76px;padding:12px 16px 12px 0;counter-increment:hj}
.hj-steg>li+li{box-shadow:0 -1px 0 var(--track)}
.hj-steg>li::before{content:counter(hj);flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;background:var(--surface-2);font-size:var(--t-sub);font-weight:700;font-variant-numeric:tabular-nums}
.hj-steg .hj-st{flex:1;min-width:0}
.hj-steg strong{font-weight:700}
.hj-ikonord{display:inline-block;vertical-align:-.02em}
.hj-ikonord svg{display:block;width:1em;height:.75em;stroke-width:2.4}
.hj-fig{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:52px;height:44px;padding:0 10px;border-radius:12px;
  box-shadow:inset 0 0 0 1px var(--track);color:var(--ink)}
.hj-fig svg{display:block;width:22px;height:22px}
.hj-fig[data-ikon="prikkerV"] svg{width:6px}
.hj-fig .ord{font-size:var(--t-sub);font-weight:700;color:var(--accent)}
.hj-bryter{position:relative;width:40px;height:24px;border-radius:12px;background:var(--accent)}
.hj-bryter::after{content:'';position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:var(--hj-knott);box-shadow:0 1px 2px var(--hj-knott-skygge)}
.hj-merk{margin-top:12px;color:var(--ink-2);font-size:var(--t-sub);line-height:var(--l-sub)}
.hj-finn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;margin-top:10px;padding:0 4px;
  font-weight:600;text-align:left;color:var(--ink)}
.hj-finn .chev{flex:none;width:14px;height:14px;transform:rotate(90deg);transition:transform var(--d-trykk) var(--ease)}
.hj-finn[aria-expanded="true"] .chev{transform:rotate(-90deg)}
.hj-hjelp{list-style:none;margin:0;padding:4px 16px;background:var(--surface);border-radius:16px}
.hj-hjelp li{padding:12px 0}
.hj-hjelp li+li{box-shadow:0 -1px 0 var(--track)}
.hj-side{padding-bottom:calc(var(--btn) * 2 + 62px)}
.hj-side.en{padding-bottom:calc(var(--btn) + 50px)}
.hj-knapper{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:12px;
  padding:14px var(--pad) calc(var(--safe-bottom) + 12px);background:var(--surface);box-shadow:0 -1px 0 var(--track)}
.hj-ikon{display:flex;align-items:center;justify-content:center;width:96px;height:96px;margin-top:28px;border-radius:22px;
  background:var(--brand-flate);color:var(--on-brand)}
.hj-ikon>.ik{width:64px;height:64px}
.hj-avslutt .hj-ikon{margin-top:12px}
.hj-avslutt .hj-tittel{margin-top:22px}
/* manualleseren: tittel på to linjer, utgiveren under */
.ltittel .lklamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.ltittel .lutgiver{display:block;font-weight:400;letter-spacing:0;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* kontoret i adminen: appen viser bare beskjeden om å logge inn i administrasjonen */
.kontor-inn{display:grid;place-items:center;text-align:center;color:var(--ink-2)}