/* Shared slate rendering: /today and the league hub pages.
 *
 * Layout only. Every colour comes from the custom properties in v3.css so the
 * page can never drift from the rest of the site's palette.
 *
 * Rendered by app/services/today_page.py (game cards) and
 * app/services/league_pages.py; the class names here are part of
 * that contract. Rename in both places or the page loses its styling.
 */

.today-canvas {
  max-width: 860px;
  margin: 0 auto;
  /* `margin: 0 auto` on a grid item replaces the default `stretch` alignment
     with centering at the item's INTRINSIC width, so without this the column
     sizes to its content and never reaches max-width. It looked correct at
     860px only because the content happened to be wider than the cap. */
  width: 100%;
  padding: 0 12px 72px;
  /* Self-contained layout. These three used to come from v3.css's `.canvas`,
     but the league hubs cannot carry that class: v4.css (which they load for
     the dashboard board) hides `.canvas` outright with
     `body:not(.nx-game-open) .canvas { display: none !important }`, because on
     the dashboard it holds the breakdown panel that stays hidden until a game
     is opened. Borrowing the class blanked the entire page. */
  display: grid;
  gap: 28px;
  min-width: 0;
}

.today-hero {
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.today-title {
  font-size: clamp(28px, 5.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
  color: var(--ink);
}

.today-intro {
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 16px;
}

.today-updated {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
}

.today-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.today-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 22px 0 0;
}

/* ── League sections ─────────────────────────────────────────────────────── */


/* ── Capability table (league hubs) ─────────────────────────────────────── */


.today-metrics {
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.today-metric {
  display: grid;
  /* Label column is fixed on wide screens so the values line up down the card,
     then collapses to stacked rows on phones where 150px would squeeze the
     value into two or three words per line. */
  grid-template-columns: 150px 1fr;
  gap: 4px 14px;
  align-items: baseline;
}

.today-metric dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}

.today-metric dd {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .today-metric {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}


/* ── Closing CTA ─────────────────────────────────────────────────────────── */

.today-cta {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 8px;
}

.today-cta-title {
  font-size: clamp(20px, 3.2vw, 26px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink);
}

.today-cta-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
}

.today-links {
  margin: 34px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.today-links a {
  color: var(--accent-deep);
}

/* ── League hub sections (/nba-game-simulator and friends) ───────────────── */

.league-section {
  margin: 0 0 40px;
  padding-top: 4px;
}

.league-section-title {
  font-size: clamp(19px, 3vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}

.league-body {
  font-size: clamp(15px, 2vw, 16px);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 16px;
}

.league-body a {
  color: var(--accent-deep);
}

.league-faq {
  border-top: 1px solid var(--line-soft);
  padding: 16px 0 4px;
}

.league-faq:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.league-faq-q {
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 6px;
  color: var(--ink);
}

.league-faq-a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* ── Dashboard tiles on a public page ────────────────────────────────────────
 *
 * The board on the league hubs is the dashboard's own markup styled by v4.css
 * (see app/services/board_tiles.py). Two adjustments are needed because the
 * public tile is an <a> rather than a <button>:
 */

.nx-tile[href] {
  /* v4.css styles .nx-tile assuming a button, which carries no link
     decoration or inherited link colour. */
  text-decoration: none;
  color: inherit;
  /* A button is display:grid via .nx-tile; an anchor needs the same, and
     `width:100%` there does not stop an inline box from shrink-wrapping. */
  box-sizing: border-box;
}

.nx-tile[href]:hover {
  border-color: var(--line-strong);
}

/* The board heading is ours, not the dashboard's — the product has a search
   field and league rail where this sits. */
.league-board-title {
  font-size: clamp(19px, 3vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--ink);
}

/* League hubs run a wider column than /today so the board can breathe at the
   same 3-up rhythm as the dashboard. Prose is NOT allowed to widen with it —
   .league-body, .today-intro, .today-cta-body and .league-faq-a all carry
   their own ch-based max-width, so only the board and the headings use the
   extra room. */
/* Wide column shared by /today and the league hubs. Copy is deliberately NOT
   re-narrowed inside it: the board sets the page width, and text that stopped
   at a 66ch measure left every paragraph visibly short of the tiles beside it.
   Headings and body copy now align to the same edges as the board. */
.league-canvas {
  max-width: 1240px;
}

/* The league pill on /today is a link to that league's hub. v4.css paints
   .nx-group-name; the anchor inside it must not add its own colour or
   underline on top of that. */
.nx-group-link {
  color: inherit;
  text-decoration: none;
}

.nx-group-link:hover {
  text-decoration: underline;
}

/* The pill is wrapped in a real <h2> on /today so the page keeps a document
   outline across several leagues. The heading supplies the level only — all
   visual weight stays on .nx-group-name. */
.nx-group-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  display: inline-flex;
}

/* == Figures (app/services/league_charts.py) ================================
 *
 * MOBILE FIRST. Everything above the desktop query is the phone layout; the
 * wider arrangement is added on top at the end. About 90% of traffic is
 * mobile, so that is the layout being designed, not the fallback.
 *
 * These are HTML, not SVG, on purpose. A fixed viewBox scales with its
 * container, so an SVG figure is always either magnified or shrunk, and a
 * minimum width to stop the shrinking only produces a sideways scroll. Bars
 * here are percentage-positioned and text is real DOM text, so a figure fits
 * any width with no scrolling and no unreadable type.
 */

.lc-figure {
  margin: 0 0 22px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  /* A figure must never be the thing that widens the page. */
  min-width: 0;
  max-width: 100%;
}

.lc-caption {
  display: grid;
  gap: 3px;
  margin: 0 0 14px;
}

.lc-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.lc-sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

/* -- Range plot ----------------------------------------------------------- */

.rp-row {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
}

.rp-label {
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-2);
}

.rp-track {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--surface-3);
}

