/* ============================================================
   Sesongpuls — app.css
   Bygget på Bamas designsystem v2 (design/_ds/tokens/*.css).
   All styling for appen ligger her; ingen inline stil (CSP, §2.8).
   ============================================================ */

/* ---------- Fonter ---------- */
@font-face {
  font-family: "Apfel Grotezk";
  src: url("../fonts/ApfelGrotezk-Regular.66479c16bf06.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("../fonts/ApfelGrotezk-Mittel.f008a81ac3d1.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Apfel Grotezk";
  src: url("../fonts/ApfelGrotezk-Fett.364daf66a3bb.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.122dd68d69fe.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.24b516c266d7.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bama-blue: #0C1F5F;
  --bama-green: #3EAE2B;
  --blue-600: #0050DB;
  --blue-400: #85B1FF;
  --blue-300: #B8D2FF;
  --blue-200: #E0ECFF;
  /* Badge `tone="green"` er `--green-200` / `--green-700`, malt til #073615 i
     prototypen. Grønn 700 sto bare som en rå heks i `skjermer.css`; her er den
     navngitt, slik `--red-600` allerede er. */
  --green-700: #073615;
  --green-600: #0D7C46;
  --green-500: #12AB60;
  /* Haken i kvitteringsboblen. Prototypens egen grønn, som ikke fantes som token. */
  --green-400: #0CC355;
  --green-200: #E0F0E4;
  --yellow-600: #FAC400;
  --yellow-500: #FFDB57;
  --yellow-200: #FFF4CC;
  --yellow-50: #FFFAF5;
  --orange-700: #A45B00;
  --orange-500: #FF8F04;
  /* Badge `tone="orange"` — flata under «4 å fikse» og «N mangler», malt til
     #FFE1BD. Den er mettere enn `--orange-100`, som er feilboksens flate. */
  --orange-200: #FFE1BD;
  --orange-100: #FFF1E0;
  --red-600: #B5352B;
  --red-100: #FFE4E0;
  --neutral-900: #2A2A2A;
  --neutral-800: #3C3C3C;
  --neutral-700: #767676;
  --neutral-500: #CFD0D1;
  --neutral-400: #E5E5E5;
  --neutral-300: #F2F2F2;
  --neutral-200: #F7F7F7;
  --neutral-100: #FFFFFF;
  /* Dempet tekst: akser, datoer, tellere, tomme celler. Bamas --fg-2 (#767676) holder
     4,5:1 bare mot hvitt; appens tonede uker (#F7F7F7, #FAFAFA, #FFF4CC, #EEF3FF)
     trenger et hakk mørkere. Dette gir minst 4,6:1 mot alle, 5,1:1 mot hvitt. Før sto
     slik tekst i #AEAEAE (2,2:1) og #CFD0D1 (1,5:1) — revisjonen 22.09.2026, P2-28. */
  --tekst-dempet: #6E6E6E;
  /* Dempet tekst på de blå flatene i ukelistene (valgt uke og hover): --tekst-dempet gir 4,28–4,45:1
     der, denne 4,8–5,0:1. Raden bytter tokenet ut, så all dempet tekst i den følger med (30.10.2026). */
  --tekst-dempet-blaa: #666666;

  /* Avvikstonene. Samme verdier som `skjermer.css` setter for matrisen — de bor
     også her, slik at fargeprøven på innstillingene viser den fargen brukeren
     faktisk møter i uke-for-uke, ikke en egen palett. */
  --tone-under: #FFF0B8;
  --tone-kraftig-under: #FFCF94;
  --tone-over: #E0ECFF;
  --tone-kraftig-over: #B8D2FF;

  /* Brukt av `vindu.css`, som også lastes på brukerlista uten `skjermer.css` (P3-06). */
  --red-500: #E0553F;
  --blue-500: #5795FF;
  --yellow-tekst: #806500;   /* Bamas «gul tekst». #E0B000 på #FFF0B8 gir ~1,9:1
                                og faller under WCAG AA; denne gir 4,9–5,0:1 på de gule
                                flatene (--tone-under, #FFF1BF, --yellow-200). #8A6D00, som
                                sto her før, ga bare 4,3–4,5:1 (revisjonen 10.2026, u28f01). */
  /* Grønn tekst på grønn flate (--green-200). Bamas --green-600 gir 4,45:1 der, et hakk
     under AA; denne gir 4,75:1 og ser lik ut. Hvit tekst står på --green-600 (5,3:1). */
  --gronn-tekst: #0C7743;
  --uke-na: #FFF4CC;
  /* Tekst på de sterke gule og oransje flatene (merker, «Vis som»-stripen, gule knapper). De forblir
     sterke i mørk modus, så teksten der må være mørk i begge — ikke `--bama-blue`, som blir lys (04.11.2026). */
  --tekst-paa-sterk: #0C1F5F;
  --tekst-paa-sterk-noytral: #2A2A2A;
  --uke-hover: #E8F0FF;
  /* Faste farger fra komponentreglene, samlet her for mørk modus (mork.css, 04.11.2026). */
  --blue-100: #F5F9FF;            /* svak blå flate (valgt rad, hover); skjermer.css og pakkeri.css har den samme */
  --strek-varm: #ECE6DC;          /* varm kortstrek i administrasjonen */
  --strek-varm-lys: #F3EFE8;      /* varm skillestrek mellom rader */
  --strek-beige: #F1EBE2;         /* beige kortstrek (Brukere, Oversikt) */
  --gul-merketekst: #7A5B00;      /* tekst på --yellow-200-merker i administrasjonen */
  --lilla-200: #EDE7FF;           /* lilla merke («Ført av Bama») */
  --lilla-tekst: #4B2FA0;         /* tekst på --lilla-200 */
  --orange-strek: #F3D3A8;        /* strek rundt det oransje datastandbanneret */
  --orange-slor: rgba(164, 91, 0, 0.10);   /* hover på knapp i det oransje banneret */
  --paa-flate-08: rgba(12, 31, 95, 0.08);  /* hover på lukkeknapp i lyse bannere */
  /* Lyse slør på navy flater (kvitteringen, vinduhodet, Bob, Min konto). I mørk modus blir
     navy lys blå, og sløret mørkt. */
  --paa-navy-12: rgba(255, 255, 255, 0.12);
  --paa-navy-14: rgba(255, 255, 255, 0.14);
  --paa-navy-15: rgba(255, 255, 255, 0.15);
  --paa-navy-16: rgba(255, 255, 255, 0.16);
  --paa-navy-22: rgba(255, 255, 255, 0.22);
  --paa-navy-24: rgba(255, 255, 255, 0.24);
  --paa-navy-35: rgba(255, 255, 255, 0.35);
  --ease-ut: cubic-bezier(0.23, 1, 0.32, 1);

  --font-display: "Apfel Grotezk", "Lato", Arial, sans-serif;
  --font-body: "Lato", "Apfel Grotezk", Arial, sans-serif;
  /* Tall i tabeller og rutenett (svar 24, u29f01): Lato har like brede sifre, Apfel Grotezk har
     proporsjonale og ingen `tnum`, så `tabular-nums` virket ikke der. Overskrifter, navn og
     topptall beholder display-fonten. Vaktet av tests/test_nettleser_tallfont.py. */
  --font-tall: var(--font-body);

  /* Seriene i «Uke for uke»: de samme fargene i tabellens prikker og i kurven (svar 24, u27f09).
     Høyeste er prognosens slektning og solgt levertens: samme farge, hul prikk og egen strek. */
  --serie-plan: var(--neutral-700);
  --serie-planflate: var(--neutral-400);
  --serie-prognose: var(--bama-blue);
  --serie-levert: var(--green-600);
  --serie-solgt: var(--green-500);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(12, 31, 95, 0.08);
  --shadow-md: 0 8px 24px rgba(12, 31, 95, 0.10);
  --shadow-lg: 0 18px 50px rgba(12, 31, 95, 0.10);
  /* Kvitteringsboblen svever over innholdet og har fasitens egen, tyngre skygge. */
  --shadow-kvittering: 0 12px 32px rgba(12, 31, 95, 0.30);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --fart-rask: 150ms;
  --fart-vanlig: 250ms;
  /* Designsystemets Button skiller: `filter .15s` for hover, men `transform .05s`
     for trykket. Trykk-responsen skal komme før man rekker å se etter den. */
  --fart-trykk: 50ms;
  --mykt: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Input i fokus har både navy ramme og en glorie på 4 px. Verdien står her,
     ikke i hvert felt, slik at alle fem feltene appen har får den samme. */
  --fokusglorie: 0 0 0 4px rgba(12, 31, 95, 0.1);

  /* Pila i designsystemets Button (`arrow`): `viewBox 0 0 32 18`, sti
     `M2 9h26M21 2l8 7-8 7`, `stroke-width 2.4`, runde ender. Den tegnes som en
     maske, så den arver tekstfargen slik `stroke="currentColor"` gjør i SVG-en. */
  --pil: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 18" fill="none"><path d="M2 9h26M21 2l8 7-8 7" stroke="%23000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

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

/* `hidden` skal skjule, uansett hvilken klasse elementet har. Nettleserens egen regel
   har specificity 0-1-0 og taper mot .knapp, .felt og .styrke, som setter display selv —
   uten denne linja vises «Vis passord», styrkemaleren og det gamle kodefeltet likevel. */
[hidden] { display: none !important; }

/* Plassen til rullefeltet står fast, også på en side som er for kort til å rulles. Ellers
   ble siden 8–15 px bredere på korte sider (Pakkeriprognoser) enn på lange (Oversikt), og hele
   toppen med logoen flyttet seg ved bytte (Anders 02.10.2026: «ALT skal stå i ro»).
   `scrollbar-gutter: stable` alene holdt ikke: med vårt eget `::-webkit-scrollbar` tegner Chrome
   et felt som tar plass bare når siden ruller, og plassen ble ikke holdt av på de korte — toppen
   flyttet seg fortsatt 4 px (målt 04.10.2026). Med `scroll` står feltet der alltid; sporet er
   gjennomsiktig og uten tommel når ingenting ruller, så det ser ut som tom plass. */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--yellow-50);
  color: var(--neutral-900);
  font-family: var(--font-body);
  font-size: 16px;
  /* Prototypen setter ingen linjehøyde på `body`, så alt som ikke selv oppgir
     en, arver `normal`. Med 1,6 her ble ordmerket 28,8 px der designet sier 23,
     fanene 34,3 mot 34 og ukekortet 14 % for høyt — samme feil overalt, fordi
     den satt i rota. Hver flate som trenger en luftigere linje setter den selv. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

body.side { display: flex; flex-direction: column; }

a { color: var(--bama-blue); }
a:hover { color: var(--blue-600); }

button { font: inherit; cursor: pointer; }

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bama-blue);
  margin: 0;
}
h1 { font-size: 34px; line-height: 1.05; }
h2 { font-size: 22px; line-height: 1.1; }
h3 { font-size: 18px; line-height: 1.2; }

p { margin: 0; }

.skjult {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hopp-til-innhold {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--neutral-100);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 40;
}
.hopp-til-innhold:focus { left: 0; }
/* `<main>` tar fokus fra hopplenken og fra `js/delbytte.js` når kontrollen man sto på,
   er borte etter et bytte. Den er en flate, ikke en kontroll, og får ingen ring. */
main[data-del="innhold"]:focus { outline: none; }

/* ---------- Bytteindikatoren ----------
   `js/delbytte.js` henter neste skjerm og bytter den ut uten å tegne siden på
   nytt. Er hentingen raskere enn 180 ms, skjer det ingenting her i det hele
   tatt — en strek som blinker forbi, er selve blinket vi ble kvitt. Tar det
   lenger tid, sier streken at appen jobber. Uten JavaScript settes
   `data-bytter` aldri, og elementet har ingen høyde å se. */
.bytteindikator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fart-rask) ease;
}

.bytteindikator::before {
  content: "";
  display: block;
  width: 35%;
  height: 100%;
  background: var(--bama-blue);
  transform: translateX(-100%);
}

/* Statuskanten på innloggingen (`inngang.html`): bare i hjemskjerm-appen. iOS 26–27 legger et
   slør over toppen med mindre et fast eller klebende element med ensfarget bakgrunn dekker
   kanten (minst ~10 px høyt, nesten fullt bredt), og da brukes fargen. Merkebåndet på
   innloggingen er verken fast eller klebende, så stripa står for det: marineblå som båndet og
   12 px, alltid innenfor båndets egen luft øverst. Over 880 px er båndet en kolonne til
   venstre, og én farge passer ikke over begge; der står iOS' eget slør. Inne i appen er den
   klebende toppen selv kanten — derfor bytter `js/delbytte.js` innholdet i toppen og aldri
   elementet (Anders 11.10.2026). */
.statuskant { display: none; }
@media (display-mode: standalone) and (max-width: 880px) {
  .statuskant {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 25;
    background: var(--bama-blue);
  }
}

/* Toningen som gjør et sidebytte til en overgang. 120 ms og bare opasitet:
   dette skjer titalls ganger om dagen, og alt lengre ville føltes tregt. Fra
   0,55 og ikke fra 0 — et innhold som tonet inn fra ingenting ville vært mer
   påfallende enn spranget det skal dempe. Ingen bevegelse, så den kan stå også
   under `prefers-reduced-motion`. */
main[data-kom] { animation: innhold-inn 120ms ease-out; }

@keyframes innhold-inn {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

html[data-bytter] .bytteindikator { opacity: 1; }
html[data-bytter] .bytteindikator::before { animation: bytte-strek 900ms linear infinite; }

@keyframes bytte-strek {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .bytteindikator { transition: none; }
  html[data-bytter] .bytteindikator::before {
    width: 100%;
    transform: none;
    animation: none;
    opacity: 0.45;
  }
}

/* `--blue-600` og ikke `--blue-400`: den lyse ringen ga 2,2:1 mot hvitt og 2,1:1 mot
   bakgrunnen, under kravet på 3:1 for en fokusindikator (WCAG 1.4.11, revisjonen
   22.10.2026). De fleste komponentene sto allerede på `--blue-600`. */
:focus-visible {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
}
/* På de marineblå flatene er det motsatt: der gir `--blue-600` 2,3:1 og den lyse ringen 7,1:1,
   så den lyse står der den sto. Saksvinduets topp i «Avvik og tiltak» («Lukk») er en av dem. */
.vindu__topp :focus-visible,
.panel--navy :focus-visible,
.lagrebar :focus-visible,
.avsender :focus-visible,
.meldfeil__hode :focus-visible,
.meldfeil__faner :focus-visible,
.saksvindu__topp :focus-visible { outline-color: var(--blue-400); }

/* Rullefeltet er global stil i prototypen. Det ble først synlig da listene i
   vinduene begynte å rulle internt; standardfeltet er bredere og mørkere enn
   resten av flaten tåler.

   `scrollbar-width: thin` sto tidligere ubetinget, og i Chrome slår den ut
   bredden fra `::-webkit-scrollbar`: feltet ble 11 px der prototypen måler 8,
   og hver eneste innholdsbredde forskjøv seg 3 px. Prototypen setter bare
   webkit-reglene. Derfor står `scrollbar-*` nå bare der pseudoelementene ikke
   finnes — altså Firefox, som ellers ville fått standardfeltet. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--neutral-500) transparent; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-500); border-radius: 8px; }

/* ---------- Toppen (del 3 §3.0) ----------
   Én linje med tre grupper: merket, fanepilla med «Import», og verktøyene til
   høyre. Alle mål er designpakkens egne. Toppen står fast ved rulling, slik
   prototypen gjør det — fanene skal være innen rekkevidde nede i en lang
   tabell. */
.topp {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--neutral-100);
  border-bottom: 1px solid var(--neutral-400);
}
.topp__innhold {
  max-width: 1480px;
  margin: 0 auto;
  padding: 10px 28px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
/* Over 720 px (Anders 21.09.2026: «menyen skal uansett være i midten hele
   tiden»): rutenett med tre like ytterkolonner, ikke flex. Fanepilla står da
   nøyaktig midt i HELE toppen uansett hvor bred merket eller verktøyet er —
   en flex-rad ville sentrert den mellom dem, ikke i vinduet, og merket ble
   smalere samme dag signaturen kom inn under «Sesongpuls». Uten fanepille
   (før innlogging, eller uten valgt kategori) blir midtkolonnen bare tom;
   merket og verktøyet ligger like fullt i sine faste ytterkolonner, ikke i
   dokumentrekkefølge, så verktøyet aldri havner midt i vinduet. */
/* Sidekolonnene blir aldri smalere enn innholdet sitt (`minmax(max-content, …)`). Med
   bare `1fr` ga rutenettet merket 164 px ved 1 024 px bredde mens det trengte 235, og
   «Sesongpuls» med Beta-merket rant inn over fanen «Oversikt» (målt 23.09.2026). Nå er det
   fanepilla, som ruller selv, som tar det som blir igjen. */
@media (min-width: 721px) {
  .topp__innhold {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(200px, 1fr);
    flex-wrap: nowrap;
  }
  .topp__merke { grid-column: 1; justify-self: start; }
  .faner { grid-column: 2; justify-self: center; }
  .topp__innhold .topp__verktoy { grid-column: 3; justify-self: stretch; justify-content: flex-end; min-width: 0; margin-left: 0; }
  /* Høyre kolonne har et fast minimum, ikke innholdets bredde: fanene står da på nøyaktig
     samme sted på hver side, med eller uten produktfilter (Anders 02.10.2026: toppen hoppet
     inn til Pakkeriprognoser, «den skal være helt lik»). Blir det trangt, er det filterteksten
     som kortes med «…», ikke fanene som flytter seg. 200 px gir fanepilla plass til alle
     fanene ved 1 024 px; over ca. 1 280 px er begge sidekolonnene like brede. */
  .topp__innhold .topp__verktoy { container: verktoy / inline-size; }
  .topp__verktoy .produktfilter,
  .topp__verktoy .produktfilter__knapp { min-width: 0; }
  /* Filterknappen klipper sitt eget innhold: før gikk pilen inn i kontoknappen når
     «inne»-merket tok plassen (Anders 02.10.2026). */
  .topp__verktoy .produktfilter__knapp { overflow: hidden; }
  .topp__verktoy .produktfilter__verdi { min-width: 0; flex: 0 1 auto; }
  .topp__verktoy .produktfilter__etikett,
  .topp__verktoy .produktfilter__pil,
  .topp__verktoy .kontomeny,
  .topp__verktoy .tilstede { flex-shrink: 0; }
}
/* Når kolonnen er trang, viker det minst viktige først: ordet «Produkt», så fornavnet ved
   kontoknappen. Filterteksten kortes med «…» til slutt, og er det ikke plass til den, står
   bare pilen igjen (navnene står fortsatt for skjermleseren). Kolonnen er like bred på alle
   sider, så det som vises, er også det samme overalt. */
@container verktoy (max-width: 300px) {
  .produktfilter__etikett { display: none; }
}
@container verktoy (max-width: 460px) {
  .topp__verktoy:has(.tilstede) .produktfilter__etikett { display: none; }
}
@container verktoy (max-width: 380px) {
  .topp__verktoy:has(.tilstede) .kontomeny__navn { display: none; }
}
@container verktoy (max-width: 300px) {
  .topp__verktoy:has(.tilstede) .produktfilter__verdi { display: none; }
}
/* Bama-merket, felles for alle Anders' Bama-apper (04.10.2026, skillen bama-app-merke):
   «bama + Sesongpuls», Bamas grønne håndstrek under appnavnet og ANDERS SMESTAD under den.
   Erstatter «logo | hårstrek | Sesongpuls / av Anders Smestad». */
.topp__merke {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
/* «bama»-ordet sitter nederst i logobildet (bladet over); løftet 12 % ser midtstilt ut ved plusset.
   28 px i nettleseren (Anders 04.10.2026: 32 ble «litt mye»). */
.topp__logo { height: 28px; width: auto; display: block; flex: none; transform: translateY(-12%); }
.topp__pluss { width: 16px; height: 16px; flex: none; }
.topp__ord { display: flex; flex-direction: column; white-space: nowrap; }
/* Streken følger appnavnets bredde: width 0 + min-width 100 % gjør at SVG-en ikke bidrar til
   bredden selv (ellers tar den 140 px fra formatet sitt). */
.topp__navn { display: inline-grid; width: max-content; }
.topp__ordmerke {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  color: var(--bama-blue);
  line-height: 1.1;
}
.topp__handstrek { display: block; width: 0; min-width: 100%; height: 6px; margin: 1px 0 2px; }
/* «Beta»-merket i Bama-stil (Anders 04.10.2026, erstatter den røde lappen fra 23.09): BETA i
   små grønne versaler med Bamas håndtegnede tusjring rundt, skjevt satt. Felles for alle
   beta-apper (skillen bama-app-merke). */
.topp__rad { display: flex; align-items: flex-start; gap: 7px; }
.topp__beta {
  position: relative;
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 6px 2px;
  color: var(--green-600);
  transform: rotate(-8deg) translateY(-3px);
}
.topp__beta svg { position: absolute; inset: -2px -3px; width: calc(100% + 6px); height: calc(100% + 4px); }
.topp__signatur {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bama-blue);
}
.topp__verktoy {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.topp__lenke {
  text-decoration: none;
  color: var(--bama-blue);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color var(--fart-rask) ease;
}
.topp__lenke:hover { background: var(--neutral-200); }

/* Chevronene i toppen er tegnede ikoner, ikke «‹» og «▾» satt som tekst. */
.pil {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Fanepilla ---------- */

.faner {
  display: flex;
  gap: var(--space-1);
  padding: 4px;
  max-width: 100%;
  /* På en smal skjerm blir pilla bredere enn vinduet. Da skal den kunne dras,
     ikke klippes i stillhet — og siden bak skal fortsatt ikke kunne rulles
     sidelengs. `min-width: 0` er det som gjor det siste sant: som flex-element har
     pilla `min-width: auto` og kan ikke krympe under de fire fanene, saa
     `max-width: 100%` alene lot den dytte sida bredere enn vinduet. */
  min-width: 0;
  overflow-x: auto;
  background: var(--neutral-200);
  border-radius: var(--radius-pill);
}

.faner__fane {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  /* Prototypens fane er 34 px: 8 + 18 + 8. Med 1,2 ble linjeboksen 16,8 og
     fanen 34,3 — `normal` i Apfel Grotezk gir de 18 designet regner med. */
  line-height: normal;
  color: var(--bama-blue);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--fart-rask) ease, color var(--fart-rask) ease;
}

/* Fem faner fra 21.09.2026 («Salg» kom til). På en smal PC-skjerm ble pilla ~60 px
   bredere enn plassen mellom merket og verktøyet og måtte rulles, så «Avvik og tiltak»
   gikk ut av syne ved 1 024 px. Litt mindre luft og 13 px skrift under 1 200 px tar
   den tilbake; over det står fanene nøyaktig som designet. */
@media (min-width: 721px) and (max-width: 1200px) {
  .faner__fane { padding: 8px 12px; font-size: 13px; }
}

.faner__fane:hover { background: var(--neutral-300); color: var(--bama-blue); }
.faner__fane--aktiv,
.faner__fane--aktiv:hover { background: var(--bama-blue); color: var(--neutral-100); }

.faner__badge {
  /* `.kun-skjermleser` er absolutt plassert. Uten et holdepunkt her havner den der
     pilla ville staatt uten rulling, og drar dokumentet ut til 430 px paa en 375 px
     skjerm. Egen test i tests/test_skjermbredder.py. */
  position: relative;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--orange-100);
  color: var(--orange-700);
  font-size: 11px;
  line-height: 1.3;
}

.faner__fane--aktiv .faner__badge { background: var(--yellow-600); color: var(--tekst-paa-sterk); }

/* Pakkeriprognosemerket står her, ikke i pakkeri.css: stilarket lastes bare på
   pakkerisidene, så merket var smalere andre steder og fanene hoppet ved bytte. */
.faner__badge--oransje,
.faner__fane--aktiv .faner__badge--oransje {
  background: var(--orange-500);
  color: var(--tekst-paa-sterk);
  font-weight: 700;
}

/* ---------- Produktfilteret ----------
   Et vindu, ikke en nedtrekksmeny (Anders 18.09.2026), og fortsatt en
   `<details>`: den åpner, lukker og lagrer uten JavaScript.

   Teppet er `summary::after`, og det er hele grunnen til at vinduet klarer seg
   uten JavaScript: et klikk på teppet ER et klikk på `<summary>`, altså
   nøyaktig det nettleseren selv lukker en `<details>` på. Teppet ligger over
   hele flaten, knappen i toppen inkludert. */

.produktfilter { position: relative; }

.produktfilter__knapp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 9px 14px 9px 16px;
  background: var(--neutral-200);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--bama-blue);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--fart-rask) ease;
}

