/* ============================================================================
   BANIZKIT — shared design system
   One file, both pages. If index.html and sales.html ever disagree on a color,
   a size, or a space, the bug is that one of them stopped using this file.

   VOICES
   ------
   Prose speaks the system sans. Numbers, labels, and anything a bettor will
   verify speak the mono "data voice" (.data / .caplabel). That split is the
   whole aesthetic: the page reads like a research terminal because the data
   is typographically *set apart* from the sales copy.

   THE GOLD RULE
   -------------
   --edge is money and appears in exactly three places:
     1. the bet-edge chip        (.edgechip)
     2. the pick marker          (◆ / .pickmark)
     3. the season profit number (.profit-hero)
   Everything else asks for gold and is told no.
   ============================================================================ */

:root{
  /* surfaces */
  --bg:#0a0d13; --panel:#12171f; --panel2:#181e28; --panel3:#1e2530;
  --line:#232b38; --line2:#2e3847;

  /* ink */
  --ink:#e9eef5; --body:#b9c3d0; --muted:#8a97a9; --dim:#6f7b8c;

  /* semantic */
  --edge:#ffd23f;                       /* gold — MONEY ONLY, three uses */
  --pos:#3ddc97; --neg:#ff5c5c; --accent:#4a9eff;
  --pos-bg:rgba(61,220,151,.10); --neg-bg:rgba(255,92,92,.10);
  --over-bg:#12283d; --over-ink:#63b3ff;
  --under-bg:#2b1f38; --under-ink:#c39bff;

  /* type scale — nine sizes, no half-pixels, nothing outside this list */
  --t-cap:11px; --t-sm:12px; --t-md:13px; --t-base:14px; --t-lg:16px;
  --t-xl:20px; --t-2xl:26px; --t-3xl:34px; --t-hero:52px;

  /* data voice */
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* spacing — 4px grid. Pick from the scale; never eyeball. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:48px;

  /* radii */
  --r1:6px; --r2:10px; --r3:14px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;cursor:pointer}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card,.btn,.tab,.prow,tbody tr{transition:border-color .15s ease,background .15s ease,color .15s ease}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.wrap{max-width:1180px;margin:0 auto;padding:var(--s5) var(--s5) 90px}

/* ---- data voice ------------------------------------------------------- */
.data{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.caplabel{font-family:var(--mono);font-size:var(--t-cap);color:var(--dim);
  text-transform:uppercase;letter-spacing:1.1px;font-weight:500}
.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- brand ------------------------------------------------------------- */
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--ink)}
.brand .mark{flex-shrink:0;color:var(--ink)}
.brand h1{font-size:19px;margin:0;letter-spacing:3.2px;font-weight:600;color:var(--ink)}
.brand .tag{font-family:var(--mono);color:var(--dim);font-size:10px;margin-top:3px;
  text-transform:uppercase;letter-spacing:2.2px;font-weight:500}

/* ---- panels ------------------------------------------------------------ */
.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s5);margin-bottom:var(--s4)}
.panel h3{margin:0 0 var(--s1);font-size:var(--t-base);font-weight:600}
.panel .hint{color:var(--dim);font-size:var(--t-md);margin:0 0 var(--s4)}
.panel p.body{color:var(--body);font-size:var(--t-base);margin:0}

/* ---- badge: backtest / live ------------------------------------------- */
.provenance{display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);
  border-radius:var(--r1);padding:3px 10px;background:var(--panel2)}
.provenance::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--muted)}
.provenance.live{color:var(--pos);border-color:rgba(61,220,151,.35)}
.provenance.live::before{background:var(--pos)}

/* ---- record strip ------------------------------------------------------ */
.record{display:flex;gap:var(--s6);align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s3) var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.rec-i{display:flex;flex-direction:column}
.rec-i .k{font-family:var(--mono);font-size:10px;color:var(--dim);
  text-transform:uppercase;letter-spacing:1px}
.rec-i .v{font-family:var(--mono);font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:2px}
.rec-note{color:var(--dim);font-size:var(--t-sm);margin-left:auto;
  max-width:340px;text-align:right}

/* ---- tabs: labels on a hairline, not buttons ----------------------------
   Boxed pills are app furniture; an underlined label on a rule is how
   financial and editorial sites mark sections. The active tab's 2px
   underline overlaps the hairline. Still real <button role="tab">s —
   the look changed, the keyboard behavior didn't. */
