:root{
  --bg:#ffffff; --text:#000000; --muted:#333333;
  --panel:#f7f7f7; --border:#e5e5e5;
  --accent:#ff5252;
  --link:#ff5252; --link-hover:#d60000;
  --maxw:1440px;
  --container-pad:24px;
  --topbar-h:56px;
  --toc-w:180px;       /* base TOC width */
  --toc-offset:-24px;   /* horizontal nudge to the right */
  --toc-top: calc(var(--topbar-h) + 6px);  /* default docked under the black bar */

  /* Hero strip sizing */
  --hero-left-w: 290px;   /* your chosen card width */
  --hero-gap: 18px;       /* same as your grid gap */
  --hero-delta-nudge-y: 6px;  /* try 4–10px to match your mock */
  /* Speedrider tuning (smaller, less crowded) */
  --sr-left-w:85px;
  --sr-col-w:148px;
  --sr-row-pad:2px;
  --sr-font:12px;
  --sr-line:1.25;
}

html { scroll-padding-top: calc(var(--topbar-h) + 12px); }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:"Google Sans","Avenir Next","Metropolis",Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.45;
  padding-top:var(--topbar-h);
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--container-pad)}

.site-nav a{
  line-height: 1.0;         /* keeps underline alignment consistent */
}

/* ===== Fixed top bar ===== */
.topbar.fixed{position:fixed; top:0; left:0; right:0; z-index:1000; background:#000; color:#fff; height:var(--topbar-h)}
.bar-inner{display:flex; align-items:center; gap:12px; height:var(--topbar-h)}
.brand-logo-img{width:24px; height:24px}

/* Brand acts as "Home" link */
.brand-name{
  font-weight:700;
  color:#fff;
  text-decoration:none;
  padding:8px 4px;
  border-bottom:3px solid transparent;
  display:inline-block;
}
.brand-name:hover{ color:#ddd; }

/* Active underline for brand on Home */
body.page-home .brand-name.active{
  border-bottom-color:#fff; /* same as Home underline was */
}

/* Always underline brand on the Home page */
body.page-home .brand-name{
  border-bottom-color:#fff; /* white underline, like the old "Home" link */
}

.site-nav a{
  color:#fff;
  text-decoration:none;
  margin-left:16px;
  padding:8px 4px;
  border-bottom:3px solid transparent;
}
.site-nav a.active{border-bottom-color:var(--accent)}
body.page-home .site-nav a.active{ border-bottom-color:#fff; }          /* white on Home */
body.page-airride .site-nav a.active{ border-bottom-color:var(--accent); } /* red on Air Ride */
/* Top Ride page accent + active underline */
body.page-topride{
  --accent:#fdba2b;
  --link:#fdba2b;
  --link-hover:#c88700; /* slightly darker hover */
}
body.page-topride .site-nav a.active{
  border-bottom-color: var(--accent);
}
/* City Trial page accent + active underline */
body.page-citytrial{
  --accent:#22b26c;
  --link:#22b26c;
  --link-hover:#158a52; /* slightly darker hover */
}
body.page-citytrial .site-nav a.active{
  border-bottom-color: var(--accent);
}

/* Road Trip page accent + active underline */
body.page-roadtrip{
  --accent:#3d5d83;
  --link:#3d5d83;
  --link-hover:#28486a; /* slightly darker */
}
body.page-roadtrip .site-nav a.active{
  border-bottom-color: var(--accent);
}

/* Extras page accent + active underline */
body.page-extras{
  --accent:#BA5F9D;
  --link:#BA5F9D;
  --link-hover:#8c3f73; /* darker */
}
body.page-extras .site-nav a.active{
  border-bottom-color: var(--accent);
}

/* On Extras page, default content links follow accent color */
.page-extras main a{
  color: var(--link);
  text-decoration: underline;
}
.page-extras main a:hover{
  color: var(--link-hover);
}

body.page-about .site-nav a.active {
  border-bottom-color: #fff;
}

.site-nav a:hover{color:#ddd}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--border); padding:12px 0; color:var(--muted)}
#year{white-space:nowrap}

/* ===== Home hero ===== */
.hero{position:relative; min-height:280px; display:flex; align-items:center; justify-content:center}
.hero--home{width:100vw; margin-left:calc((100vw - 100%) / -2); margin-right:calc((100vw - 100%) / -2)}
.hero-bg{position:absolute; inset:0; background:url('images/kars-garage-hero.png') center top / cover no-repeat}
.hero-bg--top{background-position:center top}
.hero-content{position:relative; z-index:1}
.hero-content--center{text-align:center}
.hero-title--76{margin:48px 0; font-size:100px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ===== Home tiles ===== */
.tile-grid{display:grid; gap:18px; margin:24px auto; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:var(--maxw); padding:0 var(--container-pad)}
.tile-grid--shrink{transform:scale(.75); transform-origin:top center}
.tile{display:block; border:none; border-radius:16px; text-decoration:none; position:relative; overflow:hidden; box-shadow:none}

.tile-airride{
  background:
    image-set(
      url('images/air-ride.webp') type('image/webp'),
      url('images/air-ride.png')  type('image/png')
    )
    center / cover no-repeat;
 aspect-ratio:17/9}
.tile-topride{
  background:
    image-set(
      url('images/top-ride.webp') type('image/webp'),
      url('images/top-ride.png')  type('image/png')
    )
    center / cover no-repeat;
 aspect-ratio:17/9}
.tile-citytrial{
  background:
    image-set(
      url('images/city-trial.webp') type('image/webp'),
      url('images/city-trial.png')  type('image/png')
    )
    center / cover no-repeat;
 aspect-ratio:17/9}
.tile-roadtrip{
  background:
    image-set(
      url('images/road-trip.webp') type('image/webp'),
      url('images/road-trip.png')  type('image/png')
    )
    center / cover no-repeat;
 aspect-ratio:17/9}
.tile-extras{
  background:
    image-set(
      url('images/extras.webp') type('image/webp'),
      url('images/extras.png')  type('image/png')
    )
    center / cover no-repeat;
 aspect-ratio:17/9}

/* ===== Home tiles: horizontal carousel under hero ===== */
.tile-strip{
  position: relative;
  margin: 8px auto 20px;
  max-width: var(--maxw);
  padding: 0 var(--container-pad);
  overflow: hidden;                 /* hide overscroll edges */
}

.tile-carousel{
  display: flex;
  gap: 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox: hide scrollbar */
}
.tile-carousel::-webkit-scrollbar{ display: none; } /* WebKit: hide scrollbar */

/* Hide text selection flicker on the arrows */
.tile-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #000;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.tile-nav--left { left: 8px; }
.tile-nav--right { right: 8px; }

.tile-nav:hover{
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Optional: on very small phones, slightly larger tap target */
@media (max-width:480px){
  .tile-nav{ width: 44px; height: 44px; font-size: 24px; }
}

/* On very wide screens, center the belt area a bit nicer */
@media (min-width: 1441px){
  .tile-strip{ padding-left: 0; padding-right: 0; }
}

/* Optional: on narrow phones, slightly smaller gap */
@media (max-width: 480px){
  .tile-carousel{ gap: 12px; }
}

/* ===== Home tiles: CSS marquee (seamless loop) ===== */

/* Wrapper we animate on arrow clicks (belt keeps auto-marquee inside) */
.tile-shift{
  display: block;
  will-change: transform;
}

/* clip the belt */
.tile-carousel{
  overflow: hidden;                 /* change from 'auto' to 'hidden' here */
  display: block;
  position: relative;
}

/* belt that moves */
.tile-belt{
  display: flex;
  gap: 18px;
  width: max-content;               /* fit to content, will be duplicated by JS */
  will-change: transform;
  animation: tiles-marquee var(--tiles-duration, 40s) linear infinite;
}

/* Pause ONLY when an actual tile is hovered */
.tile-carousel:has(.tile:hover) .tile-belt{
  animation-play-state: paused;
}

/* Pause ONLY when a tile is keyboard-focused */
.tile-carousel:has(.tile:focus-visible) .tile-belt{
  animation-play-state: paused;
}


/* Make the motion distance be exactly 50% of the belt (because we duplicate once) */
@keyframes tiles-marquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}

/* Tile cards keep your existing fixed-ish width */
.tile-carousel .tile{
  flex: 0 0 clamp(220px, 30vw, 360px);
}

/* Optional: tighter gap on very small phones (keeps your earlier tweak) */
@media (max-width: 480px){
  .tile-belt{ gap: 12px; }
}


/* Optional: tweak the easing of the click animation */
:root{
  --tiles-step-ms: 420ms;           /* duration of one click step */
  --tiles-step-ease: cubic-bezier(.22,.61,.36,1);  /* smooth ease-out */
}


/* ===== Home Dashboard ===== */
.dashboard { margin: 18px auto 28px; }
.dash-title { margin: 0 0 10px; font-size: 24px; font-weight: 800; }

.dash-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 10px 0;
}
.dash-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.dash-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.dash-card.wide { grid-column: 1 / -1; }

.dash-embed { aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; }
.dash-meta, .dash-stat { padding: 8px 0 0; font-size: 14px; line-height: 1.45; }
.dash-chart, .dash-table { min-height: 220px; }

/* Optional: accent links anywhere inside dashboard cards */
.dash-card a { color: var(--link); text-decoration: underline; }
.dash-card a:hover { color: var(--link-hover); }

/* ===== Dashboard Headline Strip (Spotlight/Latest + Big Deltas) ===== */

#dash-hero { margin: 16px 0 18px; }
.hero-grid {
  display: grid;
  grid-template-columns: var(--hero-left-w) 1fr;  /* left fixed, right flexible */
  gap: var(--hero-gap);
  align-items: start;
}

.hero-right {
  display: grid;
  gap: 24px;
  /* stays in column 2 (default), no grid-column span */
}

.hero-left  { position: relative; z-index: 2; }  /* videos above any backgrounds */
.hero-right { position: relative; z-index: 1; }  /* deltas below videos */

@media (max-width: 900px){
  .hero-grid { grid-template-columns: 1fr; }
  .hero-right {
    grid-column: auto;
    padding-left: 0;
  }
}

/* Make hero embeds compact (like your mockup) */
.hero-left .dash-card{
  max-width: 320px;          /* keeps the left column visually narrow */
}

.dash-embed--sm{
  height: 120px;             /* small fixed height */
  aspect-ratio: auto;        /* ignore the default 16:9 rule */
}

/* Tighten the meta text under the small embeds */
.hero-left .dash-meta{
  font-size: 12px;
  line-height: 1.35;
}

.delta-big::before {
  display: none;
}

/* Big delta panel container (no gray box; fill the column width) */
.delta-big{
  background: transparent;
  border: none;
  padding: 16px;
  position: relative;
  z-index: 1;
  width: 100%;  /* ensures centering works predictably */
}

/* Top row is your two big black times + captions (you already have this) */

/* Inline '=' + green number row: must be full width and centered */
.delta-big .row-eq{
  display: flex;
  width: 100%;                 /* <— ensures centering uses the whole card width */
  justify-content: center;     /* center the pair horizontally */
  align-items: baseline;       /* align baselines for '=' and digits */
  gap: 14px;
  margin-top: 8px;             /* space under the top row */
}

/* Make '=' visually match the green time */
.delta-big .row-eq .eq{
  font-weight: 900;
  font-size: clamp(38px, 8vw, 76px);
  color: #000;
  line-height: 1.05;
}

/* Green delta number (optionally nudged slightly lower) */
.delta-big .num.num--highlight{
  color: var(--delta-accent, #22b26c);
  font-size: clamp(38px, 8vw, 82px);  /* you currently have 82px max; keep if you like it large */
  line-height: 1.05;
  position: relative;
  top: 6px;                            /* increase to 8–10px if you want it lower */
}

/* Black times (keep or adjust the max if you want bigger) */
.delta-big .num{
  font-weight: 900;
  font-size: clamp(34px, 7vw, 54px);
  color: #000;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1.05;
}

/* Captions under each time */
.delta-big .label{
  font-weight: 800;
  font-size: 18px;          /* <-- bumped from 14px; increase to 18px if you want */
  color: #000;
  opacity: .9;
  margin-top: 4px;
  text-align: center;       /* ensure they center beneath their time */
}

/* === Vertical nudge for the two big delta panels (push them down slightly) === */
/* Adjust 6px → 4–10px by eye to match the red centerline in your mock */

#delta-ar-big{ margin-top: 70px; }
#delta-tr-big{ margin-top: 60px; }

/* On mobile (stacked), remove the extra gap to keep things tight */
@media (max-width: 900px){
  #delta-ar-big,
  #delta-tr-big{
    margin-top: 0;
  }
}

/* ===== Mobile tuning for big delta panels (fit within viewport) ===== */
@media (max-width: 900px){
  /* Keep the top row (two black times + minus) in one horizontal line */
  .delta-big .row-top{
    /* The inline style sets display/grid/columns already; we only need to trim spacing */
    gap: 8px !important;
  }

  /* Inline '=' + green number: keep on one line and tighten spacing */
  .delta-big .row-eq{
    gap: 10px;
    white-space: nowrap;   /* do not wrap across lines */
  }

  /* Scale down typography on mobile so everything fits */
  .delta-big .num{
    font-size: clamp(22px, 7.5vw, 34px);
    line-height: 1.05;
  }
  .delta-big .num.num--highlight{
    font-size: clamp(26px, 8.5vw, 40px);
    top: 4px;              /* small baseline nudge */
  }
  .delta-big .row-eq .eq{
    font-size: clamp(26px, 8.5vw, 40px);
  }
  .delta-big .label{
    font-size: clamp(13px, 3.5vw, 16px);
    margin-top: 2px;
  }

  /* Slightly tighter padding so the card breathes on small screens */
  .delta-big{
    padding: 10px;
  }
}

/* ===== Mobile re-ordering of hero strip ===== */
@media (max-width: 900px){
  /* Stack as: (1) deltas full-width, then (2) Spotlight + Latest side-by-side */
  .hero-grid{
    grid-template-columns: 1fr;  /* single column grid */
    gap: 12px;                   /* modest vertical spacing */
  }

  /* Move the right column (deltas) above the videos */
  .hero-right{
    order: -1;  /* render before .hero-left */
    transform: none !important;  /* drop any desktop centering transforms on mobile */
  }

  /* Lay out the two video cards side-by-side (Spotlight left, Latest right) */
  .hero-left{
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;  /* two equal columns */
    gap: 12px;
  }
  /* Let each small card be fluid inside the 2-col grid */
  .hero-left .dash-card{
    max-width: none; /* override the desktop 'max-width: 320px' */
  }

  /* Optional: slightly reduce the small embed height for very narrow phones */
  .dash-embed--sm{
    height: 110px;  /* you can tweak to 100–120px by eye */
  }
}

/* Keep it readable on phones (stack columns) */
@media (max-width: 900px){
  .hero-grid { grid-template-columns: 1fr; }
}

/* 3-up charts row on wide screens */
@media (min-width: 1100px) {
  .dash-row:nth-of-type(3) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Stack everything on mobile */
@media (max-width: 900px) {
  .dash-row { grid-template-columns: 1fr; }
}

/* ===== Dashboard filters + charts + table ===== */
.dash-filters {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  margin: 8px 0 14px;
}
@media (max-width: 900px) {
  .dash-filters { grid-template-columns: 1fr; }
}

/* ==== Multi-select dropdown (checkbox menu) ==== */
.ms {
  position: relative;
  display: inline-block;
  width: 100%;
}
.ms-btn {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.25;
  cursor: pointer;
  font-weight: 600;
}
.ms-btn:after {
  content: "▾";
  float: right;
  opacity: .8;
}
.ms.open .ms-btn:after { content: "▴"; }

.ms-menu {
  position: absolute;
  z-index: 900;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  padding: 8px;
  display: none;
  max-height: 320px;
  overflow: auto;
}
.ms.open .ms-menu { display: block; }

.ms-header {
  display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 6px;
}
.ms-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

/* Search field inside multi-select menus (used for Player) */
.ms-search{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0 0 6px 0;
  font-size: 14px;
}

.ms-item {
  display: flex; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.ms-item:hover { background: var(--panel); }
.ms-item input { margin: 0; }

.ms-actions {
  display: flex; gap: 8px; justify-content: space-between; margin-top: 8px;
}
.ms-actions .left { display:flex; gap:8px; }
.ms-actions .right { display:flex; gap:8px; }

@media (max-width: 900px) {
  .ms-menu {
    position: fixed;
    left: var(--container-pad);
    right: var(--container-pad);
    top: calc(var(--topbar-h) + 48px);
    max-height: 60vh;
  }
}

/* The charts row that contains the three cards should be a 3-up grid on wide screens */
@media (min-width: 1100px){
  .dash-row:has(#dash-char, #dash-machine, #dash-player){
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.filt-block { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px; }
.filt-label { font-weight: 800; font-size: 13px; margin: 0 0 6px; }
.filt-row { display: flex; gap: 6px; flex-wrap: wrap; }
.filt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; user-select: none; font-size: 13px;
}
.filt-chip input { margin: 0; }

/* Add vertical breathing room between the dropdown and its All/Clear row */
.filt-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;  /* was none; gives clear separation under the dropdown */
}

/* If you want the dropdown button itself to breathe from the label as well */
.filt-block .ms{
  margin-top: 4px;   /* optional: small gap between the label and the dropdown button */
}

/* Optional: extra room under chips rows in chart filters */
.cf-row{
  padding-bottom: 2px;
}


.btn, .btn-secondary {
  appearance: none; border-radius: 999px; padding: 6px 12px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--border); background:#fff; color:#000;
}
.btn { background: #000; color:#fff; border-color:#000; }
.btn:disabled { opacity:.6; cursor: default; }
.btn-secondary:hover, .btn:hover { filter: brightness(0.95); }

.chart { --bar-h: 26px; display:grid; gap:8px; }
.chart-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.chart-bar-wrap { background:#f1f1f1; border-radius:6px; height: var(--bar-h); overflow:hidden; }
.chart-bar { height:100%; background: var(--accent); min-width:2px; transition: width .2s ease; }
.chart-label { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chart-count { font-weight:700; font-size:12px; color:#555; }

.table-wrap { overflow:auto; }
.table-simple { width:100%; border-collapse: collapse; table-layout: auto; }
.table-simple th, .table-simple td {
  border:1px solid var(--border); padding:6px 8px; font-size: 12px; background:#fff;
}
.table-simple th { background:#000; color:#fff; position:sticky; top:0; cursor:pointer; }
.table-simple a { color:var(--link); text-decoration:none; }
.table-simple a:hover { color:var(--link-hover); text-decoration:underline; }
.sort-ind { margin-left:6px; opacity:.85; }
.info-muted { color:#777; font-size:12px; }


/* === Rider/Machine STACKED COLUMN (Search table) ===================== */

.table--search th.col--rm {
  text-align: center;
  width: 60px;
  max-width: 70px;
}
.table--search td.col--rm { padding: 4px 6px; }

/* Two small stacked rows: Rider on top, Machine below */
.table--search td.col--rm .rm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.table--search td.col--rm .rm + .rm { margin-top: 4px; }

.table--search td.col--rm .cell-icon img {
  width: 20px; height: 20px; object-fit: contain; border-radius: 4px;
}

/* <=1440px: icon-only (hide text visually), keep column tight */
@media (max-width: 1440px){
  .table--search td.col--rm .cell-text{
    position: absolute;
    width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .table--search th.col--rm,
  .table--search td.col--rm{
    width: 44px !important;
    max-width: 56px !important;
    text-align: center !important;
  }
  .table--search td.col--rm .cell-icon img{ width: 18px; height: 18px; }
}

/* Phones: trim a bit more to donate width to Cat/Subcat/Track */
@media (max-width: 900px){
  .table--search th.col--rm,
  .table--search td.col--rm{
    width: 36px !important;
    max-width: 46px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .table--search td.col--rm .cell-icon img{ width: 17px; height: 17px; }
}

/* (Keep these: IL/RT tables icon behavior – separate tables, still valid) */
@media (max-width:1440px){
  .table--il td.cell--machine.has-icon .cell-icon,
  .table--il td.cell--rider.has-icon  .cell-icon{
    display: inline-flex;
  }
  .table--il td.cell--machine.has-icon .cell-text,
  .table--il td.cell--rider.has-icon  .cell-text{
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .table--il th:nth-child(3), .table--il td:nth-child(3),
  .table--il th:nth-child(4), .table--il td:nth-child(4){
    width: 44px !important;
    max-width: 56px !important;
    text-align: center;
  }
}
@media (max-width:1440px){
  .table--rt td.cell--rider.has-icon .cell-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .table--rt td.cell--rider.has-icon .cell-text{
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .table--rt th:nth-child(3), .table--rt td:nth-child(3){
    width: 44px !important;
    max-width: 56px !important;
    text-align: center;
  }
}

/* Mobile table-fit rules to avoid horizontal scrolling */
@media (max-width: 900px){
  .table--search{
    table-layout: fixed;    /* let columns wrap as needed */
    width: 100%;
    max-width: 100vw;
  }

   .table--search th, .table--search td{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Time/Score: usually short, keep it on one line */
  .table--search th:nth-child(7),
  .table--search td:nth-child(7){
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: clip;
  }

  /* Place: single-line, narrow */
  .table--search th:nth-child(8),
  .table--search td:nth-child(8){
    white-space: nowrap !important;
  }

  /* Link + Video columns: ellipsis */
  .table--search th:nth-child(9), .table--search td:nth-child(9),
  .table--search th:nth-child(10), .table--search td:nth-child(10){
    width: 6ch;
    max-width: 15ch;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table--search td:nth-child(9) a,
  .table--search td:nth-child(10) a{
    display: block;
    width: 100%;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  }
}


/* Mini filters injected above each chart */
.chart-filters{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 6px 0 14px;   /* 10px → 14px: adds more air below the filters */
}

/* Extra insurance: add a little space before the first chart row */
#chart-rider .chart > .chart-row:first-child,
#chart-machine .chart > .chart-row:first-child,
#chart-player .chart > .chart-row:first-child{
  margin-top: 6px;      /* lifts the first label a bit */
}


/* Space between a chart's filter box and the first bar/row */
.chart-filters + .chart{
  margin-top: 10px;    /* try 10–14px by eye */
}

/* Optional: add a touch of padding inside each filter group block to lift content away from edges */
.cf-group{
  padding-bottom: 8px; /* you already have padding:6px; this adds a bit more bottom cushion */
}

@media (max-width: 900px) {
  .chart-filters { grid-template-columns: 1fr; }
}
.cf-group { background:#fff; border:1px solid var(--border); border-radius:8px; padding:6px; }
.cf-label { font-weight:800; font-size:12px; margin:0 0 4px; }
.cf-row { display:flex; gap:6px; flex-wrap:wrap; }
.cf-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 9px;
  background:var(--panel); border:1px solid var(--border); border-radius:999px; font-size:12px; cursor:pointer; }
.cf-chip input { margin:0; }
.cf-actions { display:flex; gap:6px; margin-top:6px; }

.chart-label.iconized {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chart-label.iconized img.chart-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex: 0 0 auto;
}
.chart-label.iconized .icon-fallback {
  width: 20px; height: 20px; border-radius: 50%;
  background: #ececec; color: #555;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-transform: uppercase;
}

@media (max-width:900px){.tile-grid{grid-template-columns:1fr}}

/* ===== Air Ride page header ===== */
.site-header{padding:16px 0 8px}
.site-header .brand{margin:0; font-weight:800; font-size:2rem}
.site-header .tagline{margin:6px 0 10px; color:var(--muted)}
.site-header .tagline a{color:var(--link); text-decoration:none}
.site-header .tagline a:hover{color:var(--link-hover); text-decoration:underline}

/* Full-bleed underline below cadence */
.accent--fullbleed{
  width:100vw; height:4px; background:var(--accent); border:none; margin:0;
  margin-left:calc((100vw - 100%) / -2);
  margin-right:calc((100vw - 100%) / -2);
}

/* ===== Air Ride layout (TOC + content) ===== */
.layout{display:grid; grid-template-columns:calc(var(--toc-w) - var(--toc-offset)) 1fr; gap:32px}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.sidebar{padding:8px 0; margin-left:0; transform: translateX(var(--toc-offset));}
#course-nav{position:sticky; top:calc(var(--topbar-h) + 12px); padding-right:8px}
#course-nav a{display:block; padding:6px 2px; color:var(--text); text-decoration:underline; text-decoration-color:transparent; border-bottom:2px solid transparent}
#course-nav a:hover{border-bottom-color:#999}
#course-nav a.active{border-bottom-color:var(--accent)}
/* Legacy divider (1px #c7c7c7) */
#course-nav .legacy-sep{height:1px; background:#c7c7c7; margin:6px 0}

/* === TOC section titles + indentation (desktop) === */
#course-nav .toc-title{
  font-weight: 800;
  color: var(--text);
  padding: 6px 2px;
  cursor: default;         /* not clickable */
  border-bottom: none;
}
#course-nav .toc-item{
  display: block;
  padding: 6px 2px;
}
#course-nav .toc-item.indent{ padding-left: 10px; }

/* === TOC section titles + indentation (mobile drawer) === */
.toc-drawer #course-nav-mobile .toc-title{
  font-weight: 800;
  color: var(--text);
  padding: 6px 2px;
}
.toc-drawer #course-nav-mobile .toc-item{
  display: block;
  padding: 6px 2px;
}
.toc-drawer #course-nav-mobile .toc-item.indent{ padding-left: 10px; }

/* Course sections */
.course{margin:12px 0 32px}
.anchor{position:relative; top:-80px}
.section-divider{border:none; height:2px; background:#eee; margin:18px 0}

/* ===== Course banner ===== */
.banner-wrap{position:relative; width:100%; height:100px; margin:8px 0 12px 0}
.course-banner{width:100%; height:100%; object-fit:cover; border:none; border-radius:8px}
.banner-title{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:#fff; font-weight:800; font-size:60px; letter-spacing:.02em;
  text-shadow:0 2px 6px rgba(0,0,0,.55);
}

.mini-divider{
  border: none;
  height: 1px;
  background: #e5e5e5;
  margin: 10px 0 6px;
}

/* ===== SRC tables ===== */
.tables-grid{display:grid; gap:12px; margin-top:12px; grid-template-columns:1fr 1fr}
.table-card{background:none; border:none; padding:0}
.table-card h3{margin:0 0 10px; font-size:18px; font-weight:700}

.table{
  width:100%;
  max-width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  /* 1px #c7c7c7 border and rounded corners */
  border:1px solid #c7c7c7; border-radius:8px; overflow:hidden;
}
.table th, .table td{
  border-right:1px solid var(--border);
  font-size:12px; white-space:nowrap;
}
.table th{
  background:#000; color:#fff; text-align:left; font-weight:700;
  line-height:27px; padding:4px 10px; cursor:pointer; position:relative;
}
.table th .sort-ind{position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:.9rem; color:#fff; opacity:.8}
.table td{background:#fff; color:var(--text); line-height:22px; padding:4px 10px}

/* Alternate row color #f3f3f3 */
.table tbody tr:nth-child(odd) td{background:#fff}
.table tbody tr:nth-child(even) td{background:#f3f3f3}

.table thead tr th:last-child, .table tbody tr td:last-child{border-right:none}

/* Empty state cell (centered, baseline-aligned message) */
.table td.empty{ text-align:center; padding:12px 10px; }
.table td.empty .empty-msg{
  display:inline-flex; align-items:baseline; gap:6px;
  line-height:22px;
}
.table td.empty a{ color:var(--link); text-decoration:none; }
.table td.empty a:hover{ color:var(--link-hover); text-decoration:underline; }

/* Core columns: Player / Time / Machine / Rider */
.table td:nth-child(1), .table td:nth-child(3), .table td:nth-child(4){
  overflow:visible; text-overflow:clip;
}
/* Time column: hide slight overflow */
.table td.td--time{overflow:hidden; text-overflow:clip}

/* Link columns (5–6): fixed width + ellipsis */
.table th:nth-child(5), .table td:nth-child(5),
.table th:nth-child(6), .table td:nth-child(6){ width:240px; max-width:240px; }
.table td:nth-child(5), .table td:nth-child(6){ overflow:hidden; text-overflow:ellipsis; }
.table a{
  color:var(--link); text-decoration:none; display:inline-block;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.table a:hover{color:var(--link-hover); text-decoration:underline}

/* SRC tables: Machine/Rider hybrid cells (icon + text in the DOM) */
.table td.cell--machine .cell-icon,
.table td.cell--rider  .cell-icon{
  display: none;              /* wide screens show text */
  align-items: center;
  justify-content: center;
}

.table td.cell--machine .cell-icon img,
.table td.cell--rider  .cell-icon img{
  width: 20px; height: 20px; display: block; object-fit: contain;
}


/* Desktop: 4-col Full Game tables (Player | Time | SRC | Video) */
.table--fg4 th:nth-child(3), .table--fg4 td:nth-child(3),
.table--fg4 th:nth-child(4), .table--fg4 td:nth-child(4){
  width: 240px;         /* match the look you use elsewhere for link columns */
  max-width: 240px;
}

/* Mobile behavior already covered by your .table--fg mobile rules (cols 3–4). */

/* ===== Speedrider strips (aligned grid, compact, sortable) ===== */
.table-card.wide{
  grid-column: 1 / -1;
  min-width: 0;            /* <-- allow the grid item to shrink so inner strip can scroll */
}


/* Whole strip: left header + record columns with zero gap */
.sr-strip{
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;  /* smooth scroll (macOS/iOS) */
  scrollbar-width: thin;               /* Firefox thin scrollbar */
}


/* Optional custom scrollbar for Chromium browsers */
.sr-strip::-webkit-scrollbar{ height: 8px; }
.sr-strip::-webkit-scrollbar-thumb{ background: #ccc; border-radius: 6px; }
.sr-strip::-webkit-scrollbar-track{ background: transparent; }

/* Left labels column — smaller font, tight line-height, rounded */
.sr-left{
  flex:0 0 var(--sr-left-w);
  display:grid; grid-template-rows:repeat(5,min-content); row-gap:0;
  background:#000; color:#fff; border-radius:12px;
  padding:8px;
  font-size:var(--sr-font); line-height:var(--sr-line);
}
.sr-left .sr-left-row{
  margin:0; padding:var(--sr-row-pad) 0;
  font-weight:700; display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; user-select:none; line-height:var(--sr-line);
}
.sr-left .sr-left-row .sr-sort-ind{margin-left:8px; opacity:.85;}

/* Record columns — compact width, squared edges in-between */

.sr-records{
  display: flex;
  gap: 0;
  min-width: max-content;
}
.sr-col{
  flex:0 0 var(--sr-col-w);
  display:grid; grid-template-rows:repeat(5,min-content); row-gap:0;
  background:#fff;
  border-left:1px solid var(--border);
  padding:8px;
}
.sr-col.first{border-top-left-radius:12px; border-bottom-left-radius:12px;}
.sr-col.last{border-top-right-radius:12px; border-bottom-right-radius:12px;}

/* Inner content — equal row heights to match header */
.sr-time{
  font-weight:700; font-size:var(--sr-font); margin:0;
  padding:var(--sr-row-pad) 0 0 0; /* removed red accent bar */
  line-height:var(--sr-line);
}
.sr-row{
  font-size:var(--sr-font); margin:0; padding:var(--sr-row-pad) 0;
  white-space:normal; overflow:hidden; text-overflow:ellipsis; line-height:var(--sr-line);
  display:inline-flex; align-items:center;
}
.sr-row a{
  color:var(--link); text-decoration:none; display:inline-block;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:var(--sr-line);
}
.sr-row a:hover{color:var(--link-hover); text-decoration:underline}

/* Alternating shading of record columns to echo tables */
.sr-col:nth-child(even){background:#f3f3f3}

/* Utility */
.muted{color:#777}

@media (max-width:900px){
  .hero-title--76{
    font-size:42px;   /* smaller for mobile */
    margin:12px 0;    /* optional: reduce top/bottom spacing */
  }
  .hero {
    min-height:15vh; /* 15% of viewport height */
  }
}

/* Mobile TOC controls — hidden by default on desktop */
.toc-wrap { display: none; }
.toc-drawer { display: none; }
.toc-toggle { display: none; }


@media (max-width:900px){
  /* Show mobile controls */
  .toc-wrap { display: block; }
  .toc-drawer { display: block; }

  /* Keep the toggle visible while scrolling (fixed, top controlled by --toc-top) */
  .toc-wrap{
    position: fixed;
    left: var(--container-pad);
    right: var(--container-pad);
    top: var(--toc-top);
    z-index: 950;
    background: transparent;
  }

  /* Give content room so it doesn't sit under the fixed button */
  .layout{
    margin-top: 56px;
  }

  /* Slight extra space for the Air Ride header text on mobile (both sides) */
  .container.site-header{
    padding-left:  calc(var(--container-pad) + 6px);
    padding-right: calc(var(--container-pad) + 6px);
  }

  /* Toggle button styles */
  .toc-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#fff;
    color:#000;
    font-weight:600;
    cursor:pointer;
    user-select:none;
    margin:8px 0 4px 0;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
  }

  /* Drawer (closed) — no gray line */
  .toc-drawer{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
    border:none;
    border-radius:12px;
    background:#fff;
  }

  /* Drawer (open, fixed under top bar) — 50% viewport width */
  .toc-drawer.open{
    position: fixed;
    left: var(--container-pad);
    right: auto;
    width: 50vw;
    max-width: calc(100vw - (var(--container-pad) * 2));
    top: calc(var(--topbar-h) + 48px);
    max-height: 60vh;
    overflow: hidden;
    z-index: 900;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .toc-drawer #course-nav-mobile{
    position:relative;
    top:auto;
    max-height:60vh;
    overflow:auto;
    padding:8px 12px;
    transform:none;
  }

  /* Stack course tables vertically on mobile */
  .tables-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Wide Speedrider cards still span full width */
  .table-card.wide{
    grid-column: 1 / -1;
  }

  /* Slightly tighter table typography on mobile */
  .table th, .table td{
    font-size: 11px;
    line-height: 20px;
    padding: 3px 8px;
  }

/* ===== MOBILE TABLES: FIT WITHIN VIEWPORT BY WRAPPING CONTENT ===== */

/* Use auto layout and let the table fill the container */
.table{
  table-layout: fixed;
  width: 100%;
  max-width: 100vw;
}


  /* Ensure col/colgroup do not impose widths on mobile */
  .table colgroup,
  .table col{
    display: none !important;
    width: auto !important;   /* neutralize any column sizing */
  }

/* Allow ALL cells to wrap; let the browser pick sensible column widths */
.table th, .table td{
  white-space: normal !important;
  overflow-wrap: anywhere;   /* break long words when needed */
  word-break: normal;    /* fallback */
}
/* Links: override the desktop rule that forces nowrap */
.table a{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Ensure all table headers stay single-line on mobile */
.table thead th{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important; 
}

.table thead th:nth-child(5),
.table thead th:nth-child(6){
  text-overflow: clip !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* === MOBILE: Time column must never truncate and never wrap === */
.table thead th:nth-child(2),
.table tbody td:nth-child(2),
.table td.td--time{
  /* allow Time to expand to its intrinsic single-line width */
  width: auto !important;
  max-width: none !important;

  /* keep on one line, but do NOT use ellipsis */
  white-space: nowrap !important;
  overflow: visible !important;   /* don't clip decimals */
  text-overflow: clip !important; /* explicitly no ... */
}

/* === MOBILE: Player column must never truncate and never wrap === */
.table thead th:nth-child(1),
.table tbody td:nth-child(1){
  width: 14ch !important;        /* let it take its natural width */
  max-width: 20ch !important;    /* remove any max-width constraint */
  white-space: nowrap !important;/* keep on one line */
  overflow: visible !important;  /* show full text */
  text-overflow: clip !important;/* no ellipsis */
}

/* MOBILE: limit Player and Time columns to ~10 characters */
.table th:nth-child(1), .table td:nth-child(1),  /* Player column */
.table th:nth-child(2), .table td:nth-child(2){ /* Time column */
  max-width: 18ch;           
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.table thead th:nth-child(2),
.table tbody td:nth-child(2){
  width: 12ch !important;
  max-width: 20ch !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

  /* Drop the fixed 240px width for SRC/Video columns on mobile */
  .table th:nth-child(5), .table td:nth-child(5),
  .table th:nth-child(6), .table td:nth-child(6){
    width: 6ch;
    max-width: 15ch;
    white-space: nowrap !important;
    overflow: hidden;           /* cell-level overflow for safety */
    text-overflow: ellipsis;    /* fallback if anchor styles don’t apply */
  }
  /* MOBILE: make SRC Link (col 5) and Video (col 6) single-line with ellipsis */
  .table td:nth-child(5) a,
  .table td:nth-child(6) a{
    display: block;                 /* reliable ellipsis in block */
    width: 100%;
    white-space: nowrap !important; /* override global mobile wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
  }

/* === MOBILE: Full Mode (table--fg) use cols 3–4 for SRC/Video with ellipsis === */
.table--fg th:nth-child(3), .table--fg td:nth-child(3),
.table--fg th:nth-child(4), .table--fg td:nth-child(4){
  width: 6ch;
  max-width: 15ch;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Force anchors to ellipsis inside those cells */
.table--fg td:nth-child(3) a,
.table--fg td:nth-child(4) a{
  display: block;
  width: 100%;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === MOBILE: Road Trip (.table--rt) link columns should ellipsis === */
@media (max-width:900px){

  /* Column 4 = SRC Link (Player, Time, Rider, SRC Link, Video) */
  .table--rt th:nth-child(4),
  .table--rt td:nth-child(4){
    width: 6ch;
    max-width: 15ch;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Force anchors to be single-line, block-level for reliable ellipsis */
  .table--rt td:nth-child(4) a{
    display: block;
    width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* (Optional) Do the same for Video (column 5) to keep parity */
  .table--rt th:nth-child(5),
  .table--rt td:nth-child(5){
    width: 6ch;
    max-width: 15ch;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .table--rt td:nth-child(5) a{
    display: block;
    width: 100%;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

  /* Optional: adjust for very small phones */
  @media (max-width:480px){
    .table td:nth-child(5) a,
    .table td:nth-child(6) a{
      max-width: 60vw;
    }
  }

/* Optional: if headers should stay single-line, you can comment these back in */
/* .table thead th{ white-space: nowrap !important; } */

  /* Smaller banners on mobile (about half height + half title size) */
  .banner-wrap{ height: clamp(44px, 7vw, 56px); }
  .banner-title{ font-size: clamp(24px, 5.5vw, 32px); }

  /* Mobile drawer nav: mimic desktop TOC look */
  .toc-drawer #course-nav-mobile a{
    display: block;
    padding: 6px 2px;
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: transparent;
    border-bottom: 2px solid transparent;
  }
  .toc-drawer #course-nav-mobile a:hover{ border-bottom-color: #999; }
  .toc-drawer #course-nav-mobile a.active{ border-bottom-color: var(--accent); }
  .toc-drawer #course-nav-mobile .legacy-sep{
    height: 1px; background: #c7c7c7; margin: 6px 0;
  }

  /* On mobile, hide desktop sidebar/nav */
  .sidebar{ display: none; transform:none; }
  #course-nav { display: none !important; }
}

/* Below 1440px: show icons; visually hide text but keep it accessible */
@media (max-width:1440px){
  .table--il td.cell--machine.has-icon .cell-icon,
  .table--il td.cell--rider.has-icon  .cell-icon{
    display: inline-flex;
  }

  .table--il td.cell--machine.has-icon .cell-text,
  .table--il td.cell--rider.has-icon  .cell-text{
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }

  /* Compact the Machine/Rider columns ONLY for IL tables */
  .table--il th:nth-child(3), .table--il td:nth-child(3),
  .table--il th:nth-child(4), .table--il td:nth-child(4){
    width: 44px !important;
    max-width: 56px !important;
    text-align: center;
  }
}

/* Road Trip tables: show Rider icon below 1440px (no Machine column on Road Trip) */
@media (max-width:1440px){
  .table--rt td.cell--rider.has-icon .cell-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .table--rt td.cell--rider.has-icon .cell-text{
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  /* Compact the Rider column (3rd col) for Road Trip */
  .table--rt th:nth-child(3), .table--rt td:nth-child(3){
    width: 44px !important;
    max-width: 56px !important;
    text-align: center;
  }
}

/* Accent divider that spans only the main content column */
.accent--from-content{
  border: none;
  height: 4px;
  background: var(--accent);
  margin: 12px 0;
  grid-column: 2 / -1; /* in the .layout grid: start at column 2 (content) */
}

.banner-wrap--textonly{
  height: 72px; /* same feel as image banner region */
  display:flex; align-items:center;
}
.banner-title--text{
  position: static;
  color:#000;
  text-shadow:none;
  font-weight:800;
  font-size:60px;
  letter-spacing:.02em;
}
@media (max-width:900px){
  .banner-wrap--textonly{ height: clamp(44px, 7vw, 56px); }
  .banner-title--text{ font-size: clamp(24px, 5.5vw, 32px); }
}

/* Category Extension block */
.catex-section{ margin: 18px 0 28px; }
.catex-header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin: 0 0 6px;
}
.catex-title{ margin:0; font-size:22px; font-weight:800; }
.catex-rules-title{ font-weight:800; color:#000; }
.catex-body{
  display:grid; gap:12px;
  grid-template-columns: 2fr 1fr;  /* table left, rules right */
}

.catex-title .byline{
  font-weight:800;
  font-size:.65em;
  color:#555;
  margin-left:8px;
}

.catex-table{}
.catex-rules{ font-size:14px; line-height:1.5; }
.catex-rules ul{ margin:6px 0 0 18px; }
@media (max-width:900px){
  .catex-body{ grid-template-columns: 1fr; }

  /* Mobile: show the Rules panel above the table when expanded */
  .catex-rules{ order: -1; }   /* render before the table */
  .catex-table{ order: 0; }    /* default; keep table after rules */

  /* Mobile: hide the desktop "Rules" header label to avoid duplication */
  .catex-rules-title{ display: none; }

  /* Mobile: keep Rank column compact for Amiibo + Online Checklist */
  #ce-amiibo .table th:nth-child(1),
  #ce-amiibo .table td:nth-child(1),
  #ce-online-85 .table th:nth-child(1),
  #ce-online-85 .table td:nth-child(1),
  #ce-99-air-ride .table th:nth-child(1),
  #ce-99-air-ride .table td:nth-child(1),
  #ce-99-top-ride .table th:nth-child(1),
  #ce-99-top-ride .table td:nth-child(1){
    width: 46px !important;
    max-width: 50px !important;
    text-align: center;
    white-space: nowrap !important;
  }

}
.extras-error{
  padding:.75rem 1rem; background:#fff4f4; color:#7a1c1c; border-radius:8px;
}

/* Cat-Ex: compact Rank column for Amiibo + Online Checklist */
#ce-amiibo .table th:nth-child(1),
#ce-amiibo .table td:nth-child(1),
#ce-online-85 .table th:nth-child(1),
#ce-online-85 .table td:nth-child(1),
#ce-99-air-ride .table th:nth-child(1),
#ce-99-air-ride .table td:nth-child(1),
#ce-99-top-ride .table th:nth-child(1),
#ce-99-top-ride .table td:nth-child(1){
  width: 46px;
  max-width: 50px;
  text-align: center;
}
/* Mobile: collapsible Rules */
@media (max-width:900px){
  .rules-toggle{
    appearance: none;
    border: 1px solid var(--border);
    background:#fff; color:#000;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight:700; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    margin: 6px 0;
  }
  .rules-toggle[aria-expanded="true"]::after{ content:"▴"; }
  .rules-toggle[aria-expanded="false"]::after{ content:"▾"; }

  .catex-rules.is-collapsed{ display:none; }
}

/* ===== Extras (Cat-Ex) — 99 Laps layout tweaks ===== */
/* Player (col 2) wider */
#ce-99-air-ride .table th:nth-child(2), #ce-99-air-ride .table td:nth-child(2),
#ce-99-top-ride .table th:nth-child(2), #ce-99-top-ride .table td:nth-child(2) {
  width: 22ch;
  max-width: 28ch;
}

/* Time (col 3) wider + non-wrapping */
#ce-99-air-ride .table th:nth-child(3), #ce-99-air-ride .table td:nth-child(3),
#ce-99-top-ride .table th:nth-child(3), #ce-99-top-ride .table td:nth-child(3) {
  width: 12ch;
  max-width: 14ch;
  white-space: nowrap;
}

#ce-99-air-ride .table th:nth-child(4), #ce-99-air-ride .table td:nth-child(4),
#ce-99-top-ride .table th:nth-child(4), #ce-99-top-ride .table td:nth-child(4) {
  /* Rider — shorter to free space for Machine */
  width: 16ch; max-width: 20ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Machine (col 5) narrower */
#ce-99-air-ride .table th:nth-child(5), #ce-99-air-ride .table td:nth-child(5),
#ce-99-top-ride .table th:nth-child(5), #ce-99-top-ride .table td:nth-child(5) {
  width: 16ch;
  max-width: 20ch;
}

/* Video (col 6) narrower + ellipsis */
#ce-99-air-ride .table th:nth-child(6), #ce-99-air-ride .table td:nth-child(6),
#ce-99-top-ride .table th:nth-child(6), #ce-99-top-ride .table td:nth-child(6) {
  width: 18ch;
  max-width: 20ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ce-99-air-ride .table td:nth-child(6) a,
#ce-99-top-ride .table td:nth-child(6) a {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  #ce-99-air-ride .table th:nth-child(6), #ce-99-air-ride .table td:nth-child(6),
  #ce-99-top-ride .table th:nth-child(6), #ce-99-top-ride .table td:nth-child(6) {
    max-width: 14ch;
  }
  #ce-99-air-ride .table th:nth-child(5), #ce-99-air-ride .table td:nth-child(5),
  #ce-99-top-ride .table th:nth-child(5), #ce-99-top-ride .table td:nth-child(5) {
    max-width: 10ch;
  }
}


/* === About page layout/typography helpers === */
.about-wrap{max-width:900px; margin:0 auto 28px; padding:8px 0;}
.h-xxl-i{font-size:clamp(28px,4vw,48px); font-weight:800; font-style:italic; margin:12px 0;}
.h-md-i{font-size:clamp(20px,2.6vw,28px); font-weight:800; font-style:italic; margin:18px 0 6px;}
.p-base{font-size:16px; line-height:1.65; margin:6px 0 16px;}
.about-links a{color:var(--link); text-decoration:none;}
.about-links a:hover{color:var(--link-hover); text-decoration:underline;}

/* Title + toggle above the red line */
.about-hero{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;  /* centers the title */
  min-height: 64px;
  padding-top: 10px;
}
.about-title{ margin: 12px 0; text-align:center; }

/* EN | JP toggle aligned to the right of the title */
.lang-switch{
  position:absolute;
  right:0; top:50%; transform:translateY(-50%);
  display:inline-flex; gap:8px; align-items:center;
}
.lang-switch .sep{opacity:.6}
.lang-switch button{
  border:1px solid var(--border); background:#fff; color:#000;
  padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:700;
}
.lang-switch .is-active{ background:#000; color:#fff; border-color:#000; }

/* Glossary */
.glossary { margin-top: 2rem; }
.glossary-list { margin: 0; }
.glossary-list dt { font-weight: 700; margin-top: 1rem; }
.glossary-list dd { margin: 0.25rem 0 0.5rem 0; }

/* Glossary rows */
.glossary-item {
  margin: 0.35rem 0;
  line-height: 1.45;
}

.glossary-term {
  font-weight: 700;
}

/* Roadmap checkboxes */
.roadmap{margin:4px 0 24px;}
.roadmap h3{font-size:18px; font-weight:800; margin:16px 0 8px;}
.roadmap ul{list-style:disc; padding-left:2rem; margin:8px 0 14px;}
.roadmap li{display:list-item; gap:10px; align-items:flex-start; margin:6px 0;}
.chk{
  width:18px; height:18px; border:2px solid var(--border); border-radius:4px;
  display:inline-grid; place-items:center; font-size:14px; font-weight:800; line-height:1;
  flex:0 0 18px;
}
.chk--on{background:#000; color:#fff; border-color:#000}

/* Language visibility (default EN) */
[data-lang="en"] .lang-ja{display:none;}
[data-lang="ja"] .lang-en{display:none;}

/* Stack the toggle under the title on mobile */
@media (max-width:900px){
  .about-hero{ display:block; text-align:center; }
  .lang-switch{ position:static; transform:none; margin:8px 0 0; justify-content:center; }
}

/* === About page: mobile spacing / readable margins === */
@media (max-width: 900px){
  /* Give the general container a little extra side padding on mobile */
  .page-about .container{
    padding-left: calc(var(--container-pad) + 8px);
    padding-right: calc(var(--container-pad) + 8px);
  }

  /* Title + toggle region: small breathing space */
  .page-about .about-hero{
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Main content block: keep text away from edges */
  .page-about .about-wrap{
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Roadmap lists: add a touch of left inset so checkboxes don’t touch the bezel */
  .page-about .roadmap ul{
    padding-left: 4px;
  }

  /* Make the title/toggle stack cleanly (you already have this,
     but it’s safe to keep here to ensure it applies on About too) */
  .page-about .about-hero{
    display: block;
    text-align: center;
  }
  .page-about .lang-switch{
    position: static;
    transform: none;
    margin: 8px 0 0;
    justify-content: center;
  }
}

/* === Mobile: horizontally scrollable top nav === */
@media (max-width:900px){
  /* Let the brand + nav share the row */
  .bar-inner{
    gap: 8px;                 /* slightly tighter */
  }

  /* Brand should not grow; keep its size stable */
  .brand-logo-img,
  .brand-name{
    flex: 0 0 auto;           /* do not stretch, do not shrink */
  }

  /* Make the nav a horizontal scroller with no wrapping */
  .site-nav{
    display: flex;
    flex-wrap: nowrap;        /* all links on one visual row */
    gap: 8px;                 /* small space between links */
    overflow-x: auto;         /* swipe horizontally */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;  /* smooth iOS/Android scrolling */
    scrollbar-width: none;               /* hide scrollbar (Firefox) */
    min-width: 0;             /* allow flexbox to shrink the nav area */
    white-space: nowrap;      /* belt + suspenders */
  }
  .site-nav::-webkit-scrollbar{ display: none; } /* hide scrollbar (WebKit/Chromium) */

  /* Prevent link text from wrapping or shrinking */
  .site-nav a{
    flex: 0 0 auto;           /* do not shrink */
    display: inline-block;
    padding: 8px 6px;         /* a little tighter on mobile */
    margin-left: 0;           /* your desktop rule adds margin-left; drop it here */
    white-space: nowrap;      /* ensure no wrap per anchor */
  }
}

/* ===== SEARCH TABLE HEADER LABEL SWAP (FULL vs MOBILE) ===== */

/* Desktop (default): show full labels, hide mobile labels */
.table--search th .th-label--full {
  display: inline !important;
}
.table--search th .th-label--mobile {
  display: none !important;
}

/* Mobile: hide full labels, show mobile labels */
@media (max-width: 900px){
  .table--search th .th-label--full {
    display: none !important;
  }
  .table--search th .th-label--mobile {
    display: inline !important;
  }
}

/* ---- Search table: keep Time fully visible on mobile ---- */
.table-wrap {
  overflow-x: auto;                 /* allow horizontal scroll on narrow screens */
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  /* If your base table uses table-layout: fixed; switch to auto for the search table on mobile */
  .table--search {
    table-layout: auto !important;
  }

  /* Time/Score column: never wrap or ellipsize; keep full precision visible */
  .table--search th.col--time,
  .table--search td.col--time {
    white-space: nowrap !important;    /* no wrapping */
    overflow: visible !important;      /* no clipping */
    text-overflow: clip !important;    /* no ellipsis */
    max-width: none !important;
    word-break: normal !important;

    /* align digits nicely for speedrun times */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
}


/* ===========================================================
   Search Table (Mobile ≤900px): column width priorities
   Priority: Time, Player, Track, Category, Subcategory,
             Machine, Rider, Link, Video, Place
   =========================================================== */

@media (max-width: 900px) {
  /* Allow the table to pack tighter and shrink low-priority cols */
  .table--search {
    table-layout: fixed;          /* lets width rules apply predictably */
    border-collapse: separate;    /* keep cell borders intact */
    border-spacing: 0;            /* no extra gaps */
  }

  .table-wrap {
    overflow-x: auto;             /* still allow horizontal scroll as a safety valve */
    -webkit-overflow-scrolling: touch;
  }

  /* General tightening */
  .table--search th,
  .table--search td {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* ---- Highest priority: Time ----
     - never wrap
     - no ellipsis
     - tabular digits
     - very tight horizontal padding so the border can hug the milliseconds
  */
  .table--search th.col--time,
  .table--search td.col--time {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-left: 6px;
    padding-right: 6px;
    width: 1%;               /* content-sized in fixed layout */
    min-width: 0;            /* allow tight packing */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.2px;  /* a hair tighter to fit thousandths */
  }

  /* ---- Next: Player (no wrap; show full names where possible) ---- */
  .table--search th.col--player,
  .table--search td.col--player {
    white-space: nowrap;
    text-overflow: ellipsis;   /* if we absolutely must, clip end */
    overflow: hidden;
    width: 12ch;               /* ~12 characters typical on mobile */
    min-width: 9ch;            /* never collapse below this */
  }

  /* ---- Track (allow wrap to two lines, then clip) ---- */
  .table--search th.col--track,
  .table--search td.col--track {
    width: 16ch;
    min-width: 12ch;
    display: -webkit-box;            /* 2-line clamp */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  /* ---- Category (can wrap a bit) ---- */
  .table--search th.col--cat,
  .table--search td.col--cat {
    width: 14ch;
    min-width: 10ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  /* ---- Subcategory (wrap/clip) ---- */
  .table--search th.col--subcat,
  .table--search td.col--subcat {
    width: 12ch;
    min-width: 9ch;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  /* ---- Machine, Rider (small; icons + short labels) ---- */
  .table--search th.col--machine,
  .table--search td.col--machine,
  .table--search th.col--rider,
  .table--search td.col--rider {
    width: 8ch;
    min-width: 6ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Link / Video (very small; no wrap) ---- */
  .table--search th.col--link,
  .table--search td.col--link,
  .table--search th.col--video,
  .table--search td.col--video {
    width: 6ch;
    min-width: 5ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* ---- Place (the least space) ---- */
  .table--search th.col--place,
  .table--search td.col--place {
    width: 4ch;     /* "1st" or a single digit */
    min-width: 3ch;
    white-space: nowrap;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
  }

  /* Optional: tighten header cell padding further */
  .table--search thead th {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* ===========================================================
   Mobile table tweaks (≤900px)
   - Cat/Subcat: edge-to-edge content (no inner "pill" look)
   - Player wider; Link/Video narrower
   =========================================================== */
@media (max-width: 900px) {

  /* --- Cat & Subcat: remove inner paddings/margins; let text reach edges --- */
  .table--search th.col--cat,
  .table--search td.col--cat,
  .table--search th.col--subcat,
  .table--search td.col--subcat {
    padding-left: 6px;     /* tight edge */
    padding-right: 6px;    /* tight edge */
  }

  /* If any inner blocks/pills are styled globally, neutralize them here */
  .table--search td.col--cat > *,
  .table--search td.col--subcat > * {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;       /* ensure it spans cell width */
  }

  /* Header labels: make sure the label spans the header width, no gap */
  .table--search thead th.col--cat .th-label,
  .table--search thead th.col--subcat .th-label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;           /* header already has its own padding */
  }

  /* --- Column width reprioritization --- */
  /* Time stays content-sized and non-wrapping from earlier rules */

  /* Make Player wider (steal from Link/Video) */
  .table--search th.col--player,
  .table--search td.col--player {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 16ch;     /* was ~12ch; give Player more room */
    min-width: 12ch; /* still allow shrink, but not too far */
  }

  /* Narrow Link and Video even more */
  .table--search th.col--link,
  .table--search td.col--link,
  .table--search th.col--video,
  .table--search td.col--video {
    width: 5ch;        /* tighter than before */
    min-width: 4ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding-left: 6px;
    padding-right: 6px;
  }


.table--search th.col--place,
.table--search td.col--place {
  width: 2.6ch !important;    /* just enough for “1”, “2”, “3”, or “1st” on desktop */
  min-width: 2.6ch !important; /* forces the column to give up extra room */
  text-align: center !important;
  white-space: nowrap !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}
}

/* ===========================================================
   Mobile (≤900px) – Table polish:
   - Cat/Subcat text + headers edge-to-edge
   - Narrow Link/Video further; widen Player
   =========================================================== */
@media (max-width: 900px) {

  /* --- Cat & Subcat: tight to cell edges (remove inner "pill" look) --- */
  .table--search th.col--cat,
  .table--search td.col--cat,
  .table--search th.col--subcat,
  .table--search td.col--subcat {
    padding-left: 6px;    /* minimal safe padding against border */
    padding-right: 6px;
  }

  /* If inner wrappers/pills exist, neutralize them so text reaches the edge */
  .table--search td.col--cat > *,
  .table--search td.col--subcat > * {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;                    /* span full width of cell */
  }

  /* Header labels: ensure they span to the borders (no inner gaps) */
  .table--search thead th.col--cat .th-label,
  .table--search thead th.col--subcat .th-label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* --- Player gets more space (steal from Link/Video) --- */
  .table--search th.col--player,
  .table--search td.col--player {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 18ch;          /* wider than before */
    min-width: 13ch;      /* still shrinkable if extremely tight */
  }

  /* --- Link & Video narrower (Video at least as narrow as Link) --- */
  .table--search th.col--link,
  .table--search td.col--link,
  .table--search th.col--video,
  .table--search td.col--video {
    width: 4.5ch;         /* tighter */
    min-width: 4ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    padding-left: 6px;
    padding-right: 6px;
  }

  /* If you want Video even tighter than Link, uncomment:
  .table--search th.col--video,
  .table--search td.col--video { width: 4ch; min-width: 3.5ch; }
  */


.table--search th.col--place,
.table--search td.col--place {
  width: 2.6ch !important;    /* just enough for “1”, “2”, “3”, or “1st” on desktop */
  min-width: 2.6ch !important; /* forces the column to give up extra room */
  text-align: center !important;
  white-space: nowrap !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}


  /* Keep Time pristine (from earlier rules) – reiterate tight padding */
  .table--search th.col--time,
  .table--search td.col--time {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-left: 6px;
    padding-right: 6px;
    width: 1%;                 /* content-sized in fixed layout */
    min-width: 0;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.2px;
  }
}

/* === FINAL OVERRIDES FOR SEARCH TABLE (mobile ≤900px) === */
@media (max-width: 900px) {

  /* Time: never wrap, never clip, tight padding */
  .table--search th.col--time,
  .table--search td.col--time {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    width: 1% !important;         /* content-sized in fixed layout */
    min-width: 0 !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: -0.2px;
  }

  /* Cat + Subcat: edge-to-edge, no forced width, no clamp */
  .table--search th.col--cat,
  .table--search td.col--cat,
  .table--search th.col--subcat,
  .table--search td.col--subcat {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    display: block;              /* allow the label to span full cell */
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  /* If inner wrappers exist, strip their padding/border/background */
  .table--search td.col--cat > *,
  .table--search td.col--subcat > * {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Player: widen a bit */
  .table--search th.col--player,
  .table--search td.col--player {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 18ch !important;
    min-width: 13ch !important;
  }

  /* Link + Video: tighter; Video at least as narrow as Link */
  .table--search th.col--link,
  .table--search td.col--link,
  .table--search th.col--video,
  .table--search td.col--video {
    width: 4.2ch !important;
    min-width: 3.8ch !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  /* If you want VIDEO even tighter than LINK, uncomment this:
  .table--search th.col--video, .table--search td.col--video {
    width: 4ch !important; min-width: 3.5ch !important;
  }
  */

  /* Place: keep tiny */
  .table--search th.col--place,
  .table--search td.col--place {
    width: 3.3ch !important;
    min-width: 3ch !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }


.table--search th.col--track,
.table--search td.col--track {
  width: auto !important;
  min-width: 14ch !important;   /* donate space here */
  max-width: none !important;    /* remove clamp to let it breathe */
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* keep to 2 lines for tidiness */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.table--search th.col--cat,
.table--search td.col--cat {
  width: auto !important;
  min-width: 14ch !important;    /* up from 10–12ch */
  max-width: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.table--search th.col--subcat,
.table--search td.col--subcat {
  width: auto !important;
  min-width: 11ch !important;    /* up from ~9–10ch */
  max-width: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

}

/* === Fine-tune mobile widths: give Cat more room by borrowing from Rider/Machine/Player === */
@media (max-width: 900px) {

  /* Cat: allow a bit more intrinsic width */
  .table--search th.col--cat,
  .table--search td.col--cat {
    /* still edge-to-edge from earlier; now encourage a slightly wider min */
    min-width: 14ch !important;   /* was effectively auto; this lets Cat breathe */
  }

  /* Rider & Machine: tighten a bit to donate space to Cat */
  .table--search th.col--rider,
  .table--search td.col--rider,
  .table--search th.col--machine,
  .table--search td.col--machine {
    width: 40px !important;       /* was ~44px; trim a few px */
    max-width: 50px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Player: give back a little of the earlier expansion */
  .table--search th.col--player,
  .table--search td.col--player {
    width: 16ch !important;       /* was 18ch in the last pass */
    min-width: 12ch !important;   /* keep decent visibility for most names */
  }

  /* Keep Time/Link/Video/Place as already tuned in the last block */
}

/* Center just the "Track" column header label */
@media (max-width: 900px){
  .table--search thead th.col--track {
    text-align: center !important;
  }
  /* Ensure the mobile short label also centers */
  .table--search thead th.col--track .th-label--mobile,
  .table--search thead th.col--track .th-label--full {
    display: inline-block;
    text-align: center;
    width: 100%;
  }
}

/* Center just the "Track" column HEADER on mobile */
@media (max-width: 900px){
  /* center the th itself */
  .table--search thead th.col--track {
    text-align: center !important;
  }
  /* force the header label span(s) to fill the cell and center */
  .table--search thead th.col--track .th-label--mobile,
  .table--search thead th.col--track .th-label--full {
    display: block !important;    /* beats earlier 'inline !important' */
    width: 100% !important;
    text-align: center !important;
  }
}


/* Never allow a horizontal scrollbar */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* --- Fit hero delta blocks on small phones --- */
@media (max-width: 430px) {
  /* Nudge the whole delta card in a bit */
  .delta-big {
    padding-left: 8px;
    padding-right: 8px;
  }
  /* Top row: reduce side gap a hair */
  .delta-big .row-top { gap: 6px !important; }

  /* Black times */
  .delta-big .num {
    font-size: clamp(20px, 6.2vw, 30px);   /* was ~22–34px in earlier overrides */
    line-height: 1.05;
  }

  /* The green delta row: keep on one line, make it smaller */
  .delta-big .row-eq { gap: 8px; white-space: nowrap; }
  .delta-big .row-eq .eq,
  .delta-big .num.num--highlight {
    font-size: clamp(22px, 6.8vw, 34px);   /* down from ~26–40+ */
  }
}

/* Ultra-narrow phones (≤ 380px): one step tighter */
@media (max-width: 380px) {
  .delta-big { padding-left: 6px; padding-right: 6px; }
  .delta-big .num         { font-size: clamp(18px, 5.6vw, 28px); }
  .delta-big .row-eq .eq,
  .delta-big .num.num--highlight { font-size: clamp(20px, 6.2vw, 32px); }
}

/* --- Fit the search table fully within the viewport on mobile --- */
@media (max-width: 430px) {
  /* Trim table cell padding a bit on very small devices */
  .table--search th, .table--search td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Player: shave a tiny bit */
  .table--search th.col--player,
  .table--search td.col--player {
    width: 15.5ch !important;
    min-width: 11.5ch !important;
  }

  /* Cat/Subcat: allow a touch more flexibility (prevents overflow) */
  .table--search th.col--cat,    .table--search td.col--cat    { min-width: 12.5ch !important; }
  .table--search th.col--subcat, .table--search td.col--subcat { min-width: 9.5ch  !important; }

  /* Link & Video: one more squeeze */
  .table--search th.col--link,  .table--search td.col--link,
  .table--search th.col--video, .table--search td.col--video {
    width: 3.8ch !important;
    min-width: 3.5ch !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }


.table--search th.col--place,
.table--search td.col--place {
  width: 2.6ch !important;    /* just enough for “1”, “2”, “3”, or “1st” on desktop */
  min-width: 2.6ch !important; /* forces the column to give up extra room */
  text-align: center !important;
  white-space: nowrap !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

}

/* Ultra-narrow (≤ 380px): final nudge if needed */
@media (max-width: 380px) {
  .table--search th.col--player, .table--search td.col--player { width: 15ch !important; min-width: 11ch !important; }
  .table--search th.col--link,   .table--search td.col--link,
  .table--search th.col--video,  .table--search td.col--video  { width: 3.6ch !important; min-width: 3.4ch !important; }
}

/* Force "Track" label on mobile for the Track column header */
@media (max-width: 900px){
  .table--search thead th.col--track .th-label--full   { display: none !important; }   /* hides "Track/Stadium" */
  .table--search thead th.col--track .th-label--mobile { display: inline !important; } /* shows "Track" */
}

/* === FILTER TABLE: Guarantee no right-edge clipping on phones === */
/* Target very common phone widths first */
@media (max-width: 430px) {
  /* Reduce general horizontal padding so the table “breathes” inside the viewport */
  .table--search th, .table--search td {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Player: shave a bit more */
  .table--search th.col--player, .table--search td.col--player {
    width: 15ch !important;      /* was ~15.5–16ch */
    min-width: 11ch !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Cat/Subcat: allow smaller minimums so the table can shrink fully */
  .table--search th.col--cat,    .table--search td.col--cat    { min-width: 11.5ch !important; }
  .table--search th.col--subcat, .table--search td.col--subcat { min-width: 9ch   !important; }

  /* Rider & Machine: small icon columns — trim to 36px */
  .table--search th.col--rider,   .table--search td.col--rider,
  .table--search th.col--machine, .table--search td.col--machine {
    width: 36px !important;         /* was 40–44px */
    max-width: 46px !important;
    text-align: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  /* (Optional) shrink the icon itself a touch to match narrower column) */
  .table--search td.cell--machine .cell-icon img,
  .table--search td.cell--rider  .cell-icon img { width: 18px; height: 18px; }

  /* Link & Video: one more notch tighter */
  .table--search th.col--link,  .table--search td.col--link,
  .table--search th.col--video, .table--search td.col--video {
    width: 3.5ch !important;
    min-width: 3.3ch !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  /* Place: smallest column */
  .table--search th.col--place, .table--search td.col--place {
    width: 2.8ch !important;
    min-width: 2.8ch !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Ensure the table itself never paints wider than the viewport */
  .table--search {
    width: 100% !important;
    max-width: 100vw !important;
    table-layout: fixed !important;  /* keep column widths deterministic */
  }
  /* Keep wrapper from allowing any overflow paint */
  .table-wrap {
    overflow-x: clip !important;     /* stronger than hidden in some browsers */
  }
}

/* Ultra‑narrow safeguard (Pixel 4a, older iPhones, etc.) */
@media (max-width: 380px) {
  .table--search th.col--player, .table--search td.col--player {
    width: 14.5ch !important; min-width: 10.5ch !important;
  }
  .table--search th.col--link,   .table--search td.col--link,
  .table--search th.col--video,  .table--search td.col--video  {
    width: 3.3ch !important; min-width: 3.2ch !important;
  }
  .table--search th, .table--search td {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* === TRACK HEADER: keep it centered no matter what === */
@media (max-width: 900px){
  .table--search thead th.col--track {
    text-align: center !important;
  }
  .table--search thead th.col--track .th-label--mobile,
  .table--search thead th.col--track .th-label--full {
    display: block !important;    /* beat earlier 'inline !important' swaps */
    width: 100% !important;
    text-align: center !important;
  }
}

/* Stacked Links column (mobile) + narrower Player */
@media (max-width: 900px) {
  /* Vertically stack Link and Video, one per line */
  .table--search td.col--links .links-vert {
    line-height: 1.25;
  }

/* ===== FINAL MOBILE ROW BEHAVIOR (≤900px) ===== */
@media (max-width: 900px) {

  /* 1) Let the browser redistribute width (not fixed). */
  .table--search {
    table-layout: auto !important;   /* beats any earlier 'fixed' */
    width: 100% !important;
    max-width: 100vw !important;
  }

  .table-wrap { overflow-x: clip !important; }  /* no horizontal scroll */

  /* 2) Time: one line, never clipped. */
  .table--search th.col--time,
  .table--search td.col--time {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 12.6ch !important;    /* room for 00:00:00.000 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: 0;
  }

  /* 3) Player: wrap full name (no ellipsis). */
  .table--search th.col--player,
  .table--search td.col--player {
    white-space: normal !important;   /* allow multi-line */
    overflow: visible !important;
    text-overflow: clip !important;   /* remove … */
    width: auto !important;           /* can grow when space exists */
    min-width: 9ch !important;        /* but can get fairly narrow */
    line-height: 1.25;
  }


.table--search th.col--track,
.table--search td.col--track {
  width: auto !important;
  min-width: 14ch !important;   /* donate space here */
  max-width: none !important;    /* remove clamp to let it breathe */
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* keep to 2 lines for tidiness */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.table--search th.col--cat,
.table--search td.col--cat {
  width: auto !important;
  min-width: 14ch !important;    /* up from 10–12ch */
  max-width: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.table--search th.col--subcat,
.table--search td.col--subcat {
  width: auto !important;
  min-width: 11ch !important;    /* up from ~9–10ch */
  max-width: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

  /* 5) Small/tight columns stay tiny. */
  .table--search th.col--rider,   .table--search td.col--rider,
  .table--search th.col--machine, .table--search td.col--machine {
    width: 36px !important;         /* icon columns */
    max-width: 46px !important;
    text-align: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .table--search td.cell--machine .cell-icon img,
  .table--search td.cell--rider  .cell-icon img { width: 18px; height: 18px; }

  .table--search th.col--links, .table--search td.col--links {
    width: 6ch !important;
    min-width: 5.8ch !important;
  }


.table--search th.col--place,
.table--search td.col--place {
  width: 2.6ch !important;    /* just enough for “1”, “2”, “3”, or “1st” on desktop */
  min-width: 2.6ch !important; /* forces the column to give up extra room */
  text-align: center !important;
  white-space: nowrap !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}


  /* Keep “Track” header centered. */
  .table--search thead th.col--track {
    text-align: center !important;
  }
  .table--search thead th.col--track .th-label--mobile,
  .table--search thead th.col--track .th-label--full {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* Ultra‑narrow phones (≤380px): tiny nudges only if you still see squeeze. */
@media (max-width: 380px) {
  .table--search th.col--time, .table--search td.col--time { min-width: 12.8ch !important; }
  .table--search th.col--links, .table--search td.col--links { width: 5.6ch !important; min-width: 5.4ch !important; }
}

/* --- FINAL OVERRIDE: Search table header label swap --- */

/* Desktop & wide: show full labels, hide mobile labels */
.table--search th .th-label--full   { display: inline !important; }
.table--search th .th-label--mobile { display: none   !important; }

/* Mobile (≤900px): hide full, show "short" labels */
@media (max-width: 900px){
  .table--search th .th-label--full   { display: none  !important; }
  .table--search th .th-label--mobile { display: inline !important; }
}

}

/* === FINAL HEADER-LABEL SWAP (Search table only) ===================== */
/* Desktop & wide: show full labels, hide mobile labels */
.table--search thead th .th-label--full   { display: inline !important; }
.table--search thead th .th-label--mobile { display: none   !important; }

/* Be extra explicit for the Track column, in case earlier rules leak through */
.table--search thead th.col--track .th-label--full   { display: inline !important; }
.table--search thead th.col--track .th-label--mobile { display: none   !important; }

/* Mobile (≤900px): hide full, show short labels */
@media (max-width: 900px){
  .table--search thead th .th-label--full   { display: none  !important; }
  .table--search thead th .th-label--mobile { display: inline !important; }

  /* Track-specific reinforcement */
  .table--search thead th.col--track .th-label--full   { display: none  !important; }
  .table--search thead th.col--track .th-label--mobile { display: inline !important; }
}

/* === SEARCH TABLE: desktop full labels; mobile short labels (final) === */
.table--search thead th .th-label--full   { display: inline !important; }
.table--search thead th .th-label--mobile { display: none   !important; }
@media (max-width: 900px){
  .table--search thead th .th-label--full   { display: none  !important; }
  .table--search thead th .th-label--mobile { display: inline !important; }
}

/* Track column: extra reinforcement */
.table--search thead th.col--track .th-label--full   { display: inline !important; }
.table--search thead th.col--track .th-label--mobile { display: none  !important; }
@media (max-width: 900px){
  .table--search thead th.col--track .th-label--full   { display: none  !important; }
  .table--search thead th.col--track .th-label--mobile { display: inline !important; }
}

/* Center Cat/Subcat header labels (body cells remain left by default) */
.table--search thead th.col--cat,
.table--search thead th.col--subcat {
  text-align: center !important;
}
.table--search thead th.col--cat   .th-label--full,
.table--search thead th.col--cat   .th-label--mobile,
.table--search thead th.col--subcat .th-label--full,
.table--search thead th.col--subcat .th-label--mobile {
  display: inline-block !important;
  width: 100% !important;
  text-align: center !important;
}

/* --- FINAL: Search table header labels for Cat/Subcat --- */
/* Desktop/wide: show full labels only */
.table--search thead th.col--cat    .th-label--full,
.table--search thead th.col--subcat .th-label--full { display: inline !important; }
.table--search thead th.col--cat    .th-label--mobile,
.table--search thead th.col--subcat .th-label--mobile { display: none !important; }

/* Mobile (≤900px): show short labels only */
@media (max-width: 900px){
  .table--search thead th.col--cat    .th-label--full,
  .table--search thead th.col--subcat .th-label--full { display: none !important; }
  .table--search thead th.col--cat    .th-label--mobile,
  .table--search thead th.col--subcat .th-label--mobile { display: inline !important; }
}

/* (optional) Keep Cat/Subcat headers centered */
.table--search thead th.col--cat,
.table--search thead th.col--subcat { text-align: center !important; }
.table--search thead th.col--cat .th-label--full,
.table--search thead th.col--cat .th-label--mobile,
.table--search thead th.col--subcat .th-label--full,
.table--search thead th.col--subcat .th-label--mobile {
  width: 100% !important;
  text-align: center !important;
}

/* --- GLOBAL iOS SAFARI SAFETY NET --- */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Prevent any child from extending past the right edge on iPhones */

.delta-big .row-top,
.delta-big .row-eq {
  overflow-x: hidden;
}

.site-nav {
  max-width: 100vw !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === iPhone full-bleed fixes (keep existing rules; these override them) === */
@supports (width: 100svw) {
  /* Use 'svw' (small viewport width) instead of 'vw' so Safari doesn't include
     transient UI or odd gutters that make the element a few px too wide. */

/* Replace your existing .hero--home and .accent--fullbleed rules */
.hero--home,
.accent--fullbleed {
  /* live inside the page flow at normal width */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  position: relative;
}

/* Create the true full‑bleed background using a pseudo element that
   expands only its background, not the layout width. */
.hero--home::before,
.accent--fullbleed::before {
  content: "";
  position: absolute;
  inset: 0;
  /* extend background to the viewport edges without changing layout width */
  left: calc((100vw - 100%) / -2);
  right: calc((100vw - 100%) / -2);
  z-index: -1;
  background: inherit; /* the parent already sets background image/color */
}

/* Because we moved the background to ::before, give the base a transparent bg */
.hero--home,
.accent--fullbleed {
  background: transparent;
}


/* Grid children must be allowed to shrink or long text can push the grid wider */
.hero-left, .hero-right { min-width: 0; }

/* The headline rows sometimes grow by sub-pixels on iOS. Clip at the row level. */
.delta-big, .delta-big .row-top, .delta-big .row-eq {
  overflow-x: hidden; /* supported in modern Safari; falls back to hidden-like behavior */
}

/* Desktop: nav should not scroll and should not set its own max-width */
@media (min-width: 901px) {
  .site-nav {
    max-width: none !important;
    overflow: visible !important;
  }
}

@supports (height: 1svh) {
  @media (max-width:900px){
    .hero{
      min-height: 15svh; /* more reliable than vh on mobile */
    }
  }
}

/* ============================================================
   KARs Garage – iPhone right-edge clipping hotfix
   Date: 2026‑01‑25
   Scope: iOS Safari + general cross‑browser safety
   ============================================================ */

/* 1) Do NOT globally clip the page horizontally.
   (Your full-bleed areas get handled by pseudo-elements below.) */
html, body {
  overflow-x: visible !important;
  max-width: 100%;
}

/* 2) Full-bleed hero/accent: background via ::before sized with svw,
      so the layout width itself never exceeds the page width. */
.hero--home,
.accent--fullbleed {
  position: relative;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  background: transparent; /* actual background comes from ::before */
}

.hero--home::before,
.accent--fullbleed::before {
  content: "";
  position: absolute;
  inset: 0;
  /* stretch the background to the viewport edges without affecting layout width */
  left: calc((100svw - 100%) / -2);
  right: calc((100svw - 100%) / -2);
  z-index: -1;
  background: inherit;
}

/* Fallback for engines that don't support svw yet */
@supports not (width: 100svw) {
  .hero--home::before,
  .accent--fullbleed::before {
    left: calc((100vw - 100%) / -2);
    right: calc((100vw - 100%) / -2);
  }
}

/* 3) Let grid children shrink (prevents subtle overflows on iOS). */
.hero-left, .hero-right,
.hero-grid > *, .dash-row > * {
  min-width: 0 !important;
}

/* 4) Delta rows: never clip the equals + green number line. */
.delta-big,
.delta-big .row-top,
.delta-big .row-eq {
  overflow: visible !important;   /* undo earlier hidden/clip overrides */
}

/* Keep the green line on one line on phones, but allow it to size naturally. */
@media (max-width: 900px) {
  .delta-big .row-eq { white-space: nowrap; }
}

/* 5) Search table: allow horizontal scroll on mobile instead of clipping. */
.table-wrap {
  overflow-x: auto !important;    /* was 'clip' in one of the later blocks */
  -webkit-overflow-scrolling: touch;
}

/* 6) Belt-and-suspenders: common scrollers shouldn’t force the page wider. */
.tile-carousel, .tile-belt { min-width: 0 !important; }

/* Optional tiny nudge if you still see a 1–2px gutter with iOS safe area. */
@supports (padding: env(safe-area-inset-right)) {
  body { padding-right: max(0px, env(safe-area-inset-right) - 1px); }
}

/* ============================================================
   BUGFIX 1: Extras page horizontal expansion (Android Chrome)
   Cause: a wide element inside .catex-body or .table-wrap forces
          a fractional-pixel overflow during scroll.
   Fix: force shrinkability + isolate the renderer.
   ============================================================ */

.catex-body,
.catex-table,
.catex-rules,
.table-card.wide,
.table-wrap,
.tables-grid {
  max-width: 100% !important;
  overflow-x: hidden;
  min-width: 0 !important;
  contain: content;   /* prevents the scroll-triggered expansion */
}

/* ------------------------------------------------------------
   BUGFIX 2: About page feature bullets clipped on the left
   Cause: a mobile rule earlier removed padding on UL/LI inside
          .about-wrap and .roadmap.
   Fix: restore normal list padding.
   ------------------------------------------------------------ */

.page-about ul,
.page-about li {
  padding-left: revert !important;
  margin-left: revert !important;
  list-style-position: outside !important;
}

/* Slight extra safety for bullet indent on very narrow phones */
@media (max-width: 480px) {
  .page-about ul {
    padding-left: 1.2rem !important;
  }
}

@supports (height: 1svh) {
  @media (max-width:900px){
    .hero{
      min-height: 15svh; /* more reliable than vh on mobile */
    }
  }
}