/* Control styles for the style chooser (debug): data-ui on <html>. Each preset sets the --ctl-* variables (tokens.css)
   and the look of tabs, navigation and the chart's range buttons.
   References: Radix Themes' variants (surface, classic, soft, ghost: radix-ui.com/themes), Vercel Geist (surface: 6 px,
   hairline, faint shadow), Linear (soft: filled, no border), Material 3 (underline: filled-less text fields with a bottom
   line), Apple / iOS (pill: fully rounded). "hairline" is the first version. Default (no data-ui): surface. */

/* ---- surface (default): quiet bordered fields, a raised segmented control ---- */
:root:not([data-ui]), :root[data-ui="surface"] {
  --ctl-radius: 6px; --ctl-bg: var(--bg); --ctl-border: var(--line-strong); --ctl-border-hover: var(--muted);
  --ctl-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
:root:not([data-ui]) .tabs, :root[data-ui="surface"] .tabs,
:root[data-ui="classic"] .tabs { gap: 2px; padding: 2px; background: var(--bg-2); border-radius: 8px; border: 1px solid var(--line); }
:root:not([data-ui]) .tabs button, :root[data-ui="surface"] .tabs button,
:root[data-ui="classic"] .tabs button { border: 0; padding: 3px 12px; border-radius: 6px; font-size: var(--fs-13); }
:root:not([data-ui]) .tabs button.on, :root[data-ui="surface"] .tabs button.on,
:root[data-ui="classic"] .tabs button.on { background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line); }

/* ---- classic: Radix "classic": raised fields with a soft gradient ---- */
:root[data-ui="classic"] {
  --ctl-radius: 4px; --ctl-border: var(--line-strong); --ctl-border-hover: var(--muted);
  --ctl-shadow: 0 1px 1px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .5);
}
:root[data-ui="classic"] .input, :root[data-ui="classic"] .select, :root[data-ui="classic"] .btn:not(.primary), :root[data-ui="classic"] .who {
  background-image: linear-gradient(to bottom, var(--bg), var(--bg-2)); }
:root[data-ui="classic"] .select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to bottom, var(--bg), var(--bg-2));
  background-position: calc(100% - 13px) 52%, calc(100% - 9px) 52%, 0 0; background-size: 4px 4px, 4px 4px, 100% 100%; }

/* ---- soft: Radix "soft" / Linear: filled, borderless ---- */
:root[data-ui="soft"] {
  --ctl-radius: 6px; --ctl-bg: var(--bg-2); --ctl-border: transparent; --ctl-border-hover: transparent;
  --ctl-hover-bg: var(--line); --ctl-shadow: none;
}
:root[data-ui="soft"] .tabs { gap: 2px; }
:root[data-ui="soft"] .tabs button { border: 0; padding: 4px 12px; border-radius: 6px; }
:root[data-ui="soft"] .tabs button.on { background: var(--bg-2); }
:root[data-ui="soft"] #nav a.on { border-bottom-color: transparent; }
:root[data-ui="soft"] #nav { gap: 2px; align-self: center; }
:root[data-ui="soft"] #nav a { padding: 5px 10px; border-radius: 6px; border: 0; margin: 0; }
:root[data-ui="soft"] #nav a.on { background: var(--bg-2); }

/* ---- ghost: Radix "ghost": nothing until hovered ---- */
:root[data-ui="ghost"] {
  --ctl-radius: 6px; --ctl-bg: transparent; --ctl-border: transparent; --ctl-border-hover: transparent;
  --ctl-hover-bg: var(--bg-2); --ctl-shadow: none;
}
:root[data-ui="ghost"] .input { border-bottom-color: var(--line-strong); border-radius: 0; }
:root[data-ui="ghost"] .tabs button { border-bottom-width: 2px; }

