/* Finance Director OS — dashboard. House tokens (names fixed), light-glass skin values, finish kit rules in use. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg-0: #faf8f4;
  --bg-1: #fffdf9;
  --bg-2: #ffffff;
  --bg-3: #f2eee6;
  --text-0: #1d1a16;
  --text-1: #3b352d;
  --text-2: #6b6459;
  --text-3: #98907f;
  --line: rgba(29, 26, 22, 0.10);
  --line-strong: rgba(29, 26, 22, 0.20);
  --accent: #e8590c;
  --accent-ink: #b8460a;
  --accent-soft: rgba(232, 89, 12, 0.10);
  --on-accent: #fffdf9;
  --ok: #2f6b47;
  --warn: #9a6b10;
  --danger: #b03226;

  --pane: color-mix(in srgb, var(--bg-1) 55%, transparent); --stars-o: 0;
  --page-wash: radial-gradient(1100px 560px at 12% -8%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  --tile-fill: color-mix(in srgb, var(--bg-3) 94%, var(--text-0)); --tile-line: var(--line); --tile-line-hot: var(--text-2);
  --trk: rgba(29, 26, 22, 0.30); --trk-gl: rgba(29, 26, 22, 0.08); --trk-hot: rgba(29, 26, 22, 0.9); --edge-dim: 0.4;
  --bp-bg: var(--bg-0); --bp-grid: rgba(29, 26, 22, 0.05); --bp-glow: 29, 26, 22;
  --wire-data: #4a95a6; --wire-data-hot: #0e7490; --wire-handoff: #b9892e; --wire-handoff-hot: #b45309; --wire-rail: #9a5b4a; --wire-rail-hot: #7c3f30; --wire-glow: 0.14;
  --font-display: -apple-system, system-ui, "Inter", sans-serif;
  --font-sans: -apple-system, system-ui, "Inter", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --t-label: 11px;
  --t-small: 12.5px;
  --t-body: 14px;
  --t-h1: 25px;
  --t-hero: clamp(44px, 4.4vw, 60px);
  --lh-tight: 1.06;
  --lh-snug: 1.28;
  --lh-body: 1.55;
  --tracking-label: 0.07em;

  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px;
  --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px;

  --shadow-card: 0 1px 2px rgba(29,26,22,.05), 0 10px 28px -14px rgba(29,26,22,.20);
  --shadow-pop: 0 14px 44px -14px rgba(29,26,22,.28);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-lift: 160ms;

  --measure: 68ch;
  --gutter: clamp(16px, 3vw, 32px);
  --bar-h: 64px;
  --insp-w: clamp(520px, 42vw, 680px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg-0: #0b0a08;
    --bg-1: #12100d;
    --bg-2: #181510;
    --bg-3: #0e0d0a;
    --text-0: rgba(255, 255, 255, 0.92);
    --text-1: rgba(255, 255, 255, 0.78);
    --text-2: rgba(255, 255, 255, 0.64);
    --text-3: rgba(255, 255, 255, 0.40);
    --accent: #f47029;
    --accent-ink: #f47029;
    --ok: #48a36c;
    --warn: #d59416;
    --danger: #d23c2d;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --on-accent: #0e0d0b;
    --pane: #0b0a08; --stars-o: 1; --page-wash: none;
    --tile-fill: #14120f; --tile-line: rgba(255, 255, 255, 0.10); --tile-line-hot: rgba(255, 255, 255, 0.5);
    --trk: rgba(255, 255, 255, 0.18); --trk-gl: rgba(255, 255, 255, 0.10); --trk-hot: rgba(255, 255, 255, 0.9); --edge-dim: 0.06;
    --bp-bg: #0b0a08; --bp-grid: rgba(255, 255, 255, 0.035); --bp-glow: 255, 255, 255;
    --wire-data: #4f9fae; --wire-data-hot: #67e8f9; --wire-handoff: #b9923a; --wire-handoff-hot: #fcd34d; --wire-rail: #c08a78; --wire-rail-hot: #e6b7a5; --wire-glow: 0.22;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #0b0a08;
  --bg-1: #12100d;
  --bg-2: #181510;
  --bg-3: #0e0d0a;
  --text-0: rgba(255, 255, 255, 0.92);
  --text-1: rgba(255, 255, 255, 0.78);
  --text-2: rgba(255, 255, 255, 0.64);
  --text-3: rgba(255, 255, 255, 0.40);
  --accent: #f47029;
  --accent-ink: #f47029;
  --ok: #48a36c;
  --warn: #d59416;
  --danger: #d23c2d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --on-accent: #0e0d0b;
  --pane: #0b0a08; --stars-o: 1; --page-wash: none;
  --tile-fill: #14120f; --tile-line: rgba(255, 255, 255, 0.10); --tile-line-hot: rgba(255, 255, 255, 0.5);
  --trk: rgba(255, 255, 255, 0.18); --trk-gl: rgba(255, 255, 255, 0.10); --trk-hot: rgba(255, 255, 255, 0.9); --edge-dim: 0.06;
  --bp-bg: #0b0a08; --bp-grid: rgba(255, 255, 255, 0.035); --bp-glow: 255, 255, 255;
  --wire-data: #4f9fae; --wire-data-hot: #67e8f9; --wire-handoff: #b9923a; --wire-handoff-hot: #fcd34d; --wire-rail: #c08a78; --wire-rail-hot: #e6b7a5; --wire-glow: 0.22;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + var(--s-4)); }
html, body { overflow-x: clip; }
body {
  margin: 0;
  min-block-size: 100vh;
  background-color: var(--bg-0);
  background-image: var(--page-wash);
  background-repeat: no-repeat;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--text-0); }
svg, img { max-inline-size: 100%; }
.mono { font-family: var(--font-mono); }
.nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.muted { color: var(--text-3); }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(a, button, input, [role="button"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- top bar (the only glass) ---------- */
.bar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg-1) 68%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-block-end: 1px solid var(--line);
}
.bar__in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--gutter);
  max-inline-size: 1800px; margin-inline: auto;
}
.brand { display: flex; align-items: baseline; gap: var(--s-2); margin-inline-end: auto; min-inline-size: 0; }
.brand__name { font-size: var(--t-body); font-weight: 650; color: var(--text-0); letter-spacing: -0.01em; white-space: nowrap; }
.brand__ver { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.seg { display: inline-flex; gap: var(--s-1); padding: var(--s-1); background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); border-radius: var(--radius-pill); max-inline-size: 100%; }
.seg button {
  border: 0; background: transparent; color: var(--text-2);
  min-block-size: 32px; padding: 0 var(--s-3); border-radius: var(--radius-pill);
  font-size: var(--t-small); font-weight: 550; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.seg button:hover { color: var(--text-0); background: color-mix(in srgb, var(--bg-2) 55%, transparent); }
.seg button:active { transform: translateY(1px); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] {
  background: var(--bg-2); color: var(--text-0);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text-0) 14%, transparent);
}
.bar__tools { display: flex; align-items: center; gap: var(--s-2); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 40px; padding: 0 var(--s-3);
  background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); border: 0; border-radius: var(--radius-pill);
  color: var(--text-1); font-size: var(--t-small); font-weight: 550; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.btn:hover { background: color-mix(in srgb, var(--bg-3) 80%, var(--text-0)); color: var(--text-0); }
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--text-0); color: var(--bg-0); }
.btn--ink:hover { background: var(--text-1); color: var(--bg-0); }
kbd {
  font-family: var(--font-mono); font-size: var(--t-label);
  padding: 0 var(--s-1); border-radius: var(--s-1);
  background: var(--bg-2); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- shell ---------- */
.shell {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  padding-inline: var(--gutter);
  max-inline-size: 1800px; margin-inline: auto;
  padding-block-end: var(--s-8);
}
.shell > * { min-inline-size: 0; }
@media (min-width: 1024px) {
  .shell.has-insp { grid-template-columns: minmax(0, 1fr) var(--insp-w); }
}

/* ---------- section header: eyebrow rule + title + badge + chips ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-2);
}
.eyebrow::before { content: ""; inline-size: var(--s-6); block-size: 1px; background: var(--line-strong); flex: none; }
.viewhead { padding-block: var(--s-6) var(--s-4); display: grid; gap: var(--s-3); }
.viewhead h1 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
  font-size: var(--t-hero); line-height: var(--lh-tight); letter-spacing: -0.022em; font-weight: 650; color: var(--text-0);
}
.badge {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); color: var(--text-1); font-weight: 500; white-space: nowrap;
}
.lede { color: var(--text-2); max-inline-size: var(--measure); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.fgroup { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.cap { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: 32px; padding: 0 var(--s-3);
  border: 0; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); color: var(--text-1);
  font-size: var(--t-small); font-weight: 550;
  transition: background-color var(--dur) var(--ease-soft), color var(--dur) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.chip small { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-3); }
.chip:hover { background: color-mix(in srgb, var(--bg-3) 75%, var(--text-0)); }
.chip:active { transform: translateY(1px); }
.chip[aria-pressed="true"] { background: var(--text-0); color: var(--bg-0); }
.chip[aria-pressed="true"] small { color: color-mix(in srgb, var(--bg-0) 70%, transparent); }
.chip--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (pointer: coarse) { .chip, .seg button { min-block-size: 40px; } }
.tag {
  display: inline-flex; align-items: center; padding: 0 var(--s-2); min-block-size: 20px;
  border-radius: var(--radius-pill); background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-1); white-space: nowrap;
}

/* ---------- tiles ---------- */
.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.tiles > * { min-inline-size: 0; }
.tiles--stats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@media (min-width: 1280px) { .tiles--six { grid-template-columns: repeat(6, 1fr); } }
.fold { color: var(--text-2); }
.fold summary { cursor: pointer; font-size: var(--t-small); color: var(--text-1); font-weight: 550; min-block-size: 32px; display: flex; align-items: center; }
.fold summary { list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::before { content: "›"; display: inline-block; inline-size: 1.2em; color: var(--text-3); transition: transform var(--dur-fast) var(--ease-soft); }
.fold[open] summary::before { transform: rotate(90deg); }
.fold .note { margin-block-start: var(--s-2); }
.tile {
  background: color-mix(in srgb, var(--bg-3) 94%, var(--text-0));
  border-radius: var(--radius); padding: var(--s-4);
  min-inline-size: 0;
}
.tile[data-select] {
  cursor: pointer; display: grid; gap: var(--s-2); align-content: start;
  transition: transform var(--dur-lift) var(--ease-spring), background-color var(--dur) var(--ease-soft);
}
.tile[data-select]:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bg-3) 88%, var(--text-0)); }
.tile[data-select]:active { transform: translateY(0); }
.tile.is-sel { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.tile h3 { font-size: var(--t-body); font-weight: 650; color: var(--text-0); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.tile p { font-size: var(--t-small); color: var(--text-2); overflow-wrap: anywhere; }
.tile .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); justify-content: space-between; }
.tile .row > .cap { margin-inline-end: auto; }
.id {
  font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-3);
  background: none; border: 0; padding: 0; text-align: left; justify-self: start; cursor: copy;
  overflow-wrap: anywhere;
}
.id:hover { color: var(--text-0); }
.gate { font-size: var(--t-small); color: var(--text-1); }
.gate .cap { margin-inline-end: var(--s-2); }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }

.stat { display: grid; gap: var(--s-1); align-content: start; }
.stat__value { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: 650; color: var(--text-0); letter-spacing: -0.014em; overflow-wrap: anywhere; }
.stat__desc { font-size: var(--t-small); color: var(--text-1); }
.stat__label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }

.group { display: grid; gap: var(--s-3); padding-block-start: var(--s-5); }
.note { color: var(--text-2); font-size: var(--t-small); max-inline-size: var(--measure); }
.callout {
  font-size: var(--t-small); color: var(--text-1);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 2px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-1) 70%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-inline-size: var(--measure);
}

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; max-inline-size: 100%; min-inline-size: 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; inline-size: 100%; font-size: var(--t-small); }
th {
  text-align: left; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; font-weight: 500; color: var(--text-3);
  padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line-strong); white-space: nowrap;
}
td { padding: var(--s-3); border-block-end: 1px solid var(--line); vertical-align: top; color: var(--text-1); }
tbody tr:hover td { background: color-mix(in srgb, var(--bg-3) 60%, transparent); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.k { font-weight: 600; color: var(--text-0); min-inline-size: 16ch; }
td.long { min-inline-size: 32ch; max-inline-size: 72ch; color: var(--text-2); }
tfoot td { font-weight: 650; color: var(--text-0); border-block-end: 0; }
.link {
  border: 0; background: none; padding: 0; text-align: left;
  font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-0);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.link:hover { text-decoration-color: var(--accent); }
.minis { display: flex; flex-wrap: wrap; gap: var(--s-1); }

/* ---------- build view ---------- */
.pcols { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; }
.pcols > * { min-inline-size: 0; }
.pcol { display: grid; gap: var(--s-3); align-content: start; }
.pcol h3 { font-size: var(--t-body); font-weight: 650; color: var(--text-0); }
.plist { display: grid; gap: var(--s-1); }
.prow {
  display: grid; gap: 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); cursor: pointer;
  background: color-mix(in srgb, var(--bg-3) 94%, var(--text-0));
  transition: transform var(--dur-lift) var(--ease-spring), background-color var(--dur) var(--ease-soft);
}
.prow:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bg-3) 88%, var(--text-0)); }
.prow.is-sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.prow b { font-size: var(--t-small); font-weight: 600; color: var(--text-0); overflow-wrap: anywhere; }
.prow span { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-3); overflow-wrap: anywhere; }
details > summary { cursor: pointer; font-size: var(--t-small); color: var(--text-2); padding: var(--s-1) 0; }
details > summary:hover { color: var(--text-0); }
details ol { list-style: decimal; padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); margin-block-start: var(--s-2); font-size: var(--t-small); color: var(--text-1); }
.pairs { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.pairs > * { min-inline-size: 0; }
.pair b { display: block; font-size: var(--t-small); font-weight: 650; color: var(--text-0); }
.pair p { font-size: var(--t-small); color: var(--text-2); max-inline-size: var(--measure); }

/* ---------- map ---------- */
.mapbox { display: grid; gap: var(--s-2); grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.filters--map { min-inline-size: 0; }
.maptools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.maptools .zoom { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-2); min-inline-size: 5ch; text-align: center; }
.maptools .legend { margin-inline-start: auto; font-size: var(--t-small); color: var(--text-3); }
.iconbtn { inline-size: 40px; padding: 0; font-size: var(--t-body); }
.mapscroll {
  overflow: auto; min-inline-size: 0; max-inline-size: 100%;
  block-size: clamp(560px, calc(100vh - var(--bar-h) - 240px), 1100px);
  border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line);
  background: transparent;
  cursor: grab; overscroll-behavior: contain; touch-action: pan-x pan-y;
}
.mapscroll.grabbing { cursor: grabbing; }
#mapsvg { display: block; max-inline-size: none; font-family: var(--font-sans); user-select: none; }
.m-frame { fill: var(--frame-fill, transparent); stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.m-sep { stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.m-rail { fill: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); opacity: 0.6; }
.m-bg { fill: var(--bg-0); opacity: 0; transition: opacity var(--dur) var(--ease-soft); }
.m-bg.on { opacity: 1; }
.m-eyebrow { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; fill: var(--text-3); }
.m-title { font-size: var(--t-body); font-weight: 650; fill: var(--text-0); }
.m-ptitle { font-size: var(--t-small); font-weight: 650; fill: var(--text-0); }
.m-sub { font-size: var(--t-label); fill: var(--text-2); }
.m-num { font-family: var(--font-mono); font-size: var(--t-label); fill: var(--text-2); }
.m-stagehead { cursor: pointer; }
.m-stagehead:hover .m-title { fill: var(--accent-ink); }
.edge--cat-data, .loop.edge--cat-data, .m-gl .cat-data { --w: var(--wire-data); --wh: var(--wire-data-hot); }
.edge--cat-handoff, .loop.edge--cat-handoff, .m-gl .cat-handoff { --w: var(--wire-handoff); --wh: var(--wire-handoff-hot); }
.edge--cat-rail, .loop.edge--cat-rail, .m-gl .cat-rail { --w: var(--wire-rail); --wh: var(--wire-rail-hot); }
.edge--cat-call, .loop.edge--cat-call, .m-gl .cat-call { --w: var(--trk); --wh: var(--trk-hot); }
.edge .trk { fill: none; stroke: var(--w, var(--trk)); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke var(--dur) var(--ease-soft); }
.edge:not(.edge--cat-call) .trk { stroke-width: 1.25px; }
.edge polygon { fill: var(--w, var(--trk)); transition: fill var(--dur) var(--ease-soft); }
.edge--handoff .trk { stroke-width: 1.25px; }
.edge .hit { stroke: transparent; stroke-width: 12px; fill: none; pointer-events: stroke; }
.m-gl path { fill: none; stroke: var(--trk-gl); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.m-gl path.cat-data { stroke: var(--w); stroke-width: 3px; opacity: var(--wire-glow); }
.m-gl path.cat-data.wide { stroke-width: 6px; opacity: calc(var(--wire-glow) * 0.35); }
.m-gl path.cat-handoff, .m-gl path.cat-rail { stroke: var(--w); stroke-width: 3px; opacity: calc(var(--wire-glow) * 0.7); }
.loop path.line { fill: none; stroke: var(--w, var(--trk)); stroke-width: 1px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.loop polygon { fill: var(--w, var(--trk)); }
.edge, .loop { transition: opacity var(--dur) var(--ease-soft); }
.has-sel .edge, .has-sel .loop { opacity: var(--edge-dim); }
.has-sel .edge.hot, .has-sel .loop.hot { opacity: 1; }
.edge.hot .trk, .edge.hv-e .trk, .loop.hot .line, .loop.hv-e .line { stroke: var(--wh, var(--trk-hot)); }
.edge.hot polygon, .edge.hv-e polygon, .loop.hot polygon, .loop.hv-e polygon { fill: var(--wh, var(--trk-hot)); }
/* WIRES legend: a category off hides its wire, glow and label */
.chip--wire { gap: var(--s-1); }
.chip--wire[aria-pressed="true"] { background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); color: var(--text-0); }
.chip--wire[aria-pressed="true"] small { color: var(--text-3); }
.chip--wire:not([aria-pressed="true"]) { opacity: 0.5; }
.wdot { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--w); box-shadow: 0 0 6px 1px var(--w); flex: none; }
.chip--wire[aria-pressed="true"] .wdot { box-shadow: 0 0 0 1px var(--bg-0); }
#mapsvg.no-wire-data .edge--cat-data, #mapsvg.no-wire-data .cat-data,
#mapsvg.no-wire-handoff .edge--cat-handoff, #mapsvg.no-wire-handoff .cat-handoff,
#mapsvg.no-wire-rail .edge--cat-rail, #mapsvg.no-wire-rail .cat-rail,
#mapsvg.no-wire-call .edge--cat-call, #mapsvg.no-wire-call .cat-call { display: none; }
/* travelling light: one short dash, one pass, then the steady glow above holds */
.spark { fill: none; stroke: var(--wh, var(--trk-hot)); stroke-linecap: round; stroke-dasharray: 30 1000; stroke-dashoffset: 30; opacity: 0; pointer-events: none; }
@keyframes travel { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -1000; } }
.edge.hv-e .spark, .edge.hot .spark, .edge.ign .spark, .loop.hv-e .spark, .loop.hot .spark, .loop.ign .spark { opacity: 1; animation: travel 600ms linear 1 forwards; }
.edge.rev.ign .spark { animation-direction: reverse; }
.intro .trk { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro.draw .trk { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease); }
.intro .m-gl, .intro .edge polygon, .intro .loop { opacity: 0; }
.intro.draw .m-gl, .intro.draw .edge polygon, .intro.draw .loop { opacity: 1; transition: opacity 500ms var(--ease-soft); }
.elabel { opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-soft); }
.elabel rect, .lchip rect { fill: var(--bg-0); stroke: var(--line-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.elabel text, .lchip text { font-family: var(--font-mono); font-size: var(--t-label); fill: var(--text-1); }
#mapsvg.labels .elabel, .elabel.on, .elabel.hv { opacity: 1; }
.node { cursor: pointer; outline: none; }
.node .lift { transform-box: fill-box; transform-origin: center; transition: transform var(--spring-dur, 220ms) var(--spring, var(--ease)); }
.node:hover .lift { transform: translateY(-2px); }
.node .tilebg { fill: var(--tile-fill); stroke: var(--tile-line); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: stroke var(--dur) var(--ease-soft); }
.node:hover .tilebg { stroke: var(--tile-line-hot); }
.node .krule { fill: var(--text-0); opacity: 0.5; }
.node .krule[data-k="human"] { opacity: 0.9; }
.node .krule[data-k="agent"] { opacity: 0.7; }
.node .krule[data-k="service"] { opacity: 0.5; }
.node .krule[data-k="data"] { opacity: 0.35; }
.node .krule[data-k="infra"] { opacity: 0.3; }
.node .krule[data-k="rail"] { opacity: 0.25; }
.node .halo { fill: none; stroke: var(--trk-hot); stroke-width: 6px; opacity: calc(var(--glow, 0) * 0.18); vector-effect: non-scaling-stroke; pointer-events: none; }
.node .ring { fill: none; stroke: var(--accent); stroke-width: 2px; opacity: 0; vector-effect: non-scaling-stroke; }
.node .inner { fill: none; stroke: var(--line-strong); stroke-width: 1px; opacity: 0; vector-effect: non-scaling-stroke; }
.node.sel .ring, .node.sel .inner, .node:focus-visible .ring { opacity: 1; }
.node.dim { opacity: 0.22; }
.node.core .inner { opacity: 1; stroke: var(--line-strong); }
.node.core .nm--core { font-weight: 650; }
.node.core .part { font-size: 11px; fill: var(--text-1); font-family: var(--font-mono); }
#mapsvg[data-lod="far"] .node.core .nm--core { font-size: 20px; }
#mapsvg[data-lod="far"] .node.core .part { font-size: 13px; }
.node .ic { fill: var(--bg-1); stroke: none; }
.node .ic--self { stroke: var(--line-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.node .ic--ext { stroke: var(--text-3); stroke-width: 1px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.node .lm { font-family: var(--font-mono); font-size: var(--t-label); fill: var(--text-1); text-anchor: middle; font-weight: 600; }
.node .nm { font-size: var(--t-small); font-weight: 650; fill: var(--text-0); }
#mapsvg[data-lod="far"] .nid, #mapsvg[data-lod="far"] .m-sub, #mapsvg[data-lod="far"] .elabel { display: none; }
#mapsvg[data-lod="far"] .nm { font-size: 22px; }
#mapsvg[data-lod="far"] .nm.nm--n { font-size: 16px; }
#mapsvg[data-lod="far"] .m-title { font-size: 24px; }
#mapsvg[data-lod="far"] .node .nm { font-size: 16px; }
#mapsvg[data-lod="far"] .m-num { font-size: 18px; }
#mapsvg[data-lod="far"] .m-ptitle { font-size: 18px; }
#mapsvg[data-lod="far"] .m-eyebrow { font-size: 16px; }
#mapsvg[data-lod="far"] .lm { font-size: 18px; }
.mapbox[data-lod="far"] .legend { display: none; }
.node .nid { font-family: var(--font-mono); font-size: var(--t-label); fill: var(--text-3); }

/* ---------- map: free-flow graph (Flow mode; Grid keeps the rules above) ---------- */
.mapscroll.flow { overflow: hidden; cursor: grab; touch-action: none; }
.mapscroll.flow.grabbing { cursor: grabbing; }
#mapsvg[data-mode="flow"] { inline-size: 100%; block-size: 100%; }
.fnode .disc { transform-box: fill-box; transform-origin: center; transition: transform var(--spring-dur, 220ms) var(--spring, var(--ease)); }
.fnode:hover .disc, .fnode.sel .disc { transform: scale(1.06); }
.fnode:hover .tilebg, .fnode.sel .tilebg { stroke: var(--tile-line-hot); }
.fnode .dbl { fill: none; stroke: var(--line-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fnode.b-external .tilebg { stroke: var(--text-3); stroke-dasharray: 4 3; }
.fnode .krule { fill: none; stroke: var(--text-0); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
#mapsvg[data-mode="flow"] .fnode .lm { font-size: 11px; }
#mapsvg[data-mode="flow"] .fnode .nm, #mapsvg[data-mode="flow"] .fnode .sub { paint-order: stroke; stroke: var(--bg-0); stroke-width: 3px; stroke-linejoin: round; }
#mapsvg[data-mode="flow"] .fnode .nm { font: 650 13px var(--font-sans); fill: var(--text-0); }
.fnode .sub { font-size: 11px; fill: var(--text-2); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-soft); }
#mapsvg[data-sub="1"] .fnode .sub, .fnode:hover .sub, .fnode.sel .sub, .fnode.nbr .sub, .fnode.nsel .sub { opacity: 1; }
#mapsvg[data-mode="flow"].hovering .node:not(.nbr):not(.dim):not(:hover) { opacity: 0.35; }
#mapsvg[data-mode="flow"][data-lod="far"] .fnode .sub, #mapsvg[data-mode="flow"][data-lod="far"] .fnode:not(.core) .nm { display: none; }
#mapsvg[data-mode="flow"] .fanchor .m-title { font-size: 15px; }
#mapsvg[data-mode="flow"] .fanchor .m-eyebrow { font-size: 11px; }
#mapsvg[data-mode="flow"][data-lod="far"] .fanchor .m-title { font-size: calc(15px * var(--inv, 1)); }
#mapsvg[data-mode="flow"][data-lod="far"] .fnode .lm { font-size: calc(9px * var(--inv, 1)); }
#mapsvg[data-mode="flow"][data-lod="far"] .fanchor .m-eyebrow { font-size: calc(11px * var(--inv, 1)); }
.flowdash { fill: none; stroke: var(--w, var(--trk)); stroke-width: 1px; stroke-dasharray: 2 14; opacity: 0.35; vector-effect: non-scaling-stroke; pointer-events: none; animation: flowdash 2.4s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset: -16; } }
.intro .flowdash { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .flowdash { display: none; } .fnode .disc { transition: none; } }

/* ---------- inspector ---------- */
.insp { display: none; min-inline-size: 0; scroll-margin-top: calc(var(--bar-h) + var(--s-4)); }
.has-insp .insp { display: block; }
@media (min-width: 1024px) {
  .insp { position: sticky; top: calc(var(--bar-h) + var(--s-4)); align-self: start; max-block-size: calc(100vh - var(--bar-h) - var(--s-5)); overflow-y: auto; padding-block-start: var(--s-6); }
}
.insp__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-3); }
.insp__tiles { container-type: inline-size; }
.insp__grid { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@container (min-width: 480px) { .insp__grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } }
@container (min-width: 480px) { .insp__grid--stack { grid-template-columns: minmax(0, 1fr); } }
.hero { display: grid; gap: var(--s-3); align-content: start; }
.hero__name { font-size: var(--t-h1); line-height: var(--lh-snug); font-weight: 650; letter-spacing: -0.014em; color: var(--text-0); overflow-wrap: anywhere; }
.hero__meta { font-size: var(--t-small); color: var(--text-2); }
.hero__does { font-size: var(--t-body); color: var(--text-1); }
.hero__rep { font-size: var(--t-small); color: var(--text-2); }
.idcopy {
  justify-self: start; border: 0; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill);
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-1); cursor: copy;
  transition: background-color var(--dur) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.idcopy:hover { background: var(--bg-1); color: var(--text-0); }
.idcopy:active { transform: translateY(1px); }
.idcopy.done { color: var(--ok); }
.bubble { display: grid; gap: var(--s-4); align-content: start; }
.axis { display: grid; gap: var(--s-2); }
.cells { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.mini {
  display: grid; gap: 0; padding: var(--s-1) var(--s-2);
  border: 0; border-radius: var(--radius-sm); text-align: left;
  background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--t-small); color: var(--text-1); max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere;
}
.mini .k { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
button.mini { cursor: pointer; transition: transform var(--dur-lift) var(--ease-spring), background-color var(--dur) var(--ease-soft); }
button.mini:hover { transform: translateY(-1px); background: var(--bg-2); }
button.mini:active { transform: translateY(0); }
.mini .t { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-3); }
.x { inline-size: 40px; padding: 0; font-size: var(--t-body); }

/* ---------- states ---------- */
.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
  text-align: center; padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-2);
}
.state__sym {
  inline-size: 40px; block-size: 40px; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0));
  font-family: var(--font-mono); font-size: var(--t-h1); line-height: 1; color: var(--text-1);
}
.state__title { font-size: var(--t-body); color: var(--text-0); font-weight: 600; }
.state__body { font-size: var(--t-small); max-inline-size: 42ch; }
.state--error { border-style: solid; border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.state--error .state__sym { color: var(--danger); }
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); min-block-size: 1em; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text-0) 6%, transparent), transparent);
  animation: shimmer 1.4s var(--ease-soft) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-title { block-size: 56px; inline-size: min(320px, 70%); }
.sk-tile { block-size: 112px; border-radius: var(--radius); }

/* ---------- command palette ---------- */
.pal { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-start; justify-content: center; padding: 12vh var(--s-4) var(--s-4); background: color-mix(in srgb, var(--text-0) 28%, transparent); }
.pal.open { display: flex; }
.pal__box { inline-size: min(640px, 100%); background: var(--bg-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); overflow: hidden; display: grid; max-block-size: 70vh; grid-template-rows: auto minmax(0, 1fr) auto; }
.pal__in { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--line); }
.pal__in input { flex: 1; min-inline-size: 0; border: 0; background: none; color: var(--text-0); font: inherit; font-size: var(--t-body); min-block-size: 40px; outline: none; }
.pal__list { overflow-y: auto; padding: var(--s-2); }
.pal__item { display: grid; gap: 0; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); cursor: pointer; border-inline-start: 2px solid transparent; }
.pal__item b { font-size: var(--t-body); font-weight: 600; color: var(--text-0); }
.pal__item span { font-size: var(--t-small); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal__item .mono { font-size: var(--t-label); color: var(--text-3); }
.pal__item[aria-selected="true"] { background: color-mix(in srgb, var(--bg-3) 90%, var(--text-0)); border-inline-start-color: var(--accent); }
.pal__foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-block-start: 1px solid var(--line); font-size: var(--t-label); color: var(--text-3); font-family: var(--font-mono); }

/* ---------- scopes view ---------- */
.crows { display: grid; gap: 0; min-inline-size: 0; }
.crow { display: grid; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line); font-size: var(--t-small); color: var(--text-1); min-inline-size: 0; }
.crow > * { min-inline-size: 0; overflow-wrap: anywhere; }
.crow--in { grid-template-columns: 112px minmax(0, 1fr) 84px 76px 44px 28px; }
.crow--out { grid-template-columns: minmax(0, 1fr) 84px 84px 168px 44px; }
.crow--head { border-block-end-color: var(--line-strong); }
.crow:not(.crow--head):hover { background: color-mix(in srgb, var(--bg-3) 60%, transparent); }
.crow > .tag { justify-self: start; }
.cname { display: grid; gap: 0; }
.cname b { font-weight: 600; color: var(--text-0); }
.cname .mono { font-size: var(--t-label); }
.dot { font-size: var(--t-body); color: var(--text-0); text-align: center; }
.kpis { padding-block-start: var(--s-4); }
.scopes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.scope { text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; display: grid; gap: var(--s-2); align-content: start; will-change: transform;
  transition: transform var(--card-hover-dur, 200ms) cubic-bezier(0, 0, .2, 1), background-color var(--card-hover-dur, 200ms) var(--ease-soft); }
