/* ============================================================================
   eventuals.ai — "Terminal" (Glassnode-inspired)
   Monochrome institutional research console: cool gray canvas, black ink,
   hairline borders, 2px radii, near-flat elevation. Type: Inter (UI + display)
   + DM Mono (tabular data). Blue = Yes/primary, muted rose = No, lavender wash accent.
   ========================================================================== */

/* The UA stylesheet's `[hidden] { display: none }` has the weakest specificity in
   the cascade, so ANY authored display rule silently defeats it. That has bitten
   this file more than once -- the touch-target media query below sets
   `display: inline-flex` on every .primary-nav a, which was un-hiding the two nav
   links we deliberately hid, but only on mobile. Restore the attribute's meaning
   once, here, so `hidden` means hidden everywhere. */
[hidden] { display: none !important; }

:root {
  /* Glassnode canvas — cool institutional gray, flat (no warm paper) */
  --page: #edeff2;        /* Cloud — page canvas */
  --page-2: #e4e7ec;      /* deeper alt band */
  --surface: #ffffff;     /* Card — highest light surface */
  --surface-2: #f7f8fa;   /* Paper — inset panels / light section */
  --raised: #ffffff;
  --track: #edeff2;       /* progress track base */

  /* Hairlines — solid Mist; emphasis is Ash/black, never a glow */
  --line: #dedfe1;
  --line-strong: #bfbfbf;
  --line-glow: #dedfe1;

  /* Type — black ink with a gray hierarchy (Iron / Steel / Fog) */
  --text: #000000;
  --muted: #5a5a5a;
  --subtle: #808080;
  --faint: #a0a0a0;

  /* Signals — kept FUNCTIONAL (Yes / No) but pulled into the monochrome system:
     Yes/primary = Glassnode data blue over the Glacier-tint wash; No = a muted
     institutional red. These are the only chromatic notes on the page. */
  --green: #4a6cf7;              /* PRIMARY / Yes — Glassnode chart blue */
  --green-strong: #3a56d4;
  --green-deep: #2a3fa0;
  --green-soft: #e2e7fc;         /* Glacier Tint accent wash */
  --rose: #c0475b;              /* No / negative — muted red */
  --rose-strong: #a5384a;
  --rose-soft: rgba(192, 71, 91, 0.10);
  --amber: #5a5a5a;             /* de-chromatised: former amber accent -> graphite */
  --amber-strong: #333333;
  --amber-soft: #edeff2;
  --blue: #4a6cf7;

  /* Geometry — near-rectangular institutional silhouette (2px everywhere) */
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 2px;

  /* Elevation is a whisper — surfaces defined by hairline borders, not depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.08) 0px 8px 32px 0px;
  --shadow-green: none;

  --brand-grad: #000000;   /* flat black CTA — no chromatic gradient */

  /* Fonts — Inter across the whole interface; mono kept for tabular data
     (the Bloomberg-terminal register the reference is built on) */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Chrome surfaces — flat, no atmosphere (charts and type only) */
  --header-grad: rgba(255, 255, 255, 0.90);
  --bar-bg: rgba(255, 255, 255, 0.90);
  --dot: transparent;
  --scrollbar: #dedfe1;
  --bloom-green: transparent;
  --bloom-amber: transparent;
  --bloom-blue: transparent;
  color-scheme: light;
}

/* ============================================================== Dark mode ==
   "Daylight after dark" — same warm character, desaturated tonal surfaces,
   contrast-checked text, signals brightened a touch so they hold on a dark
   canvas. Driven entirely by token overrides + a few chrome re-skins. */
