/* Only what Tailwind utilities cannot express.
   Everything else lives in class attributes. */

:root {
  --gold: #f8d65c;
  --ink: #0a0a0a;
}

/* Hero glow. A radial gradient is one declaration here and an unreadable
   arbitrary-value utility in Tailwind.

   Painted on a pseudo-element spanning the viewport rather than on the section
   itself. The section sits inside a `max-w-7xl` wrapper, so above 1280px the
   gradient's own falloff stops at the wrapper edge and renders as a vertical
   seam down the page. */
.hero-glow {
  position: relative;
}

.hero-glow::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 50% -8rem, rgba(248, 214, 92, 0.16), transparent 65%),
    radial-gradient(40rem 24rem at 85% 10%, rgba(248, 214, 92, 0.07), transparent 60%);
}

.hero-glow > * {
  position: relative;
}

/* 100vw counts the scrollbar, so the breakout above overhangs by a few pixels.
   `clip` suppresses that without creating a scroll container, which `hidden`
   would -- and that would break the sticky navbar. */
body {
  overflow-x: clip;
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.85rem;
}

.card-hover {
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card-hover:hover {
  border-color: rgba(248, 214, 92, 0.35);
  transform: translateY(-2px);
}

/* Visible focus for keyboard users; the dark theme swallows the default. */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tabular figures so score and price columns line up across rows. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* Numerals in the season chart -- axis ticks, rank values, chip codes. Plex
   Mono is already tabular, so `.tnum` alongside it would be redundant. */
.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Condensed buys back horizontal room at 11-12px, which is what keeps the stat
   rail captions and the legend from crowding. */
.cond {
  font-family: 'IBM Plex Sans Condensed', 'Inter', system-ui, sans-serif;
}

/* The season panel is the one surface that does not use `.card`. It carries its
   own gradient, radius and shadow so the chart sits on a ground of its own
   rather than reading as a flat region of the page. The off-axis gradient angle
   is what stops it looking like a stock SaaS card. */
.season-panel {
  background: linear-gradient(168deg, #1E1126 0%, #160C1B 78%);
  border: 1px solid rgba(167, 139, 250, 0.10);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Archivo 700, not Archivo Black: the display face carries the site's nav and
   headings, and at 21px it is too heavy for a panel title sitting above 11px
   captions. */
.season-title {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Segmented range control on the season panel. A Tailwind class soup here
   would be repeated on three buttons and the active state toggles from JS. */
.range-btn {
  min-height: 32px;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #9A85A8;
  font-family: 'IBM Plex Sans Condensed', 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.range-btn:hover {
  color: #F2E9F7;
}
.range-btn.is-active {
  background: rgba(34, 211, 238, 0.14);
  color: #22D3EE;
}

/* The global :focus-visible ring is gold, which is the site's chrome accent
   and reads as unrelated inside a cyan control. */
.range-btn:focus-visible {
  outline: 2px solid #22D3EE;
  outline-offset: 2px;
}

/* Season chart tooltip. Canvas cannot render the type hierarchy the panel
   needs, so the tooltip is an HTML element positioned over the plot. */
.season-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.12s ease;
  min-width: 152px;
  padding: 10px 12px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  border-radius: 10px;
  background: rgba(30, 17, 38, 0.94);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

/* HTMX swap feedback: dim the region being replaced. */
.htmx-request .htmx-fade,
.htmx-request.htmx-fade {
  opacity: 0.45;
  transition: opacity 0.12s ease;
}

/* Scrollbars on the dark theme. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
*::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card-hover:hover {
    transform: none;
  }
}

@media print {
  nav,
  footer,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ---------------------------------------------------------------------------
   Odds movement cards (/odds).

   Their own surface rather than `.card`: the supplied design puts these on a
   darker, cooler ground than the site's default panel so a hairline 1px stroke
   still reads against it. `.card`'s lighter fill washed the thin lines out.
   --------------------------------------------------------------------------- */
.odds-card {
  background: rgba(18, 13, 26, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 12px;
  padding: 14px 16px 8px;
}

/* The page ground, carrying the same off-axis wash as the season panel so the
   grid of cards sits on something rather than floating on flat black. */
.odds-ground {
  background:
    radial-gradient(1100px 520px at 25% -15%, rgba(45, 22, 60, 0.55), transparent),
    #09060E;
}

/* Range control on this page is the same segmented button as the season
   panel's, one size down: five options here against three there, and at
   `.range-btn`'s width they wrap on a phone. */
.range-btn--sm {
  min-height: 26px;
  padding: 0 0.55rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.656rem;
}