/* ============================================================================
   PlanAssist designsystem — "Lyst Blæk" (akt-koncept)
   Delt på tværs af alle PlanAssist-værktøjer (Miljøvurdering, Hvidbog, …).
   Godkendt af Lasse 10/6-2026. Erstatter colors_and_type.css + style.css.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* skrivebord (rammen om akten) — Lyst */
  --desk:        #E9ECEF;
  --desk-grad:   radial-gradient(circle at 50% -10%, #f1f3f5 0%, #E4E8EC 70%);
  /* akt / papir */
  --sheet:       #FCFDFE;
  --sheet-deep:  #f4f6f8;
  /* blæk */
  --ink:         #14181C;
  --ink-2:       #454d54;
  --ink-3:       #646b70;  /* AA-rettet 18/9 (27 lint-fejl). design_lint.py måler ikke mod hvid
     alene, men mod den MEST UGUNSTIGE kendte baggrundskandidat i planassist-paletten — her
     #E9ECEF (--desk, skrivebords-rammen). Det gamle #8b949c gav kun 3.94:1 dér. #646b70 er samme
     blålige gråtone skaleret ca. 28% mørkere og lander på 4.57:1 mod #E9ECEF (5.41:1 mod hvid) —
     over WCAG AA's 4.5:1-krav på tværs af alle fire baggrundskandidater (E9ECEF/F3F5F7/F4F6F8/FCFDFE). */
  /* linjer */
  --rule:        #e2e6ea;
  --rule-strong: #b6bdc4;
  --rule-thin:   1px solid var(--rule);
  /* accenter */
  --accent:      #173A5E;   /* blæk-blå */
  --accent-2:    #3A6A93;
  --accent-bg:   rgba(23,58,94,.06);
  --stempel:     #9A2C2C;   /* bordeaux */
  --done:        #2C6B4F;   /* grøn — udfyldt */
  --done-bg:     #eaf1ec;
  --pending:     #cfd5db;
  --amber:       #B5841F;
  --signal-rod:  #9A2C2C;
  --note-bg:     #eef1f4;
  --note-ink:    #5b6770;
  /* fonts */
  --f-title: 'IBM Plex Serif', Georgia, serif;
  --f-ui:    'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --f-mono:  'IBM Plex Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--f-ui); color: var(--ink); -webkit-font-smoothing: antialiased;
  background: var(--desk); background-image: var(--desk-grad); min-height: 100vh; line-height: 1.6;
}
[x-cloak] { display: none !important; }
.c-mute { color: var(--ink-3); }

/* ---- journal-bar (topbar i alle værktøjer) ---- */
.pa-bar { display:flex; align-items:center; justify-content:space-between; padding:11px 22px;
  background:rgba(255,255,255,.72); border-bottom:1px solid rgba(0,0,0,.07); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:30; }
