/* LOGO-PAKKEN (kanonisk kopi af /epjai-logo.css — SKAL være identisk; håndhæves i test/logo.test.js) */
.epjai-logo{display:inline-flex;align-items:baseline;gap:.075em;font-weight:800;line-height:1.33;white-space:nowrap;letter-spacing:-.01em}
.epjai-logo .d{background:#1a73e8;color:#fff;border-radius:.3em;padding:0 .27em;display:inline-block;font-weight:700;transform:translateY(.05em)}
/* [hidden] SKAL VINDE (Martins fund 11-08-2026 — samme fælde tre gange på én dag).
   Skjuler man et element med hidden-attributten, men elementet har display:flex/grid/block i en
   regel eller i sin style="…", vinder DEN — og elementet bliver stående. Det ramte pause-knappen
   i diktafonen, optage-ruden på Drev og skift-knapperne i kalenderen, hver gang som en fejl, der
   lignede noget helt andet. Her siges det ét sted, for hele platformen: er noget hidden, er det
   væk. !important, fordi det netop skal slå de regler, der ellers ville vinde. */
[hidden]{display:none!important}

/* Fælles tema for hele epjai-platformen — den røde tråd på tværs af moduler. */
:root{
  --accent:#1a73e8; --accent-mork:#1557b0;
  --kant:#dcdfe4; --bg:#f4f5f7; --kort:#ffffff; --tekst:#1a1d21; --svag:#6b7280;
  --gron:#138a36; --rod:#d52b1e; --pin:#fff8e6;
  /* HUSETS GRÅ BJÆLKE (Martin, 09-11-2026). Den grå flade, der SIGER noget — info-bjælken i
     hvile og på pause — er mørkere end sidens baggrund (--bg). En grå på grå kan ikke ses, og
     en bjælke, man ikke kan se, er ikke en bjælke. Samme familie som de grå underkort under
     svæveruderne (#e7eaee), så fladerne ligner hinanden på tværs af moduler. */
  --graa-bjaelke:#dde3ea; --graa-bjaelke-kant:#c3ccd9;
  /* «NOGET VENTER PÅ DIG» (Martin, 05-11-2026). Lilla har siden telefon-fanen betydet
     «der står nogen i køen». Nu betyder den det samme på de to andre svæveknapper: opgaver,
     der ikke er gjort, og chat-beskeder, der ikke er læst. Tre knapper i tre farver for det
     samme ville skulle læses hver for sig — én farve ses på vej forbi.
     Tallet står hér, fordi chat-widgeten har sit eget stilark og ellers ville få sin egen lilla. */
  --venter:#7c3aed;
  /* OPGAVE-FANENS BREDDE (Martin, 26-10-2026). Fanen er fastgjort til højre kant og rækker op i
     topmenuens højde. Topbjælken reserverer den samme bredde, så brugermenuen ikke forsvinder ind
     bag den — målt: knappen sluttede ved 1384 og fanen begyndte ved 1368. Tallet står ÉT sted,
     så de to ikke kan komme ud af trit. */
  /* BREDDEN PÅ HUSETS TO SIDEFANER (Martin, 05-11-2026): telefonen i venstre kant og
     Mine opgaver i højre. Ét mål, fordi de er ét par — og bredt nok til, at telefonens
     ikon kan beholde sin størrelse (23 px + 8 px polstring i hver side). Opgave-ikonet var
     16 px og voksede med: to faner med hver sin ikonstørrelse læses som to slags knapper. */
  --opg-fane:40px;
  --opg-ikon:23px;
  /* …OG SAMME HØJDE. Opgave-fanen bærer et tal under ikonet og blev derfor 64 px, mens
     telefonens var 58: to faner i hver sin kant, der ikke flugter forneden, ser ud som to
     tilfældigheder. Målt på skærmen 05-11-2026. */
  --opg-fanehoej:64px;
  /* Stram design-skala — brug disse frem for vilkårlige px-værdier */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --skygge-let:0 4px 16px rgba(0,0,0,.08); --skygge-svaev:0 10px 28px rgba(0,0,0,.14);
}
*{box-sizing:border-box}
body{font-family:'Segoe UI',system-ui,sans-serif;margin:0;background:var(--bg);color:var(--tekst);line-height:1.45}

/* Top-navigation — vises på alle sider via topmenu.js */
.topnav{background:var(--kort);border-bottom:1px solid var(--kant);position:sticky;top:0;z-index:40}
/* BJÆLKEN BRUGER HELE SKÆRMEN (Martin, 26-10-2026): "Lav så knapperne her, er placéret HELT ude
   til venstre. Altså venstre side i skærmens fulde bredte."
   Her stod max-width:1080px + margin:0 auto, og så lå knapperne midt på en bred skærm med luft
   i begge sider. BEMÆRK: sidernes indhold er stadig 1080 px bredt og centreret, så det øverste
   menupunkt står ikke længere lige over sidens venstre kant. Det er prisen for at bruge hele
   bredden, og den er valgt med vilje. */
/* BJÆLKEN HOLDER SIG FRI AF BEGGE FANER (Martin, 05-11-2026: "sørg for at knapperne i
   topmenuen flyttes lidt, så de ikke bliver vist under svæveknapperne"). Fanerne ligger
   FAST i hver sin kant, oven på siden — også oven på bjælken. Reserven er fanens egen
   bredde plus luft, så den følger med af sig selv, hvis fanen bliver bredere.
   LUFTEN BLEV 24 px (Martin, 05-11-2026: «lav mere afstand mellem telefon-knappen og den
   første knap (forside) i topmenuen»). 12 px var målt luft nok til ikke at OVERLAPPE, men
   fanen er en flade i sin egen farve, der ligger oven på bjælken — står menuens første knap
   klos op ad den, læses de to som én stribe knapper. Begge kanter, for den anden fane har
   samme nabo-problem (brugerens navn med sin pil). */
.topnav-inner{display:flex;align-items:center;gap:4px;min-height:54px;
  padding:0 calc(var(--opg-fane) + 24px)}
.topnav .brand{font-weight:700;font-size:17px;margin-right:14px;display:flex;align-items:center;gap:0;color:var(--tekst);text-decoration:none;white-space:nowrap}
.topnav .brand .dot{color:var(--accent)}
.topnav .navlink{padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--svag);text-decoration:none}
.topnav .navlink:hover{background:var(--bg);color:var(--tekst)}
.topnav .navlink.aktiv{background:#eaf1fe;color:var(--accent)}
.topnav .navlink.admin{background:#fdf2e0;color:#9a6a00}
.topnav .navlink.admin:hover{background:#f8e6c6;color:#7a5200}
.topnav .navlink.admin.aktiv{background:#f3d391;color:#6b4500}
/* UDVIDET / MINIMERET topmenu (Martin, 04-08-2026). Udvidet er udgangspunktet: store ikoner med
   navnet under, så man ikke skal kende ikonerne udenad. Minimeret er den kompakte ikon-række.
   Hele forskellen er CSS ud fra klassen på <body> — menuen tegnes ikke om, når man skifter. */
.topnav .navlink{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.topnav .navlink>svg{width:18px;height:18px;flex:0 0 auto}
/* Forside-punktet bærer LOGOET i stedet for et ikon (Martin, 04-08-2026). Logoets størrelse
   styres kun med font-size — se epjai-logo.css; her sætter vi den, ikonerne har. */
/* line-height (ikke font-size) er det, der gør Forside-knappen præcis lige så høj som de andre:
   målt 36 px ved 1.33 mod naboernes 34, og 34 px ved 1.2. Selve logoet — den blå "Ep"-boks —
   røres ikke; den ligger stadig, hvor epjai-logo.css sætter den. */
.topnav .navlink .navlogo{font-size:15px;line-height:1.2;flex:0 0 auto;color:var(--tekst)}
.topnav .navlink:hover .navlogo,.topnav .navlink.aktiv .navlogo{color:inherit}
body.topmenu-udvidet .topnav .navlink .navlogo{font-size:21px}
.topnav .navtekst{display:none}
/* FOLD-KNAPPEN ER VÆK (Martin, 19-10-2026) — valget bor under Indstillinger → Layout. */
body.topmenu-udvidet .topnav-inner{min-height:70px}
body.topmenu-udvidet .topnav .navlink{flex-direction:column;gap:4px;padding:6px 11px;font-size:11.5px;line-height:1.15}
body.topmenu-udvidet .topnav .navlink>svg{width:26px;height:26px}
/* Søgefeltet skal stå i samme højde som knapperne, når menuen er foldet ud — ellers ser rækken
   ud, som om noget er faldet ned. Højden er den samme, knapperne får af ikon + navn. */
body.topmenu-udvidet .topnav .topsoeg{min-height:55px;border-radius:11px}
/* HELE HOEJRE SIDE FOELGER MED (Martin, 05-08-2026). Fold-knappen, brugeren og tandhjulet stod
   som smaa 34 px-knapper, mens resten af menuen var 55 px hoej — de saa ud som noget, der var
   glemt. Samme maal og samme afrunding som soegefeltet, saa hele baren staar i én hoejde.
   Brugerknappen bliver vandret: dens tekst er et NAVN, ikke en kort menu-etiket, og stablet
   over ikonet ville den enten braekke eller goere baren meget bred. */
/* IKON-KNAPPERNE VOKSER IKKE (Martin, 06-08-2026): fold-knappen og tandhjulet står nu samlet
   yderst til højre som redskaber til baren selv — ikke som menupunkter. De beholder derfor
   deres lille 34px-format i begge tilstande. Som store firkanter trak de opmærksomheden
   væk fra selve menuen. */
body.topmenu-udvidet .topnav .brugerknap{min-height:55px;border-radius:11px;padding:6px 12px;font-size:14px}
body.topmenu-udvidet .topnav .brugerknap svg{width:26px;height:26px}
body.topmenu-udvidet .topnav .brugerknap .caret{width:18px;height:18px}
body.topmenu-udvidet .topnav .navtekst{display:block}
/* AI-notat + AI-diktafon står som ÉN toggle-menu — samme greb som i AI-appen: to knapper i den
   samme ramme, hvor den, man er inde på, er markeret. */
.topnav .navseg{display:inline-flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--kant);border-radius:11px;padding:3px;margin:0 5px;flex:0 0 auto}
.topnav .navseg .navlink{padding:6px 10px}
body.topmenu-udvidet .topnav .navseg .navlink{padding:5px 10px}
/* Backoffice-venstremenuen hænger under topbaren — den skal følge med, når baren bliver højere. */
body.har-bo-menu.topmenu-udvidet #boMenu{top:72px}
/* Backoffice-konsol (backoffice.epjai.dk): renere, luftigere topmenu med god plads og ikoner. */
.topnav-bo{background:linear-gradient(180deg,#fbfcfe,#f4f7fb);border-bottom:1px solid #e3e8ef}
/* Backoffice-konsollen er en anden flade og røres ikke: den beholder sin bredde OG sin centrering
   (`margin:0 auto` stod før i reglen ovenfor og forsvandt med den). */
.topnav-bo .topnav-inner{max-width:1320px;margin:0 auto;min-height:64px;gap:6px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;row-gap:6px}
.topnav-bo .brand{font-size:18px;margin-right:20px}
.topnav-bo .navlinks{gap:4px;flex-wrap:wrap}
.topnav-bo a.navlink,.topnav-bo a.navlink.admin{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;font-size:13.5px;background:transparent;color:#5b6675;border:1px solid transparent}
.topnav-bo a.navlink:hover,.topnav-bo a.navlink.admin:hover{background:#fff;color:#1a1d21;border-color:#dbe2ea;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.topnav-bo a.navlink.aktiv,.topnav-bo a.navlink.admin.aktiv{background:#eaf1fe;color:var(--accent);border-color:#cfe0fd}
/* Patient-søgefeltet i topmenuen (erstatter "Patient"-punktet): forslag svæver under feltet */
.topnav .topsoeg{position:relative;display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--kant);border-radius:8px;padding:7px 11px;min-width:200px;max-width:280px;flex:1}
.topnav .topsoeg:focus-within{border-color:var(--accent);background:var(--kort)}
.topnav .topsoeg svg{width:15px;height:15px;color:var(--svag);flex:0 0 auto}
.topnav .topsoeg input{border:0;outline:0;background:none;font-size:14px;flex:1;min-width:0;color:var(--tekst);font-family:inherit}
.topnav .topsoeg-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:300px;max-height:340px;overflow:auto;background:var(--kort);border:1px solid var(--kant);border-radius:12px;box-shadow:var(--skygge-svaev,0 12px 32px rgba(0,0,0,.18));z-index:3300;padding:5px}
.topnav .topsoeg-drop button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:8px;padding:8px 11px;font:500 14px/1.3 inherit;color:var(--tekst);cursor:pointer;text-align:left}
.topnav .topsoeg-drop button:hover,.topnav .topsoeg-drop button.aktivt{background:#eaf1fe}
.topnav .topsoeg-drop .tn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav .topsoeg-drop .tm{color:var(--svag);font-size:12px;white-space:nowrap}
.topnav .topsoeg-drop .thoved{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--svag);padding:6px 11px 4px}
.topnav .topsoeg-drop .ttom{padding:10px 11px;color:var(--svag);font-size:13px}
.topnav .topsoeg-drop .tny{border-top:1px solid var(--kant);border-radius:0 0 8px 8px;margin-top:4px;color:var(--accent);font-weight:700;justify-content:flex-start}
.topnav .mobil-preview-knap{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--kant);border-radius:8px;background:none;color:var(--svag);cursor:pointer;margin-right:8px;flex:0 0 auto}
.topnav .mobil-preview-knap:hover{background:var(--bg);color:var(--accent)}
.topnav .mobil-preview-knap svg{width:18px;height:18px}
/* TANDHJULET ER VÆK (Martin, 19-10-2026) — Indstillinger står i menuen under navnet. */
#mpOverlay{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
#mpOverlay .mp-bar{display:flex;align-items:center;gap:18px;color:#fff;font-size:13px;font-weight:600}
#mpOverlay .mp-luk{background:#fff;color:#1a1d21;border:0;border-radius:8px;padding:7px 14px;font-weight:700;cursor:pointer}
#mpOverlay .mp-frame-wrap{width:390px;max-width:calc(100vw - 32px);height:min(844px,84vh);border-radius:30px;border:11px solid #14161a;background:#000;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.55)}
#mpOverlay .mp-frame{width:100%;height:100%;border:0;background:#fff;display:block}
.topnav .navlinks{display:flex;align-items:center;gap:2px;min-width:0}
.topnav .spacer{flex:1}
.topnav .bruger{position:relative;display:flex;align-items:center}
.topnav .brugerknap{display:flex;align-items:center;gap:7px;background:none;border:1px solid transparent;border-radius:8px;padding:6px 9px;cursor:pointer;color:var(--tekst);font-size:13px;font-weight:600}
/* ROLLEN STÅR FAST UNDER NAVNET (Martin, 13-08-2026) — ikke kun inde i menuen. Man skal kunne se i
   et blik, hvad man er logget ind SOM; det betyder noget, når en maskine deles i receptionen.
   Diskret: mindre, nedtonet og med normal vægt, så den ikke konkurrerer med navnet. */
.topnav .brugerknap .brugernavn{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}
.topnav .brugerknap .brugerrolle{font-size:10.5px;font-weight:500;color:var(--svag);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.topnav .brugerknap:hover{background:var(--bg)}
.topnav .brugerknap svg{width:19px;height:19px;color:var(--svag)}
.topnav .brugerknap .caret{width:15px;height:15px}
.topnav .brugerdrop{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--kort);border:1px solid var(--kant);border-radius:12px;box-shadow:var(--skygge-svaev);padding:6px;z-index:50;display:flex;flex-direction:column;gap:2px}
.topnav .brugerdrop[hidden]{display:none}
.topnav .brugerhoved{padding:7px 11px 9px;font-size:12.5px;color:var(--svag);font-weight:600;border-bottom:1px solid var(--kant);margin-bottom:4px}
/* Navnet på sin egen linje, rolle og rettighed under. */
.topnav .brugerhoved .navn{display:block;color:var(--tekst);font-size:13.5px}
.topnav .brugerhoved .und{display:block;margin-top:2px;font-weight:500}
/* ÉN SKRIFT I HELE BRUGERMENUEN (Martin, 23-10-2026: "Fontstørrelse og type, skal være den
   samme på alle knapper i denne menu"). `font-family:inherit` er dét, der gør det: en
   <button> arver IKKE sidens skrift, men får browserens egen — så "Søren-guiden",
   "Træningsvideoer" og "Log ud" stod i en anden skrift end "Mine indstillinger" og "Klinik
   indstillinger", som er links. Samme klasse, to skrifter. */
.topnav .brugeritem{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 11px;font-family:inherit;font-size:14px;font-weight:600;color:var(--tekst);text-decoration:none;cursor:pointer}
.topnav .brugeritem:hover{background:var(--bg)}
/* VIS LILLE/STOR TOPMENU er en handling, man slår frem og tilbage — ikke et sted, man går
   hen. Den skal kunne læses uden at råbe lige så højt som Min konto og Log ud. */
.topnav .brugeritem svg{width:17px;height:17px;color:var(--svag)}
.topnav .brugeritem.rod{color:var(--rod)}
.topnav .brugeritem.rod svg{color:var(--rod)}
.topnav .navwrap{position:relative;display:flex;align-items:center}
/* Writers liste over åbne dokumenter. Samme rude som brugermenuen — den hænger bare under et
   punkt i venstre side og skal derfor være venstrestillet og bredere (filnavne er lange). */
/* Et <button> arver hverken font eller baggrund — resten kommer fra .navlink ovenfor. */
.topnav button.navlink{font:inherit;background:none;border:0;cursor:pointer}
/* FLERE ÅBNE DOKUMENTER SES PÅ KNAPPEN (Martin, 21-10-2026).
   "Writer-knappen skal ikke se anderledes ud. Den skal altid se ud på samme måde, men tilføj i
    stedet en tæller, som viser hvor mange dokumenter der er åben."
   Formen er den, Telefon-knappen har brugt hele tiden — ét sted at kende igen. Farven er menuens
   blå og ikke rød: to åbne dokumenter er en oplysning, ikke en alarm. Reglen står FØR den grønne
   nedenfor, så telefonens røde tæller bliver ved med at vinde. */
/* ALLE TÆLLERE ER ÉN FORM (Martin, 26-10-2026): "Alle tællere på knapper i topmenuen, skal sidde
   i samme højde, have samme størrelse og en knap, må ikke overlappe, så et tal kan blive delvis
   skjult bag en knap."
   Der var to geometrier — telefonens sad 4 px højere og var 1 px større end de andre. Nu står
   målene HER og kun her; den grønne knap nedenfor skifter kun FARVE. */
.topnav .navlink{position:relative}
.topnav .navlink .navtal{
  position:absolute; top:-1px; right:-1px; min-width:18px; height:18px; border-radius:9px;
  padding:0 5px; background:var(--accent); color:#fff;
  font:800 11px/18px 'Segoe UI', system-ui, sans-serif; text-align:center;
  /* Ringen har bjælkens farve, fordi tallet hænger ud over knappens kant. */
  box-shadow:0 0 0 2px var(--kort); font-variant-numeric:tabular-nums; pointer-events:none;
  /* OG DET MÅ IKKE GEMME SIG BAG NABOEN. Knapperne er positionerede søskende, så den NÆSTE
     tegnes oven på den forriges tæller — og et ettal blev til en halv streg. z-index løfter
     tallet over dem alle; `.navlink` laver ingen egen stabel (z-index:auto), så det virker
     på tværs af knapperne. */
  z-index:2;
}
.topnav .navlink .navtal[hidden]{display:none}
.topnav .writerdrop{right:auto;left:0;min-width:290px;max-width:min(420px,90vw)}
.topnav .writerdrop .writerhoved{padding:7px 11px 5px;font-size:12px;font-weight:700;color:var(--svag);text-transform:uppercase;letter-spacing:.4px}
.topnav .writerdrop .writerrk{display:flex;align-items:center;gap:2px}
.topnav .writerdrop .writerrk .brugeritem{min-width:0;flex:1}
.topnav .writerdrop .writerrk .brugeritem span{min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topnav .writerdrop .writerrk .brugeritem .und{font-weight:400;font-size:12px;color:var(--svag)}
.topnav .writerdrop .writerluk{flex:0 0 auto;background:none;border:0;border-radius:8px;padding:7px;cursor:pointer;color:var(--svag);display:flex}
.topnav .writerdrop .writerluk:hover{background:var(--bg);color:var(--rod)}
.topnav .writerdrop .writerluk svg{width:15px;height:15px}
.topnav .writerdrop .writerskel{height:1px;background:var(--kant);margin:5px 7px}
.topnav .navwrap>.navlink{display:inline-flex;align-items:center;gap:4px}
.topnav .navwrap>.navlink .caret{width:14px;height:14px;opacity:.75}
.topnav .navsub{position:absolute;top:100%;left:0;min-width:220px;background:var(--kort);border:1px solid var(--kant);border-radius:12px;box-shadow:var(--skygge-svaev);padding:6px;z-index:50;display:none;flex-direction:column;gap:1px}
.topnav .navwrap:hover .navsub,.topnav .navwrap:focus-within .navsub{display:flex}
.topnav .navsub a{display:block;padding:8px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--tekst);text-decoration:none;white-space:nowrap}
.topnav .navsub a:hover{background:var(--bg);color:var(--accent)}
@media(max-width:680px){
  .topnav .navsub{display:none!important}
  .topnav .mobil-preview-knap{display:none}
  .topnav-inner{flex-wrap:wrap;padding:7px 10px;gap:6px;min-height:0}
  .topnav .brand{margin-right:auto;font-size:16px}
  .topnav .bruger .navn{display:none}
  .topnav .spacer{display:none}
  .topnav .navlinks{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .topnav .navlinks::-webkit-scrollbar{height:0}
  .topnav .navlink{white-space:nowrap;flex:0 0 auto;padding:7px 11px}
}

/* Genbrugelige byggeklodser */
.kort{background:var(--kort);border:1px solid var(--kant);border-radius:var(--r-md);padding:18px}
/* KNAP-SÆTTET (kanonisk — definér ALDRIG lille/sekundaer/fare/stor lokalt på en side igen) */
.knap{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);color:#fff;border:0;border-radius:var(--r-sm);padding:11px 18px;font-size:15px;font-weight:600;cursor:pointer;line-height:1.2}
/* EN SKJULT KNAP SKAL VÆRE SKJULT (Martins fund via papirkurven, 10-08-2026).
   `display:inline-flex` ovenfor slår browserens egen [hidden]-regel, og derfor stod fx "Nyt
   dokument fra skabelon" og lyste på Drev-siden, selv om klinikken ikke havde en eneste skabelon
   — et klik gav en tom rude. Reglen hører hjemme HER hos knap-sættet, ikke som en lap på hver
   enkelt side; ellers finder den næste side den samme fælde forfra. */
.knap[hidden]{display:none}
.knap:hover{background:var(--accent-mork)}
.knap svg{width:17px;height:17px;flex:0 0 auto}
.knap.ghost{background:transparent;color:var(--accent);border:1px solid var(--kant)}
.knap.ghost:hover{background:var(--bg)}
.knap.lille{padding:8px 13px;font-size:13.5px;gap:6px}
.knap.lille svg{width:15px;height:15px}
.knap.stor{padding:13px 20px;font-size:16px}
.knap.sekundaer{background:var(--kort);color:var(--tekst);border:1px solid var(--kant)}
.knap.sekundaer:hover{background:var(--bg)}
.knap.fare{background:#fff;color:var(--rod);border:1px solid #f0c9c5}
.knap.fare:hover{background:#fdecea}
.knap.gron{background:var(--gron)}
.knap.gron:hover{background:#0f6f2b}
.knap:disabled{opacity:.55;cursor:default}
/* EN SLUKKET KNAP MÅ IKKE VÅGNE UNDER MUSEN (19-10-2026). .knap:hover kendte ikke til
   :disabled, så en nedtonet knap blev alligevel mørkere, når man kom hen over den — og så ser
   den ud til at kunne trykkes. Hver variant skal sige fra for sig, fordi de har hver sin bund. */
.knap:disabled:hover{background:var(--accent)}
.knap.ghost:disabled:hover{background:transparent}
.knap.sekundaer:disabled:hover{background:var(--kort)}
.knap.gron:disabled:hover{background:var(--gron)}

/* Forside (modul-kort) */
.app-wrap{max-width:1080px;margin:0 auto;padding:28px 16px 60px}
.app-hilsen{font-size:22px;font-weight:700;margin:0 0 4px}
.app-sub{color:var(--svag);margin:0 0 22px}
.modul-afsnit{margin:0 0 28px}
.modul-afsnit[hidden]{display:none}
.afsnit-titel{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--svag);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--kant)}
/* FORSIDENS OVERSKRIFTER (Martin, 11-10-2026). ÉN stil til dem alle: ikon i accentfarven, navnet
   i almindelig skrift. Den gamle .afsnit-titel — graa versaler med en streg under — bliver, hvor
   den hoerer hjemme inde i modulerne; paa forsiden stod den ved siden af de nye felters
   overskrifter og lignede noget fra et andet aar. Soegefelterne (public/soegefelt.js) bruger
   PRAECIS denne regel, saa der kun findes een. */
.forside-titel{display:flex;align-items:center;gap:8px;margin:0 0 9px 2px;
  font-size:15px;font-weight:700;color:var(--tekst)}
.forside-titel svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.moduler{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.modul{display:block;background:var(--kort);border:1px solid var(--kant);border-radius:12px;padding:20px;text-decoration:none;color:var(--tekst);transition:.12s}
.modul:hover{border-color:var(--accent);box-shadow:0 4px 16px rgba(26,115,232,.10);transform:translateY(-2px)}
.modul .ikon{color:var(--accent);height:32px;display:flex;align-items:center}
.modul .ikon svg{width:30px;height:30px;stroke-width:1.75}
h1 svg,h2 svg{width:1.05em;height:1.05em;vertical-align:-0.14em;stroke-width:2}
.modul .navn{font-weight:700;font-size:17px;margin-top:10px}
.modul .beskr{color:var(--svag);font-size:13.5px;margin-top:4px}
.modul .badge{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;color:var(--accent);background:#eaf1fe;border-radius:20px;padding:2px 9px}
@media(max-width:560px){
  .app-wrap{padding:20px 14px 50px}
  .app-hilsen{font-size:20px}
  .moduler{grid-template-columns:1fr;gap:12px}
  .modul{padding:16px}
}

/* Onboarding-status-linje (grøn=gennemført til højre, rød=mangler til venstre) — delt af backoffice + Brugere */
.stbar{display:flex;vertical-align:middle;width:100%;max-width:104px;min-width:48px;height:8px;border-radius:5px;overflow:hidden;background:#e5e7eb}
.stbar-rod{background:#dc4c3e}
.stbar-gron{background:#2e9e5b}

/* STEMPELURET (Martin, 09-08-2026): en lille, rolig markering nederst til venstre, når man er
   stemplet ind. Den skal kunne ses ud af øjenkrogen — ikke tage opmærksomhed. Ét klik stempler ud.
   Nederst TIL VENSTRE, fordi chat-boblen og opgave-fanen bor i højre side. */
  .stempel-ur{position:fixed;left:14px;bottom:16px;z-index:54;display:flex;align-items:center;gap:8px;
    background:var(--kort);border:1px solid var(--kant);border-radius:24px;padding:7px 14px 7px 11px;cursor:pointer;
    font:inherit;color:var(--tekst);box-shadow:var(--skygge-let,0 4px 16px rgba(0,0,0,.08))}
  .stempel-ur:hover{border-color:var(--accent)}
  .stempel-ur svg{width:15px;height:15px;color:var(--gron,#138a36);flex:0 0 auto}
  .stempel-ur .su-tid{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
  .stempel-ur .su-siden{font-size:11.5px;color:var(--svag)}
  /* KUN ET IKON, INDTIL MAN SPØRGER (Martin, 19-10-2026: "den lille tæller skal kun vises som
     ikon — klikker man på ikonet, folder den sig ud, så man kan se tælleren og stempeltiden").

     Uret stod med tal og klokkeslæt hele dagen nede i hjørnet, og det er oplysninger, man kun
     har brug for et øjeblik ad gangen. Sammenfoldet er det en rund skive på størrelse med
     ikonet; udfoldet er det præcis som før, med "Stempl ud" for enden. */
  .stempel-ur.mini{gap:0;padding:8px;border-radius:50%}
  .stempel-ur.mini .su-tid,.stempel-ur.mini .su-siden,.stempel-ur.mini .su-ud{display:none}
  /* Ikonet ER knappen, der folder ud og ind — resten af ruden er ikke klikbar. */
  .stempel-ur .su-ikon{border:0;background:none;padding:0;margin:0;display:flex;align-items:center;cursor:pointer;color:inherit}
  .stempel-ur .su-ud{border:0;background:var(--bg);color:var(--tekst);border-radius:14px;
    padding:4px 10px;margin-left:2px;font:700 12px/1 inherit;cursor:pointer}
  .stempel-ur .su-ud:hover{background:var(--gron,#138a36);color:#fff}
  @media(max-width:760px){ .stempel-ur{bottom:auto;top:70px;left:8px;padding:5px 11px 5px 9px} .stempel-ur .su-siden{display:none} }

/* DAGENS OPGAVER — SVÆVERUDE PÅ ALLE SIDER (Martin, 05-08-2026).
   Ruden lå før kun på forsiden, men opgaverne venter jo også, mens man står i en journal
   eller i kalenderen. Derfor er den flyttet hertil sammen med telefonen: begge følger med
   overalt. Stilen skal ligge i app.css og ikke i forsidens egen <style>, ellers ville ruden
   stå ustylet på alle andre sider. */
  /* FANEN FLUGTER MED TOPMENUENS KNAPPER (Martin, 19-10-2026: "skal rykke lidt op, så den er
     aligned med knapperne i topmenuen").

     66 px var topmenuens højde SKREVET NED — og den passer kun i ét af tilfældene. Er menuen
     foldet ud (standard), er knapperne 55 px høje og begynder 7 px nede; er der et bånd over
     menuen (manglende kort, prøveperiode), skubbes hele menuen ned. Fanen stod derfor snart
     under menuen, snart midt i den.

     Målet sættes nu af opgave-widgeten, som MÅLER knappernes overkant (se placer() dér). Tallet
     her er kun reserven for sider uden topmenu. */
  .opg-panel{position:fixed;right:0;top:var(--opg-top,66px);z-index:55;display:flex;align-items:flex-start;max-width:min(340px,86vw)}
  /* NEDTONET, NÅR DER INTET ER (Martin, 05-11-2026: «svæveknappen til opgaver skal være
     nedtonet i farve, når der er 0 opgaver … når der ér opgaver, skal farven blive den samme
     lilla som når der er kald i kø i tele-knappen»).
     Fanen stod før i menuens blå hele dagen og skiftede til rødt, når der var noget. Men blåt
     er husets «her er en knap»-farve: en fane, der lyser lige kraftigt, om der er nul eller
     syv opgaver, skal læses hver gang for at sige ingenting. Nu er NUL stille og hvid, og
     farven kommer kun, når den har noget at sige. */
  .opg-panel .opg-fane{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;
    background:var(--kort);color:#9aa3af;border:0;border-radius:12px 0 0 12px;padding:11px 8px;cursor:pointer;
    width:var(--opg-fane);min-height:var(--opg-fanehoej,64px);box-sizing:border-box;justify-content:center;
    font:700 14px/1 'Segoe UI',system-ui,sans-serif;box-shadow:-2px 2px 10px rgba(15,23,42,.14)}
  .opg-panel .opg-fane svg{width:var(--opg-ikon,23px);height:var(--opg-ikon,23px)}
  /* Ikonet sidder i en span, og en INLINE span har et par tiendedeles linje-luft under sig.
     Målt gav det 1 px forskel på de to faners ikoner — usynligt alene, men de to står ved siden
     af hinanden på den samme skærm. Som flex-boks er spanden præcis sit ikon. */
  .opg-panel .opg-mrk{display:flex}
  /* Tallets udseende står ÉT sted, nede ved telefon-fanen: de to faner deler reglen. */
  .opg-panel .opg-krop{width:300px;max-width:100%;max-height:62vh;overflow-y:auto;background:var(--kort);
    border:1px solid var(--kant);border-right:0;border-radius:12px 0 0 12px;padding:14px 16px;
    box-shadow:-4px 4px 22px rgba(15,23,42,.12)}
  .opg-panel.mini .opg-krop{display:none}
  /* ER DER OPGAVER, ER FANEN LILLA — samme farve som telefonens kø (se --venter øverst).
     Før var den RØD, og kun når ruden var foldet SAMMEN. Rød er husets farve for noget, der er
     gået galt; en liste med dagens opgaver er ikke en fejl. Og betingelsen om «foldet sammen»
     er væk: fanen siger, hvor mange der venter, og dét afhænger ikke af, om skuffen står åben. */
  .opg-panel.harventende .opg-fane{background:var(--venter);color:#fff;box-shadow:-2px 2px 12px rgba(124,58,237,.35)}
  .opg-panel .opg-krop h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
  .opg-panel .opg-krop h3 span{flex:1;min-width:0}
  .opg-panel .opg-krop h3>svg{width:16px;height:16px;color:var(--accent);flex:0 0 auto}
  /* Fanen ude i kanten er kun 32 px bred og uden tekst — man skal vide, den er der. Derfor
     sidder minimér også som en tydelig knap i rudens egen overskrift. */
  .opg-panel .opg-minimer{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border:1px solid var(--kant);border-radius:8px;background:none;color:var(--svag);cursor:pointer}
  .opg-panel .opg-minimer:hover{background:var(--bg);color:var(--tekst)}
  .opg-panel .opg-minimer svg{width:16px;height:16px}
  /* VEJEN VIDERE (Martin, 10-11-2026): »nederst i listen skal der være et link «Gå til
     opgaver», og klikkes der på den, så sendes brugeren til opgave-siden«. Ruden viser det,
     der venter på MIG; hele listen — med de afsluttede, sorteringen og «ny opgave» — bor under
     Plan. Uden linket var ruden en blindgyde.
     Den er skrevet som et LINK og ikke en knap: så kan den åbnes i en ny fane, og den ser ud
     som dét, den er — en vej videre, ikke en handling på listen. */
  .opg-panel .opg-gaa{display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--kant);
    color:var(--accent);font-size:13px;font-weight:600;text-decoration:none}
  .opg-panel .opg-gaa:hover{text-decoration:underline}
  .opg-panel .opg-gaa svg{width:15px;height:15px}
  /* På en telefon rykker den ned — men skal blive over chat-boblen i nederste højre hjørne. */
  /* PÅ EN SMAL SKÆRM FLYTTER BEGGE FANER NED. Opgavernes gjorde det i forvejen; telefonen
     skal følge med, ellers står de to i hver sin ende af skærmen og ligner ikke et par.
     Reglen står HER, lige ved siden af sin tvilling, så den ikke bliver glemt næste gang. */
  @media(max-width:760px){.opg-panel{top:auto;bottom:150px}}
  .fk-opg{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;border-bottom:1px solid var(--kant);padding:9px 4px;font:inherit;font-size:13.5px;color:var(--tekst);cursor:pointer;text-align:left;border-radius:6px}
  .fk-opg:last-child{border-bottom:0}
  .fk-opg:hover{background:var(--bg)}
  .fk-opg svg{width:15px;height:15px;color:var(--accent);flex:none}
  .fk-opg svg:last-child{color:var(--svag)}
  /* En kladde, hvis notat stadig skrives i baggrunden — ikonet drejer, så man kan se, der sker
     noget, og teksten er dæmpet, til den er klar. */
  .fk-opg.undervejs .fk-opg-tekst{color:var(--svag)}
  .fk-opg.undervejs>svg:first-child{animation:fkspin 1.1s linear infinite}
  .fk-opg.fejlet>svg:first-child{color:var(--rod,#d93025)}
  @keyframes fkspin{to{transform:rotate(360deg)}}
  /* EN UDBUDT OPGAVE er endnu ingens. Den skal kunne ses til forskel fra sine egne opgaver — man
     skal ikke gå i gang med noget, en kollega allerede sidder med (Martin, 10-08-2026). */
  .fk-opg.udbudt{cursor:default;background:var(--bg)}
  .fk-opg.udbudt>svg:first-child{color:#b06d00}
  /* KLINIKKENS GØREMÅL (Martin, 11-10-2026): manglende ejer, betalingskort, grundabonnement.
     De står øverst og ser anderledes ud end dagens opgaver — de er ikke kommet ind i dag, de
     mangler, og de bliver stående, til tingen er gjort. `haster` = fristen er ved at løbe ud
     eller kreditten er brugt op. */
  .fk-opg.klinik{background:#fff7ed;border-bottom-color:#f5d9a8;margin-bottom:4px;border-radius:8px}
  .fk-opg.klinik:hover{background:#fdeedb}
  .fk-opg.klinik>svg:first-child{color:#b06d00}
  .fk-opg.klinik.haster>svg:first-child{color:var(--rod,#d93025)}
  .fk-opg.klinik .fk-opg-tekst{white-space:normal}
  /* Krydset på de gøremål, man selv må fjerne (to-faktor-opfordringen). Dæmpet, til man er
     henne ved det: det skal kunne findes, men ikke invitere mere end selve opgaven. */
  .fk-goer-luk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
    border:0;border-radius:7px;background:none;color:var(--svag);cursor:pointer;opacity:.6}
  .fk-goer-luk:hover{opacity:1;background:rgba(0,0,0,.06)}
  .fk-goer-luk:disabled{opacity:.3;cursor:default}
  .fk-goer-luk svg{width:14px;height:14px}
  .fk-tag{flex:none;background:var(--accent);color:#fff;border:0;border-radius:20px;padding:4px 11px;
    font:inherit;font-size:12px;font-weight:700;cursor:pointer}
  .fk-tag:hover{background:var(--accent-mork)}
  .fk-tag:disabled{opacity:.6;cursor:default}
  .fk-opg-tid{font-variant-numeric:tabular-nums;color:var(--svag);white-space:nowrap;font-size:12.5px}
  .fk-opg-tekst{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* TRIN-VISNING, MENS DER ARBEJDES (flyttet hertil 10-08-2026).
   Den blev født på AI-notat-siden, da fiktive konsultationer skulle laves: en knap, der bare
   står og er slået fra, får det til at ligne, at systemet er gået i stå. Nu bruger Drev-siden
   den samme til det fiktive AI-dokument, og så hører den hjemme i design-systemet.
   Ulla-appen (ulla-app.html) har sin egen udgave af de her regler og skal blive ved med det:
   den side henter slet ikke app.css, kører sit eget mørke tema uden --accent, og bruger med
   vilje større mål, fordi den sidder på en telefon. Ret man noget her, så husk den. */
.aj-proces{background:#eff4ff;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.aj-trin{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#64748b}
.aj-trin.nu{color:#1e3a8a;font-weight:700}
.aj-trin.klar{color:#166534}
.aj-trin svg{width:15px;height:15px;flex:0 0 auto}
.aj-trin.klar svg{color:#16a34a}
.aj-trin .aj-prik{width:9px;height:9px;border-radius:50%;background:#cbd5e1;flex:0 0 auto;margin:0 3px}
/* (.aj-spin — den blå ring — er afløst af EpJai-mærket 11-10-2026. En snurrende ring kunne stå
   i et hvilket som helst program; mærket siger, hvis program man venter på.) */
/* (Det selvstændige fremdrifts-bånd er afløst af TRIN-SPORET 16-08-2026: fremdriften ligger nu
   i sporets egen streg, så der ikke står to ting og siger det samme. Se public/trinspor.js.) */


/* FILTYPE-MÆRKET (19-10-2026). Samme firkant overalt, hvor en fil vises: 30×19 px, så den
   fylder det samme som det 18-px-ikon, den afløste, og rækkerne står i flugt. Teksten er
   lille og fed — den skal kunne læses, uden at ville læses først. */
.filmrk{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:19px;border-radius:4px;color:#fff;font-size:8.5px;font-weight:800;
  letter-spacing:.02em;line-height:1;font-family:inherit;background:#8a93a0}

/* ===== DER OPTAGES — SAMME MARKERING ALLE TRE STEDER (Martin, 11-08-2026) =====================
   AI-notat, AI-diktafon og AI-dokument optager det samme menneskes stemme. De skal se ens ud, så
   personalet genkender "der optages" med ét blik i stedet for at lære tre udtryk. Rød flade, rød
   pulserende prik, bølger og et ur; på PAUSE bliver kortet gråt, og prikken holder op med at pulse
   — man skal kunne se forskel på "optager" og "står stille" fra den anden ende af et mødebord.
   Reglerne stod før i ai-journal.html og i drev.html hver for sig. De bor her nu, fordi tre sider
   bruger dem: to kopier af den samme farve driver fra hinanden, første gang nogen retter den ene. */
/* ===== SVÆVERUDEN MED OPTAGELSEN (Martin, 09-11-2026) =======================================
   »… så skal optagelsen fortsætte i en svæverude (der altid ligger øverst) der er placéret
    nederst i venstre hjørne.« Og: inde i modulet er den minimeret til en lille rød prik, fordi
   siden dér har sin egen info-bjælke — to flader, der siger det samme, er én for meget.

   VENSTRE HJØRNE ER VALGT: højre side er optaget af Opgaver-fanen og chatten, og en optagelse,
   der lægger sig oven på dem, ville gøre to ting utilgængelige for at vise én.

   z-index 8500: over siden og dens ruder, UNDER husets dialoger (9000+). En optagelse må aldrig
   lægge sig over et spørgsmål, brugeren skal svare på. */
#epjaiOptagRude:empty{display:none}
.epjai-optagrude{position:fixed;left:18px;bottom:18px;z-index:8500;width:214px;
  background:#fff;border:1px solid #fecaca;border-left:4px solid #dc2626;border-radius:12px;
  padding:11px 13px 12px;box-shadow:var(--skygge-svaev,0 10px 28px rgba(20,30,50,.18));
  font-size:13px;color:var(--tekst)}
.epjai-optagrude.pause{border-color:var(--kant);border-left-color:var(--svag)}
.epjai-optagrude .hd{display:flex;align-items:center;gap:8px}
.epjai-optagrude .prik{width:9px;height:9px;border-radius:50%;background:#dc2626;flex:0 0 auto;
  animation:ajPuls 1s infinite}
.epjai-optagrude.pause .prik{background:var(--svag,#667085);animation:none}
.epjai-optagrude .hvad{font-weight:700;color:#991b1b}
.epjai-optagrude.pause .hvad{color:var(--svag)}
.epjai-optagrude .tid{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.epjai-optagrude .hvor{margin:2px 0 9px;font-size:11.5px;color:var(--svag)}
.epjai-optagrude .knapper{display:flex;gap:6px}
.epjai-optagrude .knapper button{flex:1;background:var(--kort);border:1px solid var(--kant);
  color:var(--tekst);border-radius:9px;padding:7px 4px;font:600 12.5px/1 inherit;cursor:pointer}
.epjai-optagrude .knapper button:hover{border-color:var(--accent);color:var(--accent)}
.epjai-optagrude .knapper .stop{border-color:#fecaca;color:#991b1b}
.epjai-optagrude .knapper .stop:hover{background:#fef2f2;border-color:#dc2626;color:#991b1b}
.epjai-optagrude .tilbage{display:block;width:100%;margin-top:7px;background:none;border:0;
  color:var(--accent);font:600 11.5px/1.3 inherit;cursor:pointer;padding:4px 0 0;text-align:left}
/* MINIMERET: en prik, intet andet. Den siger »den kører stadig« og er vejen til at folde ruden
   ud igen, hvis man vil have knapperne frem uden at forlade modulet. */
.epjai-optagprik{position:fixed;left:18px;bottom:18px;z-index:8500}
.epjai-optagprik button{width:15px;height:15px;border-radius:50%;background:#dc2626;border:2px solid #fff;
  box-shadow:var(--skygge-let,0 4px 16px rgba(0,0,0,.08));cursor:pointer;padding:0;
  animation:ajPuls 1s infinite}
.epjai-optagprik.pause button{background:var(--svag,#667085);animation:none}

/* ===== SIDENS OVERSKRIFT ====================================================================
   Martin, 10-11-2026: »alle side-overskrifterne skal være placeret helt ens, have samme font og
   samme fontstørrelse. Ikonet til hver sideoverskrift skal også bruge den samme ikon, som
   knappen i topmenuen har.«

   Hver side havde sin egen regel — .dtitel, .jtitel, .ttitel, .ktitel, .wrf-h1 — og fem kopier
   af den samme overskrift blev til fem overskrifter: Writer stod i 25 px/800 med et andet ikon,
   de øvrige i 21 px/700. Man skifter side og møder en anden skriftstørrelse til det samme.

   IKONET ER TOPMENUENS. Knappen, man trykkede på, og overskriften, man lander i, skal bære det
   SAMME tegn — ellers skal man lære to mærker for ét modul. Writer havde en håndtegnet blyant;
   topmenuen har Lucide 'file-pen'. Reglen håndhæves af test/sideoverskrifter.test.js, som
   holder hvert h1's data-lucide op mod modullisten i topmenu.js.

   BUNDEN ER IKKE EN DEL AF FORMEN: hvor meget luft der skal være UNDER overskriften, afhænger
   af, hvad der kommer — en undertekst hører tæt på sin overskrift, en rude gør ikke. Derfor
   .med-under, og derfor må en side gerne sætte sin egen bundmargen. Alt andet her er fælles. */
.epj-sidetitel{font-size:21px;font-weight:700;letter-spacing:normal;line-height:1.3;
  margin:0 0 16px;display:inline-flex;align-items:center;gap:9px}
.epj-sidetitel svg{width:22px;height:22px;color:var(--accent)}
.epj-sidetitel[title]{cursor:help}
/* En undertekst lige under overskriften hører til den — så rykker de to sammen. */
.epj-sidetitel.med-under{margin-bottom:5px}

/* ===== PAPIRKURVEN NEDERST I LISTEN =========================================================
   Martin, 10-11-2026: »i bunden af Diktatlisten kunne der være en linie med «Papirkurv», som
   kan udvides«. Mekanikken står i public/epjai-papirkurv.js og deles af AI-diktat og AI-notat;
   her står kun, hvordan den ser ud.

   LINJEN ER STILLE, TIL DER ER NOGET I DEN. Den står der altid — en knap, der først dukker op,
   når skaden er sket, er en knap, man ikke ved findes — men den skal ikke kalde på sig selv i
   en liste, man er i gang med at arbejde i. Tallet er gråt ved nul og får husets egen ramme,
   så snart der ER noget at hente tilbage. */
.epj-kurv{border-top:1px solid var(--kant);margin-top:6px}
.epj-kurv-linje{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
  padding:11px 2px;font:600 12.5px/1 inherit;color:var(--svag);cursor:pointer;text-align:left}
.epj-kurv-linje:hover{color:var(--tekst)}
.epj-kurv-linje svg{width:15px;height:15px;flex:0 0 auto}
.epj-kurv-linje .navn{flex:1;min-width:0}
.epj-kurv-linje .antal{font-variant-numeric:tabular-nums;background:var(--bg,#f4f5f7);
  border-radius:10px;padding:1px 8px;font-size:11.5px}
.epj-kurv.har .epj-kurv-linje .antal{background:var(--accent);color:#fff}
.epj-kurv.aaben .epj-kurv-linje .pil{transform:rotate(180deg)}
.epj-kurv-krop{padding:0 2px 10px}
.epj-kurv-hint{margin:0 0 8px;font-size:11.5px;line-height:1.5;color:var(--svag)}
.epj-kurv-tom{margin:0;font-size:12.5px;color:var(--svag)}
.epj-kurv-rk{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--kant)}
.epj-kurv-rk .t{flex:1 1 100%;min-width:0;font-size:12.5px;line-height:1.45}
.epj-kurv-rk .t b{display:block;font-size:13px}
.epj-kurv-rk .t span{color:var(--svag);font-size:11.5px}
.epj-kurv-fod{padding-top:9px;border-top:1px solid var(--kant);margin-top:4px}

/* ===== AFSPILLEREN TIL EN OPTAGELSE =========================================================
   Martin, 10-11-2026: »der skal stå hvor lang lydklippet er, og ellers skal der kun stå «0:00»
   (kun den afspillede tid og ikke total-tiden)«. Browserens egen afspiller skriver altid
   »afspillet / i alt«, og dét kan man ikke lave om på — derfor husets egen. Mekanikken står i
   public/epjai-lyd.js; her står kun, hvordan den ser ud.

   TRE DELE OG IKKE MERE: afspil, hvor er jeg, hvor langt er jeg. Hastighed og download hørte
   til i browserens menu og bliver ikke savnet i et diktat. */
.epj-lyd{display:flex;align-items:center;gap:10px;background:var(--bg,#f4f5f7);
  border:1px solid var(--kant);border-radius:10px;padding:8px 12px}
.epj-lyd-knap{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--kant);border-radius:50%;background:var(--kort);
  color:var(--accent);cursor:pointer;padding:0}
.epj-lyd-knap:hover{border-color:var(--accent)}
.epj-lyd-knap svg{width:16px;height:16px}
.epj-lyd-spole{flex:1;min-width:40px;height:4px;accent-color:var(--accent,#1a73e8);cursor:pointer}
/* Kan der ikke spoles (en gammel optagelse uden længde i filen), siger bjælken det ved at være
   slået fra — i stedet for at ligge og se klikbar ud. */
.epj-lyd-spole:disabled{cursor:default;opacity:.45}
.epj-lyd-tid{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--svag);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== RUDENS OVERSKRIFT: HVAD STÅR JEG I, OG HVORNÅR ER DET FRA ============================
   Martin, 10-11-2026: »de 2 overskrifter skal være ens i design og være placeret ens.«

   AI-notat skrev »⏱ Notat · 09-11-2026 kl. 06:55« med et blåt ikon; AI-diktat skrev »Diktat«
   uden ikon og lagde navn og tidspunkt i en dæmpet linje ved siden af — med en kortere dato
   (09-11 22:08) end husets egen. Og rækken omkring dem stod med 10 px under det ene sted og
   12 px det andet, fordi notatet satte sin egen margen oven i den fælles. Samme oplysning, to
   udtryk: man skifter modul og skal læse forfra for at finde, hvad man ser på.

   FORMEN ER DEN SAMME, INDHOLDET ER HVERT SIT: begge siger SLAGSEN og HVORNÅR. Diktatet siger
   desuden HVEM der dikterede — en sekretær arbejder sig gennem andres diktater, og dér er
   navnet ikke pynt. Det står dæmpet lige efter tidspunktet, så de to overskrifter stadig
   begynder ens.

   `flex:1` hører med til formen: den skubber det, der kommer EFTER overskriften i rækken
   (demo-mærket i notatet, varigheden i diktatet), ud til højre kant begge steder. */
.epj-rudetitel{margin:0;font-size:16px;flex:1;display:flex;align-items:center;gap:8px;min-width:0}
.epj-rudetitel svg{width:17px;height:17px;color:var(--accent);flex:0 0 auto}

/* ===== AFSNITTET, MAN ARBEJDER PÅ ===========================================================
   AI-notat og AI-diktat viser det samme: et notat delt i afsnit, hvor man klikker ind i dét,
   man vil rette, og justér-knapperne står under det.

   FORMEN STÅR HER, FORDI DEN DREV FRA HINANDEN (Martin, 10-11-2026: »i diktat skal
   justérknapperne være som i notat, og i diktat skal baggrunden også være hvid, da den er
   valgt (ligesom i notat)«). De to sider havde hver sin kopi af den samme kasse, og så skete
   præcis dét, man kan regne med: polstringen blev 11/14 det ene sted og 10/13 det andet, det
   valgte afsnit fik lys bund i notatet og LYSEBLÅ bund i diktatet, og »valgt« stod som grå
   tekst det ene sted og som en blå pille det andet. Ingen af delene var besluttet — de var
   bare ikke rettet samme sted.

   DET VALGTE AFSNIT HAR HVID BUND OG BLÅ KANT HELE VEJEN RUNDT. De andre står på husets grå:
   det valgte skal være det lyse, man læser i, ikke det farvede, man kigger på.

   MÅLT, IKKE GÆTTET (10-11-2026): knapperne er ens i de to moduler — 84+102+111+108 px — men
   diktatets tekstspalte var 421 px og notatets 438, og dét er forskellen på én og to rækker
   knapper. Spaltens bredde afgøres af justér-ruden ved siden af, og den stod 200 px i diktat
   og 172 i notat. Derfor ét tal, --just-rude, som begge sider bruger. */
:root{ --just-rude:172px }
.epj-afs{background:var(--bg,#f6f8fb);border:1px solid var(--kant);border-left:3px solid var(--kant);
  border-radius:10px;padding:10px 13px;cursor:pointer;transition:border-color .12s,background .12s}
.epj-afs:hover{border-color:#c9d6ea;border-left-color:#c9d6ea}
.epj-afs h5{margin:0 0 4px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:6px}
.epj-afs .krop{font-size:14px;line-height:1.55;white-space:pre-wrap;color:var(--tekst)}
.epj-afs.valgt{border-color:var(--accent);border-left-color:var(--accent);background:var(--kort)}
/* »valgt« står yderst til højre i overskriften — en stille oplysning, ikke et mærkat. Kassen
   siger det i forvejen med sin kant; ordet er der for den, der skal være sikker. */
.epj-afs h5 .valgt-mrk{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--svag)}
/* MAN SKRIVER DIREKTE I TEKSTEN — OG DER KOMMER INGEN RAMME OM DEN (Martin, 10-11-2026:
   »den sorte ramme i diktat og den blå ramme i notat … de skal begge fjernes. Altså skal der
   ikke være en ramme rundt om teksten, når man klikker ind i teksten«).

   De to rammer var ikke engang den samme fejl. Notatet tegnede sin egen blå ring med en
   box-shadow; diktatet tegnede ingenting, og så satte browseren sin egen sorte streg om feltet,
   fordi reglen kun stod i notatets side. To moduler, to rammer, ét sted at rette.

   TEKSTEN ER I FORVEJEN MARKERET: man klikker ind i DET afsnit, man vil rette, og afsnittet
   står med blå kant hele vejen rundt, hvid bund og »valgt« i overskriften. En ramme mere inden
   i den siger det samme en gang til — og en kasse om teksten får den til at ligne et felt i en
   formular i stedet for et notat, man skriver i. Markøren blinker, hvor man skriver; dét er
   svaret på »hvor er jeg«. */
.epj-afs .krop[contenteditable]{cursor:text;border-radius:6px;padding:2px 4px;margin:-2px -4px;outline:0}
.epj-afs .krop[contenteditable]:hover{background:rgba(26,115,232,.045)}
.epj-afs .krop[contenteditable]:focus{background:var(--kort)}
.epj-afs .krop[contenteditable]:empty::before{content:'Skriv her …';color:var(--svag);opacity:.7}

/* ===== JUSTÉR-KNAPPERNE BOR UNDER AFSNITTET =================================================
   AI-notat (Martin, 05-08-2026) og AI-diktat (Martin, 09-11-2026: »knapperne til justering af
   et diktat skal flyttes ind i ruden med diktat-teksten, ligesom designet er på notat«).

   HVORFOR DE SKAL VÆRE DÉR: knapperne arbejder på ÉT afsnit. Stod de i en rude ved siden af,
   skulle ruden sige, hvilket afsnit de ramte — og så er der to steder at læse, hvor der kun er
   én ting at vide. Står de under afsnittet, er svaret, hvor hånden er.

   RÆKKEN VISES KUN PÅ DET VALGTE AFSNIT. Fire knapper under hvert afsnit ville være en mur af
   knapper i stedet for en tekst, man kan læse.

   FORMEN STÅR HER OG IKKE I DE TO SIDER. To kopier af den samme række driver fra hinanden,
   første gang nogen retter den ene — og netop dét var ønsket: at de to moduler ser ens ud. */
.epj-am{display:none;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--kant)}
.valgt > .epj-am{display:flex}
.epj-am button{background:var(--kort);border:1px solid var(--kant);color:var(--tekst);border-radius:9px;
  padding:7px 12px;font:600 13px/1 inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.epj-am button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.epj-am button:disabled{opacity:.45;cursor:default}
.epj-am button svg{width:14px;height:14px}

.aj-optag{display:flex;align-items:center;gap:10px;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:11px 14px;font-size:14px;color:#991b1b;font-weight:600}
.aj-optag.pause{background:var(--graa-bjaelke,#e4e8ee);border-color:var(--graa-bjaelke-kant,#ccd3dc);color:#3f4854}
/* BJÆLKEN STÅR OGSÅ I HVILE (Martin, 09-11-2026: »info-bjælken skal også være synlig, når der
   ikke er startet en optagelse. I den tilstand skal den vises i grå, og teksten «Klar til at
   optage» skal stå inde i bjælken«).
   HVORFOR DET ER MERE END PYNT: bjælken dukkede før op FØRSTE gang man trykkede optag, og så
   voksede rækken, og alt nedenunder hoppede. Nu står formen der hele tiden og skifter kun farve
   og indhold — det er den samme flade, der skifter tilstand, ikke en ny flade, der kommer til.

   BJÆLKEN SKAL KUNNE SES (Martin, 09-11-2026: »Bjælken skal være mørkere, så den er mere
   tydelig i forhold til baggrunden«). Den stod i --bg (#f4f5f7) på en hvid flade — tre trin fra
   hvid, og dermed knap nok en bjælke: på et skærmbillede lignede den en tom kasse, nogen havde
   glemt. Den har nu husets egen grå (--graa-bjaelke, samme familie som de grå underkort under
   sværeruderne), så formen er der, FØR der sker noget i den. Farven står ÉT sted og deles af
   hvile og pause: to grå, der skal ligne hinanden, driver fra hinanden første gang nogen retter
   den ene. */
.aj-optag.klar{background:var(--graa-bjaelke,#e4e8ee);border-color:var(--graa-bjaelke-kant,#ccd3dc);color:#3f4854;font-weight:600}
/* DER ARBEJDES (Martin, 09-11-2026: »når en lydfil transkriberes, skal teksten der beskriver
   at det er det den gør, vises i en rude (info-bjælken) med lyseblå farve«).
   Det er den SAMME bjælke, der skifter tilstand — grå i hvile, rød mens der optages, lyseblå
   mens der arbejdes, rød-på-lys ved en fejl. Fire farver på én flade, ikke fire flader. Før
   stod teksten nøgen i rækken i AI-diktat, og så skrumpede bjælken væk under den, netop i det
   øjeblik hvor man venter og kigger på den. */
.aj-optag.arbejder{background:#eaf2ff;border-color:#c7dcff;color:#1e3a8a}
.aj-optag.fejlbjaelke{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.aj-prik{width:9px;height:9px;border-radius:50%;background:#dc2626;flex:0 0 auto;animation:ajPuls 1s infinite}
.aj-optag.pause .aj-prik{background:var(--svag,#667085);animation:none}
@keyframes ajPuls{0%,100%{opacity:1}50%{opacity:.25}}
.aj-boelge{display:flex;align-items:flex-end;gap:2px;height:14px}
.aj-boelge i{width:2px;background:#dc2626;border-radius:1px;animation:ajBoelge .9s ease-in-out infinite}
@keyframes ajBoelge{0%,100%{height:3px}50%{height:14px}}
.aj-optag.pause .aj-boelge{display:none}
/* BØLGEN FØLGER DEN, DER TALER (Martin, 09-11-2026: »det lille lyd-ikon skal være lydfølsomt«).
   Måleren (public/lydniveau.js) sætter --lydniveau på status-linjen; når den er i gang, får
   linjen klassen .lydmaalt, og stregerne holder op med at danse efter et ur og retter sig efter
   lyden i stedet.
   VARIABLEN SIDDER PÅ VÆRTEN, ikke på stregerne: markeringen tegnes om hvert halve sekund for
   urets skyld, så stregerne er nye elementer hele tiden — en skrivning direkte på dem ville
   miste sit greb ved hver tegning. Arv overlever.
   DE FIRE STREGER SVARER IKKE ENS. Med én fælles højde ville de se ud som én bred klods, der
   går op og ned; de små forskelle er dét, der får den til at ligne lyd. */
.lydmaalt .aj-boelge i{animation:none;height:calc(3px + 11px * var(--lydniveau, .12))}
.lydmaalt .aj-boelge i:nth-child(1){height:calc(3px + 7px * var(--lydniveau, .12))}
.lydmaalt .aj-boelge i:nth-child(3){height:calc(3px + 9px * var(--lydniveau, .12))}
.lydmaalt .aj-boelge i:nth-child(4){height:calc(3px + 6px * var(--lydniveau, .12))}
.aj-tid{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700}


/* ===== SKABELON-RUDEN — FÆLLES FOR AI-NOTAT OG AI-DOKUMENT (Martin, 12-08-2026) — samme form som "Nyt dokument" i AI-dokument: lille
   versal-mærkat øverst, og rækker med ikon, fed titel og en grå linje under. De tre AI-optagelser
   skal ligne hinanden, og de otte navne alene fortalte ikke, hvad man vælger.
   I hverdagen står KUN den valgte; "Skift skabelon" folder de øvrige ud i to spalter. */
.skabrude{background:var(--kort);border:1px solid var(--kant);border-radius:14px;padding:14px}
.skabrude .mrk{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--svag);padding:2px 4px 10px}
.skabgitter{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.skabgitter.en{grid-template-columns:1fr}
@media(max-width:760px){ .skabgitter{grid-template-columns:1fr} }
.skabvalg{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--kant);background:var(--kort);border-radius:12px;padding:12px 14px;font:inherit;color:var(--tekst)}
.skabvalg:hover{border-color:var(--accent);background:var(--bg)}
.skabvalg .ik{width:19px;height:19px;color:var(--accent);margin-top:2px;flex:none}
.skabvalg .navn{font-size:14px;font-weight:700;display:block}
.skabvalg .und{display:block;font-size:12.5px;font-weight:500;color:var(--svag);margin-top:2px;line-height:1.5}
.skabvalg.valgt{background:#e8f0fe;border-color:#bcd4fb}
.skabvalg.klar{background:#eaf7ee;border-color:#bfe3c9}
.skabvalg.klar .ik{color:#16a34a}
/* Mærkaterne står i en søjle ude til højre: VALGT øverst, "Skift" nederst (Martin, 12-08-2026).
   Skift-knappen sad før UDEN FOR ruden — men det er rækken, man kigger på, og så skal vejen videre
   være dér. To pilleformer, samme familie: den fyldte siger hvad der ER, den åbne hvad man KAN. */
.skabhj{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  align-self:stretch;gap:8px;flex:none}
.skabvalg .flag{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:2px 8px;border-radius:20px;flex:none;white-space:nowrap}
.skabvalg .skiftpil{font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:2px 10px;border-radius:20px;
  border:1px solid var(--accent);background:var(--kort);color:var(--accent);white-space:nowrap;flex:none}
.skabvalg:hover .skiftpil{background:var(--accent);color:#fff}
.skabvalg.valgt .flag{background:var(--accent);color:#fff}
.skabvalg.klar .flag{background:#16a34a;color:#fff}
.skabfod{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 4px 2px;font-size:12.5px;color:var(--svag)}
.skabskift{margin-left:auto;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--kant);
  background:var(--kort);border-radius:10px;padding:8px 13px;font:inherit;font-size:13.5px;font-weight:650;
  color:var(--tekst);cursor:pointer}
.skabskift:hover{border-color:var(--accent)}
.skabskift .ik{width:15px;height:15px;color:var(--accent)}


/* ===== EPJAI-MÆRKET — INDLEJRET KOPI af public/epjai-logo.css =================
   Siderne, der bruger mærket som ventetegn, henter app.css og ikke logo-pakken. Reglerne
   herunder er ORD FOR ORD de samme som i pakken, og porten sammenligner dem — rettes det
   ene sted, fejler prøven, til det andet følger med.
   FAST REGEL: som ventetegn er mærket 50 % gennemsigtigt (klassen .henter).
   ============================================================================ */
.epjai-maerke{display:inline-block;position:relative;width:2.1em;height:1.62em;vertical-align:middle;
  font-weight:700;letter-spacing:-.01em;line-height:1}
.epjai-maerke .side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:.3em;background:#1a73e8;color:#fff;font-size:.86em;transform-origin:50% 50%;
  animation:epjai-vend-for 3.6s cubic-bezier(.5,0,.5,1) infinite}
.epjai-maerke .bag{transform:scaleX(0);animation-name:epjai-vend-bag}
/* FAST REGEL: som ventetegn er mærket halvt gennemsigtigt — se forklaringen ovenfor. */
.epjai-maerke.henter{opacity:.5}
@keyframes epjai-vend-for{
  0%,40%{transform:scaleX(1);filter:brightness(1)}
  48%,90%{transform:scaleX(0);filter:brightness(.82)}
  98%,100%{transform:scaleX(1);filter:brightness(1)}
}
@keyframes epjai-vend-bag{
  0%,44%{transform:scaleX(0);filter:brightness(.82)}
  52%,86%{transform:scaleX(1);filter:brightness(1)}
  94%,100%{transform:scaleX(0);filter:brightness(.82)}
}
/* Har man slået bevægelse fra i sit system, står mærket stille med "Ep" — aldrig tomt. */
@media(prefers-reduced-motion:reduce){
  .epjai-maerke .side{animation:none}
  .epjai-maerke .bag{transform:scaleX(0)}
}

/* TELEFONEN I TOPMENUEN (Martin, 15-10-2026 — omtegnet 16-10-2026).
   Den skal kunne findes, for den er den ene, man rammer med en patient i røret. Men den var en
   MÆTTET grøn flade, og menuen taler ikke sådan: hvert punkt er et ikon og et ord i gråt, og de
   fremhævede — Forside og AI-gruppen — er markeret med en LYS flade, ikke med en farve, der
   råber. En knap fra en dialog midt i en menu ser forkert ud, uanset hvor pænt grønt er.
   Derfor samme FORM som menuens aktive punkt (lys flade, farvet ikon, farvet tekst) — bare grøn
   i stedet for blå. Den skiller sig ud ved at være den eneste grønne, ikke ved at være den
   eneste flade. Og så kan ikonet have naboernes størrelse: den nedskalering, der skulle gøre op
   for hvid streg på mættet grønt, er der ikke brug for mere.
   Køens tal skrives af telefon-widgeten (public/telefon-widget.js), som alligevel henter køen. */
.navlink.groen { position: relative; }
/* FLADEN ER MARKERINGEN, IKKE MÆRKET (Martin, 17-10-2026).
   Knappen havde en lysegrøn flade HELE TIDEN. Men i denne menu betyder en flade ét: "du står
   her". Alle de andre punkter er bare ikon og ord, til man vælger dem. En knap, der altid bærer
   aktiv-markeringen, ser ud, som om man altid er på telefonen — og så siger markeringen
   ingenting, heller ikke når man faktisk ER der.
   Så: ingen flade, før man står på siden. Telefonen kan stadig findes på det grønne blæk —
   den er menuens eneste — og køens røde tal siger til, når der er nogen at tage.
   Reglerne gentages med `.topnav a` foran, fordi `.topnav .navlink{color:var(--svag)}` er ét
   element stærkere end `.navlink.groen` — uden det vinder menuens grå tekstfarve, og så stod
   "Telefon" gråt (Martin, 15-10-2026: "knap-teksten skal kunne læses"). */
.topnav .navlink.groen { color: #0f6e2c; }
.topnav .navlink.groen .navtekst { color: #0f6e2c; }
.topnav .navlink.groen > svg { color: var(--gron, #138a36); }
/* Samme svar på mus-over som naboerne — ellers ville den igen være den ene, der opfører sig
   anderledes. Kun blækket er grønt. */
.topnav .navlink.groen:hover { background: var(--bg); color: #0b5a24; }
/* Og DÉR er fladen: når man står på telefon-siden. Grøn i stedet for menuens blå, så den ikke
   skifter farve, lige i det øjeblik man er inde i den. */
.topnav .navlink.groen.aktiv { background: #d2ead9; color: #0b5a24; }
.topnav .navlink.groen.aktiv .navtekst { color: #0b5a24; }
.topnav .navlink.groen.aktiv > svg { color: #0f6e2c; }
/* KUN FARVEN (Martin, 26-10-2026). Her stod målene også — top/right/størrelse/radius/linjehøjde —
   og de var 4 px og 1 px fra de andres. Så sad telefonens tæller højere end Writers, og de to
   lignede ikke det samme. Formen bor ét sted (.topnav .navlink .navtal); her står kun, at
   telefonens er RØD: et opkald, der venter, er en alarm, hvor to åbne dokumenter er en oplysning. */
.topnav .navlink.groen .navtal { background: var(--rod, #c0392b); }

/* ===== INDSTILLINGERNES RÆKKER (Martin, 22-10-2026) =========================================
   "Jeg vil gerne, at designet i indstillinger, på alle sider og ruder, er så ensartet som
   muligt." To former, og ikke flere:

     1) EN TIL/FRA-RÆKKE: navn + en kort forklaring til venstre, en KONTAKT til højre. Et
        flueben siger "sæt mærke"; en kontakt siger "tændt eller slukket" — og det er dét,
        indstillingen handler om. Derfor er overskriften skrevet som en tilstand ("Alle opkald
        går til sekretærkøen"), ikke som en handling ("Lad alle opkald gå …").

     2) EN VÆRDI-RÆKKE: navn + forklaring til venstre, den GÆLDENDE værdi dernæst, og en blyant
        til højre. Et åbent felt midt i en rude ser ud, som om man er i gang med at skrive, og
        man kan ikke se, hvad der egentlig gælder, uden at læse feltets indhold. Værdien står
        nu som tekst, og man retter den bevidst i en popup.

   Kontakten er en almindelig <input type="checkbox"> med en anden maling på. Det er med vilje:
   al den JavaScript, der i forvejen læser `.checked` og lytter på `change`, virker uændret. */
.epj-rk{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--kant)}
.epj-rk:last-of-type{border-bottom:0}
.epj-rk-tekst{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.epj-rk-navn{font-weight:600;font-size:14px;color:var(--tekst)}
.epj-rk-hj{font-size:12.5px;color:var(--svag);line-height:1.5}
.epj-rk-vaerdi{font-weight:600;font-size:14px;color:var(--tekst);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.epj-rk-vaerdi.tom{font-weight:400;color:var(--svag);font-style:italic}
/* Hele rækken kan klikkes, når den bærer en kontakt — målet skal være større end 44 px. */
label.epj-rk{cursor:pointer}
label.epj-rk:hover .epj-rk-navn{color:var(--accent)}

/* KONTAKTEN. */
.epj-kontakt{appearance:none;-webkit-appearance:none;margin:0;border:0;flex:0 0 auto;
  width:44px;height:26px;border-radius:999px;background:#c9cdd3;position:relative;cursor:pointer;
  transition:background .15s ease}
.epj-kontakt::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .15s ease}
.epj-kontakt:checked{background:var(--accent)}
.epj-kontakt:checked::after{transform:translateX(18px)}
.epj-kontakt:disabled{opacity:.45;cursor:default}
.epj-kontakt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* En kontakt, der betyder "luk noget af", er rød, når den er slået til. */
.epj-kontakt.fare:checked{background:var(--rod)}

/* Blyanten i en værdi-række. `.ikonknap` findes kun på nogle sider, så rækken har sin egen. */
.epj-rk-ret{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:34px;height:34px;border:1px solid var(--kant);border-radius:9px;background:var(--kort);
  color:var(--svag);cursor:pointer}
.epj-rk-ret:hover{background:var(--bg);color:var(--accent);border-color:var(--accent)}
.epj-rk-ret svg{width:16px;height:16px}
@media (max-width:560px){
  .epj-rk{flex-wrap:wrap}
  .epj-rk-vaerdi{max-width:none;text-align:left;flex:1}
}

/* ===== SVÆVEKNAPPEN I INDSTILLINGER (Martin, 22-10-2026) ====================================
   Én Gem-knap for hele siden, centreret i bunden — og den findes KUN, når der er noget at
   gemme. Dens tilstedeværelse er selve beskeden: "du har noget ugemt". En knap, der står fast
   nederst i sin egen rude, er enten uden for skærmen (så man ruller forbi og tror, det var
   gemt) eller altid synlig (så man ikke kan se, OM der er noget at gemme). */
#epjaiGemLinje{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:7000;
  display:flex;align-items:center;gap:10px;background:var(--kort);border:1px solid var(--kant);
  border-radius:999px;padding:9px 10px 9px 18px;box-shadow:0 10px 30px rgba(0,0,0,.18);
  max-width:calc(100vw - 32px);animation:epjaiGemOp .16s ease-out}
#epjaiGemLinje[hidden]{display:none}
@keyframes epjaiGemOp{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
#epjaiGemLinje .gl-tekst{font-size:13.5px;font-weight:600;color:var(--tekst);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
#epjaiGemLinje button{font:inherit;font-size:13.5px;font-weight:700;border-radius:999px;cursor:pointer;
  padding:9px 18px;border:1px solid transparent;white-space:nowrap}
#epjaiGemLinje .gl-gem{background:var(--accent);color:#fff}
#epjaiGemLinje .gl-gem:hover{background:var(--accent-mork,#1557b0)}
#epjaiGemLinje .gl-gem:disabled{opacity:.6;cursor:default}
#epjaiGemLinje .gl-fortryd{background:none;color:var(--svag);border-color:var(--kant)}
#epjaiGemLinje .gl-fortryd:hover{background:var(--bg);color:var(--tekst)}
@media (max-width:560px){
  #epjaiGemLinje{left:16px;right:16px;transform:none;border-radius:14px;justify-content:space-between}
  @keyframes epjaiGemOp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
  #epjaiGemLinje .gl-tekst{flex:1;min-width:0}
}

/* ===== RET I RUDEN, IKKE I EN POPUP (Martin, 22-10-2026) ====================================
   "Felterne skal bare blive synlige direkte i ruden eller siden, når man klikker på
   redigér-knappen." Og det er rigtigere end popuppen, jeg byggede først: man retter noget, man
   kan SE i sin sammenhæng, i stedet for at flytte ét felt ud i et vindue, hvor resten af ruden
   er væk. Popuppen bliver stående ét sted — epjaiRet — til det, der IKKE har en rude at stå i.

   Ruden har to tilstande. Uden `.redigerer` står værdierne som tekst; med den bliver felterne
   synlige på nøjagtig samme plads. Rækken flytter sig ikke, så man kan se, hvad man ændrer. */
.epj-kort-hoved{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.epj-kort-ret{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;background:none;
  border:1px solid var(--kant);border-radius:9px;padding:7px 12px;font:inherit;font-size:13px;
  font-weight:600;color:var(--accent);cursor:pointer}
.epj-kort-ret:hover{background:var(--bg)}
.epj-kort-ret svg{width:15px;height:15px}
.epj-kort-ret .ret-luk{display:none}
.epj-kort.redigerer .epj-kort-ret .ret-aabn{display:none}
.epj-kort.redigerer .epj-kort-ret .ret-luk{display:inline}

.epj-rk-felt{display:none;flex:0 0 auto;max-width:46%;min-width:170px;font:inherit;font-size:14px;
  padding:8px 11px;border:1px solid var(--kant);border-radius:8px;background:var(--kort);
  color:var(--tekst);text-align:right}
.epj-rk-felt[type=number]{max-width:130px}
textarea.epj-rk-felt{text-align:left;max-width:none;flex:1;min-height:76px;resize:vertical}
.epj-kort.redigerer .epj-rk-vaerdi{display:none}
.epj-kort.redigerer .epj-rk-felt{display:block}
.epj-kort.redigerer .epj-rk-ret{display:none}
/* En enkelt række kan også have sin EGEN blyant (uden et kort-hoved). Så gælder tilstanden kun
   rækken — fx indtalings-længden, der står alene i sin rude. */
.epj-rk.redigerer .epj-rk-vaerdi{display:none}
.epj-rk.redigerer .epj-rk-felt{display:block}
.epj-rk.redigerer .epj-rk-ret{color:var(--accent);border-color:var(--accent)}
@media (max-width:560px){
  .epj-rk-felt{max-width:none;flex:1;text-align:left}
  .epj-kort-hoved{flex-wrap:wrap}
}

/* ===== TELEFONENS SVÆVEKNAP I BJÆLKEN (Martin, 03-11-2026) =====================================
   «Placér svæveknappen til telefoni helt i toppen, altså i topmenuen, så den står til venstre for
    knappen til Forsiden. Sørg for at der er god plads mellem svæveknappen og forside-knappen.»

   STILEN BOR HER og ikke i telefon-widgeten: bjælken tegner knappen, og den skal være stylet fra
   FØRSTE ØJEBLIK — widgeten hentes bagefter og sætter kun farve, tal og klik.

   SAMME STØRRELSE SOM CHATTENS SVÆVEKNAP (50 px, se .cw-ikon i public/chat-widget.js). De to er
   husets svæveknapper og står på de samme sider; to forskellige mål ville læses som to
   forskellige slags knapper. Ændres den ene, skal den anden følge med — en prøve holder dem
   sammen (test/telefon-aabner-selv.test.js).

   FARVEN BÆRER BESKEDEN: blå = ro, lilla = nogen venter, grøn = du er i kald. Et tal skal LÆSES;
   en farve ses på vej forbi. */
/* FASTGJORT TIL SIDEN SOM OPGAVE-FANEN (Martin, 05-11-2026): «jeg vil gerne have, at
   svæveknappen til telefon er fastgjort til siden, altså ligesom svæveknappen til Opgaver.
   Men den skal være så bred, at det nuværende ikon kan være der.»

   Den var en rund knap INDE i bjælken og fulgte derfor bjælkens flow — den skubbede til
   Forside og flyttede sig, hver gang menuen brød om. Nu ligger den fast i venstre kant,
   spejlvendt af opgave-fanen i højre: samme bredde, samme polstring, samme hjørner, bare
   rundet den anden vej. De to er husets sidefaner og læses som ét par.

   TOPPEN ER OPGAVE-FANENS. `--opg-top` måles af opgave-widgeten på bjælkens egne knapper
   (se placer() i public/opgave-widget.js), så de to faner altid står i samme højde — også
   når et bånd skubber bjælken ned, eller den ruller op og bliver sticky.

   FARVEN BÆRER BESKEDEN: blå = ro, lilla = nogen venter, grøn = du er i kald. Et tal skal
   LÆSES; en farve ses på vej forbi. */
.tw-svaev{position:fixed;left:0;top:var(--opg-top,66px);z-index:55;
  width:var(--opg-fane);box-sizing:border-box;min-height:var(--opg-fanehoej,64px);
  border:0;padding:11px 8px;border-radius:0 12px 12px 0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--accent);color:#fff;box-shadow:2px 2px 12px rgba(26,115,232,.35);transition:background .2s}
/* SKYGGEN SKAL KUNNE SES PÅ EN FARVET FANE (Martin, 05-11-2026: «svæveknappen til opgaver ser ud
   til at have en lille skygge — den samme skygge ser ud til at mangle på svæveknappen til
   telefon»). Den var der: samme 14 % sort, bare spejlvendt. Men en blød grå skygge forsvinder
   langs kanten af en mættet blå flade, mens den står tydeligt om en hvid. Derfor får hver
   farvet tilstand en skygge i SIN EGEN farve — samme greb som opgave-fanen bruger, når den
   bliver lilla. Den nedtonede opgave-fane beholder den grå: på hvidt er det netop den, der virker. */
.tw-svaev:hover{filter:brightness(1.06)}
.tw-svaev svg{width:var(--opg-ikon,23px);height:var(--opg-ikon,23px)}
.tw-svaev.venter{background:var(--venter);box-shadow:2px 2px 12px rgba(124,58,237,.35)}
.tw-svaev.ikald{background:#15803d;box-shadow:2px 2px 12px rgba(21,128,61,.35);animation:tw-puls 1.6s ease-out infinite}
/* Pulsen bærer sin egen grønne skygge — den SKAL skrive hele box-shadow, og derfor står
   hvileskyggen med her i grønt, ellers blinkede den tilbage til den blå. */
@keyframes tw-puls{
  0%{box-shadow:2px 2px 12px rgba(21,128,61,.35),0 0 0 0 rgba(21,128,61,.55)}
  70%{box-shadow:2px 2px 12px rgba(21,128,61,.35),0 0 0 14px rgba(21,128,61,0)}
  100%{box-shadow:2px 2px 12px rgba(21,128,61,.35),0 0 0 0 rgba(21,128,61,0)}}
@media(prefers-reduced-motion:reduce){ .tw-svaev.ikald{animation:none} }
/* TALLET ER ANTALLET I KØEN LIGE NU — ikke et mærke om, at «der er noget». Derfor et tal og ikke
   en prik: tre, der venter, er en anden dag end én.

   OG DE TO FANER VISER DERES TAL ENS (Martin, 05-11-2026: «tællerne i de to svæveknapper skal
   være ens i design»). Telefonens var en hvid pille oppe i hjørnet, opgavernes et tal under
   ikonet — to former for nøjagtig det samme spørgsmål: hvor mange venter på dig. Og pillen sad
   i en fane på 40 px, så den rørte begge kanter og blev skåret af det runde hjørne.

   TALLET STÅR UNDER IKONET i dem begge. Det er dét, fanen er 64 px høj FOR — se --opg-fanehoej
   øverst i filen. Reglen står ÉT sted, så de to ikke kan skride fra hinanden igen.

   OG 14 px, FORDI RESTEN AF HUSET SIGER 14. Telefon-siden har sin EGEN fane med de to
   «tag næste»-lag bag sig (.tw-sp .tw-ikon i telefon-widget.js), og dér har tallet stået
   under ikonet i 14 px, siden fanen blev til. Et tredje tal-udseende ville være løst én
   uensartethed ved at lave en ny. */
.opg-panel .opg-antal,.tw-svaev .tw-svaevtal{
  font:700 14px/14px 'Segoe UI',system-ui,sans-serif;color:inherit;
  font-variant-numeric:tabular-nums;letter-spacing:.2px}
/* `inherit`, IKKE en farve (Martin, 05-11-2026: «man kan ikke se tallet 0 — tænker det er fordi
   fontfarven ikke er det samme som på ikonet»). Her stod #fff, fra dengang begge faner var
   farvede. Da opgave-fanen blev hvid ved nul, blev tallet hvidt på hvidt — og nullet forsvandt.
   Ikonet tegnes med `currentColor` og har aldrig haft problemet. Nu følger tallet det samme
   sted hen: fanens egen `color`. Så kan de to ikke komme fra hinanden igen. */
/* LINJEN STÅR, OGSÅ NÅR DER IKKE ER NOGET AT SIGE. Telefonen skjuler sit tal ved 0 (farven
   siger «ro»), men gjorde linjen det med, rykkede ikonet 8 px ned — og så stod de to faner i
   hver sin højde, hver gang nogen lagde på. Det tomme felt er prisen for, at ikonerne flugter. */
.tw-svaev .tw-svaevtal{min-height:14px}
/* På en smal skærm bryder bjælken om, og 22 px luft bliver til et hul. Dér er 10 nok. */
/* På en smal skærm er pladsen dyrere end symmetrien: begge faner bliver smallere, og
   ikonerne med dem. Målene står ÉT sted, så de to ikke kan skride fra hinanden. */
@media(max-width:860px){ :root{ --opg-fane:34px; --opg-ikon:19px; --opg-fanehoej:60px } }
/* PÅ EN SMAL SKÆRM FLYTTER BEGGE FANER NED. Opgavernes gør det i forvejen (se .opg-panel
   længere oppe, samme 760 px og samme 150 px); telefonen følger med, ellers står de to i
   hver sin ende af skærmen og ligner ikke et par.
   REGLEN STÅR HER OG IKKE OPPE VED SIN TVILLING: .tw-svaev sættes længere nede i filen, og en
   media-regel før den taber på rækkefølgen — så gjaldt BÅDE top og bottom, og knappen blev
   670 px høj (målt 05-11-2026). */
@media(max-width:760px){ .tw-svaev{top:auto;bottom:150px} }

/* CHATTEN SKAL KUNNE NÅS, MENS TELEFONEN ER ÅBEN (Martin, 03-11-2026).
   Telefon-ruden ligger på 3400 og dækker hele skærmen — sidens chat ville ligge under den, og så
   var den eneste chat, der er tilbage, også uden for rækkevidde. Derfor løftes den over ruden,
   men UNDER modaler (3500): en popup, man har åbnet for at svare på noget, skal stadig ligge
   forrest. Se noten i public/telefon.html om, hvorfor der kun er én chat. */
body.tw-stor-aaben #chatw{z-index:3450}

/* ===== FANER — DEN FÆLLES FORM (Martin, 07-11-2026) =========================================
   "Da vi nu snakker faner, så synes jeg godt vi må tænke «faner» ind i designet, altså faner
    som vi fx. viser dem i opkalds-køerne i tele, og i rollegrupperne i kalender."

   Formen er mappefanen: en grå bjælke, hvor den aktive fane er HVID og hænger sammen med
   fladen under sig. Målene er taget ordret fra .tele-kfane (public/telefon-widget.js) og
   .rfaner (public/kalender.html) — 7px 12px polstring, 7px 7px 0 0 i hjørnerne, 600 12px
   skrift, 3px mellemrum, bjælken #e9ecf1 og den aktive #fff.

   DE TO ÆLDRE STEDER ER IKKE SKREVET OM. Det ville være en stor, risikabel ændring i to flader,
   der virker — men tallene må ikke skride fra hinanden, og derfor er der en prøve
   (test/faner-er-ens.test.js), der holder dem op mod hinanden. Næste gang nogen alligevel
   rører Tele eller Kalenderen, flyttes de herind. */
/* Liste-overskrifternes eget tal er fjernet igen (Martin, 09-11-2026): tallet flyttede op på
   knappen i topmenuen, hvor mærket ovenfor i forvejen tegner telefonens og Writers tal.
   Ét mærke, ét sted. (Nævn ikke mærkets klassenavn her — prøvens parser i
   test/topmenu-taellere.test.js læser en kommentar, der gør det, som en selektor.) */

.epj-faner{display:flex;gap:3px;align-items:flex-end;padding:6px 9px 0;overflow-x:auto;
  scrollbar-width:none;background:#e9ecf1;border:1px solid var(--kant);border-bottom:0;
  border-radius:10px 10px 0 0}
.epj-faner::-webkit-scrollbar{display:none}
.epj-faner button{display:flex;align-items:center;gap:7px;padding:7px 12px;border:0;
  border-radius:7px 7px 0 0;font:600 12px/1.3 'Segoe UI',system-ui,sans-serif;cursor:pointer;
  white-space:nowrap;position:relative;top:1px;background:#dfe3ea;color:#5b6675;flex:0 0 auto}
.epj-faner button svg{width:12.5px;height:12.5px;flex:0 0 auto}
.epj-faner button.aktiv{background:var(--kort);color:var(--tekst)}
/* DEN ENESTE MÆRKAT, DER BLIVER STÅENDE (Martin, 07-11-2026): «ikke lavet» på den fane, der
   koster AI-arbejde at træde ind på. Den siger noget, man har brug for at vide FØR man trykker.
   De øvrige tal — længde, ordtal — får man ved at skifte fane, og en bjælke med fire tal i
   bliver bredere end der er plads til i en smal rude. */
.epj-faner button .n{background:#cdd3dc;color:#5b6675;border-radius:20px;padding:1px 7px;
  font:700 10px/1.6 inherit;flex:0 0 auto}
.epj-faner button.ulavet{color:#8b929c}
/* Fladen under fanerne hænger sammen med den aktive fane: ingen rund kant foroven. */
.epj-faneflade{border:1px solid var(--kant);border-top:0;border-radius:0 0 12px 12px;
  background:var(--kort);padding:16px 18px}

/* ===== TO UDKAST (VÆLG AI MODEL) — TO UDKAST, ET VALG (Martin, 08-11-2026) ===================

   "når en bruger kan aktivere … vises dobbeltvalget de næste 10 gange og brugeren kan hver gang
    enten vælge en af modellerne «for dette notat», eller vælge «Vælg denne nu og fremover»."

   Formen er den, Martin valgte (forslag B): to kort side om side med samme ramme som husets
   øvrige kort, en nedtonet bjælke over sig, der siger hvor langt hun er, og ET valg pr. spalte.

   MODELNAVNET MED VERSION ER SPALTENS OVERSKRIFT (Martin): »så det er tydeligt for brugeren om
   det er model1 eller 2 (og hvilken version)« — og så to kolleger kan tale om det samme. Den,
   hun kører på i forvejen, bærer mærket «din nuværende» (.mv-mrk.mv-nu), så hun ikke kommer
   til at «skifte» til det, hun allerede havde. Siden trækkes der lod om på serveren; se
   src/modelforsoeg.js for hvad kliniktallene må bruges til.

   PÅ EN SMAL SKÆRM STÅR DE OVER HINANDEN. To spalter på 320 px er to ulæselige spalter. */
.mv-rude{border:1px solid var(--kant);border-radius:12px;background:var(--kort);overflow:hidden;
  margin:0 0 14px}
.mv-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 13px;
  background:#f3f6fa;border-bottom:1px solid var(--kant)}
.mv-top b{font-size:13px;color:var(--tekst)}
.mv-top .mv-tal{font-size:11.5px;font-weight:700;color:#5b6675;background:#e4e9f0;
  border-radius:20px;padding:2px 9px}
.mv-top .mv-fra{margin-left:auto;font-family:inherit;font-weight:600;font-size:12px;line-height:1;
  background:none;border:0;padding:4px 2px;
  color:#4a5160;text-decoration:underline;cursor:pointer}
.mv-hvorfor{font-size:12.3px;color:var(--svag);line-height:1.5;margin:0;padding:9px 13px 0}
.mv-par{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 13px 13px}
@media (max-width:860px){.mv-par{grid-template-columns:1fr}}
.mv-side{border:1px solid var(--kant);border-radius:11px;background:var(--kort);
  display:flex;flex-direction:column;min-width:0}
.mv-sidetop{display:flex;align-items:center;gap:8px;padding:10px 13px 0}
.mv-sidetop b{font-size:13px}
.mv-mrk{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:#eef1f5;color:#5b6675;border-radius:20px;padding:2px 8px}
.mv-mrk.mv-nu{background:#e8f0fe;color:#1a66cc}
/* INGEN INDRE SCROLL (fast regel; Martin, 09-11-2026). Spalten stod med max-height:46vh og sin
   egen scrollbar, så man skulle rulle i to kasser for at sammenligne to notater, der netop skal
   holdes op mod hinanden — og det, der lå uden for kassen, nåede man aldrig at læse, før man
   valgte. Nu vokser spalterne til den højeste af de to, og siden ruller som én.
   AT KNAPPERNE FLUGTER, FØLGER AF SIG SELV: .mv-side er et grid-element i .mv-par og strækkes
   derfor til rækkens højde, mens .mv-tekst tager pladsen (flex:1 1 auto) og skubber .mv-vaelg
   helt ned. Derfor står »Vælg denne« i samme højde i begge spalter, uanset hvem der skrev mest. */
.mv-tekst{flex:1 1 auto;min-height:0;padding:9px 13px 0;
  font-size:13.3px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.mv-vaelg{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;
  margin-top:11px;padding:11px 13px;border-top:1px solid var(--kant)}
.mv-vaelg .mv-fremover{font-family:inherit;font-weight:600;font-size:12px;line-height:1;
  background:none;border:0;padding:3px 2px;
  color:#4a5160;text-decoration:underline;cursor:pointer}
.mv-vaelg button:disabled{opacity:.5;cursor:default}
/* Mens det andet udkast skrives, står BEGGE spalter dækket. Kom hendes eget frem først, ville
   spalterne hoppe på plads under øjnene på hende, og det, der kom sidst, ville læses som en
   eftertanke. */
.mv-skriver{display:flex;align-items:center;justify-content:center;gap:9px;min-height:120px;
  padding:16px;font-size:12.8px;color:var(--svag);text-align:center}
.mv-skriver .mv-prik{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:mv-puls 1.1s ease-in-out infinite}
@keyframes mv-puls{0%,100%{opacity:.25}50%{opacity:1}}
/* DEN STILLE LINJE UNDER NOTATET: hvem skrev det, og vejen ind i »To udkast«. Den står
   dér, hvor spørgsmålet opstår — ikke i Indstillinger, hvor man aldrig går hen for at
   undre sig over et notat. */
.mv-linje{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.3px;
  color:var(--svag);line-height:1.5;margin:10px 0 0}
.mv-linje button{font-family:inherit;font-weight:600;font-size:12.3px;line-height:1;
  background:none;border:0;padding:3px 2px;
  color:var(--accent);text-decoration:underline;cursor:pointer}
.mv-linje svg{width:13px;height:13px;flex:0 0 auto;color:#8b929c}

/* ===== SYSTEMETS EGNE BEMÆRKNINGER (Martin, 08-11-2026) =====================================

   "ALT af den slags som systemet gør opmærksom på, skal vises på en tydelig måde (fx. en slags
    talebobbel eller lignende, som kan klikkes væk), men UDEN at det står direkte i notatet."

   Formen er en BOBLE, ikke et bånd: et bånd er systemets stemme om hele notatet (»noget
   mangler«), og dem har vi. Det her er en bemærkning om ET sted i teksten — en, der peger. Den
   har derfor en hale og kan klikkes væk, for den er læst, når den er læst.

   DEN LIGNER IKKE JOURNALTEKST. Det er hele pointen: kommer den nogensinde til at ligne en
   sætning i notatet, er vi tilbage ved fejlen. Derfor egen farve, egen skrift og et ikon.

   OG DEN KAN IKKE KOPIERES MED. Boblerne står uden for #notat, så »Kopiér til udklipsholder«
   og »Gem på patient« aldrig kan tage dem med over i en journal. */
.aj-bobler{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.aj-boble{position:relative;display:flex;align-items:flex-start;gap:9px;
  background:#f1f4fe;border:1px solid #c8d4f5;border-radius:12px;padding:10px 12px;
  font-size:12.8px;line-height:1.5;color:#2a3550}
.aj-boble::after{content:"";position:absolute;left:19px;bottom:-7px;width:12px;height:12px;
  background:#f1f4fe;border-right:1px solid #c8d4f5;border-bottom:1px solid #c8d4f5;
  transform:rotate(45deg)}
.aj-boble svg{width:15px;height:15px;flex:0 0 auto;color:#4a63a8;margin-top:1px}
.aj-boble b{font-weight:700}
.aj-boble .aj-boble-luk{margin-left:auto;flex:0 0 auto;background:none;border:0;cursor:pointer;
  color:#5a6a92;font-family:inherit;font-size:16px;line-height:1;padding:1px 3px;border-radius:6px}
.aj-boble .aj-boble-luk:hover{background:#dde5fa;color:#2a3550}
/* Kom ruden uopfordret — udrullet til alle, eller fordi modellen blev skiftet ud — står grunden
   øverst. En flade, der tager skærmen uden at sige hvorfor, er et overgreb, uanset hvor god den
   er. Vejen ud (»Slå To udkast fra«) står lige ved siden af. */
.mv-grund{margin:0;padding:10px 13px;background:#eef3ff;border-bottom:1px solid var(--kant);
  font-size:12.6px;line-height:1.5;color:#2a3550}

/* ===== EN OPTAGE-KNAP, DER IKKE KAN BRUGES, SKAL SE SÅDAN UD (Martin, 08-11-2026) ===========

   Ved tom saldo bliver et klik stoppet med en forklaring, og båndet står rødt i toppen — men
   knappen SÅ stadig ud, som om den virkede. Martin: »ton optag-knappen ned ved tom saldo.«

   Den er tonet ned, ikke slået fra. En knap, der er helt død, svarer ikke på et klik — og så
   står man med en patient og ingen forklaring. Her kan man stadig trykke, og så kommer grunden.
   Markøren siger det samme: ikke »forbudt«, men »spørg mig«. */
.optagknap.spaerret{opacity:.45;filter:grayscale(1)}
.optagknap.spaerret:hover{opacity:.55}
.aj-saldospaer{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 0 0;
  font-size:12.5px;line-height:1.45;color:#7a1710;text-align:center}
.aj-saldospaer svg{width:14px;height:14px;flex:0 0 auto}

/* ===== VALG, DER VENTER (Martin, 08-11-2026) ================================================

   "Har han ikke taget stilling til 5 notater, så skal … brugeren oplyses om, at de 5 valg
    afventer hans valg og at han ved blot en af dem kan vælge at bruge valget på alle."

   Beskeden står ved optage-knappen, hvor øjet lander, når man skal i gang igen — ikke nede ved
   notaterne, hvor man først kommer, når man leder. Den er rolig, så længe køen er kort, og
   skifter farve ved loftet, hvor der ikke længere laves nye dobbeltvisninger.

   Den SPÆRRER ikke: knappen over den virker. Et bogholderi må aldrig stå mellem en læge og en
   patient — derfor er det her en besked, ikke en bom. */