:root[data-theme="dark"] {
  /* Glassnode dark band — Obsidian statement surface */
  --page: #1a1a1a;        /* Obsidian */
  --page-2: #141414;
  --surface: #232323;     /* raised dark card */
  --surface-2: #1f1f1f;
  --raised: #262626;
  --track: #333333;

  --line: #333333;
  --line-strong: #4d4d4d;
  --line-glow: #333333;

  --text: #ffffff;
  --muted: #a0a0a0;       /* Fog */
  --subtle: #808080;      /* Steel */
  --faint: #666666;       /* Slate */

  --green: #6888fb;       /* blue accent, brightened for dark */
  --green-strong: #8fa5f6;
  --green-deep: #b8c6fa;
  --green-soft: rgba(104, 136, 251, 0.16);
  --rose: #e0707f;
  --rose-strong: #ea8b97;
  --rose-soft: rgba(224, 112, 127, 0.16);
  --amber: #a0a0a0;
  --amber-strong: #cccccc;
  --amber-soft: #262626;
  --blue: #6888fb;

  --shadow-sm: none;
  --shadow: rgba(0, 0, 0, 0.40) 0px 2px 8px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.50) 0px 8px 32px 0px;
  --shadow-green: none;

  --header-grad: rgba(26, 26, 26, 0.92);
  --bar-bg: rgba(26, 26, 26, 0.92);
  --dot: transparent;
  --scrollbar: #333333;
  --bloom-green: transparent;
  --bloom-amber: transparent;
  --bloom-blue: transparent;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 132px;
  /* Clip horizontal overflow on the root so <body> never becomes its own scroll
     container (which broke programmatic scrolling to in-page anchors). */
  overflow-x: hidden;
}

/* Atmosphere: soft color blooms + a faint dot grid keep the page from reading
   as flat white, without losing brightness. */
body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 88% -10%, var(--bloom-green), transparent 46%),
    radial-gradient(90% 70% at 6% 2%, var(--bloom-amber), transparent 50%),
    radial-gradient(80% 90% at 50% 118%, var(--bloom-blue), transparent 55%),
    var(--page);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.4) 52%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.4) 52%, transparent 82%);
  opacity: 0.7;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--amber-soft);
  color: var(--text);
}

/* Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 2px;
  border: 3px solid transparent;
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Header -- */
.global-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--header-grad);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
}

.header-inner,
.domain-inner,
.page-shell {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.header-inner {
  display: grid;
  /* brand · nav · search · language switcher · theme toggle */
  grid-template-columns: auto auto minmax(200px, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  min-height: 74px;
  padding: 0 30px;
}

.brand,
.primary-nav,
.account-actions,
.card-kicker,
.featured-footer,
.section-header,
.sidebar-title,
.domain-inner {
  display: flex;
  align-items: center;
}

.brand {
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--text);
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 2px;
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.55), transparent 55%),
    var(--brand-grad);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  box-shadow: var(--shadow-green);
  transform: rotate(-4deg);
}

.primary-nav {
  gap: 22px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.primary-nav a {
  position: relative;
  padding: 4px 0;
  transition: color 160ms ease;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--green);
  transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: var(--text);
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  width: 100%;
}

.search-form input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  padding: 0 20px;
  font-size: 14px;
  outline: 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.search-form input::placeholder {
  color: var(--muted);
}

.search-form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(15, 185, 129, 0.16);
}

.account-actions {
  gap: 10px;
}

.button {
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
}

.button.primary {
  border-color: transparent;
  background: var(--brand-grad);
  color: #ffffff;
}

.button.ghost:hover {
  border-color: var(--text);
}

