:root {
  --bg: #090a0c;
  --panel: #111318;
  --panel-2: #181b21;
  --ink: #f5f3ee;
  --muted: #b7b1a8;
  --subtle: #827c74;
  --line: rgba(245, 243, 238, 0.14);
  --red: #e10600;
  --red-dark: #a90400;
  --gold: #d8b45f;
  --green: #35c977;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Libre Franklin", Inter, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
}

body.has-modal {
  overflow: hidden;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 20;
  transform: translateY(-150%);
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--bg);
  padding: 0.65rem 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.series-nav {
  position: relative;
  z-index: 6;
  border-bottom: 1px solid var(--line);
  background: #0d0f13;
}

.series-nav__inner {
  width: min(1440px, 100%);
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}

.series-nav__brand {
  margin-right: auto;
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  text-transform: lowercase;
}

.series-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.series-nav__link:hover,
.series-nav__link[aria-current="page"] {
  color: var(--ink);
}

.series-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--red);
}

.hero {
  position: relative;
  /* align-items: start anchors content under its top padding so any leftover
     min-height extends below the content (toward the table), not above it
     as a void between the ticker and the masthead. Clamp tightened so the
     panel never towers over the content on tall desktop windows. */
  min-height: clamp(360px, 42vh, 560px);
  display: grid;
  align-items: start;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(9, 10, 12, 0.94), rgba(9, 10, 12, 0.74) 48%, rgba(9, 10, 12, 0.9)),
    radial-gradient(circle at 78% 30%, rgba(225, 6, 0, 0.3), transparent 36%),
    linear-gradient(135deg, #14171c 0%, #08090b 58%, #1b0b0a 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto -8vw 8vh 45vw;
  height: 18vh;
  border-top: 2px solid rgba(245, 243, 238, 0.7);
  border-bottom: 2px solid rgba(225, 6, 0, 0.82);
  transform: skewY(-9deg);
  opacity: 0.78;
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245, 243, 238, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 243, 238, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 78%);
}

.hero__content {
  position: relative;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 5rem 0 4rem;
}

/* Narrow screens: let the headline wrap and the content set the hero's
   height. The base clamp(360px, 42vh, 560px) is already small enough that
   no mobile min-height override is needed. */
@media (max-width: 900px) {
  .hero__content {
    padding: 2.75rem 0 2.5rem;
  }
}

.brand {
  margin: 0 0 1.5rem;
  color: var(--red);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 6.4rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.85;
  text-transform: lowercase;
}

