/* ==========================================================================
   Primo — design system

   Dark by default. Sports odds are read in dark rooms and on phones at night,
   and a bright field behind dense numerals is fatiguing. Light mode is a
   deliberate omission rather than an oversight: two half-tuned themes serve
   nobody, and the palette below leans on luminance relationships that would
   need rebuilding, not inverting.
   ========================================================================== */

:root {
  /*
   * Surfaces, in ascending elevation.
   *
   * Lifted from near-black (L*~5%) to a soft slate (L*~13%) — the range most
   * data-dense dark UIs (TradingView, Bloomberg's modern surfaces, Linear)
   * converge on for extended reading. Near-black behind bright text and
   * saturated candles causes halation — a glow/afterimage effect — during a
   * long chart-reading session; this range gives data room to sit above the
   * background instead of fighting it.
   */
  --bg:         #141821;
  --surface:    #1b202b;
  --surface-2:  #232936;
  --surface-3:  #2c3343;
  --line:       #2f3748;
  --line-soft:  #252c3a;

  /* Text. Four weights of emphasis is enough; more and the hierarchy blurs.
     Primary text is softened from near-white — full white against this
     background is still a big contrast jump, and softening it slightly
     compounds with the lighter background to cut fatigue further. */
  --text:       #e8edf5;
  --text-mid:   #a3aec0;
  --text-dim:   #8a94a3;
  /*
   * Lightened from the first pass (#626b7a, 3.30:1) after checking real
   * contrast ratios. This tier is used for actual 11px body text — the
   * disclaimer, market-price footnotes, chart axis labels — not decoration,
   * so it needs the same 4.5:1 AA minimum as everything else. #7c8593 clears
   * that at 4.76:1 while staying visibly the faintest tier.
   */
  --text-faint: #7c8593;

  /*
   * Semantics. Green means the model found value — it is never decoration,
   * so seeing green anywhere carries the same meaning everywhere.
   *
   * Teal-green / coral-red rather than pure green/red, matching TradingView's
   * candle palette: desaturated pairs are easier to stare at for hours, and
   * the two are separated by LUMINANCE as well as hue, not hue alone — pure
   * #00ff00/#ff0000 pairs are the hardest combination for the ~8% of men
   * with red-green color blindness, since hue is all that separates them.
   *
   * Checked, not assumed: the first pass (#26a69a/#ef5350) only reached a
   * 1.20x luminance ratio — barely distinguishable in grayscale, undermining
   * the whole point of picking these over pure green/red. This pairing hits
   * 1.86x, and --neg still clears 4.5:1 AA contrast as real text (it colors
   * the ticker and quote-change figures, not just chart fills).
   */
  --pos:        #2dd4bf;
  --pos-dim:    #1b8a7c;
  --pos-bg:     rgba(45, 212, 191, 0.12);
  --neg:        #f0605c;
  --neg-dim:    #8a3a37;
  --warn:       #f5b544;
  --warn-dim:   #8a6420;
  --accent:     var(--pos);

  /* Type scale, 1.25 ratio, rounded to whole pixels for crisp rendering. */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 14px;
  --fs-md:   16px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  34px;

  /* Spacing, 4px base. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius:    10px;
  --radius-sm: 6px;
  --wrap:      1120px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Every figure that can be compared column-to-column is tabular, so digits
   line up and the eye can scan a column without re-reading each row. */
.num, .odds-cell, .stat-value, .pick-edge, .record-table td {
  font-variant-numeric: tabular-nums;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--pos);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Masthead ---------- */

.masthead {
  position: sticky; top: 0; z-index: 20;
  background: rgba(11, 14, 19, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead-inner {
  display: flex; align-items: center; gap: var(--sp-6);
  height: 58px;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; color: var(--text);
  font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.02em;
  flex: 0 0 auto;
}
.brand-mark {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(145deg, var(--pos), var(--pos-dim));
  color: #04120a; font-size: var(--fs-base); font-weight: 800;
}

.nav {
  display: flex; gap: var(--sp-1);
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-link {
  color: var(--text-dim); text-decoration: none;
  font-size: var(--fs-base); font-weight: 500;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.is-active { color: var(--text); background: var(--surface-3); }

/* ---------- Page head ---------- */

.board-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: flex-end; justify-content: space-between;
  margin: var(--sp-6) 0 var(--sp-5);
}
.title {
  margin: 0; font-size: var(--fs-xl);
  letter-spacing: -0.025em; font-weight: 700;
}
.subtitle {
  margin: var(--sp-1) 0 0;
  color: var(--text-dim); font-size: var(--fs-sm);
}

.controls { display: flex; gap: var(--sp-2); }
.select {
  appearance: none;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%237b8798' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  font-size: var(--fs-base); font-family: inherit; cursor: pointer;
}
.select:hover { border-color: var(--surface-3); }

/* ---------- Callout ---------- */

.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--pos-dim);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  color: var(--text-mid); font-size: var(--fs-sm); line-height: 1.6;
}
.callout strong { color: var(--text); font-weight: 600; }

.section-head {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim);
}
.section-head:first-child { margin-top: 0; }

/* ---------- Odds board ---------- */

/*
 * The board is narrower than the page on purpose.
 *
 * Price columns are capped, so a full-width card would stretch each row and
 * leave dead space between cells. Constraining the container keeps the grid
 * filling its card while the table stays compact — numbers sit near the team
 * they belong to instead of drifting apart across a 1120px line. It widens
 * naturally as books are added, since the cap is per column.
 */
.board {
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: 900px;
}

.game {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.game-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--fs-xs); color: var(--text-dim);
}
.game-league {
  font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-mid);
}

