/* ══════════════════════════════════════════════════════════════════════════
   Home AI · stil.css — appens skal.
   Nordisk professionelt: lys eg, beton, glas. Rene flader, bløde skygger.
   Ingen eksterne fonte, ingen CDN. Virker offline på LAN.

   TIL DE ANDRE FLADE-AGENTER:
   Brug klasserne herunder i stedet for at finde på nye. Så ser huset ens ud:
     .kort .kort-hoved .kort-krop      — flade med ramme og blød skygge
     .knap .knap.primaer .knap.stille .knap.fare .knap.lille
     .felt  input/textarea/select      — formularfelter
     .rk .rk-mellem .kolonne .spred    — layout
     .maerkat .maerkat.ok/.advar/.fare — små statusmærker
     .tabel                            — datatabel (scroller selv vandret)
     .henter-blok .snurre .skelet      — HENTER (den fjerde tilstand)
     .tom-blok .fejl-blok              — de tre former for tomhed + fejl
     .diskret .stor-tal .stille-tekst  — typografi

   FARVEREGEL: skriv ALDRIG en hex-farve i en regel. Brug variablerne herunder.
   Gør du det, holder Lys, Mørk og Nat op med at virke på din fane.
   Skal du bruge tekst oven på en accent-flade, hedder den var(--paa-accent).

   TEKST PÅ EN TONET FLADE — brug tekstrollen, ikke grundfarven:
     flade var(--aktiv-blod)    -> skrift var(--aktiv-tekst)
     flade var(--advar-blod)    -> skrift var(--advar-tekst)
     flade var(--kritisk-blod)  -> skrift var(--kritisk-tekst)
     flade var(--accent-blod)   -> skrift var(--accent-tekst)
   --aktiv/--advar/--kritisk/--accent er STREG- og FYLDfarver. Bruger du dem
   som skrift på deres egen bløde flade, lander du på 3,1-4,4:1 og teksten kan
   ikke læses — værst i Nat. Rammer og ikoner må gerne blive på grundfarven.
   Undtagelse: sidebjælken er mørk i ALLE tre temaer — dér bruger du
   var(--accent-lys), ikke var(--accent-tekst).
   Alle tal er målt i browseren på tværs af de 13 faner i alle tre temaer.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Skrift ────────────────────────────────────────────────────────────
   Geist — tegnet som aaben pendant til Apples SF. OFL-licens, gratis til
   kommerciel brug. Ligger LOKALT i ui/skrift/, saa fladen henter intet
   udefra og virker uden internet (B9). ?v=1 giver den et aars cache via
   Caddys regel for stemplede filer — skift tallet, hvis filerne skiftes. */
@font-face{font-family:'Geist';font-weight:400;font-style:normal;font-display:swap;
  src:url("skrift/geist-400.woff2?v=1") format("woff2")}
@font-face{font-family:'Geist';font-weight:600;font-style:normal;font-display:swap;
  src:url("skrift/geist-600.woff2?v=1") format("woff2")}
@font-face{font-family:'Geist';font-weight:700;font-style:normal;font-display:swap;
  src:url("skrift/geist-700.woff2?v=1") format("woff2")}

/* ── Farver ────────────────────────────────────────────────────────────
   STAAL (15/8): ejerens beslutning — Apples farver. Soelv #f5f5f7, grafit
   #1d1d1f, Apples sorte til Moerk, og EEN accent: Apples blaa. Messingen
   er pensioneret i fladen (den lever videre i hovedkvarterets tegning til
   etape 2). Nat bestaar som husets eget: daempet, varm tekst, nedkoelet blaa.

   Kontrasttallene herunder er BEREGNEDE (WCAG-formlen), ikke maalt i
   browseren endnu — de maales paa tvaers af fanerne, naar etape 1 er ude.
   Roller og regler er UAENDREDE: tekst paa tonet flade bruger *-tekst,
   sidebjaelken er moerk i alle tre temaer, --paa-accent er tekst paa accent. */
