/* NOKTO — felles designsystem for Control, Autopilot og Pay.
   Bindende kilde: docs/designprofil.md. Endre profilen først, så denne filen.

   CSP: ingen inline stil kreves. Fonter fra samme opprinnelse (font-src 'self').
   Tilstand står på <html> (serveren setter data-miljo i HTML-en, skriptet resten med setAttribute):
     data-miljo="test" | "produksjon"   miljøbånd vises og tar plass i toppen; alt annet enn test er produksjon
     data-nodstopp="av" | "aktiv"       nødstopp i hele flaten
     data-tema="natt" | "dag"           valgfri overstyring av systemets lys/mørk
   Klasser og tokens er ASCII (æ ø å skrives ae o a). */

/* ==========================================================================
   1. Fonter (OFL 1.1, selvhostet, latin)
   ========================================================================== */

@font-face {
  font-family: "Inter NOKTO";
  src: url("./fonter/inter.9882ad9c.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono NOKTO";
  src: url("./fonter/jetbrains-mono.e55fd1a2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens — Natt er standard
   ========================================================================== */

:root {
  color-scheme: dark;

  --bunn: #0b0c0e;
  --flate: #111317;
  --flate-2: #171a1f;
  --linje: #23262c;
  --linje-sterk: #363a41;
  --kant: #6e727a;
  --tekst: #ece7de;
  --tekst-2: #a39e94;
  --tekst-3: #75716a;
  --messing: #c8a66a;
  --messing-sterk: #dcc08a;
  --primar: #c8a66a;
  --primar-sterk: #dcc08a;
  --pa-primar: #0b0c0e;
  --ok: #7dbe96;
  --varsel: #ee8f4a;
  --varsel-flate: #2a1b10;
  --fare: #f07167;
  --fare-flate: #2b1515;
  --fare-fyll: #c2362c;
  --fare-fyll-sterk: #a92e25;
  --pa-fare-fyll: #ffffff;
  --test: #62c6d3;
  --test-flate: #0f2326;
  --test-strek: rgba(98, 198, 211, 0.22);
  --pa-test: #0b0c0e;
  --rulleskygge: rgba(236, 231, 222, 0.09);

  /* Typografi */
  --skrift: "Inter NOKTO", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono NOKTO", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --v-lett: 300;
  --v-normal: 400;
  --v-medium: 500;
  --v-halvfet: 600;
  --sperre-etikett: 0.12em;
  --sperre-stor: -0.02em;

  /* Rom: 4 px-rutenett */
  --rom-1: 4px;
  --rom-2: 8px;
  --rom-3: 12px;
  --rom-4: 16px;
  --rom-5: 24px;
  --rom-6: 32px;
  --rom-7: 48px;
  --rom-8: 64px;
  --rom-9: 96px;

  /* Form */
  --radius: 2px;
  --strek: 1px;
  --list: 2px;
  --list-aktiv: 4px;
  --knapp-hoyde: 40px;
  --knapp-liten: 32px;
  --felt-hoyde: 44px;
  --rad-hoyde: 52px;
  --celle-luft: 14px;
  --markor: 16px;
  --grunnlinje-luft: 9px;  /* 16 px-linje under h2 20/28: grunnlinjene møtes (se .seksjon-kropp) */
  --kodebredde: 2.625em;       /* U+00A0 + kode med tre bokstaver i Inter 400 (målt: KRW 2,57 em, JPY 2,16 em) */
  --kodebredde-lang: 3.125em;  /* U+00A0 + kode med fire bokstaver (målt: USDC 3,11 em) */

  /* Oppsett */
  --bredde-maks: 1280px;
  --marg: 80px;
  --etikettkolonne: 216px;
  --kolonneluft: 48px;
  --baand-hoyde: 0px;
  --topp-hoyde: 64px;
  --alarm-hoyde: 48px;
  --klebrig: calc(var(--baand-hoyde) + var(--topp-hoyde));
}

/* Dag: papir og blekk. Duplisert for media og [data-tema]; hold blokkene like. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="natt"]) {
    color-scheme: light;
    --bunn: #f4f1ea;
    --flate: #fbf9f4;
    --flate-2: #ece8df;
    --linje: #ddd7cb;
    --linje-sterk: #c3bcae;
    --kant: #857e72;
    --tekst: #14161a;
    --tekst-2: #5d5850;
    --tekst-3: #7a756c;
    --messing: #80612a;
    --messing-sterk: #6a5022;
    --primar: #14161a;
    --primar-sterk: #2a2d33;
    --pa-primar: #dcc08a;
    --ok: #2c7350;
    --varsel: #a04d0b;
    --varsel-flate: #f6e6d6;
    --fare: #b42a21;
    --fare-flate: #f7e1dd;
    --fare-fyll: #b42a21;
    --fare-fyll-sterk: #9c241c;
    --pa-fare-fyll: #ffffff;
    --test: #0d7480;
    --test-flate: #dcedef;
    --test-strek: rgba(13, 116, 128, 0.16);
    --pa-test: #ffffff;
    --rulleskygge: rgba(20, 22, 26, 0.1);
  }
}

:root[data-tema="dag"] {
  color-scheme: light;
  --bunn: #f4f1ea;
  --flate: #fbf9f4;
  --flate-2: #ece8df;
  --linje: #ddd7cb;
  --linje-sterk: #c3bcae;
  --kant: #857e72;
  --tekst: #14161a;
  --tekst-2: #5d5850;
  --tekst-3: #7a756c;
  --messing: #80612a;
  --messing-sterk: #6a5022;
  --primar: #14161a;
  --primar-sterk: #2a2d33;
  --pa-primar: #dcc08a;
  --ok: #2c7350;
  --varsel: #a04d0b;
  --varsel-flate: #f6e6d6;
  --fare: #b42a21;
  --fare-flate: #f7e1dd;
  --fare-fyll: #b42a21;
  --fare-fyll-sterk: #9c241c;
  --pa-fare-fyll: #ffffff;
  --test: #0d7480;
  --test-flate: #dcedef;
  --test-strek: rgba(13, 116, 128, 0.16);
  --pa-test: #ffffff;
  --rulleskygge: rgba(20, 22, 26, 0.1);
}

:root[data-miljo] { --baand-hoyde: 32px; }
/* Alarmbåndet er klebrig fra 1101 px, minst 48 px. Teksten brytes heller enn å kuttes (tekstavstand, lang aktør);
   skriptet måler båndet (ResizeObserver) og setter --alarm-maalt, så klebrig høyde og scroll-padding følger den
   faktiske høyden. Smalere ruller båndet med siden, og toppbrikken bærer tilstanden. */
@media (min-width: 1101px) {
  :root[data-nodstopp="aktiv"] { --klebrig: calc(var(--baand-hoyde) + var(--topp-hoyde) + var(--alarm-maalt, var(--alarm-hoyde))); }
}

@media (max-width: 1100px) {
  :root { --marg: 40px; --etikettkolonne: 200px; --kolonneluft: 32px; }
}

@media (max-width: 760px) {
  :root { --marg: 20px; --kolonneluft: 24px; --knapp-hoyde: 44px; --rad-hoyde: 48px; --topp-hoyde: 56px; --markor: var(--marg); }
}

@media (pointer: coarse) {
  :root { --knapp-hoyde: 44px; --knapp-liten: 44px; }
}

/* ==========================================================================
   3. Grunnlag
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* hidden vinner alltid, også over komponentklasser med display (miljømerke, banner, nøkkelcelle). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--klebrig) + var(--rom-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bunn);
  color: var(--tekst);
  font-family: var(--skrift);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--v-normal);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1 { font-size: 28px; line-height: 36px; font-weight: var(--v-lett); letter-spacing: -0.01em; }
h2 { font-size: 20px; line-height: 28px; font-weight: var(--v-normal); letter-spacing: -0.005em; }
h3, h4 { font-size: 16px; line-height: 24px; font-weight: var(--v-normal); }
strong, b { font-weight: var(--v-medium); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--linje-sterk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--messing); }

::selection { background: var(--linje-sterk); color: var(--tekst); }

:focus-visible { outline: 2px solid var(--messing); outline-offset: 2px; }

.skjult {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 760px) { .kun-bred { display: none !important; } }
@media (min-width: 761px) { .kun-smal { display: none !important; } }

/* ==========================================================================
   4. Typografi
   ========================================================================== */

.t-nokkel  { font-size: 56px; line-height: 60px; font-weight: var(--v-lett); letter-spacing: var(--sperre-stor); }
.t-visning { font-size: 40px; line-height: 48px; font-weight: var(--v-lett); letter-spacing: var(--sperre-stor); }
.t-side    { font-size: 28px; line-height: 36px; font-weight: var(--v-lett); letter-spacing: -0.01em; }
.t-seksjon { font-size: 20px; line-height: 28px; font-weight: var(--v-normal); letter-spacing: -0.005em; }
.t-panel   { font-size: 16px; line-height: 24px; font-weight: var(--v-normal); }
.t-brod    { font-size: 14px; line-height: 20px; font-weight: var(--v-normal); }
.t-meta    { font-size: 13px; line-height: 20px; font-weight: var(--v-normal); color: var(--tekst-2); }
.t-hode    { font-size: 12px; line-height: 16px; font-weight: var(--v-medium); color: var(--tekst-2); }

.etikett {
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--v-medium);
  letter-spacing: var(--sperre-etikett);
  text-transform: uppercase;
  color: var(--tekst-2);
}

.dempet { color: var(--tekst-2); }

/* Maskinidentifikatorer: operasjons-ID, instans, miljøvariabel, kommando, JSON. Aldri beløp eller tid. */
code, .mono {
  font-family: var(--mono);
  font-size: 0.93em;
  font-weight: var(--v-normal);
  letter-spacing: 0;
}
.mono { white-space: nowrap; }
span.mono { line-height: 1; }   /* som code: monofontens linjeboks strekker aldri linjen (inline; blokker setter egen) */
/* Kodebrikke i løpende tekst: 2 px sidepolstring, så tegnsetting rett etter brikken («…=live,») står inntil. */
code {
  padding: 0 2px;
  line-height: 1;   /* monofontens linjeboks strekker aldri linjen (kravlisten 24 px, brødtekst 20 px) */
  border-radius: var(--radius);
  background: var(--flate-2);
  color: var(--tekst);
  white-space: nowrap;
}

/* ==========================================================================
   5. Tall og tid
   Tabulære tall BARE på .tall og <time>: Inter gjør bindestrek, kolon og parentes tabulære ellers.
   ========================================================================== */

.tall, time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tall { text-align: inherit; }
td.tall, th.tall, input.tall { text-align: right; }

.enhet { color: var(--tekst-2); font-weight: var(--v-normal); }
/* Valutakode etter et tall i en tallkolonne: boks med fast bredde (bredeste kode, målt i Inter 14 px),
   høyrestilt. Ulik kodebredde (BTC, CRO, NOK) flytter da ikke kommaet, og kodens høyrekant er kolonnens
   høyrekant i hver rad, der kolonnehodet står. Fyllet står foran boksen (tall, fyll, kode).
   <span class="enhet kode">&nbsp;NOK</span> */
td.tall .enhet.kode { display: inline-block; min-width: var(--kodebredde); text-align: right; }
td.tall .enhet.kode.lang { min-width: var(--kodebredde-lang); }
.del { color: var(--tekst-3); }                 /* nevner i 3/4 */
time .dato { color: var(--tekst-2); }           /* 06.11.2026 i tekst-2, klokkeslett i tekst */
.t-meta time, .seksjon-meta time, .nokkel-detalj time, .kvittering time, .felt-melding time { color: var(--tekst); }
/* I løpende tekst kan tiden brytes mellom dato og klokkeslett (klokkeslett og UTC står sammen med U+00A0). */
.t-meta time, .seksjon-meta time, .nokkel-detalj time, .kvittering time, .fakta time, .alarm-tekst time, .banner time { white-space: normal; }
time .sone { color: var(--tekst-2); }           /* UTC */

/* Desimaljustering: usynlige nuller fyller opp til kolonnens største desimalantall.
   <span class="fyll" aria-hidden="true">000</span> */
.fyll { visibility: hidden; user-select: none; }

/* Instrument: BTC/USD med kvoten i tekst-2. */
.instrument { font-weight: var(--v-medium); white-space: nowrap; }
.instrument .kvote { color: var(--tekst-2); font-weight: var(--v-normal); }

/* ==========================================================================
   6. Ordmerke, låsing og modusmerke
   ========================================================================== */

.ordmerke { display: block; height: 18px; width: auto; flex: none; }
.ordmerke-bokstaver { fill: var(--tekst); }
.ordmerke-indeks { fill: var(--messing); }
.ordmerke.ensfarget .ordmerke-indeks { fill: var(--tekst); }

.lasing { display: flex; align-items: center; gap: var(--rom-4); min-width: 0; }
/* Stor låsing (merke 28 px, innlogging): avstand og hårlinje skaleres med merket (0,9 × 28 → 24 px). */
.lasing.stor { gap: var(--rom-5); }
.lasing.stor .ordmerke { height: 28px; }
.lasing.stor .produkt { padding-left: var(--rom-5); font-size: 20px; line-height: 28px; }
.lasing > a { display: block; line-height: 0; color: inherit; }
.produkt {
  padding-left: var(--rom-4);
  border-left: var(--strek) solid var(--linje-sterk);
  font-size: 16px;
  line-height: 20px;
  font-weight: var(--v-normal);
  color: var(--tekst-2);
  white-space: nowrap;
}

/* Modusmerke i låsingen: skravur = ikke ekte penger, massiv rød = ekte penger. */
.modus {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--rom-2);
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--v-halvfet);
  letter-spacing: var(--sperre-etikett);
  text-transform: uppercase;
  white-space: nowrap;
}
.modus.simulert {
  border: var(--strek) solid var(--test);
  color: var(--tekst);
  background: repeating-linear-gradient(-45deg, var(--test-strek) 0 1.5px, transparent 1.5px 5px), var(--test-flate);
}
.modus.ekte { background: var(--fare-fyll); color: var(--pa-fare-fyll); }

