/* =============================================================================
   hi-club.css — chrome shared by every /team/{slug}/ module (hi-club.js).

   Modules paint into .club-panel, which is the club page's existing .dk-panel
   grammar plus the few primitives every module needs: a mirrored bar row, a
   share strip, a chip, a figure tile, a stated-absence line. Anything a module
   needs that is NOT here belongs in the module's own file, scoped under its
   own [data-club-mount="<id>"], so two modules can never fight over a name.

   House law: no italics; the ◷ receipt is the only gold; mint/coral are
   semantic only (a club is not "good" for taking hits, so club tints and ink
   carry the volume work); every colour resolves in both themes.
   ========================================================================== */
.club-mount { display: block; }
.club-mount[data-club-loading] { min-height: 120px; }
.club-loading {
  margin: 0; padding: 18px 0; color: var(--dk-muted, #5d6a7e);
  font: 700 .58rem/1.4 var(--hi-mono, "JetBrains Mono", monospace);
  letter-spacing: .14em; text-transform: uppercase;
}
.club-loading::after { content: ""; }
.club-absent {
  margin: 0; color: var(--dk-ink-2, #40506a);
  font: 400 .86rem/1.6 var(--hi-serif, Newsreader, Georgia, serif); font-style: normal;
}
.club-receipt { margin: 14px 0 0; }
.club-receipt [data-receipt] {
  font: 700 .55rem/1.5 var(--hi-mono, "JetBrains Mono", monospace);
  letter-spacing: .08em; color: var(--dk-muted, #5d6a7e);
}
.club-receipt [data-receipt]::before { content: "◷ "; color: var(--hi-receipt, #b08a3e); }

/* ---- figure tiles: the one-line identity, counts, any headline number ---- */
.club-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; margin: 0 0 4px; }
.club-fig { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--dk-card-2, rgba(13,31,60,.04)); }
.club-fig b { font: 800 1.6rem/1 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-ink, #0d1f3c); font-variant-numeric: tabular-nums; }
.club-fig span { font: 700 .52rem/1.3 var(--hi-mono, "JetBrains Mono", monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-muted, #5d6a7e); }
.club-fig em { font-style: normal; font: 400 .72rem/1.4 var(--hi-serif, Newsreader, Georgia, serif); color: var(--dk-ink-2, #40506a); }

/* ---- a row with a bar: club value against a league tick ---- */
.club-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(0, 2fr) minmax(56px, auto); align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; outline: none; }
.club-row:hover, .club-row:focus-visible { background: var(--dk-card-2, rgba(13,31,60,.05)); }
.club-row:focus-visible { box-shadow: inset 0 0 0 2px var(--dk-blue, #2a67a7); }
.club-row > .k { font: 700 .7rem/1.3 var(--hi-sans, ui-sans-serif, system-ui); color: var(--dk-ink-2, #40506a); }
.club-row > .v { font: 800 .82rem/1 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-ink, #0d1f3c); text-align: right; font-variant-numeric: tabular-nums; }
.club-bar { position: relative; height: 14px; border-radius: 4px; background: var(--dk-track, rgba(13,31,60,.07)); overflow: visible; }
.club-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--club-tint, var(--dk-blue, #2a67a7)); width: var(--w, 0%); }
.club-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; left: var(--tick, 50%); background: var(--dk-ink, #0d1f3c); opacity: .55; }
.club-bar b::after { content: attr(data-tick); position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font: 700 .48rem/1 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-muted, #5d6a7e); white-space: nowrap; }

/* ---- a stacked share strip: what followed, zone time, anything summing to 1 ---- */
.club-share { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: var(--dk-track, rgba(13,31,60,.07)); }
.club-share i { display: flex; align-items: center; justify-content: center; width: var(--w, 0%); font: 800 .55rem/1 var(--hi-mono, "JetBrains Mono", monospace); color: #fff; }
.club-share i:nth-child(1) { background: var(--club-tint, #2a67a7); }
.club-share i:nth-child(2) { background: color-mix(in srgb, var(--club-tint, #2a67a7) 62%, var(--dk-card, #fff)); }
.club-share i:nth-child(3) { background: color-mix(in srgb, var(--club-tint, #2a67a7) 34%, var(--dk-card, #fff)); color: var(--dk-ink, #0d1f3c); }
.club-share i:nth-child(4) { background: color-mix(in srgb, var(--club-tint, #2a67a7) 16%, var(--dk-card, #fff)); color: var(--dk-ink, #0d1f3c); }
.club-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; font: 700 .52rem/1.4 var(--hi-mono, "JetBrains Mono", monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted, #5d6a7e); }
.club-legend span { display: inline-flex; align-items: center; gap: 6px; }
.club-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--club-tint, #2a67a7); }

/* ---- chips: a fact, a filter, a lane ---- */
.club-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.club-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--dk-line, rgba(13,31,60,.16)); background: var(--dk-card, #fff); color: var(--dk-ink, #0d1f3c); font: 700 .6rem/1.3 var(--hi-mono, "JetBrains Mono", monospace); letter-spacing: .06em; cursor: pointer; }
.club-chip[aria-pressed="true"], .club-chip.is-on { background: var(--dk-ink, #0d1f3c); color: var(--dk-card, #fff); border-color: transparent; }
.club-chip b { font-weight: 800; }
.club-chip small { color: var(--dk-muted, #5d6a7e); font-size: .52rem; }
.club-chip[aria-pressed="true"] small, .club-chip.is-on small { color: inherit; opacity: .75; }

/* ---- a read-out strip modules use for hover/focus detail ---- */
.club-read { margin: 12px 0 0; padding: 9px 12px; border-radius: 9px; background: var(--dk-card-2, rgba(13,31,60,.05)); font: 600 .66rem/1.5 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-ink, #0d1f3c); min-height: 1.6em; }

/* ---- a small table modules can reuse ---- */
.club-table { width: 100%; border-collapse: collapse; }
.club-table th, .club-table td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--dk-hair, rgba(13,31,60,.08)); font: 700 .72rem/1.3 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-ink, #0d1f3c); font-variant-numeric: tabular-nums; }
.club-table th { font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-muted, #5d6a7e); font-weight: 700; }
.club-table th:first-child, .club-table td:first-child { text-align: left; font-family: var(--hi-sans, ui-sans-serif, system-ui); font-weight: 700; }
.club-table tr:last-child td { border-bottom: 0; }

:root[data-theme="dark"] .club-fig { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] .club-row:hover, :root[data-theme="dark"] .club-row:focus-visible { background: rgba(255,255,255,.06); }
:root[data-theme="dark"] .club-read, :root[data-theme="dark"] .club-share, :root[data-theme="dark"] .club-bar { background: rgba(255,255,255,.08); }

@media (max-width: 720px) {
  .club-row { grid-template-columns: minmax(88px, 1.1fr) minmax(0, 1.6fr) minmax(48px, auto); gap: 7px; }
  .club-fig b { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .club-bar i, .club-share i { transition: none !important; animation: none !important; }
}

/* ---- density pass (2026-08-18) --------------------------------------------
   Twelve modules on one page is a lot of vertical space, and the club page's
   default .dk-panel rhythm was tuned for three or four. This tightens the
   module chrome only — nothing is removed, no figure is dropped, no rule is
   hidden behind a disclosure. Panels sit closer, the shared primitives lose
   the padding they did not need, and long boards inside a module get their own
   scroll rather than pushing the page. */
.club-panel { padding-top: 18px; padding-bottom: 16px; margin-bottom: 14px; }
.club-panel > h2 { margin-bottom: 2px; font-size: 1.28rem; }
.club-panel .dk-sub { margin-bottom: 10px; }
.club-figs { gap: 10px; }
.club-fig { padding: 9px 12px; }
.club-fig b { font-size: 1.35rem; }
.club-row { padding: 4px 4px; }
.club-read { margin-top: 10px; padding: 8px 11px; }
.club-receipt { margin-top: 10px; }
/* A board longer than ~14 rows scrolls inside the module instead of running the
   page to nine thousand pixels. The rows are all still there. */
.club-scroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.club-scroll::-webkit-scrollbar { width: 8px; }
.club-scroll::-webkit-scrollbar-thumb { background: var(--dk-line, rgba(13,31,60,.22)); border-radius: 8px; }
@media (max-width: 720px) { .club-panel { padding-top: 15px; padding-bottom: 13px; } .club-scroll { max-height: 340px; } }

/* ---- the notes disclosure ------------------------------------------------
   Every module's method prose folds into one of these, under the heading. The
   text is MOVED here, never trimmed: closed it costs a line, open it reads
   exactly as the module wrote it. */
.club-notes { margin: 0 0 12px; border: 1px solid var(--dk-line, rgba(13,31,60,.14)); border-radius: 10px; background: var(--dk-card-2, rgba(13,31,60,.035)); }
.club-notes > summary {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; list-style: none;
  font: 700 .55rem/1.4 var(--hi-mono, "JetBrains Mono", monospace); letter-spacing: .13em;
  text-transform: uppercase; color: var(--dk-ink-2, #40506a); border-radius: 10px;
}
.club-notes > summary::-webkit-details-marker { display: none; }
.club-notes > summary:hover { color: var(--dk-ink, #0d1f3c); background: var(--dk-card, #fff); }
.club-notes > summary:focus-visible { outline: 2px solid var(--dk-blue, #2a67a7); outline-offset: 1px; }
.club-notes .cn-i {
  display: grid; place-items: center; width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid currentColor; font: 700 .5rem/1 var(--hi-serif, Georgia, serif); text-transform: none;
}
.club-notes > summary b { margin-left: auto; font-weight: 800; color: var(--dk-muted, #5d6a7e); }
.club-notes > summary::after { content: "+"; margin-left: 2px; font-weight: 800; color: var(--dk-muted, #5d6a7e); }
.club-notes[open] > summary::after { content: "\2212"; }
.club-notes[open] > summary { border-bottom: 1px solid var(--dk-hair, rgba(13,31,60,.08)); border-radius: 10px 10px 0 0; }
.club-notes > div { padding: 4px 14px 10px; display: grid; gap: 8px; }
.club-notes > div > p { margin: 0; font: 400 .8rem/1.55 var(--hi-serif, Newsreader, Georgia, serif); font-style: normal; color: var(--dk-ink-2, #40506a); }
:root[data-theme="dark"] .club-notes { background: rgba(255,255,255,.04); }
:root[data-theme="dark"] .club-notes > summary:hover { background: rgba(255,255,255,.07); }
/* A module that stacks cards gets a viewport rather than a page. Every card is
   rendered and keyboard-reachable inside it; this caps what one module spends
   of the page, never what it is allowed to say. */
.club-scroll.is-tall { max-height: 620px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
.club-scroll.is-tall::-webkit-scrollbar { width: 8px; }
.club-scroll.is-tall::-webkit-scrollbar-thumb { background: var(--dk-line, rgba(13,31,60,.22)); border-radius: 8px; }
@media (max-width: 720px) { .club-scroll.is-tall { max-height: 480px; } }

/* ---- the dashboard layout (2026-08-18) ---------------------------------------
   A club page at 1440px was a single 1,220px column of stacked panels. It is now
   a dashboard: the Overview's main column carries the season narrative (form,
   the trace, the roster map, the ranked identity axes) and a rail carries what
   a reader glances at (the pipeline, who is running, the franchise card). Other
   panels pair short modules side by side. Under 1100px it all stacks again in
   the same order, so nothing is hidden on a phone. */
.club-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 22px; align-items: start; }
.club-rail { display: grid; gap: 0; align-content: start; }
.club-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
@media (min-width: 1100px) {
  .club-grid { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); }
  .club-rail { position: sticky; top: calc(var(--nav-height, 64px) + 78px); }
  .club-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* rail cards: tighter, tinted top rule in the club colour, no sub-line noise */
.club-rail .club-panel { padding: 14px 16px 12px; border-top: 3px solid var(--club-tint, var(--dk-blue, #2a67a7)); }
.club-rail .club-panel > h2 { font-size: 1.02rem; }
.club-rail .club-panel .dk-sub { display: none; }
.club-rail .club-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.club-rail .club-fig { padding: 8px 10px; }
.club-rail .club-fig b { font-size: 1.15rem; }
.club-rail .club-notes { display: none; }          /* rail cards are the glance; the how-to-read lives on the full modules */
.club-rail .club-scroll.is-tall { max-height: 460px; }
/* pairs: the panel fills its cell */
.club-pair > .club-mount, .club-pair > section { min-width: 0; }
.club-pair .club-panel { height: 100%; }
/* a "look here" link row shared by rail cards and the hero */
.club-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.club-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; text-decoration: none; border: 1px solid var(--dk-line, rgba(13,31,60,.16)); color: var(--dk-ink, #0d1f3c); background: var(--dk-card, #fff); font: 700 .6rem/1.2 var(--hi-mono, "JetBrains Mono", monospace); letter-spacing: .06em; }
.club-links a.is-primary { background: var(--dk-blue, #2a67a7); color: #fff; border-color: transparent; }
.club-links a:hover, .club-links a:focus-visible { border-color: var(--dk-blue, #2a67a7); outline: none; }
.club-links a::after { content: " \2192"; }
/* mug rows for the pipeline card */
.club-mugrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--dk-hair, rgba(13,31,60,.08)); }
.club-mugrow:last-child { border-bottom: 0; }
.club-mug { width: 34px; height: 34px; border-radius: 50%; background: var(--dk-card-2, rgba(13,31,60,.06)) center/cover no-repeat; display: grid; place-items: center; font: 800 .55rem/1 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-ink-2, #40506a); }
.club-mugrow b { display: block; font: 700 .74rem/1.25 var(--hi-sans, ui-sans-serif, system-ui); color: var(--dk-ink, #0d1f3c); }
.club-mugrow small { display: block; font: 600 .56rem/1.3 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-muted, #5d6a7e); letter-spacing: .04em; }
.club-mugrow em { font-style: normal; font: 800 .8rem/1 var(--hi-mono, "JetBrains Mono", monospace); color: var(--dk-ink, #0d1f3c); text-align: right; font-variant-numeric: tabular-nums; }
.club-mugrow em small { display: block; text-align: right; }
/* the age curve, 16 to 24, as thin bars. Data fill only: the club tint painted
   these gold on the gold clubs, and gold is reserved for the ◷ glyph. */
.club-curve-k { margin: 12px 0 0; font: 700 .52rem/1.3 var(--hi-mono, "JetBrains Mono", monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--dk-muted, #5d6a7e); }
.club-curve { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; height: 54px; margin: 6px 0 2px; }
.club-curve i { display: block; border-radius: 3px 3px 0 0; background: var(--hi-data-fill, var(--hi-blue, #1f5fbf)); height: var(--h, 4%); min-height: 3px; }
.club-curve-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; font: 700 .46rem/1.2 var(--hi-mono, "JetBrains Mono", monospace); letter-spacing: .06em; color: var(--dk-muted, #5d6a7e); text-align: center; }
/* dark: the quiet links take a translucent ground; the primary keeps its blue */
:root[data-theme="dark"] .club-links a:not(.is-primary) { background: rgba(255,255,255,.05); }
:root[data-theme="dark"] .club-mug { background-color: rgba(255,255,255,.08); }

/* ---- the club's own colour, everywhere the modules paint --------------------
   The page root sets --tc (the club colour) and --th-bloom (the vivid second
   colour the hero glow uses). The modules read --club-tint. Until now nothing
   connected them, so every bar on every club page fell back to desk blue and
   thirty-two clubs looked like one. Now the bloom is the tint (it is chosen for
   contrast on the hero) and the club colour is the deep ink. */
.dk[data-club] { --club-tint: rgb(var(--th-bloom, 42, 103, 167)); --club-ink: var(--tc, #0d1f3c); --club-soft: rgba(var(--th-bloom, 42, 103, 167), .16); }
:root[data-theme="dark"] .dk[data-club] { --club-soft: rgba(var(--th-bloom, 42, 103, 167), .24); }
.club-panel { position: relative; overflow: hidden; }
/* a faint crest watermark on rail cards — identity without a single extra byte of copy */
.club-rail .club-panel::after { content: ""; position: absolute; right: -28px; bottom: -34px; width: 150px; height: 150px; opacity: .06; background: var(--club-crest, none) center/contain no-repeat; pointer-events: none; }
:root[data-theme="dark"] .club-rail .club-panel::after { opacity: .09; }
/* dot strip: one dot per game in a run — the run's length as a shape, not a digit */
.club-dots { display: inline-flex; gap: 3px; align-items: center; }
.club-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--club-tint); }
.club-dots i.gap { background: transparent; border: 1.5px dashed var(--dk-muted, #5d6a7e); }
/* Keep the club's working controls ahead of the longer background paragraph. */
.dk-context { margin-top: 12px; }
.dk-context summary { width: fit-content; cursor: pointer; color: var(--hi-on-navy-hi); font-size: .85rem; padding: 8px 0; }
.dk-context summary:focus-visible { outline: 2px solid var(--hi-on-navy-hi); outline-offset: 3px; }
@media (max-width: 620px) {
  .dk-hero-club .dk-hero-in { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .dk-hero-club .dk-hero-id { display: contents; }
  .dk-hero-club .dk-crest { width: 44px; height: 44px; grid-column: 1; grid-row: 1; }
  .dk-hero-club .dk-crest img { width: 34px; height: 34px; }
  .dk-hero-club .dk-eyebrow { grid-column: 2; grid-row: 1; margin: 0; gap: 6px; }
  .dk-hero-club h1, .dk-hero-club [data-club-mount="hero"], .dk-hero-club .dk-context { grid-column: 1 / -1; }
  .dk-hero-club [data-club-mount="hero"] .ch > div:first-child { display: flex; flex-direction: column; }
  .dk-hero-club [data-club-mount="hero"] .ch-links { order: -1; margin-top: 0; margin-bottom: 12px; }
  .dk-hero-club [data-club-mount="hero"] .ch-said { font-size: 1rem; line-height: 1.4; }
}

/* October 5, 2026: this season leads the club band. Last season's record
   rides beside it as a quiet chip; on a phone the band's figures scroll in
   one row and the source note gives way, so the tabs come sooner. */
.dk-hero-club .dk-pill.is-quiet { border-color: rgba(255, 255, 255, .18); background: transparent; color: rgba(255, 255, 255, .72); }
@media (max-width: 620px) {
  .dk-hero-club .dk-hero-note { display: none; }
  .dk-hero-club .dk-rail { display: flex; overflow-x: auto; scrollbar-width: none; }
  .dk-hero-club .dk-rail::-webkit-scrollbar { display: none; }
  .dk-hero-club .dk-rail-c { flex: 0 0 auto; min-width: 108px; }
}

/* Last season, folded (owner, October 6, 2026): once this season has a game
   on file, the completed 2025-26 table sits under one closed line. */
details.dk-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; cursor: pointer; }
details.dk-fold > summary::-webkit-details-marker { display: none; }
details.dk-fold > summary:focus-visible { outline: 2px solid var(--dk-blue); outline-offset: 6px; border-radius: 8px; }
details.dk-fold .dk-fold-t { display: grid; gap: 4px; }
details.dk-fold .dk-fold-t small { color: var(--dk-muted); font: 800 .59rem/1.4 var(--dk-sans); letter-spacing: .13em; text-transform: uppercase; }
details.dk-fold .dk-fold-t h2 { margin: 0; color: var(--dk-ink); font: 600 1.18rem/1.2 var(--dk-serif); letter-spacing: -.008em; }
details.dk-fold .dk-fold-k { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--dk-line); border-radius: 999px; color: var(--dk-ink-2, var(--dk-muted)); transition: transform .2s ease, border-color .2s ease; }
details.dk-fold .dk-fold-k::before { content: "+"; font: 700 1rem/1 var(--dk-mono); }
details.dk-fold[open] .dk-fold-k::before { content: "\2212"; }
details.dk-fold > summary:hover .dk-fold-k { border-color: var(--dk-blue); }
details.dk-fold[open] > summary { margin-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { details.dk-fold .dk-fold-k { transition: none; } }