/* ==========================================================================
   NBA Attendance Tracker — shared stylesheet.

   Structure, component classes, the sortable table.lb pattern, and the mobile
   card fallback are lifted from the sibling nba-polymarket tracker so this
   reads as the same family of tools; the color tokens are the polymarket light
   theme, fetched from that repo and mirrored exactly. Under the 860px
   breakpoint, table.lb hides and its sortableTable()-generated .cards fallback
   takes over — same data, one column of cards instead of a wide table.
   ========================================================================== */

:root{
  --bg:#f5f5f7;--surface:#fff;--surface-hover:#f0f0f2;--border:#d1d1d6;
  --text:#1d1d1f;--text-secondary:#6e6e73;--accent:#3b82f6;--accent-dim:rgba(59,130,246,.15);
  --green:#1d8a40;--green-dim:rgba(52,199,89,.16);--green-bar:#34c759;
  --red:#d12c2c;--red-dim:rgba(239,68,68,.13);--red-bar:#ef4444;
  --orange:#b26b00;--orange-dim:rgba(245,158,11,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:112%}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
.container{max-width:1400px;margin:0 auto;padding:1.5rem 1.5rem 4rem}
.container.narrow{max-width:1100px}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* nav / tabs (both the <a> nav and the in-page tab buttons share this look) */
.tabs{display:flex;gap:.3rem;margin-bottom:1.1rem;flex-wrap:wrap}
.tabs a,.tabs button{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;padding:.45rem .85rem;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-secondary);
  cursor:pointer;transition:.12s;text-decoration:none}
.tabs a:hover,.tabs button:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.tabs a.active,.tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* header */
.hdr{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.35rem;flex-wrap:wrap}
.hdr h1{font-size:1.45rem;font-weight:700;letter-spacing:-.03em}
.subtitle{color:var(--text-secondary);font-size:.9rem;margin-bottom:1.25rem;max-width:62rem}

/* section blocks */
.block{margin-bottom:1.6rem}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.6rem;flex-wrap:wrap}
.block-head h2{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.block-head .sub{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.05em}
.explainer{color:var(--text-secondary);font-size:.84rem;margin-bottom:.9rem;max-width:60rem}
.explainer .pos{color:var(--green);font-weight:600}.explainer .neg{color:var(--red);font-weight:600}

/* segmented toggle */
.toggle{display:inline-flex;gap:.3rem;flex-wrap:wrap}
.toggle button{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;padding:.4rem .8rem;
  border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:.12s}
.toggle button:hover{border-color:var(--accent);color:var(--accent)}
.toggle button.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

/* "Show all N →" — appears once a list's qualifying rows exceed the default
   50-row cap (sortableTable's LIST_PAGE_SIZE), below both the desktop table
   and the mobile card fallback since they always render the same subset. */
.show-all-btn{display:block;width:100%;margin-top:.7rem;font-family:'JetBrains Mono',monospace;
  font-size:.74rem;font-weight:600;color:var(--accent);background:var(--surface);
  border:1px solid var(--border);border-radius:8px;padding:.6rem 1rem;cursor:pointer;text-align:center}
.show-all-btn:hover{border-color:var(--accent);background:var(--surface-hover)}

/* table */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow-x:auto}
table.lb{width:100%;border-collapse:collapse;font-size:.86rem}
table.lb thead th{background:var(--surface-hover);color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:.04em;font-size:.64rem;font-weight:600;padding:.7rem .6rem;text-align:right;
  border-bottom:1px solid var(--border);white-space:nowrap;user-select:none;transition:color .15s;position:sticky;top:0}
table.lb thead th.sortable{cursor:pointer}
table.lb thead th.sortable:hover{color:var(--accent)}
table.lb thead th.sorted-by{background:var(--accent-dim);color:var(--accent);font-weight:700}
table.lb thead th.left{text-align:left}
table.lb thead th .arr{font-size:.6rem;opacity:.8;margin-left:.15rem}
table.lb tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
table.lb tbody tr[data-href]{cursor:pointer}
table.lb tbody tr:last-child{border-bottom:none}
table.lb tbody tr:hover{background:var(--surface-hover)}
table.lb td{padding:.5rem .6rem;text-align:right;font-family:'JetBrains Mono',monospace;font-weight:500;white-space:nowrap}
table.lb td.sorted-by{background:rgba(59,130,246,.06)}
table.lb td.name{text-align:left;font-family:'DM Sans',sans-serif;font-weight:600;white-space:nowrap}
table.lb td.rank{color:var(--text-secondary);font-size:.78rem;width:2.2rem;text-align:right}
table.lb td.name a{color:var(--text)}
table.lb td.name a:hover{color:var(--accent)}
table.lb td.sub{color:var(--text-secondary)}
.delta{font-weight:600}
.delta.pos{color:var(--green)}.delta.neg{color:var(--red)}.delta.flat{color:var(--text-secondary)}
.dash{color:var(--text-secondary)}
.pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--text-secondary);
  border:1px solid var(--border);border-radius:20px;padding:.05rem .5rem;text-transform:capitalize;margin-left:.4rem;vertical-align:middle}

