/* ==========================================================================
   NERVE Finance — UDBAKKEN. Fladelaget.

   ⛔ `../design/*.css` rettes aldrig (ADR-0005). Alt herunder bruger
      grundlagets egne roller: --chrome, --win, --line, --txt, --txt-2,
      --txt-3, --acc, --acc-soft, --pos, --warn, --warn-bg, --neg, --skygge.

   ⛔ § 1-blokken nedenfor er ORDRET den samme som `ydelser.css`, `kladde.css`
      og `system.css` bærer. Den er GENTAGET og ikke importeret, af den grund
      `kladde.css`s hoved giver: et fladelag står ved siden af sin flade.
      ⚠ Og den er ikke valgfri — det er målt: grundlaget definerer HVERKEN
        `.springlink` ELLER `.visuelt-skjult`:

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

        Uden dem bliver springlinket et in-flow grid-barn (appen forskydes, og
        linket står SYNLIGT i sidens øverste kant), og »Vælg enhed«-etiketten
        læses af alle i stedet for kun af en skærmlæser. Begge dele ramte
        ai-litteracy-fladen 10-09-2026, og `tests/ui/test_fladens_par.py`
        findes for at fange netop det.
   ========================================================================== */

/* ── 1. Fokus, spring-link og skjult etiket ───────────────────────────────── */
:root { --fokus: #0059B3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fokus: #6FB6FF;
}}
:root[data-theme="dark"] { --fokus: #6FB6FF; }

.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; }

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

/* ── 2. Kroppen ───────────────────────────────────────────────────────────── */
/* `.view` er `overflow:hidden` i grundlaget — rulningen hører i en egen
   beholder, ellers klippes indholdet uden at nogen kan nå det. */
.view { display: flex; flex-direction: column; min-height: 0; }

.linjer {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0 10px; border-bottom: 1px solid var(--line);
}
.linjer .spacer { flex: 1; }
.vaelger { display: flex; align-items: center; gap: 8px; font-size: 13px;
           cursor: pointer; min-height: 44px; }
.taeller { font-size: 12.5px; color: var(--txt-2); }

.udbakkeliste { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 28px; }
.mute { color: var(--txt-3); font-size: 13px; }

/* ── 3. Dokumentrækken ────────────────────────────────────────────────────── */
.dok {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr minmax(9rem, auto) auto auto;
  gap: 10px 14px; align-items: center;
  padding: 11px 12px; border-bottom: 1px solid var(--line);
}
.dok:hover { background: var(--acc-soft); }
.dok .nr { font-weight: 600; font-variant-numeric: tabular-nums; }
.dok .kunde { color: var(--txt); min-width: 0; overflow-wrap: anywhere; }
.dok .kunde small { display: block; color: var(--txt-3); font-size: 12px; }
/* ⛔ Tal højrestilles og får tabelcifre: beløb der ikke står under hinanden,
   kan ikke sammenlignes med øjet [UI-UX-STANDARD § 4]. */
.dok .beloeb { text-align: right; font-variant-numeric: tabular-nums; }
.dok .dato { color: var(--txt-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ── 4. Statuspillen — ORD OG IKON, aldrig farve alene ────────────────────── */
/* ⛔ UI-UX-STANDARD § 10: en farveblind læser skal kunne skelne dem, og et
   skærmbillede i sort/hvid skal stadig sige hvad der er sket. Derfor bærer
   hver pille både en FORM og et ORD. */
.pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line);
}
.pille .ic { width: 14px; height: 14px; }
.pille.klar   { background: var(--warn-bg); color: var(--warn); }
.pille.hentet { background: var(--acc-soft); color: var(--acc); }
.pille.sendt  { background: var(--pos-flade, var(--acc-soft)); color: var(--pos); }
.pille.ukendt { background: transparent; color: var(--txt-3); }

/* ── 5. Forbeholdsbåndet ──────────────────────────────────────────────────── */
/* ⛔ Advarselsfarve og ikke fejlfarve: et manglende spor er ikke et nedbrud,
   det er en OPLYSNING om at skærmen ikke kan svare på spørgsmålet. En rød
   ramme ville læses som »noget gik galt«, og så ville nogen lede efter en fejl
   der ikke findes. */
.forbehold {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; margin: 10px 0; border-radius: 10px;
  background: var(--warn-bg); border: 1px solid var(--warn);
}
.forbehold .ic { width: 17px; height: 17px; color: var(--warn); flex: 0 0 auto; margin-top: 1px; }
.forbehold p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--txt); }

.dbaand { max-width: 78ch; font-size: 12.5px; color: var(--txt-2); margin: 8px 0 4px; }

/* ── 6. Hent-knappen ──────────────────────────────────────────────────────── */
/* 44 px er berøringsmålet fra UI-UX-STANDARD § 12 — ikke et skøn. */
.hentknap {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--chrome); color: var(--txt);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.hentknap:hover { background: var(--acc-soft); }
.hentknap:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.hentknap[disabled] { opacity: .55; cursor: progress; }
.hentknap .ic { width: 15px; height: 15px; }

/* ── 7. Smalle skærme ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Rækken bliver to linjer frem for at klemme beløbet ud over kanten. */
  .dok { grid-template-columns: 1fr auto; row-gap: 6px; }
  .dok .dato, .dok .beloeb { text-align: left; }
}