.series-chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  border: 1px solid var(--red);
  border-radius: 999px;
  color: var(--ink);
  padding: 0.18em 0.62em;
  font-family: var(--font-sans);
  font-size: 0.22em;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.hero h1 {
  max-width: 980px;
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.tagline {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 2.2rem 0 0;
}

.hero-stats div {
  min-width: 168px;
  border: 1px solid var(--line);
  background: rgba(17, 19, 24, 0.72);
  padding: 1rem 1.1rem;
}

.hero-stats dt {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 900;
}

.hero-stats dd {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

main {
  width: min(1440px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.4rem 0 4rem;
}

.controls,
.table-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.controls {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -1rem;
  padding: 1rem;
  background: rgba(9, 10, 12, 0.92);
  backdrop-filter: blur(16px);
}

.search-wrap {
  display: grid;
  gap: 0.45rem;
  width: min(520px, 100%);
  min-width: 0;
}

label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

input[type="search"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #0f1115;
  color: var(--ink);
  padding: 0.85rem 1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0.65rem 0.9rem;
  font-weight: 800;
}

.chip.is-active {
  border-color: var(--red);
  background: var(--red);
  color: white;
}

.table-shell {
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.table-head {
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--line);
}

.table-head h2 {
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
}

#result-count {
  margin-bottom: 0;
  color: var(--muted);
}

/* No overflow on desktop: an overflow container would become the sticky
   scrollport and pin the header INSIDE the table instead of below the
   controls bar. Horizontal scrolling only exists at widths where the
   table can actually overflow (see media query below). */
.table-scroll {
  overflow: visible;
}

@media (max-width: 1180px) and (min-width: 641px) {
  .table-scroll {
    overflow-x: auto;
  }

  .table-scroll th {
    position: static;
  }
}

table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

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

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 0.72rem 0.78rem;
  text-align: left;
  vertical-align: middle;
}

th {
  position: sticky;
  top: var(--controls-h, 82px);
  z-index: 2;
  background: #151820;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

th button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 900;
  text-transform: inherit;
  letter-spacing: inherit;
}

th button span {
  min-width: 0.7rem;
  color: var(--red);
}

tbody tr {
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

tbody tr:hover,
tbody tr:focus-visible {
  background: #1d2028;
}

td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.track-cell {
  display: grid;
  grid-template-columns: 58px minmax(170px, 1fr);
  align-items: center;
  gap: 0.85rem;
}

.track-cell strong {
  display: block;
  line-height: 1.2;
}

.track-cell span {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.outline-thumb {
  width: 52px;
  aspect-ratio: 1;
  color: var(--red);
}

.outline-empty {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--subtle);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.62rem;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.badge--current {
  border-color: rgba(53, 201, 119, 0.45);
  color: var(--green);
}

.badge--historical {
  color: var(--muted);
}

.badge--future {
  border-color: rgba(216, 180, 95, 0.5);
  color: var(--gold);
}

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem
           max(1rem, env(safe-area-inset-bottom));
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.modal__panel {
  position: relative;
  width: min(1180px, 100%);
  max-height: 92vh;                       /* legacy browsers */
  max-height: min(92svh, 980px);          /* iOS 15.4+, modern Chrome/Firefox */
  overflow: auto;
  border: 1px solid var(--line);
  background: #101216;
  box-shadow: var(--shadow);
}

.modal__close {
  position: sticky;
  top: 0.75rem;
  left: calc(100% - 3.25rem);
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #1a1d24;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

#detail-content {
  padding: 0 1.4rem 1.6rem;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 300px);
  align-items: center;
  gap: 1.5rem;
  padding: 0.2rem 0 1.5rem;
  border-bottom: 1px solid var(--line);
}

.detail-hero p {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.detail-hero h2 {
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0;
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.detail-badges > span:not(.badge) {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 0.2rem 0.62rem;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.outline-large {
  width: 100%;
  max-height: 300px;
  color: var(--red);
}

.outline-detail {
  position: relative;
  min-width: 0;
}

.outline-detail .outline-large {
  display: block;
}

.corner-marker circle {
  fill: var(--red);
  stroke: var(--ink);
  stroke-width: 5;
}

.corner-marker text {
  fill: white;
  font: 900 24px/1 var(--font-sans);
  text-anchor: middle;
  pointer-events: none;
}

.outline-detail.corners-hidden .corner-marker {
  display: none;
}

.outline-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #1a1d24;
  color: var(--ink);
  cursor: pointer;
  padding: 0.55rem 0.85rem;
  font-weight: 900;
}

.outline-toggle[aria-pressed="true"] {
  border-color: var(--red);
  background: var(--red);
  color: white;
}

.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 1rem;
  margin-top: 1rem;
}

.satellite {
  margin: 0;
}

.satellite__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #07080a;
}

.satellite img,
.image-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  background: #07080a;
}

.satellite__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.satellite__overlay polyline {
  fill: none;
  stroke: var(--red);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

.satellite__area {
  fill: none;
  stroke: white;
  stroke-width: 1;
  stroke-dasharray: 6 5;
  opacity: 0.9;
}

.satellite__area-label {
  fill: white;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.8);
  stroke-width: 4;
  font: 800 14px/1 var(--font-sans);
}

.satellite__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.satellite__toolbar button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #1a1d24;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.satellite__toolbar button:hover {
  border-color: rgba(245, 243, 238, 0.34);
  background: #222631;
}

.image-fallback {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--subtle);
}

figcaption,
.fine {
  margin-top: 0.5rem;
  color: var(--subtle);
  font-size: 0.86rem;
}

.detail-stats {
  display: grid;
  gap: 1px;
  margin: 0;
}

.detail-stat {
  border: 1px solid var(--line);
  background: var(--panel-2);
  padding: 0.9rem;
}

.detail-stat dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-stat dd {
  margin: 0.2rem 0 0;
  font-weight: 800;
}

.detail-stat span {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-weight: 500;
}

.record-photo {
  margin: 0.75rem 0 0;
}

.record-photo img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.record-photo figcaption {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.record-photo a,
.disabled-action {
  color: var(--ink);
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
}

.disabled-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.85rem;
  border: 1px solid rgba(216, 180, 95, 0.44);
  border-radius: 3px;
  color: var(--gold);
  padding: 0.6rem 0.85rem;
  font-weight: 900;
  text-decoration: none;
}

.disabled-action[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.78;
}