/* mobile card fallback for table.lb — built generically by sortableTable() from
   the same cols, so every table gets one automatically. Hidden on desktop; swaps
   in for .table-wrap under the 860px breakpoint (nba-polymarket's pattern). */
.cards{display:none}
.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:.7rem .85rem;margin-bottom:.55rem;min-width:0;transition:border-color .12s}
.card[data-href]{cursor:pointer}
.card:hover{border-color:var(--accent)}
.card:last-child{margin-bottom:0}
.card.no-home{background:rgba(0,0,0,.045)}
.card-title{font-family:'DM Sans',sans-serif;font-weight:600;font-size:.92rem;color:var(--text);
  margin-bottom:.45rem;line-height:1.3;overflow-wrap:break-word}
.card-title a{color:var(--text)}
/* Names/values wrap to a second line instead of ellipsis-truncating — a
   truncated "Little Caesar…" loses information a static card can't recover
   (no hover tooltip on touch). A 2-column (or wider) grid needs a minimum
   column width generous enough that even a single long word ("Philadelphia",
   12 characters) wraps at a space, not mid-word — auto-fit drops to a single
   column by itself once the container can't fit two columns at that minimum,
   rather than cramming two columns too narrow to hold one word. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.45rem .7rem}
.card-stat{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.card-stat .card-lbl{font-family:'JetBrains Mono',monospace;font-size:.56rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.05em}
.card-stat .card-val{font-family:'JetBrains Mono',monospace;font-size:.86rem;font-weight:600;
  overflow-wrap:break-word}
table.lb thead th.rank{width:2.2rem}

/* "you might also like" related-entity footer: always-visible responsive
   card grid (not gated behind the mobile breakpoint like the .cards table
   fallback above — there's no companion desktop table for this section). */
.cards.always{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.7rem}
.cards.always .card{margin-bottom:0}

/* ---------- compact ranked-list rows (opts.ranked) ----------
   Simple ranked lists (frontpage boxes, all-time draw kings, "Most Points"-
   style mini leaderboards) were the worst offender for label-heavy bloat: a
   bordered block per row with the field label repeated every time. This is a
   single bordered list — one thin divider per row, a slim uppercase header
   row establishes what each value column means ONCE, then every row is just
   rank + name + right-aligned values. Sizing matches nba-polymarket's
   .card-foot pattern (measured at 390px: label .58rem, value/row text .74rem,
   name/title .92rem) rather than inventing new numbers. */
.rlist{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:.1rem .8rem;margin-bottom:.6rem;min-width:0}
/* flex-wrap here is the actual fix for mid-word breaks: .rname gets a min-width
   generous enough for one long name/word, so when a long name AND several
   value columns can't all fit on one line, .rvals (flex:0 0 auto, no shrink)
   drops to a line of its own — pushed flush right by margin-left:auto — a
   two-line row, rather than .rname being squeezed until a word inside it
   breaks. This is the "drop to single-column before mid-word wrap" rule. */
.rrow{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;row-gap:.1rem;
  padding:.5rem 0;border-bottom:1px solid var(--border);min-width:0}
.rrow:last-child{border-bottom:none}
.rrow[data-href]{cursor:pointer}
.rrow:hover{background:var(--surface-hover)}
.rrank{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-secondary);
  flex-shrink:0;width:1.3rem;text-align:right}
.rname{flex:1 1 auto;min-width:9rem;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.86rem;
  color:var(--text);line-height:1.25}
.rname a{color:var(--text)}
/* value cells can hold text (a city name), not just numbers. flex:0 0 auto (no
   shrink, no grow) plus the parent row's flex-wrap is what lets the whole
   value group move to its own line instead of being crushed into one that's
   too narrow for either the name or the values to wrap safely. */
.rvals{display:flex;gap:.7rem;flex:0 0 auto;margin-left:auto;justify-content:flex-end}
.rval{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:600;text-align:right}
.rrow-head{padding:.4rem 0 .35rem;border-bottom:1px solid var(--border)}
.rrow-head .rval{font-size:.58rem;color:var(--text-secondary);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600}

/* self-labeling rows (games/mean_delta/total_delta lists, e.g. all-time draw
   kings): no header row, so each row is a genuine 2-line stack instead of a
   single flex line — rank+name on top, then a plain-language second line
   ("+255,027 total extra fans (+498/g · 512 g)") that carries its own label,
   the same inline pattern the arena stat-card sub-line already uses. */
