/* ============================================================
   CPC Explorer — shared instrument-panel styling
   Braun / monospace-numeral / near-black house language.
   ============================================================ */
:root{
  --bg:#0b0b0d;          /* page */
  --panel:#121215;       /* raised surface */
  --panel-2:#17171b;     /* nested surface */
  --line:#26262c;        /* hairline */
  --line-2:#34343c;      /* stronger hairline */
  --ink:#ECEAE4;         /* primary text */
  --ink-dim:#9A968C;     /* secondary text */
  --ink-faint:#6A675F;   /* tertiary / units */
  --copper:#C8804A;      /* brand accent */
  --amber:#E0A458;       /* hot / headline */
  --cool:#5B7C8D;        /* cool low end */
  --good:#6Fae8f;
  --warn:#d9a441;
  --hot:#d96a4a;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --radius:3px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.unit{color:var(--ink-faint);font-size:.8em}
a{color:var(--copper);text-decoration:none}

/* ---- top bar ------------------------------------------------ */
.cpc-top{
  display:flex;align-items:center;gap:24px;
  padding:16px 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(11,11,13,.92);backdrop-filter:blur(8px);z-index:50;
}
.cpc-top .eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);
}
.cpc-top h1{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:2px 0 0}
.cpc-top .spacer{flex:1}
.cpc-meta{font-family:var(--mono);font-size:11px;color:var(--ink-dim);text-align:right;line-height:1.6}
.cpc-meta b{color:var(--ink)}

/* market toggle ------------------------------------------------ */
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden}
.seg button{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  background:transparent;color:var(--ink-dim);border:0;padding:7px 14px;cursor:pointer;
  border-right:1px solid var(--line-2);transition:.15s;
}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--copper);color:#140d07;font-weight:600}
.seg button:not(.on):hover{color:var(--ink);background:var(--panel-2)}

/* ---- layout -------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:28px}
.hero{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:24px;position:relative;
}
.hero-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.hero-head .tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);
}
.hero-head h2{font-size:15px;font-weight:600;margin:0}
.hero-head .hint{color:var(--ink-dim);font-size:12px;margin-left:auto}

/* big stat readout (instrument panel) ------------------------- */
.readout{display:flex;gap:30px;flex-wrap:wrap;margin:4px 0 0}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.stat .v{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--amber);line-height:1.1}
.stat .v.sm{font-size:20px;color:var(--ink)}
.stat .sub{font-family:var(--mono);font-size:11px;color:var(--ink-dim)}