.scope:hover { transform: translateY(var(--card-lift, -2px)); background: color-mix(in srgb, var(--bg-3) 88%, var(--text-0)); }
.scope:active { transform: scale(var(--card-press, .98)); transition-duration: var(--card-press-dur, 120ms); }
.scope:focus-visible { outline: 2px solid var(--text-0); outline-offset: 2px; }
.scope__flow { color: var(--text-1); }
.scope__facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-small); color: var(--text-2); padding-block: var(--s-2); border-block: 1px solid var(--line); }
.scope__facts b { color: var(--text-0); font-weight: 650; }
.scope__ex { font-size: var(--t-small); color: var(--text-3); }
.scope__ex .cap { margin-inline-end: var(--s-1); }

/* ---------- screens ---------- */
.scrtool { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.scrtool .chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.scrc { align-content: start; scroll-margin-block: var(--s-6); }
.scrc.is-flash { outline: 2px solid var(--text-0); outline-offset: 2px; }
.scrc:focus-visible { outline: 2px solid var(--text-0); outline-offset: 2px; }
.scrc__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.scrl { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--t-small); color: var(--text-1); }
.scrc__note { color: var(--text-2); }
.scrc__note .cap { margin-inline-end: var(--s-1); }
.scrc .tags { padding-block-start: var(--s-1); }
.scrc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-block-start: var(--s-2); border-block-start: 1px solid var(--line); }
.scrc__nodes { font-size: var(--t-small); color: var(--text-2); }
.scrc__nodes .cap { margin-inline: var(--s-1); }
.st { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; min-block-size: 28px; padding: 0 var(--s-3);
  border: 0; border-radius: var(--radius-pill); cursor: pointer; color: var(--text-1); background: transparent; box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--dur) var(--ease-soft); }
.st:hover { box-shadow: inset 0 0 0 1px var(--text-2); }
.st:active { transform: translateY(1px); }
.st:focus-visible { outline: 2px solid var(--text-0); outline-offset: 2px; }
.st--design { box-shadow: inset 0 0 0 1.5px var(--text-0); color: var(--text-0); }
.st--designed { background: var(--text-2); color: var(--bg-0); box-shadow: none; }
.st--built { background: var(--text-0); color: var(--bg-0); box-shadow: none; }
@media (pointer: coarse) { .st { min-block-size: 40px; } }

.flowline { list-style: none; margin: 0; padding: 0; display: grid; position: relative; max-inline-size: 960px; }
.flowline__row { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); position: relative; padding-block-end: var(--s-4); }
.flowline__row::before { content: ""; position: absolute; inset-inline-start: 21px; inset-block: 32px 0; inline-size: 1px; background: var(--line-strong); }
.flowline__row:last-child::before { display: none; }
.flowline__n { inline-size: 44px; block-size: 32px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-1); }
.flowline__body { display: grid; gap: var(--s-1); min-inline-size: 0; }
.flowline__body .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); }
.flowline__body h3 { font-size: var(--t-body); font-weight: 650; color: var(--text-0); }
.flowline__body .row > .cap { margin-inline-start: auto; }
.flowline__meta, .flowline__trig { font-size: var(--t-small); color: var(--text-2); }
.flowline__meta .cap, .flowline__trig .cap { margin-inline: var(--s-1); }
.flowline__trig .cap { margin-inline-start: 0; }
.pill { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); align-items: baseline; padding: 2px var(--s-3); border-radius: var(--radius-pill); font-size: var(--t-small); color: var(--text-0); max-inline-size: 100%; }
.pill b { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 500; }
.pill--law { background: var(--text-0); color: var(--bg-0); }
.pill--target { box-shadow: inset 0 0 0 1px var(--text-1); }
.pill--p0 { outline: 1px dashed var(--text-2); outline-offset: -1px; }