/* ==========================================================================
   7. Toppfelt: miljøbånd, toppfelt, nødstoppbrikke, alarmbånd
   ========================================================================== */

.ramme {
  width: 100%;
  max-width: calc(var(--bredde-maks) + 2 * var(--marg));
  margin: 0 auto;
  padding: 0 var(--marg);
}

.topp-feste { position: sticky; top: 0; z-index: 10; background: var(--bunn); }

/* Miljøbånd: 32 px, alltid øverst, ruller aldri bort. Styres av <html data-miljo>: uten attributtet finnes
   ikke båndet (kundeflater i produksjon); alt annet enn "test" vises som produksjon.
   <div class="miljobaand"><div class="ramme"><div class="miljobaand-plate">[merke][tekst]</div>[handling]</div></div>
   Platen og handlingen er massive flater i full båndhøyde, helt ut til skjermkanten (--baand-plate). Mellom dem
   står båndets bunn: skravur i TEST, sidebunnen med 2 px rød strek under i PRODUKSJON. Fylt rødt i full bredde
   er reservert for alarmbåndet (aktiv nødstopp), så alarmen aldri ser ut som miljøet operatøren alltid ser. */
.miljobaand {
  --baand-plate: var(--fare-fyll);
  display: none;
  height: var(--baand-hoyde);
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  color: var(--pa-fare-fyll);
  background: var(--bunn);
  border-bottom: var(--list) solid var(--fare-fyll);
}
:root[data-miljo] .miljobaand { display: block; }
:root[data-miljo="test"] .miljobaand {
  --baand-plate: var(--test-flate);
  color: var(--tekst);
  background: repeating-linear-gradient(-45deg, var(--test-strek) 0 1.5px, transparent 1.5px 7px), var(--test-flate);
  border-bottom: var(--strek) solid var(--test);
}
.miljobaand .ramme { display: flex; align-items: stretch; justify-content: space-between; gap: var(--rom-4); height: 100%; }
.miljobaand-plate { position: relative; display: flex; align-items: center; gap: var(--rom-3); min-width: 0; margin: 0; padding-right: var(--rom-3); }
/* Teksten har en kort variant til og med 760 px («Ekte penger.», «Ikke produksjon.»), så den får plass på
   320 px, også med tekstavstand (WCAG 1.4.12). Avkortingen er bare en siste sikring. */
