/* ============================================================
   Alt Tennis Rankings — app stylesheet.
   Bold-navy DARK theme built on the Playasport tokens (brand.css).
   Loaded AFTER brand.css, so the :root block here overrides the
   design system's light-surface semantic aliases for dark mode.
   ============================================================ */

:root {
  /* --- dark-theme semantic overrides --- */
  --surface-page:   var(--navy-900);
  --surface-card:   var(--navy-800);
  --surface-raised: var(--navy-700);
  --surface-header: #00131f;          /* a touch deeper than navy-900 */
  --text-strong:    var(--neutral-0);
  --text-body:      var(--navy-100);
  --text-muted:     var(--navy-200);
  --text-subtle:    var(--navy-300);
  --text-link:      var(--sky-300);
  --border-subtle:  var(--navy-700);
  --border-default: var(--navy-600);

  /* app accents */
  --lime:  var(--green-400);
  --up:    var(--green-400);
  --down:  var(--danger-solid);
  --row-hover: color-mix(in srgb, var(--green-400) 9%, transparent);
}

body {
  color: var(--text-body);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(51,164,221,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 0%, rgba(197,226,70,0.06), transparent 55%),
    var(--surface-page);
  min-height: 100vh;
}

.wrap { max-width: var(--container-lg); margin: 0 auto; padding: 0 var(--gutter); }

/* headings — Fredoka, lime */
h1, h2, h3 { color: var(--lime); }
h2 {
  font-size: var(--text-xl);
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: var(--space-2);
  margin: var(--space-6) 0 var(--space-3);
}
h2 .muted { color: var(--text-muted); font-weight: var(--weight-medium); }

a { color: var(--text-link); }
a:hover { color: var(--lime); }

/* ============ header / nav ============ */
header.site {
  background: var(--surface-header);
  border-bottom: 1px solid var(--navy-700);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--space-4); }

.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--neutral-0); }
.brand:hover { text-decoration: none; }
.brand .ball { width: 34px; height: 34px; flex: none; display: block; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.brand .lockup { display: flex; flex-direction: column; line-height: 1; }
.brand .wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--neutral-0);
}
.brand .wordmark .a { color: var(--lime); }
.brand .tagline {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--navy-200);
  margin-top: 3px;
}

/* Tour switcher — a compact <details> pop-down that flips between the women's and
   men's rankings. margin-left:auto pushes it (and the nav after it) to the right, so
   it sits right before "Rankings" on desktop while staying in the header bar — not the
   drawer — on mobile (it's a sibling of the nav, kept left of the mobile hamburger). */
.tourpick { position: relative; margin-left: auto; }
.tourpick > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); background: var(--surface-raised);
  color: var(--neutral-0);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.tourpick > summary::-webkit-details-marker { display: none; }
