/* ============================================================================
   CERBERUS SITE DESIGN SYSTEM — the single source of truth for page chrome.
   Linked by every page. Change THIS file → every page's look changes.
   Pairs with page-header.js (structure) — change THAT → every header restructures.
   (viz-agent, Mike GO 2026-09-23)
   ============================================================================ */

:root{
  /* ---- palette ---- */
  --ds-bg:#04060a; --ds-bg-1:#080c12; --ds-panel:#080c12;
  --ds-line:rgba(120,180,220,.12); --ds-line-2:rgba(120,180,220,.20);
  --ds-ink:#e6f1f7; --ds-ink-2:#8ea3b3; --ds-mut:#5d7182; --ds-mut-2:#3a4a5a;
  --ds-green:#2ee6a0; --ds-cyan:#3fd0ff; --ds-amber:#f5a524; --ds-red:#ff6a5e;
  --ds-violet:#a78bfa; --ds-teal:#2dd4bf; --ds-blue:#7cc4ff;
  /* venue accents */
  --ds-kr:#a78bfa; --ds-cb:#3fd0ff; --ds-cbeq:#7cc4ff; --ds-alp:#2dd4bf;
  /* ---- type ---- */
  --ds-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --ds-fs-title:21px; --ds-fs-sub:11.5px; --ds-fs-crumb:10px;
  --ds-fs-tab:11px; --ds-fs-label:8px; --ds-fs-body:13px;
  /* ---- layout ---- */
  --ds-maxw:none; --ds-padx:26px; --ds-padtop:20px; --ds-padbot:64px;   /* Mike 2026-09-23: full-width standard — content fills the screen on every page (one knob) */
  --ds-radius:9px; --ds-gap:12px;
}

/* ---- page width shell: uniform width + gutters on every page ---- */
.ds-shell{width:100%;max-width:var(--ds-maxw);margin:0 auto;padding:var(--ds-padtop) var(--ds-padx) var(--ds-padbot);box-sizing:border-box;flex:1 1 auto;align-self:stretch}   /* width:100%+flex safety = fills the page in block AND flex-body layouts (Mike 2026-09-23) */

/* ---- standard header (rendered by page-header.js into #ds-header) ---- */
.ds-head{margin:0 0 16px}
.ds-crumb{font-size:var(--ds-fs-crumb);letter-spacing:.09em;color:var(--ds-mut);margin:0 0 8px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;text-transform:uppercase}
.ds-crumb a{color:var(--ds-mut);text-decoration:none}
.ds-crumb a:hover{color:var(--ds-ink-2)}
.ds-crumb .ds-sep{color:var(--ds-mut-2)}
.ds-title{display:flex;align-items:center;gap:10px;font:600 var(--ds-fs-title)/1.1 var(--ds-mono);color:var(--ds-ink);letter-spacing:-.01em;margin:0}
.ds-title .ds-ic{font-size:19px;line-height:1}
.ds-sub{font-size:var(--ds-fs-sub);color:var(--ds-ink-2);margin:6px 0 0;line-height:1.5;max-width:1100px}
.ds-sub .ds-live{color:var(--ds-mut);font-size:10px}

/* ---- sub-nav tabs (e.g. Reconciliation: Balances / Accounting / CFM) ---- */
.ds-subnav{display:flex;align-items:center;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.ds-subnav .ds-snlabel{font-size:var(--ds-fs-label);letter-spacing:.15em;text-transform:uppercase;color:var(--ds-mut);margin-right:4px}
.ds-tab{font:600 var(--ds-fs-tab)/1 var(--ds-mono);padding:7px 13px;border-radius:7px;text-decoration:none;white-space:nowrap;color:var(--ds-ink-2)!important;background:rgba(120,180,220,.06);border:1px solid transparent;transition:background .12s,color .12s}
.ds-tab:hover{color:var(--ds-ink)!important;background:rgba(120,180,220,.10)}
.ds-tab.active{background:#1f6feb;color:#fff!important;font-weight:700}

/* ---- collapsible "how it works" / definitions block ---- */
.ds-info{margin:10px 0 0;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-panel)}
.ds-info>summary{cursor:pointer;list-style:none;padding:9px 13px;font-size:var(--ds-fs-crumb);letter-spacing:.1em;text-transform:uppercase;color:var(--ds-ink-2)}
.ds-info>summary::-webkit-details-marker{display:none}
.ds-info>summary::before{content:"\25B8 ";color:var(--ds-mut)}
.ds-info[open]>summary::before{content:"\25BE "}
.ds-info .ds-info-body{padding:2px 14px 13px;font-size:11px;line-height:1.65;color:var(--ds-ink-2)}

/* ---- shared structural primitives (opt-in) ---- */
.ds-panel{background:var(--ds-panel);border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
.ds-hair{height:1px;background:var(--ds-line);border:0;margin:0}

/* ---- responsive ---- */
@media(max-width:900px){
  :root{--ds-padx:14px;--ds-fs-title:17px}
  .ds-shell{padding:14px var(--ds-padx) 48px}
  .ds-subnav{overflow-x:auto;-webkit-overflow-scrolling:touch}
}