.tblwrap { overflow-x: auto; }
.thbtn { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.thbtn:hover { color: var(--text-0); }
.thbtn:focus-visible { outline: 2px solid var(--text-0); outline-offset: 2px; }
.kpit td .tag { margin-inline-start: var(--s-1); }
@media (max-width: 640px) {
  .scrc__lists { grid-template-columns: 1fr; }
  .kpit thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .kpit, .kpit tbody, .kpit tr, .kpit td { display: block; inline-size: 100%; }
  .kpit tr { padding-block: var(--s-3); border-block-end: 1px solid var(--line); }
  .kpit td { border: 0; padding: 2px 0; min-inline-size: 0; max-inline-size: none; }
  .kpit td::before { content: attr(data-l); display: block; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
  .kpit td.k { font-size: var(--t-body); }
  .flowline__row { grid-template-columns: 36px 1fr; }
  .flowline__n { inline-size: 36px; }
  .flowline__row::before { inset-inline-start: 17px; }
}

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .bar__in { gap: var(--s-2); }
  .brand { flex: 1 1 100%; }
  .bar__tools { inline-size: 100%; justify-content: space-between; flex-wrap: wrap; }
  .seg--theme { max-inline-size: 100%; overflow: hidden; }
  .seg--theme button { padding: 0 var(--s-2); }
  .bar kbd { display: none; }
  .seg--views { order: 3; inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .seg--views::-webkit-scrollbar { display: none; }
  .seg--views { -webkit-mask-image: linear-gradient(90deg, black 88%, transparent); mask-image: linear-gradient(90deg, black 88%, transparent); }
  .btn .lbl { display: none; }
  .maptools .legend { display: none; }
  .crow--head { display: none; }
  .crow--in, .crow--out { display: flex; flex-wrap: wrap; align-items: center; }
  .crow .cname { grid-column: 1 / -1; order: -1; }
  .mapscroll { block-size: clamp(400px, calc(100vh - var(--bar-h) - 240px), 720px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .tile[data-select]:hover, .prow:hover, button.mini:hover, .node:hover .lift, .scope:hover, .scope:active { transform: none; }
}

/* ---- hover intent + ignition ---- */
.node .glow { fill: none; stroke: var(--trk-hot); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: var(--glow, 0); pointer-events: none; }
#mapsvg .node { transition: opacity 160ms var(--ease-soft); }
#mapsvg.hovering .node:not(.nbr):not(.dim):not(:hover) { opacity: 0.5; }
#mapsvg.hovering .edge:not(.hv-e), #mapsvg.hovering .loop:not(.hv-e) { opacity: var(--edge-dim); }

/* ---- stage + stars ---- */
.mapstage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; background: var(--pane); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.mapstage > .mapscroll { flex: 1 1 auto; position: relative; z-index: 1; background: transparent; box-shadow: none; }
canvas.stars { position: absolute; left: -12px; top: -12px; width: calc(100% + 24px); height: calc(100% + 24px); opacity: var(--stars-o); pointer-events: none; will-change: transform; }
.mapscroll { transition: opacity var(--spring-dur, 300ms) var(--spring, var(--ease)); }
.mapscroll.under { opacity: 0.12; pointer-events: none; }
.view-in { animation: viewin 160ms var(--ease) both; }
@keyframes viewin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- blueprint layer: black space, 64px major grid, glass tiles ---- */
.bp { position: fixed; top: var(--bar-h); left: 0; right: var(--bp-r, 0); bottom: 0; z-index: 20; overflow: hidden; background: var(--bp-bg); overscroll-behavior: contain; }
.bp__paper { position: absolute; inset: 0; pointer-events: auto; }
.bp__sheet { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp__major { stroke: var(--bp-grid); stroke-width: 1; fill: none; }
.bp__stage { position: absolute; inset: 0; }
.bp__head { position: absolute; top: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center; justify-content: center; }
.bp__back { position: absolute; left: 28px; top: 16px; z-index: 3; }
.bp__sheetno { position: absolute; right: 28px; top: 26px; font-size: 10px; color: var(--text-3); letter-spacing: .08em; }
.bp__hero { position: relative; width: 360px; outline: none; }
.bp__herobg { position: absolute; inset: 0; border: 1px solid var(--tile-line-hot); border-radius: 12px; background: var(--tile-fill); box-shadow: 0 0 48px rgba(var(--bp-glow), var(--hg, 0.12)); }
.bp__herobody { position: relative; display: flex; gap: 12px; align-items: center; padding: 6px 16px; max-height: 64px; overflow: hidden; }
.bp__herobody h2 { margin: 0; font-size: 17px; line-height: 1.2; color: var(--text-0); }
.bp__herobody p { margin: 1px 0 0; font-size: 11px; line-height: 1.2; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.bp__id { font-size: 11px; color: var(--text-2); }
.bp__body { position: absolute; left: 0; right: 0; top: 72px; bottom: 72px; padding: 0 28px; display: grid; grid-template-columns: 168px minmax(0, 1fr) 168px; gap: 16px; }
.bp__col { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; max-height: 100%; scrollbar-width: thin; }
.bp__mid { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.bp__planwrap { flex: 1; min-height: 0; position: relative; }
.bp__plan { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); transform-origin: 0 0; }
.bp__caption { flex: none; height: 28px; margin: 0; text-align: center; font-size: 12.5px; line-height: 28px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp__kind { display: block; font: 500 9.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.bp__caption .bp__kind { display: inline; }
.bp__nb { display: flex; gap: 8px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--tile-line); border-radius: 10px; background: var(--tile-fill); color: var(--text-1); font: inherit; cursor: pointer; position: relative; flex: none; transition: transform var(--spring-dur, 220ms) var(--spring, var(--ease)), border-color 160ms; }
.bp__nb:hover, .bp__nb:focus-visible { transform: translateY(-2px); border-color: var(--tile-line-hot); outline: none; }
.bp__nb::after { content: ""; position: absolute; inset: -1px; border-radius: 10px; border: 1px solid var(--trk-hot); opacity: var(--glow, 0); pointer-events: none; }
.bp__lm { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1px solid var(--line-strong); font: 600 11px var(--font-mono); }
.bp__lm--hero { width: 36px; height: 36px; font-size: 14px; }
.bp__nbt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bp__nbt b { font-size: 12.5px; color: var(--text-0); }
.bp__nbt .mono { font-size: 10px; color: var(--text-3); }
.bp__nbt i { font-style: normal; font-size: 11px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp__none { font-size: 12px; color: var(--text-3); }
.bp__edges { position: absolute; left: 0; top: 0; overflow: visible; }
.bp__gl path { fill: none; stroke: var(--trk-gl); stroke-width: 3px; }
.bp__gl { opacity: 0; }
.bp__plan.drawn .bp__gl { opacity: 1; transition: opacity 300ms var(--ease-soft); }
.bp__edge .trk { fill: none; stroke: var(--trk); stroke-width: 1px; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke 160ms; }
.bp__plan.drawn .bp__edge .trk { stroke-dashoffset: 0; transition: stroke-dashoffset 400ms var(--ease), stroke 160ms; }
.bp__edge .spark { stroke-width: 1.5px; }
.bp__edge polygon { fill: var(--trk); opacity: 0; transition: opacity 160ms 360ms, fill 160ms; }
.bp__plan.drawn .bp__edge polygon { opacity: 1; }
.bp__edge.on .trk { stroke: var(--trk-hot); }
.bp__edge.on polygon { fill: var(--trk-hot); }
.bp__edge.on .spark { opacity: 1; animation: travel 600ms linear 1 forwards; }
.bp__plan.lit .bp__edge:not(.on) { opacity: var(--edge-dim); }
.bp__edge { transition: opacity 160ms; }
.bp__part { position: absolute; left: var(--x); top: var(--y); width: var(--tw); height: var(--th); contain: layout paint; padding: 8px 10px; text-align: left; display: flex; flex-direction: column; gap: 3px; background: var(--tile-fill); border: 1px solid var(--tile-line); border-radius: 8px; color: var(--text-0); font: inherit; cursor: pointer; overflow: hidden; transition: opacity 160ms var(--ease-soft), border-color 160ms; }
.bp__part b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.bp__part:hover, .bp__part:focus-visible { border-color: var(--trk-hot); outline: none; }
.bp__part:focus-visible { outline: 1px solid var(--trk-hot); outline-offset: -3px; }
.bp__plan.lit .bp__part:not(.on) { opacity: 0.4; }
.bp__strip { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; display: grid; grid-template-columns: 2fr 1.3fr 1.3fr 1fr 1fr; border-top: 1px solid var(--line); background: var(--bp-bg); }
.bp__cell { padding: 8px 16px; border-left: 1px solid var(--line); min-width: 0; overflow: hidden; }
.bp__cell:first-child { border-left: 0; }
.bp__cell .bp__show { margin-inline-start: 4px; }
.tag--solid { background: var(--text-0); color: var(--bg-0); box-shadow: none; }
.rs__div { margin-block: var(--s-2) 0; padding-block-start: var(--s-2); border-top: 1px solid var(--line); }
.rs__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: var(--t-small); line-height: 1.4; color: var(--text-1); }
.rs__row > * { min-inline-size: 0; }
.rs__row .mono { font-size: var(--t-label); color: var(--text-1); overflow-wrap: anywhere; }
.rs__row a { color: var(--text-0); text-decoration: underline; text-underline-offset: 2px; }
.bp__cell p { margin: 3px 0 0; font-size: 12px; line-height: 1.35; color: var(--text-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp__show { margin: -6px 0 -6px 6px; padding: 0 10px; min-block-size: 24px; font-size: 11px; }
.bp.narrow { overflow: auto; }
.bp.narrow .bp__stage, .bp.narrow .bp__head, .bp.narrow .bp__body, .bp.narrow .bp__strip { position: relative; inset: auto; height: auto; }
.bp.narrow .bp__head { padding: 56px 16px 8px; }
.bp.narrow .bp__sheetno { display: none; }
.bp.narrow .bp__body { display: flex; flex-direction: column; gap: 18px; padding: 8px 16px; }
.bp.narrow .bp__col { max-height: none; overflow: visible; }
.bp.narrow .bp__mid { order: -1; width: 100%; }
.bp.narrow .bp__planwrap { flex: none; }
.bp.narrow .bp__plan { position: static; width: 100%; height: auto; transform: none !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bp.narrow .bp__part { position: static; width: auto; height: auto; min-height: 56px; }
.bp.narrow .bp__edges { display: none; }
.bp.narrow .bp__strip { grid-template-columns: 1fr; }
.bp.narrow .bp__cell { border-left: 0; border-top: 1px solid var(--line); }
.bp.narrow .bp__cell:first-child { border-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .bp *, .mapscroll, .node .lift, #mapsvg .node { transition: none !important; }
  .node:hover .lift { transform: none; }
  .spark { animation: none !important; opacity: 0 !important; }
  .view-in { animation: none; }
  .bp__edge .trk { stroke-dashoffset: 0; }
  .bp__gl { opacity: 1; }
  .bp__edge polygon { opacity: 1; }
  .intro .trk, .intro.draw .trk { stroke-dashoffset: 0; }
  .intro .m-gl, .intro .edge polygon, .intro .loop, .intro .node { opacity: 1; }
}
/* Year-1 plan */
.plan-seg { margin-block-end: var(--s-3); overflow-x: auto; }
.plan-chart { margin: var(--s-4) 0; color: var(--text-1, var(--text-0)); }
.plan-chart svg { display: block; inline-size: 100%; block-size: auto; max-block-size: 220px; }
.plan-chart text { fill: var(--text-3); font-family: var(--font-mono); font-size: 10px; }
.plan-chart figcaption { margin-block-start: var(--s-2); }
.plan-chart__line { stroke-dasharray: 1; animation: plan-draw 900ms var(--ease) both; }
@keyframes plan-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.decision { display: grid; gap: var(--s-2); align-content: start; }
.decision__call { color: var(--text-0); font-weight: 600; }
.plan-seg .seg { flex-wrap: wrap; border-radius: var(--radius); }

/* ---------- scopes v2.7: titled sections + carousels ---------- */
.sec-title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--text-0); margin-block-start: var(--s-1); }
.sec-lede { font-size: var(--t-body); color: var(--text-2); max-inline-size: var(--measure); margin-block-start: calc(var(--s-1) * -1); }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.car { display: grid; gap: var(--s-2); min-inline-size: 0; }
.car__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 320px); gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-3); padding-block: var(--s-2); scrollbar-width: none; min-inline-size: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-5)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-5)), transparent 100%); }
.car__track::-webkit-scrollbar { display: none; }
.car__track > * { scroll-snap-align: start; }
.car__track:focus-visible { outline: 2px solid var(--text-0); outline-offset: 2px; border-radius: var(--radius); }
.car__nav { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }
.car__nav .btn { min-inline-size: 36px; justify-content: center; }
.car__nav .btn:disabled { opacity: .35; cursor: default; }
.car__pos { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-3); min-inline-size: 5ch; text-align: center; }
.car--mq .car__nav { display: none; }
.car--mq .car__track { display: grid; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.ccard { display: grid; gap: var(--s-2); align-content: start; text-align: left; font: inherit; color: inherit; border: 0; }
.ccard .row { justify-content: flex-start; }
.ccard h3 { font-size: var(--t-body); }
.ccard .scope__facts { align-items: center; }
.ccard .dot { display: inline; font-size: inherit; }
.card__body { color: var(--text-2); }
.card__body.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.more { justify-self: start; background: none; border: 0; padding: 0; color: var(--text-1); font-size: var(--t-small); font-weight: 550; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.more:hover { color: var(--text-0); }
.chip-file { align-self: end; justify-self: start; font-size: var(--t-label); color: var(--text-3); padding: 2px var(--s-2); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; }
.obl summary { cursor: pointer; list-style: none; display: inline-flex; min-block-size: 28px; align-items: center; }
.obl summary::-webkit-details-marker { display: none; }
.obl ul { margin: var(--s-2) 0 0; padding-inline-start: var(--s-4); display: grid; gap: var(--s-1); font-size: var(--t-small); color: var(--text-2); }
.pcard { cursor: pointer; }
.pcard:hover { background: color-mix(in srgb, var(--bg-3) 88%, var(--text-0)); }
.pcard:focus-visible { outline: 2px solid var(--text-0); outline-offset: 2px; }
.phstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); }
.ph { display: grid; justify-items: center; gap: 2px; padding: var(--s-2) var(--s-1); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-3); }
.ph i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); }
.ph b { font-size: var(--t-body); font-weight: 400; line-height: 1; }
.ph--full { background: var(--text-0); color: var(--bg-0); box-shadow: none; }
.ph--half { color: var(--text-0); box-shadow: inset 0 0 0 1px var(--text-1); }
@media (max-width: 720px) {
  .car__track { grid-auto-columns: 86%; }
  .car--mq .car__track { grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-5)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--s-3), #000 calc(100% - var(--s-5)), transparent 100%); }
  .car--mq .car__nav { display: flex; }
}
.group { grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.group > * { min-inline-size: 0; }
.ph, .car__track { position: relative; }

/* ===== inspector v2 ===== */
.has-insp .insp { display: flex; flex-direction: column; gap: var(--s-2); min-block-size: 0; }
@media (min-width: 1024px) {
  .has-insp .insp { overflow: hidden; max-block-size: calc(100dvh - var(--bar-h) - var(--s-5)); padding-block-start: var(--s-4); }
  .insp__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; }
}
@media (max-width: 1023px) { .insp__body { max-block-size: calc(100dvh - var(--bar-h) - 12rem); overflow-y: auto; } .insp__tabs { top: var(--bar-h); } }
.insp__head { flex: none; display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.insp__head .insp__bar { margin: 0; }
.insp__head .hero__name { font-size: var(--t-h2, var(--t-h1)); }
.insp__head .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.hero__does.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.insp__tabs { position: sticky; top: 0; z-index: 2; flex: none; padding-block: var(--s-1); background: var(--bg-0); }
.insp__tabs .seg { display: flex; overflow-x: auto; scrollbar-width: none; }
.insp__tabs .seg::-webkit-scrollbar { display: none; }
.insp__body { display: grid; gap: var(--s-3); align-content: start; overscroll-behavior: contain; padding-block-end: var(--s-4); min-inline-size: 0; }
.insp__body > .axis { padding-block-end: var(--s-3); border-bottom: 1px solid var(--line); }
.insp__body > .axis:last-child { border-bottom: 0; }
.insp__sub { position: sticky; top: 0; z-index: 1; padding-block: var(--s-1); background: var(--bg-0); }
.ocard { display: grid; gap: var(--s-1); padding: var(--s-2) var(--s-3); }
.ocard p { font-size: var(--t-small); color: var(--text-0); }
.kvs { display: grid; gap: 2px; }
.kv { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-2); font-size: var(--t-small); color: var(--text-1); overflow-wrap: anywhere; }
.kv .k { font-family: var(--font-mono); font-size: var(--t-label); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.kv a { color: var(--text-0); }
.insp__list, .kvlist { display: grid; gap: var(--s-1); inline-size: 100%; }
.cells > .kvlist, .cells > .rk, .cells > .row, .cells > .cap, .cells > .note, .cells > .hero__does { flex: 1 1 100%; }
.kvcard { gap: var(--s-1); }
.kvcard .kv:first-child { margin-block-start: 0; }
.kvcard__h { font-weight: 600; color: var(--text-0); }
.kvcard__h a { color: var(--text-0); }
.rk { display: grid; gap: var(--s-1); list-style: none; margin: 0; padding: 0; font-size: var(--t-small); color: var(--text-1); }
.rk li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2); align-items: start; }
.insp .cap + .rk { margin-block-start: calc(var(--s-1) * -1); }
.rs2 { display: grid; gap: var(--s-3); min-inline-size: 0; }
.rs2__head { display: flex; align-items: center; gap: var(--s-2); }
.rs2__grp { display: grid; gap: var(--s-2); }
.rs2__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--s-2); }
.rs2__repo { display: grid; align-content: start; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); min-inline-size: 0; }
.rs2__pills { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.rs2__name { font-weight: 600; color: var(--text-0); overflow-wrap: anywhere; }
.rs2__name a { color: var(--text-0); text-underline-offset: 2px; }
.rs2__note { font-size: var(--t-small); color: var(--text-1); }
.rs2__note.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs2__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: start; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-small); color: var(--text-1); overflow-wrap: anywhere; }
.rs2__item > .tag:first-child { grid-column: 1; }
.rs2__test { display: block; margin-block-start: 2px; }
.rs2__verdict summary { cursor: pointer; padding-block: var(--s-1); }
.rs2__verdict[open] summary { margin-block-end: var(--s-2); }
.rs2__verdict .hero__does { font-size: var(--t-small); margin-block-end: var(--s-2); }

