:root{
  /* optional theme hooks; change to match your global palette */
  --bg-1:#1f1f1f; --bg-2:#111; --border-1:#ffffff22; --border-2:#ffffff12;
  --fg-1:#f0f0f0; --fg-2:#bdbdbd; --accent-1:#0b91a8; --accent-2:#1660ba;
}

[hidden]{ display:none !important; }

/* Wrappers with horizontal scroll for narrow screens */
.table-wrap{ overflow-x:auto; }

/* ====== Compact table base (shared) ====== */
.iracingtracks.compact,
.racelist.compact{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-size:.95rem;
}

.iracingtracks.compact thead th,
.racelist.compact thead th{
  position:sticky; top:0; z-index:1;
  background:var(--bg-1); color:var(--fg-1);
  text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--border-1);
}

.iracingtracks.compact tbody td,
.racelist.compact tbody td{
  padding:6px 10px;
  border-bottom:1px solid var(--border-2);
  /* removed hard red text color */
}

.iracingtracks.compact tbody tr:nth-child(even) td,
.racelist.compact tbody tr:nth-child(even) td{ background:#ffffff07; }

.iracingtracks.compact tbody tr:hover td,
.racelist.compact tbody tr:hover td{ background:#ffffff12; }

.num{ text-align:right; }

/* ====== Tracks list specific ====== */
.iracingtracks .c-name { width:36%; }
.iracingtracks .c-thumb{ width:140px; }
.iracingtracks .c-num  { width:10ch; }

.track-link{ display:inline-block; }
.track-thumb{
  width:130px; height:auto; border-radius:10px; border:1px solid #222; display:block;
  transition: transform .12s ease, box-shadow .2s ease;
}
.track-thumb:hover{ transform: translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.25); }

.track-details-row td{ background:var(--bg-2); }
.track-details-container{ padding:10px 6px; }

/* Responsive (tracks table) */
@media (max-width: 900px){
  .iracingtracks .c-thumb{ width:110px; }
  .track-thumb{ width:100px; }
}
@media (max-width: 720px){
  .iracingtracks thead{ display:none; }
  .iracingtracks, .iracingtracks tbody, .iracingtracks tr, .iracingtracks td{ display:block; width:100%; }
  .iracingtracks tr{ border-bottom:1px solid var(--border-1); }
  .iracingtracks td{ display:flex; justify-content:space-between; gap:1rem; }
  .iracingtracks td::before{
    content: attr(data-label); color:var(--fg-2); font-weight:600; letter-spacing:.04em;
  }
  .track-link{ margin:6px 0; }
}

/* A little extra breathing room at page end (global also has padding) */
.iracingtracks{ margin-bottom:12px; }

/* Sort bar */
.sortbar{
  display:flex; align-items:center; gap:8px;
  margin:6px 0 8px;
}
.sortlabel{ color:var(--accent-2); font-weight:600; letter-spacing:.04em; }
.sortbtn{
  background:#ffffff10; color:var(--accent-1); border:1px solid #ffffff1a;
  padding:6px 10px; border-radius:8px; cursor:pointer; font-size:.9rem;
  transition: background .15s ease, transform .08s ease, box-shadow .08s ease;
}
.sortbtn:hover{ background:#ffffff18; transform: translateY(-1px); }
.sortbtn.is-active{ background:#ffffff22; border-color:#ffffff33; }
.sortbtn:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}

/* ====== Details page header ====== */
.track-header{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
  align-items:start;
  margin:10px 0 6px;
}
.track-photo img{
  width:100%; height:auto; border-radius:12px; border:1px solid #222; display:block;
  aspect-ratio: 4/3; object-fit:cover;
}
.track-caption{ margin-top:6px; color:var(--fg-2); font-size:.95rem; }
.track-stats{ display:flex; gap:16px; flex-wrap:wrap; }
.stat{
  background:#ffffff0e; border:1px solid #ffffff1a; border-radius:12px;
  padding:10px 14px; min-width:160px;
}
.stat-label{ color:#8cb5ff; font-weight:600; letter-spacing:.04em; margin-bottom:4px; }
.stat-value{ font-size:1.8rem; line-height:1; }

/* Sections */
.section-title{ font-size:1.2rem; margin:8px 0 6px; color:#eaeaea; }
.divider{ border:0; border-top:1px solid #ffffff1c; margin:14px 0; }

/* ====== Result tables on details page ====== */
/* already covered by the shared .racelist.compact rules */

.empty{ color:#a0a0a0; text-align:center; padding:10px; }

/* ====== Car cards ====== */
.car-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.car-card{
  background:#ffffff0c; border:1px solid #ffffff1a; border-radius:14px;
  padding:10px;
}
.car-card-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.car-name{ font-weight:700; color:#dfe8ff; }
.car-meta{ color:#9bb6ff; display:flex; gap:12px; font-size:.95rem; }
.car-toggle{
  margin-left:auto;
  background:#ffffff10; color:var(--accent-1); border:1px solid #ffffff1a;
  padding:6px 10px; border-radius:8px; cursor:pointer; font-size:.9rem;
  transition: background .15s ease, transform .08s ease, box-shadow .08s ease;
}
.car-toggle:hover{ background:#ffffff18; transform: translateY(-1px); }
.car-toggle:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}

.car-results{ margin-top:8px; }
.loading{ color:#aaa; }

/* Responsive for header block */
@media (max-width: 780px){
  .track-header{ grid-template-columns: 1fr; }
}


/* track-stats card with 30 position pills */
.stat-card{
  background:#ffffff0e; border:1px solid #ffffff1a; border-radius:12px;
  padding:12px; width:100%;
}
.card-title{
  margin:0 0 10px; font-size:1.05rem; color:#0530ec;
}

/* grid of pills: responsive, neat rows */
.pill-grid{
   display:grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr)); /* 6 per row */
  gap:8px;
}

/* single pill */
.pill{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-radius:10px;
  background:#ffffff10; border:1px solid #ffffff1a;
  font-size:.95rem;
}
.pill.has{
  background:#ffffff18; border-color:#ffffff33;
  box-shadow:0 0 0 1px #ffffff15 inset;
}
.pill-pos{ font-weight:700; color:#1f48ad; letter-spacing:.02em; }
.pill-cnt{ font-variant-numeric: tabular-nums; }

/* total line under the grid */
.pill-total{
  margin-top:10px; display:flex; gap:8px; align-items:baseline;
  color:#077735;
}

/* keep header responsive */
@media (max-width: 780px){
  .track-header{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .pill-grid{ grid-template-columns: repeat(4, minmax(80px, 1fr)); }
}
@media (max-width: 560px){
  .pill-grid{ grid-template-columns: repeat(3, minmax(80px, 1fr)); }
}


/* --- Replace your two duplicate media blocks with this single one --- */
@media (max-width: 780px){
  .track-header{ grid-template-columns: 1fr; }
}

/* --- Improve scroll feel on mobile --- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }

/* --- Track header grid: allow photo column to flex nicely --- */
.track-header{
  /* was: grid-template-columns:260px 1fr; */
  grid-template-columns: minmax(220px, 360px) 1fr;
}

/* --- Prevent long text from breaking tables when using table-layout:fixed --- */
.iracingtracks .c-name,
.racelist .c-series,
.racelist .c-car{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Focus ring when tabbing to the image link --- */
.track-link:focus-visible img{
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

/* --- Sort indicators on headers controlled by aria-sort --- */
.racelist thead th[data-sort]{
  position: relative;
  padding-right: 18px; /* space for caret */
}
.racelist thead th[aria-sort="ascending"]::after{
  content: "▲";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: .75rem; opacity: .8;
}
.racelist thead th[aria-sort="descending"]::after{
  content: "▼";
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: .75rem; opacity: .8;
}

/* --- Pill grid: you already fixed 6/row; keep responsive overrides --- */
/* no change needed */


/* === White → Brand Blue (#1784d1) overrides === */
:root{
  --brand: #1784d1;
  /* optional: align accents to brand */
  --accent-1: var(--brand);
  --accent-2: var(--brand);
}

/* headings & captions */
.page-title,
.section-title,
.track-caption { color: var(--brand); }

/* tables */
.iracingtracks.compact thead th,
.racelist.compact thead th,
.iracingtracks.compact tbody td,
.racelist.compact tbody td,
.num { color: var(--brand); }

/* cards / stats */
.car-name,
.stat-value,
.pill-cnt { color: var(--brand); }

/* keep sort carets in brand (they inherit header color) */

/* optional: muted notes that were white-ish */
.page .muted { color: var(--brand); }


/* Car results table inside cards: fix layout */
.car-results .table-wrap.in-card{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Wider than the card so columns breathe; scrolls horizontally */
.racelist.in-card{
  min-width: 780px;
  table-layout: auto;            /* allow natural widths */
  font-size: .95rem;
}

/* Turn OFF sticky header inside the small card */
.racelist.in-card thead th{
  position: static;               /* no sticky */
  background: rgba(255,255,255,0.06); /* subtle, not pure black */
  border-bottom: 1px solid var(--border-1);
}

/* Keep cells on one line; ellipsis for long names */
.racelist.in-card th,
.racelist.in-card td{
  white-space: nowrap;
}

.racelist.in-card .c-series,
.racelist.in-card .c-car{
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make sure the card doesn't clip weirdly */
.car-card{ overflow: hidden; }

/* Optional: lighten zebra hover inside cards a touch */
.racelist.in-card tbody tr:nth-child(even) td{ background: #ffffff08; }
.racelist.in-card tbody tr:hover td{ background: #ffffff12; }

/* Car list */
.car-list{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.car-list li{ margin:0; padding:0; }
.car-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:8px 10px; border-radius:10px;
  background:#ffffff10; border:1px solid #ffffff1a;
  cursor:pointer; font-size:.95rem; color:var(--brand);
  transition: background .15s ease, transform .08s ease;
}
.car-btn:hover{ background:#ffffff18; transform: translateY(-1px); }
.car-btn.is-active{ background:#ffffff22; border-color:#ffffff33; }
.car-btn .car-name{ font-weight:700; }
.car-btn .meta{ font-size:.9rem; opacity:.9; }

/* Results panel below the list */
.results-panel{
  background:#ffffff0c; border:1px solid #ffffff1a; border-radius:12px;
  padding:10px;
}
.results-panel .table-wrap.in-panel{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.results-panel .racelist thead th{ position:static; } /* no sticky headers in panel */

/* Prevent long names from wrecking layout */
.results-panel .racelist th,
.results-panel .racelist td{ white-space:nowrap; }
.results-panel .racelist .c-series,
.results-panel .racelist .c-car{
  max-width: 320px; overflow:hidden; text-overflow:ellipsis;
}

/* Softer table headers + rounded corners */
.racelist thead th{
  background: rgba(255,255,255,0.06);        /* was almost black */
  border-bottom: 1px solid var(--border-1);
}
.racelist thead th:first-child{ border-top-left-radius: 10px; }
.racelist thead th:last-child{  border-top-right-radius: 10px; }

/* Results panel styling to match chips */
.results-panel{
  background:#ffffff10;
  border:1px solid #ffffff1a;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Keep names from wrapping messily */
.racelist .c-series,
.racelist .c-car{
  max-width: 360px;           /* adjust if you like */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active car chip a bit more visible */
.car-btn.is-active{
  box-shadow: 0 0 0 2px var(--accent-2) inset;
}

/* Tiny spacing between totals */
.pill-total .sep{ margin:0 8px; opacity:.6; }

/* === Top-30 finish count: black & white theme === */
.stat-card{
  background:#fff;
  border:1px solid #000;
}

.stat-card .card-title{
  color:#000 !important;
}

.stat-card .pill{
  background:#fff;
  border:1px solid #000;
  color:#000;
}

.stat-card .pill.has{
  /* since we dropped color, make “has” stand out with a bolder border */
  border-width:2px;
  box-shadow:none;
}

.stat-card .pill-pos,
.stat-card .pill-cnt{
  color:#000 !important;
}

.stat-card .pill-total{
  color:#000 !important;
}
.stat-card .pill-total strong{
  color:#000 !important;
}
.stat-card .pill-total .sep{
  color:#000; opacity:.35;
}

/* ===== Top-5 table: cleaner layout, aligned numeric headers, neutral colors ===== */
.racelist.top5{
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;            /* keep fixed like your base tables */
  --t5-head-bg: #0d0f12;
  --t5-head-fg: #f5f7fa;
  --t5-cell-fg: #e1e3e8;
  --t5-zebra: rgba(255,255,255,.045);
  --t5-hover: rgba(255,255,255,.085);
}

/* Header look + rounded corners */
.racelist.top5 thead th{
  background: var(--t5-head-bg);
  color: var(--t5-head-fg) !important;   /* override brand-blue */
  border-bottom: 1px solid #20242a;
}
.racelist.top5 thead th:first-child{ border-top-left-radius: 12px; }
.racelist.top5 thead th:last-child{  border-top-right-radius: 12px; }

/* Body colors */
.racelist.top5 tbody td{ color: var(--t5-cell-fg) !important; }
.racelist.top5 tbody tr:nth-child(even) td{ background: var(--t5-zebra); }
.racelist.top5 tbody tr:hover td{ background: var(--t5-hover); }

/* Column alignment + sensible widths */
.racelist.top5 .c-pos,
.racelist.top5 .c-laps,
.racelist.top5 thead th.c-pos,
.racelist.top5 thead th.c-laps{
  text-align: right;
}
.racelist.top5 col.c-date { width: 18ch; }
.racelist.top5 col.c-car  { width: 26ch; }
.racelist.top5 col.c-pos  { width: 6ch; }
.racelist.top5 col.c-laps { width: 6ch; }

/* Ensure numeric cells don't inherit brand-blue */
.racelist.top5 .num{ color: var(--t5-cell-fg) !important; }

/* Prevent messy wrapping in Series/Car */
.racelist.top5 .c-series,
.racelist.top5 .c-car{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Top-5 table: darker text + wider Date */
.racelist.top5{
  --t5-cell-fg: #1d232a;              /* dark charcoal for strong contrast */
  --t5-zebra: rgba(0,0,0,.035);
  --t5-hover: rgba(0,0,0,.07);
}
.racelist.top5 tbody td,
.racelist.top5 .num { 
  color: var(--t5-cell-fg) !important;
}
/* if any cells render links, keep them dark too */
.racelist.top5 a{
  color: var(--t5-cell-fg) !important;
  text-decoration: none;
}

/* widen Date column (was ~18ch) */
.racelist.top5 col.c-date { width: 22ch; }


/* === Neutral table theme (use on Top-5 and inline results) === */
.table-neutral{
  --tbl-head-bg:#0d0f12;
  --tbl-head-fg:#f5f7fa;
  --tbl-cell-fg:#1d232a;
  --tbl-zebra: rgba(0,0,0,.035);
  --tbl-hover: rgba(0,0,0,.07);
}

/* header */
.table-neutral thead th{
  background: var(--tbl-head-bg) !important;
  color: var(--tbl-head-fg) !important;
  border-bottom: 1px solid #20242a;
}
.table-neutral thead th:first-child{ border-top-left-radius:12px; }
.table-neutral thead th:last-child{  border-top-right-radius:12px; }

/* body */
.table-neutral tbody td,
.table-neutral .num,
.table-neutral a{
  color: var(--tbl-cell-fg) !important;
}
.table-neutral tbody tr:nth-child(even) td{ background: var(--tbl-zebra); }
.table-neutral tbody tr:hover td{ background: var(--tbl-hover); }

/* right-align numeric columns */
.table-neutral .c-pos,
.table-neutral .c-laps,
.table-neutral .c-int,
.table-neutral .c-fl,
.table-neutral .c-av,
.table-neutral thead th.c-pos,
.table-neutral thead th.c-laps,
.table-neutral thead th.c-int,
.table-neutral thead th.c-fl,
.table-neutral thead th.c-av{
  text-align: right;
}