.produktfilter__knapp::-webkit-details-marker { display: none; }
.produktfilter__knapp:hover { background: var(--neutral-300); }

/* `line-height: normal` går igjen i hele filteret: prototypens knapper og
   etiketter er `<button>` og `<span>` med nettleserens egen linjehøyde, mens
   appens kropp står på 1,6. Uten dette blir hver rad tre–fire piksler for høy. */
.produktfilter__etikett {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
}

.produktfilter__verdi {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: var(--bama-blue);
  /* UI-09: navnene på de valgte produktene. Blir de for lange, kuttes de med «…» og står
     i sin helhet i `title`, så toppen ikke vokser inn i fanepilla. */
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Til og med 1 280 px er det plass til rundt ti tegn: på mobil før toppen ruller sidelengs
   (375 px), og ved 1 024 px før «Avvik og tiltak» skyves ut av fanepilla — samme område der
   «Produkt» er skjult (kontrollen 24.09.2026). Resten står i lista når filteret åpnes. */
@media (max-width: 1280px) {
  .produktfilter__verdi { max-width: 10ch; }
}

.produktfilter__pil { display: grid; place-items: center; transition: transform var(--fart-rask) ease; }
.produktfilter[open] .produktfilter__pil { transform: rotate(180deg); }

/* Knappen får sin egen stabel på 51 mens panelet er åpent. Teppet er et
   `::after` inne i den stabelen, så det dekker hele siden — også toppanelet,
   som ellers står øverst med sine 20. Panelet står på 60 og ligger derfor over.

   **Teppet er usynlig.** Det finnes fordi et klikk hvor som helst på det ER et
   klikk på `<summary>`, og det er nøyaktig det nettleseren selv lukker en
   `<details>` på — uten en linje JavaScript. Et MØRKT teppe hører til et vindu
   midt på skjermen; en boks som henger under knappen sin skal ikke dimme siden
   bak seg (Anders 19.09.2026). Klikkflaten er den samme, lyset er ikke. */
.produktfilter[open] .produktfilter__knapp { position: relative; z-index: 51; }

.produktfilter[open] .produktfilter__knapp::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: transparent;
  cursor: default;
}

/* Boksen henger under knappen, ikke midt på skjermen. `.produktfilter` er
   `position: relative`, så `absolute` forankrer den til knappen sin — nøyaktig
   som `.kontomeny__meny` rett ved siden av. `right: 0` og ikke `left: 0`:
   knappen står i `.topp__verktoy`, altså i høyre ende av toppen, og en 520 px
   boks som begynte ved knappens venstre kant ville rent ut av skjermen. */
.produktfilter__vindu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(380px, calc(100vw - 32px));
  max-height: min(78vh, 680px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--neutral-100);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(12, 31, 95, 0.22);
  /* Boksen vokser ut av knappen, altså fra det hjørnet den henger i — ikke fra
     midten. Skalerte den fra midten, ville den sett ut som et vindu som dukket
     opp ved siden av knappen i stedet for noe knappen åpnet. Og aldri fra
     `scale(0)`: ingenting i virkeligheten blir til av ingenting. */
  transform-origin: top right;
  animation: filterboks-inn 170ms var(--mykt);
}

/* Sto boksen åpen før et sidebytte, står den åpen etterpå — og skal ikke poppe
   ut på nytt. `delbytte.js` merker menyen den gjenåpner. */
.produktfilter[data-gjenapnet] .produktfilter__vindu,
.kontomeny[data-gjenapnet] .kontomeny__meny {
  animation: none;
}

@keyframes filterboks-inn {
  from { opacity: 0; transform: scale(0.97) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Brukes av `prefers-reduced-motion`-blokka lenger nede: boksen tones inn uten
   å vokse eller flytte seg. Bevegelse er det som gjør noen uvel, ikke skiftet. */
@keyframes filterboks-tone {
  from { opacity: 0; }
  to { opacity: 1; }
}

.produktfilter__hode {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 2px var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--neutral-300);
}

.produktfilter__tittel {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: var(--bama-blue);
}

.produktfilter__hint { font-size: 12px; color: var(--tekst-dempet); }

/* Kategorien til venstre, produktene til høyre. Høyrekolonnen er bredest, fordi
   produktnavnene er det som faktisk varierer i lengde (prototypen: 1 / 1,35). */
.produktfilter__nivaaer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: var(--space-2);
  overflow-y: auto;
}

.produktfilter__kategorier { display: flex; flex-direction: column; gap: 2px; }

.produktfilter__kategori {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--neutral-100);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: var(--bama-blue);
  text-decoration: none;
  transition: filter var(--fart-rask) ease, background-color var(--fart-rask) ease;
}

.produktfilter__kategori:hover { background: var(--yellow-50); color: var(--bama-blue); }

.produktfilter__kategori--valgt {
  background: var(--bama-blue);
  color: var(--neutral-100);
}

.produktfilter__kategori--valgt:hover { background: var(--bama-blue); color: var(--neutral-100); filter: brightness(1.15); }

.produktfilter__antall { font-size: 12px; font-weight: 500; color: var(--tekst-dempet); }
.produktfilter__kategori--valgt .produktfilter__antall { color: var(--blue-300); }

.produktfilter__gruppe {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 120px;
  margin: 0;
  padding: 0 0 0 var(--space-2);
  border: 0;
  border-left: 1px solid var(--neutral-300);
}

.produktfilter__bunn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--space-2) 4px 2px var(--space-2);
  border-top: 1px solid var(--neutral-300);
}

.produktfilter__note { font-size: 12px; color: var(--tekst-dempet); }

/* Designsystemets «sm»-knapp er 35 px: 13 px tekst med linjehøyde 1, 9/18 i luft
   og ingen skygge. `.knapp--liten` arver kroppens linjehøyde og er nesten seks
   piksler høyere; her, i menyen, settes den som fasiten. */
.produktfilter__vindu .knapp--liten {
  padding: 9px 18px;
  font-size: 13px;
  line-height: 13px;
  box-shadow: none;
}

.produktfilter__gruppenavn {
  padding: 8px 10px 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
}

.produktfilter__valg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: normal;
  cursor: pointer;
}

.produktfilter__valg:hover { background: var(--yellow-50); }
.produktfilter__produktnavn { flex: 1; }

/* Avkryssingsboksen er tegnet, ikke nettleserens egen: prototypen har en 18 px
   boks med radius 5 og en hvit hake. Den er fortsatt en `<input type=checkbox>`
   — mellomrom, Tab og skjermlesere virker som før. */
.produktfilter__valg input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--neutral-500);
  border-radius: 5px;
  background: var(--neutral-100);
  cursor: pointer;
  transition: background-color var(--fart-rask) ease, border-color var(--fart-rask) ease;
}

.produktfilter__valg input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--neutral-100);
  border-width: 0 1.8px 1.8px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
  transition: opacity var(--fart-rask) ease, transform var(--fart-rask) var(--mykt);
}

.produktfilter__valg input[type="checkbox"]:checked {
  background: var(--bama-blue);
  border-color: var(--bama-blue);
}

.produktfilter__valg input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.produktfilter__valg input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.produktfilter__kategori:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.produktfilter__tom { margin: 0; padding: 6px 10px; font-size: 13px; color: var(--neutral-700); }

/* ---------- Kontomenyen ---------- */

.kontomeny {
  /* Uten `min-width: 0` og `flex-wrap` kan ikke kontoblokka krympe under innholdet
     sitt. For en superadmin, som har «Administrasjon» i tillegg, ble den 416 px bred
     paa en 375 px skjerm — og da fikk hver eneste side en vannrett rullestripe. */
  position: relative;
  min-width: 0;
  flex-wrap: wrap;
}

.kontomeny__knapp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 3px 12px 3px 3px;
  border-radius: var(--radius-pill);
  color: var(--bama-blue);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--fart-rask) ease;
}

.kontomeny__knapp::-webkit-details-marker { display: none; }
.kontomeny__knapp:hover,
.kontomeny[open] .kontomeny__knapp { background: var(--neutral-200); }

.kontomeny__initialer {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bama-blue);
  color: var(--neutral-100);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
}

.kontomeny__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
  white-space: nowrap;
}

.kontomeny__pil { display: grid; place-items: center; color: var(--neutral-700); }

.kontomeny__meny {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
  padding: var(--space-2);
  background: var(--neutral-100);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(12, 31, 95, 0.18);
  text-align: left;
}

.kontomeny__hode {
  padding: 8px 12px 10px;
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--neutral-300);
}

.kontomeny__fullnavn {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--bama-blue);
}

.kontomeny__rolle { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--bama-blue); }
.kontomeny__epost { display: block; overflow-wrap: anywhere; font-size: 12px; line-height: 1.35; color: var(--neutral-700); }

.kontomeny__valg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  /* Radhøyden er designpakkens: 38 px for én linje. Kroppens 1.6 ville gitt 42. */
  line-height: 1.25;
  color: var(--bama-blue);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--fart-rask) ease;
}

.kontomeny__valg:hover { background: var(--yellow-50); color: var(--bama-blue); }
.kontomeny__hint { font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--neutral-700); }
.kontomeny__utlogging { margin: var(--space-1) 0 0; border-top: 1px solid var(--neutral-300); padding-top: var(--space-1); }
.kontomeny__valg--ut { color: var(--red-600); }
.kontomeny__valg--ut:hover { color: var(--red-600); }

/* ---------- SKP eller produsent (regel 76) ----------
   Bare for en konto med begge rollene (`_rollebytte.html`). To rader som kontomenyens valg, med en
   prikk som en radioknapp: den aktive er lys blå og ingen knapp, den andre er en knapp som bytter.
   Bare farge endres ved hover; trykket gir en liten skalering som de andre knappene. */
.rollebytte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--neutral-300);
}
.rollebytte__tittel {
  padding: 2px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-dempet);
}
.rollebytte__skjema { margin: 0; }
.rollebytte__valg {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  color: var(--bama-blue);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fart-rask) ease, transform var(--fart-trykk) var(--ease-ut);
}
.rollebytte__valg:hover { background: var(--yellow-50); }
.rollebytte__valg:active { transform: scale(0.98); }
.rollebytte__valg:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.rollebytte__valg--aktiv,
.rollebytte__valg--aktiv:hover { background: var(--blue-200); color: var(--bama-blue); cursor: default; }
.rollebytte__valg--aktiv:active { transform: none; }
.rollebytte__prikk {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--neutral-700);
  background: var(--neutral-100);
}
.rollebytte__valg--aktiv .rollebytte__prikk {
  border-color: var(--bama-blue);
  box-shadow: inset 0 0 0 3px var(--neutral-100);
  background: var(--bama-blue);
}
.rollebytte__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rollebytte__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rollebytte__hint { font-family: var(--font-body); font-size: 12px; line-height: 1.2; color: var(--tekst-dempet); }
.rollebytte__valg--aktiv .rollebytte__hint { color: var(--tekst-dempet-blaa); }
@media (prefers-reduced-motion: reduce) {
  .rollebytte__valg { transition: none; }
  .rollebytte__valg:active { transform: none; }
}

/* ---------- Utseende: Auto, Lys, Mørk (Anders 04.11.2026) ----------
   `_temavalg.html` i kontomenyen. Tre like knapper i en segmentert rad; den valgte er lys blå som den
   aktive rollen over. Bare farge endres ved hover, og trykket gir den samme lille skaleringen. */
.temavalg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-1);
  padding: 0 12px var(--space-2);
  border-bottom: 1px solid var(--neutral-300);
}
.temavalg__tittel {
  padding: 2px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-dempet);
}
.temavalg__rad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--neutral-300);
}
.temavalg__valg {
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--neutral-800);
  transition: background-color var(--fart-rask) ease, transform var(--fart-trykk) var(--ease-ut);
}
.temavalg__valg:hover { background: var(--neutral-200); }
.temavalg__valg:active { transform: scale(0.97); }
.temavalg__valg:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.temavalg__valg--aktiv,
.temavalg__valg--aktiv:hover { background: var(--neutral-100); color: var(--bama-blue); font-weight: 700; box-shadow: var(--shadow-sm); }
@media (prefers-reduced-motion: reduce) {
  .temavalg__valg { transition: none; }
  .temavalg__valg:active { transform: none; }
}

/* ---------- Hvem som er inne (Anders 23.09.2026) ----------
   Bare for superadmin, og bare når noen andre er inne. Initialene står i en stabel med
   et grønt merke, og ordet «inne» ved siden av, så fargen ikke står alene. Samme
   knappeform og meny som kontomenyen ved siden av. Blir toppen for trang, faller ordet
   bort og stabelen står alene — tittelen og menyen sier fortsatt hvem. */
.tilstede { position: relative; }

.tilstede__knapp {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 3px 12px 3px 5px;
  border-radius: var(--radius-pill);
  color: var(--green-700);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--fart-rask) ease;
}
.tilstede__knapp::-webkit-details-marker { display: none; }
.tilstede__knapp:hover,
.tilstede[open] .tilstede__knapp { background: var(--neutral-200); }

.tilstede__stabel { position: relative; display: flex; }
/* Ringen i sidens bakgrunnsfarge skiller sirklene der de ligger over hverandre. */
.tilstede__stabel .tilstede__initialer { box-shadow: 0 0 0 2px var(--neutral-100); }
.tilstede__stabel .tilstede__initialer + .tilstede__initialer { margin-left: -8px; }
/* «Inne nå»-merket, nederst til høyre på stabelen. */
.tilstede__stabel::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 2px var(--neutral-100);
}

.tilstede__initialer {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-200);
  color: var(--green-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
}
.tilstede__initialer--flere { background: var(--neutral-300); color: var(--neutral-800); }

.tilstede__etikett {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.tilstede__meny {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  /* Så bred som navnet og tiden trenger, men aldri bredere enn skjermen. */
  width: max-content;
  min-width: 260px;
  max-width: min(380px, calc(100vw - 32px));
  padding: var(--space-2);
  background: var(--neutral-100);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(12, 31, 95, 0.18);
  text-align: left;
  transform-origin: top right;
  animation: filterboks-inn 170ms var(--mykt);
}
.tilstede[data-gjenapnet] .tilstede__meny { animation: none; }

.tilstede__tittel {
  margin: 0;
  padding: 8px 12px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.tilstede__liste { margin: 0; padding: 0; list-style: none; }
.tilstede__rad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
}
.tilstede__navn {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}
.tilstede__tid { font-size: 12px; color: var(--tekst-dempet); white-space: nowrap; }
.tilstede__lenke {
  display: block;
  margin-top: var(--space-1);
  padding: 10px 12px;
  border-top: 1px solid var(--neutral-300);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--bama-blue);
  text-decoration: none;
}
.tilstede__lenke:hover { color: var(--blue-600); }

/* På mobil står stabelen først i verktøyraden, helt til venstre. Menyen henger da i
   venstre kant; festet i høyre ville den åpnet ut av skjermen. */
@media (max-width: 720px) {
  .tilstede__meny { right: auto; left: 0; transform-origin: top left; }
}

/* Under 1 280 px er høyresiden i toppen for smal til både filter, konto og ordet. */
@media (max-width: 1280px) {
  .tilstede__etikett { display: none; }
  .tilstede__knapp { padding-right: 5px; }
}

/* 721–1 280 px: Beta-merket og «inne nå» kom inn i toppen 23.09.2026, og ved 1 024 px
   måtte fanepilla da rulle 118 px — «Avvik og tiltak» gikk ut av syne igjen. Ordet
   «Produkt» og fornavnet i kontoknappen gir 120 px tilbake. De skjules bare for øyet:
   initialene er `aria-hidden`, så navnet er det eneste kontoknappen heter for en
   skjermleser, og «Produkt» sier hva «Bær» er et valg av. */