/* Theme toggle */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-sm);
  justify-self: end;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease,
    transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle:hover {
  color: var(--text);
  background: var(--surface-2);
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle .icon {
  width: 19px;
  height: 19px;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline;
}

/* ----------------------------------------------------------- Domain bar -- */
.domain-bar {
  position: sticky;
  top: 74px;
  z-index: 25;
  border-bottom: 1px solid var(--line);
  background: var(--bar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.domain-inner {
  gap: 4px;
  min-height: 54px;
  padding: 8px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.domain-inner::-webkit-scrollbar {
  display: none;
}

.sports-menu {
  position: relative;
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 0 0 auto;
}

.sports-menu > [data-sports-trigger] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
}

.sports-menu > [data-sports-trigger] .sports-caret {
  color: var(--subtle);
  font-size: 9px;
  transition: transform 160ms ease;
}

.sports-menu > [data-sports-trigger][aria-expanded="true"] .sports-caret {
  transform: rotate(180deg);
}

.sports-menu-panel[hidden] {
  display: none;
}

.sports-menu-panel {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 9px 30px;
  box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto;
  white-space: nowrap;
}

.sports-menu-panel > button {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  padding: 0 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

.sports-menu-panel > button:hover,
.sports-menu-panel > button:focus-visible {
  background: var(--track);
  color: var(--text);
  outline: 0;
}

.sports-menu-panel > button.selected {
  border-color: var(--line-glow);
  background: var(--green-soft);
  color: var(--green-strong);
}

.domain-inner > button,
.sports-menu > [data-sports-trigger] {
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.domain-inner > button:hover,
.sports-menu > [data-sports-trigger]:hover {
  color: var(--text);
  background: var(--track);
}

.domain-inner > button.active,
.sports-menu > [data-sports-trigger].active {
  color: var(--green-strong);
  background: var(--green-soft);
  border-color: var(--line-glow);
}

.invessure-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border-inline-start: 1px solid var(--line-strong);
  color: var(--blue);
  padding-inline-start: 18px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.invessure-link:hover,
.invessure-link:focus-visible {
  color: var(--text);
  outline: 0;
}

.invessure-link span {
  font-size: 11px;
}

/* ----------------------------------------------------------------- Shell -- */
.page-shell {
  padding: 32px 30px 56px;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 332px;
  gap: 28px;
  align-items: start;
}

.main-column {
  min-width: 0;
}

/* Recently-resolved hit / miss accent */
.resolved-card.is-miss .resolved-status { color: var(--rose-strong); }
.resolved-card.is-miss .domain-tag i { color: var(--rose-strong); }
.resolved-card.is-hit .domain-tag i { color: var(--green-deep); }

.featured-card,
.forecast-card,
.sidebar-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------- Featured card -- */
.featured-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 388px;
  gap: 28px;
  padding: 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--surface);
  animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.featured-copy {
  min-width: 0;
}

.card-kicker {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.domain-tag,
.live-model {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--muted);
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.live-model {
  border-color: var(--line-glow);
  background: var(--green-soft);
  color: var(--green-strong);
}

.domain-tag i {
  color: var(--amber-strong);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.05em;
}

/* The pulsing status dot is ONLY the first (empty) span; the label text lives in
   the second span. Scope to :first-child so the dot styling never crushes the
   label into a 7px box (these are inline-flex items, which respect width). */
.live-model > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
  animation: pulse-dot 1.8s infinite;
}

.live-model.draw-lean {
  border-color: rgba(59, 110, 245, 0.4);
  background: rgba(59, 110, 245, 0.1);
  color: var(--blue);
}

.live-model.draw-lean > span:first-child {
  background: var(--blue);
  box-shadow: 0 0 7px var(--blue);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.carousel-count {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}

.featured-card h1 {
  max-width: 840px;
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(33px, 4.3vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.featured-description {
  max-width: 720px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.outcome-panel {
  display: grid;
  gap: 13px;
  max-width: 640px;
}

.outcome-row {
  display: grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) 56px;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Wrap rather than ellipse. The label is the outcome now, so losing its end loses the
   market: at four columns "Borussia Monchengladbach win or draw" does not fit one line
   at any sane font size, and "…win o" is not a shorter way of saying it. Two lines is
   the ceiling; beyond that the row would out-grow the card. */
.outcome-row span,
.breakdown-row span {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

/* Named areas so the stacked row survives the shared rules above. */
.breakdown-row span { grid-area: label; }
.breakdown-row strong { grid-area: value; }
.breakdown-row .breakdown-track { grid-area: track; }

/* The hero has more room than a grid card, but the same labels. */
.outcome-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "track track";
  align-items: baseline;
  column-gap: 14px;
  row-gap: 7px;
}
.outcome-row span { grid-area: label; }
.outcome-row strong { grid-area: value; }
.outcome-row .probability-track { grid-area: track; }

/* Probability meters */
.probability-track {
  height: 12px;
  border-radius: 2px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(24, 26, 35, 0.10);
  overflow: hidden;
}

.probability-track i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-strong), var(--green));
  box-shadow: 0 1px 6px -1px rgba(15, 185, 129, 0.5);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.outcome-row.secondary .probability-track i {
  background: linear-gradient(90deg, var(--rose-strong), var(--rose));
  box-shadow: 0 1px 6px -1px rgba(244, 71, 107, 0.5);
}

.outcome-row strong,
.breakdown-row strong,
.country-row strong {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.featured-footer {
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  color: var(--subtle);
  font-size: 13px;
}

.featured-footer a,
.card-footer a {
  color: var(--green-strong);
  font-weight: 700;
}

.featured-chart {
  min-width: 0;
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 26px;
}

svg {
  display: block;
  width: 100%;
  height: auto;
}

.chart-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line.yes {
  stroke: var(--green);
}

.chart-line.no {
  stroke: var(--rose);
  opacity: 0.9;
}

.chart-dots circle:first-child {
  fill: var(--green);
}

.chart-dots circle:last-child {
  fill: var(--rose);
}

/* Draw the forecast line in on load — an enhancement applied ONLY where motion is
   welcome, so a browser that can't animate stroke-dashoffset never leaves the line
   hidden (the default rules above always render it solid). dasharray > any real
   polyline length in this 360-wide viewBox, so the finished stroke shows no dashes. */
@media (prefers-reduced-motion: no-preference) {
  .chart-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: draw-line 1500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .chart-line.no {
    animation-delay: 160ms;
  }
  .chart-dots circle {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: dot-in 420ms ease-out 1450ms forwards;
  }
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes dot-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

/* -------------------------------------------------------- Section labels -- */
.section-header {
  justify-content: space-between;
  gap: 16px;
  margin: 38px 0 16px;
}

.section-header p,
.sidebar-card p {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--subtle);
}

.section-header p::before {
  content: "// ";
  color: var(--green);
}

.section-header h2,
.sidebar-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-header span {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

/* ---------------------------------------------------------- Forecast grid -- */
.prediction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.forecast-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  min-height: 214px;
  position: relative;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, border-color 200ms ease;
  animation: rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Skip layout/paint/animation for off-screen cards (the grid can hold 250+).
     `auto` remembers each card's real height after first render, so scrolling
     doesn't jump (CLS-safe). Only visible cards run the entrance animation. */
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}

.forecast-card:nth-child(1) { animation-delay: 40ms; }
.forecast-card:nth-child(2) { animation-delay: 80ms; }
.forecast-card:nth-child(3) { animation-delay: 120ms; }
.forecast-card:nth-child(4) { animation-delay: 160ms; }
.forecast-card:nth-child(5) { animation-delay: 200ms; }
.forecast-card:nth-child(6) { animation-delay: 240ms; }

@media (hover: hover) {
  .forecast-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--line-glow);
  }
}

.country-market-card {
  grid-template-columns: 1fr;
}

.country-market-card .country-probabilities {
  gap: 10px;
}

.country-market-card .country-row {
  grid-template-columns: minmax(116px, 140px) minmax(0, 1fr) 48px;
  font-size: 13px;
}

.country-market-card .breakdown-track {
  height: 10px;
}

/* The card's answer to its own question. The grid used to show only the team split,
   ranked by probability, so "Will Palace beat City?" was answered by two numbers in the
   opposite order to the question and the reader had to work out which one applied. */
/* One treatment in every domain: a quiet label, then the number at scanning size. The
   number is the product; the label says whose number it is. The tone lives in the dot
   only -- the figure itself stays in the text colour, because colouring it green would
   restate the lean the reader can already read off the digits. */
.card-verdict {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  line-height: 1.2;
}
/* The dot belongs to the label, not to the row. As a child of the row it centred on the
   row's height -- which the 21px figure sets -- so it floated above the 12px word beside
   it. Centred on the label's own line box it sits level with the word at any type size. */
.card-verdict-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.card-verdict-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verdict-dot, var(--subtle));
}
.card-verdict-pct {
  font-family: var(--font-mono);
  white-space: nowrap;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* Green is yes and rose is no everywhere else on the site; the deep ends of each ramp
   are the ones that clear contrast on the card surface. */
/* Tone reaches the dot through a variable rather than currentColor, so it cannot leak
   into the label or the figure -- both of which set their own colour, because a green
   percentage would restate the lean the digits already carry. A neutral the reader can
   actually see: at --line-strong (16% alpha) the no-lean dot read as a rendering fault
   rather than as "no side", which is worth saying on a card sitting at 50%. */
.card-verdict-yes { --verdict-dot: var(--green-deep); }
.card-verdict-no { --verdict-dot: var(--rose-strong); }
.card-verdict-even { --verdict-dot: var(--subtle); }

.forecast-card h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.card-date {
  margin: -8px 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--subtle);
}

.draw-fineprint {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--subtle);
  opacity: 0.85;
}

/* Per-card share button */
.card-foot {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  margin-top: 2px;
}
.card-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 13px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.card-share:hover {
  color: var(--green-deep);
  border-color: var(--line-glow);
  background: var(--green-soft);
}
.card-share.copied {
  color: var(--green-deep);
  border-color: var(--line-glow);
  background: var(--green-soft);
}

.breakdown {
  display: grid;
  gap: 14px;
}

/* Label and figure on one line, the meter on its own beneath. Side-by-side, the label
   column could never be wider than about a third of the card, and the labels now name
   outcomes rather than sides -- "AFC Bournemouth win or draw" wants 191px and got 120,
   so 595 of them ellipsed. A label that reads "Fulham win or d..." is worse than the
   bare "Fulham" it replaced. Stacked, the label gets the full card width and the meter
   reads as a meter instead of a stub. */
.breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "track track";
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.breakdown-track {
  height: 10px;
  border-radius: 2px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(24, 26, 35, 0.10);
  overflow: hidden;
}

.breakdown-track i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-strong), var(--green));
  box-shadow: 0 1px 5px -1px rgba(15, 185, 129, 0.45);
}

