/* The console: the dashboard's dense views (Command, Decisions,
   Commitments, Agents, Proofs, Attack lab, walkthrough), styled like
   Google's own products: white cards on a light grey page, one blue for
   what you can act on, and red, yellow and green for a violation, a
   person's turn and a verified result. */

:root[data-theme="dark"] .logo { filter: invert(1); }
:root[data-theme="dark"] .vendor.v-anthropic { background: #3a2417; color: #f2b48d; }
:root[data-theme="dark"] .vendor.v-google { background: #172840; color: #9cc1ff; }
:root[data-theme="dark"] .dg .vt.v-anthropic { fill: #f2b48d; }
:root[data-theme="dark"] .dg .vt.v-google { fill: #9cc1ff; }

body { font-feature-settings: "cv11", "ss01"; background: var(--bg); }
h1, h2, .brand, .cc-hero h1, .pf-top h2, .dr-top h2, .lab-head h1, .rp-head h1, .rp-stage-head h2, .lab-scenario h2, .ig-main h2, .d-head h1 {
  font-family: var(--display); font-weight: 600; letter-spacing: -.005em; }
.mono, code { font-variant-numeric: tabular-nums; }
a { color: inherit; }
.caselink { color: var(--accent); text-decoration: none; }
.caselink:hover { text-decoration: underline; }

/* Top bar */
.topbar { gap: 18px; padding: 10px 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); flex-wrap: wrap; }
.brand { font-size: 15px; }
.brand-sub { font-weight: 500; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; padding-left: 10px; border-left: 1px solid var(--line-strong); }
.tabs { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.tabs button { white-space: nowrap; font-size: 13px; padding: 5px 12px; }
.tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.tabs .n { font: 600 10.5px/1 var(--mono); background: var(--stop-soft); color: var(--stop); border-radius: 999px; padding: 2px 6px; margin-left: 4px; }

/* Buttons and small shared pieces */
.btn.small { height: 30px; padding: 0 12px; font-size: 12.5px; gap: 6px; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); text-decoration: none; }
.btn.small:hover { border-color: var(--accent); opacity: 1; }
.btn.accent { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); text-decoration: none; }
.btn.small.accent { background: var(--accent); color: var(--on-accent); }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .ico { width: 14px; height: 14px; }
.tag { font: 600 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 3px 5px; border-radius: 4px; }
.tag.sandbox { color: var(--person); background: var(--person-soft); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.fine { color: var(--muted); font-size: 12px; line-height: 1.5; }
.fine .ico { width: 13px; height: 13px; }
.docref { display: inline-flex; gap: 4px; align-items: center; font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin: 1px 0; }
.t-accent { color: var(--accent); }
.nowrap { white-space: nowrap; }
.seg-tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); flex-wrap: wrap; }
.seg-tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; color: var(--ink-2); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-weight: 550; font-size: 13px; }
.seg-tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.seg-tabs .ico { width: 14px; height: 14px; }
.chip[aria-checked="true"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
h3 .ico, h4 .ico { width: 14px; height: 14px; vertical-align: -2px; }
.card h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; font-weight: 650; display: flex; gap: 6px; align-items: center; }
.tone-act { --t: var(--act); } .tone-stop { --t: var(--stop); } .tone-person { --t: var(--person); } .tone-agent { --t: var(--agent); } .tone-neutral { --t: var(--yard); } .tone-accent { --t: var(--accent); }

/* JSON trees */
.j-root, .j-node ul { list-style: none; margin: 0; padding: 0 0 0 12px; font: 12px/1.6 var(--mono); }
.j-root { padding: 0; }
.j-key { color: var(--muted); }
.j-key::after { content: ":"; }
.j-str { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.j-lit { color: var(--accent); }
.j-null { color: var(--muted); }
.j-node { display: inline; }
.j-node summary { display: inline; cursor: pointer; color: var(--muted); list-style: none; }
.j-node summary::before { content: "▸ "; }
.j-node[open] > summary::before { content: "▾ "; }

/* ---------- Command Center ---------- */
.cc-view, .ag-view, .pf-view, .lab-view, .rp-view { max-width: 1480px; margin: 0 auto; padding: 18px 24px 40px; display: grid; gap: 16px; align-content: start; }
.cc-loading { display: grid; gap: 16px; }
.cc-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 6px 0 2px; }
.cc-hero h1 { font-size: 34px; margin: 0 0 10px; line-height: 1.12; max-width: 900px; }
.cc-hero p { margin: 0 0 6px; color: var(--ink-2); max-width: 820px; }
.cc-hero-side { display: grid; gap: 10px; justify-items: end; }
.cc-key { display: grid; gap: 2px; justify-items: end; font-size: 12px; color: var(--ink-2); }
.cc-key .fine { font-size: 11px; }
@media (max-width: 900px) { .cc-hero { grid-template-columns: 1fr; } .cc-hero-side { justify-items: start; } }

