/* CounterSign dashboard. One ground, one ink, one accent (signature green).
   Status colour always sits beside a word; it is never the only signal. */
/* C37: a dark control-room ground by default; the light theme stays available
   from the top bar. The money constellation itself is always night-sky dark. */
:root{
  --sans:"IBM Plex Sans",ui-sans-serif,"Segoe UI",system-ui,sans-serif;
  --cond:"IBM Plex Sans Condensed","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r-lg:18px;--r-md:10px;--r-sm:6px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-move:cubic-bezier(0.77,0,0.175,1);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{margin:0;background:var(--page);background-attachment:fixed;color:var(--ink);font:400 15px/1.5 var(--sans);font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft);color:var(--ink)}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--ink);text-wrap:balance}
h1{font-size:30px;line-height:1.15;letter-spacing:-0.022em}
h2{font-size:20px;line-height:1.25;letter-spacing:-0.012em}
h3{font-size:15px;line-height:1.35}
h4{font-size:13px;color:var(--ink-2);font-weight:500}
p{margin:0;text-wrap:pretty}
a{color:var(--accent-ink);text-underline-offset:3px}
code,.mono,pre{font-family:var(--mono);font-size:12.5px}
.sprite{position:absolute}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:var(--surface);padding:8px 12px;border-radius:var(--r-sm)}
.skip:focus{top:12px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
[hidden]{display:none!important}

/* Persistent label from the server. Never dismissible. */
.simulation{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:6px 16px;background:var(--ink);color:var(--surface);font-size:13px;font-weight:500;letter-spacing:0.01em}
.simulation::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-soft)}

/* Buttons */
button,.button{font:inherit;cursor:pointer}
.primary,.secondary,.ghost,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:var(--r-md);font-weight:500;font-size:14px;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 150ms ease,box-shadow 150ms ease-out,color 150ms ease}
.primary{background:var(--accent);color:var(--on-accent)}
.secondary,.button.secondary{background:var(--surface);color:var(--ink);box-shadow:var(--ring)}
.ghost{background:transparent;color:var(--ink-2);padding:0 12px}
.primary:active:not(:disabled),.secondary:active:not(:disabled),.ghost:active:not(:disabled),.button:active{transform:scale(0.97)}
button:disabled{cursor:not-allowed;opacity:0.45}
.text-button{background:none;border:0;color:var(--ink-2);padding:8px;min-height:40px;font-size:14px;font-weight:500;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .primary:hover:not(:disabled){background:var(--accent-hover)}
  .secondary:hover:not(:disabled),.button.secondary:hover{box-shadow:var(--ring-hover)}
  .ghost:hover:not(:disabled){color:var(--ink);background:var(--sunken)}
  .text-button:hover{color:var(--ink);text-decoration-color:currentColor}
}

/* Pills: a word with a dot. Colour follows the word. */
.pill,.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;background:var(--sunken);color:var(--ink-2)}
.pill::before,.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.85}
.pill.good,.badge.allow{background:var(--accent-soft);color:var(--accent-ink)}
.pill.bad,.badge.block{background:var(--bad-soft);color:var(--bad)}
.pill.owner,.badge.wait{background:var(--owner-soft);color:var(--owner)}
.pill code{font-size:11px;opacity:0.75}
.staged{display:inline-flex;align-items:center;white-space:nowrap;height:20px;padding:0 7px;border-radius:5px;background:var(--owner-soft);color:var(--owner);font-size:11.5px;font-weight:500;letter-spacing:0.01em;vertical-align:1px}

/* Demo control deck */
.demo-bar{position:relative;background:var(--surface);box-shadow:0 1px 0 var(--line);padding:12px 24px 10px}
.demo-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.demo-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:1;min-width:260px;font-size:13.5px;color:var(--ink-2)}
.demo-head .small-label{font-size:14px;color:var(--ink);font-weight:600;letter-spacing:0;text-transform:none}
.demo-head strong{color:var(--ink);font-weight:600}
.demo-actions{display:flex;gap:8px}
.stepper{display:flex;gap:4px;list-style:none;margin:12px 0 8px;padding:0}
.stepper li{flex:var(--n,1) 1 0;min-width:0}
.stepper .day{display:block;font-size:12px;color:var(--ink-3);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper .ticks{display:flex;gap:3px}
.stepper .tick{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background-color 200ms ease}
.stepper .tick.done{background:var(--accent)}
.stepper .tick.next{background:var(--owner)}
.stepper li.current .day{color:var(--ink);font-weight:600}
.demo-steps{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;font-size:13.5px;color:var(--ink-2)}
.demo-steps p{display:flex;gap:8px;align-items:baseline;min-width:0}
.demo-steps .small-label{flex:none;width:36px;color:var(--ink-3)}
.demo-status{font-size:13px;color:var(--ink-2);margin-top:6px}
.demo-list{margin-top:4px;font-size:13px;color:var(--ink-2)}
.demo-list summary{cursor:pointer;color:var(--ink-3);padding:4px 0;width:fit-content}
.demo-list ol{margin:6px 0 4px;padding-left:20px;columns:2;column-gap:32px}
.demo-list li{margin-bottom:4px;break-inside:avoid}
.demo-list li.done{color:var(--ink-3)}
.small-label{font-size:12.5px;font-weight:500;color:var(--ink-3)}

/* Shell */
.layout{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;gap:4px;padding:20px 12px;background:var(--ground);box-shadow:1px 0 0 var(--line)}
.demo-bar:not([hidden])~.layout .sidebar{top:0}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px;color:var(--ink);font-weight:600;font-size:17px;letter-spacing:-0.01em;text-decoration:none}
.brand-mark{width:28px;height:28px;flex:none}
.brand-mark rect{fill:var(--ink)}
.brand-mark path{fill:none;stroke:var(--surface);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tagline{padding:2px 8px 16px 46px;font-size:12.5px;color:var(--ink-3)}
.sidebar nav{display:flex;flex-direction:column;gap:2px}
.sidebar nav a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:var(--r-md);color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;transition:background-color 150ms ease,color 150ms ease}
.sidebar nav a span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar nav a.nav-current{background:var(--surface);color:var(--ink);box-shadow:var(--ring)}
.sidebar nav a.nav-current .icon{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.sidebar nav a:not(.nav-current):hover{background:var(--sunken);color:var(--ink)}}
.nav-count{font-size:12px;color:var(--ink-3);font-weight:500}
.nav-count.owner{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--owner-soft);color:var(--owner);display:inline-flex;align-items:center;justify-content:center}
.sidebar-bottom{margin-top:auto;display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12.5px;color:var(--ink-3)}
.mode-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
main{min-width:0;outline:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 32px;font-size:13.5px;color:var(--ink-3)}
.crumbs{display:flex;gap:8px;align-items:center}
.crumbs #breadcrumb{color:var(--ink);font-weight:500}
.slash{color:var(--line)}
.clock strong{color:var(--ink);font-weight:500}
.content{max-width:1180px;padding:8px 32px 48px;display:flex;flex-direction:column;gap:24px}
.footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}

/* Panels */
.panel,.view-card,.desk,.detail,.callout{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--ring)}
.view-card{padding:20px 24px;min-width:0}
.view-card>h3{margin-bottom:12px}
#view-body{display:flex;flex-direction:column;gap:28px}
#view-body>.page-head{margin-bottom:0}
.decision-main{display:flex;flex-direction:column;gap:28px;min-width:0}
.muted,.source-note{color:var(--ink-3);font-size:13px}
.empty{color:var(--ink-3);padding:16px 0}
.error{color:var(--bad);background:var(--bad-soft);padding:12px 16px;border-radius:var(--r-md);margin:0 20px 12px}

/* Incident desk home */
.intro{display:flex;flex-direction:column;gap:8px;padding-top:16px}
.intro>p:not(.source-note){max-width:62ch;color:var(--ink-2);font-size:16px}
.overview{display:flex;flex-direction:column;gap:16px}
.ledger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--ring)}
.ledger div{padding:16px 20px;display:flex;flex-direction:column-reverse;gap:2px}
.ledger div+div{box-shadow:inset 1px 0 0 var(--line)}
.ledger dt{font-size:13px;color:var(--ink-3)}
.ledger dd{margin:0;font-size:24px;font-weight:600;letter-spacing:-0.015em}
.ledger dd.owner-waiting{color:var(--owner)}
.callout{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:16px 20px;box-shadow:var(--ring),inset 0 0 0 1px oklch(0.75 0.1 80 / 0.35)}
.callout .callout-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--owner-soft);color:var(--owner)}
.callout h2{font-size:16px}
.callout p{color:var(--ink-2);font-size:14px;margin-top:2px}
.desk{overflow:hidden}
.desk-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 8px}
.count{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:4px}
.filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:4px 20px 16px}
.search{position:relative;flex:1 1 220px;display:flex;align-items:center}
.search .icon{position:absolute;left:12px;color:var(--ink-3);width:16px;height:16px}
input[type=search],select,textarea,input[type=password],input[type=text]{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:0;border-radius:var(--r-md);box-shadow:var(--ring);min-height:40px;padding:8px 12px;transition:box-shadow 150ms ease-out}
input[type=search]{width:100%;padding-left:36px}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:var(--focus)}
.select{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.segmented{display:inline-flex;padding:3px;border-radius:12px;background:var(--sunken);gap:2px}
.segmented button{min-height:34px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--ink-2);font-size:13.5px;font-weight:500;transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease-out}
.segmented button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--ring)}
.incident-list table{width:100%;border-collapse:collapse}
.incident-list th{font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:left;padding:10px 12px;box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line);background:var(--ground)}
.incident-list th:first-child,.incident-list td:first-child{padding-left:20px}
.incident-list th:last-child,.incident-list td:last-child{padding-right:20px}
.incident-list td{padding:14px 12px;box-shadow:inset 0 -1px 0 var(--line);vertical-align:middle;font-size:14px}
.incident-list tr:last-child td{box-shadow:none}
.incident-list .num{text-align:right;white-space:nowrap}
.incident-list tbody tr{transition:background-color 150ms ease}
.incident-list tbody tr.selected{background:var(--accent-soft)}
@media (hover:hover) and (pointer:fine){.incident-list tbody tr:not(.selected):hover{background:var(--ground)}}
.row-title{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}
.row-title:focus-visible{box-shadow:var(--focus);border-radius:var(--r-sm)}
.row-title strong{font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.row-title span{font-size:12.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center}
.table-footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;font-size:12.5px;color:var(--ink-3);box-shadow:inset 0 1px 0 var(--line)}
.detail{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}
.detail-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.detail-body h2{font-size:16px}
.detail-body p{color:var(--ink-2);font-size:14px}
.detail-side{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Routed views */
.workspace-view{display:flex;flex-direction:column;gap:16px;padding-top:16px}
.view-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.record-picker{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.record-picker select{min-width:min(420px,100%);max-width:100%}
.record-picker{max-width:100%;min-width:0}
.record-picker select{flex:1 1 auto;min-width:0}
.view-notice{background:var(--owner-soft);color:var(--owner);padding:10px 14px;border-radius:var(--r-md);font-size:14px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.page-head p{color:var(--ink-2);margin-top:6px;max-width:68ch}
.meta-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-top:6px}
table{width:100%;border-collapse:collapse;font-size:14px}
.table-scroll{overflow-x:auto}
.table-scroll th{font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:left;padding:8px 12px 8px 0;box-shadow:inset 0 -1px 0 var(--line)}
.table-scroll td{padding:10px 12px 10px 0;box-shadow:inset 0 -1px 0 var(--line);vertical-align:top}
.table-scroll tr:last-child td{box-shadow:none}
.table-scroll td.num,.table-scroll th.num{text-align:right}
td p{margin:0}
pre{margin:0;padding:12px 14px;background:var(--sunken);border-radius:var(--r-md);overflow:auto;max-height:360px;line-height:1.55;color:var(--ink-2)}
details.tech{margin-top:16px}
details.tech>summary,details>summary{cursor:pointer;color:var(--ink-2);font-size:13.5px;font-weight:500;padding:6px 0;width:fit-content;list-style-position:inside}
details.tech[open]>summary{margin-bottom:10px}
dl.facts{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 20px;margin:0;font-size:14px}
dl.facts dt{color:var(--ink-3)}
dl.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* Decision */
.decision-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:28px;align-items:start}
.decision-side{position:sticky;top:96px;min-width:0;display:flex;flex-direction:column;gap:28px}
.summary{font-size:17px;line-height:1.55;color:var(--ink);max-width:62ch}
.summary strong{font-weight:600}
.verdict{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.verdict .pill{height:30px;padding:0 12px;font-size:14px}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.checks li{display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:start;padding:10px 0;box-shadow:inset 0 -1px 0 var(--line)}
.checks li:last-child{box-shadow:none}
.mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.mark .icon{width:14px;height:14px;stroke-width:2.25}
.mark.good{background:var(--accent-soft);color:var(--accent-ink)}
.mark.bad{background:var(--bad-soft);color:var(--bad)}
.mark.owner{background:var(--owner-soft);color:var(--owner)}
.mark.quiet{background:var(--sunken);color:var(--ink-3)}
.checks .check-name{font-weight:500;font-size:14px}
.checks .check-why{display:block;color:var(--ink-2);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.checks code{font-size:11px;color:var(--ink-3)}
.checks .outcome{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.flag{margin:0 0 10px;padding:12px 14px;border-radius:var(--r-md);background:var(--bad-soft);color:var(--ink)}
.flag strong{color:var(--bad);font-size:13px}
.flag p{margin-top:4px;font-size:14px;overflow-wrap:anywhere}
.flag small{color:var(--ink-3)}
.signature{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-md);background:var(--sunken);font-family:var(--mono);font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.signature .full{position:absolute;left:-9999px}
.copy{margin-left:auto;display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--ink-3);transition:background-color 150ms ease,color 150ms ease,transform 160ms var(--ease-out)}
.copy:active{transform:scale(0.95)}
@media (hover:hover) and (pointer:fine){.copy:hover{background:var(--surface);color:var(--ink)}}
.owner-panel label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-3);margin-top:12px}
.owner-panel textarea{resize:vertical;min-height:64px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.owner-panel p{font-size:14px;color:var(--ink-2)}
.trace{list-style:none;margin:0;padding:0;position:relative}
.trace li{position:relative;padding:0 0 16px 28px}
.trace li:last-child{padding-bottom:0}
.trace li::before{content:"";position:absolute;left:7px;top:20px;bottom:0;width:1px;background:var(--line)}
.trace li:last-child::before{display:none}
.trace .dot{position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.trace .dot.good{box-shadow:inset 0 0 0 4.5px var(--accent)}
.trace .dot.bad{box-shadow:inset 0 0 0 4.5px var(--bad)}
.trace .dot.owner{box-shadow:inset 0 0 0 4.5px var(--owner)}
.trace strong{font-size:14px;font-weight:500}
.trace p,.trace ul{font-size:13.5px;color:var(--ink-2);margin:2px 0 0}
.trace ul{padding-left:16px}
.refs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;padding:0;list-style:none}
.refs li{font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:6px;background:var(--sunken);color:var(--ink-2);overflow-wrap:anywhere}

/* Runs */
.run-total{font-size:34px;font-weight:600;letter-spacing:-0.025em}
.lines{display:grid;gap:0}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 0;box-shadow:inset 0 -1px 0 var(--line)}
.line:last-child{box-shadow:none}
.line .who{font-weight:500}
.line .what{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.line .amt{font-weight:600;font-size:16px;text-align:right}
.held{color:var(--owner)}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

/* Cash */
.cash-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.cash-hero .big{font-size:40px;font-weight:600;letter-spacing:-0.03em;line-height:1}
.cash-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--sunken);margin:20px 0 10px;gap:2px}
.cash-bar span{display:block;height:100%;min-width:2px}
.cash-bar .reserved{background:var(--owner)}
.cash-bar .free{background:var(--accent)}
.cash-bar .out{background:var(--ink-3)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--ink-2);list-style:none;margin:0;padding:0}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.formula{display:grid;grid-template-columns:1fr auto;gap:0;margin:0}
.formula dt,.formula dd{padding:10px 0;box-shadow:inset 0 -1px 0 var(--line);margin:0}
.formula dd{text-align:right;font-weight:500}
.formula dt:last-of-type,.formula dd:last-of-type{box-shadow:none;font-weight:600;color:var(--ink)}
.formula dt{color:var(--ink-2)}
.large-amount{font-size:28px;font-weight:600;letter-spacing:-0.02em;margin:4px 0 8px}