.breakdown-row.no .breakdown-track i {
  background: linear-gradient(90deg, var(--rose-strong), var(--rose));
  box-shadow: 0 1px 5px -1px rgba(244, 71, 107, 0.45);
}

/* Forecast-grid bars carry no yes/no colour of their own.
   The card already states the answer in colour ("Probably not" in rose), and colouring
   the bars by side as well put a GREEN bar on the 35% and a RED bar on the 65% directly
   underneath it -- the eye-catching colour marked the less likely outcome and red marked
   the more likely one. Two colour systems saying opposite things.
   Both bars are the same weight: length is unambiguous and needs no help, and an earlier
   attempt to darken "the answer" picked the first row, which is always the question's YES
   side -- the same inversion in a different colour. The verdict owns the colour. */
.forecast-card .breakdown-track i,
.forecast-card .breakdown-row.no .breakdown-track i {
  background: var(--line-strong);
  box-shadow: none;
}
/* ...and then the ONE bar the verdict actually names gets the verdict's colour back.
   Colour now means a single thing on this card -- "this is the answer" -- instead of
   marking which side of the question a row sits on. Making every bar grey did remove the
   contradiction, but the bars are the largest colour area on a card and the grid went
   flat, so the signal comes back where it agrees with the verdict. A toss-up claims
   nothing, so it stays grey. */
