/* ═══ OPFØLGNINGEN — fladens egne tilføjelser oven på husets stilark ════════
   Skelettet (.top/.app/.tree/.grp/.it) kommer fra nerve-finance-apple.css
   (hash-låst, ADR-0005). Her ligger KUN det opfølgningen selv tegner:
   KPI-striben, statuspillerne, tidslinjen og handlingsformularen. */

/* ⛔ SCROLL: husets body er `overflow:hidden` (fast vinduesramme) — indholdet
   SKAL rulle i sit eget felt, ellers klippes alt under folden (Christians
   foerste fund 28-08: »jeg kan ikke scrolle paa siden«). Body'ens grid faar
   ogsaa en raekke til statuslinjen — huset regner med 2 boern, siden har 3. */
body{grid-template-rows:auto minmax(0,1fr) auto}
.app{min-height:0;overflow:hidden}

/* ⛔ SKÆRMLÆSER-ETIKETTEN VAR SYNLIG TIL 10-09-2026. `opfoelgning.html:53` har
   `<label class="visuelt-skjult" for="enhedsvalg">Vælg enhed</label>`, og
   klassen findes hverken i det hash-låste grundlag eller i `programskift.css`
   — målt, ikke antaget:

       grep -c visuelt-skjult ui/design/nerve-finance-apple.css  → 0
       grep -c visuelt-skjult ui/flade/programskift.css          → 0

   Uden reglen læses etiketten af ALLE, midt i værktøjslinjen. Den er skrevet
   TIL en skærmlæser og hører ikke i billedet.

   ⚠ Fladen bærer IKKE springlink-markup (målt), så `.springlink`-blokken hører
     ikke her. Kun den ene regel der mangler.

   ⛔ **Rettet af fladevagt-sessionen efter koordinator-aftale 10-09-2026**, ikke
      af filens ejer: fejlen blev fundet af `tests/ui/test_fladens_par.py`, som
      samler husets tre fladevagter (markup → modstykke) i én tabel. Grundlaget
      står i claim-filen — `svarioversigten` afleverede 07-09-2026, og
      »I gang«-rækken var en merge-genoplivet dublet af ⏹-rækken. */
.visuelt-skjult{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.hoved{padding:14px 18px 40px;overflow-y:auto;overflow-x:hidden;min-width:0;min-height:0}
.titelraekke{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.titelraekke h1{font-size:19px;letter-spacing:-.02em;margin:0}
.titelraekke .knap{margin-left:auto}
.mut{color:var(--txt-3)} .neg{color:var(--neg)}

.taeller{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--txt-3);
  background:var(--graa-flade);border-radius:99px;padding:1px 7px;min-width:14px;
  text-align:center}
.it.aktiv .taeller{color:var(--acc)}

.kpirow{margin-bottom:14px}
.kpi .delta{font-size:10.5px;font-weight:600;margin-top:1px}
.kpi .val.neg{color:var(--neg)}

.todelt{display:grid;grid-template-columns:minmax(460px,7fr) minmax(360px,5fr);
  gap:14px;align-items:start}
@media (max-width:1180px){.todelt{grid-template-columns:1fr}}
.kort{background:var(--chrome);border-radius:12px;box-shadow:var(--skygge);
  overflow:hidden;min-width:0}
.kort .kh{display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-bottom:1px solid var(--line-2);flex-wrap:wrap}

.knap{border:1px solid var(--line);background:var(--chrome);border-radius:8px;
  padding:5px 12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.knap.primaer{background:var(--acc);border-color:var(--acc);color:#fff}
.knap:hover{filter:brightness(.97)}
.knap:disabled{opacity:.5;cursor:default}
.chip{border:1px solid var(--line);background:var(--chrome);border-radius:99px;
  padding:3px 11px;font:inherit;font-size:11.5px;cursor:pointer;color:var(--txt-2)}
.chip.aktiv{background:var(--acc);border-color:var(--acc);color:#fff}

.pille{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;
  border-radius:99px;white-space:nowrap}
.p-ok{background:var(--pos-flade);color:var(--pos)}
.p-forf{background:var(--warn-bg);color:var(--warn)}
.p-r1{background:var(--ryk1-bg);color:var(--ryk1-fg)}
.p-r2{background:var(--ryk2-bg);color:var(--ryk2-fg)}
.p-r3{background:var(--ryk3-bg);color:var(--ryk3-fg)}
.p-ink{background:var(--neg-flade);color:var(--neg)}
.p-aft{background:var(--acc-soft);color:var(--acc)}
.p-wait{background:var(--graa-flade);color:var(--txt-2)}
/* A4's historik: bevidst daempet og med kant — en OPLYSNING, ikke vores trin */
.p-a4{background:none;border:1px dashed var(--line);color:var(--txt-2)}

#gitter tbody tr{cursor:pointer}
#gitter tbody tr.valgt td{background:var(--row-sel)}

/* ── detaljen ── */
.detalje .tomt{padding:26px 16px;text-align:center}
.dhoved{padding:12px 14px;border-bottom:1px solid var(--line-2)}
.dhoved .navn{font-size:15px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dtal{display:flex;gap:16px;margin-top:6px;flex-wrap:wrap;font-size:12px;
  color:var(--txt-2)}
.dtal b{color:var(--txt);font-variant-numeric:tabular-nums}
.dtal a{color:var(--acc);text-decoration:none}
.naeste{margin:11px 14px 0;padding:9px 12px;background:var(--acc-soft);
  border:1px solid var(--acc-mid);border-radius:9px;font-size:12.5px}
.naeste b{color:var(--acc)}

/* ── handlingsformularen: fire arter, én tekst, frist+beløb ── */
.handling{display:flex;flex-direction:column;gap:8px;margin:11px 14px;
  padding:11px 12px;background:var(--chrome-3);border:1px solid var(--line-2);
  border-radius:10px}
.handling .artvalg{display:flex;gap:6px;flex-wrap:wrap}
.handling textarea{font:inherit;font-size:12.5px;padding:7px 9px;
  border:1px solid var(--line);border-radius:8px;background:var(--chrome);
  color:var(--txt);resize:vertical}
.handling .frister{display:flex;gap:12px;flex-wrap:wrap}
.handling .frister label{display:flex;flex-direction:column;gap:3px;
  font-size:10.5px;font-weight:600;color:var(--txt-3)}
.handling input{font:inherit;font-size:12.5px;padding:5px 8px;
  border:1px solid var(--line);border-radius:7px;background:var(--chrome);
  color:var(--txt)}
.handling .fejl{color:var(--neg);font-size:12px;font-weight:600}
.handling .knap.primaer{align-self:flex-start}

/* ── tidslinjen — samme tegning som det godkendte forslag ── */
.tidslinje{list-style:none;margin:0;padding:8px 14px 14px;position:relative}
.tl{display:grid;grid-template-columns:20px 1fr;gap:9px;padding:7px 0;
  position:relative}
.tl::before{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;
  background:var(--line-2)}
.tl:first-child::before{top:14px} .tl:last-child::before{bottom:auto;height:14px}
.tl .ik{width:20px;height:20px;border-radius:99px;display:grid;
  place-items:center;z-index:1;background:var(--chrome);
  border:2px solid var(--line)}
.tl .ik .ic{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tl.brev .ik{color:var(--acc);border-color:var(--acc-mid)}
.tl.mail_ind .ik{color:var(--pos);border-color:var(--pos-flade)}
.tl.mail_ud .ik{color:var(--txt-2)}
.tl.note .ik{color:var(--warn);border-color:var(--warn-bg)}
.tl.loefte .ik,.tl.aftale .ik{color:var(--acc)}
.tl.inkassovarsel .ik{color:var(--neg);border-color:var(--neg-flade)}
.tl .hv{font-size:12.5px}
.tl .tid{font-size:10.5px;color:var(--txt-3);margin-top:1px}
.tl .kilde{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:99px;
  background:var(--graa-flade);color:var(--txt-2);margin-left:6px;
  vertical-align:1px}

/* ── mailbakken ── */
.mailtabel{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mailtabel th{font-size:10.5px;font-weight:700;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.04em;text-align:left;
  padding:7px 12px;border-bottom:1px solid var(--line-2)}
.mailtabel td{padding:7px 12px;border-bottom:1px solid var(--line-2)}
.mailtabel .koblenr{width:90px;font:inherit;font-size:12px;padding:4px 7px;
  border:1px solid var(--line);border-radius:7px;background:var(--chrome);
  color:var(--txt);margin-right:6px}
#mailbakke .tomt{padding:22px 16px}

@media (prefers-reduced-motion:no-preference){
  .knap,.chip,#gitter tbody tr{transition:background .15s,filter .15s}}

/* ── Driftsstriben: LEVER mailsynken? ───────────────────────────────────────
   ⛔ Den står ØVERST, før nøgletallene, og den er ikke pynt. Kæden der fylder
   korrespondancesporet, var død i fem døgn (28-08 → 02-09-2026) uden at nogen
   kunne se det — der fandtes ingen timer, og et vandmærke der står stille
   ligner en rolig uge. Farven følger `sidst_ts` (kørte synken?), ALDRIG
   vandmærket; teksten kommer fra serveren, så fladen ikke opfinder sin egen
   tærskel.
   ⚠ Kun tokens der FINDES i `ui/design/nerve-finance-apple.css` bruges her —
   en opdigtet token tegner gennemsigtigt og ser ud som en manglende tilstand. */
.synkstribe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:12px;padding:8px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--chrome-2);font-size:12px}
.synkstribe .ic{width:15px;height:15px;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.synkstribe b{font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.synkstribe .txt{color:var(--txt-2)}
.synkstribe .tal{margin-left:auto;font-variant-numeric:tabular-nums;
  color:var(--txt-2);font-weight:600}
.synkstribe .mut{font-size:11px}
.synkstribe.t-groen{color:var(--pos);border-color:var(--pos-flade);
  background:var(--pos-flade)}
.synkstribe.t-gul{color:var(--warn);border-color:var(--warn-bg);
  background:var(--warn-bg)}
.synkstribe.t-roed,.synkstribe.t-ukendt{color:var(--neg);
  border-color:var(--neg-flade);background:var(--neg-flade)}
.synkstribe.t-groen .txt,.synkstribe.t-gul .txt,.synkstribe.t-roed .txt{
  color:inherit}

/* ── De umatchedes grund og forslag ────────────────────────────────────────
   ⛔ Et forslag er en CHIP, ikke en knap der kobler. Koblingen kan ikke rulles
   tilbage (`opfoelgning_mail_kobling_en_gang`), så chippen udfylder kun feltet
   — det sidste tryk er menneskets. Målt 02-09-2026: `@dachser.com` dækker fire
   kunder, og et gæt ville ramme rigtigt hver fjerde gang og stå fast hver gang. */
.mailtabel .grund{max-width:340px;color:var(--txt-2);font-size:11.5px;
  line-height:1.45}
.mailtabel .forslag{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.mailtabel .forslag .chip{font-size:10.5px;padding:2px 8px}

/* ══ 02-09-2026 · RETNINGEN PÅ TIDSLINJEN ═════════════════════════════════
   Brev, mail ind og mail ud havde samme ikon, og forskellen på ind og ud lå
   ALENE i farven på ikonringen. Farve må aldrig være eneste betydningsbærer
   (UI-UX-STANDARD § 10) — og en korrespondance hvor man ikke kan se hvem der
   talte, er halvdelen af en samtale. Retningen står nu som ikon + ORD. */
.tl.udsendelse .ik{color:var(--txt-2)}
.retning{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:99px;
  margin-left:6px;white-space:nowrap;border:1px solid var(--line);
  color:var(--txt-2);vertical-align:1px}
.retning.r-ud{color:var(--acc);border-color:var(--acc-mid)}
.retning.r-ind{color:var(--pos);border-color:var(--pos-flade)}
/* ⛔ Et resultat der betyder at kunden IKKE fik brevet, står i afvisende
   farve OG med sit eget ord — aldrig farven alene. */
.retning.neg{color:var(--neg);border-color:var(--neg-flade);font-weight:800}

/* ── »Har kunden svaret på DENNE rykker?« — 05-09-2026 ──────────────────────
   Christian: »Det skal bare fremgå tydeligt ud for hver rykker om der er svar
   og vi skal kunne se svaret«.

   ⛔ Farven er ALDRIG alene om at bære betydningen (UI-UX-STANDARD § 10) —
      »Besvaret« og »Afventer svar« står som ORD, og den besvarede bærer
      desuden et ikon. Den her fil er fladens egen; grundlaget
      (nerve-finance-apple.css) er hash-laast af ADR-0005 og roeres ikke.
   ⚠ `--pos`/`--txt-2` er grundlagets egne variable — ingen nye farver
      opfindes her. */
.svarmk{display:inline-flex;align-items:center;gap:4px;margin-left:8px;
  font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.svarmk .ic{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
/* ⭐ Nyheden — den skal kunne ses i et forloeb med tre breve og fem noter. */
.svarmk.ja{color:var(--pos)}
/* ⚠ Hverdagen for et nyt brev. Daempet MED VILJE: en advarsel der ogsaa staar
   naar alt er normalt, laeres vaek (§ 9), og saa ser man den heller ikke den
   dag den betyder noget. */
.svarmk.nej{color:var(--txt-2);font-weight:500}

.svarliste{list-style:none;margin:5px 0 2px;padding:0 0 0 10px;
  border-left:2px solid var(--pos-flade,var(--line))} /* --line, ikke --linje: reserven skal vaere et token der FINDES, ellers er den ingen reserve [test_synligt_spor 15-09-2026] */
/* ⛔ **GITTER OG IKKE FLEX — RETTET 07-09-2026 EFTER ET SKAERMBILLEDE.**
   Med `display:flex` paa ÉN raekke skulle tidspunkt, afsender, emne, link og
   knap dele en detaljerude paa ~400 px. Maalt paa skaermbilledet blev emnet
   presset ned i en spalte paa ca. 15 tegn og brakkede over fem linjer —
   »wir zahlen am / Freitag«. Svaret var teknisk set paa skaermen og reelt
   ulaeseligt, og det var netop det Christian bad om at slippe for.
   Nu: tidspunkt + tekst paa foerste raekke, handlingerne paa deres egen
   under teksten. Emnet faar dermed hele bredden.
   ⚠ Fejlen kunne KUN ses i en browser — ingen assertion om at et element
     findes, ville have fanget den. */
.svarliste li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:1px 8px;padding:3px 0;font-size:12px;line-height:1.45}
.svarliste .stid{grid-column:1;grid-row:1;color:var(--txt-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px}
/* ⚠ Emnet kan vaere langt. Det braekker frem for at skubbe tidslinjen bred —
   en vandret rullebjaelke i en tidslinje er en fejl, ikke en loesning. */
.svarliste .stekst{grid-column:2;grid-row:1;overflow-wrap:anywhere;
  display:flex;flex-direction:column;gap:1px;min-width:0}

/* ═══ 07-09-2026 [RY-01] — SVARET SKAL KUNNE LAESES OG LUKKES I FORLOEBET ═════
   Christian, ordret: *»vi kan se, naar en kunde har svaret, men det kraever
   stadig, at vi aabner selve mailen … Derudover mangler vi et tegn eller symbol
   paa, at der faktisk ligger et svar i denne case«*.

   ⛔ INGEN NYE FARVER. `--warn`, `--acc`, `--txt-2` og `--line` er grundlagets
      egne; `ui/design/` er hash-laast af ADR-0005 og roeres ikke.
   ⛔ FARVEN STAAR ALDRIG ALENE (§ 10): hver tilstand har ORD, og den der
      haster har desuden et IKON. */

/* Afsenderen foerst, saa emnet — to linjer, saa emnet kan laeses som en
   saetning i stedet for at skulle skilles ud af »Fra X: …«. */
.svarliste .safs{color:var(--txt-2);font-size:11px}
.svarliste .semne{font-weight:500}

/* ⭐ Det ULAESTE svar. Venstrekanten er kraftigere, saa oejet finder raekken i
   en liste med fem — men baeren af betydningen er knappen og ordene, ikke
   stregen. */
.svarliste li.vent{border-left:2px solid var(--warn);
  margin-left:-10px;padding-left:8px}
.svarliste li.set .semne{font-weight:400;color:var(--txt-2)}

/* Handlingerne staar UNDER teksten (raekke 2, samme spalte som emnet), saa de
   ikke stjaeler bredde fra det der skal laeses. */
.svarliste .shandling{grid-column:2;grid-row:2;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;margin-top:2px}
.svarliste .ssat{color:var(--txt-2);font-size:11px}

/* Linket til mailen — GD-13's egen vej: skaermen LINKER, den kopierer ikke. */
.svarliste .slink{font-size:11px;text-decoration:none;color:var(--acc)}
.svarliste .slink:hover{text-decoration:underline}

/* »Genaabn« er en fortrydelse og skal se lettere ud end »Markér som set« —
   men den skal kunne rammes, saa den er en knap og ikke kun en tekst. */
.svarliste .slnk{background:none;border:0;padding:2px 4px;cursor:pointer;
  font:inherit;font-size:11px;color:var(--txt-2);text-decoration:underline}
.svarliste .slnk:hover{color:var(--txt)}
.svarliste .knap.lille{padding:2px 8px;font-size:11px;line-height:1.6;
  cursor:pointer}
.svarliste [data-mail]:disabled{opacity:.55;cursor:progress}
/* § 10: fokusringen er :focus-visible, saa musebrugeren ikke faar den. */
.svarliste .slnk:focus-visible,.svarliste .slink:focus-visible,
.svarliste .knap.lille:focus-visible{outline:2px solid var(--acc);
  outline-offset:2px;border-radius:4px}

/* ⚠ »Svar venter« paa selve BREVET i tidslinjen — samme ord som i gitteret.
   To forskellige ord for samme tilstand ville laere brugeren at de er to
   tilstande. */
.svarmk.vent{color:var(--warn)}

/* ═══ TEGNET I FORLOEBSOVERSIGTEN (gitterets celle) ══════════════════════════
   ⛔ Det taendes KUN af noget ubehandlet — se `_ubehandlede_svar` i laeselaget.
      Et tegn der altid er taendt, er tapet, og saa er vi tilbage ved det
      Christian bad om at slippe for. */
.g .svarvent{display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;color:var(--warn);white-space:nowrap}
.g .svarvent .ic{width:11px;height:11px;stroke:currentColor;stroke-width:2;
  fill:none;stroke-linecap:round;stroke-linejoin:round}