/* ============================================================
   Town Team Baseball MN — "Scoreboard Dark" brand
   Harmonized with the IG brand (instagram/brand.py DARK theme):
   near-black surfaces, amber signature accent, IBM Plex Mono numbers,
   Anton display wordmark. Keep these tokens in sync with brand.py.
   ============================================================ */

/* --- Tokens ------------------------------------------------- */
:root {
  --bg:          #0E1116;
  --surface:     #171C26;
  --surface-alt: #1E2533;
  --border:      #262E3C;
  --border-dim:  #1C232F;

  --text:        #EAEEF5;
  --text-dim:    #8B97A8;
  --text-faint:  #5C6678;

  --accent:      #FFB200;   /* amber — the single signature color */
  --accent-dim:  #9A6E0A;

  --cls-a:       #3B82F6;
  --cls-b:       #3DDC84;
  --cls-c:       #FB923C;
  --cls-x:       #64748B;

  --win:         #3DDC84;
  --loss:        #FF5C5C;
  --tie:         #8B97A8;
  --trend-up:    #3DDC84;
  --trend-down:  #FF5C5C;
  --trend-flat:  #5C6678;

  --font:        'Inter', system-ui, -apple-system, sans-serif;
  --font-display:'Anton', 'Barlow Condensed', system-ui, sans-serif;
  --font-mono:   'IBM Plex Mono', 'JetBrains Mono', 'Consolas', monospace;

  --radius:      6px;
  --radius-lg:   10px;
  --shadow:      0 2px 12px rgba(0,0,0,.45);
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout ------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none !important;
  flex-shrink: 0;
}
.logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.logo-mark {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.logo-sub {
  font-size: .72rem;
  color: var(--text-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: .15rem;
  flex: 1;
}
.nav-link {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .3rem .8rem;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
}
.nav-link:hover, .nav-link.active {
  color: var(--text);
  background: var(--border);
  text-decoration: none;
}

.header-season {
  font-size: .78rem;
  color: var(--text-faint);
  letter-spacing: .05em;
  margin-left: auto;
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem;
}

.site-footer {
  border-top: 1px solid var(--border-dim);
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: .75rem;
  color: var(--text-faint);
  margin-top: 3rem;
}
.site-footer a { color: var(--text-faint); }
.site-footer a:hover { color: var(--text-dim); }

/* --- Cards -------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-header {
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.card-title {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.card-body { padding: 1.25rem; }

/* --- Page heading ------------------------------------------ */
.page-hero {
  margin-bottom: 1.25rem;
}
.page-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.page-meta {
  font-size: .78rem;
  color: var(--text-faint);
  margin-top: .2rem;
}

/* --- Filter bar -------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem;
}

/* Class pill buttons */
.class-pills {
  display: flex;
  gap: .3rem;
}
.class-pill {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.class-pill:hover { text-decoration: none; color: var(--text); border-color: var(--text-dim); }
.class-pill.active-all { background: var(--surface-alt); color: var(--text); border-color: var(--text-dim); }
.class-pill.active-a   { background: var(--cls-a); color: #fff; border-color: var(--cls-a); }
.class-pill.active-b   { background: var(--cls-b); color: #000; border-color: var(--cls-b); }
.class-pill.active-c   { background: var(--cls-c); color: #000; border-color: var(--cls-c); }

.filter-sep { width: 1px; height: 22px; background: var(--border); }

.filter-select {
  font-size: .8rem;
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .3rem .6rem;
  cursor: pointer;
  max-width: 220px;
}
.filter-select:focus { outline: 1px solid var(--accent); }

.filter-search {
  font-size: .8rem;
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .3rem .75rem;
  width: 180px;
}
.filter-search::placeholder { color: var(--text-faint); }
.filter-search:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.filter-label {
  font-size: .75rem;
  color: var(--text-faint);
  letter-spacing: .04em;
}

/* --- Chart -------------------------------------------------- */
.chart-card {
  margin-bottom: 1.1rem;
}
.chart-wrap {
  padding: 1rem 1.25rem 1rem;
  height: 220px;
  position: relative;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* --- Standings table --------------------------------------- */
.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}

table.data-table thead th {
  padding: .55rem .9rem;
  text-align: left;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
table.data-table thead th.sortable { cursor: pointer; }
table.data-table thead th.sortable:hover { color: var(--text); }
table.data-table thead th.sortable::after { content: ' ⇅'; color: var(--text-faint); font-size: .65em; }
table.data-table thead th.sort-asc::after  { content: ' ▲'; color: var(--accent); font-size: .65em; }
table.data-table thead th.sort-desc::after { content: ' ▼'; color: var(--accent); font-size: .65em; }
table.data-table thead th.sort-asc,
table.data-table thead th.sort-desc { color: var(--text); }

table.data-table tbody tr {
  border-bottom: 1px solid var(--border-dim);
  transition: background .1s;
}
table.data-table tbody tr:hover { background: var(--surface-alt); }
table.data-table tbody tr:last-child { border-bottom: none; }

table.data-table tbody td {
  padding: .5rem .9rem;
  vertical-align: middle;
  white-space: nowrap;
}

/* Numeric columns — right-aligned, monospace */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.qrf-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text);
  font-size: .88rem;
}
td.rank-val {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  width: 2.5rem;
}

/* Team name link */
td.team-name a {
  color: var(--text);
  font-weight: 500;
}
td.team-name a:hover { color: var(--accent); text-decoration: none; }

/* League name */
td.league-name { color: var(--text-dim); font-size: .78rem; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }

/* --- Class badges ------------------------------------------ */
.cls-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  padding: .15rem .45rem;
  border-radius: 4px;
  line-height: 1;
}
.cls-a { background: rgba(59,130,246,.18); color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.cls-b { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.3); }
.cls-c { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.cls-x { background: rgba(100,116,139,.15); color: #94a3b8; border: 1px solid rgba(100,116,139,.3); }

/* --- Trend indicator --------------------------------------- */
.trend {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.trend-up   { color: var(--trend-up); }
.trend-down { color: var(--trend-down); }
.trend-flat { color: var(--trend-flat); }
.trend-arrow { font-size: .8rem; }
.trend-delta { font-size: .7rem; opacity: .8; }

/* --- Provisional QRF (< 7 games played) -------------------- */
td.qrf-provisional {
  color: var(--text-faint) !important;
  font-weight: 400 !important;
}
td.qrf-provisional .qrf-tilde {
  font-size: .75rem;
  margin-right: .1rem;
  opacity: .7;
}
tr.provisional-row td.team-name a { color: var(--text-dim); }
tr.provisional-row:hover td.team-name a { color: var(--accent); }

.provisional-legend {
  font-size: .72rem;
  color: var(--text-faint);
  padding: .6rem 1rem;
  border-top: 1px solid var(--border-dim);
}

/* --- Result badges ----------------------------------------- */
.result-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  width: 1.6rem;
  text-align: center;
  padding: .15rem 0;
  border-radius: 3px;
}
.result-w { background: rgba(34,197,94,.15); color: #86efac; }
.result-l { background: rgba(239,68,68,.15); color: #fca5a5; }
.result-t { background: rgba(148,163,184,.12); color: #94a3b8; }

/* Score display */
.score { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: .8rem; }

/* --- Team detail page -------------------------------------- */
.team-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.team-hero-left { flex: 1; min-width: 0; }

.team-hero-name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.15;
}
.team-hero-meta {
  margin-top: .4rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.team-hero-meta .sep { color: var(--border); }

.team-stats-row {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.stat-block { text-align: right; }
.stat-label {
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
}
.stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat-value.rank-val-hero { font-size: 1.35rem; color: var(--text-dim); }

/* Record display: 8-6-0 */
.stat-value.record { letter-spacing: .02em; }

/* --- QRF rank chip ----------------------------------------- */
.qrf-rank-chip {
  display: inline-block;
  background: rgba(255,178,0,.14);
  border: 1px solid rgba(255,178,0,.32);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 20px;
  letter-spacing: .04em;
}

/* --- Sparkline / history chart ----------------------------- */
.history-chart-wrap { height: 180px; padding: .75rem 1rem .5rem; }

/* --- Schedule table ---------------------------------------- */
td.contrib-val {
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  color: var(--text-dim);
}
td.contrib-val.positive { color: #86efac; }
td.contrib-val.negative { color: #fca5a5; }

/* --- Utility ----------------------------------------------- */
.text-dim   { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }
.text-right { text-align: right; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.no-data {
  padding: 2.5rem;
  text-align: center;
  color: var(--text-faint);
  font-size: .85rem;
}

/* --- Scrollbar -------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* --- Brand typography (harmonized with IG) ----------------- */
/* Anton wordmark, matching the IG brand lockup */
.logo-mark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;          /* Anton is a single heavy weight */
  letter-spacing: .03em;
}
.page-title,
.team-hero-name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .005em;
}
/* IBM Plex Mono for all tabular figures, matching IG stat cards */
td.qrf-val, td.rank-val, td.num, th.num,
.stat-value, .score, td.contrib-val, .trend, .qrf-rank-chip {
  font-family: var(--font-mono);
}

/* --- Responsive ------------------------------------------- */
.team-league-sub { display: none; }   /* desktop: league has its own column */
.tr-m { display: none; }               /* desktop: trend has its own column */

/* Team schedule: align each column's header with its data — center the badge
   columns (Class, Res), right-align Score — so headers don't read as offset. */
#schedule-table th:nth-child(3), #schedule-table td:nth-child(3),
#schedule-table th:nth-child(4), #schedule-table td:nth-child(4) { text-align: center; }
#schedule-table th:nth-child(5), #schedule-table td:nth-child(5) { text-align: right; }

@media (max-width: 768px) {
  html { font-size: 14.5px; }
  .header-inner { padding: 0 .9rem; gap: .75rem; }
  .logo-sub { display: none; }                 /* keep the header compact */
  main { padding: 1rem .85rem; }
  .page-title { font-size: 1.2rem; }

  /* Filter bar: full-width search/select, bigger tap targets, drop separators */
  .filter-sep { display: none; }
  .filter-search, .filter-select { flex: 1 1 100%; min-width: 0; font-size: 16px; } /* 16px stops iOS zoom-on-focus */
  .filter-search { padding: .55rem .7rem; }
  .class-pill { padding: .45rem .75rem; font-size: .8rem; }   /* ~44px tap height */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
  /* Stack the hero: name + meta on top (full width), stats row below. */
  .team-hero { padding: 1.1rem; flex-direction: column; gap: 1rem; }
  .team-hero-name { font-size: 1.4rem; }
  .stat-value { font-size: 1.2rem; }
  .team-stats-row { width: 100%; gap: 1.75rem; }
  .stat-block { text-align: left; }
  .cls-badge, .qrf-rank-chip { white-space: nowrap; }   /* never break "Class C" / "Rank #4" */
  .team-hero-meta .sep { display: none; }                /* no orphaned "/" when it wraps */
}

@media (max-width: 560px) {
  /* Standings on a phone: keep only the essentials so TTRF + Trend always fit —
     # · Team (record + league as a subline) · TTRF · Trend. */
  /* Fixed layout so the team name wraps in its own lane instead of pushing TTRF
     off the right edge; column widths come from the (visible) header cells. */
  table.data-table { font-size: .82rem; width: 100%; table-layout: fixed; }
  table.data-table th, table.data-table td { padding: .55rem .4rem; }
  #standings-table td:nth-child(9), #standings-table th:nth-child(9) { white-space: nowrap; }
  /* Hide League(3), W(5), L(6), T(7), PCT(8), Trend(10) — header AND cells.
     Trend moves inline next to TTRF (.tr-m). Visible: # · Team · Class · TTRF. */
  #standings-table thead th:nth-child(3),  #standings-table tbody td:nth-child(3),
  #standings-table thead th:nth-child(5),  #standings-table tbody td:nth-child(5),
  #standings-table thead th:nth-child(6),  #standings-table tbody td:nth-child(6),
  #standings-table thead th:nth-child(7),  #standings-table tbody td:nth-child(7),
  #standings-table thead th:nth-child(8),  #standings-table tbody td:nth-child(8),
  #standings-table thead th:nth-child(10), #standings-table tbody td:nth-child(10) {
    display: none;
  }
  /* Keep a narrow, centered Class badge column between Team and TTRF. */
  #standings-table th:nth-child(4), #standings-table td:nth-child(4) { width: 2.7rem; text-align: center; }
  .team-name a { white-space: normal; font-size: .92rem; }
  .team-league-sub {
    display: block;
    font-size: .7rem; color: var(--text-faint);
    text-transform: none; letter-spacing: 0; margin-top: .15rem;
  }
  .tr-m { display: inline-block; font-size: .6rem; margin-left: .3rem; vertical-align: middle; }

  /* Team page schedule table: Date (MM-DD-YY) · Opponent · Class · Res · Score.
     Fixed layout + a narrow date column keep all five columns fitting on a phone
     (opponent Class shows whether wins came vs strong/soft teams). */
  #schedule-table { width: 100%; table-layout: fixed; }
  #schedule-table th, #schedule-table td { padding: .5rem .3rem; }
  #schedule-table th:nth-child(1), #schedule-table td:nth-child(1) { width: 4.2rem; white-space: nowrap; } /* Date */
  #schedule-table th:nth-child(3), #schedule-table td:nth-child(3) { width: 2.4rem; }                     /* Class */
  #schedule-table th:nth-child(4), #schedule-table td:nth-child(4) { width: 2.6rem; }                     /* Res */
  #schedule-table th:nth-child(5), #schedule-table td:nth-child(5) { width: 3.4rem; }                     /* Score */
}