@media (min-width: 721px) and (max-width: 1280px) {
  .produktfilter__etikett,
  .kontomeny__navn {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .kontomeny__knapp { padding-right: 8px; }
}

.tilstede__knapp:focus-visible,
.tilstede__lenke:focus-visible,
.faner__fane:focus-visible,
.produktfilter__knapp:focus-visible,
.kontomeny__knapp:focus-visible,
.kontomeny__valg:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .faner__fane,
  .produktfilter__knapp,
  .produktfilter__pil,
  .kontomeny__knapp,
  .kontomeny__valg,
  .tilstede__knapp,
  .topp__lenke {
    transition: none;
  }
  /* Boksen skal fortsatt tone inn — det er en fargeendring, ikke bevegelse —
     men den skal verken skalere eller flytte seg. */
  .produktfilter__vindu,
  .tilstede__meny { animation-name: filterboks-tone; }
}

/* ---------- Driftsvarsel (§2.7) ----------
   Den daglige driftsstatusen bor under «System» i innstillingene. Her står bare
   varselet om en tilstand som faktisk er i feil — derfor rødt, ikke navy, og
   derfor borte fra skjermen alle dagene der alt virker. */
.driftsvarsel {
  background: var(--red-600);
  color: var(--neutral-100);
  font-size: 13px;
  line-height: 1.5;
}
.driftsvarsel__linje {
  max-width: 1480px;
  margin: 0 auto;
  padding: 8px 28px;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.driftsvarsel__tekst {
  font-family: var(--font-display);
  font-weight: 700;
}
.driftsvarsel__siden { opacity: 0.8; }
.driftsvarsel__lenke {
  margin-left: auto;
  color: var(--neutral-100);
  font-family: var(--font-display);
  font-weight: 700;
  text-underline-offset: 3px;
}
.driftsvarsel__lenke:hover { color: var(--neutral-100); }

/* ---------- Kvitteringer ---------- */
/* Fasitens boble: nederst, midtstilt, navy pille med skygge. Den lukker seg selv etter
   fem sekunder, ti for feil og advarsler (`js/kvittering.js`, Anders 23.09.2026). Uten
   JavaScript er lukkeknappen skjult, og boblen forsvinner ved neste sidelasting slik
   meldingslageret uansett bestemmer. */
.kvitteringer {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: min(640px, calc(100vw - 32px));
}
.kvittering {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  background: var(--bama-blue);
  color: var(--neutral-100);
  font-size: 14px;
  line-height: 1.35;
  box-shadow: var(--shadow-kvittering);
  animation: sp-kvittering 250ms var(--mykt) both;
}
.kvittering__merke { display: flex; color: var(--green-400); }
.kvittering__merke svg { width: 14px; height: 14px; }
.kvittering__tekst { min-width: 0; text-wrap: pretty; }
.kvittering__lukk {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -6px -10px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--fart-rask) var(--mykt), transform var(--fart-rask) var(--mykt);
}
.kvittering__lukk svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) {
  .kvittering__lukk:hover { opacity: 1; }
}
.kvittering__lukk:active { transform: scale(0.92); }
.kvittering__lukk:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }

/* «Nye tall er kommet» med «Oppdater» (`js/oppfrisk.js`). Den samme navy boblen, med én
   handling mellom teksten og krysset. Knappen er en lys pille i boblens egen farge — en
   gul knapp ville ropt, og dette er en rolig beskjed, ikke en feil. Den er 36 px høy for
   fingeren, men spiser av boblens luft med negativ marg, så boblen ikke blir høyere enn
   de andre. Boblen lukker seg ikke selv: den står til tallene er byttet. */
.kvittering--handling { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.kvittering__handling {
  min-height: 36px;
  margin: -8px 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--paa-navy-14);
  color: inherit;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fart-rask) ease, transform var(--fart-rask) var(--mykt);
}
@media (hover: hover) and (pointer: fine) {
  .kvittering__handling:hover { background: var(--paa-navy-24); }
}
.kvittering__handling:active { transform: scale(0.97); }
.kvittering__handling:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Feil og advarsel kan ikke være en grønn hake på navy. Fargene er husets egne, og
   begge parene er kontrollert mot hvit/mørk tekst. */
.kvittering--error { background: var(--red-600); }
.kvittering--error .kvittering__merke { color: var(--neutral-100); }
.kvittering--warning { background: var(--yellow-200); color: var(--orange-700); }
.kvittering--warning .kvittering__merke { color: var(--orange-700); }

@keyframes sp-kvittering {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Ut samme vei som den kom inn, og fortere: 180 mot 250 ms. `pointer-events` av, så et
   klikk i utgangen ikke treffer en boble som alt er på vei bort. */
.kvittering[data-lukkes] {
  animation: sp-kvittering-ut 180ms var(--mykt) both;
  pointer-events: none;
}
@keyframes sp-kvittering-ut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes sp-kvittering-borte {
  from { opacity: 1; }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kvittering { animation: none; }
  .kvittering[data-lukkes] { animation: sp-kvittering-borte 150ms linear both; }
}

/* 430 px: prototypen har ingen smal variant, så boblen legger seg som en stripe med
   husets egen 16 px-luft og lar teksten brekke i stedet for å skyves ut av skjermen. */
@media (max-width: 720px) {
  .kvitteringer {
    left: 16px;
    right: 16px;
    bottom: 16px;
    transform: none;
    max-width: none;
  }
  .kvittering { border-radius: var(--radius-md); }
}

/* ---------- Sideramme og bunn ---------- */
.ramme {
  flex: 1;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 28px 28px 72px;
}
.bunn {
  border-top: 1px solid var(--neutral-400);
  background: var(--neutral-100);
}
.bunn__innhold {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--space-4) 28px;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-700);
}

/* ---------- Sidehode ---------- */
.sidehode {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
/* Prototypens ingress er `font-size:15px; line-height:1.5; color:#767676;
   max-width:620px`. Linjehøyden sto ikke her — den lånte kroppens 1,6. Nå som
   rota er `normal`, må brødteksten oppgi sin egen, slik designet gjør. Fargen avviker
   med vilje fra prototypen: #767676 gir 4,38:1 på sidebakgrunnen, --tekst-dempet 4,92:1
   (WCAG AA, revisjonen 10.2026, u28f01). */
.sidehode__ingress {
  margin-top: var(--space-2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst-dempet);
  max-width: 620px;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  /* Designsystemets Eyebrow: 13 px og 0.14em, ikke 12/0.12. */
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bama-green);
}
.eyebrow--gronn { color: var(--bama-green); }
.eyebrow--morkegronn { color: var(--green-600); }
.eyebrow--oransje { color: var(--orange-700); }
.eyebrow--gul { color: var(--yellow-500); }
.eyebrow--gra { color: var(--tekst-dempet); }  /* 4,92:1 på sidebakgrunnen; --neutral-700 ga 4,38 */
.eyebrow--roed { color: var(--red-600); }
.eyebrow--blaa { color: var(--blue-600); }

/* ---------- Kort og paneler ---------- */
.panel {
  background: var(--neutral-100);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.panel--navy {
  background: var(--bama-blue);
  color: var(--neutral-100);
}
.panel--navy h2, .panel--navy h3 { color: var(--neutral-100); }
/* Samme som ingressen: designets 13 px brødtekst står på 1,5, og den lånte
   tidligere kroppens 1,6. */
.panel__tekst { font-size: 13px; line-height: 1.5; color: var(--neutral-700); }
.panel--navy .panel__tekst { color: var(--blue-300); }

.rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-5);
  align-items: start;
}

/* ---------- Knapper ---------- */
.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Designsystemets Button setter `gap: 9` — ikke `--space-2` på 8. Avstanden
     mellom teksten og pila målte 9 px i prototypen. */
  gap: 9px;
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  /* Button står på `line-height: 1`. Uten den arver knappen kroppens `normal`,
     og en md-knapp ble 49 px der designsystemet måler 45 — på hver eneste flate. */
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  transition: filter var(--fart-rask) ease, background var(--fart-rask) ease,
              transform var(--fart-trykk) ease;
}
.knapp:hover { filter: brightness(0.92); }
.knapp:active { transform: scale(0.97); }
/* Designsystemets Button har ingen skygge i noen variant. Skyggen appen la på
   den primære og den gule løftet dem ut av flaten kortene ligger i. */
.knapp--primar {
  background: var(--bama-blue);
  color: var(--neutral-100);
  border-color: var(--bama-blue);
}
.knapp--primar:hover { color: var(--neutral-100); }
/* Designsystemets `variant="yellow"` er `--yellow-600`, ikke `--yellow-500`:
   skyggen under sto allerede på rgba(250, 196, 0, …), altså yellow-600, mens
   flata sto på yellow-500. Det var de to som ikke stemte med hverandre. */
.knapp--gul {
  background: var(--yellow-600);
  color: var(--tekst-paa-sterk);
  border-color: var(--yellow-600);
}
.knapp--ramme {
  background: transparent;
  color: var(--bama-blue);
  border-color: var(--bama-blue);
}
/* Sekundærknappen: hvit pille med lys ring og navy tekst — samme uttrykk som `bs-sknapp`
   (Anders 04.10.2026: ordentlige sekundærknapper, ikke tekst som oppfører seg som knapper).
   Den nye administrasjonen (22.10.2026) brukte klassen før den fantes, og da sto «+ Inviter
   bruker», «Koble» og «Lagre» som ren tekst (revisjonen 22.10.2026, V14). Ringen er en
   innskygge, så knappen er like høy som de andre variantene med sin gjennomsiktige 2 px ramme.
   Hover er designsystemets lyseblå, ikke `.knapp`-filteret, som gjorde en hvit pille grå. */
.knapp--sekundar {
  background: var(--neutral-100);
  color: var(--bama-blue);
  box-shadow: inset 0 0 0 1px var(--neutral-500);
}
.knapp--sekundar:hover {
  filter: none;
  background: var(--blue-200);
  color: var(--bama-blue);
  box-shadow: inset 0 0 0 1px var(--blue-400);
}
/* `variant="text"` er ren tekst: ingen luft, ingen understrek. Appens `4px 6px`
   og understrek gjorde den 29 px høy der prototypen måler 17, og gjorde en
   knapp av det som skal se ut som en lenke. */
.knapp--tekst {
  background: transparent;
  border-color: transparent;
  color: var(--bama-blue);
  padding: 0;
  font-size: 13px;
}
/* På en navy flate står tekstknappen i navy på navy — 1,0:1. Prototypen sender
   `whiteText` inn i nettopp den knappen («Avbryt», «Forkast»). */
.panel--navy .knapp--tekst,
.lagrebar .knapp--tekst { color: var(--neutral-100); }
.knapp--fare { color: var(--red-600); }
.knapp--full { width: 100%; }
.knapp--liten { padding: 9px 18px; font-size: 13px; }
.knapp[disabled], .knapp--av {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}
/* Den røde ja-knappen i spørsmålsvinduet når handlingen fjerner noe (`js/bekreft.js`, `fare`),
   og pakkerienes «Lagre likevel». Står her fordi spørsmålsvinduet finnes på alle sider. */
.knapp--fare-fylt { background: var(--red-600); border-color: var(--red-600); color: var(--neutral-100); }
.knapp--fare-fylt:hover { color: var(--neutral-100); }

/* Sekundærknappen for handlinger (Anders 04.10.2026: «pene knapper, ikke bare skrift og lenker
   laget til knapper»): hvit pille med tynn ring og navy tekst. `--liten` står i rader, `--hoy` ved
   siden av en primærknapp («Avbryt») og `--fare` på det som fjerner noe. Den sto i bestilling.css,
   som bare pakkerisidene laster, så resten av appen falt tilbake på blå tekst (`knapp--tekst`) for
   Avbryt, Angre, Forkast og «Fjern navn» (revisjonen 22.10.2026, t09f09). */
.bs-sknapp {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; box-sizing: border-box;
  border: 0; border-radius: var(--radius-pill); background: var(--neutral-100); box-shadow: inset 0 0 0 1px var(--neutral-500);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--bama-blue); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s var(--ease-ut);
}
.bs-sknapp:hover { background: var(--blue-200); box-shadow: inset 0 0 0 1px var(--blue-400); color: var(--bama-blue); text-decoration: none; }
.bs-sknapp:active { transform: scale(0.97); }
.bs-sknapp:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.bs-sknapp svg { flex: none; }
.bs-sknapp--liten { height: 28px; padding: 0 11px; font-size: 12px; }
.bs-sknapp--hoy { height: 46px; padding: 0 20px; font-size: 15px; }
.bs-sknapp--fare { color: var(--red-600); box-shadow: inset 0 0 0 1px var(--red-100); }
.bs-sknapp--fare:hover { background: var(--red-100); box-shadow: inset 0 0 0 1px var(--red-600); color: var(--red-600); }
/* «Angre endringer» i pakkerienes Meld inn bærer også `pk-bunnlinje__angre` fra den gamle
   tekstknappen (14 px i pakkeri.css, som lastes etter dette arket). Da knappen sto i bestilling.css,
   vant `--hoy` på rekkefølgen; her må den vinne på presisjon, så knappen er like stor som før. */
.bs-sknapp--hoy.pk-bunnlinje__angre { font-size: 15px; }
@media (max-width: 720px) {
  /* «Opphev markeringen» var 44 px høy på telefonen som tekstknapp (mobil-kategori.css), og en
     finger trenger fortsatt det. */
  .vindu__sesongslutt .bs-sknapp { min-height: 44px; }
  /* «Forkast» er like høy som «Lagre endringer» ved siden av. */
  .lagrebar .bs-sknapp { min-height: 44px; }
}

/* Pila er designsystemets sti, ikke fontens « →»: 21 × 15 px tegnet av masken
   `--pil`, som arver tekstfargen. `.lenke--pil` settes også på bare `<a>`-er,
   og de trenger den samme raden og den samme 9 px-luften som `.knapp` har. */
.lenke--pil { display: inline-flex; align-items: center; gap: 9px; }
.lenke--pil::after {
  content: "";
  flex: none;
  width: 21px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--pil) no-repeat center / contain;
  mask: var(--pil) no-repeat center / contain;
}

/* ---------- Skjema ---------- */
.skjema {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}
/* Kolonne-flex strekker barna. Uten denne sto «Oppdater passord» på 397 px —
   hele panelbredden — i stedet for sin egen. `.knapp--full` setter fortsatt
   `width: 100%` og er upåvirket. */
.skjema > .knapp { align-self: flex-start; }
.felt { display: flex; flex-direction: column; gap: 7px; }
.felt__merkelapp {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--neutral-800);
}
.felt__input, .felt__valg {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--neutral-900);
  background: var(--neutral-100);
  border: 2px solid var(--neutral-400);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--fart-rask) ease, box-shadow var(--fart-rask) ease;
}
/* `outline: none` sto i nettopp de feltene man skriver i, og spiste appens egen
   `:focus-visible`-ring. Glorien er designsystemets; ringen er appens egen og
   bedre enn fasiten — begge skal være der. */
.felt__input:focus, .felt__valg:focus {
  border-color: var(--bama-blue);
  box-shadow: var(--fokusglorie);
}
.felt__input--feil { border-color: var(--orange-500); }
.felt__input[readonly] { background: var(--neutral-200); color: var(--tekst-dempet); }
.felt__input--kode {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.3em;
  text-align: center;
}
.felt__hint { font-size: 13px; color: var(--neutral-700); }
.felt__hint--feil { color: var(--orange-700); }
/* Feltfeil vist av `js/feltfeil.js` i stedet for nettleserens bobler. */
.feltfeil { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--orange-700); font-weight: 600; }
.feltfeil__felt, .rullgardin:has(.feltfeil__felt) > .rullgardin__knapp { border-color: var(--orange-500) !important; box-shadow: 0 0 0 3px rgba(240, 130, 30, 0.15); }
.felt__rad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Avkryssing i et skjema appen ikke har skrevet selv (importerens `skjema`). */
.avkryssing {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  /* Selve boksen er 20 px. Hele etiketten er trykkflata, og den skal være 44 px
     høy — målt til 20 px på 430 px før denne linja. */
  min-height: 44px;
  cursor: pointer;
}
.felt__avkryssing {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--bama-blue);
}
.avkryssing__tekst {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--neutral-800);
}
.felt__valg--feil { border-color: var(--orange-500); }

/* ---------- Dropsone (opplasting) ---------- */
.dropsone { position: relative; }
.dropsone__flate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  padding: var(--space-6) var(--space-5);
  border: 2px dashed var(--neutral-500);
  border-radius: var(--radius-md);
  background: var(--neutral-200);
  color: var(--tekst-dempet);
  cursor: pointer;
  transition: border-color var(--fart-rask) var(--mykt), background-color var(--fart-rask) var(--mykt);
}
@media (hover: hover) and (pointer: fine) {
  .dropsone__flate:hover { border-color: var(--blue-400); background: var(--blue-200); }
}
/* Filfeltet ligger visuelt skjult bak flata, så fokusringen må tegnes her. */
.dropsone--fokus .dropsone__flate {
  border-color: var(--bama-blue);
  outline: 2px solid var(--bama-blue);
  outline-offset: 2px;
}
.dropsone--over .dropsone__flate {
  border-color: var(--blue-600);
  border-style: solid;
  background: var(--blue-200);
}
.dropsone__ikon { width: 28px; height: 28px; color: var(--bama-blue); }
.dropsone__tittel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bama-blue);
}
.dropsone__hint { font-size: 13px; color: var(--neutral-800); }
.dropsone__valgt {
  margin-top: var(--space-2);
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  border: 1px solid var(--neutral-400);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  color: var(--neutral-900);
  overflow-wrap: anywhere;
}

.feilboks {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  background: var(--orange-100);
  color: var(--orange-700);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  animation: sp-shake 350ms ease;
}
.feilboks::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange-500);
  margin-top: 7px;
}

/* ---------- Merkelapper ---------- */
/* Designsystemets Badge, malt i prototypen: 13/13 px Apfel 700, 0,1 em sperring,
   6/14 px luft og full pilleform — 25 px hoey. */
.merke {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--neutral-300);
  color: var(--neutral-800);
}
.merke--blaa { background: var(--blue-200); color: var(--bama-blue); }
.merke--gronn { background: var(--green-200); color: var(--green-700); }
.merke--gul { background: var(--yellow-200); color: var(--orange-700); }
/* SKP i brukerlista og brukervinduet (Anders 04.10.2026: «lettere å se hvem som er hva»): samme lilla
   som «Ført av Bama» i Loggen, #4B2FA0 på #EDE7FF gir 8,9:1. */
.merke--lilla { background: var(--lilla-200); color: var(--lilla-tekst); }
/* Prototypen bruker `--orange-200` her, men #A45B00 på #FFE1BD gir 4,11:1 og
   stryker på AA; på `--orange-100` gir den 4,64:1 og består. Det er unntak 1 i
   fasitregelen: der prototypen er utilgjengelig, beholder appen den lesbare
   varianten. Målt 19.09.2026 med WCAG-formelen, ikke antatt. */
.merke--oransje { background: var(--orange-100); color: var(--orange-700); }
.merke--roed { background: var(--red-100); color: var(--red-600); }

/* ---------- Tabeller ---------- */
.tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--neutral-100);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tabell th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
  padding: 14px 20px;
  border-bottom: 1px solid var(--neutral-400);
}
.tabell td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--neutral-300);
  vertical-align: top;
}
.tabell tr:last-child td { border-bottom: 0; }
.tabell__tom { padding: var(--space-6); text-align: center; color: var(--neutral-700); }

.filtre {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--neutral-100);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.sidevelger {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  font-size: 14px;
  color: var(--neutral-700);
}

/* ---------- Importsidene (F6) ---------- */
.kjoringsliste { display: flex; flex-direction: column; gap: var(--space-4); }
/* Statusen er en Badge i fasiten - «OK», «4 å fikse» - ikke los tekst. Samme
   geometri som `.merke`, fordi det er den samme komponenten fra designsystemet:
   6px 14px, pille, 13 px Apfel Grotezk med 0,1em sperring. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  line-height: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--neutral-300);
  color: var(--neutral-800);
}
.status--mottatt { background: var(--neutral-300); color: var(--neutral-800); }
/* Designsystemets gronne Badge er `--green-700` paa `--green-200`. `--green-600`
   ville gitt 4,45:1 paa 13 px halvfet - like under AA. */