/*
 * The team column is capped rather than 1fr. Left to stretch it absorbed every
 * spare pixel and pushed prices to the far right of the card, opening a wide
 * empty gutter between a team name and its first price — the two things you
 * most need to read together. Capping it and letting the book columns take the
 * remainder closes that gap and widens the price cells at the same time.
 */
.game-grid {
  display: grid;
  grid-template-columns:
    minmax(120px, 210px)
    repeat(var(--books, 3), minmax(62px, 108px));
}
.book-head {
  padding: var(--sp-2) var(--sp-3); text-align: center;
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line-soft);
}
.book-head:first-child { text-align: left; text-transform: none; letter-spacing: 0; }

.team-cell {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); font-weight: 600;
  border-bottom: 1px solid var(--line-soft);
}
.game-grid > .is-last-row { border-bottom: none; }
.record { color: var(--text-dim); font-weight: 400; font-size: var(--fs-sm); }

.odds-cell {
  display: grid; place-items: center;
  padding: var(--sp-3) var(--sp-1);
  border-left: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-base); font-weight: 600;
  color: var(--text-mid);
}
.odds-cell.is-best {
  background: var(--pos-bg); color: var(--pos);
  box-shadow: inset 2px 0 0 var(--pos-dim);
}
.odds-line { font-size: var(--fs-xs); color: var(--text-faint); font-weight: 500; }
.odds-cell.is-best .odds-line { color: var(--pos-dim); }

/* ---------- Picks ---------- */

.picks { display: flex; flex-direction: column; gap: var(--sp-2); }

.pick {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color 0.12s ease;
}
.pick:hover { border-color: var(--surface-3); }
.pick-arb { border-color: var(--pos-dim); align-items: flex-start; }

.pick-rank {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--surface-3);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-dim);
}
/* The top pick should be visibly the top pick — rank is meaningless if every
   row looks identical. */
.pick:first-child .pick-rank {
  background: var(--pos); color: #04120a;
}