.forecast-card[data-verdict-tone="yes"] .breakdown-row:first-child .breakdown-track i {
  background: linear-gradient(90deg, var(--green-strong), var(--green));
  box-shadow: 0 1px 5px -1px rgba(15, 185, 129, 0.45);
}
.forecast-card[data-verdict-tone="no"] .breakdown-row.no .breakdown-track i {
  background: linear-gradient(90deg, var(--rose-strong), var(--rose));
  box-shadow: 0 1px 5px -1px rgba(244, 71, 107, 0.45);
}

.country-probabilities {
  display: grid;
  gap: 9px;
}

.country-row {
  display: grid;
  grid-template-columns: minmax(86px, 96px) minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.country-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-row .breakdown-track i {
  background: linear-gradient(90deg, var(--green-strong), var(--green));
}

.draw-probabilities .draw-row {
  color: var(--blue);
}

.draw-probabilities .draw-row .breakdown-track i {
  background: linear-gradient(90deg, #2d54d6, var(--blue));
  box-shadow: 0 1px 5px -1px rgba(59, 110, 245, 0.45);
}

.draw-probabilities .draw-row strong {
  color: var(--blue);
}

.featured-country-probabilities {
  max-width: 640px;
}

.featured-country-probabilities .country-row {
  grid-template-columns: minmax(104px, 120px) minmax(0, 1fr) 48px;
  font-size: 13px;
}

.card-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--subtle);
  font-size: 12.5px;
}