.status--importert { background: var(--green-200); color: var(--green-700); }
/* Blatt merke tar `--bama-blue` og ikke `--blue-600`, som `.merke--blaa` ogsaa
   gjoer: 0050DB paa E0ECFF er 4,1:1 og faller under AA. */
.status--ingen_endring { background: var(--blue-200); color: var(--bama-blue); }
.status--avvist { background: var(--orange-100); color: var(--orange-700); }
.status--feilet { background: var(--red-100); color: var(--red-600); }

/* ---------- Animasjon ---------- */
@keyframes sp-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes sp-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes sp-pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Smale skjermer ---------- */
@media (max-width: 720px) {
  .topp__innhold, .ramme, .bunn__innhold { padding-left: 16px; padding-right: 16px; }
  /* Bama-merket kompakt (ca. 80 %), som i de andre Bama-appene på mobil */
  .topp__merke { gap: 7px; }
  .topp__logo { height: 26px; }
  .topp__pluss { width: 15px; height: 15px; }
  .topp__ordmerke { font-size: 15.5px; }
  .topp__handstrek { height: 6px; margin: 0 0 2px; }
  .topp__signatur { font-size: 8px; }
  h1 { font-size: 28px; }
  .rutenett { grid-template-columns: 1fr; }

  /* Filtervinduet henger ikke i knappen her: kontoknappen står til høyre for den,
     og et vindu forankret i knappens høyre kant startet 121 px utenfor venstre kant
     av en telefon (gjennomgangen 24.09.2026). Uten `position` på filteret er det
     den klebrige toppen som bærer vinduet, og det henger under verktøyraden med
     høyre kant i sidens 16 px-marg — samme bredde og samme hjørne som før.
     De to nivåene stables: to kolonner er ikke to kolonner på 390 px.

     Høyden regner med at vinduet begynner under toppen. `100%` i `max-height` er den samme
     toppen som i `top: calc(100% + 8px)` — prosent i et absolutt plassert element er av den
     som bærer det — så bunnen med «Bruk» står 16 px over skjermkanten, uansett hvor mange
     linjer toppen bryter over. Uten dette sto «Bruk» under kanten på en liggende telefon, og
     den klebrige toppen gjør at rulling ikke flytter vinduet; midtpartiet ruller selv
     (kontrollen 25.09.2026). `svh` er skjermen med nettleserens linjer framme; `vh` er reserven. */
  .produktfilter { position: static; }
  .produktfilter__vindu {
    right: 16px;
    max-height: min(78vh, 680px, calc(100vh - 100% - 24px));
    max-height: min(78vh, 680px, calc(100svh - 100% - 24px));
  }
  .produktfilter__nivaaer { grid-template-columns: minmax(0, 1fr); }
  .produktfilter__gruppe {
    padding: var(--space-2) 0 0;
    border-left: 0;
    border-top: 1px solid var(--neutral-300);
  }
}

/* ============================================================
   Inngangsskjermene (§7.1): avsenderpanel + skjemapanel
   ============================================================ */
body.inngang {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  background: var(--yellow-50);
}

.avsender {
  background: var(--bama-blue);
  color: var(--neutral-100);
  padding: 44px 52px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 100vh;
  overflow: hidden;
}
/* Bama-merket i hvit utgave på innloggingen (04.10.2026). Anders: 46 px ble litt stort, og
   undertittelen gjentok ingressen under, så den er fjernet. */
.avsender__topp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.avsender__merke { display: flex; align-items: center; gap: 11px; }
/* «bama» sitter nederst i logobildet (bladet over); løftet 12 % står det i høyde med plusset. */
.avsender__logo { height: 38px; width: auto; display: block; flex: none; transform: translateY(-12%); }
.avsender__pluss { width: 21px; height: 21px; flex: none; }
.avsender__ord { display: flex; flex-direction: column; white-space: nowrap; }
.avsender__navn { display: inline-grid; width: max-content; }
.avsender__ordmerke {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22.5px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* Streken følger navnets bredde (width 0 + min-width 100 %). */
.avsender__strek { display: block; width: 0; min-width: 100%; height: 8px; margin: 1px 0 3px; }
.avsender__signatur {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-300);
}
/* Tegningene på innloggingen (Anders 30.09.2026). `js/pynt.js` legger dem tilfeldig i et lag
   bak innholdet i hvert felt; her står bare fargene. Den tomme luften over overskriften i det
   blå er to tomme bokser, over og under innholdet, som deler plassen som er til overs. */
.avsender__pynt { flex: 1 1 0; min-height: 0; }
.avsender, .skjemapanel { position: relative; isolation: isolate; }
.avsender > :not(.pynt-lag), .skjemapanel > :not(.pynt-lag) { position: relative; z-index: 1; }
.pynt-lag { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.pynt-former { position: absolute; width: 0; height: 0; overflow: hidden; }
.pynt, .pynt path, .pynt circle, .pynt ellipse {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pynt .pynt--gul, .pynt .pynt--gul path, .pynt .pynt--gul circle { stroke: rgba(255, 209, 64, 0.45); }
.pynt .pynt--gronn, .pynt .pynt--gronn path, .pynt path.pynt--gronn { stroke: rgba(76, 175, 110, 0.55); }
.pynt .pynt__prikk { stroke-width: 3.2; }
.pynt .pynt__svak { stroke-opacity: 0.6; }
/* I det lyse: navy og grønt, så svakt at kortet trygt kan ligge over. */
.pynt-lag--lys .pynt, .pynt-lag--lys .pynt path, .pynt-lag--lys .pynt circle, .pynt-lag--lys .pynt ellipse { stroke: rgba(12, 31, 95, 0.14); stroke-width: 2; }
.pynt-lag--lys .pynt .pynt--gul, .pynt-lag--lys .pynt .pynt--gul path, .pynt-lag--lys .pynt .pynt--gul circle { stroke: rgba(200, 140, 0, 0.16); }
.pynt-lag--lys .pynt .pynt--gronn, .pynt-lag--lys .pynt .pynt--gronn path, .pynt-lag--lys .pynt path.pynt--gronn { stroke: rgba(26, 154, 85, 0.18); }

.avsender__midt {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 620px;
}
.avsender__tittel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--neutral-100);
  text-wrap: balance;
}
.avsender__ingress {
  font-size: 17px;
  line-height: 1.55;
  color: var(--blue-300);
  max-width: 480px;
  text-wrap: pretty;
}
/* Sesongfiguren (del 3 §8.1). Ren illustrasjon: hver høyde er oppdiktet og står
   i `forside/figur.py`, for siden er offentlig. Målene er lest ut av
   designpakkens `Innlogging.dc.html` ved 1440 px — plottet 150 px, 5 px mellom
   sporene, planstolpen i full sporbredde og verdistolpen trukket inn 22 % på
   hver side. Høydene kommer fra `data-andel` mot `skala.css` (§2.3). */
.sesongfigur {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sesongfigur__hode {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* Figurens egen tittel står på 11 px og 0.12em i designpakken — mindre enn
   `.eyebrow`, som er sidenes overskriftsmerke og ikke en diagramtittel. */
.sesongfigur__tittel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-300);
}
.sesongfigur__nokler {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--blue-300);
}
.sesongfigur__nokkel { display: flex; align-items: center; gap: 6px; }
.sesongfigur__flekk {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: none;
}
.sesongfigur__flekk--plan {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}
.sesongfigur__flekk--levert { background: var(--green-500); }
.sesongfigur__flekk--prognose { background: var(--blue-400); }

.sesongfigur__plott {
  height: 150px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  /* Figuren tegner seg inn én gang, fra venstre mot høyre — som sesongen selv.
     Designpakken lar hver stolpe vokse; én sveip over hele plottet er den samme
     bevegelsen uten JavaScript, uten å strekke rammer og hjørner. Toppen er
     utvidet, ellers ville «Nå» blitt klippet. */
  animation: figur-inn 900ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.sesongfigur__spor {
  flex: 1;
  min-width: 0;
  height: 100%;
  position: relative;
}
.sesongfigur__plan {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--andel);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px 4px 0 0;
}
.sesongfigur__verdi {
  position: absolute;
  left: 22%; right: 22%; bottom: 0;
  height: var(--andel);
  border-radius: 3px 3px 0 0;
}
.sesongfigur__verdi--levert { background: var(--green-500); }
.sesongfigur__verdi--na { background: var(--yellow-500); }
.sesongfigur__verdi--prognose { background: var(--blue-400); }
.sesongfigur__na {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow-500);
  white-space: nowrap;
}
.sesongfigur__uker { display: flex; gap: 5px; }
.sesongfigur__uke {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(184, 210, 255, 0.75);
}
.sesongfigur__uke--na { color: var(--yellow-500); font-weight: 700; }

@keyframes figur-inn {
  from { clip-path: inset(-16px 100% 0 0); }
  to { clip-path: inset(-16px 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sesongfigur__plott { animation: none; }
}

.fakta {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.fakta__pluss {
  width: 34px; height: 34px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.fakta__innhold { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fakta__eyebrow { color: var(--blue-300); }
/* Alle faktaene står i samme rute, så boksen er like høy som den lengste og står stille
   når teksten bytter (Anders 30.09.2026). De skjulte tar plass, men vises ikke. */
.fakta__liste { list-style: none; margin: 0; padding: 0; display: grid; }
.fakta__liste > .fakta__tekst { grid-area: 1 / 1; }
.fakta__liste > .fakta__tekst--skjult { visibility: hidden; }
.fakta__tekst {
  font-size: 15px;
  line-height: 1.5;
  color: var(--neutral-100);
  text-wrap: pretty;
}
.fakta__tekst--inn { animation: sp-fade 500ms ease; }
.fakta__prikker { display: flex; gap: 5px; margin-top: var(--space-1); }
.fakta__prikk {
  width: 5px; height: 5px;
  border-radius: var(--radius-pill);
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.3);
  transition: width var(--fart-vanlig) ease, background var(--fart-vanlig) ease;
}
.fakta__prikk--valgt { width: 22px; background: var(--yellow-500); }

.skjemapanel {
  background: var(--yellow-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  gap: 22px;
  min-height: 100vh;
}

.banner {
  width: min(460px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  border-radius: 14px;
  padding: 12px 14px 12px 16px;
  font-size: 14px;
  line-height: 1.4;
  animation: sp-fade 300ms ease;
}
.banner--gul { background: var(--yellow-200); color: var(--orange-700); }
.banner--gronn { background: var(--green-200); color: var(--gronn-tekst); }
.banner--blaa { background: var(--blue-200); color: var(--bama-blue); }
.banner__prikk { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.banner__lukk {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
}
.banner__lukk:hover { background: var(--paa-flate-08); color: inherit; }

/* Innloggings- og kontokortet. Avgrenset til de to stedene det står, fordi `.kort` også er
   nøkkeltallskortet på Oversikt (`skjermer.css`): derfra lekket bredden, den tunge skyggen og
   inn-animasjonen — som spilte på nytt ved hvert delbytte og hver oppfriskning — og ble lappet
   lokalt i hvert nytt kort (revisjonen 22.10.2026). */
.inngang .kort,
.kontoside .kort {
  width: min(460px, 100%);
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 40px 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: sp-fade 350ms ease;
}
.kort__topp { display: flex; flex-direction: column; gap: 6px; }
.kort__topp--midt { align-items: center; text-align: center; }
.kort__tittel { font-size: 30px; line-height: 1.05; }
.kort__ingress { font-size: 15px; line-height: 1.5; color: var(--neutral-700); text-wrap: pretty; }
.kort__midtlenke { text-align: center; font-size: 14px; }
.kort__skille {
  border-top: 1px solid var(--neutral-300);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.kort__skille-tekst { font-size: 14px; color: var(--neutral-700); }
.kort__bunn {
  border-top: 1px solid var(--neutral-300);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--neutral-700);
}
.kort__bunn form { margin: 0; }
.kort__fotnote { font-size: 12px; line-height: 1.5; color: var(--neutral-700); text-align: center; }
.kort__merker { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kort__ikon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
  animation: sp-pop 450ms ease;
}
.kort__ikon--blaa { background: var(--blue-200); color: var(--bama-blue); }
.kort__ikon--oransje { background: var(--orange-100); color: var(--orange-700); }
.kort__ikon--gronn { background: var(--green-200); color: var(--green-600); }

.inngang__bunn {
  width: min(460px, 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-700);
  padding: 0 6px;
}

/* Sifferfeltene til tofaktorkoden bygges av js/kode.js (Task 51). */
.sifferrad { display: flex; gap: var(--space-2); justify-content: space-between; }
.sifferrad__felt {
  width: 100%;
  min-width: 0;
  height: 62px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--bama-blue);
  background: var(--neutral-100);
  border: 2px solid var(--neutral-400);
  border-radius: var(--radius-md);
  transition: border-color var(--fart-rask) ease, box-shadow var(--fart-rask) ease;
}
.sifferrad__felt:focus { border-color: var(--bama-blue); box-shadow: var(--fokusglorie); }

/* Styrkemåleren fylles av js/passord.js (Task 51). */
.styrke { display: flex; flex-direction: column; gap: var(--space-2); }
.styrke__segmenter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.styrke__segment {
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--neutral-400);
  transition: background var(--fart-vanlig) ease;
}
.styrke__segment--svakt { background: var(--red-600); }
.styrke__segment--greit { background: var(--yellow-600); }
.styrke__segment--sterkt { background: var(--green-500); }
.styrke__segment--veldig { background: var(--green-600); }
.styrke__rad {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 13px;
  color: var(--neutral-700);
  flex-wrap: wrap;
}
.styrke__merkelapp { font-family: var(--font-display); font-weight: 700; }

@media (max-width: 880px) {
  body.inngang { grid-template-columns: 1fr; }
  .avsender { min-height: auto; padding: 28px 20px; gap: 28px; }
  /* Figuren blir med i den stablede visningen — den er det eneste bildet av hva
     appen gjør — men lavere, og uten ukerekka: 21 ukenummer får ikke plass på en
     telefonbredde uten å gå i hverandre. */
  .sesongfigur__plott { height: 110px; }
  .sesongfigur__uker { display: none; }
  .skjemapanel { min-height: auto; padding: 28px 16px 48px; }
  .pynt-lag--lys { display: none; }
  .inngang .kort, .kontoside .kort { padding: 28px 22px 24px; }
}

/* ============================================================
   Feilsidene (§7.2)
   ============================================================ */
body.side--feil .ramme {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 28px 72px;
}
.feilside {
  width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: sp-fade 300ms ease;
}
.feilside__kort {
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 44px 44px 38px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.feilside__ikon {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.feilside__ikon--blaa { background: var(--blue-200); color: var(--bama-blue); }
.feilside__ikon--oransje { background: var(--orange-100); color: var(--orange-700); }
.feilside__ikon--gul { background: var(--yellow-200); color: var(--orange-700); }
.feilside__ikon--roed { background: var(--red-100); color: var(--red-600); }
.feilside__ikontekst {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
}
.feilside__innhold {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.feilside__tittel { font-size: 34px; line-height: 1.08; text-wrap: balance; }
.feilside__tekst { font-size: 16px; line-height: 1.6; color: var(--neutral-800); text-wrap: pretty; }
.feilside__detalj {
  background: var(--yellow-50);
  border-radius: 14px;
  padding: 12px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.55;
  color: var(--tekst-dempet);
}
.feilside__handlinger {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 6px;
}
.feilside__bunn {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--neutral-700);
  padding: 0 8px;
}
.feilside__bunn a { color: var(--neutral-700); text-decoration: none; }
.feilside__bunn a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .feilside__kort { grid-template-columns: 1fr; padding: 28px 22px 24px; gap: 20px; }
  .feilside__tittel { font-size: 26px; }
}
.feilside__hjelp { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ---------- Varselbryterne (designpakken §2) ----------
   Egne klasser og ikke `purrebryter`: den bor i arbeid.css, som verken Min konto eller
   Innstillinger laster. app.css staar paa hver side, saa bryterne ser like ut begge steder.

   Ramma er borte. Fasiten har ingen gul boks rundt bryterne - den er en stabel med
   haarfine skillelinjer i et kort som allerede har sin egen ramme. */
.varselbryter {
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.varselbryter__tittel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-700);
  padding: 0;
}

/* ---------- Pillebryteren ----------
   Fasitens bryter: en pille paa 42 x 24 px med en hvit knott paa 18 x 18 som glir
   fra 3 til 21 px. Teksten staar til venstre, bryteren til hoeyre.

   KRAVET SOM AVGJOER FORMEN: bryteren skal virke uten JavaScript. Derfor er det en
   ekte `<input type="checkbox">` som ligger under - den gjoer hele arbeidet, og pilla
   er bare tegningen av den. Inputen er gjennomsiktig og ligger over pilla, ikke
   `display: none`: da hadde tastaturet, skjermleseren og skjemaet mistet den.

   Pilla tegnes med `::after` for knotten, saa markupen er ett element. */
.pillebryter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
}
.pillebryter + .pillebryter { border-top: 1px solid var(--neutral-300); }
.pillebryter__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pillebryter__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bama-blue);
}
.pillebryter__under { font-size: 12px; line-height: 1.4; color: var(--neutral-700); }
.pillebryter__boks {
  position: absolute;
  right: 0;
  top: 50%;
  width: 42px;
  height: 24px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
}
.pillebryter__pille {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--neutral-500);
  transition: background 0.2s ease;
}
.pillebryter__pille::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--neutral-100);
  box-shadow: 0 1px 3px rgba(12, 31, 95, 0.25);
  transition: left 0.2s ease, transform 0.12s ease-out;
}
.pillebryter__boks:checked + .pillebryter__pille { background: var(--green-500); }
.pillebryter__boks:checked + .pillebryter__pille::after { left: 21px; }
/* Fasiten setter `outline-style: none` overalt. Appen beholder sin egen ring:
   uten den er bryteren usynlig for den som bruker tastatur. */
.pillebryter__boks:focus-visible + .pillebryter__pille {
  outline: 3px solid var(--blue-600);
  outline-offset: 2px;
}
/* Trykket skal kjennes. Knotten klemmes sammen mens knappen holdes nede - samme
   svar som `.brikke__flate` gir ellers i appen. */
.pillebryter__boks:active + .pillebryter__pille::after { transform: scale(0.92); }

/* 503 Vedlikehold (§5): ringen rundt ikonet snurrer, slik Feilsider.dc.html viser den.
   Konstant bevegelse skal ha lineaer easing - alt annet ville sett ut som en hikke.
   Med redusert bevegelse staar ringen stille; den er fortsatt en ring, bare rolig. */
.feilside__ikon { position: relative; }
.feilside__ikon--snurr::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--bama-blue);
  animation: sp-snurr 1400ms linear infinite;
}
@keyframes sp-snurr { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .feilside__ikon--snurr::after { animation: none; }
}
/* Designet setter «—» i 34px og tallkodene i 28px (Feilsider.dc.html). */
.feilside__ikon--oransje .feilside__ikontekst { font-size: 34px; }

/* ============================================================
   «Tallene er ikke oppdatert» (§8.3)
   Feilsidenes visuelle språk, men et banner over innholdet og
   ikke en side i stedet for det: tallene står alltid under.
   Stilen bor i app.css, det ene stilarket hver side laster, fordi
   banneret hentes fra base.html og kan stå på hvilken side som helst.
   ============================================================ */
.datastandbanner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: 1480px;
  margin: 0 auto var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--orange-100);
  border: 1px solid var(--orange-strek);
  border-radius: var(--radius-md);
  color: var(--orange-700);
}
.datastandbanner__ikon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow-200);
  color: var(--orange-700);
}
.datastandbanner__innhold {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.datastandbanner__tittel {
  margin: 2px 0 2px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--bama-blue);
}
.datastandbanner__tekst {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--neutral-800);
  text-wrap: pretty;
}
.datastandbanner__handlinger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.datastandbanner__lukk { flex: 0 0 auto; margin: 0; }
.datastandbanner__lukkeknapp {
  border: 0;
  background: transparent;
  padding: 4px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--orange-700);
  cursor: pointer;
  transition: background var(--fart-rask) var(--mykt);
}
.datastandbanner__lukkeknapp:hover { background: var(--orange-slor); }
.datastandbanner__lukkeknapp:active { transform: scale(0.97); }
.datastandbanner__lukkeknapp:focus-visible { outline: 2px solid var(--orange-700); outline-offset: 2px; }