.pick-edge {
  flex: 0 0 auto; min-width: 66px;
  font-size: var(--fs-lg); font-weight: 700; color: var(--pos);
  letter-spacing: -0.02em;
}
.pick-body { flex: 1 1 auto; min-width: 0; }
.pick-side { font-weight: 600; font-size: var(--fs-md); letter-spacing: -0.01em; }
.pick-meta {
  color: var(--text-dim); font-size: var(--fs-sm);
  margin-top: 2px; display: flex; flex-wrap: wrap;
  align-items: center; gap: var(--sp-1) var(--sp-2);
}
.pick-also { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--sp-1); }

.pick-legs {
  margin: var(--sp-2) 0 0; padding: 0; list-style: none;
  font-size: var(--fs-sm); display: flex; flex-direction: column; gap: var(--sp-1);
}
.pick-legs li { color: var(--text-dim); }
.pick-legs strong { color: var(--text); font-variant-numeric: tabular-nums; }

.pick-prices { flex: 0 0 auto; text-align: right; }
.pick-book { font-size: var(--fs-sm); color: var(--text-dim); }
.pick-book strong { color: var(--text); font-variant-numeric: tabular-nums; }
.pick-fair { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; }
.pick-stake {
  font-size: var(--fs-xs); color: var(--pos-dim); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
/*
 * The unit figure (1u = 1% of bankroll) is the same number as the percentage,
 * shown in the shorthand bettors actually use — "bet 1.5u" reads faster than
 * "bet 1.50% of roll" to anyone used to betting language. Styled as a small
 * badge rather than plain text so the two readings stay visually distinct
 * even though they carry identical information.
 */
.pick-units {
  display: inline-block; margin-left: var(--sp-2);
  padding: 0 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--text-mid);
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------- Tags ---------- */

.tag {
  display: inline-block;
  padding: 1px var(--sp-2); border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-mid);
}
.tag-sim { color: var(--pos); border-color: var(--pos-dim); }
.tag-warn { color: var(--warn); border-color: var(--warn-dim); }

/* ---------- Explainer: the layered detail ---------- */

.pick-why {
  border-top: 1px solid var(--line-soft);
  margin-top: var(--sp-3); padding-top: var(--sp-3);
}
.why-summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-sm); color: var(--text-dim);
  display: flex; align-items: center; gap: var(--sp-1);
  user-select: none;
}
.why-summary::-webkit-details-marker { display: none; }
.why-summary::after {
  content: "▾"; font-size: 10px; transition: transform 0.15s ease;
}
details[open] .why-summary::after { transform: rotate(180deg); }
.why-summary:hover { color: var(--text); }

.why-body { margin-top: var(--sp-3); font-size: var(--fs-sm); }
.why-plain {
  color: var(--text-mid); line-height: 1.6;
  margin: 0 0 var(--sp-3);
}

/* Horizontal bar showing how the final number was reached. Comparing three
   probabilities as text is work; comparing three bars is not. */
.why-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.why-row { display: grid; grid-template-columns: 92px 1fr 58px; align-items: center; gap: var(--sp-3); }
.why-label { color: var(--text-dim); font-size: var(--fs-xs); }
.why-track {
  height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden;
}
.why-fill { height: 100%; border-radius: 3px; background: var(--text-faint); }
.why-fill.is-market { background: var(--text-dim); }
.why-fill.is-sim { background: var(--pos-dim); }
.why-fill.is-final { background: var(--pos); }
.why-value {
  text-align: right; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; color: var(--text-mid);
}
.why-row.is-final .why-value { color: var(--text); font-weight: 600; }

.why-note {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.6;
}

/* ---------- Daily sport sections ---------- */

.sport-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.sport-head:first-child { margin-top: 0; }
.sport-name {
  margin: 0; font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em;
}
.sport-note { color: var(--text-dim); font-size: var(--fs-sm); }

/* ---------- Track record ---------- */

.verdict {
  padding: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-base); line-height: 1.55;
  margin-bottom: var(--sp-4);
}
.verdict-good { border-left: 2px solid var(--pos); }
.verdict-bad  { border-left: 2px solid var(--neg); }
.verdict-none { border-left: 2px solid var(--text-faint); color: var(--text-mid); }