.corner-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.corner-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #151820;
  color: var(--ink);
  padding: 0.35rem 0.65rem;
  font-size: 0.86rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.corner-data h4 {
  margin: 1rem 0 0.4rem;
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.straight-list strong {
  color: var(--ink);
}

.straight-list span {
  display: block;
  margin-top: 0.2rem;
}

.detail-section {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

.detail-section h3 {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-section p,
.detail-section li {
  color: var(--muted);
}

.detail-section ul {
  margin: 0;
  padding-left: 1.1rem;
}

.sources {
  columns: 2 280px;
}

.sources a {
  color: var(--ink);
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
}

@media (max-width: 760px) {
  .hero {
    /* content-sized; a vh minimum leaves a void above the masthead */
    min-height: 0;
  }

  .controls {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .table-scroll {
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  table {
    min-width: 0;
  }

  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  tbody {
    display: grid;
    gap: 0.8rem;
    padding: 0.8rem;
  }

  tbody tr {
    border: 1px solid var(--line);
    background: #12151b;
    padding: 0.25rem 0;
  }

  td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr);
    gap: 0.75rem;
    border-bottom: 0;
    padding: 0.45rem 0.75rem;
    white-space: normal;
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  td:first-child {
    grid-template-columns: 1fr;
    padding-top: 0.75rem;
  }

  td:first-child::before {
    display: none;
  }

  .track-cell {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .detail-hero,
  .media-grid {
    grid-template-columns: 1fr;
  }

  .outline-large {
    max-height: 220px;
  }

  .outline-toggle {
    position: static;
    margin-top: 0.6rem;
  }

  .corner-chip {
    border-radius: 6px;
  }
}

@media (max-width: 430px) {
  main,
  .hero__content {
    width: min(100% - 1rem, 1440px);
  }

  #detail-content {
    padding-inline: 0.85rem;
  }

  .modal {
    padding: max(0.4rem, env(safe-area-inset-top)) 0.4rem
             max(0.4rem, env(safe-area-inset-bottom));
  }
}

[data-series="motogp"] {
  --red: #ff7a00;
  --red-dark: #c45e00;
  --gold: #00c2b8;
}

[data-series="motogp"] .hero {
  background:
    linear-gradient(90deg, rgba(9, 10, 12, 0.94), rgba(9, 10, 12, 0.74) 48%, rgba(9, 10, 12, 0.9)),
    radial-gradient(circle at 78% 30%, rgba(255, 122, 0, 0.32), transparent 36%),
    linear-gradient(135deg, #14171c 0%, #08090b 58%, #201207 100%);
}

[data-series="motogp"] .hero::before {
  border-bottom-color: rgba(255, 122, 0, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

.version-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  padding: 0.18em 0.65em;
  font-size: 0.28em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, #9a9a9a);
  border: 1px solid var(--line, #3a3a3a);
  border-radius: 999px;
  background: transparent;
}

.world-inset {
  display: block;
  width: 100%;
  max-width: 280px;
  margin-top: 1rem;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--line);
  background: #07080a;
}

.world-inset__land {
  fill: #2a2e36;
  stroke: none;
}

.world-inset__pulse {
  fill: var(--accent, var(--red));
  opacity: 0.22;
}

.world-inset__dot {
  fill: var(--accent, var(--red));
}

@media (max-width: 640px) {
  .world-inset {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-inset__pulse,
  .world-inset__dot {
    animation: none !important;
  }
}

.view-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.view-toggle {
  border-radius: 4px;
  border-color: var(--gold);
  color: var(--gold);
}

.view-toggle.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
}

.season-year-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.season-year-wrap[hidden],
.chips[hidden] {
  display: none;
}

.season-year-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#season-year {
  min-width: 6rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #0f1115;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

#season-year:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

th button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Season min-width scoped to >=641px so it can't force horizontal overflow
   at 320px (400% zoom). Overridden to 0 at <=640px where cards mode lives. */
@media (min-width: 641px) {
  table.is-season {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  table.is-season {
    min-width: 0;
  }
}

.gp-cell strong {
  display: block;
  line-height: 1.2;
}

.gp-cell .gp-date {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .view-switch {
    width: 100%;
  }

  #season-year {
    flex: 1 1 auto;
  }
}

/* ─────────────────────────  race ticker  ─────────────────────────
   Thin, static (scrolls-away) strip above the hero. position: relative
   so it never offsets the sticky controls/table-header stack. */

.ticker {
  position: relative;
  z-index: 4;
  background: var(--panel);
  border-bottom: 1px solid var(--red);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.ticker[hidden] {
  display: none;
}

.ticker__inner {
  position: relative;
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  min-height: 36px;
}

.ticker__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.6);
}

.ticker.is-live .ticker__dot {
  animation: ticker-pulse 1.4s ease-out infinite;
}

@keyframes ticker-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(225, 6, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0); }
}

.ticker__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ticker__track {
  display: inline-block;
  white-space: nowrap;
}

.ticker__seg {
  display: inline-block;
  white-space: nowrap;
  padding-right: 3rem;
}

.ticker__seg + .ticker__seg {
  display: none;
}

.ticker__sep {
  color: var(--subtle);
  margin: 0 0.35rem;
}

.ticker__count {
  color: var(--ink);
}

.ticker__sub {
  color: var(--muted);
}

.ticker__live-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 0.2em;
}

.ticker__close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ticker__close:hover {
  color: var(--ink);
}

.ticker__close:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Pause/resume control for the marquee. Hidden by default; only revealed
   inside the small-screen + motion-enabled media query below, where the
   marquee actually runs. Thin like the dismiss ×. */
.ticker__pause {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 3px;
  display: none;
  align-items: center;
  justify-content: center;
}

.ticker__pause:hover {
  color: var(--ink);
}

.ticker__pause:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Marquee only on small screens AND only when the visitor is OK with motion.
   Desktop (>=768px) and reduced-motion users get a static truncating line. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .ticker__text {
    text-overflow: clip;
  }

  .ticker__seg + .ticker__seg {
    display: inline-block;
  }

  .ticker__track {
    animation: ticker-marquee 18s linear infinite;
  }

  .ticker__pause {
    display: inline-flex;
  }

  .ticker.is-paused .ticker__track {
    animation-play-state: paused;
  }

  .ticker:hover .ticker__track,
  .ticker:focus-within .ticker__track {
    animation-play-state: paused;
  }

  @keyframes ticker-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker.is-live .ticker__dot,
  .ticker__track {
    animation: none !important;
  }
}