/* ==========================================================================
   NERVE Finance — STAMKORTMOTORENS EGET STILARK. CSS-tvillingen til
   `_stamkort.js` (F10a).

   ⛔ **HVORFOR DEN FINDES.** `Stamkort.formularHtml()` tegner `.feltgrupper`,
      `.feltgruppe`, `.felt`, `.feltnote`, `.feltfejl` og `.attest`. De regler
      boede i `kartotek.css` — kartotekets EGET fladelag — og motoren kunne
      derfor kun tegnes pænt ét sted. F10b monterer den samme motor fra
      `faktura.html` og `fakturaoversigt.html`, og de to flader linker ikke
      kartotekets ark.

   ⛔ **HVORFOR IKKE BARE LINKE `kartotek.css`.** Målt 11-09-2026: arket
      definerer **`main.work`**, `.hjaelp`, `.pille` og `.svar` — navne
      fakturamodulet allerede bruger til noget andet. Et lånt
      `main.work { grid-column: 2 / -1 }` fra en flade UDEN træ er præcis den
      fejl der lagde fakturafladens arbejdsflade oven i træet 10-09-2026
      (ADR-0047 · `test_fakturamodul_i_rail.py::test_rammen_staar_som_tre_soejler`).
      `ny-kunde.css` bærer i dag den rettede form, `.app > nav.rail + main.work`
      — men `kartotek.css` er ikke rettet, og en flade skal ikke arve en anden
      flades ramme for at låne dens formular.

   ⚠ **DUPLIKAT, OG DET ER SAGT HØJT.** Reglerne nedenfor står ORDRET som i
     `kartotek.css` (§ 8, § 10c, § 10d). To kopier af én sandhed er husets
     kendte fejlform [REGEL 5 pkt. 2], og den rigtige ende er at FLYTTE dem
     hertil og lade `kartotek.html` + `ny-kunde.html` linke arket. Det er ikke
     gjort i denne omgang, fordi reglerne ligger spredt i seks blokke i
     `kartotek.css`, og en omlægning af kartotekets ark er sin egen opgave med
     sit eget skærmbevis — ikke noget man lægger ind under en montering.

     Derfor er duplikatet ikke efterladt ubevogtet: **`tests/ui/test_stamkortarket.py`
     sammenligner de delte regler tegn for tegn**, så de ikke kan drive fra
     hinanden i tavshed. Driver de, er prøven rød samme dag — ikke den dag
     nogen opdager at ruden ser anderledes ud end kartoteket.

   ⛔ `../design/*.css` rettes aldrig (ADR-0005). Alt herunder bruger
      grundlagets egne roller.
   ========================================================================== */

/* ── Formularen (kartotek.css § 8) ────────────────────────────────────────── */
.felter {
  display: grid; gap: 13px 18px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.felt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.felt label { font-size: 12px; font-weight: 600; color: var(--txt-2); }
.valgfri { font-weight: 400; color: var(--txt-3); }
.felt input {
  /* 44 px trykflade: mindstemålet for en berøringsflade. */
  min-height: 44px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--win); color: var(--txt);
  font: inherit; font-size: 13.5px; min-width: 0;
}
.feltnote { font-size: 11.5px; line-height: 1.6; color: var(--txt-3); margin: 0; }
.feltnote b { color: var(--txt-2); }

/* Fejlen står VED feltet, ikke i toppen af siden. */
.feltfejl { font-size: 11.5px; color: var(--neg); margin: 0; }
.feltfejl:empty { display: none; }
.felt.fejl input { border-color: var(--neg); }

/* ── Feltgrupperne (kartotek.css § 10c) ──────────────────────────────────── */
.feltgruppe {
  border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 13px 12px; margin: 0; min-width: 0;
}
.feltgruppe legend {
  font-size: 11px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--txt-3); padding: 0 5px;
}
.feltgrupper {
  display: grid; gap: 12px 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Attest-feltet (AI-05): et JA skal være et aktivt valg, aldrig et standardflueben. */
.attest {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.6; color: var(--txt-2); max-width: 74ch;
}
.attest input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex: none;
  accent-color: var(--btn-flade);
}

/* Formularens select-felter — samme mål som input (§ 8). */
.felt select {
  min-height: 44px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--win); color: var(--txt);
  font: inherit; font-size: 13.5px; min-width: 0; cursor: pointer;
}

/* ── Flag, enum og textarea (kartotek.css § 10d) ─────────────────────────── */
/* Flag (JA/NEJ): etiketten ER klikfladen, og hele linjen holder 44 px-målet. */
.flagfelt {
  display: flex; gap: 9px; align-items: center; min-height: 44px;
  font-size: 12.5px; font-weight: 600; color: var(--txt-2);
  cursor: pointer;
}
.flagfelt input[type="checkbox"] {
  width: 18px; height: 18px; flex: none;
  accent-color: var(--btn-flade);
}

/* ⚠ 66px og ikke 60: `kartotek.css` saetter 60 i § 10d og RETTER den til 66 i
   § 12b, fordi inkassonoten er en BEGRUNDELSE og skal kunne rumme en saetning
   — ikke et 1-linjes felt der inviterer »ok«. Browseren ser kaskadens
   RESULTAT, og det er resultatet der skal vaere ens de to steder.
   Fundet af `tests/ui/test_stamkortarket.py`, som samler kaskaden. */
.felt textarea {
  min-height: 66px; padding: 8px 11px; resize: vertical;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--win); color: var(--txt);
  font: inherit; font-size: 13.5px; min-width: 0; line-height: 1.5;
}
.felt textarea::placeholder { color: var(--txt-3); }

/* ── RUDEN selv — det der IKKE står i kartotek.css ───────────────────────── */
/* ⛔ Kartoteket viser formularen på en hel side; ruden viser den i en modal,
   som har en højde. Uden en rullebeholder ville de nederste felter — og
   dermed GEM-knappen — stå uden for skærmen på en bærbar, og en formular man
   ikke kan gemme, er værre end ingen formular [UI-UX-STANDARD § 12]. */
.stamkortrude { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.stamkortrude .skrolfelt {
  max-height: min(56vh, 520px); overflow-y: auto; padding-right: 4px;
}
.stamkortrude .rudehoved {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; color: var(--txt-2);
}
.stamkortrude .rudehoved b { color: var(--txt); font-size: 14px; }
.stamkortrude .rudefod {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.stamkortrude .rudefod .spacer { flex: 1; }
.stamkortrude .svar { font-size: 12.5px; line-height: 1.6; margin: 0; }
.stamkortrude .svar.fejl { color: var(--neg); }
.stamkortrude .svar.ok { color: var(--pos-tekst, var(--pos)); }

/* Knappen der åbner ruden — står ved kundefeltet, ikke i et bånd. */
.stamkortknap {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--chrome); color: var(--txt);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.stamkortknap:hover { background: var(--acc-soft); }
.stamkortknap:focus-visible { outline: 2px solid var(--fokus, #0059B3); outline-offset: 2px; }
.stamkortknap[disabled] { opacity: .55; cursor: not-allowed; }
.stamkortknap .ic { width: 14px; height: 14px; }