.stats {
  display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
}
.stat-value {
  font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.15;
}
.stat-label { font-size: var(--fs-sm); color: var(--text-dim); margin-top: 2px; }
.stat-note {
  font-size: var(--fs-xs); color: var(--text-faint);
  margin-top: var(--sp-2); line-height: 1.45;
}

/* Confidence is expressed visually as well as in words, so a number the
   sample cannot support never reads as a headline. */
.conf-meaningful .stat-value { color: var(--text); }
.conf-early .stat-value { color: var(--text-mid); }
.conf-insufficient .stat-value { color: var(--text-faint); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.record-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.record-table th, .record-table td {
  padding: var(--sp-2) var(--sp-4); text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.record-table th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); background: var(--surface-2); font-weight: 600;
}
.record-table tr:last-child td { border-bottom: none; }
.record-table .num { text-align: right; }

/* ---------- States ---------- */

.empty {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: var(--sp-5);
  color: var(--text-dim); font-size: var(--fs-sm); margin: 0;
  line-height: 1.6;
}

/* Skeletons stand in while data loads. A grey block that matches the shape of
   the eventual row reads as "working"; a bare word reads as "broken". */
.skeleton {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.skeleton-bar {
  height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-bar.w-sm { width: 60px; }
.skeleton-bar.w-md { width: 180px; }
.skeleton-bar.w-lg { width: 100%; max-width: 320px; }

@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; }
  * { transition: none !important; }
}

.progress-note {
  color: var(--text-dim); font-size: var(--fs-sm);
  display: flex; align-items: center; gap: var(--sp-2);
}

.disclaimer {
  margin: var(--sp-6) 0 var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .masthead-inner { gap: var(--sp-4); height: 54px; }
  .board-head { margin: var(--sp-5) 0 var(--sp-4); }
  .title { font-size: var(--fs-lg); }
  .stat-value { font-size: var(--fs-lg); }
}

@media (max-width: 620px) {
  .game-grid {
    grid-template-columns:
      minmax(88px, 150px)
      repeat(var(--books, 3), minmax(48px, 1fr));
  }
  .team-cell { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); }
  .odds-cell { font-size: var(--fs-sm); padding: var(--sp-2) 2px; }
  .book-head { font-size: 10px; padding: var(--sp-1) var(--sp-1); }
}

@media (max-width: 560px) {
  /* Stack the pick card: at this width the three columns squeeze the team
     name to a couple of characters, which is worse than wrapping. */
  .pick { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .pick-edge { font-size: var(--fs-md); min-width: 56px; }
  .pick-body { flex-basis: calc(100% - 96px); }
  .pick-prices { text-align: left; flex-basis: 100%; }
  .pick-prices > * { display: inline-block; margin-right: var(--sp-3); }
  .why-row { grid-template-columns: 78px 1fr 52px; gap: var(--sp-2); }
}

/* ---------- Charts ---------- */

.chart { width: 100%; height: auto; display: block; }

.c-grid     { stroke: var(--line-soft); stroke-width: 1; }
.c-baseline { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.c-axis     { fill: var(--text-faint); font-size: 10px; font-family: var(--font); }

.c-line  { fill: none; stroke: var(--text-mid); stroke-width: 1.5; }
.c-trend { fill: none; stroke: var(--pos); stroke-width: 1.5; }
.c-trend-slow { fill: none; stroke: var(--warn); stroke-width: 1.5; }

/* The band is the volatility read, so it must be visible without competing
   with the candles it sits behind. */
.c-band { fill: rgba(122, 135, 152, 0.10); stroke: none; }

.c-body.c-up   { fill: var(--pos); }
.c-body.c-down { fill: var(--neg); }
.c-wick.c-up   { stroke: var(--pos); stroke-width: 1; }
.c-wick.c-down { stroke: var(--neg); stroke-width: 1; }
.c-vol.c-up    { fill: var(--pos); opacity: 0.30; }
.c-vol.c-down  { fill: var(--neg); opacity: 0.30; }

.c-mark-hi { fill: var(--pos); stroke: var(--bg); stroke-width: 1.5; }
.c-mark-lo { fill: var(--neg); stroke: var(--bg); stroke-width: 1.5; }
.c-bar-hi  { fill: var(--pos-dim); }
.c-bar-lo  { fill: var(--neg-dim); }

.chart-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.chart-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.chart-title { margin: 0; font-size: var(--fs-md); font-weight: 700; }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--text-dim);
}
.legend-key {
  display: inline-block; width: 10px; height: 3px;
  border-radius: 2px; margin-right: 5px; vertical-align: middle;
}
.chart-note {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.6;
}

