:root {
  --bg: #04060c;
  --ink: #e8eefc;
  --muted: #8ea0c4;
  --dim: #8596b9;
  --line: rgba(140, 175, 255, 0.16);
  --glass: rgba(10, 16, 30, 0.62);
  --glass-strong: rgba(8, 13, 26, 0.86);
  --accent: #58c8ff;
  --gateway: #ffc94d;
  --health: #ff6b8b;
  --dock-clearance: 92px;
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- City Hall review board ---------- */
/* One design language. The board used to be a light "civic paper" surface, which read as a second
   application the moment D56 put it inside the shell — so it now wears the shell's palette and the
   OKF reader's two-pane proportions. Gold stays the gate's colour, because `--gateway` already is. */
body.review-mode { overflow: auto; background: var(--bg); }
body.review-mode > :not(.review-board) { display: none !important; }
body.review-mode .review-board { min-height: 100vh; }
.review-board {
  --review-topbar-h: 66px;
  color: var(--ink);
  font-family: var(--sans);
}
.review-board[hidden] { display: none; }
.review-topbar {
  position: sticky; top: 0; z-index: 5; min-height: 66px; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: var(--ink); background: var(--glass-strong); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); box-shadow: inset 0 -1px 0 rgba(255, 201, 77, .3);
}
.review-topbar > div { display: flex; align-items: center; gap: 12px; }
.review-topbar strong { display: block; font: 620 15px/1.1 var(--sans); }
.review-topbar small { display: block; margin-top: 3px; color: var(--dim); font: 10px var(--mono); text-transform: uppercase; }
.review-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 201, 77, .5); border-radius: 6px; color: var(--gateway); font: 700 11px var(--mono); }
.review-home { display: flex; align-items: center; gap: 12px; padding: 5px 8px 5px 5px; border-radius: 6px; color: inherit; text-decoration: none; }
.review-home:hover { background: rgba(140, 175, 255, .1); }
.review-home:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.review-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rail-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: transparent; font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rail-toggle:hover { background: rgba(140, 175, 255, .1); }
.rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-toggle i { font-size: 12px; font-style: normal; line-height: 1; }
.rail-toggle[aria-expanded="false"] { color: var(--dim); }
.review-actions code { color: var(--dim); font: 10px var(--mono); }
.review-actions button, .review-error button, .review-error .review-sign-in {
  min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); background: transparent; font: 600 11px var(--sans); cursor: pointer;
}
.review-actions button:hover, .review-error button:hover { background: rgba(140, 175, 255, .1); }
.review-error .review-sign-in { display: inline-flex; align-items: center; color: var(--ink); background: rgba(88, 200, 255, .16); border-color: rgba(88, 200, 255, .38); text-decoration: none; }
.review-workspace { width: min(1680px, 100%); margin: 0 auto; padding: 22px 22px 56px; }
.review-request { display: grid; grid-template-columns: minmax(0, 1fr) 205px; column-gap: 24px; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.review-request > span, .executive-summary > span, .review-shell > span {
  color: var(--accent); font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .12em;
}
.review-request > span, .review-request h1, .review-request > p { grid-column: 1; }
.review-request h1 { max-width: 900px; margin: 10px 0 8px; color: var(--ink); font: 620 clamp(24px, 2.6vw, 34px)/1.18 var(--sans); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; }
.review-request > p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.62; }
.decision-state { padding: 12px 14px; border-left: 3px solid var(--dim); border-radius: 0 8px 8px 0; background: rgba(3, 6, 14, .42); }
.review-request .decision-state { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 205px; }
.decision-state small, .decision-state span { display: block; color: var(--dim); font: 9px var(--mono); text-transform: uppercase; }
.decision-state strong { display: block; margin: 4px 0; color: var(--ink); font: 620 21px var(--sans); text-transform: capitalize; }
.decision-state.advance { border-color: #5fd6a0; }.decision-state.revise { border-color: var(--gateway); }.decision-state.decline { border-color: var(--health); }
/* Navigation the reviewer keeps, rather than has to scroll back for. Sits under the topbar. */
.brief-controls {
  position: sticky; top: var(--review-topbar-h); z-index: 4;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin: 0 0 22px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--glass-strong); backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}