/* ---- the locked baseline table ------------------------------ */
.tbl-head{display:flex;align-items:baseline;gap:12px;margin:6px 0 10px}
.tbl-head .tag{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.tbl-head h2{font-size:14px;font-weight:600;margin:0}
table.cpc{width:100%;border-collapse:collapse;font-size:13px}
table.cpc th{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);text-align:right;padding:8px 12px;border-bottom:1px solid var(--line-2);
  cursor:pointer;user-select:none;white-space:nowrap;
}
table.cpc th:first-child{text-align:left}
table.cpc th.sorted::after{content:" ▾";color:var(--copper)}
table.cpc th.sorted.asc::after{content:" ▴"}
table.cpc td{padding:7px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
table.cpc td:first-child{text-align:left}
tr.cat>td:first-child{font-weight:600}
tr.cat{background:var(--panel-2)}
tr.cat:hover,tr.bank:hover,tr.kw:hover{background:#1d1d22}
tr.bank td:first-child{padding-left:30px;color:var(--ink)}
tr.kw td:first-child{padding-left:52px;color:var(--ink-dim);font-size:12px}
tr.kw td{color:var(--ink-dim);border-bottom:1px dotted var(--line)}
.caret{display:inline-block;width:12px;color:var(--ink-faint);transition:transform .12s}
.caret.open{transform:rotate(90deg);color:var(--copper)}
.disc{cursor:pointer}
.swatch{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:baseline}
.pill{font-family:var(--mono);font-size:9px;letter-spacing:.06em;padding:2px 6px;border-radius:2px;border:1px solid var(--line-2);color:var(--ink-dim)}
.pill.HIGH{color:var(--hot);border-color:#5a342b}
.pill.MEDIUM{color:var(--warn);border-color:#4f4326}
.pill.LOW{color:var(--good);border-color:#2c4a3c}
.insuff{color:var(--ink-faint);font-style:italic}

/* shared svg/canvas hero stage */
.stage{width:100%;display:block}
.legend{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;color:var(--ink-dim);margin-top:8px}
.legend .bar{height:8px;width:160px;border-radius:2px;
  background:linear-gradient(90deg,var(--cool),var(--copper),var(--amber),var(--hot))}
.tip{
  position:fixed;pointer-events:none;z-index:99;background:#0a0a0c;border:1px solid var(--line-2);
  border-radius:var(--radius);padding:8px 10px;font-family:var(--mono);font-size:11px;color:var(--ink);
  box-shadow:0 6px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .1s;max-width:280px;
}
.tip .h{color:var(--amber);font-weight:600;margin-bottom:3px}
.tip .r{color:var(--ink-dim)}
.tip .r b{color:var(--ink)}

/* nav between sketches — sticky under the top bar so you always know where you are */
.sketchnav{display:flex;gap:10px;font-family:var(--mono);font-size:11px;padding:12px 28px;
  position:sticky;top:69px;z-index:49;background:rgba(11,11,13,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.sketchnav a{border:1px solid var(--line-2);border-radius:var(--radius);padding:6px 12px;color:var(--ink-dim)}
.sketchnav a.on{background:var(--copper);color:#140d07;border-color:var(--copper);font-weight:600}
.sketchnav a:hover{color:var(--ink)}

/* ============================================================
   Cost Ladder (hero 01) — ranked ranged bars, log scale
   ============================================================ */
.lad-axis{position:relative;height:18px;margin:0 0 4px 220px;border-bottom:1px solid var(--line-2)}
.lad-axis .t{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:10px;color:var(--ink-faint);bottom:3px}
.lad-axis .t::after{content:"";position:absolute;left:50%;bottom:-5px;width:1px;height:5px;background:var(--line-2)}
.lad-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.5}
.lad-row{display:flex;align-items:center;gap:0;min-height:34px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.lad-row:hover{background:var(--panel-2)}
.lad-row.sel{background:#1d1814}
.lad-row .lab{width:220px;flex:0 0 220px;padding-right:14px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden}
.lad-row .lab .caret{flex:0 0 12px}
.lad-row .lab .nm{overflow:hidden;text-overflow:ellipsis}
.lad-row.cat .lab .nm{font-weight:600}
.lad-row.bank .lab{padding-left:30px}
.lad-track{position:relative;flex:1;height:34px}
.lad-bar{position:absolute;top:50%;transform:translateY(-50%);height:9px;border-radius:5px;opacity:.5}
.lad-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.lad-p75{position:absolute;top:50%;transform:translate(8px,-50%);font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap}
.lad-meta{position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--ink-dim);white-space:nowrap}
.lad-insuff{position:absolute;top:50%;left:4px;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-style:italic}
.lad-cap{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin:12px 0 0 220px}
.lad-cap .ki{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--copper);vertical-align:baseline;margin:0 4px 0 14px}
.lad-cap .kb{display:inline-block;width:22px;height:7px;border-radius:4px;background:var(--copper);opacity:.5;vertical-align:middle;margin:0 4px 0 14px}
/* keyword leaves under a bank */
.lad-kw{display:flex;align-items:center;padding:5px 0 5px 250px;border-bottom:1px dotted var(--line);font-size:12px;color:var(--ink-dim)}
.lad-kw .kn{flex:1}
.lad-kw .kc{font-family:var(--mono);width:90px;text-align:right}
.lad-kw .kv{font-family:var(--mono);width:80px;text-align:right;color:var(--ink-faint)}

/* selection readout card */
.lad-card{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-end;
  background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;min-height:64px}
.lad-card .hint{color:var(--ink-faint);font-size:12px;align-self:center}
.lad-card .x{margin-left:auto;align-self:flex-start;cursor:pointer;color:var(--ink-faint);font-family:var(--mono)}
.lad-card .x:hover{color:var(--hot)}

/* disclosure for the raw table */
.disclose{margin-top:26px}
.disclose>summary{font-family:var(--mono);font-size:12px;color:var(--ink-dim);cursor:pointer;
  list-style:none;border:1px solid var(--line-2);border-radius:var(--radius);padding:9px 14px;display:inline-block}
.disclose>summary:hover{color:var(--ink);background:var(--panel-2)}
.disclose>summary::-webkit-details-marker{display:none}
.disclose[open]>summary{margin-bottom:14px;color:var(--ink)}