/* ------------------------------------------------------- Resolved (wins) -- */
.resolved-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-top: 24px;
  padding: 0 22px 22px;
  box-shadow: var(--shadow-sm);
}

.resolved-section[hidden],
.utility-grid[hidden] {
  display: none;
}

.resolved-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.resolved-card,
.resolved-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px;
}

.resolved-card {
  border-color: var(--line-glow);
}

.resolved-card h3 {
  margin: 14px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text);
}

.resolved-status {
  color: var(--green-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.resolved-result {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.resolved-result strong {
  color: var(--green-strong);
  font-family: var(--font-mono);
  font-size: 20px;
}

.resolved-card p,
.resolved-empty {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.resolved-card footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
  color: var(--subtle);
  font-size: 12px;
}

.resolved-card footer a {
  color: var(--green-strong);
  font-weight: 700;
}

/* --------------------------------------------------------------- Sidebar -- */
.right-sidebar {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 148px;
}

.sidebar-card {
  padding: 20px;
}

.accuracy-meter {
  height: 12px;
  margin-top: 18px;
  border-radius: 2px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(24, 26, 35, 0.10);
  overflow: hidden;
}

.accuracy-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--brand-grad);
  box-shadow: 0 1px 6px -1px rgba(15, 185, 129, 0.5);
  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reliability {
  margin-top: 20px;
}

.reliability-title {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--subtle);
}

.reliability svg {
  width: 100%;
  max-width: 248px;
  height: auto;
}

.rel-frame {
  fill: var(--surface-2);
  stroke: var(--line);
}

.rel-diagonal {
  stroke: var(--line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.rel-dots circle {
  fill: var(--green);
  fill-opacity: 0.45;
  stroke: var(--green-strong);
}

.rel-axis {
  fill: var(--subtle);
  font-family: var(--font-mono);
  font-size: 9px;
  text-anchor: middle;
}

.utility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.utility-grid-single {
  grid-template-columns: 1fr;
}

.utility-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 0 22px 22px;
}

.accuracy-summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.accuracy-summary strong {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--green-strong);
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.accuracy-summary span,
.utility-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.utility-note {
  margin: 14px 0 0;
  color: var(--muted);
}

.sidebar-title {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sidebar-title h2 {
  font-size: 20px;
}

.sidebar-title span {
  color: var(--green-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trending-card ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trending-card li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 13px 0;
  color: var(--muted);
  font-size: 14px;
}

.trending-card li:last-child {
  padding-bottom: 0;
}

.trending-card strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- Alpha telemetry -- */
.alpha-telemetry[hidden] {
  display: none;
}

.alpha-telemetry {
  border-color: var(--line-strong);
}

.alpha-telemetry.positive {
  border-left-color: var(--green);
}

.alpha-telemetry.negative {
  border-left-color: var(--rose-strong);
}

.alpha-telemetry.neutral {
  border-left-color: var(--blue);
}

.alpha-telemetry > strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--text);
}

.alpha-telemetry p {
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font);
}

.alpha-telemetry dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.alpha-telemetry dl div {
  display: contents;
}

.alpha-telemetry dt,
.alpha-telemetry dd {
  margin: 0;
  font-size: 12px;
}

.alpha-telemetry dt {
  color: var(--subtle);
  font-weight: 600;
}

.alpha-telemetry dd {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------- Press feedback ----- */
/* Tactile scale on press for the chrome controls (cards have their own hover
   lift). Eased so it reads as a deliberate press, and auto-neutralised under
   reduced-motion by the block below. */
.domain-inner > button,
.sports-menu-panel > button,
.button,
.card-share {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease,
    transform 130ms cubic-bezier(0.22, 1, 0.36, 1);
}

.domain-inner > button:active,
.sports-menu-panel > button:active,
.button:active,
.card-share:active {
  transform: scale(0.95);
}

/* --------------------------------------------------------------- Motion --- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@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;
  }
}

/* ------------------------------------------------------------ Responsive -- */
@media (min-width: 1180px) {
  .prediction-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .header-inner {
    /* nav hidden below -> brand · search · language switcher · theme toggle */
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    gap: 16px;
  }

  .primary-nav {
    display: none;
  }

  .dashboard-layout,
  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-chart {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    padding: 20px 0 0;
  }

  .right-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .domain-bar {
    top: 0;
  }

  /* Three rows, not four. The language switcher is injected at runtime and had no grid
     area, so it landed on a row of its own -- brand, search, nav and language stacked to
     ~590px of chrome before the filter bar, putting the first forecast 1.4 screens down.
     It shares the nav row now, where there is room for it. */
  .header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand  toggle"
      "search search"
      "nav    lang";
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .lang-switcher {
    grid-area: lang;
    justify-self: end;
    align-self: center;
  }

  .brand {
    grid-area: brand;
  }

  .search-form {
    grid-area: search;
  }

  .primary-nav {
    grid-area: nav;
  }

  .theme-toggle {
    grid-area: toggle;
    align-self: center;
  }

  .primary-nav {
    display: flex;
    order: 3;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
  }

  .primary-nav a {
    flex: 1;
    text-align: center;
    padding: 9px 6px;
    border-radius: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--muted);
  }

  .primary-nav a::after {
    display: none;
  }

  .search-form {
    order: 2;
  }

  .domain-inner,
  .page-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .featured-card {
    padding: 20px;
  }

  .card-kicker,
  .featured-footer,
  .section-header,
  .card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .outcome-row {
    grid-template-columns: minmax(62px, 82px) minmax(0, 1fr) 48px;
  }

  .country-row,
  .featured-country-probabilities .country-row {
    grid-template-columns: 92px minmax(0, 1fr) 42px;
  }

  .prediction-grid,
  .resolved-grid,
  .utility-grid,
  .right-sidebar {
    grid-template-columns: 1fr;
  }

  .forecast-card {
    grid-template-columns: 1fr;
  }

  .featured-card h1 {
    font-size: clamp(31px, 9vw, 46px);
  }

  .forecast-card h3 {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .featured-card {
    padding: 16px;
  }

  .featured-chart {
    padding-top: 16px;
  }

  .outcome-row,
  .featured-country-probabilities .country-row,
  .country-row {
    grid-template-columns: minmax(58px, 76px) minmax(0, 1fr) 42px;
  }

  .forecast-card {
    padding: 15px;
  }
}

/* ----------------------------------------------------------- Site footer -- */
.site-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  margin-top: 48px;
}

.site-footer-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 30px 36px;
}