.brief-tabs { display: inline-flex; gap: 4px; margin: 0; padding: 3px; border: 0; border-radius: 999px; background: rgba(3, 6, 14, .5); }
.brief-tabs button {
  min-height: 32px; padding: 0 15px; border: 0; border-radius: 999px;
  color: var(--muted); background: transparent; font: 700 10px var(--mono); text-transform: uppercase;
  cursor: pointer;
}
.brief-tabs button:hover { color: var(--ink); background: rgba(140, 175, 255, .1); }
.brief-tabs button.on { color: var(--ink); background: rgba(88, 200, 255, .18); box-shadow: inset 0 0 0 1px rgba(88, 200, 255, .38); }
.brief-tabs button i { color: var(--gateway); font-style: normal; }
.brief-tabs button:focus-visible,
.brief-stats button:focus-visible,
.brief-placeholder button:focus-visible,
.brief-provenance button:focus-visible,
.diagram-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brief-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.brief-stats button {
  display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; min-height: 32px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(3, 6, 14, .42); color: var(--muted); cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.brief-stats button:hover:not(:disabled) { border-color: rgba(255, 201, 77, .5); transform: translateY(-1px); }
.brief-stats button.on { border-color: rgba(255, 201, 77, .55); background: rgba(255, 201, 77, .14); }
.brief-stats button:disabled { opacity: .4; cursor: not-allowed; }
.brief-stats b { color: var(--ink); font: 620 14px/1 var(--sans); }
.brief-stats span { color: var(--dim); font: 8.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.brief-stats button.on b, .brief-stats button.on span { color: var(--gateway); }
.stat-clear {
  min-height: 32px; padding: 0 13px; border: 1px dashed rgba(255, 201, 77, .45); border-radius: 999px;
  background: transparent; color: var(--gateway); font: 700 8.5px var(--mono); letter-spacing: .05em;
  text-transform: uppercase; cursor: pointer;
}
.stat-clear[hidden] { display: none; }
.stat-clear:hover { background: rgba(255, 201, 77, .12); }
/* `block: 'center'` cannot centre a target near the end of the document, so keep it clear of the bar. */
.review-read [id^="part-"], .review-read .note { scroll-margin-top: calc(var(--review-topbar-h) + 90px); }
.review-alert { margin: 16px 0 0; padding: 10px 12px; border-left: 3px solid var(--health); border-radius: 0 4px 4px 0; background: rgba(255, 107, 139, .1); color: #ffc2ce; font-size: 12px; }
.review-alert a { margin-left: 10px; color: inherit; font-weight: 700; }
.review-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.review-queue { display: grid; gap: 6px; }
.review-queue a { display: grid; gap: 3px; padding: 9px 10px; border: 1px solid var(--line); border-left: 2px solid rgba(255, 201, 77, .5); border-radius: 0 6px 6px 0; background: rgba(3, 6, 14, .38); color: inherit; text-decoration: none; }
.review-queue a:hover { border-color: rgba(88, 200, 255, .34); border-left-color: var(--gateway); background: rgba(88, 200, 255, .06); }
.review-queue span { color: var(--dim); font: 8.5px var(--mono); text-transform: uppercase; }
.review-queue strong { color: var(--ink); font: 600 11.5px/1.3 var(--sans); }
.review-queue small { color: var(--dim); font: 8.5px/1.35 var(--mono); }
.brief-list { margin: 0; padding: 0; list-style: none; }
.review-brief { min-width: 0; padding: 20px 24px 24px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.executive-summary { padding: 22px 0; border-bottom: 1px solid var(--line); }
.executive-summary h2 { max-width: 760px; margin: 7px 0 10px; color: var(--ink); font: 620 21px/1.4 var(--sans); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word; }
.executive-summary > p { max-width: 760px; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; white-space: pre-line; }
.brief-provenance {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  margin-top: 18px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--dim);
  font: 8.5px/1.4 var(--mono); text-transform: uppercase;
}
.brief-provenance b { color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.brief-warning { max-width: 620px; margin: 4px auto 6px; padding: 11px 13px; border: 1px solid rgba(255, 201, 77, .32); border-left: 3px solid var(--gateway); border-radius: 0 6px 6px 0; background: rgba(255, 201, 77, .09); color: #f3dda4; font: 11.5px/1.55 var(--sans); text-align: left; }
.brief-warning strong { color: var(--gateway); }
.brief-backfill { max-width: 760px; margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--line); background: rgba(140, 175, 255, .06); color: var(--muted); font: 11.5px/1.55 var(--sans); }
.brief-provenance button, .brief-placeholder button, .diagram-actions button {
  min-height: 32px; padding: 0 13px; border: 1px solid rgba(88, 200, 255, .38); border-radius: 6px;
  color: var(--ink); background: rgba(88, 200, 255, .16); font: 600 10.5px var(--sans); cursor: pointer;
}
.brief-provenance button { min-height: 26px; color: var(--accent); background: transparent; border-color: var(--line); font-size: 9px; }
.brief-provenance button:hover, .diagram-actions button.secondary:hover { background: rgba(88, 200, 255, .12); }
.brief-provenance button:disabled, .brief-placeholder button:disabled, .diagram-actions button:disabled { cursor: default; opacity: .5; }
.review-read { min-width: 0; padding-bottom: 22px; }
.review-read > section + section { margin-top: 30px; }
.review-read > section > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.review-read > section > header > span { color: var(--muted); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.review-read > section > header > b { color: var(--dim); font: 10px var(--mono); }
.review-read > section > header .agent-tag, .review-read > section > header .plain-tag { margin-left: 8px; }
.decisions { padding-top: 4px; }
.decision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.decision-group { padding: 13px 14px 15px; background: rgba(3, 6, 14, .55); }
.decision-group > small { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: var(--gateway); font: 700 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.decision-group > small b { color: var(--dim); }
.decision-group ul { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.decision-group li { position: relative; padding-left: 13px; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.decision-group li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 1px; background: var(--gateway); }
.annot-legend { margin: 0 0 18px; max-width: 760px; color: var(--dim); font-size: 11.5px; line-height: 1.55; }
.annot-heads { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 26px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.annot-heads > span { display: flex; align-items: center; gap: 8px; color: var(--dim); font: 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.annot-heads > span:last-child { padding-left: 22px; }
.annot { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 26px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.annot:last-child { border-bottom: 0; }
.annot-text h3 { margin: 0 0 9px; color: var(--ink); font: 620 13.5px var(--sans); }
.annot-text p { margin: 0; max-width: 640px; white-space: pre-wrap; color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: break-word; }
.annot-notes { display: grid; align-content: start; gap: 9px; padding-left: 22px; border-left: 1px solid var(--line); }
.annot.bare .annot-notes { border-left-style: dashed; }
.annot.loose .annot-text p { color: var(--dim); font-size: 11.5px; font-style: italic; }
.annot-none { margin: 0; color: var(--dim); font-size: 10.5px; font-style: italic; }
.note { padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--dim); border-radius: 0 6px 6px 0; background: rgba(3, 6, 14, .45); }
.note > small { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--dim); font: 700 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.note > p { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.note dl { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 3px 8px; margin: 8px 0 0; font-size: 9.5px; }
.note dt { color: var(--dim); font-family: var(--mono); text-transform: uppercase; }
.note dd { margin: 0; color: var(--muted); font-family: var(--mono); line-height: 1.45; overflow-wrap: anywhere; }
.note.outcomes { border-left-color: var(--accent); }
.note.evidence.strong { border-left-color: #5fd6a0; }
.note.evidence.strong > small b { color: #5fd6a0; }
.note.evidence.missing { border-left-color: var(--health); }
.note.evidence.missing > small b { color: var(--health); }
/* Focus is a way to find findings among many, so it dims rather than hides — nothing disappears. */
.review-read[class*="focus-"] .note, .review-read[class*="focus-"] .decision-group { opacity: .28; }
.review-read.focus-outcomes .note.outcomes,
.review-read.focus-evidence .note.evidence,
.review-read.focus-gaps .decision-group[data-group="gaps"],
.review-read.focus-risks .decision-group[data-group="risks"],
.review-read.focus-questions .decision-group[data-group="questions"] { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 201, 77, .45); }
.discovery-strip { padding-top: 4px; }
@media (max-width: 1080px) {
  .annot, .annot-heads { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .annot-heads > span:last-child { display: none; }
  .annot-notes { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
}
.brief-value { margin-top: 16px; padding-left: 13px; border-left: 2px solid var(--line); }
.brief-value small { display: block; margin-bottom: 4px; color: var(--dim); font: 700 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.brief-value p { margin: 0; max-width: 720px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.unset { color: var(--dim); font-style: italic; }
.brief-list { display: grid; gap: 7px; }
.brief-list li { position: relative; max-width: 760px; padding-left: 14px; color: var(--muted); font-size: 12px; line-height: 1.58; overflow-wrap: anywhere; }.brief-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--gateway); }
.gate-flags { margin: 12px 0 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.gate-flags li { padding: 9px 11px; border-left: 3px solid var(--gateway); border-radius: 0 6px 6px 0; background: rgba(255, 201, 77, .09); }
.gate-flags li.ask { border-left-color: var(--health); background: rgba(255, 107, 139, .09); }
.gate-flags b { display: block; margin-bottom: 3px; color: var(--gateway); font: 700 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.gate-flags li.ask b { color: #ffb9c6; }
.gate-flags p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.gate-flags p.contract-ask { margin-top: 5px; color: var(--dim); font-size: 11px; font-style: italic; }
.contract-version { margin: 10px 0 0; color: var(--dim); font: 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.outreach { margin: 26px 0 0; padding: 18px 20px; background: rgba(3, 6, 14, .45); border: 1px solid var(--line); border-radius: 10px; }

/* The author line carries a UPN with `overflow-wrap: anywhere`, so it must be allowed to take a
   row of its own rather than be crushed to one character per line beside the action. */
/* The author is a fact about the request, so it sits under the title as one integrated row:
   who, what is still open on them, and the one action that follows from both. */
.submitter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; margin: 18px 0 0; padding: 12px 15px; background: rgba(3, 6, 14, .42); border: 1px solid var(--line); border-radius: 10px; }
.submitter.is-you { border-color: rgba(88, 200, 255, .3); background: rgba(88, 200, 255, .06); }
.submitter-mark { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(88, 200, 255, .18); color: #cdeaff; font: 620 13px/1 var(--sans); font-style: normal; letter-spacing: .04em; }
.submitter-who { min-width: 0; display: grid; gap: 1px; }
.submitter small { display: block; color: var(--dim); font: 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.submitter-who strong { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 1px; color: var(--ink); font: 620 14px/1.25 var(--sans); overflow-wrap: anywhere; }
.submitter-who strong em { padding: 1px 7px; border-radius: 999px; color: var(--accent); background: rgba(88, 200, 255, .16); font: 8.5px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.submitter-who span { display: block; color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.submitter-state { display: grid; gap: 1px; justify-items: end; text-align: right; }
.submitter-state b { color: var(--dim); font: 620 17px/1 var(--sans); }
.submitter-state b.open { color: var(--gateway); }
.submitter-state em { color: var(--dim); font: 9px var(--mono); font-style: normal; }
.submitter button { flex: 0 0 auto; padding: 9px 15px; border-radius: 6px; color: var(--ink); background: rgba(88, 200, 255, .16); border: 1px solid rgba(88, 200, 255, .38); cursor: pointer; font: 12px var(--sans); }
.submitter button.held { color: var(--gateway); background: rgba(255, 201, 77, .12); border-color: rgba(255, 201, 77, .4); }
.submitter.unknown { grid-template-columns: auto minmax(0, 1fr); }
.submitter.unknown .submitter-mark { background: rgba(140, 175, 255, .12); color: var(--dim); }
@media (max-width: 620px) { .submitter button, .submitter-you { margin-left: 51px; } }
.outreach > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.outreach > header span { color: var(--muted); font: 700 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.outreach > header b { margin-left: auto; color: var(--dim); font: 9px var(--mono); }
.outreach-lede, .outreach-history { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.outreach-history { padding: 8px 11px; background: rgba(140, 175, 255, .06); border-left: 3px solid var(--line); }
.outreach-history b { color: var(--ink); }
.outreach-history.none { color: var(--dim); background: none; border-left-color: var(--line); }
.outreach-history.waiting { border-left-color: var(--gateway); background: rgba(255, 201, 77, .1); color: #f3dda4; }
.outreach-lede.repeat { color: #ffb9c6; font-weight: 600; }
.outreach-confirm { padding: 15px 16px; border-radius: 8px; background: rgba(255, 201, 77, .1); border: 1px solid rgba(255, 201, 77, .32); }
.outreach-confirm h3 { margin: 0 0 8px; color: var(--gateway); font: 620 14px var(--sans); }
.outreach-confirm p { margin: 0 0 8px; color: #f3dda4; font-size: 12.5px; line-height: 1.55; }
.outreach-asks { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.outreach-asks li { padding: 9px 12px; border-radius: 0 6px 6px 0; background: rgba(255, 107, 139, .09); border-left: 3px solid var(--health); }
.outreach-asks b { display: block; margin-bottom: 3px; color: #ffb9c6; font: 700 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.outreach-asks p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.outreach-modes { display: flex; flex-wrap: wrap; gap: 9px; }
.outreach-modes button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 6px; color: var(--ink); background: rgba(3, 6, 14, .5); border: 1px solid var(--line); cursor: pointer; font: 12px var(--sans); }
.outreach-modes button:hover:not(:disabled) { border-color: rgba(88, 200, 255, .38); }
.outreach-modes button:disabled { opacity: .45; cursor: not-allowed; }
.outreach-composer { display: grid; gap: 12px; }
.outreach-channel { display: inline-flex; gap: 0; }
.outreach-channel button { padding: 7px 16px; color: var(--muted); background: rgba(3, 6, 14, .5); border: 1px solid var(--line); cursor: pointer; font: 11px var(--mono); }
.outreach-channel button.on { color: var(--ink); background: rgba(88, 200, 255, .18); border-color: rgba(88, 200, 255, .38); }
.outreach-field { display: grid; gap: 5px; }
.outreach-field span { color: var(--dim); font: 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.outreach-field input, .outreach-field textarea { padding: 10px 12px; border-radius: 6px; color: var(--ink); background: rgba(3, 6, 14, .55); border: 1px solid var(--line); font: 13px/1.65 var(--sans); resize: vertical; }
.outreach-grounding summary { display: flex; align-items: center; gap: 8px; color: var(--accent); cursor: pointer; font: 11px var(--mono); }
.outreach-grounding ul { margin: 10px 0 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.outreach-grounding li { padding-left: 12px; border-left: 2px solid var(--line); }
.outreach-grounding p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.outreach-grounding small, .outreach-omitted { display: block; margin-top: 3px; color: var(--dim); font-size: 11px; font-style: italic; }
.outreach-send { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.outreach-send button { padding: 10px 18px; border-radius: 6px; color: var(--ink); background: rgba(3, 6, 14, .5); border: 1px solid var(--line); cursor: pointer; font: 12px var(--sans); }
.outreach-send button.primary { background: rgba(88, 200, 255, .18); border-color: rgba(88, 200, 255, .38); }
.outreach-send button:disabled { opacity: .45; cursor: not-allowed; }
.outreach-blocked { color: #ffb9c6; font-size: 11.5px; }
.outreach-note, .outreach-status, .outreach-working { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.5; }
.outreach-status { color: var(--accent); }
.outreach-error { margin: 0; color: #ffb9c6; font-size: 12px; }
@media (max-width: 620px) { .outreach-modes button, .outreach-send button { width: 100%; justify-content: center; } }

/* The decision, and the contributor's answer to it — one panel, because they are one exchange. */
.disposition { margin: 26px 0 0; padding: 18px 20px; background: rgba(3, 6, 14, .45); border: 1px solid var(--line); border-radius: 10px; }
.disposition.decided { border-color: rgba(140, 175, 255, .3); }
.disposition.decided.approve { border-color: rgba(88, 255, 178, .32); }
.disposition.decided.reject { border-color: rgba(255, 107, 139, .32); }
.disposition.decided.request_changes { border-color: rgba(255, 201, 77, .34); }
.disposition > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.disposition > header span { color: var(--muted); font: 700 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.disposition > header b { margin-left: auto; color: var(--dim); font: 9px var(--mono); }
.disposition .empty, .disposition-lede, .disposition-note { margin: 0; color: var(--dim); font-size: 11.5px; line-height: 1.55; }
.disposition-prior { margin: 0 0 12px; padding: 8px 11px; color: var(--muted); font-size: 12.5px; line-height: 1.55; background: rgba(140, 175, 255, .06); border-left: 3px solid var(--line); }
.disposition-record { margin-bottom: 14px; padding: 11px 13px; border-radius: 0 6px 6px 0; background: rgba(140, 175, 255, .07); border-left: 3px solid var(--line); }
.disposition-record strong { display: block; color: var(--ink); font: 620 13px var(--sans); }
.disposition-record small { display: block; margin-top: 2px; color: var(--dim); font: 10px var(--mono); }
.disposition-record p { margin: 7px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.disposition-controls { display: grid; gap: 9px; }
.disposition-controls label { color: var(--dim); font: 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.disposition-controls textarea { padding: 10px 12px; border-radius: 6px; color: var(--ink); background: rgba(3, 6, 14, .55); border: 1px solid var(--line); font: 13px/1.65 var(--sans); resize: vertical; }
.disposition-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.disposition-actions button { padding: 10px 18px; border-radius: 6px; color: var(--ink); background: rgba(3, 6, 14, .5); border: 1px solid var(--line); cursor: pointer; font: 12px var(--sans); }
.disposition-actions button:hover:not(:disabled) { border-color: rgba(88, 200, 255, .38); }
.disposition-actions button.primary { background: rgba(88, 200, 255, .18); border-color: rgba(88, 200, 255, .38); }
.disposition-actions button.decline { color: #ffb9c6; }
.disposition-actions button.decline:hover:not(:disabled) { border-color: rgba(255, 107, 139, .4); }
.disposition-actions button:disabled { opacity: .45; cursor: not-allowed; }
/* One row per flag City Hall could name but not settle. Amber until answered, because an
   unanswered flag is the one thing on this panel that stops publication. */
.disposition-flags { padding: 12px 14px; border-radius: 8px; background: rgba(255, 201, 77, .06); border: 1px solid rgba(255, 201, 77, .28); }
.disposition-flags.resolved { background: rgba(88, 255, 178, .05); border-color: rgba(88, 255, 178, .26); }
.disposition-flags-lede { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.disposition-flags-lede b { color: var(--ink); font: 620 12px var(--mono); }
.disposition-flags ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.disposition-flags li { padding: 9px 11px; border-radius: 6px; background: rgba(3, 6, 14, .4); border: 1px solid var(--line); }
.disposition-flags li.accepted { border-color: rgba(88, 255, 178, .3); }
.disposition-flags label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; text-transform: none; letter-spacing: 0; font: inherit; }
.disposition-flags input { margin-top: 2px; accent-color: #58ffb2; flex: none; }
.disposition-flags li b { display: block; color: var(--ink); font: 620 12.5px/1.5 var(--sans); }
.disposition-flags li small { display: block; margin-top: 3px; color: var(--dim); font: 10px/1.5 var(--mono); }
.disposition-node-id { margin: 0; padding: 9px 12px; border-radius: 6px; color: var(--muted); font-size: 12px; background: rgba(140, 175, 255, .06); border-left: 3px solid var(--line); }
.disposition-node-id code { color: var(--ink); font: 620 12px var(--mono); }
.disposition-node-id small { display: block; margin-top: 4px; color: var(--dim); font-size: 11px; line-height: 1.5; }
.disposition-revise { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.disposition-revise p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.disposition-revise button { padding: 10px 18px; border-radius: 6px; color: var(--ink); background: rgba(3, 6, 14, .5); border: 1px solid var(--line); cursor: pointer; font: 12px var(--sans); }
.disposition-revise button.primary { background: rgba(255, 201, 77, .16); border-color: rgba(255, 201, 77, .38); }
.disposition-status { margin: 0 0 12px; color: var(--accent); font-size: 12px; line-height: 1.55; }
.disposition-error { margin: 0 0 12px; color: #ffb9c6; font-size: 12px; }
@media (max-width: 620px) { .disposition-actions button, .disposition-revise button { width: 100%; } }

/* What is being corrected, kept in front of the resident correcting it. */
.revise-notice { padding: 11px 13px; border-radius: 0 6px 6px 0; background: rgba(255, 201, 77, .1); border-left: 3px solid var(--gateway); }
.revise-notice span { display: block; color: var(--gateway); font: 700 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.revise-notice code { font: 10px var(--mono); }
.revise-notice p { margin: 6px 0 0; color: #f3dda4; font-size: 12.5px; line-height: 1.55; }
.diagram-tab { min-width: 0; padding-bottom: 22px; }
.proposal-facets { display: grid; grid-template-columns: minmax(100px, .38fr) minmax(0, 1fr); gap: 9px 16px; margin: 0; }
.proposal-facets dt { color: var(--dim); font: 8.5px var(--mono); text-transform: uppercase; }
.proposal-facets dd { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.proposal-facets dd span, .proposal-tags span { padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(140, 175, 255, .08); color: var(--muted); font-size: 10px; }
.proposal-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 16px 0 0; }
.diagram-empty { margin: 0; padding: 40px 24px; border: 1px dashed var(--line); border-radius: 10px; color: var(--dim); background: rgba(3, 6, 14, .3); text-align: center; }
.diagram-instruction { display: grid; gap: 7px; margin-top: 18px; color: var(--muted); font: 700 9px var(--mono); text-transform: uppercase; }
.diagram-instruction textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(3, 6, 14, .55); color: var(--ink); font: 12px/1.5 var(--sans); text-transform: none; }
.diagram-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
.diagram-actions button.secondary { color: var(--accent); background: transparent; border-color: var(--line); }
.diagram-tab > small, .diagram-tab > p:not(.diagram-empty):not(.review-alert):not(.tab-provenance) { display: block; margin-top: 10px; color: var(--dim); font-size: 10.5px; line-height: 1.5; }

/* The OKF record of a request. Reuses the reader's own frontmatter styles verbatim, because it is
   the reader's own frontmatter renderer — only the framing belongs to the board. */
.record-tab .okf-path { margin-bottom: 10px; }
.record-tab .okf-path b { color: var(--accent); font-weight: 400; }
.record-tab .okf-path em { margin-left: 8px; color: var(--gateway); font-style: normal; }
.record-tab .okf-profile { margin: 0 0 4px; }
.record-tab > section { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.record-tab > section > header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.record-tab > section > header > span { color: var(--muted); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.record-tab > section > header > b { color: var(--dim); font: 10px var(--mono); }
.record-tab > section > header .agent-tag { margin-left: auto; }
.counsel-dock { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: grid; justify-items: end; gap: 12px; }
.counsel-launcher { position: relative; display: inline-flex; align-items: center; gap: 11px; min-height: 54px; padding: 0 20px 0 11px; border: 1px solid rgba(140, 110, 220, .5); border-radius: 999px; color: var(--ink); background: linear-gradient(135deg, #1b1636, #3a2a6b); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); font: 620 12px var(--sans); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.counsel-launcher:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0, 0, 0, .6); }
.counsel-launcher:focus-visible { outline: 2px solid var(--gateway); outline-offset: 3px; }
.counsel-launcher.on { background: linear-gradient(135deg, #14102a, #241c46); }
.counsel-launcher-label { white-space: nowrap; }
.counsel-orb { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #ffeec2, #d1b04c 46%, #96731f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); animation: counsel-attention 5s ease-in-out 1.1s 3; }
.counsel-orb::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(209,176,76,.65); animation: counsel-halo 2.6s ease-out infinite; }
.counsel-orb::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.6), transparent 55%); animation: counsel-orb-spin 3.6s linear infinite; }
.counsel-spark { position: absolute; color: #ffeec2; font: 9px/1 var(--sans); font-style: normal; text-shadow: 0 0 6px rgba(255,238,194,.95); animation: counsel-spark 2.3s ease-in-out infinite; }
.counsel-spark.s1 { top: -3px; right: -4px; animation-delay: .1s; }
.counsel-spark.s2 { right: -7px; bottom: -1px; animation-delay: .9s; }
.counsel-spark.s3 { top: 3px; left: -7px; font-size: 7px; animation-delay: 1.6s; }
.counsel-teaser { position: relative; max-width: 272px; padding: 13px 32px 13px 14px; border: 1px solid var(--line); border-radius: 12px 12px 2px 12px; background: var(--glass-strong); backdrop-filter: blur(8px); box-shadow: 0 16px 34px rgba(0, 0, 0, .5); animation: counsel-teaser-in .34s ease both .9s; }
.counsel-teaser b { display: block; margin-bottom: 4px; color: var(--ink); font: 620 11.5px var(--sans); }
.counsel-teaser p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.counsel-teaser-dismiss { position: absolute; top: 6px; right: 6px; width: 21px; height: 21px; border: 0; border-radius: 4px; background: none; color: var(--dim); font: 14px/1 var(--sans); cursor: pointer; }
.counsel-teaser-dismiss:hover { background: rgba(140, 175, 255, .1); color: var(--ink); }
.counsel-panel { width: min(420px, calc(100vw - 28px)); max-height: min(660px, calc(100vh - 132px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #080d1a; box-shadow: 0 26px 60px rgba(0, 0, 0, .68); animation: counsel-rise .26s cubic-bezier(.2,.8,.2,1); }
.counsel-panel[hidden] { display: none; }
.counsel-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.counsel-close { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font: 15px/1 var(--sans); cursor: pointer; }
.counsel-close:hover { border-color: rgba(88, 200, 255, .38); color: var(--ink); }
.copilot-header { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: var(--glass-strong); }
.copilot-header > div { display: flex; align-items: center; gap: 9px; }.copilot-header strong { display: block; color: var(--ink); font: 620 12px var(--sans); }.copilot-header small { display: block; margin-top: 2px; color: var(--dim); font: 9px var(--mono); text-transform: uppercase; }.copilot-header > b { color: #5fd6a0; font: 9px var(--mono); text-transform: uppercase; }
.copilot-mark, .copilot-message > span { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 6px; background: rgba(112, 72, 190, .3); color: #cbb2ff; font: 700 9px var(--mono); }
.copilot-transcript { overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 14px; overscroll-behavior: contain; border-bottom: 1px solid var(--line); }
.copilot-transcript.idle { display: none; }
.copilot-message { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: start; max-width: 880px; }.copilot-message.user { grid-template-columns: minmax(0,1fr) 30px; }.copilot-message.user > span { grid-column: 2; background: rgba(88, 200, 255, .18); color: #cdeaff; }.copilot-message.user > div { grid-column: 1; grid-row: 1; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(3, 6, 14, .5); }
.copilot-message small { display: block; margin-bottom: 3px; color: var(--dim); font: 8.5px var(--mono); text-transform: uppercase; }.copilot-message p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; }.copilot-message.error p { color: #ffb9c6; }.copilot-message.pending i { display: block; width: 32px; height: 2px; margin-top: 7px; background: var(--gateway); animation: review-pulse 1s ease-in-out infinite alternate; }
.copilot-scope { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(3, 6, 14, .5); }.copilot-scope summary { padding: 9px 12px; display: flex; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; color: var(--muted); }.copilot-scope summary::-webkit-details-marker { display: none; }.copilot-scope summary span { font: 700 9px var(--mono); text-transform: uppercase; }.copilot-scope summary b { color: var(--dim); font: 8.5px var(--mono); font-weight: 500; }.copilot-scope[open] summary { border-bottom: 1px solid var(--line); }
.scope-group { padding: 9px 12px; }.scope-group + .scope-group { padding-top: 0; }.scope-group > small { display: block; margin-bottom: 6px; color: var(--dim); font: 700 8.5px var(--mono); text-transform: uppercase; }.scope-group ul { margin: 0; padding: 0; display: grid; gap: 4px; list-style: none; }.scope-group li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10.5px; }.scope-group li b { color: var(--dim); font: 9px var(--mono); }.scope-group p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.counsel-intro { padding: 16px; }
.counsel-lede { max-width: 78ch; margin: 0 0 14px; color: var(--muted); font-size: 12.5px; line-height: 1.62; }
.counsel-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 8px; }
.counsel-actions button { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(3, 6, 14, .45); text-align: left; cursor: pointer; }
.counsel-actions button:hover { border-color: rgba(140, 110, 220, .5); background: rgba(112, 72, 190, .14); }
.counsel-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.counsel-actions button:disabled { cursor: default; opacity: .5; box-shadow: none; }
.counsel-actions b { color: var(--ink); font: 620 12px var(--sans); }
.counsel-actions small { color: var(--dim); font: 10.5px/1.4 var(--sans); }
.copilot-composer { position: relative; margin: 12px 16px 16px; }.copilot-composer textarea { width: 100%; min-height: 70px; resize: vertical; padding: 10px 42px 10px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(3, 6, 14, .6); color: var(--ink); font: 12px/1.45 var(--sans); }.copilot-composer button { position: absolute; right: 7px; bottom: 8px; width: 28px; height: 28px; border: 0; border-radius: 6px; background: rgba(112, 72, 190, .45); color: #fff; font: 700 16px var(--sans); cursor: pointer; }.copilot-composer button:disabled { background: rgba(140, 175, 255, .12); color: var(--dim); cursor: default; }
.brief-placeholder { min-height: 360px; display: grid; align-content: center; justify-items: center; padding: 36px 18px; text-align: center; }.brief-placeholder > .brief-pulse { width: 48px; height: 2px; margin: 12px; background: var(--gateway); animation: review-pulse 1s ease-in-out infinite alternate; }.brief-placeholder h2 { max-width: 680px; margin: 5px 0; color: var(--ink); font: 620 22px/1.3 var(--sans); }.brief-placeholder p { max-width: 620px; color: var(--muted); font-size: 12px; line-height: 1.62; }.brief-placeholder button { margin-top: 4px; }
.brief-placeholder [data-brief-run]:not(:disabled) { min-height: 42px; margin-top: 8px; padding: 0 20px; color: #2a1f04; border-color: rgba(255, 201, 77, .6); background: var(--gateway); box-shadow: 0 8px 18px rgba(255, 201, 77, .18); animation: brief-invite 1.8s ease-in-out infinite; }
.brief-placeholder [data-brief-run]:not(:disabled)::after { content: ' \2192'; }
.brief-placeholder [data-brief-run]:not(:disabled):hover { background: #ffd873; box-shadow: 0 11px 24px rgba(255, 201, 77, .26); transform: translateY(-1px); }
.brief-placeholder [data-brief-run]:not(:disabled):active { box-shadow: 0 4px 10px rgba(255, 201, 77, .2); transform: translateY(1px); }
.review-shell { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 24px; text-align: center; }.review-shell h1 { margin: 8px 0; color: var(--ink); font: 620 30px var(--sans); }.review-shell p { color: var(--muted); font: 11px var(--mono); }.review-error > div { display: flex; gap: 8px; margin-top: 15px; }.review-error button.secondary { color: var(--muted); background: transparent; }
.empty { color: var(--dim) !important; font-size: 11px; font-style: italic; }
.skel-note { margin: 0 0 22px; color: var(--dim); font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.skel-block { display: grid; gap: 11px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.review-brief .skel-block + .skel-block { margin-top: 26px; }
.skel {
  display: block; height: 13px; border-radius: 2px;
  background: linear-gradient(100deg, rgba(140,175,255,.08) 20%, rgba(140,175,255,.18) 42%, rgba(140,175,255,.08) 64%);
  background-size: 260% 100%; animation: skel-sweep 1.25s ease-in-out infinite;
}
.skel-block .skel:first-child { height: 9px; background: rgba(140,175,255,.1); animation: none; }
.skel-block.lead .skel:nth-child(2) { height: 30px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
@keyframes skel-sweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.review-welcome { max-width: 880px; display: grid; gap: 34px; padding-top: 44px; }
.welcome-hero > span { color: var(--accent); font: 700 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.welcome-hero h1 { margin: 8px 0 10px; color: var(--ink); font: 620 clamp(26px, 3.4vw, 34px)/1.15 var(--sans); text-wrap: balance; }
.welcome-hero > p { max-width: 640px; margin: 0 0 22px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.welcome-identity { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px 14px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
.welcome-identity dt { color: var(--dim); }
.welcome-identity dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.welcome-identity small { margin-left: 7px; color: var(--dim); font: 9px var(--mono); }
.review-welcome > section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.review-welcome > section > header span { color: var(--muted); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.review-welcome > section > header b { color: var(--dim); font: 10px var(--mono); }
.seat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.seat { padding: 13px 14px; border: 1px solid var(--line); border-left: 3px solid var(--dim); border-radius: 0 8px 8px 0; background: rgba(3, 6, 14, .42); }
.seat.council { border-left-color: var(--gateway); }
.seat.span { border-left-color: var(--accent); }
.seat strong { display: block; color: var(--ink); font: 620 13.5px/1.2 var(--sans); }
.seat p { margin: 6px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.seat small { color: var(--dim); font: 8.5px var(--mono); text-transform: uppercase; }
.seat-note { margin: 14px 0 0; color: var(--dim); font-size: 11.5px; line-height: 1.55; }
@keyframes review-pulse { to { width: 120px; opacity: .35; } }
@keyframes brief-invite { 50% { box-shadow: 0 9px 22px rgba(92,70,15,.34); } }
@keyframes counsel-halo { 0% { transform: scale(.92); opacity: .6; } 70% { opacity: 0; } 100% { transform: scale(1.85); opacity: 0; } }
@keyframes counsel-orb-spin { to { transform: rotate(360deg); } }
@keyframes counsel-spark { 0%, 100% { opacity: .18; transform: scale(.55); } 50% { opacity: 1; transform: scale(1); } }
@keyframes counsel-attention { 0%, 100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-4px) scale(1.06); } 60% { transform: translateY(0) scale(1); } }
@keyframes counsel-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes counsel-teaser-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .brief-placeholder > .brief-pulse, .brief-placeholder [data-brief-run]:not(:disabled),
  .counsel-orb, .counsel-orb::before, .counsel-orb::after, .counsel-spark, .counsel-panel, .counsel-teaser { animation: none; }
  .counsel-teaser { opacity: 1; }
}

/* Same width the queue collapses at: the two halves of the Review tab must not disagree about
   when a rail beside a document stops being readable. */
@media (max-width: 900px) {
  .review-topbar { padding: 0 14px; }.review-actions code { display: none; }
  .review-workspace { padding: 14px 12px 38px; }.review-request { grid-template-columns: 1fr; }.review-request .decision-state { grid-column: 1; grid-row: auto; width: auto; margin-top: 16px; }
  .executive-summary h2 { font-size: 18px; }
  .review-brief { order: -1; padding: 16px 14px; }
  .brief-controls { gap: 9px; padding: 8px 9px; }
  .brief-tabs { flex: 1 1 100%; justify-content: stretch; }
  .brief-tabs button { flex: 1; padding: 0 8px; }
  .brief-stats { flex: 1 1 100%; }
  .brief-stats button { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
  .brief-provenance { grid-template-columns: 1fr auto; }.brief-provenance span { grid-column: 1 / -1; }
  .counsel-dock { right: 14px; bottom: 14px; left: 14px; justify-items: end; }
  .counsel-launcher-label { display: none; }
  .counsel-launcher { min-height: 52px; padding: 0 11px; }
  .counsel-panel { width: 100%; max-height: calc(100vh - 108px); }
  .proposal-facets { grid-template-columns: 1fr; gap: 5px; }.proposal-facets dd + dt { margin-top: 7px; }
}

#city-content { height: 100%; }
#stage { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }
.graph-stage {
  position: fixed; inset: 0; z-index: 1;
  background: #050a14;
}
.graph-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.graph-canvas:active { cursor: grabbing; }
.graph-stage[hidden] { display: none; }
body.view-graph #stage { visibility: hidden; }
body.view-graph .labels { display: none; }
body.view-graph #nav-modes { display: none; }
body.view-graph .dock [data-layer="peds"],
body.view-graph .dock [data-layer="streets"],
body.view-graph .dock [data-layer="labels"],
body.view-graph .dock [data-layer="orbit"],
body.view-graph .dock-slider { display: none; }
.dock-graph { display: none; }
body.view-graph .dock-graph { display: flex; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line); }

/* ---------- OKF document view ---------- */
.okf-stage {
  position: fixed; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  padding: 74px 18px 18px 356px;
  background: radial-gradient(ellipse at 18% 0%, #0a1424 0%, #050a14 64%);
  font-size: 13.5px;
}
.okf-stage[hidden] { display: none; }
body.view-okf #stage { visibility: hidden; }
body.view-okf .labels,
body.view-okf .map-navigation,
body.view-okf .dock,
body.view-okf #inspector { display: none; }

.okf-index, .okf-doc {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.okf-index::-webkit-scrollbar, .okf-doc::-webkit-scrollbar { width: 6px; }
.okf-index::-webkit-scrollbar-thumb, .okf-doc::-webkit-scrollbar-thumb { background: rgba(140, 175, 255, .22); border-radius: 3px; }

/* ---------- Review view ---------- */
/* Its own scroll container, unlike standalone review mode where <body> is the element that moves.
   The stage carries the shell's surface for both of its contents — the queue and an open request —
   because a reviewer moving between them has not changed application. */
.review-stage {
  position: fixed; inset: 0; z-index: 1;
  top: 66px;
  /* The shell's topbar is fixed above, so the sticky bar inside starts at the stage's own top. */
  --review-topbar-h: 44px;
  min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  color: var(--ink); font-family: var(--sans); font-size: 13.5px;
  background: radial-gradient(ellipse at 18% 0%, #0a1424 0%, #050a14 64%);
}
.review-stage[hidden] { display: none; }
body.view-review #stage { visibility: hidden; }
body.view-review #city-content,
body.view-review .labels,
body.view-review .map-navigation,
body.view-review .dock,
body.view-review .panel-left,
body.view-review #inspector { display: none; }

/* The badge is a load reading, so it is sized like a notification rather than set as text, and it
   floats out of flow: in flow, going 9 → 10 → 99+ would widen every equal-width track beside it.
   Colour never carries it alone — `showReview` writes the same thing into the accessible name. */
.view-switch [data-view-mode="review"] { position: relative; overflow: visible; }
.view-switch [data-view-mode="review"] b {
  position: absolute; top: -6px; right: -7px;
  display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; font: 700 9px var(--mono); color: #04060c;
  background: var(--muted); box-shadow: 0 0 0 2px rgba(8, 13, 26, .95);
}
.view-switch [data-view-mode="review"] b:empty { display: none; }
.view-switch [data-view-mode="review"] b[data-load="clear"] { background: #5ce0a0; }
.view-switch [data-view-mode="review"] b[data-load="watch"] { background: var(--gateway); }
.view-switch [data-view-mode="review"] b[data-load="backed-up"] { background: var(--health); color: #14040a; }

/* ---------- Review queue ---------- */
/* One frame for both levels. The queue and an open request are the same two panes — an index of
   what is waiting on the left, one thing at a time on the right — so selecting a row changes what
   the right pane holds and nothing else. `.queue-chrome` marks the scroll owner, not a theme. */
.review-stage.queue-chrome {
  overflow: hidden;
}
.queue-shell {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr);
  gap: 16px; padding: 12px 18px 18px;
}
.queue-shell.solo, .queue-shell.rail-closed { grid-template-columns: minmax(0, 1fr); }
.queue-shell.rail-closed .queue-index { display: none; }
.queue-index, .queue-doc {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.queue-index::-webkit-scrollbar, .queue-doc::-webkit-scrollbar { width: 6px; }
.queue-index::-webkit-scrollbar-thumb, .queue-doc::-webkit-scrollbar-thumb { background: rgba(140, 175, 255, .22); border-radius: 3px; }

/* the filter index */
.queue-index { padding: 12px; }
.queue-index-head {
  position: sticky; top: -12px; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: -12px -12px 10px; padding: 14px 12px 10px;
  background: var(--glass-strong); border-bottom: 1px solid var(--line);
}
.queue-root { font: 12px var(--mono); color: var(--accent); }
.queue-index-head > span:last-child { font: 9.5px var(--mono); color: var(--dim); letter-spacing: .06em; }
.queue-search input {
  width: 100%; padding: 7px 10px; margin-bottom: 10px;
  color: var(--ink); font: 12px var(--sans);
  background: rgba(3, 6, 14, .55); border: 1px solid var(--line); border-radius: 8px;
}
.queue-search input::placeholder { color: var(--dim); }
.queue-search input:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* One idiom for every control in the rail: a labelled row of pills carrying their own counts. */
.queue-group { display: grid; gap: 5px; margin-bottom: 12px; }
.queue-group > small {
  font: 600 9.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.queue-group > div { display: flex; flex-wrap: wrap; gap: 4px; }
.queue-group > p { margin: 1px 0 0; color: var(--dim); font-size: 10.5px; line-height: 1.45; }
.queue-group button {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 9px; cursor: pointer; color: var(--muted);
  font: 11px var(--sans); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
}
.queue-group button:hover { color: var(--ink); background: rgba(140, 175, 255, .08); }
.queue-group button.on {
  color: var(--ink); background: rgba(88, 200, 255, .16); border-color: rgba(88, 200, 255, .38);
}
.queue-group button b { font: 9.5px var(--mono); font-weight: 400; color: var(--dim); }
.queue-group button.on b { color: var(--accent); }
.queue-group button i { font-style: normal; opacity: .6; }
.queue-group.single span { font: 12px var(--mono); color: var(--ink); }

.queue-clear {
  width: 100%; margin-top: 10px; padding: 6px 10px; cursor: pointer;
  color: var(--muted); font: 11px var(--sans); background: transparent;
  border: 1px solid var(--line); border-radius: 8px;
}
.queue-clear:hover:not(:disabled) { color: var(--ink); border-color: rgba(255, 107, 139, .45); }
.queue-clear:disabled { cursor: default; color: var(--dim); opacity: .55; }
.queue-index-note { margin: 12px 0 0; color: var(--dim); font-size: 10.5px; line-height: 1.5; }
.queue-index-note .agent-tag { margin-right: 6px; }

/* the queue itself */
.queue-doc { padding: 22px 26px 48px; }
.queue-doc > * { max-width: 1080px; }
.queue-doc:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }
.queue-doc h2 { margin: 10px 0 0; font-size: 21px; font-weight: 620; letter-spacing: -.01em; }
.queue-lede { margin: 10px 0 18px; max-width: 74ch; color: var(--muted); line-height: 1.62; font-size: 12.5px; }
.queue-alert {
  margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--health); border-radius: 4px;
  background: rgba(255, 107, 139, .1); color: #ffc2ce; font-size: 12px;
}

.queue-modes {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 18px 0 12px; padding-top: 16px; border-top: 1px solid var(--line);
}
.queue-modes > small {
  margin-right: 4px; color: var(--muted);
  font: 600 9.5px var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.queue-modes button {
  padding: 3px 10px; cursor: pointer; color: var(--muted);
  font: 11px var(--sans); background: transparent; border: 1px solid var(--line); border-radius: 999px;
}
.queue-modes button:hover { color: var(--ink); }
.queue-modes button.on { color: var(--ink); background: rgba(88, 200, 255, .16); border-color: rgba(88, 200, 255, .38); }
.queue-count { margin-left: auto; font: 9.5px var(--mono); color: var(--dim); }

.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.queue-list li {
  border: 1px solid var(--line); border-radius: 10px; background: rgba(3, 6, 14, .38); overflow: hidden;
}
.queue-list li:hover { border-color: rgba(88, 200, 255, .34); background: rgba(88, 200, 255, .05); }
.queue-list a {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 13px 15px; text-decoration: none; color: inherit;
}
.queue-age { display: grid; gap: 1px; color: var(--muted); }
.queue-age b { font-size: 15px; font-weight: 600; }
.queue-age small { font: 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.queue-age.stale { color: var(--health); }
.queue-body { min-width: 0; display: grid; gap: 3px; }
.queue-body strong { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.queue-summary {
  color: var(--muted); font-size: 12px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.queue-body small { font: 10.5px var(--mono); color: var(--dim); }
.queue-blocked { font: 11px var(--sans); font-style: normal; color: var(--gateway); }
.queue-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 260px; }
.queue-tags b {
  padding: 2px 8px; border-radius: 999px; font: 10px var(--mono); font-weight: 400;
  color: var(--muted); background: rgba(140, 175, 255, .1);
}
.queue-flags, .queue-dupe { color: #ffb9c6 !important; background: rgba(255, 107, 139, .14) !important; }
.queue-city { color: #a9d8ff !important; background: rgba(88, 200, 255, .13) !important; }
.queue-score { color: #9ff2c4 !important; background: rgba(80, 220, 160, .12) !important; }
.queue-row-actions {
  display: flex; align-items: center; gap: 10px;
  padding: 0 15px 11px 91px; margin-top: -4px;
}
.queue-counsel {
  padding: 3px 10px; cursor: pointer; color: #cbb2ff;
  font: 11px var(--sans); background: rgba(112, 72, 190, .16);
  border: 1px solid rgba(140, 110, 220, .38); border-radius: 999px;
}
.queue-counsel:hover { color: #fff; background: rgba(112, 72, 190, .34); }
.queue-empty { padding: 26px 4px; color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 62ch; }
.queue-provenance {
  margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 11px; line-height: 1.7; max-width: 78ch;
}
.queue-provenance b { color: var(--muted); font-weight: 600; }
.queue-provenance .agent-tag { margin: 0 4px 0 2px; vertical-align: baseline; }
.queue-error { padding: 48px 8px; max-width: 60ch; margin: 0 auto; }
.queue-error h2 { margin: 0 0 8px; font-size: 20px; }
.queue-error p { color: var(--muted); }
.queue-error button, .queue-error .review-sign-in {
  margin-top: 12px; padding: 7px 14px; cursor: pointer; color: var(--ink);
  font: 12px var(--sans); text-decoration: none;
  background: rgba(88, 200, 255, .16); border: 1px solid rgba(88, 200, 255, .38); border-radius: 8px;
}
.queue-chrome .skel { background: rgba(140, 175, 255, .1); }
.queue-chrome .skel-block { border-bottom-color: var(--line); }
.queue-chrome .skel-note { color: var(--dim); }

/* ---------- An open request, in the same frame ---------- */
/* The right pane becomes the document. It is its own scroll container, so the sticky control bar
   anchors to the pane rather than to the shell topbar above it. */
.queue-doc.request-doc { padding: 14px 30px 64px; }
.queue-doc.request-doc > * { max-width: 1180px; }
.queue-doc .brief-controls { top: 0; margin-top: 14px; }
.queue-doc .review-read [id^="part-"], .queue-doc .review-read .note { scroll-margin-top: 78px; }
.queue-doc .review-request { grid-template-columns: minmax(0, 1fr) 190px; padding-top: 4px; }

/* The breadcrumb is the only chrome an open request adds, and it carries both moves it needs:
   back to the queue it came from, and out to the building it will become. */
.queue-path { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 10.5px var(--mono); color: var(--dim); letter-spacing: .04em; }
.queue-path b { color: var(--accent); font-weight: 400; }
.queue-path a { color: var(--muted); text-decoration: none; }
.queue-path a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.queue-path code { color: var(--dim); opacity: .75; }
.path-toggle, .path-action {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; cursor: pointer;
  color: var(--muted); font: 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
}
.path-toggle:hover, .path-action:hover { color: var(--ink); background: rgba(140, 175, 255, .1); }
.path-toggle[aria-expanded="false"] { color: var(--dim); }
.path-toggle i { font-style: normal; font-size: 11px; line-height: 1; }
.path-action { margin-left: auto; }

/* the queue carried into the rail beside an open request */
.rail-queue { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rail-queue > small {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--muted); font: 600 9.5px var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.rail-queue > small b { color: var(--dim); font: 9.5px var(--mono); font-weight: 400; letter-spacing: 0; }
.rail-queue nav { display: grid; gap: 4px; }
.rail-queue a {
  display: grid; gap: 2px; padding: 7px 9px; text-decoration: none; color: inherit;
  border: 1px solid transparent; border-left: 2px solid var(--line); border-radius: 0 6px 6px 0;
  background: rgba(3, 6, 14, .34);
}
.rail-queue a:hover { border-color: rgba(88, 200, 255, .3); border-left-color: var(--accent); background: rgba(88, 200, 255, .06); }
.rail-queue a.here { border-left-color: var(--gateway); background: rgba(255, 201, 77, .1); }
.rail-queue strong {
  color: var(--ink); font: 600 11.5px/1.35 var(--sans);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rail-queue a.here strong { color: var(--gateway); }
.rail-queue small { color: var(--dim); font: 8.5px var(--mono); }
.rail-queue-empty { margin: 10px 0 0; color: var(--dim); font-size: 11px; line-height: 1.5; }

/* A default filter has to be visible or a narrowed queue reads as a queue that lost requests. */
.queue-default {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 12px; padding: 8px 12px;
  border-left: 3px solid var(--gateway); border-radius: 0 6px 6px 0;
  background: rgba(255, 201, 77, .09); color: var(--muted); font-size: 12px;
}
.queue-default b { color: var(--ink); }
.queue-default button {
  padding: 3px 10px; cursor: pointer; color: var(--gateway); font: 11px var(--sans);
  background: transparent; border: 1px solid rgba(255, 201, 77, .4); border-radius: 999px;
}
.queue-default button:hover { background: rgba(255, 201, 77, .14); }

/* what the gate recorded, in the reading column */
.gate-summary, .relationships { padding: 20px 0; border-bottom: 1px solid var(--line); }
.gate-summary > header, .relationships > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.gate-summary header span, .relationships header span { color: var(--muted); font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.gate-summary header b, .relationships header b { color: var(--dim); font: 10px var(--mono); }
.gate-facts { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--line); overflow: hidden; }
.gate-fact { flex: 1 1 120px; display: grid; gap: 4px; padding: 9px 12px; background: rgba(3, 6, 14, .6); }
.gate-fact b { color: var(--ink); font: 620 16px/1.15 var(--sans); overflow-wrap: anywhere; }
.gate-fact small { color: var(--dim); font: 8px/1.25 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.gate-fact.warn b { color: var(--health); }

/* ---------- What a request sits next to, drawn live ---------- */
/* The stage is a fixed band rather than an aspect-ratio box: a force layout fills what it is
   given, and a figure that grew with the reading column pushed the list off the screen. */
.rel-stage {
  position: relative; height: 380px; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(28, 52, 96, .38) 0%, rgba(4, 6, 12, 0) 68%),
    rgba(3, 6, 14, .42);
  overflow: hidden; touch-action: none;
}
.rel-graph { display: block; width: 100%; height: 100%; cursor: grab; }
.rel-graph:active { cursor: grabbing; }
/* Both float over the canvas and neither takes the pointer: the whole band is the drawing. */
.rel-legend, .rel-hint { position: absolute; z-index: 1; pointer-events: none; }
.rel-legend { top: 9px; left: 11px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rel-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--dim); font: 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.rel-legend i { width: 7px; height: 7px; border-radius: 50%; background: #8cafff; }
.rel-legend b { color: var(--muted); font-weight: 700; }
.rel-legend .dupe i { background: var(--health); }
.rel-legend .neighbour i { background: #6f86b0; }
.rel-legend .person i { background: #cbb2ff; }
.rel-legend .subject i { background: var(--gateway); }
.rel-hint { right: 11px; bottom: 9px; margin: 0; color: var(--dim); font: 9px var(--mono); letter-spacing: .05em; opacity: .8; }

/* The stage above is a fixed band, but the list under it runs to as many cards as the request has
   neighbours — enough to push the rest of the review off screen and make the reader bounce between
   the drawing and the prose. Confined to its own scroll band so the graph, the list and whatever
   follows stay reachable together. `block: 'nearest'` in mountRelationships now scrolls this
   container rather than the page, so pointing at a node in the graph still reveals its row. */
.rel-list {
  list-style: none; margin: 0; padding: 0 4px 0 0;
  display: grid; gap: 6px; align-content: start;
  max-height: 380px; overflow-y: auto; overscroll-behavior: contain; scroll-padding: 4px;
}
.rel-list::-webkit-scrollbar { width: 6px; }
.rel-list::-webkit-scrollbar-thumb { background: rgba(140, 175, 255, .22); border-radius: 3px; }
.rel-list li { border: 1px solid var(--line); border-left: 2px solid rgba(140, 175, 255, .5); border-radius: 0 8px 8px 0; background: rgba(3, 6, 14, .34); }
.rel-list li.dupe { border-left-color: var(--health); }
.rel-list li.person { border-left-color: #a082eb; }
.rel-list li.neighbour { border-left-color: rgba(111, 134, 176, .6); }
/* The drawing's answer to "which one is that": pointed at from the canvas, marked in the list. */
.rel-list li.on { border-color: rgba(88, 200, 255, .5); background: rgba(88, 200, 255, .08); }
.rel-list a, .rel-list > li > div { display: grid; gap: 3px; padding: 10px 13px; color: inherit; text-decoration: none; }
.rel-list a:hover { background: rgba(88, 200, 255, .06); }
.rel-tag { justify-self: start; padding: 1px 8px; border-radius: 999px; font: 9px var(--mono); font-weight: 400; color: var(--muted); background: rgba(140, 175, 255, .12); }
.rel-tag.dupe { color: #ffb9c6; background: rgba(255, 107, 139, .14); }
.rel-tag.person { color: #cbb2ff; background: rgba(112, 72, 190, .18); }
.rel-tag.neighbour { color: #a9b8d4; background: rgba(111, 134, 176, .14); }
.rel-list strong { color: var(--ink); font: 600 12.5px/1.35 var(--sans); overflow-wrap: anywhere; }
.rel-list p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.rel-list small { color: var(--dim); font: 9px var(--mono); }
.rel-provenance { margin: 10px 0 0; color: var(--dim); font-size: 10.5px; line-height: 1.6; }
.relationships > .empty { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6; max-width: 68ch; }

/* ---------- Signed-in resident (shared) ---------- */
.resident {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(3, 6, 14, .38);
}
.resident-mark {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  font-style: normal; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  background: rgba(88, 200, 255, .18); color: #cdeaff;
}
.resident-who { min-width: 0; display: grid; gap: 1px; }
.resident-who strong { font-size: 14px; font-weight: 600; }
.resident-account, .resident-seat { font-size: 12px; opacity: .62; }
.resident-role { font-size: 12px; text-align: right; opacity: .8; }
.resident-role small { display: block; font-size: 11px; opacity: .7; }
.resident-role .unset { opacity: .6; font-style: italic; }
.resident-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; opacity: .7; }
.resident.compact .resident-mark { width: 30px; height: 30px; font-size: 11px; }

@media (max-width: 900px) {
  /* The index becomes a band above the queue rather than a column beside it. */
  .queue-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: 10px 12px 12px; }
  .queue-shell.solo, .queue-shell.rail-closed { grid-template-rows: minmax(0, 1fr); }
  .queue-index { max-height: 42vh; }
  .queue-doc { padding: 18px 14px 40px; }
  .queue-doc.request-doc { padding: 12px 14px 48px; }
  .queue-list a { grid-template-columns: 52px minmax(0, 1fr); }
  .queue-tags { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .queue-row-actions { padding-left: 15px; }
  .resident { grid-template-columns: auto minmax(0, 1fr); }
  .resident-role { grid-column: 2; text-align: left; }
  /* The author row stacks: the action must not be squeezed against a wrapping upn. */
  .submitter { grid-template-columns: auto minmax(0, 1fr); }
  .submitter-state { grid-column: 2; justify-items: start; text-align: left; }
  .submitter button { grid-column: 1 / -1; }
  .gate-fact { flex-basis: 100px; }
}
.okf-doc { padding: 26px 34px 60px; }
.okf-doc > * { max-width: 960px; }
.okf-doc:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }

/* index — the index.md equivalent */
.okf-index { padding: 12px; }
.okf-index-head {
  position: sticky; top: -12px; z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: -12px -12px 8px; padding: 14px 12px 10px;
  background: var(--glass-strong); border-bottom: 1px solid var(--line);
}
.okf-index-head span { font: 9.5px var(--mono); color: var(--dim); letter-spacing: .06em; }
.okf-root { border: 0; background: none; padding: 0; cursor: pointer; font: 12px var(--mono); color: var(--accent); }
.okf-index.okf-index-stale .okf-index-head { border-bottom-color: rgba(255, 201, 77, .5); }

.okf-dir > summary, .okf-subdir > summary {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; border-radius: 6px; cursor: pointer; list-style: none;
}
.okf-dir > summary::-webkit-details-marker, .okf-subdir > summary::-webkit-details-marker { display: none; }
.okf-dir > summary::before, .okf-subdir > summary::before { content: '▸'; font-size: 9px; color: var(--dim); transition: transform .12s; }
.okf-dir[open] > summary::before, .okf-subdir[open] > summary::before { transform: rotate(90deg); }
.okf-dir > summary { color: var(--dir-color, var(--ink)); font: 600 11.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.okf-subdir { margin-left: 10px; }
.okf-subdir > summary { color: var(--muted); font: 11px var(--sans); }
.okf-dir > summary b, .okf-subdir > summary b { margin-left: auto; font: 9.5px var(--mono); color: var(--dim); }
.okf-dir > summary:hover, .okf-subdir > summary:hover { background: rgba(140, 175, 255, .08); }
.okf-subdir ul { margin: 0 0 6px; padding: 0 0 0 12px; list-style: none; }
.okf-subdir li button {
  display: grid; grid-template-columns: 6px minmax(0, 1fr); align-items: baseline; gap: 8px;
  width: 100%; padding: 5px 6px; border: 0; border-radius: 5px;
  background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.okf-subdir li button i { width: 6px; height: 6px; border-radius: 50%; }
.okf-subdir li button em { grid-column: 2; display: block; font: 9.5px var(--mono); font-style: normal; color: var(--dim); }
.okf-subdir li button:hover { color: var(--ink); background: rgba(140, 175, 255, .08); }
.okf-subdir li button.on { color: var(--ink); background: rgba(88, 200, 255, .14); box-shadow: inset 0 0 0 1px rgba(88, 200, 255, .3); }
.okf-empty { padding: 18px 8px; color: var(--dim); font-size: 12px; }

/* document */
.okf-path { font: 10.5px var(--mono); color: var(--dim); letter-spacing: .04em; }
.okf-path button { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.okf-doc h2 { margin: 10px 0 0; font-size: 21px; font-weight: 620; letter-spacing: -.01em; max-width: 62ch; }
.okf-doc h3 { margin: 0 0 10px; font: 600 10.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.okf-doc h3 small { margin-left: 8px; font: 9.5px var(--mono); letter-spacing: 0; text-transform: none; color: var(--dim); }
.okf-doc h4, .okf-doc h5 { margin: 20px 0 6px; font-size: 13px; font-weight: 620; color: var(--ink); }
.okf-lede { margin: 10px 0 22px; max-width: 68ch; color: var(--muted); line-height: 1.62; }
.okf-dim { color: var(--dim); font-size: 12px; }
.okf-note { margin: -4px 0 10px; }

.okf-banner {
  margin: 14px 0 0; padding: 10px 12px; max-width: 74ch;
  border: 1px solid rgba(255, 201, 77, .38); border-left-width: 3px; border-radius: 8px;
  background: rgba(255, 201, 77, .08); color: #ffd98a; font-size: 12px; line-height: 1.55;
}
.okf-banner code { font: 11px var(--mono); }

.okf-profile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: 0 0 16px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(140, 175, 255, .04);
}
.okf-profile-label { font: 10px var(--mono); color: var(--accent); letter-spacing: .06em; margin-right: 3px; }
.okf-profile-note { margin-left: auto; font: 9.5px var(--mono); color: var(--dim); }
.okf-pill { padding: 1.5px 7px; border-radius: 999px; font: 10px var(--mono); cursor: help; }
.okf-pill.on { color: #9ff2c4; background: rgba(80, 220, 160, .13); }
.okf-pill.off { color: var(--dim); background: rgba(140, 175, 255, .08); text-decoration: line-through; text-decoration-color: rgba(255, 107, 139, .6); }
.okf-pill.ext { color: var(--gateway); background: rgba(255, 201, 77, .12); }

.okf-doc-modes { display: flex; gap: 6px; margin: 0 0 4px; }
.okf-doc-modes button {
  padding: 4px 11px; border: 1px solid var(--line); border-radius: 6px;
  background: rgba(8, 13, 26, .6); color: var(--dim); font: 10px var(--mono); cursor: pointer;
}
.okf-doc-modes button.on { color: var(--ink); background: rgba(88, 200, 255, .16); border-color: rgba(88, 200, 255, .38); }
.okf-doc-modes button:hover { color: var(--ink); }
.okf-doc-modes .okf-copy { margin-left: auto; }

.okf-source pre { margin: 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: rgba(3, 6, 14, .78); }
.okf-source code { font: 11.5px/1.62 var(--mono); color: #c8d8f5; white-space: pre; }

.okf-section { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.okf-body { max-width: 74ch; line-height: 1.68; }
.okf-body p { margin: 0 0 12px; }
.okf-body ul, .okf-body ol { margin: 0 0 12px; padding-left: 20px; }
.okf-body li { margin-bottom: 4px; }
.okf-body blockquote { margin: 0 0 12px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); }
.okf-body pre { margin: 0 0 14px; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: rgba(3, 6, 14, .7); }
.okf-body code { font: 11.5px var(--mono); color: #a9d8ff; }
.okf-body table { width: 100%; margin: 0 0 14px; border-collapse: collapse; font-size: 12px; }
.okf-body th, .okf-body td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; }
.okf-body th { color: var(--muted); font-weight: 600; background: rgba(140, 175, 255, .05); }
.okf-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(88, 200, 255, .35); }
.okf-link-dead { color: var(--muted); border-bottom: 1px dotted var(--dim); }
.okf-fnref a { color: var(--gateway); text-decoration: none; font: 9px var(--mono); }
.okf-footnotes { margin: 18px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.okf-footnotes b { color: var(--gateway); font: 10px var(--mono); margin-right: 6px; }

.okf-fm { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 12.5px; }
.okf-fm dt { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.okf-fm dd { margin: 0; color: var(--ink); min-width: 0; }
.okf-fm dd small { color: var(--dim); font-size: 10.5px; }
.okf-fm dd code { font: 11px var(--mono); color: #a9d8ff; }
.okf-fm-group {
  grid-column: 1 / -1; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line);
  color: var(--muted) !important; font: 600 9.5px var(--sans) !important; letter-spacing: .16em; text-transform: uppercase;
}
.okf-fm-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.okf-absent { color: var(--dim); font-style: italic; }
.okf-absent em { display: block; font-size: 10.5px; font-style: normal; opacity: .75; }
.okf-warn { color: #ffd98a; font: 10px var(--mono); }
.okf-tier { padding: 1px 7px; border-radius: 999px; font: 10px var(--mono); }
.okf-tier-unverified { color: var(--muted); background: rgba(140, 175, 255, .12); }
.okf-tier-machine { color: #a9d8ff; background: rgba(88, 200, 255, .14); }
.okf-tier-human { color: #9ff2c4; background: rgba(80, 220, 160, .14); }
.okf-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.okf-tags span { padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 10.5px; color: var(--muted); }
.okf-sources { margin: 0; padding-left: 16px; }
.okf-sources b { color: var(--muted); font: 10px var(--mono); margin-right: 6px; }

.okf-rel { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.okf-rel li { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: baseline; gap: 10px; }
.okf-rel em { font: 9.5px var(--mono); font-style: normal; letter-spacing: .05em; }
.okf-rel button { border: 0; background: none; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.okf-rel button:hover { color: var(--ink); }

.okf-root-section { margin-top: 24px; }
.okf-root-section h3 { color: var(--dir-color, var(--ink)); }
.okf-root-list { margin: 8px 0 0; padding: 0; list-style: none; max-width: 78ch; }
.okf-root-list li { margin-bottom: 6px; line-height: 1.55; }
.okf-root-list button { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; text-align: left; cursor: pointer; }
.okf-root-list span { color: var(--muted); font-size: 12.5px; }
.okf-provenance { margin-top: 30px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--dim); font-size: 11.5px; max-width: 74ch; }

@media (max-width: 1180px) {
  .okf-stage { grid-template-columns: minmax(0, 1fr); padding: 74px 14px 14px; }
  .okf-index { max-height: 32vh; }
}

.hud {
  position: fixed;
  z-index: 10;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* ---------- boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 45%, #0b1428 0%, #04060c 70%);
  transition: opacity .7s ease, visibility .7s;
}
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { text-align: center; }
.boot-mark {
  font-family: var(--mono);
  font-size: 13px; letter-spacing: .62em; color: var(--accent);
  text-shadow: 0 0 24px rgba(88, 200, 255, .55);
}
.boot-bar {
  margin: 22px auto 12px; width: 260px; height: 2px;
  background: rgba(255, 255, 255, .08); overflow: hidden; border-radius: 2px;
}
.boot-bar i {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: sweep 1.1s ease-in-out infinite;
}
.boot.failed .boot-bar i { animation: none; width: 100%; background: #ff6b8b; }
@keyframes sweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.boot-note {
  max-width: min(620px, calc(100vw - 32px));
  font-size: 11px; line-height: 1.6; color: var(--dim);
  letter-spacing: .16em; text-transform: uppercase; overflow-wrap: anywhere;
}
.boot.failed .boot-note { color: #ff9aaf; letter-spacing: .08em; text-transform: none; }
.boot-actions { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.boot-actions[hidden] { display: none; }
.boot-actions button {
  min-height: 34px; padding: 0 13px; border: 1px solid var(--line); border-radius: 6px;
  background: rgba(8, 13, 26, .82); color: var(--muted); font: 10px var(--mono); cursor: pointer;
}
.boot-actions button:hover:not(:disabled) { color: var(--ink); border-color: rgba(88, 200, 255, .5); }
.boot-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.boot-actions button:disabled { opacity: .42; cursor: default; }
.boot-actions #boot-demo { color: #ffd98a; border-color: rgba(255, 201, 77, .4); }

/* ---------- topbar ---------- */
/* Above every other HUD surface so the overflow menu is never cut by a panel or the nav pad. */
.topbar {
  top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 22px;
  background: linear-gradient(180deg, rgba(4, 7, 15, .92), rgba(4, 7, 15, 0));
  pointer-events: none;
}
.topbar-right { display: flex; align-items: center; gap: 18px; min-width: 0; }
/* Auto columns, not a fixed three: Review appears only once the Gateway confirms a seat, and a
   fixed track count either wraps the fourth tab onto its own row or holds an empty cell open. */
.view-switch, .source-switch {
  pointer-events: auto; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(50px, 1fr); gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(8, 13, 26, .72);
}
.view-switch button, .source-switch button {
  height: 26px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--dim); font: 10px var(--mono); cursor: pointer;
}
.view-switch button.on, .source-switch button.on { color: var(--ink); background: rgba(88, 200, 255, .18); box-shadow: inset 0 0 0 1px rgba(88, 200, 255, .35); }
.source-switch button[data-source-mode="live"].on { color: #9ff2c4; background: rgba(80, 220, 160, .12); box-shadow: inset 0 0 0 1px rgba(80, 220, 160, .4); }
.view-switch button:focus-visible, .source-switch button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.topbar-action {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px;
  background: rgba(8, 13, 26, .72); color: var(--muted);
  font: 10.5px var(--sans); cursor: pointer; white-space: nowrap;
}
.topbar-action:hover, .topbar-action[aria-expanded="true"], .topbar-action:focus-visible {
  color: var(--ink); border-color: rgba(88, 200, 255, .48);
  background: rgba(88, 200, 255, .13); outline: none;
}
.help-icon {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 1px solid currentColor; border-radius: 50%; font: 11px var(--mono);
}
.contribute-icon {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 1px solid currentColor; border-radius: 4px; font: 15px/1 var(--mono);
}
.debug-icon { color: var(--accent); font: 10px var(--mono); }
.topbar-action:disabled { opacity: .4; cursor: not-allowed; }
.topbar-action.icon-only { width: 32px; padding: 0; gap: 0; justify-content: center; font-size: 15px; }
.contribute-trigger { color: #9ff2c4; border-color: rgba(108, 255, 201, .28); }

/* The controls a resident sets once live behind the overflow menu rather than in the rail. */
.hud-menu-anchor { position: relative; display: flex; pointer-events: auto; }
.hud-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  display: grid; gap: 3px; width: 236px; max-width: calc(100vw - 24px); padding: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--glass-strong); box-shadow: 0 22px 54px rgba(0, 0, 0, .62);
  animation: unfold .18s ease;
}
.hud-menu[hidden] { display: none; }
.hud-menu-item[hidden], .live-telemetry[hidden] { display: none; }
.live-telemetry { margin-bottom: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(88, 200, 255, .04); }
.live-telemetry p { margin: 4px 0; font: 10px/1.5 var(--sans); color: var(--muted); overflow-wrap: anywhere; }
#city-capture-receipt { color: var(--ink); font-weight: 600; }
.city-refresh-status { color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.city-refresh-status[data-state="error"], .live-telemetry .city-refresh-status[data-state="error"] { color: #ffc5b7; border-left: 2px solid #ffad62; padding-left: 8px; }
.node-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.node-usage dt { color: var(--muted); font-size: 10px; }
.node-usage dd { margin: 4px 0 0; color: var(--ink); font: 12px/1.4 var(--mono); overflow-wrap: anywhere; }
.hud-menu-label { margin: 2px 2px 6px; color: var(--dim); font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hud-menu .source-switch { width: 100%; }
.hud-menu-item {
  display: flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 8px; border: 0; border-radius: 7px;
  background: none; color: var(--muted); font: 11.5px var(--sans);
  text-align: left; cursor: pointer; transition: .16s;
}
.hud-menu .source-switch + .hud-menu-item { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; }
.hud-menu-item:hover, .hud-menu-item:focus-visible { color: var(--ink); background: rgba(88, 200, 255, .13); outline: none; }
.hud-menu-item .help-icon, .hud-menu-item .debug-icon { flex: 0 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon {
  width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(88, 200, 255, .35));
}
.brand h1 { margin: 0; font-size: 15px; font-weight: 620; letter-spacing: .01em; }
.brand p { margin: 2px 0 0; font-size: 11px; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; }
.source-pill {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  font: 9px var(--mono); letter-spacing: .06em; text-transform: none; cursor: help;
}
.source-pill.live { max-width: 210px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.source-pill.live { color: #9ff2c4; border-color: rgba(80, 220, 160, .4); background: rgba(80, 220, 160, .12); }
.source-pill.warn { color: #ffd98a; border-color: rgba(255, 201, 77, .45); background: rgba(255, 201, 77, .12); }

.stats { display: flex; align-items: center; gap: 22px; min-width: 0; overflow: hidden; }
.stat {
  padding: 0; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit;
  text-align: right; white-space: nowrap;
}
/* The two counts that name a lifecycle are the filter, so they read as pressable. */
button.stat { padding: 3px 7px; cursor: pointer; transition: .16s; }
button.stat:hover, button.stat:focus-visible { background: rgba(88, 200, 255, .12); outline: none; }
button.stat:hover span, button.stat:focus-visible span { color: var(--muted); }
.stat b { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.stat span { font-size: 10px; color: var(--dim); letter-spacing: .13em; text-transform: uppercase; }

/* ---------- panels ---------- */
.panel {
  width: 320px;
  max-height: calc(100vh - 168px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px;
  background: linear-gradient(145deg, rgba(20, 30, 46, .96), rgba(9, 16, 28, .94));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(212, 230, 255, .055), 0 16px 40px rgba(0, 0, 0, .38);
  transition: opacity .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.panel.hud { backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel-left { left: 18px; top: 78px; width: 296px; }
/* Inherited visibility must change immediately when the inspector releases this rail for focus. */
#nav-panel :is(button, input) {
  transition-property: color, background-color, border-color, box-shadow, opacity;
}
.demo-explorer { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.demo-explorer[hidden], .demo-explorer [hidden] { display: none; }
.demo-explorer summary { cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 600; }
.demo-explorer summary span { color: var(--accent); font-size: 10px; margin-left: 5px; }
.demo-explorer fieldset { min-width: 0; padding: 12px 0 0; margin: 0; border: 0; }
.demo-explorer label { display: block; margin: 6px 0; color: var(--muted); font-size: 11px; }
.demo-explorer select { width: 100%; min-height: 36px; padding: 7px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #101c30; font: 12px var(--sans); }
.demo-explorer p { margin: 9px 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.demo-explorer .demo-disclaimer { font-size: 10.5px; }
.demo-explorer a { color: var(--accent); font-size: 11px; }
.demo-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.demo-actions button { min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(88, 200, 255, .12); color: var(--ink); font: 12px var(--sans); cursor: pointer; }
.demo-actions button:disabled { opacity: .45; cursor: default; }
.demo-explorer :is(summary, select, button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.demo-explorer #demo-status[data-state="error"] { color: #ffbcc9; }
.demo-loading { width: min(430px, calc(100vw - 32px)); padding: 32px; border: 1px solid rgba(88, 200, 255, .35); border-radius: 18px; color: var(--ink); background: #0b1424; box-shadow: 0 24px 80px #0009; text-align: center; }
.demo-loading[open] { animation: demo-loader-in .18s ease-out; }
.demo-loading::backdrop { background: rgba(3, 8, 18, .74); }
.demo-loading h2 { margin: 10px 0; font-size: 22px; font-weight: 600; }
.demo-loading p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.demo-loading .loading-eyebrow { color: var(--accent); font: 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.demo-loading #demo-loading-detail { min-height: 40px; color: var(--ink); }
.demo-loading .loading-note { margin: 20px 0; font-size: 11px; }
.demo-loading button { min-height: 36px; padding: 7px 24px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #16263d; font: 12px var(--sans); cursor: pointer; }
.demo-loading button:disabled { opacity: .45; cursor: wait; }
.demo-loading button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.loading-skyline { display: flex; align-items: end; justify-content: center; gap: 7px; height: 82px; margin: 0 auto 24px; padding: 0 14px 9px; border-bottom: 1px solid #58c8ff66; }
.loading-skyline i { width: 24px; height: 44px; border: 1px solid #7adcff; border-radius: 3px 3px 0 0; background: repeating-linear-gradient(0deg, transparent 0 7px, #88e0ff70 7px 9px), #24536d; transform-origin: bottom; animation: demo-building-rise 1.6s ease-in-out infinite; }
.loading-skyline i:nth-child(2) { height: 62px; animation-delay: -.25s; }
.loading-skyline i:nth-child(3) { height: 76px; animation-delay: -.5s; }
.loading-skyline i:nth-child(4) { height: 52px; animation-delay: -.75s; }
.loading-skyline i:nth-child(5) { height: 34px; animation-delay: -1s; }
.loading-steps { display: flex; gap: 8px; padding: 0; margin: 16px 0; list-style: none; counter-reset: loading-stage; }
.loading-steps li { flex: 1; padding-top: 9px; border-top: 2px solid #28384f; color: var(--muted); font: 10px var(--mono); }
.loading-steps li[aria-current], .loading-steps li.complete { color: var(--accent); border-color: var(--accent); }
.demo-reveal #stage { animation: demo-loader-in .3s ease-out; }
@keyframes demo-building-rise { 0%, 100% { transform: scaleY(.55); opacity: .45; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes demo-loader-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loading-skyline i, .demo-loading[open], .demo-reveal #stage { animation: none; }
}
.demo-mode .panel-left.collapsed:has(.demo-explorer[open]) { width: 320px; }
@media (max-width: 1180px) {
  .demo-mode.view-okf .panel-left { max-height: 40vh; }
  .demo-mode.view-okf .okf-stage { padding-top: calc(40vh + 94px); }
}
@media (max-width: 700px) {
  .demo-mode #nav-panel { max-height: 44dvh; }
}
.panel-right {
  right: 18px; top: 78px; width: clamp(360px, 28vw, 420px);
  height: min(760px, calc(100dvh - 158px)); max-height: calc(100dvh - 158px);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.panel-right[hidden] { display: none; }
.is-navigating #nav-panel, .is-navigating #inspector {
  opacity: .2;
  background: rgba(8, 13, 26, .18);
  border-color: rgba(140, 175, 255, .08);
  box-shadow: none;
  pointer-events: none;
}
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb { background: rgba(140, 175, 255, .22); border-radius: 3px; }

.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.panel-head h2 { flex: 1; }
.panel-head h2 { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.group { margin-top: 18px; }
.group:first-child { margin-top: 0; }
.group h3 {
  margin: 0 0 8px; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim);
}

/* Folding a group never hides state: the summary line keeps reporting the selection. */
.group-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.group-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px;
  padding: 4px 0; border: 0; border-radius: 5px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.group-toggle h3 { margin: 0; }
.group-toggle:hover h3 { color: var(--muted); }
.group-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.group-caret { flex: 0 0 auto; width: 11px; height: 11px; color: var(--dim); transition: transform .22s ease; }
.group.closed .group-caret { transform: rotate(-90deg); }
.group.closed .group-body { display: none; }
.group-summary {
  margin-left: auto; color: var(--dim); font: 9px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.group-clear {
  flex: 0 0 auto; min-width: 28px; min-height: 28px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--dim); font: 8.5px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: .16s;
}
.group-clear:hover:not(:disabled) { color: var(--ink); border-color: rgba(88, 200, 255, .5); }
.group-clear:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.group-clear:disabled { opacity: .34; cursor: default; }
.group-body { animation: unfold .22s ease; }

/* One line per axis, one row open at a time — nine facets stay reachable without a wall of chips. */
.axis-list { display: grid; }
.axis + .axis { border-top: 1px solid rgba(140, 175, 255, .09); }
.axis-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 2px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font: inherit; font-size: 11.5px;
  text-align: left; cursor: pointer;
}
.axis-head:hover { color: var(--ink); }
.axis-head:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.axis-caret {
  flex: 0 0 auto; width: 10px; height: 10px; color: var(--dim);
  transform: rotate(-90deg); transition: transform .22s ease;
}
.axis.open .axis-caret { transform: none; }
.axis-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.axis-summary { flex: 0 0 auto; color: var(--dim); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.axis.constrained .axis-label { color: var(--ink); }
.axis.constrained .axis-summary { color: var(--accent); }
.axis-body { padding: 0 0 12px; animation: unfold .22s ease; }
.axis-body[hidden] { display: none; }
.axis-actions { display: flex; gap: 5px; margin-bottom: 8px; }

/* Collapsed panels fold to their header — never off-screen, never in the way. */
.collapse {
  display: grid; place-items: center;
  background: none; border: 0; color: var(--dim); cursor: pointer;
  padding: 3px; border-radius: 6px; transition: .18s;
}
.collapse:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }
.collapse svg { width: 12px; height: 12px; transition: transform .22s ease; }

.panel.collapsed { width: auto; max-height: none; overflow: visible; padding: 12px 14px; }
.panel.collapsed .panel-body { display: none; }
.panel.collapsed .panel-head { margin-bottom: 0; }
.panel.collapsed .collapse svg { transform: rotate(-90deg); }

.panel-body { animation: unfold .22s ease; }
@keyframes unfold { from { opacity: 0; transform: translateY(-4px); } }

.ghost {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; cursor: pointer; transition: .18s;
}
.ghost:hover { color: var(--ink); border-color: var(--accent); box-shadow: 0 0 14px rgba(88, 200, 255, .25); }

.field { position: relative; }
.field input {
  width: 100%; padding: 10px 52px 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 13px; outline: none;
  transition: .18s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88, 200, 255, .12); }
.field input::placeholder { color: var(--dim); }
.field-count {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--dim);
}

.search-hits {
  margin-top: 8px; padding: 4px;
  max-height: 302px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 2px;
  background: rgba(9, 14, 27, .72);
  border: 1px solid rgba(88, 200, 255, .28);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  animation: unfold .16s ease;
}
.search-hits[hidden] { display: none; }
.search-hit {
  display: grid; gap: 1px; width: 100%; text-align: left;
  padding: 6px 9px; border: 1px solid transparent; border-radius: 8px;
  background: none; color: inherit; font: inherit; cursor: pointer; transition: .14s;
}
.search-hit:hover, .search-hit.on {
  background: rgba(88, 200, 255, .12); border-color: rgba(88, 200, 255, .32);
}
.search-hit:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.hit-title { font-size: 12.5px; font-weight: 550; line-height: 1.3; }
.hit-title mark { background: none; color: var(--accent); font-weight: 650; }
.hit-meta { font-size: 10px; color: var(--dim); font-family: var(--mono); }
.search-hit-note { margin: 4px 6px 3px; font-size: 10.5px; color: var(--dim); font-family: var(--mono); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  font-size: 11px; letter-spacing: .02em; color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  transition: .16s;
  user-select: none;
}
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip:hover { color: var(--ink); }
.chip.active { border-color: currentColor; background: color-mix(in srgb, currentColor 14%, transparent); }
.chip.off { opacity: .32; filter: grayscale(1); }
.chip b { font-family: var(--mono); font-size: 10px; opacity: .7; font-weight: 500; }

.skyline { display: flex; height: 6px; margin-top: 10px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.05); }
.skyline span { height: 100%; transition: flex-grow .4s ease; }

.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.result-open {
  display: block; width: 100%; color: inherit; font: inherit; text-align: left;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: rgba(255, 255, 255, .028);
  transition: .16s;
}
.result-open:hover { background: rgba(88, 200, 255, .1); border-color: rgba(88, 200, 255, .3); }
.result-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.result-title { display: block; margin: 0 0 3px; font-size: 12.5px; font-weight: 550; line-height: 1.35; }
.result-meta { display: block; font-size: 10.5px; color: var(--dim); font-family: var(--mono); }
.results .empty { color: var(--dim); font-size: 12px; padding: 8px 2px; cursor: default; background: none; }

/* ---------- inspector ---------- */
.insp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.panel-right .insp-top {
  flex: 0 0 auto; padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
  background: rgba(16, 25, 40, .98);
}
.insp-top > div:first-child { min-width: 0; }
.insp-kicker { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
/*
 * The subject's own name, and the panel's h2 — the heading the `detail-block` h3s sit under.
 * `.panel h2` is the small uppercase panel-header style, which this is not, so it is reset here at
 * matching specificity.
 */
.panel .insp-title, .insp-title {
  margin: 6px 0 8px; font-size: 17px; line-height: 1.28; font-weight: 620;
  letter-spacing: normal; text-transform: none; color: var(--ink);
}
.panel-right .insp-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: anywhere; margin-bottom: 0;
}
.insp-summary { margin: 0 0 14px; font-size: 13px; line-height: 1.65; color: #aebdd4; }
.insp-close {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  background: none; border: 1px solid var(--line); border-radius: 7px;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
}
.insp-close:hover { color: var(--ink); background: rgba(140, 175, 255, .1); }
.insp-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.insp-content {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 16px 18px 22px; overscroll-behavior: contain; scrollbar-gutter: stable;
  scroll-padding-top: 12px; overflow-wrap: anywhere;
  scrollbar-width: thin; scrollbar-color: rgba(140, 175, 255, .26) transparent;
}
.insp-workspace { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.insp-workspace > .insp-content { min-width: 0; }
.insp-outline, .insp-outline-toggle { display: none; }
.insp-content .kv { grid-template-columns: 96px minmax(0, 1fr); }
.insp-jumps {
  display: flex; flex: 0 0 auto; gap: 5px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); background: rgba(8, 15, 27, .75);
}
.insp-jumps button {
  min-height: 30px; padding: 5px 10px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--muted); font: 600 11px var(--sans); cursor: pointer;
}
.insp-jumps button:hover { color: var(--accent); border-color: var(--line); background: rgba(88, 200, 255, .07); }
.panel-right :is(button, a, summary, .insp-title):focus-visible, .insp-content [tabindex="-1"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 12%, transparent);
}

.kv { display: grid; grid-template-columns: 104px 1fr; gap: 7px 10px; margin: 14px 0; font-size: 12px; }
.kv dt { color: var(--dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding-top: 2px; }
.kv dd { margin: 0; color: var(--ink); }
.kv dd small { color: var(--muted); }

.meters { display: grid; gap: 9px; margin: 14px 0; }
.meter span { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.meter span b { font-family: var(--mono); color: var(--ink); font-weight: 600; letter-spacing: 0; }
.meter i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.meter i u { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #2b7fff, #58c8ff); }

.uri {
  display: block; width: 100%; text-align: left;
  font-family: var(--mono); font-size: 10.5px; color: var(--accent);
  background: rgba(88, 200, 255, .07); border: 1px solid rgba(88, 200, 255, .22);
  border-radius: 8px; padding: 8px 10px; cursor: pointer; word-break: break-all;
  text-decoration: none; transition: .16s;
}
.uri:hover { background: rgba(88, 200, 255, .16); }

/*
 * One dominant next step, then everything else as chips.
 *
 * The panel used to end in six same-weight buttons, each carrying a line of explanation, so the
 * decision a reviewer came to make looked exactly like "copy a URI".
 */
.actions { display: grid; gap: 7px; margin-top: 12px; }
.actions > h3 {
  margin: 8px 0 0; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim);
}
.action {
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 9px; color: var(--ink);
  background: rgba(255, 255, 255, .045); border: 1px solid var(--line);
  transition: .16s;
}
.action:hover { background: rgba(88, 200, 255, .13); border-color: rgba(88, 200, 255, .4); }
.action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.action small { display: block; color: var(--dim); font-size: 10.5px; margin-top: 2px; }
.action.primary { margin: 4px 0 2px; min-height: 44px; font-size: 13px; font-weight: 650; }
.action.primary:disabled { cursor: default; opacity: .55; }
/* Stands in for the primary action on a synthetic corpus, so it has to be as readable as the
   button it replaces — it is the answer to "why can I not do anything here", not a footnote. */
.mcp-note.insp-readonly {
  margin: 6px 0 2px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 9px;
  border-top: 1px dashed var(--line); color: var(--muted); font-size: 11.5px;
}
.action.improve {
  color: var(--ink); background: rgba(88, 200, 255, .13);
  border-color: rgba(88, 200, 255, .42);
}
.action.improve:hover { background: rgba(88, 200, 255, .22); border-color: rgba(88, 200, 255, .6); }
.action.improve small { color: var(--muted); font-weight: 500; }
.action.evaluator {
  color: #10231b; background: var(--gateway); border-color: #ffe39a;
  box-shadow: 0 0 0 1px rgba(255, 201, 77, .22), 0 10px 28px rgba(255, 201, 77, .2);
  font-weight: 750;
}
.action.evaluator:hover { color: #07100d; background: #ffe08a; border-color: #fff0bd; }
.action.evaluator small { color: #4d452c; font-weight: 500; }

.action-tray { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-action {
  font: inherit; font-size: 11.5px; min-height: 32px; padding: 6px 11px;
  color: var(--muted); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: .16s;
}
.chip-action:hover { color: var(--ink); background: rgba(88, 200, 255, .13); border-color: rgba(88, 200, 255, .4); }
.chip-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Reserves its line so a copy confirmation does not reflow the tray it sits under. */
.action-status { margin: 2px 0 0; min-height: 14px; font-size: 10.5px; color: var(--accent); }

.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tag {
  font-size: 10px; padding: 3px 8px; border-radius: 6px; color: var(--muted);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}

.edge-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.edge-list li { font-size: 11.5px; cursor: pointer; color: var(--muted); padding: 5px 7px; border-radius: 7px; }
.edge-list li:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.edge-list li em { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; margin-right: 6px; }
.insp-content .edge-list li { padding: 0; }
.edge-list button {
  width: 100%; padding: 8px; border: 0; border-radius: 7px; background: transparent;
  color: inherit; font: inherit; line-height: 1.5; text-align: left; cursor: pointer;
}
.edge-more {
  justify-self: start; margin-top: 8px; min-height: 32px; padding: 6px 10px;
  font: inherit; font-size: 11.5px; color: var(--accent); cursor: pointer;
  background: rgba(88, 200, 255, .07); border: 1px solid rgba(88, 200, 255, .24);
  border-radius: 7px; transition: .16s;
}
.edge-more:hover { background: rgba(88, 200, 255, .16); border-color: rgba(88, 200, 255, .45); }
.edge-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- inspector: the readable node ---------- */
/* Civic inspectors retain their side-panel width. Knowledge nodes opt into the reading workspace. */
.panel-right.panel-wide {
  width: min(600px, 46vw);
}
.panel-right.panel-wide .insp-summary,
.panel-right.panel-wide .section-body,
.panel-right.panel-wide .detail-note,
.panel-right.panel-wide .evidence-body p,
.panel-right.panel-wide .insp-decision p { max-width: 68ch; }
@media (max-width: 1100px) {
  .panel-right.panel-wide { width: min(520px, calc(100vw - 36px)); }
  body:is(.view-city, .view-graph):has(.panel-right.panel-wide:not([hidden])) #nav-panel { visibility: hidden; }
}

.insp-controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.insp-expand {
  display: grid; place-items: center; min-width: 44px; height: 32px;
  padding: 0 8px; border: 1px solid var(--line); border-radius: 7px;
  background: rgba(255, 255, 255, .04); color: var(--muted);
  font: 600 10.5px var(--sans); line-height: 1; cursor: pointer; transition: .16s;
}
.insp-expand:hover { color: var(--ink); border-color: rgba(88, 200, 255, .45); background: rgba(88, 200, 255, .13); }
.insp-expand:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.insp-expand[aria-pressed="true"] { color: var(--accent); border-color: rgba(88, 200, 255, .45); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/*
 * The glance strip: the four or five facts a reviewer opens the panel to check, above the fold.
 *
 * Labelled pairs rather than bare tokens with tooltips — a `title` on a non-focusable span is a
 * fact only a mouse can read, and "is this current" is not an optional fact.
 */
.insp-glance {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; padding: 0;
}
.insp-glance .glance {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 9px; border-radius: 8px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  border-left: 2px solid var(--glance-color, var(--line));
}
.insp-glance dt {
  margin: 0; font: 9px var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.insp-glance dd {
  margin: 0; font-size: 11.5px; line-height: 1.3; font-weight: 560;
  color: var(--glance-color, var(--ink));
}
.insp-glance .glance-quiet dd { color: var(--muted); font-weight: 500; }
.insp-glance .glance-warn { border-left-color: #ffb04d; background: rgba(255, 176, 77, .07); }
.insp-glance .glance-warn dd { color: #ffb04d; }

/*
 * The reviewer's branch. One banner instead of a second panel mode, because a pending node is the
 * only case where a visitor and a reviewer want different things first.
 */
.insp-decision {
  margin: 0 0 14px; padding: 11px 13px; border-radius: 10px;
  background: rgba(255, 201, 77, .09); border: 1px solid rgba(255, 201, 77, .32);
  border-left: 3px solid var(--gateway);
}
.insp-decision b { display: block; font-size: 12.5px; color: #ffd979; }
.insp-decision p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }

.badge-quiet { color: var(--dim); }

.detail-block { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.detail-block > h3, .detail-head h3 {
  margin: 0 0 10px; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim);
}
.detail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.detail-head h3 { margin-bottom: 10px; }
.detail-head span { font: 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.detail-note { margin: 10px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--dim); }
.detail-note code { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.kv-warn { color: #ffb04d; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.detail-fold > summary {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  color: var(--ink); font-size: 12.5px; font-weight: 560;
  cursor: pointer; list-style: none;
}
.detail-fold > summary::-webkit-details-marker { display: none; }
.detail-fold > summary:hover { color: var(--accent); }
.detail-fold > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.detail-fold > summary em {
  margin-left: auto; font-style: normal; font: 9.5px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.detail-caret { flex: 0 0 auto; width: 11px; height: 11px; color: var(--dim); transform: rotate(-90deg); transition: transform .2s ease; }
.detail-fold[open] > summary .detail-caret { transform: none; }

/* --- evidence and provenance --- */
.evidence-source { margin-top: 6px; border-top: 1px solid rgba(140, 175, 255, .1); }
.evidence-body { display: grid; gap: 5px; padding: 2px 0 4px; }
.evidence-body p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.evidence-body label { font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.evidence-body label + code { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); word-break: break-all; }
.address-uri {
  display: block; padding: 7px 9px; border-radius: 7px;
  font-family: var(--mono); font-size: 10.5px; color: var(--accent); word-break: break-all;
  background: rgba(88, 200, 255, .07); border: 1px solid rgba(88, 200, 255, .2);
}
.evidence-link {
  justify-self: start; margin-top: 4px; min-height: 32px; padding: 6px 10px;
  font: inherit; font-size: 11.5px; color: var(--accent); cursor: pointer;
  background: rgba(88, 200, 255, .07); border: 1px solid rgba(88, 200, 255, .24);
  border-radius: 7px; transition: .16s;
}
.evidence-link:hover { background: rgba(88, 200, 255, .16); border-color: rgba(88, 200, 255, .45); }
.evidence-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.detail-reach > .tags { padding-bottom: 4px; }
.detail-audience { margin: 10px 0; display: grid; gap: 12px; }
.detail-audience > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.detail-audience dt { color: var(--muted); font-size: 12px; }
.detail-audience dd { margin: 0; }

/* --- the document --- */
.section-fold { border-top: 1px solid rgba(140, 175, 255, .08); }
.section-fold:first-of-type { border-top: 0; }
.section-body { padding: 2px 0 12px 19px; font-size: 12.5px; line-height: 1.62; color: var(--muted); }
.section-body p { margin: 0 0 10px; }
.section-body p:last-child { margin-bottom: 0; }
.section-body h5, .section-body h6 { margin: 14px 0 6px; font-size: 11.5px; color: var(--ink); }
.section-body ul, .section-body ol { margin: 0 0 10px; padding-left: 18px; }
.section-body li { margin-bottom: 4px; }
.section-body code { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.section-body pre {
  margin: 0 0 10px; padding: 9px 11px; overflow-x: auto;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 8px;
}
.section-body pre code { color: var(--muted); font-size: 10.5px; }
.section-body blockquote {
  margin: 0 0 10px; padding: 2px 0 2px 11px;
  border-left: 2px solid rgba(88, 200, 255, .35); color: var(--muted);
}
.section-body table { width: 100%; margin: 0 0 10px; border-collapse: collapse; font-size: 11.5px; }
.section-body th, .section-body td { padding: 5px 7px; text-align: left; border-bottom: 1px solid var(--line); }
.section-body th { color: var(--dim); font: 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.section-body .okf-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(88, 200, 255, .35); }
.section-body .okf-link-dead { color: var(--dim); border-bottom: 1px dotted var(--dim); }
.section-footnotes { margin: 8px 0 0; padding-left: 16px; font-size: 10.5px; color: var(--dim); }
.section-footnotes b { font-family: var(--mono); color: var(--muted); margin-right: 5px; }

.detail-support { margin-top: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.detail-support > summary::before { content: '+'; width: 12px; flex: 0 0 auto; color: var(--accent); }
.detail-support[open] > summary::before { content: '-'; }
.detail-support > .detail-block { margin-top: 0; padding-top: 8px; border-top: 0; }

/* Reading mode gives the document space, not longer lines or a second copy of its content. */
.panel-right.panel-wide.panel-reader {
  top: 72px; right: 24px; width: calc(100vw - 48px);
  height: calc(100dvh - 144px); max-height: calc(100dvh - 144px);
  background: #101928;
}
.panel-reader.panel-wide .insp-top { padding: 20px 28px; max-height: 30%; overflow-y: auto; }
.panel-reader.panel-wide .insp-title { display: block; font-size: 24px; line-height: 1.3; }
.panel-reader.panel-wide .insp-jumps { display: none; }
.panel-reader.panel-wide .insp-outline {
  display: flex; flex-direction: column; gap: 4px; flex: 0 0 224px;
  min-height: 0; padding: 24px 16px; overflow-y: auto; overscroll-behavior: contain;
  background: #0c1421; border-right: 1px solid var(--line); scrollbar-width: thin;
}
.insp-outline h3 {
  margin: 0 10px 12px; font: 600 11px var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.insp-outline button {
  flex: 0 0 auto; min-height: 36px; padding: 8px 10px; text-align: left;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted); font: 600 13px/1.4 var(--sans);
  overflow-wrap: anywhere;
}
.insp-outline button:hover { color: var(--ink); background: rgba(88, 200, 255, .09); border-color: var(--line); }
.insp-outline .insp-outline-section { margin-left: 10px; padding-left: 14px; border-left-color: var(--line); font-weight: 400; }
.panel-reader.panel-wide .insp-content { padding: 28px 40px 48px; font-size: 16px; }
.panel-reader.panel-wide .insp-content > * { max-width: 820px; margin-left: auto; margin-right: auto; }
.panel-reader.panel-wide .insp-summary { max-width: 76ch; font-size: 17px; line-height: 1.7; color: #d2dcee; }
.panel-reader.panel-wide .insp-glance { gap: 8px; margin-top: 18px; }
.panel-reader.panel-wide .glance { padding: 8px 12px; }
.panel-reader.panel-wide .glance dt { font-size: 10px; }
.panel-reader.panel-wide .glance dd { font-size: 13px; line-height: 1.45; }
.panel-reader.panel-wide .detail-document { margin-top: 28px; padding-top: 24px; }
.panel-reader.panel-wide .detail-head h3,
.panel-reader.panel-wide .actions > h3 { font-size: 12px; letter-spacing: .1em; }
.panel-reader.panel-wide .section-fold { padding: 18px 0; }
.panel-reader.panel-wide .section-fold > summary { font-size: 19px; line-height: 1.45; padding: 6px 0 14px; }
.panel-reader.panel-wide .section-body { max-width: 76ch; padding: 4px 0 4px 19px; font-size: 16px; line-height: 1.8; color: #c3cee0; }
.panel-reader.panel-wide .section-body :is(p, ul, ol, pre, blockquote, table) { margin-bottom: 18px; }
.panel-reader.panel-wide .section-body :is(h5, h6) { font-size: 16px; line-height: 1.5; margin: 24px 0 10px; }
.panel-reader.panel-wide .section-body code { font-size: 13px; }
.panel-reader.panel-wide .section-body pre { padding: 16px; }
.panel-reader.panel-wide .section-body pre code { font-size: 13px; white-space: pre; overflow-wrap: normal; }
.panel-reader.panel-wide .section-body table { display: block; overflow-x: auto; font-size: 14px; }
.panel-reader.panel-wide .section-body :is(th, td) { padding: 10px 12px; min-width: 120px; }
.panel-reader.panel-wide .detail-support { padding: 12px 18px; }
.panel-reader.panel-wide :is(.detail-support, .detail-reach) > summary { font-size: 14px; line-height: 1.5; }
.panel-reader.panel-wide :is(.detail-note, .evidence-body p) { font-size: 12px; line-height: 1.7; }
body:is(.view-city, .view-graph):has(.panel-reader.panel-wide:not([hidden])) #nav-panel { visibility: hidden; }
@media (max-width: 1000px) {
  .panel-reader.panel-wide .insp-workspace { flex-direction: column; }
  .panel-reader.panel-wide .insp-outline-toggle {
    display: block; flex: 0 0 auto; min-height: 40px; padding: 10px 20px; text-align: left;
    background: #0c1421; color: var(--accent); border: 0; border-bottom: 1px solid var(--line);
    font: 600 13px var(--sans); cursor: pointer;
  }
  .panel-reader.panel-wide .insp-outline-toggle::after { content: ' +'; }
  .panel-reader.panel-wide .insp-outline-toggle[aria-expanded="true"]::after { content: ' -'; }
  .panel-reader.panel-wide .insp-outline { display: none; }
  .panel-reader.panel-wide.outline-open .insp-outline {
    display: flex; flex: 0 0 auto; max-height: min(30dvh, 240px); padding: 10px 16px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .panel-reader.panel-wide .insp-outline h3 { display: none; }
  .panel-reader.panel-wide .insp-content { padding: 24px 28px 40px; }
}

.section-index { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.section-index li { margin-bottom: 3px; }

.detail-skeleton { display: grid; gap: 7px; margin-top: 4px; }
.detail-skeleton i {
  display: block; height: 9px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(140,175,255,.06), rgba(140,175,255,.16), rgba(140,175,255,.06));
  background-size: 220% 100%; animation: detail-shimmer 1.5s ease-in-out infinite;
}
.detail-skeleton i:nth-child(2) { width: 86%; }
.detail-skeleton i:nth-child(3) { width: 64%; }
@keyframes detail-shimmer { from { background-position: 180% 0; } to { background-position: -60% 0; } }

/* --- attachments --- */
.media-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.media-item {
  display: grid; grid-template-columns: 62px 1fr; gap: 11px; align-items: start;
  padding: 9px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}
.panel-wide .media-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-wide .media-item { grid-template-columns: 74px 1fr; }
.media-thumb {
  display: grid; place-items: center; overflow: hidden;
  margin: 0; width: 100%; aspect-ratio: 1; border-radius: 7px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line);
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-glyph { font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.media-pdf .media-thumb { border-color: rgba(255, 107, 139, .3); background: rgba(255, 107, 139, .08); }
.media-pdf .media-glyph { color: #ff9aaf; }
.media-thumb-failed { border-style: dashed; }
.media-meta { min-width: 0; }
.media-meta b { display: block; font-size: 12px; font-weight: 580; line-height: 1.35; }
.media-meta p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.media-meta small { display: block; margin-top: 5px; font: 9.5px var(--mono); letter-spacing: .06em; color: var(--dim); }
.media-open { display: inline-block; margin-top: 6px; font-size: 10.5px; color: var(--accent); text-decoration: none; }
.media-open:hover { text-decoration: underline; }
.media-ref { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: var(--dim); }
/* A specimen tile has no bytes behind it, so it must not read as a file waiting to be opened. */
.detail-media-specimen .media-item { border-style: dashed; background: none; }
.detail-media-specimen .media-thumb { background: repeating-linear-gradient(45deg, rgba(140,175,255,.05) 0 6px, transparent 6px 12px); }

/* --- how this got here --- */
.route-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.route-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.route-steps i {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font: 600 9.5px var(--mono); font-style: normal;
  color: var(--accent); background: rgba(88, 200, 255, .12); border: 1px solid rgba(88, 200, 255, .35);
}
.route-steps b { display: block; font-size: 12px; font-weight: 580; }
.route-steps p { margin: 4px 0 0; font-size: 11px; line-height: 1.58; color: var(--muted); }
.route-steps code { font-family: var(--mono); font-size: 10px; color: var(--accent); word-break: break-all; }
.route-steps a { display: inline-block; margin-top: 5px; font-size: 10.5px; color: var(--accent); }
.route-pending i { color: var(--gateway); background: rgba(255, 201, 77, .12); border-color: rgba(255, 201, 77, .4); }
.route-todo i { color: var(--dim); background: rgba(255, 255, 255, .04); border-color: var(--line); }
.route-todo b, .route-todo p { opacity: .62; }

/* ---------- contribution guide ---------- */
.contribute-dialog {
  width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  color: var(--ink); background: #080d1a; border: 1px solid rgba(108, 255, 201, .28);
  border-radius: 8px; box-shadow: 0 32px 100px rgba(0, 0, 0, .72); overflow: hidden;
}
.contribute-dialog::backdrop { background: rgba(2, 5, 12, .82); backdrop-filter: blur(8px); }
.contribute-panel { max-height: calc(100dvh - 34px); overflow-y: auto; }
.contribute-head {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 20px;
  padding: 20px 24px 16px; background: rgba(8, 13, 26, .96); border-bottom: 1px solid var(--line);
}
.contribute-kicker { color: #6cffc9; font: 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.contribute-head h2 { margin: 5px 0 0; font-size: 22px; font-weight: 620; }
.contribute-head h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/*
 * A 24px glyph on a 3.6:1 grey was the smallest, faintest control in the dialog. The workspace
 * variant already sized this correctly; the base one was simply missed.
 */
.contribute-close {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .03);
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; transition: .16s;
}
.contribute-close:hover { color: var(--ink); background: rgba(140, 175, 255, .12); border-color: rgba(140, 175, 255, .32); }
.contribute-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.contribute-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 18px 24px; list-style: none; border-bottom: 1px solid var(--line); }
.contribute-steps li { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 10px var(--mono); }
.contribute-steps li:not(:last-child)::after { content: ''; flex: 1; height: 1px; margin: 0 12px; background: var(--line); }
.contribute-steps i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-style: normal; }
.contribute-steps .current { color: #6cffc9; }
.contribute-steps .current i { border-width: 2px; font-weight: 700; }
.contribute-steps .done { color: var(--accent); }
.contribute-body { padding: 26px 24px 28px; }
.contribute-intro > p { max-width: 64ch; margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.contribute-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contribute-routes button {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; min-height: 116px;
  padding: 20px; text-align: left; color: var(--ink); background: rgba(255,255,255,.035);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.contribute-routes button:hover { border-color: rgba(108, 255, 201, .5); background: rgba(108, 255, 201, .07); }
.contribute-routes button > i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #6cffc9; color: #6cffc9; border-radius: 6px; font: 20px var(--mono); font-style: normal; }
.contribute-routes strong, .contribute-routes small { display: block; }
.contribute-routes strong { font-size: 14px; margin: 2px 0 7px; }
.contribute-routes small { color: var(--muted); line-height: 1.5; }
.contribute-routes button:nth-child(n+3) { border-color: rgba(255, 199, 102, .22); }
.contribute-routes button:nth-child(n+3):hover { border-color: rgba(255, 199, 102, .55); background: rgba(255, 199, 102, .07); }
.contribute-routes button:nth-child(n+3) > i { border-color: #ffc766; color: #ffc766; font-size: 13px; }
.contribute-path { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--muted); font: 9.5px var(--mono); text-transform: uppercase; }
.contribute-path i { flex: 1; height: 1px; background: var(--line); }
.contribute-notice { display: flex; gap: 12px; margin: 18px 24px 0; padding: 11px 13px; border: 1px solid rgba(255, 201, 77, .3); background: rgba(255, 201, 77, .08); border-radius: 6px; }
.contribute-notice strong { flex: 0 0 auto; color: #ffd98a; font-size: 11px; }
.contribute-notice span { color: var(--muted); font-size: 11px; }
.contribute-context { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; padding: 13px 14px; border-left: 3px solid #6cffc9; background: rgba(108, 255, 201, .06); }
.contribute-context span, .contribute-context strong { display: block; }
.contribute-context span { color: var(--dim); font: 9px var(--mono); text-transform: uppercase; }
.contribute-context strong { margin-top: 4px; font-size: 13px; }
.contribute-context div > small { display: block; margin-top: 5px; color: var(--accent); font: 9.5px var(--mono); }
.contribute-context button, .secondary { background: transparent !important; color: var(--muted) !important; border-color: var(--line) !important; }
.contribute-form { display: grid; gap: 16px; }
.contribute-form label, .contribute-search label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
.contribute-form input, .contribute-form textarea, .contribute-form select, .contribute-search input {
  width: 100%; padding: 10px 11px; color: var(--ink); background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 6px; font: 12.5px var(--sans); outline: none;
}
.contribute-form textarea { resize: vertical; line-height: 1.5; }
.contribute-form input:focus, .contribute-form textarea:focus, .contribute-form select:focus, .contribute-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,200,255,.1); }
.contribute-form select option { color: #111827; }
.contribute-form label > small { color: var(--dim); font-size: 10px; }
.contribute-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.expansion-form .contribute-context { border-left-color: #ffc766; background: rgba(255, 199, 102, .06); }
.expansion-plane-note { display: grid; align-content: center; gap: 5px; min-height: 76px; padding: 12px 14px; border: 1px dashed rgba(255, 199, 102, .35); border-radius: 5px; background: rgba(255, 199, 102, .04); }
.expansion-plane-note strong { color: #ffc766; font-size: 12px; }
.expansion-plane-note span { color: var(--dim); font-size: 10px; line-height: 1.5; }
.expansion-review code { color: #8ed9ff; font-family: var(--mono); }
/* The charter half of an expansion. Marked out from the topology fields because it is the part a
   council actually decides on, and it is what the approved migration installs verbatim. */
.expansion-charter { display: grid; gap: 14px; margin: 0; padding: 14px; border: 1px solid rgba(255, 199, 102, .28); border-radius: 6px; background: rgba(255, 199, 102, .03); }
.expansion-charter legend { padding: 0 6px; color: #ffc766; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.expansion-charter-note { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.expansion-charter code { color: #8ed9ff; font-family: var(--mono); font-size: 10px; }
.review-charter { margin-top: 14px; padding: 14px; border: 1px solid rgba(255, 199, 102, .28); border-radius: 6px; background: rgba(255, 199, 102, .03); }
.review-charter h3 { margin: 0 0 10px; color: #ffc766; font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.review-charter-list { margin: 0; padding-left: 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.review-charter-empty { color: var(--dim); font-size: 11px; font-style: italic; }
.review-charter-note { margin: 10px 0 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.workiq-assist { overflow: hidden; border: 1px solid rgba(88,200,255,.22); border-radius: 8px; background: rgba(88,200,255,.035); }
.workiq-assist > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; }
.workiq-assist > header span, .workiq-assist > header strong { display: block; }
.workiq-assist > header span { color: var(--dim); font: 9px var(--mono); text-transform: uppercase; }
.workiq-assist > header strong { margin-top: 3px; font-size: 12px; }
.workiq-assist > header button, .workiq-fields > button { padding: 7px 10px; border: 1px solid rgba(88,200,255,.35); border-radius: 5px; background: rgba(88,200,255,.1); color: #b9e9ff; font: 10.5px var(--sans); cursor: pointer; }
.workiq-assist > header button:disabled, .workiq-fields > button:disabled { opacity: .38; cursor: not-allowed; }
.workiq-assist > p { margin: 0; padding: 0 15px 14px; color: var(--dim); font-size: 10px; line-height: 1.45; }
.workiq-flags { display: flex; justify-content: space-between; gap: 12px; padding: 9px 15px; border-top: 1px solid rgba(255,201,77,.2); background: rgba(255,201,77,.06); }
.workiq-flags strong { color: #ffd98a; font-size: 10px; }
.workiq-flags span { color: var(--muted); font-size: 10px; }
.workiq-fields { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 14px 15px 15px; border-top: 1px solid rgba(88,200,255,.16); }
.workiq-fields label:nth-child(3), .workiq-fields p { grid-column: 1 / -1; }
.workiq-fields p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.workiq-fields > button { grid-column: 2; justify-self: end; }
.proof-assist { border-color: rgba(255,201,77,.28); background: rgba(255,201,77,.035); }
.proof-assist > header button, .proof-fields > button, .proof-results button { border-color: rgba(255,201,77,.38); background: rgba(255,201,77,.09); color: #ffe2a0; }
.proof-fields { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px 15px 15px; border-top: 1px solid rgba(255,201,77,.16); }
.proof-fields > button { align-self: end; padding: 8px 11px; border-style: solid; border-width: 1px; border-radius: 5px; cursor: pointer; }
.proof-fields > button:disabled, .proof-results button:disabled { opacity: .4; cursor: not-allowed; }
.proof-fields > p, .proof-results { grid-column: 1 / -1; }
.proof-fields > p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.proof-results { display: grid; gap: 8px; padding-top: 3px; }
.proof-results > header, .proof-results article { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proof-results > header { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.proof-results > header span { font-size: 11px; font-weight: 700; }
.proof-results > header small { margin-left: auto; color: var(--dim); font-size: 9px; }
.proof-results article { padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: rgba(0,0,0,.12); }
.proof-results article span, .proof-results article strong, .proof-results article small { display: block; }
.proof-results article span { color: #ffd98a; font: 9px var(--mono); text-transform: uppercase; }
.proof-results article strong { margin-top: 3px; font-size: 11px; }
.proof-results article small { margin-top: 3px; color: var(--dim); font-size: 9px; }
.proof-results button { flex: 0 0 auto; padding: 7px 9px; border-style: solid; border-width: 1px; border-radius: 5px; cursor: pointer; }
.proof-clarification { grid-column: 1 / -1; display: grid; gap: 5px; padding: 10px 11px; border-left: 2px solid rgba(255,201,77,.7); border-radius: 0 6px 6px 0; background: rgba(255,201,77,.07); }
.proof-clarification span { color: #ffd98a; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.proof-clarification strong { font-size: 11px; line-height: 1.5; }
.proof-clarification small { color: var(--dim); font-size: 9.5px; line-height: 1.45; }
/* --- agent-in-the-loop markers: one visual language for "a model ran here" everywhere --- */
/* Doubled class: the badge drops into panel headers that already style bare `span`, and those
   selectors (`.readiness > header span`) outrank a single class and would flatten it to a block. */
.agent-tag:is(.agent-tag) { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; width: auto; margin-top: 0; padding: 3px 9px; border: 1px solid rgba(170,150,255,.44); border-radius: 999px; background: rgba(150,120,255,.14); color: #d9ccff; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: help; }
.agent-tag i { flex: 0 0 auto; font-style: normal; font-size: 7px; line-height: 1; }
.agent-tag .agent-tag-text { display: inline; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.agent-tag.none:is(.agent-tag) { border-color: var(--line); background: rgba(140,175,255,.05); color: var(--dim); }
.agent-tags { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
/* Headers that gained a badge need to wrap rather than squeeze it into two lines. */
.coauthor > header, .proof-assist > header, .guided-editor > header, .readiness > header, .agent-review > header { flex-wrap: wrap; }
.agent-legend { display: flex; flex-wrap: wrap; gap: 7px 24px; margin: 0; padding: 11px 24px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 10.5px; line-height: 1.5; }
.agent-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.agent-legend .agent-tag { cursor: default; }
.agent-scope { display: grid; gap: 3px; margin: 0 0 12px; padding: 9px 11px; border-left: 2px solid rgba(170,150,255,.5); border-radius: 0 6px 6px 0; background: rgba(150,120,255,.08); }
.agent-scope b { color: #d9ccff; font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.agent-scope span { color: var(--ink); font-size: 10.5px; line-height: 1.5; }
.agent-scope small { color: var(--dim); font-size: 10px; line-height: 1.5; }
.review-board p.tab-provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--dim); font-size: 11px; }
.coauthor > header .agent-tag,
.proof-assist > header .agent-tag,
.guided-editor > header .agent-tag,
.agent-review > header .agent-tag,
.facet-editor > header .agent-tag,
.tag-editor > header .agent-tag,
.readiness > header .agent-tags,
.copilot-header .agent-tag { margin-left: auto; }
.coauthor > header .agent-tag,
.proof-assist > header .agent-tag,
.guided-editor > header .agent-tag,
.readiness > header .agent-tags,
.copilot-header .agent-tag { margin-right: 10px; }
.review-boundary .agent-tag { float: right; margin-left: 10px; }
.executive-summary span .agent-tag { margin-left: 8px; }
.review-board p.tab-provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--dim); font-size: 11px; }
/* --- co-authoring session --- */
.coauthor { overflow: hidden; border: 1px solid rgba(140,180,255,.28); border-radius: 8px; background: rgba(120,150,255,.045); }
.coauthor > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; }
.coauthor > header span, .coauthor > header strong { display: block; }
.coauthor > header span { color: var(--dim); font: 9px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.coauthor > header strong { margin-top: 3px; font-size: 12px; }
.coauthor > header small { display: block; margin-top: 3px; color: var(--dim); font-size: 9.5px; line-height: 1.4; }
.coauthor > header button { padding: 7px 10px; border: 1px solid rgba(150,180,255,.4); border-radius: 5px; background: rgba(140,170,255,.12); color: #cfdcff; font: 10.5px var(--sans); cursor: pointer; }
.coauthor > header button:disabled { opacity: .38; cursor: not-allowed; }
.coauthor > p { margin: 0; padding: 0 15px 14px; color: var(--dim); font-size: 10px; line-height: 1.45; }
.coauthor-body { padding: 13px 15px 14px; border-top: 1px solid rgba(150,180,255,.18); }
.coauthor-body > p { margin: 9px 0 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.coauthor-modes { display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px; border: 1px solid rgba(150,180,255,.2); border-radius: 6px; background: rgba(0,0,0,.18); }
.coauthor-modes button { padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--dim); font: 10px var(--sans); cursor: pointer; }
.coauthor-modes button.selected { background: rgba(140,170,255,.18); color: #dfe8ff; }
.coauthor-modes button:disabled { opacity: .35; cursor: not-allowed; }
.coauthor-body .workiq-fields { padding: 0; border-top: 0; }
.coauthor-body .proof-fields { padding: 0; border-top: 0; }
.workiq-mode > p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.proof-mode > p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.workiq-mode .workiq-flags { margin-bottom: 12px; padding: 9px 10px; border: 1px solid rgba(255,201,77,.2); }
.coauthor-empty p { margin: 0 0 7px; color: var(--muted); font-size: 10.5px; line-height: 1.55; }
.coauthor-working { color: #cfdcff !important; }
.coauthor-transcript { display: grid; gap: 10px; max-height: 380px; overflow-y: auto; margin: 0 0 11px; padding: 0; list-style: none; }
.coauthor-transcript .turn { padding: 10px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(0,0,0,.16); }
.coauthor-transcript .turn > span { display: block; color: var(--dim); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.coauthor-transcript .turn > p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; }
.coauthor-transcript .resident { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.035); }
.coauthor-transcript .guide { border-style: dashed; border-color: rgba(88,200,255,.3); background: rgba(88,200,255,.045); }
.coauthor-transcript .agent { border-color: rgba(150,180,255,.3); }
.coauthor-transcript .working { box-shadow: inset 2px 0 0 rgba(150,180,255,.65); }
.coauthor-transcript .failed { border-color: rgba(255,120,120,.4); background: rgba(255,90,90,.07); }
.coauthor-transcript .failed a, .contribute-error a { display: inline-block; margin-top: 8px; color: #b9e9ff; font-size: 10.5px; font-weight: 700; }
.turn-progress { margin-top: 9px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.07); }
.turn-progress summary { color: var(--dim); font: 9.5px var(--mono); cursor: pointer; }
/* Shared agent activity + approval (src/agent-activity.js). One vocabulary, every agentic surface. */
.agent-progress-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.agent-progress-list > li { display: grid; grid-template-columns: 8px 1fr; gap: 8px; align-items: start; }
.agent-progress-list > li > i { width: 7px; height: 7px; margin-top: 4px; border: 1px solid rgba(170,150,255,.8); border-radius: 50%; background: rgba(170,150,255,.2); }
.agent-progress-list > li:last-child > i { background: #aa96ff; box-shadow: 0 0 0 3px rgba(170,150,255,.12); }
.agent-progress-list > li.phase-awaiting_approval > i { border-color: rgba(255,201,77,.9); background: #ffc94d; }
.agent-progress-list strong { display: block; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.45; }
.agent-progress-list small { display: block; margin-top: 2px; color: var(--dim); font: 9px var(--mono); }
.agent-progress-list .agent-calls { grid-column: 2; }
.agent-calls { display: grid; gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; }
.agent-calls li { display: grid; grid-template-columns: auto auto 1fr auto; gap: 3px 7px; align-items: baseline; padding: 4px 6px; border-radius: 4px; background: rgba(255,255,255,.025); }
.agent-calls b, .agent-calls code, .agent-calls i, .agent-calls em { font: 9px var(--mono); font-style: normal; }
.agent-calls b { color: #cfdcff; }
.agent-calls code { min-width: 0; overflow-wrap: anywhere; color: var(--muted); }
.agent-calls i { justify-self: end; color: var(--dim); text-transform: uppercase; }
.agent-calls em { grid-column: 2 / -1; color: var(--dim); }
.agent-calls small { grid-column: 1 / -1; color: var(--dim); font-size: 9.5px; line-height: 1.45; }
.agent-calls .call-completed i { color: #8fe0a8; }
.agent-calls .call-pending i { color: #ffd98a; }
.agent-calls .call-failed i, .agent-calls .call-blocked i { color: #ff9c8a; }
.agent-calls .call-blocked { background: rgba(255,120,100,.07); }
.agent-activity > summary { color: var(--dim); font: 9.5px var(--mono); cursor: pointer; }

/* A decision only the resident can make, so it reads as a control and not as another log line. */
.agent-approval { display: grid; gap: 9px; padding: 12px 13px; border: 1px solid rgba(255,201,77,.42); border-left-width: 3px; border-radius: 6px; background: rgba(255,201,77,.07); }
.agent-approval-head { display: grid; gap: 3px; }
.agent-approval-head strong { color: #ffe1a0; font-size: 12px; line-height: 1.4; }
.agent-approval-head span { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.agent-approval-calls { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.agent-approval-calls li { display: grid; grid-template-columns: auto auto 1fr; gap: 7px; align-items: baseline; padding: 4px 6px; border-radius: 4px; background: rgba(0,0,0,.18); }
.agent-approval-calls b, .agent-approval-calls code, .agent-approval-calls small { font: 9px var(--mono); }
.agent-approval-calls b { color: #ffe1a0; }
.agent-approval-calls code { color: var(--muted); overflow-wrap: anywhere; }
.agent-approval-calls small { justify-self: end; color: var(--dim); }
.agent-approval-grant { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.agent-approval-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-approval-actions button { padding: 7px 13px; border: 1px solid rgba(255,201,77,.5); border-radius: 5px; background: rgba(255,201,77,.18); color: #ffe9c2; font-size: 11px; cursor: pointer; }
.agent-approval-actions button.ghost { border-color: rgba(255,255,255,.16); background: transparent; color: var(--muted); }
.agent-approval-actions button[disabled] { opacity: .55; cursor: default; }
.agent-approval-note { margin: 0; color: var(--dim); font-size: 9.5px; line-height: 1.5; }
/* Consent is an errand, not a decision, so it reads informational rather than amber-urgent. */
.agent-consent { display: grid; gap: 9px; padding: 12px 13px; border: 1px solid rgba(130,180,255,.34); border-left-width: 3px; border-radius: 6px; background: rgba(130,180,255,.06); }
.agent-consent-head { display: grid; gap: 3px; }
.agent-consent-head strong { color: #cfe1ff; font-size: 12px; line-height: 1.4; }
.agent-consent-head span { color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.agent-consent-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agent-consent-links a { padding: 6px 12px; border: 1px solid rgba(130,180,255,.45); border-radius: 5px; background: rgba(130,180,255,.14); color: #dbe8ff; font-size: 11px; text-decoration: none; }
.coauthor-approval { display: grid; gap: 8px; margin-top: 10px; }
.turn.paused { opacity: .82; }
.agent-run { grid-column: 1 / -1; margin-top: 2px; padding: 10px 11px; border: 1px solid rgba(170,150,255,.2); border-radius: 6px; background: rgba(150,120,255,.05); }
.agent-run > header { display: grid; gap: 3px; }
.agent-run > header strong { color: #d9ccff; font-size: 10px; }
.agent-run > header span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.agent-run .agent-activity { margin-top: 7px; }
.agent-run.running { border-color: rgba(170,150,255,.38); box-shadow: inset 2px 0 0 rgba(170,150,255,.65); }
.turn-applied { margin: 7px 0 0 !important; color: #a8e6b8 !important; font-size: 10px !important; line-height: 1.5 !important; }
.turn-retrieval { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 7px; }
.turn-retrieval summary { color: var(--dim); font: 9.5px var(--mono); cursor: pointer; }
.turn-retrieval > ul { display: grid; gap: 5px; margin: 7px 0 0; padding: 0; list-style: none; }
.turn-retrieval > ul > li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: baseline; padding: 6px 8px; border-radius: 5px; background: rgba(255,255,255,.03); }
.turn-retrieval > ul > li b { color: #cfdcff; font: 9.5px var(--mono); }
.turn-retrieval > ul > li span { font-size: 10.5px; }
.turn-retrieval > ul > li small { grid-column: 1 / -1; color: var(--dim); font-size: 9.5px; line-height: 1.45; }
.turn-retrieval > ul > li i { font: 9px var(--mono); font-style: normal; text-transform: uppercase; }
.turn-retrieval .outcome-found i { color: #8fe0a8; }
.turn-retrieval .outcome-partial i { color: #ffd98a; }
.turn-retrieval .outcome-nothing i, .turn-retrieval .outcome-blocked i { color: var(--dim); }
.turn-references { margin-top: 8px; }
.turn-references > strong, .turn-flags > strong, .turn-questions > strong { display: block; color: var(--dim); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.turn-references ul { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.turn-references li { display: grid; grid-template-columns: 1fr auto; gap: 3px 9px; padding: 7px 9px; border-left: 2px solid rgba(150,180,255,.5); border-radius: 0 5px 5px 0; background: rgba(255,255,255,.03); }
.turn-references .session-only { border-left-color: rgba(255,201,77,.55); }
.turn-references a { color: #b9e9ff; font-size: 10.5px; overflow-wrap: anywhere; }
.turn-references li > span { font-size: 10.5px; overflow-wrap: anywhere; }
.turn-references em { grid-column: 1 / -1; color: var(--dim); font: 9px var(--mono); font-style: normal; }
.turn-references .session-only em { color: #e8c27a; }
.turn-references small { grid-column: 1 / -1; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.turn-references button { grid-row: 1; padding: 4px 8px; border: 1px solid rgba(150,180,255,.4); border-radius: 4px; background: rgba(140,170,255,.12); color: #cfdcff; font: 9.5px var(--sans); white-space: nowrap; cursor: pointer; }
.turn-flags, .turn-questions { margin-top: 8px; }
.turn-flags ul, .turn-questions ul { margin: 5px 0 0; padding-left: 16px; }
.turn-flags li, .turn-questions li { color: var(--muted); font-size: 10px; line-height: 1.5; }
.turn-flags li { color: #e8c27a; }
.coauthor-composer { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; }
.coauthor-composer button { padding: 9px 14px; border: 1px solid rgba(150,180,255,.45); border-radius: 5px; background: rgba(140,170,255,.16); color: #dfe8ff; font: 11px var(--sans); cursor: pointer; }
.coauthor-composer button:disabled { opacity: .38; cursor: not-allowed; }

/* --- pre-submission readiness --- */
.readiness { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }
.readiness > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; }
.readiness > header span, .readiness > header strong { display: block; }
.readiness > header span { color: var(--dim); font: 9px var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.readiness > header strong { margin-top: 3px; font-size: 12px; }
.readiness > header button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.05); color: var(--ink); font: 10.5px var(--sans); cursor: pointer; }
.readiness > header button:disabled { opacity: .38; cursor: not-allowed; }
.readiness > p { margin: 0; padding: 0 15px 14px; color: var(--dim); font-size: 10px; line-height: 1.5; }
.readiness.ready { border-color: rgba(120,220,150,.35); background: rgba(120,220,150,.05); }
.readiness.fix_first { border-color: rgba(255,201,77,.35); background: rgba(255,201,77,.05); }
.readiness.blocked { border-color: rgba(255,120,120,.4); background: rgba(255,90,90,.06); }
.readiness-body { padding: 13px 15px 14px; border-top: 1px solid var(--line); }
.readiness-verdict { margin: 0 0 9px; font-size: 11px; line-height: 1.55; }
.readiness-score { height: 5px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.readiness-score i { display: block; height: 100%; background: linear-gradient(90deg, #58c8ff, #8fe0a8); }
.readiness-body > small { display: block; margin-top: 5px; color: var(--dim); font-size: 9.5px; line-height: 1.45; }
.readiness-checks { display: grid; gap: 6px; margin: 11px 0 0; padding: 0; list-style: none; }
.readiness-checks li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; padding: 8px 10px; border-radius: 6px; background: rgba(0,0,0,.16); }
.readiness-checks i { font-style: normal; font-size: 11px; text-align: center; }
.readiness-checks .pass i { color: #8fe0a8; }
.readiness-checks .warn i { color: #ffd98a; }
.readiness-checks .blocker i { color: #ff9d9d; }
.readiness-checks strong { display: block; font-size: 11px; }
.readiness-checks span { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.readiness-counsel { margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(150,180,255,.28); border-radius: 7px; background: rgba(120,150,255,.05); }
.readiness-counsel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.readiness-counsel > header span { color: var(--dim); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.readiness-counsel > header b { padding: 3px 8px; border-radius: 999px; font: 9px var(--mono); text-transform: uppercase; }
.readiness-counsel .advance { background: rgba(120,220,150,.16); color: #a8e6b8; }
.readiness-counsel .revise { background: rgba(255,201,77,.16); color: #ffd98a; }
.readiness-counsel .decline { background: rgba(255,120,120,.16); color: #ff9d9d; }
.readiness-counsel > p { margin: 8px 0 0; font-size: 11px; line-height: 1.55; }
.readiness-counsel > div { margin-top: 9px; }
.readiness-counsel strong { display: block; color: var(--dim); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.readiness-counsel ul { margin: 5px 0 0; padding-left: 16px; }
.readiness-counsel li { color: var(--muted); font-size: 10px; line-height: 1.55; }
.readiness-counsel > small { display: block; margin-top: 9px; color: var(--dim); font-size: 9.5px; }
.readiness-counsel-missing { margin: 11px 0 0; color: var(--dim); font-size: 10px; line-height: 1.5; }

.guided-editor, .facet-editor, .tag-editor {
  overflow: hidden; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, .018);
}
.guided-editor > header, .facet-editor > header, .tag-editor > header, .agent-review > header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025);
}
.guided-editor > header span, .guided-editor > header strong,
.facet-editor > header span, .facet-editor > header strong,
.tag-editor > header span, .tag-editor > header strong,
.agent-review > header span, .agent-review > header strong { display: block; }
.guided-editor > header span, .facet-editor > header span, .tag-editor > header span, .agent-review > header span {
  color: var(--dim); font: 9px var(--mono); letter-spacing: .11em; text-transform: uppercase;
}
.guided-editor > header strong, .facet-editor > header strong, .tag-editor > header strong, .agent-review > header strong { margin-top: 3px; font-size: 12px; }
.facet-editor > header > small { color: var(--dim); font: 9px var(--mono); }
.facet-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.facet-groups fieldset { min-width: 0; margin: 0; padding: 13px 14px 14px; border: 0; background: rgba(8,13,26,.96); }
.facet-groups fieldset:last-child:nth-child(odd) { grid-column: 1 / -1; }
.facet-groups legend { padding: 0; color: var(--dim); font: 9px var(--mono); text-transform: uppercase; }
.facet-groups fieldset > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.facet-groups button {
  display: inline-grid; grid-template-columns: minmax(0, auto) 22px; align-items: center; gap: 6px;
  min-height: 29px; padding: 5px 6px 5px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px;
  background: rgba(255,255,255,.025); color: var(--muted); font: 10px var(--sans); cursor: pointer;
}
.facet-groups button span { overflow-wrap: anywhere; }
.facet-groups button small { display: grid; place-items: center; width: 22px; height: 17px; border-radius: 3px; background: rgba(255,255,255,.06); color: var(--dim); font: 8px var(--mono); }
.facet-groups button:hover { border-color: rgba(88,200,255,.4); color: var(--ink); }
.facet-groups button.selected { border-color: rgba(108,255,201,.45); background: rgba(108,255,201,.1); color: #bfffe8; }
.facet-groups button.selected small { background: rgba(108,255,201,.12); color: #8ee7c8; }
.guided-editor > header button {
  padding: 7px 10px; border: 1px solid rgba(88,200,255,.35); border-radius: 5px;
  background: rgba(88,200,255,.1); color: #b9e9ff; font: 10.5px var(--sans); cursor: pointer;
}
.guided-editor > header button:disabled { opacity: .4; cursor: wait; }
.section-stack { display: grid; gap: 1px; background: var(--line); }
.section-card {
  position: relative; display: block !important; padding: 15px; background: rgba(8,13,26,.96);
}
.section-card > span {
  display: grid; grid-template-columns: 25px minmax(120px, auto) 1fr; align-items: center; gap: 9px;
  margin-bottom: 9px;
}
.section-card > span i {
  display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid var(--line);
  border-radius: 50%; color: var(--accent); font: 9px var(--mono); font-style: normal;
}
.section-card > span strong { color: var(--ink); font-size: 12px; }
.section-card > span small { color: var(--dim); font-size: 10px; text-align: right; }
.section-card > span input { padding: 7px 9px; }
.section-card textarea { min-height: 92px; background: rgba(255,255,255,.025); }
.section-card > button {
  position: absolute; top: 13px; right: 14px; border: 0; background: none;
  color: var(--dim); font: 9.5px var(--sans); cursor: pointer;
}
.section-card > button:hover { color: #ff9aaf; }
.add-section {
  margin: 12px 15px 4px; padding: 7px 10px; border: 1px dashed rgba(88,200,255,.32);
  border-radius: 5px; background: transparent; color: var(--accent); font: 10.5px var(--sans); cursor: pointer;
}
.guided-editor > p { margin: 8px 15px 13px; color: var(--dim); font-size: 10px; }
.selected-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 15px 8px; }
.selected-tags > span:not(.tag-empty) {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px 5px 9px;
  border: 1px solid rgba(108,255,201,.28); border-radius: 5px; background: rgba(108,255,201,.07);
  color: #bfffe8; font-size: 10.5px;
}
.selected-tags button { padding: 0; border: 0; background: none; color: var(--dim); font-size: 14px; line-height: 1; cursor: pointer; }
.selected-tags button:hover { color: var(--ink); }
.tag-empty { color: var(--dim); font-size: 10.5px; }
.tag-editor > label { padding: 6px 15px 12px; }
.tag-input { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.tag-input button {
  padding: 0 13px; border: 1px solid var(--line); border-radius: 5px;
  background: rgba(255,255,255,.04); color: var(--muted); font: 10.5px var(--sans); cursor: pointer;
}
.tag-input button:hover { color: var(--ink); border-color: rgba(88,200,255,.4); }
.tag-suggestions { padding: 12px 15px 15px; border-top: 1px solid var(--line); }
.tag-suggestions > span { display: block; margin-bottom: 8px; color: var(--dim); font: 9px var(--mono); text-transform: uppercase; }
.tag-suggestions > div { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-suggestions button {
  padding: 5px 8px; border: 1px solid rgba(88,200,255,.22); border-radius: 5px;
  background: rgba(88,200,255,.06); color: #a9dcf5; font: 10px var(--sans); cursor: pointer;
}
.tag-suggestions button:hover { border-color: rgba(88,200,255,.5); background: rgba(88,200,255,.12); }
.tag-suggestions small { color: var(--dim); }
.contribute-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 6px; }
.contribute-actions button, .contribute-context button, .contribute-result button, .contribute-result a, .contribute-search label button {
  padding: 9px 14px; border: 1px solid rgba(108,255,201,.44); border-radius: 6px;
  background: rgba(108,255,201,.12); color: #bfffe8; font: 11px var(--sans); text-decoration: none; cursor: pointer;
}
.contribute-actions button:disabled, .contribute-search button:disabled { opacity: .38; cursor: not-allowed; }
.contribute-search label > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.contribute-search ul { list-style: none; display: grid; gap: 7px; padding: 0; margin: 14px 0 0; }
.contribute-search li button { display: block; width: 100%; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.03); color: var(--ink); cursor: pointer; }
.contribute-search li button:hover { border-color: rgba(88,200,255,.45); background: rgba(88,200,255,.08); }
.contribute-search li strong, .contribute-search li span, .contribute-search li small { display: block; }
.contribute-search li span { margin: 5px 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.contribute-search li small { color: var(--dim); font: 9.5px var(--mono); }
.contribute-review { max-width: 720px; margin: 0 auto; }
.review-banner { padding: 16px; border: 1px solid rgba(108,255,201,.25); border-radius: 6px; background: rgba(108,255,201,.06); }
.review-banner span, .review-banner strong, .review-banner small { display: block; }
.review-banner span { color: #6cffc9; font: 9px var(--mono); text-transform: uppercase; }
.review-banner strong { margin: 7px 0; font-size: 16px; }
.review-banner small { color: var(--dim); }
.contribute-review dl, .contribute-result dl { display: grid; grid-template-columns: 112px 1fr; gap: 10px 14px; margin: 20px 0; }
.contribute-review dt, .contribute-result dt { color: var(--dim); font: 9.5px var(--mono); text-transform: uppercase; }
.contribute-review dd, .contribute-result dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.contribute-review dd span { display: inline-block; margin: 0 4px 4px 0; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; }
.contribute-review dd span.empty { color: var(--dim); border-style: dashed; }
.agent-review { margin: 20px 0; border: 1px solid rgba(88,200,255,.32); border-radius: 7px; background: rgba(88,200,255,.04); }
.agent-review > header { border-bottom-color: rgba(88,200,255,.2); }
.agent-review > header span { color: var(--accent); }
.agent-view { display: flex; flex: 0 0 auto; gap: 2px; padding: 2px; border: 1px solid rgba(88,200,255,.25); border-radius: 5px; background: rgba(0,0,0,.2); }
.agent-view button { padding: 5px 10px; border: 0; border-radius: 3px; background: none; color: var(--dim); font: 9.5px var(--mono); text-transform: uppercase; cursor: pointer; }
.agent-view button.on { background: rgba(88,200,255,.16); color: #b9e9ff; }
.agent-proposal {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 16px;
  padding: 11px 15px 13px; border-top: 1px solid rgba(88,200,255,.12);
}
.agent-proposal:first-of-type { border-top: 0; }
.agent-proposal-head {
  display: grid; grid-template-columns: 16px auto 1fr auto; align-items: baseline; gap: 4px 9px;
  width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer;
}
.agent-proposal-head i { justify-self: center; color: var(--accent); font: 12px var(--mono); font-style: normal; }
.agent-proposal-head > span { color: var(--accent); font: 9px var(--mono); text-transform: uppercase; }
.agent-proposal-head > strong { font-size: 12px; font-weight: 560; }
.agent-proposal-head > small { color: var(--dim); font: 9.5px var(--mono); white-space: nowrap; }
.agent-proposal-head:hover > strong { color: #b9e9ff; }
.agent-change { grid-column: 1 / -1; margin-top: 9px; }
.diff-split { overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 6px; }
.diff-head, .diff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.07); }
.diff-head span { padding: 6px 11px; background: rgba(255,255,255,.04); color: var(--dim); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.diff-rows { max-height: 320px; overflow-y: auto; background: rgba(255,255,255,.07); }
.diff-row + .diff-row, .diff-row + .diff-gap, .diff-gap + .diff-row { margin-top: 1px; }
.diff-side {
  min-height: 1.6em; padding: 4px 11px; background: rgba(6,10,20,.97);
  font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.diff-side:empty { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 5px, transparent 5px 10px), rgba(6,10,20,.97); }
.diff-row.change .diff-side:first-child, .diff-row.delete .diff-side:first-child { background: rgba(255,120,120,.07); }
.diff-row.change .diff-side:last-child, .diff-row.insert .diff-side:last-child { background: rgba(120,220,150,.07); }
.diff-side ins { background: rgba(120,220,150,.24); color: #c9f5d6; text-decoration: none; border-radius: 2px; }
.diff-side del { background: rgba(255,120,120,.2); color: #ffb5b5; text-decoration: line-through; border-radius: 2px; }
.diff-gap {
  display: block; width: 100%; padding: 5px 11px; border: 0; background: rgba(6,10,20,.97);
  color: var(--dim); font: 9.5px var(--mono); text-align: center; cursor: pointer;
}
.diff-gap:hover { color: #b9e9ff; background: rgba(88,200,255,.07); }
.diff {
  max-height: 320px; overflow-y: auto; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px; background: rgba(0,0,0,.22); font-size: 11.5px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.diff em { color: var(--dim); font-style: normal; }
.diff.result { color: var(--muted); }
.agent-evidence { margin: 7px 0 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.agent-decision { display: flex; gap: 5px; flex: 0 0 auto; }
.agent-decision button { padding: 6px 9px; border: 1px solid rgba(88,200,255,.3); border-radius: 4px; background: rgba(88,200,255,.08); color: #b9e9ff; font: 9.5px var(--sans); cursor: pointer; }
.agent-decided { color: #9ff2c4; font: 9.5px var(--mono); text-transform: uppercase; white-space: nowrap; }
.agent-proposal.corrected .agent-decided { color: #ffd98a; }
.agent-proposal.corrected .diff-side ins { opacity: .5; }
.review-boundary { padding: 13px 15px; border-left: 3px solid var(--gateway); background: rgba(255,201,77,.07); }
.review-boundary strong { color: #ffd98a; font-size: 12px; }
.review-boundary p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.contribute-assist-status, .contribute-error {
  margin: 0; padding: 9px 11px; border-radius: 6px; font-size: 11px; line-height: 1.5;
}
.contribute-assist-status { color: #b9e9ff; border: 1px solid rgba(88,200,255,.25); background: rgba(88,200,255,.07); }
.contribute-error { color: #ffb0bf; border: 1px solid rgba(255,110,140,.3); background: rgba(255,110,140,.08); }
.contribute-offline {
  color: #ffd79a; font-size: 11px; line-height: 1.5; margin: 8px 0 0;
  padding: 8px 10px; border-radius: 6px;
  border: 1px solid rgba(255, 199, 122, .26); background: rgba(255, 199, 122, .07);
}
.contribute-result { padding: 40px 28px 48px; max-width: 620px; margin: 0 auto; text-align: center; }
.contribute-result > i { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border: 1px solid #6cffc9; border-radius: 50%; color: #6cffc9; font: 25px var(--mono); font-style: normal; }
.contribute-result h3 { margin: 15px 0 8px; font-size: 20px; }
.contribute-result p { color: var(--muted); line-height: 1.6; }
.contribute-result dl { text-align: left; padding: 14px; background: rgba(255,255,255,.03); }
.contribute-result button, .contribute-result a { display: inline-block; margin: 4px; }

.mcp-config {
  margin: 0 0 8px; padding: 10px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(0, 0, 0, .28); color: #b9d7ff;
  font: 10.5px/1.5 var(--mono); white-space: pre;
}
.mcp-tools { display: grid; grid-template-columns: 92px 1fr; gap: 8px 10px; margin: 0; }
.mcp-tools dt { color: var(--accent); font: 10px var(--mono); }
.mcp-tools dd { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.mcp-flow { margin: 0; padding-left: 20px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.mcp-flow li { padding: 0 0 7px 3px; }
.mcp-note {
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: 10.5px; line-height: 1.45;
}

.civic-mayor { margin: 16px 0; padding-left: 12px; border-left: 2px solid #ffd98a; }
.civic-mayor span {
  display: block; color: #ffd98a; font: 9.5px var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
}
.civic-mayor strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 620; }
.civic-mayor small { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.council-roster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; margin: 0; }
.council-roster dt { color: var(--muted); font-size: 11px; line-height: 1.35; }
.council-roster dd { margin: 0; text-align: right; }
.seat-placeholder {
  display: inline-block; padding: 2px 6px; border: 1px dashed var(--dim); border-radius: 4px;
  color: var(--dim); font: 9px var(--mono); white-space: nowrap;
}
.civic-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.civic-list li { padding: 0 0 6px 2px; }
/* Charter rosters carry a sentence per row, so they read left-aligned rather than as a key/value ledger. */
.civic-subhead { margin: 12px 0 6px; color: var(--dim); font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.civic-roster { display: grid; gap: 9px; margin: 0; }
.civic-roster dt { color: var(--ink); font-size: 11px; font-weight: 600; line-height: 1.35; }
.civic-roster dd { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.civic-roster dd .seat-placeholder { margin-top: 4px; white-space: normal; }

/* ---------- dock ---------- */
.dock {
  left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--line);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .6);
}
.dock-group { display: flex; align-items: center; gap: 6px; }
.dock-layers { position: relative; }
.dock-layout { padding-left: 14px; border-left: 1px solid var(--line); }
.dock-layout label { color: var(--muted); font: 10px var(--sans); }
.dock-layout select {
  max-width: 145px; min-height: 32px; padding: 4px 7px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--glass-strong); color: var(--ink); font: 11px var(--sans);
}
.dock-layout select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock-layout select:disabled { opacity: .6; }
.plan-compact { display: none; }
body[data-city-layout^="citadel"] .topbar {
  background: linear-gradient(180deg, rgba(10, 21, 35, .97), rgba(15, 29, 44, .9));
  border-bottom: 1px solid rgba(205, 216, 222, .18);
}
body[data-city-layout^="citadel"] .world-label {
  padding: 4px 7px; border: 1px solid rgba(231, 224, 205, .18); border-radius: 5px;
  background: rgba(17, 29, 41, .82); text-shadow: none;
}
.city-layout-status {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(540px, calc(100vw - 32px)); margin: 0; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--glass-strong);
  color: var(--muted); font: 11px/1.5 var(--sans); text-align: center; pointer-events: none;
}
.city-layout-status[data-state="error"] { color: #ffc5b7; border-color: #a85849; }
body:not(.view-city) .dock-layout, body:not(.view-city) .city-layout-status { display: none; }
.city-layout-status[hidden] { display: none; }
.dock-button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, .04); color: var(--muted);
  font: 11px var(--sans); cursor: pointer; white-space: nowrap; transition: .16s;
}
.dock-button:hover, .dock-button[aria-expanded="true"], .dock-button:focus-visible {
  color: var(--ink); border-color: rgba(88, 200, 255, .5);
  background: rgba(88, 200, 255, .14); outline: none;
}
.dock-icon {
  width: 12px; height: 10px; opacity: .8;
  background: repeating-linear-gradient(180deg, currentColor 0 2px, transparent 2px 4px);
}
.dock-button b { font: 10px var(--mono); font-weight: 500; color: var(--accent); }
.layer-menu {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
  width: max-content; max-width: min(320px, calc(100vw - 40px));
  padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--glass-strong); box-shadow: 0 18px 46px rgba(0, 0, 0, .6);
  animation: unfold .18s ease;
}
.layer-menu[hidden] { display: none; }
.dock-slider { gap: 10px; padding-left: 16px; border-left: 1px solid var(--line); }
.dock-slider label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.dock input[type="range"] { -webkit-appearance: none; appearance: none; width: 110px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #16243f, #7aa6ff); outline: none; }
.dock input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink); cursor: pointer; box-shadow: 0 0 12px rgba(140, 190, 255, .8);
}
.toggle {
  font: inherit; font-size: 11px; letter-spacing: .02em; cursor: pointer;
  padding: 6px 11px; border-radius: 999px; color: var(--muted);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  transition: .16s; white-space: nowrap;
}
.toggle.on { color: var(--ink); border-color: rgba(88, 200, 255, .5); background: rgba(88, 200, 255, .14); box-shadow: 0 0 16px rgba(88, 200, 255, .18); }
.toggle.action { border-style: dashed; }
.toggle.action:hover { color: var(--ink); border-color: rgba(88, 200, 255, .5); }

/* ---------- map navigation ---------- */
.map-navigation {
  top: 78px; right: 18px; width: 106px;
  display: grid; gap: 8px; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--glass-strong); box-shadow: 0 18px 46px rgba(0, 0, 0, .52);
}
.navigation-toggle {
  justify-self: end; display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px;
  background: transparent; color: var(--dim); font: 15px/1 var(--mono); cursor: pointer;
}
.navigation-toggle:hover, .navigation-toggle:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .07); outline: none; }
.navigation-body { display: grid; gap: 8px; }
.navigation-body[hidden] { display: none; }
.map-navigation.is-idle:not(:hover):not(:focus-within) { opacity: .32; }
.map-navigation.is-hidden { width: 34px; padding: 4px; opacity: .52; }
.map-navigation.is-hidden:hover, .map-navigation.is-hidden:focus-within { opacity: 1; }
.nav-mode-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  padding: 2px; border-radius: 6px; background: rgba(255, 255, 255, .045);
}
.nav-mode {
  height: 26px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--dim); font: 9.5px var(--mono); cursor: pointer;
}
.nav-mode.on { color: var(--ink); background: rgba(88, 200, 255, .18); box-shadow: inset 0 0 0 1px rgba(88, 200, 255, .35); }
.nav-mode:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.camera-controls { display: grid; gap: 8px; justify-items: center; }
.pan-pad {
  display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px);
  gap: 3px;
}
.camera-control {
  display: grid; place-items: center; flex: 0 0 28px;
  width: 28px; height: 28px; padding: 0; border-radius: 6px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  color: var(--muted); font: 15px/1 var(--mono); cursor: pointer; transition: .16s;
}
.camera-control:hover, .camera-control:focus-visible {
  color: var(--ink); border-color: rgba(88, 200, 255, .5);
  background: rgba(88, 200, 255, .14); outline: none;
}
.camera-control:active { transform: translateY(1px); }
.pan-up { grid-column: 2; grid-row: 1; }
.pan-left { grid-column: 1; grid-row: 2; }
.pan-right { grid-column: 3; grid-row: 2; }
.pan-down { grid-column: 2; grid-row: 3; }
.zoom-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  width: 90px; padding-top: 8px; border-top: 1px solid var(--line);
}
.zoom-pair .camera-control { width: 100%; }
.panel-right:not([hidden]) ~ .map-navigation { visibility: hidden; opacity: 0; pointer-events: none; }
body:has(#legend:not([hidden])) .map-navigation { visibility: hidden; opacity: 0; pointer-events: none; }

/* ---------- legend ---------- */
.legend {
  z-index: 30; top: 78px; right: 18px; bottom: auto;
  width: min(310px, calc(100vw - 36px)); max-width: 310px;
  max-height: calc(100dvh - 78px - var(--dock-clearance));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px; border-radius: 8px;
  background: var(--glass-strong); border: 1px solid var(--line);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .62);
  font-size: 11px; color: var(--muted);
}
.legend[hidden] { display: none; }
.legend::-webkit-scrollbar { width: 5px; }
.legend::-webkit-scrollbar-thumb { background: rgba(140, 175, 255, .22); border-radius: 3px; }
.legend-head { display: flex; align-items: center; gap: 10px; }
.legend h2 { margin: 0; flex: 1; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.legend-body { margin-top: 8px; animation: unfold .22s ease; }
.legend-close {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: var(--dim);
  font-size: 18px; cursor: pointer;
}
.legend-close:hover, .legend-close:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .07); }
.legend-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.legend dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 9px; margin: 0; }
.legend dt { font-family: var(--mono); font-size: 9.5px; color: var(--accent); white-space: nowrap; padding-top: 1px; }
.legend dd { margin: 0; line-height: 1.4; }
.legend-subhead { margin: 10px 0 6px; color: var(--dim); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.role-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.role-legend span { display: flex; align-items: center; gap: 5px; font: 9.5px var(--mono); color: var(--muted); }
.role-legend i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 6px currentColor; }
.legend-note { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--line); font-size: 10px; color: var(--dim); line-height: 1.45; }

.telemetry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.telemetry-head h3 { margin: 0; }
.telemetry-head span { color: var(--dim); font: 8.5px var(--mono); text-transform: uppercase; }
.role-mix { display: flex; flex-wrap: wrap; gap: 5px; }
.role-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--role-color) 45%, transparent);
  border-radius: 6px; color: var(--muted); font-size: 10px;
}
.role-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--role-color); box-shadow: 0 0 7px var(--role-color); }
.role-chip b { color: var(--ink); font: 9px var(--mono); font-weight: 500; }
.role-suppressed { color: var(--dim); font-size: 10.5px; }
.telemetry-note { margin: 7px 0 0; color: var(--dim); font-size: 9.5px; line-height: 1.4; }

/* ---------- monitoring lighthouse ---------- */
.monitor-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.monitor-source { color: var(--dim); font: 8.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
/* A heading level, not a type ramp: it is the lighthouse lede and sits between the panel title and
   the section headings, so its weight is pinned rather than inherited from whatever tag it uses. */
.monitor-headline { margin: 14px 0 6px; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: normal; text-transform: none; }
.monitor-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 14px 0 4px; }
.monitor-metrics > div { min-height: 82px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.028); }
.monitor-metrics span { display: block; color: var(--dim); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.monitor-metrics strong { display: block; margin: 5px 0 3px; color: var(--ink); font: 18px var(--mono); }
.monitor-metrics strong em { color: var(--dim); font-size: 11px; font-style: normal; }
.monitor-metrics small { color: var(--muted); font-size: 9.5px; line-height: 1.25; }
.monitor-metrics strong { overflow-wrap: anywhere; }
.monitor-trend .trend-column span { overflow-wrap: anywhere; }
.trend-up { color: #6cffc9 !important; }
.trend-down { color: #ff8fa6 !important; }
.trend-steady { color: #8fa4c8 !important; }
.monitor-trend { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; height: 126px; }
.trend-column { min-width: 0; display: grid; grid-template-rows: 20px 1fr 16px; gap: 3px; text-align: center; }
.trend-column b { overflow: hidden; color: var(--muted); font: 8px var(--mono); text-overflow: ellipsis; }
.trend-column > i { position: relative; overflow: hidden; border-radius: 3px 3px 1px 1px; background: rgba(255,255,255,.04); }
.trend-column > i u { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #ff8fa6, #ff456d); }
.trend-column span { overflow: hidden; color: var(--dim); font: 7.5px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.district-monitoring { display: grid; gap: 7px; }
.district-monitoring section { padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.024); }
.district-monitoring section > div { display: flex; justify-content: space-between; gap: 8px; }
.district-monitoring strong { color: var(--ink); font-size: 11px; }
.district-monitoring section > div b { font: 10px var(--mono); }
.district-monitoring p { margin: 5px 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.district-monitoring small { color: var(--dim); font-size: 9px; }
.district-monitoring section > i { display: block; height: 3px; margin-top: 7px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.06); }
.district-monitoring section > i u { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ff6b8b, #6cffc9); }
.audience-summary { display: flex; flex-wrap: wrap; gap: 5px; }
.audience-summary span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--role-color) 42%, transparent); border-radius: 6px; color: var(--muted); font-size: 9.5px; }
.audience-summary i { width: 7px; height: 7px; border-radius: 50%; background: var(--role-color); box-shadow: 0 0 6px var(--role-color); }
.audience-summary b { color: var(--ink); font: 9px var(--mono); }
.monitor-highlights { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.monitor-highlights li { padding-left: 13px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.monitor-highlights li::before { content: ""; float: left; width: 5px; height: 5px; margin: 5px 0 0 -13px; border-radius: 50%; background: #ff8fa6; box-shadow: 0 0 6px #ff6b8b; }
.monitor-privacy { margin-top: 14px; padding: 10px; border: 1px solid rgba(108,255,201,.24); border-radius: 6px; background: rgba(108,255,201,.055); }
.monitor-privacy strong { color: #6cffc9; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.monitor-privacy p { margin: 5px 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.monitor-privacy small { color: var(--dim); font-size: 9px; line-height: 1.35; }

/* ---------- world labels ---------- */
.labels { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.world-label {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  white-space: nowrap; text-shadow: 0 2px 14px #000;
  transition: opacity .3s;
}
.world-label b { display: block; font-weight: 600; }
.world-label small { display: block; font-size: 8.5px; letter-spacing: .1em; opacity: .55; text-transform: none; margin-top: 2px; }

.hover-tip {
  position: fixed; z-index: 20; pointer-events: none;
  padding: 7px 10px; border-radius: 8px; max-width: 260px;
  background: var(--glass-strong); border: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.35;
  transform: translate(12px, 12px);
}
.hover-tip em { display: block; font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--dim); margin-top: 3px; }

@media (max-width: 1180px) {
  /* The brand line already reads "N assets", so the node count is the first stat to go. */
  .stats { gap: 18px; }
  .stat:first-child { display: none; }
}

@media (max-width: 1080px) {
  .panel-left { width: 280px; }
  .panel-left.collapsed, .panel-right.collapsed { width: auto; }
}

@media (max-width: 900px) {
  .topbar-right { gap: 10px; }
  .stats { gap: 14px; }
  .stat:nth-child(2) { display: none; }
  .help-label { display: none; }
  .view-switch { grid-auto-columns: minmax(42px, auto); }
}

@media (max-width: 1100px) {
  /* Wrap controls rather than clipping the Layers popover inside an overflow scroller. */
  .dock {
    left: 8px; right: 8px; bottom: 8px; transform: none;
    width: auto; gap: 12px;
    padding: 8px 10px; border-radius: 8px;
  }
  .dock-group { flex: 0 0 auto; }
}

@media (max-width: 700px) {
  body { --dock-clearance: 98px; }
  .dock { flex-wrap: wrap; gap: 8px; }
  .dock-layout { padding-left: 0; border-left: 0; }
  .dock-layout label, .dock-slider label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .dock-layout select { max-width: 104px; }
  .dock-layout .dock-button { padding: 0 8px; }
  .plan-wide { display: none; }
  .plan-compact { display: inline; }
  .dock-slider { padding-left: 0; border-left: 0; }
  .dock input[type="range"] { width: 80px; }
  .topbar { gap: 10px; padding: 10px 12px; }
  .topbar-right { gap: 8px; }
  .view-switch { grid-auto-columns: minmax(38px, auto); padding: 2px; }
  .view-switch button { height: 24px; font-size: 9px; }
  .brand { min-width: 0; }
  .brand-icon { width: 26px; height: 26px; }
  .brand h1 { font-size: 13px; }
  .brand p { display: none; }

  .stats { display: none; }

  .panel-left {
    top: 62px; left: 8px; right: auto;
    width: min(300px, calc(100vw - 16px));
    max-height: calc(100dvh - 170px);
    padding: 12px; border-radius: 8px;
  }
  .panel-left.collapsed, .panel-right.collapsed { width: auto; }
  .panel-right { z-index: 12; }

  .legend {
    top: 62px; right: 8px; width: calc(100vw - 16px); max-width: none;
    max-height: calc(100dvh - 62px - var(--dock-clearance));
  }
  .map-navigation { top: 62px; right: 8px; }
  body:has(#nav-panel:not(.collapsed)) .map-navigation { visibility: hidden; opacity: 0; pointer-events: none; }
  .world-label { font-size: 8px; letter-spacing: .12em; }
  .world-label small { display: none; }
  .contribute-dialog { width: 100vw; max-width: none; max-height: 100dvh; height: 100dvh; border: 0; border-radius: 0; }
  .contribute-panel { max-height: 100dvh; }
  .contribute-head { padding: 16px; }
  .contribute-body { padding: 20px 16px; }
  .contribute-steps { padding: 14px 16px; }
  .agent-legend { padding: 10px 16px; }
  .contribute-steps li:not(:last-child)::after { margin: 0 5px; }
  .contribute-routes, .contribute-grid, .facet-groups, .workiq-fields, .proof-fields, .coauthor-composer { grid-template-columns: 1fr; }
  .coauthor-modes { display: flex; width: 100%; }
  .coauthor-modes button { flex: 1; }
  .coauthor > header, .readiness > header { align-items: flex-start; flex-direction: column; }
  .coauthor-transcript { max-height: 300px; }
  .turn-references li, .turn-retrieval > ul > li { grid-template-columns: 1fr; }
  .turn-references button { grid-row: auto; justify-self: start; }
  .agent-calls li, .agent-approval-calls li { grid-template-columns: 1fr; }
  .agent-calls i, .agent-approval-calls small { justify-self: start; }
  .agent-approval-actions button { flex: 1; }
  .facet-groups fieldset:last-child:nth-child(odd) { grid-column: auto; }
  .workiq-fields label:nth-child(3), .workiq-fields p, .workiq-fields > button { grid-column: auto; }
  .proof-fields > p, .proof-results { grid-column: auto; }
  .proof-results > header, .proof-results article { align-items: flex-start; flex-direction: column; }
  .proof-results > header small { margin-left: 0; }
  .section-card > span { grid-template-columns: 25px 1fr; }
  .section-card > span small { grid-column: 2; text-align: left; }
  .agent-proposal { grid-template-columns: 1fr; }
  .agent-proposal-head { grid-template-columns: 16px 1fr; }
  .agent-proposal-head > strong, .agent-proposal-head > small { grid-column: 2; }
  /* Two columns at 390px would be two unreadable ones, so each row stacks and labels itself. */
  .diff-head { display: none; }
  .diff-row { grid-template-columns: 1fr; }
  .diff-side::before { display: block; color: var(--dim); font: 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; content: attr(data-side); }
  .diff-side:empty { display: none; }
  .contribute-path { align-items: flex-start; }
  .contribute-path i { margin-top: 5px; }
  .contribute-notice { margin: 14px 16px 0; flex-direction: column; gap: 4px; }
}

@media (max-width: 820px) {
  .panel-right, .panel-right.panel-wide {
    top: auto; left: 8px; right: 8px; bottom: 64px;
    width: calc(100vw - 16px); height: min(54dvh, 540px);
    max-height: calc(100dvh - 136px); border-radius: 14px; padding: 0;
  }
  .panel-right.panel-wide { height: calc(100dvh - 136px); }
  .panel-right.panel-wide.panel-reader {
    top: 62px; right: 8px; left: 8px; bottom: 64px; width: calc(100vw - 16px);
    height: calc(100dvh - 126px); max-height: calc(100dvh - 126px);
  }
  .panel-right .insp-top { padding: 12px 14px 10px; }
  .panel-right .insp-title { font-size: 16px; -webkit-line-clamp: 2; }
  .insp-content { padding: 14px 14px 20px; }
  .insp-controls { gap: 6px; }
  .insp-controls button { min-width: 36px; height: 36px; }
  .panel-reader.panel-wide .insp-top { padding: 14px 16px; }
  .panel-reader.panel-wide .insp-title { font-size: 19px; }
  .panel-reader.panel-wide .insp-content { padding: 20px 16px 32px; }
  .panel-reader.panel-wide .insp-summary { font-size: 16px; }
  .panel-reader.panel-wide .section-body { padding-left: 0; }
  .panel-reader.panel-wide .section-fold > summary { font-size: 18px; }
  .panel-reader.panel-wide .media-list { grid-template-columns: 1fr; }
  .detail-audience > div { grid-template-columns: 1fr; gap: 4px; }
  body:is(.view-city, .view-graph):has(.panel-right:not([hidden])) #nav-panel { visibility: hidden; }
}

/* --- capture-clean ---------------------------------------------------------------
   Hides every DOM overlay so the video capture harness records the scene alone. Toggled by
   `window.__cityCapture.presentationMode()`, never by the product UI. */
body.capture-clean .hud,
body.capture-clean .map-navigation,
body.capture-clean #inspector,
body.capture-clean #legend,
body.capture-clean #hud-menu,
body.capture-clean #labels,
body.capture-clean .tip { display: none !important; }
body.capture-clean { cursor: none; }

/* Keyboard focus must remain distinct from hover, including on custom range inputs. */
body :is(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  scroll-margin-block: 12px;
}
body :is(#stage, .graph-canvas, .okf-doc, .result-open):focus-visible { outline-offset: -4px; }

.skip-links {
  position: fixed; top: 8px; left: 8px; z-index: 10000;
  display: flex; flex-wrap: wrap; gap: 12px; max-width: calc(100vw - 16px);
  padding: 12px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--bg); transform: translateY(calc(-100% - 16px));
}
.skip-links:focus-within { transform: none; }
.skip-links a { padding: 4px; color: var(--ink); font-size: 14px; }
body.view-review .skip-links [data-skip="search"],
body.view-review .skip-links [data-skip="results"],
body.view-okf .city-places { display: none; }

.results-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.results-pagination[hidden], .city-places[hidden] { display: none; }
.results-pagination span { color: var(--muted); font: 10px var(--mono); }
.results-pagination button, .okf-skip, .okf-back {
  min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
  color: var(--accent); background: var(--bg); font: inherit; font-size: 12px; cursor: pointer;
}
.results-pagination button:disabled { color: var(--muted); cursor: default; }
.city-places { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.city-places summary { padding: 6px 2px; color: var(--muted); cursor: pointer; font-size: 12px; }
#city-places-list { display: grid; gap: 4px; margin-top: 6px; }
.okf-back { margin-bottom: 12px; }

.map-keyboard-help {
  position: fixed; left: 50%; bottom: calc(var(--dock-clearance) + 12px); z-index: 6;
  width: min(440px, calc(100vw - 32px)); transform: translateX(-50%);
  margin: 0; padding: 12px 16px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: 12px/1.6 var(--sans);
  pointer-events: none;
}
canvas:not(:focus-visible) + .map-keyboard-help { display: none; }
body.capture-clean .skip-links, body.capture-clean .map-keyboard-help { display: none; }

@media (forced-colors: active) {
  body :is(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}