/* ══════════════════════════════════════════════════════════════════════════
   Home AI · stil.css — appens skal.
   Premium AI-OS (25/8, ejerens retning): næsten sort base i Mørk, varm
   off-white i Lys, violet som husets farve, områdefarver som signaler.
   Rene flader, fine rammer, nærig glød. 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                             — flade med ramme og blød skygge
                                         (kort-hoved/-krop + maerkat +
                                          tabel-sættet slettet i F5: 0 brug)
     .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. Rammer og ikoner må gerne blive på grundfarven.
   (25/8: sidebjælken følger nu TEMAET — smaragd-undtagelsen er væk.
   --accent-lys betyder fremover "accent på mørk flade" og bruges kun dér.)
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Skrift ────────────────────────────────────────────────────────────
   Skrifterne ligger LOKALT i ui/skrift/ — fladen henter intet udefra og
   virker uden internet (B9). ?v=1 giver et aars cache via Caddys regel for
   stemplede filer; skift tallet, hvis filerne skiftes. */
/* San Francisco (15/8, ejerens oenske): AEGTE SF maa efter Apples licens kun
   bruges paa Apple-udstyr — den kan ikke lovligt lægges paa serveren. Derfor:
   -apple-system FOERST, saa iPhone/iPad/Mac faar den aegte San Francisco, og
   Inter — tegnet i SF's aand og fri licens — baerer alle andre. Lokalt, intet
   hentes udefra. */
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;
  src:url("skrift/inter-400.woff2?v=1") format("woff2")}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;
  src:url("skrift/inter-600.woff2?v=1") format("woff2")}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;
  src:url("skrift/inter-700.woff2?v=1") format("woff2")}

/* ── Farver ────────────────────────────────────────────────────────────
   PREMIUM (25/8, ejerens redesign — planen *1): rollerne herunder er nu
   ALIASER af paletfamilierne laengere nede. Lys er sit EGET design — varm
   off-white, ikke en inverteret moerk. Moerk er referencen: naesten sort.
   Husets farve er violet (--brand); Apples blaa og smaragden er pensioneret.
   Guld-tokens BESTAAR som navne men peger paa brand, til forbrugerne
   (avatar, laas, tema-knap) faar deres egen stil i fase F3.

   Kontrasttallene er BEREGNEDE (WCAG-formlen) — de MAALES i browseren i
   F1b-injektionstesten, foer paletten erklaeres endelig. */
:root{
  /* Lys — varm off-white, eget premium-udtryk */
  --bg:#f7f6f3;
  --bg-dyb:#efede8;
  --flade:#ffffff;
  --flade2:#fbfaf8;
  --tekst:#1c1b1a;
  --tekst2:#55534f;
  --tekst3:#6d6a64;         /* beregnet ~4,9:1 paa --bg — SKAL maales */
  --linje:#e3e0d9;
  --accent:var(--brand);
  --accent-lys:#b3a3ff;     /* accent paa MOERK flade (terminal, moerke kort) */
  --accent-blod:var(--brand-blod);
  --aktiv:var(--groen);
  --aktiv-blod:var(--groen-blod);
  --advar:var(--amber);
  --advar-blod:var(--amber-blod);
  --kritisk:var(--roed);
  --kritisk-blod:var(--roed-blod);
  --accent-tekst:var(--brand-tekst);
  --aktiv-tekst:var(--groen-tekst);
  --advar-tekst:var(--amber-tekst);
  --kritisk-tekst:var(--roed-tekst);
  /* Sidebjaelken foelger nu temaet: lys og rolig i Lys. Aktivt punkt faar
     omraadefarven via --sb-aktiv (rgba af --fane-accent-rgb). */
  --sb1:#fbfaf8;
  --sb2:#f3f1ec;
  --sb-tekst:#1c1b1a;
  --sb-tekst2:#5f5c56;
  --sb-linje:#e3e0d9;
  /* Guld -> brand-bro (F1b). Navnene bestaar saa forbrugerne ikke knaekker;
     fjernes naar avatar/laas/tema-knap er redesignet i F3. */
  --guld:var(--brand);
  --guld-lys:#8a76ec;
  --guld-dyb:var(--brand-tekst);
  --guld-tekst:var(--brand-tekst);
  --paa-accent:#ffffff;     /* hvid paa brand-violet: beregnet ~7:1 — maales */
  --primaer-bg:var(--brand);
  --primaer-bg-hov:#4d36c4;
  --primaer-tekst:#ffffff;
  --sb-aktiv:rgba(var(--fane-accent-rgb),.10);
  --sb-aktiv-tekst:#1c1b1a;
  --overlay:rgba(20,18,14,.40);
  --tone:rgba(90,86,78,.10);
  --skygge:0 18px 50px rgba(28,24,18,.10);
  --skygge-let:0 2px 10px rgba(28,24,18,.06);
  --runding:14px;
  --runding-lille:10px;
  --sb-bredde:246px;
  --top-hoejde:58px;
  color-scheme:light;
}

:root[data-tema="moerk"]{
  /* Moerk — referencen. Naesten sort, koelig, rolig. Sidebjaelken er det
     DYBESTE lag (moerkere end indholdet), kortene ligger let haevet over.
     (F2: 'nat' er afviklet — gemte valg migreres til 'moerk' i app.js.) */
  --bg:#0a0a0d;
  --bg-dyb:#050506;
  --flade:#121216;
  --flade2:#17171c;
  --tekst:#f2f2f5;
  --tekst2:#a8a8b3;         /* beregnet ~7:1 paa --flade2 — maales */
  --tekst3:#8a8a96;         /* beregnet ~4,6:1 paa --flade — SKAL maales */
  --linje:#26262e;
  --accent:var(--brand);
  --accent-lys:#b3a3ff;
  --accent-blod:var(--brand-blod);
  --aktiv:var(--groen);
  --aktiv-blod:var(--groen-blod);
  --advar:var(--amber);
  --advar-blod:var(--amber-blod);
  --kritisk:var(--roed);
  --kritisk-blod:var(--roed-blod);
  --accent-tekst:var(--brand-tekst);
  --aktiv-tekst:var(--groen-tekst);
  --advar-tekst:var(--amber-tekst);
  --kritisk-tekst:var(--roed-tekst);
  --sb1:#0d0d11;
  --sb2:#09090c;
  --sb-tekst:#f2f2f5;
  --sb-tekst2:#9d9daa;      /* beregnet ~6:1 paa --sb1 — maales */
  --sb-linje:#232329;
  --guld:var(--brand);
  --guld-lys:#b3a3ff;
  --guld-dyb:#7a66d8;
  --guld-tekst:var(--brand);
  --paa-accent:#12102a;     /* brand er LYS i moerk — teksten paa den er moerk */
  --primaer-bg:var(--brand);
  --primaer-bg-hov:#b3a3ff;
  --primaer-tekst:#12102a;
  --sb-aktiv:rgba(var(--fane-accent-rgb),.14);
  --sb-aktiv-tekst:#ffffff;
  --overlay:rgba(0,0,0,.62);
  --tone:rgba(242,242,245,.07);
  --skygge:0 18px 50px rgba(0,0,0,.55);
  --skygge-let:0 2px 10px rgba(0,0,0,.38);
  color-scheme:dark;
}

/* (25/8 F2) 'nat' findes ikke laengere — gemte valg migreres i app.js. */

