/*
 * public.css — PitBox Public Site Design System
 * Extracted from land.php's <style> block.
 * PHP-interpolated :root values are NOT here — publicHead() emits them inline.
 * CSS-var contract: --accent, --gold, --bg, --card, --line, --text, --muted,
 *                   --faint, --radius, --shadow (plus --discord, --bg2, --line-soft).
 */

/* ── Resets + base ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.6;
  font-size: 16px; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 26px; }

/* ── Powered by PitBox pill ── */
.powered-pill {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: #0b0b0c; background: var(--gold); padding: 6px 13px; border-radius: 99px;
  transition: background .15s;
}
.powered-pill:hover { background: #f6d34d; }
.powered-pill .flag {
  width: 13px; height: 13px; border-radius: 2px;
  background: conic-gradient(#1a1a1a 90deg,#fff 90deg 180deg,#1a1a1a 180deg 270deg,#fff 270deg);
}

/* ── Sticky member bar ── */
.member-bar {
  background: rgba(12,13,16,.92); border-bottom: 1px solid var(--line-soft);
  padding: .45rem 0; position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.member-bar .wrap { display: flex; align-items: center; justify-content: space-between; }
.member-bar-name { font-weight: 800; letter-spacing: .01em; color: var(--muted); font-size: .88rem; }
.member-login-link {
  font-size: .78rem; font-weight: 600; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); padding: 4px 12px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px; transition: all .12s;
}
.member-login-link:hover { border-color: var(--faint); color: var(--text); }

/* ── Site nav ── */
.site-nav {
  background: rgba(12,13,16,.9); border-bottom: 1px solid var(--line-soft);
  padding: 0;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.site-nav .wrap {
  display: flex; align-items: center; gap: 26px; height: 64px;
}

/* Emblem tile + league name — the nav's brand lockup */
.nav-brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 900; font-size: 1.02rem; color: #fff; letter-spacing: -.01em;
  text-decoration: none; flex-shrink: 0;
}
.nav-emblem {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #000));
  color: var(--ink, #0b0b0c); font-size: .82rem; font-weight: 900; letter-spacing: 0;
}
.nav-emblem img { width: 100%; height: 100%; object-fit: cover; }
.nav-brand-name { white-space: nowrap; }
@media (max-width: 640px) {
  .nav-brand { font-size: .94rem; }
  .nav-emblem { width: 30px; height: 30px; border-radius: 8px; font-size: .72rem; }
}

.nav-links { display: flex; gap: 22px; align-items: center; height: 64px; }
.site-nav a {
  font-size: .84rem; font-weight: 650; color: var(--muted); text-decoration: none;
  padding: 0; height: 64px; display: inline-flex; align-items: center;
  box-shadow: 0 2px 0 transparent; transition: color .12s, box-shadow .12s;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--text); }
.site-nav a.active {
  color: #fff; box-shadow: 0 2px 0 var(--gold, var(--accent));
}
.site-nav .nav-spacer { flex: 1; }
.site-nav .nav-cta {
  font-size: .82rem; font-weight: 800; text-decoration: none;
  padding: 9px 18px; border-radius: 9px;
  background-color: var(--gold, var(--accent)); color: var(--ink, #0b0b0c);
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.55),
    0 4px 14px -4px color-mix(in srgb, var(--gold, var(--accent)) 40%, transparent);
  transition: background-color .15s, box-shadow .15s, transform .15s; height: auto;
  white-space: nowrap;
}
.site-nav .nav-cta:hover {
  background-color: var(--gold-hover, var(--accent)); color: var(--ink, #0b0b0c);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.55),
    0 6px 18px -4px color-mix(in srgb, var(--gold, var(--accent)) 50%, transparent);
}
.site-nav .nav-cta:active {
  transform: translateY(1px);
  background-image: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 0 0 rgba(0,0,0,0),
    0 2px 8px -4px color-mix(in srgb, var(--gold, var(--accent)) 25%, transparent);
}
.site-nav .nav-cta.discord-cta {
  background-color: var(--discord); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.55),
    0 4px 14px -4px color-mix(in srgb, var(--discord) 45%, transparent);
}
.site-nav .nav-cta.discord-cta:hover {
  background-color: color-mix(in srgb, var(--discord) 86%, #fff); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.55),
    0 6px 18px -4px color-mix(in srgb, var(--discord) 55%, transparent);
}
.site-nav .nav-cta.discord-cta:active {
  background-color: color-mix(in srgb, var(--discord) 85%, #000);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.4),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 0 0 rgba(0,0,0,0),
    0 2px 8px -4px color-mix(in srgb, var(--discord) 30%, transparent);
}
@media (max-width: 640px) {
  .site-nav .wrap { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px 14px; }
  .nav-links { height: auto; gap: 14px; flex-wrap: wrap; order: 3; flex-basis: 100%; }
  .site-nav a { height: auto; padding: 4px 0; font-size: .8rem; }
  .site-nav .nav-spacer { display: none; }
  .site-nav .nav-cta { margin-left: auto; padding: 6px 14px; font-size: .8rem; }
}

/* ── Hero / header ── */
header {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(720px 360px at 78% -20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    linear-gradient(180deg, #101218, var(--bg));
  padding: 18px 0 64px;
}
.topbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 48px; }
.hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; }
@media (max-width: 640px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } }

.emblem {
  width: 128px; height: 128px; border-radius: 26px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 85%, #000), color-mix(in srgb, var(--accent) 20%, #0a0a0a));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow);
}
.emblem img { width: 100%; height: 100%; object-fit: cover; }
.emblem-txt { font-weight: 900; font-size: 2.6rem; color: #fff; letter-spacing: -2px; line-height: 1; }
@media (max-width: 640px) { .emblem { margin: 0 auto; } }

.htag {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--accent) 80%, #fff); margin-bottom: 10px;
}
header h1 { font-size: clamp(2rem, 5.4vw, 3.2rem); font-weight: 820; letter-spacing: -.03em; line-height: 1.06; }
.hero-tagline { margin-top: 12px; color: var(--muted); font-size: 1.05rem; max-width: 560px; }
@media (max-width: 640px) { .hero-tagline { margin-inline: auto; } }

.facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 640px) { .facts { justify-content: center; } }
.fact { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.fact b { color: #fff; font-size: 1rem; display: block; line-height: 1.2; }
.fact span { color: var(--faint); font-size: .76rem; }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
@media (max-width: 640px) { .cta-row { justify-content: center; } }

/* ── Buttons ──
   Lit button. Light comes from above and is faked with four shadows:
   1. inset 1px highlight on the top edge (the light itself)
   2. inset 1px shade on the bottom edge (the side facing away)
   3. tight dark contact shadow where the button meets the page
   4. soft glow in the button's own color bouncing back off the page
   plus a gentle top-to-bottom gradient. Pressing flips the highlight. */
.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-weight: 700; font-size: .95rem; padding: 13px 24px; border-radius: 12px;
  transition: transform .15s, background-color .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn-discord {
  background-color: var(--discord); color: #fff;
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.55),
    0 6px 20px -6px color-mix(in srgb, var(--discord) 45%, transparent);
}
.btn-discord:hover {
  background-color: color-mix(in srgb, var(--discord) 86%, #fff); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 2px rgba(0,0,0,.55),
    0 8px 24px -6px color-mix(in srgb, var(--discord) 55%, transparent);
}
.btn-discord:active {
  background-color: color-mix(in srgb, var(--discord) 85%, #000);
  background-image: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.4),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 0 0 rgba(0,0,0,0),
    0 2px 8px -4px color-mix(in srgb, var(--discord) 30%, transparent);
}

.btn-ghost {
  background-color: transparent; border: 1px solid var(--line); color: var(--text);
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.4);
}
.btn-ghost:hover { border-color: var(--accent); color: color-mix(in srgb, var(--accent) 90%, #fff); background-color: rgba(255,255,255,.04); }
.btn-ghost:active {
  background-color: rgba(0,0,0,.25);
  background-image: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 0 0 rgba(0,0,0,0);
}

.btn-accent {
  background-color: var(--accent); color: #0b0b0c;
  background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.55),
    0 6px 20px -6px color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn-accent:hover {
  background-color: color-mix(in srgb, var(--accent) 82%, #fff); color: #0b0b0c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.55),
    0 8px 24px -6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.btn-accent:active {
  background-color: color-mix(in srgb, var(--accent) 80%, #000);
  background-image: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0));
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 0 0 rgba(0,0,0,0),
    0 2px 8px -4px color-mix(in srgb, var(--accent) 25%, transparent);
}
@media (prefers-reduced-motion: reduce) { .btn, .site-nav .nav-cta { transition: none; } .btn:hover, .btn:active, .site-nav .nav-cta:active { transform: none; } }

/* ── Sections ── */
section { padding: 54px 0; }
section.alt { background: var(--bg2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.sec-h {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, #fff); margin-bottom: 10px;
}
h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 24px; }

/* ── Why cards ── */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.why-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.why-card .ic { font-size: 1.6rem; margin-bottom: 12px; }
.why-card h3 { font-size: 1.05rem; font-weight: 720; margin-bottom: 6px; }
.why-card p { color: var(--muted); font-size: .92rem; }

/* ── Series / standings board ── */
.series-block + .series-block { margin-top: 32px; }
.series-label { font-size: .78rem; font-weight: 700; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }

.board { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.brow {
  display: grid; grid-template-columns: 44px 1fr auto auto;
  gap: 14px; align-items: center; padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums;
}
.brow:last-child { border-bottom: none; }
.brow .pos { color: var(--faint); font-weight: 700; text-align: center; font-size: .9rem; }
.brow.podium .pos { color: color-mix(in srgb, var(--accent) 80%, #fff); }
.brow .who { font-weight: 650; color: #fff; font-size: .95rem; }
.brow .pts { color: var(--muted); font-size: .87rem; white-space: nowrap; }
.brow .wins { color: var(--gold); font-size: .8rem; font-weight: 700; min-width: 28px; text-align: right; }
.board-more { padding: 13px 20px; text-align: center; border-top: 1px solid var(--line-soft); }
.board-more a { color: color-mix(in srgb, var(--accent) 80%, #fff); text-decoration: none; font-weight: 600; font-size: .88rem; }

/* ── Stat grid ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.stat-cell { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.stat-cell .lab { color: var(--faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.stat-cell .val { font-weight: 700; margin-top: 5px; font-size: .92rem; }
.stat-cell .val b { color: color-mix(in srgb, var(--accent) 80%, #fff); }

/* ── Next race ── */
.nextrace {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 24px 26px;
}
.nr-when { flex-shrink: 0; text-align: center; min-width: 60px; }
.nr-day  { font-size: 2.1rem; font-weight: 820; color: #fff; line-height: 1; }
.nr-sub  { font-size: .74rem; font-weight: 600; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-top: 5px; }
.nr-meta b { color: #fff; display: block; font-size: 1.05rem; margin-bottom: 4px; }
.nr-meta { color: var(--muted); font-size: .9rem; }
.nr-cta { margin-left: auto; }
@media (max-width: 620px) { .nr-cta { margin-left: 0; width: 100%; } .nr-cta .btn { width: 100%; justify-content: center; } }

/* ── Final CTA ── */
.final {
  text-align: center;
  background:
    radial-gradient(600px 280px at 50% 120%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    var(--bg2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.final h2 { font-size: 2rem; margin-bottom: 12px; }
.final p  { color: var(--muted); max-width: 480px; margin: 0 auto 28px; }

/* ── Footer ── */
footer { border-top: 1px solid var(--line-soft); padding: 22px 0; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.foot-powered { color: var(--faint); font-size: .8rem; }
.foot-powered a { color: var(--muted); text-decoration: none; transition: color .12s; }
.foot-powered a:hover { color: var(--gold); }
.foot-gold-label {
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gold, var(--accent)) 70%, #6a5400) !important;
}
.foot-gold-label:hover { color: var(--gold, var(--accent)) !important; }
.socials { display: flex; gap: 16px; }
.socials a { color: var(--muted); text-decoration: none; font-size: .85rem; transition: color .12s; }
.socials a:hover { color: color-mix(in srgb, var(--accent) 85%, #fff); }

/* ── Social icon buttons ── */
.social-icons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.social-ic {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  text-decoration: none;
  transition: color .14s, background .14s, border-color .14s;
  line-height: 0;
}
.social-ic svg { display: block; width: 100%; height: 100%; }
.social-ic:hover {
  color: var(--sc, var(--accent));
  border-color: var(--sc, var(--accent));
  background: color-mix(in srgb, var(--sc, var(--accent)) 10%, transparent);
}
.foot-socials { gap: 6px; }
.hero-socials { margin-top: 20px; }
@media (max-width: 640px) { .hero-socials { justify-content: center; } }

/* ── roster.php ── */

/* Page header (shared: roster + champions) */
.page-header     { margin-bottom: 1.75rem; }
.page-title      { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; color: var(--text); margin: 0 0 .3rem; }
.page-sub        { font-size: .85rem; color: var(--muted); margin: 0; }

/* Roster: four-column board — scoped so it doesn't override land.php .brow layout */
.board-roster .brow { grid-template-columns: 1fr 6rem 6rem 6rem; padding: .75rem 1.1rem; gap: .5rem; }
.brow-head       { background: var(--card);
                   font-size: .63rem; font-weight: 800; letter-spacing: .1em;
                   text-transform: uppercase; color: var(--faint);
                   padding-top: .6rem; padding-bottom: .6rem; }
.brow-driver     { background: var(--bg2); text-decoration: none;
                   color: var(--text); transition: background .12s; }
.brow-driver:hover { background: var(--card); }

/* Roster columns */
.col-driver      { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.col-stat        { text-align: right; font-size: .9rem; color: var(--muted); }

/* Avatar initial bubble */
.driver-avatar   { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
                   background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #000));
                   color: #0b0b0c; font-weight: 900; font-size: .8rem;
                   display: flex; align-items: center; justify-content: center;
                   line-height: 1; }
.driver-name     { font-weight: 700; font-size: .95rem; color: var(--text);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-flag        { font-size: .8rem; flex-shrink: 0; }

/* Accent for win count */
.stat-accent     { color: var(--gold); font-weight: 800; }

/* Tabular nums utility */
.tnum            { font-variant-numeric: tabular-nums; }

/* Empty state (shared: roster + champions) */
.empty-state     { text-align: center; padding: 4rem 1rem; }
.empty-icon      { font-size: 2.5rem; margin-bottom: .75rem; }
.empty-msg       { color: var(--muted); font-size: .95rem; margin-bottom: 2rem; }

/* Mobile: collapse stat columns */
@media (max-width: 480px) {
  .board-roster .brow { grid-template-columns: 1fr 4.5rem 4.5rem 4.5rem; padding: .7rem .85rem; gap: .3rem; }
  .driver-name   { font-size: .88rem; }
  .col-stat      { font-size: .82rem; }
}

/* ── driver.php ── */

/* Hero */
.dp-hero          { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; flex-wrap: wrap; }
.dp-avatar-wrap   { flex-shrink: 0; }
.dp-avatar        { width: 80px; height: 80px; border-radius: 50%;
                    border: 3px solid var(--accent);
                    object-fit: cover; display: block; }
.dp-avatar-ph     { display: flex; align-items: center; justify-content: center;
                    background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #000));
                    color: #0b0b0c; font-weight: 900; font-size: 2rem; }
.dp-hero-info     { flex: 1; min-width: 0; }
.dp-gamertag      { font-size: 2rem; font-weight: 900; letter-spacing: -.04em; color: var(--text); margin: 0 0 .3rem; line-height: 1.1; }
.dp-champ-badge   { display: inline-flex; align-items: center; gap: .3rem;
                    font-size: .75rem; font-weight: 800; letter-spacing: .05em;
                    background: rgba(232,184,0,.12); border: 1px solid rgba(232,184,0,.3);
                    color: var(--gold); border-radius: 6px; padding: 3px 10px;
                    margin-bottom: .5rem; }
.dp-share-row     { margin-top: .4rem; }
.dp-share-link    { font-size: .78rem; font-weight: 700; color: var(--faint);
                    text-decoration: none; }
.dp-share-link:hover { color: var(--gold); }

/* Socials pill row */
.dp-socials       { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.dp-soc-pill      { font-size: .78rem; font-weight: 700; color: var(--faint);
                    background: rgba(255,255,255,.05); border: 1px solid var(--line);
                    border-radius: 999px; padding: 3px 11px; text-decoration: none;
                    line-height: 1.5; transition: color .15s, border-color .15s, background .15s; }
.dp-soc-pill:hover { color: var(--text); background: rgba(255,255,255,.09); }
.dp-soc-twitch:hover    { color: #c8b6ff; border-color: rgba(200,182,255,.4); }
.dp-soc-youtube:hover   { color: #ff8a80; border-color: rgba(255,138,128,.4); }
.dp-soc-instagram:hover { color: #ffa8d2; border-color: rgba(255,168,210,.4); }
.dp-soc-tiktok:hover    { color: #9ae6e6; border-color: rgba(154,230,230,.4); }

/* Driver page sections */
.dp-section       { margin-bottom: 2.5rem; }
.dp-section-title { font-size: .65rem; font-weight: 800; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--faint);
                    margin: 0 0 .85rem; }

/* Licence card centering */
.dp-licence-wrap  { max-width: 560px; }

/* Career stats grid */
.dp-stats-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
                    background: var(--line); border-radius: var(--radius); overflow: hidden; }
.dp-stat-card     { background: var(--card); padding: 1.1rem .75rem;
                    text-align: center; display: flex; flex-direction: column; gap: .3rem; }
.dp-stat-value    { font-size: 1.75rem; font-weight: 900; line-height: 1; color: var(--text); }
.dp-stat-label    { font-size: .58rem; font-weight: 800; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--faint); }
.dp-stat-sub      { font-size: .55rem; font-weight: 600; color: var(--muted); }
.stat-gold        { color: var(--gold); }

/* Achievements grid */
.dp-achieve-grid  { display: flex; flex-wrap: wrap; gap: .65rem; }
.dp-achieve-item  { display: inline-flex; align-items: center; gap: .5rem;
                    background: rgba(232,184,0,.07); border: 1px solid rgba(232,184,0,.18);
                    border-radius: 8px; padding: .45rem .8rem; cursor: help; }
.dp-achieve-icon  { line-height: 1; display: flex; align-items: center; pointer-events: none; }
.dp-achieve-name  { font-size: .68rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* Recent results board — scoped 3-col layout */
.board-results .brow { grid-template-columns: 1fr 8rem 5rem; padding: .7rem 1.1rem; gap: .5rem; }
.brow-result      { background: var(--bg2, var(--card)); color: var(--text); }
.col-track        { font-size: .88rem; font-weight: 600; color: var(--text);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-date         { font-size: .78rem; color: var(--muted); }
.col-pos          { text-align: right; font-size: .88rem; font-weight: 800; color: var(--muted); }
.pos-win          { color: var(--gold); }
.pos-podium       { color: #c4c8d0; }

/* Tournament history board (U4, driver.php Competition Record) — scoped 3-col layout,
   mirrors .board-results */
.board-tourneys   { margin-top: 1.1rem; }
.board-tourneys .brow { grid-template-columns: 1fr 6rem 8rem; padding: .7rem 1.1rem; gap: .5rem; }
.brow-tourney     { background: var(--bg2, var(--card)); color: var(--text); }
.col-event        { font-size: .88rem; font-weight: 600; color: var(--text);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-place        { text-align: right; font-size: .88rem; font-weight: 800; color: var(--muted); }

/* Driver page 404 box */
.not-found-box   { max-width: 480px; margin: 4rem auto; text-align: center; padding: 3rem 2rem;
                   background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
                   box-shadow: var(--shadow); }
.not-found-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.not-found-title { font-size: 1.6rem; font-weight: 900; margin: 0 0 .5rem; color: var(--text); }
.not-found-sub   { color: var(--muted); font-size: .95rem; margin: 0 0 1.5rem; }

/* Driver page mobile */
@media (max-width: 520px) {
  .dp-gamertag    { font-size: 1.5rem; }
  .dp-stats-grid  { grid-template-columns: repeat(2, 1fr); }
  .board-results .brow { grid-template-columns: 1fr 6rem 4.5rem; padding: .65rem .85rem; }
  .col-date       { font-size: .72rem; }
  .board-tourneys .brow { grid-template-columns: 1fr 4.5rem; padding: .65rem .85rem; }
  .board-tourneys .col-date { display: none; }
}

/* ── champions.php ── */

/* Section blocks */
.hof-section   { margin-bottom: 3rem; }
.hof-heading   { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
                 color: var(--muted); margin: 0 0 1rem; padding-bottom: .45rem;
                 border-bottom: 1px solid var(--line); }

/* Champions roll board — scoped 3-col equal layout */
.board-champs .brow { grid-template-columns: 1fr 1fr 1fr; padding: .75rem 1.1rem; gap: .5rem; }
.brow-champ    { background: var(--bg2); color: var(--text); }

.col-series    { font-size: .9rem; color: var(--muted); }
.col-season    { font-size: .9rem; color: var(--muted); }
.col-champ     { display: flex; align-items: center; gap: .5rem; font-weight: 700; }

.crown         { font-size: 1rem; flex-shrink: 0; }
.champ-link    { color: var(--gold); text-decoration: none; font-weight: 800; }
.champ-link:hover { text-decoration: underline; }

/* Records grid */
.records-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

.record-card   { background: var(--card); border: 1px solid var(--line);
                 border-radius: var(--radius); overflow: hidden; }
.record-card-head { display: flex; align-items: center; gap: .5rem;
                    padding: .75rem 1rem .6rem;
                    border-bottom: 1px solid var(--line); }
.record-icon   { font-size: 1.1rem; flex-shrink: 0; }
.record-title  { font-size: .75rem; font-weight: 800; letter-spacing: .07em;
                 text-transform: uppercase; color: var(--muted); }

.record-list   { list-style: none; margin: 0; padding: 0; }
.record-row    { display: flex; align-items: center; gap: .5rem;
                 padding: .55rem 1rem;
                 font-size: .88rem; }
.record-row + .record-row { border-top: 1px solid var(--line-soft); }

.record-rank   { width: 18px; text-align: center; font-size: .75rem;
                 font-weight: 800; color: var(--faint); flex-shrink: 0; }
.record-name   { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; color: var(--text); text-decoration: none; }
.record-name:hover { color: var(--gold); text-decoration: underline; }
.record-value  { font-size: .8rem; color: var(--muted); flex-shrink: 0;
                 font-variant-numeric: tabular-nums; }

/* Rank highlights */
.rank-gold   .record-rank { color: var(--gold); }
.rank-silver .record-rank { color: #b0b8c8; }
.rank-bronze .record-rank { color: #c87a3f; }
.rank-gold   .record-name { font-weight: 800; color: var(--text); }

/* Champions mobile */
@media (max-width: 540px) {
  .board-champs .brow { grid-template-columns: 1fr 1fr; padding: .7rem .85rem; }
  .col-series        { display: none; }
  .records-grid      { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
  .records-grid      { grid-template-columns: 1fr; }
}

/* ── chips (design-handoff tokens: pill, faint bg, 1px line; green check) ── */
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  font-size:.78rem;font-weight:650;white-space:nowrap;}
.chip .bi-check-lg,.chip .bi-check{color:#34D399;font-size:.85rem;}
.chip.live{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.35);color:#34D399;}
.chip-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* ── Schedule page (race-schedule.php) ──────────────────────────────────────
   11a "Season Run-Down" — hero (derived headline + race-night legend) and the
   next-race card (.nr, shared shape with land.php's "Race Night" hero — kept
   here too since race-schedule.php has no page-local <style> block). Rows,
   completed table, filter pills, calendar and OBS views are later tasks. */
.sch-hero {
  background:
    radial-gradient(700px 320px at 80% -28%, color-mix(in srgb, var(--gold) 18%, transparent), transparent),
    linear-gradient(180deg, var(--bg2), var(--bg));
  border-bottom: 1px solid var(--line-soft);
  padding: 0;
}
.sch-hero .wrap {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start;
  padding-top: 52px; padding-bottom: 52px;
}
@media (max-width: 860px) { .sch-hero .wrap { grid-template-columns: 1fr; gap: 26px; padding-top: 30px; padding-bottom: 28px; } }
.sch-eyebrow {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.sch-h1 {
  font-size: clamp(1.9rem, 4vw, 2.65rem); font-weight: 900; letter-spacing: -.03em;
  line-height: 1.15; color: #fff; margin: 0 0 16px; text-wrap: pretty;
}
.sch-h1 .g { color: var(--gold); }
.sch-legend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sch-legend-row { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text); font-variant-numeric: tabular-nums; }
.sch-legend-sq { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.sch-legend-name { font-weight: 700; color: #fff; }
.sch-legend-when { color: var(--muted); }
.sch-prose { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 0 0 20px; max-width: 520px; text-wrap: pretty; }
.sch-cta-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .sch-cta-row { flex-direction: column; align-items: stretch; } .sch-cta-row .btn { width: 100%; justify-content: center; } }
.sch-fine { font-size: .74rem; color: var(--faint); line-height: 1.5; max-width: 520px; margin: 0; text-wrap: pretty; }

/* Add-to-calendar disclosure (.sch-sub) — no-JS <details> menu of calendar
   targets so a visitor without a registered webcal:// handler (or without any
   calendar app for a downloaded .ics) still has a path that works in-browser.
   Backs both the season Subscribe buttons and the per-race controls. The menu
   is absolutely positioned, so no ancestor of it may set overflow: hidden. */
/* Both schedule heroes are <header>s, so they inherit `overflow: hidden` from
   the generic `header` rule up top — which cut the bottom off their open
   Subscribe menus. Undo it: the heroes' gradients never needed the clip, since
   CSS backgrounds don't paint outside their own box anyway. */
.sch-hero, .sch-cal-hero { overflow: visible; }
.sch-sub { position: relative; display: inline-block; }
.sch-sub-toggle { cursor: pointer; list-style: none; }
.sch-sub-toggle::-webkit-details-marker { display: none; }
.sch-sub-toggle::marker { content: ""; }
.sch-sub-caret { width: 0; height: 0; margin-left: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.sch-sub[open] .sch-sub-caret { transform: rotate(180deg); }
.sch-sub-menu { position: absolute; top: 100%; left: 0; z-index: 40; margin-top: 8px; min-width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
/* Controls that sit flush-right (calendar hero CTA, race rows, rail items) open
   leftward so the menu can't run past the viewport / card edge. */
.sch-cal-hero-cta .sch-sub-menu,
.sch-sub-end .sch-sub-menu { left: auto; right: 0; }
.sch-sub-item { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; text-decoration: none; color: var(--text); }
.sch-sub-item + .sch-sub-item { border-top: 1px solid var(--line-soft); }
.sch-sub-item:hover { background: var(--bg2); }
.sch-sub-item b { font-size: .9rem; font-weight: 700; }
.sch-sub-item span { font-size: .74rem; color: var(--muted); }
/* Full-width variant (next-race cards). The <details> has to grow with its
   button — a width:100% summary inside a shrink-to-fit inline-block would
   collapse back to the text width. */
.sch-sub-block { display: block; width: 100%; margin-top: 8px; }
.sch-cal-next-card .sch-sub-block { margin-top: 12px; }
.sch-sub-block .sch-sub-toggle { width: 100%; justify-content: center; }
/* Rail item: the <details> takes over the flex-child role the plain <a> held;
   the 36px icon-button sizing stays on the summary (.sch-rail-item-cal). */
.sch-sub-rail { flex-shrink: 0; }
@media (max-width: 860px) {
  /* Wide variants only — .sch-sub-end marks the compact right-aligned controls
     (rail items, race rows), which keep their own sizing at this breakpoint. */
  .sch-sub:not(.sch-sub-end), .sch-sub:not(.sch-sub-end) > .sch-sub-toggle { width: 100%; }
  .sch-sub:not(.sch-sub-end) > .sch-sub-toggle { justify-content: center; }
  /* Stay absolutely-positioned (never in-flow) so an open menu can't stretch
     sibling buttons in a still-row flex container; just span full width. */
  .sch-sub:not(.sch-sub-end) .sch-sub-menu { left: 0; right: 0; min-width: 0; }
}
@media (max-width: 760px) {
  /* Race rows go full-width here (.sch-row-cal .btn), so the wrapper must too. */
  .sch-row-cal .sch-sub { display: block; width: 100%; }
}
@media (max-width: 640px) {
  /* Mirrors the old <a>.sch-rail-item-cal flex-child rules, now on the wrapper. */
  .sch-sub-rail { order: 3; width: 100%; }
}

/* Next-race card (.sch-nr) — README §11a tokens: gradient card, gold hairline + glow shadow */
.sch-nr {
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, #1A1608), #12131A 55%);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 0 30px 70px -35px color-mix(in srgb, var(--gold) 35%, transparent);
}
.sch-nr .nr-tag {
  display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.sch-nr .nr-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px var(--gold); animation: schnrpulse 2s infinite;
}
@keyframes schnrpulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
.sch-nr .nr-track { font-size: 1.5rem; font-weight: 850; color: #fff; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 4px; }
.sch-nr .nr-metaline { font-size: .82rem; color: var(--muted); font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.sch-nr .nr-local { font-size: .76rem; color: var(--faint); font-weight: 600; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.sch-nr .cdrow { display: flex; gap: 8px; margin: 16px 0; }
.sch-nr .cd {
  flex: 1; background: rgba(0,0,0,.35); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 4px; text-align: center;
}
.sch-nr .cd b { display: block; font-size: 1.5rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.sch-nr .cd span { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .12em; color: var(--faint); text-transform: uppercase; margin-top: 5px; }
.sch-nr .nr-live { text-align: center; font-size: 1.05rem; font-weight: 900; letter-spacing: .04em; color: var(--live); margin: 18px 0; }
.sch-nr .nr-foot { text-align: center; margin-top: 10px; font-size: .75rem; color: var(--faint); }
.sch-nr .nr-empty { font-size: .88rem; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
@media (max-width: 620px) { .sch-nr .cd b { font-size: 1.25rem; } }

/* ── Schedule page (race-schedule.php) — Task 3: filter row, upcoming rounds,
   "Already run", final band. Every class below is sch-prefixed (grepped against
   the rest of this file first — no collisions with land.php/standings.php etc). */

/* Filter row */
.sch-filterwrap { border-bottom: 1px solid var(--line-soft); background: var(--bg2); padding: 18px 0; }
.sch-filter { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sch-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--muted);
  font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.sch-pill:hover { border-color: var(--accent); color: var(--text); }
.sch-pill-active {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  color: var(--gold);
}
.sch-pill-sq { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.sch-filter-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); }
.sch-subscribe-scope b { color: #fff; }
.sch-completed-toggle { color: var(--gold); text-decoration: none; font-weight: 700; white-space: nowrap; }
.sch-completed-toggle:hover { text-decoration: underline; }

/* Upcoming rounds */
.sch-rowswrap { padding: 28px 0; }
.sch-rows { display: flex; flex-direction: column; gap: 12px; }
.sch-rows-empty { padding: 34px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); font-size: .9rem; }
.sch-row {
  display: grid; grid-template-columns: 64px 78px 1fr auto auto; gap: 16px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 4px solid var(--sch-rail, var(--gold));
  background: var(--card);
}
.sch-row-next {
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 8%, var(--card)), var(--card) 60%);
  border-color: rgba(232,184,0,.32);
}
.sch-row-round { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sch-row-round-lbl { font-size: .6rem; font-weight: 800; letter-spacing: .1em; color: var(--faint); text-transform: uppercase; }
.sch-row-round-num { font-size: 1.3rem; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.sch-row-next .sch-row-round-num { color: var(--gold); }
.sch-datewell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--well); padding: 8px 4px;
}
.sch-datewell-mon { font-size: .62rem; font-weight: 800; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.sch-datewell-day { font-size: 1.35rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sch-datewell-dow { font-size: .65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.sch-row-main { min-width: 0; }
.sch-row-trackline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.sch-row-track { font-size: 1.06rem; font-weight: 800; color: #fff; }
.sch-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 5px; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sch-tag-next { background: var(--gold); color: var(--ink); }
.sch-tag-double { background: rgba(167,139,250,.16); color: #A78BFA; border: 1px solid rgba(167,139,250,.35); }
.sch-tag-finale { background: rgba(246,211,77,.16); color: #F6D34D; border: 1px solid rgba(246,211,77,.35); }
/* Cancelled/postponed tags (Task 7 Step 3) — literal one-off accents, same
   pattern as .sch-tag-finale above (no --danger/--red token exists yet; --live
   is the green "live now" color, so it can't stand in for "cancelled"). */
.sch-tag-cancelled { background: rgba(229,72,77,.16); color: #E5484D; border: 1px solid rgba(229,72,77,.35); }
.sch-tag-postponed { background: rgba(246,211,77,.16); color: #F6D34D; border: 1px solid rgba(246,211,77,.35); }
.sch-row-meta { font-size: .82rem; color: var(--muted); font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.sch-row-notes { font-size: .78rem; color: var(--faint); font-style: italic; margin: 3px 0 0; text-wrap: pretty; }
.sch-details { margin-top: 8px; }
.sch-details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.sch-details > summary::-webkit-details-marker { display: none; }
.sch-details > summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); transition: transform .15s; }
.sch-details[open] > summary::before { transform: rotate(45deg); }
.sch-details > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.sch-details-body { margin-top: 8px; padding: 12px 14px; background: var(--well); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.sch-details-desc { margin: 0 0 10px; font-size: .88rem; overflow-wrap: anywhere; }
.sch-details-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 10px 0 4px; }
.sch-details-cars { margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
.sch-details-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 6px 16px; margin: 0; }
.sch-details-grid dt { font-size: .75rem; font-weight: 500; color: var(--muted); }
.sch-details-grid dd { margin: 0; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .sch-details > summary::before { transition: none; } }
.sch-row-times { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sch-row-time-league { font-size: .9rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sch-row-time-local { font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cancelled/postponed row (Task 7 Step 3) — dims the row and strikes the time;
   the left rail keeps its series color, the tag pill carries the status. */
.sch-row-cancelled { opacity: .85; }
.sch-row-cancelled .sch-row-track { color: var(--muted); }
.sch-row-time-struck { text-decoration: line-through; color: var(--faint); }
.sch-row-cal .btn { padding: 8px 14px; font-size: .78rem; white-space: nowrap; }
@media (max-width: 760px) {
  .sch-row { grid-template-columns: 78px 1fr; grid-template-rows: auto auto auto auto; row-gap: 10px; padding: 14px; }
  .sch-row-round { grid-column: 1; grid-row: 1; flex-direction: row; align-items: baseline; gap: 6px; }
  .sch-datewell { grid-column: 1; grid-row: 2; width: 62px; }
  .sch-row-main { grid-column: 2; grid-row: 1 / span 2; }
  .sch-row-times { grid-column: 1 / -1; grid-row: 3; flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; }
  .sch-row-cal { grid-column: 1 / -1; grid-row: 4; }
  /* Touch target: drop the desktop compact padding/font override so the
     full-width mobile Add-to-calendar button falls back to the base .btn
     box (13px/24px padding, inherited 1.6 line-height) which already renders
     ≈50px tall — the same "size lg" convention used by every other full-width
     mobile CTA on this page (.sch-cta-row, .sch-finalband-actions, .sch-rail-item-cal).
     min-height is a floor so it never drops under the ≈48px target regardless
     of font metrics. */
  .sch-row-cal .btn { width: 100%; justify-content: center; min-height: 48px; }
  /* Cancelled/postponed rows (Task 7) render an empty .sch-row-cal (no calendar
     action) — collapse its explicit grid row on mobile so it doesn't leave a
     stray 10px gap + zero-height row below the struck time line. Scoped to
     this breakpoint only; desktop's column-based layout is untouched. */
  .sch-row-cancelled .sch-row-cal:empty { display: none; }
}

/* Already run */
.sch-completed { padding: 6px 0 40px; }
.sch-completed-head { font-size: .85rem; color: var(--muted); margin-bottom: 12px; font-weight: 600; }
.sch-hof-link { color: var(--gold); text-decoration: none; font-weight: 700; margin-left: 10px; white-space: nowrap; } /* Task 7 Step 2 */
.sch-hof-link:hover { text-decoration: underline; }
.sch-completed-details { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sch-completed-summary { cursor: pointer; padding: 14px 18px; font-size: .82rem; font-weight: 700; color: var(--gold); background: var(--well); list-style: none; }
.sch-completed-summary::-webkit-details-marker { display: none; }
.sch-completed-summary::marker { content: ''; }
.sch-completed-table { display: flex; flex-direction: column; }
.sch-completed-row {
  display: grid; grid-template-columns: 44px 110px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 18px; border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--muted);
}
.sch-completed-round { font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; }
.sch-completed-date { font-variant-numeric: tabular-nums; }
.sch-completed-track { color: var(--text); font-weight: 700; }
.sch-completed-link { color: var(--gold); text-decoration: none; font-weight: 700; white-space: nowrap; }
.sch-completed-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .sch-completed-row { grid-template-columns: 36px 1fr auto; }
  .sch-completed-date { display: none; }
  /* .sch-hof-link (Task 7 Step 2, "Hall of Fame →") had no mobile rule — it's
     an inline text link riding the .sch-completed-head paragraph, which is
     too thin a hit target on touch. Let it wrap onto its own line with real
     padding so the tap area is comfortable without turning it into a button
     (it's a secondary link, not a commit control — doesn't need the 48px
     treatment used for Add-to-calendar/Subscribe CTAs). */
  .sch-completed-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
  .sch-hof-link { display: inline-block; margin-left: 4px; padding: 8px 2px; }
}

/* Final band */
.sch-finalband {
  background:
    radial-gradient(640px 300px at 50% 118%, color-mix(in srgb, var(--gold) 20%, transparent), transparent),
    linear-gradient(180deg, var(--bg), var(--bg2));
  border-top: 1px solid var(--line-soft);
  padding: 44px 0;
}
.sch-finalband-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.sch-finalband-text { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: -.01em; margin: 0; text-wrap: pretty; }
.sch-finalband-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 600px) {
  .sch-finalband-actions { flex-direction: column; width: 100%; }
  .sch-finalband-actions .btn { width: 100%; justify-content: center; }
}

/* ── ?view=calendar (race-schedule.php) — Task 4: 11b Month Calendar.
   Reuses .sch-eyebrow/.sch-h1/.g/.sch-prose/.sch-fine/.sch-nr from the hero/
   next-race blocks above. Everything new below is .sch-cal-/.sch-rail-
   prefixed (grepped against the whole file first — no collisions). */

/* Compact hero */
.sch-cal-hero { border-bottom: 1px solid var(--line-soft); background: var(--bg2); }
.sch-cal-hero-inner {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding-top: 34px; padding-bottom: 30px; flex-wrap: wrap;
}
.sch-cal-hero-main { min-width: 0; }
.sch-cal-hero-main .sch-h1 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 8px; }
.sch-cal-hero-main .sch-prose { margin-bottom: 0; }
.sch-cal-hero-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.sch-cal-hero-cta .sch-fine { text-align: right; }
@media (max-width: 860px) {
  .sch-cal-hero-inner { flex-direction: column; align-items: flex-start; padding-top: 24px; padding-bottom: 22px; }
  .sch-cal-hero-cta { align-items: flex-start; width: 100%; }
  .sch-cal-hero-cta .btn { width: 100%; justify-content: center; }
  .sch-cal-hero-cta .sch-fine { text-align: left; }
}

/* Body layout: month grid (main) + side rail (aside) */
.sch-cal-body { padding: 28px 0 48px; }
.sch-cal-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .sch-cal-layout { grid-template-columns: 1fr; } }

/* Month nav */
.sch-cal-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 4px; }
.sch-cal-navbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 1.1rem; font-weight: 700;
  text-decoration: none; line-height: 1; transition: border-color .15s, color .15s;
}
.sch-cal-navbtn:hover { border-color: var(--accent); color: var(--gold); }
.sch-cal-navlabel { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; min-width: 160px; text-align: center; }
@media (max-width: 640px) { .sch-cal-navbtn { width: 44px; height: 44px; } }
.sch-cal-sub { text-align: center; font-size: .8rem; color: var(--muted); margin: 8px 0 18px; font-variant-numeric: tabular-nums; }

/* Month grid */
.sch-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sch-cal-dow {
  text-align: center; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding-bottom: 6px;
}
.sch-cal-cell {
  min-height: 82px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--card);
  padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.sch-cal-cell-out { border-color: transparent; background: transparent; }
.sch-cal-cell-race { background: var(--well); border-color: var(--line); }
.sch-cal-cell-next {
  border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232,184,0,.32);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 10%, var(--card)), var(--card) 65%);
}
.sch-cal-daynum { font-size: .74rem; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.sch-cal-cell-race .sch-cal-daynum { color: var(--text); }
.sch-cal-chip {
  border-left: 3px solid var(--sch-rail, var(--gold)); border-radius: 4px;
  background: rgba(255,255,255,.04); padding: 3px 6px; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.sch-cal-chip-track { font-size: .66rem; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-cal-chip-time { font-size: .6rem; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
/* Cancelled/postponed chip (Task 7 Step 3) — struck-through, muted/red, and
   never carries the .sch-cal-cell-next ring (that's applied at the cell level
   from $nextRaceDay, which is always derived from $upcoming — cancelled rows
   are never in it). */
.sch-cal-chip-cancelled { border-left-color: #E5484D; opacity: .8; }
.sch-cal-chip-cancelled .sch-cal-chip-track,
.sch-cal-chip-cancelled .sch-cal-chip-time { text-decoration: line-through; }
.sch-cal-empty { padding: 30px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); font-size: .88rem; margin-top: 14px; }
/* Mobile (README §11b "Mobile"): the grid compresses to square day cells —
   day number + a small series-colored bar per race, no track/time text (that
   detail lives in the "N races this month" list in the side rail, which
   already sits BELOW the grid at this width because .sch-cal-layout collapses
   to 1 column at 960px and DOM order puts .sch-cal-main before <aside
   class="sch-rail">). Reuses the existing .sch-cal-chip element as the bar —
   its per-race --sch-rail custom property is already set inline by
   renderCalendarView() (race-schedule.php), so this is CSS-only, no markup
   change needed. */
@media (max-width: 640px) {
  .sch-cal-grid { gap: 4px; }
  .sch-cal-cell { min-height: 0; aspect-ratio: 1 / 1; padding: 4px; align-items: center; gap: 3px; }
  .sch-cal-daynum { font-size: .68rem; }
  .sch-cal-chip {
    width: 14px; height: 3px; min-width: 14px; min-height: 3px; flex-shrink: 0;
    padding: 0; margin: 0; border-radius: 2px; border-left: 0;
    background: var(--sch-rail, var(--gold));
  }
  .sch-cal-chip-track,
  .sch-cal-chip-time { display: none; }
  /* Cancelled/postponed (Task 7): keep the red signal on the bar itself since
     the struck-through text it normally rides on is hidden above. */
  .sch-cal-chip-cancelled { background: #E5484D; opacity: .8; }
}

/* Side rail */
.sch-rail { display: flex; flex-direction: column; gap: 18px; }
.sch-cal-next-card { padding: 18px; }
.sch-cal-next-card .nr-track { font-size: 1.2rem; margin-bottom: 3px; }
.sch-cal-cd-chip {
  display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0;
  font-size: .82rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}
.sch-cal-cd-chip b { font-size: .95rem; font-weight: 900; color: #fff; }
.sch-cal-cd-chip span { display: inline-flex; gap: 2px; align-items: baseline; }
.sch-rail-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 16px; }
.sch-rail-card-title { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.sch-rail-list { display: flex; flex-direction: column; gap: 10px; }
.sch-rail-item { display: flex; align-items: center; gap: 12px; }
.sch-rail-item-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; background: var(--well);
  border-left: 3px solid var(--sch-rail, var(--gold));
}
.sch-rail-item-day { font-size: .95rem; font-weight: 900; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sch-rail-item-dow { font-size: .58rem; font-weight: 700; color: var(--faint); text-transform: uppercase; }
.sch-rail-item-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sch-rail-item-track { font-size: .84rem; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-rail-item-meta { font-size: .7rem; color: var(--faint); }
.sch-rail-item-cal {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); color: var(--muted);
  text-decoration: none; transition: border-color .15s, color .15s;
}
.sch-rail-item-cal:hover { border-color: var(--accent); color: var(--gold); }
.sch-rail-item-cal-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sch-rail-legend { display: flex; flex-direction: column; gap: 9px; }
.sch-rail-legend-row { display: flex; align-items: center; gap: 9px; font-size: .8rem; }
.sch-rail-legend-sq { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.sch-rail-legend-name { font-weight: 700; color: #fff; }
.sch-rail-legend-when { color: var(--muted); margin-left: auto; padding-left: 8px; text-align: right; }
@media (max-width: 640px) {
  .sch-rail-item-cal { position: relative; width: 100%; height: 48px; }
  .sch-rail-item-cal-label {
    position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible;
    clip: auto; white-space: nowrap; font-size: .8rem; font-weight: 700;
  }
  .sch-rail-item { flex-wrap: wrap; }
  /* order lives on the .sch-sub-rail wrapper — it, not the summary, is the flex item. */
}