.cc-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1200px) { .cc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cc-tile { position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; overflow: hidden; transition: border-color .15s, transform .15s; }
.cc-tile::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: var(--t); }
.cc-tile:hover { border-color: var(--line-strong); background: var(--surface-2); }
.cc-v { font: 600 32px/1.05 var(--display); letter-spacing: -.01em; color: var(--t); font-variant-numeric: lining-nums tabular-nums; }
.cc-v small { font-size: 16px; color: var(--muted); }
.cc-l { font-weight: 600; font-size: 13px; }
.cc-s { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-s code { font-size: 11px; }

.cc-chain-card { padding: 14px 16px; }
.cc-chain { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.cc-stage { flex: 1 0 128px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 3px; padding: 10px 10px; border-radius: 10px; text-decoration: none; position: relative; border: 1px solid transparent; }
.cc-stage:hover { background: var(--surface-2); border-color: var(--line); }
.cc-stage .ico { width: 18px; height: 18px; color: var(--accent); }
.cc-step { position: absolute; top: 10px; right: 10px; font: 600 10px/1 var(--mono); color: var(--muted); }
.cc-stage b { font-size: 12.5px; }
.cc-n { font: 650 22px/1.1 var(--mono); }
.cc-sub { font-size: 11px; color: var(--muted); line-height: 1.35; }
.cc-stage .tag { position: absolute; bottom: 10px; right: 10px; }
.cc-arrow { flex: 0 0 14px; align-self: center; height: 2px; background: linear-gradient(90deg, var(--line-strong), var(--accent)); position: relative; opacity: .7; }
.cc-arrow::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--accent); border-right: 0; }

.cc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cc-grid { grid-template-columns: 1fr; } }
.cc-stream { padding: 14px 16px; min-width: 0; }
.cc-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.cc-head h3 { margin: 0; }
.cc-events { list-style: none; margin: 0; padding: 0; max-height: 640px; overflow: auto; }
.cc-events li { display: grid; grid-template-columns: 132px 10px 120px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 12.5px; animation: rise .25s ease-out; }
.cc-events li:last-child { border-bottom: 0; }
.cc-events time { font: 11.5px var(--mono); color: var(--muted); }
.cc-events .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; align-self: center; }
.cc-events .who { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-events .what { color: var(--ink-2); }
.cc-events .caselink { font-size: 11.5px; }
.cc-empty { color: var(--muted); padding: 12px 4px; display: block !important; }
@media (max-width: 700px) { .cc-events li { grid-template-columns: 10px minmax(0, 1fr) auto; } .cc-events time, .cc-events .who { display: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .cc-events li { animation: none; } }

.cc-side { display: grid; gap: 16px; }
.cc-panel { padding: 14px 16px; }
.cc-panel h4 { margin: 14px 0 6px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cc-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.cc-bar .seg { background: var(--t); min-width: 4px; }
.cc-legend, .cc-flows, .cc-decisions, .cc-health, .cc-agents { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; font-size: 12.5px; }
.cc-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; gap: 8px; align-items: center; }
.cc-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--t); }
.cc-legend b, .cc-flows b, .cc-health b { font: 600 12.5px var(--mono); text-align: right; }
.cc-legend span { color: var(--muted); font: 11px var(--mono); text-align: right; }
.cc-flows li, .cc-health li, .cc-agents li { display: flex; justify-content: space-between; gap: 8px; }
.cc-health span { color: var(--ink-2); }
.cc-decisions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }

/* ---------- Agents ---------- */
.ag-head { display: grid; gap: 8px; }
.ag-head .fine { margin: 0; }
.ag-body { display: grid; gap: 14px; }
.ag-agents { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .ag-agents { grid-template-columns: 1fr; } }
.ag-jobs { display: grid; gap: 8px; }
.ag-job { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); cursor: pointer; color: var(--ink); }
.ag-job.sel { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.ag-job-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ag-job-head b::first-letter { text-transform: uppercase; }
.ag-job .mono { font-size: 11.5px; color: var(--muted); }
.ag-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-2); }
.ag-runs { padding: 14px 16px; min-width: 0; }
.ag-run { border-bottom: 1px solid var(--line); }
.ag-run summary { display: grid; grid-template-columns: 100px 150px 64px 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 2px; cursor: pointer; font-size: 12.5px; list-style: none; }
.ag-run summary .caselink { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-run[open] summary { color: var(--accent); }
.ag-run-body { padding: 4px 4px 14px; }
.ag-run-body h4 { font-size: 11.5px; color: var(--muted); margin: 6px 0; font-weight: 600; }
@media (max-width: 700px) { .ag-run summary { grid-template-columns: auto auto minmax(0, 1fr); } .ag-run summary > :nth-child(2), .ag-run summary > :nth-child(4) { display: none; } }
.ag-check, .ag-policy, .ag-yard { padding: 14px 16px; overflow-x: auto; }
.ag-check-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ag-check-head h3 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 14px; }
.ag-policy h3 .mono { text-transform: none; }
.ag-yard-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ag-yard-list li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.ag-yard-list b { font: 650 22px var(--mono); color: var(--accent); }
.ag-yard-list span { font-size: 12px; color: var(--ink-2); }