/* Money graph */
.graph-scroll{overflow-x:auto;margin:8px -4px 16px;padding:4px}
.money-graph{display:block;min-width:720px;width:100%;height:auto}
.money-graph .edge{fill:none;stroke:var(--ink-3);stroke-width:1.25}
.money-graph marker path{fill:var(--ink-3)}
.money-graph .edge-label{font:500 11.5px var(--sans);fill:var(--ink-2)}
.money-graph .edge-label-bg{fill:var(--surface)}
.money-graph .node rect{fill:var(--surface);stroke:var(--line);stroke-width:1}
.money-graph .node.dispute rect{stroke:var(--bad);stroke-opacity:0.5}
.money-graph .node.reservation rect{stroke:var(--owner);stroke-opacity:0.6}
.money-graph .node-title{font:600 13px var(--sans);fill:var(--ink)}
.money-graph .node-meta,.money-graph .node-kind{font:400 12px var(--sans);fill:var(--ink-3)}
.money-graph .node-amount{font:600 13px var(--sans);fill:var(--ink)}

/* Audit */
.timeline{list-style:none;margin:0;padding:0}
.timeline>li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:12px 0;box-shadow:inset 0 -1px 0 var(--line)}
.timeline>li:last-child{box-shadow:none}
.timeline time{font-size:13px;color:var(--ink-3)}
.timeline .event{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.timeline .actor{font-size:12.5px;color:var(--ink-3)}
.timeline details{margin-top:4px}

/* Try to trick the agent */
.attacks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.attack{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--ring);transition:box-shadow 150ms ease-out,transform 160ms var(--ease-out)}
.attack:active{transform:scale(0.98)}
.attack[aria-pressed="true"]{box-shadow:0 0 0 1.5px var(--accent)}
.attack:focus-visible{box-shadow:var(--focus)}
.attack[aria-disabled="true"]{cursor:not-allowed;opacity:0.55}
@media (hover:hover) and (pointer:fine){.attack:not([aria-disabled="true"]):hover{box-shadow:var(--ring-hover)}}
.attack strong{font-weight:500}
.attack span{font-size:13px;color:var(--ink-3)}
.compose{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.compose textarea{width:100%;min-height:84px;resize:vertical}
.compose-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}
.verdict-banner{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md)}
.verdict-banner.bad{background:var(--bad-soft)}
.verdict-banner.owner{background:var(--owner-soft)}
.verdict-banner.good{background:var(--accent-soft)}
.verdict-banner h3{font-size:16px}
.verdict-banner p{font-size:14px;color:var(--ink-2);margin-top:2px}
.reveal{animation:reveal 260ms var(--ease-out) both}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Replay */
.replay-disclosure{color:var(--ink-2);max-width:72ch}
.replay-controls,.replay-import{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.replay-controls label,.replay-import label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-3);flex:1 1 200px}
.replay-import input{font-size:13px}
.replay-transport{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}
.replay-transport output{font-size:13px;color:var(--ink-3)}
.replay-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.replay-lane h2{margin-bottom:6px}
.replay-lane h3{margin:16px 0 8px}
.replay-result{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.replay-actions,.replay-payouts{list-style:none;margin:0;padding:0}
.replay-actions li,.replay-payouts li{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 0;box-shadow:inset 0 -1px 0 var(--line);font-size:13.5px}
.replay-actions time{font-size:12px;color:var(--ink-3);width:100%}
.replay-lane dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13px}
.replay-lane dd{margin:0}

/* Entrance: one authored moment per view, never on routine updates. */
.enter{animation:enter 300ms var(--ease-out) both}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .enter,.reveal{animation:fade 200ms ease both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  *{transition-property:color,background-color,opacity!important}
}

@media (max-width:1080px){
  .decision-grid{grid-template-columns:1fr}
  .decision-side{position:static}
  .ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger div:nth-child(3){box-shadow:inset 0 1px 0 var(--line)}
  .ledger div:nth-child(4){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line)}
}
@media (max-width:860px){
  .layout{display:flex;flex-direction:column}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 16px 8px;box-shadow:0 1px 0 var(--line)}
  .tagline,.sidebar-bottom{display:none}
  .sidebar nav{display:flex;order:3;width:100%;overflow-x:auto;flex-direction:row;gap:4px;padding:8px 0 4px;scrollbar-width:none}
  .sidebar nav a{flex:none}
  .sidebar nav a span:nth-child(2){overflow:visible}
  .topbar{padding:0 16px;min-height:44px}
  .content{padding:8px 16px 40px}
  .demo-bar{position:static;padding:12px 16px}
  .demo-steps{grid-template-columns:1fr}
  .demo-list ol{columns:1}
  .split,.replay-lanes{grid-template-columns:1fr}
  .timeline>li{grid-template-columns:1fr;gap:4px}
  .incident-list thead{display:none}
  .incident-list tr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px;box-shadow:inset 0 -1px 0 var(--line)}
  .incident-list td{padding:0!important;box-shadow:none!important}
  .incident-list td.hide-sm{display:none}
  .incident-list td.num{grid-column:2;justify-self:end;font-weight:500}
  .detail{flex-direction:column;align-items:flex-start}
  .callout{grid-template-columns:auto 1fr}
  .callout .button{grid-column:1 / -1;justify-self:start}
  h1{font-size:26px}
}
@media (max-width:520px){
  .ledger{grid-template-columns:1fr 1fr}
  .ledger dd{font-size:20px}
  .filters{padding:4px 16px 12px}
  .segmented{width:100%;overflow-x:auto}
  .stepper .day{font-size:11px}
  .demo-head{min-width:0}
  .clock #clock-label{display:none}
  .line{grid-template-columns:1fr auto}
  .line .pill{display:none}
}

/* ---------------------------------------------------------------------------
   C37 command center. Original artwork: SVG spheres, halos and particles drawn
   by scene.mjs. Ambient motion (particles, orbit rings) stops entirely under
   prefers-reduced-motion; the scene then renders as a still diagram.
   ------------------------------------------------------------------------- */

/* Shell in the control-room style */
.simulation{background:linear-gradient(90deg,oklch(0.3 0.07 70 / 0.95),oklch(0.26 0.05 60 / 0.95));color:oklch(0.95 0.06 85);box-shadow:0 1px 0 oklch(0.85 0.12 85 / 0.25);backdrop-filter:blur(10px)}
.simulation::before{background:var(--gold);box-shadow:0 0 10px var(--gold)}
:root[data-theme="light"] .simulation{background:var(--ink);color:var(--surface);box-shadow:none}
.sidebar{background:linear-gradient(180deg,oklch(0.19 0.024 186 / 0.75),oklch(0.15 0.018 188 / 0.75));backdrop-filter:blur(18px);box-shadow:1px 0 0 var(--line)}
:root[data-theme="light"] .sidebar{background:var(--ground)}
.brand-mark rect{fill:oklch(0.82 0.12 85)}
.brand-mark path{stroke:oklch(0.22 0.04 70)}
.sidebar nav a.nav-current{background:linear-gradient(90deg,oklch(0.84 0.13 172 / 0.16),oklch(0.84 0.13 172 / 0.04));color:var(--ink);box-shadow:inset 2px 0 0 var(--accent),0 0 0 1px oklch(0.84 0.13 172 / 0.16)}
:root[data-theme="light"] .sidebar nav a.nav-current{background:var(--surface);box-shadow:var(--ring)}
.panel,.view-card,.desk,.detail,.callout,.ledger{background:var(--card);backdrop-filter:blur(16px)}
.view-card,.desk,.detail,.callout,.ledger{box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.05),var(--ring)}
.primary{background:linear-gradient(180deg,oklch(0.88 0.12 172),oklch(0.78 0.13 175));box-shadow:0 0 0 1px oklch(0.9 0.1 172 / 0.4),0 8px 22px -8px oklch(0.84 0.13 172 / 0.6)}
:root[data-theme="light"] .primary{background:var(--accent);box-shadow:none}
.top-right{display:flex;align-items:center;gap:12px}
.theme-toggle{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);box-shadow:0 0 0 1px var(--line);transition:color 150ms ease,background-color 150ms ease}
@media (hover:hover) and (pointer:fine){.theme-toggle:hover{color:var(--ink);background:var(--sunken)}}
body[data-route="overview"] .content>.footer{display:none}
body[data-route="overview"] .content{padding-bottom:0}