.miljobaand-tekst { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Handlingen fyller båndets høyde (32 px), også ved grov peker: båndet har fast høyde, så den er unntaket fra
   44 px-regelen (9). WCAG 2.5.8 holdes med avstand: ingen andre mål innenfor 24 px. */
.miljobaand .miljobaand-handling { position: relative; display: flex; align-items: center; flex: none; min-height: 0; padding: 0 var(--rom-3); font-size: 12px; line-height: 16px; color: inherit; }
.miljobaand-plate, .miljobaand .miljobaand-handling { background: var(--baand-plate); }
/* Platen er båndets venstre ende og handlingen (smal skjerm) den høyre: flaten går helt ut til skjermkanten,
   så skravuren (TEST) eller bunnen (PRODUKSJON) bare står mellom dem. Båndet har overflow: hidden. */
.miljobaand-plate::before,
.miljobaand-handling::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: var(--baand-plate);
}
.miljobaand-plate::before { right: 100%; }
.miljobaand-handling::after { left: 100%; }
:root:not([data-miljo="test"]) .miljobaand-handling { text-decoration-color: currentColor; }
:root:not([data-miljo="test"]) .miljobaand :focus-visible { outline-color: var(--pa-fare-fyll); outline-offset: -4px; }
:root[data-miljo="test"] .miljobaand :focus-visible { outline-offset: -4px; }
:root:not([data-miljo="test"]) .bare-test, :root[data-miljo="test"] .bare-produksjon { display: none !important; }

.miljo {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 22px;
  padding: 0 var(--rom-2);
  border-radius: var(--radius);
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--v-halvfet);
  letter-spacing: var(--sperre-etikett);
  text-transform: uppercase;
  white-space: nowrap;
}
.miljo.test { background: var(--test); color: var(--pa-test); }
.miljo.produksjon { background: var(--pa-fare-fyll); color: var(--fare-fyll); }

.topp-hode { border-bottom: var(--strek) solid var(--linje); }
.topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rom-5);
  height: calc(var(--topp-hoyde) - var(--strek));  /* + hårlinjen under = --topp-hoyde */
}
.topp-hoyre { display: flex; align-items: center; gap: var(--rom-5); min-width: 0; }

/* Nødstoppbrikke: på hver side, alltid med tilstandsord. */
.nodstopp-brikke {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-3);
  height: 32px;
  padding: 0 var(--rom-3);
  border: var(--strek) solid var(--kant);
  border-radius: var(--radius);
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.nodstopp-brikke .etikett { color: var(--tekst-2); }
/* Grov peker: brikken er den faste veien til nødstopp på hver side, med 44 px treffmål (9). */
@media (pointer: coarse) { .nodstopp-brikke { height: var(--knapp-liten); } }
:root[data-nodstopp="aktiv"] .nodstopp-brikke {
  background: var(--fare-fyll);
  border-color: var(--fare-fyll);
  color: var(--pa-fare-fyll);
}
:root[data-nodstopp="aktiv"] .nodstopp-brikke .etikett,
:root[data-nodstopp="aktiv"] .nodstopp-brikke .merkelapp { color: var(--pa-fare-fyll); background: none; padding: 0; }
:root[data-nodstopp="aktiv"] .nodstopp-brikke .merkelapp::before { background: var(--pa-fare-fyll); }

/* Alarmbånd: aktiv nødstopp (role="alert"). Eneste fylte røde flate i full bredde. Minst 48 px; teksten brytes
   og avkortes aldri, så aktøren og tiden alltid står. Klebrig fra 1101 px. */
/* min-height følger det målte innholdet avrundet opp (--alarm-maalt, app.js), så båndet står på hele piksler også
   med tekstavstand (5.1). */
.alarm { min-height: var(--alarm-maalt, var(--alarm-hoyde)); background: var(--fare-fyll); color: var(--pa-fare-fyll); }
.alarm .ramme { display: flex; align-items: center; gap: var(--rom-1) var(--rom-5); min-height: var(--alarm-hoyde); padding-top: var(--rom-3); padding-bottom: var(--rom-3); }
.alarm-tittel {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-3);
  flex: none;
  font-size: 13px;
  line-height: 16px;
  font-weight: var(--v-halvfet);
  letter-spacing: var(--sperre-etikett);
  text-transform: uppercase;
  white-space: nowrap;
}
.alarm-tittel::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }   /* formboksen, som merkelappen (6.7) */
.alarm-tekst { flex: 1; min-width: 0; font-size: 13px; line-height: 20px; }
.alarm a { color: inherit; text-decoration-color: currentColor; flex: none; white-space: nowrap; }
.alarm time .dato, .alarm time .sone { color: inherit; }   /* tekst-2 har for lav kontrast på fylt rødt */
.alarm :focus-visible { outline-color: var(--pa-fare-fyll); }

/* ==========================================================================
   8. Side og seksjoner
   ========================================================================== */

.statuslinje {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rom-4);
  padding: var(--rom-7) 0 var(--rom-4);
}
.statuslinje-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: var(--rom-1) var(--rom-4); }
.statuslinje .t-meta { text-align: right; }

.seksjon {
  display: grid;
  grid-template-columns: var(--etikettkolonne) minmax(0, 1fr);
  column-gap: var(--kolonneluft);
  padding: var(--rom-6) 0 var(--rom-8);
  border-top: var(--strek) solid var(--linje-sterk);
}
.seksjon-hode h2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rom-3); margin-bottom: var(--rom-3); }
.seksjon-meta { font-size: 13px; line-height: 20px; color: var(--tekst-2); max-width: 32ch; }
.seksjon-meta + .seksjon-meta { margin-top: var(--rom-3); }
.seksjon-kropp { min-width: 0; }

/* Bred seksjon: innholdet trenger hele bredden (markedstabellen med ti kolonner). Tittelen står i
   etikettkolonnen, metateksten i innholdskolonnen, og innholdet under over begge. Til og med 900 px
   er den som en vanlig seksjon. */
@media (min-width: 901px) {
  .seksjon.bred { row-gap: var(--rom-5); }
  .seksjon.bred .seksjon-hode {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--etikettkolonne) minmax(0, 1fr);
    column-gap: var(--kolonneluft);
    align-items: baseline;
  }
  .seksjon.bred .seksjon-hode h2 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .seksjon.bred .seksjon-meta { grid-column: 2; max-width: none; }
  .seksjon.bred .seksjon-meta + .seksjon-meta { margin-top: 0; }
  .seksjon.bred .seksjon-kropp { grid-column: 1 / -1; }

  /* Innholdskolonnens topp følger seksjonstittelen (h2 20/28, grunnlinje 21,3 px under toppen):
     - tekst: første linje står på tittelens grunnlinje. 16 px-linjer (tabellhode, underseksjonstittel)
       trenger 9 px luft; tom tilstand (14/20) 3 px mindre. Målt avvik ≤ 0,5 px.
     - innrammet blokk (panel, tallrekke med toppstrek): toppkanten står på tittelens linjetopp. */
  .seksjon:not(.bred) > .seksjon-kropp { padding-top: var(--grunnlinje-luft); }
  .seksjon-kropp > .tom { margin-top: -3px; }
  .seksjon-kropp > .panel { margin-top: calc(-1 * var(--grunnlinje-luft)); }
}

.underseksjon + .underseksjon { margin-top: var(--rom-7); }
.underseksjon-hode {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rom-3);
  margin-bottom: var(--rom-3);
}
.underseksjon-hode h3 {
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--v-medium);
  letter-spacing: var(--sperre-etikett);
  text-transform: uppercase;
  color: var(--tekst-2);
}
.underseksjon-hode .teller { font-size: 12px; line-height: 16px; color: var(--tekst-2); }

.to-kolonner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kolonneluft); align-items: start; }
.to-kolonner > * { min-width: 0; }
.to-kolonner > .underseksjon + .underseksjon { margin-top: 0; }

.bunnlinje {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rom-4);
  padding: var(--rom-5) 0 var(--rom-7);
  border-top: var(--strek) solid var(--linje-sterk);
  font-size: 12px;
  line-height: 16px;
  color: var(--tekst-2);
}
.bunnlinje .ordmerke { height: 12px; }

/* ==========================================================================
   9. Nøkkeltallsplaten: hovedcelle (1,7fr) + tre celler
   ========================================================================== */

.plate {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  border-top: var(--strek) solid var(--linje-sterk);
  margin-bottom: var(--rom-7);
}

.nokkel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rom-3);
  min-width: 0;
  padding: var(--rom-6);
  border-left: var(--strek) solid var(--linje);
}
.nokkel:first-child { border-left: 0; padding-left: 0; padding-right: var(--rom-7); }

/* Tilstandslist: 2 px øverst ved varsel/fare, 4 px ved aktiv nødstopp. */
.nokkel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: var(--list);
  background: transparent;
}
.nokkel.varsel::before { background: var(--varsel); }
.nokkel.fare::before { background: var(--fare); }