/* Fra base.html står banneret rett under <body> og trenger sidemarger selv. */
body > .datastandbanner { width: calc(100% - 56px); margin-top: var(--space-4); }

@media (max-width: 720px) {
  .datastandbanner { flex-wrap: wrap; padding: var(--space-4); }
  .datastandbanner__ikon { width: 36px; height: 36px; }
  body > .datastandbanner { width: calc(100% - 32px); }
}

/* ============================================================
   «Volum uten kobling står utenfor tallene» (del 2 §8)
   Datastandbannerets form, men blått: dette melder ikke gamle
   tall, det melder at tallene under mangler et volum ingen har
   plassert ennå. Står også i app.css, av samme grunn som over —
   det hentes fra base.html og gjelder alle fanene og vinduene.
   ============================================================ */
.ukobletbanner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  max-width: 1480px;
  margin: 0 auto var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--blue-200);
  border: 1px solid var(--blue-300);
  border-radius: var(--radius-md);
  color: var(--blue-600);
}
.ukobletbanner__ikon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--neutral-100);
  color: var(--blue-600);
}
.ukobletbanner__innhold {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.ukobletbanner__tittel {
  margin: 2px 0 2px;
  font-size: 19px;
  line-height: 1.25;
  font-family: var(--font-display);
  color: var(--bama-blue);
}
.ukobletbanner__tekst {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bama-blue);
}
.ukobletbanner__tekst--dempet { color: var(--blue-600); }
.ukobletbanner__handlinger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Fra base.html står banneret rett under <body> og trenger sidemarger selv. */
body > .ukobletbanner { width: calc(100% - 56px); margin-top: var(--space-4); }

@media (max-width: 720px) {
  .ukobletbanner { flex-wrap: wrap; padding: var(--space-4); }
  .ukobletbanner__ikon { width: 36px; height: 36px; }
  body > .ukobletbanner { width: calc(100% - 32px); }
}

/* ============================================================
   Kontosidene: Min konto og skjermene som skal se like ut (§7.3)
   ============================================================ */
.kontoside {
  display: flex;
  justify-content: center;
  padding: var(--space-6) 0;
}
.kontoside .kort { box-shadow: var(--shadow-md); }
/* `.kort__topp` er en kolonne-flex, så statusmerket («Importert») ble strukket over hele
   kortet. Rettingen sto bare i mobilarket (revisjonen 22.10.2026, V77). */
.kontoside .status { align-self: flex-start; }

.profil { display: flex; align-items: center; gap: var(--space-4); }
.profil__initialer {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--tekst-paa-sterk);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  flex: none;
}
.profil__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profil__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.profil__epost { font-size: 14px; color: var(--blue-300); }
/* Min konto: to spalter à 542 px med 20 px mellom, målt i designpakkens
   `Administrasjon.dc.html` ved 1440 px. Bredden er satt her og ikke arvet fra
   ramma, for uten den hadde auto-fit gitt tre smale spalter av fem kort.
   Spaltene er stabler, ikke celler — se kommentaren i `min_konto.html`. */
.kontogrid,
.side--konto .sidehode {
  max-width: 1105px;
}
/* `min(100%, 380px)`: `minmax(380px, …)` alene ga en spalte bredere enn en telefon på
   375 og 390 px, og hele Min konto rullet sidelengs (gjennomgangen 24.09.2026). */
.kontogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px;
  align-items: start;
}
.kontogrid__spalte {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
/* Fasitens kortavstander: listekortene på 14 px, skjemakortene på 16 og
   profilkortet på 18. Profilkortet har ingen skygge — det er navy mot navy. */
.kontogrid .panel { gap: 14px; }
.kontogrid .panel--skjema { gap: var(--space-4); }
.kontogrid .panel--navy { gap: 18px; box-shadow: none; }

/* Profilkortets tre opplysninger under skillelinja. */
.profilfakta {
  margin: 0;
  display: grid;
  /* 494,5 px innvendig gir nøyaktig tre spalter à 155,5 px, som i fasiten. På
     telefonbredde faller den til to av seg selv, i stedet for tre spalter der
     hver verdi brekker over to linjer. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  border-top: 1px solid var(--paa-navy-15);
  padding-top: var(--space-4);
}
.profilfakta__post { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profilfakta__merkelapp {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-300);
}
.profilfakta__verdi {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--neutral-100);
}
.profil__fotnote {
  font-size: 13px;
  line-height: 1.5;
  color: var(--blue-300);
}

.panel__hode {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.panel__hode form { margin: 0; }
.linjeliste { display: flex; flex-direction: column; }
.linje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--neutral-300);
}
.linje form { margin: 0; }
.linje__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linje__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}
.linje__under { font-size: 12px; color: var(--neutral-700); }
.linje__handlinger { display: flex; gap: var(--space-2); }

.kontaktkort {
  background: var(--yellow-50);
  border-radius: 16px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.kontaktkort__initialer {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bama-blue);
  color: var(--neutral-100);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.kontaktkort__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kontaktkort__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bama-blue);
}
.kontaktkort__rolle { font-size: 13px; color: var(--neutral-700); }

.qr {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-400);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  place-items: center;
}
.qr img { width: 200px; height: 200px; }
.kodeliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--bama-blue);
}
.varselboks {
  background: var(--yellow-200);
  color: var(--orange-700);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.kort__noekkel {
  font-family: var(--font-display);
  font-weight: 500;
  word-break: break-all;
  color: var(--neutral-800);
}

/* ============================================================
   Administrasjonen (§7.3)
   ============================================================ */
.adminlayout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.adminlayout__innhold {
  display: flex;
  flex-direction: column;
  /* Prototypen har 20 px mellom bolkene i administrasjonen, ikke `--space-5`. */
  gap: 20px;
  min-width: 0;
}
.sidemeny {
  background: var(--neutral-100);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  /* Toppanelet er klistret på 0 og er 65 px høyt; med 28 px luft over innholdet
     lander sidemenya på 93 px. Sto den på 24, skled den inn under toppen. */
  top: 93px;
}
.sidemeny__strek {
  height: 1px;
  background: var(--neutral-300);
  margin: var(--space-2) var(--space-1);
}
.sidemeny__tittel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-700);
  padding: 14px 12px 4px;
}
.sidemeny__punkt {
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
  text-decoration: none;
  transition: background var(--fart-rask) ease;
}
.sidemeny__punkt:hover { background: var(--yellow-50); color: var(--bama-blue); }
.sidemeny__punkt--valgt { background: var(--bama-blue); color: var(--neutral-100); }
.sidemeny__punkt--valgt:hover { background: var(--bama-blue); color: var(--neutral-100); }
.sidemeny__punkt > span:not(.sidemeny__teller) { flex: 1; min-width: 0; }
.sidemeny__ikon { flex: none; opacity: 0.75; }
.sidemeny__punkt--valgt .sidemeny__ikon { opacity: 1; }
.sidemeny__tittel + .sidemeny__punkt { margin-top: 0; }
.sidemeny__teller {
  background: var(--yellow-200);
  color: var(--bama-blue);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 11px;
}

/* Tabellkortet: tabellen og rollefoten deler ramme, radius og skygge, slik
   prototypen har det. `.tabell` har sin egen skygge for de flatene som staar
   uten kort, saa den slaas av inni kortet. */
.tabellkort {
  background: var(--neutral-100);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tabellkort .tabell { border-radius: 0; box-shadow: none; }

/* ---------- Segmentert kontroll ----------
   Flyttet hit fra salg.css 23.09.2026: produsentloggen bruker den samme. */

.segment {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--neutral-200);
  border-radius: var(--radius-pill);
}

.segment__valg {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  color: var(--neutral-700);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms var(--ease-ut), color 150ms var(--ease-ut), transform 120ms var(--ease-ut);
}

.segment__valg:hover { color: var(--bama-blue); }
.segment__valg:active { transform: scale(0.97); }
.segment__valg:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.segment__valg--aktiv {
  background: var(--neutral-100);
  color: var(--bama-blue);
  box-shadow: 0 1px 3px rgba(12, 31, 95, 0.12);
}

/* ---------- Produsentloggen (Anders 23.09.2026) ----------
   To kort side om side: velgeren til venstre og tidslinjen til høyre. Tidslinjen er en
   rolig liste — klokkeslett i egen kolonne med tabelltall, en prikk som sier hva slags
   hendelse det er (og tittelen sier det samme i ord), og før → etter der noe ble endret. */
.plogg {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.plogg__velger,
.plogg__historikk {
  background: var(--neutral-100);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.plogg__velger {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--space-4));
  padding: var(--space-4) 0 var(--space-2);
}
.plogg__sok { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--space-4); }
.plogg__sokrad { display: flex; gap: var(--space-2); }
.plogg__sokrad .felt__input { flex: 1; min-width: 0; }
.plogg__nullstill { font-size: 12px; align-self: flex-start; }
.plogg__antall {
  margin: var(--space-3) 0 var(--space-1);
  padding: 0 var(--space-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.plogg__liste { margin: 0; padding: 0 var(--space-2); list-style: none; overflow-y: auto; min-height: 0; }
.plogg__produsent {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms var(--ease-ut);
}
.plogg__produsent:hover { background: var(--neutral-200); color: inherit; }
.plogg__produsent:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.plogg__produsent--valgt,
.plogg__produsent--valgt:hover { background: var(--uke-hover); }
.plogg__navn { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--bama-blue); }
.plogg__under { font-size: 12px; color: var(--neutral-700); font-variant-numeric: tabular-nums; }
.plogg__tom { padding: 8px 10px; font-size: 13px; color: var(--neutral-700); }

.plogg__historikk { padding: var(--space-5); }
.plogg__hode { padding-bottom: var(--space-4); border-bottom: 1px solid var(--neutral-300); }
.plogg__tittel { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: var(--bama-blue); text-wrap: balance; }
.plogg__hodeunder { margin: 4px 0 0; font-size: 13px; color: var(--neutral-700); }
.plogg__velgforst { padding: var(--space-6) 0; text-align: center; }
.plogg__tomt { margin: var(--space-5) 0 0; font-size: 14px; color: var(--neutral-700); }

.plogg__faner { margin-top: var(--space-3); }
.plogg__note { margin: var(--space-4) 0 0; font-size: 12px; line-height: 1.5; color: var(--neutral-700); max-width: 70ch; }
.plogg__dag + .plogg__dag { margin-top: var(--space-2); }

/* Ukene én oppdatering flyttet: en liten tabell med tabelltall, før → etter og endringen
   i farge (samme `endring--opp/ned` som «Siste endringer i prognosene» på Oversikt). */
.pstegtabell {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pstegtabell th,
.pstegtabell td { padding: 5px 8px; text-align: right; white-space: nowrap; }
.pstegtabell thead th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-700);
  border-bottom: 1px solid var(--neutral-300);
}
.pstegtabell th:first-child { text-align: left; white-space: normal; }
.pstegtabell tbody tr + tr > * { border-top: 1px solid var(--neutral-200); }
.pstegtabell tbody th { font-weight: 400; }
.pstegtabell__uke { font-weight: 700; color: var(--neutral-900); }
.pstegtabell__spenn { font-size: 12px; color: var(--neutral-700); }
.pstegtabell__til { font-weight: 700; }
.pstegtabell__merke { margin-left: 4px; padding: 2px 8px; font-size: 11px; line-height: 1.3; }
.pstegtabell .endring--opp { color: var(--blue-600); font-weight: 700; }
.pstegtabell .endring--ned { color: var(--red-600); font-weight: 700; }
.plogg__dato {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.plogg__poster { margin: 0; padding: 0; list-style: none; }
.plogg__post {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-4);
  padding: 10px 0 12px;
}
.plogg__post + .plogg__post { border-top: 1px solid var(--neutral-200); }
.plogg__tid {
  padding-top: 1px;
  font-size: 12px;
  font-weight: 700;
  color: var(--neutral-700);
  font-variant-numeric: tabular-nums;
}
.plogg__innhold { position: relative; padding-left: 18px; min-width: 0; }
.plogg__innhold::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-600);
}
.plogg__post--opprettet .plogg__innhold::before { background: var(--green-600); }
.plogg__post--koblet .plogg__innhold::before { background: var(--bama-blue); }
.plogg__post--frikoblet .plogg__innhold::before { background: var(--orange-500); }
.plogg__post--purring .plogg__innhold::before { background: var(--neutral-700); }
.plogg__posttittel { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--neutral-900); }
.plogg__hvem { margin: 2px 0 0; font-size: 12px; color: var(--neutral-700); }
.plogg__endringer {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px var(--space-4);
  margin: var(--space-2) 0 0;
  padding: 10px 12px;
  background: var(--neutral-200);
  border-radius: 10px;
  font-size: 13px;
}
.plogg__endring { display: contents; }
.plogg__endring dt { color: var(--neutral-700); }
.plogg__endring dd { margin: 0; overflow-wrap: anywhere; }
.plogg__fra { color: var(--neutral-700); text-decoration: line-through; text-decoration-color: var(--neutral-400); }
.plogg__pil { color: var(--neutral-700); }
.plogg__til { font-weight: 700; color: var(--neutral-900); }

/* Med sidemenyen på 240 px blir tidslinjen for smal ved siden av velgeren under ~1100 px;
   da legger velgeren seg over. Tidslinjen selv tilpasser seg sin egen bredde. */
@media (max-width: 1100px) {
  .plogg { grid-template-columns: 1fr; }
  .plogg__velger { position: static; max-height: 360px; }
}
.plogg__historikk { container-type: inline-size; }
@container (max-width: 560px) {
  .plogg__post { grid-template-columns: 1fr; gap: 2px; }
  .plogg__endringer { grid-template-columns: 1fr; gap: 0; }
  .plogg__endring dd { margin-bottom: 6px; }
}
@media (max-width: 600px) {
  .plogg__historikk { padding: var(--space-4); }
}

/* Ramma tabellen ruller inni, samme mønster som `.prodtabell__ramme` på
   skjermsiden. Ved 430 px er produsenttabellen 836 px bred, og uten ramma er det
   *sida* som må dras sidelengs — mens `overflow: hidden` på kortet samtidig
   klipper de siste kolonnene bort, så «Utelat» og statusmerket ikke er til å nå.

   `position: relative` er ikke pynt: `.skjult` i tabellhodet er `position:
   absolute`, og uten et holdepunkt her får den hele dokumentet som holdepunkt.
   Den legger seg da på den statiske posisjonen sin inne i den 836 px brede
   tabellen — x=825 på en 430 px skjerm — utenfor kortet, som derfor ikke klipper
   den. Det alene var hele overflyten på `/administrasjon/brukere/`.

   Tabellene på `/administrasjon/datastand/` står uten kort og bærer sin egen
   ramme og skygge. `overflow-x` ville klippet skyggen, så ramma bærer den i
   stedet, og gir den fra seg igjen inne i et kort. */
.tabellramme {
  position: relative;
  overflow-x: auto;
  background: var(--neutral-100);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.tabellramme > .tabell { border-radius: 0; box-shadow: none; }
.tabellkort .tabellramme { background: none; border-radius: 0; box-shadow: none; }
.tabellfot {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--yellow-50);
  border-top: 1px solid var(--neutral-300);
  padding: 12px 20px;
  font-size: 12px;
  color: var(--tekst-dempet);
}
.tabellfot strong { color: var(--neutral-800); }

/* Hele raden aapner brukeren: lenka i foerste celle spenner over raden. Det
   virker uten JavaScript, og tastaturet faar fortsatt én lenke per rad. */
.tabell--rader tbody tr { position: relative; transition: background var(--fart-rask) ease; }
.tabell--rader tbody tr td { vertical-align: middle; }
.radlenke::after { content: ""; position: absolute; inset: 0; }
.tabell__dempet { font-size: 13px; color: var(--neutral-700); white-space: nowrap; }
.rollecelle { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tabell__pil { width: 24px; }
.tabell__pil::after {
  content: "";
  display: block;
  width: 7px; height: 7px;
  border-right: 1.8px solid var(--neutral-500);
  border-bottom: 1.8px solid var(--neutral-500);
  transform: rotate(-45deg);
  transition: border-color var(--fart-rask) ease, transform var(--fart-rask) var(--mykt);
}
@media (hover: hover) and (pointer: fine) {
  .tabell--rader tbody tr:hover { background: var(--yellow-50); }
  .tabell--rader tbody tr:hover .tabell__pil::after {
    border-color: var(--bama-blue);
    transform: rotate(-45deg) translate(1px, 1px);
  }
}
.tabell--rader tbody tr:focus-within { background: var(--yellow-50); }

.brukercelle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}
.brukercelle__initialer {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bama-blue);
  color: var(--neutral-100);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.brukercelle__tekst { display: flex; flex-direction: column; min-width: 0; }
.brukercelle__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bama-blue);
}
.brukercelle__epost { font-size: 12px; color: var(--neutral-700); }

.rollevalg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}
.panel--navy .felt__merkelapp { color: var(--neutral-100); }
.panel--navy .felt__hint { color: var(--blue-300); }
/* Feilteksten arvet den vanlige hintfargen på navy og sluttet å se ut som en feil.
   Oransje er samme farge som kanten rundt feltet, og gir 6,7:1 mot --bama-blue;
   --orange-700 gir 1,7:1 der og kan ikke brukes. */
.panel--navy .felt__hint--feil { color: var(--orange-500); }
.brukervindu__handlinger {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  border-top: 1px solid var(--neutral-300);
  padding-top: var(--space-4);
}
.brukervindu__handlinger form { margin: 0; }

/* E-post per kategori i brukervinduet (Anders 28.09.2026; per produkt fra 23.09). Står under rollene, skilt av en
   hårlinje, med de samme pillebryterne som Min konto — ett uttrykk for «på/av» i hele appen. */
.epostvalg {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--neutral-300);
}
.epostvalg__tekst { margin: 0; font-size: 12px; line-height: 1.5; color: var(--neutral-700); max-width: 60ch; }
.epostvalg .varselbryter { margin-bottom: var(--space-2); }
.epostvalg .pillebryter { min-height: 40px; padding: 6px 0; }
/* `min-width: 0`: et fleksbarn krymper ikke under innholdet sitt uten den, og
   nedtrekket i navnekøen måles etter det lengste produsentnavnet. Målt
   19.09.2026: skjemaet ble 449 px i en 430 px skjerm og ga hele registeret
   63 px vannrett rulling. */
.radskjema { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0; min-width: 0; }

@media (max-width: 960px) {
  .adminlayout { grid-template-columns: 1fr; }
  .sidemeny { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Importsidenes egne biter (F6-malene i det nye språket) ---------- */
/* Opplastingsskjemaet rendres av Django som <p><label>…</label><input></p>. */
.skjema--auto p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.skjema--auto label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--neutral-800);
}
.skjema--auto input,
.skjema--auto select,
.skjema--auto textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--neutral-900);
  background: var(--neutral-100);
  border: 2px solid var(--neutral-400);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  transition: border-color var(--fart-rask) ease, box-shadow var(--fart-rask) ease;
}
.skjema--auto input:focus,
.skjema--auto select:focus,
.skjema--auto textarea:focus { border-color: var(--bama-blue); box-shadow: var(--fokusglorie); }
.skjema--auto .helptext { font-size: 13px; color: var(--neutral-700); }
.skjema--auto ul.errorlist {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--orange-700);
}

.detaljliste {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  font-size: 14px;
}
.detaljliste dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.detaljliste dd { margin: 0; color: var(--neutral-900); }

/* ---------- Del 2: administrasjonsflatene (§9) ---------- */
.panel--ko { border-left: 4px solid var(--yellow-600); }
/* Parkerte navn er ferdig vurdert, ikke en oppgave: samme form som koepanelet, men
   i den dempede tonen — gruppa skal vaere lett aa finne og ikke rope etter noen. */
.panel--parkert { border-left: 4px solid var(--neutral-400); }
.panel__teller {
  display: inline-block; min-width: 1.75rem; padding: 0 .4rem;
  border-radius: 999px; background: var(--yellow-200); color: var(--neutral-900);
  font-size: .8125rem; font-weight: 700; text-align: center;
}
/* Filterpillene er prototypens chip: 1 px ramme paa `--neutral-400`, 7/14 px luft,
   Apfel 700 paa 12 px og full pilleform. */