:root{
  /* Lys — soelv og grafit, dagens arbejde */
  --bg:#f5f5f7;
  --bg-dyb:#ebebef;
  --flade:#fff;
  --flade2:#fafafc;
  --tekst:#1d1d1f;
  --tekst2:#515157;
  --tekst3:#6b6b72;         /* beregnet 4,7:1 paa --bg */
  --linje:#d9d9de;
  --accent:#0071e3;
  --accent-lys:#4da3ff;     /* sidebjaelkens accent — laeselig paa grafit */
  --accent-blod:#e9f2fd;
  --aktiv:#1d7a3e;
  --aktiv-blod:#e8f3ec;
  --advar:#9a6200;
  --advar-blod:#f7efdc;
  --kritisk:#c22b1d;
  --kritisk-blod:#faebe9;
  --accent-tekst:#0057ad;   /* beregnet 5,6:1 paa --accent-blod */
  --aktiv-tekst:#166332;    /* beregnet 6,3:1 paa --aktiv-blod */
  --advar-tekst:#7a4e07;    /* beregnet 6,4:1 paa --advar-blod */
  --kritisk-tekst:#ad2317;  /* beregnet 5,4:1 paa --kritisk-blod */
  --sb1:#1d1d1f;            /* sidebjaelke: grafit */
  --sb2:#242427;
  --sb-tekst:#e6e6ea;
  --sb-tekst2:#9d9da4;
  --sb-linje:#333338;
  --paa-accent:#ffffff;     /* hvid paa Apples blaa: beregnet 4,6:1 */
  --primaer-bg:#1d1d1f;
  --primaer-bg-hov:#000000;
  --primaer-tekst:#f5f5f7;
  --sb-aktiv:rgba(41,151,255,.16);
  --sb-aktiv-tekst:#ffffff;
  --overlay:rgba(10,10,14,.45);
  --tone:rgba(110,110,120,.13);
  --skygge:0 18px 50px rgba(10,10,20,.10);
  --skygge-let:0 2px 10px rgba(10,10,20,.06);
  --runding:14px;
  --runding-lille:10px;
  --sb-bredde:246px;
  --top-hoejde:58px;
  color-scheme:light;
}

:root[data-tema="moerk"]{
  /* Moerk — Apples sorte. Rene graa uden varme. */
  --bg:#000000;
  --bg-dyb:#0a0a0c;
  --flade:#141416;
  --flade2:#1b1b1e;
  --tekst:#f5f5f7;
  --tekst2:#a6a6ac;
  --tekst3:#98989f;         /* beregnet 5,3:1 paa --flade */
  --linje:#2c2c2e;
  --accent:#2997ff;
  --accent-lys:#6cb6ff;
  --accent-blod:#0d2138;
  --aktiv:#4fc06f;
  --aktiv-blod:#0f2316;
  --advar:#e0a33b;
  --advar-blod:#271f0c;
  --kritisk:#ff6a5e;
  --kritisk-blod:#2c1311;
  --accent-tekst:#6cb6ff;
  --aktiv-tekst:#5fd080;
  --advar-tekst:#e6ad4f;
  --kritisk-tekst:#ff8579;
  --sb1:#0a0a0b;
  --sb2:#121214;
  --sb-tekst:#e3e3e8;
  --sb-tekst2:#96969d;
  --sb-linje:#242427;
  --paa-accent:#04182b;     /* accenten er LYS i moerk — teksten paa den er moerk */
  --primaer-bg:#2997ff;
  --primaer-bg-hov:#6cb6ff;
  --primaer-tekst:#04182b;
  --sb-aktiv:rgba(41,151,255,.20);
  --sb-aktiv-tekst:#ffffff;
  --overlay:rgba(0,0,0,.60);
  --tone:rgba(245,245,247,.09);
  --skygge:0 18px 50px rgba(0,0,0,.50);
  --skygge-let:0 2px 10px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* Nat: til moerkt vaerelse. Lavere lysstyrke, varm tekst — men accenten er
   nu KOELET NED i stedet for varmet op: blaat staal ved lav styrke. Intet
   skarpt hvidt nogen steder, heller ikke i valgt fane. */
:root[data-tema="nat"]{
  --bg:#050507;
  --bg-dyb:#09090c;
  --flade:#0c0c10;
  --flade2:#121217;
  --tekst:#b9b5ad;
  --tekst2:#8d897f;
  --tekst3:#86827a;         /* beregnet 4,9:1 paa --flade */
  --linje:#1d1d22;
  --accent:#5c7f9e;
  --accent-lys:#7d9cb8;
  --accent-blod:#10161d;
  --aktiv:#5d8a68;
  --aktiv-blod:#0d160e;
  --advar:#96803f;
  --advar-blod:#181307;
  --kritisk:#b25a4a;
  --kritisk-blod:#1d100d;
  --accent-tekst:#82a3c0;   /* beregnet 5,9:1 paa --accent-blod */
  --aktiv-tekst:#71a07e;    /* beregnet 5,6:1 paa --aktiv-blod */
  --advar-tekst:#ac934c;    /* beregnet 5,8:1 paa --advar-blod */
  --kritisk-tekst:#c97663;  /* beregnet 5,5:1 paa --kritisk-blod */
  --sb1:#030304;
  --sb2:#09090b;
  --sb-tekst:#a8a49a;
  --sb-tekst2:#7b776d;      /* beregnet 5,0:1 mod --sb1 */
  --sb-linje:#17171b;
  --paa-accent:#0a0f14;
  --primaer-bg:#5c7f9e;
  --primaer-bg-hov:#7d9cb8;
  --primaer-tekst:#0a0f14;
  --sb-aktiv:rgba(92,127,158,.20);
  --sb-aktiv-tekst:#c5c1b8;          /* aldrig skarpt hvidt i Nat */
  --overlay:rgba(0,0,0,.70);
  --tone:rgba(185,181,173,.08);
  --skygge:0 18px 50px rgba(0,0,0,.65);
  --skygge-let:0 2px 10px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ── Grundlag ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow-x:hidden;                       /* aldrig vandret scroll på mobil */
  overflow-wrap:break-word;                /* lange id'er/URL'er sprænger ikke 375px */
  background:var(--bg);
  color:var(--tekst);
  font-family:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
body.menu-laast{overflow:hidden}           /* baggrunden må ikke rulle bag menuen */
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0;font-weight:650;line-height:1.25}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,video,canvas{max-width:100%;height:auto}
svg{max-width:100%}
::selection{background:var(--accent-lys);color:var(--paa-accent)}
/* Ingen border-radius her: fokusringen skal følge elementets EGEN form,
   ellers bliver runde mærkater og avatarer firkantede mens de har fokus. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Fælles byggeklodser ───────────────────────────────────────────────── */
.kort{
  background:var(--flade);border:1px solid var(--linje);
  border-radius:var(--runding);box-shadow:var(--skygge-let);
}
.kort-hoved{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--linje);
  font-weight:650;font-size:14px;
}
.kort-krop{padding:18px}