.nokkel-verdi {
  font-size: 56px;
  line-height: 60px;
  font-weight: var(--v-lett);
  letter-spacing: var(--sperre-stor);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Tallet står i --tekst også ved varsel og fare: listen og merkelappen bærer tilstanden. Telleren er ofte det
   som virker («3/4» levende), og rødt på den leses som det motsatte. */
.nokkel-verdi .del { color: var(--tekst-3); }
.nokkel-tilstand { display: flex; align-items: center; min-height: 24px; }
.nokkel-detalj { font-size: 13px; line-height: 20px; color: var(--tekst-2); }

/* Utdatert tall: vises, men kan ikke brukes. */
.nokkel.utdatert .nokkel-verdi, .nokkel.utdatert .nokkel-verdi .del { color: var(--tekst-3); }

/* Handlingen i hovedcellen ligger utenfor flyten, så alle tall står på linje. Høyrekanten flukter med
   cellens innhold (polstringen til høyre); til og med 1100 px har cellen ingen, og handlingen står på platens
   høyrekant, under Logg ut og statuslinjen. */
.nokkel-handling { position: absolute; top: calc(var(--rom-6) + 8px - var(--knapp-hoyde) / 2); right: var(--rom-7); }

.fakta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--rom-4);
  row-gap: var(--rom-1);
  font-size: 13px;
  line-height: 20px;
}
.fakta dt { color: var(--tekst-2); }
.sitat { font-size: 14px; line-height: 20px; color: var(--tekst); }
.sitat::before { content: "«"; }
.sitat::after { content: "»"; }

/* Aktiv nødstopp endrer oppsettet: cellen tar hele raden. */
:root[data-nodstopp="aktiv"] .plate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root[data-nodstopp="aktiv"] .nokkel.nodstopp {
  grid-column: 1 / -1;
  /* Flaten og listen går 32 px ut i sidemargen (minst 40 px), så innholdet står på sidens akse som h1 og
     cellene under, og handlingen på samme høyrekant som Logg ut. */
  margin: 0 calc(-1 * var(--rom-6));
  padding: var(--rom-6);
  background: var(--fare-flate);
  border-bottom: var(--strek) solid var(--linje);
}
:root[data-nodstopp="aktiv"] .nokkel.nodstopp::before { right: 0; height: var(--list-aktiv); background: var(--fare); }
:root[data-nodstopp="aktiv"] .nokkel.nodstopp .nokkel-verdi { color: var(--fare); font-weight: var(--v-medium); letter-spacing: 0.02em; }
:root[data-nodstopp="aktiv"] .nokkel.nodstopp .nokkel-handling { right: var(--rom-6); }
/* Cellen har alt fare-flaten: merkelappen mister sin egen flate og polstring, formen og fargen blir. */
:root[data-nodstopp="aktiv"] .nokkel.nodstopp .nokkel-tilstand .merkelapp { padding: 0; background: none; }
:root[data-nodstopp="aktiv"] .nokkel.nodstopp + .nokkel { border-left: 0; padding-left: 0; }

/* Tallrekke: sekundære tall i én rad (Pay, Autopilot). */
.tallrekke {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  border-top: var(--strek) solid var(--linje);
  border-bottom: var(--strek) solid var(--linje);
}
.tallrekke > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--rom-2);
  padding: var(--rom-4);
  border-left: var(--strek) solid var(--linje);
}
.tallrekke > div:first-child { border-left: 0; padding-left: 0; }
.tallrekke dt { font-size: 12px; line-height: 16px; color: var(--tekst-2); }
.tallrekke dd { font-size: 28px; line-height: 36px; font-weight: var(--v-lett); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tallrekke dd .enhet { font-size: 14px; line-height: 0; letter-spacing: 0; }   /* linjen er tallets 36 px */
/* Fire per rad (Pay: åtte tall i to rader, ingen foreldreløs celle). Mobil: to per rad, som alle tallrekker. */
.tallrekke.fire { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tallrekke.fire > div:nth-child(4n + 1) { border-left: 0; padding-left: 0; }
.tallrekke.fire > div:nth-child(n + 5) { border-top: var(--strek) solid var(--linje); }
/* Tilstand i en tallrekke (Ukjent over 0): kvadrat og etikett i --fare. Tallet står i --tekst. */
.tallrekke > div.fare dt { display: flex; align-items: center; gap: 7px; color: var(--fare); }
.tallrekke > div.fare dt::before { content: ""; flex: none; width: 8px; height: 8px; background: currentColor; }

/* ==========================================================================
   10. Tabeller
   ========================================================================== */

/* Alltid: <div class="tabell-ramme" role="region" tabindex="0" aria-labelledby="…">.
   Venstre marg (--markor) gir plass til valgmarkøren uten å flytte innhold. Høyre side har like mye, så
   fokusringen rundt rammen står symmetrisk om tabellen. */
.tabell-ramme {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--markor));
  padding: 0 var(--markor);
  background:
    linear-gradient(to right, var(--bunn) 40%, transparent) left top / 40px 100% no-repeat local,
    linear-gradient(to left, var(--bunn) 40%, transparent) right top / 40px 100% no-repeat local,
    linear-gradient(to right, var(--rulleskygge), transparent) left top / 16px 100% no-repeat scroll,
    linear-gradient(to left, var(--rulleskygge), transparent) right top / 16px 100% no-repeat scroll;
}

/* separate + 0 i avstand: hver strek ligger inne i sin celle, så hode og rader har hele piksler i høyde
   (collapse legger en halv strek utenfor tabellen og forskyver alt under med 0,5 px). */
.tabell { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; }
.tabell thead th {
  padding: 0 var(--celle-luft) var(--rom-3);
  border-bottom: var(--strek) solid var(--linje-sterk);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--v-medium);
  color: var(--tekst-2);
  text-align: left;
  white-space: nowrap;
  vertical-align: bottom;
}
/* Raden er 52 px: 1 px polstring og 1 px strek under, så innholdet sentreres i 50 px (mobil 46 px). En boks
   med jevn høyde (tekstlinje 20 px, merkelapp 22 px) står da på hele piksler, og formene blir like i hver rad. */
.tabell tbody th, .tabell tbody td {
  height: var(--rad-hoyde);
  padding: 0 var(--celle-luft) 1px;
  border-bottom: var(--strek) solid var(--linje);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
  font-weight: var(--v-normal);
}
.tabell tbody th { font-weight: var(--v-medium); }
.tabell tbody tr:last-child > * { border-bottom-color: transparent; }   /* linjer mellom rader; seksjonsstreken avslutter. Streken står (usynlig), så siste rad har samme geometri */
.tabell th:first-child, .tabell td:first-child { padding-left: 0; }
.tabell th:last-child, .tabell td:last-child { padding-right: 0; }
.tabell th.tall, .tabell td.tall { text-align: right; }
.tabell .smal { width: 1%; }
.tabell td.bryt { white-space: normal; min-width: 240px; color: var(--tekst-2); }
.tabell td.tom-celle { color: var(--tekst-2); }

/* Valgt rad: flate + 2 px messing i margen. Ingenting i raden flytter seg. */
.tabell tbody tr.valgt > * { background: var(--flate); }
.tabell tbody tr.valgt > :first-child {
  box-shadow: calc(2px - var(--markor)) 0 0 var(--flate), calc(-1 * var(--markor)) 0 0 var(--messing);
}

/* Utdatert rad: dempet, men lesbar. Statusmerket bærer foreldet. */
.tabell tbody tr.utdatert > * { color: var(--tekst-2); }
.tabell tbody tr.utdatert .instrument { font-weight: var(--v-normal); }
.tabell tbody tr.utdatert .merkelapp.foreldet { color: var(--fare); }
.tabell tbody tr.utdatert .gnist-linje { stroke-dasharray: 2 3; }
.tabell tbody tr.utdatert .gnist-siste { fill: var(--tekst-2); }

/* Gnist (minigraf) 120 x 28: linje i tekst-2, prikket startlinje, siste punkt i messing. */
.gnist { display: block; width: 120px; height: 28px; overflow: visible; }
.gnist-linje { fill: none; stroke: var(--tekst-2); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gnist-ref { fill: none; stroke: var(--linje-sterk); stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
.gnist-siste { fill: var(--messing); }

/* ==========================================================================
   11. Statusmerker: tekst + form, aldri farge alene. Klassen er enum-verdien.
   ========================================================================== */

.merkelapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--v-medium);
  color: var(--tekst);
  white-space: nowrap;
  vertical-align: middle;
}
/* Formen tegnes av tilstandsklassen i en boks på 8 × 8 px: ordet starter alltid 15 px etter formens venstre
   kant, uansett form. Alle streker er hele piksler (1 eller 2 px), så samme form er lik i hver rad, ved DPR 1
   og 2. Uten klasse: ingen form (aldri «i orden» ved en feil). */