/* Floating demo dock */
@media (min-width:861px){
  .demo-bar{position:fixed;z-index:30;left:264px;right:24px;bottom:16px;padding:12px 18px 10px;border-radius:20px;
    background:linear-gradient(180deg,oklch(0.25 0.03 183 / 0.86),oklch(0.18 0.022 186 / 0.9));backdrop-filter:blur(20px) saturate(1.2);
    box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.07),0 0 0 1px oklch(0.85 0.1 180 / 0.18),0 24px 60px -18px oklch(0 0 0 / 0.75),0 0 40px -10px oklch(0.84 0.13 172 / 0.25)}
  :root[data-theme="light"] .demo-bar{background:oklch(0.995 0.003 175 / 0.92);box-shadow:var(--ring-hover)}
  .demo-bar:not([hidden])~.layout main{padding-bottom:150px}
  body[data-route="overview"] .demo-bar:not([hidden])~.layout main{padding-bottom:118px}
  body[data-route="overview"] .demo-bar .stepper{display:none}
  .demo-bar .demo-list{position:relative}
  .demo-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:2px;align-items:center}
  .demo-bar .demo-top{display:contents}
  .demo-bar .demo-head{grid-column:1;grid-row:1;min-width:0;gap:4px 14px}
  .demo-bar .demo-actions{grid-column:2;grid-row:1 / span 4;align-self:center}
  .demo-bar .stepper,.demo-bar .demo-steps,.demo-bar .demo-status,.demo-bar .demo-list{grid-column:1}
  .demo-bar .stepper{margin:6px 0 2px}
  .demo-bar .demo-steps{margin-top:2px}
  .demo-bar .demo-steps p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .demo-bar .demo-status{margin-top:0;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .demo-bar .demo-list{margin-top:0;font-size:12.5px}
  .demo-bar .demo-list summary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0}
  body[data-route="overview"] .layout{grid-template-columns:76px minmax(0,1fr)}
  body[data-route="overview"] .sidebar{width:76px;z-index:40;overflow:hidden;transition:width 280ms var(--ease-out),box-shadow 280ms ease}
  body[data-route="overview"] .sidebar:hover,body[data-route="overview"] .sidebar:focus-within{width:248px;box-shadow:1px 0 0 var(--line),30px 0 70px -20px oklch(0 0 0 / 0.75)}
  body[data-route="overview"] .sidebar .brand span,body[data-route="overview"] .sidebar .tagline,body[data-route="overview"] .sidebar nav a span,body[data-route="overview"] .sidebar-bottom span:not(.mode-dot){opacity:0;transition:opacity 180ms ease;white-space:nowrap}
  body[data-route="overview"] .sidebar:is(:hover,:focus-within) :is(.brand span,.tagline,nav a span,.sidebar-bottom span){opacity:1;transition-delay:90ms}
  body[data-route="overview"] .sidebar nav a{padding:0 14px}
  body[data-route="overview"] .demo-bar{left:100px}
  .demo-bar .demo-list[open] ol{position:absolute;bottom:calc(100% + 10px);left:-6px;width:min(760px,80vw);padding:16px 16px 12px 36px;border-radius:16px;background:var(--surface);box-shadow:var(--ring-hover);z-index:2}
}
.demo-steps{margin-top:6px}
.demo-bar .stepper .tick.done{background:linear-gradient(90deg,var(--accent),oklch(0.82 0.13 200));box-shadow:0 0 8px oklch(0.84 0.13 172 / 0.5)}
.demo-bar .stepper .tick.next{background:var(--gold);box-shadow:0 0 8px oklch(0.86 0.13 85 / 0.6)}
.demo-running #demo-step{position:relative;overflow:hidden}
.demo-running #demo-step::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,oklch(1 0 0 / 0.35),transparent);animation:sheen 1.4s linear infinite}
@keyframes sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Command center layout */
.command{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px;padding:4px 24px 0;align-items:start}
.scene{position:relative;height:clamp(540px,calc(100vh - 226px),900px);border-radius:26px;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 70% at 52% 50%,oklch(0.26 0.05 190) 0%,oklch(0.16 0.03 195) 45%,oklch(0.1 0.018 200) 100%);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.06),0 0 0 1px oklch(0.85 0.1 180 / 0.14),0 30px 80px -30px oklch(0 0 0 / 0.8);color:#eafcf7}
.scene-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.scene-sky::before{content:"";position:absolute;inset:0;opacity:0.5;background-image:radial-gradient(1px 1px at 12% 22%,#fff8,transparent),radial-gradient(1px 1px at 72% 12%,#fff6,transparent),radial-gradient(1px 1px at 88% 64%,#fff5,transparent),radial-gradient(1px 1px at 36% 82%,#fff6,transparent),radial-gradient(1.5px 1.5px at 58% 40%,#fff4,transparent),radial-gradient(1px 1px at 22% 58%,#fff5,transparent),radial-gradient(1px 1px at 92% 30%,#fff5,transparent),radial-gradient(1px 1px at 48% 8%,#fff4,transparent)}
.scene-sky i{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:0.32;animation:drift 26s ease-in-out infinite alternate}
.scene-sky i:nth-child(1){left:-8%;top:-14%;background:oklch(0.6 0.12 190)}
.scene-sky i:nth-child(2){right:-10%;top:20%;background:oklch(0.55 0.14 330);opacity:0.18;animation-duration:32s}
.scene-sky i:nth-child(3){left:30%;bottom:-30%;background:oklch(0.62 0.12 80);opacity:0.16;animation-duration:38s}
@keyframes drift{to{transform:translate(6%,8%) scale(1.12)}}
.stage{position:absolute;inset:80px 8px 6px 104px}
.stage>svg{width:100%;height:100%;display:block;overflow:visible}
.scene-loading{position:absolute;inset:0;display:grid;place-items:center;color:oklch(0.8 0.03 180);font-size:14px}
.kpis{position:absolute;z-index:2;top:14px;left:14px;right:14px;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kpi{display:flex;flex-direction:column-reverse;gap:2px;padding:9px 14px 10px;border-radius:14px;background:oklch(0.22 0.03 190 / 0.6);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.06),0 0 0 1px oklch(0.85 0.1 180 / 0.12);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:currentColor;opacity:0.7}
.kpi dt{font-size:11.5px;font-weight:500;color:oklch(0.78 0.03 180);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi dd{margin:0;font:600 21px/1.15 var(--cond);color:#fff;letter-spacing:0.005em}
.kpi.paypal{color:var(--cyan)}.kpi.paid{color:var(--teal)}.kpi.paying{color:#8fdcff}.kpi.held{color:var(--amber)}.kpi.blocked{color:var(--red)}
.kpi.bumped{animation:bump 900ms var(--ease-out)}
@keyframes bump{30%{box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.1),0 0 0 1px currentColor,0 0 24px -4px currentColor}}
.rail-slot{position:absolute;z-index:2;left:16px;top:96px;bottom:20px;width:100px;display:flex;align-items:center}
.rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;position:relative}
.rail::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,oklch(0.85 0.08 180 / 0.35),transparent)}
.rail li{position:relative;padding-left:20px;display:flex;flex-direction:column;gap:5px;color:oklch(0.7 0.03 185);font-size:12px}
.rail li::before{content:"";position:absolute;left:1px;top:4px;width:9px;height:9px;border-radius:50%;background:oklch(0.3 0.03 190);box-shadow:0 0 0 1px oklch(0.85 0.08 180 / 0.35)}
.rail li.done{color:oklch(0.86 0.04 175)}
.rail li.done::before{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.rail li.current{color:#fff}
.rail li.current .rail-day{display:inline-block;padding:3px 10px;margin-left:-6px;border-radius:999px;background:oklch(0.3 0.04 190 / 0.9);box-shadow:0 0 0 1px oklch(0.86 0.13 85 / 0.6),0 0 16px -2px oklch(0.86 0.13 85 / 0.5);font-weight:600}
.rail li.current::before{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.rail-day{font-weight:500;white-space:nowrap}
.rail-ticks{display:flex;gap:3px}
.rail-ticks i{width:12px;height:3px;border-radius:2px;background:oklch(1 0 0 / 0.15)}
.rail-ticks i.done{background:var(--teal)}
.rail-ticks i.next{background:var(--gold);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:0.35}}
.scene-back{position:absolute;z-index:3;left:16px;top:92px;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:oklch(0.25 0.03 190 / 0.75);color:#eafcf7;font-size:13.5px;font-weight:500;backdrop-filter:blur(10px);box-shadow:0 0 0 1px oklch(0.85 0.1 180 / 0.25)}
.scene:has(.scene-back:not([hidden])) .rail-slot{display:none}
@media (hover:hover) and (pointer:fine){.scene-back:hover{background:oklch(0.3 0.04 190 / 0.9)}}
.scene-caption{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);max-width:min(560px,86%);padding:10px 18px;border-radius:999px;text-align:center;background:oklch(0.24 0.03 190 / 0.7);backdrop-filter:blur(10px);box-shadow:0 0 0 1px oklch(0.86 0.13 85 / 0.35);color:#fff3cf;font-size:14px}

/* The constellation (SVG) */
.constellation text{font-family:var(--sans)}
.constellation .edge{fill:none;stroke:oklch(0.8 0.05 190 / 0.3);stroke-width:1.6;stroke-linecap:round}
.constellation .edge.quiet{stroke:oklch(0.8 0.04 190 / 0.16)}
.constellation .edge.money{stroke:var(--teal);stroke-opacity:0.55}
.constellation .edge.money.live{stroke:var(--cyan);stroke-opacity:0.9;stroke-width:2;filter:drop-shadow(0 0 4px oklch(0.85 0.12 210 / 0.8))}
.constellation .edge.agent{stroke:var(--violet);stroke-opacity:0.65}
.constellation .edge.owner{stroke:var(--gold);stroke-opacity:0.6}
.constellation .edge.owner.waiting{stroke-opacity:0.95;filter:drop-shadow(0 0 4px oklch(0.86 0.13 85 / 0.7))}
.constellation .edge.money.planned{stroke:#8fdcff;stroke-opacity:0.7}
.constellation .edge.held{stroke:var(--amber);stroke-opacity:0.8;stroke-width:1.8}
.constellation .edge.held.thin{stroke-width:1.2;stroke-opacity:0.6}
.constellation .edge.bad{stroke:var(--red);stroke-opacity:0.7}
.constellation .edge.thin{stroke-width:1.1}
.constellation .edge.ants{stroke-dasharray:0.012 0.01;animation:ants 1.1s linear infinite}
@keyframes ants{to{stroke-dashoffset:-0.044}}
.constellation.entering .edge:not(.ants),.constellation .edge.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.15s var(--ease-out) var(--d,0ms) forwards}
.constellation.entering .edge.ants{animation:fade-in 900ms ease var(--d,0ms) both,ants 1.1s linear infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade-in{from{opacity:0}}
.spark.cyan{fill:url(#spark-cyan)}.spark.teal{fill:url(#spark-teal)}.spark.violet{fill:url(#spark-violet)}.spark.red{fill:url(#spark-red)}.spark.amber{fill:url(#spark-amber)}.spark.gold{fill:url(#spark-gold)}
.constellation.entering .sparks,.constellation.entering .tags{animation:fade-in 900ms ease 1100ms both}
.edge-tag rect{fill:oklch(0.15 0.03 195 / 0.88);stroke:currentColor;stroke-opacity:0.55}
.edge-tag text{font:600 14.5px var(--cond);fill:currentColor;letter-spacing:0.02em}
.edge-tag.paid{color:var(--teal)}.edge-tag.live{color:var(--cyan)}.edge-tag.planned{color:#9fe3ff}.edge-tag.held{color:var(--amber)}.edge-tag.owner{color:var(--gold)}
.node{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center}
.node .hit{fill:transparent}
.node .halo{opacity:0.85;transition:opacity 300ms ease}
.node .core{transform-box:fill-box;transform-origin:center;transition:transform 380ms var(--ease-out),filter 300ms ease}
.node .rim{fill:none;stroke:oklch(1 0 0 / 0.16);stroke-width:1;transition:stroke 200ms ease,stroke-width 200ms ease}
@media (hover:hover) and (pointer:fine){.node:hover .core{transform:scale(1.08);filter:brightness(1.15)}.node:hover .halo{opacity:1}}
.node:focus-visible .rim{stroke:var(--cyan);stroke-width:2.5}
.node.selected .rim{stroke:var(--gold);stroke-width:2;filter:drop-shadow(0 0 6px var(--gold))}
.n-label{fill:#effdf9;font:600 19px var(--cond);letter-spacing:0.01em}
.n-label.strong{font-size:21px;fill:#fff1c9}
.n-amount{fill:#fff;font:600 23px var(--cond)}
.n-sub{fill:oklch(0.8 0.03 180);font:500 14.5px var(--sans)}
.constellation.entering .node{animation:pop 800ms var(--ease-out) var(--d,0ms) both}
@keyframes pop{from{opacity:0;transform:scale(0.55)}}
.agent .glyph{fill:#fff;opacity:0.95}
.owner .glyph,.held .glyph{fill:none;stroke:oklch(0.25 0.05 70);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shield .glyph{fill:none;stroke:oklch(0.3 0.06 70);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.shield .orbit{fill:none;stroke:var(--gold);stroke-opacity:0.38;stroke-width:1.2;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
.shield .orbit.fast{stroke-dasharray:1 5;stroke-opacity:0.3;animation-duration:24s;animation-direction:reverse}
.demo-running .shield .orbit{animation-duration:3.5s;stroke-opacity:0.7}
.demo-running .shield .core{animation:breathe 1.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.07);filter:brightness(1.25)}}
.tick{transition:fill 400ms ease}
.tick.idle{fill:oklch(1 0 0 / 0.14)}.tick.good{fill:var(--teal);color:var(--teal)}.tick.bad{fill:var(--red);color:var(--red)}.tick.owner{fill:var(--gold);color:var(--gold)}.tick.quiet{fill:oklch(1 0 0 / 0.3)}
.tick.good,.tick.bad,.tick.owner{filter:drop-shadow(0 0 4px currentColor)}
.constellation .ticks .tick{animation:tick-on 500ms var(--ease-out) calc(300ms + var(--i) * 45ms) both}
@keyframes tick-on{from{opacity:0}}
.shield .s-badge rect{fill:oklch(0.3 0.1 18 / 0.9);stroke:var(--red);stroke-opacity:0.8}
.shield .s-badge text{fill:#ffd6dc;font:600 14.5px var(--cond)}
.shield .s-badge{animation:alarm-badge 2.4s ease-in-out infinite}
@keyframes alarm-badge{50%{opacity:0.7}}
.seg{fill:none;stroke-width:4;stroke-linecap:round}
.seg.paid{stroke:var(--teal)}.seg.paying{stroke:var(--cyan)}.seg.scheduled{stroke:#9fe3ff;stroke-dasharray:3 2}.seg.held{stroke:var(--amber)}.seg.owed{stroke:oklch(0.75 0.02 220)}.seg.idle{stroke:oklch(1 0 0 / 0.14)}
.sat line{stroke:oklch(1 0 0 / 0.2);stroke-width:1}
.sat .dot{fill:oklch(0.9 0.05 300)}
.sat text{fill:oklch(0.86 0.03 300);font:500 13.5px var(--sans)}
.sat.disputed .dot{fill:var(--red)}
.sat.disputed.active text{fill:#ffa5b3}
.sat.won .dot{fill:var(--teal)}.sat.won text{fill:oklch(0.85 0.08 172)}
.sat .alarm{fill:none;stroke:var(--red);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 1.8s ease-out infinite}
.ping{fill:none;stroke:var(--cyan);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ping 2.2s ease-out infinite;pointer-events:none}
.ping.owner{stroke:var(--gold)}
@keyframes ping{from{opacity:0.9;transform:scale(1)}to{opacity:0;transform:scale(2.1)}}
.node.changed .halo{animation:changed 1.6s ease-out}
@keyframes changed{20%{opacity:1;filter:brightness(1.8)}}

/* Drill-down */
.stage.zoom-in>svg{animation:zoom-in 750ms var(--ease-out) both;transform-origin:var(--ox,50%) var(--oy,50%)}
.stage.zoom-out>svg{animation:zoom-out 650ms var(--ease-out) both}
@keyframes zoom-in{from{opacity:0;transform:scale(0.4)}}
@keyframes zoom-out{from{opacity:0;transform:scale(1.5)}}
.card,.item{cursor:pointer;outline:none}
.card rect{fill:oklch(0.23 0.03 188 / 0.88);stroke:oklch(0.85 0.08 180 / 0.2);stroke-width:1;transition:stroke 200ms ease,fill 200ms ease}
.card.on rect{fill:oklch(0.28 0.04 120 / 0.55);stroke:var(--gold);stroke-width:1.6;filter:drop-shadow(0 0 12px oklch(0.86 0.13 85 / 0.45))}
.card:focus-visible rect{stroke:var(--cyan);stroke-width:2}
@media (hover:hover) and (pointer:fine){.card:not(.on):hover rect{stroke:oklch(0.85 0.1 180 / 0.5)}.item:hover .i-title{fill:#fff}}
.c-count{font:600 31px var(--cond);fill:#fff}
.card.alert .c-count{fill:#ff97a8}
.c-title{font:600 16px var(--sans);fill:#effdf9}
.c-hint{font:500 13px var(--sans);fill:oklch(0.78 0.03 180)}
.focus .card{animation:card-in 650ms var(--ease-out) var(--d,0ms) both}
.focus .item{animation:card-in 600ms var(--ease-out) var(--d,0ms) both}
@keyframes card-in{from{opacity:0;transform:translateX(-18px)}}
.item .hit{fill:transparent}
.item .dot{fill:var(--teal);color:var(--teal);filter:drop-shadow(0 0 6px currentColor)}
.item.bad .dot{fill:var(--red);color:var(--red)}.item.owner .dot{fill:var(--gold);color:var(--gold)}.item.quiet .dot{fill:oklch(0.82 0.03 200);color:oklch(0.82 0.03 200)}
.item.on .dot{stroke:#fff;stroke-width:2.5}
.item:focus-visible .dot{stroke:var(--cyan);stroke-width:3}
.i-title{font:600 15.5px var(--sans);fill:#e6f7f2}
.i-meta{font:500 13.5px var(--sans);fill:oklch(0.76 0.03 180)}

/* Glass side panel */
.glass-panel{height:clamp(540px,calc(100vh - 226px),900px);overflow:auto;border-radius:26px;padding:22px 22px 24px;background:var(--card);backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.06),0 0 0 1px oklch(0.85 0.1 180 / 0.14),0 30px 80px -30px oklch(0 0 0 / 0.7);scrollbar-width:thin}
.panel-inner{display:flex;flex-direction:column;gap:14px}
.panel-head{display:flex;flex-direction:column;gap:6px}
.panel-head h2{font-size:21px;line-height:1.25;letter-spacing:-0.01em}
.panel-head p{color:var(--ink-2);font-size:14px}
.eyebrow{font:600 11.5px/1.2 var(--sans);letter-spacing:0.09em;text-transform:uppercase;color:var(--accent)}
.eyebrow.inline{margin-right:6px}
.panel-sub{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.panel-back{align-self:flex-start;border:0;background:none;color:var(--ink-3);font:500 13px var(--sans);padding:4px 0;min-height:32px}
@media (hover:hover) and (pointer:fine){.panel-back:hover{color:var(--ink)}}
.hint{font-size:12.5px;color:var(--ink-3)}
.kvs{margin:0;display:flex;flex-direction:column}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;box-shadow:inset 0 -1px 0 var(--line);font-size:14px}
.kv dt{color:var(--ink-2);display:flex;align-items:center;gap:8px}
.kv dd{margin:0;font-weight:500;display:flex;align-items:center;gap:8px;text-align:right}
.kv[class*="dot-"] dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.dot-paid{--c:var(--teal)}.dot-paying{--c:var(--cyan)}.dot-scheduled{--c:#9fe3ff}.dot-held{--c:var(--amber)}.dot-owed{--c:oklch(0.75 0.02 220)}
.kv.total{box-shadow:none;padding-top:10px}
.formula{margin:0;display:flex;flex-direction:column}
.stack{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px;background:oklch(1 0 0 / 0.06)}
.stack span{width:var(--w);animation:grow 900ms var(--ease-out) both}
.stack .paid{background:var(--teal)}.stack .paying{background:var(--cyan)}.stack .scheduled{background:repeating-linear-gradient(135deg,#9fe3ff 0 4px,#5aa9c8 4px 7px)}.stack .held{background:var(--amber)}.stack .owed{background:oklch(0.75 0.02 220)}
@keyframes grow{from{width:0}}
.tiles{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tiles div{display:flex;flex-direction:column-reverse;padding:10px 10px 8px;border-radius:12px;background:oklch(1 0 0 / 0.04);box-shadow:0 0 0 1px var(--line)}
.tiles dt{font-size:11.5px;color:var(--ink-3)}
.tiles dd{margin:0;font:600 22px var(--cond)}
.tiles .good dd{color:var(--teal)}.tiles .owner dd{color:var(--owner)}.tiles .bad dd{color:var(--bad)}
:root[data-theme="light"] .tiles .good dd{color:var(--accent-ink)}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.rules li{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:5px 0;color:var(--ink-2)}
.rules li i{width:8px;height:8px;border-radius:50%;background:oklch(1 0 0 / 0.18)}
.rules li span{font-size:12px;color:var(--ink-3)}
.rules li.good i{background:var(--teal);box-shadow:0 0 6px var(--teal)}.rules li.bad i{background:var(--red);box-shadow:0 0 6px var(--red)}.rules li.owner i{background:var(--gold);box-shadow:0 0 6px var(--gold)}
.rules li.bad{color:var(--ink)}.rules li.bad span{color:var(--bad)}.rules li.owner span{color:var(--owner)}
.rules li.idle{opacity:0.6}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.feed li{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:oklch(1 0 0 / 0.04);box-shadow:0 0 0 1px var(--line)}
.feed a{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:14px}
.feed .tools{font-size:12px;color:var(--ink-3)}
.feed.blocked li{box-shadow:0 0 0 1px oklch(0.74 0.16 18 / 0.35);background:oklch(0.74 0.16 18 / 0.06)}
.feed.blocked .tools{color:var(--bad)}
.waiting{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;text-decoration:none;color:var(--ink);
  background:linear-gradient(135deg,oklch(0.35 0.07 80 / 0.55),oklch(0.25 0.04 80 / 0.35));box-shadow:0 0 0 1px oklch(0.86 0.13 85 / 0.45),0 0 24px -6px oklch(0.86 0.13 85 / 0.45);animation:glow-owner 2.6s ease-in-out infinite}
:root[data-theme="light"] .waiting{background:var(--owner-soft);animation:none}
.waiting .eyebrow{color:var(--owner)}
.waiting strong{font-size:16px}
.waiting span:last-child{font-size:13px;color:var(--owner);font-weight:500}
@keyframes glow-owner{50%{box-shadow:0 0 0 1px oklch(0.86 0.13 85 / 0.7),0 0 34px -4px oklch(0.86 0.13 85 / 0.6)}}
.compare{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:16px;background:oklch(1 0 0 / 0.035);box-shadow:0 0 0 1px var(--line)}
.compare .panel-sub{margin:0}
.bar-row{display:grid;grid-template-columns:104px 1fr auto;gap:10px;align-items:center;font-size:13px}
.bar-row span{color:var(--ink-2);line-height:1.2}
.bar-row em{display:block;font-style:normal;font-size:11px;color:var(--ink-3)}
.bar-row strong{font:600 17px var(--cond)}
.bar{display:flex;height:12px;border-radius:7px;overflow:hidden;background:oklch(1 0 0 / 0.06)}
.bar b{width:var(--w);animation:grow 1.1s var(--ease-out) both}
.bar .naive{background:linear-gradient(90deg,oklch(0.65 0.16 18),var(--red))}
.bar .ours{background:linear-gradient(90deg,oklch(0.7 0.12 175),var(--teal))}
.bar .held{background:repeating-linear-gradient(135deg,var(--amber) 0 5px,oklch(0.6 0.13 70) 5px 9px);animation-delay:300ms}
.moments{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.moments li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:13.5px}
.moments i{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3);opacity:0.6}
.moments li.done i{opacity:1}
.moments li.done i{background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062a22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 10px oklch(0.85 0.13 172 / 0.6)}
.moments strong{display:block;font-weight:600}
.moments span{color:var(--ink-3);font-size:12.5px}
.legend-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12.5px;color:var(--ink-2)}
.legend-list li{display:flex;align-items:center;gap:8px}
.legend-list i{width:9px;height:9px;border-radius:50%}
.legend-list .cyan{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.legend-list .planned{background:transparent;box-shadow:inset 0 0 0 2px #9fe3ff}.legend-list .amber{background:var(--amber);box-shadow:0 0 8px var(--amber)}.legend-list .violet{background:var(--violet);box-shadow:0 0 8px var(--violet)}.legend-list .red{background:var(--red);box-shadow:0 0 8px var(--red)}
.links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.links li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:oklch(1 0 0 / 0.04);box-shadow:0 0 0 1px var(--line);font-size:13.5px}
.links .verb{grid-column:1 / -1;font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:0.06em}
.links .amt{font:600 14px var(--cond)}
.glass-panel .button{align-self:flex-start}

@media (max-width:1180px){
  .command{grid-template-columns:minmax(0,1fr)}
  .glass-panel{height:auto;max-height:none}
}
@media (max-width:860px){
  /* In the stacked phone layout the sidebar must fill the width, not grow to its nav row. */
  .sidebar{align-self:stretch;min-width:0}
  .command{padding:4px 12px 0}
  .scene{height:520px;border-radius:20px}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;top:10px;left:10px;right:10px}
  .kpi{padding:7px 10px}
  .kpi dd{font-size:17px}
  .kpi.paying,.kpi.blocked{display:none}
  .rail-slot{display:none}
  /* Phones swipe across a readable drawing instead of shrinking it to unreadable text. */
  .scene{height:560px}
  .stage{inset:70px 0 0 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
  .stage>svg{min-width:860px}
  .scene-back{top:76px;left:10px}
}
@media (prefers-reduced-motion:reduce){
  .scene-sky i,.shield .orbit,.ping,.sat .alarm,.rail-ticks i.next,.shield .s-badge,.waiting,.constellation .edge.ants,.demo-running #demo-step::after,.demo-running .shield .core{animation:none!important}
  .constellation .node,.constellation .edge,.focus .card,.focus .item,.stage>svg,.kpi.bumped,.stack span,.bar b{animation:none!important}
  .constellation .edge.draw,.constellation.entering .edge{stroke-dashoffset:0}
}

/* ---------------------------------------------------------------------------
   C38 glass theme. A light, see-through room: a neutral ground with soft
   cornflower light that supports folio blue, the primary. Pink is only for
   what needs the owner. Cards stay near-opaque so figures read cleanly; the
   blur lives in the backdrop and the chrome. The money map is a plain network
   plot: area follows the amount, line width follows money moved.
   ------------------------------------------------------------------------- */
:root,:root[data-theme="light"]{
  --ground:#8fb2e8;--surface:#fbf8f1;--sunken:rgba(246,241,230,.62);--page:var(--ground);
  --backdrop:url("assets/backdrop-blue.webp");
  --ink:#0f1a33;--ink-2:#3d4863;--ink-3:#46526b;--line:rgba(15,26,51,.09);--line-strong:rgba(15,26,51,.18);
  --accent:#2a56c9;--accent-hover:#2349ad;--accent-ink:#1f47ad;--accent-soft:#e7eefc;--on-accent:#ffffff;
  --cornflower:#6b9fe4;--support:#4f86d6;--support-soft:#e3edfb;
  --highlight:#c18dA5;--highlight-ink:#80415f;--highlight-soft:#f2e8ed;
  --bad:#a82a33;--bad-soft:#fdebec;--held:#1d3557;--held-soft:#e7ecf4;--navy:#1d3557;--on-navy:#ffffff;
  --deck-hi:#9cc0ef;--deck-top:#7aa8e8;--deck-bottom:#3566c2;--on-deck:#ffffff;
  --orb-hi:#ffffff;--orb-idle:#b9cbe3;--orb-deep:#24467a;
  --glass:rgba(250,246,238,.74);--glass-strong:rgba(250,246,238,.86);--card:rgba(250,246,238,.90);--sheet:rgba(248,244,235,.72);
  --glow-a:rgba(107,159,228,.3);--glow-b:rgba(42,86,201,.12);--glow-c:rgba(255,255,255,.7);
  --focus-c:#2a56c9;
  --ring:0 0 0 1px rgba(15,26,51,.07),0 10px 30px -18px rgba(15,26,51,.28);
  --ring-hover:0 0 0 1px rgba(15,26,51,.12),0 16px 36px -18px rgba(15,26,51,.34);
  --shadow-chrome:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(255,255,255,.45),0 18px 40px -24px rgba(15,26,51,.45);
  --shadow-knob:0 6px 14px -8px rgba(15,26,51,.5);
  --shadow-lift:0 30px 60px -30px rgba(15,26,51,.45);
  --shadow-accent:0 12px 24px -12px rgba(42,86,201,.7);
  --glass-edge:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 8px rgba(255,255,255,.18),0 30px 60px -30px rgba(15,35,80,.5);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ground:#0b0f18;--surface:#161a22;--sunken:rgba(255,255,255,.05);
  --backdrop:url("assets/backdrop-night.webp");
  --ink:#eef1f7;--ink-2:#b9c1d2;--ink-3:#8c95a9;--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --accent:#8ab4f0;--accent-hover:#a3c4f5;--accent-ink:#8ab4f0;--accent-soft:rgba(138,180,240,.14);--on-accent:#0b1430;
  --cornflower:#7fb0f0;--support:#7fb0f0;--support-soft:rgba(127,176,240,.14);
  --highlight:#b88da4;--highlight-ink:#e4bfd2;--highlight-soft:rgba(184,141,164,.12);
  --bad:#f87171;--bad-soft:rgba(248,113,113,.14);--held:#a9b9d8;--held-soft:rgba(169,185,216,.12);--navy:#2a4a78;--on-navy:#ffffff;
  --deck-hi:#6f9fe0;--deck-top:#4f86d6;--deck-bottom:#2f5ba8;--on-deck:#ffffff;
  --orb-hi:#dbe7f8;--orb-idle:#3a4a63;--orb-deep:#1b3358;
  --glass:rgba(16,20,30,.72);--glass-strong:rgba(16,20,30,.82);--card:rgba(16,20,30,.72);--sheet:rgba(16,20,30,.72);
  --glow-a:rgba(107,159,228,.18);--glow-b:rgba(42,86,201,.2);--glow-c:rgba(127,176,240,.06);
  --focus-c:#8ab4f0;
  --ring:0 0 0 1px rgba(255,255,255,.08),0 12px 30px -18px rgba(0,0,0,.6);
  --ring-hover:0 0 0 1px rgba(255,255,255,.16),0 16px 36px -18px rgba(0,0,0,.65);
  --shadow-chrome:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.08),0 18px 40px -24px rgba(0,0,0,.7);
  --shadow-knob:0 0 0 1px rgba(255,255,255,.08),0 6px 14px -8px rgba(0,0,0,.7);
  --shadow-lift:0 30px 60px -30px rgba(0,0,0,.75);
  --shadow-accent:0 12px 24px -12px rgba(0,0,0,.6);
  --glass-edge:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 8px rgba(255,255,255,.04),0 30px 60px -30px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* Older names, kept as aliases so earlier rules follow the same theme. Prefer the names above. */
:root{
  --focus:0 0 0 2px var(--ground),0 0 0 4px var(--focus-c);
  --owner:var(--highlight-ink);--owner-soft:var(--highlight-soft);--held-c:var(--held);
  --blue-2:var(--cornflower);--blue-2-deep:var(--support);--blue-2-soft:var(--support-soft);
  --cyan:var(--support);--teal:var(--accent);--violet:var(--cornflower);--red:var(--bad);--amber:var(--held);--gold:var(--highlight);--pink:var(--highlight);
}
body{background:var(--page)}
/* The glass room: soft light behind everything, drifting slowly. */
body::before{content:"";position:fixed;inset:-25vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(36vmax 28vmax at 22% 14%,var(--glow-a),transparent 70%),radial-gradient(34vmax 30vmax at 86% 80%,var(--glow-b),transparent 70%),
    radial-gradient(20vmax 16vmax at 72% 16%,var(--glow-c),transparent 70%),radial-gradient(30vmax 24vmax at 28% 92%,var(--glow-a),transparent 72%);
  filter:blur(28px);animation:c38-drift 48s ease-in-out infinite alternate}
@keyframes c38-drift{to{transform:translate(3vmax,-2vmax) scale(1.05)}}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{box-shadow:var(--focus)}
html{scrollbar-color:var(--line-strong) transparent}

/* Chrome on glass */
.simulation{background:var(--glass-strong);color:var(--ink-2);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.simulation::before{background:var(--highlight);box-shadow:none}
:root[data-theme="light"] .simulation{background:var(--glass-strong);color:var(--ink-2)}
.sidebar,:root[data-theme="light"] .sidebar{background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:1px 0 0 var(--line)}
.brand-mark rect{fill:var(--accent)}
.brand-mark path{stroke:var(--on-accent)}
.sidebar nav a.nav-current,:root[data-theme="light"] .sidebar nav a.nav-current{background:var(--surface);color:var(--ink);box-shadow:var(--ring)}
.sidebar nav a.nav-current .icon{color:var(--accent)}
.nav-count.owner{background:var(--highlight-soft);color:var(--highlight-ink)}
.mode-dot{background:var(--highlight)}
.panel,.view-card,.desk,.detail,.callout,.ledger{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.view-card,.desk,.detail,.callout,.ledger{box-shadow:var(--ring)}
.primary,:root[data-theme="light"] .primary{background:var(--accent);color:var(--on-accent);box-shadow:none}
@media (hover:hover) and (pointer:fine){.primary:hover:not(:disabled){background:var(--accent-hover)}}
.secondary,.button.secondary{background:var(--surface)}
.theme-toggle{box-shadow:0 0 0 1px var(--line);background:var(--glass)}

/* Demo dock: frosted, with folio blue on the one action */
@media (min-width:861px){
  .demo-bar,:root[data-theme="light"] .demo-bar{background:var(--glass-strong);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);box-shadow:var(--ring-hover)}
  body[data-route="overview"] .layout{grid-template-columns:240px minmax(0,1fr)}
  body[data-route="overview"] .sidebar{width:auto;overflow:visible}
  body[data-route="overview"] .sidebar:hover,body[data-route="overview"] .sidebar:focus-within{width:auto;box-shadow:1px 0 0 var(--line)}
  body[data-route="overview"] .sidebar :is(.brand span,.tagline,nav a span,.sidebar-bottom span){opacity:1}
  body[data-route="overview"] .sidebar nav a{padding:0 10px}
  body[data-route="overview"] .demo-bar{left:264px}
}
.demo-bar .stepper .tick.done,.stepper .tick.done{background:var(--accent);box-shadow:none}
.demo-bar .stepper .tick.next,.stepper .tick.next{background:var(--highlight);box-shadow:none}

/* Overview */
.command.ov{display:block;padding:8px 32px 0;max-width:1480px}
.ov-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin:4px 0 18px}
.ov-title h1{font:600 28px/1.15 var(--sans);letter-spacing:-0.02em}
.finding{margin-top:6px;font-size:15px;color:var(--ink-2);max-width:68ch}
.rail-slot{position:static;width:auto;display:block;inset:auto}
.week{list-style:none;margin:0;padding:5px;display:flex;gap:2px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.week li{display:flex;flex-direction:column;gap:6px;padding:6px 10px;border-radius:10px;min-width:62px}
.week li>span:first-child{font-size:12px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.week .ticks{display:flex;gap:3px}
.week .ticks i{flex:1;min-width:10px;height:4px;border-radius:2px;background:var(--line-strong)}
.week .ticks i.done{background:var(--accent)}
.week .ticks i.next{background:var(--highlight)}
.week li.current{background:var(--surface);box-shadow:var(--ring)}
.week li.current>span:first-child{color:var(--ink);font-weight:600}

/* KPIs: one container split by hairlines, label above value */
.kpis{position:static;inset:auto;margin:0 0 16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-radius:16px;overflow:hidden;background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--ring)}
.kpi{flex-direction:column;gap:4px;padding:14px 18px;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:inset 1px 0 0 var(--line);color:var(--ink)}
.kpi:first-child{box-shadow:none}
.kpi::after{display:none}
.kpi dt{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3)}
.kpi dt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--line-strong))}
.kpi dd{font:600 26px/1.15 var(--sans);letter-spacing:-0.015em;color:var(--ink)}
.kpi.paypal{--c:var(--support)}.kpi.paid{--c:var(--accent)}.kpi.paying{--c:var(--highlight)}.kpi.held{--c:var(--held-c)}.kpi.blocked{--c:var(--bad)}
.kpi.paying dd:not([data-count="0"]):not([data-count=""]){color:var(--ink)}
.kpi.blocked dd:not(:is([data-plain="1"]:empty)){color:var(--ink)}
.kpi.bumped{animation:c38-bump 900ms var(--ease-out)}
@keyframes c38-bump{30%{background:var(--accent-soft)}}

.ov-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.ov-card{position:relative;min-width:0;padding:18px 20px 20px;border-radius:18px;background:var(--card);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--ring)}
.ov-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px}
.ov-card-head h2{font-size:17px;font-weight:600;letter-spacing:-0.01em}
.ov-card-head p{margin-top:2px;font-size:13px;color:var(--ink-3)}
.ov-map{grid-column:span 8;display:flex;flex-direction:column}
.ov-panel{grid-column:span 4;max-height:680px;overflow:auto;scrollbar-width:thin}
.ov-scan{grid-column:span 4;display:flex;flex-direction:column}
.ov-makers{grid-column:span 8}
.ov-stands{grid-column:span 5}
.ov-activity{grid-column:span 7}
.map-key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-2)}
.map-key li{display:flex;align-items:center;gap:6px}
.map-key i{display:inline-block;width:18px;border-top:2.5px solid var(--accent)}
.map-key .k-ask{border-top-style:dashed;border-color:var(--highlight)}
.map-key .k-held{border-top-style:dashed;border-color:var(--held-c)}
.map-key .k-agent,.map-key .k-stop{width:9px;height:9px;border:0;border-radius:50%;background:var(--violet)}
.map-key .k-stop{background:var(--bad)}
.map-key .k-owed{width:10px;height:10px;border:0;border-radius:2px;box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ov-stands .map-key{margin-top:12px}

.ov .stage{position:relative;inset:auto;flex:1;min-height:0}
.ov .stage>svg{display:block;width:100%;height:auto;max-height:620px;overflow:visible}
.ov .scene-loading{position:static;padding:80px 0;text-align:center;color:var(--ink-3)}
.ov .scene-back{position:absolute;z-index:2;top:16px;right:20px;left:auto;min-height:34px;padding:0 14px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;box-shadow:var(--ring);backdrop-filter:none}
.ov .ov-map:has(.scene-back:not([hidden])) .map-key{visibility:hidden}
.ov .scene-caption{position:static;transform:none;margin:8px auto 0;max-width:none;background:var(--highlight-soft);color:var(--highlight-ink);box-shadow:none;backdrop-filter:none;border-radius:12px;font-size:14px}
.ov .stage.entering>svg{animation:fade-in 420ms var(--ease-out) both}

/* The network plot */
.plot #p-grid circle{fill:rgba(42,86,201,.14)}
:root[data-theme="dark"] .plot #p-grid circle{fill:rgba(255,255,255,.08)}
.p-edge{fill:none;stroke-linecap:round;stroke:var(--line-strong)}
.p-edge.money{stroke:var(--accent)}
.p-edge.ask{stroke:var(--highlight)}
.p-edge.held{stroke:var(--held-c)}
.p-edge.agent{stroke:var(--violet);stroke-opacity:.75}
.p-edge.signed{stroke:var(--highlight);stroke-opacity:.6}
.p-edge.dashed{stroke-dasharray:6 5}
.p-edge.money.live{stroke-dasharray:7 5;animation:c38-march .9s linear infinite}
@keyframes c38-march{to{stroke-dashoffset:-12}}
.p-arrow path{fill:var(--line-strong)}
.p-arrow.money path{fill:var(--accent)}.p-arrow.ask path,.p-arrow.signed path{fill:var(--highlight)}.p-arrow.held path{fill:var(--held-c)}.p-arrow.agent path{fill:var(--violet)}
.p-flow{fill:var(--surface);stroke:var(--accent);stroke-width:1.6}
.p-text{font:500 12px var(--sans);fill:var(--ink-2);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.p-text.name{font-size:14px;font-weight:600;fill:var(--ink)}
.p-text.value{font-size:12.5px}
.p-text.flowtag{font-size:12.5px;font-weight:600}
.p-text.flowtag.money{fill:var(--accent-ink)}.p-text.flowtag.ask{fill:var(--highlight-ink)}.p-text.flowtag.held{fill:var(--held-c)}
.p-text.sat{font-size:11.5px;fill:var(--ink-3)}
.p-text.count{font-size:15px;font-weight:700;fill:var(--ink);stroke:none}
.p-text.unit{font-size:9px;fill:var(--ink-3);stroke:none}
.p-node{cursor:pointer;outline:none}
.p-node .hit{fill:transparent}
.p-node .dot{stroke:var(--surface);stroke-width:2;transition:transform 160ms var(--ease-out);transform-box:fill-box;transform-origin:center}
.p-node .ring{fill:none;stroke:var(--line-strong);stroke-width:1;transition:stroke 150ms ease,stroke-width 150ms ease}
.p-node.paypal .dot{fill:var(--support)}.p-node.agent .dot{fill:var(--violet)}.p-node.owner .dot{fill:var(--highlight)}.p-node.held .dot{fill:var(--held-c)}.p-node.maker .dot{fill:var(--accent)}
@media (hover:hover) and (pointer:fine){.p-node:hover .ring{stroke:var(--accent);stroke-width:2}.p-node:hover .dot{transform:scale(1.06)}}
.p-node:focus-visible .ring,.p-node.selected .ring{stroke:var(--highlight);stroke-width:2.5}
.p-node.changed .ring{animation:c38-pulse 1.4s var(--ease-out)}
@keyframes c38-pulse{30%{stroke:var(--highlight);stroke-width:4}}
.p-node.shield .seal{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.p-node.shield .seal-in{fill:none;stroke:var(--line-strong)}
.p-node.shield:focus-visible .seal,.p-node.shield.selected .seal{stroke:var(--highlight);stroke-width:2.5}
.check{stroke-width:2;stroke-linecap:round}
.check.ok{stroke:var(--accent)}.check.stop{stroke:var(--bad)}.check.ask{stroke:var(--highlight)}
.p-sat line{stroke:var(--line-strong)}
.p-sat circle{fill:var(--support);stroke:var(--surface);stroke-width:1.5}
.p-sat.settled circle{fill:var(--accent)}
.p-sat.disputed circle{fill:var(--bad)}
.p-sat.disputed .p-text{fill:var(--bad)}
.p-prop line{stroke:var(--violet);stroke-opacity:.35;stroke-dasharray:2 3}
.p-prop .arc-bg{fill:var(--surface);stroke:var(--line-strong);stroke-width:2}
.p-prop .arc{fill:none;stroke:var(--accent);stroke-width:2}
.p-prop .core{fill:var(--violet)}
.p-prop.stop .arc-bg{stroke:var(--bad)}.p-prop.stop .core{fill:var(--bad)}
.p-prop.ask .arc-bg{stroke:var(--highlight)}.p-prop.ask .core{fill:var(--highlight)}
.p-prop:focus-visible .arc-bg{stroke:var(--ink);stroke-width:3}

/* Drill-down, redrawn flat */
.constellation.focus .halo{display:none}
.constellation.focus .core{fill:var(--accent)}
.constellation.focus .rim{stroke:var(--line-strong)}
.constellation.focus .node.selected .rim{stroke:var(--highlight);filter:none}
.constellation .n-label{fill:var(--ink);font:600 18px var(--sans)}
.constellation .n-amount{fill:var(--ink);font:600 19px var(--sans)}
.constellation .n-sub{fill:var(--ink-3);font:500 13.5px var(--sans)}
.constellation .edge{stroke:var(--line-strong);filter:none}
.constellation .edge.money,.constellation .edge.money.live{stroke:var(--accent);stroke-opacity:.85;filter:none}
.constellation .edge.bad{stroke:var(--bad)}
.constellation .edge.quiet{stroke:var(--line)}
.spark{fill:var(--accent)!important}
.seg.paid,.seg.paying{stroke:var(--accent)}.seg.scheduled{stroke:var(--highlight)}.seg.held{stroke:var(--held-c)}.seg.owed{stroke:var(--line-strong)}.seg.idle{stroke:var(--line)}
.card rect{fill:var(--surface);stroke:var(--line-strong)}
.card.on rect{fill:var(--accent-soft);stroke:var(--accent);filter:none}
.card:focus-visible rect{stroke:var(--highlight)}
.c-count{fill:var(--ink);font:600 28px var(--sans)}
.card.alert .c-count{fill:var(--bad)}
.c-title{fill:var(--ink)}.c-hint{fill:var(--ink-3)}
.item .dot{fill:var(--accent);filter:none}.item.bad .dot{fill:var(--bad)}.item.owner .dot{fill:var(--highlight)}.item.quiet .dot{fill:var(--line-strong)}
.item.on .dot{stroke:var(--ink)}
.i-title{fill:var(--ink)}.i-meta{fill:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.card:not(.on):hover rect{stroke:var(--accent)}.item:hover .i-title{fill:var(--accent-ink)}}

/* Explanation panel */
.eyebrow{font:500 12.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-3)}
.panel-head h2{font-size:19px}
.waiting,:root[data-theme="light"] .waiting{background:var(--highlight-soft);box-shadow:0 0 0 1px color-mix(in srgb,var(--highlight) 25%,transparent);animation:none}
.waiting .eyebrow,.waiting span:last-child{color:var(--highlight-ink)}
.tiles div,.feed li,.links li,.compare{background:var(--sunken);box-shadow:none}
.tiles .good dd,:root[data-theme="light"] .tiles .good dd{color:var(--accent-ink)}
.tiles .owner dd{color:var(--highlight-ink)}
.rules li i{background:var(--line-strong);box-shadow:none}
.rules li.good i{background:var(--accent);box-shadow:none}.rules li.bad i{background:var(--bad);box-shadow:none}.rules li.owner i{background:var(--highlight);box-shadow:none}
.rules li.owner span{color:var(--highlight-ink)}
.feed.blocked li{background:var(--bad-soft);box-shadow:none}
.links .verb{text-transform:none;letter-spacing:0;font-size:12px}
.dot-paid,.dot-paying{--c:var(--accent)}.dot-scheduled{--c:var(--highlight)}.dot-held{--c:var(--held-c)}.dot-owed{--c:var(--line-strong)}
.stack{background:var(--sunken)}
.stack .paid,.stack .paying{background:var(--accent)}.stack .scheduled{background:var(--highlight)}.stack .held{background:repeating-linear-gradient(135deg,var(--held-c) 0 3px,transparent 3px 6px)}.stack .owed{background:var(--line-strong)}
.bar{background:var(--sunken)}
.bar .naive{background:var(--ink-3)}
.bar .ours{background:var(--accent)}
.bar .held{background:repeating-linear-gradient(135deg,var(--held-c) 0 3px,transparent 3px 6px)}
.bar-row strong{font:600 16px var(--sans)}
.moments i{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.moments li.done i{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}

/* Shield scan */
.scope{position:relative;width:100%;max-width:300px;aspect-ratio:1;margin:0 auto}
.scope #scan,.scope #scan>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.scope .sweep{position:absolute;inset:6.25%;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,transparent 0 290deg,rgb(42 86 201 / .16) 350deg,rgb(42 86 201 / .4) 360deg);animation:c38-sweep 4.2s linear infinite}
@keyframes c38-sweep{to{transform:rotate(360deg)}}
.s-ground{fill:var(--sunken)}
.s-ring{fill:none;stroke:var(--line-strong)}
.s-ring.dashed{stroke-dasharray:2 4}
.s-tick{stroke:var(--line-strong)}
.s-away{fill:rgb(210 60 67 / .07)}
.s-hold{fill:none;stroke:var(--highlight);stroke-dasharray:3 4}
.s-label{font:500 11px var(--sans)}
.s-label.stop{fill:var(--bad)}.s-label.ask{fill:var(--highlight-ink)}
.s-core{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.s-blip{animation:c38-blip 4.2s linear infinite;animation-delay:calc(var(--at) * 0.011667s - 4.2s)}
@keyframes c38-blip{0%{opacity:1}55%,100%{opacity:.4}}
.s-blip path{fill:var(--accent)}.s-blip .halo{fill:rgb(42 86 201 / .14)}
.s-blip.stop path{fill:var(--bad)}.s-blip.stop .halo{fill:rgb(210 60 67 / .14)}
.s-blip.ask path,.s-blip.signed path{fill:var(--highlight)}.s-blip.ask .halo{fill:color-mix(in srgb,var(--highlight) 12%,transparent)}
.s-blip text{font:500 10.5px var(--sans);fill:var(--bad);paint-order:stroke;stroke:var(--sunken);stroke-width:3px}
.s-blip:focus-visible .halo{stroke:var(--ink);stroke-width:1.5}
.tally{margin:12px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:12px;box-shadow:inset 0 1px 0 var(--line)}
.tally dt{font-size:12px;color:var(--ink-3)}
.tally dd{margin:0;font:600 20px/1.2 var(--sans);color:var(--ink)}
.tally .ok dd{color:var(--accent-ink)}.tally .ask dd{color:var(--highlight-ink)}.tally .stop dd{color:var(--bad)}

/* Maker folios */
.folios{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.folio{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:196px;padding:16px;border:0;border-radius:16px;text-align:left;background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line);font:inherit;transition:transform 160ms var(--ease-out),box-shadow 160ms ease}
@media (hover:hover) and (pointer:fine){.folio:hover{transform:translateY(-2px);box-shadow:var(--ring-hover)}}
.folio:active{transform:scale(0.98)}
.folio .wm{position:absolute;right:10px;top:-22px;font:italic 400 132px/1 Georgia,"Times New Roman",serif;color:rgb(42 86 201 / .08);pointer-events:none}
.folio .who b{display:block;font-size:15px;font-weight:600}
.folio .who span{font-size:12px;color:var(--ink-3)}
.folio .chip{position:absolute;right:14px;top:14px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--accent-soft);color:var(--accent-ink)}
.folio .chip.waiting{background:var(--highlight-soft);color:var(--highlight-ink)}
.folio .chip.held{background:var(--held-soft);color:var(--held-c)}
.folio .chip.owed{background:var(--sunken);color:var(--ink-3)}
.folio .amt{margin-top:auto;font:700 32px/1.1 var(--sans);letter-spacing:-0.03em}
.folio .what{font-size:12.5px;color:var(--ink-2)}
.folio .pos{display:flex;gap:2px;width:100%;height:6px;margin-top:12px;border-radius:3px;overflow:hidden;background:var(--sunken)}
.folio .pos i{display:block;min-width:3px}
.pos .paid{background:var(--accent)}.pos .sending{background:var(--support)}.pos .waiting{background:var(--highlight)}.pos .held{background:repeating-linear-gradient(135deg,var(--held-c) 0 3px,transparent 3px 6px)}.pos .owed{background:var(--line-strong)}
.folio.on{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}
.folio.on .wm{color:color-mix(in srgb,var(--on-accent) 16%,transparent)}
.folio.on .who span,.folio.on .what{color:color-mix(in srgb,var(--on-accent) 82%,transparent)}
.folio.on .chip{background:color-mix(in srgb,var(--on-accent) 20%,transparent);color:var(--on-accent)}
.folio.on .pos{background:color-mix(in srgb,var(--on-accent) 25%,transparent)}
.folio.on .pos .paid{background:var(--on-accent)}
.folio.on .pos .held{background:repeating-linear-gradient(135deg,var(--on-accent) 0 3px,transparent 3px 6px)}
.empty-note{padding:24px 0;color:var(--ink-3);font-size:14px}

/* Where the money stands */
.bars{display:flex;align-items:stretch;gap:12px;height:232px;padding:0 2px;box-shadow:inset 0 -1px 0 var(--line)}
.bars .col{flex:1;max-width:88px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;text-align:center;padding-bottom:6px}
.bar-stack{width:100%;height:calc((100% - 44px) * var(--h));display:flex;flex-direction:column-reverse;gap:2px;border-radius:8px 8px 3px 3px;overflow:hidden;transform-origin:bottom;animation:c38-rise 700ms var(--ease-out) both}
@keyframes c38-rise{from{transform:scaleY(0.2);opacity:0}}
.bar-stack i{display:block;min-height:3px}
.bar-stack .paid{background:var(--accent)}.bar-stack .sending{background:var(--support)}.bar-stack .waiting{background:var(--highlight)}
.bar-stack .held{background:repeating-linear-gradient(135deg,var(--held-c) 0 3px,var(--held-soft) 3px 6px)}
.bar-stack .owed{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.bars b{font-size:12.5px;font-weight:600}
.bars span{font-size:11.5px;color:var(--ink-3)}
.col.sig .ring{width:56px;height:56px;margin-bottom:6px;border-radius:50%;display:grid;place-items:center;font:italic 15px Georgia,"Times New Roman",serif;border:2px dashed var(--line-strong);color:var(--ink-3)}
.col.sig .ring.ask{border-color:var(--highlight);color:var(--highlight-ink)}
.col.sig .ring.signed{border:2px solid var(--accent);background:var(--accent);color:var(--on-accent)}

/* Activity */
.strips{list-style:none;margin:0;padding:0}
.strips a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:11px 8px;border-radius:10px;color:var(--ink);text-decoration:none;box-shadow:inset 0 1px 0 var(--line);transition:background-color 150ms ease}
.strips li:first-child a{box-shadow:none}
@media (hover:hover) and (pointer:fine){.strips a:hover{background:var(--sunken)}}
.strips .what b{display:block;font-size:14px;font-weight:600}
.strips .what span{font-size:12.5px;color:var(--ink-3)}
.strips .n{font-size:12px;color:var(--ink-3)}
.stamp{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
.stamp.ok{background:var(--accent-soft);color:var(--accent-ink)}.stamp.stop{background:var(--bad-soft);color:var(--bad)}
.stamp.ask{background:var(--highlight-soft);color:var(--highlight-ink)}.stamp.signed{background:var(--sunken);color:var(--ink-2)}

@media (max-width:1280px){
  .ov-map,.ov-panel{grid-column:span 12}
  .ov-panel{max-height:none}
  .ov-scan{grid-column:span 5}.ov-makers{grid-column:span 7}
}
@media (max-width:1024px){
  .ov-grid>*{grid-column:span 12}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kpi:nth-child(4){box-shadow:inset 0 1px 0 var(--line)}
  .kpi:nth-child(5){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line)}
}
@media (max-width:860px){
  .command.ov{padding:4px 12px 0}
  .ov-title h1{font-size:24px}
  .week{overflow-x:auto;max-width:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{box-shadow:inset 0 1px 0 var(--line)}
  .kpi:first-child,.kpi:nth-child(2){box-shadow:none}
  .kpi:nth-child(even){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line)}
  .kpi:nth-child(2){box-shadow:inset 1px 0 0 var(--line)}
  .kpi dd{font-size:21px}
  .ov .stage{overflow-x:auto;overscroll-behavior-x:contain}
  .ov .stage>svg{min-width:720px}
  .ov-card{padding:16px}
  .strips .n{display:none}
}
@media (prefers-reduced-motion:reduce){
  body::before,.scope .sweep,.s-blip,.p-edge.money.live,.bar-stack,.kpi.bumped,.p-node.changed .ring{animation:none!important}
  .scope .sweep{display:none}
  .s-blip{opacity:1}
}

/* ---------------------------------------------------------------------------
   C42 glass command center. The owner's frosted backdrops sit behind the page
   (blue by day, night in dark mode). Every surface that carries text is glass at
   72% or more, so copy stays readable over the darkest part of the image. The
   sidebar is labelled and grouped by job, and the overview reads top to bottom:
   one action, four figures, the makers, then the evidence.
   ------------------------------------------------------------------------- */
body{background:var(--ground) var(--backdrop) center top / cover no-repeat fixed}
body::before{display:none}

/* One glass recipe for every text-bearing surface */
.glass,.ov-card,.panel,.view-card,.desk,.detail,.callout,.ledger,.intro,.cc-kpis>.kpi{background:var(--card);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--glass-edge)}
.glass,.ov-card{border-radius:28px}
.view-card,.desk,.detail,.callout,.ledger,.intro{border-radius:24px}
.intro{padding:24px 28px}
.workspace-view:not([hidden]){padding:24px 26px 28px;border-radius:28px;background:var(--sheet);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--glass-edge)}
.footer{padding:12px 20px;border-top:0;border-radius:20px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--glass-edge)}
.incident-list th{background:transparent}
.simulation{min-height:28px;padding:4px 16px;font-size:12.5px}

/* Chrome: a labelled glass sidebar and a glass pill header */
.brand{padding:4px 10px}
.brand-mark rect{fill:var(--accent)}
.brand-mark path{stroke:var(--on-accent)}
.nav-group{margin:16px 12px 4px;font-size:11px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink-3)}
.sidebar nav a{min-height:40px;padding:0 12px;border-radius:12px;font-size:14px}
.sidebar nav a.nav-current,:root[data-theme="light"] .sidebar nav a.nav-current{background:var(--surface);color:var(--accent-ink);box-shadow:var(--shadow-knob)}
.sidebar nav a .nav-count.owner{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--highlight-ink);color:var(--on-accent);font-size:11.5px;font-weight:600}
.sidebar-bottom{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:var(--sunken)}
.top-brand{font-weight:700;color:var(--ink);letter-spacing:-0.01em}
.top-right{gap:10px}
.top-bell{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-knob)}
.top-bell .icon{width:18px;height:18px}
.top-bell b{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--highlight-ink);color:var(--on-accent);font-size:10px;line-height:16px;text-align:center}
.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-knob)}
@media (min-width:861px){
  body[data-route] .layout{grid-template-columns:276px minmax(0,1fr)}
  body[data-route] .sidebar{position:sticky;top:16px;height:calc(100vh - 32px);width:auto;margin:16px 0 16px 16px;padding:18px 12px 14px;overflow:hidden auto;scrollbar-width:thin;
    border-radius:28px;background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--glass-edge);transition:none}
  body[data-route] .sidebar:is(:hover,:focus-within){width:auto;box-shadow:var(--glass-edge)}
  body[data-route] .sidebar :is(.brand span,.tagline,nav a span,.sidebar-bottom span){opacity:1}
  body[data-route] .sidebar nav a{padding:0 12px}
  .topbar{position:sticky;top:16px;z-index:30;margin:16px 24px 12px 0;min-height:58px;padding:0 10px 0 22px;border-radius:999px;
    background:var(--glass);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--glass-edge)}
  .content{padding:8px 24px 48px 0}
  :root body[data-route] .demo-bar{left:308px;right:24px;border-radius:24px;background:var(--glass-strong);box-shadow:var(--glass-edge)}
}

/* Command center */
.command.cc{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:8px 24px 8px 0;max-width:1480px}
.cc-hero{display:flex;flex-direction:column;gap:22px;padding:28px 30px}
.cc-eyebrow{font-size:13px;font-weight:600;color:var(--ink-3)}
.cc-headline{margin-top:6px;font:700 clamp(32px,3.4vw,48px)/1.06 var(--sans);letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;max-width:24ch}
.cc-headline em{font-style:normal;color:var(--accent)}
.cc .finding{margin-top:10px;font-size:16px;color:var(--ink-2);max-width:68ch}
.cc-action{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;padding:16px 18px;border-radius:20px;background:var(--sunken)}
.cc-ask{display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;flex:1;min-width:0}
.cc-ask-icon{position:relative;display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;background:var(--highlight-soft);color:var(--highlight-ink)}
.cc-ask-icon .icon{width:22px;height:22px}
.cc-ask-icon::after{content:"";position:absolute;inset:-4px;border-radius:19px;box-shadow:0 0 0 2px var(--highlight);opacity:0;animation:cc-ping 2.8s var(--ease-out) infinite}
@keyframes cc-ping{0%{opacity:.55;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.12)}}
.cc-ask-text{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:4px}
.cc-ask-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12.5px;color:var(--ink-3)}
.cc-ask h2{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-0.012em}
.cc-ask-text>p:last-child{font-size:14px;color:var(--ink-2)}
.cc-agent{display:flex;align-items:center;gap:12px;flex:1;min-width:0;font-size:14px;color:var(--ink-2)}
.cc-agent b{color:var(--ink);font-weight:600}
.cc-orb{flex:none;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 34% 28%,var(--orb-hi) 0 10%,var(--cornflower) 55%,var(--orb-deep) 100%);box-shadow:var(--shadow-knob)}
.pill-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent);transition:background-color 150ms ease,transform 120ms ease}
@media (hover:hover) and (pointer:fine){.pill-button:hover{background:var(--accent-hover)}}
.pill-button:active{transform:scale(.97)}

.cc-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;overflow:visible;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.cc-kpis>.kpi{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:24px}
.cc-kpis .kpi dt{font-size:13px;font-weight:500;color:var(--ink-3)}
.cc-kpis .kpi dd{margin:0;font:600 30px/1.1 var(--sans);letter-spacing:-0.02em;color:var(--ink)}
.cc-kpis .kpi dd.kpi-sub{font:400 13px/1.4 var(--sans);letter-spacing:0;color:var(--ink-2)}
.cc-kpis .kpi.paying{--c:var(--support)}.cc-kpis .kpi.held{--c:var(--held)}.cc-kpis .kpi.paid{--c:var(--accent)}

.cc-makers{display:flex;flex-direction:column;gap:18px;padding:24px 26px 26px}
.cc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.cc-head h2{font-size:19px;font-weight:600;letter-spacing:-0.012em}
.cc-head p{font-size:13px;color:var(--ink-3)}
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.mcard{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:176px;padding:18px 20px;border:0;border-radius:24px;overflow:hidden;
  font:inherit;text-align:left;color:var(--on-deck);cursor:default;
  background:radial-gradient(120% 90% at 78% 0%,var(--deck-hi) 0%,transparent 55%),linear-gradient(160deg,var(--deck-top) 0%,var(--deck-bottom) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-deck) 35%,transparent),var(--shadow-lift);transition:transform 220ms var(--ease-out),box-shadow 220ms ease}
.mcard.held{background:radial-gradient(120% 90% at 78% 0%,color-mix(in srgb,var(--deck-hi) 45%,transparent) 0%,transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--deck-top) 45%,var(--navy)) 0%,var(--navy) 100%)}
.mcard::after{content:"";position:absolute;z-index:-1;right:-34px;bottom:-46px;width:160px;height:160px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--orb-hi) 70%,transparent) 0 9%,color-mix(in srgb,var(--deck-hi) 55%,transparent) 42%,transparent 70%);opacity:.7}
button.mcard{cursor:pointer}
@media (hover:hover) and (pointer:fine){button.mcard:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-deck) 35%,transparent),0 36px 64px -30px rgb(0 0 0 / .5)}}
button.mcard:active{transform:scale(.985)}
.mcard-tag{position:absolute;top:16px;left:18px;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:color-mix(in srgb,var(--on-deck) 20%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-deck) 40%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mcard.ask .mcard-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--highlight);box-shadow:0 0 0 2px color-mix(in srgb,var(--on-deck) 60%,transparent)}
.mcard-name{font:700 30px/1.05 var(--sans);letter-spacing:-0.04em}
.mcard-what{font-size:13px;font-weight:500;opacity:.92}
.mcard-go{position:absolute;top:18px;right:18px;font-size:12.5px;font-weight:600;opacity:0;transform:translateX(-4px);transition:opacity 180ms ease,transform 220ms var(--ease-out)}
button.mcard:is(:hover,:focus-visible) .mcard-go{opacity:1;transform:none}
.mtable{display:flex;flex-direction:column;gap:12px}
.mtable .segmented{align-self:flex-start;flex-wrap:wrap;max-width:100%}
.mtable .segmented span{margin-left:2px;font-weight:500;opacity:.7}
.mtable .table-scroll{overflow-x:auto}
.mtable table{width:100%;min-width:620px;border-collapse:collapse;font-size:14px}
.mtable :is(th,td){padding:11px 12px;text-align:left;box-shadow:inset 0 -1px 0 var(--line)}
.mtable thead th{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.mtable tbody th{font-weight:600}
.mtable .row-title{font-weight:600;color:var(--accent-ink)}
.mtable .num{text-align:right;font-variant-numeric:tabular-nums}
.mtable .note{font-size:13px;color:var(--ink-2)}
.mtable .table-footer{padding:4px 2px 0;box-shadow:none}
.stamp.sending,.stamp.scheduled{background:var(--support-soft);color:var(--accent-ink)}
.stamp.held{background:var(--held-soft);color:var(--held)}
.stamp.paid{background:var(--accent-soft);color:var(--accent-ink)}
.stamp.owed,.stamp.idle{background:var(--sunken);color:var(--ink-2)}

.cc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.cc-trust{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.cc-row>.ov-card{grid-column:auto}
.cc .ov-card{padding:22px 24px 24px}
.cc .ov-card-head p{color:var(--ink-3)}
.cc-explore{gap:28px}
.cc-more{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--accent-ink)}
.cc-sub{margin:24px 0 10px;font-size:14px;font-weight:600;color:var(--ink-2)}

.money-total{display:flex;flex-direction:column;gap:2px}
.money-total span{font-size:13px;color:var(--ink-3)}
.money-total b{font:600 32px/1.1 var(--sans);letter-spacing:-0.02em;color:var(--ink)}
.money-bar{display:flex;gap:4px;height:14px;margin:16px 0 14px}
.money-bar i{display:block;min-width:6px;border-radius:7px;transform-origin:left;animation:cc-grow 800ms var(--ease-out) both}
.money-bar .sending,.money-bar .scheduled{background:var(--support)}
.money-bar .sign{background:color-mix(in srgb,var(--highlight) 65%,var(--surface))}
.money-bar .held{background:repeating-linear-gradient(135deg,var(--held) 0 5px,color-mix(in srgb,var(--held) 62%,var(--surface)) 5px 9px)}
.money-bar .owed{background:var(--line-strong)}
@keyframes cc-grow{from{transform:scaleX(0)}}
.money-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.money-key div{display:flex;flex-direction:column;gap:2px}
.money-key dt{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3)}
.money-key dt::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.money-key .sending,.money-key .scheduled{--c:var(--support)}.money-key .sign{--c:var(--highlight)}.money-key .held{--c:var(--held)}.money-key .owed{--c:var(--line-strong)}
.money-key dd{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.money-note{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--sunken);font-size:13.5px;color:var(--ink-2)}
.money-note b{color:var(--ink);font-weight:600}
.money-note+.money-note{margin-top:8px}

.journey{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.journey li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:center}
.journey li::before{content:"";position:absolute;top:18px;right:50%;width:100%;height:3px;background:var(--line-strong)}
.journey li:first-child::before{display:none}
.journey li.done::before,.journey li.current::before{background:var(--support)}
.journey i{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;opacity:.7;background:radial-gradient(circle at 34% 28%,var(--orb-hi) 0 8%,var(--orb-idle) 55%,var(--orb-idle) 100%);box-shadow:var(--shadow-knob)}
.journey li.done i,.journey li.current i{opacity:1;background:radial-gradient(circle at 34% 28%,var(--orb-hi) 0 8%,var(--cornflower) 55%,var(--orb-deep) 100%)}
.journey li.current i{transform:scale(1.14);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--highlight),var(--shadow-knob);animation:cc-pulse 2.6s ease-in-out infinite}
@keyframes cc-pulse{50%{box-shadow:0 0 0 3px var(--surface),0 0 0 9px color-mix(in srgb,var(--highlight) 30%,transparent),var(--shadow-knob)}}
.journey li.current{color:var(--ink);font-weight:600}
.journey li.done{color:var(--ink-2)}
.vs-row{display:grid;grid-template-columns:96px minmax(0,1fr) 64px;gap:12px;align-items:center;margin:8px 0;font-size:13px;font-weight:500}
.vs-row b{text-align:right;font-size:16px;font-weight:700;letter-spacing:-0.02em}
.vs-track{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--sunken)}
.vs-track i{display:block;transform-origin:left;animation:cc-grow 800ms var(--ease-out) both}
.vs-track .naive{background:var(--ink-3)}.vs-track .naive-held{background:var(--bad)}
.vs-track .ours{background:var(--accent)}.vs-track .kept{background:repeating-linear-gradient(135deg,var(--held) 0 3px,var(--held-soft) 3px 6px)}
.vs p{margin-top:6px;font-size:12.5px;color:var(--ink-3)}

