/* EV design: Work Sans, navy #091A49, turkis #27D0A8. Colours from the design manual 1.0 (p. 8 to 9) and EV_Master.potx, and the
   greys the website's CSS uses from the manual's Sort steps: Sort 4 #565151 for notes, Sort 6 #8F8B8B for lines, Sort 8 #E5E0DF
   for hover; link blue #1840AF is the manual's "Blå link, kun digitalt" swatch, also in the site's CSS. Nothing else. Turquoise
   is a fill or text on navy, never text on a light ground (1.79:1); WCAG AA is checked by tests/contrast.py.
   Type: the research 9.2 Fluent ramp, --fs-100..--fs-900 below (12 to 48 px); weight carries rank, never text-transform.
   Spacing: --sp-1..--sp-14, a 4 px grid (ROADMAP 19 S1). Motion: --dur-* and --ease-*, zeroed under prefers-reduced-motion. */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap");
:root { --navy:#091A49; --blue:#223B81; --blue2:#3053B3; --blue3:#416BE1; --turkis:#27D0A8; --turkis1:#53E3C2; --turkis2:#8DE5D0; --turkis3:#B5EBDE; --warm:#F7F3F2; --grey:#8F8B8B; --grey4:#E5E0DF; --line:#CAC5C4; --ink:#171414; --bg:#fff; --link:#1840AF; --muted:#565151;
  /* Type scale (research 9.2, the Fluent ramp): 12, 14, 16, 20, 24, 28, 32, 40, 48 px, each with a line height; bar.py
     reads this list from --fs-100..--fs-900 instead of carrying its own copy. Semantic names alias a rung so the rest
     of the file (and every prototype) keeps reading var(--fs-h2) etc. */
  --fs-100:12px; --fs-200:14px; --fs-300:16px; --fs-400:20px; --fs-500:24px; --fs-600:28px; --fs-700:32px; --fs-800:40px; --fs-900:48px;
  --fs-xs:var(--fs-100); --fs-small:var(--fs-200); --fs-body:var(--fs-300); --fs-h3:var(--fs-400); --fs-h2:var(--fs-500);
  --fs-h1:var(--fs-700); --fs-display:var(--fs-800); --fs-hero:var(--fs-900);
  --lh-tight:1.1; --lh-heading:1.25; --lh-body:1.5;
  /* Spacing ramp on a 4 px grid (research 9.2): 4 to 56; 2 px only for icon alignment (ev.css:84's slider track inset). */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-9:36px; --sp-10:40px; --sp-11:44px; --sp-12:48px; --sp-13:52px; --sp-14:56px;
  /* Motion (research 9.2, Apple HIG: a job only, nothing on frequent interactions) */
  --dur-100:100ms; --dur-150:150ms; --dur-200:200ms; --dur-300:300ms;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-decelerate:cubic-bezier(.1,.9,.2,1);
  --soft:var(--warm); }
