@import url('./tokens.css');
* { box-sizing:border-box; }
html { font-size:100%; }
body { margin:0; background:var(--page-bg); color:var(--text-primary); font:400 var(--fs-base)/var(--lh-body) var(--font-body); letter-spacing:.025em; cursor:default; }
[hidden] { display:none !important; }
h1,h2,h3 { font-family:var(--font-heading); font-weight:600; line-height:var(--lh-heading); letter-spacing:.01em; margin:0; }
h1 { font-size:var(--fs-xl); } h2 { font-size:var(--fs-lg); } h3 { font-size:var(--fs-md); }
p { margin:0 0 1rem; } p:last-child { margin-bottom:0; }
button,input,select,textarea { font:400 var(--fs-control)/var(--lh-body) var(--font-body); }
button,a[href],summary,select { cursor:pointer; }
input,textarea,[contenteditable="true"] { cursor:text; }
input[type="checkbox"],input[type="radio"] { cursor:pointer; }
a { color:inherit; text-underline-offset:.16em; }
small,.secondary,.legend,.as-of { font-size:var(--fs-sm); color:var(--text-secondary); }
.subtitle { font-size:var(--fs-md); color:var(--text-secondary); margin-top:.35rem; }
.eyebrow,.caption,.pill { font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; }
.eyebrow { margin-bottom:.5rem; color:var(--text-secondary); }
.num,.hero-value { font-variant-numeric:tabular-nums; }
.hero-value { display:block; font:400 var(--fs-hero)/var(--lh-body) var(--font-hero); letter-spacing:.025em; }
:focus-visible { outline:2px solid var(--focus-color); outline-offset:3px; }
.button,button { border:1px solid var(--text-primary); border-radius:999px; background:var(--secondary-button-bg); color:var(--secondary-button-text); min-height:40px; padding:.5rem 1rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; text-decoration:none; }
.button:hover,button:hover { border-color:var(--brand-wave); }
.button.primary { background:var(--primary-button-bg); color:var(--primary-button-text); }
button:disabled { cursor:not-allowed; border-color:var(--card-border); }
input,select,textarea { border:1px solid var(--text-secondary); border-radius:12px; background:var(--card-bg); color:var(--text-primary); padding:.5rem .75rem; min-height:40px; max-width:100%; }
label { display:block; margin-bottom:.4rem; }
.topbar { background:var(--header-bg); color:var(--brand-white); min-height:72px; display:flex; align-items:center; gap:16px; padding:12px 24px; }
.brandmark { width:152px; height:auto; display:block; flex:none; }
.nav { display:flex; flex:1; min-width:0; gap:2px; align-items:center; overflow-x:auto; padding:4px; }
.nav a { display:inline-flex; align-items:center; flex:none; min-height:40px; padding:0 12px; font-size:var(--fs-control); border-radius:999px; text-decoration:none; }
.nav a:hover { background:#262626; }
.nav a[aria-current="page"] { background:var(--brand-yellow); color:var(--brand-black); }
.header-actions { display:flex; align-items:center; gap:8px; flex:none; }
.topbar .segmented { background:var(--brand-black); border-color:var(--brand-white); }
.topbar .segmented button { color:var(--brand-white); }
.topbar :focus-visible { outline-color:var(--brand-white); outline-offset:-3px; }
.segmented { display:inline-flex; align-items:center; gap:4px; padding:4px; border:1px solid var(--card-border); border-radius:999px; max-width:100%; overflow:auto; }
.segmented button { border:0; background:transparent; flex:none; white-space:nowrap; }
.segmented button[aria-pressed="true"],.topbar .segmented button[aria-pressed="true"] { background:var(--selected-bg); color:var(--selected-text); }
.topbar .segmented button { min-height:30px; padding:0 10px; }
.skip-link { position:fixed; left:12px; top:-100px; z-index:100; background:var(--brand-white); color:var(--brand-black); padding:12px; }
.skip-link:focus { top:12px; }
main { max-width:var(--content-max); margin:auto; padding:32px 24px 48px; }
.page-head { margin-bottom:24px; }
.page-head .as-of { margin-top:.75rem; }
.stack { display:grid; gap:24px; min-width:0; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.card,.metric { position:relative; min-width:0; border:1px solid var(--card-border); border-radius:var(--card-radius); background:var(--card-bg); --card-rail:var(--brand-wave); }
.card::before,.metric::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:var(--card-radius) 0 0 var(--card-radius); background:var(--card-rail); pointer-events:none; z-index:2; }
:is(.card,.metric)[data-rail="primary"],:is(.card,.metric)[data-rail="alert"] { --card-rail:var(--rail-primary); }
:is(.card,.metric)[data-rail="construction"] { --card-rail:var(--brand-stone); }
:is(.card,.metric)[data-rail="channel"] { --card-rail:var(--brand-wave); }
:is(.card,.metric)[data-selected="true"] { --card-rail:var(--brand-yellow); }
.card:hover,.metric:hover { border-color:var(--text-secondary); }
.metric { padding:var(--space-card); }
.metric .caption { display:block; margin-bottom:.25rem; }
.card-header { padding:var(--space-card); background:var(--card-header-bg); border-radius:var(--card-radius) var(--card-radius) 0 0; }
.card-body { padding:var(--space-card); }
.card-body > .callout { margin-bottom:20px; }
.callout { border-left:2px solid var(--brand-wave); background:var(--callout-bg); border-radius:0 12px 12px 0; padding:var(--space-card); color:var(--text-secondary); font-size:var(--fs-base); }
.callout strong { color:inherit; }
.disclosure > summary { display:flex; align-items:center; gap:12px; padding:var(--space-card); list-style:none; font-size:var(--fs-md); font-weight:600; }
.disclosure > summary::-webkit-details-marker { display:none; }
.disclosure > summary::before { content:'▸'; flex:none; }
.disclosure[open] > summary::before { content:'▾'; }
.disclosure[open] > summary { background:var(--card-header-bg); border-radius:12px 12px 0 0; }
.pill { display:inline-flex; align-items:center; justify-content:center; flex:none; white-space:nowrap; border-radius:999px; border:1px solid var(--text-primary); padding:4px 9px; color:var(--text-primary); background:transparent; }
.pill[data-status="risk"] { background:var(--risk-fill); color:var(--risk-ink); border-color:var(--risk-fill); }
.pill[data-status="due"] { background:var(--brand-stone); color:var(--brand-black); border-color:var(--brand-stone); }
.pill[data-series="oem"] { background:var(--series-oem); color:var(--brand-black); border-color:var(--series-oem); }
.pill[data-series="construction"] { background:var(--series-construction); color:var(--brand-black); border-color:var(--series-construction); }
.pill[data-series="channel"] { background:var(--series-channel); color:var(--brand-black); border-color:var(--series-channel); }
.identity { display:flex; align-items:center; gap:10px; min-width:0; }
.identity .name { min-width:0; overflow-wrap:anywhere; }
.inline { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.table-scroll,.chart-scroll { min-width:0; max-width:100%; overflow:auto; border:1px solid var(--card-border); border-radius:12px; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-base); font-variant-numeric:tabular-nums; }
th,td { text-align:left; padding:var(--table-row-padding) 12px; border-bottom:1px solid var(--card-border); background:var(--card-bg); font-weight:400; vertical-align:middle; }
thead th { background:var(--table-header-bg); color:var(--table-header-ink); font-size:var(--fs-base); font-weight:600; text-transform:none; letter-spacing:normal; }
th.num,td.num { text-align:right; white-space:nowrap; }
tbody tr:not(.probability-row):hover > * { background:var(--hover-bg); }
tbody tr:last-child > * { border-bottom:0; }
.sticky-first :is(th,td):first-child { position:sticky; left:0; z-index:1; border-right:1px solid var(--card-border); }
.sticky-first thead th:first-child { z-index:2; }
.wide-table { min-width:900px; }
.wide-table :is(th,td):first-child { min-width:220px; max-width:240px; }
.probability-row > * { background:var(--stage-row-bg); color:var(--stage-row-ink); }
.probability-row:hover > * { border-bottom-color:var(--stage-row-ink); }
.table-hint { margin-top:8px; }
.legend { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:16px 0; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.swatch-dot { display:inline-block; width:12px; height:12px; border:1px solid var(--text-primary); background:var(--swatch); flex:none; }
.track { background:var(--track); border-radius:999px; height:12px; display:flex; overflow:hidden; margin:8px 0; }
.track span { height:100%; background:var(--series-color); }
.chart-scroll { background:var(--plot-bg); }
.chart-svg { display:block; width:100%; }
.chart-svg text { fill:var(--text-primary); font:400 var(--fs-sm)/var(--lh-body) var(--font-body); font-variant-numeric:tabular-nums; }
.chart-svg .gridline { stroke:var(--plot-grid); stroke-dasharray:4 5; }
.chart-svg .axis { stroke:var(--text-secondary); }
.chart-segment { cursor:pointer; stroke:var(--text-primary); stroke-width:1; }
.chart-segment:hover,.chart-segment:focus-visible { stroke-width:3; outline:none; }
.tooltip { position:fixed; z-index:20; width:min(360px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow-y:auto; padding:18px; border:1px solid var(--brand-wave); border-radius:12px; background:var(--card-bg); color:var(--text-primary); pointer-events:none; }
.tooltip .tip-title { font-size:var(--fs-md); font-weight:600; }
.tooltip .tip-value { font-size:var(--fs-lg); font-weight:600; margin:4px 0; }
.tooltip dl { margin:12px 0 0; }
.tip-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:12px; padding:7px 0; }
.tip-row dt,.tip-row dd { margin:0; font-size:var(--fs-base); }
.tip-row dd { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tip-row.total { border-top:1px solid var(--card-border); padding-top:12px; margin-top:5px; font-weight:600; }
.line-inputs { display:flex; flex-wrap:wrap; gap:16px; padding-top:20px; }
.line-inputs input { width:76px; }
.swatches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.swatch { height:80px; border:1px solid var(--card-border); border-radius:8px; margin-bottom:10px; background:var(--swatch); }
.token-label { display:block; font-weight:600; }
.sample-notice { border-left:2px solid var(--brand-wave); padding-left:12px; margin-top:16px; font-size:var(--fs-sm); color:var(--text-secondary); }
.empty-state { padding:24px; text-align:center; color:var(--text-secondary); }
footer { max-width:var(--content-max); margin:auto; padding:0 24px 24px; font-size:var(--fs-sm); color:var(--text-secondary); }
@media(max-width:1000px) { .metrics { grid-template-columns:1fr; } .swatches { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
  .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 16px; }
  .brandmark { grid-column:1/-1; } .nav { grid-column:1; } .header-actions { grid-column:2; }
  main { padding:24px 16px; } .grid { grid-template-columns:1fr; }
  .card-header,.card-body,.metric { padding:var(--space-card); }
  .identity { flex-wrap:wrap; } .swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }