/* VB Fantasy — vanilla CSS, custom-property theming (dark default + light override). */

/* The `hidden` attribute must always hide, even on elements whose class sets a `display`
   (e.g. #auth-modal is `.modal-backdrop { display: flex }` + `hidden`). Author `display`
   rules otherwise beat the UA `[hidden] { display: none }`, leaving an invisible full-screen
   backdrop that swallows all clicks. This global rule restores the expected behavior. */
[hidden] { display: none !important; }

:root {
  --bg: #14161a;
  --bg-elev: #1c1f26;
  --bg-elev2: #242832;
  --border: #2e333e;
  --text: #e7e9ee;
  --text-dim: #9aa2b1;
  --accent: #e8622c;
  --accent-dim: #b64a1f;
  --good: #4fb477;
  --bad: #d1596b;
  --row-hover: #262b35;
  --shadow: 0 8px 28px rgba(0,0,0,.45);
  --radius: 10px;
}
:root[data-theme="light"] {
  --bg: #f5f6f8;
  --bg-elev: #ffffff;
  --bg-elev2: #eef0f4;
  --border: #d9dde4;
  --text: #1a1d23;
  --text-dim: #63697a;
  --accent: #d9531e;
  --accent-dim: #b64a1f;
  --good: #2f8f56;
  --bad: #c23a51;
  --row-hover: #eef1f6;
  --shadow: 0 8px 28px rgba(20,30,50,.12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.brand img { display: block; }
.brand .wordmark { display: inline; }        /* keep "V" tight against "Ballr" — no flex gap */
.brand .wordmark .v { color: var(--accent); }

.search { position: relative; flex: 1 1 auto; max-width: 420px; }
.search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-elev2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
}
.search input:focus { outline: none; border-color: var(--accent); }
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 30;
}
.search-results .group-label {
  padding: 6px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dim);
  background: var(--bg-elev2);
  position: sticky;
  top: 0;
}
.search-results .item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.search-results .item:hover, .search-results .item.active { background: var(--row-hover); }
.search-results .item .sub { color: var(--text-dim); font-size: 12px; }
.search-results .empty { padding: 12px; color: var(--text-dim); }

