/* ============================================================
   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(--space-5); }

/* 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;
}

header nav { display: flex; gap: var(--space-5); }
header nav a {
  color: var(--navy-100);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  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); }
/* app CTA in the nav — lime pill */
header nav a.appcta {
  color: var(--navy-900); background: var(--lime);
  padding: 6px 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 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); }

@media (max-width: 560px) {
  .bigpts { text-align: left; }
  .phead { flex-direction: column; align-items: flex-start; }
  header nav { gap: var(--space-4); }
}