/* Shared tables */
.pf-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pf-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
.pf-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pf-table tr:last-child td { border-bottom: 0; }

/* ---------- Proof Explorer ---------- */
.pf-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pf-layout { grid-template-columns: 1fr; } }
.pf-list { padding: 14px; position: sticky; top: 70px; max-height: calc(100dvh - 90px); overflow: auto; }
.pf-list ol, .lab-list ol, .ig-list ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pf-pick, .lab-pick { width: 100%; display: grid; gap: 4px; text-align: left; padding: 9px 10px; border-radius: 9px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink); }
.pf-pick:hover, .lab-pick:hover { background: var(--surface-2); }
.pf-pick[aria-current="true"], .lab-pick[aria-current="true"] { background: var(--surface-2); border-color: var(--accent); }
.pf-pick .t, .lab-pick .t { font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.pf-pick .s, .lab-pick .s { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.pf-pick .pill, .lab-pick .pill { height: 18px; font-size: 10.5px; padding: 0 7px; }
.pf-main { padding: 20px 22px; min-width: 0; }
.pf-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.pf-top h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
.pf-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1200px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-chain { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; display: grid; gap: 8px; }
.pf-chain::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--accent), var(--line-strong)); opacity: .55; }
.pf-block { position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.pf-block::before { content: ""; position: absolute; left: -16px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); }
.pf-block.open { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pf-block-head { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 128px; gap: 10px; align-items: center; padding: 10px 12px; border: 0; background: none; cursor: pointer; color: var(--ink); text-align: left; }
.pf-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.pf-title { display: grid; }
.pf-title b { font-size: 13px; }
.pf-title span { color: var(--muted); font-size: 11.5px; }
.pf-count { font: 12px var(--mono); color: var(--ink-2); white-space: nowrap; }
.pf-digest { font: 11.5px var(--mono); color: var(--ink-2); display: grid; justify-items: end; }
.pf-digest .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 700px) { .pf-block-head { grid-template-columns: 30px minmax(0, 1fr); } .pf-count, .pf-digest { display: none; } }
.pf-block-body { padding: 4px 14px 14px 52px; overflow-x: auto; }
.pf-text { margin: 8px 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; font: 13px/1.7 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--ink-2); }
.pf-text mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); border-bottom: 2px solid var(--accent); padding: 0 1px; border-radius: 2px; }
.pf-quotes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pf-quotes li { display: inline-flex; gap: 6px; align-items: center; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; }
.pf-quotes .mono { color: var(--accent); font-size: 11px; }
.pf-exec { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 6px 0; background: var(--surface); }
.pf-exec-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.pf-pay { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0; font: 13px var(--mono); }
.pf-pay span:first-child { color: var(--act); font-weight: 650; }
.pf-hashes { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 4px; }
.pf-rule { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--act-soft); border: 1px solid color-mix(in srgb, var(--act) 30%, transparent); display: grid; gap: 6px; }
.pf-rule .k { font-size: 11.5px; font-weight: 600; color: var(--act); }
.pf-rule code { font-size: 11.5px; word-break: break-word; }
.pf-scroll { max-height: 320px; overflow: auto; }
.pf-seal { display: grid; gap: 8px; position: sticky; top: 70px; }
.pf-seal-step { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--ink-2); position: relative; }
.pf-seal-step:not(:last-of-type)::after { content: "↓"; position: absolute; bottom: -14px; left: 50%; color: var(--accent); font-size: 12px; z-index: 1; }
.pf-seal-step .k { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.pf-seal-step.ok { border-color: color-mix(in srgb, var(--act) 40%, var(--line)); }
.pf-seal-step.bad { border-color: color-mix(in srgb, var(--stop) 45%, var(--line)); }
.pf-verdict { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.pf-verdict .ico { width: 20px; height: 20px; }
.pf-verdict.ok { background: var(--act-soft); color: var(--act); border: 1px solid color-mix(in srgb, var(--act) 40%, transparent); }
.pf-verdict.bad { background: var(--stop-soft); color: var(--stop); border: 1px solid color-mix(in srgb, var(--stop) 40%, transparent); }
.pf-tamper { display: grid; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line-strong); }
.pf-tampered { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); }
.pf-fails { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--stop); }
.pf-fails .ico { width: 12px; height: 12px; }
.pf-drop { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1.5px dashed var(--line-strong); border-radius: 10px; cursor: pointer; font-size: 12px; color: var(--ink-2); }
.pf-drop:hover { border-color: var(--accent); }
.pf-drop > span { display: grid; }
.pf-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pf-findings { padding: 16px 18px; margin-top: 18px; }
.pf-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 20px; }
.pf-findings > h3 { grid-column: 1 / -1; margin: 0; }
.pf-group h4 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; font-size: 12.5px; }
.pf-group ul, .rp-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.pf-group li, .rp-findings li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; align-items: start; color: var(--ink-2); }
.pf-group .ico, .rp-findings .ico { width: 13px; height: 13px; margin-top: 2px; }
.pf-group li.ok .ico, .rp-findings li.ok .ico { color: var(--act); }
.pf-group li.bad, .rp-findings li.bad { color: var(--stop); }

