/* OVERSIGHT — "Old Soul, Modern Build" design system.
   Editorial-brutalist, monochrome, vintage-modern. Self-hosted fonts (CSP-safe).
   Light default; [data-theme="dark"] = "Night watch". Derived from the approved
   hero-c / overview / profile designs. */

/* ---------- fonts (self-hosted, per CSP 'self') ---------- */
@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url('/fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-style:normal;font-display:swap;src:url('/fonts/archivo-800.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-weight:900;font-style:normal;font-display:swap;src:url('/fonts/archivo-900.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-weight:400;font-style:normal;font-display:swap;src:url('/fonts/fraunces-400.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-weight:400;font-style:italic;font-display:swap;src:url('/fonts/fraunces-400i.woff2') format('woff2')}

:root{
  --paper:#E7E3D8; --paper-lift:#F1EDE3; --paper-deep:#DAD5C7;
  --ink:#16150F; --ink-2:#46433A; --ink-3:#817C6F;
  --line:#C7C1B2; --line-2:#D5CFC0; --block:#141310; --on-block:#ECE8DD;
  --good:#3C5741; --bad:#8A2B22;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --wrap:1200px; --gutter:clamp(16px,4vw,44px);
}
[data-theme="dark"]{
  --paper:#141310; --paper-lift:#1C1A15; --paper-deep:#0E0D0B;
  --ink:#E7E3D8; --ink-2:#B8B3A5; --ink-3:#847F72;
  --line:#2E2C25; --line-2:#24221C; --block:#E7E3D8; --on-block:#141310;
  --good:#8FB08C; --bad:#D68B80;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;position:relative}
/* paper grain */
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.045}

a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-.02em;line-height:.94}
.tnum{font-variant-numeric:tabular-nums}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[data-theme="dark"] :focus-visible{outline-color:var(--paper)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.rule{height:0;border:0;border-top:1px solid var(--ink);margin:0}
.hair{height:0;border:0;border-top:1px solid var(--line);margin:0}

/* ---------- micro-labels / marks ---------- */
.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.idx{font-size:11px;letter-spacing:.1em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.br{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.mark-star{display:inline-block;color:var(--ink);vertical-align:middle}
.mark-aperture{display:block;width:100%;height:auto;color:var(--ink)}

/* ---------- masthead ---------- */
.mast{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 0 16px;border-bottom:1px solid var(--ink)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand .badge{width:30px;height:30px;background:var(--block);color:var(--on-block);display:grid;place-items:center;flex:none}
.brand .badge .mark-star{color:var(--on-block)}
.brand .word{font-weight:900;letter-spacing:.12em;font-size:17px;line-height:1}
.brand .sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.mainnav{display:flex;gap:18px;flex-wrap:wrap}
.mainnav a{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:3px 0;border-bottom:2px solid transparent}
.mainnav a:hover{color:var(--ink);border-color:var(--line)}
.mainnav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.mast .right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* ---------- pills & buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--block);color:var(--on-block);
  border:1px solid var(--block);border-radius:999px;padding:9px 18px;font:600 12.5px/1 var(--sans);
  letter-spacing:.04em;cursor:pointer;transition:opacity .15s}
.pill:hover{opacity:.88}
.pill svg{width:15px;height:15px}
.pill.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.pill.sm{padding:7px 13px;font-size:11px}
.textlink{font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:1px}
.textlink:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- period control ---------- */
.controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden}
.seg a,.seg button{font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:8px 16px;background:transparent;color:var(--ink-2);border:0;cursor:pointer;text-decoration:none}
.seg a.on,.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.monthnav{display:inline-flex;align-items:center;gap:10px}
.monthnav a,.monthnav button{width:28px;height:28px;border:1px solid var(--line);background:transparent;color:var(--ink-2);
  border-radius:999px;cursor:pointer;display:grid;place-items:center;font-size:15px;text-decoration:none}
.monthnav a:hover{border-color:var(--ink);color:var(--ink)}
.monthnav .m{font-weight:800;letter-spacing:.02em;font-size:14px;min-width:132px;text-align:center}
.monthnav .off{opacity:.3;pointer-events:none}
.compare{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-3);letter-spacing:.06em}