/* ══════════════════════════════════════════════════════════════════════════
   NYE TOKENS · redesignet 25-08-2026 (fase F1a — INERTE indtil noget bruger dem)

   Arkitekturen er tre lag:
     1. PALET      ni accentfamilier + de nye neutraler herunder
     2. ROLLER     de gamle tokens ovenfor — de BLIVER API'et; i F1b bliver
                   --aktiv et alias af --groen, --advar af --amber osv.
     3. OMRÅDE     --fane-accent m.fl., styret af data-omraade på <html>.
                   Attributten sættes af HAI.visFane (fase F3) — indtil da
                   matcher ingen selektor, og alt her er dødt og usynligt.

   HVER FAMILIE HAR TRE ROLLER + KANALERNE:
     --lilla        streg/ikon/fyld  (>=3:1 mod --flade, ellers kun dekorativ)
     --lilla-tekst  TEKST — på egen -blod-flade OG på --flade (>=4,5:1)
     --lilla-blod   den tonede flade bag badge/tone
     --lilla-rgb    kun kanalerne, til glød/toner via rgba(var(--lilla-rgb),.n)
   Samme regel som de gamle *-tekst-roller i filhovedet: grundfarven er ALDRIG
   skrift på sin egen bløde flade.

   Kontrasttallene er BEREGNEDE — de MÅLES i browseren i F1b's injektionstest,
   før paletten erklæres endelig (amber/orange/cyan i Lys er de historisk
   farligste; se de gamle målinger i kommentaren ved f-mærke-overriderne).
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  /* Nye neutraler — Lys (varm off-white; tages i brug ved F1b-flippet) */
  --flade3:#ffffff;          /* løftet lag: popover, dropdown, modal */
  --flade-hov:#f4f2ee;       /* hover på interaktiv flade */
  --flade-tryk:#edeae4;      /* nedtrykt/aktiv flade */
  --linje-svag:#edeae4;      /* hårfin deling INDE i et kort */
  --linje-staerk:#cfccc4;    /* fremhævet ramme, tabelhoved */

  /* Accentfamilier — Lys */
  --blaa:#2563eb;    --blaa-tekst:#1d4fc4;    --blaa-blod:#e8effc;    --blaa-rgb:37,99,235;
  --cyan:#0891b2;    --cyan-tekst:#086e88;    --cyan-blod:#e0f4f8;    --cyan-rgb:8,145,178;
  --lilla:#7c3aed;   --lilla-tekst:#6527c9;   --lilla-blod:#f0eafc;   --lilla-rgb:124,58,237;
  --pink:#d02670;    --pink-tekst:#ad1a5c;    --pink-blod:#fce8f1;    --pink-rgb:208,38,112;
  --groen:#15803d;   --groen-tekst:#116434;   --groen-blod:#e6f3ea;   --groen-rgb:21,128,61;
  --amber:#a16207;   --amber-tekst:#7c4d08;   --amber-blod:#f8f0dc;   --amber-rgb:161,98,7;
  --orange:#c05a10;  --orange-tekst:#96450a;  --orange-blod:#faeadd;  --orange-rgb:192,90,16;
  --roed:#d92d20;    --roed-tekst:#b42318;    --roed-blod:#fbe9e7;    --roed-rgb:217,45,32;
  /* brand — husets egen violet. Bliver --accent og primærknappen i F1b. */
  --brand:#6047e0;   --brand-tekst:#4d36c4;   --brand-blod:#edeafc;   --brand-rgb:96,71,224;

  /* Runding-skala (999px er pillen; 50 % forbliver litteral for ægte cirkler) */
  --runding-skarp:2px;
  --runding-mini:6px;
  --runding-stor:18px;
  --runding-rund:999px;

  /* Skrift-skala — halvpixel-størrelserne afvikles mod disse trin */
  --skrift-mikro:11px;   /* versallabels, mærker */
  --skrift-lille:12px;
  --skrift-meta:13px;    /* metadata — husets mest brugte */
  --skrift-ui:14px;      /* knapper, felter */
  --skrift:15px;         /* brødtekst = body */
  --skrift-stor:17px;
  --skrift-titel:20px;   /* sektionstitler */
  --skrift-rubrik:24px;
  --skrift-display:28px; /* .stor-tal */

  /* Motion — seks løse varigheder samles i fire + tre kurver */
  --fart-hurtig:120ms;   /* hover, farveskift */
  --fart:160ms;          /* standard */
  --fart-blid:240ms;     /* paneler, menuer, sidebjælke */
  --fart-scene:360ms;    /* sideskift, overlays */
  --kurve:cubic-bezier(.2,.6,.2,1);
  --kurve-ind:cubic-bezier(0,.4,.2,1);
  --kurve-ud:cubic-bezier(.4,0,1,.6);

  /* Elevation og glød. GLØDEN er bevidst nærig: KUN aktivt menupunkt,
     primær CTA-hover og live-indikatorer — aldrig hele flader. */
  --skygge-hov:0 6px 24px rgba(10,10,20,.10);
  --gloed:0 0 20px -6px rgba(var(--fane-accent-rgb,var(--brand-rgb)),.40);
  --gradient-maerke:linear-gradient(135deg,var(--lilla),var(--blaa));
  --tone-omraade:linear-gradient(180deg,rgba(var(--fane-accent-rgb,var(--brand-rgb)),.06),transparent 140px);

  /* Områdeaccentens hvilepunkt — indtil data-omraade findes, er alt brand */
  --fane-accent:var(--brand);
  --fane-accent2:var(--blaa);
  --fane-accent-rgb:var(--brand-rgb);
  --fane-accent-blod:var(--brand-blod);
  --fane-accent-tekst:var(--brand-tekst);
}

:root[data-tema="moerk"]{
  /* Nye neutraler — Mørk */
  --flade3:#1d1d23;
  --flade-hov:#1a1a20;
  --flade-tryk:#202027;
  --linje-svag:#1c1c22;
  --linje-staerk:#34343e;

  /* Accentfamilier — Mørk */
  --blaa:#4d9fff;    --blaa-tekst:#7ab8ff;    --blaa-blod:#0e2038;    --blaa-rgb:77,159,255;
  --cyan:#33c5d6;    --cyan-tekst:#6ad6e4;    --cyan-blod:#0a2226;    --cyan-rgb:51,197,214;
  --lilla:#a78bfa;   --lilla-tekst:#c2adff;   --lilla-blod:#1e1834;   --lilla-rgb:167,139,250;
  --pink:#f06daf;    --pink-tekst:#ff97c8;    --pink-blod:#2b1220;    --pink-rgb:240,109,175;
  --groen:#4ade80;   --groen-tekst:#7ce8a4;   --groen-blod:#0c2416;   --groen-rgb:74,222,128;
  --amber:#e6b14a;   --amber-tekst:#f0c76e;   --amber-blod:#271f0a;   --amber-rgb:230,177,74;
  --orange:#f08c4a;  --orange-tekst:#ffa96e;  --orange-blod:#291407;  --orange-rgb:240,140,74;
  --roed:#f26d63;    --roed-tekst:#ff8f85;    --roed-blod:#2b1210;    --roed-rgb:242,109,99;
  --brand:#9a86ff;   --brand-tekst:#b3a3ff;   --brand-blod:#1d1836;   --brand-rgb:154,134,255;

  --skygge-hov:0 6px 24px rgba(0,0,0,.45);
}

/* Områdefarverne — ejerens signalkort. ENESTE kilde til hvilket område der
   bærer hvilken familie. Attributten data-omraade sættes af HAI.visFane (F3);
   fanens id -> område -> familie. Første farve leder; nummer to bruges KUN i
   gradient/glød (--fane-accent2) — aldrig som selvstændig flade. */
[data-omraade="hovedkvarter"]{--fane-accent:var(--blaa);--fane-accent2:var(--lilla);--fane-accent-rgb:var(--blaa-rgb);--fane-accent-blod:var(--blaa-blod);--fane-accent-tekst:var(--blaa-tekst)}
[data-omraade="programmer"]  {--fane-accent:var(--lilla);--fane-accent2:var(--blaa);--fane-accent-rgb:var(--lilla-rgb);--fane-accent-blod:var(--lilla-blod);--fane-accent-tekst:var(--lilla-tekst)}
[data-omraade="drive"]       {--fane-accent:var(--blaa);--fane-accent2:var(--cyan);--fane-accent-rgb:var(--blaa-rgb);--fane-accent-blod:var(--blaa-blod);--fane-accent-tekst:var(--blaa-tekst)}
[data-omraade="datacenter"]  {--fane-accent:var(--cyan);--fane-accent2:var(--groen);--fane-accent-rgb:var(--cyan-rgb);--fane-accent-blod:var(--cyan-blod);--fane-accent-tekst:var(--cyan-tekst)}
[data-omraade="creative"]    {--fane-accent:var(--lilla);--fane-accent2:var(--pink);--fane-accent-rgb:var(--lilla-rgb);--fane-accent-blod:var(--lilla-blod);--fane-accent-tekst:var(--lilla-tekst)}
[data-omraade="domaene"]     {--fane-accent:var(--cyan);--fane-accent2:var(--blaa);--fane-accent-rgb:var(--cyan-rgb);--fane-accent-blod:var(--cyan-blod);--fane-accent-tekst:var(--cyan-tekst)}
[data-omraade="drift"]       {--fane-accent:var(--groen);--fane-accent2:var(--amber);--fane-accent-rgb:var(--groen-rgb);--fane-accent-blod:var(--groen-blod);--fane-accent-tekst:var(--groen-tekst)}
[data-omraade="agenter"]     {--fane-accent:var(--lilla);--fane-accent2:var(--amber);--fane-accent-rgb:var(--lilla-rgb);--fane-accent-blod:var(--lilla-blod);--fane-accent-tekst:var(--lilla-tekst)}
[data-omraade="viden"]       {--fane-accent:var(--groen);--fane-accent2:var(--cyan);--fane-accent-rgb:var(--groen-rgb);--fane-accent-blod:var(--groen-blod);--fane-accent-tekst:var(--groen-tekst)}
[data-omraade="log"]         {--fane-accent:var(--orange);--fane-accent2:var(--amber);--fane-accent-rgb:var(--orange-rgb);--fane-accent-blod:var(--orange-blod);--fane-accent-tekst:var(--orange-tekst)}
[data-omraade="oekonomi"]    {--fane-accent:var(--amber);--fane-accent2:var(--groen);--fane-accent-rgb:var(--amber-rgb);--fane-accent-blod:var(--amber-blod);--fane-accent-tekst:var(--amber-tekst)}

/* ── 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:-apple-system,BlinkMacSystemFont,'Inter',"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);
}

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


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


/* ── 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{
  /* 15/8, ejerens Town Home-forbillede: maerket er nu tre stigende soejler
     under een skraa taglinje, paa en tynd jordbue — massivt GULD. Paa lyse
     flader det dybe guld, paa smaragden det lyse (se .sidebjaelke-reglen). */
  width:30px;height:30px;flex:0 0 30px;border-radius:0;background:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--guld);
}
.logo .mk svg{
  display:block;width:26px;height:26px;
  /* 3D-fornemmelsen (15/8): facetterne giver formen, skyggen giver dybden.
     Bloed og kort — professionel, ikke dramatisk. Daempet i Nat. */
  filter:drop-shadow(0 1.5px 2.5px rgba(0,0,0,.30));
}
/* Facetterne: tre guldtoner, lyset fra venstre. Klasserne bor i selve
   SVG'ens paths (index.html), farverne bor HER, saa Nat kan daempe dem. */
.mk .mk-lys{fill:var(--guld-lys)}
.mk .mk-mel{fill:var(--guld)}
.mk .mk-dyb{fill:var(--guld-dyb)}
.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(--guld-tekst);font-weight:400}  /* "AI" i guld — moerkt nok til hvid flade */
.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}
/* Kodefeltet med øjet (15/8). Knappen ligger OVENPÅ feltet i stedet for ved
   siden af, så feltet beholder sin fulde bredde — ellers ville kodefeltet være
   smallere end e-mailfeltet lige over, og det ses med det samme.
   44px er ikke et tilfældigt tal: det er den mindste flade, en finger rammer
   sikkert på en telefon. */
.kodefelt{position:relative}
.kodefelt input{width:100%;padding-right:46px}
.vis-kode{position:absolute;top:0;right:0;height:100%;width:44px;
  display:flex;align-items:center;justify-content:center;
  appearance:none;border:0;background:none;cursor:pointer;
  font-size:15px;line-height:1;opacity:.42;color:var(--tekst2);
  border-radius:0 var(--radius,10px) var(--radius,10px) 0}