.site-footer p {
  margin: 0;
  color: var(--subtle);
  font-size: 12.5px;
  line-height: 1.65;
}

.site-footer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px !important;
  font-family: var(--font-mono);
  font-size: 12px;
}

.site-footer-meta a {
  color: var(--green-strong);
  font-weight: 600;
}

.site-footer-meta a:hover {
  text-decoration: underline;
}

/* -------------------------------------------------------- Legal / notice -- */
.legal-shell {
  position: relative;
  z-index: 2;
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 48px 0 80px;
}

.legal-kicker {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--subtle);
}

.legal-kicker::before {
  content: "// ";
  color: var(--green);
}

.legal-shell h1 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.03em;
  color: var(--text);
}

.legal-shell h2 {
  margin: 32px 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.legal-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

.legal-shell p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.legal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px !important;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--subtle);
}

.legal-foot a {
  color: var(--green-strong);
  font-weight: 600;
}

@media (max-width: 820px) {
  .site-footer-inner {
    padding: 24px 16px 32px;
  }
}

/* ---------------------------------------------------------------------------
   Internationalisation: language switcher + right-to-left (Arabic) support
   --------------------------------------------------------------------------- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
}
.lang-switcher select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 7px 28px 7px 13px;
  max-width: 150px;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  /* caret */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px center, right 10px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lang-switcher select:hover {
  color: var(--text);
  border-color: var(--line-strong);
}
.lang-switcher select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* Right-to-left layouts (Arabic). The grid/flex chrome mirrors automatically
   from dir="rtl"; these fix the few elements that assume a left origin. */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .lang-switcher select {
  padding: 7px 14px 7px 30px;
  background-position: left 15px center, left 10px center;
}
[dir="rtl"] .site-footer-inner,
[dir="rtl"] .featured-copy { text-align: right; }
[dir="rtl"] .brand-mark { transform: scaleX(1); }
[dir="rtl"] .probability-track > i { transform: scaleX(-1); }