.tabs{display:flex;gap:var(--s6);margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab{padding:10px 2px;margin-bottom:-1px;background:none;border:none;
  border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;
  font:500 var(--t-md)/1.4 var(--sans)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);
  font-weight:600}

/* ---- buttons ------------------------------------------------------------ */
.btn{background:var(--accent);color:#04101f;border:none;
  padding:10px 16px;border-radius:var(--r1);font-weight:600;cursor:pointer;
  font-size:var(--t-base);font-family:var(--sans)}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--muted);filter:none}
.btn.danger{background:transparent;border:1px solid rgba(255,92,92,.4);color:var(--neg)}
.btn:disabled{opacity:.4;cursor:default}

/* ---- inputs ------------------------------------------------------------- */
input[type=text],input[type=number],input[type=email],select{
  background:var(--panel2);border:1px solid var(--line2);color:var(--ink);
  padding:9px 11px;border-radius:var(--r1);font-size:var(--t-base);width:100%;
  font-family:var(--sans)}
input[type=range]{width:100%;margin-top:var(--s2);accent-color:var(--accent)}
.sub-hint{color:var(--dim);font-size:var(--t-sm);margin-top:var(--s1)}

/* ---- cards --------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:var(--s4)}
.card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s4);display:flex;flex-direction:column}
.card{position:relative}
/* picked cards get the email play-row treatment: a faint gold wash over the
   panel. Passes stay standard — the warmth IS the pick marker. */
.card.hot{border-color:rgba(255,210,63,.28);
  background:linear-gradient(rgba(255,210,63,.05),rgba(255,210,63,.05)),
             var(--panel)}
/* the pick marker: one small gold ◆ after the pitcher's name. A footnote
   mark, not a paint job — gold whispers here. */
.pickdot{color:var(--edge);font-size:var(--t-sm);margin-left:6px;
  vertical-align:1px}
.cname{font-size:var(--t-lg);font-weight:600;margin:0}
.copp{color:var(--dim);font-size:var(--t-sm);margin-top:2px}

.res-chip.push{color:var(--dim);background:var(--panel3)}

/* small opponent logo inline with "vs KC" */
.tlogo{width:16px;height:16px;vertical-align:-3px;margin:0 4px 0 2px;
  display:inline-block}

/* exact-call marker: projection rounded == actual. Not money, so not gold. */
.exact{display:flex;align-items:center;gap:6px;margin-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-cap);letter-spacing:.5px;
  color:var(--accent);background:rgba(74,158,255,.08);
  border-radius:var(--r1);padding:6px 10px}

/* meta strip: park · temp · humidity */
.conditions{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:var(--t-cap);color:var(--dim);flex-wrap:wrap}

.rows{margin-top:var(--s3);border-top:1px solid var(--line);padding-top:var(--s2)}
.row{display:flex;justify-content:space-between;align-items:center;
  padding:var(--s1) 0;font-size:var(--t-md)}
.row .k{color:var(--muted)}
.row .v{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}

/* the edge chip — gold use #1 */
.edgechip{background:var(--edge);color:#1a1400;font-weight:700;
  font-family:var(--mono);padding:2px 8px;border-radius:5px;
  font-size:var(--t-sm);letter-spacing:.2px}
.noedge{color:var(--dim);font-family:var(--mono);font-size:var(--t-sm);
  font-variant-numeric:tabular-nums}

/* ---- the vault (locked pick) --------------------------------------------
   The single most important conversion surface on the site. Not a dashed
   placeholder: a solid, composed panel that says the pick exists, is sealed,
   and will be shown to everyone — win or lose. */
.vault{margin-top:var(--s3);padding:var(--s4);border-radius:var(--r1);
  background:
    repeating-linear-gradient(-45deg,transparent 0 7px,rgba(255,255,255,.017) 7px 8px),
    var(--panel3);
  border:1px solid var(--line2);text-align:center}
.vault .ttl{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:var(--t-sm);color:var(--ink);
  font-weight:600;letter-spacing:1px;text-transform:uppercase}
.vault .ttl svg{color:var(--muted)}
.vault .sub{font-family:var(--mono);font-size:var(--t-cap);color:var(--dim);
  margin-top:5px;letter-spacing:.4px}