.tourpick > summary::after { content: '▾'; color: var(--lime); font-size: .9em; line-height: 1; }
.tourpick[open] > summary::after { content: '▴'; }
.tourpick > summary:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
.tourmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  display: flex; flex-direction: column; min-width: 148px; padding: 4px; gap: 2px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-card); box-shadow: var(--shadow-md);
}
.tourmenu a {
  padding: 8px 10px; border-radius: var(--radius-sm); border-bottom: 0;
  color: var(--navy-100); font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.tourmenu a:hover { background: var(--row-hover); color: var(--neutral-0); text-decoration: none; }
.tourmenu a.on { color: var(--neutral-0); background: color-mix(in srgb, var(--lime) 14%, transparent); }

header nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* Hamburger — hidden on desktop; only shown at mobile widths when JS is active
   (see the .js-scoped rule in the 768px block). */
.navtoggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  padding: 0; background: none; border: 0; cursor: pointer;
}
.navtoggle:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); border-radius: var(--radius-sm); }
.navtoggle-bars, .navtoggle-bars::before, .navtoggle-bars::after {
  content: ''; display: block;
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--lime);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.navtoggle-bars { position: relative; }
.navtoggle-bars::before { position: absolute; top: -6px; }
.navtoggle-bars::after  { position: absolute; top:  6px; }
/* Open state morphs the icon into an X. */
header.site.open .navtoggle-bars { background: transparent; }
header.site.open .navtoggle-bars::before { transform: translateY(6px) rotate(45deg); }
header.site.open .navtoggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Horizontal-scroll container for wide data tables (injected around each
   table.rank by the shared footer script). Takes over the card chrome so the
   inner table can distribute columns naturally and scroll sideways. */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-3) 0 var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.tablewrap > table.rank { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
header nav a {
  color: var(--navy-100);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
header nav a:hover { color: var(--neutral-0); text-decoration: none; }
header nav a.on { color: var(--neutral-0); border-bottom-color: var(--lime); }
/* Secondary link (Home) — a light ghost pill so it doesn't compete with the lime CTA. */
header nav a.navext {
  color: var(--navy-100); font-weight: var(--weight-semibold);
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
header nav a.navext:hover { color: var(--neutral-0); background: var(--surface-raised); border-color: var(--border-strong); }
/* Primary app CTA in the nav — the single lime pill. */
header nav a.appcta {
  color: var(--navy-900); background: var(--lime);
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-weight: var(--weight-bold); border-bottom: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
header nav a.appcta:hover { background: var(--green-300); color: var(--navy-900); }

/* home promo callout for the Playasport Tennis app */
.appbanner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(100deg, var(--navy-700), var(--navy-800));
  border: 1px solid var(--navy-600); border-left: 4px solid var(--lime);
  border-radius: var(--radius-md);
}
.appbanner p { margin: 0; color: var(--navy-100); font-size: var(--text-sm); }
.appbanner p strong { color: var(--neutral-0); }
.appbtn {
  flex: none; white-space: nowrap;
  color: var(--navy-900); background: var(--lime);
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-weight: var(--weight-bold); font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.appbtn:hover { background: var(--green-300); color: var(--navy-900); text-decoration: none; }

main { min-height: 62vh; padding-bottom: var(--space-9); }

/* ============ page head + controls ============ */
.pagehead { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
h1 { font-size: var(--text-3xl); }
.asof { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--weight-regular); }
.lede { font-size: var(--text-lg); color: var(--text-body); max-width: 64ch; }
.subhead { margin: var(--space-1) 0 var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.subhead a { color: var(--lime); font-weight: var(--weight-semibold); white-space: nowrap; }

.dateform { margin: 0; }
.dateform label { font-family: var(--font-body); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); }
.dateform select {
  font: var(--weight-medium) var(--text-sm)/1 var(--font-mono);
  color: var(--neutral-0);
  padding: 0 var(--space-3); height: var(--control-h-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.dateform select:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); border-color: var(--focus-ring); }
.back { display: inline-block; margin: var(--space-4) 0 var(--space-1); font-size: var(--text-sm); }

/* ============ tables ============ */
table.rank {
  width: 100%; border-collapse: collapse; margin: var(--space-3) 0 var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
table.rank th, table.rank td { padding: var(--space-3) var(--space-3); text-align: center; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
table.rank thead th {
  background: var(--navy-700);
  font-family: var(--font-body);
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--navy-100); font-weight: var(--weight-bold);
}
table.rank thead th small { color: var(--navy-200); font-weight: var(--weight-regular); }
table.rank thead th.sortable { cursor: pointer; user-select: none; }
table.rank thead th.sortable:hover { color: var(--navy-50, #fff); }
table.rank thead th.sortable:focus-visible { outline: 2px solid var(--navy-200); outline-offset: -2px; }
table.rank thead th.sortable::after { content: '\2195'; margin-left: .35em; opacity: .35; font-size: .9em; }
table.rank thead th.sortable[aria-sort=ascending]::after { content: '\2191'; opacity: 1; }
table.rank thead th.sortable[aria-sort=descending]::after { content: '\2193'; opacity: 1; }
table.rank td.l, table.rank th.l { text-align: left; }
table.rank tbody tr:last-child td { border-bottom: 0; }
table.rank tbody tr:hover { background: var(--row-hover); }

/* numbers in tabular mono */
table.rank td, .tabnum, .rk, .pts, .asof, .mathline, .bigpts, .card b { font-variant-numeric: tabular-nums; }
.rk { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--neutral-0); }
.pts { font-family: var(--font-mono); font-weight: var(--weight-bold); color: var(--neutral-0); }
table.rank td.muted, .muted { color: var(--text-muted); }

table.small th, table.small td { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
table.bonus, table.small.bonus { max-width: 360px; }

.up { color: var(--up); font-weight: var(--weight-bold); }
.down { color: var(--down); font-weight: var(--weight-bold); }

/* ============ movers strip ============ */
.movers {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin: var(--space-4) 0;
}
.movers h2 { border: 0; margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--lime); }
.movers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-5); }
.movers li { font-size: var(--text-sm); }
.movers .mv { margin: 0 .3ch; }

/* ============ player page ============ */
.phead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-bottom: 2px solid var(--lime); padding-bottom: var(--space-3); margin-top: var(--space-2); }
.phead .sub { margin: var(--space-1) 0; color: var(--text-body); }
.bigpts { font-family: var(--font-mono); font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: 1; text-align: right; color: var(--neutral-0); }
.bigpts span { display: block; font-family: var(--font-body); font-size: var(--text-2xs); text-transform: uppercase; color: var(--text-muted); letter-spacing: var(--tracking-caps); margin-top: var(--space-1); }

.cards { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; }
.card {
  flex: 1; min-width: 120px; text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
}
.card b { display: block; font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--neutral-0); }
.card span { font-size: var(--text-2xs); text-transform: uppercase; color: var(--text-muted); letter-spacing: var(--tracking-wide); }

.mathline { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--text-body); }
.mathline strong { color: var(--neutral-0); }
.split .bar { display: flex; height: 16px; border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--border-subtle); max-width: 480px; }
.bar .base { background: var(--navy-300); }
.bar .bonus { background: var(--lime); }