.merkelapp::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

/* Sirkel: i orden. Bare formen har farge. */
.merkelapp.sanntid::before, .merkelapp.levende::before, .merkelapp.utfort::before,
.merkelapp.avstemt_utfort::before, .merkelapp.betalt::before, .merkelapp.samsvar::before,
.merkelapp.av::before, .merkelapp.oppdatert::before, .merkelapp.ap-aktiv::before { background: var(--ok); }

/* Ring: underveis eller sent. «utdatert» er panelets egen alder (6.2), «forsinket» markedsdata (7.3), «estimat» en
   verdi satt med siste kjente pris (Autopilot, 7.5). */
.merkelapp.forsinket, .merkelapp.sendes, .merkelapp.venter, .merkelapp.oppretter, .merkelapp.ny,
.merkelapp.utdatert, .merkelapp.estimat { color: var(--varsel); }
.merkelapp.forsinket::before, .merkelapp.sendes::before, .merkelapp.venter::before,
.merkelapp.oppretter::before, .merkelapp.ny::before, .merkelapp.utdatert::before,
.merkelapp.estimat::before, .merkelapp.ap-venter::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.merkelapp.ap-venter { color: var(--tekst-2); }

/* Kvadrat på fare-flate: feil, ukjent, stopp. Flaten har 7 px venstrepolstring. */
.merkelapp.foreldet, .merkelapp.stille, .merkelapp.ukjent_utfall, .merkelapp.ukjent, .merkelapp.avvik,
.merkelapp.ikke_funnet, .merkelapp.ugyldig, .merkelapp.feilet, .merkelapp.aktiv,
.merkelapp.frakoblet, .merkelapp.api_feil {
  padding: 0 var(--rom-2) 0 7px;
  border-radius: var(--radius);
  background: var(--fare-flate);
  color: var(--fare);
}
.merkelapp.foreldet::before, .merkelapp.stille::before, .merkelapp.ukjent_utfall::before, .merkelapp.ukjent::before,
.merkelapp.avvik::before, .merkelapp.ikke_funnet::before, .merkelapp.ugyldig::before, .merkelapp.feilet::before,
.merkelapp.aktiv::before, .merkelapp.frakoblet::before, .merkelapp.api_feil::before { border-radius: 0; background: currentColor; }
/* I en tabellkolonne henger flatens polstring ut i cellepolstringen (14 px): formen står på kolonnens akse,
   som sirkel, ring og strek i radene over og under. Målt: 0 px avvik i alle statuskolonner. */
.tabell .merkelapp.foreldet, .tabell .merkelapp.stille, .tabell .merkelapp.ukjent_utfall, .tabell .merkelapp.ukjent,
.tabell .merkelapp.avvik, .tabell .merkelapp.ikke_funnet, .tabell .merkelapp.ugyldig, .tabell .merkelapp.feilet,
.tabell .merkelapp.aktiv, .tabell .merkelapp.frakoblet, .tabell .merkelapp.api_feil { margin-left: -7px; }
/* I en tabellcelle står merkelappen øverst i linjeboksen (ikke midt på fontens x-høyde): cellen sentrerer da
   en boks på 22 px i raden på 52 px, og formen lander på hele piksler i hver rad (15 + 7 px). */
.tabell td > .merkelapp { vertical-align: top; }

/* Strek: avsluttet uten feil. 8 × 2 px midt i boksen. */
.merkelapp.kansellert, .merkelapp.utlopt, .merkelapp.avvist, .merkelapp.avstemt_ikke_utfort,
.merkelapp.ap-pauset, .merkelapp.ap-stoppet { color: var(--tekst-2); }
.merkelapp.kansellert::before, .merkelapp.utlopt::before, .merkelapp.avvist::before,
.merkelapp.avstemt_ikke_utfort::before, .merkelapp.ap-pauset::before, .merkelapp.ap-stoppet::before {
  border-radius: 0;
  background: linear-gradient(currentColor, currentColor) 0 3px / 8px 2px no-repeat;
}

/* Halvfylt sirkel: arbeider (Autopilot ANALYSERER). */
.merkelapp.ap-analyserer::before {
  background: linear-gradient(90deg, var(--tekst) 50%, transparent 50%);
  box-shadow: inset 0 0 0 2px var(--tekst);
}

/* Rute i messing: krever deg (Autopilot FORESLÅR). Tegnet i boksen, ingen rotasjon. */
.merkelapp.ap-foreslar { color: var(--messing); }
.merkelapp.ap-foreslar::before { border-radius: 0; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Skravert kvadrat: ikke ekte penger (SIMULERING, Testmodus). */
.merkelapp.ap-simulering::before, .merkelapp.testmodus::before {
  border-radius: 0;
  background: repeating-linear-gradient(-45deg, var(--test) 0 1.5px, transparent 1.5px 3px);
  box-shadow: inset 0 0 0 1px var(--test);
}

/* Risikoprofil: antall fylte streker bærer nivået. n1 FORSIKTIG, n2 BALANSERT, n3 OFFENSIV. */
.risiko {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-2);
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--v-medium);
  letter-spacing: var(--sperre-etikett);
  text-transform: uppercase;
  white-space: nowrap;
}
.risiko-streker { display: inline-flex; gap: 2px; }
.risiko-streker i { display: block; width: 3px; height: 12px; background: var(--linje-sterk); }
.risiko.n1 .risiko-streker i:nth-child(-n + 1),
.risiko.n2 .risiko-streker i:nth-child(-n + 2),
.risiko.n3 .risiko-streker i:nth-child(-n + 3) { background: var(--tekst); }

/* ==========================================================================
   12. Knapper
   ========================================================================== */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rom-2);
  height: var(--knapp-hoyde);
  padding: 0 var(--rom-5);
  border: var(--strek) solid var(--kant);
  border-radius: var(--radius);
  background: transparent;
  color: var(--tekst);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--v-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.knapp:hover { border-color: var(--tekst-2); }
.knapp.primar { background: var(--primar); border-color: var(--primar); color: var(--pa-primar); }
.knapp.primar:hover { background: var(--primar-sterk); border-color: var(--primar-sterk); }
.knapp.fare { background: var(--fare-fyll); border-color: var(--fare-fyll); color: var(--pa-fare-fyll); }
.knapp.fare:hover { background: var(--fare-fyll-sterk); border-color: var(--fare-fyll-sterk); }
.knapp.fare-omriss { border-color: var(--fare); color: var(--fare); }
.knapp.fare-omriss:hover { background: var(--fare-flate); }
.knapp.liten { height: var(--knapp-liten); padding: 0 var(--rom-3); font-size: 13px; }
.knapp:disabled, .knapp:disabled:hover, .knapp[aria-disabled="true"], .knapp[aria-disabled="true"]:hover {
  cursor: not-allowed;
  background: transparent;
  border-color: var(--linje);
  color: var(--tekst-3);
}

.lenkeknapp {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tekst);
  font-weight: var(--v-medium);
  text-decoration: underline;
  text-decoration-color: var(--messing);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.lenkeknapp:hover { color: var(--messing-sterk); }
.lenkeknapp.mono { font-family: var(--mono); font-size: 13px; font-weight: var(--v-normal); }
/* Grov peker: 44 px treffhøyde (radene er 48 px på mobil), og minst 44 px bredde på korte radhandlinger (QR). */
@media (pointer: coarse) {
  .lenkeknapp { display: inline-flex; align-items: center; min-height: 44px; }
  .handlinger .lenkeknapp { min-width: 44px; }
}

.knapperad { display: flex; flex-wrap: wrap; gap: var(--rom-3); margin-top: var(--rom-5); }
.handlinger { display: flex; gap: var(--rom-4); }

/* ==========================================================================
   13. Skjema
   ========================================================================== */

