/* 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}
.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. */
.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}
@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}
.pill.aktiv{background:#2f4a3a; color:#c3d3b3}
.pill.proeve{background:#40402c; color:var(--brass)}
.pill.pause{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; gap:9px}
.kort-knapper form{display:inline}
.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}
.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}