/* Epikur — farver og typografi fra desktop-appens DESIGN.md.
   CSS er den eksekverbare kilde. Epikur har kun ét tema: mørkt. */

:root{
  --paper:#1c2420; --ui-surface:#252f28; --ink:#eeeade; --muted:#a3b0a2;
  --ui-border:#3c493e; --ui-wash:#2d392f; --ui-user:#27342c; --ui-accent:#c3d3b3;
  --attention:#dfc28d; --sidebar:#122e24; --brass:#d3b777;
  --shadow:0 12px 32px #00000055; color-scheme:dark;
}
:root{
  --sidebar-ink:#e7ecdf; --sidebar-muted:#a9b9aa; --sidebar-accent:#d7dfc7;
  --sidebar-hover:#ffffff0b; --sidebar-line:#ffffff19;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:8px; --reading:790px; --rail:244px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:flex; background:var(--paper); color:var(--ink);
  font:14px/1.85 var(--sans); -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------- navigation */

.sidebar{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:5;
  display:flex; flex-direction:column; padding:18px 16px 12px;
  background:var(--sidebar); color:var(--sidebar-ink);
}
.sidebar .brand{
  display:block; padding:0 8px; margin:0 0 16px;
  font:29px/1 var(--serif); letter-spacing:-1.1px;
  color:var(--sidebar-ink); text-decoration:none;
}
.sidebar .brand-period{color:var(--sidebar-accent)}

.ny-opgave{
  display:block; width:100%; min-height:42px; padding:10px 12px; margin:0 0 18px;
  border:1px solid var(--sidebar-accent); border-radius:7px;
  background:var(--sidebar-accent); color:#18382d;
  font:550 12px/20px var(--sans); text-align:center; text-decoration:none; cursor:pointer;
}
.ny-opgave:hover{background:#e3e9d8; border-color:#e3e9d8}

.sidebar-group{margin:0 0 4px}
.sidebar-group h2{
  margin:14px 8px 6px; font:500 10px/1.6 var(--sans); letter-spacing:.09em;
  text-transform:uppercase; color:var(--sidebar-muted);
}
.sidebar nav{display:flex; flex-direction:column; gap:1px}
.sidebar nav a{
  display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:6px;
  color:var(--sidebar-ink); font-size:12.5px; text-decoration:none; opacity:.82;
}
.sidebar nav a:hover{background:var(--sidebar-hover); opacity:1}
.sidebar nav a[aria-current="page"]{background:#ffffff14; opacity:1; font-weight:550}
.sidebar nav a .dot{
  width:5px; height:5px; flex:none; border-radius:50%; background:var(--sidebar-accent); opacity:.5;
}
.sidebar nav a[aria-current="page"] .dot{opacity:1}

/* Medarbejdere og samtaler ruller; resten af søjlen står fast, så grenene
   kan vokse ud over kanten uden at blive klippet. */
.sidebar-midt{flex:1 1 auto; min-height:0; margin:6px -16px 0; padding:0 16px;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:#a9b9aa45 transparent}

/* Grene: Arbejde og Viden er overskrifter. Ved hover peger en pil mod højre,
   og en gren vokser ud fra søjlen mod arbejdsfladen med valgmulighederne. */
.gren{position:relative; margin:0 0 2px; --gren:46px; --midt:17px}
.sidebar .gren .gren-titel{display:flex; align-items:center; gap:8px; width:100%;
  height:34px; margin:0; padding:0 9px; border:0; border-radius:6px;
  background:transparent; box-shadow:none; transform:none; color:var(--sidebar-ink);
  font:550 10.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  text-align:left; opacity:.7; cursor:default}
.sidebar .gren .gren-titel[aria-current]{opacity:.95}
.gren-titel .pil{margin-left:auto; font-size:14px; letter-spacing:0;
  color:var(--sidebar-accent); opacity:0; transform:translateX(-6px);
  transition:opacity .15s ease, transform .2s ease}
.sidebar .gren:hover .gren-titel,.sidebar .gren:focus-within .gren-titel{
  background:var(--sidebar-hover); opacity:1}
.gren:hover .pil,.gren:focus-within .pil{opacity:1; transform:none}

.gren-blad{position:absolute; top:-10px; left:100%; z-index:10;
  padding-left:var(--gren); visibility:hidden; pointer-events:none;
  transition:visibility 0s linear .18s}
.gren.op .gren-blad{top:auto; bottom:-10px}
/* Selve grenen: en linje fra overskriften, over søjlens kant, ud til panelet. */
.gren-blad::before{content:""; position:absolute; left:0; top:calc(10px + var(--midt));
  width:var(--gren); height:1px;
  background:linear-gradient(90deg, #d7dfc700, var(--sidebar-accent) 30%, #d7dfc780);
  transform:scaleX(0); transform-origin:left; transition:transform .18s ease-out}
.gren.op .gren-blad::before{top:auto; bottom:calc(10px + var(--midt))}
/* Knuden hvor grenen krydser søjlens kant. */
.gren-blad::after{content:""; position:absolute; left:13px; top:calc(8px + var(--midt));
  width:5px; height:5px; border-radius:50%; background:var(--sidebar-accent);
  box-shadow:0 0 0 3px #d7dfc722; opacity:0; transition:opacity .12s ease}
.gren.op .gren-blad::after{top:auto; bottom:calc(8px + var(--midt))}
.gren-panel{display:flex; flex-direction:column; gap:1px; min-width:214px; padding:7px;
  border:1px solid var(--glas-kant, var(--sidebar-line)); border-radius:12px;
  background:var(--sidebar-glas, var(--sidebar));
  -webkit-backdrop-filter:var(--blur, none); backdrop-filter:var(--blur, none);
  box-shadow:inset 0 1px 0 #ffffff10, var(--glas-skygge, var(--shadow));
  opacity:0; transform:translateX(-8px);
  transition:opacity .15s ease, transform .2s ease}
.sidebar .gren-panel a{white-space:nowrap}

.gren:hover .gren-blad,.gren:focus-within .gren-blad{
  visibility:visible; pointer-events:auto; transition-delay:0s}
.gren:hover .gren-blad::before,.gren:focus-within .gren-blad::before{transform:scaleX(1)}
.gren:hover .gren-blad::after,.gren:focus-within .gren-blad::after{opacity:1; transition-delay:.08s}
.gren:hover .gren-panel,.gren:focus-within .gren-panel{
  opacity:1; transform:none; transition-delay:.1s}
@media(prefers-reduced-motion:reduce){
  .gren-titel .pil,.gren-blad,.gren-blad::before,.gren-blad::after,.gren-panel{
    transition:none !important}}

.sidebar-bottom{margin-top:auto; padding-top:10px; border-top:1px solid var(--sidebar-line)}

/* Profil: avatar nederst; menuen med viden, firma og log ud åbner opad. */
.profil{position:relative; margin:0}
.profil summary{display:flex; align-items:center; gap:10px; padding:7px 8px;
  border-radius:9px; color:var(--sidebar-ink); list-style:none; cursor:pointer}
.profil summary::-webkit-details-marker{display:none}
.profil summary:hover,.profil[open] summary{background:var(--sidebar-hover)}
.avatar{display:grid; place-items:center; width:30px; height:30px; flex:none;
  border-radius:50%; background:linear-gradient(135deg, var(--ui-accent), var(--brass));
  color:#18382d; font:650 11.5px/1 var(--sans); letter-spacing:.02em;
  box-shadow:inset 0 1px 0 #ffffff55, 0 0 0 1px #ffffff1f}
.profil-navn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font:550 13px/1.3 var(--sans)}
.profil-navn span{color:var(--sidebar-muted); font-weight:400}
.chevron{width:15px; height:15px; flex:none; fill:none; stroke:var(--sidebar-muted);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease}
.profil[open] .chevron{transform:rotate(180deg)}
.profil-menu{position:absolute; left:-6px; bottom:calc(100% + 10px); z-index:12;
  width:calc(100% + 12px); padding:8px;
  border:1px solid var(--glas-kant, var(--sidebar-line)); border-radius:14px;
  background:var(--sidebar-glas, var(--sidebar));
  -webkit-backdrop-filter:var(--blur, none); backdrop-filter:var(--blur, none);
  box-shadow:inset 0 1px 0 #ffffff10, var(--glas-skygge, var(--shadow));
  animation:profil-ind .16s ease-out}
@keyframes profil-ind{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.profil-mail{padding:5px 10px 7px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--sidebar-muted); font-size:12px}
.profil-menu nav{padding:5px 0; border-top:1px solid var(--sidebar-line)}
.profil-mail + nav{padding-top:0; border-top:0}
.profil-menu nav:last-child{padding-bottom:0}
.sidebar .profil-menu a{gap:11px; padding:7px 10px; border-radius:8px;
  font-size:13px; opacity:.88}
.sidebar .profil-menu a:hover{background:#ffffff10; opacity:1}
/* Menupunkter der er en formular (POST), ser ud som de andre links. */
.profil-menu .menu-form{display:block}
.sidebar .profil-menu .menu-link{display:flex; align-items:center; width:100%; margin:0;
  gap:11px; padding:7px 10px; border:0; border-radius:8px; background:none; box-shadow:none;
  color:inherit; font:13px var(--sans); text-align:left; opacity:.88; cursor:pointer}
.sidebar .profil-menu .menu-link:hover{background:#ffffff10; opacity:1}
.ikon{width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.profil-menu{animation:none}.chevron{transition:none}}

/* ---------------------------------------------------------- arbejdsflade */

.workspace{flex:1 1 auto; min-width:0; margin-left:var(--rail);
  display:flex; flex-direction:column}
main{flex:1 1 auto; width:100%; max-width:980px; padding:36px 36px 56px}
h1{margin:0 0 4px; font:400 28px/1.25 var(--serif)}
h2{margin:0 0 12px; font:400 19px/1.3 var(--serif)}
.lead{margin:0 0 4px; color:var(--muted); font-size:13px}
section{margin-top:32px; padding-top:24px; border-top:1px solid var(--ui-border)}
section:first-of-type{margin-top:24px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:32px}
.split>section{margin-top:0}

/* ---------------------------------------------------------- kontroller */

label{display:block; margin:12px 0; font-size:11px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted)}
input,textarea,select{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  border:1px solid var(--ui-border); border-radius:7px;
  background:var(--ui-surface); color:var(--ink);
  font:13px/1.5 var(--sans); text-transform:none; letter-spacing:0;
}
textarea{resize:vertical; font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}
input:hover,textarea:hover,select:hover{border-color:var(--muted)}
button,.button{
  display:inline-block; margin-top:10px; padding:10px 17px; border:1px solid var(--ink);
  border-radius:7px; background:var(--ink); color:var(--paper);
  font:550 12.5px var(--sans); text-decoration:none; cursor:pointer;
}
button:hover,.button:hover{opacity:.88}
button.ghost,.button.ghost{background:transparent; color:var(--ink); border-color:var(--ui-border)}
button.ghost:hover,.button.ghost:hover{background:var(--ui-wash); opacity:1}
button.small,.button.small{margin:0 0 0 6px; padding:6px 11px; font-size:11.5px}
form{display:inline}
section>form,details form,.stak form{display:block}

/* ---------------------------------------------------------- data */

table{width:100%; border-collapse:collapse; margin:4px 0}
th{
  padding:0 12px 9px 0; border-bottom:1px solid var(--ui-border); text-align:left;
  font:500 10px/1.6 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
}
td{padding:13px 12px 13px 0; border-bottom:1px solid var(--ui-border);
  vertical-align:top; font-size:13px; line-height:1.6}
tr:last-child td{border-bottom:0}
td.right,th.right{text-align:right; white-space:nowrap}
td strong{font-weight:550}
code{padding:2px 7px; border-radius:5px; background:var(--ui-wash);
  font:12px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink)}

.muted{color:var(--muted); font-size:12.5px}
.error{margin:16px 0; padding:11px 15px; border-left:2px solid var(--attention);
  background:var(--ui-wash); color:var(--attention); font-size:13px}

.pill{display:inline-block; padding:3px 10px; border-radius:999px;
  background:var(--ui-wash); color:var(--muted);
  font:500 10.5px/1.6 var(--sans); letter-spacing:.05em; text-transform:uppercase}
.pill.ok,.pill.aktiv{background:#2f4a3a; color:#c3d3b3}
.pill.fejlet,.pill.afvist{background:#4a3129; color:#e8b9a4}
.pill.running,.pill.starter,.pill.afventer_login,.pill.initializing{
  background:#40402c; color:var(--brass)}

ul.stak{list-style:none; margin:0; padding:0}
ul.stak li{display:flex; align-items:baseline; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--ui-border); font-size:13px}
ul.stak li:last-child{border-bottom:0}
ul.stak a{color:var(--ink)}

details{margin-top:18px}
details summary{padding:7px 0; color:var(--muted); font-size:12.5px; cursor:pointer}
details summary:hover{color:var(--ink)}
details[open] summary{margin-bottom:6px}

.preview{max-width:100%; border:1px solid var(--ui-border); border-radius:var(--radius)}
.tom{padding:18px 0; color:var(--muted); font-size:13px}

footer{padding:18px 36px 36px; border-top:1px solid var(--ui-border);
  color:var(--muted); font-size:11px; letter-spacing:.03em}

a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* ---------------------------------------------------------- login */

body.auth{display:block; background:var(--paper)}
.auth-wrap{max-width:860px; margin:0 auto; padding:72px 28px 48px}
.auth-wrap .brand{display:block; margin-bottom:34px;
  font:34px/1 var(--serif); letter-spacing:-1.2px; color:var(--ink); text-decoration:none}
.auth-wrap .brand-period{color:var(--ui-accent)}
.auth-kort{padding:26px 28px; border:1px solid var(--ui-border);
  border-radius:11px; background:var(--ui-surface)}
.auth-kort h2{margin-bottom:4px}
.auth-kort .muted{margin:0 0 6px}

/* ---------------------------------------------------------- responsivt */

@media(max-width:1180px){main{padding:28px 28px 48px}}
@media(max-width:900px){
  body{flex-direction:column}
  .sidebar{position:static; inset:auto; width:auto; overflow:visible;
    flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 20px}
  .workspace{margin-left:0}
  .sidebar .brand{display:inline-block}
  .sidebar .brand{margin:0; font-size:24px}
  .ny-opgave{width:auto; margin:0 0 0 auto; padding:8px 14px}
  .sidebar-group h2{display:none}
  .sidebar-group,.sidebar nav{flex-direction:row; width:100%; gap:2px; margin:0}
  .sidebar nav{overflow-x:auto}
  .sidebar nav a .dot{display:none}
  .sidebar-bottom{display:flex; align-items:center; gap:6px; width:100%;
    margin:0; padding-top:10px}
  .profil{flex:1}
  .profil-menu{top:calc(100% + 8px); bottom:auto; left:auto; right:0; width:250px}
  .sidebar .profil-menu nav{flex-direction:column; width:auto; overflow:visible}
  main{padding:20px 20px 40px}
  .sidebar-midt{display:contents}
  .gren{width:100%; margin:0}
  .sidebar .gren .gren-titel{display:none}
  .gren-blad{position:static; padding:0; visibility:visible; pointer-events:auto}
  .gren-blad::before,.gren-blad::after{display:none}
  .gren-panel{min-width:0; padding:0; border:0; border-radius:0; background:none;
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
    opacity:1; transform:none}
  .split{grid-template-columns:1fr; gap:0}
  .split>section:last-child{margin-top:32px; padding-top:24px; border-top:1px solid var(--ui-border)}
  h1{font-size:24px}
  footer{padding:16px 20px 28px}
  .auth-wrap{padding:40px 20px}
}

/* ---------------------------------------------------------- samtale */

.samtale{display:flex; flex-direction:column; gap:26px; margin:24px 0 28px;
  max-width:var(--reading)}
.besked{display:flex; flex-direction:column}
.besked.bruger{align-items:flex-end}
.besked.bruger .boble{padding:11px 15px; border-radius:12px 12px 4px 12px;
  background:var(--ui-user); font-size:13.5px; line-height:1.7; max-width:78%}
.besked.epikur .svar{font-size:14px; line-height:1.85; white-space:pre-wrap}
.besked.epikur .afsender{margin-top:8px; color:var(--muted);
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase}
.trin{list-style:none; margin:0 0 12px; padding:9px 0 9px 1px;
  border-left:2px solid var(--ui-border)}
.trin li{display:flex; align-items:center; gap:9px; padding:3px 0 3px 13px;
  color:var(--muted); font-size:12px}
.trin-prik{width:4px; height:4px; flex:none; border-radius:50%;
  background:var(--ui-accent)}
/* Live: det nyeste trin pulserer, mens Epikur stadig arbejder. */
.trin li.niveau-1{margin-left:18px}
.trin li.niveau-2{margin-left:36px}
.trin-hvem{font-weight:600; margin-right:-3px}
.trin-hvem::after{content:" ·"; font-weight:400; opacity:.6}
.besked.i-gang .trin:empty{display:none}
.besked.i-gang .trin li{animation:trin-ind .25s ease-out}
.besked.i-gang .trin li:last-child .trin-prik{animation:puls 1.1s ease-in-out infinite}
.besked.i-gang > .svar.muted{font-size:13px; color:var(--muted)}
@keyframes trin-ind{from{opacity:0; transform:translateY(3px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){
  .besked.i-gang .trin li,.besked.i-gang .trin li:last-child .trin-prik{animation:none}}

/* Tabeller i svar. Svaret står i pre-wrap, tabellen må ikke arve det. */
.md-tabel{overflow-x:auto; margin:10px 0 14px; white-space:normal}
.md-tabel table{margin:0; min-width:100%; width:auto}
.md-tabel th{padding-top:2px}
.md-tabel td{padding:8px 16px 8px 0; font-size:13px; line-height:1.5}
.md-tabel td:first-child,.md-tabel th:first-child{white-space:nowrap}

.tom-samtale{padding:8px 0 4px}
.tom-samtale h2{margin-bottom:6px}
.forslag{list-style:none; margin:10px 0 0; padding:0; max-width:560px}
.forslag li{padding:10px 14px; margin-bottom:7px; border:1px solid var(--ui-border);
  border-radius:9px; background:var(--ui-surface); color:var(--ink);
  font-size:13px; line-height:1.6}

.composer{display:block; max-width:var(--reading); padding:12px 14px 11px;
  border:1px solid var(--ui-border); border-radius:11px; background:var(--ui-surface)}
.composer textarea{margin:0; padding:2px 0; border:0; background:transparent;
  font:14px/1.75 var(--sans); resize:none}
.composer textarea:hover{border:0}
.composer textarea:focus{outline:0}
.composer-bund{display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:8px; padding-top:9px; border-top:1px solid var(--ui-border)}
.composer-bund button{margin:0}
.composer-bund .muted{font-size:11.5px}

/* Vedhæftede filer: valgt i skrivefeltet, og vist over brugerens boble. */
.vedhaeft{display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  color:var(--ink); font-weight:500; margin:0}
.vedhaeft::before{content:"+"; font-size:15px; line-height:1}
.vedhaeft:hover{color:var(--ui-accent)}
.vedhaeft input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.vedhaeft:focus-within{outline:2px solid var(--ui-accent); outline-offset:2px; border-radius:4px}
.valgte-filer{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 8px; padding:0}
.valgte-filer li{display:flex; align-items:center; gap:6px; max-width:220px; padding:3px 4px 3px 8px;
  border:1px solid var(--ui-border); border-radius:8px; font-size:12px}
.valgte-filer li.billede{padding-left:3px}
.valgte-filer img{width:28px; height:28px; object-fit:cover; border-radius:5px}
.valgte-filer span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.valgte-filer .fjern{margin:0; padding:0 6px; min-height:0; border:0; background:none;
  box-shadow:none; color:var(--muted); font-size:15px; line-height:1.2}
.valgte-filer .fjern:hover{color:var(--ink)}
.composer.traekker{outline:2px dashed var(--ui-accent); outline-offset:-4px}
.bilag{display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; gap:6px; margin-bottom:6px; max-width:78%}
.bilag-billede img{display:block; max-width:220px; max-height:180px; border-radius:10px;
  border:1px solid var(--ui-border); object-fit:cover}
.bilag-fil{padding:7px 11px; border:1px solid var(--ui-border); border-radius:9px;
  background:var(--ui-surface); font-size:12.5px; color:var(--ink); text-decoration:none}
.bilag-fil::before{content:"▤ "; color:var(--muted)}
@media(max-width:900px){.composer-bund{flex-wrap:wrap}}

/* ---------------------------------------------------------- samtaleliste + menu */

.samtale-liste nav a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.samtale-liste nav a.dæmpet{opacity:.55; font-size:12px}
.samtale-liste nav a.dæmpet:hover{opacity:.85}

.samtale-hoved{display:flex; align-items:flex-start; justify-content:space-between; gap:20px}
.menu{position:relative; margin:0; flex:none}
.menu summary{padding:7px 13px; border:1px solid var(--ui-border); border-radius:7px;
  background:var(--ui-surface); color:var(--muted); font-size:12px; list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{color:var(--ink)}
.menu[open] summary{color:var(--ink)}
.menu-ind{position:absolute; right:0; top:calc(100% + 6px); z-index:9; width:260px;
  padding:13px 15px; border:1px solid var(--ui-border); border-radius:9px;
  background:var(--ui-surface); box-shadow:var(--shadow)}
.menu-ind form{display:block; margin:0 0 7px}
.menu-ind input{margin:0 0 7px}
.menu-ind button,.menu-ind .button{margin:0 0 6px; width:100%; text-align:center}

/* ---------------------------------------------------------- kort */

.kort-raekke{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
@media(max-width:900px){.kort-raekke{grid-template-columns:1fr}}
.kort{display:flex; flex-direction:column; padding:16px 17px;
  border:1px solid var(--ui-border); border-radius:9px; background:var(--ui-surface)}
.kort strong{display:block; font:400 17px/1.3 var(--serif)}
.kort>span.muted{display:block; margin-top:1px; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase}
.kort p{margin:10px 0 0; font-size:12.5px; line-height:1.65; text-transform:none}
.kort form{margin-top:auto; padding-top:12px}
.kort button{width:100%; text-align:center}
.kort .kort-fod{margin-top:auto; padding-top:12px}
.kort .kort-fod .button{margin:0; width:100%; text-align:center}
.pill.aktiv{background:#2f4a3a; color:#c3d3b3}
.pill.proeve{background:#40402c; color:var(--brass)}
.pill.passiv{background:#3a3a3a; color:#bbb}
.pill.ikke{background:var(--ui-wash); color:var(--muted)}

/* ---------------------------------------------------------- arbejdsstatus */

.ny-rolig{display:block; width:100%; min-height:36px; padding:8px 12px; margin:-12px 0 18px;
  border:1px solid var(--sidebar-line); border-radius:7px; background:transparent;
  color:var(--sidebar-ink); font:12px/20px var(--sans); text-align:center;
  text-decoration:none; opacity:.72}
.ny-rolig:hover{background:var(--sidebar-hover); border-color:#ffffff35; opacity:1}

.arbejdsstatus{display:none; align-items:center; gap:9px; margin-top:9px;
  padding-top:9px; border-top:1px solid var(--ui-border);
  color:var(--muted); font-size:12px}
.composer.arbejder .arbejdsstatus{display:flex}
.composer.arbejder textarea{opacity:.45}
.puls{width:6px; height:6px; flex:none; border-radius:50%; background:var(--ui-accent);
  animation:puls 1.1s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:.25; transform:scale(.85)}50%{opacity:1; transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.puls{animation:none; opacity:.8}}

/* ---------------------------------------------------------- nøgletal */

.noegletal{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-top:24px; padding-top:24px}
@media(max-width:720px){.noegletal{grid-template-columns:repeat(2,1fr)}}
.noegletal-kort{display:flex; flex-direction:column; gap:2px; padding:14px 16px;
  border:1px solid var(--ui-border); border-radius:9px; background:var(--ui-surface);
  text-decoration:none}
.noegletal-kort:hover{border-color:var(--muted)}
.noegletal-kort .tal{font:400 26px/1.1 var(--serif); color:var(--ink)}
.noegletal-kort .muted{font-size:11px; letter-spacing:.05em; text-transform:uppercase}

/* ---------------------------------------------------------- forbindelseskort */

.forbindelseskort{margin:14px 0 4px; padding:17px 19px; border:1px solid var(--ui-border);
  border-radius:11px; background:var(--ui-surface); max-width:520px}
.forbindelseskort .udbyder{display:flex; align-items:center; gap:11px; margin-bottom:11px}
.forbindelseskort .udbyder img{border-radius:7px; background:#fff; padding:3px}
.forbindelseskort .udbyder strong{font:400 18px/1.2 var(--serif)}
.kort-tekst{margin:0 0 13px; font-size:13.5px; line-height:1.7}
.tilladelser{margin:0 0 15px; padding:11px 13px; border-radius:8px;
  background:var(--ui-wash); font-size:13px; line-height:1.65}
.tilladelser .etiket{display:block; margin-bottom:3px; color:var(--muted);
  font-size:10px; letter-spacing:.07em; text-transform:uppercase}
.kort-knapper{display:flex; flex-wrap:wrap; align-items:center; gap:9px}
.kort-knapper form{display:inline}
.kort-knapper button,.kort-knapper .button{margin:0}
.kort-fejl{margin:0 0 12px; padding:9px 13px; border-left:2px solid var(--attention);
  background:var(--ui-wash); color:var(--attention); font-size:12.5px}
.kvittering{margin:0; color:var(--ui-accent); font-size:13px; font-weight:550}
.forbindelseskort details{margin:13px 0 0}
.forbindelseskort summary{font-size:11.5px}
.forbindelseskort details p{margin:7px 0 0; word-break:break-word}

pre.laest{padding:16px 18px; border:1px solid var(--ui-border); border-radius:9px;
  background:var(--ui-surface); font:13px/1.8 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap; overflow-x:auto}

/* ---------------------------------------------------------- fjernskærm */

.fjernskaerm{position:relative; border:1px solid var(--ui-border); border-radius:9px;
  overflow:hidden; background:var(--ui-wash)}
.fjernskaerm img{display:block; width:100%; height:auto; cursor:crosshair}
.skaerm-tom{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:var(--muted); font-size:13px}
/* display:flex ovenfor vinder ellers over [hidden], og overlayet fanger alle klik. */
.skaerm-tom[hidden]{display:none}
.skaerm-bund{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.skaerm-bund input{flex:1 1 240px; margin:0; max-width:380px}
.skaerm-bund button{margin:0}
.skaerm-bund .muted{font-size:11px; word-break:break-all}

/* Under "Om adgangen": det udbyderen faktisk giver, i den rækkefølge den beder om det. */
.rettigheder ul{margin:4px 0 8px; padding-left:18px; font-size:12.5px; color:var(--muted)}
.rettigheder li{margin:2px 0}

/* Login-kortet: formularen fylder kortets bredde, og ventetilstanden pulserer. */
.kort-login label{margin:8px 0}
.kort-login .kort-knapper{margin-top:12px}
.kort-formular{display:flex; gap:9px; align-items:center; margin:4px 0 0}
.kort-formular input{margin:0}
.kort-formular button{margin:0; flex:none}
.kort-uden{margin-top:8px}
.kort-uden button{margin:0}
.arbejder-paa{display:flex; align-items:center; gap:10px}

/* ---------------------------------------------------------- medarbejdere */

.avatar{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:50%; background:var(--avatar, #4f7a58);
  color:#f4f1e6; font:400 20px/1 var(--serif);
  box-shadow:inset 0 1px 0 #ffffff26, 0 4px 12px #00000040;
  transition:background-color .35s ease}
.avatar.lille{width:24px; height:24px; font-size:12px; vertical-align:middle; box-shadow:none}
.avatar.stor{width:84px; height:84px; font-size:38px}
.ansat-navn{display:inline-flex; align-items:center; gap:9px; text-decoration:none}
.ansat-hoved{display:flex; align-items:center; gap:16px}

/* ---------------------------------------------------------- oprettelsesflow */

.flow{display:block}
.flow-hoved{margin-bottom:26px}
.flow-tæller{margin:0 0 8px; color:var(--muted); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase}
.flow-trin{display:flex; flex-wrap:wrap; gap:4px 18px; margin:0 0 10px; padding:0; list-style:none}
.flow-trin button{margin:0; padding:0; border:0; background:none; box-shadow:none;
  color:var(--muted); font:500 12.5px var(--sans); cursor:pointer}
.flow-trin button:disabled{opacity:.45; cursor:default}
.flow-trin li.aktuel button{color:var(--ink)}
.flow-trin li.faerdig button::before{content:"✓ "; color:var(--ui-accent)}
.flow-bar{height:3px; border-radius:3px; background:var(--ui-wash); overflow:hidden}
.flow-bar i{display:block; height:100%; width:0; background:var(--ui-accent);
  transition:width .35s ease}

.flow-krop{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:36px; align-items:start}
@media(max-width:900px){.flow-krop{grid-template-columns:1fr}}
.flow-felt{margin:0 0 30px; padding:0; border:0; min-width:0}
.flow-felt legend{padding:0}
.flow-felt h1{margin-bottom:6px}
.flow-felt .lead{margin-bottom:18px}
html.js .flow-felt{margin-bottom:0; animation:trin-ind .3s ease}
@keyframes trin-ind{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){html.js .flow-felt{animation:none}
  .flow-bar i,.avatar{transition:none}}
.kun-js{display:none}
html.js .kun-js{display:block}
html.js .flow-trin.kun-js{display:flex}
html.js .flow-nav.kun-js{display:flex}
.flow-fejl{margin:4px 0 0; color:var(--attention); font-size:12.5px}

.valg-gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;
  margin:0 0 6px}
.valg{position:relative; display:flex; flex-direction:column; gap:3px; margin:0;
  padding:15px 16px; border:1px solid var(--ui-border); border-radius:12px;
  background:var(--ui-surface); color:var(--ink); text-transform:none; letter-spacing:0;
  cursor:pointer; transition:border-color .15s ease, transform .15s ease, background .15s ease}
.valg:hover{border-color:var(--muted); transform:translateY(-1px)}
.valg input{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
.valg strong{font:400 17px/1.3 var(--serif)}
.valg .muted{font-size:12px; line-height:1.5}
.valg:has(input:checked){border-color:var(--ui-accent); background:var(--ui-user);
  box-shadow:0 0 0 1px var(--ui-accent) inset}
.valg:has(input:focus-visible){outline:2px solid var(--ui-accent); outline-offset:2px}
.valg.system{padding-left:58px; min-height:70px; justify-content:center}
.system-ikon{position:absolute; left:15px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; background:var(--ui-wash); color:var(--ink); font:600 13px var(--sans)}
.valg.system:has(input:checked) .system-ikon{background:var(--ui-accent); color:var(--paper)}
.valg.system:has(input:checked) .system-ikon::after{content:"✓"; position:absolute;
  right:-5px; bottom:-5px; width:15px; height:15px; border-radius:50%;
  background:var(--paper); color:var(--ui-accent); font-size:9px; line-height:15px; text-align:center}
.valg .kvittering{font-size:12px}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{margin:0; padding:6px 12px; border:1px solid var(--ui-border); border-radius:999px;
  background:transparent; color:var(--ink); font:500 12px var(--sans)}
.chip:hover{background:var(--ui-wash); opacity:1}
.chip:disabled{opacity:.4; cursor:default}

.del-valg{display:flex; align-items:flex-start; gap:12px; margin:4px 0 20px;
  padding:15px 16px; border:1px solid var(--ui-border); border-radius:12px;
  color:var(--ink); text-transform:none; letter-spacing:0; font-size:13px; cursor:pointer}
.del-valg input{width:auto; margin:3px 0 0; accent-color:var(--ui-accent)}
.del-valg strong{display:block; font-weight:550}
.del-valg:has(input:checked){border-color:var(--ui-accent)}
.flow-knapper{display:flex; flex-wrap:wrap; gap:10px}
.flow-knapper button{margin:0}

.visitkort{position:sticky; top:28px; display:flex; flex-direction:column; align-items:center;
  gap:4px; padding:26px 20px 22px; border:1px solid var(--ui-border); border-radius:16px;
  background:var(--ui-surface); text-align:center; transition:transform .3s ease}
.visitkort strong{margin-top:12px; font:400 22px/1.25 var(--serif); word-break:break-word}
.visitkort #v-rolle{font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.v-systemer{display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin:10px 0 2px}
.visitkort #v-instruks{margin:8px 0 12px; font-size:12.5px; line-height:1.65}
.flow.sidste .visitkort{transform:scale(1.04); border-color:var(--ui-accent)}

.flow-nav{justify-content:space-between; gap:10px; margin-top:26px; padding-top:18px;
  border-top:1px solid var(--ui-border)}
.flow-nav button{margin:0}
.samtale-hoved>.button{flex:none; white-space:nowrap}
/* Logoer på lys flade, så mørke logoer (Notion, GitHub) også kan ses. */
.system-ikon.logo{background:#f4f1e6}
.system-ikon.logo img{display:block; width:20px; height:20px}
.valg.system:has(input:checked) .system-ikon.logo{background:#f4f1e6;
  box-shadow:0 0 0 2px var(--ui-accent)}
.system-ikon.lille{position:static; transform:none; flex:none; width:24px; height:24px;
  border-radius:6px; font-size:11px}
.system-ikon.lille img{width:15px; height:15px}
ul.stak li:has(.system-ikon){align-items:center}
.v-systemer .pill{display:inline-flex; align-items:center; gap:5px}
.v-systemer .pill img{padding:1px; border-radius:3px; background:#f4f1e6}
.besked .svar .puls{display:inline-block; margin-right:8px; vertical-align:middle}

/* ---------------------------------------------------------- velkomst */

body.velkomst{display:block}
/* Velkomsten skjuler og viser dele med hidden; ingen display-regel må vinde over det. */
body.velkomst [hidden]{display:none !important}
body.velkomst section.scene{margin-top:0; padding-top:0; border-top:0}
.scene-wrap{max-width:720px; margin:0 auto; padding:56px 24px 80px; min-height:100vh;
  display:flex; flex-direction:column}
.scene-wrap .brand{font:29px/1 var(--serif); color:var(--ink); text-decoration:none; margin-bottom:44px}
.scene{animation:scene-ind .45s ease}
.scene h1{font-size:34px; margin-bottom:8px}
.scene .lead{font-size:15px; margin-bottom:22px}
@keyframes scene-ind{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.opslag{list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:7px}
.opslag li{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13.5px;
  animation:scene-ind .3s ease}
.opslag li::before{content:""; flex:none; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--ui-border)}
.opslag li.ok::before{content:"✓"; border-color:var(--ui-accent); color:var(--ui-accent);
  font-size:10px; line-height:13px; text-align:center}
.opslag li.ok{color:var(--ink)}
.opslag li.i-gang::before{border-color:var(--ui-accent); border-top-color:transparent;
  animation:drej .8s linear infinite}
@keyframes drej{to{transform:rotate(360deg)}}

.firmakort, .resultat{padding:22px 24px; border:1px solid var(--glas-kant, var(--ui-border));
  border-radius:16px; background:var(--glas, var(--ui-surface));
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); animation:scene-ind .4s ease}
.firmakort strong{display:block; font:400 24px/1.3 var(--serif)}
.firmakort p{margin:6px 0 14px; font-size:15px; line-height:1.6}
.firmakort dl{margin:0; display:flex; flex-wrap:wrap; gap:12px 32px}
.fakta-raekke{animation:scene-ind .35s ease}
.fakta-raekke dt{color:var(--muted); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase}
.fakta-raekke dd{margin:2px 0 0; font-size:15px}

.scene-knapper{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px}
.scene-knapper button{margin:0}
.scene-knapper .spoerg{flex-basis:100%; margin:0 0 2px; font:400 19px/1.3 var(--serif)}
.scene-knapper > div{flex-basis:100%}
.chips.stor{gap:10px; margin-bottom:8px}
.chips.stor .chip{padding:10px 16px; font-size:13.5px}
.chip.valgt{border-color:var(--ui-accent); background:var(--ui-user); color:var(--ink)}

.visitkort.stort{position:static; max-width:360px; margin:4px 0 0; animation:scene-ind .45s ease}
.mm-leverancer{align-self:stretch; margin-top:6px; padding-top:12px; border-top:1px solid var(--ui-border);
  text-align:left}
.mm-leverancer .etiket{color:var(--muted); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase}
.mm-leverancer ul{margin:6px 0 0; padding-left:18px; font-size:13px; line-height:1.7}

.resultat{margin-top:8px; font-size:14px}
.resultat .besked{margin:0}
.tidslinje{margin-top:16px; color:var(--ui-accent); font:400 19px/1.3 var(--serif); animation:scene-ind .4s ease}
.spring-over{margin-top:auto; padding-top:40px}
.spring-over button{margin:0; padding:0; border:0; background:none; box-shadow:none;
  color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer}
@media(prefers-reduced-motion:reduce){.scene,.opslag li,.firmakort,.resultat,.fakta-raekke,
  .visitkort.stort,.tidslinje{animation:none} .opslag li.i-gang::before{animation:none}}

/* ---------------------------------------------------------- programvælger */
html.js .kun-uden-js{display:none}
.programvaelger{display:flex; flex-direction:column; gap:14px}
.programvaelger .pv-gruppe .etiket{display:block; margin-bottom:8px; color:var(--muted);
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase}
.programvaelger .pv-soeg{margin:0}
.programvaelger .pv-status{margin:0}
.programvaelger [hidden]{display:none !important}
.mm-programmer{margin-top:22px; max-width:640px}
.mm-programmer h2{margin-bottom:4px}
.mm-programmer > .muted{margin:0 0 12px}

/* ---------------------------------------------------------- medarbejderkatalog */
.katalog-soeg{max-width:560px; margin:22px 0 0}
.katalog-gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:8px}
.katalog-kort{gap:6px}
.katalog-kort > .muted{font-size:11px; letter-spacing:.05em; text-transform:uppercase}
.katalog-kort .chips{margin-top:6px; gap:5px}
.katalog-kort .pill{text-transform:none; letter-spacing:0; font-size:11.5px}
.pill.svag{background:transparent; border:1px dashed var(--ui-border)}
.katalog-kort details.stillinger{margin-top:8px}
.stilling-liste{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;
  max-height:340px; overflow:auto}
.stilling-liste > li{padding-top:8px; border-top:1px solid var(--ui-border); font-size:12.5px}
.stilling-liste .etiket{display:block; margin-top:4px; color:var(--muted); font-size:10px;
  letter-spacing:.07em; text-transform:uppercase}
.stilling-liste ul{margin:3px 0 0; padding-left:16px; color:var(--muted); line-height:1.6}
.ansaet-panel{width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:24px 26px;
  border:1px solid var(--glas-kant, var(--ui-border)); border-radius:16px; background:var(--paper); color:var(--ink)}
.ansaet-panel::backdrop{background:#000a}
.ansaet-panel h3{margin:18px 0 8px; font:400 17px/1.3 var(--serif)}
.ansaet-panel .kort-knapper{margin-top:16px}
.valg.katalog-link{text-decoration:none; border-style:dashed}

/* Teamet under en teamleder */
.team-liste{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.team-liste li{display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--ui-border)}
.team-liste .team-tekst{flex:1; min-width:0; display:flex; flex-direction:column}
.team-liste .team-fx{font-size:.85em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.team-liste .team-brugt{font-size:.85em; white-space:nowrap}
.team-liste form{margin:0}
.team-fold{margin-top:4px; font-size:.9em}
.team-fold summary{cursor:pointer; opacity:.75}
.team-fold ul{margin:4px 0 0; padding-left:16px}
@media (max-width:640px){.team-liste .team-brugt{display:none}}
.stilling-liste li > .muted{display:block; font-size:.9em}

/* Afklaringskortet: ét åbent spørgsmål ad gangen */
.afklaring .etiket{display:block; margin-bottom:6px}
.afklaring-indsigt{margin:0 0 8px; font-size:13px; color:var(--muted)}
.afklaring-indsigt::before{content:"✓ "; color:var(--ui-accent)}
.afklaring-spoergsmaal{margin:0 0 10px; font-family:var(--serif); font-size:18px; line-height:1.35}
.afklaring-svar textarea{width:100%; min-height:56px; resize:vertical}
.afklaring-svar .kort-knapper{margin-top:8px}
.afklaring.besvaret{opacity:.6}
.afklaring.besvaret .afklaring-svar{display:none}
.afklaring-forstaaelse{margin-top:10px; font-size:12.5px}
.afklaring-forstaaelse summary{cursor:pointer; color:var(--muted)}
.afklaring-felter{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0}
.afklaring-felter .etiket{flex-basis:100%; margin:0}
.afklaring-felter .felt{padding:3px 8px; border:1px solid var(--ui-border); border-radius:999px}
.afklaring-felter .felt.gaet{border-style:dashed}
.afklaring-felter .kilde{opacity:.6; margin-left:4px}