/* C44: rendered satin material on the existing display-only week milestones. */
.journey li{gap:12px;min-width:0}
.journey i,.journey li.done i,.journey li.current i{background:url("assets/milestone-blue.webp") center/106% 106% no-repeat;box-shadow:0 5px 9px -5px rgba(20,47,94,.32)}
.journey i{opacity:.6;filter:saturate(.55)}
.journey li.done i,.journey li.current i{opacity:1;filter:none}
.journey li.current i{transform:none;animation:none;box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--highlight) 72%,transparent),0 5px 9px -5px rgba(20,47,94,.32)}
.journey li::before{height:2px;top:18px}
.vs-comparison{margin-top:18px;display:grid;gap:20px}
.vs-entry{min-width:0}
.vs-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:10px}
.vs-heading>span{font-size:13px;font-weight:600;color:var(--ink)}
.vs-heading small{display:block;font-size:11.5px;color:var(--ink-3);font-weight:400;line-height:1.6}
.vs-heading b{text-align:right;font-size:23px;font-weight:600;letter-spacing:-.025em;line-height:1.2;white-space:nowrap}
.vs-comparison .vs-track{height:18px;border-radius:5px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line)}
.vs-comparison .vs-track i{animation:none}
.vs-comparison .vs-track .naive{background:color-mix(in srgb,var(--ink-3) 55%,var(--surface))}
.vs-comparison .vs-track .naive-held{background:color-mix(in srgb,var(--bad) 68%,var(--surface));box-shadow:inset 2px 0 0 var(--surface)}
.vs-comparison .vs-track .ours{background:var(--accent);border-radius:5px}
.vs-comparison .vs-caption{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.vs-dot{flex:none;width:6px;height:6px;border-radius:2px}.vs-dot.risk{background:var(--bad)}.vs-dot.safe{background:var(--accent)}
.vs-comparison .vs-note{margin:0;padding-top:13px;border-top:1px solid var(--line);font-size:12px;line-height:1.65;color:var(--ink-3)}
@media(max-width:600px){.vs-comparison{gap:18px}.vs-heading b{font-size:22px}.vs-comparison .vs-track{height:16px}}

/* One entrance per view: the sections rise in reading order */
@keyframes cc-rise{from{opacity:0;transform:translateY(12px)}}
.cc>*{animation:cc-rise 560ms var(--ease-out) both}
.cc>:nth-child(2){animation-delay:60ms}.cc>:nth-child(3){animation-delay:120ms}.cc>:nth-child(4){animation-delay:180ms}.cc>:nth-child(5){animation-delay:240ms}.cc>:nth-child(6){animation-delay:300ms}

@media (max-width:1180px){.cc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){.cc-row,.cc-trust{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .nav-group,.sidebar-bottom{display:none}
  .sidebar{margin:8px 12px 0;border-radius:22px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-edge)}
  .topbar{margin:8px 12px;border-radius:22px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--glass-edge)}
  .command.cc{padding:4px 12px 8px;gap:20px}
  .cc-hero{padding:20px 18px;gap:18px}
  .cc-headline{font-size:30px}
  .cc-kpis{gap:28px}
  .cc-kpis>.kpi{padding:16px}
  .cc-kpis .kpi dd{font-size:23px}
  .cc-makers{padding:18px 16px}
  .cc-ask .pill-button{width:100%}
  .mcard-name{font-size:26px}
  .glass,.ov-card{border-radius:22px}
  .workspace-view:not([hidden]){padding:18px 16px}
  .journey i{width:28px;height:28px}.journey li::before{top:13px}.journey li{font-size:11px}
}
@media (max-width:520px){
  .crumbs .top-brand,.crumbs .slash{display:none}
  .clock strong{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .cc>*,.money-bar i,.vs-track i,.journey li.current i,.cc-ask-icon::after{animation:none!important}
  .mcard,.mcard-go{transition:none}
}

/* C42 review fixes: map text readable at card size (the 1000-unit plot renders at
   about 0.65x), and room under the overview for the floating demo dock. */
.p-text{font-size:15px;stroke-width:5px}
.p-text.name{font-size:18px}
.p-text.value,.p-text.flowtag{font-size:15.5px}
.p-text.sat{font-size:14px}
.p-text.count{font-size:19px}
.p-text.unit{font-size:11px}
@media (min-width:861px){
  body[data-route] .demo-bar:not([hidden])~.layout main{padding-bottom:184px}
}
@media (max-width:440px){.topbar .crumbs{display:none}}

/* Wide screens: the overview, routed views, top bar and demo dock share one right
   edge (24 px from the window) instead of stopping at 1480 or 1180 px. Maker cards
   share the row rather than leaving an empty column. */
.command.cc,body[data-route] .content{max-width:none}
.mcards{grid-template-columns:repeat(auto-fill,minmax(240px,300px))}
@media (min-width:861px){
  /* A clear gutter between the sidebar and the page, so their glass halos never touch. */
  body[data-route] .layout{column-gap:24px}
  :root body[data-route] .demo-bar{left:300px}
}

/* Maker money map in a dialog: a card opens its maker here instead of scrolling
   to the map at the bottom of the page. */
.maker-dialog{width:min(1180px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - 48px);padding:0;border:0;border-radius:28px;overflow:hidden;color:var(--ink);
  background:var(--glass-strong);backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);box-shadow:var(--glass-edge)}