/* ===== cost rings ===== */
.rings { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: start; }
.ring-card { display: grid; gap: var(--s-3); align-content: start; }
.ring-body { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.ring__fig { position: relative; inline-size: var(--rs, 220px); max-inline-size: 100%; aspect-ratio: 1; flex: none; color: var(--text-0); }
.ring__fig svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.ring__c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; padding: 22%; pointer-events: none; }
.ring__big { font-size: var(--t-h2, 1.25rem); font-weight: 650; color: var(--text-0); line-height: 1.1; overflow-wrap: anywhere; }
.ring__small { font-size: var(--t-small); color: var(--text-2); line-height: 1.25; overflow-wrap: anywhere; }
.ring-card .seg { stroke-opacity: var(--o, 1); cursor: pointer; outline: none; transition: stroke-opacity var(--dur-fast) var(--ease-soft); }
.ring-card.is-hl .seg:not(.is-on) { stroke-opacity: calc(var(--o, 1) * 0.3); }
.ring-card .seg.is-on { stroke-opacity: 1; }
.ring-card .seg:focus-visible { stroke: var(--accent, var(--text-0)); }
.ring__arc { stroke-dasharray: 1 1; animation: ring-in 600ms ease-out both; }
@keyframes ring-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ring__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; flex: 1 1 220px; min-inline-size: 0; align-content: start; }
.ring__row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; inline-size: 100%; padding: 6px var(--s-2); border-radius: 6px; background: none; border: 0; color: var(--text-1); font: inherit; font-size: var(--t-small); text-align: start; min-block-size: 32px; }
button.ring__row { cursor: pointer; }
button.ring__row:hover, button.ring__row.is-on { background: var(--line); color: var(--text-0); }
button.ring__row:focus-visible { outline: 2px solid var(--text-0); outline-offset: -2px; }
.ring__row.is-off { color: var(--text-3); }
.ring__lbl { overflow-wrap: anywhere; }
.ring__val { color: var(--text-2); white-space: nowrap; }
.ring__sw { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--text-0); opacity: var(--o, 1); align-self: center; }
.ring__sw--off { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 1; }
.ring-note { color: var(--text-2); font-size: var(--t-small); min-block-size: 4.5em; max-inline-size: var(--measure); }
.folds { display: grid; gap: var(--s-2); }
@media (max-width: 480px) {
  .ring__fig { --rs: 180px !important; margin-inline: auto; }
  .ring-body { flex-direction: column; align-items: stretch; }
  .ring__legend { flex-basis: auto; }
  .ring__val { white-space: normal; text-align: end; }
}
/* flow: wire label chips only on wire hover or the Edge labels toggle, never stacked on node names by selection */
#mapsvg[data-mode="flow"]:not(.labels) .elabel.on:not(.hv) { opacity: 0; }