* { box-sizing:border-box; }
@media (prefers-reduced-motion:reduce) { :root { --dur-100:0ms; --dur-150:0ms; --dur-200:0ms; --dur-300:0ms; } }
body { margin:0; font:var(--fs-body)/var(--lh-body) "Work Sans", sans-serif; color:var(--ink); background:var(--bg); }
header { background:var(--navy); color:#fff; padding:var(--sp-4) var(--sp-8) 0; }
header h1 { margin:0 0 var(--sp-1); font-size:var(--fs-h2); font-weight:500; color:#fff; }
header .demo { font-size:var(--fs-small); color:var(--turkis3); margin-bottom:var(--sp-3); }
nav button { font:inherit; background:none; border:0; border-bottom:3px solid transparent; padding:var(--sp-3) var(--sp-4); cursor:pointer; color:#fff; }
nav button.on { border-bottom-color:var(--turkis); font-weight:700; }
nav .role { font-size:var(--fs-xs); font-weight:700; color:var(--turkis2); margin:0 var(--sp-1) 0 0; cursor:default; }
nav .sep { border-left:1px solid var(--blue); padding-left:var(--sp-4); margin-left:var(--sp-4); }
main { padding:var(--sp-6) var(--sp-8) 60px; max-width:1200px; overflow-x:auto; }
h2 { font-weight:500; color:var(--navy); margin:0 0 var(--sp-4); font-size:var(--fs-h2); line-height:var(--lh-heading); }
a { color:var(--link); }
h3 { font-weight:500; color:var(--navy); font-size:var(--fs-h3); line-height:var(--lh-heading); }
input, select, textarea { font:inherit; padding:var(--sp-2) var(--sp-3); border:1px solid var(--navy); border-radius:0; }
/* Buttons as on elbek-vejrup.dk: square, one line, wide; .go draws a chevron, not text, so a button's name stays its label */
button.act, a.act { font:inherit; font-weight:500; padding:var(--sp-3) var(--sp-6); border:1px solid var(--navy); background:var(--navy); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; }
.act.go { display:inline-flex; align-items:center; gap:12px; }
.act.go::after { content:""; width:7px; height:12px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='currentColor' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='currentColor' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain; }
button.alt, a.act.alt { background:#fff; color:var(--navy); }
button:disabled { opacity:.35; cursor:not-allowed; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:var(--fs-xs); color:var(--navy); border-bottom:2px solid var(--navy); font-weight:700; }
tr.row { cursor:pointer; } tr.row:hover { background:var(--soft); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.badge { display:inline-block; padding:2px var(--sp-2); font-size:var(--fs-xs); font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.b-ok { background:var(--turkis); color:var(--navy); border:2px solid var(--turkis); }
.b-no { border:2px solid var(--navy); color:var(--navy); text-decoration:line-through; text-decoration-thickness:2px; }
.b-na { border:2px dashed var(--grey); color:var(--muted); }
/* ROADMAP 13 S5: sikkerhed as a category, the same marker and colours menneskestyring.js draws for niveau. */
.sik-chip { display:inline-block; width:10px; height:10px; background:var(--niv); margin-right:var(--sp-2); vertical-align:middle; }
.verdict { font-size:var(--fs-display); font-weight:700; letter-spacing:.01em; padding:var(--sp-4) var(--sp-6); display:inline-block; margin:var(--sp-3) 0 var(--sp-2); }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--sp-4); }
.card { background:var(--warm); border:0; padding:var(--sp-4); }
.card h3 { margin:0 0 var(--sp-2); font-size:var(--fs-small); font-weight:700; }
.kv td:first-child { color:var(--muted); width:45%; }
.stop { font-weight:700; color:var(--navy); }
.fiktiv { font-size:var(--fs-xs); border:1px solid var(--grey); color:var(--muted); padding:0 var(--sp-1); margin-left:var(--sp-2); }
.note { color:var(--muted); font-size:var(--fs-small); margin:var(--sp-3) 0; }
/* ROADMAP 19 S5 (#504) Spec item 3: bar.py's own Target size probe excepts an inline sentence link (Læs Processen
   lives in a .note paragraph), but the Spec names it explicitly, so it gets the 24 px floor here, by hand. */
.note a { display:inline-flex; align-items:center; min-height:var(--sp-6); }
.score { font-size:var(--fs-display); font-weight:700; color:var(--navy); }
.big { font-size:var(--fs-display); font-weight:700; color:var(--navy); line-height:var(--lh-tight); }
.matches li { margin:4px 0; } .matches a { color:var(--navy); }
.c-stribe { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.c-stribe .card { border-top:4px solid var(--turkis); }
.c-stribe .card h3 { margin:0 0 var(--sp-2); font-size:var(--fs-xs); font-weight:700; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.reason { background:var(--turkis3); padding:var(--sp-2) var(--sp-4); margin:var(--sp-2) 0; }
.actions button { margin-right:8px; white-space:nowrap; }
svg text { font:12px "Work Sans", sans-serif; fill:var(--ink); }
.scroll { overflow-x:auto; }
@media (max-width:640px) { header, main { padding-left:16px; padding-right:16px; } .verdict { font-size:var(--fs-600); } .pair { grid-template-columns:1fr; } }
@media (max-width:900px) { .hide-sm { display:none; } }
.ikon { display:inline-grid; place-items:center; width:40px; height:40px; background:var(--navy); flex:none; } .ikon img { width:24px; height:24px; display:block; }
.ikon.lille { width:32px; height:32px; } .ikon.lille img { width:20px; height:20px; }
/* 11 Menneskestyring: Material 3's slider with stops, in EV colours (components/menneskestyring.js) */
.c-menneskestyring { background:var(--warm); padding:var(--sp-5) var(--sp-6); margin:0 0 var(--sp-6); }
.c-menneskestyring h3 { margin:0 0 var(--sp-1); font-size:var(--fs-xs); font-weight:700; }
.c-menneskestyring .lvl { font-size:var(--fs-h3); font-weight:700; color:var(--navy); display:flex; align-items:center; gap:var(--sp-2); }
.c-menneskestyring .lvl .chip { width:14px; height:14px; background:var(--niv); flex:none; }
.c-menneskestyring .kort { color:var(--muted); font-size:var(--fs-small); margin-top:2px; }
.ms-slider { position:relative; height:44px; margin:40px 0 2px; }
.ms-slider input { -webkit-appearance:none; appearance:none; display:block; width:100%; height:44px; margin:0; padding:0; border:0; background:none; cursor:pointer; }
.ms-slider input::-webkit-slider-runnable-track { height:16px; border-radius:8px; background:linear-gradient(90deg, transparent calc(var(--f) * 100%), var(--grey4) calc(var(--f) * 100%)), linear-gradient(90deg, var(--navy), var(--blue) 25%, var(--blue3) 50%, var(--turkis1) 75%, var(--turkis)); }
.ms-slider input::-moz-range-track { height:16px; border-radius:8px; background:linear-gradient(90deg, transparent calc(var(--f) * 100%), var(--grey4) calc(var(--f) * 100%)), linear-gradient(90deg, var(--navy), var(--blue) 25%, var(--blue3) 50%, var(--turkis1) 75%, var(--turkis)); }
.ms-slider input::-webkit-slider-thumb { -webkit-appearance:none; width:4px; height:44px; margin-top:-14px; border-radius:2px; background:var(--navy); box-shadow:0 0 0 4px var(--warm); }
.ms-slider input::-moz-range-thumb { width:4px; height:44px; border:0; border-radius:2px; background:var(--navy); box-shadow:0 0 0 4px var(--warm); }
.ms-slider input:active::-webkit-slider-thumb { width:2px; }
.ms-slider input:focus-visible { outline:none; }
.ms-slider input:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--warm), 0 0 0 6px var(--navy); }
.ms-slider .stops i { position:absolute; top:20px; left:calc(2px + (100% - 4px) * var(--i) / 4 - 2px); width:4px; height:4px; border-radius:50%; background:var(--navy); pointer-events:none; }
.ms-slider .stops i.paa { background:var(--bg); } .ms-slider .stops i.her { display:none; }
.ms-slider .boble { position:absolute; bottom:50px; left:calc(2px + (100% - 4px) * var(--f)); transform:translateX(-50%); background:var(--navy); color:var(--bg); font-size:var(--fs-small); font-weight:700; padding:4px 12px; opacity:0; transition:opacity var(--dur-150) var(--ease-standard); pointer-events:none; }
.ms-slider:hover .boble, .ms-slider input:focus-visible ~ .boble { opacity:1; }
.c-menneskestyring .ticks { display:grid; grid-template-columns:1fr 2fr 2fr 2fr 1fr; }
.c-menneskestyring .ticks button { font:inherit; font-size:var(--fs-xs); background:none; border:0; border-bottom:3px solid transparent; padding:var(--sp-1) 0; color:var(--muted); cursor:pointer; text-align:center; }
.c-menneskestyring .ticks button:first-child { text-align:left; } .c-menneskestyring .ticks button:last-child { text-align:right; }
.c-menneskestyring .ticks button[aria-pressed="true"] { color:var(--navy); font-weight:700; border-bottom-color:var(--niv); }
.c-menneskestyring .ticks button:hover:not(:disabled) { color:var(--navy); }
.c-menneskestyring .graense { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); font-size:var(--fs-small); margin-top:12px; } .c-menneskestyring .graense[hidden] { display:none; } .c-menneskestyring .graense select { min-width:0; padding:var(--sp-1) var(--sp-2); }
.c-menneskestyring .effekt { background:var(--bg); border-left:4px solid var(--niv); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0 0; }
.c-menneskestyring .effekt.ny { animation:ms-ny var(--dur-300) var(--ease-decelerate); }
@keyframes ms-ny { from { background:var(--turkis3); } to { background:var(--bg); } }
.ms-status { display:flex; align-items:center; gap:var(--sp-4); margin:var(--sp-2) 0 0; font-size:var(--fs-small); color:var(--navy); font-weight:500; } .ms-status[hidden] { display:none; }
.ms-status .fortryd { font:inherit; background:none; border:0; padding:0; color:var(--link); text-decoration:underline; cursor:pointer; font-weight:700; display:inline-flex; align-items:center; min-height:var(--sp-6); }
/* ROADMAP 19 S5 (#504): a standalone agent prototype's own header links back to the portal; shared so every
   prototype's "EV • EVOLVE" crumb meets the 24 px target (WCAG 2.5.8) the same way, not by seven copies of an inline style. */
/* Scoped to header: turquoise text is only allowed on a navy ground (ROADMAP 12, verify.sh criterion 5). */
header .crumb-mini { display:inline-flex; align-items:center; min-height:var(--sp-6); color:var(--turkis2); text-decoration:none; font-size:var(--fs-small); }
.c-menneskestyring .note { margin:var(--sp-2) 0 0; }
.c-menneskestyring.laast .ms-slider input { cursor:not-allowed; }
.c-menneskestyring.laast .ms-slider input::-webkit-slider-runnable-track { background:linear-gradient(90deg, var(--grey) calc(var(--f) * 100%), var(--grey4) calc(var(--f) * 100%)); }
.c-menneskestyring.laast .ms-slider input::-moz-range-track { background:linear-gradient(90deg, var(--grey) calc(var(--f) * 100%), var(--grey4) calc(var(--f) * 100%)); }
.c-menneskestyring.laast .ms-slider input::-webkit-slider-thumb { background:var(--grey); }
.c-menneskestyring.laast .ms-slider .boble { display:none; }
@media (max-width:640px) { .c-menneskestyring .ticks .tn { display:none; } }
@media (prefers-reduced-motion:reduce) { .c-menneskestyring .effekt.ny { animation:none; } .ms-slider .boble { transition:none; } }
.c-stribe .card .big { font-size:var(--fs-h1); }
/* Konfiguration (mbb, 2026-10-08): what you can change, what is decided, Stop, Log. Plain rows, no source pointers. */
.konfig-hoved { font-size:var(--fs-h3); margin:var(--sp-6) 0 var(--sp-3); text-transform:none; letter-spacing:0; }
.konfig-hoved:first-child { margin-top:0; }
.c-rammer .r-tabel { width:100%; border-collapse:collapse; table-layout:fixed; }
.c-rammer .r-tabel th, .c-konfiglog td { text-align:left; font-size:var(--fs-body); font-weight:400; color:var(--ink); text-transform:none; letter-spacing:0;
  padding:var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom:1px solid var(--line); vertical-align:top; }
.c-rammer .r-tabel th { width:40%; }
.c-rammer .r-tabel td { padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.c-rammer .r-kan { margin:0 0 var(--sp-4); }
.c-rammer h3 { margin:var(--sp-6) 0 var(--sp-2); font-size:var(--fs-h3); }
.c-rammer h4 { margin:var(--sp-4) 0 var(--sp-1); font-size:var(--fs-small); }
.c-konfiglog { margin:var(--sp-6) 0 0; }
.c-konfiglog h3 { font-size:var(--fs-h3); margin:0 0 var(--sp-3); }
.c-konfiglog table { width:100%; border-collapse:collapse; font-size:var(--fs-small); }
.c-konfiglog .tid { white-space:nowrap; color:var(--muted); width:9em; }