.knap{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 16px;                    /* touch-venligt */
  border:1px solid var(--linje);border-radius:var(--runding-lille);
  background:var(--flade);color:var(--tekst);
  font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:background .12s,border-color .12s,transform .06s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;                            /* ingen dobbelttryk-zoom */
}
.knap:hover{border-color:var(--accent)}
.knap:active{transform:translateY(1px)}
.knap[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.knap.primaer{background:var(--primaer-bg);color:var(--primaer-tekst);border-color:var(--primaer-bg)}
.knap.primaer:hover{background:var(--primaer-bg-hov);border-color:var(--primaer-bg-hov)}
.knap.stille{background:var(--flade);color:var(--tekst2)}
.knap.fare{background:var(--kritisk-blod);border-color:var(--kritisk);color:var(--kritisk)}
.knap.lille{min-height:34px;padding:6px 11px;font-size:13px}
.knap.bred{width:100%}
/* Knap der arbejder: sæt aria-busy="true", så får den selv en snurrer. */
.knap[aria-busy="true"]{cursor:progress}
.knap[aria-busy="true"]::before{
  content:'';width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;opacity:.75;
  animation:snurr .8s linear infinite;
}

.ikonknap{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;                 /* 44px = Apples mindstemål */
  border:0;border-radius:11px;background:transparent;
  color:inherit;font-size:19px;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.ikonknap:hover{background:var(--tone)}

label{display:block;font-size:12px;color:var(--tekst2);margin:12px 0 5px}
input,textarea,select,.felt{
  width:100%;border:1px solid var(--linje);border-radius:var(--runding-lille);
  padding:11px 13px;font:inherit;font-size:15px;
  background:var(--flade2);color:var(--tekst);
}
input[type=checkbox],input[type=radio]{
  width:auto;min-width:22px;min-height:22px;flex:0 0 auto;accent-color:var(--accent);
}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--accent)}
textarea{resize:vertical;line-height:1.5}
::placeholder{color:var(--tekst3);opacity:1}