.vis-kode:hover{opacity:.75}
.vis-kode.paa{opacity:1;color:var(--guld-tekst)}
.vis-kode:focus-visible{outline:2px solid var(--accent,#b08d4f);outline-offset:-2px;opacity:1}
.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;
  /* 25/8: silken er afløst af en ren flade — sidebjælken er nu husets
     dybeste, roligste lag. Ét blidt fald, ingen dekoration. */
  background:linear-gradient(180deg, var(--sb1) 0%, var(--sb2) 100%);
  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(--guld-lys)}
.sidebjaelke .logo .mk{color:var(--guld-lys)}  /* lyst guld paa smaragden */
.sidebjaelke .ikonknap{color:var(--sb-tekst2)}
.sidebjaelke .ikonknap:hover{background:var(--tone);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);
}
/* Maskiner som CL-datacenterkort (15/8): slanke maalere, prik og eet link.
   Detaljerne bag klikket bruger de eksisterende f-klasser uaendret. */
.m-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tekst3)}
.m-prik{width:8px;height:8px;border-radius:99px;background:var(--tekst3);flex:0 0 8px}
.m-prik.gron{background:var(--aktiv)}
.m-prik.rav{background:var(--advar)}
.m-prik.rod{background:var(--kritisk)}
.m-prik.blaa{background:var(--accent)}
.m-rk{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;margin-top:9px}
.m-navn{font-size:12px;color:var(--tekst3)}
.m-bar{height:6px;border-radius:99px;background:var(--tone);overflow:hidden}
.m-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.m-tal{font-size:12px;color:var(--tekst2);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-ikke{font-style:italic;color:var(--tekst3)}
.m-advar{margin-top:10px;font-size:12px;color:var(--advar-tekst)}
.m-mere{appearance:none;border:0;background:none;padding:0;margin-top:12px;
  font:inherit;font-size:13px;color:var(--accent-tekst);cursor:pointer;text-align:left}
.m-mere:hover{text-decoration:underline}
.m-detaljer{margin-top:12px;border-top:1px solid var(--linje);padding-top:12px}

/* Afdelingskort (15/8, ejerens skitse): rektangler med skygge, loeft ved
   hover, accentkant naar instruktionen er aaben. */
.afd-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.afd-kort{
  background:var(--flade);border:1px solid var(--linje);border-radius:var(--runding);
  box-shadow:var(--skygge-let);padding:14px 16px;cursor:pointer;
  display:flex;flex-direction:column;gap:7px;
  transition:box-shadow .15s,transform .15s,border-color .15s;
}
.afd-kort:hover{box-shadow:var(--skygge);transform:translateY(-1px)}
.afd-kort.aaben{border-color:var(--accent)}
.afd-kort strong{font-size:15px;letter-spacing:-.01em}
.afd-luft{flex:1 1 auto}
.afd-rum{color:var(--tekst3)}
.afd-tekst{font-size:13px;color:var(--tekst2)}
.afd-fod{margin-top:auto;color:var(--tekst3)}

/* Fanetræk: to kolonner — menuknap (åbner siden) + lås (kun låser).
   Ingen absolut overlap mellem klikområder. */
.fane-rk{
  display:grid;
  grid-template-columns:minmax(0,1fr) 32px;
  align-items:center;
  gap:4px;
}
.fane-rk .fane-knap{min-width:0}
.fane-rk.traekkes{
  opacity:.94;transform:scale(1.02);
  background:var(--sb-aktiv);border-radius:10px;
  box-shadow:var(--skygge);
  position:relative;z-index:5;
}
.fane-rk.traekkes .fane-knap{cursor:grabbing}
body.fane-traek-i-gang{cursor:grabbing;user-select:none;-webkit-user-select:none}
.fane-hlaas{
  position:static;
  appearance:none;border:0;background:none;color:var(--sb-tekst2);
  width:32px;height:32px;min-width:32px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;border-radius:6px;transition:opacity .12s;
}
/* Hover-fade kun hvor der findes en mus — ellers koster hvert menupunkt to tryk. */
@media (hover: hover) and (pointer: fine) {
  .fane-rk:hover .fane-hlaas{opacity:.55}
  .fane-hlaas:hover{opacity:1;color:var(--sb-tekst)}
}
.fane-hlaas.laast{opacity:.9;color:var(--guld-lys)}
.fane-hlaas:focus-visible{opacity:1;outline:2px solid var(--guld-lys);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.fane-hlaas{transition:none}}
.fane-knap{
  position:static;
  display:flex;align-items:center;gap:11px;width:100%;min-width:0;
  min-height:44px;padding:10px 11px;margin-bottom:2px;
  border:0;border-radius:10px;background:transparent;
  color:var(--sb-tekst);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:var(--tone);color:var(--sb-tekst)}
.fane-knap[aria-current="page"]{
  background:var(--sb-aktiv);color:var(--sb-aktiv-tekst);font-weight:650;
  box-shadow:inset 0 0 0 1px rgba(var(--fane-accent-rgb,var(--brand-rgb)),.28),
             var(--gloed);
}
.fane-knap[aria-current="page"] .fane-ikon{color:var(--fane-accent,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(--linje);border-radius:var(--runding-mini);
  background:transparent;color:var(--tekst2);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  transition:border-color var(--fart) var(--kurve),color var(--fart) var(--kurve),
             background var(--fart) var(--kurve);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* 25/8: temavælgeren bor i profilmenuen og står på --flade. Det valgte
   tema bærer husets primærfarve — samme sprog som alle primærknapper. */
.tema-knap:hover{color:var(--tekst);border-color:var(--accent)}
.tema-knap[aria-pressed="true"]{background:var(--primaer-bg);border-color:var(--primaer-bg);color:var(--primaer-tekst)}
.avatar{
  width:34px;height:34px;flex:0 0 34px;border-radius:var(--runding-rund);
  background:var(--gradient-maerke);
  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:13px;font-weight:650;color:var(--tekst);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bruger-rolle{font-size:11px;color:var(--tekst3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Minimér-knappen nederst i sidebjælken (25/8) ──────────────────────── */
.sb-minimer{
  display:flex;align-items:center;gap:11px;width:100%;min-height:40px;
  padding:9px 11px;border:0;border-radius:10px;
  background:transparent;color:var(--sb-tekst2);
  font:inherit;font-size:13px;font-weight:550;text-align:left;cursor:pointer;
  transition:background var(--fart) var(--kurve),color var(--fart) var(--kurve);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
@media (hover:hover){.sb-minimer:hover{background:var(--tone);color:var(--sb-tekst)}}
.sb-minimer-ikon{width:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center}
.sb-minimer-ikon svg{transition:transform var(--fart-blid) var(--kurve)}

/* ── Profilen øverst til højre (25/8) — forsvinder ALDRIG ─────────────── */
.top-profil{position:relative;flex:0 0 auto}
.profil-knap{
  display:flex;align-items:center;gap:9px;min-height:40px;
  padding:4px 8px 4px 5px;border:0;border-radius:10px;
  background:transparent;color:var(--tekst);font:inherit;cursor:pointer;
  transition:background var(--fart) var(--kurve);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
@media (hover:hover){.profil-knap:hover{background:var(--tone)}}
.top-profil .avatar{width:30px;height:30px;flex:0 0 30px;font-size:12.5px}
.top-profil .bruger-tekst{display:flex;flex-direction:column;text-align:left;max-width:150px}
.profil-pil{color:var(--tekst3);flex:0 0 auto;transition:transform var(--fart) var(--kurve)}
.profil-knap[aria-expanded="true"] .profil-pil{transform:rotate(180deg)}
.profil-menu{
  position:absolute;right:0;top:calc(100% + 8px);width:232px;
  background:var(--flade);border:1px solid var(--linje);
  border-radius:var(--runding-stor);box-shadow:var(--skygge);
  padding:12px;z-index:60;
}
.profil-menu-titel{
  font-size:var(--skrift-mikro,11px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tekst3);margin:2px 2px 8px;
}
.profil-menu .tema-vaelger{margin-bottom:10px}
.profil-menu-rk{
  display:flex;align-items:center;gap:9px;width:100%;min-height:40px;
  padding:8px 10px;border:0;border-radius:var(--runding-mini);
  background:transparent;color:var(--tekst);font:inherit;font-size:13.5px;
  cursor:pointer;text-align:left;
  transition:background var(--fart) var(--kurve);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
@media (hover:hover){.profil-menu-rk:hover{background:var(--tone)}}
.profil-menu-rk svg{color:var(--tekst3);flex:0 0 auto}
@media (max-width:640px){
  /* På telefonen bliver profilen til avataren alene — men den BLIVER der. */
  .top-profil .bruger-tekst,.top-profil .profil-pil{display:none}
  .profil-knap{padding:4px}
}

/* ── Minimeret menu — kun på den brede skærm (25/8) ────────────────────────
   ≤900px har sin egen off-canvas-menu; klassen gør intet dér. */
@media (max-width:900px){.kun-bred{display:none}}
@media (min-width:901px){
  .sidebjaelke{transition:width var(--fart-blid) var(--kurve),
               flex-basis var(--fart-blid) var(--kurve)}
  .app.sb-min .sidebjaelke{width:68px;flex:0 0 68px}
  .app.sb-min .sb-top{justify-content:center;padding:14px 8px 10px}
  .app.sb-min .logo .nv{display:none}
  .app.sb-min .fane-navn{display:none}
  .app.sb-min .fane-tal{display:none}
  .app.sb-min .fane-gruppe{
    /* Gruppenavnet kan ikke være der — en hårfin linje holder skellet. */
    height:0;padding:0;margin:10px 12px;overflow:hidden;
    border-top:1px solid var(--sb-linje);text-indent:-999px;
  }
  .app.sb-min .fane-rk{grid-template-columns:1fr;gap:0}
  .app.sb-min .fane-hlaas{display:none}
  .app.sb-min .fane-knap{justify-content:center;padding:10px 0;gap:0}
  .app.sb-min .sb-minimer{justify-content:center;padding:9px 0;gap:0}
  .app.sb-min .sb-minimer-ikon svg{transform:rotate(180deg)}
}

.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}
/* Pillerne må aldrig sprænge bjælken (25/8, slutkontrollen): to ombrudte
   rækker á 27px + 6px gab = 60px i en 58px bjælke — den øverste pille blev
   klippet ved kanten. Slankere piller og tættere rækker holder stakken
   INDE med luft. Reglerne står her og ikke i piller.js, fordi det er
   BJÆLKENS krav til sine gæster; (0,2,0) vinder over modulets .pil. */
.top-hoejre .piller{row-gap:3px}
.top-hoejre .pil{padding:2px 8px}

.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.
   ═════════════════════════════════════════════════════════════════════════ */

/* Husets sendeknap skrev color:#fff oven på var(--tekst), som ER lys i
   Mørk. Resultat: usynlig tekst. (f-knap.primaer bruger nu --primaer-bg
   selv og behøver ingen lap — F5.) */
:root[data-tema="moerk"] .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{background:var(--accent-blod);color:var(--tekst)}
:root[data-tema="moerk"] .hus-besked.dem{background:var(--flade2);border-color:var(--linje);color:var(--tekst)}
:root[data-tema="moerk"] .hus-besked.fejl{background:var(--kritisk-blod);border-color:var(--kritisk);color:var(--tekst)}
:root[data-tema="moerk"] .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{background:var(--flade2);color:var(--tekst);border-color:var(--linje)}
:root[data-tema="moerk"] .hus-start-status{background:var(--flade2);border-color:var(--linje);color:var(--tekst2)}
:root[data-tema="moerk"] .hus-start-status strong{color:var(--tekst)}
:root[data-tema="moerk"] .hus-start-status.fejl{background:var(--kritisk-blod);border-color:var(--kritisk)}
:root[data-tema="moerk"] .hus-start-status.advarsel{background:var(--advar-blod);border-color:var(--advar)}
:root[data-tema="moerk"] .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{background:var(--aktiv-blod);border-color:var(--aktiv)}
:root[data-tema="moerk"] .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="moerk"] .hus-banner.k-kan_ikke_naas,
:root[data-tema="moerk"] .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="moerk"] .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{
  background:var(--advar-blod);border-color:var(--advar);color:var(--advar);
}

/* (F5) Mærke-lapperne er væk: .f-maerke bruger nu familietokens
   (--groen-tekst/-blod m.fl.), som selv skifter med temaet. */

/* ── 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.lille 36 (F5: standardknappen er nu 44 ægte og er ude af lappen)
     .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.lille,.hus-knap,.hus-chip,
  .hc-menu,.hc-rund,.hc-send,.hc-rk-knap,
  .hc-forslag button{position:relative}
  .knap.lille::after,
  .f-knap.lille::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}
}


/* ═══════════════════════════════════════════════════════════════════════════
   ▼▼▼ SKREVET 16-08-2026 af opgave "*1 punkt 4 · Installér som app +
   passer på alle skærme". ALT mellem denne linje og ▲▲▲ nederst i filen
   tilhører den opgave. Rører du noget her, så læs hele blokken først —
   hver regel har en måling bag sig. Ingen anden opgave skriver herinde.
   ═══════════════════════════════════════════════════════════════════════════

   1 · HOVER FINDES IKKE PÅ EN IPHONE — HELLER IKKE DE STEDER,
       DER BLEV GLEMT DEN 15/8
   ───────────────────────────────────────────────────────────────────────────
   Ejeren fangede mig i det én gang: "på min iPhone skal jeg trykke to gange,
   når jeg skifter mellem fanerne." Den 15/8 blev DE TO fane-regler pakket ind
   i @media (hover: hover) and (pointer: fine). Resten blev ikke.

   MÅLT 16-08-2026 med  grep -n ":hover" ui/stil.css  — 14 regler, hvoraf 12
   stod uden for medieblokken, altså også på hans telefon:
     linje 229  a:hover                     understregning
     linje 260  .knap:hover                 kant skifter til accent
     linje 264  .knap.primaer:hover         hele fladen skifter farve
     linje 286  .ikonknap:hover             baggrund
     linje 447  .vis-kode:hover             gennemsigtighed
     linje 497  .sidebjaelke .ikonknap:hover
     linje 521  .m-mere:hover               understregning
     linje 533  .afd-kort:hover             skygge + transform:translateY(-1px)
     linje 614  .fane-knap:hover            baggrund i menuen
     linje 642  .tema-knap:hover            kant + tekstfarve

   To slags skade, og den anden er den, han vil opdage:
     a) DOBBELTTRYK. Safari sender hover ved første berøring og først klik ved
        næste. Det var lige præcis fane-fejlen.
     b) KLÆBENDE HOVER. Efter et tryk BLIVER tilstanden hængende, indtil man
        trykker et andet sted. .afd-kort bliver altså stående løftet 1px med
        stor skygge, og .knap står med accentkant — set fra hans stol ligner
        det "den her er valgt". Det er den ikke. Han ville lede efter en
        markering, der ikke betyder noget.

   HVORFOR NULSTILLING OG IKKE OMSKRIVNING: reglerne ovenfor står i andre
   opgavers områder af filen, og de linjer må jeg ikke røre. I stedet står
   nulstillingen her nederst med NØJAGTIG samme specificitet som originalen.
   Ved lige specificitet vinder den sidste regel i filen — og det er denne.
   Derfor er der heller ikke sat :root eller !important foran noget: så ville
   .fane-knap[aria-current="page"] (0,2,0) tabe til min nulstilling (0,1,1),
   og den ÅBNE fane ville miste sin markering i det sekund han rørte den.
   Prøv det: sæt ":root " foran .fane-knap:hover herunder, åbn menuen på en
   telefon og tryk på den fane, du allerede står på. Markeringen forsvinder.

   Betingelsen er De Morgan af husets egen: den gældende regel tænder hover
   ved (hover: hover) OG (pointer: fine), så den slukkes ved
   (hover: none) ELLER (pointer: coarse). Ingen tredje mulighed, ingen
   enhed falder mellem de to. */
@media (hover: none), (pointer: coarse) {
  a:hover{text-decoration:none}
  .knap:hover{border-color:var(--linje)}
  .knap.primaer:hover{background:var(--primaer-bg);border-color:var(--primaer-bg)}
  .ikonknap:hover{background:transparent}
  .vis-kode:hover{opacity:.42}
  .sidebjaelke .ikonknap:hover{background:transparent;color:var(--sb-tekst2)}
  .m-mere:hover{text-decoration:none}
  .afd-kort:hover{box-shadow:var(--skygge-let);transform:none}
  .fane-knap:hover{background:transparent}
  .tema-knap:hover{color:var(--tekst2);border-color:var(--linje)}

  /* Kvitteringen skal ikke forsvinde — den skal bare komme, mens fingeren er
     nede, i stedet for at blive hængende bagefter. :active varer præcis så
     længe berøringen varer. Husets .knap har den i forvejen
     (.knap:active{transform:translateY(1px)}); her får de to flader, hvor
     hover var den eneste kvittering, deres egen. */
  .afd-kort:active{box-shadow:var(--skygge);transform:translateY(-1px)}
  .fane-knap:active{background:var(--tone)}
  .tema-knap:active{border-color:var(--accent)}

  /* Et langt tryk på en knap i et program skal ikke åbne iOS' tekstlup og
     "Kopiér / Slå op". Han taler og trykker — han markerer ikke menupunkter.
     KUN på betjeningen. Indholdet på fladen skal stadig kunne markeres og
     kopieres, ellers kunne han ikke tage en fejltekst med i en fejlmelding. */
  .fane-knap,.tema-knap,.ikonknap,.knap,.fane-ikon,.avatar{
    -webkit-touch-callout:none;
    -webkit-user-select:none;user-select:none;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   2 · HAKKET I SIDEN AF SKÆRMEN — VENSTRE OG HØJRE BLEV ALDRIG SAT
   ───────────────────────────────────────────────────────────────────────────
   index.html står med <meta name="viewport" content="...viewport-fit=cover">.
   Det er det rigtige valg — uden det får en installeret app hvide bjælker i
   top og bund på en iPhone. Men "cover" betyder også, at fladen tegnes HELT
   ud i hjørnerne, og så skal man selv holde sig fri af hakket og de runde
   hjørner.

   MÅLT 16-08-2026 med  grep -n "env(safe-area" ui/stil.css : ni steder, og
   ALLE ni er -top eller -bottom. Ikke ét -left eller -right i hele filen.
   Stående gør det ingen forskel (hakket er i toppen). LIGGENDE flytter iOS
   hakket ud til den ene side og giver et bånd, der ikke må bruges:

     · liggende med hakket til venstre → menuknappen i topbjælken ligger
       delvist under hakket. Den kan ikke trykkes dér.
     · liggende med hakket til højre → log ud-knappen samme sted.
     · fladens tekst løber ind under det runde hjørne i begge retninger.

   Han ser video i fanen Video, og en telefon vendes for at se video. Det er
   ikke et randtilfælde.

   Tallene herunder er IKKE nye mål — det er husets egne (.flade 22px, på
   mobil 14px; .topbjaelke 16px, på mobil 8/10px), lagt sammen med det, iOS
   selv oplyser. env(...) er 0 på alt uden hak, så en PC og en Android-telefon
   ser præcis det samme som før. Intet flytter sig for nogen af dem. */
.flade{
  padding-left:calc(22px + env(safe-area-inset-left));
  padding-right:calc(22px + env(safe-area-inset-right));
}
.topbjaelke{
  padding-left:calc(16px + env(safe-area-inset-left));
  padding-right:calc(16px + env(safe-area-inset-right));
}
/* Menuen ligger fixed i venstre kant på mobil, så dens indhold er det første,
   hakket rammer. Sidebjælken er border-box (*{box-sizing:border-box}, linje
   211), så polstringen æder af de 246px i stedet for at gøre menuen bredere —
   den skubber altså ikke fladen. */
.sidebjaelke{
  padding-left:env(safe-area-inset-left);
}
@media (max-width:900px){
  .flade{
    padding-left:calc(14px + env(safe-area-inset-left));
    padding-right:calc(14px + env(safe-area-inset-right));
  }
  .topbjaelke{
    padding-left:calc(8px + env(safe-area-inset-left));
    padding-right:calc(10px + env(safe-area-inset-right));
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   3 · NÅR DEN ER INSTALLERET, ER DEN ET PROGRAM — IKKE EN SIDE
   ───────────────────────────────────────────────────────────────────────────
   display-mode: standalone er sandt PRÆCIS når Home AI er åbnet fra ikonet på
   hjemmeskærmen (manifestets "display": "standalone"). I browseren er den
   falsk, og alt herunder gælder ikke.

   Hvorfor forskellen skal være der: i browseren er "træk ned for at genindlæse"
   den måde, han genindlæser på — den skal blive. I appen findes der ingen
   adresselinje at genindlæse fra, og det samme træk sker uden at han vil det,
   hver gang han ruller op i en lang samtale med CEO'en. Rammer det en
   genindlæsning, er hans halvskrevne besked væk. overscroll-behavior-y:contain
   stopper kæden ved fladen: han kan stadig rulle, gummibåndet er der stadig,
   men trækket forplanter sig ikke ud til siden og udløser ikke noget. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  body{overscroll-behavior-y:contain}
}

/* ───────────────────────────────────────────────────────────────────────────
   4 · 375px — DET SIDSTE, DER STAK UD
   ───────────────────────────────────────────────────────────────────────────
   Gennemgangen af fanerne på 375px fandt to slags rester. Alt andet holdt: de
   brede tabeller ligger i .f-rul, som ruller vandret for sig selv, og body har
   overflow-x:hidden (linje 216), så siden selv aldrig kan skride.

   a) En vandret finger i en tabel skal flytte TABELLEN og ikke siden. Uden
      overscroll-behavior-x:contain forplanter trækket sig ud til fladen, når
      tabellen er i sin ene ende, og så "hopper" siden i stedet. Ejeren ville
      tro, tabellen sad fast. (Selve antydningen af mere indhold — en blød
      kant i højre side — hører til i .f-rul's egen fil, ui/faner.js, som ikke
      er mit område. Den står under "mangler stadig" i svaret.)

   b) Rullehøjden i menuen. .fanenav ruller, og et træk i den fortsatte ud i
      siden bagved, når man var i bund. Menuen hoppede. Samme rettelse. */
.f-rul{
  overscroll-behavior-x:contain;
}
.fanenav{
  overscroll-behavior-y:contain;
}

/* 320px findes stadig: iPhone SE (1. og 2. generation) og en iPhone i
   "Større tekst"-tilstand, som gør layoutet smallere i praksis. Huset sigter
   på 375px, og det skal det blive ved med — det her er kun et gulv, så intet
   KLIPPES for den, der har en lille telefon. Kun polstring giver efter.
   Ingen knap bliver mindre end de 44px, Apple kræver; de sættes længere oppe
   i filen og røres ikke her. */
@media (max-width:359px){
  .flade{
    padding-left:calc(10px + env(safe-area-inset-left));
    padding-right:calc(10px + env(safe-area-inset-right));
  }
  .kort-hoved{padding:11px 11px}
  .kort-krop{padding:11px}
  .knap{padding-left:12px;padding-right:12px}
}

/* Afdelingskortene kunne ikke blive smallere end 300px, og det er ikke et
   valg — det er en bivirkning. .afd-gitter (linje 531) står med
   repeat(auto-fill, minmax(300px,1fr)), og et minmax-gulv på 300px er
   ABSOLUT: er der mindre plads, bliver sporet 300px alligevel, og kortet
   stikker ud over kanten i stedet for at give efter.

   MÅLT 16-08-2026 i browseren, samme opsætning som resten af denne blok:
     375px flade → 347px til rådighed → kortet 347px    passer
     320px flade → 300px til rådighed → kortet 300px    passer PRÆCIS
     206px til rådighed                → kortet 300px   94px UDENFOR
   På hans iPhone passer det altså — med nul millimeter til overs. Alt der
   spiser bare én pixel mere (en telefon i "Større tekst", en fremtidig
   ekstra polstring, en rullebjælke) klipper kortet over uden varsel.

   min(100%,300px) betyder "300px, men aldrig mere end der er". Over 300px
   ændrer det INTET — samme antal spalter, samme bredde, ingen forskel at se
   på hans skærm eller på PC'en. Under 300px giver kortet efter i stedet for
   at stikke ud. Det er husets eget mønster i forvejen: ui/oekonomi.js linje
   782 skriver minmax(min(100%,210px),1fr) af nøjagtig samme grund. */
.afd-gitter{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* ───────────────────────────────────────────────────────────────────────────
   5 · SPLASH-SKÆRMENS FARVE SKAL FØLGE HANS TEMA
   ───────────────────────────────────────────────────────────────────────────
   manifest.webmanifest kan kun bære ÉN background_color, og der står Lys
   (#f5f5f7), fordi index.html åbner på data-tema="lys". Kører han Mørk eller
   Nat, blinker der altså lyst i det sekund appen åbner, før fladen er tegnet.
   Manifestet kan vi ikke gøre noget ved — men vi kan sørge for, at der ikke
   ER et lyst lag under fladen bagefter. html arver body's baggrund i dag;
   her siges det direkte, så gummibåndet i bunden af en installeret app viser
   temaets farve og ikke browserens hvide lærred. */
html{background:var(--bg)}

/* ▲▲▲ SLUT på opgave "*1 punkt 4 · Installér som app". Skriv under denne
   linje, hvis du hører til en anden opgave.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ▼▼▼ SKREVET 16-08-2026 af opgave "*5 · Drive-fladen som CL's".
   ALT mellem denne linje og ▲▲▲ nederst i filen tilhører DEN opgave.
   Rør intet herinde uden at læse hele blokken — hver regel har en måling bag
   sig. Ingen anden opgave skriver herinde. Resten af ui/stil.css er ikke rørt.

   Al øvrig Drive-stil bor i STIL-arrayet i ui/faner.js (linje 288-300:
   .f-gitter.mapper, .f-mappe, .f-mappe .aabn, .f-sti .trin …). Den fil er
   FÆLLES i denne kørsel, og jeg skriver ikke i den. De to regler nedenfor er
   derfor RETTELSER OVEN PÅ den, ikke kopier af den — og de er skrevet med
   :root foran af én grund, se punkt 1.
   ═══════════════════════════════════════════════════════════════════════════

   1 · DRIVES EGNE HOVER-REGLER BLEV GLEMT DEN 16/8
   ───────────────────────────────────────────────────────────────────────────
   Blokken ovenfor ("*1 punkt 4") gennemgik :hover i ui/stil.css og pakkede de
   glemte regler ind i @media (hover: hover) and (pointer: fine). Den så kun i
   ui/stil.css. Fladens EGNE regler bor i ui/faner.js, og TO af dem er Drives:

     ui/faner.js:292   .f-mappe .aabn:hover{background:rgba(176,141,79,.07)}
     ui/faner.js:284   .f-sti .trin:hover{background:rgba(176,141,79,.12);…}

   MÅLT 16-08-2026 med:
       grep -n ":hover" ui/faner.js
   → 5 regler, ingen af dem i en @media (hover: hover)-blok.

   Skaden på hans iPhone er den KLÆBENDE hover, ikke dobbelttrykket: efter et
   tryk på et mappekort bliver kortet stående med tændt baggrund, indtil han
   rører noget andet. Åbner han tre mapper i træk, ser tre kort ud som om de
   er "valgt", og intet af det er sandt. Det er præcis den slags, han har
   fanget mig i før ("på min iPhone skal jeg trykke to gange").

   HVORFOR :root FORAN — og hvorfor det ikke er pynt:
   ui/faner.js indsætter sit stilark med document.createElement('style') under
   kørslen. Det lander derfor EFTER <link rel="stylesheet" href="stil.css"> i
   ui/index.html:51, og ved samme specificitet vinder det sidste. En regel her
   der hedder ".f-mappe .aabn:hover" (0,3,0) ville altså tabe. Med :root foran
   bliver den (0,4,0) og vinder — samme greb som ":root .hc-soeg" i blokken
   ovenfor, der blev skrevet af samme grund.

   DEN RIGTIGE RETTELSE er stadig at pakke de to linjer ind i @media i
   ui/faner.js. Den præcise linje står i svaret på opgaven, under
   "linjer_til_faelles_filer". Denne blok er lappen indtil da — og den skader
   ikke, når faner.js bliver rettet: så slukker begge regler det samme.

   PRØV DET SELV (og få det til at fejle med vilje):
     · iPhone eller Safari med Udvikler → Responsive Design Mode → iPhone.
       Tryk på et mappekort i Drive, gå tilbage. Kortet må IKKE stå tændt.
     · Kommentér de to regler herunder ud og gør det igen — så STÅR det tændt.
       Kan du ikke få den forskel frem, måler prøven ikke det, den siger. */
@media (hover: none), (pointer: coarse) {
  :root .f-mappe .aabn:hover { background: transparent; }
  :root .f-sti .trin:hover   { background: transparent; color: var(--tekst2); }
}

/* 2 · LINJEN "DER ER SKET NOGET I DRIVE ET ANDET STED"
   ───────────────────────────────────────────────────────────────────────────
   Den skrives af ui/drive.js::visNytFraHuset(), når live-strømmen melder en
   ændring, mens han har filer markeret eller står midt i et træk. Så tegner
   fladen IKKE siden om af sig selv — den siger til og lader ham trykke.

   Reglen her gør præcis to ting, og med vilje ikke mere:
     · en accentstribe i venstre kant, så linjen kan ses uden at læses,
     · og INGEN rød farve, ingen ramme, ingen animation.
   Husets hukommelsesnote "Alarmer må ikke skræmme" er skrevet efter at et
   ord som "ingen backup" fik ejeren til at tro, at data var slettet. Der er
   ikke sket noget galt her — nogen (som regel ham selv, på en anden skærm)
   har lavet en mappe. Det skal se ud som en oplysning, ikke som en fejl.

   Kortet arver .f-kort fra ui/faner.js; vi lægger kun striben og luften på.
   Knappen inde i den er en almindelig .f-knap og får derfor sit usynlige
   44px-trykfelt af @media (pointer:coarse)-blokken længere oppe i denne fil —
   der skal ikke sættes et mål her, og gør man det, står de to steder og
   modsiger hinanden næste gang nogen retter det ene. */
#f-drive-nyt {
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}
/* Under 420px (iPhone SE står på 375) skal knappen have hele bredden. Står den
   ved siden af teksten dér, bliver den 90px bred og trykfeltet rammer kanten
   af kortet. .f-raek brækker allerede om af sig selv (flex-wrap), så det er
   kun bredden der mangler. */
@media (max-width: 420px) {
  #f-drive-nyt .f-knap { flex: 1 1 100%; }
}

/* 3 · SØGEFELTET I DRIVE
   ───────────────────────────────────────────────────────────────────────────
   Tegnet af ui/drive.js::tegnSoegefelt(). Felt + Ryd-knap i en .f-soeg-række,
   som resten af huset bruger (ui/faner.js:206).

   HVAD DER IKKE STÅR HER, OG HVORFOR:
     · font-size. iOS Safari zoomer ind på et felt med skrift under 16px, og
       .f-ind er 14px. Det er ALLEREDE rettet længere oppe i denne fil
       (":root .f-ind{font-size:16px}" i @media (max-width:900px)), og at
       skrive det igen ville give to steder at rette næste gang.
     · trykfeltet på Ryd-knappen. Den er en almindelig .f-knap og får sine
       44px af @media (pointer:coarse)-blokken ovenfor. Sætter man et mål her
       også, står de to steder og modsiger hinanden.

   1) -webkit-appearance:none
   Safari — og kun Safari — giver input[type=search] sin egen indbyggede form.
   Uden denne linje ignorerer feltet .f-ind's border-radius og padding på hans
   iPhone og bliver en flad, systemgrå pille midt i en flade, hvor alt andet er
   husets. Det er den ENESTE grund til linjen; den ændrer intet i Chrome.
   ::-webkit-search-decoration slukker den lille lup, Safari ellers klistrer
   ind til venstre og skubber teksten med.

   2) Feltet og Ryd på SAMME linje under 420px
   .f-soeg .f-felt har flex-basis 240px (faner.js:206). På en iPhone SE (375px
   bred, ca. 347px indhold) betyder det, at Ryd-knappen brækker om på sin egen
   linje — og så skal tommelfingeren flytte sig ned i en tom række for at lukke
   søgningen. Med 140px som basis står de to ved siden af hinanden hele vejen
   ned til 320px, og feltet er stadig bredt nok til "faktura 2026".

   PRØV DET SELV (og få det til at fejle med vilje):
     · Safari → Udvikler → Responsive Design Mode → iPhone SE. Åbn Drive.
       Feltet og Ryd SKAL stå på samme linje, og feltet skal have husets
       runding — ikke en systempille.
     · Kommentér blokken ud og gør det igen: Ryd falder ned under feltet, og
       i Safari mister feltet sin runding. Sker det ikke, måler prøven ikke
       det, den siger. */
:root #f-drive-soegefelt {
  -webkit-appearance: none;
  appearance: none;
}
:root #f-drive-soegefelt::-webkit-search-decoration { -webkit-appearance: none; }
@media (max-width: 420px) {
  :root #f-drive-soeg .f-felt { flex: 1 1 140px; }
}

/* ▲▲▲ SLUT på opgave "*5 · Drive-fladen som CL's". Skriv under denne linje,
   hvis du hører til en anden opgave.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ▼▼▼ START på opgave "Pop-up'et der spørger midt i samtalen".
   Signatur: bygger-agent "godkendkort", 16-08-2026. Alt herunder hedder .gk-*
   og bruges KUN af ui/godkendkort.js. Rør ikke blokken ovenfor; skriv din egen
   under min slutlinje.

   HVAD DET ER: kortet der spørger "skal det gemmes?", når en model har hentet
   noget udefra og vil lægge det i Vidensbanken. Ejerens ord 16-08-2026:
   "alle brugerkonti kan godkende med et pop-up, så man ikke skal ud af
    samtalen og over i Agenter og Godkendelser — det er tåbeligt."

   ── DEN VIGTIGSTE REGEL I HELE BLOKKEN ────────────────────────────────────
   .gk-baand er IKKE position:fixed og IKKE en overlay. Den er en almindelig
   flex-søskende til .hc-stroem, indsat mellem samtalen og skrivefeltet. Det er
   hans andet krav, ordret: "Samtalen må ikke gå i stå imens. Modellen arbejder
   videre; kortet venter." Giver nogen den position:fixed;inset:0, bliver den
   en modal, svaret forsvinder bagved, og kravet er brudt — det er også præcis
   sådan man med vilje får prøve F i bunden af ui/godkendkort.js til at blive
   rød.

   ── TOMMELFINGER-REGLEN ───────────────────────────────────────────────────
   Han skriver mest fra en iPhone, ofte med tale. Derfor:
     · hver knap er min-height:44px — Apples eget mål, og hans krav ordret.
     · ALLE :hover-regler ligger i @media (hover: hover) and (pointer: fine).
       Uden den blok hænger Safari på det første tryk, og han skal trykke to
       gange for at gemme. Den fejl har han fanget os i én gang før.
     · .gk-felt har font-size:16px. Under 16px zoomer iOS ind, når feltet får
       fokus, og så sidder han og scroller sidelæns i sin egen chat.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Båndet: kortets plads mellem samtalen og skrivefeltet ───────────────── */
.gk-baand {
  flex: 0 0 auto;                 /* .hc-stroem har flex:1 og giver plads */
  border-top: 1px solid var(--linje);
  background: var(--bg-dyb);
  padding: 12px 20px;
  /* Loft, så et langt uddrag aldrig kan æde skrivefeltet. 46vh er målt på en
     iPhone 13 (844px høj): kortet fylder under halvdelen, tastaturet kan stå
     fremme, og der er stadig samtale at se over det. Bliver kortet højere,
     scroller det inde i sig selv — ikke siden. */
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* scroll i kortet må ikke rykke i samtalen */
}
.gk-baand[hidden] { display: none; }

/* ── Selve kortet ────────────────────────────────────────────────────────── */
.gk-kort {
  background: var(--flade);
  border: 1px solid var(--linje);
  /* Accentstriben, ikke en rød ramme. Husets note "Alarmer må ikke skræmme":
     der er intet galt sket — huset spørger bare om lov. */
  border-left: 3px solid var(--accent);
  border-radius: var(--runding);
  box-shadow: var(--skygge-let);
  padding: 14px 15px 13px;
  color: var(--tekst);
}
.gk-kort + .gk-flere { margin-top: 8px; }

.gk-hoved {
  display: flex;
  flex-wrap: wrap;                /* på 320px må fristen brække om, ikke klippes */
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.gk-maerke {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent-tekst);     /* tekstrollen, ikke --accent: se farvereglen øverst */
  background: var(--accent-blod);
  border-radius: 999px;
  padding: 3px 9px;
}
.gk-frist { font-size: 12px; color: var(--tekst3); margin-left: auto; }

.gk-titel {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  /* Titler fra nettet kan være ét ord på 200 tegn. Uden det her skubber de
     hele kortet ud i siden, og han scroller vandret i sin egen chat. */
  overflow-wrap: anywhere;
}

.gk-fra { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.gk-vaert { font-size: 13px; font-weight: 600; color: var(--tekst2); }
/* Hele adressen, ikke en forkortet. Han skal kunne se HVOR det kom fra, før
   han siger ja — en afkortet URL kan skjule præcis den del der er forkert. */
.gk-url { font-size: 12px; color: var(--tekst3); overflow-wrap: anywhere; }

.gk-hvorfor { margin-top: 8px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.gk-linje   { margin-top: 4px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.gk-svag    { color: var(--tekst3); font-size: 12px; }

.gk-mappe {
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--bg-dyb);
  border-radius: var(--runding-lille);
  font-size: 13px;
  line-height: 1.45;
}
/* "huset er i tvivl" står som et mærke og ikke som brødtekst. Arkivaren MÅ
   sige ved ikke — en sorterer der ikke kan, lyver når den er i tvivl (037).
   Så skal tvivlen også kunne ses uden at læse sætningen. */
.gk-tvivl {
  margin-left: 7px;
  font-size: 11px;
  color: var(--advar-tekst);
  background: var(--advar-blod);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.gk-advar {
  margin-top: 9px;
  padding: 9px 11px;
  background: var(--advar-blod);
  color: var(--advar-tekst);
  border-radius: var(--runding-lille);
  font-size: 13px;
  line-height: 1.45;
}

/* ── Uddraget: han skal kunne SE dokumentet før han siger ja ─────────────── */
.gk-uddrag-blok { margin-top: 10px; }
.gk-uddrag {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tekst2);
  background: var(--flade2);
  border: 1px solid var(--linje);
  border-radius: var(--runding-lille);
  padding: 9px 11px;
  white-space: pre-wrap;          /* linjeskift i den hentede tekst bevares */
  overflow-wrap: anywhere;
}
/* Foldet ud får uddraget sit eget loft og scroller selv. Uden det ville et
   udfoldet uddrag på 600 tegn skubbe knapperne under skærmkanten på en
   iPhone — og så kan han ikke svare på det han lige har læst. */
.gk-uddrag-helt { max-height: 34vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gk-fremmed { margin-top: 6px; font-size: 12px; color: var(--advar-tekst); line-height: 1.4; }

/* ── Knapper. Alle mindst 44px høje. ─────────────────────────────────────── */
.gk-knapper { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 9px; }
.gk-knap {
  min-height: 44px;               /* ejerens krav, ordret */
  padding: 11px 18px;
  border-radius: var(--runding-lille);
  border: 1px solid var(--linje);
  background: var(--flade);
  color: var(--tekst);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  /* Uden det her rammer en dobbelt-tap på iOS "zoom ind" i stedet for knappen,
     og et hurtigt ja bliver til en forstørret side. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gk-knap:disabled { opacity: .55; cursor: default; }
/* Tydelig tastaturmarkering — men :focus-visible, så den ikke blinker ved
   hvert eneste tryk på telefonen. */
.gk-knap:focus-visible,
.gk-mere:focus-visible,
.gk-flere:focus-visible,
.gk-tilbage:focus-visible,
.gk-felt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gk-ja {
  /* MÅLT 16-08-2026 i browseren, 1280px bred: her stod `flex: 1 1 auto` med
     begrundelsen "ja'et får bredden; det er det han oftest trykker". Målingen
     gav en "Gem i banken"-knap på 1095px. En knap på over en meter skærm er
     ikke et tydeligt valg, det er en fejl der ligner et banner — og den gør
     samtidig "Nej tak" på 87px til det knappen peger væk fra.
     min-width giver ja'et vægt uden at give det hele bordet. På telefonen
     bliver det alligevel fuld bredde: @media (max-width: 640px) sætter
     flex-direction:column og width:100% længere nede. */
  flex: 0 1 auto;
  min-width: 168px;
  background: var(--primaer-bg);
  color: var(--primaer-tekst);
  border-color: var(--primaer-bg);
}
.gk-nej { flex: 0 1 auto; }

/* ── "Nej tak": tre færdige grunde som fulde knapper ─────────────────────── */
.gk-nej-blok { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
/* HVORFOR fuld bredde: et nej KRÆVER en grund på 3-600 tegn (både routeren og
   databasen kræver det). At kræve tastatur for at sige nej ville gøre nej'et
   dyrere end ja'et — og så siger han bare ja til alt. Ét tryk på en knap i
   fuld bredde = et nej med en grund. */
.gk-grund { width: 100%; text-align: left; font-weight: 400; }
.gk-grund-eget { color: var(--tekst2); }
.gk-nej-bekraeft {
  background: var(--kritisk-blod);
  color: var(--kritisk-tekst);
  border-color: var(--kritisk-blod);
}

.gk-felt {
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--linje);
  border-radius: var(--runding-lille);
  background: var(--flade);
  color: var(--tekst);
  font: inherit;
  font-size: 16px;                /* under 16px zoomer iOS ind ved fokus */
  line-height: 1.45;
  resize: vertical;
}

/* Afkrydsningen: hele linjen er trykfelt, ikke kun det lille kvadrat. */
.gk-afkryds {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 13px;
  color: var(--tekst2);
  cursor: pointer;
  touch-action: manipulation;
}
.gk-afkryds input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); }

/* Tekstknapper. De bærer ikke en beslutning, men skal stadig kunne rammes med
   en tommelfinger — derfor 44px, selv om de ser ud som links. */
.gk-mere, .gk-flere, .gk-tilbage {
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--accent-tekst);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gk-flere { display: block; width: 100%; }
.gk-tilbage { color: var(--tekst3); font-weight: 400; }

/* Fejlkortet: samme kort, men i advarselstonen. Ikke rødt — der er ikke sket
   noget med hans data, huset kunne bare ikke hente listen. */
.gk-fejl { border-left-color: var(--advar); }

/* ── Smalle skærme (iPhone SE står på 375) ───────────────────────────────── */
@media (max-width: 640px) {
  .gk-baand { padding: 10px 12px; max-height: 52vh; }
  .gk-kort  { padding: 12px 13px 12px; }
  /* Ja og Nej under hinanden i fuld bredde. Ved siden af hinanden bliver
     "Nej tak" ca. 90px bred, og trykfeltet lander på kortets kant. */
  .gk-knapper { flex-direction: column; }
  .gk-knapper .gk-knap { width: 100%; }
}

/* ── MUSEN, OG KUN MUSEN ─────────────────────────────────────────────────── */
/* Alt herunder må ALDRIG flyttes ud af denne blok. (hover: hover) and
   (pointer: fine) spørger, om enheden overhovedet HAR en mus. Uden den hænger
   Safari på iPhone på den første :hover-tilstand, og han skal trykke to gange:
   én gang for at "hovere", én gang for at trykke. Flyt en enkelt af reglerne
   herunder udenfor, og prøve E i ui/godkendkort.js bliver rød. */
@media (hover: hover) and (pointer: fine) {
  .gk-knap:hover:not(:disabled) { border-color: var(--accent); }
  .gk-ja:hover:not(:disabled)   { background: var(--primaer-bg-hov); border-color: var(--primaer-bg-hov); }
  .gk-mere:hover,
  .gk-flere:hover,
  .gk-tilbage:hover { text-decoration: underline; }
  .gk-afkryds:hover { color: var(--tekst); }
}

/* Har han slået bevægelse fra i iOS, gør vi ingenting. Der ER ingen animation
   her; reglen står som en spærre mod at nogen tilføjer en senere. */
@media (prefers-reduced-motion: reduce) {
  .gk-baand, .gk-kort, .gk-knap { transition: none !important; animation: none !important; }
}

/* ▲▲▲ SLUT på opgave "Pop-up'et der spørger midt i samtalen"
   (bygger-agent "godkendkort", 16-08-2026). Skriv under denne linje, hvis du
   hører til en anden opgave.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ▼▼▼ START på opgave "Hele fladen simplere — hverdagen øverst, definitionen væk"
   (bygger-agent "fladen-simpel", 16-08-2026).
   ───────────────────────────────────────────────────────────────────────────
   ÉN genbrugelig fold til hele fladen. Ejeren sagde: "det er meget DEFINITIONEN
   der fylder." Så det han bruger i hverdagen står stort og åbent, og
   forklaringen bor bag et lille, gråt "hvorfor?", der er LUKKET når siden åbner.
   Ingen anden fane skal opfinde den igen — den bruges sådan:

     h('details', { klasse: 'hvorfor' }, [
       h('summary', { tekst: 'hvorfor?' }),          // eller 'hvad betyder det?'
       h('div', { klasse: 'hvorfor-krop' }, [ ...forklaringen som <p>/<ul>... ])
     ])

   REGLER DEN HOLDER, SÅ DEN VIRKER OVERALT:
   · Lukket som standard (ingen open-attribut) — definitionen fylder intet,
     før han selv beder om den. En fane må selv sætte open, når noget er rødt,
     så et fix aldrig gemmer sig.
   · <details>/<summary> er browserens egne: de folder UDEN JavaScript, kan
     læses op af VoiceOver, og husker deres tilstand mens fanen står åben.
   · summary er mindst 44px høj og klikbar i hele sin bredde — ejeren sidder på
     iPhone, ofte med tommelen (CLAUDE.md: knapper mindst 44px).
   · Alt hover ligger bag @media (hover: hover) — en finger har ingen hover.
   · Alle farver er tokens (--tekst2/3, --linje, --accent), så Mørk og Nat
     følger med af sig selv.
   Kun details.hvorfor og dens .hvorfor-krop rammes — den bestående ul.f-hvorfor
   (en punktliste i domaene.js og backup.js) har et ANDET klassenavn og røres
   ikke. */
details.hvorfor {
  margin: 10px 0 0;
}
details.hvorfor > summary {
  /* Egen chevron efter ordet, så vi selv styrer den i begge temaer. */
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 2px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst3);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
details.hvorfor > summary::-webkit-details-marker { display: none; }  /* Safari/iOS */
details.hvorfor > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
details.hvorfor[open] > summary::after { transform: rotate(-135deg); }
details.hvorfor > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Kroppen: alt under summary bor i én .hvorfor-krop. En diskret venstrekant
   knytter forklaringen til ordet, uden at larme som et helt kort. */
details.hvorfor > .hvorfor-krop {
  margin: 4px 0 0;
  padding: 2px 0 0 12px;
  border-left: 2px solid var(--linje);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tekst2);
}
details.hvorfor > .hvorfor-krop > * { margin-top: 6px; }
details.hvorfor > .hvorfor-krop > :first-child { margin-top: 0; }
@media (hover: hover) and (pointer: fine) {
  details.hvorfor > summary:hover { color: var(--tekst); }
}
@media (prefers-reduced-motion: reduce) {
  details.hvorfor > summary::after { transition: none; }
}

/* ▼▼▼ START på opgave "Forenkling af kontrolcenter — fælles komponenter"
   (16-08-2026). Statuslinje, ?, ⋯-menu, tekniske detaljer. */
.f-statuslinje {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--tekst3);
}
.f-spoerg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst3);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.f-spoerg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* .f-prik = KUN trepriksmenu-beholder. Statusprikker hedder .f-status-prik. */
.f-prik {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.f-prik-knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  padding: 0 10px;
  border: 1px solid var(--linje);
  border-radius: 10px;
  background: var(--flade);
  color: var(--tekst2);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.f-prik-knap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.f-prik-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--linje);
  border-radius: 12px;
  background: var(--flade);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tekst) 12%, transparent);
}
/* Fælles kort-række: tekst + handlinger i grid — ingen overlap/clip. */
.card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.card-content {
  min-width: 0;
  overflow-wrap: anywhere;
}
.card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 640px) {
  .card-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.f-prik-punkt {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tekst);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.f-prik-punkt.fare { color: var(--kritisk-tekst); }
/* hover kun hvor der ER en mus (iPhone: to tryk og haengende tilstand) */
@media (hover:hover){.f-prik-punkt:hover {
  background: var(--flade2);
  outline: none;
}}
.f-prik-punkt:focus-visible {
  background: var(--flade2);
  outline: none;
}
.f-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.f-top:empty { display: none; }
.f-top:not(:has(*)) { display: none; }
.f-besked-liste { display: flex; flex-direction: column; gap: 8px; }
.f-besked-rk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--linje);
  border-radius: 12px;
  background: var(--flade);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.f-besked-rk > .card-content,
.f-besked-rk > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.f-besked-rk > .card-actions,
.f-besked-rk > .f-raek {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
@media (max-width: 640px) {
  .f-besked-rk {
    grid-template-columns: minmax(0, 1fr);
  }
  .f-besked-rk > .card-actions,
  .f-besked-rk > .f-raek {
    width: 100%;
    justify-content: flex-start;
  }
}
.f-besked-rk:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.f-besked-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--tekst3);
}
/* Filter-/søgerække: felter + knapper på én linje uden overlap.
   align-items:flex-end flugter knapperne med inputbund (ikke midt i label+felt).
   .f-felt har ellers margin-top:12px fra faner-stil — nulstilles her. */
.f-filter-rk {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 14px;
  align-items: flex-end;
  min-width: 0;
}
:root .f-filter-rk > .f-felt {
  margin-top: 0;
  min-width: 0;
}
:root .f-filter-rk > .f-felt.f-filter-soeg {
  flex: 1 1 220px;
}
:root .f-filter-rk > .f-felt.f-filter-valg {
  flex: 0 1 160px;
  max-width: 220px;
}
:root .f-filter-rk > .f-felt .f-ind {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Direkte inputs/selects i filter-rækken (fx Beskeder) — samme princip. */
:root .f-filter-rk > .f-ind {
  flex: 0 1 160px;
  min-width: 0;
  width: auto;
  max-width: 220px;
  box-sizing: border-box;
}
:root .f-filter-rk > input.f-ind[type="search"] {
  flex: 1 1 180px;
  max-width: none;
}
.f-filter-knapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
:root .f-filter-rk > .f-knap,
:root .f-filter-rk > .f-filter-knapper {
  flex: 0 0 auto;
  align-self: flex-end;
}
@media (max-width: 640px) {
  :root .f-filter-rk > .f-felt.f-filter-valg {
    flex: 1 1 140px;
    max-width: none;
  }
  .f-filter-knapper {
    width: 100%;
  }
}
.f-fane-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.f-fane-tab {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.f-fane-tab[aria-selected="true"] {
  background: var(--accent-blod);
  border-color: var(--accent);
  color: var(--accent-tekst);
  font-weight: 600;
}
.f-advar-stripe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--advar);
  background: var(--advar-blod);
  color: var(--advar-tekst);
}
.f-advar-stripe.kritisk {
  border-color: var(--kritisk);
  background: var(--kritisk-blod);
  color: var(--kritisk-tekst);
}
.f-titel-kort {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* ▲▲▲ SLUT på opgave "Forenkling af kontrolcenter — fælles komponenter"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ▼▼▼ START på opgave "Svar agenten INDE i samtalen" (punkt 1 i
   docs/FLADE-SESSION.md). Signatur: fladesessionen, 07-09-2026.
   Alt herunder hedder .sk-* og bruges KUN af ui/spoergekort.js.

   HVAD DET ER: hylden der viser "agenten spørger om noget", når et run står
   pauset/afventer_svar — med feltet og knappen, så han svarer UDEN at gå til
   Agenter. Ejerens ord 07-09-2026: "hvorfor skal jeg et andet sted hen … er
   det en konkurrence om hvor meget jeg skal trykke rundt".

   DEN VIGTIGSTE REGEL, SAMME SOM .gk-*: .sk-baand er IKKE position:fixed og
   IKKE en overlay. Den er en flex-søskende til .hc-stroem, indsat mellem
   samtalen og skrivefeltet. Giver nogen den position:fixed;inset:0, bliver
   den en modal, svaret forsvinder bagved, og prøve F i ui/spoergekort.js er
   rød med vilje.

   TOMMELFINGER-REGLEN gælder her som dér: hver knap min-height:44px, feltet
   font-size:16px (under 16px zoomer iOS ind ved fokus), og ALLE :hover-regler
   ligger i @media (hover: hover) and (pointer: fine).
   ═══════════════════════════════════════════════════════════════════════════ */

.sk-baand {
  flex: 0 0 auto;                 /* .hc-stroem har flex:1 og giver plads */
  border-top: 1px solid var(--linje);
  background: var(--bg-dyb);
  padding: 12px 20px;
  /* Loft, saa et langt spørgsmål aldrig kan æde skrivefeltet. Lavere end
     godkendkortets 46vh: her ligger BEGGE hylder muligvis fremme samtidig,
     og to bånd på 46vh ville tilsammen dække hele telefonen. */
  max-height: 40vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* scroll i kortet må ikke rykke i samtalen */
}
.sk-baand[hidden] { display: none; }

.sk-kort {
  background: var(--flade);
  border: 1px solid var(--linje);
  /* Accentstriben, ikke en rød ramme. Husets note "Alarmer må ikke skræmme":
     der er intet galt sket — en agent spørger bare om noget. */
  border-left: 3px solid var(--accent);
  border-radius: var(--runding);
  box-shadow: var(--skygge-let);
  padding: 14px 15px 13px;
  color: var(--tekst);
}
.sk-kort + .sk-flere { margin-top: 8px; }

.sk-hoved {
  display: flex;
  flex-wrap: wrap;                /* på 320px må afdelingen brække om, ikke klippes */
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.sk-maerke {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent-tekst);     /* tekstrollen, ikke --accent: se farvereglen øverst */
  background: var(--accent-blod);
  border-radius: 999px;
  padding: 3px 9px;
}
.sk-afd { font-size: 13px; font-weight: 600; color: var(--tekst2); }

.sk-titel { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sk-linje { margin-top: 4px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.sk-svag  { color: var(--tekst3); font-size: 12px; }

/* Selve spørgsmålet. Det er det eneste på kortet, han SKAL læse — derfor
   større end resten, og med plads til flere linjer uden at blive klippet. */
.sk-spoergsmaal {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tekst);
  white-space: pre-wrap;          /* agenten skriver ofte punktopstillinger */
  overflow-wrap: anywhere;
  /* Loft med egen scroll: et spørgsmål på tyve linjer må ikke skubbe feltet
     og knappen under skærmkanten — så kan han ikke svare på det, han læser. */
  max-height: 22vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sk-felt {
  width: 100%;
  margin-top: 10px;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid var(--linje);
  border-radius: var(--runding-lille);
  background: var(--flade);
  color: var(--tekst);
  font: inherit;
  font-size: 16px;                /* under 16px zoomer iOS ind ved fokus */
  line-height: 1.45;
  resize: vertical;
}
.sk-felt:disabled { opacity: .6; }

.sk-knapper { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.sk-knap {
  min-height: 44px;               /* ejerens krav, ordret */
  padding: 11px 18px;
  border-radius: var(--runding-lille);
  border: 1px solid var(--linje);
  background: var(--flade);
  color: var(--tekst);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  /* Uden det her rammer en dobbelt-tap på iOS "zoom ind" i stedet for knappen. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sk-knap:disabled { opacity: .55; cursor: default; }
.sk-primaer {
  flex: 0 1 auto;
  min-width: 168px;               /* vægt uden at tage hele bordet — se .gk-ja */
  background: var(--primaer-bg);
  color: var(--primaer-tekst);
  border-color: var(--primaer-bg);
}

/* Tekstknapper. De bærer ikke en beslutning, men skal stadig kunne rammes med
   en tommelfinger — derfor 44px, selv om de ser ud som links. */
.sk-flere, .sk-tilbage {
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--accent-tekst);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sk-flere { display: block; width: 100%; }
.sk-tilbage { color: var(--tekst3); font-weight: 400; }

.sk-knap:focus-visible,
.sk-flere:focus-visible,
.sk-tilbage:focus-visible,
.sk-felt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fejlkortet: samme kort, i advarselstonen. Ikke rødt — der er ikke sket
   noget med hans data, huset kunne bare ikke hente listen. */
.sk-fejl { border-left-color: var(--advar); }

/* Fejlkortet er "jeg kunne ikke HENTE". Det her er "dit TRYK kom ikke
   igennem" — og de to må ikke se ens ud, for i det andet tilfælde står hans
   svar der stadig, og agenten venter stadig. Derfor en linje PÅ kortet, ikke
   et kort i stedet for kortet. Se måling 3c i scripts/proev_spoergekort.js. */
.sk-sendfejl {
  margin-top: 10px;
  color: var(--advar-tekst);
  font-size: 13px;
  line-height: 1.45;
}

/* ── Smalle skærme (iPhone SE står på 375) ───────────────────────────────── */
@media (max-width: 640px) {
  .sk-baand { padding: 10px 12px; max-height: 46vh; }
  .sk-kort  { padding: 12px 13px 12px; }
  .sk-knapper { flex-direction: column; align-items: stretch; }
  .sk-knapper .sk-knap { width: 100%; }
}

/* ── MUSEN, OG KUN MUSEN ─────────────────────────────────────────────────── */
/* Flyttes én af reglerne herunder ud af blokken, hænger Safari på iPhone på
   den første :hover-tilstand, og han skal trykke to gange for at svare. Den
   fejl har han fanget os i én gang før. */
@media (hover: hover) and (pointer: fine) {
  .sk-knap:hover:not(:disabled) { border-color: var(--accent); }
  .sk-primaer:hover:not(:disabled) { background: var(--primaer-bg-hov); border-color: var(--primaer-bg-hov); }
  .sk-flere:hover,
  .sk-tilbage:hover { text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-baand, .sk-kort, .sk-knap { transition: none !important; animation: none !important; }
}

/* ▲▲▲ SLUT på opgave "Svar agenten INDE i samtalen" (fladesessionen,
   07-09-2026). Skriv under denne linje, hvis du hører til en anden opgave.
   ═══════════════════════════════════════════════════════════════════════════ */