.vault.pass{background:var(--panel2);border-color:var(--line)}
.vault.pass .ttl{color:var(--muted);font-weight:500}

/* ---- tables --------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:var(--t-md)}
th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2);
  color:var(--dim);font-family:var(--mono);font-weight:500;
  font-size:var(--t-cap);text-transform:uppercase;letter-spacing:.8px}
td{padding:11px 12px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--panel2)}
tr.passed td{color:var(--dim)}
tr.passed img{opacity:.5}
tr.pick td:first-child{box-shadow:inset 2px 0 0 var(--edge)} /* gold #2: pick marker */

/* The chip sits in a flex row and can carry "1 in 6 MISS", so it needs
   both horizontal padding AND flex-shrink:0 — without the latter the
   flex parent squeezes the box narrower than its own text. */
.res-chip{display:inline-block;flex-shrink:0;min-width:54px;
  text-align:center;padding:5px 11px;border-radius:5px;
  font-family:var(--mono);font-size:var(--t-cap);font-weight:700;
  letter-spacing:.8px;white-space:nowrap}
.res-chip.hit{color:var(--pos);background:var(--pos-bg)}
.res-chip.miss{color:var(--neg);background:var(--neg-bg)}
/* VOID: no bet happened (scratch / didn't start) — neutral, never red */
.res-chip.void{color:var(--dim);background:var(--panel3);
  border:1px dashed var(--line2)}

.call{display:inline-block;padding:3px 9px;border-radius:5px;font-weight:700;
  font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.4px;
  white-space:nowrap}
/* quiet outline pills — a board full of filled color blocks reads like a
   toy. the color still says over/under, it just stops shouting it. */
.call.over{background:transparent;border:1px solid rgba(99,179,255,.4);
  color:var(--over-ink)}
.call.under{background:transparent;border:1px solid rgba(195,155,255,.35);
  color:var(--under-ink)}

/* ---- tearsheet ------------------------------------------------------------
   The Our Record header. Left-aligned like a fund letter: centered big numbers
   read as promotional, left-aligned ones read as financial. */
.tear{display:flex;justify-content:space-between;gap:var(--s7);flex-wrap:wrap}
.tear .left{min-width:220px}
.profit-hero{font-family:var(--mono);font-size:var(--t-hero);font-weight:700;
  color:var(--edge);letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}                /* gold use #3 */
.tear .basis{color:var(--muted);font-size:var(--t-md);margin-top:var(--s3)}
.tear .basis b{color:var(--ink);font-family:var(--mono);font-weight:600}
.tstats{display:grid;grid-template-columns:repeat(3,minmax(110px,auto));
  gap:var(--s5) var(--s7);align-content:start}
.tstat .v{font-family:var(--mono);font-size:var(--t-xl);font-weight:700;
  font-variant-numeric:tabular-nums}
.tstat .k{margin-top:3px}

/* confidence-interval bar */
.cibar{position:relative;height:14px;margin-top:var(--s2)}
.cibar .rail{position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line2)}
.cibar .iv{position:absolute;top:5px;height:4px;background:var(--muted);border-radius:2px}
.cibar .pt{position:absolute;top:3px;width:8px;height:8px;border-radius:50%;
  background:var(--ink);transform:translateX(-50%)}
.cibar .be{position:absolute;top:0;bottom:0;width:2px;background:var(--neg);
  transform:translateX(-50%)}
.ciaxis{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10px;color:var(--dim);margin-top:3px}

/* equity curve */
.eq-wrap svg{display:block;width:100%;height:auto}
.eq-final{font-family:var(--mono);font-size:var(--t-sm);color:var(--pos);
  font-weight:700}

/* monthly P&L */
.months{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--s3)}
.month{background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r1);padding:var(--s3) var(--s4)}
.month .m{font-family:var(--mono);font-size:var(--t-cap);color:var(--dim);
  text-transform:uppercase;letter-spacing:1px}
.month .p{font-family:var(--mono);font-size:var(--t-lg);font-weight:700;
  margin-top:4px;font-variant-numeric:tabular-nums}
.month .p.up{color:var(--pos)} .month .p.down{color:var(--neg)}
.month .r{font-family:var(--mono);font-size:var(--t-cap);color:var(--dim);margin-top:2px}