.felt + .felt, .felt-rad + .felt, .felt + .felt-rad { margin-top: var(--rom-4); }
.felt label {
  display: flex;
  justify-content: space-between;
  gap: var(--rom-3);
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--v-medium);
}
.felt label .hint { font-weight: var(--v-normal); color: var(--tekst-2); }
.felt input, .felt select, .felt textarea {
  display: block;
  width: 100%;
  height: var(--felt-hoyde);
  padding: 0 var(--rom-3);
  border: var(--strek) solid var(--kant);
  border-radius: var(--radius);
  background: var(--flate);
  color: var(--tekst);
  font-size: 14px;
}
.felt textarea { height: auto; min-height: 88px; padding: var(--rom-3); line-height: 20px; resize: vertical; }
.felt input::placeholder, .felt textarea::placeholder { color: var(--tekst-2); opacity: 1; }
.felt input:focus-visible, .felt select:focus-visible, .felt textarea:focus-visible { border-color: var(--messing); }
.felt input.tall { font-variant-numeric: tabular-nums; }
.felt input.mono { font-family: var(--mono); font-size: 13px; }
.felt-rad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--rom-4); }
.felt-rad .felt + .felt { margin-top: 0; }
.felt-melding { margin-top: var(--rom-2); font-size: 13px; line-height: 20px; color: var(--tekst-2); }
.felt.feil input, .felt.feil select, .felt.feil textarea { border-color: var(--fare); box-shadow: inset 3px 0 0 var(--fare); }
.felt.feil .felt-melding { color: var(--fare); }

/* ==========================================================================
   14. Bannere, tom, lasting, kvittering
   ========================================================================== */

.banner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--rom-1) var(--rom-3);
  padding: var(--rom-3) var(--rom-4);
  border: var(--strek) solid var(--fare);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--fare-flate);
  color: var(--tekst);
}
.banner strong { flex: none; color: var(--fare); font-weight: var(--v-halvfet); }
.banner > span { flex: 1 1 16rem; min-width: 0; }
.banner.utdatert { border-color: var(--varsel); background: var(--varsel-flate); }
.banner.utdatert strong { color: var(--varsel); }
.banner .lenkeknapp { flex: none; margin-left: auto; }

/* Tom tilstand: tekst, ingen egen ramme eller luft. Står den først i innholdskolonnen, står første linje på
   seksjonstittelens grunnlinje (se .seksjon-kropp > .tom). */
.tom { color: var(--tekst-2); }
.tom strong { display: block; margin-bottom: var(--rom-1); color: var(--tekst); font-weight: var(--v-medium); }
.tom.stiplet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 264px;
  padding: var(--rom-6);
  border: var(--strek) dashed var(--linje-sterk);
  border-radius: var(--radius);
  text-align: center;
}

.skjelett { display: grid; gap: var(--rom-3); padding: var(--rom-4) 0; }
.skjelett span { display: block; height: 12px; border-radius: var(--radius); background: var(--flate-2); }
.skjelett span:nth-child(1) { width: 72%; }
.skjelett span:nth-child(2) { width: 54%; }
.skjelett span:nth-child(3) { width: 64%; }
/* Skjelett med tabellens geometri: hode 29 px og rader à --rad-hoyde (52, mobil 48) med strek mellom, så
   innholdet under står stille når første svar kommer (tre rader i marked, ordre og Pay, fire i drift: det
   vanlige antallet arbeidere og kilder). <div class="skjelett rader"><span></span>…</div> */
.skjelett.rader { display: block; padding: 0; }
.skjelett.rader::before { content: ""; display: block; height: 29px; border-bottom: var(--strek) solid var(--linje-sterk); }
.skjelett.rader span:nth-child(n) {
  display: flex;
  align-items: center;
  width: auto;
  height: var(--rad-hoyde);
  padding-bottom: 1px;
  border-bottom: var(--strek) solid var(--linje);
  border-radius: 0;
  background: none;
}
.skjelett.rader span:last-child { border-bottom-color: transparent; }
.skjelett.rader span::before { content: ""; height: 12px; border-radius: var(--radius); background: var(--flate-2); }
.skjelett.rader span:nth-child(3n + 1)::before { width: 72%; }
.skjelett.rader span:nth-child(3n + 2)::before { width: 54%; }
.skjelett.rader span:nth-child(3n)::before { width: 64%; }

.kvittering { margin-top: var(--rom-4); font-size: 13px; line-height: 20px; color: var(--tekst-2); }
.kvittering strong { color: var(--tekst); }

/* Ramme rundt et skjema eller en tilstand som skal holdes samlet. */
.panel {
  padding: var(--rom-5);
  border: var(--strek) solid var(--linje-sterk);
  border-radius: var(--radius);
  background: var(--flate);
}
.panel-topp { display: flex; justify-content: space-between; align-items: center; gap: var(--rom-3); margin-bottom: var(--rom-3); }
.panel > p:not(.kvittering) { max-width: 56ch; margin-bottom: var(--rom-5); color: var(--tekst-2); }
:root[data-nodstopp="aktiv"] .panel.nodstopp { border-color: var(--fare); box-shadow: inset 0 3px 0 var(--fare); }

.kravliste { margin: var(--rom-1) 0 var(--rom-2); font-size: 13px; line-height: 20px; color: var(--tekst-2); }
/* 13/24: hver linje 24 px. Punktet er vanlig løpende tekst (kodebrikker står inline, med luft mellom
   linjene); formen står utenfor teksten, midt på første linje, også når punktet brytes. Hele piksler. */
.kravliste li { position: relative; padding-left: var(--rom-4); line-height: 24px; }
.kravliste li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--tekst-2); }   /* strek: oppfylt */
.kravliste li.brutt { color: var(--fare); }
.kravliste li.brutt::before { top: 8px; height: 8px; background: currentColor; }   /* kvadrat: ikke oppfylt eller ikke bekreftet */

.definisjoner > div { padding: var(--rom-4) 0; border-bottom: var(--strek) solid var(--linje); }
.definisjoner > div:first-child { padding-top: 0; }
.definisjoner > div:last-child { padding-bottom: 0; border-bottom: 0; }
.definisjoner dt { font-weight: var(--v-medium); margin-bottom: var(--rom-1); }
.definisjoner dd { font-size: 13px; line-height: 20px; color: var(--tekst-2); }

/* Revisjonsspor: hendelser i tid, siste i messing. */
.spor { margin-top: var(--rom-6); padding: var(--rom-5); border: var(--strek) solid var(--linje-sterk); border-radius: var(--radius); background: var(--flate); }
/* Hodet: tittel · hele operasjons-ID-en (kan markeres og kopieres) · antall og Lukk. Til og med 760 px står ID-en
   på egen linje under tittelen, så den leses i ett stykke. */
.spor-hode {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: baseline;
  margin-bottom: var(--rom-4);
}
.spor-skille { margin: 0 var(--rom-1); }
.spor-id { margin: 0; white-space: normal; overflow-wrap: break-word; }
.spor-hode > .spor-meta { margin-left: var(--rom-3); }
.spor-arsak { margin: calc(-1 * var(--rom-2)) 0 var(--rom-4); font-size: 13px; line-height: 20px; }
/* Kolonnene ligger på listen og deles av alle rader (subgrid): tid, overgang og detalj står som i en tabell.
   Tidslinjen ligger i listens venstre polstring. */
.spor-liste {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);   /* tid (med dato når den er en annen dag) */
  column-gap: var(--rom-5);
  padding-left: var(--rom-5);
}
/* Radene står på første linje: tid, overgang (merkelapp 22 px) og detaljens første linje (20 px, 1 px over)
   har samme midtlinje, 19 px under radens topp, også når detaljen brytes. Toppjustert, så radhøyden er hele
   piksler (grunnlinjejustering ga 45,19 px). Tidslinjen og ringen står på midtlinjen. */
.spor-liste li {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  padding: var(--rom-2) 0;
  font-size: 13px;
}
.spor-liste li::before { content: ""; position: absolute; left: calc(3px - var(--rom-5)); top: 0; bottom: 0; width: 1px; background: var(--linje-sterk); }
.spor-liste li > time, .spor-liste li > .spor-detalj { padding-top: 1px; }
.spor-liste li:first-child::before { top: calc(var(--rom-2) + 11px); }
.spor-liste li:last-child::before { bottom: auto; height: calc(var(--rom-2) + 11px); }
.spor-liste li:only-child::before { display: none; }
.spor-liste li::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rom-5)); top: calc(var(--rom-2) + 7px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--flate);
  box-shadow: inset 0 0 0 1px var(--tekst-2);
}
.spor-liste li:last-child::after { background: var(--messing); box-shadow: none; }
.spor-overgang { display: inline-flex; align-items: center; gap: var(--rom-2); }
/* Revisjonsgrunnlag: aldri avkortet. JSON-en har brytepunkt (<wbr>) etter «,» og «:»; et ledd brytes bare når det
   ikke får plass alene. */