.maker-dialog[open]{display:flex;flex-direction:column;animation:md-in 260ms var(--ease-out) both}
.maker-dialog::backdrop{background:rgb(15 26 51 / .34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@keyframes md-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.md-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 26px 8px}
.md-eyebrow{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.md-head h2{margin-top:2px;font:700 28px/1.1 var(--sans);letter-spacing:-0.03em}
.md-head p:last-child{margin-top:4px;font-size:14px;color:var(--ink-2)}
.md-close{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-knob);cursor:pointer}
.md-close .icon{width:18px;height:18px}
.md-body{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;min-height:0;padding:8px 26px 26px;overflow:auto}
.md-stage{min-width:0;border-radius:22px;background:var(--sunken)}
.md-stage>svg{display:block;width:100%;height:auto;max-height:calc(100vh - 220px)}
.md-panel{min-width:0;padding:18px 20px;border-radius:22px;background:var(--card);box-shadow:var(--ring);overflow:auto;max-height:calc(100vh - 220px)}
@media (max-width:900px){
  .maker-dialog{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:22px}
  .md-head{padding:18px 18px 6px}
  .md-body{grid-template-columns:minmax(0,1fr);padding:6px 14px 16px}
  .md-stage{overflow-x:auto}
  .md-stage>svg{min-width:640px;max-height:none}
  .md-panel{max-height:none}
}
@media (prefers-reduced-motion:reduce){.maker-dialog[open]{animation:none}}

/* Matte cream glass (owner, Nov 2): light surfaces are a warm cream rather than
   pure white, with a softer rim and less colour pulled through from the backdrop. */
:root,:root[data-theme="light"]{
  --surface:#fbf8f1;--sunken:rgba(246,241,230,.62);
  --glass:rgba(250,246,238,.74);--glass-strong:rgba(250,246,238,.86);--card:rgba(250,246,238,.76);--sheet:rgba(248,244,235,.72);
  --glass-edge:inset 0 0 0 1px rgba(255,252,244,.55),inset 0 1px 0 rgba(255,252,244,.7),0 0 0 8px rgba(255,250,240,.14),0 30px 60px -30px rgba(15,35,80,.42);
  --card-edge:inset 0 0 0 1px rgba(120,100,70,.08),inset 0 1px 0 rgba(255,252,244,.7),0 14px 30px -22px rgba(15,35,80,.35);
}
:root[data-theme="dark"]{--card-edge:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px -22px rgba(0,0,0,.7)}
:root:not([data-theme="dark"]) :is(.glass,.ov-card,.panel,.view-card,.desk,.detail,.callout,.ledger,.intro,.cc-kpis>.kpi,.workspace-view,.footer,.topbar,.sidebar,.demo-bar,.maker-dialog){
  backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1)}

