/* ==========================================================================
   NERVE Finance — fladelag for OPSÆTNING.
   Reglerne: ../../docs/UI-UX-STANDARD.md · grundlaget: ../design/nerve-finance-apple.css
   Beslutningen bag fladen: ../../docs/adr/0013-railen-er-eet-fragment-i-fladelaget.md

   ⛔ ../design/*.css og *.js RETTES ALDRIG. De er ordret dem ADR-0005 hash-låste,
      og SH-18 skal kunne se at de ikke har flyttet sig. Alt hvad en flade har
      brug for ud over grundlaget, står i et fladelag som dette — additivt.

   § 1-4 er ORDRET de samme rettelser som `nummerserier.css`, `kladdetyper.css`,
   `kladde.css` og `debitor-kreditor.css` bærer, med de samme MÅLTE tal. De er
   gentaget og ikke importeret, af den grund der står i `kladde.css`s hoved: et
   fladelag står ved siden af sin flade, og skal de en dag deles, hører de i
   grundlaget og i en ny hash-linje i ADR-0005 — ikke i en femte fil ingen af
   fladerne ejer (UI-UX-STANDARD § 1).

   § 5-7 er opsætningsfladens egne: rammen uden sidebjælke, forklaringsbåndet og
   punktkortene — herunder det vigtigste af dem alle, kortet der SIGER at
   punktet ikke er bygget i stedet for at stå som et dødt link.
   ========================================================================== */

/* ── 1. Fokus ─────────────────────────────────────────────────────────────── */
: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; }

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

.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; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 2. Kontrast ──────────────────────────────────────────────────────────── */
/* Målt mod den reelle baggrund, ikke mod ren hvid (UI-UX-STANDARD § 3). */
:root { --txt-3: #6E6E73; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --txt-3: #A0A0A6; } }
:root[data-theme="dark"] { --txt-3: #A0A0A6; }

.lnk { color: var(--acc-tekst); }

/* ── 3. Bevægelse ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 4. Værktøjslinjen ────────────────────────────────────────────────────── */
.top .firma { min-width: 0; }
.top .spacer { flex: 1 1 auto; }
.enhedsvalg {
  max-width: 300px; height: 26px; padding: 0 8px;
  border: none; border-radius: 8px; background: var(--graa-flade);
  color: var(--txt); font-size: 14px; font-weight: 600; letter-spacing: -.02em;
  cursor: pointer;
}
.enhedsvalg:disabled { color: var(--txt-3); cursor: default; }

/* ── 5. Rammen — rail og arbejdsområde, ingen sidebjælke ──────────────────── */
/* Grundlagets `.app` har TRE spalter (rail · sidebjælke · arbejde). Denne flade
   har ingen sidebjælke: dens indhold ER menuen, og en sidebjælke med de samme
   punkter ville være den samme liste to gange. Overskrivningen står her og ikke
   i grundlaget, fordi den er denne flades valg. */
.opsapp { grid-template-columns: auto minmax(0, 1fr); }

/* ── 6. Forklaringsbåndet ─────────────────────────────────────────────────── */
/* »Ingen advarsler uden en handling« (§ 9): båndet siger hvorfor nogle kort ikke
   kan klikkes, og hvert af de kort siger selv hvad man gør indtil videre.
   Farven står aldrig alene — båndet har sit ikon og sin ordlyd. */
.opsbaand {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 13px; border-radius: 11px;
  background: var(--graa-flade); color: var(--txt-2);
  font-size: 12.5px; line-height: 1.5;
}
.opsbaand p { margin: 0; }
.opsbaand b { color: var(--txt); }
.opsbaand svg.ic { flex: none; margin-top: 1px; color: var(--txt-3); }

/* ── 7. Punkterne ─────────────────────────────────────────────────────────── */
/* Gitteret ruller i SIN egen beholder; siden ruller aldrig (§ 5). */
.opsgrupper {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: 18px;
}
.opsgrupper:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }

.opsgruppe { margin: 0 0 20px; }
.opsgruppe > h2 {
  margin: 0 0 3px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--txt-3);
}
.opsgruppe > .opsgruppesub { margin: 0 0 10px; font-size: 12.5px; color: var(--txt-3); }

.opskort-raekke {
  display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

/* Kortet. Det byggede punkt er et `<a>` — målet er et andet dokument, og et link
   der er bygget som en knap kan hverken åbnes i en ny fane, kopieres eller ses i
   browserens statuslinje inden man klikker. */
.opskort {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: 4px 11px;
  padding: 13px 14px; border-radius: 13px;
  background: var(--chrome); box-shadow: var(--skygge);
  color: inherit; text-decoration: none;
}
.opskort .opsikon { grid-row: 1 / span 2; color: var(--txt-2); }
.opskort .opsikon svg { width: 21px; height: 21px; }
.opskort .opstitel { font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.opskort .opstekst { grid-column: 2 / span 2; font-size: 12.5px; line-height: 1.5; color: var(--txt-2); }
.opskort .opsmark { align-self: center; color: var(--txt-3); }
.opskort .opsmark svg { width: 15px; height: 15px; }

a.opskort:hover { background: var(--acc-soft); }
a.opskort:hover .opsikon,
a.opskort:hover .opsmark { color: var(--acc); }

/* ⛔ DET UBYGGEDE PUNKT. Et punkt der ikke er bygget, skal SIGE det — ikke være
   et dødt link. Kortet er derfor en `<div>` og ikke et `<a>`: der er intet at
   klikke på, ingen markør der lover en side, og ingen tabulatorstop der fører
   ingen steder hen. Mærkningen står i FIRE lag, og ikke i farve alene (§ 10):
   den stiplede kant, pillen med ikon + ordet, den dæmpede skrift, og linjen der
   siger hvad der findes bag punktet i dag. */
.opskort.ikke {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--line);
  padding: 12px 13px;
}
.opskort.ikke .opsikon { color: var(--txt-3); opacity: .75; }
.opskort.ikke .opstitel { color: var(--txt-2); }

.opspille {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 11px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.opspille svg { width: 13px; height: 13px; }
.opspille.klar   { background: var(--acc-soft); color: var(--acc-tekst); }
.opspille.mangler { background: var(--graa-flade); color: var(--txt-2); }

/* Bagved-linjen: hvor oplysningen ligger i dag, og hvordan den sættes op indtil
   fladen findes. Uden den er »ikke bygget« en blindgyde. */
.opsbagved {
  grid-column: 2 / span 2;
  margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; line-height: 1.5; color: var(--txt-3);
}
.opsbagved code {
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 1px 4px; border-radius: 5px; background: var(--graa-flade); color: var(--txt-2);
}

/* Berøringsmål (§ 10). Kortene er langt over 44 px; det er kun temaknappen der
   skal have hjælp. */
@media (pointer: coarse) {
  .iconbtn { min-width: 44px; min-height: 44px; }
}