.rk{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rk-mellem{display:flex;align-items:center;gap:10px}
.kolonne{display:flex;flex-direction:column;gap:12px}
.spred{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vokser{flex:1 1 auto;min-width:0}

.maerkat{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;
  background:var(--accent-blod);color:var(--accent-tekst);
  border:1px solid transparent;
  font-size:12px;font-weight:650;white-space:nowrap;
}
.maerkat.ok{background:var(--aktiv-blod);color:var(--aktiv-tekst)}
.maerkat.advar{background:var(--advar-blod);color:var(--advar-tekst)}
.maerkat.fare{background:var(--kritisk-blod);color:var(--kritisk-tekst)}
.maerkat.stille{background:transparent;color:var(--tekst3);border-color:var(--linje)}

.diskret{color:var(--tekst2);font-size:13px}
.stille-tekst{color:var(--tekst3);font-size:12px}
.stor-tal{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
pre{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--flade2);
  border:1px solid var(--linje);border-radius:var(--runding-lille);padding:12px;margin:0}

.tabel-svoeb{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel{width:100%;border-collapse:collapse;font-size:14px}
.tabel th,.tabel td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--linje);
  white-space:nowrap}
.tabel th{font-size:12px;font-weight:650;color:var(--tekst2);text-transform:uppercase;
  letter-spacing:.04em}
.tabel tr:last-child td{border-bottom:0}

/* ── De fire tilstande: HENTER · TOM · INGEN ADGANG · KAN IKKE NÅS ─────────
   En flade må aldrig bare være blank. Ejeren skal kunne se forskel på
   "jeg arbejder", "der er ikke noget", "du må ikke se det" og "jeg ved det
   ikke, for kilden svarer ikke". Brug HAI.visHenter / HAI.visTomhed.
   ───────────────────────────────────────────────────────────────────────── */
.henter-blok{
  display:flex;align-items:center;gap:12px;
  padding:22px;border:1px solid var(--linje);border-radius:var(--runding);
  background:var(--flade2);color:var(--tekst2);font-size:14px;
}
.snurre{
  width:18px;height:18px;flex:0 0 18px;border-radius:50%;
  border:2px solid var(--linje);border-top-color:var(--accent);
  animation:snurr .8s linear infinite;
}
@keyframes snurr{to{transform:rotate(360deg)}}
/* Pladsholder-streger mens rigtige tal er på vej. Bredden sætter du selv. */
.skelet{
  height:12px;border-radius:6px;background:var(--linje);
  animation:skelet-aande 1.5s ease-in-out infinite;
}
.skelet + .skelet{margin-top:8px}
@keyframes skelet-aande{0%,100%{opacity:.5}50%{opacity:1}}

.tom-blok{
  padding:34px 22px;text-align:center;color:var(--tekst2);
  border:1px dashed var(--linje);border-radius:var(--runding);background:var(--flade2);
}
.tom-blok .tom-ikon{font-size:26px;line-height:1;margin-bottom:10px;color:var(--tekst3)}
.tom-blok .tom-titel{font-weight:650;color:var(--tekst);margin-bottom:5px}
.tom-blok .tom-nu{font-size:13px;color:var(--tekst3);margin-top:8px}
/* Du må ikke se det: hel ramme, rav. Rammen beholder --advar (formen kendes
   på farven); skriften bruger tekstrollen, ellers er den ikke læselig. */
.tom-blok.ingen_adgang{border-style:solid;border-color:var(--advar);background:var(--advar-blod)}
.tom-blok.ingen_adgang .tom-ikon,
.tom-blok.ingen_adgang .tom-titel{color:var(--advar-tekst)}
.tom-blok.ingen_adgang .tom-nu{color:var(--tekst2)}
/* Kilden svarer ikke: hel ramme, rød. Det er IKKE det samme som "tom". */
.tom-blok.kan_ikke_naas{border-style:solid;border-color:var(--kritisk);background:var(--kritisk-blod)}
.tom-blok.kan_ikke_naas .tom-ikon,
.tom-blok.kan_ikke_naas .tom-titel{color:var(--kritisk-tekst)}
.tom-blok.kan_ikke_naas .tom-nu{color:var(--tekst2)}

.fejl-blok{
  padding:16px 18px;border:1px solid var(--kritisk);border-radius:var(--runding);
  background:var(--kritisk-blod);color:var(--tekst);
}
.fejl-blok .fejl-titel{font-weight:650;color:var(--kritisk-tekst);margin-bottom:5px}
.fejl-blok .fejl-titel::before{content:'\26A0';margin-right:8px}
.fejl-blok .fejl-nu{font-size:13.5px;margin-top:7px}
/* Sporlinjen er den ejeren skal LÆSE OP når han melder en fejl (kode, maskine,
   request-id). Den lå på 3,2:1 i alle tre temaer med --tekst3 på den røde
   flade — nu --tekst2, målt 5,3-6,5:1. Den må ikke være det svageste på siden. */
.fejl-blok .fejl-spor{font-size:11.5px;color:var(--tekst2);margin-top:10px;
  word-break:break-all;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ══════════════════════════════════════════════════════════════════════════
   Login
   ═════════════════════════════════════════════════════════════════════════ */
.loginflade{
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom))
          calc(24px + env(safe-area-inset-left));
  padding-top:calc(24px + env(safe-area-inset-top));
  overflow-y:auto;                        /* lav skærm på tværs: intet klippes af */
  background:radial-gradient(1200px 700px at 50% -10%,var(--bg-dyb),var(--bg));
}
.loginkort{
  width:100%;max-width:372px;margin:auto;padding:34px 30px 26px;
  border-radius:18px;box-shadow:var(--skygge);
}
.logo{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.logo .mk{
  width:34px;height:34px;border-radius:10px;flex:0 0 34px;
  background:linear-gradient(135deg,var(--accent-lys),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--paa-accent);font-size:16px;
}
.logo .nv{font-size:17px;font-weight:800;letter-spacing:-.01em}
/* "AI" i navnetrækket er 17px — for lille til at tælle som stor tekst, så
   --accent alene gav 3,1:1 på det lyse kort. */
.logo .nv span{color:var(--accent-tekst)}
.loginkort h1{font-size:15px;font-weight:600;margin:16px 0 2px}
.loginkort p.sub{margin:0 0 18px;color:var(--tekst2);font-size:13px}
.afkryds{display:flex;align-items:center;gap:10px;margin-top:10px;min-height:44px;
  font-size:13px;color:var(--tekst2);cursor:pointer}
.loginkort .knap{width:100%;margin-top:18px}
.loginkort .knap.stille{margin-top:9px}
.fejl{color:var(--kritisk-tekst);font-size:12.5px;margin-top:12px;min-height:16px;line-height:1.45}
/* Samme plads, men dæmpet: en oplysning ("Du er logget ud.") er ikke en fejl
   og må ikke stå med alarmfarve. Se visLogin(besked, rolig) i ui/app.js. */
.fejl.rolig{color:var(--tekst2)}
.ok{
  margin-top:14px;padding:11px 13px;background:var(--aktiv-blod);
  border:1px solid var(--aktiv);border-radius:var(--runding-lille);
  font-size:13px;color:var(--aktiv-tekst);display:none;line-height:1.45;
}
.ok.vis{display:block}
.fod{margin-top:18px;font-size:11.5px;color:var(--tekst3);line-height:1.55}

/* ══════════════════════════════════════════════════════════════════════════
   Appens skal
   ═════════════════════════════════════════════════════════════════════════ */
.app{display:flex;min-height:100vh;min-height:100dvh}

.sidebjaelke{
  width:var(--sb-bredde);flex:0 0 var(--sb-bredde);
  display:flex;flex-direction:column;
  background:var(--sb1);color:var(--sb-tekst);
  border-right:1px solid var(--sb-linje);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  position:sticky;top:0;height:100vh;height:100dvh;z-index:40;
}
.sb-top{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:14px 12px 10px}
.sidebjaelke .logo{margin-bottom:0;min-width:0}
.sidebjaelke .logo .nv{color:var(--sb-tekst);font-size:16px}
/* Sidebjælken er MØRK i alle tre temaer. --accent-tekst er tunet til lyse
   kort og bliver 2,9:1 her i Lys — derfor den lyse accent på beton. 7,9:1. */
.sidebjaelke .logo .nv span{color:var(--accent-lys)}
.sidebjaelke .ikonknap{color:var(--sb-tekst2)}
.sidebjaelke .ikonknap:hover{background:rgba(255,255,255,.08);color:var(--sb-tekst)}

.fanenav{flex:1 1 auto;overflow-y:auto;padding:4px 10px 14px;-webkit-overflow-scrolling:touch}
.fane-gruppe{
  padding:16px 8px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sb-tekst2);
}
.fane-knap{
  display:flex;align-items:center;gap:11px;width:100%;
  min-height:44px;padding:10px 11px;margin-bottom:2px;
  border:0;border-radius:10px;background:transparent;
  color:var(--sb-tekst2);font:inherit;font-size:14px;font-weight:550;
  text-align:left;cursor:pointer;transition:background .12s,color .12s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.fane-knap:hover{background:rgba(255,255,255,.06);color:var(--sb-tekst)}
.fane-knap[aria-current="page"]{
  background:var(--sb-aktiv);color:var(--sb-aktiv-tekst);font-weight:650;
  box-shadow:inset 2px 0 0 var(--accent);
}
.fane-ikon{
  width:22px;flex:0 0 22px;text-align:center;font-size:16px;line-height:1;opacity:.95;
}
.fane-navn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fane-tal{
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;
  background:var(--accent);color:var(--paa-accent);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}

.sb-bund{border-top:1px solid var(--sb-linje);padding:12px 12px 14px}
.tema-vaelger{display:flex;gap:5px;margin-bottom:12px}
.tema-knap{
  flex:1 1 0;min-width:0;min-height:40px;
  border:1px solid var(--sb-linje);border-radius:9px;
  background:transparent;color:var(--sb-tekst2);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.tema-knap:hover{color:var(--sb-tekst);border-color:var(--accent)}
.tema-knap[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--paa-accent)}
.bruger-rk{display:flex;align-items:center;gap:10px}
.avatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-lys),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--paa-accent);font-size:14px;
}
.bruger-tekst{flex:1 1 auto;min-width:0}
.bruger-navn{font-size:13.5px;font-weight:650;color:var(--sb-tekst);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bruger-rolle{font-size:11.5px;color:var(--sb-tekst2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hoved{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:100dvh}
.topbjaelke{
  position:sticky;top:0;z-index:30;flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  height:calc(var(--top-hoejde) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 16px 0;
  background:var(--bg);                                   /* reserve hvis color-mix mangler */
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--linje);
}
.fanetitel{flex:1 1 auto;min-width:0;font-size:16px;font-weight:650;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-hoejre{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}

.flade{
  flex:1 1 auto;min-width:0;min-height:0;
  padding:20px 22px calc(24px + env(safe-area-inset-bottom));
}
.flade.uden-luft{padding:0}                 /* chat-fanen fylder selv hele fladen */

.skygge{
  position:fixed;inset:0;z-index:35;
  background:var(--overlay);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toaster{
  position:fixed;z-index:80;left:50%;transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:8px;align-items:center;
  /* 100% (ikke 100vw) — vw tæller rullebjælken med og skubber toasten skæv. */
  width:min(440px,calc(100% - 24px));pointer-events:none;
}
.toast{
  pointer-events:auto;width:100%;
  padding:12px 15px;border-radius:12px;
  background:var(--flade);border:1px solid var(--linje);
  box-shadow:var(--skygge);
  font-size:14px;line-height:1.45;color:var(--tekst);cursor:pointer;
  /* HAI.toastFejl lægger "hvad gør jeg nu" på anden linje med \n.
     Uden pre-line blev de to sætninger klistret sammen til én. */
  white-space:pre-line;overflow-wrap:anywhere;
  animation:toast-ind .18s ease-out;
}
.toast.ok{border-color:var(--aktiv);background:var(--aktiv-blod);color:var(--aktiv-tekst)}
.toast.advarsel{border-color:var(--advar);background:var(--advar-blod);color:var(--advar-tekst)}
.toast.fejl{border-color:var(--kritisk);background:var(--kritisk-blod);color:var(--kritisk-tekst)}
.toast.ud{animation:toast-ud .18s ease-in forwards}
@keyframes toast-ind{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes toast-ud{to{opacity:0;transform:translateY(8px)}}

/* ═════════════════════════════════════════════════════════════════════════
   ØKONOMI — hvorfor der IKKE står regler her
   Her lå 205 linjer for .oek-kort, .oek-opstilling, .oek-post, .oek-tal,
   .oek-indtaegt, .oek-udgift, .oek-sum, .oek-resultat og .oek-negativ.
   Målt på hele 07-system udsendes de ni klassenavne NUL gange — hverken af
   faner.js, app.js, hus.js, chat.js eller index.html. Økonomi-fanen tegner sig
   selv med et andet ordforråd (.oek-noegle .oek-tab .oek-h .oek-ind .oek-gruppe
   .oek-knapper .oek-form .oek-kategorier), som faner.js selv lægger ind i en
   <style>-blok. Reglerne her ramte altså ingenting. De så bare ud som om fanens
   udseende kom herfra, og det er den slags kode der får den næste til at rette
   det forkerte sted.
   Skal der laps på Økonomi-fanen, gøres det som TEMA-LAP nedenfor: på de klasser
   JS'en faktisk udsender. Ellers rettes de i faner.js, hvor de bliver til.
   ═════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   TEMA-LAP — hardkodede lysfarver i chat.js / hus.js / faner.js
   Rettelserne herunder hører hjemme i de tre filer, men de ejes af andre
   agenter. Indtil de er rettet dér, retter vi dem her, så Mørk og Nat ikke
   viser hvid tekst på hvid baggrund. Bliver modulet rettet, gør reglen her
   ingen skade: den sætter den samme rigtige farve.
   ═════════════════════════════════════════════════════════════════════════ */

/* Den tunge knap: begge moduler skriver color:#fff oven på var(--tekst),
   som ER lys i Mørk og Nat. Resultat: usynlig tekst. */
:root[data-tema="moerk"] .f-knap.primaer,
:root[data-tema="nat"]   .f-knap.primaer,
:root[data-tema="moerk"] .hus-send,
:root[data-tema="nat"]   .hus-send{
  background:var(--accent);color:var(--primaer-tekst);border-color:var(--accent);
}

/* Husets chatbobler og skrivefelt var låst til lyse flader. */
:root[data-tema="moerk"] .hus-besked.mig,
:root[data-tema="nat"]   .hus-besked.mig{background:var(--accent-blod);color:var(--tekst)}
:root[data-tema="moerk"] .hus-besked.dem,
:root[data-tema="nat"]   .hus-besked.dem{background:var(--flade2);border-color:var(--linje);color:var(--tekst)}
:root[data-tema="moerk"] .hus-besked.fejl,
:root[data-tema="nat"]   .hus-besked.fejl{background:var(--kritisk-blod);border-color:var(--kritisk);color:var(--tekst)}
:root[data-tema="moerk"] .hus-skriv textarea,
:root[data-tema="nat"]   .hus-skriv textarea{background:var(--flade2);color:var(--tekst)}

/* "Sæt dem i gang"-feltet og dets svar. Samme fejl som textarea'et ovenfor:
   hus.js låser baggrunden til #fbfaf8 / #f7f5f1 og lader tekstfarven følge
   temaet. I Mørk giver det lys tekst på lys flade (målt ~1,1:1), så ejeren
   hverken kan se sin egen sætning eller den fejlbesked knappen giver ham.
   Statusboksen ER beskeden — den skal virke i alle tre temaer. */
:root[data-tema="moerk"] .hus-start-felt,
:root[data-tema="nat"]   .hus-start-felt{background:var(--flade2);color:var(--tekst);border-color:var(--linje)}
:root[data-tema="moerk"] .hus-start-status,
:root[data-tema="nat"]   .hus-start-status{background:var(--flade2);border-color:var(--linje);color:var(--tekst2)}
:root[data-tema="moerk"] .hus-start-status strong,
:root[data-tema="nat"]   .hus-start-status strong{color:var(--tekst)}
:root[data-tema="moerk"] .hus-start-status.fejl,
:root[data-tema="nat"]   .hus-start-status.fejl{background:var(--kritisk-blod);border-color:var(--kritisk)}
:root[data-tema="moerk"] .hus-start-status.advarsel,
:root[data-tema="nat"]   .hus-start-status.advarsel{background:var(--advar-blod);border-color:var(--advar)}
:root[data-tema="moerk"] .hus-note,
:root[data-tema="nat"]   .hus-note{background:var(--accent-blod);color:var(--accent-lys)}

/* Kørende / venter-kort og de tre former for tomhed i huset. */
:root[data-tema="moerk"] .hus-run.t-koerer,
:root[data-tema="nat"]   .hus-run.t-koerer{background:var(--aktiv-blod);border-color:var(--aktiv)}
:root[data-tema="moerk"] .hus-run.t-venter_godkendelse,
:root[data-tema="nat"]   .hus-run.t-venter_godkendelse{background:var(--advar-blod);border-color:var(--advar)}
:root[data-tema="moerk"] .hus-tom.s-kan_ikke_naas,
:root[data-tema="nat"]   .hus-tom.s-kan_ikke_naas,
:root[data-tema="moerk"] .hus-banner.k-kan_ikke_naas,
:root[data-tema="nat"]   .hus-banner.k-kan_ikke_naas,
:root[data-tema="moerk"] .hus-visalt-status.k-kan_ikke_naas,
:root[data-tema="nat"]   .hus-visalt-status.k-kan_ikke_naas{
  background:var(--kritisk-blod);border-color:var(--kritisk);
}
:root[data-tema="moerk"] .hus-tom.s-ingen_adgang,
:root[data-tema="nat"]   .hus-tom.s-ingen_adgang,
:root[data-tema="moerk"] .hus-banner.k-ingen_adgang,
:root[data-tema="nat"]   .hus-banner.k-ingen_adgang{
  background:var(--advar-blod);border-color:var(--advar);
}
:root[data-tema="moerk"] .hus-risiko.r-R3,
:root[data-tema="moerk"] .hus-risiko.r-R4,
:root[data-tema="moerk"] .hus-risiko.r-R5,
:root[data-tema="nat"]   .hus-risiko.r-R3,
:root[data-tema="nat"]   .hus-risiko.r-R4,
:root[data-tema="nat"]   .hus-risiko.r-R5{
  background:var(--advar-blod);border-color:var(--advar);color:var(--advar);
}

/* Statusmærkerne på Maskiner/Modeller/Drift stod med mørk skrift på en
   næsten gennemsigtig flade — på mørk baggrund kunne de ikke læses.
   Mærkerne er 11px, så de skal måles som almindelig tekst (4,5:1). Målt på
   Nat gav --kritisk/--advar/--aktiv 3,43 / 3,99 / 4,33:1 — derfor
   tekstrollerne her. Rammen bliver på grundfarven. */
:root[data-tema="moerk"] .f-maerke.gron,
:root[data-tema="nat"]   .f-maerke.gron{color:var(--aktiv-tekst);border-color:var(--aktiv)}
:root[data-tema="moerk"] .f-maerke.rav,
:root[data-tema="nat"]   .f-maerke.rav{color:var(--advar-tekst);border-color:var(--advar)}
:root[data-tema="moerk"] .f-maerke.rod,
:root[data-tema="nat"]   .f-maerke.rod{color:var(--kritisk-tekst);border-color:var(--kritisk)}
:root[data-tema="moerk"] .f-maerke.blaa,
:root[data-tema="nat"]   .f-maerke.blaa{color:#9cc0e2;border-color:rgba(143,180,216,.45)}
/* Lys: faner.js' egen ravfarve (#8a6212) lå på 3,92:1 mod den ravtonede
   flade den står på i Agenter. Samme rettelse, modsat vej. */
:root[data-tema="lys"] .f-maerke.rav{color:var(--advar-tekst)}
:root[data-tema="lys"] .f-maerke.gron{color:var(--aktiv-tekst)}

/* ── Mobil: sidebjælken klapper sammen under 900px ─────────────────────── */
@media (max-width:900px){
  .sidebjaelke{
    position:fixed;top:0;left:0;height:100dvh;
    transform:translateX(-100%);
    /* visibility slukker menuen HELT når den er kørt ud: ellers kan tastatur
       og VoiceOver stadig lande i knapper, ejeren ikke kan se. */
    visibility:hidden;
    transition:transform .22s ease,visibility 0s linear .22s;
    box-shadow:none;
  }
  .app.menu-aaben .sidebjaelke{
    transform:none;visibility:visible;
    transition:transform .22s ease;
    box-shadow:12px 0 40px rgba(0,0,0,.35);
  }
  .hoved{width:100%}
  .flade{padding:16px 14px calc(20px + env(safe-area-inset-bottom))}
  .topbjaelke{padding-left:8px;padding-right:10px}
  /* Mere plads til indholdet på 375px */
  .kort-hoved{padding:13px 14px}
  .kort-krop{padding:14px}
  .tom-blok{padding:26px 16px}
  .fejl-blok{padding:14px}
  .henter-blok{padding:18px 14px}
  .loginkort{padding:26px 20px 22px}
  /* iOS Safari zoomer ind på et felt med skrift under 16px. Det er derfor
     alle skrivefelter — også modulernes egne — løftes til 16px på mobil.
     :root foran er ikke pynt: modulernes stilark indsættes EFTER stil.css,
     så uden det ekstra led vinder deres 14px. */
  input,textarea,select,.felt{font-size:16px}
  :root .f-ind,
  :root .hc-soeg,
  :root .hc-rk-ret,
  :root .hus-skriv textarea{font-size:16px}
  .tema-knap{min-height:44px}
}
@media (min-width:901px){
  .kun-mobil{display:none !important}
  .skygge{display:none !important}
}

/* Fingre er ikke musemarkører: små knapper får et usynligt 44px-felt omkring
   sig, uden at knappen ser klodset ud. Feltet er absolut placeret, så det
   hverken fylder i rækken eller flytter noget.

   MÅLT på 375px før rettelsen (alle under Apples mindstemål på 44px):
     .f-knap 40 · .f-knap.lille 32   (11 af 13 faner)
     .hus-knap 40 · .hus-chip 38
     .hc-menu 34 · .hc-rund 37 · .hc-send 38 · .hc-rk-knap 25
     CEO'ens forslagsknapper 40 (de har ingen egen klasse — derfor forælderen)
   Knapperne ejes af chat.js/hus.js/faner.js. Indtil de retter målet dér,
   forstørres kun TRYKFELTET her — knappen ser præcis ud som før.
   ::after virker kun på rigtige knapper; input/select/textarea kan ikke bære
   et pseudo-element, så de får min-height i stedet (nederst). */
@media (pointer:coarse),(max-width:900px){
  .knap.lille,
  .f-knap,.hus-knap,.hus-chip,
  .hc-menu,.hc-rund,.hc-send,.hc-rk-knap,
  .hc-forslag button{position:relative}
  .knap.lille::after,
  .f-knap::after,.hus-knap::after,.hus-chip::after,
  .hc-menu::after,.hc-rund::after,.hc-send::after,.hc-rk-knap::after,
  .hc-forslag button::after{
    content:'';position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
  /* Runde ikonknapper er også for SMALLE. Målt luft omkring dem er 8-10px,
     så 44px i bredden kan lige være der uden at dække naboen. */
  .hc-menu::after,.hc-rund::after,.hc-send::after{
    left:50%;right:auto;width:44px;transform:translate(-50%,-50%);
  }
  /* .hc-rk-knap får IKKE 44px i bredden: de to knapper i samme række står med
     6px imellem sig (målt), så to 44px-felter ville lægge sig oven på hinanden
     og stjæle hinandens tryk. Højden er den der rammes forkert i praksis.
     Bredden (25px) skal rettes i chat.js, ikke herfra. */

  /* Formularfelter kan ikke bære ::after — de får målet direkte. */
  :root .hc-soeg,:root .hc-vaelg,:root .hc-felt{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}