.rrow-self{display:block}
.rrow-top{display:flex;align-items:baseline;gap:.6rem}
.rrow-top .rname{min-width:0}
.rrow-meta{margin-top:.2rem;padding-left:1.9rem;font-family:'JetBrains Mono',monospace;
  font-size:.78rem;color:var(--text);overflow-wrap:break-word}
.rsecondary{color:var(--text-secondary);font-size:.72rem;font-weight:500}
/* line-1 context for entity-keyed self-label rows (e.g. Road legends: arena
   name is the row's identity, city disambiguates it) — same treatment as
   the .rrow-meta secondary text, just inline after the name instead of on
   its own line. */
.rsub{color:var(--text-secondary);font-weight:500;font-size:.78rem}

/* stat cards (detail pages) — each is a genuinely distinct stat type, so these
   keep their own labeled card, but sized to read as a compact stat card, not
   a page heading: value size, label size and padding match nba-polymarket's
   own .stat-card, measured directly off their site at 390px (label .6rem,
   value 1.25rem, padding .7rem .6rem — see the mobile override below). */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin-bottom:1.3rem}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;min-width:0}
.stat-card .lbl{font-size:.6rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:.25rem}
.stat-card .num{font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;letter-spacing:-.02em;
  overflow-wrap:break-word}
.stat-card .num.pos{color:var(--green)}.stat-card .num.neg{color:var(--red)}
/* the scope ("Regular Season", "all-time", a season) folds into .sub instead
   of a separate label line — one fewer line per card, and .sub already wraps
   at word boundaries so there's no mid-word-wrap risk to design around. */
.stat-card .sub{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-secondary);margin-top:.2rem;
  overflow-wrap:break-word}
.stat-card a{color:var(--text)}.stat-card a:hover{color:var(--accent)}

/* compact info panel (city page): one line per stat instead of a labeled
   block per stat — "2 arenas · 2,859 games hosted", "Top scorer: X — Y pts" —
   for a handful of facts that don't each need their own card. */
.info-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:.8rem 1rem;margin-bottom:1.3rem;display:flex;flex-direction:column;gap:.4rem}
.info-line{font-size:.86rem;color:var(--text);overflow-wrap:break-word}
.info-line a{font-weight:600}

/* detail-page header */
.back{font-size:.76rem;font-family:'JetBrains Mono',monospace;color:var(--text-secondary);display:inline-block;margin-bottom:1rem}
.back:hover{color:var(--accent);text-decoration:none}
.ehead{border-bottom:1px solid var(--border);padding-bottom:1rem;margin-bottom:1.2rem}
.ehead h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.ehead .esub{font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.05em;margin-top:.4rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.ehead .esub .sep{opacity:.5}

/* leaderboard grid on arena page */
.lb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;margin-bottom:1.2rem}
.lb-card{min-width:0}
.lb-card h3{font-size:.8rem;font-weight:700;margin:0 0 .5rem}
.lb-card h3 .cap{color:var(--text-secondary);font-weight:400;font-size:.7rem;text-transform:none;letter-spacing:0}
.section-title{font-size:1.02rem;font-weight:700;margin:1.4rem 0 .7rem}

/* controls row */
.controls{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field .lbl{font-size:.58rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.grow{flex:1 1 300px;min-width:0}

/* search */
.searchbox{position:relative}
.gsearch{width:100%;padding:.6rem .9rem;font-size:16px;font-family:inherit;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);color:var(--text)}
.gsearch:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.gsearch-results{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:22rem;overflow-y:auto;z-index:200;display:none}
.gsearch-results.open{display:block}
.gs-item{display:flex;align-items:center;gap:.55rem;padding:.5rem .8rem;border-bottom:1px solid var(--border);
  text-decoration:none;color:var(--text);cursor:pointer}
.gs-item:last-child{border-bottom:none}
.gs-item:hover,.gs-item.sel{background:var(--surface-hover);text-decoration:none}
.gs-main{flex:1;font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-secondary);flex-shrink:0}

.empty{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}
.loading{text-align:center;padding:3rem 1rem;color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:.8rem}
.err{color:var(--red);padding:1.2rem .2rem;font-size:.85rem}
.foot{text-align:center;font-size:.7rem;color:var(--text-secondary);margin-top:1.8rem;
  font-family:'JetBrains Mono',monospace;line-height:1.7}

/* in-page tab views */
.view{display:none}.view.active{display:block}

/* ---------- site search (top + bottom of content, normal document flow) ----------
   Matches nba-polymarket's own pattern: a search box repeated near the top and
   bottom of the page content, not pinned to the viewport. Previously this used
   position:fixed at both edges, which permanently ate two chunks of vertical
   space on every page — worst on phones, where that's a third of the viewport. */
