:root {
  --bg: #0f1419;
  --panel: #1a212b;
  --panel-2: #222b37;
  --line: #2e3a48;
  --text: #e6edf3;
  --muted: #8b9bb0;
  --accent: #4fd1c5;
  --synergy: #4ade80;
  --dependency: #60a5fa;
  --tension: #f87171;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* App shell: the page itself never scrolls — each view scrolls inside #stage,
   so the header stays put. On iOS 100vh is the LARGE viewport (the height the
   page would have with the browser chrome retracted). Mobile Safari shows its
   chrome on load, so the shell overflowed the visible area, the document
   gained a scroll range it was never meant to have, and the header scrolled
   up out of sight — Safari collapsing its chrome as you scroll is driven by
   that same document scroll. 100svh is the viewport WITH the chrome showing,
   which is the height that actually has to fit; the overflow/overscroll lock
   removes the root scroll range entirely so nothing chains out of the inner
   views. about.html overrides both back to auto — it is a normal scrolling
   document. */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}

header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
header h1 { font-size: 17px; margin: 0; font-weight: 600; }
header h1 span { color: var(--muted); font-weight: 400; margin-left: 6px; }
header h1 { flex: 0 0 auto; }

/* ---------- global search ---------- */
.gsearch { position: relative; flex: 1 1 auto; max-width: 640px; margin: 0 auto; display: flex; align-items: center; }
.gsearch input {
  width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 20px; padding: 8px 64px 8px 16px; font-size: 14px; font-family: inherit;
}
.gsearch input:focus { outline: none; border-color: var(--accent); }
.gsearch kbd {
  position: absolute; right: 12px; font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; font-family: inherit; pointer-events: none;
}
#gsearch-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; max-height: 70vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
#gsearch-results[hidden] { display: none; }
.gs-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.gs-group span { color: var(--accent); margin-left: 4px; }
.gs-item {
  display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.gs-item:hover, .gs-item:focus { background: var(--panel-2); outline: none; }
.gs-item span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.gs-none { padding: 12px 10px; color: var(--muted); font-size: 13px; }

/* ---------- portal navigation ---------- */
#portal-nav {
  width: 244px; flex: 0 0 auto; background: var(--panel); border-right: 1px solid var(--line);
  overflow-y: auto; padding: 14px 10px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; color: #b4c2d6; font: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; min-height: 40px;
}
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: #1c2a44; color: #fff; }
.nav-item .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-label { flex: 1; }
.nav-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); background: #18233a; border-radius: 10px; padding: 1px 8px; }
.nav-group { margin: 16px 0 4px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6f819b; }

#map-panel-btn {
  display: none; position: absolute; top: 10px; left: 10px; z-index: 10;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 18px;
  padding: 8px 14px; font: inherit; font-size: 13px; cursor: pointer; min-height: 40px;
}