tr.bestwin { background: color-mix(in srgb, var(--green-400) 12%, transparent); }
.star { color: var(--lime); font-size: var(--text-xs); font-weight: var(--weight-bold); }

/* ============ tier badges ============ */
.tier { display: inline-block; padding: .12em .6em; border-radius: var(--radius-xs); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: .02em; }
.tGS     { background: var(--neutral-0);  color: var(--navy-900); }
.tFinals { background: var(--yellow-400); color: var(--navy-900); }
.t1000   { background: var(--green-400);  color: var(--navy-900); }
.t500    { background: var(--sky-400);    color: var(--navy-900); }
.t250    { background: var(--navy-300);   color: var(--navy-900); }
.t125    { background: var(--navy-600);   color: var(--navy-100); }

/* ============ concept / two-col (methodology, diffs) ============ */
.concept { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.card2 { flex: 1; min-width: 240px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--lime); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4); }
.card2 h3 { font-size: var(--text-lg); color: var(--lime); }
.twocol { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.twocol > section { flex: 1; min-width: 300px; }

.empty { padding: var(--space-8); text-align: center; color: var(--text-muted); }

footer.wrap { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); margin-top: var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }
footer.wrap .disclaimer { font-size: var(--text-xs); color: var(--text-subtle); margin-top: var(--space-2); }

/* ---- Nav collapses to a hamburger drawer on tablet/phone widths ---- */
/* Collapse to the hamburger drawer below 1024px: the full nav (brand + tagline +
   tour toggle + 3 links + 2 pills) only fits on one line at ~1024px and up; narrower
   than that it wrapped awkwardly, so the drawer takes over. */
@media (max-width: 1023px) {
  .js .navtoggle { display: inline-flex; }

  /* Off-canvas drawer, fixed to the viewport (not the header) so page scroll
     never drags it. z-index below the sticky header (10) so the top bar +
     hamburger stay tappable to close. */
  .js .sitenav {
    position: fixed; top: 64px; right: 0;
    height: calc(100dvh - 64px);
    width: min(78vw, 320px);
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    gap: var(--space-2); padding: var(--space-4);
    background: var(--surface-header);
    border-left: 1px solid var(--navy-700);
    box-shadow: -8px 0 24px rgba(0, 0, 0, .4);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-fast) var(--ease-out);
    z-index: 9;
  }
  .js header.site.open .sitenav { transform: translateX(0); }

  .js .navscrim {
    position: fixed; inset: 64px 0 0 0;
    background: rgba(0, 0, 0, .5);
    z-index: 8;
  }

  /* Full-width, comfortably tappable rows inside the drawer. */
  .js .sitenav a { display: block; padding: var(--space-3); min-height: 44px; border-bottom: 0; }
  .js .sitenav a.on { border-left: 3px solid var(--lime); }
  .js .sitenav a.navext,
  .js .sitenav a.appcta { text-align: center; margin-top: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) {
  .js .sitenav { transition: none; }
}

/* ---- Phone spacing / typography ---- */
@media (max-width: 600px) {
  h1 { font-size: var(--text-2xl); }
  /* Keep nowrap (single-line cells scan + sort better); just shrink padding so
     there's less to scroll inside .tablewrap. */
  table.rank th, table.rank td { padding: var(--space-2); font-size: var(--text-sm); }
  .pagehead { gap: var(--space-2); }
  .movers ul { gap: var(--space-3); }
  .appbanner { flex-direction: column; align-items: flex-start; }
  .phead { flex-direction: column; align-items: flex-start; }
  .bigpts { text-align: left; }
}