/* ============================================================================
   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:       #8b949c;
  /* 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; }
}