.pa-bar .brand { font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; color:#5b6770; text-transform:uppercase; text-decoration:none; }
.pa-bar .brand b { color:var(--ink); font-weight:600; }
.pa-bar .meta { font-family:var(--f-mono); font-size:11px; color:var(--ink-3); display:flex; gap:16px; align-items:center; }
.pa-bar .who { color:#2c343b; }
.pa-pill { font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:2px; background:rgba(0,0,0,.06); color:#5b6770; }

/* ---- knapper ---- */
.btn { font-family:var(--f-ui); font-weight:600; font-size:13px; border:none; border-radius:3px; padding:10px 18px; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:8px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#0f2c47; }
.btn-stamp { background:var(--stempel); color:#fff; }
.btn-stamp:hover:not(:disabled) { background:#7d2424; }
.btn-secondary { background:var(--sheet); color:var(--ink-2); border:1px solid var(--rule-strong); }
.btn-secondary:hover:not(:disabled) { border-color:var(--accent-2); }
.btn-ghost { background:none; color:var(--ink-2); font-family:var(--f-mono); font-size:12px; padding:8px 12px; }
.btn-ghost:hover:not(:disabled) { color:var(--ink); }

/* ---- akt-layout: toc-status + akt ---- */
.pa-desk { display:grid; grid-template-columns:236px 1fr; gap:0; max-width:1200px; margin:0 auto; padding:26px 22px 80px; }

.pa-toc { position:sticky; top:68px; align-self:start; padding-right:20px; }
.pa-toc-h { font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#6b757d; margin-bottom:8px; }
/* donut-pejling */
.pa-gauge { display:flex; gap:13px; align-items:center; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.1); }
.pa-gauge svg { flex:none; }
.pa-gauge .ring-bg { stroke:rgba(0,0,0,.12); }
.pa-gauge .ring-fg { stroke:var(--accent-2); stroke-linecap:round; transition:stroke-dashoffset 1s ease; }
.pa-gauge .g-num { font-family:var(--f-mono); font-size:11px; fill:var(--ink); font-weight:600; }
.pa-gauge .g-txt { font-size:11px; color:#5b6770; line-height:1.5; }
.pa-gauge .g-txt b { color:var(--ink); }
.pa-gauge .g-txt .mod { color:var(--amber); }
/* status-linjer */
.pa-toc a { display:flex; gap:10px; align-items:center; text-decoration:none; font-size:12.5px; padding:6px 0 6px 12px;
  border-left:2px solid transparent; margin-left:-2px; color:#6b757d; position:relative; cursor:pointer; }
.pa-toc a .dot { width:15px; height:15px; border-radius:50%; flex:none; display:grid; place-items:center; }
.pa-toc a .dot svg { width:9px; height:9px; }
.pa-toc a.done .dot { background:var(--done); }
.pa-toc a.done .dot .chk { stroke:#fff; stroke-width:2.5; fill:none; }
.pa-toc a.todo .dot { border:1.5px solid rgba(0,0,0,.22); }
.pa-toc a.active .dot { background:var(--accent-2); box-shadow:0 0 0 4px var(--accent-bg); }
.pa-toc a.todo { color:#9aa3ab; }
.pa-toc a.active { color:var(--ink); font-weight:600; border-left-color:var(--accent-2); }
.pa-toc a.active::after { content:'HER'; position:absolute; right:0; font-family:var(--f-mono); font-size:8px; letter-spacing:.1em; color:var(--accent-2); }
.pa-toc-foot { margin-top:13px; font-family:var(--f-mono); font-size:10px; color:#6b757d; line-height:1.7; border-top:1px solid rgba(0,0,0,.1); padding-top:11px; }

/* ---- akten (papir-ark) ---- */
.pa-akt { background:var(--sheet); border-radius:3px; box-shadow:0 30px 70px -30px rgba(0,0,0,.45); position:relative; overflow:hidden; }
.pa-akt .spine { position:absolute; left:0; top:0; width:3px; background:var(--accent); transition:height .8s ease; z-index:2; }
.pa-akt-head { padding:36px 280px 22px 60px; border-bottom:3px double var(--rule-strong); position:relative; }
.pa-akt-kicker { font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:11px; }
.pa-akt-title { font-family:var(--f-title); font-weight:600; font-size:25px; letter-spacing:-.01em; line-height:1.15; margin-bottom:12px; }
.pa-akt-facts { display:flex; flex-wrap:wrap; gap:5px 28px; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); }
.pa-akt-facts b { color:var(--ink-3); font-weight:500; margin-right:6px; }
.pa-stamp-draft { position:absolute; top:32px; right:48px; font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--stempel); border:1.5px solid var(--stempel); border-radius:3px; padding:5px 12px; transform:rotate(-7deg); opacity:.72; }
.pa-site-silhouette { position:absolute; top:30px; right:46px; width:150px; height:110px; }
.pa-site-silhouette .frame { stroke:var(--rule-strong); stroke-width:.5; fill:none; }
.pa-site-silhouette .plot { stroke:var(--accent); stroke-width:1.5; fill:var(--accent-bg); }
.pa-site-silhouette .roads { stroke:var(--rule-strong); stroke-width:.8; fill:none; }
.pa-site-silhouette .lbl { font-family:var(--f-mono); font-size:6px; fill:var(--ink-3); letter-spacing:.08em; }

.pa-akt-body { padding:8px 280px 0 60px; position:relative; }
.pa-section-rule { display:flex; align-items:center; gap:14px; margin:26px 0 4px; }
.pa-section-rule .lbl { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.pa-section-rule .ln { height:1px; background:var(--rule); flex:1; }

/* § 8-gate */
.pa-gate-line { display:flex; gap:18px; flex-wrap:wrap; font-family:var(--f-mono); font-size:12px; color:var(--ink-2); padding:9px 0 4px; }
.pa-gate-chip .k { color:var(--ink-3); }
.pa-gate-chip .v { color:var(--ink); font-weight:600; margin-left:6px; }
.pa-gate-chip .v.j { color:var(--accent); }
.pa-gate-concl { font-family:var(--f-title); font-style:italic; font-size:14px; color:var(--ink-2); margin:7px 0 2px; }
/* gate-valg (interaktiv) */
.pa-spor { padding:14px 0; border-bottom:1px solid var(--rule); }
.pa-spor .tag-row { display:flex; gap:8px; margin-bottom:6px; }
.pa-spor .tag { font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.pa-spor .tag.strong { color:var(--accent); font-weight:600; }
.pa-spor h3 { font-family:var(--f-title); font-weight:600; font-size:15px; margin-bottom:4px; }
.pa-spor p { font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-bottom:9px; max-width:92%; }

/* kriterium-afsnit */
.pa-krit { position:relative; padding:17px 0 16px; border-bottom:1px solid var(--rule); }
.pa-krit::before { content:''; position:absolute; left:-60px; top:0; bottom:0; width:3px; background:transparent; }
.pa-krit.is-done::before { background:var(--done); }
.pa-krit.active::before { background:var(--accent); }
.pa-krit .marg { position:absolute; left:-52px; top:20px; width:40px; text-align:right; font-family:var(--f-mono); font-size:9.5px; color:var(--ink-3); line-height:1.5; }
.pa-krit .marg .id { color:var(--accent); font-weight:600; }
.pa-krit h3 { font-family:var(--f-title); font-weight:600; font-size:16px; margin-bottom:3px; }
.pa-krit h3 .no { color:var(--ink-3); font-family:var(--f-mono); font-size:13px; margin-right:8px; }
.pa-krit .q { font-size:13px; color:var(--ink-2); line-height:1.5; margin-bottom:9px; max-width:92%; }
.pa-krit .vurd { font-family:var(--f-title); font-size:14px; line-height:1.6; color:var(--ink); }
.pa-verdict { display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:11px; margin-top:9px; padding:3px 10px; border-radius:2px; }
.pa-verdict.nej { background:var(--done-bg); color:var(--done); }
.pa-verdict.ja { background:rgba(154,44,44,.1); color:var(--stempel); }
.pa-verdict.ir { background:#eef0f2; color:var(--ink-3); }
/* aktivt kriterium */
.pa-krit.active { background:var(--accent-bg); margin:0 -22px; padding:17px 22px 16px; border-radius:4px; }
.pa-krit.active::before { left:-38px; }
.pa-krit .here { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; font-weight:600; }
.pa-krit .here::before { content:'▸'; }
.pa-krit textarea { width:100%; min-height:88px; padding:12px 14px; font-family:var(--f-title); font-size:14px; line-height:1.55; border:1.5px solid var(--rule-strong); border-radius:4px; background:var(--sheet); color:var(--ink); resize:vertical; }
.pa-krit textarea:focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-bg); }
.pa-vp-row { display:flex; gap:8px; margin-top:12px; }
.pa-vp { font-family:var(--f-mono); font-size:11px; padding:6px 13px; border:1px solid var(--rule-strong); border-radius:2px; color:var(--ink-2); cursor:pointer; background:var(--sheet); transition:all .15s; }
.pa-vp:hover { border-color:var(--accent-2); }
.pa-vp.sel-nej { border-color:var(--done); background:var(--done-bg); color:var(--done); font-weight:600; }
.pa-vp.sel-ja { border-color:var(--stempel); background:rgba(154,44,44,.08); color:var(--stempel); font-weight:600; }
.pa-vp.sel-ir { border-color:var(--ink-3); background:#eef0f2; color:var(--ink-2); font-weight:600; }
/* todo-kriterium */
.pa-krit.todo { opacity:.5; }
.pa-krit.todo h3 { color:var(--ink-3); font-weight:500; }
.pa-krit .await { font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:7px; margin-top:4px; }
.pa-krit .await::before { content:'○'; color:var(--pending); }

/* AI margin-note */
.pa-note { position:absolute; right:-246px; width:214px; top:14px; background:var(--note-bg); border-left:2px solid var(--accent); padding:11px 13px; font-size:11.5px; line-height:1.5; color:var(--note-ink); }
.pa-note .nh { font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; }
.pa-note .nh .tag { color:var(--accent); }
.pa-note::before { content:''; position:absolute; left:-22px; top:16px; width:20px; height:1px; background:var(--rule-strong); }
.pa-note .nbody h4 { font-size:11.5px; font-weight:700; color:var(--ink-2); margin:9px 0 3px; }
.pa-note .nbody h4:first-child { margin-top:0; }
.pa-note .nbody p { margin-bottom:6px; }
.pa-note .nbody strong { color:var(--ink-2); font-weight:700; }
.pa-note .nbody ul { margin:4px 0 6px 2px; list-style:none; }
.pa-note .nbody li { padding-left:12px; position:relative; margin:2px 0; }
.pa-note .nbody li::before { content:'–'; position:absolute; left:0; color:var(--ink-3); }
.pa-note .nbody blockquote { background:rgba(0,0,0,.03); border-left:2px solid var(--accent-2); padding:7px 10px; margin:6px 0; font-style:italic; }
.pa-note .nbody hr { border:none; border-top:1px solid var(--rule); margin:8px 0; }
.pa-note .review { font-family:var(--f-ui); font-size:10px; font-weight:700; color:#8a6d1f; background:rgba(229,180,90,.16); border:1px solid rgba(229,180,90,.34); border-radius:4px; padding:3px 8px; display:inline-block; margin-bottom:8px; }
.pa-note .review::before { content:'⚑ '; }
.pa-note .suggest-btn { margin-top:9px; }
.pa-note .geo-empty { color:var(--ink-3); }

/* geodata dateret inline */
.pa-geo-inline { display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:8px 11px; background:var(--sheet-deep); border-left:2px solid var(--accent-2); font-family:var(--f-mono); font-size:10.5px; color:var(--ink-2); line-height:1.55; }
.pa-geo-inline .gi-ic { color:var(--accent-2); font-size:11px; }
.pa-geo-inline b { color:var(--ink); font-weight:600; }
.pa-geo-inline .stamp-date { color:var(--done); }

/* afgørelsen vokser */
.pa-verdict-zone { margin:30px -280px 0 -60px; padding:30px 60px 36px 60px; background:var(--sheet-deep); border-top:3px double var(--rule-strong); position:relative; }
.pa-verdict-zone .vk { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.pa-verdict-zone .vk .live { width:6px; height:6px; border-radius:50%; background:var(--done); animation:pa-pulse 1.6s infinite; }
.pa-verdict-zone .vt { font-family:var(--f-title); font-size:14px; line-height:1.62; color:var(--ink-2); max-width:70%; }
.pa-verdict-zone .stamp { position:absolute; right:50px; top:26px; width:124px; height:124px; border:2px solid var(--stempel); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(-8deg); color:var(--stempel); opacity:.32; }
.pa-verdict-zone .stamp .s1 { font-family:var(--f-mono); font-size:8px; letter-spacing:.14em; }
.pa-verdict-zone .stamp .s2 { font-family:var(--f-title); font-weight:600; font-size:13px; line-height:1.05; margin:5px 8px; }
.pa-verdict-zone .stamp .s3 { font-family:var(--f-mono); font-size:7.5px; letter-spacing:.1em; }
.pa-verdict-zone .act { margin-top:20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pa-hint { font-family:var(--f-mono); font-size:11px; color:var(--ink-3); }
@keyframes pa-pulse { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.15)} }

/* sammenfatning-overlay */
.pa-overlay { position:fixed; inset:0; background:rgba(16,21,28,.62); backdrop-filter:blur(3px); z-index:60; display:grid; place-items:center; padding:30px; }
.pa-summary { background:var(--sheet); border-radius:4px; max-width:760px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 40px 90px -30px rgba(0,0,0,.7); position:relative; }
.pa-summary-head { padding:28px 40px 18px; border-bottom:3px double var(--rule-strong); position:relative; }
.pa-summary-head .sk { font-family:var(--f-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.pa-summary-head h2 { font-family:var(--f-title); font-weight:600; font-size:22px; }
.pa-summary-head .x { position:absolute; top:24px; right:32px; font-family:var(--f-mono); font-size:18px; color:var(--ink-3); cursor:pointer; background:none; border:none; }
.pa-summary-body { padding:18px 40px 10px; }
.pa-sumrow { display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center; padding:9px 0; border-bottom:1px solid var(--rule); font-size:13px; }
.pa-sumrow .sid { font-family:var(--f-mono); font-size:10px; color:var(--ink-3); }
.pa-sumrow .sname { color:var(--ink); }
.pa-sumrow .sv { font-family:var(--f-mono); font-size:10.5px; padding:2px 9px; border-radius:2px; white-space:nowrap; }
.pa-flag { display:flex; gap:11px; margin:16px 0 6px; padding:13px 16px; background:#fdf6e9; border-left:3px solid var(--amber); border-radius:3px; font-size:12.5px; line-height:1.55; color:#6b531a; }
.pa-flag .fic { color:var(--amber); font-size:15px; }
.pa-flag b { color:#4a3a12; }
.pa-summary-foot { padding:18px 40px 30px; display:flex; gap:12px; align-items:center; border-top:1px solid var(--rule); margin-top:8px; }
.pa-stamp-burst { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:5; }
.pa-stamp-burst .bs { width:200px; height:200px; border:4px solid var(--stempel); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(-12deg) scale(1.5); opacity:0; color:var(--stempel); animation:pa-stamp .5s cubic-bezier(.2,1.4,.4,1) .05s both; }
.pa-stamp-burst .bs .b1 { font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; }
.pa-stamp-burst .bs .b2 { font-family:var(--f-title); font-weight:600; font-size:28px; margin:6px 0; }
.pa-stamp-burst .bs .b3 { font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; }
@keyframes pa-stamp { 60%{transform:rotate(-12deg) scale(.92);opacity:1} 100%{transform:rotate(-12deg) scale(1);opacity:1} }

/* ---- mobil ---- */
@media (max-width:860px) {
  .pa-bar { flex-direction:column; gap:6px; align-items:flex-start; }
  .pa-bar .meta { flex-wrap:wrap; gap:6px 12px; }
  .pa-desk { grid-template-columns:1fr; padding:12px 12px 60px; gap:14px; }
  .pa-toc { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.7); backdrop-filter:blur(8px); padding:12px 14px; border-radius:8px; }
  .pa-toc-list { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
  .pa-toc a { flex:none; border-left:none; padding:5px 9px; border-radius:20px; background:rgba(0,0,0,.05); }
  .pa-toc a.active { background:var(--accent-2); color:#fff; }
  .pa-toc a.active::after { display:none; }
  .pa-toc a.done { background:var(--done-bg); }
  .pa-toc-foot { display:none; }
  .pa-akt .spine { display:none; }
  .pa-akt-head { padding:24px 16px 18px; }
  .pa-site-silhouette { position:static; margin-top:12px; width:130px; }
  .pa-stamp-draft { position:static; display:inline-block; margin-top:10px; }
  .pa-akt-body { padding:8px 16px 0; }
  .pa-krit .marg { position:static; width:auto; text-align:left; margin-bottom:6px; }
  .pa-krit::before { left:0; }
  .pa-krit.active { margin:0 -10px; padding:15px 14px; }
  .pa-krit.active::before { left:0; }
  .pa-note { position:static; width:auto; margin-top:12px; }
  .pa-note::before { display:none; }
  .pa-verdict-zone { margin:26px -16px 0; }
  .pa-verdict-zone .vt { max-width:100%; }
  .pa-verdict-zone .stamp { position:static; margin:16px 0 0; }
  .pa-akt-title { font-size:21px; }
}

/* ============================================================================
   Taloverblik + levende sorterings-demo (bølge 2, runde 3, 18/9-2026)
   Genbrug, ikke ny opfindelse: klassenavne, værdier og mekanik er taget
   ORDRET fra `Stougaard Plan/09_Udvikling/planassist-web/index.html`
   (godkendt Blæk-kilde, Kates addendum "Kvalitetsniveau"-afsnit). Genbruges
   TRE steder: landing (frontend/index.html), værktøjets "Trin 0 · Overblik"
   (app/hvidbog.html), og en statisk (ikke-animeret) udgave i
   behandling-klar-mailen. Ét sted at rette skalaen, ikke tre.
   ============================================================================ */

.stats { border-top:var(--rule-thin); border-bottom:var(--rule-thin); background:rgba(255,255,255,.4); }
/* Kolonnetal styres pr. instans med --stat-cols (fallback 4) — samme
   komponent bruges med 4 tal (mail/Trin 0) og 5 tal (landing, FACIT's
   fulde 12/22/14/5/3-opdeling, se DESIGNREVIEW_TILBUD.md's regel om at
   ALDRIG opfinde et tal). */
.stats-in { display:grid; grid-template-columns:repeat(var(--stat-cols,4),1fr); }
.stat { padding:30px 26px; border-right:1px solid var(--rule); }
.stat:last-child { border-right:none; }
.stat .sn { font-family:var(--f-title); font-weight:600; font-size:34px; letter-spacing:-.01em; color:var(--ink); line-height:1; margin-bottom:9px; }
.stat .sn .u { font-size:18px; color:var(--ink-2); font-weight:400; } /* ink-2, ikke ink-3 — WCAG AA-fejl rettet 18/9, se note ved .hv-ind.vurderet */
.stat .sl { font-family:var(--f-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); line-height:1.5; }
@media (max-width:820px) {
  .stats-in { grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2n) { border-right:none; }
  .stat:not(:nth-last-child(-n+2)) { border-bottom:1px solid var(--rule); }
}
@media (max-width:480px) { .stat .sn { font-size:28px; } }

/* Reveal-on-scroll (samme mekanik som planassist.dk's .rev/.demo/.play) */
.rev { opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rev.in { opacity:1; transform:none; }
.rev.d1 { transition-delay:.08s; } .rev.d2 { transition-delay:.16s; } .rev.d3 { transition-delay:.24s; }
@media (prefers-reduced-motion:reduce) { .rev { opacity:1; transform:none; transition:none; } }

/* Levende sorterings-demo (".hv" — allerede bygget i planassist-web til
   netop Hvidbog-demoen, linje 205-222 i kilden, ikke brugt der endnu).
   Etiketterne herunder er Hvidbogens EGNE ("Fagligt indhold/Afklares/
   Vurderet"), ikke planassist-web's miljøscreenings-sprog — kun
   CSS-mekanikken er genbrugt, ikke indholdet. */
.hv { background:var(--sheet); border:1px solid var(--rule-strong); border-radius:4px; box-shadow:0 24px 50px -30px rgba(0,0,0,.4); padding:18px 18px 20px; position:relative; }
.hv-h { font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); margin-bottom:13px; display:flex; justify-content:space-between; }
.hv-h .ar { color:var(--accent); opacity:0; transition:opacity .5s .5s; }
.play .hv-h .ar { opacity:1; }
.hv-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hv-col-h { font-family:var(--f-title); font-weight:600; font-size:12.5px; margin-bottom:4px; opacity:0; transition:opacity .5s; }
.play .hv-col-h { opacity:1; transition-delay:.9s; }
.hv-ind { font-family:var(--f-mono); font-size:8px; letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:3px; display:inline-block; margin-bottom:8px; opacity:0; transition:opacity .5s; }
.play .hv-ind { opacity:1; transition-delay:1s; }
/* Farvekoden følger Hvidbogens EGEN taksonomi, ikke trafiklys (DESIGNBRIEF §6.4) */
.hv-ind.fagligt { background:var(--done-bg); color:var(--done); }
.hv-ind.afklares { background:rgba(181,132,31,.13); color:#7a5716; } /* mørkere end --amber — --amber selv fejler WCAG AA (2,49:1), samme kendte tokengæld som resten af paletten, men her rettet lokalt fordi det er et NYT badge, ikke genbrug af en eksisterende fejlbehæftet klasse */
.hv-ind.vurderet { background:#eef0f2; color:var(--ink-2); } /* neutral, IKKE --signal-rod/--stempel (tokenkollision — "Vurderet" må aldrig farves som et negativt sagsudfald) og IKKE --ink-3 (fejler WCAG AA, 2,60:1) — --ink-2 er den faktiske løsning, samme værdi som .kat-vurderet-kant nedenfor bruger til værktøjets "Vurderet"-kant */
.hv-card { background:var(--sheet-deep); border:1px solid var(--rule); border-left:2px solid var(--accent-2); border-radius:3px; padding:6px 9px; margin-bottom:6px; font-size:10.5px; color:var(--ink-2); opacity:0; transform:translateY(10px) scale(.96); transition:opacity .55s cubic-bezier(.2,.8,.3,1), transform .55s cubic-bezier(.2,.8,.3,1); }
.play .hv-card { opacity:1; transform:none; }
.hv-card .af { font-family:var(--f-mono); font-size:8.5px; color:var(--ink-2); display:block; margin-bottom:1px; }
.play .hv-card.g0 { transition-delay:.95s; } .play .hv-card.g1 { transition-delay:1.1s; } .play .hv-card.g2 { transition-delay:1.25s; }
.play .hv-card.g3 { transition-delay:1.4s; } .play .hv-card.g4 { transition-delay:1.55s; } .play .hv-card.g5 { transition-delay:1.7s; }
@media (prefers-reduced-motion:reduce) {
  .hv-h .ar, .hv-col-h, .hv-ind, .hv-card { opacity:1 !important; transform:none !important; transition:none !important; }
}
@media (max-width:600px) { .hv-cols { grid-template-columns:1fr; } }

/* Kate-fund (addendum, 18/9 sent), rettet 19/9: --signal-rod og --stempel er
   samme hex (#9A2C2C) som allerede bruges til negative sagsudfald —
   "Vurderet" må ALDRIG farves med denne. Addendummet pegede oprindeligt på
   --ink-3 (neutral grå), men --ink-3 fejler selv WCAG AA (2,60:1) — også
   som ikke-tekst-kontrast (SC 1.4.11 kræver 3:1 for en kant). Den faktiske
   løsning er --ink-2, samme værdi som .hv-ind.vurderet ovenfor. */
.kat-vurderet-kant { border-left:2px solid var(--ink-2) !important; }