/* ---------- Attack lab ---------- */
.lab-head h1, .rp-head h1 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.lab-head h1 .ico, .rp-head h1 .ico { width: 20px; height: 20px; color: var(--accent); }
.lab-head .fine { max-width: 1100px; margin: 0; }
.lab-config { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; padding: 14px 16px; align-items: stretch; }
@media (max-width: 1000px) { .lab-config { grid-template-columns: 1fr; } }
.lab-cfg { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 6px; }
.lab-cfg legend { font-weight: 650; font-size: 12px; padding: 0 6px; color: var(--accent); }
.lab-cfg:nth-of-type(1) legend { color: var(--ink-2); }
.lab-cfg > div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12.5px; }
.lab-cfg .k { width: 150px; color: var(--muted); font-size: 12px; }
.lab-opt { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; }
.lab-opt input { accent-color: var(--accent); }
.lab-run { display: grid; gap: 8px; align-content: center; justify-items: stretch; min-width: 220px; }
.lab-progress { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.lab-progress i { display: block; height: 100%; background: var(--accent); transition: width .15s; }
.lab-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .lab-layout { grid-template-columns: 1fr; } }
.lab-list { padding: 12px; max-height: calc(100dvh - 120px); overflow: auto; position: sticky; top: 70px; }
.lab-tools { display: grid; gap: 8px; }
.lab-tools input, .ig-search { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink); font: inherit; }
.lab-pick .mono { font-size: 11px; color: var(--accent); }
.lab-badge { font: 600 10px/1 var(--mono); padding: 3px 5px; border-radius: 4px; background: var(--surface-3); color: var(--muted); }
.lab-badge.ok { background: var(--act-soft); color: var(--act); }
.lab-badge.bad { background: var(--stop-soft); color: var(--stop); }
.lab-main { display: grid; gap: 16px; min-width: 0; }
.lab-summary, .lab-scenario { padding: 16px 18px; }
.lab-compare { display: grid; gap: 8px; }
.lab-legend { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.lab-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.lab-legend .sw.a, .lab-bars .bar.a i { background: var(--yard); }
.lab-legend .sw.b, .lab-bars .bar.b i { background: var(--accent); }
.lab-metric { display: grid; grid-template-columns: minmax(180px, 330px) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 12.5px; }
.lab-metric .k { color: var(--ink-2); }
.lab-bars { display: grid; gap: 3px; }
.lab-bars .bar { display: grid; grid-template-columns: minmax(0, var(--w)) auto; gap: 8px; align-items: center; min-height: 12px; }
.lab-bars .bar i { display: block; height: 10px; border-radius: 3px; min-width: 2px; }
.lab-bars .bar b { font: 600 11.5px var(--mono); color: var(--ink-2); }
.lab-bars .bar.better b { color: var(--ink); }
@media (max-width: 700px) { .lab-metric { grid-template-columns: 1fr; } }
.lab-scenario h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.lab-scenario h2 .mono { color: var(--accent); }
.lab-notes { color: var(--ink-2); font-size: 13px; max-width: 900px; }
.lab-scenario h4, .lab-result h5 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 6px; font-weight: 650; }
.lab-outcomes { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; }
.lab-outcomes b { font-family: var(--mono); color: var(--accent); margin-right: 6px; }
.lab-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 1100px) { .lab-results { grid-template-columns: 1fr; } }
.lab-result { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); min-width: 0; }
.lab-result.ok { border-color: color-mix(in srgb, var(--act) 35%, var(--line)); }
.lab-result.bad { border-color: color-mix(in srgb, var(--stop) 45%, var(--line)); }
.lab-result h4 { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 14px; }
.lab-dl { display: grid; grid-template-columns: repeat(5, auto); gap: 2px 14px; margin: 0 0 8px; font-size: 12px; justify-content: start; }
.lab-dl dt { color: var(--muted); grid-row: 1; font-size: 11px; }
.lab-dl dd { margin: 0; grid-row: 2; font: 600 14px var(--mono); }
.lab-fails { list-style: none; margin: 0 0 8px; padding: 0; color: var(--stop); font-size: 12px; display: grid; gap: 3px; }
.lab-fails .ico { width: 12px; height: 12px; }
.lab-case { border-top: 1px solid var(--line); }
.lab-case summary { padding: 7px 0; cursor: pointer; font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lab-events, .rp-lines { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.lab-events li { display: grid; grid-template-columns: 26px 100px minmax(0, 1fr); gap: 8px; color: var(--ink-2); border-left: 2px solid currentColor; padding-left: 8px; }
.lab-events li > span:last-child, .rp-lines li > span { color: var(--ink-2); }
.lab-events .who, .rp-lines .who { font-weight: 600; color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-events .mono { color: var(--muted); }
.t-neutral { color: var(--yard); }

/* ---------- Walkthrough ---------- */
.rp-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.rp-head .fine { margin: 0; }
.rp-pick { display: grid; gap: 4px; font-size: 11.5px; color: var(--muted); }
.rp-pick select { max-width: 520px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); font: inherit; }
.rp-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .rp-layout { grid-template-columns: 1fr; } }
.rp-rail { list-style: none; margin: 0; padding: 10px; display: grid; gap: 2px; position: relative; }
.rp-stage button { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; text-align: left; padding: 8px; border-radius: 9px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--ink-2); }
.rp-stage button:hover { background: var(--surface-2); }
.rp-num { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); border: 1.5px solid var(--line-strong); color: var(--muted); }
.rp-k { font-weight: 600; font-size: 12.5px; display: flex; gap: 6px; align-items: center; }
.rp-k .ico { width: 13px; height: 13px; }
.rp-at { font: 10.5px var(--mono); color: var(--muted); }
.rp-stage.done .rp-num { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.rp-stage.current button { background: var(--surface-2); border-color: var(--accent); color: var(--ink); }
.rp-stage.current .rp-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.rp-stage.empty button { opacity: .5; }
.rp-main { padding: 20px 22px; min-height: 520px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; }
.rp-stage-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.rp-big { font: 700 44px/1 var(--mono); color: var(--accent); letter-spacing: -.04em; }
.rp-stage-head h2 { margin: 0; font-size: 20px; display: flex; gap: 8px; align-items: center; }
.rp-stage-head h2 .ico { width: 18px; height: 18px; color: var(--accent); }
.rp-stage-head p { margin: 2px 0 0; color: var(--muted); }
.rp-case { display: grid; gap: 4px; justify-items: end; font-size: 12px; max-width: 340px; text-align: right; }
@media (max-width: 900px) { .rp-stage-head { grid-template-columns: auto minmax(0, 1fr); } .rp-case { grid-column: 1 / -1; justify-items: start; text-align: left; } }
.rp-body { animation: rise .3s ease-out; min-width: 0; overflow-x: auto; }
.rp-controls { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.rp-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 13px; }
.rp-dl dt { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.rp-dl dd { margin: 0; word-break: break-word; }
.rp-agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-agents > li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.rp-agent-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.rp-warn, .rp-ok { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.rp-warn { color: var(--person); } .rp-ok { color: var(--act); }
.rp-warn .ico, .rp-ok .ico { width: 14px; height: 14px; }
.rp-payee { display: grid; gap: 6px; justify-items: start; padding: 18px 20px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--t) 45%, var(--line)); background: color-mix(in srgb, var(--t) 8%, var(--surface)); }
.rp-payee b { font: 700 26px var(--mono); color: var(--t); text-transform: uppercase; letter-spacing: .02em; }
.rp-payee .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; display: flex; gap: 6px; align-items: center; }
.rp-lines li { display: grid; grid-template-columns: 130px 120px minmax(0, 1fr); gap: 10px; border-left: 2px solid currentColor; padding: 4px 0 4px 10px; }
.rp-lines time { font: 11px var(--mono); color: var(--muted); }
.rp-lines .docs { grid-column: 3; }
@media (max-width: 700px) { .rp-lines li { grid-template-columns: minmax(0, 1fr); } .rp-lines .docs { grid-column: 1; } }
.rp-exec { border: 1px solid color-mix(in srgb, var(--act) 35%, var(--line)); background: var(--act-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; }
.rp-findings { max-height: 300px; overflow: auto; margin-top: 10px; }

/* ---------- Investigations additions ---------- */
.ig-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ig-search { max-width: 360px; }
.ig-graph-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ig-graph-head h3 { margin: 0; }
.ig-zoom { display: inline-flex; gap: 4px; }
.ig-graph-wrap { cursor: grab; touch-action: none; border: 1px solid var(--line); border-radius: 10px; background:
  radial-gradient(circle, color-mix(in srgb, var(--line-strong) 60%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--surface-2); }
.ig-graph-wrap:active { cursor: grabbing; }
.ig-graph { user-select: none; }
.ig-node { cursor: pointer; }
.ig-node.sel rect { stroke: var(--accent) !important; stroke-width: 2.5px; }
.ig-node.hit rect { stroke: var(--accent) !important; stroke-dasharray: 3 2; }
.ig-node.dim, .ig-edge.dim { opacity: .22; }
.ig-acct.verified rect { stroke: var(--act); }
.ig-edge.t-accent { color: var(--accent); }
.ig-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--ink-2); }
.ig-legend li { display: inline-flex; gap: 6px; align-items: center; }
.ig-legend svg line { stroke: currentColor; stroke-width: 2.5; }
.ig-legend li.t-muted { color: var(--muted); }
.ig-legend li.t-accent { color: var(--accent); }
.ig-legend li { --c: currentColor; }
.ig-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 14px; }
@media (max-width: 1100px) { .ig-split { grid-template-columns: 1fr; } }
.ig-inspector h4 { margin: 0 0 6px; display: flex; gap: 6px; align-items: center; }
.ig-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ig-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.ig-facts li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; cursor: pointer; }
.ig-facts li:hover { border-color: var(--accent); }
.ig-status { font-size: 11.5px; color: var(--ink-2); font-style: italic; margin-top: 2px; }
.ig-tl-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ig-edge.t-accent .line { stroke: var(--accent); } .ig-edge.t-accent text { fill: var(--accent); }
.ig-pick[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.ig-graph-wrap { overflow: hidden; }
.ig-graph { min-width: 0; }
.btn:not(.accent):not(.small) { background: var(--surface-3); color: var(--ink); border: 1px solid var(--line-strong); }
.btn:not(.accent):not(.small):hover { border-color: var(--accent); }
/* Grid children shrink to the screen; wide content scrolls inside them. */
.cc-view > *, .ag-view > *, .pf-view > *, .lab-view > *, .rp-view > *, .cc-grid > *, .cc-side > *, .pf-layout > *, .lab-layout > *, .rp-layout > *, .ig-layout > *, .pf-grid > *, .lab-main > * { min-width: 0; }
@media (max-width: 620px) {
  .cc-view, .ag-view, .pf-view, .lab-view, .rp-view, .ig-view { padding: 14px 16px 32px; }
  .cc-hero h1 { font-size: 22px; }
  .topbar { padding: 10px 16px; gap: 10px; }
  .live { margin-left: 0; max-width: 100%; }
  .pf-main, .rp-main { padding: 16px; }
  .rp-big { font-size: 32px; }
  .lab-cfg .k { width: 100%; }
}
.rp-pick { min-width: 0; max-width: 100%; }
.rp-pick select { width: 100%; }
@media (max-width: 900px) { .cc-key { justify-items: start; } }
.detail > .legend, .flow-card > .legend { margin-top: 6px; font-size: 11.5px; }

/* ---------- Decision Room ---------- */
.dr-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.dr-top h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
.dr-sec { margin-top: 18px; }
.dr-sec h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; font-weight: 650; display: flex; gap: 6px; align-items: center; }
.dr-alts { width: 100%; border-collapse: collapse; font-size: 13px; }
.dr-alts th, .dr-alts td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dr-alts thead th { font-size: 12px; color: var(--ink); background: var(--surface-2); }
.dr-alts tbody th { color: var(--muted); font-weight: 550; width: 180px; }
.dr-alts td { font-family: var(--mono); font-size: 12.5px; }
.dr-ok { display: inline-block; width: 20px; }
.dr-promise { display: block; font-family: var(--font); font-size: 12px; padding: 4px 8px; margin: 2px 0; border-left: 2px solid var(--stop); background: var(--stop-soft); border-radius: 0 6px 6px 0; }
.dr-views { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dr-view { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); display: grid; gap: 6px; justify-items: start; }
.dr-view-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dr-view .fine { margin: 0; }
.dr-ledger tr.code td { background: color-mix(in srgb, var(--stop) 6%, transparent); }
.dr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1000px) { .dr-split { grid-template-columns: 1fr; } }
.dr-auth, .dr-watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.dr-auth li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dr-auth li.bad { color: var(--stop); }
.dr-watch li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.dr-watch li.ok { border-color: color-mix(in srgb, var(--act) 35%, var(--line)); } .dr-watch li.ok > .ico { color: var(--act); }
.dr-watch li.bad { border-color: color-mix(in srgb, var(--person) 50%, var(--line)); background: var(--person-soft); } .dr-watch li.bad > .ico { color: var(--person); }
.dr-watch li .fine { margin: 2px 0 0; }