/* ---- pill: fully rounded fields and chip tabs ---- */
:root[data-ui="pill"] {
  --ctl-radius: 999px; --ctl-bg: var(--bg); --ctl-border: var(--line-strong); --ctl-border-hover: var(--text); --ctl-shadow: none;
}
:root[data-ui="pill"] .select { padding-left: 14px; }
:root[data-ui="pill"] .tabs { gap: 6px; }
:root[data-ui="pill"] .tabs button { border: 1px solid var(--line-strong); padding: 3px 12px; border-radius: 999px; font-size: var(--fs-13); }
:root[data-ui="pill"] .tabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
:root[data-ui="pill"] .tabs button.on b { color: var(--bg); opacity: .7; }
:root[data-ui="pill"] .chart-head .rng button.on { border-radius: 999px; }

/* ---- underline: Material-style fields with a bottom line, accent tabs ---- */
:root[data-ui="underline"] {
  --ctl-radius: 0; --ctl-bg: transparent; --ctl-border: transparent; --ctl-border-hover: transparent; --ctl-shadow: none;
}
:root[data-ui="underline"] .input, :root[data-ui="underline"] .select, :root[data-ui="underline"] .who {
  border-bottom-color: var(--line-strong); padding-left: 2px; }
:root[data-ui="underline"] .input:hover, :root[data-ui="underline"] .select:hover, :root[data-ui="underline"] .who:hover { border-bottom-color: var(--text); }
:root[data-ui="underline"] .btn { border-color: var(--line-strong); border-radius: 4px; }
:root[data-ui="underline"] .tabs button { border-bottom-width: 2px; }
:root[data-ui="underline"] .tabs button.on, :root[data-ui="underline"] #nav a.on { border-bottom-color: var(--blue); }
:root[data-ui="underline"] #nav a { border-bottom-width: 2px; }

/* ---- hairline: the first version: square, 1 px lines ---- */
:root[data-ui="hairline"] {
  --ctl-radius: 2px; --ctl-bg: var(--bg); --ctl-border: var(--line-strong); --ctl-border-hover: var(--text); --ctl-shadow: none;
}

/* ==== the rest of the page follows the style: sports list, leagues, event rows, the detail's market blocks ==== */

/* surface (default): leagues and market blocks as quiet bordered panels, the active sport raised */
:root:not([data-ui]) #sports, :root[data-ui="surface"] #sports, :root[data-ui="classic"] #sports { padding: 0 var(--s2); }
:root:not([data-ui]) #sports li, :root[data-ui="surface"] #sports li, :root[data-ui="classic"] #sports li {
  border-left: 0; padding: 6px 10px; border-radius: 6px; margin-bottom: 1px; }
:root:not([data-ui]) #sports li:hover, :root[data-ui="surface"] #sports li:hover, :root[data-ui="classic"] #sports li:hover { background: var(--bg-2); }
:root:not([data-ui]) #sports li.on, :root[data-ui="surface"] #sports li.on, :root[data-ui="classic"] #sports li.on {
  background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong), 0 1px 2px rgba(0, 0, 0, .06); }