.controls { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-dim); }
.field span { text-transform: uppercase; letter-spacing: .5px; }
select, .field select {
  background: var(--bg-elev2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 13px;
}
select:focus { outline: none; border-color: var(--accent); }
.icon-btn {
  background: var(--bg-elev2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.icon-btn:hover { border-color: var(--accent); }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  overflow-x: auto;
}
.tabs button {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 11px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---- View ---- */
.view { flex: 1 1 auto; overflow-y: auto; padding: 18px; }
.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.view-head h1 { font-size: 20px; margin: 0; flex: 0 0 auto; }
.view-head .spacer { flex: 1 1 auto; }
/* Team detail heading: short name on top, full institution name beneath. */
.team-title { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.team-title h1 { font-size: 20px; margin: 0; }
.team-title .team-fullname { font-size: 13px; font-weight: 400; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-title {
  padding: 12px 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-title .badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-elev2);
  padding: 2px 8px;
  border-radius: 20px;
}
/* Small AVCA/RPI-style segmented toggle used in card titles (e.g. Quality wins). */
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.seg-btn {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font: inherit; font-size: 12px; font-weight: 600; padding: 3px 12px; line-height: 1.4;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--accent); color: #fff; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: center; width: 44px; color: var(--text-dim); }
th.l, td.l { text-align: left; }
thead th {
  position: sticky;
  top: 0;
  background: var(--bg-elev2);
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  z-index: 1;
  cursor: default;
}
thead th.sortable { cursor: pointer; }
thead th.sortable:hover { color: var(--text); }
thead th.sorted::after { content: " ▾"; color: var(--accent); }
tbody tr { border-top: 1px solid var(--border); }
tbody tr:hover { background: var(--row-hover); }
td.num { font-variant-numeric: tabular-nums; }
/* Compact per-category leaderboards: fixed layout so every category lines up column-for-column. */
/* Leaderboard cards flow into as many content-width columns as the screen allows, so a narrow
   leader table no longer leaves a full-width card mostly empty. */
.leader-grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.leader-grid > .card { margin-top: 0; width: max-content; max-width: 100%; }

/* Fix every column so rank·player·team·value line up column-for-column across categories; the
   table's intrinsic width then sizes each card. */
.mini-leader { table-layout: fixed; width: 100%; max-width: 580px; }
.mini-leader .c-rank { width: 44px; }
.mini-leader .c-player { width: 246px; }
.mini-leader .c-team { width: 200px; }
.mini-leader .c-val { width: 90px; }
.mini-leader td.l { overflow: hidden; text-overflow: ellipsis; }
.link { color: var(--accent); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.pos-tag {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-elev2);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}
.pos { color: var(--good); }
.neg { color: var(--bad); }

/* ---- Wide horizontally-scrolling table (team detail) ---- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wide-table { min-width: max-content; }
.wide-table th.sticky-col, .wide-table td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  min-width: 170px;
  width: auto;
  background: var(--bg-elev);
  box-shadow: 1px 0 0 var(--border);
}
.wide-table thead th.sticky-col { z-index: 3; background: var(--bg-elev2); }
tbody tr:hover td.sticky-col { background: var(--row-hover); }
.wide-table tbody tr.total-row td { font-weight: 700; border-top: 2px solid var(--border); }
.wide-table tbody tr.total-row td.sticky-col { background: var(--bg-elev2); }

/* ---- Generic frozen leading columns (standings: Team/GP/W/L). Sticky `left` offsets are
       measured and applied per column in JS (mountStickyColsTable). ---- */
.wide-table th.frozen-col, .wide-table td.frozen-col {
  position: sticky;
  z-index: 2;
  background: var(--bg-elev);
}
.wide-table th.frozen-col.frozen-last, .wide-table td.frozen-col.frozen-last {
  box-shadow: 1px 0 0 var(--border);
}
.wide-table thead th.frozen-col { z-index: 3; background: var(--bg-elev2); }
.wide-table tbody tr:hover td.frozen-col { background: var(--row-hover); }

/* ---- Stat/Fantasy leaders: freeze Rank + Player when the table scrolls horizontally ---- */
.leader-table th.c-rank, .leader-table td.c-rank,
.leader-table th.c-player, .leader-table td.c-player {
  position: sticky;
  z-index: 2;
  background: var(--bg-elev);
}
.leader-table th.c-rank, .leader-table td.c-rank { left: 0; }
.leader-table th.c-player, .leader-table td.c-player {
  left: 44px;  /* precise offset set in JS (mountLeaderTable) to match the rank column width */
  box-shadow: 1px 0 0 var(--border);
}
.leader-table thead th.c-rank, .leader-table thead th.c-player {
  z-index: 3;
  background: var(--bg-elev2);
}
.leader-table tbody tr:hover td.c-rank,
.leader-table tbody tr:hover td.c-player { background: var(--row-hover); }

/* ---- Fit-to-window boards (Stat Leaders, Fantasy): the table scrolls vertically inside a
       window-sized box (sticky header + frozen rank/player columns stay put) instead of growing
       the page. ---- */
.fit-scroll { overflow: auto; max-height: calc(100vh - 260px); }
.pager {
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 0 2px;
}
.pager-info { font-size: 13px; color: var(--text-dim); min-width: 90px; text-align: center; }
.pager .btn[disabled] { opacity: .45; pointer-events: none; }
.table-search { min-width: 220px; }
input.table-search {
  background: var(--bg-elev2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 13px;
}
input.table-search:focus { outline: none; border-color: var(--accent); }

/* ---- Conference group ---- */
.conf-group { margin-bottom: 18px; }

/* ---- Compare slots ---- */
.compare-slots { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.compare-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  flex: 0 1 230px;
  min-width: 200px;
}
.compare-card.add { border-style: dashed; }
.compare-card-name { font-weight: 700; margin-bottom: 2px; padding-right: 18px; }
.compare-card-sub { font-size: 12px; }
.compare-statlist { margin-top: 10px; display: flex; flex-direction: column; }
.compare-stat {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; padding: 4px 0; border-top: 1px solid var(--border);
}
.compare-stat:first-child { border-top: none; }
.compare-stat .k { color: var(--text-dim); }
.compare-stat .v { font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-remove {
  position: absolute; top: 6px; right: 9px;
  background: none; border: none; color: var(--text-dim);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.compare-remove:hover { color: var(--bad); }
.compare-search {
  width: 100%; margin-top: 8px;
  background: var(--bg-elev2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 6px 8px; font-size: 13px;
}
.compare-search:focus { outline: none; border-color: var(--accent); }
.compare-results { margin-top: 6px; display: flex; flex-direction: column; }
.compare-result {
  padding: 6px 8px; cursor: pointer; border-radius: 6px;
  display: flex; justify-content: space-between; gap: 8px;
}
.compare-result:hover { background: var(--row-hover); }
.compare-result .sub { color: var(--text-dim); font-size: 12px; }

/* ---- Fantasy weights panel ---- */
.weights {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px;
}
.weights label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-dim); }
.weights input {
  background: var(--bg-elev2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 7px;
  font-size: 13px;
}
.weights input:focus { outline: none; border-color: var(--accent); }
.weights-actions { padding: 0 14px 14px; display: flex; gap: 10px; }
.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.btn:hover { background: var(--accent-dim); }
.btn.ghost { background: var(--bg-elev2); color: var(--text); border: 1px solid var(--border); }

details.weights-wrap { margin-bottom: 16px; }
details.weights-wrap > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  list-style: none;
}
details.weights-wrap[open] > summary { border-radius: var(--radius) var(--radius) 0 0; }
details.weights-wrap > summary::-webkit-details-marker { display: none; }
details.weights-wrap > summary::before { content: "⚙"; }
/* Right-side chevron signalling the panel is collapsible; rotates down when open. */
details.weights-wrap > summary::after {
  content: "▸"; margin-left: auto; font-size: 18px; line-height: 1;
  color: var(--text-dim); transition: transform .15s;
}
details.weights-wrap[open] > summary::after { transform: rotate(90deg); }
details.weights-wrap > summary:hover::after { color: var(--text); }
details.weights-wrap .panel {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-elev);
}

/* ---- Player detail ---- */
.player-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 6px;
}
.player-head h1 { margin: 0; font-size: 24px; }
.player-head .meta { color: var(--text-dim); font-size: 14px; }
.statline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.stat-box {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.stat-box .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); }
.stat-box .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-box .v.fp { color: var(--accent); }

.back-link { margin-bottom: 12px; }

/* ---- misc ---- */
.muted { color: var(--text-dim); }
.center { text-align: center; }
.empty-state { padding: 48px; text-align: center; color: var(--text-dim); }
.spinner { padding: 48px; text-align: center; color: var(--text-dim); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-elev2); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px; font-size: 13px;
}
.chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; }
.chip button:hover { color: var(--bad); }

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
}
.toast.err { border-color: var(--bad); }

@media (max-width: 720px) {
  .controls .field span { display: none; }
  .brand span { display: none; }

  /* The topbar was too crowded to see the search box (brand + search + season + theme + auth all on
     one line). Wrap it: row 1 keeps the compact brand + controls, and the search drops to its own
     full-width row 2 so it's always usable. The season picker also moves into the user dropdown when
     signed in (see placeSeasonPicker), trimming row 1 further. */
  .topbar { gap: 10px; padding: 8px 12px; flex-wrap: wrap; }
  .search { order: 3; flex: 1 1 100%; max-width: none; }
  .controls { gap: 8px; }
  .tabs { padding: 0 6px; }
  .tabs button { padding: 11px 10px; font-size: 13px; }
  .view { padding: 12px; }
  .view-head h1 { font-size: 18px; }

  /* Wide data tables scroll sideways within their card instead of clipping (card keeps its
     rounded corners; only the x-axis becomes scrollable, so the sticky header still works). */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { padding: 7px 9px; }
  th:first-child, td:first-child { width: 32px; }

  /* Chat uses nearly the full width on a phone. */
  .ask-turn { max-width: 94%; }
  .ask-card { padding: 12px; }

  /* iOS auto-zooms when a focused form control's font-size is < 16px, and the zoomed layout
     then overflows the viewport. Bump text-entry controls to 16px on small screens to stop it
     (these selectors match/override the smaller per-control sizes set above). */
  .search input, select, .field select, .ask-input, .compare-search,
  .weights input, .secret-input, input[type="number"] {
    font-size: 16px;
  }
}

/* ==================== Accounts / favorites / admin / ask ==================== */

/* --- header auth area + user menu --- */
.auth-area { display: flex; align-items: center; }
.user-menu { position: relative; }
.user-btn { display: inline-flex; align-items: center; gap: 6px; }
.admin-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: var(--accent); color: #fff; border-radius: 6px; padding: 1px 5px;
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px; z-index: 40;
}
.menu-item {
  display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text);
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.menu-item:hover { background: var(--row-hover); }