/* MVP tiles — profits are green, losses red. Never gold: gold is the season
   number, and a $626 pitcher tile is not the season number. */
.mvps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.mvp{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);text-align:center}
.mvp img{width:54px;height:54px;border-radius:50%;object-fit:cover;
  background:var(--panel3);border:2px solid var(--line2);margin-bottom:var(--s2)}
.mvp .nm{font-weight:600;font-size:var(--t-md);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mvp .pr{font-family:var(--mono);font-size:var(--t-xl);font-weight:700;
  margin-top:var(--s1);font-variant-numeric:tabular-nums}
.mvp .pr.up{color:var(--pos)} .mvp .pr.down{color:var(--neg)}
.mvp .rc{font-family:var(--mono);font-size:var(--t-cap);color:var(--muted);margin-top:2px}

/* pricing */
.plan{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r3);padding:var(--s6)}
.plan.pro{border-color:var(--line2)}
.plan h4{margin:0;font-size:var(--t-lg)}
.plan .amt{font-family:var(--mono);font-size:var(--t-3xl);font-weight:700;
  margin:var(--s2) 0 2px;letter-spacing:-1px}
.plan .amt span{font-size:var(--t-base);color:var(--muted);font-weight:400}
.plan ul{margin:var(--s4) 0 var(--s5);padding:0;list-style:none;
  color:var(--body);font-size:var(--t-base)}
.plan li{padding:5px 0 5px 22px;position:relative}
.plan li::before{content:"—";position:absolute;left:0;color:var(--dim)}
.plan .note{color:var(--dim);font-size:var(--t-sm);margin-top:var(--s3)}

.warn{background:var(--panel2);border:1px solid var(--line2);
  border-left:3px solid var(--accent);color:var(--body);
  padding:var(--s3) var(--s4);border-radius:var(--r1);
  font-size:var(--t-md);margin-bottom:var(--s4)}
.empty{color:var(--dim);font-size:var(--t-md);padding:var(--s6);text-align:center}

.fine{color:var(--dim);font-size:var(--t-sm);line-height:1.7;margin-top:var(--s7);
  border-top:1px solid var(--line);padding-top:var(--s5)}
.fine b{color:var(--muted)}

/* ---- mobile ---------------------------------------------------------------
   The highest-traffic view is a phone at breakfast checking last night's
   grades. It gets designed, not adapted. */
@media(max-width:760px){
  .wrap{padding:var(--s4) var(--s3) 80px}
  table{font-size:var(--t-sm)}
  th,td{padding:9px 7px}
  /* 7-column tables don't fit a phone, and horizontal scroll orphans the
     result from the pitcher. So on mobile the table shows what a phone
     reader needs — pitcher, call, actual, result — and drops line/book
     and projection (the call chip carries the line number). Columns:
     1 marker · 2 pitcher · 3 line/book · 4 call · 5 proj · 6 actual · 7 result */
  .panel table td:nth-child(1),.panel table th:nth-child(1),
  .panel table td:nth-child(3),.panel table th:nth-child(3),
  .panel table td:nth-child(5),.panel table th:nth-child(5){display:none}
  tr.pick td:nth-child(2){box-shadow:inset 2px 0 0 var(--edge)}
  /* reclaim width so RESULT never clips: photo + date sub-line hidden on
     phones, tighter cells and chips, and overflow-x as the safety net */
  .panel table td:nth-child(2) img{display:none}
  .panel table td:nth-child(2) .data{display:none}
  th,td{padding:8px 5px}
  .res-chip{min-width:42px;font-size:10px}
  .call{padding:3px 6px;font-size:var(--t-cap)}
  .panel{overflow-x:auto}
  .tabs{gap:var(--s4)}
  .grid{grid-template-columns:1fr}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    margin-left:calc(-1 * var(--s3));margin-right:calc(-1 * var(--s3));
    padding:0 var(--s3)}
  .tab{white-space:nowrap;flex-shrink:0}
  .profit-hero{font-size:var(--t-3xl)}
  .tear{gap:var(--s5)}
  .tstats{grid-template-columns:repeat(2,minmax(100px,auto));gap:var(--s4) var(--s6)}
  .rec-note{margin-left:0;text-align:left;max-width:none}
  .record{gap:var(--s4)}
}