/* Opus-designets tokens (design/prototyper/opus/, faelles blok) — kun det
   produktet bruger. Ingen skrifttyper udefra: CSP'en har ingen font-src.
   sm-stilloeft 11-10-2026: hierarki, tabeller, statuskomponenten (D3/D4,
   flyttet fra design/prototyper/opus/bruger/breve.html) og en feltkant med
   maalt kontrast. Kontrasterne staar i LEVERANCE-stilloeft.md. */
:root{
  --papir:#F5F7FA; --flade:#FFFFFF; --flade2:#EDF0F4; --kant:#D5DBE3; --kant2:#B9C2CE;
  /* Komponentkanten (WCAG 1.4.11): 4,05:1 mod --flade. --kant/--kant2 er pynt. */
  --kant-felt:#767F8B;
  --blaek:#131C28; --tekst2:#4A5563; --tekst3:#646E7B;
  --segl:#1D4F91; --segl-flade:#E6EDF7; --segl-tekst:#173F73; --paa-segl:#FFFFFF;
  --groen:#1E7A4C; --groen-flade:#E3F1E9;
  --roed:#B3261E; --roed-flade:#F9E3E1;
  --skyg:0 1px 2px rgba(19,28,40,.06),0 4px 14px rgba(19,28,40,.05);
  --hatch:repeating-linear-gradient(135deg,transparent 0 5px,rgba(138,148,161,.28) 5px 6px);
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --papir:#0F1419; --flade:#161C24; --flade2:#1E262F; --kant:#2C3642; --kant2:#3B4756;
  --kant-felt:#7E8B9B;
  --blaek:#E8ECF1; --tekst2:#AEB8C4; --tekst3:#8A95A2;
  --segl:#7FA8E3; --segl-flade:#1A2A42; --segl-tekst:#A9C6EE; --paa-segl:#0F1419;
  --groen:#5DC48D; --groen-flade:#15301F;
  --roed:#EF7B73; --roed-flade:#3A1917;
  --skyg:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --hatch:repeating-linear-gradient(135deg,transparent 0 5px,rgba(124,135,148,.35) 5px 6px);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papir);color:var(--blaek);font:16px/1.55 var(--sans)}
h1{margin:0;font-weight:600;font-family:var(--serif);font-size:clamp(22px,5vw,28px);line-height:1.2;text-wrap:balance}
h2{margin:0;font-weight:600;font-size:17px;line-height:1.3;text-wrap:balance}
h3{margin:0;font-weight:600;font-size:15px;line-height:1.3}
p{margin:0}
a{color:var(--segl-tekst);text-underline-offset:2px}
ul{margin:0;padding-left:20px}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{border:1px solid var(--kant-felt);background:var(--flade);border-radius:6px;padding:8px 10px}
:focus-visible{outline:2px solid var(--segl);outline-offset:2px}
code{font-family:var(--mono);font-size:.9em;background:var(--flade2);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
pre{margin:0;font:13px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--flade2);border-radius:6px;padding:10px 12px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--kant);overflow-wrap:anywhere}
th{font-weight:600;color:var(--tekst2)}
thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tekst3);background:var(--flade2)}
dl{margin:0;display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:6px 14px}
dt{color:var(--tekst3)}
dd{margin:0;overflow-wrap:anywhere}
details{border:1px solid var(--kant);border-radius:6px;padding:6px 10px}
summary{cursor:pointer;font-size:13px;color:var(--tekst2);font-weight:500}
details[open]>summary{margin-bottom:6px}
.top{background:var(--papir);border-bottom:1px solid var(--kant)}
.top-i{max-width:640px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.maerke{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--blaek)}
.maerke svg{width:22px;height:22px;flex:none;color:var(--segl)}
.knapper{margin-left:auto}
.lille-knap{border:1px solid var(--kant);background:var(--flade);color:var(--tekst2);border-radius:6px;padding:4px 9px;font-size:13px;cursor:pointer}
.side{max-width:640px;margin:0 auto;padding:24px 16px 64px}
.portal{background:var(--flade);border:1px solid var(--kant);border-radius:14px;box-shadow:var(--skyg);padding:22px 20px 24px;display:grid;gap:14px;min-width:0}
.portal>section{border-top:1px solid var(--kant);padding-top:14px;display:grid;gap:8px;min-width:0}
.tekst{display:grid;gap:10px;color:var(--tekst2);overflow-wrap:anywhere}
.stak{display:grid;gap:12px}
.felt{display:grid;gap:4px}
.felt label{font-size:13px;color:var(--tekst2);font-weight:500}
.felt input,.felt textarea{border:1px solid var(--kant-felt);background:var(--flade);border-radius:6px;padding:10px;width:100%}
.felt input{font-size:20px;letter-spacing:.2em;max-width:12em}
.felt textarea{min-height:120px;resize:vertical}
.knap{border:0;background:var(--segl);color:var(--paa-segl);border-radius:6px;padding:11px 16px;font-weight:600;cursor:pointer;justify-self:start}
.hvem{font-size:14px;border-left:2px dashed var(--kant2);padding:2px 0 2px 10px;color:var(--tekst2)}
/* Svaret paa «gik brevet ud?» — ordet foerst (design D4). Fire udfald, fire
   former: fyldt (ude), hul kontur (aldrig ude), skraveret (ved ikke, D3),
   flad (undervejs) — og en stribet roed flade for «ude, ikke som lovet».
   Tekstfarven paa den stribede er --paa-segl, ikke prototypens #fff: hvid
   paa moerk-temaets --roed er 2,71:1 (maalt). */
.svar{display:inline-grid;border-radius:6px;overflow:hidden;border:1px solid var(--kant);min-width:0;max-width:100%}
.svar .o{font-weight:700;letter-spacing:.04em;padding:4px 10px;font-size:13px}
.svar.ude .o{background:var(--groen);color:var(--paa-segl)}
.svar.aldrig_ude .o{background:var(--flade);color:var(--segl-tekst);box-shadow:inset 0 0 0 2px var(--segl)}
.svar.uafklaret .o{background:var(--hatch),var(--flade);color:var(--blaek)}
.svar.undervejs .o{background:var(--flade2);color:var(--tekst2)}
.svar.ude_ubeskyttet .o{background:repeating-linear-gradient(135deg,var(--roed) 0 8px,color-mix(in srgb,var(--roed) 85%,#000) 8px 16px);color:var(--paa-segl)}
.breve{list-style:none;padding:0;display:grid;gap:10px}
.brevlinje{border:1px solid var(--kant);border-radius:6px;padding:10px 12px;display:grid;gap:6px;min-width:0}
.hvornaar{font-family:var(--mono);font-size:12px;color:var(--tekst3)}
.saetning{color:var(--tekst2);font-size:14px}
/* Kvitteringens forbehold: kildens ordlyd, brudt — ikke rullet (1.4.10). */
.forbehold{white-space:pre-wrap;overflow-wrap:anywhere;border-left:3px solid var(--kant-felt);padding:2px 0 2px 12px;color:var(--tekst2);font-size:14px}
@media (max-width:420px){dl{grid-template-columns:minmax(0,1fr);gap:2px}dd+dt{margin-top:8px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* sm-formvaern 27-10: honningfeltet — uden for skaermen, ikke display:none
   (nogle robotter springer skjulte felter over, men ikke flyttede). */
.honning{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}