.rp-band {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 3px;
  border-radius: 5px;
  background: var(--lc-accent, var(--ink-2));
  opacity: 0.32;
}

.rp-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--lc-accent, var(--ink-2));
  /* 2px surface ring so the median stays legible on top of its own band. */
  box-shadow: 0 0 0 2px var(--surface);
}

.rp-axis {
  position: relative;
  height: 14px;
  margin-top: 2px;
}

.rp-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rp-unit {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* -- Period structure ----------------------------------------------------- */

.ps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ps.is-nested .ps-row {
  margin: 0 0 10px;
}

/* Name and coverage sit above the bar so neither has to fit inside it. */
.ps-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.ps-track {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: var(--surface-3);
}

.ps-bar {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 4px;
}

/* Each nested bar is a step darker, so the growth reads as containment rather
   than as five unrelated blocks. */
.ps.is-nested .ps-row:nth-child(1) .ps-bar { background: color-mix(in srgb, var(--lc-accent) 12%, var(--surface)); }
.ps.is-nested .ps-row:nth-child(2) .ps-bar { background: color-mix(in srgb, var(--lc-accent) 18%, var(--surface)); }
.ps.is-nested .ps-row:nth-child(3) .ps-bar { background: color-mix(in srgb, var(--lc-accent) 24%, var(--surface)); }
.ps.is-nested .ps-row:nth-child(4) .ps-bar { background: color-mix(in srgb, var(--lc-accent) 30%, var(--surface)); }
.ps.is-nested .ps-row:nth-child(5) .ps-bar { background: color-mix(in srgb, var(--lc-accent) 36%, var(--surface)); }

.ps.is-tiled {
  display: flex;
  gap: 4px;
}

.ps-seg {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  border-radius: 5px;
  text-align: center;
  background: color-mix(in srgb, var(--lc-accent) 14%, var(--surface));
}

.ps-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.ps-covers {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ps.is-nested .ps-covers {
  margin-left: auto;
  text-align: right;
}

.ps-foot {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--muted);
}

/* -- Market tagging rule -------------------------------------------------- */

.vf-axis-note {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--muted);
}

.vf-row {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line-soft);
}

.vf-row:last-of-type {
  border-bottom: 0;
}

.vf-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.vf-tag.is-opposed   { color: var(--negative); background: var(--negative-soft); }
.vf-tag.is-neutral   { color: var(--warn);     background: var(--surface-3); }
.vf-tag.is-supported { color: var(--positive); background: var(--positive-soft); }

.vf-track {
  position: relative;
  display: block;
  height: 22px;
}

/* The scale the marks sit on. Without it the row reads as two loose dots. */
.vf-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--surface-3);
}

/* Even money: the only reference line in the figure, so the only rule drawn. */
.vf-mid {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

.vf-mark {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  box-sizing: border-box;
}

/* Shape, not colour, is what separates the two series. */
.vf-mark.is-sim {
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--surface);
}

.vf-mark.is-book {
  background: var(--surface);
  border: 2px solid var(--ink-2);
}

.vf-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

.vf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.vf-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Inside the legend the marks are inline, not positioned. */
.vf-legend .vf-mark {
  position: static;
  margin: 0;
  flex: 0 0 auto;
}

/* -- Table twin ----------------------------------------------------------- */

.lc-table {
  margin-top: 12px;
  font-size: 12.5px;
  min-width: 0;
}

.lc-table summary {
  cursor: pointer;
  color: var(--accent-deep);
  padding: 4px 0;
}

.lc-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  table-layout: fixed;
}

.lc-table th,
.lc-table td {
  text-align: left;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.lc-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
}

.lc-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* == Desktop =============================================================== */

@media (min-width: 760px) {
  .lc-figure { padding: 18px 18px 14px; margin-bottom: 26px; }
  .lc-title { font-size: 15px; }
  .lc-sub { font-size: 13px; }

  /* Label moves beside its bar; the axis indents to match the track column. */
  .rp-row {
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-bottom: 9px;
  }

  .rp-label { text-align: right; font-size: 12.5px; }
  .rp-axis { margin-left: 184px; }
  .rp-unit { margin-left: 184px; text-align: left; }

  .ps-covers { font-size: 11px; }

  /* Tag, track and explanation on one line. */
  .vf-row {
    grid-template-columns: 150px minmax(0, 1fr) 300px;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
    padding-bottom: 10px;
  }

  .vf-legend { margin-left: 166px; }
}

/* == Two-column board on desktop ============================================
 *
 * v4.css sizes the board with `repeat(auto-fill, minmax(360px, 1fr))`, which
 * gives three columns in the hub's wide canvas. Scoped override so the public
 * pages run two, without touching the dashboard, which shares that stylesheet
 * and keeps its own density.
 */

@media (min-width: 900px) {
  .league-canvas .nx-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* League hubs use the site's normal .top sticky header without overriding its
   positioning. Only the league colour/rule/count bar is special: it pins
   immediately below the shared header while its board remains in view.
   Scoping to .league-page leaves /today's mixed-league headings non-sticky. */
.league-page .nx-group-head {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  margin-top: 0;
  background: var(--page);
}

/* Same full-bleed backdrop the shared header uses (v3.css .top::before): the
   bar itself stops at the page gutters, so without this tiles stayed visible
   in the strips either side of it as they scrolled underneath. */
.league-page .nx-group-head::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--page);
  pointer-events: none;
}

.league-page .nx-group-head > * { z-index: 1; }