:root {
  /* «Research desk» — institusjonell terminal (Marquee/FactSet), ikke consumer-app.
     Rolig, tett, presis. Lys palett (ingen mørk modus). */
  --bg: #ffffff;
  --bg-soft: #f4f5f6;        /* nøytral kjølig grå — mindre blå enn Material */
  --ramme: #d3d8de;          /* §498: ytre kontrastflate (lys): kjølig grå rundt hvite paneler (1,4:1) */
  --bg-sink: #ebedf0;        /* andre flate: innfelte felt, kodeblokker */
  --line: #e2e4e8;
  --line-strong: #cdd1d7;
  /* §861 (Jens: «sjekk også om det er en blågrå nesten-svart farge som kan erstatte svart
     inne på David … samle de tre til en delt token»): David har ALDRI brukt rent svart noe
     sted (0 treff på #000 i hele fila) — lyst temas --text, mørkt temas --bg og Cynefins
     --cy-ink var tre UAVHENGIG valgte, men nesten identiske kjølige blå-grå nesten-svarte
     (målt i HSL: --text H213/S14/L12, mørk --bg H210/S13/L9 — samme familie; --cy-ink lå av
     en annen grunn på H249, en synlig annen, mer fiolett/indigo kant). --ink er NÅ den delte
     kilden for --text (lyst) og --cy-ink/--cy-text (begge Cynefin-blokker) — samme verdi,
     ikke bare lik. Mørkt temas --bg er BEVISST ikke flyttet hit (egen note der): den må være
     lysere enn --bg-soft/--bg-sink for at §525 sin FLATENIVÅ-lagdeling skal holde seg synlig,
     så den beholder sin egen, litt mørkere verdi i SAMME hue-familie i stedet. */
  --ink: #1b1f24;
  --text: var(--ink);           /* nær-svart, kjølig blå-grå — se --ink over */
  --text-soft: #4a515b;       /* §525: AA (≥ 4,5:1) på alle flater inkl. rammen; var #5b626c */
  --text-faint: #5f6670;      /* §525: AA på bg/bg-soft/bg-sink (5,8/5,3/4,9); var #8a9099 (3,2:1 — under AA). På selve rammen 4,0:1: bruk text-soft der */
  --accent: #1c4a7e;         /* dyp, stille institusjonsblå — lenker/aktiv/fokus */
  --accent-bg: #e9eef4;
  --accent-tekst: #ffffff;   /* §776: tekst PÅ en fylt --accent-knapp (eier-submit/vislaas-knapp) */
  --accent-hover: #163e6a;   /* §776: samme knapp, :hover — mørkere i lyst tema */
  /* §939 (Jens: fargen som viser hvilket selskap/linje som er fokusert "glemmer jeg for hver
     gang jeg logger ut" — fordi den IKKE var en fast farge, bare den valgte linjas EGEN
     --k-*-identitetsfarge gjort litt tykkere, §448/§727). --fokus er IKKE en ny, oppfunnet
     farge: den ER --text — den sterkeste, mest kontrastrike verdien vi allerede har (hvitt
     popper på mørkt, nær-svart på lyst, nøyaktig det Jens selv pekte på), reservert som ÉN
     fast, gjenkjennbar markør for «dette er det jeg ser på nå» — ikke en ny hue å forveksle
     med --accent (interaktiv/på), --up/--down/--warn (styrke, lov 3 i GRENSESNITT_METAFYSIKK.md)
     eller noen --k-*-identitetsfarge. */
  --fokus: var(--text);
  /* §877 (Jens: «bruk fylde som ulike former for gradering»): FYLDE-nivået fantes alt — disse
     fire `-bg`-tokene ER den svake fylde-tonen for hver retning (positiv/negativ/varsel/nøytral-
     vekt), hittil bare brukt på små piller/bokser. Ingen ny, parallell «--fylde-*»-skala —
     samme token, systematisk brukt på HELE elementer (rad-bakgrunn osv.), ikke bare merker.
     §881-oppfølging (Jens, med skjermbilde av §879 sin Funn-rad-fylde i mørkt tema: «finn en
     bedre harmonisk farge»): `--down-bg` selv, tatt rett fra pille-bruken, er KALIBRERT for en
     liten flate — på en HEL rad blir den en markant, varm murstein-rød blokk som bryter med
     sidens kjølige grå-blå register, ikke en svak tone. `--down-bg-svak`/`--up-bg-svak` under
     er EN tone svakere (samme hue, ~12 % blandet inn i `--bg-soft` i stedet for en egen,
     mettet verdi) — for store flater (rader, kort), ikke merker. `--down-bg`/`--up-bg` selv er
     urørt (fortsatt riktig for piller). */
  --up: #166a33;              /* §525: AA på rammen også; var #1a7a3c */
  --up-bg: #e4f1e8;
  --up-bg-svak: #ebefee;      /* §882: lys tema — ~5 % --up blandet i --bg-soft (hvisk, ikke vask) */
  --down: #b02a25;
  --down-bg: #f6e6e5;
  --down-bg-svak: #f0ebeb;    /* §882: lys tema — ~5 % --down-akse blandet i --bg-soft */
  --down-akse: #ad3520;       /* §882 (Jens valgte denne, mot to alternativer): EGEN, tema-uavhengig
                                  rødtone for radens kant (border-left) — ikke --down selv (den
                                  beholdes urørt for piller/tekst andre steder). Samme verdi begge
                                  temaer (ingen ny definisjon i :root[data-tema="mork"] under). */
  --warn: #7a4f00;            /* §525: AA på rammen også; var #8a5a00 */
  --warn-bg: #fbf1dd;

  /* §525: FLATENIVÅER. 0 = siden (--ramme), 1 = panelet (--bg: .innhold, topplinja, grafboksen), 2 = innfelt/tonet felt i panelet (--bg-soft, --bg-sink),
     3 = svevende (menyer, forslag, tooltip). Nivåene bæres av flatens lysstyrke OG av disse skyggene: i lyst tema er løftet = skygge, i mørkt tema er løftet = lysere
     flate + nesten usynlig skygge (skygger syns ikke på svart). Skygge-1 = panel/flis, skygge-2 = svevende. Aldri en hardkodet rgba() i en komponent. */
  --skygge-1: 0 1px 2px rgba(16, 24, 40, .10), 0 1px 3px rgba(16, 24, 40, .06);
  --skygge-2: 0 6px 18px rgba(20, 24, 29, .16), 0 1px 3px rgba(16, 24, 40, .08);

  /* §424 (Utvalg v2): én egen farge pr. kilde i grafen — kurver (David), profiler, lister, festede
     selskaper skal kunne skilles på et blikk. Valgt for kontrast mot hverandre OG mot --accent/--up/--down. */
  --k-teal: #1f9d8f;
  --k-amber: #c27a12;
  --k-rose: #c2417a;
  --k-olive: #7a8f1c;
  --k-sky: #2b8cc4;
  --k-violet: #6c4fc4;
  --k-brown: #8d6e63;
  --k-slate: #4f6d7a;
  --k-orchid: #b25bc9;

  /* bakoverkompat: eldre regler bruker --blue/--blue-bg */
  --blue: var(--accent);
  --blue-bg: var(--accent-bg);

  /* SEB-prinsippet: to fastsatte tekststørrelser (tittel + brødtekst).
     --fs-data er for tall/tickere/datoer (mono). --fs-merke = uppercase-etiketter. */
  --fs-tittel: 15px;
  --fs-brod: 13px;
  --fs-data: 12px;
  --fs-merke: 10.5px;
  --fs-min: 10px;            /* §525: laveste skriftstørrelse for tekst i HTML (var 8–9,5 px på etiketter/chips). SVG-tekst skaleres med tegningen og er unntatt. */

  --r: 6px;                  /* kort, felt */
  --r-liten: 4px;           /* chips, knapper — kantete, ikke piller */
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* §256 (Jens, etter gjentatte enkelt-fiks-runder på løse rader denne
     økten: "Segmentering for Davids fremtid" -> "2 kjør"): David hadde
     ekte, navngitte tokens for farge/radius/type — men ALDRI for
     avstand. 850 rå px-verdier i denne fila spredt over praktisk talt
     hvert helltall 1-30 var den direkte årsaken til minst tre separate
     "løs rad på en bred side"-feil samme uke (§252/§254-oppfølging
     #5/#6). Skalaen under fanger de tallene som FAKTISK dominerer i
     praksis (talt med grep før valget ble tatt, ikke gjettet) — jevne
     2px-steg opp til 16, så bredere hopp (20/24/32) for større luft,
     samme "tette steg small / videre steg large"-prinsipp som
     --flis-skala allerede bruker for type. Bevisst BARE de verdiene som
     faktisk gjentar seg oftest og danner en ekte, jevn progresjon —
     ikke et forsøk på å navngi ethvert helltall som noensinne er brukt
     (se BEGRENSNINGER §256 for hvilke oddetall-verdier som bevisst IKKE
     er del av skalaen ennå, og hvorfor). */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  /* §385: graf-motoren — fast, reservert bredde for det festede
     høyre-panelet (se .hendelsesforlop-overlegg lenger ned). */
  --graf-motor-bredde: 300px;

  /* §787 (Jens: "smoothe effekter når man trykker på knapper, bytter mellom visninger, faner ...
     overbevisende trygg flow"): FØRSTE varighets-tokens i denne fila — før dette var hver av de 5
     @keyframes-effektene sin egen, hardkodede verdi. To varigheter, ingen ny easing-kurve (gjenbruker
     ease/ease-out, samme de 5 gamle effektene alt bruker). --dur = knappetrykk/hover (chrome, raskt).
     --dur-fane = visnings-/fanebytte (en større endring, litt roligere). */
  --dur: 140ms;
  --dur-fane: 160ms;

  /* §843: Cynefin — lås-skjermens egen, FASTE merkevareidentitet (cynefin.no-forsiden David
     etter hvert skal stå skjult bak). Bevisst IKKE teama-reaktiv — samme verdi i begge
     blokkene under, slik en institusjonell forside typisk er fast uansett OS lys/mørk-
     preferanse. Brukes KUN inni .vislaas, aldri andre steder i appen. Snudd fra mørk til lys
     grunntone (Jens: Hawk Infinity-referansen) — «vivid»-tonene (--cy-green/--cy-teal) er for
     prikker/tråd/knapp-fyll, de EGNE «-text»-variantene er mørkere, egne verdier regnet ut for
     å holde WCAG AA mot den lyse bunnen (ikke bare en antakelse — se BEGRENSNINGER §843/§860).
     §860 (Jens: «bytt alle beige farger til de blå-grå vi har på modulen», «erstatte de
     typiske claude fargene … med de lyse vi har på den lyse palletten»): bakgrunn/kant-tonene
     er nå samme blå-grå-familie som --cy-bg-hero i stedet for et varmt beige, og --cy-clay/
     --cy-gold (varme leire-/gull-toner som leste som Claude sin egen merkevarefarge) er ikke
     lenger i bruk noe sted på lås-skjermen — selve TOKEN-definisjonene står urørt (Jens valgte
     clay-rampen selv), bare ERSTATTET på denne ene flata, ikke slettet fra paletten. */
  --cy-bg: #C9D8D6; --cy-bg-hero: #C9D8D6; --cy-bg-alt: #A8C0BD;
  --cy-line: #94B2AE; --cy-line-soft: #B7C6C4;
  --cy-ink: var(--ink);   /* §861: delt token med --text (lyst tema) — samme verdi, ikke bare lik */
  --cy-text: var(--ink); --cy-text-soft: #3F4A49; --cy-text-faint: #5C6665;
  --cy-green: #009353; --cy-green-text: #0B5C38;
  --cy-gold: #8A6A1A;
  --cy-clay: #D19E6C; --cy-clay-text: #573120;
  --cy-teal: #3A7B82; --cy-teal-text: #1D4E53;
  --cy-red-text: #A31020;
}

/* F5: mørkt instrument-tema — eksplisitt toggle (localStorage["david_tema"]).
   Den lyse paletten over er fortsatt basen; dette bytter kun token-verdiene. */
:root[data-tema="mork"] {
  --bg: #14171a;             /* dyp grafitt, ikke svart — samme kjølige blå-grå hue-familie som --ink (§861), men egen, mørkere verdi: må holde seg lysere enn --bg-soft/--bg-sink under (FLATENIVÅ-lagdeling, §525) */
  --bg-soft: #1c2024;
  --bg-sink: #23282d;
  --ramme: #0c0e11;          /* §525: ytre flate UNDER panelene (var #30363c — en lys grå ramme brøt «mørkt hele veien»). Panelene (--bg) er løftet over rammen, som i lyst tema; skillet bæres av kantlinje (--line) */
  --line: #2b3036;
  --line-strong: #3a4046;
  --text: #e6e8ea;
  --text-soft: #a2a9b0;
  --text-faint: #929aa2;      /* §525: AA på alle flater (6,3/5,8/5,2); var #727981 (4,1:1) */
  --accent: #5b9bd8;         /* lysere institusjonsblå — #1c4a7e forsvinner på mørkt */
  --accent-bg: #1b2b3b;
  --accent-tekst: var(--ramme);   /* §776: hvit tekst forsvinner på lys --accent her; mørk tekst gir 6,56:1 */
  --accent-hover: #7bafdf;        /* §776: samme knapp, :hover — LYSERE i mørkt tema (8,32:1 mot --accent-tekst) */
  --fokus: var(--text);   /* §939 — se :root sin begrunnelse */
  --up: #45b968;
  --up-bg: #16301f;
  --up-bg-svak: #1e2827;      /* §882: mørkt tema — ~5 % --up blandet i --bg-soft (hvisk, ikke vask) */
  --down: #e06b64;
  --down-bg: #3a1e1c;
  --down-bg-svak: #232124;    /* §882: mørkt tema — ~5 % --down-akse blandet i --bg-soft */
  --warn: #d69a3c;
  --warn-bg: #33280f;
  --skygge-1: 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 2px rgba(0, 0, 0, .45);
  --skygge-2: 0 8px 24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);

  /* §424: lysere varianter av kilde-fargene mot mørk bakgrunn */
  --k-teal: #3fc4b4; --k-amber: #e0a03a; --k-rose: #e0679d; --k-olive: #a4bb3d; --k-sky: #5eb3e6;
  --k-violet: #9a85ec; --k-brown: #b99a8c; --k-slate: #8fb0be; --k-orchid: #d98aef;

  /* §843: Cynefin — samme verdi som i lyst tema, med vilje (se begrunnelsen der). */
  --cy-bg: #C9D8D6; --cy-bg-hero: #C9D8D6; --cy-bg-alt: #A8C0BD;
  --cy-line: #94B2AE; --cy-line-soft: #B7C6C4;
  --cy-ink: var(--ink);
  --cy-text: var(--ink); --cy-text-soft: #3F4A49; --cy-text-faint: #5C6665;
  --cy-green: #009353; --cy-green-text: #0B5C38;
  --cy-gold: #8A6A1A;
  --cy-clay: #D19E6C; --cy-clay-text: #573120;
  --cy-teal: #3A7B82; --cy-teal-text: #1D4E53;
  --cy-red-text: #A31020;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* §309/§311/§315-oppfølging (Jens, mørkt tema: "det er en [lys stripe]
   igjen mellom selskapene og selskapsinfoen som kommer ved browsing"):
   §254 fant nøyaktig samme bug for .modul-nav alene — en vanlig (ikke-
   overlay) OS-nettleser tegner scrollbaren sin i en fast, ALDRI tema-
   klarert grå/hvit, uansett --bg. De to nye inline-utvidelsenes
   scrollbare kolonner (.vakt-liste-split/.vakt-sak-split/.arbeid-ko/
   .arbeid-sak) hadde nøyaktig samme, uløste hull — i stedet for å
   punktfikse enda flere klasser, gjøres §254 sin løsning global (`*` for
   Chrome/Edge/Safari sin ::-webkit-scrollbar, arvet scrollbar-width/
   -color for Firefox) — treffer disse FIRE og enhver annen scrollbar i
   huset, nå og framover. .modul-nav sin egen, identiske regel er ikke
   fjernet (harmløs duplikat, ikke i konflikt). */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

/* slide-over-panelet (Spør David) ligger off-screen med translateX(100%) —
   hindre at det utvider dokumentets scroll-bredde */
html {
  overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}

/* §513: lange ord, koder og URL-er i innhold (AI-tekst, børsmeldinger, selskapsnavn) skal BRYTES i stedet for å gli ut av boksen. `overflow-wrap: break-word` på roten er arvet av alt og
   endrer ikke min-content (kan ikke få flex-/grid-barn til å skrumpe til én bokstav). Grid-spor for tekst er `minmax(0, 1fr)`, ikke bare `1fr` (som vokser med det lengste ordet og
   sprenger boksen — det Jens så i profilboksen: «tvangsinnløsning/avnotering»). Sjekk med scripts/overflow_revisjon.js (sprengtBoks). */
body {
  background: var(--bg);
  color: var(--text);
  font-family: "MadeOuterRegular", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  font-size: var(--fs-brod);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* §513 */
}

/* tall, tickere, datoer, deltaer — terminal-mono */
.bro-linje-v, .pos-price, .pos-price .chg, .gd-verdi, .signaltall,
.case-tag, .kort-tittel, .bro-fokus-merke, .sak-rang-nivaa,
.innsider-dato, .innsider-detalj, .frist, .flate-nokkel,
.selskap-lenke, .status-chip, .land-merke,
.styrke-rang { font-variant-numeric: tabular-nums; }
.selskap-lenke, .pos-price, .bro-linje-v, .gd-verdi.tall, .frist,
.innsider-dato { font-family: var(--mono); }

/* ---------- delte grensesnitt-primitiver (Etappe 3, komponenter.js) ----------
   Side-agnostiske byggeklosser fra GRENSESNITT_MANDAT.md §7 sin kontrakt —
   plassert her, ikke inni en enkelt sides seksjon, siden ingen av dem eier én
   flate. */
.alder-merke { font-size: var(--fs-merke); color: var(--text-faint); }
.alder-merke.gammel { color: var(--warn); }

.regnestykke { margin-top: var(--space-10); }
.regnestykke > summary {
  cursor: pointer; font-weight: 600; color: var(--text-soft);
  padding: var(--space-4) 0; list-style: none;
}
.regnestykke > summary::-webkit-details-marker { display: none; }
.regnestykke > summary::before { content: "▸ "; color: var(--text-faint); }
.regnestykke[open] > summary::before { content: "▾ "; }
.regnestykke-tabell {
  display: grid; grid-template-columns: auto auto; gap: var(--space-4) var(--space-10);
  padding: var(--space-6) 0;
}
.regnestykke-k { color: var(--text-soft); }
.regnestykke-v { font-family: var(--mono); text-align: right; }

.handlingsknapp {
  border: none; background: none; padding: 0; margin: 0; font: inherit;
  color: var(--accent); cursor: pointer; text-decoration: underline dotted;
}
.handlingsknapp:hover { color: var(--text); }

/* ---------- topbar ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16); flex-wrap: wrap;
  padding: var(--space-12) var(--space-32);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: var(--space-10);
  text-decoration: none; color: inherit;
}
.brand:hover h1 { color: var(--accent); }
/* §867 (Jens: «Vil gjerne ha den logoen forran David og Bruke den fonten vi har funnet i dag»):
   Cynefin-merket (samme ring+takk+stjerne-geometri som .cy-mark/favicon.svg) foran ordet
   «David», og samme skrift (MadeOuterBlack, @font-face lenger ned i fila — allerede lastet
   globalt, ikke bare inni .vislaas). Egne klassenavn (brand-mark*, ikke cy-mark*): merket her
   skal følge Davids EGNE, tema-reaktive farger (currentColor -> --text), ikke Cynefins faste
   palett (§843 — Cynefins farger er bevisst IKKE tema-reaktive, men dette merket skal være det). */
/* §961 (Jens: «burde være sånn med David-versjonen på innsiden også»): målt direkte (canvas
   measureText, MadeOuterBlack 18px) -- «David» sin synlige høyde er 15px, merket sto på 20px.
   Satt til 15px, samme prinsipp som .cy-mark over. */
.brand-mark { width: 15px; height: 15px; flex: none; color: var(--text); }
.brand-mark-ink { fill: currentColor; stroke: currentColor; }
.brand-mark-ring { stroke: currentColor; }
.brand h1 {
  font-family: "MadeOuterBlack", sans-serif; font-size: 18px; font-weight: normal;
}
.topbar-hoyre { display: flex; align-items: center; gap: var(--space-14); flex-wrap: wrap; }
.status-strip {
  font-size: var(--fs-merke); color: var(--text-soft);
  display: flex; gap: var(--space-16); flex-wrap: wrap;
  text-transform: uppercase; letter-spacing: .05em;
}
.status-strip b { color: var(--text); font-weight: 600; font-family: var(--mono); letter-spacing: 0; }
/* §784 (steg 2/6): driftsmeteret — én tynn tick pr. pipeline-steg, «litt Casio, saklig».
   Erstatter idag-sist-mottatt/idag-forsyning/idag-maskin (tre tekst-spenn, §211/§275/§299). */
.driftsmeter { display: inline-flex; align-items: center; gap: 1px; text-decoration: none; padding: 0 var(--space-2); }
.driftsmeter-tick { width: 3px; height: 11px; border-radius: 1px; background: var(--line-strong); flex: none; }
.driftsmeter-ok { background: var(--up); }
.driftsmeter-sen { background: var(--warn); }
.driftsmeter-kritisk { background: var(--down); }
.driftsmeter-ukjent { background: var(--line-strong); }
/* pauset overstyrer sen/kritisk-fargen på pipeline-radene — høyere
   spesifisitet (3 klasser) enn .puls-sen/.puls-kritisk (2 klasser) */
.pipeline-rad.puls-pauset .pipeline-prikk { background: var(--text-faint); }
.pipeline-rad.puls-pauset .pipeline-sist { color: var(--text-faint); }
/* §817 (Jens: "emoji for manual, innstillinger og login er heller ikke optimalt... tekst basert
   uniform også på denne siden"): tilbake til tekst (§786 sin emoji-begrunnelse — "ikke lenger
   uppercase/letter-spacing, var der for en flerords-frase" — reversert), samme
   uppercase/letter-spacing/--fs-merke-oppskrift som .hf-flate-bytte a, for ÉN uniform tekststil på
   tvers av hovedmeny-fanene og disse verktøyknappene. */
.laas {
  font: inherit; font-size: var(--fs-merke); line-height: 1;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-6) var(--space-10); cursor: pointer;
  transition: transform var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, background-color var(--dur) ease;   /* §787 */
}
.laas:hover { border-color: var(--text-faint); }
.laas[hidden] { display: none; }
body.redigering .laas { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.tidsreise-dato {
  font: inherit; font-size: var(--fs-merke); font-family: var(--mono);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-6) var(--space-8); cursor: pointer; min-width: 116px;
}
body.tidsreise .tidsreise-dato { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
body.tidsreise .laas { opacity: .4; pointer-events: none; }
.loggut { color: var(--down); border-color: var(--down-bg); }
.loggut:hover { background: var(--down-bg); }
.loggut[hidden] { display: none; }
.topknapp {
  font: inherit; font-size: var(--fs-merke); line-height: 1;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-6) var(--space-10); cursor: pointer;
  transition: transform var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, background-color var(--dur) ease;   /* §787 */
}
.topknapp:hover { border-color: var(--accent); color: var(--accent); }
/* §787 (Jens: "smoothe effekter når man trykker på knapper ... overbevisende trygg flow"): ETT
   knappetrykk-uttrykk for all navigasjons-"chrome" (ikke datavisualisering — driftsmeterets ticks,
   pipeline-prikker osv. skal fortsatt hoppe momentant, det ER meningen med dem). Bevisst bare
   transform, aldri et fargeskifte her — selve fargen/`:hover` sier allerede hva som skjer. */
.topknapp:active, .hf-flate-bytte a:active, .innstillinger-item:active, .laas:active,
.kommando-tast:active, .hf-mini-knapp:active, .kmd-forslag:active, .kmd-spor-knapp:active {
  transform: scale(.96);
}
@media (prefers-reduced-motion: reduce) {
  .topknapp, .hf-flate-bytte a, .innstillinger-item, .laas, .kommando-tast, .hf-mini-knapp,
  .kmd-forslag, .kmd-spor-knapp, .kommando-treff { transition: none; }
  .topknapp:active, .hf-flate-bytte a:active, .innstillinger-item:active, .laas:active,
  .kommando-tast:active, .hf-mini-knapp:active, .kmd-forslag:active, .kmd-spor-knapp:active { transform: none; }
}
/* §286: fire tidligere separate knapper (📖/🔄/🔊/⚙) samlet i ETT
   segmentert kommandopanel — .lesopp-knapp er delt med .dybde-hode-topp
   andre steder, så border-fjerningen skopes strengt til denne wrapperen. */
.topbar-verktoy {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  /* IKKE overflow:hidden — ville klippet innstillinger-nedtrekket, som
     bevisst popper ut UNDER selve panelet (samme klippe-fallgruve §221
     alt løste én gang for denne nedtrekksmenyen). Avrundingen løses i
     stedet på selve første/siste synlige segment under. */
}
.topbar-verktoy > .topknapp,
.topbar-verktoy > .innstillinger-wrap > .topknapp {
  border: none; border-radius: 0; background: transparent;
}
.topbar-verktoy > :not(:last-child) { border-right: 1px solid var(--line); }
.topbar-verktoy > :first-child { border-top-left-radius: var(--r-liten); border-bottom-left-radius: var(--r-liten); }
.topbar-verktoy > .innstillinger-wrap > .topknapp {
  border-top-right-radius: var(--r-liten); border-bottom-right-radius: var(--r-liten);
}
.sesjonsvarsel { background: var(--warn-bg); color: var(--warn); border-left: 3px solid var(--warn); }

/* F5: «les opp» — deterministisk opplesning */
.lesopp-boks {
  display: flex; align-items: flex-start; gap: var(--space-12);
  max-width: 1400px; margin: var(--space-8) auto 0; padding: var(--space-12) var(--space-16);
  background: var(--accent-bg); border-left: 3px solid var(--accent);
  border-radius: var(--r); font-size: var(--fs-brod); color: var(--text);
}
.lesopp-boks.skjult { display: none; }
.lesopp-t { flex: 1; line-height: 1.5; }
.lesopp-x {
  flex-shrink: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-faint); font-size: 13px; line-height: 1; padding: var(--space-2) var(--space-4);
}
.lesopp-x:hover { color: var(--text); }
.lesopp-knapp {
  font: inherit; font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft); padding: var(--space-4) var(--space-10); cursor: pointer;
}
.lesopp-knapp:hover { border-color: var(--accent); color: var(--accent); }
.dybde-hode-topp .lesopp-knapp { flex-shrink: 0; }

.sak-eksporter {
  font: inherit; font-size: var(--fs-merke); border: 1px solid var(--line-strong);
  border-radius: var(--r-liten); background: var(--bg); color: var(--text-soft);
  padding: var(--space-4) var(--space-10); cursor: pointer;
}
.sak-eksporter:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- fanebryteren + søk (§783: flyttet inn i .topbar, søk er 6. fane) ---------- */
.hf-fane-wrap { position: relative; display: inline-flex; margin-left: var(--space-24); }
/* §809 (Jens: "farge søk-knappen i en ytterligere kontrastfarge... vil at det skal være litt
   synlig" — særskilt mye brukt): egen hviletilstand-farge, bevisst IKKE --accent (den betyr
   «valgt» på de andre fanene) — --k-amber skiller «ofte brukt» fra «aktiv/åpen» tydelig.
   `.hf-flate-bytte a.sok-fane` (ikke bare `.sok-fane`) — spesifisiteten må slå den generelle
   `.hf-flate-bytte a` fargeregelen lenger ned, som ellers vinner (begge class+element vs. bare
   class). Live-verifisering avdekket DETTE i to runder: først at bare `.sok-fane` tapte og aldri
   viste amber i det hele tatt, så at den fiksede (mer spesifikke) regelen i sin tur slo IHJEL
   åpen/aktiv-fargen under — derfor må BEGGE regler bruke samme `.hf-flate-bytte a`-prefiks, slik
   at åpen/aktiv (3 klasser/attributter) fortsatt klart overgår hvile (2 klasser) på samme grunnlag
   som hvile overgår den generelle fanefargen. */
.sok-fane { cursor: pointer; }
.hf-flate-bytte a.sok-fane { color: var(--k-amber); }
.hf-flate-bytte a.sok-fane.aktiv, .hf-flate-bytte a.sok-fane[aria-expanded="true"] { background: var(--accent-bg); color: var(--accent); }
/* §812 (Jens: "teksten i søk-dropdownen kommer utenfor browser vinduet... ser ikke starten på
   setningene"): `.hf-fane-wrap` sitter rett ved siden av logoen, nær venstre kant av topbaren —
   et `right: 0`-anker der dytter en 460px bred boks' VENSTRE kant forbi vinduets egen venstre kant
   (målt live: -48px). `left: 0` gir boksen all plassen resten av vinduet til høyre i stedet, som
   det nesten alltid finnes nok av. */
.sok-meny {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1045;
  min-width: min(460px, 92vw);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--skygge-2); padding: var(--space-8);   /* §525 */
}
/* §69-fallgruven (se CLAUDE.md): [hidden] alene taper mot en display-regel med lik spesifisitet */
.sok-meny[hidden] { display: none; }

/* ---------- kommandolinje (søk selskap · spør David) ---------- */
.kommando {
  display: flex; align-items: stretch; position: relative; width: 100%;
}
.topbar { justify-content: flex-start; flex-wrap: nowrap; }
.topbar-hoyre { margin-left: auto; flex-wrap: nowrap; }
.status-strip { flex-wrap: nowrap; white-space: nowrap; }
/* §299-oppfølging (Jens: "noe med spacingen oppe ved dato og de
   administrerende innstillingene"): §299 la til #idag-sist-mottatt i
   .status-strip (~120px inkl. gap) uten å regne på breddebudsjettet
   denne uendrede nowrap-grensen (900px) hvilte på — mellom ca. 900 og
   1150px skjøv den nye spanen .laas/.topbar-verktoy delvis utenfor selve
   .topbar, bekreftet via getBoundingClientRect() (.topbar-hoyre sin
   right-kant stakk forbi .topbar sin). Grensen flyttet til 1150px —
   samme wrap-fallback som alt fantes, bare startet tidligere. */
@media (max-width: 1150px) {
  .topbar { flex-wrap: wrap; }
  .topbar-hoyre { flex-wrap: wrap; }
  .status-strip { white-space: normal; }
}
.kommando-felt {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten) 0 0 var(--r-liten);
  background: var(--bg-soft); color: var(--text);
  padding: var(--space-6) var(--space-12);
}
.kommando-felt::placeholder { color: var(--text-faint); }
.kommando-felt:focus-visible {
  outline: none; border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.kommando-tast {
  font: inherit; font-size: var(--fs-brod); line-height: 1;
  border: 1px solid var(--line-strong); border-left: 0;
  border-radius: 0 var(--r-liten) var(--r-liten) 0;
  background: var(--bg-soft); color: var(--text-soft);
  padding: 0 var(--space-12); cursor: pointer;
  transition: transform var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, background-color var(--dur) ease;   /* §787 */
}
.kommando-tast:hover { color: var(--accent); border-color: var(--accent); }
/* §927-oppfølging (Jens: "se litt på plasseringer for tjenesten så den ikke drukner helt") —
   «Spør David» fantes KUN som plassholdertekst i det sammenslåtte feltet (§83), usynlig uten
   å allerede vite det. En egen, liten knapp mellom feltet og send-knappen — samme felt,
   ingen ny arkitektur, bare en synlig vei inn. Klikk fokuserer feltet (samme rute som å
   trykke i det selv — eksisterende focus-lytter åpner David-konsollen). */
.kommando-spor {
  font: inherit; font-size: var(--fs-brod); font-weight: 600; line-height: 1;
  border: 1px solid var(--line-strong); border-left: 0; border-right: 0; border-radius: 0;
  background: var(--bg-soft); color: var(--text-soft);
  padding: 0 var(--space-10); cursor: pointer;
  transition: transform var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, background-color var(--dur) ease;
}
.kommando-spor:hover { color: var(--accent); border-color: var(--accent); }
.kommando-forslag {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1045;
  min-width: min(440px, 88vw);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--skygge-2);   /* §525 */
  overflow: hidden auto; max-height: min(72vh, 560px);
}
.kommando-forslag[hidden] { display: none; }
.kommando-treff {
  display: flex; align-items: baseline; gap: var(--space-10);
  padding: var(--space-8) var(--space-12); cursor: pointer; font-size: var(--fs-brod);
  transition: background-color var(--dur) ease;   /* §787 */
}
.kommando-treff:hover, .kommando-treff.aktiv { background: var(--accent-bg); }
.kommando-tick { font-family: var(--mono); font-weight: 600; }
.kommando-navn { color: var(--text-soft); font-size: var(--fs-merke); }
.kommando-pris { margin-left: auto; color: var(--text-soft); font-family: var(--mono); font-size: var(--fs-merke); }   /* §937 */

/* §84: David-konsollen i kommando-nedtrekket (forslag + spørsmålslogg) */
.kmd-tittel {
  font-size: var(--fs-merke); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
  padding: var(--space-10) var(--space-12) var(--space-4); border-top: 1px solid var(--line);
}
.kmd-tittel:first-child { border-top: 0; }
.kmd-hint {
  padding: var(--space-10) var(--space-12); font-size: var(--fs-merke); color: var(--text-soft); line-height: 1.4;
}
.kmd-forslag {
  display: flex; flex-direction: column; gap: var(--space-2); width: 100%; text-align: left;
  padding: var(--space-8) var(--space-12); background: none; border: 0; cursor: pointer; font: inherit;
  transition: transform var(--dur) ease, background-color var(--dur) ease;   /* §787 */
}
.kmd-forslag:hover { background: var(--accent-bg); }
.kmd-forslag-q { font-size: var(--fs-brod); color: var(--text); line-height: 1.3; }
.kmd-forslag-hv { font-size: var(--fs-merke); color: var(--text-faint); }
.kmd-spor {
  padding: var(--space-8) var(--space-12); border-top: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
}
.kmd-spor.status-besvart { border-left-color: var(--up); }
.kmd-spor.status-feil { border-left-color: var(--down); }
.kmd-spor-q { font-size: var(--fs-brod); font-weight: 500; margin-bottom: var(--space-4); }
.kmd-spor-meta { font-size: var(--fs-merke); color: var(--text-soft); line-height: 1.4; }
.kmd-spor-knapper { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; margin-top: var(--space-8); }
.kmd-spor-knapp {
  font: inherit; font-size: var(--fs-merke);
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-4) var(--space-10); cursor: pointer;
  transition: transform var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;   /* §787 */
}
.kmd-spor-knapp:hover { border-color: var(--accent); color: var(--text); }
.kmd-spor-knapp.fare:hover { border-color: var(--down); color: var(--down); }
.kmd-hint-knapp {
  display: block; width: 100%; text-align: left;
  font-family: inherit; font-size: var(--fs-merke);
  background: none; border: 0; cursor: pointer;
}
.kmd-hint-knapp:hover { color: var(--accent); }
.kmd-spor .spor-svar { margin-top: var(--space-8); }
/* §542: nyhetsstrøm i søkevinduets tomrom */
.kmd-nyhet { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-12); color: inherit; text-decoration: none; min-width: 0; }
.kmd-nyhet:hover { background: var(--accent-bg); }
.kmd-nyhet-topp { display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.kmd-nyhet-tick { font-family: var(--mono); font-weight: 600; font-size: var(--fs-brod); }
.kmd-nyhet-tid { margin-left: auto; font-size: var(--fs-merke); color: var(--text-faint); white-space: nowrap; }
.kmd-nyhet-tittel { font-size: var(--fs-merke); color: var(--text-soft); line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.kmd-nyhet-alle { text-decoration: none; }
@media (max-width: 760px) {
  .hf-fane-wrap { order: 3; flex-basis: 100%; margin: var(--space-8) 0 0; }
  /* §809: Analyse fjernet fra hovedmenyen (6→5 faner) — §783 sitt wrap-fallback (segmentert pill,
     se BEGRENSNINGER) var der FORDI 6 faner stakk forbi 375px i én ubrutt pill. Live-målt i
     nettleseren ved 375px med 5 faner: alle fem sitter på samme rad selv MED fallbacket aktivt
     (samme `top` for alle lenker, pillen 317px bred mot 375px viewport) — fallbacket trengs ikke
     lenger, fjernet. Den opprinnelige, ubrutte pillen (base-regelen over) gjelder igjen. */
  .sok-meny { left: 0; right: 0; min-width: 0; }
  .status-strip { display: none; }          /* dato/fulgt/klima ute av vei på mobil */
  .topbar-hoyre { gap: var(--space-8); }
  /* §817: ingen egen font-størrelse her lenger — .topknapp/.laas sin FELLES, uniforme
     --fs-merke-størrelse (samme som .hf-flate-bytte a) gjelder nå likt på mobil som på desktop;
     det var nettopp en slik uensartethet (14px/--fs-min mot --fs-merke andre steder) Jens ba om å
     sjekke for. Bare paddingen strammes inn for å spare plass. */
  .topknapp { padding: var(--space-4) var(--space-8); }
  .laas { padding: var(--space-6) var(--space-8); }
}

/* ---------- hendelsesforløpet / graf-banner (§373, kø-punkt 2b) ----------
   §385: høyrepanel. §391: skjult som default (i veien). §393: ekte pris
   slått sammen med hendelsene. §397 (plan-filen
   terminal-skjelett-graf-topp.md, Jens: "det er ikke sånn jeg vil se
   det... bør det ligge øverst? Nærmest som et fast visningsbilde"):
   RAMMEN flyttet, ikke innholdet — fra en `position:fixed`-sibling til
   en FAST seksjon ØVERST i `.innhold`, i normal dokumentflyt, OVER
   .vis-vekslingen (se index.html). Dekket/Terminal sine EGNE, dynamiske
   høyde-målinger (`settDekkHoyde()`/`settBaksidenHoyde()`,
   `getBoundingClientRect().top`) krymper korrekt av seg selv når denne
   nå legger beslag på plass FØR dem — ingen endring trengt i dem.
   `--topbar-h`-målingen (§385) er IKKE lenger nødvendig (normal
   dokumentflyt stables automatisk under .topbar) — fjernet sammen med
   dette, se settTopbarHoyde() (hendelsesforlop.js). Skjules fortsatt
   via .skjult (egen, eksplisitt regel — samme §69/§234/§237-lærdom) —
   ⛓-knappen er nå "vis/skjul selve grafen" i stedet for et sidepanel. */
.hendelsesforlop-overlegg {
  display: flex; flex-direction: column;
  background: var(--bg); padding: var(--space-14);
  border-bottom: 1px solid var(--line);
  /* §426: INGEN egen rulling i vanlig visning (den skjøv topprad og kontroller ut av syne og gjorde det
     umulig å komme seg ut) — banneret har naturlig høyde, og grafen kan skjules i verktøylinja. */
}
.hendelsesforlop-overlegg.skjult { display: none; }
/* §397-oppfølging (Jens, samme kveld: "kan man ha delt skjerm, eller
   full skjerm av de to delene"): delt er CSS-standarden over (46vh,
   Terminal/Dekket synlig under uten scroll). Full lar grafen dominere —
   Terminal/Dekket forblir under, nås ved å scrolle ned, ikke fjernet. */
.hendelsesforlop-overlegg.full { max-height: 86vh; overflow-y: auto; }
/* §441: i arbeidsflata (body.arbeidsflate, skjermmodi.js) er det rutenettet — ikke max-height — som bestemmer bannerets størrelse. */
body.arbeidsflate .hendelsesforlop-overlegg.full { max-height: none; overflow: hidden; }
/* §414: Terminal (ingen Dekk-gulv) fikk 46vh, men grafen + vindusknapper + legende
   trenger ~440 px — på en 970 px høy nettleserflate (46vh = 446 px) ble grafen
   klippet og banneret fikk en egen scrollbar. Gulv på 460 px, tak på 56vh. */
/* §426: fast verktøylinje over banneret — alltid synlig, også når grafen er skjult */
.utvalg-verktoy {
  display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap;
  padding: var(--space-8) var(--space-14); border-bottom: 1px solid var(--line);
}
.utvalg-verktoy:has(~ #hendelsesforlop.skjult) #hendelsesforlop-full-knapp { display: none; }
body.vis-laast .utvalg-verktoy { display: none; }
/* skjult graf: ingen kurve-/festet-grupper eller listelinje-chip som peker på en graf man ikke ser */
#hendelsesforlop.skjult ~ .utvalg-panel .utvalg-gruppe--kurver,
#hendelsesforlop.skjult ~ .utvalg-panel .utvalg-gruppe--festet,
#hendelsesforlop.skjult ~ .utvalg-panel .utvalg-liste-chip { display: none; }
.baksiden-pin-detalj { align-self: flex-start; width: auto; }
.land-aktiv-chip { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.land-aktiv-chip[hidden] { display: none; }
/* §419: legende-chips, liste-faner og filtre bor nå i ÉTT kontrollpanel (#utvalg-panel)
   rett under grafen — ikke tre spredte flater. Rad 1 (kurver) følger banneret (skjules
   når grafen er lukket); rad 2–3 (lister, filtre) hører til Terminal og vises bare der. */
.utvalg-panel {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-8) var(--space-14) var(--space-10);
  border-bottom: 1px solid var(--line);
}
.utvalg-panel .vakt-linse, .utvalg-panel .hyp-stor-legende, .utvalg-panel .landfilter,
.utvalg-panel .baksiden-filterrad { margin: 0; }
.utvalg-kurver:empty, .utvalg-lister:empty, .utvalg-filtre:empty { display: none; }
/* §424 A: tre MERKEDE grupper — etikett til venstre, innhold til høyre */
.utvalg-gruppe { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: var(--space-8); }
.utvalg-etikett {
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint);
  padding-top: var(--space-6); cursor: help;
}
.utvalg-gruppe:has(.utvalg-kurver:empty), .utvalg-gruppe:has(.utvalg-festet:empty) { display: none; }
.utvalg-lister-boks { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.utvalg-liste-chip:empty { display: none; }
.utvalg-festet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-10); }
body:not([data-flate="baksiden"]) .utvalg-gruppe--lister { display: none; }
/* chip-type: tydelig forskjell på hva chipen ER */
.utvalg-type-profil { border-style: dashed; }
.utvalg-liste-chip-linje { border-style: dotted; border-color: var(--k-violet); }
.utvalg-type-pin { border-radius: 999px; }
.utvalg-alder {
  font-size: var(--fs-merke); color: var(--warn); background: var(--warn-bg);
  padding: 0 var(--space-4); border-radius: var(--r-liten); white-space: nowrap;
}
/* kilde-header over listen: farge = linja i grafen */
.baksiden-kilde-hode {
  --kilde-farge: var(--k-violet);
  margin: 0 0 var(--space-10); padding: var(--space-6) var(--space-10);
  border-left: 4px solid var(--kilde-farge); background: var(--bg-soft); border-radius: 0 var(--r-liten) var(--r-liten) 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* §642: «Du er her» og «Om denne visningen» inni kilde-headeren — fargestripa til venstre er allerede linja i grafen, så barens egen stripe og bakgrunn fjernes */
.baksiden-kilde-hode .du-er-her { margin: 0; padding: 0; border: none; background: none; }
.baksiden-kilde-hode .visning-om { margin: 0; }
.baksiden-kilde-hode .visning-om[open] { max-height: 40vh; overflow-y: auto; }
/* §798: hurtigvelgeren — bytt liste rett her, samme side som selve listen (var kun i #utvalg-panel
   under grafen, på motsatt side av skjermen på brede vinduer — Jens: «sliter med å finne vaktlista på
   lister... noe til venstre, noe til høyre»). Samme pille-stil som resten av huset (.vakt-linse-kn). */
.baksiden-hurtigvelger { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-6); }
.baksiden-hurtigvelger-flere { color: var(--text-soft); }
.baksiden-kilde-linje { font-size: var(--fs-merke); color: var(--kilde-farge); }
.baksiden-kilde-studie { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-14); margin-top: var(--space-4); }
.baksiden-kilde-studie .baksiden-sorter { margin-left: auto; }
.kilde-hyp-stor-linje-portefolje { --kilde-farge: var(--accent); }
.kilde-hyp-stor-linje-gravitasjon { --kilde-farge: var(--up); }
.kilde-hyp-stor-linje-folging { --kilde-farge: var(--down); }
.kilde-hyp-stor-linje-bronnen { --kilde-farge: var(--text-soft); }
.kilde-sim-stor-linje-a { --kilde-farge: var(--k-teal); }
.kilde-sim-stor-linje-b { --kilde-farge: var(--k-amber); }
.kilde-sim-stor-linje-c { --kilde-farge: var(--k-rose); }
.kilde-sim-stor-linje-d { --kilde-farge: var(--k-olive); }
.kilde-sim-stor-linje-e { --kilde-farge: var(--k-sky); }
.kilde-liste-stor-linje { --kilde-farge: var(--k-violet); }
.utvalg-filtre { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8) var(--space-14); }
body:not([data-flate="baksiden"]) .utvalg-lister,
body:not([data-flate="baksiden"]) .utvalg-filtre { display: none; }
#hendelsesforlop.skjult ~ .utvalg-panel .utvalg-kurver { display: none; }
body:not([data-flate="baksiden"]) .utvalg-panel:not(:has(.utvalg-kurver:not(:empty))) { display: none; }
body.vis-laast .utvalg-panel { display: none; }
#hendelsesforlop:not(.skjult) { border-bottom: 0; }
.hf-flate-bytte { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-liten); overflow: hidden; }
.hf-flate-bytte a {
  font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); color: var(--text-soft);
  text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
  display: inline-block; transition: transform var(--dur) ease, color var(--dur) ease;   /* §787 */
}
.hf-flate-bytte a + a { border-left: 1px solid var(--line-strong); }
.hf-flate-bytte a:hover { color: var(--accent); }
body[data-flate="dybde"][data-dybde="handel"] .hf-flate-bytte a[data-bytte="handel"],
body[data-flate="baksiden"] .hf-flate-bytte a[data-bytte="baksiden"],
body[data-flate="dekk"] .hf-flate-bytte a[data-bytte="dekk"],
/* §809: Analyse er baksiden av Dashbord, ikke lenger en egen fane — Dashbord-fanen lyser derfor nå
   for ALT som før hørte til Analyse (selve mini-dashbordet OG alle dens dybde-medlemsmoduler), i
   tillegg til sin egen (over). Samme mønster som Handel/Drift under, bare overtatt fra §780. */
body[data-flate="analyse"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="radar"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="fangst"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="banen"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="utsalget"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="loftestanga"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="nyheter"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="sammenlign"] .hf-flate-bytte a[data-bytte="dekk"],
body[data-flate="dybde"][data-dybde="likhetsok"] .hf-flate-bytte a[data-bytte="dekk"]
  { background: var(--accent-bg); color: var(--accent); }
/* §816: Drift-fanen fjernet fra hovedmenyen (nås nå via ⚙-menyen) — de fire
   `[data-bytte="drift"]`-betingelsene som lyste opp fanen (styring/dommekraft/spektrogram) er
   dermed borte. Selve `#/drift`-ruta og dens dybde-undermoduler lever videre urørt (samme
   "behold ruta, fjern bare fanen"-mønster som §809 brukte for Analyse) — det er bare ingen
   hovedmeny-fane igjen å lyse opp for dem. */
/* valgt kurve: uthevet linje, de andre dempet (ikke skjult) */
.flergraf-utheves { stroke-width: 3; }
.flergraf-dempet { opacity: .14; }
/* §448: navnet på den uthevede linja + «Valgt linje»-pille + solo-knapp */
.flergraf-svg .flergraf-linje-navn { font: 600 11px var(--mono); fill: var(--text); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.utvalg-valgt-pille { display: none; align-items: center; gap: var(--space-4); font-size: var(--fs-merke); color: var(--accent);
  border: 1px solid var(--accent); background: var(--accent-bg); border-radius: var(--r-liten); padding: 1px var(--space-8); }
.utvalg-valgt-pille.paa { display: inline-flex; }
.utvalg-valgt-x { appearance: none; border: none; background: none; color: inherit; cursor: pointer; padding: 0 var(--space-2); line-height: 1; }
/* §946: alltid synlig farge+navn-nøkkel for grafens linjer — se app.js sin begrunnelse der. */
.flergraf-nokkel { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); margin: var(--space-6) 0 0; }
.flergraf-nokkel-rad { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--fs-merke); color: var(--text-soft); }
.flergraf-nokkel-rad.utheves { color: var(--text); font-weight: 600; }
.utvalg-visning { font-size: var(--fs-merke); }
.hyp-stor-leg.valgt { border-color: var(--accent); background: var(--accent-bg); }
/* §421: festede selskaper i samme graf, feste-knapper i rader, felt for å feste en ticker */
.hendelsesforlop-fane[hidden] { display: none; }
.hyp-modus { font-size: var(--fs-merke); color: var(--accent); align-self: center; margin-left: var(--space-8); }
.hyp-modus[hidden] { display: none; }
.utvalg-legg-til { display: inline-flex; align-items: center; }
.utvalg-legg-til .eier-input { width: 150px; font-size: var(--fs-merke); padding: var(--space-4) var(--space-8); }
.baksiden-pin {
  flex: 0 0 auto; font: inherit; font-size: var(--fs-merke); line-height: 1; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--r-liten);
  padding: var(--space-2) var(--space-4); margin-left: var(--space-6); opacity: .35; filter: grayscale(1);
}
.baksiden-pin--hoyre { margin-left: auto; }
.baksiden-pin:hover { opacity: .8; filter: none; border-color: var(--line-strong); }
.baksiden-pin.paa { opacity: 1; filter: none; background: var(--accent-bg); border-color: var(--accent); }
.baksiden-pin-detalj.paa { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.hyp-stor-leg-prikk { cursor: pointer; }
.hyp-info { margin-left: auto; font-size: var(--fs-merke); color: var(--text-faint); cursor: help; align-self: center; }
.hyp-verktoy .hyp-stor-dyplenke { margin: 0 0 0 var(--space-10); align-self: center; }
/* §420: studie-kolonner (vindu · dag · volum σ) til høyre i raden + overskriftsstripe */
.baksiden-studie { margin-left: auto; display: inline-flex; gap: var(--space-10); padding-left: var(--space-10); flex: 0 0 auto; }
.baksiden-studie-celle {
  min-width: 56px; text-align: right; font-family: var(--mono); font-size: var(--fs-merke);
  font-variant-numeric: tabular-nums; color: var(--text-soft);
}
.baksiden-studie-celle.studie-opp { color: var(--up); }
.baksiden-studie-celle.studie-ned { color: var(--down); }
/* §397-oppfølging, EKTE funn under live-verifisering (kjent-feil-
   sjekklistens punkt 2 fra kø-punkt 2b-planen: "kan ETT barn alene
   overskride tilgjengelig plass og trigge en trim-mekanisme som fjerner
   ALT"): Dekkets EKSISTERENDE sikkerhetsgulv (`settDekkHoyde()`,
   dekk.js — `Math.max(320, vindu - top - 14)`, URØRT, satt lenge før
   denne kvelden) kolliderer med banneret på kortere skjermer — gulvet
   tvinger Dekket til å KREVE 320px, uansett hvor mye banneret alt har
   tatt, og `overflow:hidden` i dekk-modus klipper resten i stedet for
   å scrolle. Jens sitt eget forslag ("Dashboardet klarer seg kanskje
   uten") gir løsningen: banneret får en LAVERE, mer beskjeden
   standard-høyde i Dekk-modus spesifikt — fortsatt synlig, fortsatt
   nyttig for et raskt blikk, men respekterer Dekkets gulv på realistiske
   skjermhøyder. Terminal (ingen tilsvarende gulv) beholder 46vh urørt.
   «Full skjerm» overstyrer fortsatt begge — en eksplisitt brukervalgt
   handling, akseptert tradeoff om Dekket skulle klippe på en svært lav
   skjerm i DEN tilstanden. */
/* Sikkerhet (§385-oppfølging, fortsatt gyldig i den nye plasseringen):
   må eksplisitt tvinges skjult når portalen er låst, samme måte .skall
   alt er (linje ~535) — uten denne ville selskapsnavn/hendelser vært
   synlige UTENOM selve vislaas-skjermen. */
body.vis-laast .hendelsesforlop-overlegg { display: none; }
.hendelsesforlop-topp {
  display: flex; align-items: center; gap: var(--space-14); flex-wrap: wrap;
  flex: 0 0 auto; padding-bottom: var(--space-14); border-bottom: 1px solid var(--line);
}
/* §404 (Etappe B): fane-raden tar margin-right:auto-rollen (dytter
   full-skjerm/lukk-knappene til høyre). */
.hendelsesforlop-faner { display: flex; gap: var(--space-8); margin-right: auto; }
.hendelsesforlop-fane {
  font: inherit; font-size: var(--fs-tittel); font-weight: 600; color: var(--text-faint);
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0 0 var(--space-4); cursor: pointer;
}
.hendelsesforlop-fane:hover { color: var(--text-soft); }
.hendelsesforlop-fane.paa { color: var(--text); border-bottom-color: var(--accent); }
/* §381-oppfølging: en EKTE funnet-bug, oppdaget mens "hele universet"-
   knappen (Etappe F) skulle legges til — ".mini-knapp" (gjenbrukt siden
   §373) er GLOBALT skjult utenfor redigeringsmodus
   (`body:not(.redigering) .mini-knapp{display:none}`, linje ~3251),
   fordi den klassen ellers kun brukes til ekte SKRIV/REDIGER-handlinger.
   "+ legg til kort"/"+ hele universet" skriver INGENTING til databasen —
   en ren, lokal, forbigående UI-handling, like synlig for en ikke-
   innlogget besøkende som selve søkefeltet. Egen klasse, samme utseende
   som .mini-knapp, URØRT av redigerings-gaten. */
.hf-mini-knapp {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-4) var(--space-10); cursor: pointer;
  transition: transform var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;   /* §787 */
}
.hf-mini-knapp:hover { border-color: var(--accent); color: var(--text); }
/* §399: innholdsbeholderen viser nå Hypotesemåleren samlet (tegnHypStorBanner(),
   app.js) — erstatter §373/§397s ROW av uavhengig lukkbare selskapskort.
   Beholder samme container-id/klassenavn (mindre churn i CSS/tester). */
.hendelsesforlop-kort-rad {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: var(--space-10);
}
.hf-flyt-plass { margin-top: var(--space-10); }
/* Delt innhold-typografi for BÅDE grafens klikk-valgt-panel (under) og —
   historisk — den vertikale listen §383 erstattet. */
.hf-flyt-rad-topp { display: flex; align-items: baseline; gap: var(--space-8); }
.hf-flyt-dato { font-family: var(--mono); font-size: var(--fs-data); color: var(--text-faint); }
.hf-flyt-type { font-size: var(--fs-merke); }
.hf-flyt-lbl {
  margin: var(--space-2) 0 0; font-size: var(--fs-brod); color: var(--text-soft);
  overflow-wrap: break-word;
}
.hf-flyt-motsier-varsel {
  margin: var(--space-4) 0 0; font-size: var(--fs-merke); color: var(--down);
}
/* §383 (SELVKORREKSJON — se hendelsesforlop.js sin filtoppkommentar): en
   EKTE, horisontal, scrollbar/zoombar tidslinje-graf erstatter den
   vertikale tekstlisten §374-§377 opprinnelig bygde. Samme pg-ev-*/
   pg-tip/pg-grid/pg-akse-t-konvensjon som Kursbildets EGEN graf
   (selskap.js, byggPrisGraf) — "materialvalg": gjenbrukt, ikke
   oppfunnet. `.hf-graf-flate{overflow-x:auto}` er den ekte, native
   nettleser-scrollen ("fast scroll") — bevisst IKKE Kursbildets
   `.pg-flate{overflow:hidden}`/`.pg-svg{width:100%}` (de passer grafen
   INN i beholderen; her er den ofte bevisst BREDERE, til å scrolle i). */
.hf-graf-verktoy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: var(--space-10) 0 var(--space-6); }
.hf-graf-agg-note { font-size: var(--fs-merke); color: var(--text-faint); margin-left: var(--space-6); }
.hf-graf-agg-note[hidden] { display: none; }
/* §412: glidende snitt (stiplet, nøytral) + Davids Vaktlista-rangering (stripe) */
.hf-graf-sma { fill: none; stroke: var(--text-soft); stroke-width: 1.1; pointer-events: none; }
.hf-graf-sma--20 { stroke-dasharray: 4 2; }
.hf-graf-sma--50 { stroke-dasharray: 1.5 2.5; }
.hf-leg-sma-prikk { background: transparent; border-top: 1.6px dashed var(--text-soft); border-radius: 0; height: 0; width: 12px; align-self: center; }
.hf-graf-rang { fill: var(--accent); opacity: .75; }
.hf-leg-rang { background: var(--accent); border-radius: 1px; width: 9px; height: 4px; }
.hf-graf-flate-wrap { position: relative; }
.hf-graf-flate { overflow-x: auto; }
.hf-graf-svg { display: block; shape-rendering: geometricPrecision; }
.hf-graf-node { cursor: pointer; }
.hf-graf-node:hover .pg-ev-prikk { r: 5.5; }
/* §383: valgt node — tydelig ring, samme farge-logikk som resten (bruker
   currentColor fra .pg-ev-<type>, ikke en ny, oppfunnet aksentfarge). */
.hf-graf-node--valgt .pg-ev-prikk { stroke: currentColor; stroke-width: 2; r: 5.5; }
/* §410: «spesiell virkning» (kurs/volum ≥ 2σ over selskapets egen normalstøy
   rundt hendelsen) — en tynn, nøytral ring (--text) rundt prikken. Valgt-
   regelen over (currentColor, tykkere) vinner når begge gjelder. */
.hf-graf-node--spesiell .pg-ev-prikk { stroke: var(--text); stroke-width: 1.6; r: 4.8; }
.hf-graf-node--spesiell.hf-graf-node--valgt .pg-ev-prikk { stroke: currentColor; stroke-width: 2; r: 5.5; }
.hf-leg-spesiell { background: transparent; border: 1.6px solid var(--text); box-sizing: border-box; }
/* §410: før/etter-skygge for valgt hendelse — NØYTRALE farger (før = grå
   stiplet, etter = aksent): et utslag ned er like «spesielt» som opp. */
.hf-baand-foer { fill: var(--text-faint); fill-opacity: .10; stroke: var(--text-faint); stroke-opacity: .45; stroke-dasharray: 2 2; }
.hf-baand-etter { fill: var(--accent); fill-opacity: .10; }
.hf-virkning { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.hf-virkning-tittel { margin: 0 0 var(--space-4); font-size: var(--fs-merke); color: var(--text-faint); }
.hf-virkning-rad { margin: var(--space-2) 0; font-size: var(--fs-brod); color: var(--text-soft); }
.hf-virkning-rad.spesiell { color: var(--text); }
.hf-virkning-navn { font-weight: 600; margin-right: var(--space-6); color: var(--text); }
.hf-virkning-rad.spesiell .hf-virkning-navn { color: var(--accent); }
.hf-virkning-forbehold { margin: var(--space-6) 0 0; }
/* §377/§383: motsigelse-skjøten er nå en EKTE linje mellom to noder (var
   en CSS-kant-aksent på selve raden i listeversjonen) — stiplet/rød,
   tydelig ANNERLEDES enn den nøytrale pg-grid-aksen. */
.hf-graf-motsier-skjot { stroke: var(--down); stroke-width: 1.4; stroke-dasharray: 3 2; }
.hf-graf-valgt {
  position: relative; margin-top: var(--space-10); padding: var(--space-10) var(--space-24) var(--space-10) var(--space-10);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
}
.hf-graf-valgt[hidden] { display: none; }
.hf-graf-valgt-lukk {
  position: absolute; top: var(--space-6); right: var(--space-6);
  font: inherit; appearance: none; background: none; border: none;
  color: var(--text-faint); cursor: pointer; padding: var(--space-2) var(--space-6);
}
.hf-graf-valgt-lukk:hover { color: var(--down); }
/* §379 (Etappe E, "hypotetisk fremover" — §23s høyeste innsats i hele
   denne planen): et DISKRET frekvens-histogram, ALDRI en sammenhengende
   vifte/kjegle. Tre FASTE, navngitte stolper (opp/ned/tid) — samme
   up/down-fargespråk resten av appen allerede bruker, "tid" nøytral
   (verken opp eller ned). Egen boks ØVERST i kortet (§376: nyest/
   nærmest nå øverst), tydelig avgrenset fra selve hendelsesflyten under. */
.hf-barriere {
  margin: var(--space-10) 0 0; padding: var(--space-10);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
}
.barriere-topp { margin: 0 0 var(--space-8); font-size: var(--fs-merke); color: var(--text-soft); }
.barriere-rad { display: flex; flex-direction: column; gap: var(--space-4); }
.barriere-bar-rad { display: flex; align-items: center; gap: var(--space-8); }
.barriere-bar-navn { flex: 0 0 34px; font-size: var(--fs-merke); color: var(--text-faint); }
.barriere-bar { flex: 1 1 auto; height: 8px; border-radius: var(--r-liten); background: var(--line); overflow: hidden; }
.barriere-bar-fyll { display: block; height: 100%; border-radius: var(--r-liten); }
.barriere-bar--opp .barriere-bar-fyll { background: var(--up); }
.barriere-bar--ned .barriere-bar-fyll { background: var(--down); }
.barriere-bar--tid .barriere-bar-fyll { background: var(--text-faint); }
.barriere-bar-v {
  flex: 0 0 40px; text-align: right; font-family: var(--mono); font-size: var(--fs-data);
  color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.barriere-median { margin: var(--space-6) 0 0; font-size: var(--fs-merke); color: var(--text-faint); }
.barriere-forbehold { margin: var(--space-6) 0 0; font-size: var(--fs-merke); color: var(--text-faint); }

/* ---------- innloggingsskjerm (§712: Google-innlogging og forespørsel om tilgang) ----------
   §842: Cynefin — lås-skjermen fikk sin egen, FASTE merkevareidentitet (cynefin.no-forsiden
   David etter hvert skal stå skjult bak). --cy-*-tokens er bevisst IKKE teama-reaktive (samme
   begrunnelse som en institusjonell forside typisk er fast uansett OS lys/mørk-preferanse) og
   brukes KUN inni .vislaas — resten av appen (.skall) er helt urørt og følger fortsatt
   --bg/--text/§525-systemet som før. MADE Outer Sans: Jens sitt eksplisitte valg — lisensen
   er «personal use», han tar ansvaret for avklaring/lisens selv (se BEGRENSNINGER §842).
   Selve --cy-*-tokenene står øverst i filen i de to vanlige token-blokkene (:root / mørk),
   med samme verdi begge steder — se §256/§525-begrunnelsen der for hvorfor et nytt token
   ALLTID hører hjemme i de blokkene, aldri som en egen, egen :root lenger ned. */
@font-face { font-family: "MadeOuterBlack"; src: url("fonts/made-outer-sans-black.otf"); font-display: swap; }
@font-face { font-family: "MadeOuterRegular"; src: url("fonts/made-outer-sans-regular.otf"); font-display: swap; }

/* §962 (Jens: "sentrer visning. kutt ut evt. linjer som er overflødige"): innholdet (tagline,
   resultat-tallet og "har du ikke tilgang"-hinten er alt fjernet samme runde, HTML/JS) sto
   igjen stablet øverst til venstre i et fixed/inset:0-vindu uten noen egen bredde-grense --
   align-items:stretch lot .cy-innhold fylle HELE vindusbredden, teksten/knappen la seg bare
   naturlig til venstre i det. center+center på selve .vislaas sentrerer nå hele blokken i
   vinduet, .cy-innhold sin egen max-width (under) holder den fra å bli urimelig bred på store
   skjermer. */
.vislaas {
  position: fixed; inset: 0; z-index: 1000; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--cy-bg); color: var(--cy-text); font-family: "MadeOuterRegular", sans-serif;
}
.vislaas.skjult { display: none; }
body.vis-laast .skall { display: none; }
.cy-innhold { max-width: 440px; width: 100%; }

/* §962: .cy-thread (den grønne "ferdselslinja" som bandt Adgang- og Vilkår-sonene sammen) og
   skillelinja under Adgang-sonen er fjernet -- med tagline/resultat-tallet borte er Adgang-
   sonen nå bare merke + knapp, og Vilkår-sonen bare copyright-linja; en egen "sti" mellom to
   så små soner hadde ingenting igjen å binde sammen. Samme grunn til at venstre-paddingen under
   (som fantes KUN for å gi streken plass) er tilbake til symmetrisk. */
.cy-zone { padding: var(--space-24) var(--space-20); }
/* §843: Adgang (hero) er den fargede sonen — Hawk Infinity-referansen (Jens) har den store
   overskriften på en farget, ikke hvit, bunn. Vilkår er papir, lar dataen puste. */
.cy-zone-adgang { display: flex; flex-direction: column; gap: var(--space-14); background: var(--cy-bg-hero); }
.cy-zone-vilkaar { display: flex; flex-direction: column; gap: var(--space-12); }
/* §848: merket — ring + fire himmelretnings-tagger + konkav firetakket stjerne (kompassrose),
   med "C" i negativt rom i sentrum. Jens sin egen, godkjente form fra artifact-utkastet —
   bygget inn som ekte SVG her, ikke lenger bare et utkast. Farger via klasse, ikke hardkodet
   (§525-disiplinen gjelder like mye for et merke som for resten av siden). */
.cy-logo { display: flex; align-items: center; gap: var(--space-12); }
/* §961 (Jens: «om logoen var akkurat like høy som bokstavene»): målt direkte (canvas
   measureText, MadeOuterBlack) -- "CYNEFIN" sin reelle synlige høyde er 24px ved 34px
   font-size (mobil) og 33px ved 44px (≥760px), mens merket sto på 40px/52px, ~60 % for høyt
   begge steder. Satt til de målte tallene. */
.cy-mark { width: 24px; height: 24px; flex: none; transform: translateY(3%); }
/* §854 (Jens: «virker ikke sentrert i forhold til skriften»): merkets ink er selv matematisk
   sentrert i sin viewBox (målt, <0,15px avvik), men CYNEFIN i stort/rund MadeOuterBlack har
   nesten ingen nedre ((descender))-plass — ink-senteret i teksten ligger litt under boks-
   senteret. `translateY(3%)` (relativt til merkets egen høyde, skalerer likt på begge
   brytningspunkt) flytter merket ned til faktisk optisk sentrert mot tekstens ink, ikke bare
   boks-sentrert mot linjehøyden. */
@media (min-width: 760px) { .cy-mark { width: 33px; height: 33px; } }
.cy-mark-ink { fill: var(--cy-ink); stroke: var(--cy-ink); }
/* §850 (Jens: «fire putefomede lommene rundt stjernen er ikke klippet ut, hele sirkelen er
   svart, tett»): CSS-klasser har HØYERE presedens enn presentasjonsattributter i SVG — ringens
   egen `fill="none"`-attributt tapte mot `.cy-mark-ink` sin `fill: var(--cy-ink)`, så ringen
   ble en FYLT skive under stjernen i stedet for en tom sirkel, og slukte de fire negative
   hjørnene. Egen klasse for ringen, uten fill, løser det — testet med en reell render denne
   gangen (ikke bare rå SVG-attributter, som skjulte feilen forrige runde). */
.cy-mark-ring { fill: none; stroke: var(--cy-ink); }
.cy-wordmark { font-family: "MadeOuterBlack", sans-serif; font-size: 34px; line-height: 1; }
@media (min-width: 760px) { .cy-wordmark { font-size: 44px; } }
.cy-tagline { font-size: 15px; color: var(--cy-text-soft); line-height: 1.55; max-width: 460px; margin: 0; }
.cy-resultat { font-size: 13px; color: var(--cy-text-soft); line-height: 1.5; max-width: 460px; margin: var(--space-8) 0 0; }

.vislaas-kort { width: auto; max-width: 440px; text-align: left; padding: 0; border: 0; margin-top: var(--space-6); }
.vislaas-kort p { font-size: 15px; color: var(--cy-text-soft); margin: 0 0 var(--space-10); }
.vislaas-hint { font-size: 13px; color: var(--cy-text-faint); margin-top: var(--space-10); margin-bottom: 0; overflow-wrap: anywhere; }
.vislaas-felt { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; margin-bottom: var(--space-10); min-width: 0; }
.vislaas-felt span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cy-text-faint); }
.vislaas-felt input, .vislaas-felt textarea {
  min-width: 0; width: 100%; padding: var(--space-10) var(--space-12); font: inherit; font-size: 14px; color: var(--cy-text);
  background: var(--cy-bg-alt); border: 1px solid var(--cy-line-soft); border-radius: var(--r-liten);
}
.vislaas-felt input:focus, .vislaas-felt textarea:focus { outline: none; border-color: var(--cy-teal); }
.vislaas-felt textarea { resize: vertical; }
.vislaas-knapp, .vislaas-google {
  font-family: "MadeOuterBlack", sans-serif; font-size: 14px; letter-spacing: .01em;
  background: var(--cy-ink); color: var(--cy-bg); border: none; border-radius: var(--r-liten);
  padding: var(--space-14) var(--space-32); margin: var(--space-12) 0; cursor: pointer;
}
.vislaas-knapp:focus-visible, .vislaas-google:focus-visible { outline: 2px solid var(--cy-teal); outline-offset: 2px; }
.vislaas-loggut { display: block; margin: var(--space-14) 0 0; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; color: var(--cy-text-faint); text-decoration: underline; cursor: pointer; }
#vislaas .form-status { margin: var(--space-10) 0 0; font-size: 13px; }
#vislaas .form-status.ok { color: var(--cy-green-text); }
#vislaas .form-status.feil { color: var(--cy-red-text); }

/* §964: kort økosystem-oversikt (David/Fangvekst/Lisa) på tjeneste-velgeren -- bevisst liten og
   underordnet (David sin egen knapp er fortsatt hovedhandlingen), samme avstand til knappene
   over som .vislaas-hint allerede bruker. */
.cy-okosystem { list-style: none; margin: var(--space-14) 0 0; padding: var(--space-12) 0 0; border-top: 1px solid var(--cy-line-soft); display: flex; flex-direction: column; gap: var(--space-6); }
.cy-okosystem-rad { font-size: 13px; line-height: 1.5; }
/* §1001 (test_vekt_600_oeker_aldri_700_minker_aldri, §939-budsjettet): ingen eksplisitt
   font-weight her -- arver .vislaas sin vanlige vekt, trenger ikke 600 for å skille seg fra
   .cy-okosystem-beskrivelse (den dempede fargen gjør jobben alene). */
.cy-okosystem-navn { color: var(--cy-text); text-decoration: none; }
a.cy-okosystem-navn:hover { text-decoration: underline; }
.cy-okosystem-beskrivelse { color: var(--cy-text-faint); }

/* §792: kikkehullet — offentlig, uinnlogget vindu inn i Vaktlista. Tomt (ingen innhold) mens det
   henter eller hvis hentingen feiler — forstyrrer aldri Adgang-sonen ved siden av (se kikkehull.js).
   §842/§843: Norge/Global får hver sin aksentfarge på rang-tallet (kikkehull.js setter
   gruppeklassen) — funksjonell variasjon, ikke bare dekorativ. */
.kikkehull { width: auto; max-width: 680px; padding: 0; border: 0; background: none; }
.kikkehull:empty { display: none; }
.kikkehull-tittel { font-family: "MadeOuterBlack", sans-serif; font-size: 22px; font-weight: normal; margin-bottom: var(--space-12); cursor: help; }   /* §795: forbeholdet ligger i title-attributten, ikke synlig tekst */
.kikkehull-gruppe { display: inline-block; width: calc(50% - var(--space-16)); vertical-align: top; }
.kikkehull-gruppe + .kikkehull-gruppe { margin-left: var(--space-32); }
@media (max-width: 560px) { .kikkehull-gruppe { width: 100%; } .kikkehull-gruppe + .kikkehull-gruppe { margin-left: 0; margin-top: var(--space-16); } }
.kikkehull-gruppe-tittel {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--cy-text-faint); padding-bottom: var(--space-8); border-bottom: 1px solid var(--cy-line);
}
.kikkehull-rad {
  display: flex; align-items: baseline; gap: var(--space-12); flex-wrap: wrap; min-width: 0;
  padding: var(--space-8) 0; border-top: 1px solid var(--cy-line-soft); text-align: left;
}
.kikkehull-rad:first-of-type { border-top: 0; }
.kikkehull-rang { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--cy-green-text); flex: none; }
.kikkehull-gruppe--global .kikkehull-rang { color: var(--cy-teal-text); }
.kikkehull-navn { font-size: 15px; }

/* §998 fjernet cookie-banneret (#cy-cookie) fra HTML/JS -- disse reglene sto igjen ubrukt,
   oppdaget ved §1001 sin fulle py -m pytest-kjøring (var ikke kjørt etter §998, kun npm test).
   Fjernet. */
.cy-legal { font-size: 12px; color: var(--cy-text-faint); line-height: 1.6; margin: 0; }

/* Tilgang i Styring (§712) */
.tilgang-rad { display: grid; gap: var(--space-4); padding: var(--space-10) 0; border-top: 1px solid var(--line); min-width: 0; }
.tilgang-rad > * { min-width: 0; overflow-wrap: anywhere; }
.tilgang-hode { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.tilgang-melding { font-size: var(--fs-brod); color: var(--text-soft); }
.tilgang-knapper { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------- varselbånd (myk grense + tidsreise) ---------- */

.varsel-bar {
  margin: var(--space-12) var(--space-32) 0;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--r);
  font-size: var(--fs-brod);
  display: flex; align-items: center; gap: var(--space-14); flex-wrap: wrap;
}
.varsel-bar.skjult { display: none; }
.tidsreisebar { background: var(--blue-bg); color: var(--accent); border-left: 3px solid var(--blue); }
.tidsreise-naa {
  font: inherit; font-size: var(--fs-brod); font-weight: 500;
  border: 1px solid var(--blue); border-radius: var(--r-liten);
  background: var(--bg); color: var(--blue);
  padding: var(--space-4) var(--space-12); cursor: pointer; white-space: nowrap;
}

/* ---------- skall: én innholdsspalte (Spør David er et panel, ikke skinne) ---------- */

.skall { display: block; width: 100%; }
/* §820 (Jens: "kall det a4... full skjerm eller etter beste anbefaling generelt" — delte sideramme
   på ALLE sider, ikke bare Metode, kjentes trang/papir-aktig på en stor skjerm): utvidet fra
   1120px til 1400px — fortsatt en ramme (bevisst IKKE kant-til-kant, ville strukket tabeller/lister
   bredere enn de er tegnet for), bare mindre tom marg. `.metode-vis` sin egen, smalere 68ch
   lesebredde for brødtekst er URØRT — den er en egen, bevisst lesbarhets-grense inni denne rammen,
   ikke samme ting som selve rammen. */
.innhold { padding: var(--space-24) var(--space-32); min-width: 0; max-width: 1400px; margin: 0 auto; }

/* visnings-bytte: kun aktiv seksjon rendres */
.vis { display: none; }
.vis.aktiv { display: block; }
.vis-intro { margin: -4px 0 var(--space-14); max-width: 72ch; }

/* ---------- Hjem = broen ---------- */
.bro { max-width: 760px; }

/* «det ene nå» — den store pikselen */
.bro-fokus {
  border: 1px solid var(--line); border-left: 3px solid var(--blue);
  border-radius: var(--r); padding: var(--space-14) var(--space-16) var(--space-4); margin-bottom: var(--space-24);
}
.bro-fokus.haster { border-left-color: var(--down); }
.bro-fokus.rolig { border-left-color: var(--up); padding-bottom: var(--space-14); }
.bro-fokus-merke {
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-soft); margin-bottom: var(--space-6);
}
.bro-fokus .case { border-bottom: none; padding: var(--space-4) 0 var(--space-8); }
.bro-fokus.rolig .meta { margin: 0; }
.bro-ko-tittel { margin-top: var(--space-8); }

/* resten som linjer — hver peker til sin flate */
.bro-linjer { margin-top: var(--space-24); display: flex; flex-direction: column; }
.bro-linje {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16);
  padding: var(--space-12) var(--space-2); border-top: 1px solid var(--line);
  font-size: var(--fs-brod); color: inherit; text-decoration: none;
}
.bro-linje:last-child { border-bottom: 1px solid var(--line); }
.bro-linje:hover { color: var(--blue); }
.bro-linje-t { font-weight: 500; white-space: nowrap; }
.bro-linje-v { color: var(--text-soft); text-align: right; font-variant-numeric: tabular-nums; }
.bro-linje:hover .bro-linje-v { color: var(--blue); }

/* generisk kort */
.kort { border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-14) var(--space-16); box-shadow: var(--skygge-1); }   /* §525: nivå 1 */
.kort .section-title,
.kort .section-title.mini { margin-top: 0; margin-bottom: var(--space-10); }
.kort .form-rad { margin-top: var(--space-10); }
.kort-tittel {
  font-size: var(--fs-merke); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-soft); margin-bottom: var(--space-10);
}

/* ---------- arbeidsflata: formbare kort ---------- */
.flate-topp {
  display: flex; align-items: center; gap: var(--space-12);
  margin-bottom: var(--space-14);
}
.flate-tilbake {
  display: none; text-decoration: none; color: var(--text-soft);
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line-strong); border-radius: var(--r-liten); padding: var(--space-4) var(--space-10);
}
.flate-tilbake:hover { border-color: var(--accent); color: var(--accent); }
/* §234: tannhjulet — samlet innstillinger-meny (sveip + tema, alltid
   nåbar; Styring-lenken for det dypere resten). Egen positioned wrap,
   ALLTID synlig — innstillinger skal nås fra hvor som helst, ikke bare
   Dekket. §295: Tilpass-panelet (S/M/L, dra-og-slipp, presets) er
   fjernet i sin helhet — Dekket er nå ett fast instrumentpanel. */
.innstillinger-wrap { position: relative; display: inline-flex; align-items: center; }
#innstillinger-knapp.aktiv { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
/* §784 (steg 2/6, Jens: "driftstatus trenger ikke en egen knapp ... ideelt sett har vi ikke dette
   symbolet" når alt er friskt): et lite, stille varselmerke — IKKE en tekstlinje — på ⚙,
   satt/fjernet av tegnDriftsvarsel() (app.js). Aldri synlig med mindre noe faktisk er galt.
   §816: var opprinnelig delt med Drift-fanen (nå fjernet fra hovedmenyen) — regelen sto allerede
   fint på egne ben for #innstillinger-knapp alene, ingen endring i selve varsel-logikken. */
#innstillinger-knapp { position: relative; }
#innstillinger-knapp.har-varsel::after {
  content: ""; position: absolute; top: 1px; right: 1px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--down); border: 1px solid var(--bg);
}
.innstillinger-meny {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 210px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
  box-shadow: var(--skygge-2); padding: var(--space-6);   /* §525 */
}
/* §69 (kjent fallgruve i denne kodebasen — se hidden-attributt-display-
   override): en egen `display:`-regel slår alltid [hidden] ved lik
   spesifisitet, siden forfatter-CSS slår UA-arket uansett rekkefølge. Uten
   denne linjen sto menyen synlig med det samme, `hidden`-attributtet til
   tross. */
.innstillinger-meny[hidden] { display: none; }
.innstillinger-item {
  display: block; width: 100%; margin: 0; text-align: left; text-decoration: none;
  font: inherit; font-size: var(--fs-brod); color: var(--text);
  background: none; border: none; border-radius: var(--r-liten);
  padding: var(--space-8) var(--space-10); cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease;   /* §787 */
}
.innstillinger-item:hover { background: var(--bg-soft); color: var(--text); }
/* §295: sveip-knappen speiler på/av-tilstand, samme "aktiv"-prinsipp som
   tema/tannhjul-knappene ellers bruker. */
.innstillinger-item.aktiv { color: var(--accent); }
.innstillinger-lenke {
  color: var(--text-soft); border-top: 1px solid var(--line);
  margin-top: var(--space-4); padding-top: var(--space-10);
}
/* §816: tre `.innstillinger-lenke`-rader på rad (Drift og makro/Treffsikkerhet/Aktivitetskart) skal
   bare ha ÉN skillelinje over GRUPPEN, ikke én hver — den andre og tredje faller rett etter den
   første uten egen border/mellomrom. */
.innstillinger-lenke + .innstillinger-lenke { border-top: 0; margin-top: 0; padding-top: var(--space-4); }
/* §785 (steg 3/6): tidsreise flyttet inn fra topbaren — EGEN rad, ikke .innstillinger-item (et klikk
   på selve datofeltet skal åpne nettleserens kalender, ikke lukke hele nedtrekket med det samme, som
   .innstillinger-item sin klikk-lukker-meny-håndtering ville gjort). */
.innstillinger-tidsreise {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding: var(--space-8) var(--space-10); font-size: var(--fs-brod);
}
.innstillinger-tidsreise label { cursor: pointer; }
/* §785-oppfølging: denne regelen må stå ETTER basisregelen over (lik spesifisitet — CSS avgjør da
   etter kildeorden, ikke @media-plassering — en toppen-av-filen-versjon av denne tapte mot
   .innstillinger-tidsreise sin egen, senere display:flex). Samme "desktop-funksjon"-begrunnelse
   tidsreise-datofeltet selv hadde før §785 flyttet hele raden inn i ⚙-menyen. */
@media (max-width: 760px) {
  .innstillinger-tidsreise { display: none; }
}

.flate-kort { display: flex; flex-direction: column; gap: var(--space-14); }
.flate-kort > .kort[hidden] { display: none; }
.kort-topp {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-12); margin-bottom: var(--space-12);
  padding-bottom: var(--space-8); border-bottom: 1px solid var(--line);
}
.kort-topp .kort-tittel { margin-bottom: 0; display: inline-flex; align-items: center; gap: var(--space-6); }
.dekk-puls { flex-shrink: 0; }
.kort-utvid {
  text-decoration: none; color: var(--text-faint);
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap;
}
.kort-utvid:hover { color: var(--accent); }
/* §876 (Jens: "trykke rett på funnene i funn for å komme rett til oversikten... gjelde alle
   fliser"): hele flis-innholdet er klikkbart til samme sted som "utvid →" — ikke bare den vesle
   lenka i hjørnet. Klikk på en lenke/knapp INNI flisen (selskapslenker osv.) beholder sin egen
   destinasjon, se dekk.js. */
.flis-klikkbar { cursor: pointer; border-radius: var(--r); }
.flis-klikkbar:hover { background: var(--bg-soft); }
.kort-krop { min-width: 0; }
.kort-krop.bro { max-width: none; }

/* skjema-diett: inntastingsskjemaer bare i utvidet (fokus) visning, ikke
   på den kompakte arbeidsflata */
.flate-kort .kort-skjema { display: none; }

/* ==================== DYBDE — modul-liste + full modul ==================== */
.modul-nav { display: none; }
body[data-flate="dybde"] .flate-topp .flate-tilbake,
/* §359 (Jens: "foreløpig kan jeg ikke gå ut til dashbordet fra baksiden"):
   Baksiden sin "⊞ oversikt"-lenke (index.html) lå i markup'en hele tiden,
   men var usynlig — denne regelen viste `.flate-tilbake` KUN for
   data-flate="dybde", og Baksiden setter data-flate="baksiden" (§353). */
body[data-flate="baksiden"] .flate-topp .flate-tilbake { display: inline; }
body[data-flate="dybde"] [data-vis="flate"].aktiv {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas: "nav kort";
  /* §254-oppfølging #4 (Jens: "mindre luft på venstre side av menyen enn
     på høyre side... siden er ute av harmoni"): forrige runde hevet dette
     til 30px som en sikkerhetsmargin mot en (feilaktig mistenkt) OS-
     scrollbar — men den ekte klippe-feilen var alt løst uavhengig
     (kort-krop sin padding-left, §254-oppfølging #2). 30px mot
     .innhold sin egen venstre-padding (12px 20px, linje ~611) var aldri
     match — 20px vs 30px er en ekte, selvpåført asymmetri. Satt til
     NØYAKTIG samme tall som den venstre siden bruker, ikke et nytt gjettet. */
  column-gap: var(--space-20);
}
body[data-flate="dybde"] .flate-topp { grid-area: topp; }
body[data-flate="dybde"] .modul-nav {
  grid-area: nav; display: flex; flex-direction: column; gap: var(--space-6);
  position: static; align-self: stretch; overflow-y: auto;
  /* §254-oppfølging (Jens: "linjen ... kolliderer med menyen til
     venstre"): navlista ruller (mange moduler + DATA/VERKTØY-grupper),
     og med et vanlig (ikke-overlay) OS-scrollbaroppsett tegnes en solid
     grå linje inni denne 186px-kolonnen — helt usynlig i miljøer med
     overlay-scrollbar (derfor ble den aldri gjenskapt her under
     feilsøkingen). Sammen med en tynn kolonne-luft leste den grå linja
     + inputens fokus-ramme som to linjer som trenges. Gjør scrollbaren
     tynn og nøytral i stedet for å stole på nettleserens standard, og
     økte luften mellom kolonnene (22px -> 30px) som en sikkerhetsmargin
     uansett scrollbar-bredde. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
body[data-flate="dybde"] .modul-nav::-webkit-scrollbar { width: 6px; }
body[data-flate="dybde"] .modul-nav::-webkit-scrollbar-track { background: transparent; }
body[data-flate="dybde"] .modul-nav::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 3px;
}
/* F7: rail-fliser — de demoterte Dekk-flisene, samme visuelle språk */
.modul-nav-lenke {
  flex: 0 0 auto;   /* §665: raden krymper ikke under innholdet (teksten ble kuttet nederst); menyen ruller i stedet */
  text-decoration: none; color: var(--text-soft); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-liten);
  padding: var(--space-8) var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); line-height: 1.3;
  /* §302: reserver plass for en to-linjes rad selv der ingen navAvlesning()-
     gren finnes (Dømmekraft) — ellers blir raden kortere enn søsknene sine. */
  min-height: calc(var(--fs-brod) * 1.3 + 9.5px * 1.3 + 3px + var(--space-8) * 2);
}
.modul-nav-navn { font-size: var(--fs-brod); font-weight: 600; color: var(--text); }
.modul-nav-lenke:hover { border-color: var(--line-strong); background: var(--bg-soft); }
.modul-nav-lenke.aktiv { border-color: var(--accent); background: var(--accent-bg); }
.modul-nav-lenke.aktiv .modul-nav-navn { color: var(--accent); }
.modul-nav-sub {
  font-family: inherit; font-size: var(--fs-data); color: var(--text-soft);   /* §667: samme skrift som resten av flata (var mono) */
  overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;   /* §663: to linjer i stedet for avkuttet «…» */
}
.modul-nav-lenke.aktiv .modul-nav-sub { color: var(--accent); }
@media (max-width: 880px) { .modul-nav-sub { display: none; } }
body[data-flate="dybde"] #flate-kort { grid-area: kort; display: block; }
body[data-flate="dybde"] .flate-kort > .kort[hidden] { display: none; }
body[data-flate="dybde"] .flate-kort > .kort { border: 0; padding: 0; }
body[data-flate="dybde"] .flate-kort > .kort > .kort-topp { display: none; }
body[data-flate="dybde"] .flis-krop { display: none; }
body[data-flate="dybde"] .kort-krop { display: block; }

/* F6a: samme bundne ramme som Dekk — panelet får fast høyde, modulhodet står
   stille, bare modulens innhold ruller internt. */
body[data-flate="dybde"] { overflow: hidden; }
/* F7+: fokus bruker hele skjermbredden, akkurat som Dekk — ingen ark-kolonne */
body[data-flate="dybde"] .innhold { max-width: none; margin: 0; padding: var(--space-12) var(--space-20); }
body[data-flate="dybde"] [data-vis="flate"].aktiv {
  height: var(--dybde-h, calc(100vh - 190px));
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
body[data-flate="dybde"] .modul-nav { position: static; overflow-y: auto; }
body[data-flate="dybde"] #flate-kort { min-height: 0; overflow: hidden; }
body[data-flate="dybde"] .flate-kort > .kort:not([hidden]) {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
body[data-flate="dybde"] .dybde-hode,
body[data-flate="dybde"] .dybde-info-detalj { flex: 0 0 auto; }
body[data-flate="dybde"] .kort-krop {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: var(--space-6);
  /* §254-oppfølging #2 (Jens: "venstre kortside er fremdeles kuttet" —
     scrollbar-fiksen traff feil årsak): kun overflow-y ble satt her, men
     CSS-spec'en tvinger overflow-x til også å bli non-visible ("auto")
     når det ikke er eksplisitt satt — samme "0 slakk klipper et element
     som stikker akkurat utenfor boksen sin egen kant"-mønster som
     sparklinjene (§248) og chip-hjørnene (§248-oppfolging) ble klippet
     av. Et fokusert .eier-input sin outline (2px + 1px offset = 3,6px)
     stakk lengre til venstre enn selve inputens border-boks, og
     kort-krop hadde null padding-left — outlinen klippes bort akkurat
     der. Målt direkte: inputens venstre kant og kort-krop sin venstre
     kant lå på nøyaktig samme piksel (0px slakk, bekreftet i live-test).
     Bruker --r-liten (samme token som kort/chips sin radius) i stedet
     for et nytt, ubegrunnet pikseltall — David har ingen egen
     avstands-skala (§254-oppfølging #3 dokumenterer gapet), så dette
     er det nærmeste et eksisterende, navngitt tall gir akkurat her.
  */
  padding-left: var(--r-liten);
}
body[data-flate="dybde"] .terskel-detalj {
  flex: 0 0 auto; max-height: 45vh; overflow-y: auto; margin-top: var(--space-14);
}

/* F6a: Anbefalt som to-panels arbeidsflate */
.kort-krop-arbeid { padding-right: 0 !important; }
/* §365 (Til vurdering-migrering — se BEGRENSNINGER §365): `.arbeid`/
   `.arbeid-ko`/`.arbeid-sak`/`.arbeid-rad` (wrapperen og selve raden) er
   FJERNET — komponentens egne `.md-split`/`.md-liste-split`/`.md-sak-
   split`/`.md-rad` erstatter dem (ingen annen bruker fantes, bekreftet
   med grep før sletting, samme disiplin §364 fulgte for `.vakt-*`).
   `.arbeid-chip`/`.arbeid-tick`/`.arbeid-hv`/`.arbeid-kontekst`/
   `.arbeid-lenke` (sistnevnte har en ANNEN, fortsatt levende bruker i
   baksiden.js) LEVER VIDERE uendret navn — kun innholdet INNI radBygger/
   detaljBygger, ikke disse sub-element-klassene.
   .kort-krop er display:block (ikke flex, ulikt #banen/#loftestanga/
   #vaktliste-full som alle ER egne flex-kolonner) — .md-split sin egen
   flex:1 1 auto er dermed en no-op her. Den gamle `.arbeid` brukte derfor
   height:100% i stedet for flex — samme løsning videreført, skalert ned
   til KUN dette ene kortet (ikke .md-split generelt, som fortsatt trenger
   flex:1 1 auto for sine seks andre, ekte-flex-kolonne-brukere). */
.kort[data-kort="anbefalt"] .md-split { height: 100%; }
.arbeid-chip {
  font-family: var(--mono); font-size: var(--fs-min); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; padding: var(--space-2) var(--space-6); border-radius: 2px;
  background: var(--bg-soft); color: var(--text-soft); flex-shrink: 0;
}
.arbeid-chip.n1 { background: var(--accent-bg); color: var(--accent); }
.arbeid-chip.haster, .arbeid-chip.skeptisk { background: var(--down-bg); color: var(--down); }
.arbeid-tick { font-family: var(--mono); font-weight: 600; flex-shrink: 0; }
/* §365: samme dual-purpose-fiks §346/§364 ga .rangert-navn/.vakt-navn da
   DE flyttet inn i .md-rad (flex) — uten flex:1/min-width:0 ville ulik
   chip-/ticker-bredde pr. rad gjort listen synlig skjev (tidligere
   .arbeid-rad sin grid-kolonne minmax(0,1fr) ga dette gratis). */
.arbeid-hv { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.md-liste-split .sak-arkiv { margin-top: var(--space-8); }
.arbeid-kontekst {
  margin-top: var(--space-20); padding-top: var(--space-14); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-12);
}
.arbeid-ordre > summary {
  cursor: pointer; list-style: none; font-size: var(--fs-merke);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: var(--space-4) 0;
}
.arbeid-ordre > summary::-webkit-details-marker { display: none; }
.arbeid-ordre > summary::before { content: "▸ "; }
.arbeid-ordre[open] > summary::before { content: "▾ "; }
.arbeid-ordre .form-rad { margin-top: var(--space-10); }
/* §309/§311 gjorde denne om fra en <a> til en ekte <button> (for å
   utvide inline i stedet for å navigere) — men uten et reset arvet den
   nettleserens native knapp-utseende (grå bakgrunn, "outset"-kant,
   sentrert tekst). `.arbeid-kontekst` sin egen `display:flex; flex-
   direction:column` strekker i tillegg ALLE flex-barn til full bredde
   som standard (`align-items:stretch`) — `align-self:flex-start` (samme
   fiks som `.vakt-aapne` allerede hadde) melder knappen ut av den
   strekkingen. Jens, mot ekte data: "det er ustabilt". */
.arbeid-lenke {
  font-size: var(--fs-brod); color: var(--accent); text-decoration: none;
  appearance: none; background: none; border: none; padding: 0; margin: 0;
  width: auto; text-align: left; font-family: inherit; cursor: pointer; align-self: flex-start;
}
.arbeid-lenke:hover { text-decoration: underline; }
/* §365: samme §202-ønske (info øverst på mobil, FØR køen) dekkes nå av
   .md-split sin egen, generiske mobil-regel (`.md-sak-split{order:-1;…}`,
   under i filen) — men den satte `.md-split{height:auto}` på mobil, mens
   `.kort[data-kort="anbefalt"] .md-split{height:100%}` (over) har høyere
   spesifisitet (attributt-selector) og ville vunnet uansett filrekkefølge
   og brutt mobil-stablingen. Reverter eksplisitt tilbake til auto her —
   samme "sjekk cascaden, ikke anta trygt"-lærdom §361 sin border-bug ga. */
@media (max-width: 880px) {
  .kort[data-kort="anbefalt"] .md-split { height: auto; }
}
body[data-flate="dybde"] .flate-kort .kort-skjema { display: block; }
body[data-flate="dybde"] .flate-kort .kort-skjema.form-rad { display: flex; }
.dybde-info {
  font-size: var(--fs-merke); line-height: 1.55; color: var(--text-soft);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r);
  border-left: 3px solid var(--line-strong);
  padding: var(--space-10) var(--space-14); margin-bottom: var(--space-16); max-width: 82ch;
}
body[data-flate="dybde"] .kort-krop:empty { display: none; }
.dybde-info[hidden] { display: none; }

/* F1: modulhode + sammenleggbar forklaring/terskler.
   Vises kun i Dybde; ligger ellers latent i DOM-en. */
.dybde-hode, .dybde-info-detalj, .terskel-detalj { display: none; }
body[data-flate="dybde"] .dybde-hode { display: block; margin-bottom: var(--space-16); }
body[data-flate="dybde"] .dybde-info-detalj { display: block; margin-bottom: var(--space-20); }
body[data-flate="dybde"] .dybde-info-detalj[hidden] { display: none; }
body[data-flate="dybde"] .terskel-detalj { display: block; margin-top: var(--space-24); }
/* forankret hjørne: tittel venstre, «les opp» høyre — samme rad uansett om
   modulen har ferskhetsdata eller ikke (jf. .kort-topp på Dekk-flisa). */
.dybde-hode-topp {
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
}
.dybde-h1 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); margin: 0; text-wrap: balance;
}
/* §663: sidehodet er én linje (☰ tittel · «Du er her» · les opp · ⓘ); innledningen ligger bak ⓘ og er lukket fra start. */
body[data-flate="dybde"] .dybde-hode { margin-bottom: var(--space-8); }
.dybde-hode-topp .du-er-her { flex: 1 1 22rem; margin: 0; padding: 0; border: 0; background: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-14); }
.dybde-hode-topp .du-er-her-merke { display: none; }
.dybde-hode-topp .du-er-her-rad { gap: var(--space-4) var(--space-12); }
.dybde-hode-topp .du-er-her-andre { display: none; }
.dybde-hode.intro-apen .dybde-hode-topp .du-er-her-andre { display: flex; flex: 1 1 100%; }
.dybde-intro { display: none; padding-top: var(--space-8); }
.dybde-hode.intro-apen .dybde-intro { display: block; }
.kort[data-intro="lukket"] > .dybde-info-detalj { display: none; }
body[data-flate="dybde"] .flate-topp { display: none; }
/* §665: Dashbord uten graf har ingenting i panelet under verktøylinja — da skal det heller ikke ta plass (et tomt bånd over flisene) */
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) #hendelsesforlop.skjult ~ .utvalg-panel, body[data-flate="dybde"] #hendelsesforlop.skjult ~ .utvalg-panel { display: none; }
/* §668: rutenettet har fire rader med mellomrom; med skjult graf og skjult panel ga de to tomme radene 24 px luft over flisene (Dashbord og Dybde), mens Lister gikk helt opp til velgeren */
body.arbeidsflate[data-graf="skjult"]:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold, body.arbeidsflate[data-graf="skjult"][data-flate="dybde"] .innhold { row-gap: 0; }
body.arbeidsflate[data-graf="skjult"]:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .vis.aktiv, body.arbeidsflate[data-graf="skjult"][data-flate="dybde"] .vis.aktiv { margin-top: var(--space-8); }
body[data-flate="dybde"][data-meny="skjult"] [data-vis="flate"].aktiv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kort"; }
body[data-flate="dybde"][data-meny="skjult"] .modul-nav { display: none; }
.dybde-meny-bryter, .dybde-info-knapp {
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-liten); color: var(--text-soft);
  font: inherit; font-size: var(--fs-data); padding: var(--space-4) var(--space-10); cursor: pointer; line-height: 1.3;
}
.dybde-meny-bryter:hover, .dybde-info-knapp:hover { border-color: var(--accent); color: var(--accent); }
.dybde-info-knapp[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
/* §809: egen klasse (ikke .dybde-info-knapp) — samme knappe-utseende, men en <a>, og en egen
   klasse holder den unik for tester/kode som leter opp ⓘ-knappen via .dybde-info-knapp. */
.dekk-snu-knapp {
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-liten); color: var(--text-soft);
  font: inherit; font-size: var(--fs-data); padding: var(--space-4) var(--space-10); line-height: 1.3;
  text-decoration: none; display: inline-block; cursor: pointer;
}
.dekk-snu-knapp:hover { border-color: var(--accent); color: var(--accent); }
.dybde-under {
  margin: var(--space-4) 0 0; font-size: var(--fs-brod); color: var(--text-soft); max-width: 74ch;
}
/* §189: Radar → Fangst → Vaktlista → Til vurdering, gjort synlig som ÉN
   rangeringskjede der den faktisk gjelder. Flate kort/piler, ingen skygge —
   samme visuelle familie som .eier-chip/.styrker-chip. */
.modulflyt {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-6);
  margin: var(--space-10) 0 0; font-size: var(--fs-merke);
}
.modulflyt-pil { color: var(--text-faint); }
.modulflyt-steg {
  display: flex; align-items: baseline; gap: var(--space-6);
  padding: var(--space-2) var(--space-8); border-radius: var(--r-liten);
  border: 1px solid var(--line-strong); color: var(--text-soft);
  text-decoration: none;
}
a.modulflyt-steg:hover { border-color: var(--accent); color: var(--accent); }
.modulflyt-steg.aktiv {
  border-color: var(--accent); background: var(--accent-bg); color: var(--accent);
}
.modulflyt-navn { font-weight: 600; }
.modulflyt-verb { opacity: 0.75; font-style: italic; }

.dybde-info-detalj > summary, .terskel-detalj > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: var(--fs-merke); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-faint); padding: var(--space-4) 0;
}
.dybde-info-detalj > summary::-webkit-details-marker,
.terskel-detalj > summary::-webkit-details-marker { display: none; }
.dybde-info-detalj > summary::before,
.terskel-detalj > summary::before { content: "▸ "; }
.dybde-info-detalj[open] > summary::before,
.terskel-detalj[open] > summary::before { content: "▾ "; }
.dybde-info-detalj > summary:hover, .terskel-detalj > summary:hover { color: var(--accent); }
.dybde-info-tekst {
  margin: var(--space-8) 0 0; font-size: var(--fs-merke); line-height: 1.6;
  color: var(--text-soft); max-width: 82ch;
}
.terskel-detalj .terskel-strip { margin: var(--space-10) 0 0; }

/* terskel-steppere (DB-styrbar radar-/rangeringskonfig) */
.terskel-strip {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--space-12) var(--space-14); margin-bottom: var(--space-16); max-width: 82ch;
}
.terskel-strip .section-title.mini { margin: 0 0 var(--space-10); }
.terskel-rad { display: flex; flex-wrap: wrap; gap: var(--space-20) var(--space-24); }
.terskel-felt { display: flex; flex-direction: column; gap: var(--space-6); }
.terskel-navn { font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.terskel-std { font-size: var(--fs-min); color: var(--text-faint); }
.stepper { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-liten); overflow: hidden; align-self: flex-start; }
.stepper button {
  font: inherit; width: 26px; border: 0; background: var(--bg); color: var(--text-soft); cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: var(--accent-bg); color: var(--accent); }
.stepper button:disabled { color: var(--line-strong); cursor: default; }
.stepper-v {
  min-width: 40px; text-align: center; font-family: var(--mono); font-size: 13px; font-weight: 600;
  border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong);
  padding: var(--space-4) 0; background: var(--bg);
}
.stepper-v.endret { color: var(--accent); }
.terskel-strip .mini-knapp { margin-top: var(--space-12); }
.terskel-note {
  margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-merke); color: var(--text-faint);
}
body:not(.redigering) .terskel-strip .stepper button,
body:not(.redigering) .terskel-strip .mini-knapp { opacity: .5; pointer-events: none; }

/* Styring-modul — fyller flaten i kolonner på brede skjermer */
.kort-krop.styring,
body[data-flate="dybde"] .kort-krop.styring {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0 48px; align-content: start;
}
.styring-blokk { padding: var(--space-16) 0; border-top: 1px solid var(--line); }
.styring-blokk:first-of-type { border-top: 0; padding-top: 0; }
.styring-blokk .section-title.mini { margin-top: 0; }
.styring-blokk .tempo-naa {
  margin-left: auto; font-family: var(--mono); font-size: var(--fs-data);
  font-weight: 600; color: var(--text);
}
.styring-gruppe-skille {
  grid-column: 1 / -1;
  margin-top: var(--space-24);
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint);
}
.styring-gruppe-skille:first-child { margin-top: 0; }
/* §185 (Fase 6.4): Davids lag — full oversikt */
.lag-gruppe { margin-top: var(--space-16); }
.lag-gruppe:first-child { margin-top: var(--space-6); }
.lag-gruppe-navn {
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-faint); margin-bottom: var(--space-4);
}
.lag-rad {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10); flex-wrap: wrap;
  padding: var(--space-6) var(--space-2); border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; font-size: var(--fs-brod);
}
.lag-rad:last-child { border-bottom: 0; }
a.lag-rad:hover .lag-navn { color: var(--accent); }
.lag-navn { color: var(--text); flex: 1; min-width: 160px; }
.lag-interaksjon { font-size: var(--fs-merke); color: var(--text-faint); white-space: nowrap; }
.lag-interaksjon.lag-i-din { color: var(--accent); }
.lag-interaksjon.lag-i-styrker { color: var(--warn); }
.lag-interaksjon.lag-i-personlig { font-style: italic; }
.lag-grunnrate { font-size: var(--fs-merke); color: var(--text-faint); white-space: nowrap; min-width: 90px; text-align: right; }
.lag-grunnrate.lag-g-ja { color: var(--up); }
.lag-grunnrate.lag-g-delvis { color: var(--warn); }

.instr-liste { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-6); }
.instr-rad {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-10);
  padding: var(--space-8) var(--space-2); border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; font-size: var(--fs-brod);
}
.instr-rad:last-child { border-bottom: 0; }
.instr-rad:hover .instr-navn { color: var(--accent); }
.instr-navn { color: var(--text); }
.instr-antall { color: var(--text-faint); font-size: var(--fs-merke); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mandat-lag { display: flex; flex-direction: column; gap: var(--space-8); margin: var(--space-4) 0 var(--space-10); }
.mandat-rad {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--space-12);
  font-size: var(--fs-brod); line-height: 1.5;
}
.mandat-rad b { color: var(--text); font-weight: 600; }
.mandat-rad span { color: var(--text-soft); }
.pipeline-liste { display: flex; flex-direction: column; margin-top: var(--space-8); }
.pipeline-rad {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-10);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-data);
}
.pipeline-rad:last-child { border-bottom: 0; }
.pipeline-navn { color: var(--text); }
.pipeline-sist { color: var(--text-soft); font-size: var(--fs-merke); white-space: nowrap; }
.pipeline-kadens { color: var(--text-faint); font-family: var(--mono); white-space: nowrap; font-size: var(--fs-merke); }

/* Modell-lag */
.modell-liste { display: flex; flex-direction: column; margin-top: var(--space-8); }
.modell-rad {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8) 0; border-bottom: 1px solid var(--line);
}
.modell-rad:last-child { border-bottom: 0; }
.modell-topp { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.modell-navn { font-size: var(--fs-data); color: var(--text); font-weight: 600; }
.modell-pill {
  font-size: var(--fs-min); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  padding: 1px var(--space-6); border-radius: 2px; border: 1px solid var(--line-strong); color: var(--text-soft);
}
.modell-pill.m-sonnet { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.modell-driver { font-size: var(--fs-merke); color: var(--text-faint); line-height: 1.4; }
.modell-live { font-size: var(--fs-merke); color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* §193: ekte, målt API-kostnad (ai_forbruk) — under proxy-tellingene over */
.modell-kost { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--line); }
.modell-kost-liste { display: flex; flex-direction: column; margin-top: var(--space-6); }
.modell-kost-rad {
  display: flex; justify-content: space-between; gap: var(--space-10);
  padding: var(--space-4) 0; font-size: var(--fs-merke);
}
.modell-kost-navn { color: var(--text-soft); font-family: var(--mono); }
.modell-kost-usd { color: var(--text); font-variant-numeric: tabular-nums; }

/* §211: forsyningsgrad — måler forbruk mot selvsatt budsjett, aldri en garanti */
.ai-forsyning { margin-top: var(--space-8); font-variant-numeric: tabular-nums; }
.ai-forsyning-hoy { color: var(--warn); }
.ai-forsyning-full { color: var(--down); font-weight: 600; }

/* §211: egen AI-nøkkel-tilkobling — aldri viser mer enn siste4/lagret-tidspunkt */
.ai-nokkel-rad {
  display: flex; align-items: baseline; gap: var(--space-10); flex-wrap: wrap;
  padding: var(--space-6) 0; font-size: var(--fs-brod);
}
.ai-nokkel-navn { color: var(--text); font-weight: 600; }
.ai-nokkel-siste4 { color: var(--text-soft); font-family: var(--mono); }

/* §724: EODHD-abonnement (Styring) */
.eodhd-hode { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap; padding: var(--space-6) 0; font-size: var(--fs-brod); min-width: 0; }
.eodhd-linje { margin: 0; font-size: var(--fs-brod); overflow-wrap: anywhere; min-width: 0; }
.eodhd-dager { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); max-width: 22rem; }
.eodhd-dag { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-10); padding: var(--space-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-brod); }
.eodhd-dag .tall { font-variant-numeric: tabular-nums; text-align: right; }

/* David-puls: ferskhets-prikk */
.pipeline-prikk { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--line-strong); }
.puls-ok .pipeline-prikk { background: var(--up); }
.puls-sen .pipeline-prikk { background: var(--warn); }
.puls-kritisk .pipeline-prikk { background: var(--down); }
.puls-sen .pipeline-sist { color: var(--warn); }
.puls-kritisk .pipeline-sist { color: var(--down); }
.hode-fersk {
  display: inline-flex; align-items: center; gap: var(--space-6); margin-top: var(--space-6);
  font-size: var(--fs-merke); color: var(--text-soft);
}
.hode-fersk.puls-sen { color: var(--warn); }
.hode-fersk.puls-kritisk { color: var(--down); }

/* F4: Sammenlign — 2–4 fulgte selskaper side om side */
.saml-velg { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-20); }
.saml-chip {
  font-family: var(--mono); font-size: var(--fs-data); font-weight: 600;
  padding: var(--space-6) var(--space-10); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft); cursor: pointer;
}
.saml-chip:hover { border-color: var(--accent); color: var(--text); }
.saml-chip.paa { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
/* §208: «Banen»/«Utsalget» — omgjort fra en spredt kort-rutenett til samme
   rangerte, skumlesbare radliste-mønster som Vaktlista (.vakt-rad/.vakt-sum)
   bruker (Jens: "masse kort strødd utover og vanskelig å se nytte" — "kan
   vi samkjøre, rangere og holde det enkelt... som ellers anvendt design").
   Delt mellom begge modulene, ikke duplisert pr. modul. */
/* §254-oppfølging #5: samme "1fr-kolonne strekker seg til kanten av en
   bred Dybde-side"-mønster som .pos-konsentrasjon-liste — navn-kolonnen
   (1fr) i .rangert-sum sitt grid åt opp all ledig plass, og dyttet
   chip/status til den ALLER ytterste kanten. Delt av Beholdningen/Banen/
   Utsalget (§208, «samme design» — se .beholdning-panel sin kommentar),
   så fikses her ÉN gang, ikke pr. side. Samme 460px som allerede
   etablert to steder over (.pos-samlet-graf/.pos-konsentrasjon-liste).*/
/* §320-oppfølging: .banen-kort/.utsalget-kort (de gamle <details>-kort-
   klassene) og .rangert-liste (deres flate wrapper) fjernet — Banen og
   Utsalget er nå master-detail (.rangert-split m.fl., over), ingen JS
   bygger disse klassenavnene lenger. .beholdning-rad (Posisjoner) er
   fortsatt en ekte <details> og urørt. */
.beholdning-rad, .rangert-kort { border-bottom: 1px solid var(--line); }
.beholdning-rad[open] { background: var(--blue-bg); border-radius: var(--r-liten); }
.banen-kort--notert { border-left: 2px solid var(--accent); }
/* Ståsted (Etappe 4): .rangert-kort er en vanlig <div>, ikke en <details> —
   .rangert-sum sin arvede cursor:pointer/list-style gjelder egentlig et
   ekte <summary> (Banen/Utsalget/Beholdningen); nullstill den her så den
   ikke later som raden er klikkbar når den ikke er det. */
.rangert-kort > .rangert-sum { cursor: default; }
.rangert-sum {
  display: grid; grid-template-columns: 28px minmax(52px, auto) minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-6); cursor: pointer;
  font-size: var(--fs-data); list-style: none;
}
.rangert-sum::-webkit-details-marker { display: none; }
/* §346-oppfølging (Etappe A2): .rangert-rang/-navn sitt kolonne-oppsett
   kom fra .rangert-sum sin grid (28px | auto | 1fr | auto | auto) — men
   masterDetailListe() sin .md-rad (§345) er flex, ikke grid (en generisk
   komponent kan ikke anta akkurat 5 barn i denne rekkefølgen for ALLE
   fremtidige moduler). min-width her er en no-op i den gamle
   .rangert-sum-grid-konteksten (Banen/Utsalget, uendret), og gir en
   stabil rang-bredde + navnet plassen som faktisk er igjen inni .md-rad
   (Løftestanga/Peileren) — uten dette ville ulik rang-/tickerbredde per
   rad gjort listen synlig skjev, noe ingen enhetstest fanger. */
.rangert-rang { font-family: var(--mono); font-size: 11px; color: var(--text-faint); min-width: 22px; }
.rangert-sum .selskap-lenke { font-family: var(--mono); font-weight: 600; }
.rangert-navn {
  color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.rangert-tag {
  font-size: var(--fs-merke); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--accent-bg); border-radius: var(--r-liten); padding: 1px var(--space-8);
  white-space: nowrap;
}
/* §346-oppfølging: flex-shrink:0 sammen med .rangert-navn sin nye flex:1
   over — kun navnet skal krympe/ellipsere i .md-rad sin flex-rad, aldri
   selve tallet. No-op i den gamle .rangert-sum-grid-konteksten. */
.banen-tall { font-size: var(--fs-merke); color: var(--text-faint); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rangert-detalj { padding: var(--space-4) var(--space-10) var(--space-12) 34px; display: flex; flex-direction: column; gap: var(--space-8); }
/* §346 (Løftestanga/Peileren sine nye detalj-paneler, masterDetailListe()):
   ticker+navn litt mer fremtredende enn de flate listeradene under. */
.rangert-navn-stor {
  display: flex; align-items: baseline; gap: var(--space-6); margin: 0;
  font-size: var(--fs-brod); font-weight: 600;
}
.rangert-navn-stor .selskap-lenke { font-family: var(--mono); font-size: var(--fs-brod); }

/* §320-oppfølging (Etappe 5): Banen/Utsalget master-detail, samme mønster
   §289 bygget for Vaktlista — DELT mellom de to her (i stedet for å
   duplisere .vakt-split sin layout-mekanikk enda to ganger), siden Banen
   og Utsalget allerede deler .rangert-*-vokabularet over (§208). Samme
   flex-fix som #vaktliste-full (§289 sitt "reelt funn under bygging" —
   se den kommentaren): #banen/#utsalget må selv være ekte flex-kolonner
   som fyller .kort-krop sin høyde, ellers scroller hele stripa som ÉN
   enhet i stedet for kolonnene uavhengig. */
#banen, #utsalget { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* .rangert-detalj sin 34px venstre-innrykk var for en <details>-markør —
   feil i en frittstående detalj-KOLONNE. Nullstilt her, resten av
   .rangert-detalj (flex/gap) beholdt uendret. */
.rangert-sak-panel { padding-left: var(--space-10); }
/* Samme reset som .vakt-aapne/.arbeid-lenke (§309/§313) — delt her siden
   Banen OG Utsalget begge trenger nøyaktig samme "utvid X →"-knapp. */
.rangert-utvid {
  font-size: var(--fs-brod); color: var(--blue); align-self: flex-start;
  appearance: none; background: none; border: none; padding: 0; margin: 0;
  display: inline; width: auto; text-align: left; font-family: inherit; cursor: pointer;
}
.rangert-utvid:hover { text-decoration: underline; }
@media (max-width: 880px) {
  #banen, #utsalget { display: block; height: auto; }
  .rangert-split { grid-template-columns: minmax(0, 1fr); flex: none; height: auto; }
  .rangert-sak-split {
    order: -1; border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-14); margin-bottom: var(--space-12);
  }
  .rangert-sak-split { overflow: visible; }
}

/* §191: Vaktlista-rangering på Banen-radens detalj. */
.banen-rang {
  font-size: var(--fs-merke); font-family: var(--mono); color: var(--text-soft);
  width: fit-content;
}
.sammenfall-rad { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-2); }
.sammenfall-stripe { display: flex; gap: var(--space-2); }
.sammenfall-dag {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--bg-sink); border: 1px solid var(--line);
}
.sammenfall-dag.paa { background: var(--accent); border-color: var(--accent); }
.sammenfall-tekst { font-size: var(--fs-merke); color: var(--text-faint); }

/* §208: samme dag-for-dag-stripe-idé som sammenfall (§191), egen tabell/
   egne klasser med vilje — ulikt konsept (Utsalget-ferskhet, ikke
   Banen×Vaktlista-krysning). "I bevegelse... fra dag til dag", Jens. */
.utsalget-fersk-rad { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-2); }
.utsalget-fersk-stripe { display: flex; gap: var(--space-2); }
.utsalget-fersk-dag {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--bg-sink); border: 1px solid var(--line);
}
.utsalget-fersk-dag.paa { background: var(--accent); border-color: var(--accent); }
.utsalget-fersk-tekst { font-size: var(--fs-merke); color: var(--text-faint); }

/* §243: kohort-ekstremitet i Makrobilde — samme dag-for-dag-stripe-idé som
   Utsalget/Sammenfall over, egne klasser (ulikt konsept: sektor-nivå
   klumping, ikke ett selskap). */
.kohort-ekstrem { margin-top: var(--space-14); }
.kohort-ekstrem-rad {
  border: 1px solid var(--line); border-radius: var(--r-liten);
  padding: var(--space-8) var(--space-10); margin-bottom: var(--space-8);
}
.kohort-ekstrem-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); }
.kohort-ekstrem-navn { font-weight: 600; }
.kohort-ekstrem-fersk-rad { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-4); }
.kohort-ekstrem-fersk-stripe { display: flex; gap: var(--space-2); }
.kohort-ekstrem-fersk-dag {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--bg-sink); border: 1px solid var(--line);
}
.kohort-ekstrem-fersk-dag.paa { background: var(--accent); border-color: var(--accent); }
.kohort-ekstrem-fersk-tekst { font-size: var(--fs-merke); color: var(--text-faint); }

.saml-grid {
  display: grid; gap: var(--space-14);
  grid-template-columns: repeat(var(--saml-n, 2), minmax(0, 1fr));
}
.saml-kort {
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-14) var(--space-16);
  display: flex; flex-direction: column;
}
.saml-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-10); }
.saml-hd .selskap-lenke { font-family: var(--mono); font-weight: 600; font-size: 15px; }
.saml-navn { color: var(--text-soft); font-size: var(--fs-merke); }
.saml-status {
  font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .04em;
  padding: 1px var(--space-6); border-radius: 2px; background: var(--bg-soft); color: var(--text-soft);
}
.saml-status.aktiv { background: var(--accent-bg); color: var(--accent); }
.saml-rad {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-10);
  padding: var(--space-8) 0; border-top: 1px solid var(--line); font-size: var(--fs-data);
}
.saml-lab {
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--fs-merke); flex-shrink: 0;
}
.saml-v { text-align: right; font-variant-numeric: tabular-nums; }
.saml-chg-w, .saml-sig-w { display: inline-flex; align-items: center; gap: var(--space-6); }
.saml-chg.up, .saml-ur.up { color: var(--up); }
.saml-chg.down, .saml-ur.down { color: var(--down); }
.saml-rad-funn { flex-direction: column; align-items: stretch; }
.saml-rad-funn .saml-v { text-align: left; }
.saml-funn-top { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-4); }
.saml-funn-d { font-family: var(--mono); font-size: var(--fs-merke); color: var(--text-soft); }
.saml-funn-d.faint { color: var(--text-faint); }
.saml-funn-t {
  margin-top: var(--space-4); color: var(--text-soft); line-height: 1.45;
  max-height: calc(1.45em * 3); overflow: hidden;   /* §334: se .dekk-sum */
  flex-shrink: 0;   /* §334: .saml-rad-funn er en flex-kolonne */
}
@media (max-width: 760px) { .saml-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 480px) { .saml-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 880px) {
  .mandat-rad { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .pipeline-rad { flex-direction: column; gap: var(--space-2); }
}

@media (max-width: 880px) {
  body[data-flate="dybde"] { overflow: visible; }
  body[data-flate="dybde"] [data-vis="flate"].aktiv {
    display: block; height: auto; overflow: visible;
  }
  body[data-flate="dybde"] #flate-kort { overflow: visible; }
  body[data-flate="dybde"] .flate-kort > .kort:not([hidden]) { display: block; height: auto; }
  body[data-flate="dybde"] .kort-krop { flex: none; overflow: visible; padding-right: 0; }
  body[data-flate="dybde"] .terskel-detalj { max-height: none; overflow: visible; }
  body[data-flate="dybde"] .modul-nav {
    position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: var(--space-14); overflow: visible;
  }
}

/* ==================== DEKK — fast instrumentbrett ==================== */
.flis-krop { display: none; }

body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) { overflow: hidden; }
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold { max-width: none; margin: 0; padding: var(--space-12) var(--space-20); }
/* §221: «⊞ oversikt» (.flate-tilbake) er dybde-only — skjult som standard
   (linje ~655) og vist igjen KUN i dybde/baksiden-modus (linje ~718), så
   den forblir skjult i dekk-modus helt av seg selv — ingen egen regel
   trengs her for den. §386: raden (.flate-topp) skjules derimot IKKE
   lenger i sin helhet — den har nå et ekte, synlig "Dashbord"-navn
   (.kort-tittel) + en egen lenke tilbake til forsiden/terminalen
   (.flate-forside-lenke, ALDRI skjult — se egen regel) siden Jens var
   forvirret over at det ikke fantes noen synlig vei derfra.
   `settDekkHoyde()` (dekk.js) måler `#flate-kort` sin reelle
   `getBoundingClientRect().top` DYNAMISK — en nå synlig rad her krymper
   --dekk-h riktig helt av seg selv, ingen egen justering trengs (samme
   prinsipp som §233 selv). */
/* §547 (Jens: «Dashbord / Terminal 2 ganger»): på selve Dashbord-flaten er raden «⊞ oversikt · Dashbord · ← terminal» overflødig — bryteren øverst (Dashbord | Terminal) gir både navnet og veien til
   forsiden. Skjules BARE i dekk-modus (dybde-sidene og Baksiden beholder raden: «⊞ oversikt» bor der). Elementet ligger fortsatt i DOM, og settDekkHoyde() måler #flate-kort sin reelle topp, så flisene
   vokser av seg selv (~40 px). */
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .flate-topp { display: none; }
.flate-forside-lenke {
  text-decoration: none; color: var(--text-soft);
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line-strong); border-radius: var(--r-liten); padding: var(--space-4) var(--space-10);
}
.flate-forside-lenke:hover { border-color: var(--accent); color: var(--accent); }
/* §295 (Jens: "ta bort muligheten til å tilpasse decket... oppstill
   instrumentpanelet etter mest hensiktsmessig måte og prioritering"):
   ETT fast oppsett — ingen dra-og-slipp, ingen S/M/L, ingen synlighets-
   valg. Rekkefølge/størrelse er nøyaktig §267/269s allerede besluttede
   standardverdier (FLATE_KORT), nå PERMANENTE i stedet for justerbare.
   Et eksplisitt `grid-template-areas` erstatter den gamle 12-kolonners
   "dense"-masonryen (3 baner à 4 kol, CSS-pakket + JS-simulert
   containerhøyde) — med et kjent, fast sett trengs ingen pakke-
   simulering lenger.
   §296 (Etappe D, Jens: "Peileren er også en flis... plassert der den
   gir best virkning"): en 6. flis brøt §295s 5-flis/3-kolonners oppsett
   (der Vaktlista alene spente hele kolonnehøyden, §223). Et jevnt 3×2
   er riktigere med seks like viktige fliser — ingen enkelt flis trenger
   lenger dobbel høyde. Topprad = "vurdering" (hvor du står / hva
   beveger seg / hva er verdt et blikk), bunnrad = "handling" (det du
   eier / Peilerens tvungne tidspunkt-kall / hva som kommer). Vaktlista
   går fra "stor" til "medium" (samme tak som Posisjoner) som eneste
   synlige bivirkning. */
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) #flate-kort {
  height: calc(100vh - 200px);           /* overstyres presist av JS (--dekk-h) */
  height: var(--dekk-h, calc(100vh - 200px));
  overflow: hidden;
  display: grid;
  gap: var(--space-10);
}
body[data-flate="dekk"] #flate-kort {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, var(--dekk-rad-h, minmax(60px, 1fr)));
  grid-template-areas:
    "staasted   vaktliste  anbefalt"
    "posisjoner marked     kommende";
}
/* §883 (Jens: "vinduet er så smalt... flisene under; teksten blir skjøvet ut av posisjon.
   Halvert."): Dashbord i side-modus (graf venstre, liste høyre, §883 skjermmodi.js) — samme
   seks grid-area-navn, 2×3 i stedet for 3×2 siden kolonnen nå er smalere enn hele skjermen.
   Status og Til vurdering (de mest tidssensitive) øverst. Ingen HTML/JS-endring — kun hvilken
   celle hvert allerede-navngitte område havner i. */
body.arbeidsflate[data-retning="side"][data-flate="dekk"] #flate-kort {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, var(--dekk-rad-h, minmax(60px, 1fr)));
  grid-template-areas:
    "staasted   anbefalt"
    "vaktliste  posisjoner"
    "marked     kommende";
}
/* §780: Analyse — 7 fliser, 4 kolonner × 2 rader (Lignende saker dobbeltbred i siste rad, ingen tom celle). */
body[data-flate="analyse"] #flate-kort {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, var(--dekk-rad-h, minmax(60px, 1fr)));
  grid-template-areas:
    "radar        fangst     banen       loftestanga"
    "nyheter      sammenlign likhetsok   likhetsok";
}
/* §884 (samme konsekvens-prinsipp som §883: Analyse/Drift fulgte samme "alltid stablet"-grense
   som Dashbord hadde): 2 kolonner × 4 rader — Lignende saker beholder sin dobbeltbrede
   siste-rad-plass, bare rotert fra en bred til en smal kolonne. */
body.arbeidsflate[data-retning="side"][data-flate="analyse"] #flate-kort {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, var(--dekk-rad-h, minmax(60px, 1fr)));
  grid-template-areas:
    "radar      fangst"
    "banen      loftestanga"
    "nyheter    sammenlign"
    "likhetsok  likhetsok";
}
/* §780: Drift — 3 fliser, én rad. */
body[data-flate="drift"] #flate-kort {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: var(--dekk-rad-h, minmax(60px, 1fr));
  grid-template-areas: "styring dommekraft spektrogram";
}
/* §884: 2 kolonner × 2 rader — Aktivitetskart (det mest visuelt tette kortet, et heatmap) får
   egen, full bredde i andre rad i stedet for å klemmes til én av tre smale kolonner. */
body.arbeidsflate[data-retning="side"][data-flate="drift"] #flate-kort {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, var(--dekk-rad-h, minmax(60px, 1fr)));
  grid-template-areas:
    "styring      dommekraft"
    "spektrogram  spektrogram";
}
/* §668: i arbeidsflata fyller flisene cellen i CSS (ikke en høyde regnet ut i JS som kan komme ut av takt med layouten og kutte nederste rad) */
body.arbeidsflate:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) [data-vis="flate"].aktiv { display: flex; flex-direction: column; }
body.arbeidsflate:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) #flate-kort { flex: 1 1 0; height: auto; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); }
/* §669: Dashbordets sidehode (samme oppbygning som Dybde-sidenes) */
#dekk-hode[hidden], body:not(:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"])) #dekk-hode { display: none; }
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) #dekk-hode { display: block; flex: 0 0 auto; margin-bottom: var(--space-8); }
.dekk-hode-sum { flex: 1 1 22rem; font-size: var(--fs-data); color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
body[data-flate="dekk"] .kort[data-kort="staasted"]   { grid-area: staasted; }
body[data-flate="dekk"] .kort[data-kort="vaktliste"]  { grid-area: vaktliste; }
body[data-flate="dekk"] .kort[data-kort="anbefalt"]   { grid-area: anbefalt; }
body[data-flate="dekk"] .kort[data-kort="posisjoner"] { grid-area: posisjoner; }
body[data-flate="dekk"] .kort[data-kort="marked"]     { grid-area: marked; }   /* §646: erstatter Nordisk og Global */
body[data-flate="dekk"] .kort[data-kort="kommende"]   { grid-area: kommende; }
/* §780: Analyse */
body[data-flate="analyse"] .kort[data-kort="radar"]       { grid-area: radar; }
body[data-flate="analyse"] .kort[data-kort="fangst"]      { grid-area: fangst; }
body[data-flate="analyse"] .kort[data-kort="banen"]       { grid-area: banen; }
body[data-flate="analyse"] .kort[data-kort="loftestanga"] { grid-area: loftestanga; }
body[data-flate="analyse"] .kort[data-kort="nyheter"]     { grid-area: nyheter; }
body[data-flate="analyse"] .kort[data-kort="sammenlign"]  { grid-area: sammenlign; }
body[data-flate="analyse"] .kort[data-kort="likhetsok"]   { grid-area: likhetsok; }
/* §780: Drift */
body[data-flate="drift"] .kort[data-kort="styring"]      { grid-area: styring; }
body[data-flate="drift"] .kort[data-kort="dommekraft"]   { grid-area: dommekraft; }
body[data-flate="drift"] .kort[data-kort="spektrogram"]  { grid-area: spektrogram; }
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .kort[data-kort] { position: relative; z-index: 1; }
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .kort {
  padding: var(--space-12) var(--space-14); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0;
}
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .kort-topp { margin-bottom: var(--space-8); padding-bottom: var(--space-8); }
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .kort-krop { display: none; }
/* §233-oppfølging (Jens, skjermbilde av Posisjoner: "avstanden... er ganske
   trang... litt knapt med luft"): «medium» — brukt av de fleste flisene,
   deriblant Posisjoner — var det ENESTE nivået uten sin egen gap i denne
   kolonnen (liten=3px, stor=7px var alt satt, §170). Ikke en bevisst
   0px-avgjørelse, bare det eneste leddet som aldri ble tunet — 5px fyller
   inn midt mellom de to eksisterende. Trygt nå som §218/§233s
   _fjernOverflyt() uansett trimmer på nytt mot den faktiske høyden hvis
   dette skulle presse en linje ut av en allerede stramt kalibrert flis. */
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .flis-krop { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; gap: var(--space-6); }

/* §170 (Fase 4.2, fiks): ekte oppløsning pr. størrelse — ikke bare strekk.
   To knep, fordi dekk-CSS-en er en blanding av to stiler:
   1) --fs-*-tokenene (--fs-brod osv.) brukes av mye av småteksten (navn,
      «hvorfor»-linjer, etiketter) — redefinert scoped til én flis-klasse,
      kaskaderer det automatisk UTEN å røre de enkeltreglene.
   2) Håndfullet STORE, hardkodede tall (tickeren i Til vurdering, sum-
      prosenten i Posisjoner, rank-tallet, Fangst-statistikken) leser i
      stedet `calc(Npx * var(--flis-skala))` — disse reglene er endret
      eksplisitt, se de enkelte `.dekk-*`-reglene lenger ned i fila.
   `flis-med` er uendret (globale verdier/skala 1 = dagens oppførsel).
   §295: kun de to størrelsene som faktisk finnes permanent (stor/medium)
   trenger en regel her nå — "liten" fantes bare som en justerbar
   S/M/L-verdi, ingen flis har den lenger. */
/* --flis-skala skalerer de STORE, hardkodede tallene som ikke går via
   --fs-*-tokenene (headline-tickeren, rank-tallet, sum-prosenten …) —
   se calc(...)-bruken lenger ned i fila. */
:root { --flis-skala: 1; }
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .flis-stor {
  --flis-skala: 1.2;
  --fs-tittel: 17px; --fs-brod: 14.5px; --fs-data: 13.5px; --fs-merke: 11.5px;
}
body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .flis-stor .flis-krop { gap: var(--space-8); }

/* Mobil: den faste 3-kolonners rutenettet er for trangt — stables til én
   kolonne som ruller naturlig, i FLATE_KORT sin faste rekkefølge (samme
   rekkefølge DOM-en allerede er skrevet i, §295 — ingen omordning
   nødvendig). Dekk = kompakte fliser fortsatt; «UTVID →» går til full liste. */
@media (max-width: 880px) {
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) { overflow: visible; }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) #flate-kort {
    display: flex; flex-direction: column; gap: var(--space-14);
    height: auto; overflow: visible;
  }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .flate-kort > .kort:not([hidden]) {
    height: auto; overflow: visible;
  }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .flis-krop { flex: none; overflow: visible; }
}

/* --- flis-widgets --- */
/* Grensesnitt-revisjon (skjermbilde-runde 1, §285): en tom flis beholder
   sin faste, stabile høyde (§233 — bevisst IKKE innholdsstyrt, for å
   unngå kryss-flis-kobling), så tomtilstanden må selv gi rommet den
   sentreres i mer visuell substans, i stedet for å se liten og forlatt
   ut i et stort tomrom. Sentreringen (margin: auto 0) var alt korrekt. */
.dekk-tom {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-10); text-align: center; margin: auto 0; padding: var(--space-10);
  color: var(--text-faint); font-size: var(--fs-data);
}
.dekk-tom-glyf { font-size: 28px; opacity: 0.5; line-height: 1; }
.dekk-tom-t { max-width: 32ch; line-height: 1.45; }
.dekk-tom-cta {
  margin-top: var(--space-4); font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); text-decoration: none; font-weight: 600;
  background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r-liten);
  padding: var(--space-6) var(--space-14);
}
.dekk-tom-cta:hover { background: var(--accent); color: var(--bg); }
.dekk-sak2 {
  display: flex; align-items: center; gap: var(--space-8); margin-top: var(--space-8); min-width: 0;
  font-size: var(--fs-merke);
}
.dekk-sak2 .selskap-lenke { font-family: var(--mono); font-weight: 600; flex-shrink: 0; }
.dekk-sak2-hv { color: var(--text-faint); min-width: 0; flex: 1 1 14ch; overflow-wrap: anywhere; }   /* §524: bryter heller enn å kutte med «…» */
.dekk-hold-rank { color: var(--text-faint); font-size: var(--fs-min); margin-right: 1px; }
.dekk-hodet { display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
/* §895: raden/hodet er nå klikkbar for å åpne/lukke selskapets graf (radGrafKlikkbar(),
   komponenter.js) — samme hover/fokus-formspråk som .md-rad/.handel-rad. */
.dekk-hodet, .dekk-lead-rad, .dekk-hold { cursor: pointer; border-radius: var(--r-liten); }
.dekk-hodet:hover, .dekk-lead-rad:hover, .dekk-hold:hover { background: var(--bg-sink); }
.dekk-hodet:focus-visible, .dekk-lead-rad:focus-visible, .dekk-hold:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dekk-hodet .selskap-lenke, .dekk-tick { font-family: var(--mono); font-weight: 600; font-size: calc(15px * var(--flis-skala)); }
.dekk-navn { color: var(--text-soft); font-size: var(--fs-brod); }
.dekk-chip {
  font-family: var(--mono); font-size: var(--fs-min); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: var(--space-2) var(--space-6); border-radius: 2px; background: var(--bg-soft); color: var(--text-soft);
}
.dekk-chip.n1 { background: var(--accent-bg); color: var(--accent); }
.dekk-chip.haster, .dekk-chip.skeptisk { background: var(--down-bg); color: var(--down); }
/* §897-899 (Etappe 4): denne er en midlertidig, klient-beregnet visning
   (rangeringen selv er ikke oppdatert før neste kjøring) - stiplet kant
   skiller den fra den vanlige, backend-beregnede skeptisk-chippen. */
.dekk-chip.vakt-chip-ferskdempet { border: 1px dashed var(--down); }
/* §334: -webkit-line-clamp/-webkit-box klipper ikke lenger pålitelig i
   moderne Chrome (bekreftet live) — fast makshøyde + overflow:hidden er
   motor-uavhengig og virker alltid. .tekst-klippet-fade/.er-klippet
   (komponenter.js: merkHvisTekstKlippet) legger på en svak nedtoning
   nederst, men KUN når teksten faktisk ble klippet. */
.tekst-klippet-fade { position: relative; }
.tekst-klippet-fade.er-klippet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.3em;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.dekk-sum {
  margin-top: var(--space-6); color: var(--text-soft); font-size: var(--fs-brod);
  line-height: 1.4; max-height: calc(1.4em * 5); overflow: hidden;   /* §524: 5 linjer (var 2); tilpassTekstTilBoks kutter ved et ordskille når det ikke er plass */
  /* §334: flisa er en flex-kolonne med FAST høyde (settDekkHoyde) - uten
     dette krymper flex sin standard flex-shrink:1 denne paragrafen langt
     under sin egen makshøyde når resten av innholdet ikke får plass,
     akkurat det som fikk teksten til å se avkuttet/uleselig ut. Skal noe
     vike når det er trangt, er det _fjernOverflyt() sin jobb å fjerne en
     HEL linje lenger ned (§218/§223), ikke å klemme denne i filler. */
  flex-shrink: 0;
}
.dekk-status { margin-top: var(--space-6); font-size: var(--fs-brod); line-height: 1.4; color: var(--text); flex-shrink: 0; }   /* §524: statusbrikken forklart i én setning */
.dekk-hvorfor { margin-top: var(--space-6); font-size: var(--fs-merke); color: var(--text-faint); }
.dekk-neste { margin-top: var(--space-6); font-size: var(--fs-merke); color: var(--text-faint); }
.dekk-neste-t { font-family: var(--mono); color: var(--text-soft); }
.dekk-ko { display: flex; align-items: flex-end; gap: var(--space-14); margin-top: auto; padding-top: var(--space-10); }
.dekk-ko-kol { display: flex; flex-direction: column; gap: var(--space-2); }
.dekk-ko-n { font-family: var(--mono); font-size: calc(15px * var(--flis-skala)); font-weight: 600; line-height: 1; }
.dekk-ko-n.null { color: var(--text-faint); }
.dekk-ko-kol.skeptisk .dekk-ko-n, .dekk-ko-kol.haster .dekk-ko-n { color: var(--down); }
.dekk-ko-l { font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.dekk-ko-rest {
  margin-left: auto; align-self: flex-end; white-space: nowrap;
  font-size: var(--fs-merke); color: var(--text-faint); text-decoration: none;
}
.dekk-ko-rest:hover { color: var(--accent); }

/* §296/§297: Peileren — EKSPLISITT §23-unntak (se BEGRENSNINGER §297).
   Jens ba om å fjerne det faste varselet (både fanen og Dekk-flisen) —
   forklaringen lever videre i "slik virker dette" (DYBDE_INFO.peileren),
   ikke som et tvunget synlig banner. .peiler-varsel/.peiler-dekk-varsel
   (den gamle, nå fjernede varsel-teksten) er derfor bevisst IKKE her
   lenger — ren død CSS uten en bruker i peiler.js. */
.peiler-dekk-kolonner { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-8) var(--space-16); align-items: start; }   /* §547: Nordisk og Global side om side når det er plass */
.peiler-dekk-kolonner > .peiler-dekk-gruppe { min-width: 0; }
.peiler-dekk-gruppe > .dekk-ko-l { display: block; margin-bottom: var(--space-2); }
.peiler-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-14);
  /* §345-oppfølging (Etappe A1): flex:1 1 auto/min-height:0 er en no-op med
     mindre forelderen selv er display:flex (§loftestanga sin nye
     flex-kolonne-fiks under) — så dette er trygt for Peileren også, som
     fortsatt har en vanlig blokk-forelder (#peileren) inntil Etappe A2. */
  flex: 1 1 auto; min-height: 0;
}
@media (max-width: 760px) { .peiler-grid { grid-template-columns: minmax(0, 1fr); } }
.peiler-panel { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.peiler-liste { min-width: 0; min-height: 0; flex: 1 1 auto; container: peiler / inline-size; }   /* §594: container-query her, ikke på panelet (layout-containment bryter subgrid) */
/* §594 (Jens 7. okt: «ujevn oppstilling … gridden på instrumentene har ideell utforming»): Nordisk og Global er to paneler med like deler (tittel, forklaring, Inn, Ut, tillit, listen). De delte radene (subgrid) gjør at hver del
   starter på samme høyde i begge panelene — før begynte Global-listen 134 px lavere enn Nordisk-listen fordi Inn/Ut-kortene var ulikt høye. Uten subgrid-støtte og på smal skjerm står panelene som før (flex-kolonne). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .peiler-grid { grid-template-rows: repeat(6, auto); column-gap: var(--space-14); row-gap: 0; }
    .peiler-panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: 1 / span 6; }
    .peiler-panel > .section-title { grid-row: 1; }
    .peiler-panel > .peiler-relativt { grid-row: 2; }
    .peiler-panel > .peiler-valg { display: contents; }
    .peiler-panel > .peiler-valg > .peiler-valg-kort:nth-child(1) { grid-row: 3; margin-top: var(--space-8); }
    .peiler-panel > .peiler-valg > .peiler-valg-kort:nth-child(2) { grid-row: 4; margin-top: var(--space-8); }
    .peiler-panel > .peiler-valg > .peiler-tillit { grid-row: 5; margin-bottom: var(--space-12); }
    .peiler-panel > .peiler-liste { grid-row: 6; }
    .peiler-panel > .meta:not(.peiler-relativt) { grid-row: 2; }   /* «Ingen data ennå.» i en tom gruppe */
  }
}
/* §345-oppfølging (Etappe A1): samme §289/§320-fiks som #vaktliste-full/
   #banen/#utsalget — #loftestanga sitter ETT nivå inne i .kort-krop, så
   den må selv bli en ekte flex-kolonne før dens .md-split-barn kan
   scrolle uavhengig av resten av siden. */
#loftestanga { display: flex; flex-direction: column; height: 100%; min-height: 0; }
@media (max-width: 880px) {
  #loftestanga { display: block; height: auto; }
}
/* Delt merkepille (Oppside, Gode nyheter, kommandofeltet): grønn = god/positiv, rød = risiko. (Navnet «peiler» er et arvet klassenavn.) §561: Nordisk og Global bruker den ikke lenger. */
.peiler-pille {
  font-family: var(--mono); font-size: var(--fs-min); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: var(--space-2) var(--space-6); border-radius: 2px;
  flex-shrink: 0;   /* §346-oppfølging: samme "kun navnet krymper"-regel som .banen-tall */
}
.peiler-pille.inn { background: var(--up-bg); color: var(--up); }
.peiler-pille.ut { background: var(--down-bg); color: var(--down); }
.peiler-pille.liten { font-size: var(--fs-min); padding: 1px var(--space-4); }
.peiler-plass { margin: var(--space-6) 0 var(--space-2); font-weight: 600; }
.peiler-deler { margin: var(--space-2) 0 0; padding-left: var(--space-14); font-size: var(--fs-data); }
.peiler-relativt { margin: var(--space-2) 0; overflow-wrap: anywhere; min-width: 0; }

/* §174 (Fase 4, fiks): `overflow-y: auto` ga en bar, ustylet nettleser-
   scroller for én rad når VIS-tallet (§168) ikke lenger passet den nye,
   trangere flis-med-høyden — «en halvgod funksjon» Jens uttrykkelig ikke
   vil ha. Klipp i stedet (som resten av flisa) og hold radtallet i JS
   innenfor det som faktisk er plass til (se dekkVaktliste). */
.dekk-lead { display: flex; flex-direction: column; overflow: hidden; }
.dekk-lead-rad {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) 38px 48px;
  align-items: center; gap: var(--space-8); padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-data);
}
.dekk-lead-rad:last-child { border-bottom: 0; }
.dekk-lead-rad .selskap-lenke { font-family: var(--mono); font-weight: 600; }
/* AP24: ticker + poengsum sammen i den EN cellen minmax(0,1fr) gir — ikke en ny grid-kolonne (se dekkVaktliste()). */
.dekk-lead-navn { display: flex; align-items: center; gap: var(--space-6); min-width: 0; overflow: hidden; }
.dekk-lead-rang {
  font-family: var(--mono); font-size: calc(10px * var(--flis-skala)); color: var(--text-faint);
  position: relative; display: inline-block; perspective: 60px;
}
/* §226 (Jens: "en slags rullering av tekstene, omtrent som på tavla på en
   tog-stasjon... markør på at det ruller inn data og nye plasseringer i
   rangering"): et lite mekanisk flipp på rang-tallet, kun idet
   _flippRangBadge() (dekk.js) faktisk kalles — se der for gating-logikken.
   .dekk-rang-flapp er den MIDLERTIDIGE gamle verdien som flipper bort;
   selve span-en er allerede satt til den NYE verdien og flipper inn bak. */
.dekk-rang-flapp {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: inherit; color: inherit; font: inherit;
  backface-visibility: hidden; animation: dekk-rang-flapp-ut .32s ease-in forwards;
}
@keyframes dekk-rang-flapp-ut {
  0% { transform: rotateX(0deg); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: rotateX(-100deg); opacity: 0; }
}
.dekk-rang-flapp-mottar { animation: dekk-rang-flapp-inn .32s ease-out .08s both; backface-visibility: hidden; }
@keyframes dekk-rang-flapp-inn {
  0% { transform: rotateX(100deg); opacity: 0; }
  40% { opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dekk-rang-flapp { animation: none; display: none; }
  .dekk-rang-flapp-mottar { animation: none; }
}

/* V3: Vaktlista — Dekk-flis (5 kolonner) + Dybde-liste */
.dekk-lead-rad.vakt { grid-template-columns: 22px minmax(0, 1fr) 30px 44px auto; }
/* §285: prosenttallet er det øyet leter etter først i en rangert liste —
   matcher nå tickerens vekt (.selskap-lenke er font-weight: 600) i stedet
   for å være visuelt underordnet den. */
.dekk-lead-rad.vakt .dekk-d { font-family: var(--mono); text-align: right; font-size: 11px; font-weight: 600; }
.dekk-lead-rad.vakt .dekk-d.up { color: var(--up); }
.dekk-lead-rad.vakt .dekk-d.down { color: var(--down); }
.dekk-lead-rad.vakt .dekk-d.flat { color: var(--text-soft); }
.dekk-lead-rad.vakt .dekk-chip { font-size: var(--fs-min); padding: 1px var(--space-6); }

/* §223: Kommende — dato + selskap/hendelse + type-chip. §238: kolonnen
   ble bredere da «+13d» ble byttet til ekte datoer ("22. sep" — bredere
   enn de faste 4 tegnene et dagtall alltid hadde). */
.dekk-lead-rad.kommende { grid-template-columns: 48px minmax(0, 1fr) auto; }
.dekk-lead-rad.kommende .dekk-lead-dag {
  font-family: var(--mono); font-size: 10px; color: var(--text-faint);
}
.dekk-lead-rad.kommende .dekk-chip { font-size: var(--fs-min); padding: 1px var(--space-6); }

/* §352-oppfølging: baksiden.js er FØRSTE bruk av denne delte raden med
   nok knapper (6 presets + lag-bryter) til faktisk å overflyte ved
   mobilbredde — fanget ved live-verifisering, ikke antatt. flex-wrap er
   en no-op for de eksisterende, kortere bryterne (Vaktlista/Utsalget/
   Peileren sine 2-4-knappers varianter fyller allerede én linje), så
   dette er trygt lagt til DELT, ikke en egen baksiden-spesifikk klasse. */
.vakt-linse { display: flex; gap: var(--space-6); margin-bottom: var(--space-10); flex-wrap: wrap; }
.vakt-linse-kn {
  font: inherit; font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg-soft); color: var(--text-soft);
}
.vakt-linse-kn.paa { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.vakt-linse-kn:disabled { opacity: 0.4; cursor: not-allowed; }
.vakt-liga-ingress {
  font-size: var(--fs-brod); color: var(--text-soft); margin-bottom: var(--space-8);
  border-left: 2px solid var(--accent); padding-left: var(--space-8);
}
.vakt-rad--liga { padding-left: var(--space-6); }
.vakt-rad--liga.vk-kant-kilde     { border-left: 2px solid var(--accent); }
.vakt-rad--liga.vk-kant-muliggjor { border-left: 2px solid var(--blue); }

/* Hypotesemåleren — ikke et råd (hypotese.py) */
.hyp-panel {
  display: flex; flex-direction: column; gap: var(--space-10); margin-bottom: var(--space-20);
  padding-bottom: var(--space-14); border-bottom: 1px solid var(--line-strong);
}
.hyp-advarsel {
  font-size: var(--fs-merke); color: var(--text-soft); line-height: 1.5;
  border-left: 2px solid var(--line-strong); padding-left: var(--space-8);
}
/* §786 (steg 5/6): «Se full graf →» ved siden av tittelen — samme sted topbar-knappen pekte, nå
   kontekstuelt herfra i stedet for en egen, alltid synlig topbar-knapp. */
.hyp-panel-tittel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); }
.hyp-full-graf-lenke {
  font: inherit; font-size: var(--fs-merke); background: none; border: 0; cursor: pointer;
  color: var(--text-soft); padding: 0; white-space: nowrap;
}
.hyp-full-graf-lenke:hover { color: var(--accent); }
.hyp-rad {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-10) var(--space-12); background: var(--bg-soft); border-radius: var(--r);
}
.hyp-trf-tittel { margin-top: var(--space-4); }

.trf-tab { display: flex; flex-direction: column; gap: var(--space-8); }
.trf-gruppe {
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
  padding: var(--space-6) 0; border-bottom: 1px solid var(--line);
}
.trf-gruppe:last-child { border-bottom: 0; }
.trf-type { font-size: var(--fs-brod); color: var(--text); min-width: 170px; }
.trf-vindu-rad { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.trf-vindu {
  display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-8);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-liten);
  cursor: help;
}
.trf-vindu-d { font-size: var(--fs-min); color: var(--text-faint); font-family: var(--mono); }
.trf-vindu-tall { font-family: var(--mono); font-weight: 600; font-size: var(--fs-data); }
.trf-vindu-tall.hyp-god { color: var(--up); }
.trf-vindu-tall.hyp-svak { color: var(--down); }
.trf-vindu-tall.trf-ufullstendig { color: var(--text-faint); font-weight: 400; }
/* §566: Testdekning — én rad pr. Rangering-komponent. Navn · vekt · status på første linje, forklaringen under over hele bredden. */
.td-liste { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-12); }
.td-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: var(--space-4) var(--space-12); padding-bottom: var(--space-8); border-bottom: 1px solid var(--line); }
.td-rad:last-child { border-bottom: 0; padding-bottom: 0; }
.td-navn { font-size: var(--fs-brod); color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.td-vekt { font-family: var(--mono); font-size: var(--fs-data); color: var(--text-soft); }
.td-status { font-size: var(--fs-min); padding: 1px var(--space-8); border-radius: 999px; background: var(--bg-sink); color: var(--text-soft); white-space: nowrap; }
.td-status.td-testet { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.ic-rad { grid-template-columns: minmax(0, 1fr) auto auto; }
.ic-celle { white-space: nowrap; }
.td-tekst { grid-column: 1 / -1; margin: 0; font-size: var(--fs-data); color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
/* §254-oppfølging #6 (samme sveip som #5): .hyp-topp sin space-between
   strakk seg til ~1145px på Vaktlista-siden, 990px tomt gap mellom
   "Hypotesemåleren" og sitt eget +X %-tall. .hyp-graf-svg like under
   (width:100%) SKAL fortsatt bruke full bredde (en ekte linjegraf, ikke
   en liten sparkline) — derfor caches kun selve navn+verdi-paret, ikke
   hele raden. Samme 460px igjen. */
.hyp-topp { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); max-width: 460px; }
.hyp-navn { font-size: var(--fs-brod); font-weight: 600; color: var(--text); }
.hyp-verdi { font-family: var(--mono); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hyp-verdi.hyp-god { color: var(--up); }
.hyp-verdi.hyp-ok { color: var(--text-soft); }
.hyp-verdi.hyp-svak { color: var(--down); }
.hyp-maaned { margin: 0; font-size: var(--fs-brod); color: var(--text-soft); }
.hyp-maaned-tall { font-family: var(--mono); font-weight: 600; }
.hyp-maaned-tall.hyp-god { color: var(--up); }
.hyp-maaned-tall.hyp-ok { color: var(--text-soft); }
.hyp-maaned-tall.hyp-svak { color: var(--down); }
.hyp-graf-svg { display: block; width: 100%; height: 64px; }
.hyp-null { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.hyp-linje { stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; }
.hyp-ref-linje { stroke: var(--text-faint); stroke-width: 1.2; stroke-dasharray: 3 2; stroke-linejoin: round; }
.hyp-mot-referanse { margin: var(--space-2) 0 0; font-size: var(--fs-merke); color: var(--text-soft); }
.hyp-mot-referanse-tall { font-family: var(--mono); font-weight: 600; }
.hyp-mot-referanse-tall.hyp-god { color: var(--up); }
.hyp-mot-referanse-tall.hyp-svak { color: var(--down); }
.hyp-punkt { fill: var(--accent); background: var(--accent); }
.hyp-forklar { font-size: var(--fs-merke); color: var(--text-faint); line-height: 1.4; margin: 0; }
.hyp-status { margin: 0; }
.hyp-medlemmer summary { font-size: var(--fs-merke); color: var(--accent); cursor: pointer; }
.hyp-medlem-liste { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-10); margin-top: var(--space-6); }
.hyp-medlem-liste .selskap-lenke { font-family: var(--mono); font-size: var(--fs-merke); }
.hyp-utelatt summary { font-size: var(--fs-merke); color: var(--text-faint); cursor: pointer; }
.hyp-utelatt-liste { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.hyp-utelatt-rad { font-size: var(--fs-merke); color: var(--text-soft); line-height: 1.5; }
.hyp-utelatt-rad .selskap-lenke { font-family: var(--mono); font-weight: 600; }
.hyp-utelatt-kandidat { margin-top: var(--space-2); font-size: var(--fs-merke); }
.hyp-utelatt-kandidat a { margin-left: var(--space-2); }

/* §399: Hypotesemåleren samlet i ÉN stor graf (hendelsesforlop.js sitt
   banner-skall, §397/§398, uendret) — fire gjenbrukte fargetokens
   (accent/up/down/text-soft), ingen nye oppfunnet, pluss referansens
   etablerte stiplede --text-faint. §403 (Etappe A, hypotesemaaler-
   banner-videre.md): `.flergraf-*` er den DELTE, generiske klassen —
   flerlinjeGraf() (app.js) kan tegne ENHVER samling navngitte kurver,
   ikke bare de fire hypotesene. De fargede `.hyp-stor-linje-*`-klassene
   under er fortsatt hypotese-spesifikke (satt via `klasse` pr. serie,
   §399), en fremtidig Kjerne/Sammenlign-graf gir sine egne. */
/* §415: ekte diagram i piksler (ikke strukket viewBox): y-akse, datoer, hover */
.flergraf { position: relative; overflow: hidden; min-width: 0; max-width: 100%; }
.flergraf-svg { display: block; max-width: 100%; height: auto; }   /* §456: skalerer med beholderen (mobil), tegnes på nytt ved ny bredde */
.flergraf-kryss { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.flergraf-fang { cursor: crosshair; }
.flergraf-ref-punkt { background: var(--text-faint); }
.flergraf-tip { min-width: 150px; pointer-events: none; }
.flergraf-tip-rad { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-merke); white-space: nowrap; }
.flergraf-tip-rad b { margin-left: auto; padding-left: var(--space-10); font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.flergraf-ref-linje { stroke: var(--text-faint); stroke-width: 1.4; stroke-dasharray: 3 2; stroke-linejoin: round; }
.hyp-stor-linje-portefolje { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.hyp-stor-linje-gravitasjon { stroke: var(--up); stroke-width: 1.6; stroke-linejoin: round; }
.hyp-stor-linje-folging { stroke: var(--down); stroke-width: 1.6; stroke-linejoin: round; }
.hyp-stor-linje-bronnen { stroke: var(--text-soft); stroke-width: 1.6; stroke-linejoin: round; }
.hyp-stor-linje-portefolje-punkt { fill: var(--accent); background: var(--accent); }
.hyp-stor-linje-gravitasjon-punkt { fill: var(--up); background: var(--up); }
.hyp-stor-linje-folging-punkt { fill: var(--down); background: var(--down); }
.hyp-stor-linje-bronnen-punkt { fill: var(--text-soft); background: var(--text-soft); }
/* §403-oppfølging: porteføljesimulerings-profilene (§298) — SAMME fire
   fargetokens som hypotesene over, men stiplet, så "simulert, bakstestet"
   er visuelt skilt fra de fire ekte/allerede-kjente kurvene selv når
   samme hue gjenbrukes. Skjult som default (ni linjer samtidig er
   ulesbart) — se tegnHypStorBanner(), app.js. */
.sim-stor-linje-a { stroke: var(--k-teal); stroke-width: 1.8; stroke-dasharray: 6 3; stroke-linejoin: round; }
.sim-stor-linje-b { stroke: var(--k-amber); stroke-width: 1.8; stroke-dasharray: 6 3; stroke-linejoin: round; }
.sim-stor-linje-c { stroke: var(--k-rose); stroke-width: 1.8; stroke-dasharray: 6 3; stroke-linejoin: round; }
.sim-stor-linje-d { stroke: var(--k-olive); stroke-width: 1.8; stroke-dasharray: 6 3; stroke-linejoin: round; }
.sim-stor-linje-e { stroke: var(--k-sky); stroke-width: 1.8; stroke-dasharray: 6 3; stroke-linejoin: round; }
.sim-stor-linje-a-punkt { fill: var(--k-teal); background: var(--k-teal); }
.sim-stor-linje-b-punkt { fill: var(--k-amber); background: var(--k-amber); }
.sim-stor-linje-c-punkt { fill: var(--k-rose); background: var(--k-rose); }
.sim-stor-linje-d-punkt { fill: var(--k-olive); background: var(--k-olive); }
.sim-stor-linje-e-punkt { fill: var(--k-sky); background: var(--k-sky); }
/* §424 B: listens topp-sett = prikket linje (én av gangen, alltid violett) */
.liste-stor-linje { stroke: var(--k-violet); stroke-width: 2.2; stroke-dasharray: 1.5 4; stroke-linecap: round; stroke-linejoin: round; }
.liste-stor-linje-punkt { fill: var(--k-violet); background: var(--k-violet); }
/* §813 forsøkte et grid her (militært oppstilt), men §815 reverterte det: en FAST kolonnebredde
   tvang lange chips (f.eks. "Din portefølje"-chipen med meta-tekst + #1/3-merke) til å brekke om på
   flere linjer — Jens, live: "Det ser ikke anvendelig ut". Tilbake til flex-wrap (chipens egen
   naturlige, ett-linjes bredde) — se §815 for hva som ble forsøkt i stedet. */
.hyp-stor-legende { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-bottom: var(--space-8); }
.hyp-stor-leg {
  display: flex; align-items: center; gap: var(--space-6); font: inherit; font-size: var(--fs-merke);
  appearance: none; background: none; border: 1px solid var(--line); border-radius: var(--r-liten);
  padding: var(--space-4) var(--space-8); cursor: pointer; color: var(--text);
}
/* §69-fallgruven (se CLAUDE.md): [hidden] alene taper mot .hyp-stor-leg sin egen display:flex over —
   §813 skjuler nå en kollapset «Simulerte kurver»-chip med `hidden` (ikke lenger utelatt fra DOM-en,
   så Linjer-telleren holder et stabilt totaltall), så denne overstyringen er nødvendig. */
.hyp-stor-leg[hidden] { display: none; }
.hyp-stor-leg.av { opacity: 0.4; }
.hyp-stor-leg .hyp-verdi { font-size: 14px; }
/* §414: advarselen står under grafen og er kompakt — ikke et tungt blokk-felt */
.hyp-stor-legende + .hyp-advarsel { margin: 0; }
.hyp-stor-leg-prikk { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.hyp-stor-dyplenke { display: inline-block; margin-left: var(--space-8); font-size: var(--fs-merke); }
/* §404 (Etappe C): Kjernen-fanen — "+ legg til"-feltet, og en liten,
   rotert 4-fargers palett (samme fire tokens som hypotesene/de simulerte
   profilene over — ingen nye oppfunnet). Med >4 selskaper gjenbrukes en
   farge; legenden holder hver linje identifiserbar uansett. */
.kjerne-stor-linje-a { stroke: var(--k-brown); stroke-width: 1.3; stroke-linejoin: round; }
.kjerne-stor-linje-b { stroke: var(--k-slate); stroke-width: 1.3; stroke-linejoin: round; }
.kjerne-stor-linje-c { stroke: var(--k-orchid); stroke-width: 1.3; stroke-linejoin: round; }
.kjerne-stor-linje-d { stroke: var(--k-sky); stroke-width: 1.3; stroke-linejoin: round; }
.kjerne-stor-linje-a-punkt { fill: var(--k-brown); background: var(--k-brown); }
.kjerne-stor-linje-b-punkt { fill: var(--k-slate); background: var(--k-slate); }
.kjerne-stor-linje-c-punkt { fill: var(--k-orchid); background: var(--k-orchid); }
.kjerne-stor-linje-d-punkt { fill: var(--k-sky); background: var(--k-sky); }
.kjerne-stor-fjern { margin-left: var(--space-4); color: var(--text-faint); }
.kjerne-stor-fjern:hover { color: var(--down); }
/* §408: Fokus-seksjonen (den fulle hendelses-/pris-/volumgrafen for
   sist valgte selskap) + skillet mot sammenligningsdelen under. */
.hendelsesforlop-kort-topp { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.kjerne-fokus { margin-bottom: var(--space-14); }
.kjerne-fokus:empty { margin-bottom: 0; }
/* §939: samme --fokus som ringen i flerlinjeGraf() — «Fokus» betyr nøyaktig én farge
   uansett hvor i David den dukker opp, ikke --accent (som allerede betyr «på/aktiv» andre steder). */
.kjerne-fokus-merke {
  font-size: var(--fs-merke); font-weight: 600; color: var(--fokus);
  border: 1px solid var(--fokus); border-radius: var(--r-liten); padding: 1px var(--space-6);
}
.kjerne-fokus-fjern { margin-left: auto; }
/* §559: Kursbilde i fokus-visningen — på brede skjermer ville grafen (bredde-skalert) blitt høyere enn banneret; uniformt skalert ned (ingen forvrengning), sentrert */
.kjerne-fokus .pg-svg { max-height: 56vh; margin: 0 auto; }

.hyp-maanedstabell summary { font-size: var(--fs-merke); color: var(--accent); cursor: pointer; }
.hyp-mnd-tab {
  display: flex; flex-direction: column; margin-top: var(--space-6); max-height: 260px; overflow-y: auto;
}
.hyp-mnd-entry { padding: var(--space-4) var(--space-2); border-bottom: 1px solid var(--line); }
.hyp-mnd-entry:last-child { border-bottom: 0; }
.hyp-mnd-rad {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-8); align-items: baseline;
  font-size: var(--fs-merke);
}
.hyp-mnd-navn { color: var(--text-soft); text-transform: capitalize; }
.hyp-mnd-tall { font-family: var(--mono); font-weight: 600; text-align: right; }
.hyp-mnd-tall.hyp-god { color: var(--up); }
.hyp-mnd-tall.hyp-ok { color: var(--text-soft); }
.hyp-mnd-tall.hyp-svak { color: var(--down); }
.hyp-mnd-dager { color: var(--text-faint); font-family: var(--mono); text-align: right; font-size: var(--fs-min); }
.hyp-mnd-topp {
  margin-top: var(--space-2); padding-left: 60px; font-size: 10px; color: var(--text-faint);
  font-family: var(--mono);
}
.hyp-mnd-topp .selskap-lenke { font-weight: 600; }

/* §289 (Grensesnitt-revisjon runde 3, pilot): master-detail — samme
   grid-mekanikk som .arbeid (hjem.js), egen bredere listekolonne siden
   Vaktlista-rader bærer mer innhold pr. rad enn Til vurdering. Til
   vurderings .arbeid ligger DIREKTE i sin .kort-krop (som selv er den
   bundne, flex:1-satte høyden fra linje 711) — Vaktlista sin tilsvarende
   #vaktliste-full er derimot en egen wrapper-div ETT nivå dypere (egen
   id i index.html, brukt av innhold-bytte-mekanikken), så en
   `height:100%` på .vakt-split alene ville løst opp mot en auto-høy
   forelder og aldri faktisk begrenset noe — .kort-krop hadde da endt
   opp med å scrolle HELE strippa i ett, ikke kolonnene uavhengig av
   hverandre. #vaktliste-full må derfor selv gjøres om til en ekte
   flex-beholder som fyller .kort-krop sin høyde. */
#vaktliste-full { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* §364 (Vaktlista migrert til masterDetailListe(), Etappe A siste steg —
   se BEGRENSNINGER §364): `.vakt-split`/`.vakt-liste-split`/`.vakt-sak-
   split`/`.vakt-rad` er FJERNET — komponentens egne `.md-split`/`.md-
   liste-split`/`.md-sak-split`/`.md-rad` erstatter dem (ingen annen
   bruker fantes, bekreftet med grep før sletting). `.vakt-rang`/`.vakt-
   tick`/`.vakt-navn`/`.vakt-d`/`.vakt-utloser`/`.vakt-detalj` LEVER
   VIDERE uendret navn — kun innholdet INNI radBygger/detaljBygger, ikke
   disse sub-element-klassene. */
.vakt-rang { font-family: var(--mono); font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.vakt-tick { font-family: var(--mono); font-weight: 600; }
/* §364: samme dual-purpose-fiks §346 ga .rangert-navn da DEN flyttet inn
   i .md-rad (flex) — uten flex:1/min-width:0 ville ulik rang-/ticker-
   bredde pr. rad gjort listen synlig skjev. */
.vakt-navn {
  color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0;
}
.vakt-d { font-family: var(--mono); font-size: 11px; text-align: right; flex-shrink: 0; }
.vakt-d.up { color: var(--up); } .vakt-d.down { color: var(--down); } .vakt-d.flat { color: var(--text-soft); }
/* §364: `.vakt-rad` sin grid gjorde dette "siste kolonne, spenn alt" via
   `grid-column:1/-1` — `.md-rad` er flex, ikke grid. Samme effekt (egen
   full-bredde linje under hovedraden) oppnås med `flex-basis:100%` i en
   WRAPPING flex-rad — se `.md-rad`s nye `flex-wrap:wrap` under. Banen/
   Utsalget hadde ingen tilsvarende sekundær tekstlinje, så dette er
   Vaktlista-spesifikt, ikke en generell `.md-rad`-forutsetning. */
.vakt-utloser {
  flex-basis: 100%; width: 100%; font-size: var(--fs-merke); color: var(--text-faint); text-align: left;
  /* §151: fusjonert lesning kan bli lengre — la den brekke til maks 2 linjer.
     §334: fast makshøyde, ikke -webkit-line-clamp (se .dekk-sum). */
  overflow: hidden; line-height: 1.4; max-height: calc(1.4em * 2);
}
.vakt-detalj { display: flex; flex-direction: column; gap: var(--space-10); }
/* §364: .vakt-liste-split/.vakt-sak-split sin mobil-stabling FJERNET —
   .md-split sin egen, generiske mobil-regel (under) dekker nå samme jobb
   for alle brukere av komponenten. #vaktliste-full sin EGEN flex-reset
   trengs fortsatt (samme §289/§320-mønster #banen/#utsalget også har). */
@media (max-width: 880px) {
  #vaktliste-full { display: block; height: auto; }
}
.vakt-komp { display: flex; flex-direction: column; gap: var(--space-4); }
.vakt-komp-rad { display: grid; grid-template-columns: 92px minmax(0, 1fr) 34px; align-items: center; gap: var(--space-8); }
.vakt-komp-navn { font-size: var(--fs-merke); color: var(--text-soft); }
.vakt-komp-v { font-family: var(--mono); font-size: 10px; color: var(--text-faint); text-align: right; }
.vakt-komp-udekket { grid-column: 2 / span 2; font-size: var(--fs-merke); font-style: italic; color: var(--text-faint); }
.vakt-komp-rad--udekket .vakt-komp-navn { color: var(--text-faint); }
.vakt-funn { font-size: var(--fs-brod); color: var(--text-soft); border-left: 2px solid var(--blue); padding-left: var(--space-8); }
.vakt-score-linje { font-size: var(--fs-merke); color: var(--text-faint); font-family: var(--mono); }
/* §345 ("baksiden"-planen, Etappe A0 — komponenter.js sin masterDetailListe()):
   delt CSS-familie for NYE master-detail-moduler, holdt egen fra
   .arbeid-, .vakt- og .rangert-familiene med vilje — unngår å arve
   implisitte antagelser fra de tre eksisterende, uavhengig utviklede
   vokabularene. Wrapperen dette limes inn i må selv være en ekte
   flex-kolonne (samme §289/§320-fiks som #vaktliste-full/#banen/
   #utsalget alle trengte) — se komponenter.js sin kommentar for
   kontrakten. */
.md-split {
  display: grid; grid-template-columns: clamp(300px, 26%, 520px) minmax(0, 1fr);   /* §476: listen vokser med flata (var fast 320 px — 60 % av en bred flate stod tom) */
  gap: var(--space-20); flex: 1 1 auto; min-height: 0;
}
.md-liste-split {
  overflow-y: auto; overflow-x: hidden; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2);   /* §456: raden skal aldri gjøre siden bredere enn skjermen (mobil) */
  padding-right: var(--space-8); border-right: 1px solid var(--line);
}
.md-sak-split { overflow-y: auto; padding-right: var(--space-6); min-width: 0; }
/* §476: detaljen flyter i kolonner når den er bred (en indre beholder uten låst høyde, ellers fylles kolonnene sideveis); smal = én kolonne som før */
.md-sak-split > * { column-width: 440px; column-gap: var(--space-24); }
.md-sak-split > * > * { break-inside: avoid; }
.md-liste-split { container-type: inline-size; }
.md-rad {
  display: flex; align-items: center; gap: var(--space-8); width: 100%;
  text-align: left; font: inherit; font-size: var(--fs-data);
  padding: var(--space-8) var(--space-8); border: 1px solid transparent; border-radius: var(--r-liten);
  background: none; color: var(--text); cursor: pointer;
}
.md-rad:hover { border-color: var(--line-strong); }
.md-rad.aktiv { border-color: var(--accent); background: var(--accent-bg); }
.md-rad:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* §361 (Banen-migreringen): .md-rad sin egen `border: 1px solid
   transparent`-snarvei (over) ville ellers nullstilt .banen-kort--notert
   (§208/§320) sin border-left — samme spesifisitet (begge énklasse-
   selectors), og .md-rad kommer senere i filen. Et sammensatt selector
   (to klasser) har høyere spesifisitet og vinner uansett filrekkefølge —
   oppdaget ved faktisk å sjekke cascade-rekkefølgen, ikke antatt trygt. */
.md-rad.banen-kort--notert { border-left: 2px solid var(--accent); }
.md-tick { font-family: var(--mono); font-weight: 600; }
@media (max-width: 880px) {
  .md-split { grid-template-columns: minmax(0, 1fr); flex: none; height: auto; }
  .md-sak-split {
    order: -1; border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-14); margin-bottom: var(--space-12);
  }
  .md-liste-split { border-right: 0; padding-right: 0; }
  .md-liste-split, .md-sak-split { overflow: visible; }
}
/* §513: Peileren/Løftestanga har to paneler side om side, hver med en egen liste+detalj (.md-split). md-split sine 300 px liste + gap lot detaljen krympe til 30–80 px i et panel på
   ~480 px (vindu rundt 1100). Samme stabling som mobilregelen (≤ 880 px i VINDUET), men styrt av PANELETS egen bredde (container query). */
/* §636 (AP32 c, Jens: «AP32»): i det smale panelet (Nordisk og Global) står LISTEN først og detaljen under, ikke omvendt. Detaljen først la listen ca. 600 px nede (ved 1440 × 900 lå den under bretten), så en som kom for å velge et selskap
   måtte rulle forbi forrige valgs hele begrunnelse; mobilregelen over (vindu ≤ 880 px) står uendret med detaljen først. Klikk på en rad ruller detaljen inn i bildet (mdRullTilDetalj i komponenter.js). */
@container peiler (max-width: 660px) {
  .md-split { grid-template-columns: minmax(0, 1fr); flex: none; height: auto; }
  .md-sak-split {
    border-top: 1px solid var(--line);
    padding-top: var(--space-14); margin-top: var(--space-12);
  }
  .md-liste-split { border-right: 0; padding-right: 0; }
  .md-liste-split, .md-sak-split { overflow: visible; }
}

/* §351 (baksiden.js, Etappe E — filterraden utvidet utover LAND):
   samme utseende som .eier-input, men en
   EGEN klasse — .eier-input er alltid låst bak innlogging (§86), og
   disse feltene skriver aldri noe til David, ren klientside-filtrering. */
.baksiden-filterrad { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; margin: var(--space-10) 0; }
.baksiden-select {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  padding: var(--space-6) var(--space-8); background: var(--bg); color: var(--text);
}
.baksiden-flere-filtre { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.baksiden-flere-filtre[hidden] { display: none; }   /* §588: display: flex ville ellers slå [hidden] (§69) */
.baksiden-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* §353 (Jens, etter å ha sett den ferdige Etappe F-leveransen: "bruke hele
   skjermen... minst mulig scrolling uten å miste menyvalg og driftsteknisk
   oversikt" — den smale toppraden med søk/maskinstatus bekreftet beholdt,
   kun selve Baksiden-flaten går full bredde/høyde her). Samme §233/§289-
   oppskrift Dybde-sidene allerede bruker: bundet høyde (settBaksidenHoyde(),
   baksiden.js), fast topp-kjede, KUN listen selv ruller internt. */
body[data-flate="baksiden"] .innhold { max-width: none; margin: 0; padding: var(--space-12) var(--space-20); }
[data-vis="baksiden"].aktiv {
  height: var(--baksiden-h, calc(100vh - 160px));
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
[data-vis="baksiden"] .flate-topp,
[data-vis="baksiden"] .landfilter { flex: 0 0 auto; }
#baksiden-innhold { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#baksiden-innhold > .vakt-linse,
#baksiden-innhold > .baksiden-filterrad { flex: 0 0 auto; }
#baksiden-innhold .md-split { flex: 1 1 auto; min-height: 0; }
/* §356 ("Tickere"-preset): forsiktig retnings-prikk, samme 8px/50%-
   oppskrift som .pipeline-prikk (dekk.js) — gjenbruker EKSISTERENDE
   retnings-tokens (vaktRetningChip() sine --accent/--down), ingen ny farge
   funnet opp. */
.baksiden-prikk { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.baksiden-prikk-opp { background: var(--accent); }
.baksiden-prikk-ned { background: var(--down); }
@media (max-width: 880px) {
  body[data-flate="baksiden"] .innhold { padding: var(--space-12) var(--space-14); }
  [data-vis="baksiden"].aktiv { height: auto; display: block; overflow: visible; }
  #baksiden-innhold { display: block; overflow: visible; }
}

/* §127: «Davids dømmekraft over tid» — selvkorreksjons-løkka synlig */
.dk-loop { margin-bottom: var(--space-14); }
.dk-tab { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
.dk-rad {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.dk-rad:last-child { border-bottom: 0; }
.dk-flagg { font-weight: 600; font-size: var(--fs-data); min-width: 9rem; }
.dk-med { font-family: var(--mono); font-weight: 600; font-size: var(--fs-data); }
.dk-vekt { font-family: var(--mono); color: var(--text-soft); font-size: var(--fs-data); }
.dk-aktiv { color: var(--accent); }
.dk-anti { border-left: 2px solid var(--line-strong); padding-left: var(--space-8); margin: var(--space-8) 0 var(--space-12); }
.dk-anti-lenke { white-space: nowrap; }
.dekk-foot {
  margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line);
  font-size: var(--fs-merke); color: var(--text-faint);
  display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap;
}
/* §272: kun når .dekk-foot faktisk er en lenke (Posisjoner sin "utvid for
   hele lista") — rører ikke de rene <div>-container-bruken av klassen. */
a.dekk-foot { text-decoration: none; }
a.dekk-foot:hover { color: var(--accent); }
.dekk-hyp { font-family: var(--mono); font-weight: 600; cursor: help; }
.dekk-hyp.hyp-god { color: var(--up); }
.dekk-hyp.hyp-ok { color: var(--text-faint); }
.dekk-hyp.hyp-svak { color: var(--down); }

/* R1: peker fra Anbefalt til Vaktlista for overvåkningsbulken */
.dekk-overv-lenke {
  display: block; margin-top: var(--space-6); font-size: var(--fs-merke);
  color: var(--blue); text-decoration: none;
}
.dekk-overv-lenke:hover { text-decoration: underline; }
.arbeid-overv-lenke {
  display: block; margin-top: var(--space-8); padding-top: var(--space-8);
  border-top: 1px dashed var(--line); font-size: var(--fs-brod);
  color: var(--blue); text-decoration: none;
}
.arbeid-overv-lenke:hover { text-decoration: underline; }
.dekk-tag {
  font-family: var(--mono); font-size: var(--fs-min); font-weight: 600;
  color: var(--accent); background: var(--accent-bg); padding: 1px var(--space-6); border-radius: 2px;
}
.dekk-mono { font-family: var(--mono); color: var(--text-soft); }

/* §227-fiks: var overflow-y:auto — en intern scrollbar er akkurat den
   "halvgode funksjonen" Jens fikk fjernet fra Vaktlista i §174 (klipp i
   stedet, mål ekte plass, jf. dekkPosisjoner() sin egen radtrimming).
   overflow:hidden matcher .dekk-lead sitt mønster andre steder. */
/* §248-oppfolging #2 (Jens, presist svar: "Den nederste kanten mangler på
   medium visning"): `.dekk-holds` sin egen `overflow: hidden` hadde ingen
   reell jobb å gjøre — ytre `#dekk-posisjoner`/`.flis-krop`/`.kort` har
   allerede overflow:hidden som det faktiske sikkerhetsnettet, og §247s
   JS-trim fjerner alt for mange holdings-brikker FØR dette laget i det
   hele tatt når det. Men fordi `.dekk-holds` sin auto-høyde traff hver
   chip sin boks-kant med PRESIS null margin (målt: 654.375px = 654.375px,
   ikke en tilnærming), satt en innfelt box-shadow nøyaktig PÅ klippekanten
   — anti-aliasing kunne da børste bort nettopp den nederste linja. Mobil-
   varianten av denne regelen (@media max-width:880px, lenger ned) hadde
   FORLENGST `overflow: visible` av en annen grunn (§224) — det er derfor
   et smalt vindu tilfeldigvis så riktig ut mens skrivebord-bredden ikke
   gjorde det. Fjernet her også, så det gjelder overalt, ikke bare mobil. */
.dekk-holds { display: flex; flex-wrap: wrap; gap: var(--space-6); align-content: flex-start; }
/* §248-oppfolging (Jens, zoomet skjermbilde: "boksene rundt tickerne er
   ikke lukket"): en tynn `border` (1px) kombinert med `border-radius`
   (2px) kan gi synlige hull nøyaktig i hjørnene der den rette og den
   avrundede kant-biten møtes — et kjent rendring-fenomen, ikke en logisk
   feil i selve regelen (alle fire sider var identiske). Byttet til en
   innfelt `box-shadow` — tegnes som én sammenhengende kontur, ikke fire
   separate kant-segmenter som skal møtes akkurat i hjørnet. `border: 0`
   holder box-sizing/padding uendret (box-shadow tar ikke opp layoutplass).
*/
.dekk-hold {
  display: flex; align-items: center; gap: var(--space-6);
  border: 0; border-radius: 2px; padding: var(--space-4) var(--space-8);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--mono); font-size: var(--fs-data);
}
.dekk-hold .selskap-lenke { font-weight: 600; }
.dekk-d.up { color: var(--up); }
.dekk-d.down { color: var(--down); }
.dekk-d.flat { color: var(--text-faint); }
.dekk-pos-bunn {
  margin-top: auto; padding-top: var(--space-10); border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: var(--space-20); flex-wrap: wrap;
}
.dekk-pos-net, .dekk-pos-styr { display: flex; flex-direction: column; gap: 1px; }
.dekk-pos-net-v { font-family: var(--mono); font-size: calc(16px * var(--flis-skala)); font-weight: 600; }
.dekk-pos-net-v.up { color: var(--up); }
.dekk-pos-net-v.down { color: var(--down); }
/* §227 (fiks: Jens "det trenger ikke stå så stort... tenk gjennom dette
   tvers over"): headline-blokken ØVERST i Posisjoner — egen plassering
   (topp, ikke bunn) siden dette SKAL være Posisjoner sin egen "samlet
   kurs", men NØYAKTIG samme skriftvekt som tallet den erstattet
   (.dekk-pos-net-v — 16px×flis-skala, 600), ikke en ny, større. */
.dekk-pos-samlet {
  display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap;
  margin-bottom: var(--space-8); padding-bottom: var(--space-8); border-bottom: 1px solid var(--line);
}
.dekk-pos-samlet-v { font-family: var(--mono); font-size: calc(16px * var(--flis-skala)); font-weight: 600; }
.dekk-live {
  margin-top: var(--space-6); font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .05em; color: var(--warn);
}

/* §296-oppfølging: Kommende sin grafiske tidslinje-akse (.dekk-akse m.fl.,
   §172/§175/§223/§227/§236) er fjernet fra Dekk-flisen (én visning i
   stedet for to som kunne kollidere med fot-linja, se dekkKommende()).
   All CSS for den er derfor bevisst IKKE her lenger. */
a.dekk-mono { color: var(--accent); text-decoration: none; }
a.dekk-mono:hover { text-decoration: underline; }


/* mellombredde: 3 store side om side blir for smale -> 2 kolonner, la Dekket
   scrolle (samme filosofi som < 880). */
/* §295: sekundær 2-kolonners fallback for det faste oppsettet — enklere
   omstabling enn desktop sin 3-kolonne (Til vurdering får en egen, hel
   rad her siden den ikke lenger deler bredde med Kommende ved denne
   bredden). */
@media (max-width: 1180px) and (min-width: 881px) {
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) { overflow: auto; }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .skall { height: auto; }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold { height: auto; }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) #flate-kort {
    height: auto; overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(150px, auto));
    grid-template-areas:
      "staasted   vaktliste"
      "anbefalt   posisjoner"
      "marked     kommende";
  }
}

@media (max-width: 880px) {
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) { overflow: auto; }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .skall { height: auto; }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold { height: auto; display: block; padding: var(--space-20) var(--space-20); }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) #flate-kort { display: flex; flex-direction: column; gap: var(--space-12); }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .kort { overflow: visible; }
  body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .dekk-lead, body:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .dekk-holds { overflow: visible; }
}

/* prosa-avsnitt beholder lesbar bredde; lister/paneler bruker hele flaten */
#saker { max-width: 78ch; }

.landknapp {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-4) var(--space-12); cursor: pointer;
}
.landknapp:hover { border-color: var(--blue); color: var(--blue); }
.landknapp.aktiv { background: var(--blue-bg); border-color: var(--blue-bg); color: var(--blue); font-weight: 500; }
.landfilter { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.land-merke {
  font-size: var(--fs-merke); padding: var(--space-2) var(--space-8); border-radius: var(--r);
  background: var(--bg-soft); color: var(--text-soft);
}
.radar-merke {
  font-size: var(--fs-merke); padding: var(--space-2) var(--space-8); border-radius: var(--r);
  background: var(--blue-bg); color: var(--blue); white-space: nowrap;
}
.radar-linje { color: var(--blue); margin-bottom: var(--space-8); }

/* screening-tempo — inne i innstillinger-modalen */
.tempo-bar.tett { border-radius: var(--r); }
.tempo-naa { font-size: var(--fs-brod); font-weight: 500; color: var(--text); }
.tempo-skala { margin: var(--space-10) 0 var(--space-4); }
.tempo-slider { width: 100%; accent-color: var(--blue); cursor: pointer; }
.tempo-bar.tett .tempo-slider { accent-color: var(--warn); }
.tempo-merkelapper { display: flex; justify-content: space-between; font-size: var(--fs-merke); color: var(--text-soft); margin-top: var(--space-2); }
.tempo-forklaring { font-size: var(--fs-brod); color: var(--text-soft); margin-top: var(--space-6); }
.tempo-kostnad { font-size: var(--fs-brod); color: var(--text-soft); margin-top: var(--space-4); }
.tempo-kostnad.aktiv { color: var(--warn); font-weight: 500; }

@media (max-width: 1000px) {
  .topbar { padding-left: var(--space-20); padding-right: var(--space-20); }
  .innhold { padding: var(--space-24) var(--space-20); }
  .varsel-bar { margin-left: var(--space-20); margin-right: var(--space-20); }
}
@media (max-width: 560px) {
  .case-topp { flex-wrap: wrap; gap: var(--space-10); }
  .case-tag { order: 0; }
  .case-actions { order: 1; margin-left: auto; }
  .case-hode { flex-basis: 100%; order: 2; }
  .form-rad { flex-direction: column; align-items: stretch; }
  .form-rad .eier-input, .form-rad .eier-submit { width: 100%; }
}

.meta { font-size: var(--fs-brod); color: var(--text-soft); }
.laster { padding: var(--space-8) 0; }
.feil { color: var(--down); font-size: var(--fs-brod); padding: var(--space-8) 0; }
.tom { color: var(--text-soft); font-size: var(--fs-brod); padding: var(--space-6) 0; }
.skjult { display: none !important; }


/* ---------- hero ---------- */


.section-title { font-size: var(--fs-tittel); font-weight: 600; letter-spacing: -0.01em; margin: 28px 0 var(--space-12); }
.section-title.mini {
  font-size: var(--fs-merke); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft);
  display: flex; align-items: center; gap: var(--space-8);
  margin: var(--space-20) 0 var(--space-8);
}

/* ---------- saker (rangert koe) ---------- */

.case { border-bottom: 1px solid var(--line); padding: var(--space-14) var(--space-2); }
.case:first-child { padding-top: var(--space-2); }
.case-topp { display: flex; align-items: flex-start; gap: var(--space-14); }
.case-tag {
  font-size: var(--fs-merke); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--space-2) var(--space-8); border-radius: var(--r-liten); white-space: nowrap;
  background: var(--bg-soft); color: var(--text-soft);
  border: 1px solid var(--line);
}
.case-tag.n1 { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.case-tag.haster,
.case-tag.skeptisk { background: var(--down-bg); color: var(--down); border-color: transparent; }
.case-hode { flex-grow: 1; min-width: 0; cursor: pointer; }
.case-hode h3 { font-size: var(--fs-brod); font-weight: 600; margin-bottom: var(--space-4); }
.case-hode p { font-size: var(--fs-brod); color: var(--text-soft); line-height: 1.5; }
.case-hode .motsigelse { color: var(--down); }

/* rangeringen gjort gjennomsiktig — hvorfor denne saken er i køen */
.sak-rang {
  margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-8);
  border-top: 1px solid var(--line);
  font-size: var(--fs-merke); line-height: 1.55;
}
.sak-rang-linje { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); align-items: baseline; }
.sak-rang-nivaa {
  font-weight: 600; color: var(--text); white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.sak-rang-nivaa.n1 { color: var(--accent); }
.sak-rang-hvorfor { color: var(--text-soft); }
.sak-rang-sig { color: var(--text-faint); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-8); }
.sak-rang-sig .sig-tekst { color: var(--text-faint); }

/* F2: signal-bjelke + 3-signal-prikker */
.sig-bar {
  display: inline-block; width: 46px; height: 5px; border-radius: 3px;
  background: var(--bg-sink); overflow: hidden; vertical-align: middle; flex-shrink: 0;
}
.sig-bar-fyll { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.sig-bar.tom .sig-bar-fyll { background: var(--line-strong); }
.sig-prikker { display: inline-flex; gap: var(--space-4); vertical-align: middle; }
.sig-prikk {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
}
.sig-prikk.paa { background: var(--accent); border-color: var(--accent); }
.dekk-spark { width: 34px; height: 14px; flex-shrink: 0; opacity: 0.85; }
.pos-sig { display: flex; align-items: center; gap: var(--space-8); min-width: 150px; }
.pos-sig-v { font-size: var(--fs-data); color: var(--text-soft); }
.sak-rang-teaser { color: var(--text-soft); font-style: italic; margin-top: var(--space-2); }
/* F9: datering — når kilden ble kjent for David */
.sak-dato { margin-top: var(--space-4); font-size: var(--fs-merke); color: var(--text-faint); }
.sak-dato-koe { color: var(--warn); }

/* T3: usikkerhet framme på kortet */
.sak-usikkerhet {
  margin-top: var(--space-4); font-size: var(--fs-merke); color: var(--text-soft);
  border-left: 2px solid var(--warn); padding-left: var(--space-8);
}
/* T2: «Din posisjon»-linje på et posisjons-sakskort */
.sak-posisjon {
  margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12);
  font-size: var(--fs-merke); font-variant-numeric: tabular-nums;
}
.sak-pos-del { color: var(--text-soft); }
.sak-pos-del.up { color: var(--up); }
.sak-pos-del.down { color: var(--down); }
.sak-pos-del.flat { color: var(--text-soft); }

/* Grunnmur-linsa: verdikjede-chip */
.verdikjede-merke {
  display: inline-block; font-size: var(--fs-merke); padding: 1px var(--space-8);
  border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--text-soft); background: var(--bg); cursor: help; white-space: nowrap;
}
.verdikjede-merke.vk-kilde     { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.verdikjede-merke.vk-muliggjor { border-color: var(--blue); color: var(--blue); background: var(--blue-bg); }
.verdikjede-merke.vk-foredler  { color: var(--text-soft); }
.verdikjede-merke.vk-sluttledd { color: var(--text-faint); }
.vakt-detalj .verdikjede-merke { align-self: flex-start; }

/* kompakt grunndata-stripe på Til Vurdering-kort (sak-kort + Dekk-flis):
   verdikjede-ledd + sektor + hjemland + børs */
.sak-grunndata {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6);
  margin: var(--space-4) 0 var(--space-6);
}
.gd-mini {
  font-size: var(--fs-merke); color: var(--text-soft);
  padding: 1px var(--space-6); border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg);
  white-space: nowrap;
}
.dekk-hodet + .sak-grunndata { margin-top: var(--space-4); }
/* §225: flagget er ett tegn, ikke ord — strammere pill enn tekst-badgene */
.gd-flagg { padding: 1px var(--space-4); font-size: 11px; }

/* Radar: kvalitets-score-badge */
.ik-kvalitet {
  font-family: var(--mono); font-size: var(--fs-merke); font-weight: 600;
  color: var(--accent); background: var(--accent-bg);
  padding: var(--space-4) var(--space-10); border-radius: var(--r-liten); white-space: nowrap; cursor: help;
}
/* §110/§111: «tett på»-rolle + «liten cap» blant kjøperne (innsideanalyse.no) */
.ik-tettpaa, .ik-liten {
  font-size: calc(var(--fs-merke) - 1px); font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; padding: 0 var(--space-6); border-radius: 999px;
  white-space: nowrap; cursor: help; border: 1px solid;
}
.ik-tettpaa { color: var(--up); border-color: var(--up); }
.ik-liten { color: var(--text-soft); border-color: var(--line-strong); }
.ik-metode { line-height: 1.45; margin: var(--space-2) 0 var(--space-8); }

.case-flags { display: flex; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; align-items: center; }
.pill { font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border-radius: var(--r-liten); background: var(--bg-soft); color: var(--text-soft); }
.pill.avoid { background: var(--down-bg); color: var(--down); }
.pill.early { background: var(--up-bg); color: var(--up); }
.signaltall { font-size: var(--fs-brod); font-weight: 500; }
.signaltall.up { color: var(--up); }
.signaltall.down { color: var(--down); }
.signaltall.flat { color: var(--text-soft); }
.utvid { font-size: var(--fs-brod); color: var(--blue); margin-top: var(--space-8); display: inline-block; }
.case-actions { display: flex; gap: var(--space-6); flex-shrink: 0; }
/* «ikke relevant» er en skrivehandling (sak_respons) — skjult når låst */
body:not(.redigering) .case-actions { display: none; }
.sak-ikke-relevant {
  font: inherit; font-size: var(--fs-merke); color: var(--text-soft);
  background: none; border: 0; padding: var(--space-4) var(--space-4); cursor: pointer;
  white-space: nowrap;
}
.sak-ikke-relevant:hover { color: var(--down); text-decoration: underline; }

/* «skeptisk kikk» — Davids egne unngå-flagg, tydelig ulik et vanlig løft */
.case.sak-skeptisk { border-left: 3px solid var(--down); padding-left: var(--space-12); }
.case-tag.skeptisk { background: var(--down-bg); color: var(--down); }

/* Følger/Selskapsanalyse — velger */
.selskap-velger-liste { display: flex; flex-direction: column; gap: var(--space-2); }
.selskap-velger-rad { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-4); border-bottom: 1px solid var(--line); }

/* Vurderer — «legg til selskap til overvåkning» */
.overvaak-topp { margin: -4px 0 var(--space-20); }
.overvaak-topp[hidden] { display: none; }
.overvaak-knapp {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg); color: var(--blue);
  padding: var(--space-6) var(--space-14); cursor: pointer;
}
.overvaak-knapp:hover { border-color: var(--blue); background: var(--blue-bg); }
#overvaak-form { margin-top: var(--space-10); }
#overvaak-form[hidden] { display: none; }

/* synlighetsbuffer: saker som har falt ut av køen */
.sak-arkiv { margin-top: var(--space-20); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.sak-arkiv > summary {
  cursor: pointer; color: var(--text-soft); padding: var(--space-6) 0;
  list-style: none;
}
.sak-arkiv > summary::-webkit-details-marker { display: none; }
.sak-arkiv > summary:hover { color: var(--blue); }
.sak-arkiv[open] > summary { margin-bottom: var(--space-6); }
.sak-arkiv .case { opacity: .75; }
.sak-handtert-rad {
  display: flex; align-items: baseline; gap: var(--space-10);
  padding: var(--space-6) 0; font-size: var(--fs-brod); color: var(--text-soft);
}
.sak-handtert-tommel { flex: none; }
.sak-handtert-tekst { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sak-handtert-rad .mini-knapp { flex: none; }

/* §245: bred-skanningens bakgrunn — samme sak-arkiv-mønster, egen takt */
.ik-bakgrunn { margin-top: var(--space-24); }
.ik-bakgrunn .mini-knapp { margin-left: var(--space-4); }

/* §161 (Fase 3.5): flagget, ikke handlet */
.ikke-handlet-rad {
  padding: var(--space-8) 0; border-top: 1px solid var(--line);
  font-size: var(--fs-brod); line-height: 1.4;
}
.ikke-handlet-rad:first-of-type { border-top: none; }
.ikke-handlet-topp { margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6); }
.ikke-handlet-da { margin: var(--space-2) 0; color: var(--text-faint); }
.ikke-handlet-naa { margin: var(--space-2) 0; color: var(--text-soft); }
.case.haster { background: var(--down-bg); border-radius: var(--r); border-bottom: none; margin-bottom: var(--space-10); padding: var(--space-14) var(--space-16); }
.case.haster h3 { color: var(--down); }
.frist { color: var(--down); font-weight: 500; }

/* utvidet detaljvisning */
.case-detalj {
  margin-top: var(--space-12); padding: var(--space-14) var(--space-16);
  background: var(--bg-soft); border-radius: var(--r);
  font-size: var(--fs-brod);
}
.case-detalj .kilde { font-weight: 500; margin-bottom: var(--space-6); }
.case-detalj a { color: var(--blue); word-break: break-all; }
/* ---------- jording: delt «Svar → Grunnlag → Kilde»-blokk ---------- */
.jord { margin-top: var(--space-8); }
.jord.skjult { display: none; }
.jord-tabell {
  display: grid; grid-template-columns: minmax(9ch, max-content) minmax(0, 1fr); gap: 0 var(--space-14);
  font-size: var(--fs-brod);
}
.jord-tabell > span { padding: var(--space-6) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.jord-tabell > span:nth-last-child(-n+2) { border-bottom: none; }
.jord-k { color: var(--text-soft); }
.jord-v { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .jord-tabell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jord-tabell > .jord-k { padding: var(--space-6) 0 0; border-bottom: none; }
  .jord-tabell > .jord-v { padding: var(--space-2) 0 var(--space-6); border-bottom: 1px solid var(--line); }
  .jord-tabell > .jord-v:last-child { border-bottom: none; }
}
.jord-seksjon { margin-top: var(--space-10); }
.jord-tittel { text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--space-4); }
.jord-grad { font-size: var(--fs-brod); padding: var(--space-4) 0; }
.jord-grad-kilde { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.jord-grad a { color: var(--blue); }
.jord-kilde {
  display: block; margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-merke); color: var(--text-soft);
}
.jord-kilde a { color: var(--blue); }

/* ---------- posisjoner ---------- */

/* §227 (fiks: gjenbruker .flate-nokkel/.flate-stat/.flate-n/.flate-e —
   samme tall-stil som Fangst sine 176/10/80/0 — for "samlet kurs",
   IKKE et eget, større tall). Se tegnPosisjonerSamlet() (dekk.js). */
.pos-samlet-boks {
  padding-bottom: var(--space-14); margin-bottom: var(--space-14); border-bottom: 1px solid var(--line);
}
.pos-samlet-boks .flate-nokkel { padding-bottom: 0; margin-bottom: var(--space-10); border-bottom: 0; }
.flate-n.up { color: var(--up); }
.flate-n.down { color: var(--down); }
.pos-samlet-graf { max-width: 460px; margin-top: var(--space-8); }

/* §252: konsentrasjon — ren fordeling, aldri en advarsel (§23) */
.pos-konsentrasjon { margin-top: var(--space-8); }
/* §254-oppfølging #5 (Jens: "løse prosentene på høyre side"):
   justify-content:space-between uten noen bredde-grense strakk
   prosenttallet til den ALLER ytterste kanten av den brede Dybde-siden
   — tickeren og tallet leste som to løsrevne ting, ikke ett par. Bruker
   NØYAKTIG samme 460px som .pos-samlet-graf like under (samme boks,
   allerede etablert tall) i stedet for å gjette et nytt. */
.pos-konsentrasjon-liste {
  display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); max-width: 460px;
}
.pos-konsentrasjon-rad {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8);
  font-size: var(--fs-brod);
}
.pos-konsentrasjon-rad .selskap-lenke { font-family: var(--mono); font-weight: 600; }
.pos-konsentrasjon-pct { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.pos-konsentrasjon-rad.hoy .pos-konsentrasjon-pct {
  color: var(--warn); background: var(--warn-bg); padding: 1px var(--space-8); border-radius: var(--r-liten);
}

.pos-row {
  display: flex; align-items: center; gap: var(--space-20); flex-wrap: wrap;
  padding: var(--space-16) var(--space-4);
  border-bottom: 1px solid var(--line);
}

/* Posisjoner: Vurderer-lista lukket som standard (§punkt-6) — samme
   triangel-markør-oppskrift som .sak-arkiv/.staasted-gruppe, men uten
   opasitets-dempingen siden dette er aktiv, oppfulgt data, ikke et arkiv. */
.pos-vurderer { margin-top: var(--space-14); }
.pos-vurderer > summary {
  cursor: pointer; font-weight: 600; color: var(--text-soft);
  padding: var(--space-4) 0; list-style: none;
}
.pos-vurderer > summary::-webkit-details-marker { display: none; }
.pos-vurderer > summary::before { content: "▸ "; color: var(--text-faint); }
.pos-vurderer[open] > summary::before { content: "▾ "; }

/* §290: klikkbar statusfordeling (donut + legende) øverst på Ståsted. */
.staasted-donut {
  display: flex; align-items: center; gap: var(--space-16);
  margin-bottom: var(--space-14); flex-wrap: wrap;
}
.staasted-donut-svg { width: 84px; height: 84px; flex-shrink: 0; }
.staasted-donut-skive { cursor: pointer; }
.staasted-donut-skive:hover { opacity: 0.82; }
.staasted-donut { position: relative; }
.staasted-donut-senter {
  position: absolute; left: 42px; top: 42px; transform: translate(-50%, -50%);
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-data); color: var(--text);
  pointer-events: none;
}
.staasted-donut-legende { display: flex; flex-direction: column; gap: var(--space-4); }
.staasted-donut-rad {
  display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-merke);
  color: var(--text-soft);
}
.staasted-donut-rad.klikkbar { cursor: pointer; }
.staasted-donut-rad.klikkbar:hover .staasted-donut-navn { color: var(--accent); }
.staasted-donut-prikk { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.staasted-donut-navn { min-width: 130px; }
.staasted-donut-tall { font-family: var(--mono); color: var(--text-faint); }
@media (max-width: 880px) { .staasted-donut { gap: var(--space-10); } }

/* Ståsted: Inngang/Holder lukket som standard (§268) — samme oppskrift
   som .pos-vurderer/.sak-arkiv. */
.staasted-gruppe { margin-top: var(--space-14); }
.staasted-gruppe > summary {
  cursor: pointer; font-weight: 600; color: var(--text-soft);
  padding: var(--space-4) 0; list-style: none;
}
.staasted-gruppe > summary::-webkit-details-marker { display: none; }
.staasted-gruppe > summary::before { content: "▸ "; color: var(--text-faint); }
.staasted-gruppe[open] > summary::before { content: "▾ "; }

.pos-name { min-width: 64px; font-size: var(--fs-brod); font-weight: 500; display: flex; align-items: center; gap: var(--space-8); }
.bors-lampe {
  position: relative; flex-shrink: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-faint); cursor: pointer;
}
.bors-lampe::after { content: ""; position: absolute; inset: -6px; } /* større klikkflate */
.bors-lampe:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bors-lampe.aapen {
  background: var(--up);
  animation: bors-puls 2.4s ease-out infinite;
}
@keyframes bors-puls {
  0%   { box-shadow: 0 0 0 0 rgba(24, 128, 56, .45); }
  70%  { box-shadow: 0 0 0 6px rgba(24, 128, 56, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 128, 56, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bors-lampe.aapen { animation: none; }
}
.bors-tekst {
  flex-basis: 100%;
  font-size: var(--fs-brod); color: var(--text-soft);
  margin-top: var(--space-6);
}
.bors-tekst.skjult { display: none; }
/* §75: synlig børs-status-chip (selskapsside). Lampa inni er ren pynt her
   — hele chipen har title, ingen klikk. */
.bors-chip {
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border-radius: var(--r-liten);
  background: var(--bg-soft); color: var(--text-soft);
}
.bors-chip .bors-lampe { cursor: default; width: 8px; height: 8px; }
.bors-chip.aapen { background: var(--up-bg); color: var(--up); }

/* §93: blanke posisjoner — informativ, ikke et signal. Nøytral som standard;
   farge følger 30-dagers retning (mer short = down-tint, mindre = up-tint). */
.short-chip {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border-radius: var(--r-liten);
  background: var(--bg-soft); color: var(--text-soft); cursor: default;
  font-variant-numeric: tabular-nums;
}
.short-chip.opp { background: var(--down-bg); color: var(--down); }
.short-chip.ned { background: var(--up-bg); color: var(--up); }
.beste-tid {
  font-size: var(--fs-merke); color: var(--text-soft);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1px var(--space-8); cursor: pointer; white-space: nowrap;
}
.beste-tid.tom { color: var(--text-faint); border-style: dashed; }
.beste-tid:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.beste-tekst {
  flex-basis: 100%;
  font-size: var(--fs-brod); color: var(--text-soft);
  margin-top: var(--space-4);
}
.beste-tekst.skjult { display: none; }
.pos-spark { width: 120px; height: 36px; flex-shrink: 0; }
.pos-price { min-width: 150px; font-size: var(--fs-brod); font-variant-numeric: tabular-nums; }
.pos-price .chg { font-size: var(--fs-brod); margin-left: var(--space-6); }
.pos-price .chg.up { color: var(--up); }
.pos-price .chg.down { color: var(--down); }
.pos-meta { flex-grow: 1; min-width: 200px; font-size: var(--fs-brod); color: var(--text-soft); }
.pos-urealisert { font-weight: 500; }
.pos-urealisert.up { color: var(--up); }
.pos-urealisert.down { color: var(--down); }
.pos-hold { color: var(--text-soft); }
.pos-hold.utlopt { opacity: .7; font-style: italic; }
.pos-mage { color: var(--warn); letter-spacing: 1px; }
.tillit-merke {
  font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border-radius: var(--r-liten); white-space: nowrap;
}
.tillit-merke.utenfor { background: var(--warn-bg); color: var(--warn); }
.tillit-merke.svartelistet { background: var(--down-bg); color: var(--down); }
.pos-tillit {
  flex-basis: 100%;
  font-size: var(--fs-brod); color: var(--warn);
  background: var(--warn-bg); border-left: 3px solid var(--warn);
  border-radius: var(--r); padding: var(--space-8) var(--space-10); margin-top: var(--space-6);
}
.pos-tillit.svartelistet {
  color: var(--down); background: var(--down-bg); border-left-color: var(--down);
}
.status-chip { font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border-radius: var(--r-liten); background: var(--bg-soft); color: var(--text-soft); }
.status-chip.up { background: var(--up-bg); color: var(--up); }
.status-chip.down { background: var(--down-bg); color: var(--down); }
.gav-blyant {
  border: none; background: none; cursor: pointer;
  font-size: var(--fs-brod); color: var(--blue);
  padding: var(--space-4);
}
/* §49: redigeringsknappen på selskapssiden står alene i Grunndata (ikke ved
   siden av andre ikonknapper som i en Posisjoner-rad) — trenger egen linje. */
.selskap-rediger-blyant { display: block; margin-top: var(--space-10); font-weight: 500; padding: var(--space-4) 0; }
.gav-form,
.notat-form {
  flex-basis: 100%;
  display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center;
  margin-top: var(--space-10); padding: var(--space-12);
  background: var(--blue-bg); border-radius: var(--r);
  border-left: 3px solid var(--blue);
}
.eier-chip-rad { flex-basis: 100%; }

/* F13: kjøpslogg (flere kjøp til ulike priser) */
.gav-logg-merkelapp {
  flex-basis: 100%; font-size: var(--fs-liten, 12px); color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-top: var(--space-4);
}
.gav-logg { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--space-6); }
/* §288: flex-wrap lagt til da beløp-feltet gjorde raden til 5 felt i
   stedet for 4 — samme mønster .gav-salg-rad allerede bruker. */
.gav-rad { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }
.gav-rad .eier-input { flex: 1 1 0; min-width: 0; }
.gav-rad .eier-input[data-felt="belop"] { flex: 1 1 110px; }
.gav-rad .eier-input[data-felt="dato"] { flex: 0 1 150px; }
.gav-rad select.eier-input[data-felt="posisjon"] { flex: 0 1 160px; }
.gav-rad-fjern {
  flex: 0 0 auto; font: inherit; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border-radius: var(--r-liten);
  border: 1px solid var(--line); background: var(--bg); color: var(--text-soft);
}
.gav-rad-fjern:hover { background: var(--down-bg); border-color: var(--down); color: var(--down); }
.gav-oppsum {
  flex-basis: 100%; font-size: var(--fs-brod); font-weight: 600;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.gav-logg-legg-til {
  font: inherit; font-size: var(--fs-brod); cursor: pointer;
  border: 1px dashed var(--blue); border-radius: var(--r-liten);
  background: transparent; color: var(--blue); padding: var(--space-6) var(--space-10);
}
.gav-logg-legg-til:hover { background: var(--blue-bg); }
/* §199 (tidl. §195): registrer salg — egen seksjon INNI gav-form, rett
   under kjøpsloggen (kjøp mer / selg samlet), umiddelbar handling adskilt
   fra skjemaets egen lagre-knapp */
.gav-salg { flex-basis: 100%; margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px dashed var(--line-strong); }
/* §198: hvilke kjøp (GAV) finnes å selge fra, eldst først (FIFO-rekkefølgen) */
.gav-salg-beholdning { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-4); }
.gav-salg-lott {
  font-size: var(--fs-merke); font-family: var(--mono); color: var(--text-soft);
  background: var(--bg-soft); border-radius: var(--r-liten); padding: var(--space-2) var(--space-8);
}
.gav-salg-rad { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; margin-top: var(--space-6); }
.gav-salg-rad .eier-input { flex: 1 1 110px; min-width: 0; }
.gav-salg-rad .eier-input[type="date"] { flex: 0 1 150px; }
body:not(.redigering) .gav-rad-fjern,
body:not(.redigering) .gav-logg-legg-til { opacity: .5; pointer-events: none; }
.notat-felt {
  flex-basis: 100%;
  font: inherit; font-size: var(--fs-brod); resize: vertical;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--space-8) var(--space-10); background: var(--bg);
}
.stjerne-velger { flex-basis: 100%; display: flex; align-items: center; gap: var(--space-4); }
.stjerne-merkelapp { font-size: var(--fs-brod); color: var(--text-soft); margin-right: var(--space-6); }
.stjerne { font-size: 18px; line-height: 1; color: var(--warn); cursor: pointer; }
.stjerne:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.eier-avkryss {
  flex-basis: 100%; display: flex; align-items: flex-start; gap: var(--space-8);
  font-size: var(--fs-brod); color: var(--text-soft);
}
.eier-avkryss input { margin-top: var(--space-2); }

/* §163: Kjør David manuelt (Styring) */
.kjor-knapper { display: flex; gap: var(--space-10); margin: var(--space-10) 0; flex-wrap: wrap; }
.kjor-detaljer { margin-top: var(--space-4); font-size: var(--fs-brod); }
.kjor-detaljer > summary { cursor: pointer; color: var(--text-soft); padding: var(--space-4) 0; }
.kjor-liste { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); }
.kjor-rad { flex-basis: auto; }
.drom-knapp {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--blue); border-radius: var(--r-liten);
  background: var(--blue-bg); color: var(--blue);
  padding: var(--space-4) var(--space-10); cursor: pointer; white-space: nowrap;
}
.pos-notat {
  flex-basis: 100%;
  font-size: var(--fs-brod); color: var(--text-soft);
  margin-top: var(--space-6); line-height: 1.5;
}
.pos-notat-merke {
  font-size: var(--fs-merke); color: var(--text-soft);
  background: var(--bg-soft); border-radius: var(--r);
  padding: 1px var(--space-8); margin-right: var(--space-4); white-space: nowrap;
}

/* ---------- eksponeringsrapport (§38) — land/valuta/verdikjede på det du eier ---------- */

.eksp-intro {
  font-size: var(--fs-brod); color: var(--text-soft);
  margin: var(--space-4) 0 var(--space-10);
}
.eksp-rad {
  display: flex; flex-direction: column; gap: var(--space-6);
  margin-bottom: var(--space-14);
}
.eksp-tittel {
  font-size: var(--fs-merke); font-weight: 600; color: var(--text-soft);
}
/* §241: stablet stang (antall pr. gruppe — aldri kroneverdi, se §38) +
   en «pille» over som fremhever den største gruppens andel. */
.eksp-stang-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.eksp-stang-pill {
  align-self: flex-start;
  font-size: var(--fs-merke); font-weight: 600; color: var(--accent);
  background: var(--accent-bg); border-radius: var(--r-liten);
  padding: 1px var(--space-8);
}
.eksp-stang {
  display: flex; height: 20px; border-radius: var(--r-liten); overflow: hidden;
  background: var(--bg-soft);
}
.eksp-stang-seg {
  background: var(--accent); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-min); font-weight: 600; white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--bg-soft);
}
.eksp-stang-seg:last-child { border-right: none; }
.eksp-liste { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.eksp-bit {
  font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border-radius: var(--r-liten);
  background: var(--bg-soft); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eksp-bit.up { color: var(--up); } .eksp-bit.down { color: var(--down); }
.eksp-fotnote {
  font-size: var(--fs-merke); color: var(--text-faint);
  margin: var(--space-6) 0 0; line-height: 1.5;
}

/* ---------- redigerbare paneler ---------- */

.panel.eier {
  border-left: 3px solid var(--blue);
  background: var(--accent-bg);
  border-radius: var(--r);
  padding: var(--space-14) var(--space-20);
  margin: var(--space-24) 0;
}
.eier-chip {
  font-size: var(--fs-merke); font-weight: 400;
  color: var(--blue); background: var(--blue-bg);
  padding: var(--space-2) var(--space-8); border-radius: var(--r-liten);
}
/* §178: tredje tilstand mellom "David sin jobb" (ingen merking) og "din
   jobb" (.eier-chip, fylt) — valgfri input som styrker automatikken uten
   å kreve den. Åpen ramme (ikke fylt flate) signaliserer nettopp det:
   ta den eller la stå, David fungerer uansett. Egen farge (--warn/amber)
   fra --blue så den aldri forveksles med en pålagt oppgave. */
.styrker-chip {
  font-size: var(--fs-merke); font-weight: 400;
  color: var(--warn); background: var(--bg);
  border: 1px solid var(--warn);
  padding: 1px var(--space-8); border-radius: var(--r-liten);
}
.form-rad { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; margin-top: var(--space-12); }
.eier-input {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  padding: var(--space-8) var(--space-10); background: var(--bg); color: var(--text);
}
.eier-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.eier-input[name="verdipapir"], .eier-input[name="selskap"], .eier-input[name="hendelsestype"] { min-width: 150px; }
/* §182: hvilken valuta "pris"-feltet skal skrives i — synlig, ikke bare
   en placeholder som forsvinner idet du begynner å skrive. */
/* §189: gjør Vaktlistas ekte #1 synlig som DEN rangeringen — Radar har sin
   egen "kvalitet"-skala, Til vurdering sorterer etter hastverk, ikke kvalitet
   (se DYBDE_HODE/pipelineStripe()). Institusjonsblå, samme familie som
   .eier-chip — bevisst ALDRI grønn, det ville lest som "kjøp". */
.rang-topp {
  color: var(--accent); background: var(--accent-bg);
  font-weight: 600; border-radius: var(--r-liten); padding: 1px var(--space-6);
}
.vakt-pris-valuta {
  font-size: var(--fs-merke); font-weight: 500; color: var(--text-soft);
  background: var(--bg-soft); border-radius: var(--r-liten);
  padding: var(--space-4) var(--space-8); margin-left: -4px;
}
.eier-submit {
  font: inherit; font-size: var(--fs-brod); font-weight: 500;
  border: 1px solid var(--accent); border-radius: var(--r-liten);
  background: var(--accent); color: var(--accent-tekst);
  padding: var(--space-8) var(--space-16); cursor: pointer;
}
.eier-submit:hover { background: var(--accent-hover); }
/* §842: .vislaas-knapp fikk sin egen Cynefin-knapp-stil (se §712-blokken) — delte ikke lenger
   eier-submit sin --accent-stil, siden lås-skjermen nå har en egen, fast merkevareidentitet. */
.vislaas-knapp { display: inline-block; }   /* låseskjermen vises uten redigeringsmodus: aldri skjult av body:not(.redigering) */
/* F8: rediger/fjern-knapper i GAV-skjemaet */
.gav-knapper { display: flex; gap: var(--space-10); align-items: center; flex-wrap: wrap; }
.eier-fjern {
  font: inherit; font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid var(--down-bg); border-radius: var(--r-liten);
  background: var(--bg); color: var(--down); padding: var(--space-6) var(--space-12); cursor: pointer;
}
.eier-fjern:hover { background: var(--down-bg); border-color: var(--down); }
body:not(.redigering) .eier-fjern { opacity: .5; pointer-events: none; }
body:not(.redigering) .eier-input,
body:not(.redigering) .gav-blyant { opacity: .5; pointer-events: none; }
body:not(.redigering) .eier-submit,
body:not(.redigering) .gav-form,
body:not(.redigering) .notat-form,
body:not(.redigering) .gav-salg,
body:not(.redigering) .drom-knapp { display: none; }
.form-hint { font-size: var(--fs-brod); color: var(--text-soft); margin-top: var(--space-8); }
.form-hint a { color: var(--blue); }

/* §177: kostnadssatser for balansepunkt-terskelen i #vakt-form */
.kost-oppsett { margin-top: var(--space-10); font-size: var(--fs-merke); }
.kost-oppsett > summary { cursor: pointer; color: var(--text-soft); padding: var(--space-4) 0; }
.kost-oppsett > summary:hover { color: var(--accent); }
.kost-rad { margin-top: var(--space-8); }
.kost-felt { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-merke); color: var(--text-soft); }
.kost-felt input { width: 90px; }
.kost-fotnote { font-size: var(--fs-merke); color: var(--text-faint); margin-top: var(--space-6); }

/* ---------- søkehjelp: navn/ticker-forslag under et «legg til»-felt ---------- */
.sok-forslag {
  position: absolute; z-index: 40; margin-top: 0;
  max-height: 260px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--skygge-2);   /* §525 */
}
.sok-forslag-rad {
  display: flex; align-items: baseline; gap: var(--space-8);
  padding: var(--space-8) var(--space-10); cursor: pointer; white-space: nowrap;
}
.sok-forslag-rad:hover { background: var(--blue-bg); }
.sok-forslag-tkr { font-weight: 500; font-variant-numeric: tabular-nums; }
.sok-forslag-navn { color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.sok-forslag-bors { font-size: var(--fs-merke); color: var(--text-soft); margin-left: auto; padding-left: var(--space-10); }

/* ---------- «?»-forklaringer (progressiv avdekking) ---------- */

.hjelp-knapp {
  margin-left: var(--space-8);
  width: 17px; height: 17px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg); color: var(--text-soft);
  font: inherit; font-size: var(--fs-merke); font-weight: 700; line-height: 1;
  cursor: pointer; vertical-align: middle;
}
.hjelp-knapp:hover { border-color: var(--blue); color: var(--blue); }
.hjelp-knapp[aria-expanded="true"] { background: var(--blue-bg); border-color: var(--blue-bg); color: var(--blue); }
.section-title .hjelp-knapp { transform: translateY(-2px); }

.hjelp-panel {
  margin: var(--space-6) 0 var(--space-16);
  padding: var(--space-12) var(--space-14);
  background: var(--bg-soft);
  border-left: 3px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-brod); line-height: 1.5;
  max-width: 68ch;
}
.hjelp-panel.skjult { display: none; }
.hjelp-panel p { margin: 0 0 var(--space-4); color: var(--text-soft); }
.hjelp-panel p:last-child { margin-bottom: 0; }
.hjelp-panel b { color: var(--text); font-weight: 500; }
.hjelp-mer { margin: var(--space-8) 0 0; padding-left: var(--space-16); }
.hjelp-mer li { margin-top: var(--space-4); color: var(--text-soft); }

/* ---------- samlet analyse-side per selskap ---------- */

.selskap-lenke {
  color: var(--accent); text-decoration: none; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.selskap-lenke:hover { border-bottom-color: var(--accent); }

.selskapsside { display: none; padding: var(--space-24) var(--space-32); max-width: 1060px; }
body.selskap-modus .selskapsside { display: block; }
body.selskap-modus .skall,
body.selskap-modus #tidsreisebar { display: none; }

.selskap-topp { margin-bottom: var(--space-6); }
.selskap-tilbake {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-6) var(--space-14); cursor: pointer; margin-bottom: var(--space-14);
}
.selskap-tilbake:hover { border-color: var(--blue); color: var(--blue); }
/* §801: escape fra den trange "utvidet"-visningen (en rad i en liste, åpnet
   inline) til det romslige fullskjerm-overlayet — vises rett ved siden av
   tilbake-knappen, samme rad, aldri i selve fullskjermvisningen. */
.selskap-apne-full { margin-left: var(--space-12); font-size: var(--fs-brod); }
/* §939-oppfølging (Etappe 3, Jens: "alt ser like viktig ut"): selskapsnavnet er det FØRSTE du
   leser på denne siden — tyngste vekt vi bruker (700, ikke 600 som nesten alt annet allerede
   står på, se BEGRENSNINGER §939) reserveres her, ikke spredt likt utover siden. */
.selskap-h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
/* §225: mikro-flagg (hjemland) foran ticker/navn — ren orientering, ikke et
   nytt datapunkt å tolke. font-size litt under selve h1-en så det leser
   som et lite merke, ikke som en del av selve overskriften. */
.selskap-h1 .selskap-flagg { font-size: 16px; margin-right: var(--space-6); }
.selskap-merker { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; margin: var(--space-10) 0 var(--space-4); }
/* §821: kurs + børs-status rett under tittelen — samme avstands-oppskrift som .selskap-merker,
   bare ETT trinn høyere oppe på siden (se selskap.js, byggSelskapTopp). */
.selskap-glimt { display: flex; gap: var(--space-10); flex-wrap: wrap; align-items: center; margin: var(--space-6) 0; }
/* §939-oppfølging: kursen er det andre du leser her — samme 700-reservasjon som .selskap-h1.
   Dagsendringen ved siden av er bevisst HOLDT på en lavere vekt (arver ellers 700 fra
   .selskap-glimt-pris) — den er en detalj ved prisen, ikke en konkurrent til den. */
.selskap-glimt-pris { font-size: var(--fs-tittel); font-weight: 700; font-variant-numeric: tabular-nums; }
.selskap-glimt-pris .gd-verdi { font-size: var(--fs-brod); font-weight: 500; margin-left: var(--space-6); }
.selskap-mage { font-size: var(--fs-brod); color: var(--warn); }

.selskap-seksjon { margin-top: var(--space-24); }
.selskap-seksjon .section-title { margin: 0 0 var(--space-10); }

/* §355: selskapsdossieret — Oversikt/Kursbilde/Historikk/Analyse/Oppfølging
   som faner i stedet for én lang scroll (erstatter de gamle «Historikk»/
   «Analyse»-<details>-gruppene). Fane-knappene er BEVISST `.vakt-linse`/
   `.vakt-linse-kn` gjenbrukt uendret — samme svitsj Vaktlista/Baksiden/
   Utsalget alt bruker — ikke et nytt fane-utseende (Jens, §354: "david har
   noenlunde lik utforming overalt"). */
.selskap-fane-strip { margin: var(--space-20) 0 var(--space-4); }
.selskap-fane-panel { display: none; }
.selskap-fane-panel.aktiv { display: block; }
.selskap-fane-panel > .selskap-seksjon:first-of-type { margin-top: var(--space-10); }

.selskap-grunndata {
  display: grid; grid-template-columns: repeat(auto-fill, 158px);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  width: max-content; max-width: 100%;
}
.gd-celle {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-10) var(--space-12); background: var(--bg); min-width: 0;
}
.gd-etikett { font-size: var(--fs-merke); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; }
.gd-verdi { font-size: var(--fs-brod); font-weight: 600; font-variant-numeric: tabular-nums; }
.gd-verdi.up { color: var(--up); }
.gd-verdi.down { color: var(--down); }

/* ---------- Kursbilde: pris + hendelser ---------- */
.kursbilde .pg-verktoy, .hyp-verktoy { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-2) 0 var(--space-10); }   /* §456: wrap — vindu-knapper + velger + pille + modus-tekst passet ikke på mobil og gjorde hele siden bredere enn skjermen */
.pg-kn {
  font: inherit; font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg-soft); color: var(--text-soft); font-variant-numeric: tabular-nums;
}
.pg-kn.paa { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* §99: dag-velger for Intradag-visning */
.pg-dagvelger { display: flex; align-items: center; gap: var(--space-6); margin: -4px 0 var(--space-10); }
.pg-dagvelger[hidden] { display: none; }
.pg-dag-nav { padding: var(--space-2) var(--space-8); line-height: 1; }
.pg-dag-nav:disabled { opacity: .35; cursor: default; }
.pg-dag-dato {
  font-size: var(--fs-merke); font-family: var(--mono); color: var(--text-soft);
  min-width: 92px; text-align: center;
}

.pg-flate-wrap { position: relative; }
.pg-flate { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.pg-svg { display: block; width: 100%; height: auto; shape-rendering: geometricPrecision; }
/* §834 (Jens, mobilskjermbilde: grafen klemte 9px SVG-tekst ned til et par skjerm-px — uleselig).
   Under 760px (SVG-ens egen viewBox-bredde — der blir 1 SVG-enhet = 1 skjerm-px, nøyaktig som
   desktop sin størrelse) blir grafen ekte skrollbar i stedet for presset ned til uleselig. Samme
   overflow-x:auto-mønster som .hf-graf-flate (hendelsesforlop.js, §383) allerede løser dette med —
   gjenbrukt, ikke oppfunnet. JS (selskap.js) scroller til siste dag ved tegning, samme sted. */
@media (max-width: 760px) {
  .pg-flate { overflow-x: auto; overflow-y: hidden; }
  .pg-svg { width: 760px; max-width: none; }
}

.pg-grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.pg-grid-v { stroke-dasharray: 2 3; opacity: .6; }
.pg-akse-t { fill: var(--text-faint); font-size: 9px; font-family: var(--mono); }
.pg-band { fill: var(--accent); opacity: .07; }
.pg-areal { fill: var(--accent); opacity: .045; }
/* §393 ("David 2.0", leveranse 4): ekte pris i hendelsesforløpets egen
   graf — samme aksentfarge som Kursbildets egen kurve (--accent), ikke
   en ny, oppfunnet farge. */
.hf-graf-pris-linje {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round; shape-rendering: geometricPrecision;
}
.hf-graf-pris-tekst { fill: var(--accent); font-weight: 600; }
/* §101: skarpere kurve — spiss join, hårfin strek som ikke fetner når SVG-en
   skaleres opp, presis rendering. */
.pg-linje {
  stroke: var(--accent); stroke-width: 1.15; stroke-linejoin: miter;
  stroke-linecap: butt; vector-effect: non-scaling-stroke;
}
.pg-linje-tynn { stroke-width: .9; opacity: .5; }
.pg-vol { fill: var(--text-faint); opacity: .28; }

/* §101: OHLC-dagsbarer / intradag hi-lo-stolper — fargelagt opp/ned */
.pg-stolpe-hl, .pg-stolpe-t {
  stroke: currentColor; stroke-width: 1; stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.pg-stolpe-opp { color: var(--up); }
.pg-stolpe-ned { color: var(--down); }

/* §98: kvartalsrapport-markører øverst på kursaksen */
.pg-hopp { cursor: help; }
.pg-hopp-linje { stroke: var(--text-soft); stroke-width: 1; stroke-dasharray: 4 3; opacity: .55; }
.pg-hopp-merke { font-size: 9px; font-weight: 600; fill: var(--text-soft); }
.pg-hopp-ukjent .pg-hopp-linje { stroke: var(--down); opacity: .7; }
.pg-hopp-ukjent .pg-hopp-merke { fill: var(--down); }
.pg-hopp-splitt .pg-hopp-linje { stroke: var(--down); opacity: .7; }
.pg-hopp-splitt .pg-hopp-merke { fill: var(--down); }
.pg-hopp:hover .pg-hopp-linje { opacity: 1; }
.pg-rapport { cursor: help; }
.pg-rapport-linje { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 2 3; opacity: .35; }
.pg-rapport-merke {
  fill: var(--text-soft); font-size: 8.5px; font-family: var(--mono);
  font-weight: 600; letter-spacing: .02em;
}
.pg-rapport:hover .pg-rapport-linje { opacity: .7; }
.pg-rapport:hover .pg-rapport-merke { fill: var(--accent); }

.pg-ev { cursor: pointer; }
.pg-ev-strek { stroke: currentColor; stroke-width: 1; opacity: .35; }
.pg-ev-prikk { fill: currentColor; stroke: var(--bg); stroke-width: 1; }
.pg-ev:hover .pg-ev-prikk { r: 4.6; }
.pg-ev:hover .pg-ev-strek { opacity: .7; }
.pg-ev-melding  { color: var(--text-faint); }
.pg-ev-funn     { color: var(--accent); }
.pg-ev-funn-neg { color: var(--down); }
.pg-ev-kjop     { color: var(--up); }
.pg-ev-salg     { color: var(--down); }
/* eget kjøp: bevisst --text (ikke --up) — skal aldri kunne forveksles med
   innsidernes kjøp over. Hul prikk = delvis posisjon, fylt = fullstendig
   eller ikke oppgitt (§42). */
.pg-ev-eget-kjop { color: var(--text); }
.pg-ev-eget-kjop[data-posisjon="delvis"] .pg-ev-prikk {
  fill: var(--bg); stroke: currentColor; stroke-width: 1.6;
}
/* eget salg (§54): --text-soft, samme «ikke --up/--down» logikk som over —
   skal aldri kunne forveksles med innsidernes salg. */
.pg-ev-eget-salg { color: var(--text-soft); }

.pg-kryss { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 2 2; }
.pg-kryss-pkt { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.pg-kryss-t { fill: var(--text-soft); font-size: 9.5px; font-family: var(--mono); }

.pg-tip {
  position: absolute; z-index: 5; max-width: 220px; pointer-events: none;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  padding: var(--space-6) var(--space-8); box-shadow: var(--skygge-2);   /* §525 */
  display: flex; flex-direction: column; gap: var(--space-2);
}
/* display:flex over slår nettleserens [hidden]{display:none} — uten dette
   svever den tomme tooltip-boksen alltid oppå legendraden (§69). Samme
   mønster som .dybde-info[hidden], .overvaak-topp[hidden] osv. */
.pg-tip[hidden] { display: none; }
.pg-tip-d { font-size: var(--fs-merke); color: var(--text-faint); font-family: var(--mono); }
.pg-tip-l { font-size: var(--fs-brod); color: var(--text); line-height: 1.35; }

.pg-legende { display: flex; gap: var(--space-14); flex-wrap: wrap; margin-top: var(--space-8); }
.pg-leg { display: flex; align-items: center; gap: var(--space-6); font-size: var(--fs-merke); color: var(--text-soft); }
.pg-prikk { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pg-prikk.pg-ev-melding { background: var(--text-faint); }
.pg-prikk.pg-ev-funn { background: var(--accent); }
.pg-prikk.pg-ev-kjop { background: var(--up); }
.pg-prikk.pg-ev-salg { background: var(--down); }
.pg-prikk.pg-ev-eget-kjop { background: var(--text); }
.pg-prikk.pg-ev-eget-salg { background: var(--text-soft); }
.pg-bunn { margin-top: var(--space-8); font-size: var(--fs-merke); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.pg-bunn.up { color: var(--up); } .pg-bunn.down { color: var(--down); }

/* §89: grunnrate — beskrivende historisk kontekst, aldri et råd.
   §788 (Jens, skjermbilde: "overveldende mengde ulike typer skrift"): selve setningen var limt til
   --fs-merke (10,5px, dokumentert for KORTE uppercase-etiketter, style.css:46-52) som om den var en
   etikett og ikke en lesbar setning — løftet til --fs-brod (13px), husets egen sanksjonerte
   lese-størrelse ("SEB-prinsippet"). Selve GRUNNRATE-badgen under beholder etikett-størrelse — det
   ER en etikett. */
.grunnrate {
  margin: 0; font-size: var(--fs-brod); color: var(--text-soft);
  line-height: 1.4; font-variant-numeric: tabular-nums;
}
.grunnrate-merke, .kraft-merke {
  display: inline-block; margin-right: var(--space-6); padding: 0 var(--space-6);
  border: 1px solid var(--line-strong); border-radius: 999px;
  /* §788: var calc(var(--fs-merke) - 1px) ≈ 9,5px — under --fs-min (10px), filens egen
     dokumenterte skriftstørrelse-GULV (§525). Rettet til selve gulvet. */
  font-size: var(--fs-min); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint);
}

/* §296 (Fase 7): posisjoneringsprofiler — samme "grunnrate"-tallspråk,
   bare samlet for direkte sammenligning. Ingen ny farge/stil oppfunnet. */
.profil-rad {
  padding: var(--space-8) 0; border-bottom: 1px solid var(--line);
}
.profil-rad:last-child { border-bottom: none; }
.profil-navn { font-weight: 600; margin-right: var(--space-8); }
.profil-forklaring { color: var(--text-faint); font-size: var(--fs-merke); }
.profil-rad .profil-grunnrate, .profil-rad .grunnrate-tom { display: block; margin-top: var(--space-2); }

/* §106: kraftprofil-blokk i «Kraft & myndighet» */
.kraft-profil { margin: 0 0 var(--space-4); font-size: var(--fs-merke); color: var(--text); font-weight: 500; }
.kraft-pris {
  margin: 1px 0; font-size: var(--fs-merke); color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.kraft-pris.up { color: var(--up); }
.kraft-pris.down { color: var(--down); }
.kraft-note { margin: var(--space-4) 0 var(--space-2); font-size: calc(var(--fs-merke) - 0.5px); line-height: 1.4; }
.kraft-form textarea.eier-input { min-height: 42px; resize: vertical; }

/* §276: delt varsel når yfinance_makro er degradert — se tegnMakrobilde() */
.makro-feed-varsel { color: var(--warn); }

/* §115: Makrobilde — driver-kort + prognose-gaffel */
.makro-driver {
  margin: 0 0 var(--space-8); padding: var(--space-6) 0 0; border-top: 1px solid var(--line);
}
.makro-driver:first-child { border-top: 0; padding-top: 0; }
.makro-driver-topp {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6);
  font-size: var(--fs-merke);
}
.makro-driver-navn { font-weight: 500; color: var(--text); }
.makro-driver-niva { color: var(--text-soft); font-variant-numeric: tabular-nums; }
/* §136: dagsbevegelse — uthevet ring når den krysser rykk-terskelen */
.makro-driver-1d, .makro-driver-30d { font-variant-numeric: tabular-nums; }
.makro-driver-1d.makro-rykk { font-weight: 600; outline: 1px solid currentColor; outline-offset: -1px; }
/* §143: regime-chip — hvor strukket driveren er mot egen 24-mnd-historikk */
.makro-driver-regime { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.makro-driver-regime.makro-ekstrem {
  color: var(--warn, var(--down)); font-weight: 600;
  outline: 1px solid currentColor; outline-offset: -1px;
}
.makro-prognose {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-6);
  margin: var(--space-4) 0 0; padding-left: var(--space-10);
  font-size: calc(var(--fs-merke) - 0.5px); color: var(--text-soft);
}
.makro-prognose-kilde { color: var(--text); }
.makro-prognose-anslag { font-variant-numeric: tabular-nums; }
.makro-prognose-status { color: var(--text-faint); }
.makro-prognose-status.s-truffet { color: var(--up); }
.makro-prognose-status.s-bommet { color: var(--down); }
.makro-driver-note, .makro-driver-eksp { margin: var(--space-4) 0 0; line-height: 1.4; }
/* §129: «hvem fikk rett» — per-kilde treffrate */
.makro-kilder { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.makro-kilde-rad {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10);
  padding: var(--space-4) 0; font-size: var(--fs-merke);
}
.makro-kilde-navn { color: var(--text); font-weight: 500; }
.makro-kilde-tall { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-soft); }
.makro-kilde-tall.s-truffet { color: var(--up); }
.makro-kilde-tall.s-bommet { color: var(--down); }
.pg-grunnrate-linje { margin-top: var(--space-4); }
.pg-grunnrate { border-left: 2px solid var(--line-strong); padding-left: var(--space-8); }
.pg-tip-gr {
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line);
  font-size: calc(var(--fs-merke) - 0.5px); color: var(--text-soft); line-height: 1.35;
}
.pg-tip-gr .grunnrate-merke { display: none; }        /* plassen er trang i tooltip */
.vakt-detalj .grunnrate { border-left: 2px solid var(--line-strong); padding-left: var(--space-8); }
/* §90: skepsis-vekt justert av flaggets egen historikk (svinghjulet) */
.vakt-tillit {
  margin: 0; font-size: var(--fs-merke); color: var(--down);
  border-left: 2px solid var(--down); padding-left: var(--space-8);
  font-variant-numeric: tabular-nums;
}
/* §388 ("David 2.0" — §23 endret 1. okt 2026): den nye, faktiske
   anbefalingslinjen. Samme border-left-merke-mønster som .vakt-tillit/
   .vakt-funn over, men i --accent (institusjonsblå, husets EGEN
   aksentfarge — ALDRI rødt/grønt her, det ville lest som kjøp/selg-
   signalfarge i stedet for Davids egen, nøytrale stemme). */
.vakt-anbefaling {
  margin: 0 0 var(--space-8); font-size: var(--fs-brod); color: var(--text);
  border-left: 2px solid var(--accent); padding-left: var(--space-8);
}
.vakt-anbefaling-merke {
  font-weight: 700; letter-spacing: .03em; color: var(--accent);
}

/* §788: ÉN delt boks-oppskrift — .tilstand-helning og .tn-ford-boks (lenger ned) hadde hver sin
   hånd-dupliserte kopi av NØYAKTIG samme border+background under to ulike navn. .innsikt-boks er nå
   den ene kilden; .tilstand-lesning bygger videre på den for sin egen venstre-aksent-variant i
   stedet for å gjenta hele oppskriften en tredje gang. */
.innsikt-boks {
  padding: var(--space-8) var(--space-10); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg-soft);
}
/* §102: «Tilstand nå» — flottør-avlesning. Samme rolige, beskrivende
   familie som .grunnrate: ingen alarm-farge, tall som tabular-nums.
   §788: brødteksten (ikke etikettene) løftet fra --fs-merke til --fs-brod, samme begrunnelse som
   .grunnrate over. */
.tilstand-naa { display: flex; flex-direction: column; gap: var(--space-6); }
.tilstand-naa .tilstand-rad {
  margin: 0; font-size: var(--fs-brod); color: var(--text-soft);
  line-height: 1.45; font-variant-numeric: tabular-nums;
}
.tilstand-naa .tilstand-helning {
  margin: 0; font-size: var(--fs-brod); line-height: 1.45;
  font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500;
}
/* §150 (Fase 3.1 / S1): «Davids lesning» — fusjonert headline over ledeteksten */
.tilstand-naa .tilstand-lesning {
  margin: 0 0 1px; font-size: var(--fs-brod); line-height: 1.5;
  font-variant-numeric: tabular-nums; color: var(--text);
  padding-left: var(--space-12); border-left: 3px solid var(--accent, var(--line-strong));
}
.tilstand-lesning-merke {
  font-weight: 600; color: var(--text); margin-right: var(--space-4);
  text-transform: uppercase; letter-spacing: 0.04em;
  /* §788: var calc(var(--fs-merke) - 1px) ≈ 9,5px, under --fs-min-gulvet (§525). Rettet. */
  font-size: var(--fs-min);
}
.tilstand-merke {
  display: inline-block; width: 1.1em; color: var(--text-faint); font-weight: 400;
}
.tilstand-naa .grunnrate.tilstand-gr { margin-top: 1px; }
.tilstand-forbehold {
  margin: var(--space-4) 0 0; font-size: var(--fs-min);   /* §788: var under --fs-min-gulvet, rettet */
  color: var(--text-faint); line-height: 1.4; font-style: italic;
}
/* §154 (Fase 3.3 / K1): kjerne-15 */
.kjerne-kpi-form {
  display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-6) 0 var(--space-2);
  align-items: center;
}
.kjerne-kpi-form .eier-input { flex: 1 1 180px; min-width: 0; }
.kjerne-kpi-form .eier-submit { flex: 0 0 auto; }
.kjerne-kpi-form .form-status { flex-basis: 100%; margin: var(--space-2) 0 0; }
/* §156 (K4): Davids KPI-forslag som klikkbare chips */
.kjerne-kpi-forslag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: var(--space-4) 0 var(--space-2); }
.kjerne-kpi-chip {
  font: inherit; font-size: var(--fs-merke); cursor: pointer;
  padding: var(--space-2) var(--space-8); border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg); color: var(--text-soft);
}
.kjerne-kpi-chip:hover { background: var(--accent-bg); color: var(--text); border-color: var(--accent); }
/* §157 (K5): Davids ferske tall for en KPI */
.kjerne-kpi-auto { flex-basis: 100%; margin-left: var(--space-2); color: var(--text-soft); }
.kjerne-kpi-auto-kilde { color: var(--text-faint); }
.kjerne-kpi { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
/* §155 (K2): opportunity-cost — dette navnet vs svakeste kjerne */
.opp-kost-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-6); }
.opp-kost-kol {
  border: 1px solid var(--line); border-radius: var(--r-liten); padding: var(--space-8) var(--space-10);
  min-width: 0;
}
.opp-kost-hode {
  font-size: calc(var(--fs-merke) - 1px); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: var(--space-4);
}
.opp-kost-navn { display: flex; align-items: baseline; gap: var(--space-6); }
.opp-kost-navn .selskap-lenke { font-family: var(--mono); font-weight: 600; }
@media (max-width: 560px) { .opp-kost-grid { grid-template-columns: minmax(0, 1fr); } }
.kjerne-kpi-navn { font-weight: 500; color: var(--text); }
.kjerne-kpi-verdi { font-variant-numeric: tabular-nums; }
/* §209: «Beholdningen» — samme boks-stil som Kjerne-panelet rett under,
   men for HELE det du eier, ikke bare kjerne-flagget. Radene inni bruker
   de delte .rangert-*-klassene fra Banen/Utsalget (§208) — samme design. */
.beholdning-panel {
  margin: 0 0 var(--space-12); padding: var(--space-8) var(--space-10); border: 1px solid var(--line-strong);
  border-radius: var(--r-liten); background: var(--bg-soft);
}
.beholdning-panel .rangert-detalj .sak-posisjon { margin-top: var(--space-2); }
.kjerne-panel {
  margin: 0 0 var(--space-12); padding: var(--space-8) var(--space-10); border: 1px solid var(--line-strong);
  border-radius: var(--r-liten); background: var(--bg-soft);
}
.kjerne-rad {
  display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap;
  padding: var(--space-4) 0; font-size: var(--fs-merke); border-top: 1px solid var(--line);
}
.kjerne-rad:first-of-type { border-top: 0; }
.kjerne-rad .selskap-lenke { font-family: var(--mono); font-weight: 600; }
.kjerne-kpi-tall { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.kjerne-kpi-tall.mangler { color: var(--warn, var(--down)); font-weight: 600; }
.kjerne-d { font-family: var(--mono); font-size: var(--fs-data); margin-left: auto; }
.kjerne-d.up { color: var(--up); } .kjerne-d.down { color: var(--down); }
.kjerne-d.flat { color: var(--text-soft); }

/* §941 (Ghost Mode, Etappe 3): BEVISST ulikt uttrykk fra en ekte posisjon-flate — stiplet
   ramme (ikke .kjerne-panel sin heltrukne), «sunket» flate-nivå (--bg-sink, ett hakk dypere
   enn .kjerne-panel sin --bg-soft) — skal aldri kunne forveksles med ekte penger ved et
   øyekast, selv uten å lese merket. */
.ghost-seksjon {
  margin: 0 0 var(--space-12); padding: var(--space-10) var(--space-12);
  border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--bg-sink);
}
.ghost-merke { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-6); }
.ghost-figur { color: var(--text-faint); flex: none; }
.ghost-tittel { font-weight: 600; }
.ghost-advarsel { font-size: var(--fs-merke); color: var(--text-faint); }
.ghost-topp { display: flex; align-items: baseline; gap: var(--space-10); flex-wrap: wrap; }
.ghost-verdi { font-size: var(--fs-tittel); font-weight: 600; font-variant-numeric: tabular-nums; }
.ghost-avk { font-family: var(--mono); font-size: var(--fs-brod); }
.ghost-avk.up { color: var(--up); } .ghost-avk.down { color: var(--down); } .ghost-avk.flat { color: var(--text-soft); }
.ghost-graf { margin: var(--space-8) 0; max-width: 300px; }
.ghost-graf .hyp-graf-svg { width: 100%; height: auto; }
.ghost-graf .hyp-linje { stroke: var(--text-faint); }
.ghost-graf .hyp-punkt { fill: var(--text-faint); }
.ghost-posisjoner { margin-top: var(--space-8); border-top: 1px dashed var(--line); padding-top: var(--space-6); }
.ghost-posisjon-rad { display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; padding: var(--space-4) 0; font-size: var(--fs-merke); }

/* B: samme panel under ordre-skjemaet på Dekket — litt tettere */
.tilstand-naa-vert { margin: var(--space-6) 0 var(--space-2); }
.tilstand-naa-vert .tilstand-naa { gap: var(--space-4); }
.tilstand-naa-vert .tilstand-helning { padding: var(--space-6) var(--space-8); }

/* §103 (K4): utvidbar fordelings-boks for oppsettet */
.tn-fordeling { margin: 0; }
.tn-fordeling > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--space-4);
}
.tn-fordeling > summary::-webkit-details-marker { display: none; }
.tn-fordeling > summary::after { content: "⌄"; color: var(--text-faint); }
.tn-fordeling[open] > summary::after { content: "⌃"; }
.tn-ford-boks { margin-top: var(--space-6); }   /* §788: boks-oppskriften er nå .innsikt-boks, se over */
.tn-ford-tittel { margin: 0 0 var(--space-6); font-size: var(--fs-brod); color: var(--text-soft); }   /* §788 */
/* §309-oppfølging (Jens, mot ekte data i Vaktlista sin inline-utvidelse:
   "se over størrelser og proporsjoner"): 1fr-kolonnene strakk «median»/
   «snitt»/«andel opp» over HELE bredden av en beholder — usynlig i det
   smale, faste .selskapsside-overlayet, men tydelig i en bredere inline-
   kolonne. Tabellen er en kompakt referanse (fem korte tall), ikke noe
   som skal fylle bredden den tilfeldigvis får. `auto`-kolonner ALENE er
   IKKE nok — uten et eksplisitt justify-content strekker grid-spec sin
   "leftover space"-fordeling dem likevel utover hele bredden (bekreftet
   empirisk, ikke bare i teorien); justify-content:start holder dem tett
   inntil hverandre uansett hvor bred beholderen tilfeldigvis er. */
.tn-ford-grid {
  display: grid; grid-template-columns: repeat(5, auto); justify-content: start;
  gap: var(--space-4) var(--space-12); font-size: var(--fs-merke); font-variant-numeric: tabular-nums;
}
.tn-ford-h {
  color: var(--text-faint); font-size: calc(var(--fs-merke) - 1px);
  text-transform: uppercase; letter-spacing: .03em; text-align: right;
}
.tn-ford-h:first-child { text-align: left; }
.tn-ford-v { color: var(--text-soft); }
.tn-ford-v:last-child { text-align: right; }
.tn-ford-t { color: var(--text); text-align: right; }
.tn-ford-t.up { color: var(--up); }
.tn-ford-t.down { color: var(--down); }
.tn-ford-trf, .tn-ford-note {
  margin: var(--space-8) 0 0; font-size: calc(var(--fs-merke) - 0.5px);
  color: var(--text-soft); line-height: 1.4;
}
.tn-ford-note { color: var(--text-faint); font-style: italic; }

.innsiderad {
  display: flex; gap: var(--space-12); flex-wrap: wrap; align-items: baseline;
  padding: var(--space-10) var(--space-2); border-bottom: 1px solid var(--line); font-size: var(--fs-brod);
}
.innsider-dato { color: var(--text-soft); font-size: var(--fs-brod); min-width: 58px; }
.innsider-navn { font-weight: 500; min-width: 180px; }
.innsider-retn.up { color: var(--up); font-weight: 500; }
.innsider-retn.down { color: var(--down); font-weight: 500; }
.innsider-detalj { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.innsider-kilde { color: var(--text-soft); font-size: var(--fs-merke); margin-left: auto; }

.funn-kort { padding: var(--space-12) 0; border-bottom: 1px solid var(--line); }
.funn-kort .motsigelse { color: var(--down); font-size: var(--fs-brod); margin: var(--space-6) 0 0; }
.funn-kort .funn-relatert { color: var(--text-soft); font-size: var(--fs-brod); margin: var(--space-6) 0 0; }
.funn-topp { display: flex; gap: var(--space-10); align-items: baseline; flex-wrap: wrap; }
.funn-dato { font-size: var(--fs-brod); color: var(--text-soft); }
.funn-sammendrag { margin: var(--space-6) 0 0; font-size: var(--fs-brod); line-height: 1.5; }
.funn-kort .utvid { display: inline-block; margin-top: var(--space-6); font-size: var(--fs-brod); color: var(--blue); cursor: pointer; }

@media (max-width: 1200px) { .selskapsside { padding: var(--space-24) var(--space-20); } }
.form-status { font-size: var(--fs-brod); margin-top: var(--space-8); min-height: 1em; }
.form-status.ok { color: var(--up); }
.form-status.feil { color: var(--down); }

.ordre-rad, .kal-rad {
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
  padding: var(--space-10) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-brod);
}
.ordre-rad .hovedtekst, .kal-rad .hovedtekst { font-weight: 500; }
.ordre-rad .dager { color: var(--text-soft); }
.ordre-rad .dager.haster { color: var(--down); font-weight: 500; }
/* §76: inline «endre»-skjema — egen linje under raden */
.ordre-rediger {
  flex-basis: 100%; display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center;
  margin-top: var(--space-6); padding-top: var(--space-8); border-top: 1px dashed var(--line);
}
.mini-knapp {
  font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft);
  padding: var(--space-4) var(--space-10); cursor: pointer;
}
/* §937: samme primærknapp-språk som .eier-submit ("registrer ordre"/"lagre") — én
   tydelig stil for "en beslutning du tar", ikke en egen, særegen stil her. To klasser
   på samme knapp (.mini-knapp.overvaak-cta) slår bevisst .mini-knapp sin dempede stil,
   uten å røre tidsreise-/innloggingssperren .mini-knapp selv gir. */
.mini-knapp.overvaak-cta {
  font-weight: 500; border-color: var(--accent);
  background: var(--accent); color: var(--accent-tekst);
  padding: var(--space-8) var(--space-16);
}
.mini-knapp.overvaak-cta:hover { background: var(--accent-hover); }
.overvaak-cta-rad {
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap;
  margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px dashed var(--line);
}
.overvaak-cta-rad .meta { margin: 0; }
body:not(.redigering) .mini-knapp { display: none; }
.kal-note { font-size: var(--fs-merke); color: var(--text-soft); }
/* §45: hvorfor en hendelse ligger øverst — eid, eller topp på Vaktlista */
.kal-overbevisning {
  font-size: var(--fs-merke); padding: 1px var(--space-8); border-radius: var(--r-liten);
  background: var(--accent-bg); color: var(--accent); margin-left: var(--space-8);
}

/* ---------- eierskap ---------- */


/* ---------- Sikringsregnskap: «Hva David fanget» ---------- */
/* §945 (Jens, skjermbilde av Analyse i delt skjerm: "infoen i den krympede flisen kommer
   ikke frem"): var hardkodet til 4 kolonner uansett hvor mange .sikring-stat-barn som faktisk
   finnes. dekkFangst() (Funn-flisen) lager alltid bare 3 — en tom, bortkastet 4. kolonne gjorde
   flisen trangere enn nødvendig i en smal, krympet kontekst (delt skjerm). tegnSikring() sin
   egen, fulle Status-side har 5 .sikring-stat, så fast antall kolonner passer uansett ikke
   begge — auto-fit lar hver stat ta den bredden som faktisk finnes. */
.sikring-topp {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  margin: var(--space-4) 0 var(--space-24); max-width: 620px;
}
@media (max-width: 560px) { .sikring-topp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sikring-stat { background: var(--bg); padding: var(--space-14) var(--space-16); display: flex; flex-direction: column; gap: var(--space-2); }
.sikring-n { font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sikring-e { font-size: var(--fs-merke); color: var(--text-soft); }

.sikring-vakt { display: flex; flex-direction: column; margin-bottom: var(--space-24); max-width: 62ch; }
.sikring-vaktlinje {
  display: flex; align-items: baseline; gap: var(--space-10);
  padding: var(--space-10) var(--space-2); border-top: 1px solid var(--line);
  font-size: var(--fs-brod); color: inherit; text-decoration: none;
}
.sikring-vaktlinje:last-child { border-bottom: 1px solid var(--line); }
a.sikring-vaktlinje:hover { color: var(--blue); }
.sikring-vakt-n { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 2ch; }

.sikring-rad {
  padding: var(--space-12) var(--space-2); border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10);
}
.sikring-dato { font-size: var(--fs-merke); color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sikring-tekst { flex-basis: 100%; font-size: var(--fs-brod); color: var(--text-soft); line-height: 1.5; }
/* §879 (Etappe 3, Jens: "vanskelig å se forskjell på bra og dårlige funn... alt er bare hivd
   inn der"): retningsbærende fylde (§877 sitt vokabular) på HELE raden, ikke bare pillen — et
   klynget mønster av dårlige funn skal være synlig uten å lese hver linje. §882 (Jens, etter
   §881 sitt forsøk: "like fæl. vis litt smak da"): en flat fargeblokk på en hel rad er IKKE
   terminalens eget formspråk — "institusjonell terminal, rolig/tett/presis" (style.css sin
   egen åpningskommentar), ikke en consumer-app-aktig fargevask. Samme to-delte idiom som
   `.du-er-her`/`.fase-budskap`/`.profil-boks` allerede bruker andre steder i fila: en PRESIS,
   tynn kant (border-left, hovedsignalet) + en nesten umerkelig bakgrunns-hvisk (sekundær,
   `--down-bg-svak`/`--up-bg-svak`, nå ~5 % — var 12 %, fortsatt for mye) i stedet for en
   dominerende flate. Bleder litt utover radens egen padding (negativ margin) så fargen ikke
   klemmer teksten. */
.sikring-rad-avoid, .sikring-rad-early {
  padding-left: var(--space-10); padding-right: var(--space-10);
  margin-left: calc(-1 * var(--space-10)); margin-right: calc(-1 * var(--space-10));
  border-radius: var(--r-liten);
}
/* §882: Jens valgte denne rødtonen (--down-akse) mot to alternativer, side om side i mørkt
   tema — --down selv (brukt til pillen/teksten) var for lys/salmongrå for denne kanten. */
.sikring-rad-avoid { background: var(--down-bg-svak); border-left: 3px solid var(--down-akse); }
.sikring-rad-early { background: var(--up-bg-svak); border-left: 3px solid var(--up); }

/* §128: motsigelses-klynger — moat-signalet (gjentatt inkonsistens) */
.klynge-blokk {
  margin-bottom: var(--space-16); padding: var(--space-10) var(--space-12);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten); background: var(--bg-soft, transparent);
}
.klynge-kort { border-top: 1px solid var(--line); padding: var(--space-8) 0; }
.klynge-kort:first-of-type { border-top: 0; }
.klynge-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-8);
  cursor: pointer; list-style: none;
}
.klynge-sum::-webkit-details-marker { display: none; }
.klynge-sum::before { content: "▸ "; color: var(--text-faint); }
.klynge-kort[open] .klynge-sum::before { content: "▾ "; }
.klynge-n {
  font-family: var(--mono); font-weight: 600; font-size: var(--fs-data);
  color: var(--down);
}
.klynge-tung .klynge-n { text-decoration: underline; }
.klynge-meta { font-size: var(--fs-merke); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.klynge-liste { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.klynge-rad { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.klynge-tekst { flex-basis: 100%; font-size: var(--fs-brod); color: var(--text-soft); line-height: 1.45; }
.hk-klynge-varsel {
  margin: 0 0 var(--space-10); padding: var(--space-8) var(--space-10);
  border-left: 3px solid var(--down); background: var(--down-bg, transparent);
  font-size: var(--fs-brod); color: var(--text); line-height: 1.45;
}

/* §160 (Fase 3.4): tese-drift-tidslinje i Hukommelse */
.tese-drift { margin: 0 0 var(--space-12); font-size: var(--fs-data); }
.tese-drift > summary { cursor: pointer; color: var(--text-soft); padding: var(--space-4) 0; }
.tese-drift-hull {
  margin: var(--space-4) 0; padding: var(--space-6) var(--space-10); border-left: 3px solid var(--down);
  background: var(--down-bg, transparent); color: var(--text); line-height: 1.4;
}
.tese-punkt { margin: var(--space-4) 0; color: var(--text-soft); line-height: 1.4; }
.tese-punkt-dato { color: var(--text-faint); }
.tese-punkt-lean { font-weight: 600; }

/* ---------- flate-nøkkel: samme form på hver Følger/Verktøy-flate ---------- */
.flate-nokkel {
  display: flex; flex-wrap: wrap; gap: var(--space-24);
  padding: var(--space-2) 0 var(--space-14); margin-bottom: var(--space-16);
  border-bottom: 1px solid var(--line);
}
.flate-nokkel:empty { display: none; }
.flate-stat { display: flex; flex-direction: column; gap: 1px; }
.flate-n { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.15; }
.flate-e { font-size: var(--fs-merke); color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.kort > .flate-nokkel { margin-top: var(--space-2); }

/* ---------- Metode-laget: «Slik leser du David» ---------- */
/* §823 (Jens: "mye forskjell på sånn som metode og den vanlige siden... full utnyttelse av bredde
   og høyde... mega-responsivt"): §820 ga Metode samme ytre rammebredde som resten av appen
   (.innhold), men selve SIDEN var fortsatt én smal, statisk 68ch-kolonne uansett skjermbredde —
   akkurat den gjenværende forskjellen. Under er en EKTE layoutendring (CSS grid), ikke en
   tall-justering: smal skjerm = uendret, kjent oppførsel (register øverst, én kolonne); fra
   900px opp = registeret blir en synlig, FAST sidestolpe (sticky — bruker full
   skjermhøyde, ikke bare en liste øverst) ved siden av lesekolonnen. Selve løpetekstens 68ch
   (lenger ned) er BEVISST beholdt — bredere kolonne, ikke bredere linjelengde (§820s
   lesbarhets-begrunnelse endres ikke av at omgivelsene er fulle bredde).
   body[data-flate="metode"] (§823, dekk.js) gir samme full-bredde .innhold som andre sider. */
body[data-flate="metode"] .innhold { max-width: none; margin: 0; padding: var(--space-12) var(--space-20); }
.metode-hero { border-bottom: 1px solid var(--line); padding-bottom: var(--space-20); }
.metode-hero .section-title { margin-top: 0; }
.metode-hero p { font-size: var(--fs-brod); color: var(--text-soft); line-height: 1.6; max-width: 68ch; }
@media (min-width: 900px) {
  /* §823-fiks: `.vis.aktiv { display: block }` (style.css:923, to klasser = 0,2,0) slo IHJEL
     `.metode-vis { display: grid }` (bare én klasse = 0,1,0) — samme spesifisitets-fallgruve som
     §812/§813 traff tidligere i denne økten. `.metode-vis.aktiv` matcher spesifisiteten likt (0,2,0),
     og vinner på kildeplassering (denne regelen står senere i filen). */
  .metode-vis.aktiv {
    display: grid; grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas: "hero hero" "register innhold";
    column-gap: var(--space-32); align-items: start;
  }
  .metode-hero { grid-area: hero; max-width: none; }
  .metode-register {
    grid-area: register; position: sticky; top: var(--space-16); align-self: start;
    max-height: calc(100vh - var(--space-32)); overflow-y: auto;
  }
  .metode-innhold { grid-area: innhold; min-width: 0; }
}
@media (max-width: 899px) {
  .metode-vis { max-width: 68ch; }
}
/* §819: hver seksjon er nå en native <details> (lukket som standard, samme disiplin som
   #metode-prinsipper selv bruker) — ingen egen markør-stil, den innebygde pilen holder. */
.metode-bolk { padding: var(--space-24) 0; border-bottom: 1px solid var(--line); max-width: 68ch; }
.metode-bolk summary { cursor: pointer; }
.metode-bolk h3 { font-size: var(--fs-tittel); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-8); }
.metode-bolk p { font-size: var(--fs-brod); line-height: 1.62; margin-bottom: 0; }
/* §819: registeret — én kompakt liste over alle 22 emnene. §823: samme liste, men en sticky
   sidestolpe fra 900px (se media-blokken over) i stedet for alltid en topp-rad. */
.metode-register { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-20); }
.metode-register a {
  font-size: var(--fs-brod); color: var(--text); text-decoration: none;
  padding: var(--space-4) 0; border-bottom: 1px dotted var(--line);
}
.metode-register a:hover { color: var(--accent); }
/* §819: forrige/neste + tilbake-til-register — én linje under hver seksjons innhold. */
.metode-bolk-nav {
  margin-top: var(--space-14); font-size: var(--fs-merke); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint);
}
.metode-bolk-nav a { color: var(--text-soft); text-decoration: none; }
.metode-bolk-nav a:hover { color: var(--accent); }
/* §506: prinsipp-registeret på Metode-siden */
#metode-prinsipper { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
.prinsipp-gruppe { border: 1px solid var(--line-strong); border-radius: var(--r); padding: var(--space-4) var(--space-6); min-width: 0; }
.prinsipp-ko { border-color: var(--accent); }
.prinsipp-sum { cursor: pointer; font-weight: 600; font-size: var(--fs-brod); }
.prinsipp-rad { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.prinsipp-sum + .prinsipp-rad { margin-top: var(--space-4); }
.prinsipp-topp { display: flex; gap: var(--space-6); align-items: baseline; }
.prinsipp-id { font-family: var(--mono); font-size: var(--fs-data); color: var(--text-soft); }
.prinsipp-lag { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
.prinsipp-tekst { font-size: var(--fs-brod); line-height: 1.5; }
.metode-bolk ol { margin: var(--space-6) 0 var(--space-10) 1.2em; }
.metode-bolk ol li { font-size: var(--fs-brod); line-height: 1.55; margin-bottom: var(--space-6); }
.metode-prinsipp {
  background: var(--bg-soft); border-radius: var(--r); padding: var(--space-20) var(--space-24);
  border-bottom: none; margin-top: var(--space-10);
}
.metode-videre {
  display: inline-block; margin: var(--space-14) 0 var(--space-2);
  font-size: var(--fs-brod); font-weight: 500; color: var(--blue); text-decoration: none;
}
.metode-videre:hover { text-decoration: underline; }
/* §818: alltid synlig uansett scrollposisjon (se begrunnelsen i index.html) — bunn-høyre, unngår å
   kollidere med .topbar (som selv ikke er fast/sticky, men ville likevel ligget i samme hjørne ved
   toppen av siden om denne hadde stått der i stedet). */
.metode-lukk {
  position: fixed; bottom: var(--space-24); right: var(--space-24); z-index: 500;
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft); box-shadow: var(--skygge-2);   /* §525 */
  padding: var(--space-8) var(--space-14);
  transition: border-color var(--dur) ease, color var(--dur) ease;   /* §787 */
}
.metode-lukk:hover { border-color: var(--accent); color: var(--accent); }
.metode-flaggrad {
  display: flex; gap: var(--space-10); padding: var(--space-8) 0; align-items: baseline;
  flex-wrap: wrap; border-top: 1px solid var(--line);
}
.metode-flaggrad:first-child { border-top: none; padding-top: var(--space-2); }
.metode-flaggtekst { font-size: var(--fs-brod); color: var(--text-soft); flex: 1 1 320px; }

/* ---------- Styrke · rotasjon ---------- */

.kort > .section-title:first-child { margin-top: 0; margin-bottom: var(--space-12); }

/* §121 fjernet scenario-designeren i frontend (0 kallere); §248-opprydningen
   fjernet resten av CSS-en for det gamle skjemaet som ble liggende igjen —
   kun .scenario-traff er fortsatt i bruk (selskap.js sin passive visning). */
.scenario-traff { color: var(--up); font-weight: 500; }

.short-kandidatboks { margin-top: var(--space-24); padding-top: var(--space-8); border-top: 1px solid var(--line); }

/* Topp innsidekjøp: opphav-merke pr. rad */
.ik-opphav {
  font-size: var(--fs-merke); padding: var(--space-2) var(--space-8); border-radius: var(--r); white-space: nowrap;
}
.ik-opphav.kand { background: var(--blue-bg); color: var(--blue); font-weight: 500; }
.ik-opphav.egen { background: var(--bg-soft); color: var(--text-soft); }
.ik-opphav.ik-auto { background: var(--up-bg); color: var(--up); font-weight: 500; }
.styrke-rad.ik-egen { opacity: .72; }
#ik-rotasjon { margin-top: var(--space-24); }
#ik-rotasjon .mini-knapp { margin-left: var(--space-4); }
.styrke-rad {
  display: flex; align-items: baseline; gap: var(--space-12); flex-wrap: wrap;
  padding: var(--space-12) var(--space-4); border-bottom: 1px solid var(--line);
}
.styrke-rad .grunnrate { flex-basis: 100%; margin-top: var(--space-2); }   /* §185 (Fase 6.3) */
.styrke-rang { font-size: var(--fs-brod); font-weight: 700; color: var(--text-soft); width: 34px; }
.styrke-navn { font-size: var(--fs-brod); font-weight: 500; min-width: 160px; }
.styrke-score { font-size: var(--fs-brod); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.styrke-detalj { flex-basis: 100%; font-size: var(--fs-brod); color: var(--text-soft); }
.styrke-endring {
  font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border-radius: var(--r-liten);
  background: var(--bg-soft); color: var(--text-soft); white-space: nowrap;
}
.styrke-endring.falt { background: var(--down-bg); color: var(--down); font-weight: 500; }
.styrke-endring.opp { background: var(--up-bg); color: var(--up); }
.styrke-endring.ny { background: var(--blue-bg); color: var(--blue); }

/* ---------- Davids markedsavlesning (i Styring) ---------- */

.klima-linje { display: flex; align-items: center; gap: var(--space-8); margin: var(--space-8) 0 var(--space-4); }
.klima-mini-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #cfd8dc;
  box-shadow: 0 0 0 1px var(--line); flex-shrink: 0;
}
.klima-komp { display: flex; flex-direction: column; margin-top: var(--space-6); }
.klima-komp-rad {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-10);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-data);
}
.klima-komp-rad:last-child { border-bottom: 0; }
.klima-komp-n { color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-merke); }
.klima-komp-v { color: var(--text-soft); }

/* ---------- Myndighet & kraft ---------- */

.pill.kraft { background: var(--warn-bg); color: var(--warn); }

.lofte-avh {
  font-size: var(--fs-merke); padding: var(--space-2) var(--space-8); border-radius: var(--r);
  background: var(--blue-bg); color: var(--blue);
}

/* ---------- Spør David — svar-utfelling i kommando-konsollen (§84) ---------- */

.spor-feil { color: var(--down); }
.spor-svar {
  margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line);
  font-size: var(--fs-brod); line-height: 1.5;
}
/* §251: en tråd kan ha flere spørsmål/svar-par under hverandre */
.spor-svar-melding + .spor-svar-melding {
  margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px dashed var(--line);
}
.spor-svar-sp { font-weight: 600; margin: 0 0 var(--space-6); }
.spor-svar-dato { font-size: var(--fs-merke); color: var(--text-faint); margin: 0 0 var(--space-6); }
.spor-svar-opp { font-weight: 500; margin: 0 0 var(--space-6); }
.spor-svar-tekst { margin: 0 0 var(--space-6); white-space: pre-wrap; }
.spor-svar .meta { font-size: var(--fs-merke); color: var(--text-soft); margin: var(--space-4) 0 0; }
.spor-svar a { color: var(--blue); }
.spor-svar-selskaper { display: flex; gap: var(--space-6); flex-wrap: wrap; margin: 0 0 var(--space-6); }
.spor-svar-selskaper .selskap-lenke { font-family: var(--mono); font-weight: 600; }
.spor-folge-form { display: flex; gap: var(--space-6); margin-top: var(--space-10); }
.spor-folge-inp {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-brod);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg-soft); color: var(--text); padding: var(--space-6) var(--space-10);
}
.spor-folge-inp::placeholder { color: var(--text-faint); }
.spor-folge-inp:focus-visible {
  outline: none; border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.spor-folge-inp:disabled { opacity: .6; }
.spor-folge-knapp {
  font: inherit; font-size: var(--fs-merke);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text-soft); padding: var(--space-6) var(--space-12); cursor: pointer;
}
.spor-folge-knapp:hover { border-color: var(--accent); color: var(--accent); }

.hint { margin-top: var(--space-14); }

a { color: inherit; }

/* §437: «Spektrogram» — mørkt instrument-panel inne i det lyse grensesnittet. Egne --spek-*-tokens (ingen gjenbruk av
   de lyse flatene): lerretene tegner selv sin mørke bakgrunn, dette gir bare ramme, lesefelt og tooltip. */
#spektrogram { --spek-bg: #06000f; --spek-tekst: #d9d0ec; --spek-dempet: #9a8fb5; --spek-linje: rgba(190,170,230,.25); }
#spektrogram .spek-rutenett { display: flex; gap: var(--space-10); align-items: flex-start; flex-wrap: wrap; }
#spektrogram .spek-venstre { position: relative; background: var(--spek-bg); line-height: 0; }
#spektrogram canvas { display: block; max-width: 100%; }
#spektrogram .spek-hoved { cursor: crosshair; }
#spektrogram .spek-akse { position: relative; height: 16px; line-height: 16px; background: var(--spek-bg); }
#spektrogram .spek-akse-dato { position: absolute; transform: translateX(-50%); font: 10px/16px ui-monospace, Menlo, Consolas, monospace; color: var(--spek-dempet); white-space: nowrap; }
#spektrogram .spek-tips { position: absolute; z-index: 3; pointer-events: none; padding: var(--space-4) var(--space-8); background: rgba(8,0,20,.92); color: #f0e8ff; border: 1px solid var(--spek-linje); font: 11px/1.3 ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; }
#spektrogram .spek-tips[hidden] { display: none; }
#spektrogram .spek-hoyre { width: 250px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-8); background: var(--spek-bg); color: var(--spek-tekst); padding-bottom: var(--space-8); }
#spektrogram .spek-les, #spektrogram .spek-liste { padding: 0 var(--space-8); font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace; }
#spektrogram .spek-les-dato { color: #fff; font-size: 13px; margin-bottom: var(--space-2); }
#spektrogram .spek-les-linje { color: var(--spek-dempet); }
#spektrogram .spek-liste-rad { display: flex; justify-content: space-between; gap: var(--space-8); padding: 1px 0; }
#spektrogram .spek-lenke { color: #ffb27a; }
#spektrogram .spek-liste-tall { color: var(--spek-tekst); font-variant-numeric: tabular-nums; }
#spektrogram .spek-forklaring { max-width: 80ch; margin-bottom: var(--space-8); }
@media (max-width: 760px) { #spektrogram .spek-hoyre { width: 100%; } }

/* §439: Fasebilde — tilstandsdiagram i Havtun-stil som mørkt instrumentpanel (samme visuelle språk som Spektrogram, §437). */
.fasebilde { --fase-bg: #06000f; --fase-tekst: #d9d0ec; --fase-dempet: #9a8fb5; --fase-linje: rgba(190,170,230,.28); }
.fasebilde .fase-forklaring { max-width: 80ch; margin-bottom: var(--space-8); }
.fasebilde .fase-kort { background: var(--fase-bg); line-height: 0; max-width: 820px; }
.fasebilde .fase-svg { display: block; width: 100%; height: auto; }
.fasebilde .fase-bg { fill: var(--fase-bg); }
.fasebilde .fase-ramme { stroke: var(--fase-linje); stroke-width: 1; }
.fasebilde .fase-kuppel { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 2 3; }
.fasebilde .fase-iso { stroke: rgba(255,90,110,.45); stroke-width: .8; }
.fasebilde .fase-iso-vanlig { stroke-dasharray: 5 4; stroke: rgba(255,255,255,.4); }
.fasebilde .fase-akse { stroke: var(--fase-dempet); stroke-width: 1; }
.fasebilde text { font: 10px ui-monospace, Menlo, Consolas, monospace; fill: var(--fase-dempet); }
.fasebilde .fase-etikett-rod { fill: #ff7a8a; }
.fasebilde .fase-akse-t { fill: var(--fase-dempet); }
.fasebilde .fase-akse-tittel { fill: var(--fase-tekst); font-size: 11px; }
.fasebilde .fase-legend { fill: rgba(8,0,20,.88); stroke: var(--fase-linje); }
.fasebilde .fase-legend-tittel { fill: #fff; font-size: 11px; font-weight: 700; }
.fasebilde .fase-legend-linje { fill: var(--fase-tekst); font-size: 9.5px; }
.fasebilde .fase-hale { stroke: #ffb27a; stroke-width: 1.4; }
.fasebilde .fase-hale-punkt { fill: #ffb27a; background: #ffb27a; }
.fasebilde .fase-idag { fill: #fff; }
.fasebilde .fase-idag-ring { stroke: #ffa828; stroke-width: 1.6; }
.fasebilde .fase-etikett-idag { fill: #ffd28a; font-size: 11px; font-weight: 700; }
.fasebilde .fase-lesing { margin-top: var(--space-8); max-width: 80ch; }

/* §440: varmebånd (varmebaand.js) — tynne stripe-celler som deler tidsakse med det de står under. */
.varme-celle { shape-rendering: crispEdges; }
.flergraf-svg .varme-etikett { font-size: 8px; }
/* §445: linja pekeren står nærmest utheves; en forhåndsvisning fra en liste-hover er stiplet og tynn */
.flergraf-svg polyline.flergraf-varm { stroke-width: 3; }
.flergraf-tip-varm { font-weight: 700; }
.utvalg-ghost-linje { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 3 3; fill: none; }
.utvalg-ghost-linje-punkt { fill: var(--accent); background: var(--accent); }
/* §446: sammensetningen av listens linje — chips med ✕, ＋ for uttatte, ＋ ticker, tilbake til standard */
.utvalg-komp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }
.utvalg-komp-etikett { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-right: var(--space-4); }
.utvalg-komp-chip { display: inline-flex; align-items: center; gap: var(--space-4); font: inherit; font-size: var(--fs-merke);
  padding: 1px var(--space-6); border: 1px solid var(--line); border-radius: var(--r-liten); background: var(--bg); color: var(--text-soft); }
.utvalg-komp-chip.ekstra { border-color: var(--accent); }
.utvalg-komp-chip.ute { border-style: dashed; color: var(--text-faint); cursor: pointer; }
.utvalg-komp-tick { font-family: var(--mono); color: var(--text); }
.utvalg-komp-x { appearance: none; border: none; background: none; padding: 0 var(--space-2); color: var(--text-faint); cursor: pointer; font-size: var(--fs-merke); line-height: 1; }
.utvalg-komp-x:hover { color: var(--down); }
.utvalg-komp-form .eier-input { width: 8.5em; }
/* §447: medvind/motvind — merke med tekst (aldri bare farge) og en ring rundt kurvens endepunkt */
.tendens-merke { display: inline-block; font-size: var(--fs-merke); padding: 0 var(--space-4); border-radius: var(--r-liten); margin-left: var(--space-6);
  border: 1px solid currentColor; white-space: nowrap; vertical-align: middle; }
.tendens-merke.tendens-medvind { color: var(--accent); }
.tendens-merke.tendens-motvind { color: var(--down); }
.tendens-merke.sterk { font-weight: 700; }
.flergraf-svg .tendens-ring { stroke-width: 1.6; }
.flergraf-svg .tendens-ring.tendens-medvind { stroke: var(--accent); }
.flergraf-svg .tendens-ring.tendens-motvind { stroke: var(--down); stroke-dasharray: 2 2; }
/* §939: fast, gjenkjennbar fokus-ring — samme farge (--fokus) HVER gang, uansett hvilken
   --k-*-identitetsfarge selve linja har. Større radius enn tendens-ring (maks 9) så de to
   kan vises samtidig uten å smelte sammen; stiplet (samme "prikkete" kvalitet Jens husker). */
.flergraf-svg .flergraf-fokus-ring { stroke: var(--fokus); stroke-width: 1.8; stroke-dasharray: 2 2; fill: none; }
/* §451: «Alternativer — hva det ville gitt» */
.utvalg-alt { margin-top: var(--space-8); border: 1px solid var(--line); border-radius: var(--r-liten); padding: var(--space-8) var(--space-10); background: var(--bg-soft); }
.utvalg-alt-topp { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.utvalg-alt-tittel { font-weight: 600; font-size: var(--fs-brod); }
.utvalg-alt-forklaring { max-width: 84ch; margin: 0 0 var(--space-6); }
.utvalg-alt-tabell { display: flex; flex-direction: column; gap: var(--space-2); }
.utvalg-alt-rad { display: grid; grid-template-columns: minmax(180px, 1.2fr) 72px 72px minmax(0, 2fr); gap: var(--space-8); align-items: baseline; font-size: var(--fs-brod); }
.utvalg-alt-rad.basis { color: var(--text-soft); }
.utvalg-alt-pst, .utvalg-alt-diff { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.utvalg-alt-diff { color: var(--text-soft); }
.utvalg-alt-bytter { color: var(--text-faint); font-size: var(--fs-merke); overflow-wrap: anywhere; }
.utvalg-alt-kn.paa { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
/* §455: «Flere lister ▾» og «Davids regnskap ▾» */
.utvalg-flere { display: contents; }
.utvalg-flere[hidden] { display: none; }
.utvalg-flere-kn, .utvalg-regnskap-kn { color: var(--text-soft); }
.flergraf-tip-kurs { color: var(--text-soft); font-family: var(--mono); font-size: var(--fs-merke); white-space: nowrap; }

/* §441 (skjermmodi.js, plan skjermmodi-delt-full-losut.md): arbeidsflata. Terminal og Dashbord får ETT rutenett med viewport-høyde — aldri
   side-rulling; hvert felt ruller internt. «Delt» = graf + resten deler skjermen (liggende/bredt: graf venstre, liste høyre; ellers stablet).
   «Full» = grafen og kurve-chipsene fyller hele flata, listen/Dekket skjules bak. Slås av under 760×560 (da ruller siden som før). */
body.arbeidsflate { overflow: hidden; }
body.arbeidsflate .skall { height: auto; }
body.arbeidsflate .innhold {
  box-sizing: border-box; max-width: none; margin: 0;
  height: var(--arbeid-h, auto); min-height: 0; overflow: hidden;
  display: grid; gap: var(--space-8) var(--space-14);
  grid-template-columns: minmax(0, 1fr);
  /* graf-radens høyde settes nedenfor (§887) — denne linja hadde et eget, dødt tall (42%) som
     ble overskrevet av den senere regelen likevel; fjernet for å unngå å rote to steder. */
  grid-template-areas: "verktoy" "graf" "panel" "liste";
}
body.arbeidsflate .utvalg-verktoy { grid-area: verktoy; }
body.arbeidsflate .hendelsesforlop-overlegg {
  grid-area: graf; min-height: 0; height: 100%; max-height: none; overflow: hidden; box-sizing: border-box;
  border: 1px solid var(--line);
}
body.arbeidsflate .hendelsesforlop-overlegg .hendelsesforlop-kort-rad { overflow: auto; }   /* aldri stille klipping: i en svært liten boks ruller grafen heller enn å kuttes */
body.arbeidsflate .utvalg-panel { grid-area: panel; min-height: 0; max-height: 34vh; overflow: auto; }
body.arbeidsflate .vis.aktiv { grid-area: liste; min-width: 0; min-height: 0; }
/* Dashbord: Dekkets låste 3×2-rutenett trenger sin høyde (§295) — grafen får mindre, resten holder gulvet og rullen faller tilbake til flata */
body.arbeidsflate:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold { grid-template-rows: auto minmax(150px, 32%) auto minmax(330px, 1fr); overflow-y: auto; }
/* bredt og liggende (Terminal): graf + kurve-chips til venstre, liste til høyre, begge i full høyde */
body.arbeidsflate[data-retning="side"][data-graf="synlig"] .innhold {
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);   /* §647: listekolonnen fikk mer bredde (var 58/42) — detaljpanelet ble klemt til ca. 200 px */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "verktoy verktoy" "graf liste" "panel liste";
}
/* grafen skjult: ingen tom rad reservert for den */
body.arbeidsflate[data-graf="skjult"] .innhold { grid-template-rows: auto 0 auto minmax(0, 1fr); }
body.arbeidsflate[data-graf="skjult"]:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold { grid-template-rows: auto 0 auto minmax(330px, 1fr); }
/* full: graf + chips fyller alt; listen/Dekket skjules bak (state bevares) */
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .innhold {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "verktoy" "graf" "panel";
}
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .vis.aktiv,
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .utvalg-gruppe--lister,
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .utvalg-filtre { display: none; }
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .utvalg-panel { max-height: 30vh; }
/* delt/full-knappene er meningsløse uten synlig graf (gjelder allerede full-knappen); nettleser-fullskjerm er alltid relevant */
/* §441: Terminal-seksjonen fyller rutenett-cellen (ikke --baksiden-h), og stablet gir listen mer plass */
body.arbeidsflate [data-vis="baksiden"].aktiv { height: 100%; }
/* §887 (Jens: «at man må scrolle for å lese grafen», Handel/Dybde): 40 % var for trangt for den
   rike kombinerte grafen (tittel + forklaring + flere varmebånd-rader + verktøylinje) — target
   130 px chart-gulv (skjermGrafHoyde) ble truffet og resten rullet internt selv på et vanlig,
   fullt skjermvindu (målt: 51 px overflyt ved 1920×970, 49 px ved 1024×680 — IKKE bare det
   svært trange 760×560-unntaket). 48 % målt fri for overflyt på begge realistiske bredder. */
body.arbeidsflate .innhold { grid-template-rows: auto minmax(200px, 48%) auto minmax(0, 1fr); }
body.arbeidsflate:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold { grid-template-rows: auto minmax(150px, 32%) auto minmax(330px, 1fr); }
body.arbeidsflate[data-graf="skjult"] .innhold { grid-template-rows: auto 0 auto minmax(0, 1fr); }
body.arbeidsflate[data-graf="skjult"]:is([data-flate="dekk"], [data-flate="analyse"], [data-flate="drift"]) .innhold { grid-template-rows: auto 0 auto minmax(330px, 1fr); }
body.arbeidsflate:not([data-retning="side"]) .utvalg-panel { max-height: 22vh; }
body.arbeidsflate[data-retning="side"][data-graf="synlig"] .innhold { grid-template-rows: auto minmax(0, 1fr) auto; }
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .innhold { grid-template-rows: auto minmax(0, 1fr) auto; }

/* §444: det løsrevne grafvinduet (#/graf): bare grafen + kurve-/festet-chips; topplinje, sidevalg og liste-/filter-kontroller skjules. */
body[data-flate="graf"] .topbar,
body[data-flate="graf"] .hf-flate-bytte,
body[data-flate="graf"] #land-aktiv-chip,
body[data-flate="graf"] #hendelsesforlop-lukk,
body[data-flate="graf"] #hendelsesforlop-full-knapp,
body[data-flate="graf"] #skjerm-losut-knapp { display: none; }
#skjerm-tilbake-knapp[hidden] { display: none; }
body[data-flate="graf"] .utvalg-verktoy { justify-content: flex-end; }
body[data-flate="graf"] .innhold { padding-top: var(--space-8); }

/* §459/§794: lasteskall — oppstartsskjerm, synlig fra første sekund til kjernedata er tegnet. Egen
   illustrasjon + en macOS-stil fremdriftslinje (fylles venstre->høyre, drevet av ferdige/kjerne.length
   i last()), i stedet for den gamle spinner+tekst-pillen. */
.laster-skall {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-20); background: var(--bg); color: var(--text-soft);
}
.laster-skall.skjult { display: none; }
.laster-tavle { width: min(160px, 40vw); height: auto; color: var(--text-faint); }
/* §866: urverk-animasjon — fire kvadranter lyser opp med klokka, én pr. sekund, 4s-løkke. Rekkefølgen
   i markup (N->Ø->S->V) + stigende animation-delay ER sekvensen; ingen JS involvert. */
.laster-urverk-ramme { fill: none; stroke: currentColor; opacity: .5; }
.laster-urverk-fyll { fill: currentColor; opacity: 0; animation: laster-urverk-fyll 4s ease-in-out infinite; }
.laster-urverk-fyll:nth-of-type(1) { animation-delay: 0s; }
.laster-urverk-fyll:nth-of-type(2) { animation-delay: 1s; }
.laster-urverk-fyll:nth-of-type(3) { animation-delay: 2s; }
.laster-urverk-fyll:nth-of-type(4) { animation-delay: 3s; }
@keyframes laster-urverk-fyll {
  0% { opacity: 0; }
  3% { opacity: 1; }
  22% { opacity: 1; }
  25% { opacity: 0; }
  100% { opacity: 0; }
}
.laster-bar {
  width: min(240px, 60vw); height: 6px; border-radius: 3px; background: var(--bg-soft);
  border: 1px solid var(--line); overflow: hidden;
}
.laster-bar-fylt {
  width: 0%; height: 100%; border-radius: 3px; background: var(--accent);
  transition: width .25s ease;
}
.laster-tekst { font-size: var(--fs-brod); }
@media (prefers-reduced-motion: reduce) {
  .laster-bar-fylt { transition: none; }
  .laster-urverk-fyll { animation: none; opacity: .18; }
}

/* §463: fase-chip i grafens verktøyrad — nøytral (aldri rød/grønn, §23); stiplet kant når fasen er nær grensen eller nylig skiftet */
.fase-chip { display: inline-flex; align-items: center; padding: var(--space-4) var(--space-10); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  font-size: var(--fs-merke); color: var(--text-soft); background: var(--bg-soft); white-space: nowrap; cursor: help; }
.fase-chip.fase-medvind { color: var(--text); border-color: var(--accent); }
.fase-chip.fase-usikker { border-style: dashed; color: var(--text-soft); }

/* §467: «Tilstand» i grafen — festede selskaper som punkter i Fasebildets rom. Boksen får fast høyde (grafbudsjettet); diagrammet fyller resten. */
.utvalg-modus-valg { display: inline-flex; gap: var(--space-2); }
.utvalg-modus-valg .pg-kn:disabled { opacity: .45; cursor: not-allowed; }
.fasebilde.tilstand-boks { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; max-width: none; }
.tilstand-boks .fase-kort { flex: 1 1 0; min-height: 0; max-width: none; display: flex; line-height: 0; }
.tilstand-boks .tilstand-svg { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; }
.tilstand-lesing { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-16); }
.tilstand-rad { margin: 0; font-size: var(--fs-data); color: var(--text-soft); display: inline-flex; align-items: center; gap: var(--space-4); cursor: help; }
.tilstand-prikk { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--text-faint); }
.tilstand-prikk.kjerne-stor-linje-a-punkt { background: var(--k-brown); }
.tilstand-prikk.kjerne-stor-linje-b-punkt { background: var(--k-slate); }
.tilstand-prikk.kjerne-stor-linje-c-punkt { background: var(--k-orchid); }
.tilstand-prikk.kjerne-stor-linje-d-punkt { background: var(--k-sky); }
.tilstand-boks .tilstand-hale { fill: none; stroke-linecap: round; }
.tilstand-boks .tilstand-idag { stroke: #fff; stroke-width: 1; }
.tilstand-boks .tilstand-ring { stroke: #fff; stroke-opacity: .55; stroke-width: 1; }
.tilstand-boks .tilstand-etikett { paint-order: stroke; stroke: var(--fase-bg); stroke-width: 3px; }
.tilstand-tom { padding: var(--space-16); }

/* §469: Score-spor — rangering av linjene i grafen og Vaktlista-banen. Nøytrale farger (aldri rød/grønn, §23). */
.rang-merke { margin-left: var(--space-4); font-size: var(--fs-merke); color: var(--text-faint); font-variant-numeric: tabular-nums; cursor: help; }
.rangspor-tag { font-variant-numeric: tabular-nums; cursor: help; }
.sammenfall-rad.rangspor { flex-wrap: wrap; }

/* §470: tidsglider for Tilstand */
.tilstand-dato { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-data); color: var(--text-soft); }
.tilstand-dato-merke { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
.tilstand-glider { flex: 1 1 120px; min-width: 80px; accent-color: var(--accent); }
.tilstand-dato-tekst { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tilstand-idag-kn[hidden] { display: none; }

/* §472: Avstand over tid + Verdikjede-kartet (samme mørke instrumentpanel som Fasebildet) */
.fasebilde .avstand-sone { stroke: none; }
.fasebilde .avstand-sone-oevre { fill: rgba(255,178,122,.16); }
.fasebilde .avstand-sone-nedre { fill: rgba(122,170,255,.16); }
.fasebilde .avstand-linje { stroke: #ffd9b0; stroke-width: 1.4; stroke-linejoin: round; }
.fasebilde .avstand-kant-dag { fill: #ffb27a; }
.fasebilde .vk-rutenett { stroke: var(--fase-linje); stroke-width: .6; stroke-dasharray: 2 4; }
.fasebilde .vk-skille { stroke: var(--fase-linje); stroke-width: .8; }
.fasebilde .vk-punkt { fill: #b9aedb; fill-opacity: .55; }
.fasebilde .vk-fokus { fill: #fff; stroke: #ffa828; stroke-width: 1.6; }
.fasebilde .vk-median { stroke: #ffd28a; stroke-width: 1.6; stroke-linecap: round; }
.fasebilde .vk-fokus-linje { stroke: #ffa828; stroke-width: 1; stroke-dasharray: 5 4; }

/* §474 (Jens: «Stram opp plasseringer og det grafiske»): listeradene i smale kolonner. Før: alt på én linje, ticker og rang-tekst ble krympet under
   innholdet (tekst oppå tekst: «Ikke vurd BORR ennå», «⚠ Skeptisk» over HAFNI), og tall/pinne ble klippet. Nå: ingenting krymper unntatt navnet
   (ellipsis); har raden ekstra merker/tall, går de på en egen linje under ticker/navn/pinne. Enkle rader («#3 TICKER Navn 📈») er uendret. */
.md-rad { flex-wrap: wrap; row-gap: var(--space-2); min-width: 0; }
.md-rad > * { flex: 0 0 auto; white-space: nowrap; }
.md-rad > .rangert-navn { flex: 1 1 0; min-width: 0; }
/* §495: Vaktlista-navnet krymper med «…» (som Banens), så poengsummen i raden aldri dyttes ned på en egen linje */
.md-rad > .vakt-navn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.md-rad > .baksiden-pin { order: 3; margin-left: auto; }
@container (max-width: 470px) {   /* §476: i en bred liste er det plass til alt på én linje */
  .md-rad:has(> .rangert-tag, > .tendens-merke, > .alder-merke, > .baksiden-studie, > .rangert-rang--tekst)::after { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  .md-rad:has(> .rangert-tag, > .tendens-merke, > .alder-merke, > .baksiden-studie, > .rangert-rang--tekst) > :is(.rangert-tag, .tendens-merke, .alder-merke, .baksiden-studie, .rangert-rang--tekst) { order: 5; }
}
.md-rad > .baksiden-studie { margin-left: auto; }
.md-rad > .rangert-rang--tekst { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.md-rad > .rangert-rang--tekst { flex: 0 1 auto; min-width: 4ch; }   /* §474: lang rang-tekst ellipserer heller enn å tvinge en tredje linje */

/* §475: «Hele listen» i Tilstand — grå prikker (aktivitet tilnærmet) */
.fasebilde .tilstand-liste-punkt { fill: #b9aedb; fill-opacity: .55; stroke: rgba(255,255,255,.35); stroke-width: .6; }
.tilstand-prikk-liste { background: #b9aedb; opacity: .7; }
.tilstand-liste-kn { align-self: flex-start; flex: 0 0 auto; }

/* §476 (Jens: «Revider fullskjerm alle veier … bruk hele vinduet»): Dybde-sidene (Styring, Dømmekraft, Vaktlista …) er nå med i arbeidsflata. Før: egen høyde
   (--dybde-h / 100vh − 190) som ikke visste om grafen — med grafen synlig stakk panelet 380 px under skjermkanten (klippet), og lagt ned var det 57 px tomt
   nederst; en vindusendring med grafen oppe låste høyden til ~400 px for godt. Nå: rutenettet bestemmer — graf øverst (delt), lagt ned = hele flata til siden,
   full = bare grafen. */
body.arbeidsflate[data-flate="dybde"] [data-vis="flate"].aktiv { height: 100%; }
/* §887 (Jens: «at man må scrolle for å lese grafen», skjermbilde av Handel): DETTE er regelen
   som faktisk styrer Dybde-sidene (mer spesifikk enn den generelle under, §476) — 34 % var enda
   trangere enn den generelle 40 %'en, og rammet nettopp den rikeste grafen (kombinert
   "Simulerte porteføljer" med flere varmebånd). Samme målte, overflytfrie verdi som §887 over. */
body.arbeidsflate[data-flate="dybde"] .innhold { grid-template-rows: auto minmax(200px, 48%) auto minmax(0, 1fr); }
body.arbeidsflate[data-flate="dybde"][data-graf="skjult"] .innhold { grid-template-rows: auto 0 auto minmax(0, 1fr); }
body.arbeidsflate[data-flate="dybde"][data-visning="full"][data-graf="synlig"] .innhold { grid-template-rows: auto minmax(0, 1fr) auto; }


/* §476: Styring flyter blokkene i kolonner (CSS multi-column) i en INNER beholder (.styring-kolonner) i stedet for et rutenett der den høyeste blokken (Davids lag,
   ~1 400 px) bestemte radhøyden — kolonne 3–4 sto tomme og alt etter første rad startet 1 400 px nede. Multi-column må ligge i en beholder uten låst høyde
   (rullebeholderen .kort-krop har det), ellers fylles kolonnene sideveis og siden får horisontal rulling. Gruppe-skillene spenner over alle kolonner; den
   lange «Davids lag»-blokken får bryte mellom kolonner (gruppene i den bryter ikke), resten holdes hele. */
.kort-krop.styring,
body[data-flate="dybde"] .kort-krop.styring { display: block; }
.styring-kolonner { column-width: 340px; column-gap: 48px; }
.styring-kolonner > .styring-blokk { break-inside: avoid; }
.styring-kolonner > .styring-blokk:has(#styring-lag, #styring-modell, #styring-makro) { break-inside: auto; }   /* de tre lange blokkene får bryte mellom kolonner … */
.styring-kolonner :is(#styring-lag, #styring-modell, #styring-makro) > * { break-inside: avoid; }                /* … men aldri midt i en gruppe/et kort */
.styring-kolonner .lag-gruppe { break-inside: avoid; }
.styring-kolonner > .styring-gruppe-skille { column-span: all; }

/* §476: Fasebilde + avstand over tid under en valgt rad i en bred detaljkolonne — alltid over hele bredden, side om side når det er plass */
.rangert-visuelt { column-span: all; display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--space-16); margin-top: var(--space-14); }
.rangert-visuelt .selskap-seksjon { min-width: 0; }
.rangert-visuelt .fase-kort { max-width: none; }

/* §481 (Løp L4): hendelser gjennom kjeden — pris › gass › drivstoff › frakt › aktører › kunde › økonomi.
   Tilstand er form + tekst (aldri bare farge): stille = svak, rører seg = ramme, stresset = fylt, avtar = stiplet, normalt = svak grønn; ↺ = tilbakefall. */
.lop-boks { margin-bottom: var(--space-16); }
.lop-kort { border: 1px solid var(--line); border-radius: var(--r-liten); padding: var(--space-10) var(--space-12); margin-top: var(--space-8); break-inside: avoid; }
.lop-kort.lop-normalisert { opacity: 0.8; }
.lop-topp { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); }
.lop-tittel { font-weight: 600; }
.lop-foreloepig { font-size: calc(var(--fs-merke) - 0.5px); color: var(--text-faint); font-style: italic; }
.lop-endre { margin-left: auto; }
.lop-tittel-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.lop-tittel-form .eier-input { flex: 1 1 260px; min-width: 0; }
.lop-meta, .lop-ligner, .lop-notat { margin: var(--space-4) 0 0; line-height: 1.4; }
.lop-kjede { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-4); margin-top: var(--space-8); }
.lop-pil { align-self: center; color: var(--text-faint); }
.lop-ledd { display: inline-flex; flex-direction: column; gap: 1px; padding: var(--space-4) var(--space-8); border-radius: var(--r-liten); border: 1px solid var(--line); font-size: var(--fs-merke); line-height: 1.25; background: var(--bg-soft); color: var(--text-soft); min-width: 64px; }
.lop-ledd-navn { font-weight: 500; color: var(--text); }
.lop-ledd-tilstand { font-variant-numeric: tabular-nums; }
.lop-s-stille { opacity: 0.55; }
.lop-s-roerer_seg { border-color: var(--warn); color: var(--warn); }
.lop-s-stresset { background: var(--down-bg); border-color: var(--down); color: var(--down); }
.lop-s-stresset .lop-ledd-navn { color: var(--down); }
.lop-s-avtagende { border-style: dashed; border-color: var(--warn); color: var(--warn); }
.lop-s-normalisert { background: var(--up-bg); border-color: var(--up); color: var(--up); }
.lop-s-ukjent { opacity: 0.4; border-style: dotted; }
.lop-tilbakefall { outline: 1px solid currentColor; outline-offset: 1px; }
.lop-logg, .lop-maler { margin-top: var(--space-8); font-size: var(--fs-merke); }
.lop-logg summary, .lop-maler summary { cursor: pointer; color: var(--text-soft); }
.lop-logg-rad { padding: var(--space-2) 0; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.lop-mal { padding: var(--space-6) 0; border-top: 1px solid var(--line); break-inside: avoid; }
.lop-mal:first-of-type { margin-top: var(--space-6); }
.lop-mal-tittel { font-weight: 500; }
.lop-mal p { margin: var(--space-2) 0 0; }
.lop-selskap-merke { font-size: var(--fs-merke); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.lop-selskap { margin-top: var(--space-8); }
.lop-selskap-rad { margin: var(--space-4) 0 0; line-height: 1.4; }

/* §482 (Løp L5): kjede-merke på kortet, «60 dager videre», tidligere caser gruppert per kjede */
.lop-kjede-merke { font-weight: 500; color: var(--text-soft); }
.lop-frem { margin-top: var(--space-8); font-size: var(--fs-merke); }
.lop-frem summary { cursor: pointer; color: var(--text-soft); }
.lop-frem-rad { margin: var(--space-4) 0 0; line-height: 1.4; color: var(--text-soft); }
.lop-frem-ledd { font-weight: 600; color: var(--text); }
.lop-mal-kjede { margin-top: var(--space-10); font-weight: 600; font-size: var(--fs-merke); letter-spacing: 0.02em; color: var(--text); }

/* §486 (Løp som lag): skravert tidsfelt på kursgrafene fra første ledd som rørte seg for selskapet til løpet er normalisert (ellers i dag) */
.pg-lop-band, .avstand-lop-band { fill: var(--warn); fill-opacity: 0.10; stroke: none; pointer-events: none; }
.avstand-lop-band { pointer-events: auto; }
.pg-lop-over .pg-lop-band, .avstand-lop-band.pg-lop-over { fill-opacity: 0.05; }
.pg-lop-tikk { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; pointer-events: none; }
.pg-lop-ledd-t { font-size: 8.5px; fill: var(--warn); opacity: .85; pointer-events: none; }
.pg-lop-merke { font-size: 9px; font-weight: 600; fill: var(--warn); pointer-events: none; }
.pg-lop-tilbakefall { fill: var(--down); pointer-events: none; }

/* §495: poengsummen synlig (Vaktlista-rad, selskapstopp, detaljpaneler). Ingen «bra/dårlig»-farge (§23) — nøytral tekst og aksent. */
.vakt-score {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); min-width: 34px; flex-shrink: 0;
  font-family: var(--mono); color: var(--text);
}
.vakt-score b { font-size: 14px; font-weight: 600; line-height: 1; }
.vakt-score-stolpe { display: block; height: 3px; border-radius: 2px; background: var(--accent); opacity: 0.55; align-self: stretch; }
.selskap-vaktscore { display: inline-flex; align-items: center; gap: var(--space-8); margin-left: var(--space-8); vertical-align: middle; }
.selskap-vaktscore-tekst { font-family: var(--mono); font-size: var(--fs-data); color: var(--text-faint); }
.score-panel {
  display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) var(--space-12);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r);
}
.score-topp { display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
.score-stor { font-family: var(--mono); font-size: 28px; font-weight: 600; line-height: 1; color: var(--text); }
.score-enhet, .score-plass { font-family: var(--mono); font-size: var(--fs-data); color: var(--text-faint); }
.score-ustabil {
  font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-4) var(--space-10);
  border: 1px solid var(--line-strong); border-radius: var(--r-liten); color: var(--text-soft);
}
.score-stolpe { height: 4px; background: var(--bg-sink); border-radius: 2px; overflow: hidden; }
.score-stolpe i { display: block; height: 100%; background: var(--accent); opacity: 0.6; }
.score-endring, .score-tett { margin: 0; font-size: var(--fs-brod); color: var(--text-soft); }
.score-hvorfor summary { cursor: pointer; font-size: var(--fs-brod); color: var(--accent); }
.score-hvorfor[open] summary { margin-bottom: var(--space-4); }
.score-vekter { margin: var(--space-4) 0; padding-left: var(--space-20); font-size: var(--fs-brod); color: var(--text-soft); }
/* §890 (AP102 Etappe 2): faktorene dag for dag, samme varmebånd-idiom som §440 (flergraf-marked). */
.score-faktorband { margin-top: var(--space-4); }
.score-faktorband-tittel { margin: 0 0 var(--space-4); font-size: var(--fs-merke); color: var(--text-faint); }
.score-faktorband-svg { display: block; width: 100%; height: auto; }
.score-faktorband-navn { fill: var(--text-faint); }
.score-faktorband-ung { margin: var(--space-4) 0 0; font-size: var(--fs-merke); }

/* §496: Budskap i Fasebildet (selskapssiden) og tilstandslinjen i detaljpaneler. Ingen «bra/dårlig»-farge (§23) — «opp mot vinden» markeres med
   vekt og aksent, ikke grønn/rød. */
.fase-budskap { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) var(--space-12); margin-bottom: var(--space-10);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); }
.fase-budskap-tittel { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
.fase-budskap-overskrift { margin: 0; font-size: var(--fs-tittel); line-height: 1.35; color: var(--text); }
.fase-budskap-rad { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-8); align-items: baseline; font-size: var(--fs-brod); color: var(--text-soft); }
.fase-budskap-navn { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.fase-vind-mot .fase-budskap-tekst { color: var(--text); font-weight: 600; border-left: 2px solid var(--accent); padding-left: var(--space-8); }
.fase-vind-ukjent .fase-budskap-tekst { font-style: italic; color: var(--text-faint); }
.tilstand-linje { margin: 0; font-size: var(--fs-brod); color: var(--text-soft); font-family: var(--mono); }
@media (max-width: 520px) { .fase-budskap-rad { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* §497: kontrollseksjonen for tilstandsmodellens grunnlag (Styring) og grunnlag-linjen i Budskapet. Amber (--warn) for «se her», aldri grønn/rød. */
.tilstand-grunnlag-rad { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: baseline; padding: var(--space-6) 0; border-top: 1px solid var(--line); font-size: var(--fs-brod); }
.tilstand-status { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-4) var(--space-10); border: 1px solid var(--line-strong); border-radius: var(--r-liten); color: var(--text-soft); }
.tilstand-status.mistenkelig, .tilstand-status.brudd { color: var(--warn); border-color: var(--warn); }
.tilstand-hopp { flex-basis: 100%; font-family: var(--mono); font-size: var(--fs-data); color: var(--text-faint); }
.tilstand-gjort { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: baseline; padding: var(--space-4) 0; font-size: var(--fs-brod); color: var(--text-soft); }
.fase-grunnlag-advarsel .fase-budskap-tekst { border-left: 2px solid var(--warn); padding-left: var(--space-8); color: var(--text); }

/* §498 (Jens, 4. okt: «litt mye luft over modellen … litt ekstra plass til selve modellen er gull verdt … en ytre kontrastfarge, kanskje en testet grå
   antrasitt, bare for å gjøre bildet skarpere og lettere å navigere»). To grep, begge bare CSS (+ ett tall i skjermmodi.js):
   1) RAMME: siden ligger på antrasitt (--ramme); topplinja og selve arbeidsflata (.innhold) er mørke paneler oppå den. Panelkanten (--line-strong)
      og de 8 px rammen rundt gjør at Terminal/Dashbord leses som ett innfelt vindu i stedet for flytende innhold.
   2) LUFT OVER MODELLEN: verktøylinja, grafkortets topp, fane-raden og vindusknappene fikk strammere avstander. Arbeidsflatens graf-rad er 1fr,
      så alt som spares går rett til grafen. */
:root body, :root[data-tema="mork"] body { background: var(--ramme); }   /* spesifisitet: slår anti-flash-regelen i index.html sin <style> */
.topbar { background: var(--bg); box-shadow: var(--skygge-1); }   /* §525: nivå 1 løftet over siden */
.innhold { box-shadow: var(--skygge-1); }   /* §525: panelet på siden */
.innhold { background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r); margin-top: var(--space-8); margin-bottom: var(--space-8); }
body.arbeidsflate .innhold { margin: var(--space-8); padding: var(--space-8) var(--space-12); }
body.arbeidsflate .utvalg-verktoy { padding: var(--space-2) var(--space-8); }
body.arbeidsflate .hendelsesforlop-overlegg { padding: var(--space-8) var(--space-10); }
body.arbeidsflate .hendelsesforlop-topp { padding-bottom: var(--space-6); }
body.arbeidsflate .hendelsesforlop-kort-rad { gap: var(--space-4); }
body.arbeidsflate .hyp-verktoy { margin-bottom: var(--space-2); }
body.arbeidsflate .utvalg-panel { gap: var(--space-4); padding: var(--space-6) var(--space-12); }
body[data-flate="graf"] .innhold { border: 0; border-radius: 0; margin: 0; }   /* det løsrevne grafvinduet har ingen ramme */

/* §499 (Jens: «Fiks det gjenstående» etter §498): to ting som sto igjen — (1) «Hypotesemåleren»-tittelen hadde en egen rad over verktøylinja,
   (2) panelet under grafen tok ~20 % av høyden. Bare i arbeidsflata, og bare når kortet faktisk har en hyp-verktoy-rad (ikke i Fokus-visningen). */
/* §647 (Jens: «simulerte porteføljer ligger oppå annen skrift»): §499 la tittelen som et absolutt plassert lag over verktøylinja og reserverte plassen med en usynlig ::before — når linja brøt over to rader
   (smalt vindu, mange kontroller) havnet andre rad under tittelen, og ved rulling i grafboksen lå tittelen over innholdet. Nå er tittelen et ekte rutenett-element: tittel og verktøylinje deler første rad,
   forklaringen og grafen får hver sin rad under, og ingenting ligger oppå noe. `display: contents` gjør kort-raden gjennomsiktig for rutenettet. */
body.arbeidsflate .hendelsesforlop-overlegg:not(.skjult):has(.hendelsesforlop-kort-rad > .hyp-verktoy) {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  column-gap: var(--space-12); row-gap: var(--space-2); align-items: center; align-content: stretch;
}
body.arbeidsflate .hendelsesforlop-overlegg:has(.hendelsesforlop-kort-rad > .hyp-verktoy) .hendelsesforlop-topp {
  position: static; grid-column: 1; grid-row: 1; height: auto; margin: 0; padding: 0; border-bottom: 0; align-items: center; flex-wrap: nowrap;
}
body.arbeidsflate .hendelsesforlop-overlegg:has(.hendelsesforlop-kort-rad > .hyp-verktoy) .hendelsesforlop-fane { padding-bottom: 0; line-height: 30px; }
body.arbeidsflate .hendelsesforlop-overlegg:has(.hendelsesforlop-kort-rad > .hyp-verktoy) .hendelsesforlop-kort-rad { display: contents; }
body.arbeidsflate .hendelsesforlop-kort-rad > .hyp-verktoy { grid-column: 1 / -1; grid-row: 4; margin: 0; min-width: 0; padding-top: var(--space-4); }   /* §664: under grafen */
body.arbeidsflate .hendelsesforlop-kort-rad > .hyp-forklar { grid-column: 1 / -1; grid-row: 2; margin: 0; }
body.arbeidsflate .hendelsesforlop-overlegg:has(.hendelsesforlop-kort-rad > .hyp-verktoy) .hendelsesforlop-kort-rad > :not(.hyp-verktoy):not(.hyp-forklar) {
  grid-column: 1 / -1; grid-row: 3; min-height: 0; min-width: 0; overflow: auto; align-self: stretch;
}
body.arbeidsflate .hyp-verktoy .hyp-info { margin-left: auto; }
/* panelet: kurver, lister og sammensetning på sine egne rader, men «festet» og land-/sektorfiltrene deler en rad når det er plass */
body.arbeidsflate .utvalg-panel { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-14); }
body.arbeidsflate .utvalg-panel > * { flex: 1 1 100%; min-width: 0; }
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--festet { flex: 0 1 auto; }
body.arbeidsflate .utvalg-panel > .utvalg-filtre { flex: 1 1 0; }
/* «Linje: …»-chipen og sammensetningen (tickerne) ligger side om side i stedet for hver sin rad */
body.arbeidsflate .utvalg-liste-chip .utvalg-komp { flex: 1 1 0; min-width: 0; margin-top: 0; }

/* §501: Profil — hva selskapet gjør, hvem det samhandler med, Davids hypotese. Nøytral (§23): ingen «bra/dårlig»-farge. */
.profil-boks { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) var(--space-12); margin-bottom: var(--space-10);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); }
.profil-rad { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-8); align-items: baseline; font-size: var(--fs-brod); color: var(--text-soft); }
.profil-boks, .profil-verdi { min-width: 0; }
.profil-verdi { overflow-wrap: anywhere; }   /* §513: AI-tekst med «tvangsinnløsning/avnotering» skal brytes, ikke gli ut */
.profil-navn { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.profil-gjor .profil-verdi { font-size: var(--fs-tittel); color: var(--text); line-height: 1.35; }
.profil-tom .profil-verdi { font-style: italic; color: var(--text-faint); }
.profil-chips { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.profil-chip { display: inline-flex; gap: var(--space-4); align-items: baseline; padding: var(--space-4) var(--space-10); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  font-size: var(--fs-merke); color: var(--text-soft); cursor: help; }
.profil-chip b { color: var(--text); font-weight: 600; }
.profil-chip.eier { border-color: var(--accent); }
.profil-dato { color: var(--text-faint); font-size: var(--fs-merke); }
.profil-sannsynlighet { margin: var(--space-4) 0 0; }
.profil-fot { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: baseline; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.profil-endring { font-size: var(--fs-merke); color: var(--text-soft); }
.profil-linje { margin: 0; font-size: var(--fs-brod); color: var(--text); line-height: 1.35; }
.profil-linje-navn { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
@media (max-width: 520px) { .profil-rad { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* §729: Sammenlignbare selskaper */
.peer-liste { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.peer-rad { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); align-items: baseline; font-size: var(--fs-brod); min-width: 0; overflow-wrap: anywhere; }
.peer-rad .selskap-lenke { min-width: 5.5rem; }
.peer-navn { color: var(--text-soft); min-width: 0; }
.peer-fot { margin: var(--space-4) 0 0; }
/* AP70 Fase 4: "Lignende saker" */
.likhet-panel { border: 1px solid var(--line); background: var(--bg-soft); padding: var(--space-12); margin-bottom: var(--space-12); min-width: 0; }
.likhet-panel .innsiderad { padding: var(--space-6) 0; min-width: 0; }
.likhet-snitt { margin-top: var(--space-8); }
.likhet-saksok { margin: var(--space-12) 0; min-width: 0; }
.likhet-saksok .eier-input { width: 220px; max-width: 100%; }
.likhet-saksok-rad { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); align-items: baseline; overflow-wrap: anywhere; margin: var(--space-2) 0; font-size: var(--fs-brod); }
.likhet-form { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12); align-items: flex-end; min-width: 0; margin-top: var(--space-12); }
.likhet-felt { display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 140px; min-width: 0; }
.likhet-felt-etikett { font-size: var(--fs-min); }
.likhet-form .eier-input { min-width: 0; }
.selskap-gjor { margin: var(--space-4) 0 0; font-size: var(--fs-tittel); line-height: 1.35; color: var(--text-soft); max-width: 90ch; }

/* §502: Tilstand → sannsynlighet. «Skiller seg» markeres med vekt og aksent (som «mot vinden»), aldri grønn/rød (§23). */
.fase-rate-skiller .fase-budskap-tekst { color: var(--text); font-weight: 600; border-left: 2px solid var(--accent); padding-left: var(--space-8); }
.tilstand-rate-skiller .tilstand-kommentar { font-weight: 600; color: var(--text); }
.tilstand-rate-tabell { margin-top: var(--space-6); }

/* §503: «Det David har gjort selv» */
.handling-filter { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: var(--space-6) 0; }
.handling-filter .mini-knapp.paa { border-color: var(--accent); color: var(--accent); }
/* §504: én bryter-boks pr. autonom mekanisme (alltid synlig) */
.handling-brytere { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); margin: var(--space-6) 0; }
.handling-bryter { border: 1px solid var(--line-strong); border-radius: var(--r); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.handling-bryter.pauset { border-color: var(--down); }
.handling-bryter-topp { display: flex; align-items: center; gap: var(--space-4); }
.handling-bryter-topp strong { flex: 1; min-width: 0; }
.handling-status { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .04em; }
.handling-status.aktiv { color: var(--up); }
.handling-status.pauset { color: var(--down); font-weight: 600; }
.handling-halvert { color: var(--down); }
.utvalg-nullstill[hidden] { display: none; }   /* §526: komponentens display slår ellers [hidden] (§69/§234-fallgruven) */
/* §527 (G2): «Dagen» — festet dato i grafen + kortet med det som hendte. Svevende flate (nivå 3): skygge-2, tokens. */
.flergraf-dag { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.flergraf-tip-fase { display: block; color: var(--text-soft); font-size: var(--fs-merke); margin-bottom: var(--space-2); }
.flergraf-dagkort {
  position: absolute; top: var(--space-8); z-index: 3; width: min(300px, 44%); max-height: calc(100% - 16px); overflow-y: auto; overflow-x: hidden;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--skygge-2);
  padding: var(--space-8) var(--space-10); font-size: var(--fs-data); min-width: 0;
}
.flergraf-dagkort.hoyre { right: var(--space-8); }
.flergraf-dagkort.venstre { left: 56px; }
.dagkort-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-4); }
.dagkort-lukk { background: none; border: 1px solid var(--line-strong); border-radius: var(--r-liten); color: var(--text-soft); cursor: pointer; font-size: var(--fs-merke); padding: 0 var(--space-6); }
.dagkort-lukk:hover { color: var(--accent); border-color: var(--accent); }
.dagkort-fase { color: var(--text-soft); margin-bottom: var(--space-6); overflow-wrap: anywhere; }
.dagkort-tittel { margin-top: var(--space-6); font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); }
.dagkort-linje { display: flex; align-items: center; gap: var(--space-6); min-width: 0; }
.dagkort-navn { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
.dagkort-linje b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; padding-left: var(--space-6); }
.dagkort-hend { display: flex; align-items: baseline; gap: var(--space-8); min-width: 0; }
.dagkort-hend-t { color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
.dagkort-tom { color: var(--text-soft); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .flergraf-dagkort { animation: dagkort-inn .12s ease-out; } }
@keyframes dagkort-inn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* §528: Dekning pr. marked (Styring). Tabellen ruller sidelengs i egen boks på smale skjermer; form (symbol) + tall bærer budskapet, farge er bare støtte. */
.dekning-vrap { overflow-x: auto; max-width: 100%; margin-top: var(--space-6); }
.dekning-tabell { border-collapse: collapse; font-size: var(--fs-data); min-width: 560px; width: 100%; }
.dekning-tabell th, .dekning-tabell td { padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.dekning-tabell thead th { font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 600; }
.dekning-tabell tbody th { font-weight: 500; }
.dekning-tabell .dekning-n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dekning-celle { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dekning-symbol { display: inline-block; width: 1.1em; }
.dekning-god { color: var(--up); }
.dekning-middels { color: var(--warn); }
.dekning-svak { color: var(--down); }
.dekning-ingen { color: var(--text-soft); }
.dekning-norden th { font-weight: 700; }
.dekning-skille th { padding-top: var(--space-10); font-size: var(--fs-min); text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 600; border-bottom: 0; }
.styring-kolonner > .styring-blokk:has(#styring-dekning) { column-span: all; }   /* §528: tabellen med åtte lag trenger hele bredden — i én kolonne (340 px) skjulte rulling de lagene som betyr mest (meldinger, innsidehandler, short) */

/* §542: «Gode nyheter»-siden */
#nyheter .nyhet-intro { margin: 0 0 var(--space-8); max-width: 80ch; }
#nyheter .nyhet-chips { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-12); }
#nyheter .nyhet-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
#nyheter .nyhet-rad { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) var(--space-12); background: var(--bg-soft); border-left: 3px solid var(--up); min-width: 0; }
#nyheter .nyhet-hode { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); min-width: 0; }
#nyheter .nyhet-navn { color: var(--text-soft); font-size: var(--fs-merke); min-width: 0; overflow-wrap: anywhere; }
#nyheter .nyhet-tid { margin-left: auto; white-space: nowrap; }
#nyheter .nyhet-tittel { font-size: var(--fs-brod); line-height: 1.4; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
#nyheter a.nyhet-tittel:hover { color: var(--accent); }

/* §543: bransjeoversikt på «Gode nyheter»-siden */
#nyheter .nyhet-seksjon { margin: var(--space-16) 0 var(--space-8); font-size: var(--fs-merke); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
#nyheter .nyhet-seksjon-risiko { color: var(--down); }
#nyheter .nyhet-sektorer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
@media (min-width: 900px) { #nyheter .nyhet-sektorer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#nyheter .nyhet-sektor { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); width: 100%; min-width: 0; text-align: left; font: inherit; color: var(--text); background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); padding: var(--space-6) var(--space-12); cursor: pointer; }
#nyheter .nyhet-sektor:hover { border-color: var(--accent); }
#nyheter .nyhet-sektor.aktiv { background: var(--accent-bg); border-color: var(--accent); }
#nyheter .nyhet-sektor.trend { border-left-color: var(--up); }
#nyheter .nyhet-sektor-navn { font-weight: 600; min-width: 0; overflow-wrap: anywhere; flex: 1 1 8em; }
#nyheter .nyhet-sektor-dag, #nyheter .nyhet-sektor-gode, #nyheter .nyhet-sektor-risiko { font-variant-numeric: tabular-nums; font-size: var(--fs-merke); color: var(--text-faint); white-space: nowrap; }
#nyheter .nyhet-sektor-dag.opp { color: var(--up); }
#nyheter .nyhet-sektor-dag.ned { color: var(--down); }
#nyheter .nyhet-sektor-gode.har { color: var(--up); font-weight: 600; }
#nyheter .nyhet-sektor-risiko.har { color: var(--down); font-weight: 600; }
#nyheter .nyhet-rad.risiko { border-left-color: var(--down); }
#nyheter .nyhet-billig { background: var(--accent-bg); color: var(--accent); }

/* §545: konkurser pr. næring (SSB) på «Gode nyheter»-siden */
#nyheter .nyhet-konkurser { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); margin-bottom: var(--space-8); }
#nyheter .nyhet-konkurs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-4) var(--space-12); background: var(--bg-soft); border-left: 3px solid var(--line-strong); min-width: 0; }
#nyheter .nyhet-konkurs.sum { border-left-color: var(--accent); font-weight: 600; }
#nyheter .nyhet-konkurs.okende { border-left-color: var(--down); }
#nyheter .nyhet-konkurs-navn { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
#nyheter .nyhet-konkurs-tall { font-variant-numeric: tabular-nums; font-size: var(--fs-merke); color: var(--text-soft); white-space: nowrap; }
#nyheter .nyhet-konkurs-endring { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; font-size: var(--fs-merke); color: var(--text-faint); }
#nyheter .nyhet-konkurs-endring.opp { color: var(--down); }
#nyheter .nyhet-konkurs-endring.ned { color: var(--up); }

/* §546: AI-merke på en nyhet klassifisert av Claude Haiku */
#nyheter .nyhet-ai { background: var(--bg-sink); color: var(--text-soft); border: 1px solid var(--line-strong); }

/* §549: forklaring langs «Din portefølje»-linja i Hypotesemåleren */
.hyp-forklar { margin: var(--space-4) 0 var(--space-6); font-size: var(--fs-merke); line-height: 1.45; color: var(--text-soft); max-width: 110ch; min-width: 0; overflow-wrap: anywhere; }
.hyp-forklar[hidden] { display: none; }
.flergraf-hull { stroke: var(--text-faint); stroke-width: 2.4; stroke-dasharray: 3 4; stroke-linecap: round; pointer-events: none; opacity: .9; }
.flergraf-hull-tekst { font-size: 10px; fill: var(--text-faint); font-style: italic; pointer-events: none; }
.flergraf-hopp circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.flergraf-hopp-nr { font-size: 9px; font-weight: 700; fill: var(--accent); pointer-events: none; }
.flergraf-hopp { cursor: help; }

/* §574: lærekortet på Innsidekjøp */
.ik-laere { margin-bottom: var(--space-12); }
.ik-laere-liste { margin: var(--space-8) 0 0; padding-left: var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-data); color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; }
.ik-volum { min-width: 0; overflow-wrap: anywhere; }

/* §576: Nordisk og Global — begrunnelse i detaljpanelet */
.peiler-overskrift { margin: var(--space-6) 0 var(--space-4); font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.peiler-blokk { margin-top: var(--space-8); min-width: 0; }
.peiler-apne { display: inline-block; margin: var(--space-4) 0 var(--space-6); font-size: var(--fs-data); }
.peiler-tillit { margin-top: var(--space-8); min-width: 0; overflow-wrap: anywhere; }
.peiler-alle { margin-top: var(--space-8); font-size: var(--fs-data); }

/* §577: Inn og Ut */
.peiler-valg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin: var(--space-8) 0 var(--space-12); }
.peiler-valg-kort { padding: var(--space-8) var(--space-12); border: 1px solid var(--line); background: var(--bg-soft); min-width: 0; }
.peiler-valg-kort p { margin: var(--space-4) 0 0; min-width: 0; overflow-wrap: anywhere; }
.peiler-valg-hode { display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; margin: 0 !important; cursor: pointer; list-style: none; }
.peiler-valg-hode::-webkit-details-marker { display: none; }
.peiler-valg-pil { display: inline-block; width: 1em; color: var(--text-soft); }   /* §627: ▸ lukket, ▾ åpen */
.peiler-valg-kort[open] > .peiler-valg-hode > .peiler-valg-pil { transform: rotate(90deg); }
.peiler-valg-kort-linje { min-width: 0; overflow-wrap: anywhere; }
.peiler-valg-hode:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.peiler-valg-merke { font-size: var(--fs-min); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.peiler-valg-tittel { font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }

/* §578: tåleevne og magefølelse på selskapssiden */
.sjanse-grunn { margin: var(--space-2) 0 0 var(--space-12); min-width: 0; overflow-wrap: anywhere; }
.sjanse-ai { margin-top: var(--space-10); font-size: var(--fs-data); color: var(--text-soft); min-width: 0; }
.sjanse-ai summary { cursor: pointer; }
.sjanse-ai p { min-width: 0; overflow-wrap: anywhere; }
.sjanse-kilder { color: var(--text-soft); }

/* §579: din magefølelse på selskapssiden */
.sjanse-jens { margin-top: var(--space-10); min-width: 0; }
.sjanse-innlegg { margin: var(--space-4) 0; min-width: 0; overflow-wrap: anywhere; }
.sjanse-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); margin-top: var(--space-8); max-width: 640px; }
.sjanse-form textarea { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; }

/* §592: farevarsel for en eid posisjon (tekst i merket, aldri bare farge) */
.farevarsel-tag { color: var(--down); border-color: var(--down); }
.farevarsel-seksjon { min-width: 0; }
.farevarsel-rad { min-width: 0; overflow-wrap: anywhere; }
.farevarsel-chip { color: var(--down); border-color: var(--down); }

/* §829: samme årsakstekst som over, men lesbar rett i detaljpanelet — ikke bare gjemt bak merkets hover-title */
.farevarsel-blokk { min-width: 0; }
.farevarsel-meta { color: var(--down); overflow-wrap: anywhere; }
.farevarsel-meta-tidlig { overflow-wrap: anywhere; }

/* §580: rimelig verdsatt */
.rimelig-tag { color: var(--accent); border-color: var(--accent); }
.rimelig-blokk { margin-top: var(--space-8); min-width: 0; }
.rimelig-blokk p { min-width: 0; overflow-wrap: anywhere; }


/* §641: «Du er her» og «Om denne visningen». Bare tokens (begge temaer), ingen hardkodede farger. */
.du-er-her { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-10) 0; padding: var(--space-10) var(--space-12);
  background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); min-width: 0; }
.du-er-her-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); min-width: 0; }
.du-er-her-merke { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); font-weight: 600; }
.du-er-her-navn { font-size: var(--fs-tittel); color: var(--text); }
.du-er-her-kort { font-size: var(--fs-brod); color: var(--text-soft); min-width: 0; overflow-wrap: anywhere; flex: 1 1 24ch; }
.du-er-her-rad { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-14); font-size: var(--fs-brod); color: var(--text); min-width: 0; }
.du-er-her-omfang { overflow-wrap: anywhere; min-width: 0; }
.du-er-her-filter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.du-filter-tittel, .du-filter-ingen, .du-andre-tittel { font-size: var(--fs-merke); color: var(--text-faint); }
.du-filter-chip { font: inherit; font-size: var(--fs-merke); padding: var(--space-4) var(--space-10); border: 1px solid var(--line-strong); border-radius: var(--r-liten); background: var(--bg); color: var(--text); cursor: pointer; }
.du-filter-chip:disabled { cursor: default; }
.du-filter-chip:hover:not(:disabled) { border-color: var(--accent); }
.du-filter-nullstill { font: inherit; font-size: var(--fs-merke); background: none; border: none; color: var(--accent); cursor: pointer; text-decoration: underline; padding: 0; }
.du-er-her-andre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); }
.du-andre-lenke { font-size: var(--fs-merke); color: var(--accent); }
.visning-om { margin: 0 0 var(--space-12); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); min-width: 0; }
.visning-om > summary { cursor: pointer; padding: var(--space-8) var(--space-12); font-size: var(--fs-brod); color: var(--text); }
.visning-om[open] > summary { border-bottom: 1px solid var(--line); }
.visning-blokk { padding: var(--space-8) var(--space-12) 0; min-width: 0; }
.visning-blokk:last-child { padding-bottom: var(--space-10); }
.visning-tittel { margin: 0 0 var(--space-4); font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.visning-tekst { margin: 0; font-size: var(--fs-brod); color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.visning-liste { margin: 0; padding-left: var(--space-16); font-size: var(--fs-brod); color: var(--text); line-height: 1.45; }
.visning-liste li { margin: 0 0 var(--space-4); overflow-wrap: anywhere; }
.visning-to { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-12); }
.visning-andre a { color: var(--accent); }
@media (max-width: 720px) { .visning-to { grid-template-columns: minmax(0, 1fr); } }


/* §644: «Markedsoversikt». Bare tokens (begge temaer). Tabellen ruller sideveis i egen ramme; listene er to kolonner som stabler på smal skjerm. */
#marked { min-width: 0; }
#marked .marked-fase { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-10); margin: 0 0 var(--space-10); }
#marked .marked-fase-merke, #marked .marked-chips-merke { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); }
#marked .marked-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: 0 0 var(--space-12); }
#marked .marked-seksjon { margin: var(--space-14) 0 var(--space-6); }
#marked .marked-intro { margin: 0 0 var(--space-8); max-width: 80ch; overflow-wrap: anywhere; }
#marked .marked-tabell-ramme { overflow-x: auto; max-width: 100%; }
#marked .marked-tabell { border-collapse: collapse; width: 100%; font-size: var(--fs-brod); font-variant-numeric: tabular-nums; }
#marked .marked-tabell th { text-align: right; font-weight: 500; font-size: var(--fs-merke); color: var(--text-faint); padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--line); white-space: nowrap; }
#marked .marked-tabell th:first-child { text-align: left; }
#marked .marked-tabell td { padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--line); }
#marked .marked-tabell td.tall { text-align: right; white-space: nowrap; }
#marked .marked-tabell tr.valgt td { background: var(--bg-soft); }
#marked .marked-land-kn { font: inherit; background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; text-align: left; }
#marked .marked-land-kn:hover { text-decoration: underline; }
#marked .up { color: var(--up); }
#marked .down { color: var(--down); }
#marked .marked-lister { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-14); }
#marked .marked-kolonne { min-width: 0; }
#marked .marked-kol-tittel { margin: 0 0 var(--space-4); font-size: var(--fs-brod); }
#marked .marked-rad { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 4.5em 4.5em 3.2em 4.2em; gap: var(--space-6); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-brod); font-variant-numeric: tabular-nums; }
#marked .marked-rad-hode { font-size: var(--fs-merke); color: var(--text-faint); }
#marked .marked-rad-hode span:nth-child(n+3) { text-align: right; }
#marked .marked-nr { color: var(--text-faint); font-size: var(--fs-merke); }
#marked .marked-navn { min-width: 0; overflow-wrap: anywhere; }
#marked .marked-fullnavn { display: block; font-size: var(--fs-merke); color: var(--text-faint); }
#marked .marked-land, #marked .marked-pct, #marked .marked-pos, #marked .marked-merke { text-align: right; font-size: var(--fs-merke); }
#marked .marked-pct { font-size: var(--fs-brod); }
#marked .marked-merke { color: var(--text-soft); white-space: nowrap; }
#marked .marked-utelatt { margin: var(--space-10) 0 0; max-width: 90ch; overflow-wrap: anywhere; }
@media (max-width: 900px) { #marked .marked-lister { grid-template-columns: minmax(0, 1fr); } }


/* §645: «Sterke selskaper som også er lavt priset» */
#marked .marked-solide { margin-top: var(--space-6); }
#marked .marked-solid-rad { display: grid; grid-template-columns: 2.6em minmax(0, 1.4fr) 4.5em 4.5em 3.2em minmax(0, 2fr); gap: var(--space-6); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-brod); font-variant-numeric: tabular-nums; }
#marked .marked-solid-rad.marked-rad-hode { font-size: var(--fs-merke); color: var(--text-faint); }
#marked .marked-solid-rad.marked-rad-hode span:nth-child(n+3):not(:last-child) { text-align: right; }
#marked .marked-tagger { display: flex; flex-wrap: wrap; gap: var(--space-4); min-width: 0; }
#marked .marked-solide-antall { margin: var(--space-4) 0; }
@media (max-width: 900px) { #marked .marked-solid-rad { grid-template-columns: 2.6em minmax(0, 1fr) 4em 4em; } #marked .marked-solid-rad > :nth-child(3), #marked .marked-solid-rad > :nth-child(5) { display: none; } #marked .marked-tagger { grid-column: 2 / -1; } }

/* §646: Markedsoversikt som Dekk-flis, og «Inn og Ut» på Status. Bare tokens. */
.marked-dekk-fase { margin: 0 0 var(--space-6); }
.marked-dekk-liste { display: grid; grid-template-columns: minmax(0, 1fr); }
.marked-dekk-rad { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em 4.2em 3.6em; gap: var(--space-6); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-brod); font-variant-numeric: tabular-nums; }
.marked-dekk-rad .tall { text-align: right; white-space: nowrap; }
.marked-dekk-rad .up { color: var(--up); }
.marked-dekk-rad .down { color: var(--down); }
.marked-dekk-rad.valgt { background: var(--bg-soft); }
.marked-dekk-hode { font-size: var(--fs-merke); color: var(--text-faint); }
.marked-dekk-hode span:nth-child(n+2) { text-align: right; }
.marked-dekk-fot { margin: var(--space-6) 0 0; overflow-wrap: anywhere; }
.status-innut { margin: var(--space-16) 0 0; }
.status-innut-tekst { margin: var(--space-4) 0 var(--space-8); max-width: 90ch; overflow-wrap: anywhere; }
.status-innut-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-14); }
.status-innut-panel { min-width: 0; }
@media (max-width: 760px) { .status-innut-grid { grid-template-columns: minmax(0, 1fr); } }


/* §647: kontrollpanelet under grafen — kompakt og ryddig. Linje-chipen er en vanlig chip, sammensetningen ligger bak én knapp, og filtrene viser bare de som er PÅ til du åpner dem
   (aktive filter står uansett som chips i «Du er her»). Det frigjør høyde til grafen. */
.utvalg-lister-boks { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-10); row-gap: var(--space-4); }
.utvalg-lister-boks > .utvalg-lister { flex: 0 1 auto; }
body.arbeidsflate .utvalg-liste-chip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); flex: 1 1 0; min-width: 0; }
body.arbeidsflate .utvalg-liste-chip:empty { display: none; }
.utvalg-liste-chip .utvalg-liste-chip-linje { align-self: center; }
.utvalg-komp-detalj { min-width: 0; }
.utvalg-komp-detalj > summary { cursor: pointer; list-style: none; display: inline-block; }
.utvalg-komp-detalj > summary::-webkit-details-marker { display: none; }
.utvalg-komp-detalj[open] { flex: 1 1 100%; }
.utvalg-komp-detalj[open] > .utvalg-komp { margin-top: var(--space-6); padding: var(--space-6) var(--space-8); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-liten); }
body.arbeidsflate .utvalg-liste-chip .utvalg-komp-detalj .utvalg-komp { flex: 1 1 100%; }
.baksiden-filterrad:not(.apen) > .vakt-linse-kn:not(.baksiden-flere-kn):not(.paa) { display: none; }
.utvalg-filtre .baksiden-filterrad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }

/* §647: listehodet i Lister — «Du er her» på færre rader (Viser N / filter og «Ser du etter noe annet?» deler rad), snarveien står i samme linje */
.baksiden-kilde-hode .du-er-her { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-14); row-gap: var(--space-4); }
.baksiden-kilde-hode .du-er-her-topp { flex: 0 0 auto; }
.baksiden-kilde-hode .du-er-her-rad { flex: 0 1 auto; }
.baksiden-kilde-hode .du-er-her-andre { flex: 1 1 100%; }
/* §671: én-linjes sidehode også i Lister (som Dashbord og Dybde): tittel i sidehode-størrelse, forklaringen bak ⓘ */
.baksiden-kilde-hode .du-er-her-merke { display: none; }
.baksiden-kilde-hode .du-er-her { align-items: center; }
.baksiden-kilde-hode .du-er-her-navn { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.baksiden-kilde-hode .du-er-her-rad { flex: 1 1 0; align-items: center; }
.baksiden-kilde-hode .baksiden-info-knapp { margin-left: auto; flex: 0 0 auto; }
.baksiden-kilde-hode:not(.intro-apen) .du-er-her-kort, .baksiden-kilde-hode:not(.intro-apen) .du-er-her-andre, .baksiden-kilde-hode:not(.intro-apen) .visning-om { display: none; }
.baksiden-kilde-hode.intro-apen .du-er-her-kort { flex: 1 1 100%; }
.baksiden-kilde-hode .baksiden-rimelig-snarvei { width: auto; flex: 0 0 auto; margin: 0; }

/* §647: åpen sammensetning får hele raden (ellers klemmes ticker-chipsene inn ved siden av listeknappene) */
.utvalg-lister-boks:has(.utvalg-komp-detalj[open]) > .utvalg-liste-chip { flex: 1 1 100%; }
.utvalg-liste-chip .utvalg-liste-chip-linje { white-space: nowrap; }   /* §647: tallet skal ikke brekke ned på egen linje */


/* §647: Dybde-hodet — modulflyt og «sist kjørt» på én linje; «Du er her» uten gjentatt navn */
.dybde-hode-linje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-14); margin: 0 0 var(--space-6); }
.dybde-hode-linje > * { margin: 0; min-width: 0; }
.du-er-her-rad .du-er-her-merke { margin-right: var(--space-4); }


/* §648 (Jens: «kontrollpanelet bør følge arbeidsflaten» og «en scroller som tar meg fra venstre til høyre … et fast format»):
   panelet har ikke lenger høydetak i vh (graf og panel deler kolonnen: grafen får resten), alle fire rader har samme format (etikett | innhold) og innholdet BRYTER i stedet for å rulle sideveis. */
body.arbeidsflate .utvalg-panel { max-height: none; overflow-x: hidden; overflow-y: auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
body.arbeidsflate:not([data-retning="side"]) .utvalg-panel { max-height: none; }
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .utvalg-panel { max-height: none; }
body.arbeidsflate .utvalg-panel > * { flex: 0 0 auto; min-width: 0; }
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--festet, body.arbeidsflate .utvalg-panel > .utvalg-filtre { flex: 0 0 auto; }
body.arbeidsflate[data-retning="side"][data-graf="synlig"] .innhold { grid-template-rows: auto minmax(200px, 1fr) auto; }
body.arbeidsflate[data-visning="full"][data-graf="synlig"] .innhold { grid-template-rows: auto minmax(200px, 1fr) auto; }
.utvalg-panel, .utvalg-panel * { min-width: 0; }
.utvalg-panel .utvalg-gruppe, .utvalg-panel .utvalg-filtre { grid-template-columns: 52px minmax(0, 1fr); }
.utvalg-filtre { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: var(--space-8); }
.utvalg-filtre-innhold { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-10); min-width: 0; }
.utvalg-filtre-innhold .landfilter { flex-wrap: wrap; }
.utvalg-kurver, .utvalg-lister, .utvalg-festet { flex-wrap: wrap; min-width: 0; }
.utvalg-liste-chip .utvalg-liste-chip-linje { display: inline-flex; align-items: center; gap: var(--space-4); max-width: 100%; min-width: 0; }
.utvalg-liste-chip-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.utvalg-liste-chip-linje .hyp-verdi { flex: none; }

/* §648: avkortet i stedet for å sprenge raden (Til vurdering ved 1100 px), og færre kolonner i Markedsoversikt på smal skjerm (ingen sideveis rulling) */
.md-rad .arbeid-hv { max-width: 100%; }
@media (max-width: 640px) {
  #marked .marked-tabell th:nth-child(2), #marked .marked-tabell td:nth-child(2),
  #marked .marked-tabell th:nth-child(6), #marked .marked-tabell td:nth-child(6),
  #marked .marked-tabell th:nth-child(8), #marked .marked-tabell td:nth-child(8) { display: none; }
}

/* §649: «Festet» deler rad med «Linjer» når det er plass (brytes til egen rad når ikke) — sparer en rad høyde til grafen */
body.arbeidsflate .utvalg-panel { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-14); row-gap: var(--space-4); }
body.arbeidsflate .utvalg-panel > * { flex: 1 1 100%; }
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--kurver { flex: 1 1 auto; }
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--festet { flex: 0 1 auto; }
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--festet { grid-template-columns: auto minmax(0, 1fr); }   /* etiketten tar bare den plassen den trenger, så Festet rekker å dele rad med Linjer */
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--festet .eier-input { width: 9em; }
/* §649: rutenett i stedet for flex-brytning — Festet står alltid til høyre i Linjer-raden (Linjer kan krympe/bryte), Lister og Filtre går over hele bredden */
body.arbeidsflate .utvalg-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-14); row-gap: var(--space-4); }
body.arbeidsflate .utvalg-panel > * { grid-column: 1 / -1; }
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--kurver { grid-column: 1; grid-row: 1; }
body.arbeidsflate .utvalg-panel > .utvalg-gruppe--festet { grid-column: 2; grid-row: 1; }

/* §652: Kostnadsbaren (Markedsoversikt) */
#marked .marked-kostnad-kontroll { margin: 0 0 var(--space-8); }
#marked .marked-kostnad-felt { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--fs-merke); color: var(--text-faint); }
#marked .marked-kostnad-felt input { width: 7em; }
#marked .marked-krav { font-weight: 600; color: var(--text); }

/* §654 (E2): Handel */
#handel .handel-oppsummering { margin: 0 0 var(--space-8); }
#handel .handel-baner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
#handel .handel-bane { min-width: 0; }
#handel .handel-bane-tittel { margin: 0 0 var(--space-8); font-size: var(--fs-merke); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
#handel .handel-liste, #handel .handel-kommer { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
#handel .handel-rad { min-width: 0; padding: var(--space-8) var(--space-12); background: var(--bg-soft); border-radius: var(--r-liten); border: 1px solid transparent; cursor: pointer; }
/* §888: raden viser selskapets graf ved klikk (Fokus) / Ctrl-klikk (fest i den delte grafen) —
   samme hover/fokus-/aktiv-formspråk som .md-rad (komponenter.js). */
#handel .handel-rad:hover { border-color: var(--line-strong); }
#handel .handel-rad:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#handel .handel-rad.paa { border-color: var(--accent); }
#handel .handel-rad-topp { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8); }
#handel .handel-ticker { font-weight: 600; }
#handel .handel-etikett { color: var(--text-faint); font-size: var(--fs-merke); }
#handel .handel-status { margin-left: auto; font-size: var(--fs-merke); font-weight: 600; }
#handel .handel-status-klar { color: var(--up); }
#handel .handel-status-under, #handel .handel-status-utgatt { color: var(--text-faint); }
#handel .handel-status-ufull { color: var(--down); }
#handel .handel-tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: var(--space-8); margin-top: var(--space-6); }
/* §672: kurs og 30-dagerslinje på kandidatraden */
#handel .handel-dag { margin-left: var(--space-6); font-size: var(--fs-merke); color: var(--text-soft); }
#handel .handel-dag.up { color: var(--up); }
#handel .handel-dag.down { color: var(--down); }
#handel .handel-spark { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }   /* §683: brytes under linja i smale felt i stedet for å løpe inn i nabofeltet */
#handel .handel-spark svg { width: 72px; height: 20px; flex: 0 0 auto; }
#handel .handel-spark-pct { font-size: var(--fs-merke); color: var(--text-soft); }
#handel .handel-utb { font-size: var(--fs-min); color: var(--text-faint); border: 1px solid var(--line); border-radius: var(--r-liten); padding: 0 var(--space-4); }
#handel .handel-ordre-kurs { margin: var(--space-6) 0; }
#handel .handel-kan-fylles .handel-felt-val { color: var(--accent); }
#handel .handel-felt { display: grid; min-width: 0; }
#handel .handel-felt-lbl { color: var(--text-faint); font-size: var(--fs-merke); }
#handel .handel-felt-val { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#handel .handel-begrunnelse, #handel .handel-regnestykke, #handel .handel-mangler, #handel .handel-advarsler { margin: var(--space-4) 0 0; min-width: 0; overflow-wrap: anywhere; }
#handel .handel-grenser th { text-align: left; font-weight: 600; white-space: nowrap; }
/* §663: Handel i faner og tette rader */
#handel .handel-faner { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: var(--space-4); background: var(--bg); border-bottom: 1px solid var(--line); margin: 0 0 var(--space-16); }
#handel .handel-fane { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--text-soft); font: inherit; font-size: var(--fs-brod); padding: var(--space-8) var(--space-14); cursor: pointer; }
#handel .handel-fane:hover { color: var(--text); }
#handel .handel-fane.aktiv { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
#handel .handel-fane-n { margin-left: var(--space-6); font-size: var(--fs-merke); color: var(--text-faint); font-weight: 400; }
#handel .handel-pane { display: none; }
#handel .handel-pane.aktiv { display: block; }
#handel .handel-pane > h4.marked-seksjon:first-child { display: none; }
#handel .handel-bane-hurtig { margin-top: var(--space-20); }
#handel .handel-liste { gap: var(--space-4); }
#handel .handel-rad { padding: var(--space-10) var(--space-14); }
#handel .handel-rad-linje { display: grid; grid-template-columns: minmax(9rem, 1.1fr) minmax(0, 3fr) 10.5rem 9.5rem;   /* §667: faste bredder, så statusen og knappene står i samme kolonne rad etter rad */ gap: var(--space-14); align-items: center; }
#handel .handel-rad-topp { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
#handel .handel-rad-linje .handel-tall { margin: 0; }
#handel .handel-rad-linje .handel-status { margin: 0; text-align: right; }
#handel .handel-rad-knapper { display: flex; align-items: center; gap: var(--space-8); justify-content: flex-end; }
#handel .handel-forslag-kn { margin: 0; }
#handel .handel-mer { background: none; border: 0; color: var(--text-soft); cursor: pointer; font: inherit; padding: var(--space-4) var(--space-8); }
#handel .handel-mer:hover { color: var(--accent); }
#handel .handel-rad-detalj { display: none; padding-top: var(--space-8); border-top: 1px solid var(--line); margin-top: var(--space-8); }
#handel .handel-rad.apen .handel-rad-detalj { display: block; }
#handel .handel-felt-lbl { font-size: var(--fs-merke); color: var(--text-soft); }
/* §665: Grenser og satser — tabellen får luft mellom kolonnene, og innstillingene står som grupper med merke over valgene */
#handel .handel-grenser th { padding: var(--space-6) var(--space-20) var(--space-6) 0; vertical-align: top; }
#handel .handel-grenser td { padding: var(--space-6) var(--space-16) var(--space-6) 0; vertical-align: top; }
#handel .handel-grenser td.meta { color: var(--text-soft); }
#handel .handel-valg { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); margin: var(--space-16) 0 var(--space-20); padding-top: var(--space-12); border-top: 1px solid var(--line); }
#handel .handel-valg-gruppe { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
#handel .handel-valg-merke { font-size: var(--fs-merke); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
#handel .handel-valg-rad { border-top: 0; padding-top: 0; margin: 0 0 var(--space-12); }
#handel .handel-dagsorden-valg { margin: var(--space-8) 0 var(--space-12); }
#handel .handel-vis-fot { margin: var(--space-8) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
#handel .handel-valg-rad-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); }
#handel .handel-valg-knapper { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
#handel .handel-pane > h4.marked-seksjon { margin-top: var(--space-20); }

/* §665: nedtrekk i panelet under grafen (liste, filtre). Boksen er fast plassert (settes i baksiden.js) fordi panelet har overflow. */
.utvalg-nedtrekk { min-width: 0; }
.utvalg-nedtrekk > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  background: var(--bg); color: var(--text); font-size: var(--fs-data); line-height: 1.4;
}
.utvalg-nedtrekk > summary::-webkit-details-marker { display: none; }
.utvalg-nedtrekk > summary:hover, .utvalg-nedtrekk[open] > summary { border-color: var(--accent); color: var(--accent); }
.utvalg-nedtrekk > summary.i-bruk { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.utvalg-nedtrekk > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.utvalg-nedtrekk-krop {
  position: fixed; z-index: 60; width: min(40rem, calc(100vw - 16px)); max-height: 60vh; overflow: auto;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  box-shadow: var(--skygge-2); padding: var(--space-12);
}
.utvalg-nedtrekk:not([open]) > .utvalg-nedtrekk-krop { display: none; }
@media (max-width: 880px) {
  #handel .handel-rad-linje { grid-template-columns: minmax(0, 1fr) auto; }
  #handel .handel-rad-linje .handel-tall { grid-column: 1 / -1; grid-row: 2; }
  #handel .handel-rad-linje .handel-status { grid-column: 1; grid-row: 3; text-align: left; }
  #handel .handel-rad-knapper { grid-column: 2; grid-row: 1; }
}
#handel .handel-forslag, #handel .handel-fyll { margin-top: var(--space-8); padding: var(--space-8); background: var(--bg); border-radius: var(--r-liten); min-width: 0; }
#handel .handel-forslag-tittel { margin: 0 0 var(--space-6); font-size: var(--fs-merke); }
#handel .handel-forslag-felt { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-8); }
#handel .handel-regnskap-tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-8); margin: var(--space-8) 0; }
#handel .handel-sett-av { margin: var(--space-8) 0; padding-left: var(--space-16); display: grid; gap: var(--space-6); overflow-wrap: anywhere; }
#handel .handel-realisert, #handel .handel-urealisert { width: 100%; table-layout: fixed; }
/* §667: tabellene under #handel hadde ingen stil (reglene gjaldt bare #marked): overskrifter midtstilt, tall venstrestilt. Nå: tekst venstre, tall og talloverskrifter høyre, linjer mellom radene. */
#handel .marked-tabell { border-collapse: collapse; width: 100%; font-size: var(--fs-brod); font-variant-numeric: tabular-nums; }
#handel .marked-tabell th { text-align: left; font-weight: 500; font-size: var(--fs-merke); color: var(--text-soft); padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
#handel .marked-tabell th.tall, #handel .marked-tabell td.tall { text-align: right; }
#handel .marked-tabell td { text-align: left; padding: var(--space-6) var(--space-8); border-bottom: 1px solid var(--line); }
#handel .marked-tabell td.tall { white-space: nowrap; }
#handel .handel-grenser th { color: var(--text); font-size: var(--fs-brod); }
#handel .handel-forslag-lbl { display: grid; gap: var(--space-4); min-width: 0; }
#handel .handel-forslag-lbl input { width: 100%; min-width: 0; box-sizing: border-box; }
#handel .handel-forslag-sum { margin: var(--space-8) 0 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
#handel .handel-bekreft { display: block; margin-top: var(--space-8); overflow-wrap: anywhere; }
#handel .handel-forslag-knapper { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-8); }
#handel .handel-forslag-kn { margin-top: var(--space-6); }
@media (max-width: 600px) { #handel .handel-forslag-felt { grid-template-columns: minmax(0, 1fr); } #handel .handel-forslag-knapper button { flex: 1 1 100%; min-height: 44px; } }
#handel .handel-bors, #handel .handel-hendelser { margin: var(--space-4) 0 0; overflow-wrap: anywhere; }
#handel .handel-bors-stengt { color: var(--text); font-weight: 600; }
#handel .handel-kommer-rad { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 880px) { #handel .handel-baner { grid-template-columns: minmax(0, 1fr); } }
#handel .marked-tabell-ramme { overflow-x: auto; max-width: 100%; }
#handel .handel-grenser, #handel .handel-papir { width: 100%; }
#handel .handel-papir td.tall { font-variant-numeric: tabular-nums; white-space: nowrap; }
#handel .handel-grenser td { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  #handel .handel-grenser tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: var(--space-6) 0; }
  #handel .handel-grenser th, #handel .handel-grenser td { display: block; white-space: normal; }
}

/* §680: forklaring ved trykk på berøringsskjerm (se touchHjelpTekst i komponenter.js) */
.touchhjelp {
  position: fixed; z-index: 90; width: min(20rem, calc(100vw - 16px)); overflow: auto;
  background: var(--bg); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-liten);
  box-shadow: var(--skygge-2); padding: var(--space-8) var(--space-12);
  font-size: var(--fs-data); line-height: 1.45; overflow-wrap: anywhere;
}

/* §686: legende-prikkene (HTML-spans) fikk bare `fill` (som gjelder SVG) og var usynlige; rutene over setter nå også `background` med samme farge. Prikken er knappen som slår linja av og på. */

/* §687: median/«opp» ved siden av listens snitt, og avkastning + hendelse pr. selskap i Sammensetning */
.utvalg-liste-sammendrag { font-size: var(--fs-data); color: var(--text-soft); white-space: nowrap; align-self: center; }
.utvalg-komp-pct { font-size: var(--fs-merke); font-variant-numeric: tabular-nums; color: var(--text-soft); margin-left: var(--space-4); }
.utvalg-komp-pct.opp { color: var(--up); }
.utvalg-komp-pct.ned { color: var(--down); }
.utvalg-komp-hendelse { font-size: var(--fs-min); color: var(--text-soft); margin-left: var(--space-4); cursor: help; }
.utvalg-komp-hendelse.ned { color: var(--down); }

/* §691: Papirhandel — kjøreplan og resultat over tid */
.marked-underseksjon { margin: var(--space-16) 0 var(--space-6); font-size: var(--fs-brod); font-weight: 600; color: var(--text); }
.papir-plan-blokk { margin: var(--space-8) 0; }
.papir-plan-tittel { font-size: var(--fs-data); font-weight: 600; color: var(--text-soft); margin-bottom: var(--space-4); }
.papir-plan td, .papir-plan th, .papir-resultat td, .papir-resultat th { overflow-wrap: anywhere; min-width: 0; }
.papir-frosne { font-size: var(--fs-merke); font-weight: 400; margin-top: var(--space-2); }   /* §946 */
.papir-periode { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); }
.papir-periode-knapp { font: inherit; font-size: var(--fs-data); color: var(--text-soft); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-liten); padding: var(--space-4) var(--space-10); cursor: pointer; }
.papir-periode-knapp:hover { border-color: var(--line-strong); color: var(--text); }
.papir-periode-knapp.aktiv { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); font-weight: 600; }
.papir-forklaring { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); font-size: var(--fs-data); color: var(--text-soft); margin-bottom: var(--space-4); }
.papir-leg { display: inline-flex; align-items: center; gap: var(--space-6); min-width: 0; overflow-wrap: anywhere; }
.papir-prikk { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--text-faint); }
.papir-prikk.r1 { background: var(--k-sky); }
.papir-prikk.r3 { background: var(--k-amber); }
.papir-prikk.r5 { background: var(--k-teal); }
.papir-graf { margin-bottom: var(--space-8); }
.papir-graf-svg { display: block; width: 100%; height: 150px; }
.papir-rutenett { stroke: var(--line); stroke-width: 1; }
.papir-null { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.papir-akse { fill: var(--text-faint); font-size: 10px; }
.papir-linje { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.papir-linje.r0 { stroke: var(--text-faint); }
.papir-linje.ref { stroke-dasharray: 5 3; }
.papir-linje.r1 { stroke: var(--k-sky); }
.papir-linje.r3 { stroke: var(--k-amber); }
.papir-linje.r5 { stroke: var(--k-teal); }
.papir-dagfordag { margin: var(--space-8) 0; font-size: var(--fs-data); }
.papir-dagfordag summary { cursor: pointer; color: var(--text-soft); }

/* §693: oppsett (budsjett og innstillinger pr. papirkjøring) og farger pr. oppsett */
.papir-prikk.ref { background: var(--text-faint); }
.papir-linje.ref { stroke: var(--text-faint); stroke-dasharray: 5 3; }
.papir-prikk.c0 { background: var(--k-sky); }
.papir-linje.c0 { stroke: var(--k-sky); }
.papir-prikk.c1 { background: var(--k-amber); }
.papir-linje.c1 { stroke: var(--k-amber); }
.papir-prikk.c2 { background: var(--k-teal); }
.papir-linje.c2 { stroke: var(--k-teal); }
.papir-prikk.c3 { background: var(--k-rose); }
.papir-linje.c3 { stroke: var(--k-rose); }
.papir-prikk.c4 { background: var(--k-olive); }
.papir-linje.c4 { stroke: var(--k-olive); }
.papir-prikk.c5 { background: var(--k-violet); }
.papir-linje.c5 { stroke: var(--k-violet); }
.papir-prikk.c6 { background: var(--k-brown); }
.papir-linje.c6 { stroke: var(--k-brown); }
.papir-prikk.c7 { background: var(--k-slate); }
.papir-linje.c7 { stroke: var(--k-slate); }
.papir-prikk.c8 { background: var(--k-orchid); }
.papir-linje.c8 { stroke: var(--k-orchid); }
.papir-status.kjorer { color: var(--up); }
.papir-status.stoppet { color: var(--text-faint); }
.papir-status.last, .papir-status.venter { color: var(--warn); }
.papir-handlinger { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.papir-handlinger .vakt-linse-kn.bekreft, .papir-nytt .vakt-linse-kn.bekreft { color: var(--down); border-color: var(--down); }
.papir-oppsett td, .papir-oppsett th { overflow-wrap: anywhere; min-width: 0; }
.papir-nytt { margin: var(--space-12) 0; padding: var(--space-12); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); }
.papir-nytt-rad, .papir-regelvalg { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.papir-regel-forklaring { margin: var(--space-6) 0; }
.papir-felter { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12); align-items: flex-end; margin: var(--space-8) 0; }
.papir-felt { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.papir-felt-navn { font-size: var(--fs-merke); color: var(--text-soft); }
.papir-felt .eier-input { width: 110px; }
.papir-felt-merknad .eier-input { width: 220px; }   /* §942: fritekst trenger mer plass enn et 4-5-sifret tall */
.papir-merknad { color: var(--text-faint); font-style: italic; }
.papir-kostnad { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
.papir-endre td { background: var(--bg-soft); padding: var(--space-12); }

/* §694: Spredning (korrelasjon, fordeling og bytte) */
.spred-velger { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; margin: var(--space-8) 0; }
.spred-chips { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.spred-chip { display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-6); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-liten); font-size: var(--fs-data); }
.spred-x { font: inherit; font-size: var(--fs-merke); color: var(--text-faint); background: none; border: 0; cursor: pointer; padding: 0 var(--space-2); }
.spred-x:hover { color: var(--down); }
.spred-input { width: 120px; }
.spred-input.feil { border-color: var(--down); }
.spred-snarveier { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.spred-belop { display: flex; flex-direction: column; gap: var(--space-4); }
.spred-tabell td, .spred-tabell th, .spred-matrise td, .spred-matrise th, .spred-bytte td, .spred-bytte th { overflow-wrap: anywhere; min-width: 0; }
.spred-tabell .eier-input { width: 64px; text-align: right; }
.spred-advarsel { color: var(--warn); }
.spred-sammendrag { font-size: var(--fs-brod); margin: var(--space-8) 0; }
.spred-k.lav { color: var(--up); font-weight: 600; }
.spred-k.hoy { color: var(--down); }
.spred-k.ukjent, .spred-diag { color: var(--text-faint); }
.spred-bytte-velger { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-6) 0; }
.spred-lesing p { margin: var(--space-4) 0; font-size: var(--fs-brod); overflow-wrap: anywhere; }
.spred-oppsummering { font-size: var(--fs-brod); margin: var(--space-6) 0; overflow-wrap: anywhere; }

/* §696: søkefelt for selskaper med forslag (Spredning) — samme utseende som nedtrekket under kommandofeltet */
.sok-felt { position: relative; display: inline-block; min-width: 0; }
.sok-forslag {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 1045; min-width: min(320px, 80vw);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--skygge-2); overflow: hidden auto; max-height: min(50vh, 360px);
}
.sok-forslag[hidden] { display: none; }
.sok-treff { display: flex; align-items: baseline; gap: var(--space-10); padding: var(--space-6) var(--space-12); cursor: pointer; font-size: var(--fs-brod); }
.sok-treff:hover, .sok-treff.aktiv { background: var(--accent-bg); }
.sok-pris { color: var(--text-soft); font-family: var(--mono); font-size: var(--fs-merke); }   /* §937 */
.sok-land { margin-left: auto; color: var(--text-faint); font-size: var(--fs-merke); }
.sok-tom { padding: var(--space-8) var(--space-12); color: var(--text-soft); font-size: var(--fs-data); }
.spred-sok { width: 190px; }

/* §698: landradene i Markedsoversikt-flisa på Dashbordet er lenker til Markedsoversikt med landet valgt */
a.marked-dekk-rad { color: inherit; text-decoration: none; cursor: pointer; }
a.marked-dekk-rad:hover { background: var(--accent-bg); }
a.marked-dekk-rad:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.marked-dekk-hode { cursor: default; }

/* §699: hele listechipen er en av/på-knapp */
.utvalg-liste-chip-klikk { cursor: pointer; }
.utvalg-liste-chip-klikk.av { opacity: .6; }

/* §700: listens linje står i Linjer-nedtrekket, sammen med de andre linjene */
.utvalg-liste-linje { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-8); }
.utvalg-liste-linje:empty { display: none; }
.utvalg-liste-linje .utvalg-liste-sammendrag { white-space: normal; overflow-wrap: anywhere; }
#hendelsesforlop.skjult ~ .utvalg-panel .utvalg-liste-linje { display: none; }

/* §701: Oppsett-tabellen stables som kort på smal skjerm (ellers ligger Endre/Stopp/Slett utenfor skjermen og må rulles til) */
@media (max-width: 600px) {
  .papir-oppsett, .papir-oppsett tbody { display: block; }
  .papir-oppsett tr:first-child { display: none; }
  .papir-oppsett tr[data-oppsett] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-12); padding: var(--space-8) 0; border-bottom: 1px solid var(--line); }
  .papir-oppsett td { display: block; border: 0; padding: var(--space-2) 0; text-align: left; min-width: 0; }
  .papir-oppsett td:first-child, .papir-oppsett td.papir-status, .papir-oppsett td.papir-handlinger { grid-column: 1 / -1; }
  .papir-oppsett td[data-e]::before { content: attr(data-e) ": "; color: var(--text-faint); font-size: var(--fs-merke); }
  .papir-oppsett td:first-child::before, .papir-oppsett td.papir-handlinger::before, .papir-oppsett td.papir-status::before { content: none; }
  .papir-oppsett tr.papir-endre { display: block; }
  .papir-oppsett tr.papir-endre td { display: block; padding: var(--space-8) 0; }
}