/* Soekefeltet i produsentregisteret (fasiten, Administrasjon.dc.html:415):
   300 px bredt felt med teksten «Soek navn, alias eller P-nummer», maalt til
   300 x 47 px. `.felt__input` har allerede fasitens 16 px, 2 px ramme paa
   `--neutral-400`, 12/16 px luft og 12 px radius, saa feltet arver dem og setter
   bare bredden. Under 560 px legger knappen seg under feltet i stedet for aa
   presse det ned i en ulesbar bredde.

   Plassholderfargen staar IKKE her: fasitens #AEAEAE er 2,3:1 mot hvitt, og
   nettleserens egen plassholder er lesbar. En utilgjengelig fasit overstyres ikke. */
.registersok {
  display: flex;
  flex-wrap: wrap;
  /* `stretch` og ikke `center`: fasitens felt maaler 47 px og designsystemets
     Button 49, og to naboer som er to piksler fra hverandre, leses som en feil.
     Raden deler hoeyde i stedet, saa feltet blir 49. Fasiten har ingen knapp ved
     siden av feltet — den filtrerer live med JavaScript — og appen maa virke
     uten, saa knappen er ikke til aa komme unna. */
  align-items: stretch;
  gap: var(--space-2);
  /* `flex: none` i sidehodet: uten den presses feltet ned under fasitens 300 px
     av ingressen ved siden av, og knappen brekker til neste linje paa en skjerm
     som har rikelig plass. */
  flex: none;
  max-width: 100%;
  margin: 0;
}
/* Fasitens bredde paa selve feltet, maalt: 300 px. `width` i tillegg til
   `flex-basis`: uten den regner Chrome feltets max-content fra `size`-attributtet
   paa `<input>` (20 tegn, ca. 206 px), og skjemaet ble 94 px for smalt. */
.registersok__felt { flex: 0 1 300px; width: 300px; min-width: 0; }
.registersok__knapp, .registersok__tom { flex: none; }
/* Safaris egen kryssknapp i `type=search` staar midt i vaar egen «Toem soeket»
   og gjoer to knapper av en. Den skjules; lenken er den som virker uten JS. */
.registersok__felt::-webkit-search-cancel-button { display: none; }

.filterrad { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.filterrad__punkt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1px solid var(--neutral-400);
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: var(--bama-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  text-decoration: none;
}
.filterrad__tall { font-weight: 400; color: var(--neutral-700); }
.filterrad__punkt--valgt .filterrad__tall { color: var(--blue-300); }
.filterrad__punkt--valgt { background: var(--bama-blue); border-color: var(--bama-blue); color: var(--neutral-100); }
/* Filterpillene er lenker og arver ikke .knapp sin trykk-respons. Ease-out og
   under 300 ms; den globale reduced-motion-blokka slaar overgangen av. */
.filterrad__punkt {
  transition: background-color var(--fart-rask) ease-out, border-color var(--fart-rask) ease-out,
    color var(--fart-rask) ease-out, transform var(--fart-rask) ease-out;
}
.filterrad__punkt:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .filterrad__punkt:hover:not(.filterrad__punkt--valgt) {
    border-color: var(--bama-blue);
    color: var(--bama-blue);
  }
}
/* Merk: `.merke` selv staar definert ett sted (se «Merkelapper» over). Blokka som
   sto her, kom senere i fila og overstyrte designsystemets Badge med et rektangel
   paa 4 px radius, 12 px Lato og vekt 500. Bare variantfargene hoerer hjemme her. */
.merke--kilde { background: var(--blue-200); color: var(--bama-blue); }
.merke--grossist { background: var(--green-200); color: var(--green-700); }
.merke--utelatt { background: var(--orange-100); color: var(--orange-700); }
.tabell__rad--utelatt { background: var(--yellow-50); }

/* Aliasbrikke: den lille lappen prototypen bruker for navnene fra kildene og for
   produktene. Den er bevisst IKKE designsystemets Badge — ei rad kan ha ti av
   dem, og pilla paa 25 px ville sprengt cellen. */
.brikkerekke { display: flex; flex-wrap: wrap; gap: 4px; }
.brikkelapp {
  display: inline-flex;
  align-items: center;
  background: var(--neutral-300);
  color: var(--neutral-800);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brikkelapp--id { font-variant-numeric: tabular-nums; color: var(--neutral-700); }
.brikkelapp--produkt {
  background: var(--green-200);
  color: var(--gronn-tekst);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}

/* Koelista: navnet, kilden og volumet paa en linje, handlingene paa neste. Som
   tabell fikk hver av de to skjemaene under 90 px, og nedtrekkene kollapset. */
.kolista { display: flex; flex-direction: column; }
.kolinje {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 14px 0;
  border-top: 1px solid var(--neutral-300);
}
.kolinje__hode { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kolinje__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bama-blue);
}
.kolinje__tall { font-size: 12px; color: var(--neutral-700); }
.kolinje__dato { font-size: 12px; color: var(--neutral-700); margin-left: auto; white-space: nowrap; }
.kolinje__handlinger { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.radskjema--slutt { margin-left: auto; }
.felt__input--smal { width: auto; min-width: 190px; }

/* Likheten over nedtrekkslista i koen (fasiten, Administrasjon.dc.html:364):
   12 px paa `--neutral-700`, 6 px over selecten, i en egen kolonne saa den staar
   OVER feltet og ikke ved siden av det. Tallet `ordsett_likhet()` allerede regnet
   ut, sto ingen steder foer; uten det maatte den som kobler, gjette hvor sterkt
   forslaget er. */
.radskjema__felt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kolinje__forslag { font-size: 12px; line-height: 1.4; color: var(--neutral-700); }

.tabell__kontakt { min-width: 180px; }
.kontaktcelle { font-size: 13px; line-height: 1.4; display: block; }
.kontaktcelle--mangler { color: var(--orange-700); font-weight: 700; }
.tabell__nr {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--neutral-700);
  white-space: nowrap;
}
.tabell__tall { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Radtallet i importlistene står til høyre, med overskriften over seg (revisjonen 10.2026, V76). */
.importliste .importliste__rader,
.importliste th:last-child { text-align: right; }
.tabell--ko td { vertical-align: top; }

/* ---------- Produsentvinduet og utelat-vinduet (del 3 §6.1) ---------- */
/* Begge er hele sider med et panel oeverst, akkurat som brukervinduet: en ekte
   adresse med et ekte skjema. Ingen <dialog> og ingen JavaScript — «Utelat» er
   en lenke til en side som forklarer seg selv foer den spoer om grunnen. */
.partvindu { gap: var(--space-5); }
.partvindu__tittel { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.partvindu__overskrift {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
/* To spalter paa bred skjerm, én paa smal. `minmax(min(100%, 320px), 1fr)` er
   formen som ikke sprenger ut av mobilbredden: `minmax(320px, …)` alene gir en
   spalte som er bredere enn skjermen naar skjermen er smalere enn 320 px. */
.partvindu__kolonner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-5);
  align-items: start;
}
.partvindu__navn { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.partvindu__utelatt { color: var(--orange-700); }
.navnliste { list-style: none; margin: 0; padding: 0; }

/* Haken: hele etiketten er klikkflaten, saa maalet er stoerre enn ruta selv. */
.felt--hake { gap: var(--space-2); }
.hake { display: flex; align-items: center; gap: var(--space-2); min-height: 24px; cursor: pointer; }
.hake input { width: 18px; height: 18px; accent-color: var(--bama-blue); flex: none; }
.hake__tekst {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--neutral-800);
}

/* Spoersmaalsvinduet: her skal noen faktisk lese, saa maalet holdes kort. */
.partvindu--sporsmal { max-width: 62ch; }
.faktapunkter {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--neutral-700);
}
.faktapunkter strong { color: var(--neutral-900); }
.partvindu__knapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Navnet aapner parten, med den samme radlenka brukertabellen har.
   `.tabell__handling` maa loefte seg over overlegget `.radlenke::after` legger
   paa hele raden — ellers er «Utelat» en lenke man ser, men ikke naar. */
.partcelle { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.tabell__handling { position: relative; z-index: 1; }

/* ---------- Produsentregisteret som liste (28.09.2026) ----------
   Navnet er radens ene tunge ting; typen, produktene og kontakten er stille.
   Merkene står på linja med navnet, så en grossist eller en utelatt part ses
   uten en egen kolonne. */
.tabell--register .partcelle { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.partcelle__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bama-blue);
}
.partcelle__merker { display: inline-flex; gap: 6px; }
/* Designsystemets Badge i en tabellrad: samme pille og samme versaler, men
   19 px høy i stedet for 25, så raden ikke blir høyere av et merke. */
.merke--liten { padding: 4px 9px; font-size: 10px; line-height: 11px; letter-spacing: 0.08em; }

/* Ukoblede navn: én stille linje over lista, ikke køen selv. Hele linja er
   lenken til «Navnekobling», der køen står. */
.koblingsvarsel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--yellow-50);
  border: 1px solid var(--yellow-200);
  color: var(--neutral-800);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color var(--fart-rask) var(--ease-ut), background-color var(--fart-rask) var(--ease-ut);
}
.koblingsvarsel__prikk { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-500); }
.koblingsvarsel__tekst { flex: 1 1 320px; min-width: 0; }
.koblingsvarsel__lenke {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--bama-blue);
}
.koblingsvarsel__lenke::after { content: " →"; }
@media (hover: hover) and (pointer: fine) {
  .koblingsvarsel:hover { border-color: var(--yellow-500); background: var(--yellow-200); }
}
.koblingsvarsel:focus-visible { outline: 2px solid var(--bama-blue); outline-offset: 2px; }
.koblingsnote { margin: 0; max-width: 72ch; }

/* ---------- Produsentvinduet som <dialog> (28.09.2026) ---------- */
.partvindu__seksjon { margin-top: var(--space-3); }
.partvindu__status { margin: 0; font-size: 13px; line-height: 1.5; color: var(--neutral-800); }
.partvindu__status.partvindu__utelatt { color: var(--orange-700); }

/* Navnene fra kildene, sammenfoldet. Summary er én rad: tittelen, tallet og
   en pil som snur seg — det samme uttrykket som seksjonsnavnene over. */
.kildenavn { margin-top: var(--space-3); border-top: 1px solid var(--neutral-300); }
.kildenavn__hode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.kildenavn__hode::-webkit-details-marker { display: none; }
.kildenavn__hode::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--fart-rask) var(--ease-ut);
}
.kildenavn[open] > .kildenavn__hode::after { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  .kildenavn__hode:hover { color: var(--bama-blue); }
}
.kildenavn__hode:focus-visible { outline: 2px solid var(--bama-blue); outline-offset: 2px; border-radius: 4px; }
.kildenavn__tall {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--neutral-300);
  color: var(--neutral-800);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.kildenavn__innhold { display: flex; flex-direction: column; gap: var(--space-2); padding-top: 4px; }

.volumkort__tall { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: 0; }
.volumkort__tall dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.volumkort__tall dd {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--bama-blue);
  font-variant-numeric: tabular-nums;
}
.nokkelverdi { margin: 0; font-size: .8125rem; }
/* Etiketten til venstre, tallet mot hoeyre kant: kolonnen skal kunne leses nedover
   naar spoersmaalet er «stemmer tallene?». Etikettene er lengre enn de raa noeklene
   var, saa raden bryter naar den maa i stedet for aa skyve tallet ut av cella. */
.nokkelverdi div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1px 0;
}
.nokkelverdi dt { color: var(--neutral-700); }
.nokkelverdi dd {
  margin: 0;
  font-weight: 500;
  color: var(--neutral-900);
  font-variant-numeric: tabular-nums;
}

.tellerrad { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 1rem 0 .25rem; padding: 0; }
.tellerrad__punkt {
  padding: .4rem .75rem; border-radius: 8px; background: var(--neutral-200);
  color: var(--neutral-800); font-size: .875rem;
}
.tellerrad__tall { font-weight: 700; font-variant-numeric: tabular-nums; }
.fargeprove { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; }
.fargeprove__rute { padding: .3rem .6rem; border-radius: 6px; font-size: .8125rem; font-weight: 500; }
.fargeprove__rute--innenfor { background: var(--green-200); color: var(--gronn-tekst); }
.fargeprove__rute--utenfor { background: var(--yellow-200); color: var(--orange-700); }
.fargeprove__rute--kraftig { background: var(--red-100); color: var(--red-600); }

/* Manglende kassestoerrelse: oransje varsel, aldri et gjettet tall (spec 16). */
.merke--mangler { background: var(--orange-100); color: var(--orange-700); font-weight: 600; }

/* ============================================================
   HENTERE — /administrasjon/hentere/ (del 4 §2)
   Kortformen fra «Import og datastand» i designpakken: status, sist
   og neste kjoering, radtall og handlingene. Ett kort per henter.
   ============================================================ */
.henterkort { gap: var(--space-4); }
.henterkort__topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.henterkort__navn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.henterkort__navn h2 { font-size: 19px; line-height: 1.25; text-wrap: balance; }

/* Fargen alene sier ingenting: prikken staar alltid sammen med ordet «Paa» eller «Av». */
.henterkort__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.henterkort__status--paa { background: var(--green-200); color: var(--gronn-tekst); }
.henterkort__status--av { background: var(--neutral-300); color: var(--tekst-dempet); }
.henterkort__prikk {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
/* Pulsen betyr «noe skjer naa» — den eneste bevegelsen paa siden, og den slaas av
   for den som har bedt om mindre bevegelse. */
.henterkort__prikk--gaar { animation: sp-puls 1600ms var(--mykt) infinite; }
@keyframes sp-puls {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

.henterkort__fakta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  border-top: 1px solid var(--neutral-400);
  padding-top: var(--space-4);
}
.henterkort__fakta > div { display: flex; flex-direction: column; gap: 3px; }
.henterkort__fakta dt {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.henterkort__fakta dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 14px;
}
.henterkort__tall {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--bama-blue);
}
.henterkort__tid { font-variant-numeric: tabular-nums; color: var(--neutral-800); }
.henterkort__tom, .henterkort__grunn { color: var(--neutral-700); }
.henterkort__merknad { font-size: 12px; line-height: 1.5; color: var(--neutral-700); }
.henterkort__utfall {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
}
.henterkort__utfall--ferdig { color: var(--green-600); }
.henterkort__utfall--feilet { color: var(--red-600); }
.henterkort__utfall--avbrutt { color: var(--orange-700); }
.henterkort__utfall--bestilt, .henterkort__utfall--klar, .henterkort__utfall--henter {
  color: var(--blue-600);
}

.henterkort__styring {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-top: 1px solid var(--neutral-400);
  padding-top: var(--space-4);
}
.henterrad {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin: 0;
  flex-wrap: wrap;
}
.henterrad__felt { flex: 1 1 100%; min-width: 0; }
/* Lagre-knappen hoerer til feltet den lagrer, ikke til hintet under det. */
.henterrad__inn { display: flex; align-items: center; gap: var(--space-2); }
.henterrad__inn .felt__input, .henterrad__inn .felt__valg { flex: 1 1 auto; min-width: 0; }
.henterrad--handling { align-items: center; }

/* ============================================================
   INNSTILLINGER — /administrasjon/innstillinger/ (§7.3)
   Kortene, radene og brikkene er målt mot `Administrasjon.dc.html`
   (fanen «Innstillinger»): kort 22/24 px med 16 px radius og
   `--shadow-sm`, korttittel 18 px, brødtekst 13/1,5, feltnavn
   Apfel 500/14, hint 12 px, tallfelt 38 px høye med høyrestilt
   Apfel 700/14 på `--neutral-200`, brikker 12 px i pilleform, og
   skillelinjene på `--neutral-300`.
   ============================================================ */
.innstillingsbolk {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}
.bolktittel { margin-top: var(--space-2); }

/* Prototypens kortgrid: samme auto-fit som `.rutenett`, men 20 px mellomrom, og
   kortene innvendig på 18 px — begge målt i `Administrasjon.dc.html`. */
.rutenett--innstillinger { gap: 20px; }
.rutenett--innstillinger > .panel { gap: 18px; }

.korthode { display: flex; flex-direction: column; gap: 4px; }
.korthode__rad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Korttittelen står på 18 px uten den negative sperringa de store overskriftene har. */
.korttittel { font-size: 18px; line-height: normal; letter-spacing: normal; }
.underitittel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
  margin: var(--space-4) 0 var(--space-2);
}

.feltnavn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--neutral-900);
}
.felthint { font-size: 12px; line-height: 1.4; color: var(--neutral-700); }
.felthint--linje { font-size: 13px; line-height: 1.5; }
.felthint--mangler { color: var(--orange-700); }
.tomtekst { font-size: 13px; color: var(--neutral-700); }

/* Kommandoen som skal kjøres på serveren. Fastbredde fordi den skal skrives av
   tegn for tegn, ikke fordi den skal se teknisk ut. */
.kommandolinje {
  margin: 0;
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--neutral-200);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--neutral-900);
  overflow-x: auto;
}

/* Én innstilling per rad: navn og forklaring til venstre, verdien til høyre. */
.innstillingsrad {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.innstillingsrad--delt { border-top: 1px solid var(--neutral-300); padding-top: 16px; }
.innstillingsrad__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tallfelt { display: flex; align-items: center; gap: 6px; flex: none; }
.tallfelt__input {
  width: 96px;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
  background: var(--neutral-200);
  border: 2px solid var(--neutral-400);
  border-radius: 10px;
  padding: 8px 10px;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--fart-rask) ease, background var(--fart-rask) ease,
              box-shadow var(--fart-rask) ease;
}
.tallfelt__input:focus {
  border-color: var(--bama-blue);
  background: var(--neutral-100);
  box-shadow: var(--fokusglorie);
}
/* Mangler tallet, sier feltet det selv — vi gjetter aldri en kassestørrelse (§16). */
.tallfelt__input--mangler { border-color: var(--orange-500); background: var(--orange-100); }
.tallfelt__enhet { font-size: 13px; color: var(--neutral-700); white-space: nowrap; }

/* ---------- Avviksgrensen som skyvefelt (designpakken §2) ----------
   Fasiten gir grensen et skyvefelt i full bredde, en egen avlesning paa 22 px og en
   bildetekstlinje med begge endene og den doble grensen.

   UTEN JAVASCRIPT: `<input type="range">` er et vanlig skjemafelt - det sendes med
   «Lagre endringer» som alt annet. Avlesningen viser den lagrede verdien, og den er
   det eneste tallet som er sant foer skjemaet er sendt. Med JavaScript foelger den
   tommelen mens man drar. */