:root:not([data-ui]) .league, :root[data-ui="surface"] .league, :root[data-ui="classic"] .league,
:root:not([data-ui]) .mkt, :root[data-ui="surface"] .mkt, :root[data-ui="classic"] .mkt {
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
:root:not([data-ui]) .league-h, :root[data-ui="surface"] .league-h, :root[data-ui="classic"] .league-h,
:root:not([data-ui]) .mkt h4, :root[data-ui="surface"] .mkt h4, :root[data-ui="classic"] .mkt h4 {
  padding: 7px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
:root:not([data-ui]) .ev-table th:first-child, :root[data-ui="surface"] .ev-table th:first-child, :root[data-ui="classic"] .ev-table th:first-child,
:root:not([data-ui]) .ev-row td:first-child, :root[data-ui="surface"] .ev-row td:first-child, :root[data-ui="classic"] .ev-row td:first-child,
:root:not([data-ui]) .mkt th:first-child, :root[data-ui="surface"] .mkt th:first-child, :root[data-ui="classic"] .mkt th:first-child,
:root:not([data-ui]) .mkt td:first-child, :root[data-ui="surface"] .mkt td:first-child, :root[data-ui="classic"] .mkt td:first-child { padding-left: 12px; }
:root:not([data-ui]) .ev-row td:last-child, :root[data-ui="surface"] .ev-row td:last-child, :root[data-ui="classic"] .ev-row td:last-child,
:root:not([data-ui]) .mkt td:last-child, :root[data-ui="surface"] .mkt td:last-child, :root[data-ui="classic"] .mkt td:last-child { padding-right: 12px; }
:root:not([data-ui]) .ev-row:last-child td, :root[data-ui="surface"] .ev-row:last-child td, :root[data-ui="classic"] .ev-row:last-child td,
:root:not([data-ui]) .mkt tr:last-child td, :root[data-ui="surface"] .mkt tr:last-child td, :root[data-ui="classic"] .mkt tr:last-child td { border-bottom: 0; }
:root:not([data-ui]) .mkt h4 .mg, :root[data-ui="surface"] .mkt h4 .mg, :root[data-ui="classic"] .mkt h4 .mg { margin-left: auto; }

/* classic: the same panels, a touch more solid */
:root[data-ui="classic"] .league, :root[data-ui="classic"] .mkt { border-color: var(--line-strong); border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
:root[data-ui="classic"] .league-h, :root[data-ui="classic"] .mkt h4 { background: linear-gradient(to bottom, var(--bg), var(--bg-2));
  border-bottom-color: var(--line-strong); }
:root[data-ui="classic"] #sports li { border-radius: 4px; }

/* soft: filled headers, no borders */
:root[data-ui="soft"] #sports { padding: 0 var(--s2); }
:root[data-ui="soft"] #sports li { border-left: 0; padding: 6px 10px; border-radius: 6px; margin-bottom: 1px; }
:root[data-ui="soft"] #sports li:hover { background: var(--bg-2); }
:root[data-ui="soft"] #sports li.on { background: var(--bg-2); }
:root[data-ui="soft"] .league-h, :root[data-ui="soft"] .mkt h4 { background: var(--bg-2); border: 0; border-radius: 6px; padding: 6px 10px; margin-bottom: 2px; }
:root[data-ui="soft"] .ev-row td, :root[data-ui="soft"] .mkt td { border-bottom-color: transparent; }
:root[data-ui="soft"] .ev-row:hover td { background: var(--bg-2); }

/* ghost: no lines at rest; rows show on hover */
:root[data-ui="ghost"] #sports { padding: 0 var(--s2); }
:root[data-ui="ghost"] #sports li { border-left: 0; padding: 6px 10px; border-radius: 6px; }
:root[data-ui="ghost"] #sports li:hover { background: var(--bg-2); }
:root[data-ui="ghost"] #sports li.on { color: var(--blue); }
:root[data-ui="ghost"] .league-h, :root[data-ui="ghost"] .mkt h4 { border-bottom-color: transparent; font-size: var(--fs-14); }
:root[data-ui="ghost"] .ev-row td, :root[data-ui="ghost"] .mkt td { border-bottom-color: transparent; }

/* pill: rounded chips */
:root[data-ui="pill"] #sports { padding: 0 var(--s2); }
:root[data-ui="pill"] #sports li { border-left: 0; padding: 6px 12px; border-radius: 999px; margin-bottom: 2px; }
:root[data-ui="pill"] #sports li:hover { background: var(--bg-2); }
:root[data-ui="pill"] #sports li.on { background: var(--text); color: var(--bg); }
:root[data-ui="pill"] #sports li.on .n { color: var(--bg); opacity: .7; }
:root[data-ui="pill"] .league-h, :root[data-ui="pill"] .mkt h4 { background: var(--bg-2); border: 0; border-radius: 999px; padding: 5px 14px; margin-bottom: 4px; }

/* underline: accent bars */
:root[data-ui="underline"] #sports li.on { border-left-color: var(--blue); color: var(--blue); }
:root[data-ui="underline"] .league-h, :root[data-ui="underline"] .mkt h4 { border-bottom: 2px solid var(--text); }