.site-search{max-width:1400px;margin:0 auto 1.1rem;padding:0 1.5rem}
.site-search.bottom{margin:1.6rem auto 0}
.site-search .ss-inner{position:relative}
.site-search input{width:100%;padding:.6rem .9rem;font-size:16px;font-family:inherit;
  border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
.site-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.site-search .gsearch-results{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  max-height:20rem;overflow-y:auto;z-index:200;display:none}
.site-search .gsearch-results.open{display:block}
.gs-item .gs-type{font-family:'JetBrains Mono',monospace;font-size:.56rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent);border:1px solid var(--border);border-radius:20px;
  padding:.05rem .45rem;flex-shrink:0}

/* ---------- control row: Game type / Season / Leaderboards all align ----------
   Every group is a .field (label on top, control below); the row bottom-aligns
   the controls so the three sit on one baseline. The control elements share the
   same height so they line up cleanly. */
.controls .field{justify-content:flex-end}
.controls .field .toggle button,
.controls .field .season-select{height:2rem}
.controls .field .toggle button{display:inline-flex;align-items:center;line-height:1}
.season-field .season-select{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;
  padding:0 .8rem;border:1px solid var(--border);border-radius:7px;background:var(--surface);
  color:var(--text);cursor:pointer;min-width:9.5rem}
.season-field .season-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

/* ---------- All-Star / all-players toggle ---------- */
.allstar-note{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:.04em;align-self:center}

/* players who never played here for the home team: shaded row in the leaderboard */
table.lb tbody tr.no-home{background:rgba(0,0,0,.055)}
table.lb tbody tr.no-home:hover{background:rgba(0,0,0,.09)}

/* season-mismatch note that replaces a draw table off-2026 */
.draw-note{background:var(--surface);border:1px dashed var(--border);border-radius:10px;
  padding:.9rem 1rem;color:var(--text-secondary);font-size:.82rem;margin-bottom:1rem}

/* fixed explainer above every draw section */
.draw-explainer{color:var(--text-secondary);font-size:.82rem;margin:.1rem 0 .8rem;max-width:60rem}

/* all-time team-draw rows: "incl. games as <old names>" under the current name */
.team-hist{display:block;font-size:.64rem;color:var(--text-secondary);font-weight:400;margin-top:.12rem;line-height:1.2}

/* frontpage: responsive grid of ranking boxes */
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.4rem}
/* min-width:0 on a grid/flex item is load-bearing: without it, a grid item
   refuses to shrink below its content's natural (unwrapped) width, so one
   long unwrapped value ("Mexico City") in a nested flex row pushes the whole
   box — and the page — wider than the viewport instead of wrapping. */
.fp-box{min-width:0;margin-bottom:0;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);padding:1rem 1.1rem;display:flex;flex-direction:column}
.fp-box .block-head{margin-bottom:.5rem}
.fp-box table{margin-top:.1rem}
.fp-more{display:inline-block;margin-top:.7rem;font-family:'JetBrains Mono',monospace;
  font-size:.68rem;font-weight:600;color:var(--accent)}
.fp-more:hover{text-decoration:underline}

/* city page: building chips */
.city-buildings{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 1rem}
.city-buildings a{font-family:'JetBrains Mono',monospace;font-size:.66rem;padding:.3rem .6rem;
  border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text-secondary)}
.city-buildings a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

@media(max-width:860px){
  .container{padding:1rem 1rem 3rem}
  .site-search{padding:0 1rem}
  .hdr h1{font-size:1.2rem}
  /* Matches nba-polymarket's own .stat-card at 390px exactly (padding, value
     size) rather than an invented mobile size — measured off their live site:
     padding .7rem .6rem, value 1.25rem. auto-fit/minmax picks 2 or 3 columns
     by actual available width and drops to 1 before a column gets too narrow
     for its content, instead of a fixed column count that can't adapt. */
  .stat-cards{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem}
  .stat-card{padding:.7rem .6rem}
  .stat-card .num{font-size:1.25rem}
  .ehead h1{font-size:1.3rem}
  table.lb thead th{position:static}
  .fp-grid{grid-template-columns:1fr}
  /* mobile card fallback: same data as table.lb, one column of cards instead
     of a wide table that would otherwise need horizontal scrolling. */
  .table-wrap{display:none}
  .cards{display:block}
  /* controls row: each field takes the full width and stacks, instead of
     shrinking inputs/selects/toggles down to an unreadable sliver. */
  .controls{gap:.7rem}
  .controls .field{width:100%}
  .controls .field.grow{flex-basis:100%}
  .controls .field .toggle{width:100%}
  .controls .field .toggle button{flex:1}
  .season-field .season-select{width:100%;min-width:0}
}