/* Rente og rykkere — fladens egne tilføjelser.
 *
 * ⛔ `../design/nerve-finance-apple.css` rettes ALDRIG herfra. Den er hash-låst i
 *    ADR-0005 og måles af SH-18 ved hvert commit. Mangler der noget, lægges det
 *    her — der tilføjes ALDRIG aliaser i grundlaget.
 *
 * ⛔ TOKENNAVNENE ER `--line`, `--chrome` og `--txt` — IKKE `--linje`, `--flade`,
 *    `--txt-1`. Første udgave brugte de danske former, og de findes ikke. En
 *    `border`-shorthand med en ukendt custom property bliver *invalid at
 *    computed-value time*, så HELE borderen falder væk — uden at noget fejler.
 *    Efterprøv: hvert `var(--x)` her skal kunne slås op i grundlaget, undtagen
 *    `--fokus`/`--acc-tekst`/`--btn-flade`, som hver flade sætter selv nedenfor.
 */

/* Fokusfarven ejes af fladelaget — grundlaget sætter den ikke. Ordret som
   regnskab.css, så tabulatorringen ser ens ud i hele programmet. */
:root { --fokus: #0059B3; --acc-tekst: #0059B3; --btn-flade: #0071E3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fokus: #6FB6FF; --acc-tekst: #6FB6FF; --btn-flade: #0060C9;
}}
:root[data-theme="dark"] { --fokus: #6FB6FF; --acc-tekst: #6FB6FF; --btn-flade: #0060C9; }

/* ⛔ FOKUS OG SPRING-LINK — UDEN DETTE AFSNIT KOLLAPSER HELE FLADEN.
 *
 *   Grundlaget sætter `body{display:grid; grid-template-rows:auto 1fr}` — kun TO
 *   rækker — og definerer med vilje IKKE `.springlink`. Hver flade gør det selv.
 *
 *   Gjorde vi det ikke, blev `<a class="springlink">` et synligt in-flow grid-item
 *   i række 1. `header.top` skubbes til række 2 (`1fr`) og giver et kæmpe tomt
 *   felt; `div.app` havner i en implicit `auto`-række og mister sin `1fr`; og
 *   `.work` — flex-column med `min-height:0` og `.view{flex:1}` — beregnes til
 *   ~0 px. Rail og træ stod tilbage, og hele arbejdsfladen var VÆK.
 *
 *   Det var årsagen til Christians melding 20-08-2026: »Renter og rykker siden ser
 *   helt skæv ud og fungerer ikke.« Én manglende blok, to symptomer.
 *   Blokken er ordret regnskab.css:30-55. Fundet af aria-sessionen.
 */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 7px;
}
/* Gitterets rulleflade ER tastaturets indgang til rækkerne (piletaster). Den skal
   derfor kunne ses når den har fokus — grundlaget slår dens outline fra. */
.gscroll:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.tree input:focus,
.gsog input:focus,
.g thead tr.fltrow input:focus,
.pop select:focus, .pop input:focus,
.rfelt select:focus { outline-color: var(--fokus); }

/* Spring-link: FØRSTE tabulatorstop, usynligt indtil det får fokus. */
.springlink {
  position: fixed; top: -60px; left: 12px; z-index: 200;
  padding: 8px 14px; border-radius: 0 0 10px 10px;
  background: var(--chrome); color: var(--txt); font-size: 13px; font-weight: 600;
  text-decoration: none; box-shadow: var(--skygge);
}
.springlink:focus { top: 0; }

/* ── læse-pillen: fladen kan ikke sende, og det skal ses ─────────────────── */

.pill.laespille {
  background: var(--graa-flade);
  color: var(--txt-2);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
}
.pill.laespille .ic { width: 13px; height: 13px; }

/* ── grundlagsbåndet ────────────────────────────────────────────────────── */

.grundbaand {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ryk1-bg, rgba(255, 214, 10, .28));
  color: var(--ryk1-fg, #7A5B00);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 13px; line-height: 1.5;
}
.grundbaand .ic { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.grundbaand ul { margin: 6px 0 0; padding-left: 18px; }
.grundbaand li { margin: 3px 0; }
.grundbaand small { display: block; margin-top: 8px; opacity: .8; font-variant-numeric: tabular-nums; }
.grundbaand p { margin: 4px 0 0; }

/* ── politikkortet ──────────────────────────────────────────────────────── */

.kort {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 12px 16px;
}
.kortfelt {
  flex: 1 1 160px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--chrome);
}
.kortfelt .etiket {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--txt-3);
}
.kortfelt .vaerdi {
  display: block; margin-top: 3px; font-size: 15px; font-weight: 600;
  color: var(--txt); font-variant-numeric: tabular-nums;
}

.tomkort {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 12px 16px; padding: 14px;
  border: 1px dashed var(--line); border-radius: 10px;
  color: var(--txt-2); font-size: 13px; line-height: 1.5;
}
.tomkort .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.tomkort p { margin: 4px 0 0; }

/* ── noter under politikken ─────────────────────────────────────────────── */

.noter { margin: 12px 16px 20px; }
.note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: var(--graa-flade); color: var(--txt-2);
  font-size: 13px; line-height: 1.55;
}
.note .ic { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.note p { margin: 5px 0 0; }
.note i { font-style: normal; color: var(--txt); }
/* Advarslen er dæmpet, ikke skrigende: den beskriver en KENDT og valgt risiko,
   ikke en fejl. En rød kasse ville få et bevidst valg til at ligne et nedbrud. */
.note.advarsel {
  background: var(--ryk1-bg, rgba(255, 214, 10, .22));
  color: var(--ryk1-fg, #7A5B00);
}

/* ── de tre bunker ──────────────────────────────────────────────────────── */

.bunker {
  display: flex; flex-direction: column; gap: 18px; margin: 12px 16px 24px;
  /* ⚠ `.view` er `overflow:hidden`, og gitterets egen `.gscroll` kan kun rulle
     inden i en højde den har fået. Tre gitre under hinanden i én visning har
     ingen — så bunke 2 og 3 voksede nedad og blev klippet. Rulningen lægges
     derfor HER, på beholderen, og gitrene får deres naturlige højde. */
  overflow-y: auto;
  min-height: 0;
}
.bunke .grid { max-height: 46vh; }

.bunke > h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 2px; font-size: 15px; font-weight: 650; color: var(--txt);
}
.bunke > h2 .ic { width: 16px; height: 16px; }
.bunke .tal {
  margin-left: 2px; padding: 1px 8px; border-radius: 999px;
  background: var(--graa-flade); color: var(--txt-2);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.bunkeforklaring { margin: 0 0 8px; font-size: 12.5px; color: var(--txt-3); }

/* Farven bærer ALDRIG betydningen alene — overskriften siger det samme i ord,
   og tallet står i pillen. Samme regel som aldersskalaen i DESIGN-SYSTEM.md § 1. */
.bunke.ren > h2 .ic { color: #34C759; }
.bunke.gennemgang > h2 .ic { color: var(--ryk2-fg, #FF9500); }
.bunke.kanikke > h2 .ic { color: var(--ryk3-fg, #E0301E); }

.grund {
  display: inline-block; padding: 1px 7px; margin: 1px 2px 1px 0;
  border-radius: 6px; background: var(--graa-flade);
  color: var(--txt-2); font-size: 12px;
}

/* ── pillerne i trin-gitteret ───────────────────────────────────────────── */

.pil {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.pil.ja { background: var(--ryk2-bg, rgba(255, 149, 0, .20)); color: var(--ryk2-fg, #9A5B00); }
.pil.nej { background: var(--graa-flade); color: var(--txt-3); }

/* ── datovælgeren i sidebjælken ─────────────────────────────────────────── */

.datoboks {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 8px 8px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--chrome);
}
.datoboks .ic { width: 14px; height: 14px; color: var(--txt-3); }
.datoboks input {
  border: 0; background: transparent; color: var(--txt);
  font: inherit; font-size: 12.5px; width: 100%;
}
.datoboks input:focus { outline: none; }
.datoboks:focus-within { border-color: var(--acc); }

/* ── tilgængelighed ─────────────────────────────────────────────────────── */

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