/* ---------- hero ---------- */
.hero{position:relative;padding:40px 0 34px;border-bottom:1px solid var(--ink)}
.kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.verdict{font-family:var(--sans);font-weight:900;letter-spacing:-.025em;line-height:1.0;
  font-size:clamp(44px,9vw,124px);padding-bottom:.04em}
/* Display type & chrome are decoration, not content — not selectable. Data
   (tables, KPI values, prose) stays selectable so figures can be copied. */
.verdict,.kicker,.br,.lbl,.idx,.markfig,.mast,.mainnav,.brand,.controls,.foot,
.e-tag,.panel-head,.table-foot,.seg,.monthnav,.compare,.login-stage{
  -webkit-user-select:none;user-select:none}
.verdict .thin{color:var(--ink-3)}
.verdict .dash{color:var(--ink-2)}
.standfirst{font-family:var(--serif);font-size:clamp(16px,2vw,21px);line-height:1.5;max-width:34ch;color:var(--ink-2);margin:20px 0 0}
.standfirst em{font-style:italic;color:var(--ink)}
.herofoot{display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap;margin-top:26px}
.bigfig{display:flex;gap:16px;align-items:baseline}
.bigfig .n{font-weight:900;letter-spacing:-.03em;font-size:clamp(52px,8vw,92px);line-height:.82}
.bigfig .role{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;line-height:1.5}
.bigfig .denom{font-size:12px;color:var(--ink-2);max-width:32ch;margin-top:8px;line-height:1.5}
.markfig{position:absolute;right:0;top:0;width:min(34vw,330px);margin:0;opacity:.96}
@media (min-width:901px){ .hero{padding-right:clamp(250px,36vw,380px)} }
.markfig figcaption{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center;margin-top:8px}
.reg{position:absolute;color:var(--ink-3);width:22px;height:22px;opacity:.6}
.reg svg{width:100%;height:100%}