/* ---------- overview (home) ---------- */
#home-view { position: absolute; inset: 0; overflow-y: auto; background: var(--bg); }
#home-view[hidden] { display: none; }
.hm-hero { padding: 30px 32px 28px; background: #0d1a2b; border-bottom: 1px solid var(--line); }
.hm-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hm-hero h2 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.hm-latest { font-size: 13px; color: var(--muted); white-space: nowrap; }
.hm-hero p { margin: 8px 0 0; font-size: 15px; color: #9fb0c6; }
.hm-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.hm-tile {
  display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: var(--text);
  background: #121d33; border: 1px solid #223049; border-radius: 12px; padding: 14px 16px; cursor: pointer; min-height: 116px;
}
.hm-tile:hover { border-color: var(--accent); }
.hm-a { border-top: 3px solid #4fd1c5; } .hm-b { border-top: 3px solid #60a5fa; } .hm-c { border-top: 3px solid #f59e0b; }
.hm-d { border-top: 3px solid #a78bfa; } .hm-e { border-top: 3px solid #f472b6; }
.hm-tile-l { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #b4c2d6; }
.hm-tile-n { font-size: 32px; font-weight: 700; line-height: 1.1; }
.hm-tile-s { font-size: 12px; color: var(--muted); line-height: 1.4; }
.hm-body { padding: 24px 32px 40px; display: flex; flex-direction: column; gap: 20px; }
.hm-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.hm-card { background: #121d33; border: 1px solid #223049; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.hm-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hm-card h3 { margin: 0; font-size: 17px; font-weight: 600; }
.hm-link { background: none; border: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; padding: 0; }
.hm-link:hover { text-decoration: underline; }
.hm-note { font-size: 13px; color: var(--muted); margin: 0; }
.hm-locator { width: 100%; height: 300px; border-radius: 10px; overflow: hidden; cursor: pointer; background: #0f1729; }
.hm-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #9fb0c6; }
.hm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.hm-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hm-news { display: flex; flex-direction: column; gap: 3px; text-align: left; background: none; border: none; border-top: 1px solid #1d2a44; padding: 11px 0; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.hm-news:hover { color: var(--accent); }
.hm-news span { font-size: 12px; font-weight: 400; color: var(--muted); }
.hm-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hm-theme { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #0f1729; border: 1px solid #223049; border-radius: 10px; padding: 12px 14px; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; }
.hm-theme:hover { border-color: var(--accent); }
.hm-gaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hm-gap { background: #0f1729; border: 1px solid #223049; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.hm-gap b { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #f59e0b; margin-bottom: 2px; }


.suggest-btn {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.suggest-btn:hover { border-color: var(--accent); color: var(--accent); }

main { display: flex; flex: 1 1 auto; min-height: 0; }

#sidebar {
  width: 280px;
  flex: 0 0 auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 16px;
}
#sidebar section { margin-bottom: 22px; }
#sidebar h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 10px;
}
#sidebar h2 em { color: var(--accent); font-style: normal; float: right; }

#theme-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.chip.on { background: var(--accent); color: #06201d; border-color: var(--accent); font-weight: 600; }

#layer-filters { display: flex; flex-direction: column; gap: 4px; }
.layer-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--muted);
  border: 1px solid transparent;
}
.layer-toggle:hover { background: var(--panel-2); }
.layer-toggle.on { color: var(--text); }
.layer-toggle .swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; opacity: 0.35; }
.layer-toggle.on .swatch { opacity: 1; }
.layer-toggle .lt-label { flex: 1; }

.footprint { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.feat-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 12px; cursor: pointer;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
}
.feat-chip:hover { border-color: var(--accent); color: var(--accent); }
.kind-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; color: #06201d; font-weight: 600; }
.flag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; margin-top: 4px; }
.flag.indicative { background: #3a341d; color: #fbbf24; }
.flag.water { background: #14323f; color: #38bdf8; }
.flag.greenbelt { background: #1d3a2a; color: #4ade80; }
.loc-basis { font-size: 12px; color: #8b9bb0; margin: 6px 0; }

.auth-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
}
.auth-badge.statutory      { background: #3a2a10; color: #fbbf24; }
.auth-badge.national-policy { background: #2a1e3a; color: #c084fc; }
.auth-badge.funded-programme { background: #1a2a3a; color: #60a5fa; }
.auth-badge.voluntary      { background: #1e2630; color: #8b9bb0; }
.auth-badge.regulatory     { background: #3a1d22; color: #f87171; }


#strategy-list { list-style: none; padding: 0; margin: 0; }
#strategy-list li {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid transparent;
}
#strategy-list li:hover { background: var(--panel-2); }
#strategy-list li.dim { opacity: 0.3; }
#strategy-list li .owner { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
#strategy-list li .tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); float: right;
}

#stage { flex: 1 1 auto; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; }

#claims-view {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--bg);
}

#timeline-view {
  position: absolute; inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}

/* The chart SVG has a 500px floor (see TL_LABEL_W and render() in app.js), so
   on a phone it is wider than the view and the right-hand years used to be
   clipped unreachably by the overflow-x:hidden above. Scroll the chart itself
   rather than the whole view, so the period and mode tabs stay put while the
   years pan. */
.tl-chart-scroll {
  padding: 8px 16px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.tl-item { cursor: pointer; transition: opacity 0.1s; }
.tl-item:hover { opacity: 0.7; }

.tl-period-bar { display: flex; padding: 12px 16px 0; }
.tl-period-btn {
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 5px 14px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  text-align: center;
  line-height: 1.25;
}
.tl-period-btn:first-child { border-radius: 6px 0 0 6px; }
.tl-period-btn:last-child  { border-radius: 0 6px 6px 0; }
.tl-period-btn + .tl-period-btn { border-left: none; }
.tl-period-btn.active { background: var(--accent); color: #06201d; font-weight: 600; }
.tl-period-sub { display: block; font-size: 10px; opacity: 0.7; font-weight: 400; }

.claims-header { margin-bottom: 18px; }
.claims-header h2 { margin: 0 0 5px; font-size: 15px; }
.claims-subtitle { color: var(--muted); font-size: 12px; margin: 0 0 10px; line-height: 1.45; max-width: 600px; }
.claims-summary { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.cs-amber { color: #f59e0b; }
.cs-red   { color: #f87171; }

/* ---------- sub-view tabs (Timeline: Events|Delivery · Frameworks: Doughnut|Rewiring) ---------- */
.tl-mode-bar {
  display: flex; gap: 2px; align-items: flex-end;
  padding: 12px 16px 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
#flows-view .tl-mode-bar, #doughnut-view .tl-mode-bar, #rewiring-view .tl-mode-bar { padding: 0; }
.tl-mode-btn {
  font-size: 13px; padding: 8px 20px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0;
  position: relative; top: 1px;
}
.tl-mode-btn:hover { color: var(--text); }
.tl-mode-btn.active {
  color: var(--accent); font-weight: 600;
  background: var(--panel); border-color: var(--line);
  border-bottom: 1px solid var(--panel);
}

/* ---------- flows panel ---------- */
#flows-view { position: absolute; inset: 0; overflow-y: auto; padding: 20px 24px 32px; background: var(--bg); }
.flow-switch { padding: 0 0 16px; }

.flow-chart { position: relative; max-width: 860px; padding: 6px 0 30px; margin-bottom: 8px; }
.flow-row { margin-bottom: 18px; }
.flow-row:last-of-type { margin-bottom: 0; }
.flow-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.flow-row-label { font-size: 12px; font-weight: 600; color: var(--text); }
.flow-row-total { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.flow-row-gaps { font-style: normal; font-size: 10px; color: #f59e0b; }
.flow-track { display: flex; height: 30px; background: rgba(46, 58, 72, 0.35); border-radius: 3px; overflow: hidden; }
.flow-seg { height: 100%; margin-right: 1px; opacity: 0.92; transition: opacity 0.12s; flex: none; }
.flow-seg:last-child { margin-right: 0; }
.flow-seg.hot { opacity: 1; outline: 2px solid #fff; outline-offset: -2px; }
.flow-seg-gap {
  width: 34px;
  background: repeating-linear-gradient(45deg, rgba(245,158,11,0.35) 0 6px, rgba(245,158,11,0.07) 6px 12px);
  border: 1px dashed #f59e0b;
  border-radius: 2px;
}
.flow-limit {
  position: absolute; top: 0; bottom: 0;
  border-left: 2px dashed #f87171;
  pointer-events: none;
}
.flow-limit-label {
  position: absolute; bottom: 2px; left: 6px;
  font-size: 10px; color: #f87171; white-space: nowrap; font-weight: 600;
}
.flow-over {
  position: absolute; top: 0; bottom: 0; right: 0;
  background: linear-gradient(90deg, rgba(248,113,113,0.10), rgba(248,113,113,0.05));
  pointer-events: none;
}

.flow-tchart { width: 100%; max-width: 940px; height: auto; display: block; margin-bottom: 10px; }
.flow-ax { fill: var(--muted); font-size: 10px; }
.flow-target-label { fill: #f87171; font-size: 10px; font-weight: 600; }
.flow-area { transition: opacity 0.12s; }
.flow-area.hot { opacity: 1 !important; stroke: #fff; stroke-width: 1.2; }

.flow-cols { display: flex; gap: 44px; flex-wrap: wrap; max-width: 980px; }
.flow-col { flex: 1; min-width: 300px; max-width: 480px; }
.flow-col-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.flow-list { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.flow-li { display: flex; gap: 7px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(46, 58, 72, 0.5); }
.flow-li:last-child { border-bottom: none; }
.flow-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; position: relative; top: 1px; }
.flow-swatch.hatch {
  background: repeating-linear-gradient(45deg, rgba(245,158,11,0.5) 0 3px, transparent 3px 6px);
  border: 1px dashed #f59e0b;
}
.flow-li-label { flex: 1; color: var(--text); }
.flow-li.gap .flow-li-label { color: var(--muted); }
.flow-li-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-suggest { color: #f59e0b; text-decoration: none; font-size: 10px; }
.flow-suggest:hover { text-decoration: underline; }
.flow-footnote { margin-top: 20px; font-size: 11px; color: var(--muted); max-width: 660px; line-height: 1.5; }

/* ---------- doughnut panel ---------- */
#doughnut-view { position: absolute; inset: 0; overflow-y: auto; padding: 20px 24px 32px; background: var(--bg); }
.dough-wrap { display: flex; gap: 36px; flex-wrap: wrap; align-items: flex-start; }
.dough-left { flex: 1 1 380px; max-width: 520px; }
.dough-svg { width: 100%; height: auto; display: block; }
.dough-seg { cursor: pointer; transition: opacity 0.12s; }
.dough-seg.hot { opacity: 1 !important; stroke: #fff; stroke-width: 1.5; }
/* Wedge annotation. White on a dark halo so it holds up over all three wedge
   fills — red, green and the amber hatch — without needing a per-status colour.
   pointer-events:none keeps a label from swallowing a click meant for its
   wedge. Sizes are SVG user units in a 640 viewBox: at phone width that scales
   to roughly 10px, which is the floor for legibility. */
.dough-ring-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgba(15, 20, 25, 0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
/* Outer ring has ~242 units of arc per wedge (7 wedges at r=270), so it can
   carry a large label. The inner ring has ~96 (12 wedges at r=182.5), which is
   what caps the social labels — "Connectivity" is the binding case. */
.dough-ring-label    { font-size: 23px; font-weight: 600; }
.dough-ring-label-in { font-size: 14px; font-weight: 600; }

.dough-center-num { fill: var(--text); font-size: 26px; font-weight: 700; }
.dough-center-sub { fill: var(--muted); font-size: 12px; }
.dough-couple {
  fill: none; stroke: #fff; stroke-width: 2; opacity: 0.85;
  pointer-events: none;
}
.dough-ring-meta {
  fill: var(--muted); font-size: 16px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  pointer-events: none;
}
.dough-ring-cap { fill: rgba(74, 222, 128, 0.75); font-size: 11px; font-style: italic; }
.dough-cols { flex: 1 1 340px; display: flex; flex-direction: column; gap: 20px; min-width: 280px; max-width: 460px; }
.dough-col-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dough-col-blurb { font-size: 10px; color: var(--muted); margin: 3px 0 6px; line-height: 1.4; }
.dough-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.dough-li { display: flex; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid rgba(46, 58, 72, 0.5); cursor: pointer; border-radius: 3px; }
.dough-li:hover { background: rgba(46, 58, 72, 0.35); }
.dough-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dough-swatch.breach { background: #f87171; }
.dough-swatch.within { background: #4ade80; }
.dough-swatch.unquantified {
  background: repeating-linear-gradient(45deg, rgba(245,158,11,0.5) 0 3px, transparent 3px 6px);
  border: 1px dashed #f59e0b; border-radius: 2px;
}
.dough-li-label { flex: 1; color: var(--text); }
.dough-status { font-size: 10px; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.dough-status.breach { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.dough-status.within { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.dough-status.unquantified { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.dough-status.examples { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }

/* ---------- rewiring the economy panel ---------- */
#rewiring-view { position: absolute; inset: 0; overflow-y: auto; padding: 20px 24px 32px; background: var(--bg); }
.rw-wrap { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.rw-col-tasks { flex: 1.2 1 380px; min-width: 340px; max-width: 640px; }
.rw-col-amb { flex: 1 1 300px; min-width: 280px; max-width: 440px; }
.rw-actor { border-left: 3px solid var(--line); padding: 6px 0 6px 12px; margin: 12px 0 18px; }
.rw-actor-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.rw-task { display: flex; gap: 10px; align-items: flex-start; padding: 7px 6px; border-radius: 4px; cursor: pointer; }
.rw-task:hover { background: rgba(46, 58, 72, 0.35); }
.rw-task.hl { background: rgba(79, 209, 197, 0.14); box-shadow: inset 0 0 0 1px var(--accent); }
.rw-task-n {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  color: #0f1419; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.rw-task-label { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.35; }
.rw-task-head { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.rw-ambition { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.rw-amb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rw-amb-label { font-size: 13px; font-weight: 600; color: var(--text); }
.rw-amb-blurb { font-size: 11px; color: var(--muted); margin: 4px 0 8px; line-height: 1.45; }
.rw-amb-dims { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rw-amb-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 14px 0 8px; }
.rw-sdgs { display: flex; flex-wrap: wrap; gap: 4px; }
.rw-sdg { font-size: 9.5px; padding: 1px 6px; border-radius: 3px; background: rgba(139, 155, 176, 0.15); color: var(--muted); }
.rw-originals { display: flex; gap: 24px; flex-wrap: wrap; margin: 0 0 24px; }
.rw-fig { flex: 1 1 280px; max-width: 400px; margin: 0; }
.rw-fig img { width: 100%; height: auto; border-radius: 8px; background: #fff; padding: 8px; box-sizing: border-box; }
.rw-fig figcaption { font-size: 10px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.dough-ref { max-width: none; margin-top: 10px; }

/* Framework attribution. The original diagrams are no longer embedded — the
   copies held were 204-345px wide and rendered blurred at any useful size, and
   the lists are the better entry point — but CC BY-SA / CC BY-NC-SA both
   require attribution for the derived work, so the credit stays in the view
   whether or not the image does. */
/* Our own Rewiring figure — drawn from data/rewiring.js, not a reproduction of
   CISL's diagram. Carries our task assessments and the ambition statuses derived
   from the Doughnut dimensions each ambition covers. */
.rw-fig-svg { width: 100%; max-width: 720px; height: auto; display: block; margin: 4px 0 18px; }
.rw-fig-cap { fill: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.rw-fig-amb-label { fill: var(--text); font-size: 11.5px; font-weight: 600; }
.rw-fig-actor { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }
.rw-fig-n { fill: #06201d; font-size: 11px; font-weight: 700; }
.rw-fig-task-label { fill: var(--muted); font-size: 11px; }
.rw-fig-amb, .rw-fig-task { cursor: pointer; }
.rw-fig-amb:hover rect, .rw-fig-task:hover rect { opacity: 0.34; }

.fw-credit {
  font-size: 11px; color: var(--muted); line-height: 1.55;
  max-width: 620px; margin: 14px 0 0;
  border-left: 2px solid var(--line); padding: 8px 12px;
}
.fw-credit a { color: var(--accent); text-decoration: none; white-space: nowrap; margin-left: 6px; }
.fw-credit a:hover { text-decoration: underline; }

/* ---------- ask panel (curated Q&A) ---------- */
#ask-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 260;
  padding: 10px 22px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--accent); color: #06201d; font-weight: 700; font-size: 13px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
#ask-fab:hover { filter: brightness(1.08); }
#ask-fab.open { background: var(--panel-2); color: var(--accent); border: 1px solid var(--accent); }
#suggest-fab {
  position: fixed; right: 18px; bottom: 64px; z-index: 258;
  padding: 8px 18px; border-radius: 999px;
  background: var(--panel-2); color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 12px; font-weight: 600; text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
#suggest-fab:hover { background: var(--panel); }
#ask-panel[hidden] { display: none; }
#ask-panel {
  position: fixed; right: 18px; bottom: 112px; z-index: 259;
  width: 420px; max-width: calc(100vw - 24px); max-height: 72vh;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.ask-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.ask-title { font-size: 14px; font-weight: 700; color: var(--text); }
.ask-sub { font-size: 11px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
#ask-close { background: transparent; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 2px; }
#ask-close:hover { color: var(--text); }
.ask-body { overflow-y: auto; padding: 4px 16px 16px; }
.ask-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 16px 0 2px; }
.ask-q {
  width: 100%; text-align: left; background: transparent; border: none; cursor: pointer;
  color: var(--text); font-size: 12.5px; font-family: inherit; line-height: 1.4;
  padding: 8px 2px; display: flex; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid rgba(46, 58, 72, 0.45);
}
.ask-q:hover { color: var(--accent); }
.ask-caret { color: var(--muted); flex: none; transition: transform 0.15s; }
.ask-q.open .ask-caret { transform: rotate(90deg); }
.ask-a { font-size: 12px; line-height: 1.55; padding: 8px 2px 12px; border-bottom: 1px solid rgba(46, 58, 72, 0.45); }
.ask-a p { margin: 0 0 8px; color: var(--text); }
.ask-foot { font-size: 10.5px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }
.ask-about { color: var(--accent); text-decoration: none; }
.ask-about:hover { text-decoration: underline; }
@media (max-width: 767px) {
  #ask-panel { right: 0; left: 0; bottom: 0; width: auto; max-width: none; max-height: 78vh; border-radius: 14px 14px 0 0; }
  #ask-fab { bottom: 14px; right: 14px; }
}

/* ---------- first-time tour ---------- */
.about-link { color: var(--muted); text-decoration: none; font-size: 12px; flex: none; }
.about-link:hover { color: var(--accent); }

.tour-btn {
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
  font-size: 13px; line-height: 1; cursor: pointer;
  flex: none;
}
.tour-btn:hover { color: var(--accent); border-color: var(--accent); }

#tour-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 8, 14, 0.55);
  pointer-events: none;
  animation: tour-fade 0.25s ease;
}
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
.tour-hl {
  position: fixed; z-index: 301; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(79, 209, 197, 0.22), 0 0 24px rgba(79, 209, 197, 0.25);
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.tour-card {
  position: fixed; z-index: 302; pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.55);
  transition: left 0.3s ease, top 0.3s ease;
}
.tour-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--accent); }
.tour-text  { font-size: 12px; line-height: 1.5; color: var(--text); }
.tour-foot  { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 10px; }
.tour-dots i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line); margin-right: 5px;
}
.tour-dots i.on { background: var(--accent); }
.tour-actions { display: flex; gap: 8px; }
.tour-actions button {
  font-family: inherit; font-size: 11px; cursor: pointer;
  border-radius: 5px; padding: 4px 12px;
}
.tour-skip { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.tour-skip:hover { color: var(--text); }
.tour-next { background: var(--accent); color: #06201d; border: none; font-weight: 600; }
.tour-next:hover { filter: brightness(1.1); }

/* ---------- strategies register ---------- */
#strategies-view {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--bg);
}

/* ---------- news feed ---------- */
#news-view {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--bg);
}
.news-rss { color: var(--accent); text-decoration: none; white-space: nowrap; }
.news-rss:hover { text-decoration: underline; }
.news-list { max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.news-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--panel);
  scroll-margin-top: 12px;
}
.news-item.news-linked { border-color: var(--accent); }
.news-date { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.news-title { margin: 4px 0 8px; font-size: 14.5px; line-height: 1.35; }
.news-perma { color: var(--muted); text-decoration: none; font-weight: 400; margin-left: 4px; opacity: 0.5; }
.news-perma:hover { color: var(--accent); opacity: 1; }
.news-summary { font-size: 12.5px; line-height: 1.55; color: var(--text); margin: 0 0 10px; }
.news-connects { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.news-connects-label { font-size: 11px; color: var(--muted); }
.news-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); cursor: pointer;
}
.news-chip:hover { border-color: var(--accent); }
.news-facts { margin: 0 0 10px; padding-left: 18px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.news-facts li { margin-bottom: 2px; }
.news-sources { font-size: 11px; color: var(--muted); line-height: 1.6; }
.news-sources a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); }
.news-sources a:hover { color: var(--accent); }
.reg-header { margin-bottom: 18px; }
.reg-header h2 { margin: 0 0 5px; font-size: 15px; }
.reg-subtitle { color: var(--muted); font-size: 12px; margin: 0 0 10px; line-height: 1.45; max-width: 640px; }
.reg-summary { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.reg-summary .rs-stat { color: var(--muted); }
.reg-themebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); margin: 10px 0 18px; }

.reg-group {
  border-left: 3px solid #8b9bb0;
  padding: 2px 0 2px 14px;
  margin: 0 0 20px;
}
.reg-group-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.reg-group-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.reg-group-count {
  font-size: 11px; color: var(--muted);
  background: var(--panel-2); border-radius: 10px; padding: 1px 8px;
}
.reg-group-blurb { font-size: 11px; color: var(--muted); font-style: italic; }

.reg-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 8px; }
.reg-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.reg-row:hover { border-color: var(--accent); background: var(--panel-2); }
.reg-row-main { display: flex; align-items: center; gap: 7px; }
.reg-title { font-size: 13px; font-weight: 500; }
.reg-sourced { color: var(--accent); font-size: 11px; }
.reg-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; font-size: 11px; color: var(--muted); }
.reg-scope { color: #9db4c0; }
.reg-scope::before { content: "· "; color: var(--muted); }
.reg-horizon::before { content: "· "; color: var(--muted); }
.reg-themes { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
.reg-theme {
  font-size: 10px; color: var(--muted);
  background: var(--panel-2); border-radius: 3px; padding: 1px 6px;
}

.domain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.domain-grid + .domain-grid { margin-top: 12px; }
.domain-grid > .domain-card { flex: 1 1 250px; min-width: 0; }
.domain-grid > .domain-card-chart { flex: 1 1 460px; }
.domain-chart, .hm-flow {
  display: block; width: 100%; margin-top: 10px; padding: 8px; text-align: left; font: inherit; color: var(--text);
  background: #0f1729; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.domain-chart:hover, .hm-flow:hover { border-color: var(--accent); }
.domain-chart .flow-tchart, .hm-flow .flow-tchart { margin-bottom: 4px; max-width: none; }
.flow-mini { pointer-events: none; }
.flow-li-src { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.flow-bar-label, .flow-bar-val { font-size: 13px; fill: var(--text); }
.flow-mini .flow-ax, .flow-mini .flow-target-label, .flow-mini .flow-bar-label, .flow-mini .flow-bar-val { display: none; }
.domain-chart-cap { display: flex; flex-direction: column; gap: 1px; font-size: 12px; font-weight: 500; line-height: 1.35; }
.domain-chart-cap em { font-style: normal; font-size: 11px; color: var(--accent); }
.hm-flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hm-flow { padding: 10px 12px; }
.hm-flow .flow-tchart { max-height: 110px; }
.hm-flow-label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }
@media (max-width: 767px) { .hm-flows { grid-template-columns: minmax(0, 1fr); } }
.domain-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.domain-card:hover { border-color: var(--accent); background: var(--panel-2); }
.domain-card.domain-gap { opacity: 0.55; cursor: default; }
.domain-card.domain-gap:hover { border-color: var(--line); background: var(--panel); }
.domain-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.domain-label { font-size: 13px; font-weight: 600; }

.td { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.td-green { background: #4ade80; }
.td-amber { background: #f59e0b; }
.td-red   { background: #f87171; }

.domain-count { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.domain-breakdown { font-size: 11px; color: #6b7b8b; }
.bd-constraint { color: #f59e0b; }
.domain-gap-note { font-size: 11px; color: #f87171; margin-top: 4px; }

/* Claim rows — used in both Claims detail and feature detail */
.claim-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.claim-row:last-child { border-bottom: none; }
.claim-metric { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.claim-value-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; margin-bottom: 3px;
}
.claim-horizon { font-size: 10px; color: var(--muted); }
.claim-overlap { font-size: 10px; color: #f59e0b; margin-top: 3px; }
.claim-discrepancy { font-size: 10px; color: #fbbf24; margin-top: 4px; line-height: 1.45; padding: 4px 6px; background: rgba(251,191,36,0.08); border-left: 2px solid #fbbf24; border-radius: 2px; }
.claim-source  { font-size: 10px; color: #6b7b8b; margin-top: 4px; line-height: 1.4; }
.claim-note    { font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.45; font-style: italic; }

.dir-badge {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.dir-promise    { background: #1a3a2a; color: #4ade80; }
.dir-target     { background: #1a2a3a; color: #60a5fa; }
.dir-constraint { background: #3a1d22; color: #f87171; }
.dir-gap        { background: #3a2a10; color: #f59e0b; }

.ungrounded {
  font-size: 9px; color: #f59e0b;
  display: inline-block; padding: 1px 6px; border-radius: 4px; background: #3a2a10;
}

/* Feature detail additions */
.planning-ref-badge {
  display: inline-block; margin-left: 8px;
  padding: 1px 8px; border-radius: 10px; font-size: 11px;
  background: #2a1e3a; color: #c084fc; font-family: monospace;
}
.source-item {
  font-size: 12px; color: var(--muted); margin-bottom: 6px; line-height: 1.4;
}
.source-item a { color: var(--accent); text-decoration: none; }
.source-item a:hover { text-decoration: underline; }


#detail {
  width: 340px;
  flex: 0 0 auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
  /* the shell does not scroll — #detail-body does, so the close button stays visible */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
}
#detail-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
}
#detail-close {
  position: absolute; top: 12px; right: 14px;
  z-index: 5;
  background: var(--panel);
  border-radius: 50%;
  background: none; border: none; color: var(--muted);
  font-size: 22px; cursor: pointer; line-height: 1;
}
#detail h3 { margin: 0 24px 4px 0; font-size: 16px; }
#detail .meta { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
#detail .status { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; }
#detail .status.published { background: #1d3a2a; color: var(--synergy); }
#detail .status.emerging { background: #3a341d; color: #fbbf24; }
#detail p.summary { font-size: 13px; line-height: 1.5; }
#detail .themes { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 16px; }
#detail .themes span { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--panel-2); color: var(--muted); }
#detail h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
.rel { border-left: 3px solid var(--line); padding: 4px 0 4px 10px; margin-bottom: 10px; font-size: 12px; }
.rel.synergy { border-color: var(--synergy); }
.rel.dependency { border-color: var(--dependency); }
.rel.tension { border-color: var(--tension); }
.rel .rel-target { font-weight: 600; cursor: pointer; }
.rel .rel-target:hover { color: var(--accent); }
.rel .rel-note { color: var(--muted); margin-top: 3px; line-height: 1.45; }
#detail .grounded { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: #14323f; color: var(--accent); }
#detail ul.facts { margin: 0; padding-left: 16px; }
#detail ul.facts li { font-size: 12px; line-height: 1.45; color: var(--text); margin-bottom: 6px; }
#detail a.source { display: block; color: var(--accent); font-size: 12px; text-decoration: none; margin-bottom: 5px; }
#detail a.source:hover { text-decoration: underline; }

.maplibregl-popup-content { background: var(--panel-2); color: var(--text); font-size: 12px; border-radius: 6px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--panel-2); }

/* ── Mobile ──────────────────────────────────────────────────── */
.mob-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  flex: 0 0 auto;
}

#mob-scrim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 25;
  background: rgba(0, 0, 0, 0.45);
}
#mob-scrim.visible { display: block; }

@media (max-width: 767px) {
  .mob-menu-btn { display: block; }

  header { padding: 10px 14px; gap: 10px; flex-wrap: wrap; row-gap: 8px; }
  .gsearch { order: 5; flex: 1 0 100%; max-width: none; margin: 0; }
  .gsearch kbd { display: none; }
  .gsearch input { padding-right: 16px; min-height: 40px; font-size: 16px; }
  #map-panel-btn:not([hidden]) { display: block; }
  .hm-hero { padding: 22px 16px 20px; }
  .hm-locator { height: 260px; }
  .hm-hero h2 { font-size: 24px; }
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tile-s { display: none; }
  .hm-body { padding: 16px 16px 32px; }
  .hm-row, .hm-themes, .hm-gaps { grid-template-columns: minmax(0, 1fr); }
  #portal-nav {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 30;
    transform: translateX(-100%); transition: transform 0.22s ease;
  }
  #portal-nav.open { transform: translateX(0); box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6); }
  .nav-item { min-height: 46px; font-size: 15px; }
  header h1 { font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header h1 span { display: none; }

  .about-link { display: none; }
  #suggest-fab { bottom: 58px; right: 14px; }

  main { position: relative; }

  /* Sidebar slides in from the left as an overlay */
  #sidebar {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: none;
  }
  #sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6);
  }

  /* Detail panel slides up from the bottom */
  #detail {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    max-height: 60vh;
    border-left: none;
    border-top: 1px solid var(--line);
    z-index: 20;
  }

  /* Stage fills the full width */
  #stage { width: 100%; }
}

/* ---------- actors directory ---------- */
#actors-view {
  position: absolute; inset: 0;
  /* header and footnote stay put; the table wrap is the scroller, so its
     sticky header row can pin to the top */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 16px;
  background: var(--bg);
}
#actors-view .ad-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ad-table th {
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 2;
}
/* #actors-view carries author display rules, so the hidden attribute needs this (see CLAUDE.md) */
#actors-view[hidden] { display: none !important; }

/* ---------- developments register (same scroll structure as actors) ---------- */
#developments-view {
  position: absolute; inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 16px;
  background: var(--bg);
}
#developments-view .ad-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
#developments-view[hidden] { display: none !important; }
.ad-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.ad-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .85rem; }
.ad-table th { text-align: left; padding: .5rem .6rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
.ad-table th[data-sort] { cursor: pointer; user-select: none; }
.ad-table th[data-sort]:hover { text-decoration: underline; }
.ad-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.ad-table tbody tr { cursor: pointer; }
.ad-table tbody tr:hover td { background: rgba(125, 125, 125, .07); }
.ad-sector { font-size: .75rem; opacity: .65; }
.ad-none { opacity: .45; font-style: italic; }
.ad-geo { display: inline-block; font-size: .68rem; padding: 0 .3rem; border: 1px solid var(--line); border-radius: 3px; margin-left: .3rem; opacity: .75; }
.ad-geo.local { border-color: #16a34a; color: #16a34a; opacity: 1; }
.ad-type { display: inline-block; font-size: .72rem; padding: .05rem .35rem; border-radius: 3px; border: 1px solid var(--line); white-space: nowrap; }
.ad-type-quasi-public { border-color: #a78bfa; }
.ad-type-public { border-color: #38bdf8; }
.ad-type-third-sector { border-color: #f59e0b; }
.ad-footnote { font-size: .78rem; opacity: .7; margin: 0 0 1.5rem; }

/* who makes the claim — shown first on every claim row */
.claim-claimant {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: #14323f;
  border-radius: 10px;
  padding: 1px 8px;
  margin-bottom: 4px;
}
.ad-unchecked { opacity: .3; font-style: italic; }
/* display:flex on #detail would otherwise defeat the hidden attribute (see CLAUDE.md) */
#detail[hidden] { display: none; }

/* actors directory — sort chips (mobile only; desktop sorts via column headers) */
.ad-sortbar { display: none; gap: 6px; align-items: center; flex: none;
  font-size: .78rem; color: var(--muted); margin-bottom: 8px; flex-wrap: wrap; }
.ad-sortchip { background: var(--panel); color: inherit; border: 1px solid var(--line);
  border-radius: 12px; padding: 2px 10px; font-size: .78rem; cursor: pointer; }
.ad-sortchip.active { border-color: var(--accent); color: var(--accent); }

@media (max-width: 767px) {
  /* the table becomes stacked cards: no horizontal scroll, no header row */
  #actors-view .reg-summary { display: none; }
  #actors-view { display: block; overflow-y: auto; }
  #developments-view .reg-summary { display: none; }
  #developments-view { display: block; overflow-y: auto; }
  .ad-sortbar { display: flex; }
  .ad-table-wrap { overflow: visible; }
  .ad-table, .ad-table tbody, .ad-table tr, .ad-table td { display: block; min-width: 0; }
  .ad-table thead { display: none; }
  .ad-table tr { border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 12px; margin-bottom: 10px; }
  .ad-table td { border-bottom: none; padding: 2px 0; }
  .ad-table td[data-label]::before { content: attr(data-label) ": ";
    color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
}