.ticker {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: baseline; margin-bottom: var(--sp-3);
}
.ticker-price {
  font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ticker-change { font-size: var(--fs-md); font-weight: 600; }
.ticker-change.is-up   { color: var(--pos); }
.ticker-change.is-down { color: var(--neg); }
.ticker-meta { color: var(--text-dim); font-size: var(--fs-sm); }

/* Timeframe tabs — sit beneath the plot, so the border is on top. */
.tf-tabs {
  display: flex; gap: var(--sp-1);
  margin: var(--sp-3) 0 0;
  overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--line); padding-top: var(--sp-3);
}
.tf-tabs::-webkit-scrollbar { display: none; }
.tf-tab {
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); font-family: inherit; font-size: var(--fs-base);
  font-weight: 500; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.tf-tab:hover { color: var(--text); background: var(--surface-2); }
.tf-tab.is-active {
  color: var(--text); background: var(--surface-3); border-color: var(--line);
}

/* ---------- Quote header (trading-terminal format) ---------- */

.quote {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.quote-main {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.quote-price {
  font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.quote-change {
  font-size: var(--fs-md); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.quote-change.is-up   { color: var(--pos); }
.quote-change.is-down { color: var(--neg); }
.quote-unit {
  font-size: var(--fs-sm); color: var(--text-faint);
  margin-left: auto;
}

/* Stat strip: even columns so the eye can scan across timeframes without
   re-finding each label. */
.quote-strip {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.q-cell { min-width: 0; }
.q-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-faint); margin-bottom: 2px;
}
.q-value {
  font-size: var(--fs-base); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 560px) {
  .quote-price { font-size: var(--fs-xl); }
  .quote-unit { margin-left: 0; flex-basis: 100%; }
}

/* Fixed plot height keeps the card from jumping as timeframes swap between
   candlestick and per-game views. */
.chart-plot {
  min-height: 210px;
  display: flex; align-items: center;
}
.chart-plot > * { width: 100%; }

/* Inline tab group used as a control rather than a section switch. */
.tf-tabs.is-inline {
  margin: 0; padding: 0; border-top: none;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 2px;
}
.tf-tabs.is-inline .tf-tab { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }

.prop-table td:first-child { font-weight: 600; color: var(--text); }
.prop-table .is-up   { color: var(--pos); }
.prop-table .is-down { color: var(--neg); }
.t-sub { color: var(--text-faint); font-size: var(--fs-xs); font-weight: 400; }

@media (max-width: 720px) {
  .controls { flex-wrap: wrap; }
  .controls .select { flex: 1 1 140px; min-width: 0; }
}

/* ---------- Trends: list + chart layout ---------- */

.trends-layout {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
}

.entity-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  position: sticky; top: 72px;
}
.entity-head { padding: var(--sp-2); border-bottom: 1px solid var(--line); }
.entity-filter {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); font-family: inherit; font-size: var(--fs-sm);
}
.entity-filter::placeholder { color: var(--text-faint); }
.entity-team {
  width: calc(100% - var(--sp-4)); margin: var(--sp-2);
  font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2);
}

/* Capped height with its own scroll so the chart never gets pushed below the
   fold by a 30-row list. */