/* ---------- deltas ---------- */
.delta{font-size:12px;font-weight:600;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.delta.up{color:var(--good)} .delta.down{color:var(--bad)}
.delta .car{font-size:9px;vertical-align:1px}

/* ---------- KPI band: oversized numerals on hairline rules ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.kpi{padding:22px 22px 22px 0;border-left:1px solid var(--line);padding-left:22px}
.kpi:first-child{border-left:0;padding-left:0}
.kpi .k-l{display:flex;gap:8px;align-items:baseline;margin-bottom:12px}
.kpi .n{font-weight:900;letter-spacing:-.03em;font-size:clamp(38px,5vw,64px);line-height:.85}
.kpi .n .u{font-size:.45em;font-weight:800;color:var(--ink-2);letter-spacing:0}
.kpi .k-sub{font-size:11.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.kpi .spark{margin-top:10px;height:26px;color:var(--ink)}
.kpi.flag .n{color:var(--bad)}
.nodata{color:var(--ink-3);font-style:italic;font-weight:400;font-size:.5em;letter-spacing:0}

/* ---------- section header (exhibit) ---------- */
.exhibit{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;align-items:baseline;padding:34px 0 16px}
.exhibit .e-tag{grid-column:1;white-space:nowrap}
.exhibit .e-title{grid-column:2;font-weight:900;letter-spacing:-.015em;font-size:clamp(22px,3vw,34px);line-height:1}
.exhibit .e-note{grid-column:2;font-family:var(--serif);font-size:15px;color:var(--ink-2);max-width:52ch;margin-top:6px;line-height:1.5}
.exhibit .e-meta{grid-column:2;justify-self:end;align-self:baseline}

/* ---------- editorial ledger (tables) ---------- */
.ledger-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ledger{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ledger thead th{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;font-weight:600;padding:0 16px 10px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.ledger th.num,.ledger td.num{text-align:right}
.ledger tbody td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:baseline;font-size:14px}
.ledger tbody tr:hover td{background:var(--paper-lift)}
.ledger .r-idx{color:var(--ink-3);font-size:11px;width:1%;white-space:nowrap}
.ledger .r-name{font-weight:800;letter-spacing:-.01em;font-size:15px}
.ledger .r-sub{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:2px}
.ledger .big{font-weight:900;font-size:18px;letter-spacing:-.02em}
.ledger .sharebar{height:6px;background:var(--line);min-width:80px;position:relative}
.ledger .sharebar i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.table-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.06em;color:var(--ink-3);padding:12px 0 0}

/* ---------- findings / exceptions ---------- */
.findings{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.finding{padding:22px 26px 22px 0;border-left:1px solid var(--line);padding-left:26px;display:grid;
  grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline}
.finding:nth-child(-n+2){}
.finding .f-n{font-weight:900;font-size:clamp(30px,4vw,46px);letter-spacing:-.03em;line-height:.85;grid-row:span 2}
.finding.bad .f-n{color:var(--bad)}
.finding .f-l{font-weight:800;font-size:14px}
.finding .f-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.finding .f-why{font-size:12.5px;color:var(--ink-2);line-height:1.5;grid-column:2}

/* ---------- three indices ---------- */
.indices{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.index{padding:24px 26px 26px 0;border-left:1px solid var(--line);padding-left:26px}
.index:first-child{border-left:0;padding-left:0}
.index .i-fig{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px}
.index .i-fig .n{font-weight:900;letter-spacing:-.03em;font-size:clamp(48px,6vw,80px);line-height:.82}
.index .i-fig .un{font-size:15px;font-weight:800;color:var(--ink-2)}
.index .i-read{font-family:var(--serif);font-size:14px;color:var(--ink-2);line-height:1.5;margin-bottom:14px}
.index .i-read em{color:var(--ink);font-style:italic}
.index .i-rows{border-top:1px solid var(--line)}
.index .i-rows .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.index .i-rows .row .v{font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- charts (monochrome) ---------- */
.chart{border-top:1px solid var(--line);padding-top:14px}
.chart .c-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.chart .c-t{font-weight:800;font-size:13px}
.chart .c-meta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.chart svg{width:100%;height:auto;display:block;color:var(--ink)}
.chart .bar{fill:var(--ink)} .chart .bar.soft{fill:var(--line)}
.chart .base{stroke:var(--ink);stroke-width:1}
.chart .ref{stroke:var(--ink-3);stroke-dasharray:2 3;stroke-width:1}
.chart .tick{fill:var(--ink-3);font-size:9px;letter-spacing:.06em}
.chart .legend{display:flex;gap:16px;font-size:10.5px;color:var(--ink-3);margin-top:8px}
.chart .legend i{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.chart .legend i.ink{background:var(--ink)} .chart .legend i.soft{background:var(--line)}

/* ---------- build-time ribbon (three-clock) ---------- */
.ribbon{border-top:1px solid var(--line);padding-top:16px}
.ribbon svg{width:100%;height:auto;color:var(--ink)}
.ribbon .lane-l{fill:var(--ink-3);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.ribbon .commit{stroke:var(--ink);stroke-width:2}
.ribbon .ticket{stroke:var(--ink-3);stroke-width:2;stroke-dasharray:1 3}
.ribbon .claude{fill:var(--ink-3);opacity:.5}
.ribbon .build{fill:var(--paper-deep);stroke:var(--ink);stroke-width:1}
.ribbon .after{fill:none;stroke:var(--ink-3);stroke-width:1}

/* ---------- alerts ---------- */
.incident{border:1px solid var(--bad);padding:14px 18px;margin:18px 0;display:flex;gap:14px;font-size:13px;line-height:1.5}
.incident .tag{color:var(--bad);font-weight:800;letter-spacing:.06em;white-space:nowrap}
.empty{border:1px dashed var(--line);padding:24px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.6}
.empty .t{display:block;font-weight:900;font-size:15px;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:26px 0 46px;margin-top:20px;
  border-top:1px solid var(--ink);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(3){border-left:0;padding-left:0}
  .findings,.indices{grid-template-columns:1fr}
  .index,.finding:nth-child(n){border-left:0;padding-left:0}
  .markfig{position:static;width:min(60vw,260px);margin:0 0 8px auto}
  .exhibit{grid-template-columns:1fr}.exhibit .e-tag,.exhibit .e-meta{grid-column:1;justify-self:start}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr}.kpi{border-left:0;padding-left:0}
  .compare{margin-left:0}
  .ledger-wrap .ledger{min-width:640px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ---------- compatibility: shared data partials in the new language ----------
   Lets the existing _metric / _trend / _daychart / _rhythm / _freshness partials
   render in this design without rewriting every row. */
.muted{color:var(--ink-3)}
.ok,.fresh{color:var(--good)} .danger,.flag,.stale{color:var(--bad)}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px 44px;
  border-top:1px solid var(--ink);padding-top:24px;margin:4px 0 8px}
.panel{border:0;background:none;margin:0}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--ink);padding-bottom:9px;margin-bottom:2px}
.panel-head .muted{font-size:10px;letter-spacing:.1em}
.metric-grid .ledger{width:100%;border-collapse:collapse}
.metric-grid .ledger tbody td{padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:baseline}
.metric-grid .ledger tbody td:first-child{color:var(--ink-2);padding-right:12px}
.metric-grid .ledger td.num{text-align:right;font-weight:700;white-space:nowrap}
.trend{font-size:11px;font-weight:600;margin-left:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.trend.up{color:var(--good)} .trend.down{color:var(--bad)}
.range{display:inline-flex;gap:4px;flex-wrap:wrap}
.range a{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);padding:5px 12px;border-radius:999px;text-decoration:none}
.range a:hover{color:var(--ink);border-color:var(--ink)}
.range a.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.case-note{border-left:2px solid var(--ink);background:var(--paper-lift);padding:12px 16px;margin:18px 0;
  font-size:13px;line-height:1.6;color:var(--ink-2)}
.case-note b{color:var(--ink)}
.model-chip{font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.redact{color:inherit}
/* daychart / rhythm / sparkline (monochrome) */
.daychart,.chart-frame{border-top:1px solid var(--line);padding:16px 0 6px;margin:18px 0}
.daychart .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.daychart .t{font-weight:800;font-size:13px;letter-spacing:-.01em}
.daychart .legend{display:flex;gap:14px;font-size:10.5px;color:var(--ink-3)}
.daychart .legend i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px}
.daychart .legend i.strong{background:var(--ink)} .daychart .legend i.soft{background:var(--line)}
.daychart .legend i.pending{background:none;border:1px dashed var(--line)}
.daychart path.strong,.daychart rect.strong{fill:var(--ink)}
.daychart path.soft,.daychart rect.soft{fill:var(--line)}
.daychart path.pending{fill:none;stroke:var(--line);stroke-width:1;stroke-dasharray:2 2}
.daychart line.base{stroke:var(--ink);stroke-width:1}
.daychart text.tick{fill:var(--ink-3);font-size:9px} .daychart text.peak{fill:var(--ink-2);font-size:9px}
.daychart g.bar:hover rect.strong,.daychart g.bar:hover rect.soft{fill:var(--bad)}
.spark rect{fill:var(--line)} .spark rect.on{fill:var(--ink)}
.dow-row{display:flex;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.dow{flex:1;text-align:center} .dow-bar{height:32px;display:flex;align-items:flex-end;justify-content:center}
.dow-bar i{display:block;width:70%;background:var(--line)}
.dow-lab{font-size:9px;color:var(--ink-3);margin-top:3px} .dow-lab.off{color:var(--bad)}
.incident .tag{color:var(--bad);font-weight:800}
/* person masthead extras */
.subject-head{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}

.is-hidden{display:none!important}