@media (max-width: 820px) {
  .lang-switcher select {
    padding: 6px 26px 6px 12px;
    font-size: 0.78rem;
  }
  [dir="rtl"] .lang-switcher select { padding: 6px 12px 6px 26px; }
}

/* ---------------------------------------------------------------------------
   Comfortable touch targets on coarse pointers (phones / tablets). Scoped to
   pointer:coarse so the dense desktop (mouse) chrome is untouched. Meets the
   44px minimum for the header controls, filter chips, switcher, and share.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .domain-inner > button,
  .sports-menu > [data-sports-trigger],
  .primary-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .lang-switcher select { min-height: 44px; }
  .card-share { min-height: 44px; }
}

/* ---------- empty results ---------- */
/* An unmatched search left the grid 0px tall and silent. */
.grid-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 24px;
  text-align: center;
}
.grid-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.grid-empty-hint {
  margin: 0;
  max-width: 46ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.grid-empty-clear {
  margin-top: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-deep);
  background: var(--green-soft);
  border: 1px solid color-mix(in oklab, var(--green) 30%, transparent);
  border-radius: 2px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
}
.grid-empty-clear:hover { background: color-mix(in oklab, var(--green) 22%, var(--green-soft)); }
.grid-empty-clear:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* The hero rotates every 8s. Its questions differ in length, so the card's height moved
   with each one -- a 56px swing that shifted the whole grid under the reader mid-scroll.
   A floor sized to the tallest variant keeps the page still. */
.featured-card { min-height: 420px; }

@media (max-width: 860px) {
  /* On a phone the hero ran 689px, which put the first actual forecast 1.4 screens down.
     The display size and the workflow blurb are what made it that tall: the question is
     the only part carrying information, so it keeps the space and the rest gives it up. */
  .featured-card { min-height: 400px; }
  #featured-title { font-size: 27px; line-height: 1.1; }
  .featured-description { display: none; }
}


/* Every card states the position on the card itself, not only in the site footer, and
   states it identically -- a price threshold and an election both publish a number the
   site does not stand behind as advice. Quiet by design: a standing condition of reading
   the card, not an alarm. The full text lives in the footer and on /disclaimer. */
.card-notice {
  margin: 0.5rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--muted);
  opacity: 0.72;
}

/* Where the price is now, relative to the level in the question. Sits under the verdict
   because it is what makes the percentage legible: without it "$335" is an arbitrary
   number, and a coin flip is indistinguishable from a near-certainty. */
.card-price-context {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* The kicker carries the domain and nothing else. "POL" / "INT" / "SOC" were internal
   codes sitting next to the word they abbreviated, and "Updated daily" is a property of
   the product repeated once per card. The domain is worth keeping because the grid is
   deliberately mixed, so a reader needs to know which market they are looking at. */
.card-kicker-quiet {
  min-height: 0;
  margin-bottom: 0.6rem;
}
.card-kicker-quiet .domain-tag {
  opacity: 0.7;
}



/* A "?" beside a published number. Sized to the 44px touch guidance via padding
   rather than a big visible target, so it does not compete with the figure. */
.explain {
  appearance: none;
  margin-inline-start: 5px;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--subtle);
  font: inherit;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.explain:hover, .explain:focus-visible { color: var(--text); border-color: var(--text); }

.explain-pop {
  position: absolute;
  z-index: 60;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px 15px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.explain-pop strong { display: block; margin-bottom: 5px; font-size: 13px; }
.explain-pop p { margin: 0 0 10px; color: var(--muted); text-wrap: pretty; }
.explain-pop .explain-close {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  padding: 4px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* Notable Predictions rows are links now; they were the only cards on the page a
   reader could not open. */
.trending-card li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.trending-card li a:hover,
.trending-card li a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--line-strong);
}

/* The consent gate is one sentence and a checkbox; the old body scrolled a full
   Terms document above the controls, which is read by nobody and dismissed by
   everybody. The full text is one click away and unchanged. */
.tos-modal-compact { max-width: 470px; }
.tos-modal-compact .tos-title { margin: 0 0 10px; }
.tos-one-line {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.tos-modal-compact .tos-foot { border-top: 0; padding-top: 0; }
.tos-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }