/* App component layer. Loads AFTER brand/dpt.v1.css + dpt.v2.css (see the load
   order comment in views/_public-head.ejs and views/layout/header.ejs) and
   aliases its own names to their SEMANTIC tokens rather than fixed colors —
   that's what makes dark mode work for free everywhere below. Per-club identity
   (--club-primary/-accent/-primary-ink/-accent-ink/-text/-wash) is a FOURTH
   layer on top of this one, defined by lib/brand.js's inline <style> block and
   loaded after this file (docs/UX-SPEC.md "Design system") — nothing in this
   file ever hardcodes a club color; every club-branded rule below reads a
   --club-* var instead.

   Section 1 (:root alias block + the hub-level auth/account/club-picker
   components) is the original minimal cut from Phase 1 — kept working
   unchanged, since views/auth/*.ejs, views/account.ejs and views/club-picker.ejs
   still render through views/_public-head.ejs, not the club shell below.
   Section 2 is this task's addition: the full club-shell component layer
   (docs/BUILD-SPEC.md Phase 2B) — the header band, sample banner, nav, and
   every views/partials/*.ejs component, plus generic page scaffolding
   (stat/card grids, chip rows, tables, hero band) for the Stage C views that
   will render inside it. */
:root {
  --navy:        var(--dp-text);
  --navy-2:      var(--dp-green-text);
  --ink:         var(--dp-text);
  --chrome:      var(--dp-chrome);
  --chrome-fg:   var(--dp-chrome-ink);
  --bg:          var(--dp2-page);
  --card:        var(--dp2-card);
  --well:        var(--dp2-well);
  --line:        var(--dp-line);
  --muted:       var(--dp-text-muted);
  --good:        var(--dp-good-t);
  --good-bg:     var(--dp-good-wash-t);
  --bad:         var(--dp-crit-t);
  --bad-bg:      var(--dp-crit-wash-t);
  --warn:        var(--dp-warn-t);
  --warn-bg:     var(--dp-warn-wash-t);
  --gold:        var(--dp-brand-dark);
  --gold-bright: var(--dp-brand);
  --green:       var(--dp-action-t);
  --green-hover: var(--dp-action-t-hover);
  --good-line:   color-mix(in srgb, var(--dp-good-t) 38%, transparent);
  --bad-line:    color-mix(in srgb, var(--dp-crit-t) 38%, transparent);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink); min-height: 100vh;
  font: 15px/1.5 "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
}
main { max-width: 1060px; margin: 0 auto; padding: 40px 16px calc(60px + env(safe-area-inset-bottom)); }
h1, h2 { font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif; }
h1 { font-size: 22px; margin: 0 0 12px; color: var(--navy); letter-spacing: .02em; }
h2 { font-size: 16px; margin: 18px 0 6px; color: var(--navy); letter-spacing: .02em; }
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: 12.5px; }
.muted { color: var(--muted); }
.mt { margin-top: 18px; }
/* Digits that stack in a column (stat tiles, coverage fractions, table cells)
   should line up — the shared dp2.css .dp-num does this too; this local alias
   just keeps every one of THIS file's number-bearing classes readable without
   remembering which layer .dp-num lives in. */
.dp-num { font-variant-numeric: tabular-nums; }

.card {
  background: var(--card); border: 1px solid var(--dp2-card-border-c); border-radius: var(--dp2-r-card);
  padding: 20px 22px; margin: 12px 0; box-shadow: 0 1px 2px rgba(28,47,82,.05);
}
.card.narrow { max-width: 420px; margin: 0 auto; }
.center { text-align: center; }

input, textarea, select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; width: 100%; max-width: 100%;
  background: var(--bg); color: var(--ink);
}
::placeholder { color: var(--muted); opacity: 1; }

.stack { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.checkline { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.checkline input { width: auto; }

/* Buttons — BRAND LAW, measured off dreesperformance.com/style-guide/ 2026-08-21
   (per the vault's DPT Brand Design Law note: when docs and the live site
   disagree, the site wins). The system:
   - PRIMARY (.btn.primary / legacy .btn.big): gold #FFC72C, WHITE text, hover
     #D69E06. Gold appears exactly ONCE per view — the single money/primary
     action. (White-on-gold is the site's own measured choice; do not "fix" it.)
   - SECONDARY (bare .btn): solid green #00753C on LIGHT surfaces (hover
     #005E30); on DARK surfaces a white ghost — 6% white fill, 1.5px 75%-white
     border (the site's BREAK-1 rule, v1.10.0).
   - All buttons: Oswald 700, 0.5px letter-spacing, uppercase, 48px standalone
     height (.btn.sm = 44px for in-card), radius 8px.
   Every token is declared twice (plain, then light-dark()) — same old-Safari
   fallback convention as dpt.v1.css. */
.btn {
  --btn-bg: #00753C;
  --btn-bg: light-dark(#00753C, rgba(255, 255, 255, .06));
  --btn-bg-hover: #005E30;
  --btn-bg-hover: light-dark(#005E30, rgba(255, 255, 255, .14));
  --btn-border: transparent;
  --btn-border: light-dark(transparent, rgba(255, 255, 255, .75));
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  background: var(--btn-bg); color: #FFFFFF;
  border: 1.5px solid var(--btn-border); border-radius: 8px;
  font-family: var(--dp-font-heading); font-weight: 700; font-size: 14px;
  letter-spacing: .5px; text-transform: uppercase;
  cursor: pointer; text-align: center; text-decoration: none;
}
.btn:hover { background: var(--btn-bg-hover); text-decoration: none; }
.btn.sm { min-height: 44px; padding: 0 16px; font-size: 13px; }
.btn.primary, .btn.big {
  background: var(--gold-bright, #FFC72C); color: #FFFFFF; border-color: transparent;
}
.btn.primary:hover, .btn.big:hover { background: #D69E06; }
.btn.secondary { /* legacy alias — the bare .btn IS the secondary tier now */ }
/* Text links: green is reserved for links/accents (style guide) —
   #00753C on light, #4ADE80 brightening on dark. 44px tap target on touch. */
.linklike {
  background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
  color: #00753C;
  color: light-dark(#00753C, #4ADE80);
}
.linklike:hover {
  color: #005E30;
  color: light-dark(#005E30, #86EFAC);
}
.linklike.danger { color: var(--bad); font-size: 12px; }
.inline-form { display: inline; }
.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.btnrow-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.notice {
  background: var(--good-bg); border: 1px solid var(--good-line); color: var(--good);
  border-radius: 10px; padding: 10px 14px; margin: 10px 0;
}
.error-notice { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }

.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 2px 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* club-picker */
.club-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.club-item { border: 1px solid var(--line); border-radius: 10px; }
.club-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; color: var(--ink);
}
.club-link:hover { text-decoration: none; border-color: var(--navy-2); }
.club-name { font-weight: 600; font-size: 15px; }
.role-pill {
  background: var(--well); color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: 3px 10px;
}

.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 18px; }

@media (pointer: coarse) {
  .btn, .club-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .club-link { justify-content: space-between; }
}

/* ============================================================================
   SECTION 2 — club shell (docs/BUILD-SPEC.md Phase 2B).
   Everything below renders only inside views/layout/header.ejs's <body> (i.e.
   on a real club page), where the four-layer brand cascade described at the
   top of this file is always fully loaded. Class prefix `cs-` (club shell) is
   used for everything genuinely new here; components that are exact reuses of
   an existing dp2/p1 primitive (stat numbers, PR chips, empty states, coach
   notes) keep THAT primitive's name instead of inventing a parallel one — see
   each partial's own header comment for which case it is.
   ========================================================================= */

/* ---- primitives ported from ../portal/public/styles.css, unmodified in
   meaning: this app's stat tiles / PR chips / empty states / coach notes are
   the same visual language the portal's report card already shipped and
   proved out, not a new design. ---- */
.p1-microlabel {
  font-size: var(--dp2-fs-label); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dp2-label);
}
.p1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
@media (min-width: 900px) { .p1-grid { grid-template-columns: repeat(4, 1fr); } }
.p1-stat { min-width: 0; }
.p1-statnum {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: clamp(26px, 7.2vw, 32px); font-weight: 700; line-height: 1.05; margin-top: 6px;
  white-space: nowrap;
}
.p1-unit { font-family: "Roboto", Arial, sans-serif; font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.p1-statdelta { font-size: 11.5px; font-weight: 700; margin-top: 3px; }
.p1-statdelta.good { color: var(--dp2-good); }
.p1-statdelta.warn { color: #55606B; color: light-dark(#55606B, #F0B45A); }
.p1-statdelta.flat { color: var(--muted); font-weight: 600; }

.p1-pr {
  display: inline-block; background: var(--dp2-gold); color: var(--dp2-gold-ink);
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px; padding: 6px 10px;
}

.p1-empty { padding: 22px 18px; }
.p1-empty-h {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.15; color: var(--navy); margin: 0 0 6px;
}
.p1-empty p { margin: 0; }
.p1-empty p + p { margin-top: 8px; }
.p1-empty .btn { margin-top: 12px; }

.p1-coachnote { margin: 14px 0 12px; }
.p1-coachnote .p1-notetext { margin: 6px 0 0; line-height: 1.55; white-space: pre-wrap; }

/* Loading skeleton — a block waiting on data renders these in the shape of
   what's coming, never the word "Loading" (ported from ../portal/public/styles.css;
   nothing in this shell task fetches client-side yet, but Stage C's live
   dashboards will want this primitive already in place). */
@keyframes dp-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel {
  display: block; background-color: var(--well);
  background-image: linear-gradient(90deg,
    transparent 0%, color-mix(in srgb, var(--dp2-card) 85%, transparent) 50%, transparent 100%);
  background-size: 200% 100%; background-repeat: no-repeat;
  border-radius: var(--dp2-r-inner);
  animation: dp-skel 1.25s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---- page scaffolding ---- */
.cs-main { max-width: 1060px; margin: 0 auto; padding: 16px 16px calc(110px + env(safe-area-inset-bottom)); }

/* Card grid — team cards, athlete cards, resource groups. (Distinct from
   .p1-grid above, which is specifically the 2/4-column STAT tile grid.) */
.cs-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 16px; }
@media (min-width: 640px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .cs-grid { grid-template-columns: repeat(3, 1fr); } }

/* Horizontal-scroll chip row — the PR strip on a report card. */
.cs-chip-row { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.cs-chip-row .p1-pr { flex: 0 0 auto; white-space: nowrap; }

/* Ranked/history tables (testing board, full-history card). Wide content
   scrolls in its own box, never the page (dpt.v1's .dp-scroll-x rule, applied
   here to a real table). */
.cs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cs-table { width: 100%; border-collapse: collapse; min-width: 560px; }
table.cs-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--chrome-fg); background: var(--chrome); padding: 7px 9px;
}
table.cs-table th:first-child { border-radius: 6px 0 0 6px; }
table.cs-table th:last-child { border-radius: 0 6px 6px 0; }
table.cs-table td { padding: 8px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.cs-table td.good { color: var(--good); background: var(--good-bg); font-weight: 700; }
table.cs-table td.bad { color: var(--bad); background: var(--bad-bg); font-weight: 700; }
@media (max-width: 640px) {
  table.cs-table { min-width: 0; }
  table.cs-table th, table.cs-table td { padding: 7px 6px; }
}

/* Hero band — the report card's best-gain headline. Per docs/UX-SPEC.md
   "Design system": club-primary fill + YIQ ink; when the clamped contrast
   still fails 4.5:1, the SERVER picks .cs-hero-fallback instead (a card
   surface with a left rail) rather than this class ever guessing — both are
   defined here so that choice is a one-class swap wherever Stage C computes it. */
.cs-hero {
  background: var(--club-primary); color: var(--club-primary-ink);
  border-radius: var(--dp2-r-hero); padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: stretch; gap: 14px;
}
.cs-hero-fallback {
  background: var(--card); color: var(--ink); border: 1px solid var(--dp2-card-border-c);
  border-left: var(--dp2-rail) solid var(--club-primary);
  border-radius: var(--dp2-r-hero); padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: stretch; gap: 14px;
}
.cs-hero .p1-microlabel, .cs-hero-fallback .p1-microlabel { opacity: .85; }
.cs-hero-num {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: clamp(40px, 13vw, 58px); font-weight: 700; line-height: 1.02; margin-top: 2px; white-space: nowrap;
}
.cs-hero-r { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; }
.cs-hero-word {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 24px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1;
}
.cs-hero-delta { font-size: 11px; font-weight: 700; margin-top: 3px; }

/* ---- club header band (views/layout/header.ejs) ---- */
.cs-band {
  background: var(--club-primary); color: var(--club-primary-ink);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: space-between; padding: 10px 16px; position: relative; z-index: 10;
}
.cs-band-brand { display: flex; align-items: center; gap: 10px; color: inherit; min-width: 0; }
.cs-band-brand:hover { text-decoration: none; }
.cs-band-crest { display: block; flex: none; height: 40px; width: auto; }
.cs-band-titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cs-band-name {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: var(--dp2-fs-title); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-band-city { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.cs-band-nav { display: none; align-items: center; gap: 2px; }
@media (min-width: 720px) { .cs-band-nav { display: flex; } }
.cs-band-nav a {
  color: inherit; font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: var(--dp2-fs-nav); letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 8px; opacity: .78; text-decoration: none;
}
.cs-band-nav a:hover { opacity: 1; text-decoration: none; }
.cs-band-nav a.is-active { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); font-weight: 700; }
.cs-band-right { display: flex; align-items: center; gap: 10px; }
.cs-user-chip { display: flex; align-items: center; gap: 6px; color: inherit; padding: 4px 8px; border-radius: 8px; }
.cs-user-chip:hover { background: color-mix(in srgb, currentColor 12%, transparent); text-decoration: none; }
.cs-role-badge {
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, currentColor 18%, transparent); padding: 2px 7px; border-radius: 99px;
}
.cs-user-name { font-size: 12.5px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .cs-user-name { display: none; } }

/* Mobile floating pill nav — the dp2-nav primitive (dpt.v2.css), with the
   active state pointed at --club-text instead of dp2's default DPT-green
   accent (UX-SPEC "Design system": active nav is a club-identity surface). */
.cs-pill-nav .is-active { color: var(--club-text); }

/* ---- impersonation / preview banner ---- */
.cs-imp-banner {
  background: var(--warn-bg); color: var(--warn); text-align: center; font-size: 12.5px;
  padding: 8px 14px;
}
.cs-imp-banner .linklike { color: inherit; text-decoration: underline; font-size: inherit; }

/* ---- sample banner (partials/sample-banner.ejs) ----
   Sticky, ink chrome, gold SAMPLE label — same "dark bar" the app's other
   surfaces retired in favor of the club-colored band, kept here deliberately
   because this banner has to read as a WRAPPER around the club's own page,
   never as part of the club's own branding (a prospect must never mistake the
   sample chrome for the club paying for it). */
.cs-sample-banner { position: sticky; top: 0; z-index: 50; background: var(--dp-chrome); color: var(--dp-chrome-ink); }
.cs-sample-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; max-width: 1060px; margin: 0 auto; flex-wrap: wrap;
}
.cs-sample-brand { display: flex; align-items: baseline; gap: 6px; color: inherit; min-width: 0; flex: 1 1 auto; }
.cs-sample-brand:hover { text-decoration: none; }
.cs-sample-label {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--dp-brand);
}
.cs-sample-sub { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sample-roles { display: flex; background: rgba(255,255,255,.08); border-radius: 99px; padding: 2px; gap: 2px; }
.cs-role-pill {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 99px; border: 0; background: none; color: inherit; opacity: .7; cursor: pointer;
}
.cs-role-pill:hover { opacity: .9; }
.cs-role-pill.is-on { background: var(--dp-brand); color: #141A21; opacity: 1; }
.cs-sample-copy {
  font-size: 12px; font-weight: 700; color: inherit; background: rgba(255,255,255,.1);
  border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
.cs-sample-copy:hover { background: rgba(255,255,255,.18); }
.cs-sample-hint { margin: 0; text-align: center; font-size: 11px; opacity: .6; padding: 4px 14px 8px; }
@media (pointer: coarse) { .cs-role-pill, .cs-sample-copy { min-height: var(--dp-btn-h-sm); } }

/* ---- stat tile (partials/stat-tile.ejs) ---- */
a.dp2-stat.cs-stat { display: block; color: inherit; text-decoration: none; }
a.dp2-stat.cs-stat:hover { text-decoration: none; border-color: var(--club-primary); }

/* ---- coverage bar (partials/coverage-bar.ejs) ---- */
.cs-coverage { display: block; }
a.cs-coverage { color: inherit; text-decoration: none; }
a.cs-coverage:hover { text-decoration: none; }
.cs-coverage-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cs-coverage-track { flex: 1; height: 8px; border-radius: 99px; background: var(--well); overflow: hidden; }
.cs-coverage-fill { display: block; height: 100%; background: var(--club-primary); border-radius: 99px; }
.cs-coverage-frac { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cs-coverage-sub { margin-top: 2px; }

/* ---- locked card (partials/locked-card.ejs) ----
   Never a gray padlock: the top section is REAL preview content at reduced
   opacity, per docs/UX-SPEC.md. */
.cs-locked { display: block; border-radius: var(--dp2-r-card); border: 1px solid var(--dp2-card-border-c); overflow: hidden; color: inherit; text-decoration: none; }
.cs-locked:hover { text-decoration: none; border-color: var(--club-primary); }
.cs-locked-preview { padding: 14px 16px; opacity: .4; background: var(--card); }
.cs-locked-value {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 20px; font-weight: 700; margin-top: 4px;
}
.cs-locked-line { padding: 0 16px 10px; background: var(--card); }
.cs-locked-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; background: var(--well); }
.cs-tier-pill {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold-bright); color: var(--dp-attention-ink); padding: 3px 9px; border-radius: 99px;
}
.cs-locked-cta { font-size: 12px; font-weight: 700; color: var(--navy-2); }

/* ---- feed row (partials/feed-row.ejs) ---- */
.cs-feed-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--dp2-hairline); }
a.cs-feed-row { color: inherit; text-decoration: none; }
a.cs-feed-row:hover { text-decoration: none; border-left-color: var(--club-primary); background: var(--well); }
.cs-feed-row + .cs-feed-row { margin-top: 6px; }
.cs-feed-pr { border-left-color: var(--dp2-gold); }
.cs-feed-result { border-left-color: var(--dp2-good); }
.cs-feed-note { border-left-color: var(--club-primary); }
.cs-feed-announcement { border-left-color: var(--dp2-hairline); }
.cs-feed-text { flex: 1; min-width: 0; font-size: 13.5px; }
.cs-feed-date { white-space: nowrap; }

/* ---- athlete row (partials/athlete-row.ejs) ----
   .inactive (55% opacity) already exists in Section 1's shared vocabulary —
   deactivated athletes reuse it rather than a second "dimmed" class. */
.cs-athlete-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--dp2-hairline-soft); color: inherit; text-decoration: none; }
.cs-athlete-row:last-child { border-bottom: 0; }
.cs-athlete-row:hover { text-decoration: none; background: var(--well); }
.cs-athlete-main { flex: 1; min-width: 0; }
.cs-athlete-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.cs-athlete-sub { margin-top: 1px; }
.cs-athlete-latest { flex: none; }
.cs-athlete-spark { flex: none; width: 70px; }
.cs-athlete-spark svg { display: block; width: 100%; height: auto; }

/* ---- team card (partials/team-card.ejs) ---- */
.cs-team-card { display: block; color: inherit; text-decoration: none; }
.cs-team-card:hover { text-decoration: none; border-color: var(--club-primary); }
.cs-team-name {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--club-text);
}
.cs-team-sub { margin-top: 6px; }

/* ---- coach note (partials/coach-note.ejs) ---- */
.cs-coachnote-byline { margin-top: 8px; }

/* ---- resource row (partials/resource-row.ejs) ---- */
.cs-resource-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: var(--ink); border-bottom: 1px solid var(--dp2-hairline-soft); }
.cs-resource-row:last-child { border-bottom: 0; }
.cs-resource-row:hover { text-decoration: none; background: var(--well); }
.cs-resource-icon {
  flex: none; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  background: var(--club-primary); color: var(--club-primary-ink);
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .04em;
}
.cs-resource-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-resource-info strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-resource-chev { color: var(--muted); font-size: 18px; }

/* ---- footer credit line (views/layout/footer.ejs) ---- */
.cs-footer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 18px calc(96px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 12px; }
.cs-dmark { height: 18px; width: auto; opacity: .8; }

/* Touch targets — every interactive club-shell control clears the 44px floor
   on a touch device, same `pointer: coarse` gate the rest of the app uses. */
@media (pointer: coarse) {
  .cs-band-nav a, .cs-pill-nav a, .cs-user-chip, .cs-athlete-row, .cs-resource-row, .cs-team-card, .cs-locked, .cs-feed-row {
    min-height: var(--dp-btn-h-sm);
  }
}

/* ============================================================================
   OVERVIEW PAGES (docs/BUILD-SPEC.md Phase 3B: overview-{parent,coach,
   director}.ejs, resources.ejs, account-club.ejs). Appended, not interleaved
   with Section 2 above, per this task's append-only instruction. Reuses every
   existing token/primitive from Sections 1-2 — nothing below invents a new
   color, only new LAYOUT for shapes those sections didn't already cover.
   ========================================================================= */

/* "Next testing day" card, every role's overview. */
.cs-next-testing-date {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 22px; font-weight: 700; margin-top: 2px;
}

/* Director first-login welcome + 3-step checklist (overview-director.ejs,
   docs/UX-SPEC.md "Onboarding + empty states"). */
.cs-welcome { margin-bottom: 16px; text-align: center; }
.cs-welcome svg { display: block; margin: 0 auto 10px; }
.cs-welcome-h {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 20px; font-weight: 700; margin: 0 0 14px;
}
.cs-checklist {
  list-style: none; counter-reset: cs-step; margin: 0; padding: 0;
  display: inline-flex; flex-direction: column; gap: 8px; text-align: left;
}
.cs-checklist li { counter-increment: cs-step; }
.cs-checklist li::before {
  content: counter(cs-step) ". "; font-weight: 700; color: var(--club-primary);
}

/* Athlete switcher pills (overview-parent.ejs, 2+ guardians). */
.cs-switcher { margin: 0 0 14px; }
.cs-switch-pill {
  display: inline-block; padding: 8px 16px; border-radius: 99px;
  border: 1px solid var(--dp2-card-border-c); color: var(--ink); font-weight: 600; font-size: 13px; white-space: nowrap;
}
.cs-switch-pill:hover { text-decoration: none; border-color: var(--club-primary); }
.cs-switch-pill.is-on { background: var(--club-primary); color: var(--club-primary-ink); border-color: var(--club-primary); }

/* Activity/PR feed list (every overview) — a plain vertical stack of
   partials/feed-row.ejs, distinct from .cs-grid's multi-column card layout. */
.cs-feed-list { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }

/* Team trend rollup card (overview-director.ejs). */
.cs-trend-switcher select { max-width: 220px; margin-bottom: 10px; }
.cs-trend-row { display: flex; align-items: center; gap: 16px; }
.cs-trend-spark { flex: none; width: 160px; }
.cs-trend-spark svg { display: block; width: 100%; height: auto; }
.cs-trend-median { flex: 1; min-width: 0; }
.cs-trend-counts { margin-top: 10px; }

/* "Worth a conversation" list (overview-director.ejs) — same row shape as
   partials/athlete-row.ejs but the sub-line is a factual reason, not a
   position/grad-year, so it earns its own class rather than misusing that
   partial's `teamName` slot for something it doesn't mean. */
.cs-worth-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: var(--dp2-r-card); border: 1px solid var(--dp2-card-border-c);
  color: inherit; text-decoration: none; background: var(--card);
}
.cs-worth-row:hover { text-decoration: none; border-color: var(--club-primary); }
.cs-worth-name { font-weight: 600; font-size: 14px; }

/* Announcement composer + posted list (overview-coach.ejs, overview-director.ejs). */
.cs-composer { margin: 0 0 14px; }
.cs-announcement { padding: 14px 16px; }
.cs-announcement-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cs-announcement p { margin: 6px 0 8px; }

/* Resources page (resources.ejs) — a bordered group wrapping N
   partials/resource-row.ejs rows, each paired with a staff-only Remove
   control the partial itself has no slot for. */
.cs-resource-group {
  background: var(--card); border: 1px solid var(--dp2-card-border-c); border-radius: var(--dp2-r-card);
  margin: 12px 0; overflow: hidden;
}
.cs-resource-item { display: flex; align-items: center; }
.cs-resource-item .cs-resource-row { flex: 1; min-width: 0; }
.cs-resource-remove { flex: none; padding: 0 14px; }

/* Club-scoped account page (account-club.ejs) — the linked-athletes list
   reuses Section 1's .club-list/.club-item/.club-link primitives verbatim,
   nothing new needed there. */

@media (pointer: coarse) {
  .cs-switch-pill, .cs-worth-row { min-height: var(--dp-btn-h-sm); }
}

/* team pages (views/roster.ejs, team.ejs, testing.ejs, schedule.ejs — routes/teams.js).
   Append-only, per this file's ownership split: everything above is Section 1/2
   (hub auth + the club shell itself); this is the one page-specific layer routes/
   teams.js's owner is allowed to add, and only at the end. */

/* Horizontal filter-chip row — team pills on /roster and /testing, test pills grouped
   by category on /testing. Same shape as .cs-chip-row (the PR strip), but these are
   LINKS with an on/off state, not static PR badges, so they get their own class
   rather than overloading that one's meaning. */
.cs-filter-row { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; margin: 0 0 10px; }
.cs-filter-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0 14px; border-radius: 99px; border: 1px solid var(--dp2-card-border-c);
  background: var(--card); color: var(--ink);
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.cs-filter-pill:hover { text-decoration: none; border-color: var(--club-primary); }
/* Club color = identity (UX-SPEC "Design system"): the selected pill fills with the
   club's own primary, same rule the coverage-bar fill and the header band follow. */
.cs-filter-pill.is-on { background: var(--club-primary); color: var(--club-primary-ink); border-color: var(--club-primary); }
.cs-category-label { margin: 14px 0 6px; }

/* Testing board table rows */
.cs-untested-row { opacity: .65; }
.cs-avg-line { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }

/* Testing-day schedule rows/forms */
.cs-schedule-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cs-schedule-item:not(form) { padding: 12px 0; border-bottom: 1px solid var(--dp2-hairline-soft); }
.cs-schedule-item:not(form):last-child { border-bottom: 0; }
.cs-schedule-date {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 15px; font-weight: 700;
}

/* Compact inline field group — team rename, add-a-team, add/edit-testing-day forms.
   Each label stacks its input underneath, same convention input/textarea/select
   already use app-wide (Section 1), just laid out in a row instead of a column. */
.cs-form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.cs-form-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); flex: 1 1 140px; }
.cs-form-row input { margin: 0; }

@media (pointer: coarse) {
  .cs-filter-pill { min-height: var(--dp-btn-h-sm); }
}

/* ============================================================================
   ATHLETE PAGES — /athlete/:id, /athlete/:id/print, /athlete/:id/onepager
   (routes/athlete.js + views/athlete.ejs, views/athlete-print.ejs,
   views/recruiting.ejs). Appended per this file's allowed exception: everything
   above is owned by the shell workstream and stays untouched. Reuses every
   existing dp2-/p1-/cs- primitive; the classes below are only the ones nothing
   above already covers.
   ========================================================================= */

/* Deactivated athlete: views/partials/athlete-row.ejs's own header comment has
   promised "55% opacity" since the shell task, but nothing ever defined the
   class — this is the first view that actually needs it (the report header's
   "(inactive)" tag). */
.inactive { opacity: .55; }

/* ---- meta row: testing window + Print / One-pager links ---- */
.cs-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 14px; }
.cs-meta-links { display: flex; align-items: center; gap: 16px; }
.cs-meta-links a { font-size: 12.5px; font-weight: 700; }
.cs-locked-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* ---- athlete heading (name + inactive tag + position/team/grad line) ---- */
.cs-athlete-heading { margin-bottom: 14px; }
.cs-athlete-heading h1 { margin-bottom: 2px; }

/* ---- category section headers + the untested-tests collapse line ---- */
.cs-cathead {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--dp2-hairline-soft);
}
.cs-cathead:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cs-untested-line { font-size: 12.5px; color: var(--muted); padding: 4px 2px 2px; }

/* ---- goal bar (report card test cards, history table, staff goal setter),
   ported in spirit from ../portal/public/styles.css's .p1-goal* rules — those
   never shipped in this app's Phase 1 cut, so they are new here, not moved. ---- */
.p1-goal { margin-top: 8px; }
.p1-goalmet { display: inline-block; font-size: 11.5px; font-weight: 700; color: var(--good); margin-right: 6px; }
.p1-goaltxt { font-size: 11.5px; color: var(--muted); }
.p1-goalbar { display: block; height: 6px; border-radius: 99px; background: var(--well); overflow: hidden; margin-top: 4px; }
.p1-goalbar i { display: block; height: 100%; background: var(--club-primary); border-radius: 99px; }
.p1-goalpct { font-size: 11px; font-weight: 700; color: var(--muted); margin-left: 6px; }
.p1-goalcell { display: block; margin-top: 2px; color: var(--muted); }
.p1-goalcell.met { color: var(--good); font-weight: 700; }

/* ---- next-milestone card ---- */
.cs-milestone { border-left: var(--dp2-rail) solid var(--gold-bright); }
.cs-milestone-test {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 17px; font-weight: 700; margin-top: 4px;
}
.cs-milestone-sub { margin-top: 4px; }

/* ---- desktop-only full-history table (mobile gets the test-card grid instead) ---- */
.cs-desktop-only { display: none; }
@media (min-width: 720px) { .cs-desktop-only { display: block; } }

/* ---- staff panel: coach-note editor, goal setter, deactivate toggle ---- */
.cs-staffpanel { margin-top: 30px; padding-top: 10px; border-top: 2px solid var(--dp2-hairline); }
.cs-charcount { text-align: right; margin-top: 2px; }
.cs-goalrow { padding: 12px 0; border-bottom: 1px solid var(--dp2-hairline-soft); }
.cs-goalrow:last-child { border-bottom: 0; }
.cs-goalrow-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cs-goalrow-name { font-weight: 700; font-size: 13.5px; }
.cs-goalrow-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-goalrow-form input { width: auto; flex: 1 1 110px; }
.cs-goalrow-form input[name="target"] { flex: 0 1 90px; }
.cs-deactivated-banner { margin-bottom: 14px; }

/* ---- standalone print sheet (views/athlete-print.ejs), ported in spirit from
   ../portal/views/print.ejs — same shape, this app's own dp2/cs tokens instead
   of the portal's local ones. ---- */
.printpage { color-scheme: light; background: #FFFFFF; }
.print-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--well); flex-wrap: wrap; }
.print-sheet { max-width: 900px; margin: 0 auto; padding: 28px 30px 40px; }
.print-band { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.print-band-name {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px;
}
.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 3px solid var(--dp-brand); padding-bottom: 14px; margin-bottom: 16px; }
.print-head h1 { font-size: 20px; letter-spacing: .04em; margin: 0; }
.print-head .tagline { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.print-meta { display: flex; flex-direction: column; gap: 2px; text-align: right; font-size: 12.5px; white-space: nowrap; }
.highlights { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.hl { border: 1px solid var(--dp2-card-border-c); border-radius: 10px; padding: 8px 14px; }
.hl.good { border-color: var(--good-line); background: var(--good-bg); }
.hl small { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.hl strong { font-size: 15px; }
.print-note { background: var(--well); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.print-note small { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.print-foot { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 11px; }
.legend { margin-top: 10px; }
table.report { width: 100%; border-collapse: collapse; }
table.report th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--chrome-fg); background: var(--chrome); padding: 6px 8px;
}
table.report td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
table.report td.good { color: var(--good); font-weight: 700; }
table.report td.bad { color: var(--bad); font-weight: 700; }
table.report td.spark svg { display: block; }
@media print {
  .noprint { display: none !important; }
  body { background: #fff; }
}

/* ---- recruiting one-pager (views/recruiting.ejs) — shares the print sheet's
   table.report/.print-band styling above, adds only its own header block. ---- */
.rp-sheet { max-width: 820px; margin: 0 auto; padding: 26px 30px 40px; }
.rp-head { border-bottom: 3px solid var(--dp-brand); padding-bottom: 12px; margin-bottom: 18px; }
.rp-name { font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif; font-size: 26px; font-weight: 700; margin: 8px 0 0; }
.rp-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.rp-verify { margin-top: 18px; padding: 10px 14px; background: var(--well); border-radius: 10px; font-size: 12px; color: var(--muted); }

@media (pointer: coarse) {
  .cs-meta-links a { min-height: var(--dp-btn-h-sm); display: inline-flex; align-items: center; }
}

/* ============================================================================
   CLUB-ADMIN PAGES — /people, /settings, /analytics, /analytics/club
   (routes/club-admin.js + views/people.ejs, settings.ejs, analytics.ejs,
   analytics-club.ejs). Appended per this file's owner-adds-only-at-the-end
   convention (see this task's brief and every section header above it). Reuses
   every existing dp2-/p1-/cs- primitive (.card, .cs-grid, .cs-form-row,
   .cs-table, .cs-tier-pill from partials/locked-card.ejs, .checkline, .btn,
   .linklike, .inline-form, .error-notice/.notice) — the classes below are only
   the shapes nothing above already covers.
   ========================================================================= */

/* ---- /people: invite box + member cards ---- */
.cs-invite-box { border-left: var(--dp2-rail) solid var(--club-primary); }
.cs-invite-link {
  word-break: break-all; background: var(--well); border-radius: 8px; padding: 10px 12px;
  margin: 6px 0; font-size: 13px; user-select: all;
}
.cs-people-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.cs-person-card { margin: 0; }
.cs-person-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cs-person-name { font-weight: 700; font-size: 14.5px; }
.cs-lastseen { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* "never" badge — the portal's own insight this task ports: a member who has
   never signed in usually means a typo'd email, so it earns a warn tone rather
   than reading like an ordinary muted fact. */
.cs-lastseen-never {
  color: var(--warn); background: var(--warn-bg); border-radius: 99px; padding: 3px 9px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cs-person-sub { margin-top: 6px; }
.cs-person-sub a { font-weight: 600; }
.cs-team-checks { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dp2-hairline-soft); display: flex; flex-direction: column; gap: 4px; }
.cs-team-checks .btn { align-self: flex-start; margin-top: 6px; }
.cs-person-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dp2-hairline-soft); }
.cs-inline-form select { width: auto; padding: 6px 8px; font-size: 12.5px; }

/* ---- /settings ---- */
.cs-label-stack { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cs-branding-card { display: flex; flex-direction: column; gap: 14px; }
.cs-branding-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.cs-brand-band {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--dp2-r-card);
  flex: 1 1 220px; min-width: 200px;
}
.cs-brand-band-crest { display: flex; flex: none; }
.cs-brand-band-crest svg { display: block; }
.cs-brand-band-name {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 15px;
}
.cs-contrast-readout { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12.5px; }
.cs-contrast-readout div { display: flex; justify-content: space-between; gap: 12px; min-width: 200px; }
.cs-contrast-readout dt { color: var(--muted); font-weight: 500; }
.cs-contrast-readout dd { margin: 0; font-weight: 700; }
.cs-logo-preview { display: flex; flex-direction: column; gap: 6px; }
.cs-logo-img { max-width: 120px; max-height: 80px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--dp2-card-border-c); background: var(--well); padding: 6px; }
.cs-color-swatch { width: 44px; min-width: 44px; height: 44px; padding: 2px; border-radius: 8px; align-self: flex-end; }

.cs-tier-card { display: flex; flex-direction: column; gap: 6px; }
.cs-tier-current { border-color: var(--club-primary); border-width: 2px; }
.cs-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-tier-name {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 14px;
}
.cs-tier-price {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 26px; font-weight: 700; margin-top: 2px;
}
.cs-tier-features { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cs-tier-features li { padding-left: 16px; position: relative; }
.cs-tier-features li::before { content: "\2022"; position: absolute; left: 2px; color: var(--club-primary); }

/* ---- /analytics ---- */
.cs-compare-card { text-align: center; }
.cs-compare-good { color: var(--good); }

/* ---- /analytics/club ---- */
.cs-strip-card { display: flex; flex-direction: column; gap: 10px; }
.cs-strip-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; }
.cs-strip-team { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-strip-svg svg { display: block; width: 100%; height: auto; }
.cs-strip-vals { white-space: nowrap; }
@media (max-width: 560px) {
  .cs-strip-row { grid-template-columns: 1fr; gap: 4px; }
  .cs-strip-vals { order: 3; }
}

@media (pointer: coarse) {
  .cs-inline-form select, .cs-color-swatch { min-height: var(--dp-btn-h-sm); }
}

/* ============================================================================
   SECTION 3 — HQ console (routes/hq.js, views/hq/*.ejs). DPT-branded, NEVER
   club-branded: every rule below uses this file's Section 1 tokens (--navy,
   --card, --line, --muted, etc) directly, never a --club-* custom property —
   an HQ page renders with no res.locals.brandStyle in its <head> at all, so a
   --club-* var would simply be undefined here. Class prefix `hq-`, kept
   entirely separate from Section 2's `cs-` (club shell) prefix even where the
   shape is similar, so a future find-and-replace on one never touches the
   other. Reuses Section 1/2 primitives as-is where they already fit exactly
   (.card, .btn, .stack, .notice, table.cs-table, .cs-table-scroll) rather than
   duplicating them under an hq- name.
   ========================================================================= */

.hidden { display: none !important; }

.hq-band {
  display: flex; align-items: center; gap: 18px; padding: 12px 20px;
  /* Fixed DPT app chrome, SAME in both themes — never a semantic alias here.
     --navy aliases to --dp-text, which is LIGHT in dark mode: that painted a
     light band under this band's hardcoded light text (reported by Jon
     2026-08-21). --dp-ink-deep is the raw never-flipping chrome ink. */
  background: var(--dp-ink-deep, #0D1117); color: #F4F4F4; flex-wrap: wrap;
}
.hq-band-brand { display: flex; align-items: center; gap: 10px; color: #F4F4F4; }
.hq-band-brand:hover { text-decoration: none; }
.hq-dmark { height: 28px; width: auto; display: block; }
.hq-band-title {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 14px;
}
.hq-band-nav { display: flex; gap: 16px; flex: 1; }
.hq-band-nav a { color: #C7CDD6; font-weight: 600; font-size: 13.5px; }
.hq-band-nav a.is-active, .hq-band-nav a:hover { color: #F4F4F4; text-decoration: none; }
.hq-band-right { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #C7CDD6; }
.hq-band-right .linklike { color: #C7CDD6; }
.hq-band-right .linklike:hover { color: #F4F4F4; }

.hq-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }

.hq-club-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
@media (min-width: 640px) { .hq-club-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .hq-club-grid { grid-template-columns: repeat(3, 1fr); } }
.hq-club-card { display: block; color: var(--ink); }
.hq-club-card:hover { text-decoration: none; border-color: var(--navy-2); }
.hq-club-card.hq-offboarded { opacity: .6; }
.hq-club-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hq-club-name { font-weight: 700; font-size: 15px; }
.hq-club-stats { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }

.hq-tier-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 99px; padding: 3px 10px; background: var(--well); color: var(--muted);
}
.hq-tier-performance { background: var(--good-bg); color: var(--good); }
.hq-tier-elite { background: color-mix(in srgb, var(--gold-bright) 25%, transparent); color: var(--gold); }
.hq-status-pill {
  display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 99px; padding: 3px 10px; background: var(--bad-bg); color: var(--bad);
}
.hq-warn { color: var(--bad); font-weight: 700; }

.hq-form-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; align-items: end; }
@media (min-width: 640px) { .hq-form-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.hq-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hq-form-grid input, .hq-form-grid select { margin-top: 0; }
.hq-form-grid .btn { align-self: end; }

.hq-branding-grid { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.hq-branding-grid form { flex: 1 1 380px; }
.hq-crest-preview { flex: 0 0 auto; text-align: center; max-width: 140px; }
.hq-crest-preview svg { display: block; margin: 0 auto; }

.hq-ent-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hq-ent-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.hq-ent-row:last-child { border-bottom: 0; }
.hq-ent-name { flex: 1 1 200px; font-weight: 600; font-size: 13px; text-transform: capitalize; }
.hq-ent-row label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.hq-ent-row input[type="radio"] { width: auto; }

.hq-invite-result { margin-top: 12px; }
.hq-copy-row { display: flex; gap: 8px; margin-top: 4px; }
.hq-copy-row input { flex: 1; }

.hq-row-actions { display: flex; gap: 10px; flex-wrap: wrap; white-space: nowrap; }
.hq-inline-form { display: inline-block; }
.hq-inline-form select { width: auto; padding: 6px 8px; }

.hq-palette-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.hq-palette-swatch {
  display: flex; border-radius: 8px; overflow: hidden; width: 44px; height: 28px;
  border: 1px solid var(--line);
}
.hq-palette-swatch span { flex: 1; display: block; }
.hq-palette-swatch:hover { border-color: var(--navy-2); }

.hq-demo-preview {
  display: flex; align-items: center; gap: 14px; border-left: 6px solid transparent; padding: 18px 20px;
}
.hq-demo-preview svg { flex: 0 0 auto; display: block; }
.hq-demo-preview-name {
  font-family: "Oswald", "Roboto Condensed", "Segoe UI", Arial, sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: .02em;
}
.hq-demo-preview-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }

@media (pointer: coarse) {
  .hq-club-card, .hq-palette-swatch { min-height: 44px; }
}