/* v2 dashboard — only what Tailwind utilities can't express. */
:root {
  --obsidian: #090d16;
  --brand: #6366f1;
  --pos: #10b981;
  --parlay: #f59e0b;
}

html, body { background: var(--obsidian); }

/* Numbers, odds, lines, percentages always align column-to-column. */
.font-mono,
.font-mono * {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Animated pill indicator: one element, translated between tabs. */
.tab-pill {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

[x-cloak] { display: none !important; }

/* Probability bar: width animates on first paint, not on hover. */
.prob-bar > span {
  transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tab-pill,
  .prob-bar > span { transition: none; }
  * { animation-duration: 0.001ms !important; }
}

/* Lucide injects <svg>; keep sizing predictable inside flex rows. */
[data-lucide] { flex: none; }

/* W / L / P on a graded game pick (V = void, props only).  data-r is set by
   the server and by the board's live-score poll (templates/index.html). */
.pick-result:not(.hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}
.pick-result[data-r="W"] { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.1); }
.pick-result[data-r="L"] { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); }
.pick-result[data-r="P"],
.pick-result[data-r="V"] { color: #94a3b8; border-color: rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.08); }