/* Season picker tucked into the user dropdown on mobile (see placeSeasonPicker). Empty on desktop,
   where the picker stays in the topbar — collapse it so it leaves no gap. */
.season-slot:empty { display: none; }
.season-slot { padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.season-slot .field { gap: 4px; }
.season-slot .field select { width: 100%; }

/* --- email verification banner --- */
.verify-banner {
  background: var(--bg-elev2); border-bottom: 1px solid var(--accent);
  color: var(--text); padding: 8px 18px; text-align: center; font-size: 13px;
}
.link-btn {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font-weight: 600; text-decoration: underline; font-size: inherit; padding: 0;
}
.link-btn.danger { color: var(--bad); }

/* --- favorite stars --- */
.fav-star {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font-size: 15px; line-height: 1; padding: 0 6px 0 0; vertical-align: middle;
}
.fav-star:hover { color: var(--accent); }
.fav-star.on { color: #f2b705; }
td.is-fav .link { font-weight: 600; }
.fav-btn.on { border-color: #f2b705; color: #f2b705; }

/* --- favorites tab --- */
/* Favorites: glanceable cards with an adaptive stat headline + last/next game. */
.fav-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 12px; }
.fav-card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
}
.fav-card .fav-star { position: absolute; top: 8px; right: 10px; font-size: 20px; padding: 0; }
.fav-card-head { display: flex; align-items: center; gap: 10px; padding-right: 26px; }
.fav-card-logo { width: 34px; height: 34px; object-fit: contain; flex: none; }
.fav-card-title { display: flex; flex-direction: column; min-width: 0; }
.fav-card-title .name-row { display: flex; align-items: center; gap: 6px; }
.fav-card-title .name { font-weight: 700; font-size: 15px; }
.fav-card-title .name-row .pos-tag { margin-left: 0; }
.fav-card-title .sub { font-size: 12px; }
.fav-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.fav-mini .box { background: var(--bg-elev2); border-radius: 8px; padding: 8px 10px; }
.fav-mini .box .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fav-mini .box .v.accent { color: var(--accent); }
.fav-mini .box .k { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); }
.fav-last { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--text-dim); }
.fav-last b { color: var(--text); font-weight: 600; }
.fav-last .result { font-weight: 700; }
.fav-last.clickable { cursor: pointer; }
.fav-last.clickable:hover b { color: var(--accent); }