.spor-liste .spor-detalj { color: var(--tekst-2); line-height: 20px; white-space: normal; overflow-wrap: break-word; }
/* Et ord med bindestrek (ID, «vps-1:901») flyttes helt til neste linje; bare et ord som er bredere enn kolonnen,
   brytes inni. Toppjustert, så første linje står på radens midtlinje. */
.spor-liste .spor-detalj .hel { display: inline-block; max-width: 100%; vertical-align: top; }

/* Overgang tegnes i CSS: fontene har ikke pilglyf. */
.pil { position: relative; display: inline-block; flex: none; width: 16px; height: 1px; background: var(--tekst-3); }
.pil::after {
  content: "";
  position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid var(--tekst-3);
  border-right: 1px solid var(--tekst-3);
  transform: rotate(45deg);
}

/* ==========================================================================
   15. Urskiven: brandflate (innlogging, Autopilot, Pay-kvittering)
   ========================================================================== */

.urskive { width: min(100%, 520px); height: auto; }
.urskive-ring { fill: none; stroke: var(--linje); stroke-width: 1; }
.urskive-minutt { fill: none; stroke: var(--linje-sterk); stroke-width: 1; }
.urskive-time { fill: none; stroke: var(--tekst-3); stroke-width: 2; }
.urskive-indeks { fill: var(--messing); }
/* Viseren går ett steg (6°) per fullført steg, satt med el.style.setProperty('--steg', n). Ingen sløyfe. */
.urskive-viser { fill: var(--tekst-2); transform-box: view-box; transform-origin: 260px 260px; transform: rotate(calc(var(--steg, 0) * 6deg)); }
.urskive.med-viser .urskive-viser { opacity: 1; }

.innlogging-flate {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--rom-9);
  min-height: calc(100vh - var(--klebrig) - 120px);
  padding: var(--rom-9) 0;
}
.innlogging-flate .lasing { margin-bottom: var(--rom-7); }
.innlogging-flate h1 { font-size: 40px; line-height: 48px; font-weight: var(--v-lett); letter-spacing: var(--sperre-stor); margin: var(--rom-3) 0 var(--rom-4); }
.innlogging-flate .urskive { justify-self: end; }

/* ==========================================================================
   16. Bevegelse: bare når brukeren ikke har bedt om redusert bevegelse
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .knapp, .lenkeknapp, a { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, text-decoration-color 120ms ease; }
  .urskive-viser { transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  /* Tre slag (4,8 s), så står skjelettet stille: under grensen i WCAG 2.2.2. */
  .skjelett:not(.rader) span, .skjelett.rader span::before { animation: nokto-puls 1.6s ease-in-out 3; }
}
@keyframes nokto-puls { 50% { opacity: 0.45; } }

/* ==========================================================================
   17. Tvungne farger (Windows kontrastmodus): former og lister beholdes
   ========================================================================== */

@media (forced-colors: active) {
  .merkelapp::before, .risiko-streker i, .nokkel::before, .alarm-tittel::before, .tallrekke dt::before,
  .kravliste li::before, .spor-liste li::after, .ordmerke-indeks, .urskive-indeks, .gnist-siste {
    forced-color-adjust: none;
  }
  .merkelapp, .risiko, .nokkel, .alarm, .kravliste, .spor-liste, .ordmerke, .urskive, .gnist, .tallrekke {
    --ok: CanvasText; --varsel: CanvasText; --fare: CanvasText; --tekst: CanvasText; --tekst-2: CanvasText;
    --test: CanvasText; --messing: CanvasText; --linje-sterk: GrayText; --flate: Canvas;
  }
  .nokkel.varsel::before, .nokkel.fare::before, .nokkel.nodstopp::before { background: CanvasText; }
  .miljobaand, .alarm, .modus, .miljo { border: var(--strek) solid CanvasText; }
  /* Valgt rad: skyggen forsvinner i tvungne farger, så markøren tegnes som egen strek i Highlight. */
  .tabell tbody tr.valgt > :first-child { position: relative; }
  .tabell tbody tr.valgt > :first-child::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--markor)); top: 0; bottom: 0;
    width: var(--list);
    background: Highlight;
    forced-color-adjust: none;
  }
  /* Overgangspilen i revisjonssporet: streken er en bakgrunn og ville forsvinne. */
  .pil { forced-color-adjust: none; background: CanvasText; }
  .pil::after { forced-color-adjust: none; border-color: CanvasText; }
  /* Feilfelt: innfellingen forsvinner, så feilen bæres av en dobbel ramme. */
  .felt.feil input, .felt.feil select, .felt.feil textarea { border: 3px double CanvasText; }
}

/* ==========================================================================
   18. Brytpunkter
   ========================================================================== */