/* ---------- Commitment Graph ---------- */
.cg-main { padding: 16px 18px; }
.cg-main h3 { margin: 18px 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.ig-node.made rect { stroke: var(--act); }
.cg-track { fill: var(--surface-3); stroke: none !important; }
.cg-fill { fill: var(--accent); stroke: none !important; }
.cg-fill.over { fill: var(--stop); }
.cc-ctas { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .cc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cc-ctas { justify-content: flex-start; } }
a.btn { text-decoration: none; }
.demo-mode { margin-left: auto; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--person); background: var(--person-soft); border: 1px solid color-mix(in srgb, var(--person) 40%, transparent); padding: 6px 9px; border-radius: 6px; white-space: nowrap; }
.demo-mode:not([hidden]) + .live { margin-left: 12px; }

/* ---------- Google-style finish (light) ---------- */
h1, h2, .brand, .cc-hero h1, .pf-top h2, .dr-top h2, .lab-head h1, .rp-head h1, .rp-stage-head h2, .lab-scenario h2, .ig-main h2, .d-head h1 { font-weight: 400; letter-spacing: 0; }
.cc-hero h1 { font-size: 32px; line-height: 1.2; }
.card, .cc-tile, .pf-block, .lab-result, .dr-view, .ag-job, .ag-yard-list li, .rp-agents > li, .pf-seal-step, .dr-watch li, .pf-exec, .ig-facts li { border-radius: var(--radius); box-shadow: none; }
.card { background: var(--surface); border: 1px solid var(--line); }
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.brand { font-size: 20px; color: var(--muted); }
.brand-sub { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); border-left-color: var(--line); }
.tabs { background: transparent; border: 0; padding: 0; gap: 0; border-radius: 0; }
.tabs button { border-radius: 0; padding: 10px 14px; color: var(--muted); font-weight: 500; }
.tabs button:hover { color: var(--ink); background: var(--surface-2); }
.tabs button[aria-selected="true"] { background: transparent; color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.tabs .n { background: var(--stop); color: #fff; }
.seg-tabs { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.seg-tabs button { border-radius: 0; color: var(--muted); }
.seg-tabs button[aria-selected="true"] { background: transparent; color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.card h3, .dr-sec h3, .cg-main h3, .lab-scenario h4, .lab-result h5, .pf-table th { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.pill { border-radius: 999px; font-weight: 500; }
.chip { border-radius: 8px; border-color: var(--line); background: var(--surface); color: var(--ink-2); font-weight: 500; }
.chip[aria-checked="true"] { background: var(--accent-soft); color: #174ea6; border-color: var(--accent-soft); }
.btn { border-radius: 999px; font-weight: 500; }
.btn.accent, .btn.small.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.accent:hover { box-shadow: var(--shadow); opacity: 1; }
.btn.small, .btn:not(.accent):not(.small) { background: var(--surface); color: var(--accent); border: 1px solid var(--line); }
.btn.small:hover, .btn:not(.accent):not(.small):hover { background: var(--accent-soft); border-color: var(--line); }
.cc-tile { background: var(--surface); }
.cc-tile::before { display: none; }
.cc-tile:hover { border-color: var(--line); box-shadow: var(--shadow); background: var(--surface); }
.cc-v { font: 400 36px/1.1 var(--display); }
.cc-l { font-weight: 500; }
.cc-stage .ico { color: var(--accent); }
.cc-n { font-family: var(--display); font-weight: 400; font-size: 26px; }
.cc-arrow { background: var(--line); opacity: 1; }
.cc-arrow::after { border-left-color: var(--line-strong); }
.pf-text { background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; font-family: var(--font); font-size: 14px; line-height: 1.75; color: var(--ink); }
.pf-text mark { background: #fef7e0; border-bottom: 2px solid #f9ab00; color: var(--ink); }
.pf-ico { background: var(--accent-soft); color: var(--accent); border: 0; border-radius: 50%; }
.pf-chain::before { background: var(--line); opacity: 1; }
.pf-block::before { border-color: var(--accent); background: var(--surface); }
.pf-block { background: var(--surface); }
.pf-block.open { border-color: var(--line); box-shadow: var(--shadow); }
.pf-seal-step { background: var(--surface); }
.pf-verdict { border-radius: var(--radius); }
.dr-alts thead th { background: var(--surface-2); }
.dr-promise { background: var(--stop-soft); border-left-color: var(--stop); border-radius: 0 4px 4px 0; }
.dr-view { background: var(--surface); }
.ig-graph-wrap { background: var(--surface-2); background-image: none; }
.ig-node rect, .ig-node.ig-vnd rect { fill: var(--surface); }
.ig-node.ig-acct.flagged rect { fill: var(--stop-soft); }
.ig-edge text { stroke: var(--surface-2); }
.cg-track { fill: var(--surface-3); }
.cg-fill { fill: var(--accent); }
.lab-badge { border-radius: 999px; padding: 3px 7px; }
.lab-legend .sw.a, .lab-bars .bar.a i { background: #9aa0a6; }
.lab-bars .bar.b i { background: var(--accent); }
.lab-cfg legend { color: var(--accent); }
.rp-big { font-family: var(--display); font-weight: 400; color: var(--accent); }
.rp-stage.done .rp-num { background: var(--accent-soft); border-color: var(--accent-soft); color: #174ea6; }
.rp-stage.current button, .pf-pick[aria-current="true"], .lab-pick[aria-current="true"], .ig-pick[aria-current="true"] { background: var(--accent-soft); border-color: transparent; box-shadow: none; }
.pf-pick, .lab-pick { border-radius: 0 999px 999px 0; }
.ag-job.sel { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.demo-mode { border-radius: 999px; text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 12px; font-weight: 500; background: #fef7e0; color: #b06000; border-color: #fde293; }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; }
.banner { border-radius: var(--radius); }

/* ---------- About ---------- */
.ab-view { max-width: 1480px; margin: 0 auto; padding: 22px 24px 60px; display: grid; gap: 18px; }
.ab-head h1 { font-size: 34px; margin: 0 0 6px; }
.ab-head .fine { margin: 0; max-width: 900px; }
.ab-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.ab-layout > * { min-width: 0; }
@media (max-width: 1000px) { .ab-layout { grid-template-columns: 1fr; } .ab-toc { position: static !important; } }
.ab-toc { padding: 14px 10px; position: sticky; top: 76px; }
.ab-toc h3 { padding: 0 8px; }
.ab-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ab-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; padding: 7px 10px; border-radius: 0 999px 999px 0; text-decoration: none; color: var(--ink-2); font-size: 13px; }
.ab-toc a:hover { background: var(--accent-soft); color: #174ea6; }
.ab-toc a span { font: 500 11px/1.6 var(--mono); color: var(--muted); }
.ab-body { display: grid; gap: 16px; }
.ab-sec { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 22px 24px; scroll-margin-top: 80px; }
.ab-num { font: 400 22px/1.2 var(--display); color: var(--accent); }
.ab-text h2 { margin: 0 0 8px; font-size: 22px; }
.ab-text p, .ab-text li { color: var(--ink-2); font-size: 14.5px; line-height: 1.65; max-width: 980px; }
.ab-text ul { padding-left: 18px; margin: 8px 0; display: grid; gap: 6px; }
.ab-fig { grid-column: 2; margin: 10px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-x: auto; }
.ab-fig pre.mermaid { margin: 0; display: flex; justify-content: center; font: 12px/1.5 var(--mono); color: var(--muted); background: none; }
.ab-fig pre.mermaid:not([data-processed]) { visibility: hidden; min-height: 120px; }
.ab-fig pre.mermaid.offline { visibility: visible; display: block; white-space: pre; }
.ab-fig svg { max-width: 100%; height: auto; }
@media (max-width: 700px) { .ab-sec { grid-template-columns: 1fr; padding: 18px 16px; } .ab-fig { grid-column: 1; } }
.tabs button { padding: 10px 11px; }
@media (max-width: 1560px) { .brand-sub { display: none; } }
.topbar { flex-wrap: nowrap; }
.tabs { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1280px) { .topbar { flex-wrap: wrap; } .tabs { order: 3; flex-basis: 100%; } }