/* ============================================================
   Modo Carrera — Design System entry stylesheet
   Everything a rendered design needs is reachable from here.
   ============================================================ */

/* Fonts — Inter (whole UI) + JetBrains Mono (code/hex only).
   Faithful to the source guide, which loads them from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* Tokens */
@import url('./tokens/tokens.css');

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:var(--font-ui);font-size:16px;line-height:1.6;
  font-feature-settings:"tnum" 1,"cv05" 1,"ss01" 1;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
code{
  font-family:var(--font-code);font-size:12.5px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-xs);padding:1px 5px;color:var(--accent-hi);
}

/* ---------- Type scale (size + weight, one family) ----------
   Closed scale: 11 · 12 · 13 · 15 · 16 · 17 · 19 · 24 · 30 · 40 px. */
.d1{font-size:40px;font-weight:800;letter-spacing:-.025em;line-height:1.05}   /* H1 Display */
.d2{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15}    /* H2 Title */
.d3{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1.2}    /* H3 Section */
.d4{font-size:19px;font-weight:600;letter-spacing:-.005em;line-height:1.3}    /* H4 Subsection */
.d5{font-size:17px;font-weight:600;line-height:1.4}                           /* H5 Block */
.bl{font-size:17px;font-weight:400;color:var(--text-2);line-height:1.65}      /* Body large (guides only) */
.bd{font-size:16px;font-weight:400;color:var(--text-2);line-height:1.6}       /* Body default */
.bs{font-size:14px;font-weight:400;color:var(--text-2);line-height:1.55}      /* Body small */
.tb{font-size:15px;font-weight:500;line-height:1.4;font-variant-numeric:tabular-nums} /* Table */
.mt{font-size:13px;font-weight:400;color:var(--text-3);line-height:1.5}       /* Metadata */
.mo{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--chrome)} /* Label (small caps) */
.mi{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)} /* Micro (absolute floor) */

/* ---------- Cards & grids ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:22px;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---------- Signature component: potential bar ----------
   The bar receives its TARGET band via --tgt (e.g. style="--tgt:var(--r5)").
   Solid fill = current band's color; striped ghost = target band's color;
   grey channel = theoretical ceiling. One component covers all 25 band crossings. */
.pot{margin:6px 0 2px}
.pot-nums{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.pot-cur{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pot-arrow{color:var(--text-3);font-size:14px}
.pot-max{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pot-gap{font-size:12px;font-weight:600;color:var(--up);background:rgba(64,192,87,.14);border-radius:99px;padding:2px 8px;margin-left:2px}
.pot-bar{position:relative;height:10px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.pot-fill{position:absolute;inset:0 auto 0 0;border-radius:99px}
.pot-ghost{
  position:absolute;top:0;bottom:0;border-radius:0 99px 99px 0;
  background:repeating-linear-gradient(105deg,var(--tgt,var(--r5)) 0 5px,transparent 5px 10px);
  opacity:.55;border-right:2px solid var(--tgt,var(--r5));
}
.pot-scale{display:flex;justify-content:space-between;font-size:11px;font-weight:500;color:var(--text-3);margin-top:5px}

/* ---------- Rating chips (badge) ----------
   Number inside a colored badge → use --r1..--r5 (background) + ink rule. */
.rc{
  font-family:var(--font-ui);font-weight:800;font-size:16px;letter-spacing:-.01em;
  min-width:38px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-xs);color:var(--r-ink);font-variant-numeric:tabular-nums;
}
.rc.t1{background:var(--r1);color:var(--r-ink-alt)}  /* <50  white ink */
.rc.t2{background:var(--r2);color:var(--r-ink)}      /* 50-59 dark ink */
.rc.t3{background:var(--r3);color:var(--r-ink)}      /* 60-69 dark ink */
.rc.t4{background:var(--r4);color:var(--r-ink)}      /* 70-79 dark ink */
.rc.t5{background:var(--r5);color:var(--r-ink-alt)}  /* 80+  white ink */
.chip-lbl{font-size:11px;font-weight:600;color:var(--text-3);display:block;text-align:center;margin-top:5px}

/* ---------- Deltas ---------- */
.delta{font-size:13px;font-weight:700;padding:2px 7px;border-radius:var(--r-xs);font-variant-numeric:tabular-nums}
.delta.up{color:var(--up);background:rgba(64,192,87,.15)}
.delta.down{color:var(--down);background:rgba(255,107,107,.15)}
.delta.flat{color:var(--flat);background:rgba(134,142,150,.15)}

/* ---------- Player row (main pattern, 48–52px tall) ---------- */
.prow{
  display:grid;grid-template-columns:26px 1fr 88px 150px 74px 64px;
  gap:14px;align-items:center;padding:11px 14px;
  border-bottom:1px solid var(--border);background:var(--surface);
}
.prow:hover{background:var(--surface-2)}
.prow.head{
  background:var(--bg);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border-strong);
}
.pname{font-weight:600;font-size:15px;line-height:1.3;letter-spacing:-.005em}
.pmeta{font-size:13px;color:var(--text-3)}
.pnum{font-size:13px;font-weight:500;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
.minibar{height:6px;background:var(--surface-3);border-radius:99px;position:relative;overflow:hidden;margin-top:5px}

/* ---------- Priority tags ---------- */
.pri{font-size:11px;padding:2px 8px;border-radius:99px;white-space:nowrap;font-weight:700;letter-spacing:.03em}
.pri.p1{background:var(--chrome-dim);color:var(--chrome-hi)}   /* MVP */
.pri.p2{background:var(--accent-dim);color:var(--accent-hi)}  /* Phase 1 */
.pri.p3{background:rgba(134,142,150,.18);color:var(--text-3)} /* Transversal */

/* ---------- Note / callout ---------- */
.note{border-left:3px solid var(--chrome);background:var(--chrome-dim);padding:14px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:16px 0}
.note p{margin:0;color:var(--text)}
.note p+p{margin-top:8px}

/* ---------- Do / Don't ---------- */
.dd{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.do,.dont{border-radius:var(--r-sm);padding:16px 18px;border:1px solid var(--border)}
.do{background:rgba(64,192,87,.07);border-left:3px solid var(--up)}
.dont{background:rgba(255,107,107,.07);border-left:3px solid var(--down)}
.do h4,.dont h4{margin-top:0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.do h4{color:var(--up)} .dont h4{color:var(--down)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px}
th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:10px;border-bottom:1px solid var(--border-strong);vertical-align:bottom}
td{padding:10px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:top}
td strong{color:var(--text)}
tbody tr:hover{background:var(--surface)}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}