@media (max-width: 1100px) {
  .plate { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plate > .nokkel:first-child { grid-column: 1 / -1; padding-right: 0; border-bottom: var(--strek) solid var(--linje); }
  .plate > .nokkel:first-child .nokkel-handling { right: 0; }
  .plate > .nokkel:nth-child(2) { border-left: 0; padding-left: 0; }
  .innlogging-flate { grid-template-columns: minmax(0, 440px); }
  .innlogging-flate .urskive { display: none; }
}

@media (max-width: 900px) {
  .seksjon { grid-template-columns: minmax(0, 1fr); row-gap: var(--rom-5); }
  .seksjon-meta { max-width: none; }
  .to-kolonner { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1101px) {
  :root[data-nodstopp="aktiv"] .alarm { position: sticky; top: calc(var(--baand-hoyde) + var(--topp-hoyde)); z-index: 9; }
}

@media (max-width: 760px) {
  .topp { gap: var(--rom-3); }
  .topp-hoyre { gap: var(--rom-3); }
  .lasing { gap: var(--rom-3); }
  .topp .ordmerke { height: 14px; }
  .topp .produkt { display: none; }
  .nodstopp-brikke { gap: var(--rom-2); padding: 0 var(--rom-2); }
  /* Båndet på 320 px med tekstavstand (1.4.12): merke, kort tekst og Logg ut får plass uten avkorting. */
  .miljobaand-plate { gap: var(--rom-2); padding-right: var(--rom-2); }
  .miljobaand .miljobaand-handling { padding: 0 var(--rom-2); }
  /* PRODUKSJON: Logg ut står uten egen plate, i --tekst på båndets bunn. Båndet er da to flater, platen og bunnen
     med rød strek under; et kort stykke bunn mellom to røde plater leste som en flate som manglet (6.3). */
  :root:not([data-miljo="test"]) .miljobaand .miljobaand-handling { background: none; color: var(--tekst); }
  :root:not([data-miljo="test"]) .miljobaand-handling::after { display: none; }
  :root:not([data-miljo="test"]) .miljobaand .miljobaand-handling:focus-visible { outline-color: var(--messing); }

  .alarm .ramme { flex-wrap: wrap; gap: var(--rom-1) var(--rom-4); }
  .alarm-tekst { flex-basis: 100%; order: 3; }

  .statuslinje { flex-direction: column; gap: var(--rom-1); padding-top: var(--rom-6); }
  .statuslinje h1 { font-size: 20px; line-height: 28px; font-weight: var(--v-normal); letter-spacing: -0.005em; }
  .statuslinje .t-meta { text-align: left; }
  .statuslinje-meta { justify-content: flex-start; min-height: 22px; }   /* plass til merkelappen fra første tegning */

  /* Nøkkeltall som rader: etikett og tilstand til venstre, tall til høyre. */
  .plate, :root[data-nodstopp="aktiv"] .plate { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--rom-5); }
  .plate > .nokkel, .plate > .nokkel:nth-child(2) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "etikett verdi" "tilstand verdi" "detalj detalj";
    column-gap: var(--rom-4);
    row-gap: var(--rom-1);
    align-items: center;
    padding: var(--rom-4) 0;
    border-left: 0;
    border-top: var(--strek) solid var(--linje);
  }
  .plate > .nokkel .etikett { grid-area: etikett; }
  .plate > .nokkel .nokkel-verdi { grid-area: verdi; font-size: 40px; line-height: 44px; text-align: right; }
  .plate > .nokkel .nokkel-tilstand { grid-area: tilstand; }
  .plate > .nokkel .nokkel-detalj { grid-area: detalj; font-size: 12px; line-height: 16px; }
  .plate > .nokkel:first-child, :root[data-nodstopp="aktiv"] .plate > .nokkel.nodstopp {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rom-2);
    padding: var(--rom-5) 0;
    border-top: 0;
    border-bottom: 0;
  }
  .plate > .nokkel:first-child .nokkel-verdi { font-size: 56px; line-height: 60px; text-align: left; }
  .plate > .nokkel:first-child .nokkel-handling { position: static; order: 5; width: 100%; margin-top: var(--rom-3); }
  /* Aktiv nødstopp på smal skjerm: cellen er tett (16 px over og under, fakta på én linje), så alle fire
     tilstander står i første skjermbilde på 390 × 844 (6.4). */
  :root[data-nodstopp="aktiv"] .plate > .nokkel.nodstopp { padding: var(--rom-4) var(--marg); margin: 0 calc(-1 * var(--marg)); }
  :root[data-nodstopp="aktiv"] .plate > .nokkel.nodstopp .fakta { display: block; }
  :root[data-nodstopp="aktiv"] .plate > .nokkel.nodstopp .fakta :is(dt, dd) { display: inline; }
  :root[data-nodstopp="aktiv"] .plate > .nokkel.nodstopp .fakta dt::after { content: "\00a0"; }
  :root[data-nodstopp="aktiv"] .plate > .nokkel.nodstopp .fakta dd + dt::before { content: "· "; color: var(--tekst-2); }

  .seksjon { padding: var(--rom-5) 0 var(--rom-7); }

  /* Tabeller når skjermkanten; første kolonne står fast i .tabell.fest. */
  .tabell-ramme { margin-right: calc(-1 * var(--marg)); padding-right: var(--marg); }
  .tabell.fest thead th:first-child, .tabell.fest tbody > tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bunn);
    padding-right: var(--rom-4);
    box-shadow: calc(-1 * var(--markor)) 0 0 var(--bunn);
  }
  .tabell.fest tbody tr.valgt > :first-child {
    background: var(--flate);
    box-shadow: calc(2px - var(--markor)) 0 0 var(--flate), calc(-1 * var(--markor)) 0 0 var(--messing);
  }
  /* Kolonnene snapper til kanten av den faste cellen (--fast-bredde, målt i app.js): en kolonne i ro står aldri halvt
     under den, så et beløp aldri vises uten første siffer («1 200,00» som «200,00») og en status aldri som et annet
     ord («ukjent» som «kjent»). Snappingen holder bare når hver kolonne får plass ved siden av den faste cellen
     (Chrome stopper hvor som helst inni en kolonne som er bredere enn snapporten): --kolonne-maks (målt i app.js) er
     den plassen, og innhold som kan bli bredere (årsak, referanse, operasjon, handlinger, lang feiltekst) brytes
     innenfor den. scroll-padding-right holder sidemargen utenfor snapporten. --hale gir plass etter siste kolonne,
     så siste stilling viser de siste kolonnene som får plass, med høyrekanten innenfor sidemargen. */
  .tabell-ramme {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--fast-bredde, 0px);
    scroll-padding-right: var(--marg);
    padding-right: calc(var(--marg) + var(--hale, 0px));
  }
  .tabell.fest thead th { scroll-snap-align: start; }
  .tabell.fest { --innhold-maks: calc(var(--kolonne-maks, 100vw) - 2 * var(--celle-luft)); }
  .tabell.fest td.bryt { min-width: 0; width: var(--kolonne-maks, auto); overflow-wrap: anywhere; }
  .tabell.fest tbody td > .mono {
    display: inline-block;
    width: max-content;
    max-width: var(--innhold-maks);
    line-height: 20px;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
  }
  .tabell.fest :is(.status-arsak, .operasjon, .handlinger) { flex-wrap: wrap; width: max-content; max-width: var(--innhold-maks); }
  /* Dato over klokkeslett i den faste cellen (Opprettet): cellen blir om lag 80 px smalere, så det er plass til
     status og beløp ved siden av den også på 320 px. To linjer à 20 px står i raden på 48 px. */
  .tabell.fest tbody > tr > :first-child time .dato { display: block; }
  /* Rullehint på den faste cellen: 14 px (cellepolstringen) fra cellens flate til gjennomsiktig over innholdet som
     glir under. Første halvdel er dekkende, så en glyf som står delvis under cellen mens tabellen ruller, aldri leses
     som et annet tall («250,00» som «i0,00»); resten toner ut. Ved scrollLeft 0 ligger hintet i neste celles
     polstring. */
  .tabell.fest thead th:first-child::after, .tabell.fest tbody > tr > :first-child::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: var(--celle-luft);
    pointer-events: none;
    background: linear-gradient(to right, var(--bunn) 50%, transparent);
  }
  .tabell.fest tbody tr.valgt > :first-child::after { background: linear-gradient(to right, var(--flate) 50%, transparent); }
  /* Fokusringen står inne i rammen: rammen fyller skjermbredden (sidemargen er polstring), så en ring utenfor
     ville ligge utenfor skjermen på begge sider. 2 px ring 2 px fra skjermkanten, 16 px fra tabellen. Den faste
     cellen (sticky, z-index 1) ville dekke en outline på rammen, så ringen er et lag på .tabell-feste (rundt
     rammen) over cellene (z-index 2). Uten :has står outline på rammen som før. */
  .tabell-ramme:focus-visible { outline-offset: -4px; }
  @supports selector(:has(*)) {
    .tabell-feste { position: relative; }
    .tabell-feste > .tabell-ramme:focus-visible { outline: none; }
    .tabell-feste:has(> .tabell-ramme:focus-visible)::after {
      content: "";
      position: absolute;
      z-index: 2;
      top: -4px;
      bottom: -4px;
      left: calc(2px - var(--markor));
      right: calc(2px - var(--marg));
      border: 2px solid var(--messing);
      pointer-events: none;
    }
  }

  .tallrekke, .tallrekke.fire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tallrekke > div { border-left: var(--strek) solid var(--linje); padding-left: var(--rom-4); }
  .tallrekke > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tallrekke > div:nth-child(n + 3) { border-top: var(--strek) solid var(--linje); }
  .tallrekke dd { font-size: 20px; line-height: 28px; font-weight: var(--v-normal); }

  .knapperad .knapp { flex: 1 1 auto; }

  .spor { padding: var(--rom-4); }
  .spor-hode { grid-template-columns: minmax(0, 1fr) max-content; row-gap: var(--rom-1); }
  .spor-skille { display: none; }
  .spor-id { grid-row: 2; grid-column: 1 / -1; }
  .spor-liste { grid-template-columns: minmax(0, 1fr); }
  .spor-liste li { grid-template-columns: minmax(0, 1fr); row-gap: var(--rom-1); }

  .bunnlinje { flex-direction: column; align-items: flex-start; gap: var(--rom-2); }
  .innlogging-flate { padding: var(--rom-7) 0; align-items: start; min-height: 0; }
  .innlogging-flate h1 { font-size: 28px; line-height: 36px; }
}

/* Tvungne farger på smal skjerm: box-shadow og gradienter fjernes, så margen til venstre for den faste cellen og
   rullehintet får ekte Canvas-flater (forced-color-adjust: none bare på flatene). Innhold som ruller under den faste
   cellen, står da aldri i margen eller inntil datoen. Valgt rad beholder markøren i Highlight og forblir fast. */
@media (forced-colors: active) and (max-width: 760px) {
  .tabell.fest tbody tr.valgt > :first-child { position: sticky; }
  .tabell.fest thead th:first-child::before, .tabell.fest tbody > tr > :first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--markor));
    width: var(--markor);
    background: Canvas;
    forced-color-adjust: none;
    pointer-events: none;
  }
  .tabell.fest tbody tr.valgt > :first-child::before {
    width: var(--markor);
    background: linear-gradient(to right, Highlight var(--list), Canvas var(--list));
  }
  .tabell.fest thead th:first-child::after, .tabell.fest tbody > tr > :first-child::after { background: Canvas; forced-color-adjust: none; }
}

/* Under 360 px: minst luft mellom platen og Logg ut, så «PRODUKSJON Ekte penger.» står helt på 320 px også med
   tekstavstand (1.4.12). Merket står fortsatt på sidemargen, under ordmerket. */
@media (max-width: 359px) {
  /* Operasjons-ID-en i sporhodet (36 tegn) står på én linje også her: 11 px mono er 238 px. Aldri brudd i en ID. */
  .spor-id { font-size: 11px; white-space: nowrap; }
  .miljobaand .ramme { gap: var(--rom-2); }
  .miljobaand-plate { padding-right: var(--rom-1); }
  .miljobaand .miljobaand-handling { padding: 0 var(--rom-1); }
}