/* Spacing leaves room for the original glass rims on adjacent cards. */
/* Warm matte light surfaces retain the blue glass backdrop and semantic accents. */
:root:not([data-theme="dark"]) :is(.glass,.ov-card,.panel,.view-card,.desk,.detail,.callout,.ledger,.intro,.cc-kpis>.kpi,.workspace-view,.footer,.topbar,.sidebar,.demo-bar,.maker-dialog){
  backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1)}

/* Leave room for both existing 8px glass rims plus a visible 12px gutter. */
.cc-kpis{gap:28px}

/* C46: two compact demo controls, rather than a full-width floating dock. */
:root body[data-route] #demo-bar.demo-bar{position:fixed;z-index:40;inset:auto 24px 20px auto;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);padding:8px;border-radius:14px;background:var(--glass-strong);box-shadow:0 0 0 1px var(--line),0 10px 28px -14px rgba(15,26,51,.35);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
#demo-bar .demo-progress{padding:0 5px;font-size:11.5px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
#demo-bar .demo-actions{display:flex;gap:6px;grid-area:auto;align-self:auto}
#demo-bar .demo-actions button{min-height:34px;padding:0 11px;border-radius:8px;font-size:12px;gap:6px}
#demo-bar .demo-actions .icon{width:15px;height:15px}
#demo-bar .demo-status.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
#demo-bar .demo-status:not(.sr-only){position:absolute;inset:auto 0 calc(100% + 10px) auto;width:300px;max-width:calc(100vw - 40px);padding:12px 14px;white-space:normal;overflow:visible;border-radius:12px;background:var(--surface);color:var(--ink-2);box-shadow:var(--ring-hover);font-size:12px;line-height:1.6}
body[data-route] .demo-bar:not([hidden])~.layout main{padding-bottom:96px}
@media(max-width:900px){:root body[data-route] #demo-bar.demo-bar{inset:auto 16px 16px auto;gap:7px}#demo-bar .demo-actions button{min-height:36px}}