.entity-list {
  list-style: none; margin: 0; padding: var(--sp-1);
  max-height: 58vh; overflow-y: auto;
}
.entity-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text-mid);
  cursor: pointer; user-select: none;
  transition: background 0.1s ease, color 0.1s ease;
}
.entity-item:hover { background: var(--surface-2); color: var(--text); }
.entity-item.is-active {
  background: var(--surface-3); color: var(--text); font-weight: 600;
}
.entity-item.is-active::before {
  content: ""; width: 2px; align-self: stretch;
  background: var(--pos); border-radius: 1px; margin-right: var(--sp-2);
}
.entity-meta { color: var(--text-faint); font-size: var(--fs-xs); flex: 0 0 auto; }
.entity-group {
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-faint); font-weight: 600;
}
.entity-empty { padding: var(--sp-4); color: var(--text-faint); font-size: var(--fs-sm); }

@media (max-width: 860px) {
  .trends-layout { grid-template-columns: 1fr; }
  .entity-panel { position: static; }
  .entity-list { max-height: 240px; }
}

/* ---------- Arbitrage stake table ---------- */

.arb-table { margin-top: var(--sp-3); }
.arb-table th:first-child,
.arb-table td:first-child { min-width: 190px; }
.arb-table td:first-child strong {
  color: var(--text); font-variant-numeric: tabular-nums;
}

/*
 * Total at risk is emphasised as strongly as the profit. An arb card showing
 * only the upside invites discovering the capital requirement after the first
 * leg is already placed — a 2.7% margin needs about $3,800 down to lock $100.
 */
.arb-total td {
  border-top: 1px solid var(--line);
  color: var(--text); font-weight: 600;
}
.arb-locks td { color: var(--pos); font-weight: 700; }

/* ---------- Chart synopsis ---------- */

.synopsis {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
/* Static section label — not a <summary>, nothing to click. The synopsis is
   always rendered open, so this just tells the reader what the block is. */
.synopsis-label {
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.synopsis-body { margin-top: var(--sp-3); }
.synopsis-headline {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border-left: 2px solid var(--pos);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
}
.synopsis-h {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim);
}
.synopsis-list {
  margin: 0; padding-left: var(--sp-4);
  font-size: var(--fs-sm); color: var(--text-mid); line-height: 1.65;
}
.synopsis-list li { margin-bottom: var(--sp-2); }
.synopsis-approach {
  margin: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--pos-bg); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text); line-height: 1.65;
}
/* Caveats are dimmed but never hidden — the limits are the honest half. */
.synopsis-caveats { color: var(--text-faint); }

/* ---------- Auth / account ---------- */

.auth-card {
  max-width: 400px; margin: var(--sp-6) auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5);
}
.auth-title { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-4); }
.auth-field { margin-bottom: var(--sp-4); }
.auth-label {
  display: block; font-size: var(--fs-sm); color: var(--text-dim);
  margin-bottom: var(--sp-1);
}
.auth-input {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3); font-size: var(--fs-base); font-family: inherit;
}
.auth-input:focus { outline: 2px solid var(--pos); border-color: transparent; }
.auth-error {
  color: var(--neg); font-size: var(--fs-sm); margin: 0 0 var(--sp-4);
  min-height: 1.2em;
}
.auth-note {
  font-size: var(--fs-sm); color: var(--text-dim); margin-top: var(--sp-4);
}
.auth-note a { color: var(--pos); }

.btn {
  display: inline-block; width: 100%; text-align: center;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  font-size: var(--fs-base); font-weight: 600; font-family: inherit;
  border: none; cursor: pointer;
}
.btn-primary {
  background: linear-gradient(145deg, var(--pos), var(--pos-dim)); color: #0b1116;
}
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-secondary {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
}

.status-badge {
  display: inline-block; padding: 2px var(--sp-2); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.status-active { background: var(--pos-bg); color: var(--pos); }
.status-inactive, .status-canceled { background: var(--surface-2); color: var(--text-dim); }
.status-past_due { background: rgba(245, 181, 68, 0.12); color: var(--warn); }