.grensefelt { display: flex; flex-direction: column; gap: 10px; }
.grensefelt__hode {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.grensefelt__avlesning {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: var(--bama-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.grensefelt__bildetekst {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-size: 12px;
  color: var(--neutral-700);
}
.skyvefelt {
  width: 100%;
  margin: 0;
  accent-color: var(--bama-blue);
}
.skyvefelt:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 4px; }

/* ---------- Horisonten som stegpille (designpakken §2) ----------
   En pille med to runde knapper paa 30 x 30 px og tallet i midten.

   UTEN JAVASCRIPT: knappene er vanlige submit-knapper som sender skjemaet, og
   serveren teller ett steg opp eller ned. Tallet i midten er et ekte tallfelt, saa
   det kan skrives rett inn og leses av en skjermleser - stegpilla er en snarvei,
   ikke den eneste veien. */
.stegpille {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--neutral-300);
}
.stegpille__knapp {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--neutral-100);
  color: var(--bama-blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease-out, background 0.12s ease;
}
.stegpille__knapp:active { transform: scale(0.94); }
.stegpille__knapp:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.stegpille__verdi {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 74px;
}
.stegpille__input {
  width: 3ch;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: right;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
  font-variant-numeric: tabular-nums;
  /* Nettleserens egne opp/ned-piler ville staatt rett ved siden av pillas egne. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.stegpille__input::-webkit-outer-spin-button,
.stegpille__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stegpille__input:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.stegpille__enhet {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}
@media (hover: hover) and (pointer: fine) {
  .stegpille__knapp:hover { background: var(--yellow-50); }
}

/* Fargeprøven viser avvikstonene slik de faktisk ser ut i uke-for-uke. */
.tonerekke { display: flex; gap: 10px; flex-wrap: wrap; }
.tonerekke__rute {
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  color: var(--neutral-900);
}
.tonerekke__rute--kraftig-under { background: var(--tone-kraftig-under); }
.tonerekke__rute--under { background: var(--tone-under); }
.tonerekke__rute--innenfor { background: var(--neutral-200); }
.tonerekke__rute--over { background: var(--tone-over); color: var(--bama-blue); }
.tonerekke__rute--kraftig-over { background: var(--tone-kraftig-over); color: var(--bama-blue); }

.valgbolk {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.valgbolk legend { padding: 0; }

/* Ukedagene som pillebrikker. Radioknappen ligger under flata, så siden virker
   uten JavaScript og tastaturet får fortsatt en vanlig radiogruppe. */
.brikkerad { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.brikke { position: relative; display: inline-flex; }
.brikke input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}
.brikke__flate {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--neutral-400);
  background: var(--neutral-100);
  color: var(--bama-blue);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--fart-rask) ease, border-color var(--fart-rask) ease,
              transform var(--fart-rask) var(--mykt);
}
.brikke input:checked + .brikke__flate {
  background: var(--bama-blue);
  border-color: var(--bama-blue);
  color: var(--neutral-100);
}
.brikke input:focus-visible + .brikke__flate { outline: 3px solid var(--blue-600); outline-offset: 2px; }
.brikke__flate:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .brikke input:not(:checked) + .brikke__flate:hover {
    border-color: var(--bama-blue);
    background: var(--yellow-50);
  }
}

.tidfelt {
  /* Samme høyde som brikkene ved siden av — et tidsfelt har egen innvendig luft
     og ble ellers 1,6 px høyere enn dagene det står på linje med. */
  height: 31px;
  border: 1.5px solid var(--neutral-400);
  background: var(--neutral-100);
  color: var(--bama-blue);
  border-radius: var(--radius-pill);
  padding: 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  transition: border-color var(--fart-rask) ease, box-shadow var(--fart-rask) ease;
}
.tidfelt:focus { border-color: var(--bama-blue); box-shadow: var(--fokusglorie); }

/* Valgliste: én rad per alternativ, skilt med den tynne linja fra prototypen. */
.valgbolk--liste { gap: 0; }
.valgrad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--neutral-300);
  cursor: pointer;
}
.valgrad__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.valgrad__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}
.valgrad__under { font-size: 12px; line-height: 1.4; color: var(--neutral-700); }
.valgrad input { width: 18px; height: 18px; accent-color: var(--bama-blue); margin: 0; }

.kasseliste { display: flex; flex-direction: column; }
.kasserad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--neutral-300);
  margin: 0;
}
.kasserad__navn { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kasserad__produkt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}

/* Lagrebaren har prototypens form: navy pille med gul knapp, og prototypens
   plass — `position: sticky; bottom: 20px`. Innstillingssiden er flere skjermer
   høy, og uten den sto «Lagre endringer» under alt sammen.

   Prototypen viser pilla bare når noe er endret. Her står den alltid: knappen
   deaktiveres av `skjema.js` til noe faktisk er endret, og uten JavaScript er den
   aktiv — serveren lagrer uansett ingenting når ingenting er endret. Å skjule
   hele pilla ville krevd JavaScript for å få den fram igjen. */
.lagrebar {
  position: sticky;
  bottom: 20px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--bama-blue);
  color: var(--neutral-100);
  border-radius: var(--radius-pill);
  padding: 10px 10px 10px 22px;
  box-shadow: 0 12px 32px rgba(12, 31, 95, 0.3);
}
/* Teksten til venstre, «Forkast» og «Lagre endringer» som par til høyre. */
.lagrebar__tekst { margin-right: auto; font-size: 14px; }

/* Ett produkt om gangen. Sammenslått er siden en skjerm høy i stedet for fem. */
.produktdetalj { border-top: 1px solid var(--neutral-300); }
.produktdetalj[open] { padding-bottom: var(--space-4); }
.produktdetalj__hode {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}
.produktdetalj__hode::-webkit-details-marker { display: none; }
.produktdetalj__hode::before {
  content: "";
  width: 7px; height: 7px;
  flex: none;
  border-right: 2px solid var(--bama-blue);
  border-bottom: 2px solid var(--bama-blue);
  transform: rotate(-45deg);
  transition: transform var(--fart-rask) var(--mykt);
}
.produktdetalj[open] > .produktdetalj__hode::before { transform: rotate(45deg); }
.produktdetalj__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bama-blue);
}
.produktdetalj__tall { margin-left: auto; font-size: 12px; color: var(--neutral-700); }
.produktdetalj .radskjema { margin-top: var(--space-3); flex-wrap: wrap; }
.radskjema--hoyre { justify-content: flex-end; margin-top: var(--space-3); }
/* `width: auto` lar nettleseren måle nedtrekket etter det LENGSTE alternativet, og
   i navnekøen er alternativene produsentnavn. Målt 19.09.2026: 449 px i en 430 px
   skjerm, som ga hele siden 63 px vannrett rulling. `max-width: 100%` lar den
   fortsatt vokse med innholdet når det er plass, men aldri forbi kolonnen sin. */
.felt__valg--smal { width: auto; max-width: 100%; min-width: 0; }

.systemtall { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; }
.systemtall__post { display: flex; flex-direction: column; gap: 2px; }
.systemtall dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.systemtall dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bama-blue);
}

.tilstandsliste { display: flex; flex-direction: column; }
.tilstandsrad {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--neutral-300);
  font-size: 13px;
  line-height: 1.5;
}
.tilstandsrad__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tilstandsrad__navn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}
.tilstandsrad__merke {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  /* `--green-700` som `.merke--gronn`: `--green-600` på `--green-200` gir 4,45:1, under AA
     for 11 px tekst. */
  background: var(--green-200);
  color: var(--green-700);
  white-space: nowrap;
}
/* Bare raden i feil er rød. Blokka her var kopiert, og bare første regel fikk `--feil`
   foran seg: merket ble rødt også der det sto «Ok» (revisjonen 22.10.2026, V07). */
.tilstandsrad--feil .tilstandsrad__merke { background: var(--red-100); color: var(--red-600); }
.tilstandsrad__tid { font-size: 12px; color: var(--neutral-700); white-space: nowrap; }

@media (max-width: 720px) {
  .innstillingsrad { align-items: flex-start; }
  .kasserad { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Forklaringene ved nøkkeltallene (Anders 23.09.2026)
   ============================================================
   Et lite «i» ved etiketten, og en rolig boks med tre ting: hva tallet betyr, hvordan det
   regnes, og hva det bygger på. Knappen er liten å se på, men treffflaten er 28 px. Boksen
   står i det øverste laget (`popover`), plassert av `js/forklaring.js`; uten skriptet står den
   midt på skjermen, som nettleserens standard. */
.info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--neutral-700);
  vertical-align: -3px;
  cursor: pointer;
  transition: color 150ms var(--ease-ut), transform 120ms var(--ease-ut);
}
/* Treffflaten er større enn tegningen, så et lite ikon ikke krever presisjon. */
.info::before { content: ""; position: absolute; inset: -6px; }
.info:hover,
.info--aapen { color: var(--bama-blue); }
.info:active { transform: scale(0.92); }
.info:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.info__ikon { display: block; }
.info__ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.info__strek { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.info__prikk { fill: currentColor; }
/* På navy (vinduenes topp, sumkortet) er ikonet lyseblått som etiketten det står ved. */
.paa-navy .info { color: var(--blue-300, #A9C6FF); }
.paa-navy .info:hover,
.paa-navy .info--aapen { color: var(--neutral-100); }

.forklaring {
  width: min(320px, calc(100vw - 16px));
  /* Høyden settes av `forklaring.js` når boksen ikke får plass; da ruller den selv. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--neutral-100);
  color: var(--neutral-900);
  box-shadow: 0 12px 32px rgba(12, 31, 95, 0.18), 0 2px 6px rgba(12, 31, 95, 0.08);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: top left;
  transition: opacity 150ms var(--ease-ut), transform 150ms var(--ease-ut);
}
/* Plassert av skriptet ved knappen. Uten `data-side` beholder boksen nettleserens sentrering. */
.forklaring[data-side] { position: fixed; inset: auto; margin: 0; }
.forklaring[data-side="over"] { transform-origin: bottom left; }
@starting-style {
  .forklaring:popover-open { opacity: 0; transform: translateY(-4px) scale(0.97); }
}
.forklaring::backdrop { background: transparent; }
.forklaring__tittel {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}
.forklaring__tekst { margin: 0; }
.forklaring__etikett {
  margin: 10px 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-700);
}
.forklaring__grunnlag { margin: 0; padding-left: 16px; color: var(--neutral-800); }
.forklaring__grunnlag li + li { margin-top: 2px; }

/* Boksen på statusmerket (25.09.2026): merket øverst i sin egen farge, hva det betyr i litt
   større tekst, så det som gjelder akkurat denne produsenten bak en tynn linje, og neste steg
   i blått. Samme flate, skygge og bevegelse som forklaringene ved tallene. */
/* Ingenting å klikke på i boksen: musa går gjennom, så den aldri står i veien for merket i
   raden under (et klikk der skal åpne produsentvinduet). */
.forklaring--status {
  width: min(300px, calc(100vw - 16px));
  padding: 14px 16px 14px;
  pointer-events: none;
}
.forklaring__merke { margin: 0 0 8px; line-height: 1; }
.forklaring__merke .merke { padding: 4px 10px; font-size: 11px; letter-spacing: 0.1em; }
.forklaring__betyr {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--neutral-900);
  text-wrap: pretty;
}
.forklaring__part {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--neutral-300);
}
.forklaring__part .forklaring__etikett { margin-top: 0; }
.forklaring__part .forklaring__tekst { color: var(--neutral-800); }
.forklaring__neste {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bama-blue);
}

@media (prefers-reduced-motion: reduce) {
  .forklaring { transition: opacity 150ms linear; transform: none; }
  @starting-style {
    .forklaring:popover-open { opacity: 0; transform: none; }
  }
}

/* Appens eget spørsmålsvindu (`js/bekreft.js`), i stedet for nettleserens (Anders 30.09.2026). */
dialog.bekreft {
  width: min(420px, calc(100vw - 32px));
  padding: 26px 26px 22px;
  border: 0;
  border-radius: 20px;
  background: var(--neutral-100);
  color: var(--bama-blue);
  box-shadow: 0 24px 60px rgba(12, 31, 95, 0.28);
}
dialog.bekreft::backdrop { background: rgba(12, 31, 95, 0.5); }
dialog.bekreft[open] { animation: bekreft-inn 0.15s ease; }
.bekreft__tittel { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; line-height: 1.25; }
.bekreft__tekst { margin: 0; font-size: 15px; line-height: 1.45; color: var(--neutral-800); }
.bekreft__knapper { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@keyframes bekreft-inn { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.bekreft[open] { animation: none; } }

/* ---------- Rullgardin (`js/rullgardin.js`) ----------
   Appens egen nedtrekksliste i filtermenyens stil, i stedet for nettleserens (Anders 30.09.2026).
   Knappen arver feltets egne klasser; lista henger under den, fast i vinduet. */
.rullgardin { position: relative; display: inline-flex; flex-direction: column; min-width: 0; }
.felt .rullgardin, label .rullgardin { width: 100%; }
.rullgardin__innfodt { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%); }
.rullgardin__knapp { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; }
.rullgardin__knapp:disabled { cursor: default; }
.rullgardin__tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rullgardin__pil { flex: none; color: var(--bama-blue); transition: transform var(--fart-rask) ease; }
.rullgardin--aapen .rullgardin__pil { transform: rotate(180deg); }
.rullgardin__liste {
  position: fixed;
  top: var(--rg-topp, auto);
  bottom: var(--rg-bunn, auto);
  left: var(--rg-venstre, 0);
  z-index: 200;
  width: var(--rg-bredde, 240px);
  max-width: calc(100vw - 24px);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--neutral-100);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(12, 31, 95, 0.22);
  transform-origin: top left;
  animation: filterboks-inn 170ms var(--mykt);
  outline: none;
}
.rullgardin__liste--over { transform-origin: bottom left; }
.rullgardin__liste[hidden] { display: none; }
.rullgardin__valg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: var(--bama-blue);
  cursor: pointer;
}
.rullgardin__valg--aktiv { background: var(--yellow-50); }
.rullgardin__valg[aria-selected="true"] { background: var(--bama-blue); color: var(--neutral-100); }
.rullgardin__valg[aria-selected="true"].rullgardin__valg--aktiv { filter: brightness(1.15); }
.rullgardin__valg[aria-disabled="true"] { color: var(--tekst-dempet); cursor: default; }
@media (prefers-reduced-motion: reduce) { .rullgardin__liste { animation: filterboks-tone 170ms linear; } }

/* ---------- Produktvelgeren, ryddet 01.10.2026 ----------
   Anders: «lag den valg av produkt også penere og renere». Én kolonne: kategoriene som en rad
   med valg øverst, produktene som en ren liste med haken til høyre, og en enkel bunnlinje. */
.produktfilter__vindu { gap: 6px; padding: 14px; }
.produktfilter__hode { padding: 2px 6px 6px; border-bottom: 0; }
.produktfilter__nivaaer { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.produktfilter__kategorier {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--neutral-200);
}
.produktfilter__kategorier:has(> :only-child) { display: none; }
.produktfilter__kategori {
  flex: 1 1 auto;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 13px;
  color: var(--neutral-700);
}
.produktfilter__kategori:hover { background: transparent; color: var(--bama-blue); }
.produktfilter__kategori--valgt,
.produktfilter__kategori--valgt:hover {
  background: var(--neutral-100);
  color: var(--bama-blue);
  box-shadow: 0 1px 3px rgba(12, 31, 95, 0.12);
  filter: none;
}
.produktfilter__gruppe { min-height: 0; padding: 0; border: 0; gap: 0; }
.produktfilter__gruppenavn { padding: 4px 6px 6px; }
.produktfilter__valg {
  padding: 11px 8px;
  border-radius: 0;
  border-bottom: 1px solid var(--neutral-300);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bama-blue);
}
.produktfilter__valg:last-of-type { border-bottom: 0; }
.produktfilter__valg:hover { background: transparent; color: var(--blue-600); }
.produktfilter__valg input[type="checkbox"] { order: 2; border-radius: 50%; width: 20px; height: 20px; }
.produktfilter__bunn { padding: 10px 2px 0 6px; }
@media (max-width: 720px) {
  .produktfilter__gruppe { padding: 0; border-top: 0; }
}

/* ---------- «Vis som bruker» (Anders 02.10.2026) ----------
   Stripen under toppen sier hvem man ser appen som, og at det bare er visning. Toppstreken
   blir gul så lenge visningen varer, så det ses også når stripen er rullet ut av syne. */
.vis-som-stripe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  background: var(--yellow-600);
  color: var(--tekst-paa-sterk);
  border-bottom: 1px solid rgba(12, 31, 95, 0.15);
}
.vis-som-stripe__ikon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.vis-som-stripe__ikon path { fill: none; stroke: var(--tekst-paa-sterk); stroke-width: 1.6; }
.vis-som-stripe__ikon circle { fill: var(--tekst-paa-sterk); }
.vis-som-stripe__tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vis-som-stripe__tekst strong { font-family: var(--font-display); font-size: 15px; }
.vis-som-stripe__meta { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-som-stripe__skjema { margin: 0 0 0 auto; flex: none; }
.vis-som-stripe__knapp { background: var(--bama-blue); border-color: var(--bama-blue); color: var(--neutral-100); }
.vis-som-stripe__knapp:hover { color: var(--neutral-100); filter: brightness(1.15); }
.side--vis-som .topp { box-shadow: inset 0 -3px 0 var(--yellow-600); }
.tabell__vis-som { width: 1%; white-space: nowrap; text-align: right; }
.tabell__vis-som form { margin: 0; }
.vindu__vis-som { margin: 0 0 0 auto; }
/* En konto med to roller (regel 76): «Vis som SKP» og «Vis som produsent» side om side. */
.vindu__vis-som--to { display: flex; gap: var(--space-2); }
.vindu__vis-som-knapp { background: var(--yellow-600); border-color: var(--yellow-600); color: var(--tekst-paa-sterk); }
@media (max-width: 720px) {
  .vis-som-stripe { padding: 10px 16px; }
}

/* Bare for skjermlesere, på alle sider. Sto bare i skjermer.css og pakkeri.css, så Min konto og
   administrasjonen viste «13 pakkeri-uker mangler» i fanen i stedet for «13» (gjennomgangen 04.10.2026). */
.kun-skjermleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* En tabell blir aldri 1 px høy: den vokser med radene, og den skjulte tabellen under grafen
   dro siden ~100 px forbi bunnteksten da grafen fikk hele sesongen (Anders 22.10.2026: «den i
   bunn her er ikke låst i bunn»). Fast plassert teller den ikke med i sidens høyde. */
table.kun-skjermleser { position: fixed; top: 0; left: 0; }

/* ---------- «Meld feil»-boblen (Anders 11.10.2026) ----------
   Står her og ikke i et sidestilark: `js/delbytte.js` fjerner stilark den nye siden ikke har,
   og boblen lever gjennom sidebytter. Knappen er rolig navy og står nede til høyre; panelet
   vokser ut fra knappen (origin nede til høyre) på 200 ms. På telefon står den over bunnmenyen,
   og panelet blir et ark over hele bredden. */
.meldfeil {
  --mf-bunn: 20px;
  position: fixed;
  right: 20px;
  bottom: var(--mf-bunn);
  z-index: 60;
  font-family: var(--font-body);
}
/* Egne lag: Safari på iPad og iPhone lot boblen rykke under rulling (Anders 11.10.2026). Hintet står
   på knappen og panelet, ikke på `.meldfeil`: en transform der ville gjort beholderen til ramme for
   arket på telefon, som også er `position: fixed`. */
.meldfeil__knapp,
.meldfeil__panel {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.meldfeil__knapp {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bama-blue);
  color: var(--neutral-100);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(12, 31, 95, 0.22);
  transition: transform var(--fart-trykk) ease, box-shadow var(--fart-rask) ease;
}
@media (hover: hover) and (pointer: fine) {
  .meldfeil__knapp:hover { box-shadow: 0 10px 26px rgba(12, 31, 95, 0.3); }
}
.meldfeil__knapp:active { transform: scale(0.96); }
.meldfeil__knapp:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; }
.meldfeil__knapp[aria-expanded="true"] { visibility: hidden; }
.meldfeil__ikon { width: 20px; height: 20px; flex: none; }
.meldfeil__prikk {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow-600);
  box-shadow: 0 0 0 2px var(--bama-blue);
}
/* Nytt svar fra Anders (feil #5): en liten snakkeboble over knappen, så knappen ikke blir bredere.
   Den gule prikken er et påbegynt utkast. */
.meldfeil__merke {
  position: absolute;
  right: 4px;
  bottom: calc(100% + 10px);
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--red-600);
  color: var(--neutral-100);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(12, 31, 95, 0.18);
  pointer-events: none;
  transform-origin: bottom right;
  transition: opacity 200ms var(--ease-ut), transform 200ms var(--ease-ut);
}
.meldfeil__merke::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--red-600);
  border-bottom: 0;
}
@starting-style {
  .meldfeil__merke:not([hidden]) { opacity: 0; transform: translateY(4px) scale(0.96); }
}
.meldfeil__merke[hidden],
.meldfeil__fanenytt[hidden] { display: none; }
.meldfeil__fanenytt {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--red-500);
}
.meldfeil__skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meldfeil__minerad--nytt { box-shadow: inset 3px 0 0 var(--red-500), var(--shadow-sm); }
.meldfeil__nyttmerke {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--red-100);
  color: var(--red-600);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
}

.meldfeil__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 392px;
  height: min(620px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  background: var(--neutral-100);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(12, 31, 95, 0.22), 0 2px 6px rgba(12, 31, 95, 0.08);
  overflow: hidden;
  transform-origin: bottom right;
  transition: opacity 200ms var(--ease-ut), transform 200ms var(--ease-ut);
}
@starting-style {
  .meldfeil__panel:not([hidden]) { opacity: 0; transform: scale(0.94) translateY(8px); }
}
.meldfeil__panel[data-drar] { box-shadow: 0 0 0 3px var(--blue-400), 0 24px 60px rgba(12, 31, 95, 0.22); }

