/* /gamblers. Loaded by templates/v2/gamblers.html only.

   Gambler colours (--g-osprey, --g-falcon, --g-owl) mark identity: the top border, the badge,
   the lines. Result numbers use .is-up / .is-down, the win and loss colours, never these. */

.page-gamblers .g-num { font-variant-numeric: tabular-nums; }

/* ── head ───────────────────────────────────────────────────────────────── */
.g-head { padding-top: var(--s-12); padding-bottom: var(--s-8); }
.g-head .eyebrow { margin: 0 0 var(--s-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
.g-head h1 { font-size: clamp(32px, 5vw, var(--fs-3xl)); }
.g-sub { margin: var(--s-3) 0 0; font-size: clamp(16px, 2vw, var(--fs-md)); color: var(--muted); max-width: 52ch; }

/* ── combined chart ─────────────────────────────────────────────────────── */
.g-chart h2 { font-size: var(--fs-lg); }
.g-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-chart-empty { margin: var(--s-2) 0 var(--s-4); }
.g-tick { fill: var(--muted); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.g-ref { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.g-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.g-dot { stroke: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
polyline.g-line-osprey { stroke: var(--g-osprey); }
polyline.g-line-falcon { stroke: var(--g-falcon); }
polyline.g-line-owl { stroke: var(--g-owl); }
circle.g-line-osprey { fill: var(--g-osprey); }
circle.g-line-falcon { fill: var(--g-falcon); }
circle.g-line-owl { fill: var(--g-owl); }
/* Falcon and Owl also differ by dash, so the lines part ways without colour too. */
polyline.g-line-falcon { stroke-dasharray: 7 4; }
polyline.g-line-owl { stroke-dasharray: 2 4; }

.g-legend { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: var(--s-3) var(--s-6); }
.g-legend li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.g-legend-val { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ── the three columns ──────────────────────────────────────────────────── */
.g-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  margin-top: var(--s-4); align-items: start; }
.v2 .g-col { border-top: 3px solid var(--line); display: flex; flex-direction: column; gap: var(--s-3); }
.v2 .g-col-osprey { border-top-color: var(--g-osprey); }
.v2 .g-col-falcon { border-top-color: var(--g-falcon); }
.v2 .g-col-owl { border-top-color: var(--g-owl); }
.g-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.g-col-head h2 { font-size: inherit; line-height: 1; }
.g-col-head .gambler { font-size: var(--fs-base); padding: 4px 12px 4px 10px; }
.g-tagline { margin: 0; font-weight: 600; }
.g-since { margin: 0; font-size: var(--fs-sm); }
.g-since b { color: var(--text); }

.g-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0; }
.g-kpi { background: var(--surface-2); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); min-width: 0; }
.g-kpi dt { font-size: var(--fs-xs); color: var(--muted); }
.g-kpi dd { margin: 2px 0 0; font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; }
.g-kpi dd.is-up { color: var(--accent); }
.g-kpi dd.is-down { color: var(--loss); }
/* CLV sits alone on the last row; let it span so the grid closes square. */
.g-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

.g-spark { display: block; width: 100%; height: auto; overflow: visible; }

.g-picks-title { margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  letter-spacing: 0; }
.g-picks { list-style: none; margin: 0; padding: 0; }
.g-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3);
  padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.g-pick:first-child { border-top: 0; }
.g-pick-match { font-weight: 600; overflow-wrap: anywhere; }
.g-pick-time { color: var(--muted); font-weight: 500; margin-right: var(--s-2); }
.g-pick-mkt { grid-column: 1; font-size: var(--fs-xs); }
.g-pick-odds { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; }
.g-note { margin: 0; font-size: var(--fs-sm); }
.g-locked { display: flex; align-items: flex-start; gap: var(--s-2); margin: 0; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.g-locked svg { flex: none; margin-top: 2px; color: var(--muted); }
.g-updated { margin: var(--s-2) 0 0; font-size: var(--fs-sm); }
.g-empty-link { margin-top: var(--s-2) !important; font-size: var(--fs-sm); font-weight: 600; }

.g-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1);
  padding: var(--s-8) var(--s-4); border: 1px dashed var(--line); border-radius: var(--r); }
.g-empty-icon { color: var(--muted); margin-bottom: var(--s-1); }
.g-empty p { margin: 0; }
.g-empty .muted { font-size: var(--fs-sm); max-width: 32ch; }
.g-empty-title { font-weight: 600; }

/* ── the honest note ────────────────────────────────────────────────────── */
.g-honest { margin-top: var(--s-8); max-width: 760px; }
.g-honest p { margin: 0 0 var(--s-3); line-height: 1.55; }
.g-honest .muted { font-size: var(--fs-sm); }

@media (max-width: 899px) {
  .g-cols { grid-template-columns: 1fr; }
  .g-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-kpi:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 479px) {
  .g-head { padding-top: var(--s-8); padding-bottom: var(--s-6); }
  .g-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .g-tick { font-size: 18px; }
}