/* ---- live build status ---- */
:root { --st-build: var(--accent); --st-merged: #2563eb; --st-built: var(--ok); --st-queued: var(--text-3); --st-left: var(--text-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --st-merged: #60a5fa; } }
:root[data-theme="dark"] { --st-merged: #60a5fa; }
.st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--t-small, 12px); line-height: 1.5; border: 1px solid currentColor; white-space: nowrap; }
.st--building { color: var(--st-build); background: color-mix(in srgb, var(--st-build) 14%, transparent); animation: stpulse 2s ease-in-out infinite; }
.st--merged { color: var(--st-merged); background: color-mix(in srgb, var(--st-merged) 14%, transparent); }
.st--built { color: var(--st-built); background: color-mix(in srgb, var(--st-built) 14%, transparent); }
.st--queued { color: var(--st-queued); background: color-mix(in srgb, var(--st-queued) 12%, transparent); }
.st--left { color: var(--st-left); background: transparent; border-style: dashed; opacity: 0.7; }
.stdot { stroke: none; }
.stdot.st--building { fill: var(--st-build); animation: stpulse 2s ease-in-out infinite; }
.stdot.st--merged { fill: var(--st-merged); }
.stdot.st--built { fill: var(--st-built); }
.stdot.st--queued { fill: var(--st-queued); }
.stdot.st--left { fill: none; stroke: var(--st-left); stroke-width: 1.5px; opacity: 0.7; }
.stlbl { font-size: 9px; fill: currentColor; stroke: none; background: none; border: 0; padding: 0; animation: none; pointer-events: none; opacity: 0.85; }
.stlbl.st--building { color: var(--st-build); } .stlbl.st--merged { color: var(--st-merged); } .stlbl.st--built { color: var(--st-built); } .stlbl.st--queued, .stlbl.st--left { color: var(--st-queued); }
#mapsvg[data-lod="far"] .stlbl { display: none; }
@keyframes stpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .st--building, .stdot.st--building { animation: none; } }
.stlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0; font-size: var(--t-small, 12px); color: var(--text-2); }
.stkey { display: inline-flex; align-items: center; gap: 5px; }
.stsep { color: var(--text-3); }
.mapbox > .stlegend { margin: 4px 12px; }
.mapbox[data-lod="far"] > .stlegend { display: none; }
.stline { margin: 0 0 10px; }
.stchips { display: flex; flex-wrap: wrap; gap: 4px; }
.stcav { color: var(--text-2); display: block; max-width: 28ch; }
.imps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.imp ul, .oq { margin: 6px 0 0; padding-inline-start: 18px; }
.imp li, .oq li { margin: 4px 0; }