/* --- Ask box --- */
.ask-card { padding: 16px; }
.ask-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-elev2); border: 1px solid var(--border); border-radius: var(--radius);
  /* Explicit 16px (not `font: inherit`) so iOS never auto-zooms on focus — the shorthand would
     reset font-size back to the sub-16px inherited value and defeat the anti-zoom media query. */
  color: var(--text); padding: 10px 12px; font-family: inherit; font-size: 16px; line-height: 1.4;
  resize: none; overflow-y: hidden;
}
.ask-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ask-examples { display: flex; gap: 6px; flex-wrap: wrap; }
.ask-examples .chip { cursor: pointer; border: 1px solid var(--border); }
/* "More" popover of grouped example questions, anchored to its chip and opening upward. */
.ask-more { position: relative; display: inline-flex; }
.chip-more { font-weight: 600; }
.ask-more-panel {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40;
  width: min(92vw, 440px); max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-elev2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.ask-more-group { display: flex; flex-direction: column; gap: 6px; }
.ask-more-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.ask-more-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-answer { margin-top: 14px; }
.ask-text { white-space: pre-wrap; line-height: 1.55; }
.ask-tools { margin-top: 6px; font-size: 12px; }
/* Full-height chat layout: the Ask view fills the window, the transcript grows to fill,
   and the input row stays pinned at the bottom (chat-app style). */
.view.view-ask { display: flex; flex-direction: column; overflow: hidden; }
.view.view-ask .view-head { flex: 0 0 auto; }
.view.view-ask .ask-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.view.view-ask .ask-transcript { flex: 1 1 auto; max-height: none; }
/* Only the transcript flexes; keep the textarea + actions at their natural size so a long
   conversation can't squash the input row (flex items default to flex-shrink:1). */
.view.view-ask .ask-input, .view.view-ask .ask-actions { flex: 0 0 auto; }

/* chat transcript (single ongoing thread) */
.ask-transcript {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 52vh; overflow-y: auto; margin-bottom: 12px; min-height: 0;
}
.ask-hint { padding: 8px 2px; }
.ask-turn { display: flex; flex-direction: column; max-width: 88%; }
.ask-turn.user { align-self: flex-end; align-items: flex-end; }
.ask-turn.assistant { align-self: flex-start; align-items: flex-start; }
.ask-bubble {
  padding: 9px 13px; border-radius: 14px; line-height: 1.5; white-space: pre-wrap;
  border: 1px solid var(--border);
}
.ask-turn.user .ask-bubble { background: var(--accent); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.ask-turn.assistant .ask-bubble { background: var(--bg-elev2); color: var(--text); border-bottom-left-radius: 4px; }
.chip {
  background: var(--bg-elev2); border-radius: 999px; padding: 4px 12px; font-size: 12px;
  color: var(--text); border: 1px solid var(--border); cursor: default;
}

/* --- admin --- */
.admin-settings { padding: 12px; display: flex; flex-direction: column; gap: 16px; }
.secret-row { display: flex; flex-direction: column; gap: 6px; }
.secret-label { font-weight: 600; }
.secret-hint { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.secret-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.secret-input {
  flex: 1 1 240px; background: var(--bg-elev2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); padding: 7px 10px; font: inherit;
}
.secret-status { font-size: 12px; font-weight: 600; }
.secret-status.on { color: var(--good); }
.secret-status.off { color: var(--text-dim); }
.btn.danger { color: var(--bad); border-color: var(--bad); }

/* --- modal (auth / account) --- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); width: 100%; max-width: 400px; padding: 20px;
  max-height: 90vh; overflow-y: auto;
}
/* Wider modal for settings-style screens (e.g. the fantasy weights grid needs room). */
.modal.modal-lg { max-width: 720px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-foot { margin-top: 16px; text-align: center; font-size: 13px; }
.modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.toggle-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.toggle-row input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.auth-form h3 { margin: 8px 0 0; font-size: 14px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field span { font-size: 12px; color: var(--text-dim); }
.form-field input {
  background: var(--bg-elev2); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); padding: 9px 11px; font: inherit;
}
.btn.primary { background: var(--accent); }
.btn.wide { width: 100%; padding: 10px; }
.form-err { color: var(--bad); font-size: 13px; }
.forgot-link { align-self: flex-end; font-size: 12px; margin-top: -6px; }
.or-sep { text-align: center; color: var(--text-dim); font-size: 12px; margin: 14px 0 10px; }
.pk-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pk-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--bg-elev2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px;
}
.pk-row .muted { margin-left: auto; }
.verify-ok { color: var(--good); font-size: 16px; font-weight: 600; margin-bottom: 14px; }

/* ---------- Team detail: info + coach card ---------- */
/* Lives in a table's card-title bar, pushed to the right so it sits with the table header. */
.table-hint { margin-left: auto; font-size: 12px; font-weight: 400; white-space: nowrap; }
.team-info { margin-bottom: 24px; }        /* breathing room before the scope filters */
.filters.team-scope { margin-bottom: 14px; }   /* space under the scope picker, before the tables */
.team-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.team-title h1 { font-size: 22px; margin: 0; }
.team-info-grid { display: flex; gap: 18px; align-items: center; }
.team-logo-lg { height: 104px; width: 104px; object-fit: contain; flex: 0 0 auto; }
.team-info-main { flex: 1 1 auto; min-width: 0; }
.team-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.fact-value { font-size: 15px; font-weight: 600; color: var(--text); }
.team-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.btn-link {
  display: inline-block; padding: 6px 12px; font-size: 13px; text-decoration: none;
  color: var(--text); background: var(--bg-elev2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.btn-link:hover { border-color: var(--accent); color: var(--accent); }
.team-coach {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.coach-name { font-size: 15px; font-weight: 600; }
.coach-meta { font-size: 13px; }

/* ==================== Games: scoreboard, box score, team schedule ==================== */

/* Date picker inherits the select look so the Games controls line up with the week dropdown. */
input[type="date"] {
  background: var(--bg-elev2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 6px 8px; font-size: 13px;
}

/* --- scoreboard (Games tab) --- */
.games-filters { margin-bottom: 14px; }   /* breathing room under the week picker */
.game-list { display: flex; flex-direction: column; }
/* Collapsible day cards on the Games scoreboard (each toggles independently). */
.day-card > summary { cursor: pointer; list-style: none; }
.day-card > summary::-webkit-details-marker { display: none; }
.day-summary::after {
  content: "▸"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--text-dim);
  padding-left: 6px; transition: transform .15s;
}
.day-summary:hover::after { color: var(--text); }
.day-card[open] > .day-summary::after { transform: rotate(90deg); }
.day-card:not([open]) > .day-summary { border-bottom: none; }

.game-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 6px; border-top: 1px solid var(--border);
}
.game-list .game-row:first-child { border-top: none; }
.game-row.clickable { cursor: pointer; border-radius: 6px; }
.game-row.clickable:hover { background: var(--row-hover); }
.game-teams { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.game-team { display: flex; align-items: center; gap: 7px; min-width: 0; }
.game-team .win { font-weight: 700; }
.game-logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
/* Stat-leaders team cell: logo + short name inline (mirrors the NCAA stat pages). */
.team-cell .leader-logo { width: 20px; height: 20px; object-fit: contain; flex: none;
  vertical-align: middle; margin-right: 6px; }
.game-teams .at { font-size: 12px; }
.game-result { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.game-score { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-sets { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.game-time { font-size: 13px; white-space: nowrap; }
.sched-opp .fav-star, .game-team .fav-star { flex: none; }

/* --- top-25 vs top-25 "ranked matchup" pill (scoreboard) --- */
.matchup-badge {
  flex: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
  line-height: 1; padding: 3px 6px; border-radius: 5px; white-space: nowrap;
  color: #fff; background: var(--accent);
}
/* Static (non-clickable) favorite marker on the scoreboard — gold ★, distinct from the Top 25 badge. */
.fav-mark { flex: none; color: #f2b705; font-size: 13px; line-height: 1; }
.game-team.is-fav .link, .game-team.is-fav > span:last-child { font-weight: 700; }

/* --- AVCA Coaches Poll rank chip --- */
.rank-chip {
  flex: none; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1; padding: 2px 5px; border-radius: 5px; white-space: nowrap; margin-left: 5px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.gh-name .rank-chip { margin-left: 5px; vertical-align: middle; }

/* Informational tag for opponents with no D1 team record (D2/D3/NAIA) — muted, not celebratory. */
.nd1-tag {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  line-height: 1; padding: 2px 5px; border-radius: 5px; white-space: nowrap; margin-left: 5px;
  color: var(--text-dim); background: color-mix(in srgb, var(--text-dim) 14%, transparent);
}

/* --- box-score header --- */
.game-header .gh-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  margin: 6px 0 4px;
}
.gh-team { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gh-name { font-size: 15px; font-weight: 600; }
.gh-sets { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.gh-team.win .gh-sets { color: var(--accent); }
.gh-vs { font-size: 14px; }
.line-score { min-width: max-content; margin-top: 8px; }
.line-score th, .line-score td { text-align: center; padding: 4px 10px; }
.line-score td.l, .line-score th.l { text-align: left; }

/* --- team schedule & results (collapsible sections) --- */
.sched-subhead {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim);
  margin: 12px 0 4px;
}
.sched-section > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
}
.sched-section > summary::-webkit-details-marker { display: none; }
.sched-section > summary::before {
  content: "▸"; font-size: 14px; line-height: 1; color: var(--text-dim); transition: transform .15s;
}
.sched-section[open] > summary::before { transform: rotate(90deg); }
.sched-count { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sched-list { display: flex; flex-direction: column; }
.sched-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-top: 1px solid var(--border);
}
.sched-list .sched-row:first-child { border-top: none; }
.sched-row.clickable { cursor: pointer; border-radius: 6px; }
.sched-row.clickable:hover { background: var(--row-hover); }
.sched-date { font-size: 13px; min-width: 92px; flex: none; }
.sched-opp { flex: 1; min-width: 0; }
.sched-logo { width: 20px; height: 20px; object-fit: contain; flex: none; vertical-align: middle; margin: 0 6px 0 2px; }
.sched-time { font-size: 13px; }
.sched-sets { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.sched-score { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 34px; text-align: right; }
.result { font-weight: 800; width: 18px; text-align: center; flex: none; }
.result.win { color: var(--good); }
.result.loss { color: var(--bad); }