.meldfeil__hode {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 18px 18px 12px 20px;
  background: var(--bama-blue);
  color: var(--neutral-100);
}
.meldfeil__tittel {
  margin: 0;
  color: var(--neutral-100);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.meldfeil__under { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--blue-200); }
/* Lav topp med Bob (Anders 20.10.2026: «kan lage den blå der mindre … gjerne med en emoji»): bare
   tittelen med Bobs ikon og krysset, på én linje. Introen står i Bobs hilsen i samtalen. */
.meldfeil__hode--lav { align-items: center; padding: 10px 12px 10px 14px; }
.meldfeil__hode--lav .meldfeil__tittel { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.meldfeil__avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
}
.meldfeil__hode--lav .meldfeil__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paa-navy-16);
  font-size: 17px;
}
.meldfeil__avsender .meldfeil__avatar { display: inline-block; margin-right: 4px; font-size: 12px; vertical-align: -1px; }
.meldfeil__lukk {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--paa-navy-12);
  color: var(--neutral-100);
  cursor: pointer;
  transition: background var(--fart-rask) ease, transform var(--fart-trykk) ease;
}
.meldfeil__lukk svg { width: 18px; height: 18px; }
.meldfeil__lukk:hover { background: var(--paa-navy-22); }
.meldfeil__lukk:active { transform: scale(0.94); }

.meldfeil__faner {
  display: flex;
  gap: 4px;
  padding: 0 16px 12px;
  background: var(--bama-blue);
}
.meldfeil__fane {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  background: transparent;
  color: var(--blue-200);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--fart-rask) ease, color var(--fart-rask) ease;
}
.meldfeil__fane[aria-pressed="true"] { background: var(--neutral-100); color: var(--bama-blue); }

.meldfeil__samtale,
.meldfeil__mine {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 16px 16px 8px;
  background: var(--yellow-50);
}
.meldfeil__boble {
  max-width: 86%;
  margin: 0 0 10px;
  padding: 10px 13px;
  border-radius: 16px 16px 16px 4px;
  background: var(--neutral-100);
  color: var(--neutral-900);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow-sm);
}
.meldfeil__boble--bruker {
  margin-left: auto;
  border-radius: 16px 16px 4px 16px;
  background: var(--bama-blue);
  color: var(--neutral-100);
  box-shadow: none;
}
.meldfeil__boble--claude { background: var(--blue-200); box-shadow: none; }
/* Svar fra Anders står i samtalen, ikke i en egen liste (Anders 12.10.2026). */
.meldfeil__boble--anders { background: var(--green-200); box-shadow: none; }
.meldfeil__avsender {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blue-600);
}
/* «Ja, send» og «Nei takk» under svaret der Bob spør (Anders 20.10.2026): en primær- og en
   sekundærknapp, aldri tekstlenker. Glir inn med svaret (`.meldfeil__inn`). */
.meldfeil__sporsmal { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px; }
.meldfeil__sporsmal[hidden] { display: none; }
.meldfeil__bilder { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0 0 10px; }
.meldfeil__bilder a { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
.meldfeil__bilder img { display: block; width: 96px; height: 72px; object-fit: cover; background: var(--neutral-300); }
.meldfeil__tenker {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
  margin: 0 0 10px;
  border-radius: 16px 16px 16px 4px;
  background: var(--blue-200);
}
.meldfeil__tenker span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-600);
  animation: meldfeil-prikk 1s var(--ease-ut) infinite;
}
.meldfeil__tenker span:nth-child(2) { animation-delay: 150ms; }
.meldfeil__tenker span:nth-child(3) { animation-delay: 300ms; }
@keyframes meldfeil-prikk { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Full Bob viser hva han gjør (spec 2026-10-20-full-bob §3, Anders 20.10.2026: «bra at det står hva
   han gjør så de ikke føler han stopper opp»). Stegene står i en Bob-boble med det pågående øverst;
   bare et nytt steg glir inn (220 ms, `--ease-ut`), og snurren går fort (700 ms) så det føles raskt. */
.meldfeil__steg {
  max-width: 86%;
  margin: 0 0 10px;
  padding: 10px 13px 11px;
  border-radius: 16px 16px 16px 4px;
  background: var(--neutral-100);
  box-shadow: inset 0 0 0 1px var(--blue-200);
  animation: meldfeil-inn 220ms var(--ease-ut);
}
.meldfeil__stegliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.meldfeil__stegrad {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--neutral-900);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.meldfeil__stegrad[data-ferdig] { color: var(--tekst-dempet); font-weight: 400; }
.meldfeil__stegrad[hidden] { display: none; }
.meldfeil__stegrad--ny { animation: meldfeil-steg-inn 220ms var(--ease-ut); }
.meldfeil__stegikon { display: grid; place-items: center; width: 16px; height: 18px; }
.meldfeil__snurr {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--blue-200);
  border-top-color: var(--blue-600);
  animation: meldfeil-snurr 700ms linear infinite;
}
.meldfeil__hake { width: 14px; height: 14px; fill: none; stroke: var(--green-600); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.meldfeil__flere,
.meldfeil__stille { margin: 8px 0 0 24px; font-size: 12px; line-height: 1.4; color: var(--tekst-dempet); }
.meldfeil__stille { animation: meldfeil-tone 250ms ease; }
@keyframes meldfeil-snurr { to { transform: rotate(360deg); } }
@keyframes meldfeil-inn { from { opacity: 0; transform: translateY(4px); } }
@keyframes meldfeil-steg-inn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes meldfeil-tone { from { opacity: 0; } }
@keyframes meldfeil-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* Når svaret er kommet: én linje over svaret som kan åpnes («Bob sjekket 6 ting ▸»). */
.meldfeil__sjekket { margin: 0 0 4px; }
.meldfeil__sjekketlinje {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  list-style: none;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-600);
  cursor: pointer;
  transition: background-color var(--fart-rask) ease;
}
.meldfeil__sjekketlinje::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .meldfeil__sjekketlinje:hover { background: var(--blue-200); }
}
.meldfeil__sjekketlinje:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.meldfeil__sjekketpil {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms var(--ease-ut);
}
.meldfeil__sjekket[open] .meldfeil__sjekketpil { transform: rotate(90deg); }
.meldfeil__sjekket .meldfeil__stegliste { padding: 6px 0 6px 2px; }
.meldfeil__sjekket[open] .meldfeil__stegliste { animation: meldfeil-tone 200ms ease; }
.meldfeil__inn { animation: meldfeil-inn 220ms var(--ease-ut); }
/* Prikken på knappen: Bob jobber (hvit puls), eller har svart mens boblen var lukket (grønn). */
.meldfeil__venter {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neutral-100);
  box-shadow: 0 0 0 2px var(--bama-blue);
  animation: meldfeil-puls 1.4s ease-in-out infinite;
}
.meldfeil__venter[data-klar] { background: var(--green-400); animation: none; }
.meldfeil__venter[hidden] { display: none; }

.meldfeil__mine { list-style: none; }
.meldfeil__minerad {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 12px 14px;
  margin: 0 0 8px;
  border-radius: var(--radius-md);
  background: var(--neutral-100);
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
.meldfeil__minetittel { font-weight: 700; color: var(--neutral-900); overflow-wrap: anywhere; }
.meldfeil__minetid { grid-column: 1; font-size: 12px; color: var(--tekst-dempet); }
.meldfeil__status {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--yellow-200);
  color: var(--yellow-tekst);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.meldfeil__minesvar {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--blue-200);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.meldfeil__status--ferdig { background: var(--green-200); color: var(--green-700); }
.meldfeil__tom { margin: 24px 8px; text-align: center; color: var(--tekst-dempet); font-size: 14px; }

.meldfeil__handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 0;
  background: var(--yellow-50);
}
.meldfeil__handlinger .knapp { padding: 10px 18px; font-size: 14px; }
.meldfeil__feil { margin: 8px 16px 0; color: var(--red-600); font-size: 13px; }

.meldfeil__skriv {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 10px 12px 0;
  padding: 6px;
  border: 1.5px solid var(--neutral-500);
  border-radius: 22px;
  background: var(--neutral-100);
  transition: border-color var(--fart-rask) ease, box-shadow var(--fart-rask) ease;
}
.meldfeil__skriv:focus-within { border-color: var(--bama-blue); box-shadow: var(--fokusglorie); }
.meldfeil__felt {
  flex: 1;
  min-height: 36px;
  max-height: 140px;
  padding: 8px 4px;
  border: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  color: var(--neutral-900);
}
.meldfeil__felt:focus { outline: none; }
.meldfeil__felt::placeholder { color: var(--tekst-dempet); }
.meldfeil__vedlegg,
.meldfeil__sendpil {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--fart-rask) ease, transform var(--fart-trykk) ease;
}
.meldfeil__vedlegg { color: var(--bama-blue); }
.meldfeil__vedlegg:hover { background: var(--neutral-300); }
.meldfeil__vedlegg:focus-within { outline: 3px solid var(--blue-600); outline-offset: 1px; }
.meldfeil__vedlegg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.meldfeil__sendpil { border: 0; background: var(--bama-blue); color: var(--neutral-100); }
.meldfeil__sendpil:active,
.meldfeil__vedlegg:active { transform: scale(0.92); }
.meldfeil__sendpil:disabled { background: var(--neutral-500); cursor: default; }
.meldfeil__vedlegg svg,
.meldfeil__sendpil svg { width: 20px; height: 20px; }
.meldfeil__fot {
  margin: 0;
  padding: 8px 18px 14px;
  font-size: 12px;
  color: var(--tekst-dempet);
}
.meldfeil__nytt {
  border: 0;
  padding: 0;
  margin-left: 4px;
  background: none;
  color: var(--bama-blue);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.meldfeil[data-opptatt] .meldfeil__sendpil,
.meldfeil[data-opptatt] .meldfeil__handlinger .knapp { opacity: 0.6; pointer-events: none; }

@media (max-width: 720px) {
  .meldfeil { --mf-bunn: calc(var(--bunnmeny-luft, 0px) + 12px); right: 12px; }
  .meldfeil__knapp { padding: 12px; }
  .meldfeil__knapptekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .meldfeil__merke::after { right: 16px; }
  .meldfeil__sjekketlinje { min-height: 36px; }
  .meldfeil__panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: min(88vh, 88dvh);
    border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform-origin: bottom center;
  }
  @starting-style {
    .meldfeil__panel:not([hidden]) { opacity: 1; transform: translateY(40px); }
  }
}
/* Tastaturet oppe på telefonen: panelet står i den synlige delen av skjermen (`js/meldfeil.js`),
   og forklaringen, fanene og hintet nederst gir plassen til samtalen (Anders 12.10.2026). */
@media (max-width: 720px) {
  .meldfeil[data-tastatur] .meldfeil__panel {
    top: var(--mf-vv-topp, 0px);
    bottom: auto;
    height: var(--mf-vv-hoyde, 88dvh);
    border-radius: 0;
    padding-bottom: 0;
    transform: none;
  }
  .meldfeil[data-tastatur] .meldfeil__under,
  .meldfeil[data-tastatur] .meldfeil__faner,
  .meldfeil[data-tastatur] .meldfeil__fot { display: none; }
  .meldfeil[data-tastatur] .meldfeil__hode { padding-top: 12px; padding-bottom: 10px; }
  .meldfeil[data-tastatur] .meldfeil__hode--lav { padding-top: 8px; padding-bottom: 8px; }
  /* Fingre: knappene under spørsmålet er minst 44 px høye på telefonen. */
  .meldfeil__sporsmal .knapp { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .meldfeil__panel { transition: opacity 150ms ease; }
  .meldfeil__merke { transition: opacity 150ms ease; }
  @starting-style { .meldfeil__panel:not([hidden]) { transform: none; } }
  .meldfeil__tenker span { animation: none; opacity: 0.7; }
  /* Mindre bevegelse: ingen glid, bare toning; snurren blir en rolig puls. */
  .meldfeil__steg,
  .meldfeil__inn { animation: meldfeil-tone 150ms ease; }
  .meldfeil__stegrad--ny { animation: meldfeil-tone 150ms ease; }
  .meldfeil__snurr { animation: meldfeil-puls 1.6s ease-in-out infinite; border-color: var(--blue-600); }
  .meldfeil__sjekketpil { transition: none; }
}

/* ---------- Plass til boblen (revisjonen 22.10.2026, V10) ----------
   Boblen står fast nede til høyre og dekket signaturen i bunnteksten, «Send inn» i bunnlinja i
   Før inn, «Lagre endringer» i Innstillinger og «Ny bestilling» på telefonen. Når den vises, setter
   siden av plass til den. `--mf-plass` er det boblen tar fra høyre kant: knappen (≈117 px), 20 px
   til kanten og litt luft.
   PC: boblen står der den står, og bunnteksten, bunnlinja og lagrepilla slutter før den. Bunnlinja
   ligger klebet nederst på en lang side og over bunnteksten på en kort; luft i linja virker i
   begge, et løft av boblen bare i den ene. Telefon: boblen løftes over «Ny bestilling» og over
   bunnlinja, som fyller hele bredden. */
body:has(> .meldfeil:not([hidden])) { --mf-plass: 156px; }
body:has(> .meldfeil:not([hidden])) .bunn__innhold {
  padding-right: max(28px, var(--mf-plass) - max(0px, (100% - 1480px) / 2));
}
@media (min-width: 721px) {
  body:has(> .meldfeil:not([hidden])) .pk-bunnlinje__innhold {
    padding-right: max(28px, var(--mf-plass) - max(0px, (100% - 1280px) / 2));
  }
  body:has(> .meldfeil:not([hidden])) .pk-bunnlinje--bama .pk-bunnlinje__innhold {
    padding-right: max(28px, var(--mf-plass) - max(0px, (100% - 1480px) / 2));
  }
  /* Teksten gir plass, ikke knappene: uten dette brøt linja i to rader på 1280 px. */
  body:has(> .meldfeil:not([hidden])) .pk-bunnlinje__tekst { flex: 1 1 0; }
  /* Lagrepilla står i ramma (28 px fra kanten opp til 1480 px bredde). */
  body:has(> .meldfeil:not([hidden])) .lagrebar {
    margin-right: max(0px, var(--mf-plass) - 28px - max(0px, (100vw - 1480px) / 2));
  }
}
@media (max-width: 720px) {
  /* «Ny bestilling» står 14 px over bunnmenyen og er 52 px høy. */
  .side--pp:has(.bs-ny) > .meldfeil { --mf-bunn: calc(var(--bunnmeny-luft, 0px) + 78px); }
  /* Bunnlinja er 88 px høy og står 30 px høyere når siden er rullet til bunns. */
  body:has(.pk-bunnlinje) > .meldfeil { --mf-bunn: calc(var(--bunnmeny-luft, 0px) + 132px); }
  /* Lagrepilla i Innstillinger står 10 px over bunnmenyen og er 60 px høy (mobil-admin.css). */
  body:has(.lagrebar) > .meldfeil { --mf-bunn: calc(var(--bunnmeny-luft, 0px) + 82px); }
}
@media print { .meldfeil { display: none; } }

/* Push-varsler på Min konto (Anders 11.10.2026) */
.pushpanel__status { margin: 0 0 var(--space-3); font-size: 14px; color: var(--neutral-800); }
.pushpanel__knapper { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Adressene i hjelperens svar blir knapper under svaret (Anders 12.10.2026). */
.meldfeil__aapne { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.meldfeil__aapneknapp { background: var(--neutral-100); padding: 8px 14px; gap: 6px; }
.meldfeil__pil { transition: transform var(--fart-rask) ease; }
@media (hover: hover) and (pointer: fine) { .meldfeil__aapneknapp:hover .meldfeil__pil { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .meldfeil__pil { transition: none; } }
/* Adressene hjelperen viser til, som lenker i svaret (spec 2026-10-11-spor-sesongpuls). */
.meldfeil__lenke { color: var(--bama-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.meldfeil__lenke:hover { text-decoration-thickness: 2px; }

/* ---------- SKISSE: Meld sesongslutt ---------- */
.slutt__info { margin: 0; padding: 4px 24px 8px; max-width: 62ch; font-size: 14.5px; line-height: 1.5; color: var(--neutral-800); }
.slutt__info--dempet { padding-top: 0; font-size: 13px; color: var(--tekst-dempet); }
.slutt__valg { margin: 10px 24px 0; padding: 0; border: 0; min-width: 0; }
.slutt__legend { margin: 0 0 6px; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-dempet); }
.slutt__rad { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--neutral-400); border-radius: var(--radius-sm); cursor: pointer; }
.slutt__rad + .slutt__rad { margin-top: 6px; }
.slutt__rad input { width: 18px; height: 18px; margin: 0; accent-color: var(--bama-blue); }
.slutt__rad:has(input:checked) { border-color: var(--bama-blue); background: var(--blue-100, #F5F9FF); }
.slutt__tekst { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.slutt__tekst b { font-family: var(--font-display); font-size: 15px; color: var(--bama-blue); }
.slutt__tekst small { font-size: 12.5px; color: var(--tekst-dempet); }
.slutt__rad--ferdig { cursor: default; background: var(--neutral-200); border-color: var(--neutral-300); }
.slutt__knapper { gap: 10px; margin-top: 18px; }
.slutt__lenke { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 13px; }

/* ---------- Meld sesongslutt (Anders 04.11.2026) ----------
   `_sesongslutt_vindu.html`, i produsentsonen og hos pakkeriene. Et lite vindu: kort info, et kryss per
   produkt som fortsatt er i sesong, det som alt er meldt ferdig med «Angre», og «Bekreft». */
/* `vindu.css` lastes etter app.css og setter `dialog.vindu-dialog` til nesten hele skjermen: to klasser her. */
dialog.vindu-dialog.vindu-dialog--slutt { width: min(640px, calc(100% - 32px)); max-width: min(640px, calc(100% - 32px)); height: fit-content; }
main .slutt { margin: 24px auto; max-width: 640px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.slutt { padding-bottom: 22px; }
.slutt__hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px 10px; }
.slutt__eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-dempet); }
.slutt .slutt__tittel { margin: 2px 0 0; font-family: var(--font-display); font-size: 22px; color: var(--bama-blue); }
.slutt .slutt__lukk { flex: none; background: var(--neutral-200); color: var(--neutral-800); box-shadow: none; }
.slutt__info { margin: 0; padding: 4px 24px 8px; max-width: 62ch; font-size: 14.5px; line-height: 1.5; color: var(--neutral-800); }
.slutt__info--dempet { padding-top: 0; font-size: 13px; color: var(--tekst-dempet); }
.slutt__skjema { margin: 0; }
.slutt__valg { margin: 12px 24px 0; padding: 0; border: 0; min-width: 0; }
.slutt__legend { margin: 0 0 6px; padding: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-dempet); }
.slutt__rad { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--neutral-400); border-radius: var(--radius-sm); background: var(--neutral-100); cursor: pointer; transition: border-color var(--fart-rask) ease, background-color var(--fart-rask) ease; }
.slutt__rad + .slutt__rad { margin-top: 6px; }
.slutt__rad input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--bama-blue); }
.slutt__rad:has(input:checked) { border-color: var(--bama-blue); background: var(--blue-100); }
.slutt__rad:has(input:focus-visible) { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.slutt__tekst { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.slutt__tekst b { font-family: var(--font-display); font-size: 15px; color: var(--bama-blue); }
.slutt__tekst small { font-size: 12.5px; line-height: 1.4; color: var(--tekst-dempet); }
.slutt__merknad { display: block; margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--yellow-tekst); font-size: 12.5px; line-height: 1.45; color: var(--neutral-800); }
.slutt__info--ingress { font-weight: 700; color: var(--bama-blue); }
.slutt__rad--ferdig { cursor: default; border-color: var(--neutral-300); background: var(--neutral-200); }
.slutt__knapper { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding: 16px 24px 0; border-top: 1px solid var(--neutral-300); }
@media (prefers-reduced-motion: reduce) { .slutt__rad { transition: none; } }
.slutt-lenke { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 13px; }