/* ============================================================
   ATHLETIC SPECIMEN — styles.css
   ============================================================ */

/* ── Design tokens ── */
:root {
  /* direction-A "Clean Light" — canonical names (used by C26 components) */
  --bg:          oklch(0.985 0.003 75);   /* warm-stone app background */
  --card:        oklch(0.97 0.003 75);    /* card / surface */
  --border:      oklch(0.90 0.005 75);
  --ink:         oklch(0.18 0.005 75);     /* primary text */
  --muted:       oklch(0.50 0.005 75);     /* secondary text / labels */
  --faint:       oklch(0.62 0.005 75);     /* tertiary text / icon stroke */
  --accent:      oklch(0.55 0.07 240);     /* muted blue — single accent */
  --accent-soft: oklch(0.96 0.015 240);    /* accent tint (avatar bg, pills, icon tiles) */
  --live:        oklch(0.55 0.09 150);     /* muted green — live/positive/checked-in */
  --live-soft:   oklch(0.96 0.03 150);     /* muted-green tint — live status pill bg */
  --warn:        oklch(0.58 0.10 70);      /* amber — admin cautions only */
  /* dashboard remake (Slice 1, 2026-07-08) — used by the pd-* component kit */
  --accent-bd:   oklch(0.86 0.03 240);     /* accent border — pills, You-highlight, claim card */
  --live-ink:    oklch(0.40 0.09 150);     /* live text on live-soft */
  --gold:        oklch(0.62 0.08 78);      /* champion/records accent (matte, non-neon per §51) */
  --gold-soft:   oklch(0.92 0.06 85);
  --gold-bd:     oklch(0.82 0.07 85);
  --gold-ink:    oklch(0.46 0.06 78);      /* gold text on gold-soft — champions strip / Completed pill / champ game (Slice 2) */
  --font-display: 'Barlow Semi Condensed', 'Inter', sans-serif;  /* public display face (atom-up 2026-07-10) */
  --wm-opacity: .07;                                             /* tamed watermark strength */
  --shadow:      0 1px 2px oklch(0.18 0.005 75 / .06), 0 4px 14px oklch(0.18 0.005 75 / .05);

  /* legacy aliases — re-pointed to direction-A so existing components reskin coherently */
  --brand:        var(--accent);
  --brand-dark:   oklch(0.48 0.08 240);
  --brand-light:  var(--accent-soft);
  --brand-ring:   oklch(0.55 0.07 240 / .18);
  --success:      var(--live);
  --success-light:oklch(0.95 0.03 150);
  --success-border:oklch(0.88 0.05 150);
  --danger:       oklch(0.55 0.16 25);
  --danger-dark:  oklch(0.48 0.16 25);
  --danger-light: oklch(0.95 0.03 25);
  --danger-soft:  oklch(0.95 0.03 25);   /* C36 T5: danger tint for status/notice backgrounds */
  --surface:      var(--card);
  --surface-2:    var(--bg);
  --surface-3:    oklch(0.95 0.004 75);
  --border-2:     oklch(0.85 0.006 75);
  --text:         var(--ink);
  --text-2:       oklch(0.30 0.005 75);
  --text-3:       var(--muted);
  --text-4:       var(--faint);
  --shadow-sm:    0 1px 2px oklch(0.18 0.005 75 / .06);
  --shadow-md:    var(--shadow);
  --r-sm: 8px; --r-md: 13px; --r-lg: 16px;
}

/* ── Reset ── */
/* Smoothness reliability check (2026-06-22, HIGH H1): kill the default iOS Safari grey
   tap-highlight box that flashed on nearly every tap (only 3 selectors opted out before),
   the single most pervasive "default-browser, not a designed app" tell. Mirrors checkin.html's
   global rule. Intentional :active feedback below replaces it. */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ── Base ── */
html, body {
  touch-action: manipulation;
  font-size: 16px !important;
  overscroll-behavior: none;
  height: 100%;
}
/* Body needs 1px of scrollable height so iOS status-bar tap (clock tap)
   can dispatch a scroll-to-top event; we forward it to the active tab panel. */
body {
  min-height: calc(100% + 1px);
  overflow-y: auto;
}
html { overflow: hidden; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--surface-3);
  color: var(--text);
}
/* direction-A brand/display face */
h1, h2, h3, h4, .statbig .n, .score, .av { font-family: 'Sora', 'Inter', sans-serif; }

/* ── Layout ── */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px;
}

/* ===================================================================
   C48.6 (Option A) — centered & balanced empty/idle states.
   Shared primitives used by the Scores empty state and (via .courts-empty)
   the Courts empty board. .tab-panel is position:absolute; inset:0 inside
   #app-content, so it has a definite height = the available viewport between
   the header and bottom-nav. min-height:100% on the centering wrapper therefore
   resolves to that height and lets us vertically center the idle block at both
   390px and desktop, off the dvh-based shell. Tokens only, subtle line icons.
   =================================================================== */
/* The centering wrapper resolves min-height against its parent, so the parent .container
   must itself fill the panel. Scope to panels that actually hold an .idle-center so the
   content-present layouts (normal block flow) are untouched. */
.tab-panel > .container:has(> .idle-center) {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.idle-center {
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 12px;
  box-sizing: border-box;
}
.idle-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 320px;
}
.idle-mark {
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  color: var(--accent);
  opacity: 0.85;
}
.idle-mark svg { width: 100%; height: 100%; display: block; }
.idle-title {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.idle-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ── Typography ── */
.title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}

.small { font-size: 0.875rem; color: var(--text-3); }

h2 { font-size: 1.1rem;  font-weight: 700; margin: 0 0 .5rem;  color: var(--text); }
h3 { font-size: 1rem;    font-weight: 600; margin: 0 0 .4rem;  color: var(--text); }
h4 { font-size: .9rem;   font-weight: 600; margin: 0 0 .35rem; color: var(--text-2); }

ul { margin: 0; padding-left: 1rem; }

/* ── Cards ── */
.card {
  background: var(--surface);
  padding: 14px;
  margin-bottom: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.card-collapsible-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.card-collapsible-head h2,
.card-collapsible-head h3 { margin: 0; }

.card-collapsible-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.card-collapse-body.is-collapsed { display: none; }
.card-collapse-toggle {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 13px;
  white-space: nowrap;
}

/* ── Buttons ── */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  transition: background .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
  min-height: 38px;
  text-decoration: none;
  font-size: 16px !important;
}
button:hover  { background: var(--brand-dark); }
button:active { transform: translateY(1px); }

button.secondary {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
}
button.secondary:hover { background: var(--surface-3); border-color: var(--border-2); }

button.danger { background: var(--danger); color: #fff; border-color: transparent; }
button.danger:hover { background: var(--danger-dark); }

button.success,
button.winner  { background: var(--success); color: #fff; border-color: transparent; }
button.success:hover,
button.winner:hover  { background: #15803d; }

/* ── Inputs & selects ── */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  flex: 1;
  min-width: 0;
  font-size: 16px !important;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  height: 40px;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 16px !important;
  height: 40px;
  cursor: pointer;
}
select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* ── App Shell ── */
#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh; /* fallback */
  height: 100dvh; /* dvh = the VISIBLE viewport on iOS so the bottom nav isn't pushed off-screen */
  overflow: hidden;
}

#app-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 6px 16px;
  /* viewport-fit=cover (C26 4c): clear the iOS notch / status bar so the strip isn't hidden under it */
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  min-height: 0;
}

.app-header-version {
  font-size: .72rem;
  font-weight: 600;
  color: var(--faint);
  line-height: 1.2;
}

/* D3: PUBLIC/ADMIN shell-mode label (was an inline style on the span). */
.app-header-mode {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.app-header-mode.is-admin { color: var(--danger); }

.app-version-inline {
  display: inline-block;
  margin-left: .35rem;
  font-size: .68em;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  vertical-align: middle;
}

.app-version-pill {
  display: inline-block;
  margin-left: .45rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  font-size: .67em;
  font-weight: 600;
  vertical-align: middle;
}

#app-header #js-sync-notice {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  text-align: right;
  color: var(--muted);
  line-height: 1.2;
  flex-shrink: 0;
}

.shared-sync-notice { text-align: right; margin: 0; }
.shared-sync-notice.is-live      { color: var(--muted); }
.shared-sync-notice.is-pending   { color: var(--faint); }
.shared-sync-notice.is-fallback  { color: var(--danger); font-weight: 600; }

#app-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.tab-panel {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
}
.tab-panel.active { display: block; }
/* Players tab: leave horizontal room on the right edge for the A–Z jump strip
   so every row (search, filters, cards, etc.) is consistently narrower. */
#tab-players { padding-right: 30px; }
/* iPhone fix (2026-06-22, C48.9): the 30px right-inset above reserves room for the admin roster's
   A–Z jump strip — but the PUBLIC Check In kiosk is also #tab-players and has NO A–Z strip, so that
   inset just shoved the kiosk left (off-center, more gap on the right). Mike: "still not centered on
   either side." Drop the inset only on the kiosk so it's symmetric; the admin roster keeps it. */
#tab-players:has(.ci-kiosk) { padding-right: 0; }
/* Override the global sticky-search-bar's negative right margin within the
   Players tab so it stops at the container edge like every other row. */
#tab-players .sticky-search-bar { margin-right: 0; margin-left: 0; }

/* ── Players tab: sticky search + back-to-top ── */
.sticky-search-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  margin: 6px -14px 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
#player-search-container {
  position: relative;
  display: flex;
  align-items: center;
}
#player-search {
  width: 100%;
  padding: 8px 36px 8px 12px !important;
  border-radius: var(--r-md);
}
#player-search-clear {
  position: absolute;
  right: 10px;
  font-size: 16px;
  color: var(--text-3);
  cursor: pointer;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}

/* Back to top button */
#back-to-top {
  display: none;
  position: fixed;
  /* Wave 1e: the bottom nav grows by env(safe-area-inset-bottom) on notched iPhones, so a static
     80px floated this over the rightmost nav tab. Offset by the same inset to clear it. */
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 16px;
  z-index: 900;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  transition: opacity .2s, transform .2s;
  opacity: 0;
  transform: translateY(8px);
}
#back-to-top.visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

#bottom-nav {
  flex-shrink: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  min-height: 60px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* DT1 (Mike: Option B, 2026-06-30) — on desktop keep the header + bottom-nav as
   full-bleed bars but CENTER their content so the nav items don't maroon at the screen
   edges; the content stays the 900px .container column. Desktop-only; mobile untouched. */
@media (min-width: 1024px) {
  #app-header { justify-content: center; }
  #bottom-nav { justify-content: center; }
  #bottom-nav .nav-btn { flex: 0 0 150px; }
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-4);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: color .12s;
  line-height: 1;
  min-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn svg    { width: 22px; height: 22px; }
.nav-btn.active { color: var(--brand); font-weight: 600; }
.nav-btn:hover:not(.active) { color: var(--text-3); }

/* ── Admin Toolbar ── */
.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.admin-toolbar select {
  flex: 1 1 150px;
  min-width: 150px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  border-color: var(--brand-ring);
}
.admin-toolbar-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.admin-toolbar button {
  white-space: nowrap;
  min-height: 44px;
  padding: 0 12px;
  font-size: 13px !important;
  flex-shrink: 0;
}

/* ── Checkin Stats Card ── */
.checkin-stats-card {
  background: var(--brand-light);
  border: 1px solid var(--brand-ring);
  border-radius: var(--r-md);
  padding: 12px 16px 10px;
  margin-bottom: 10px;
}
.checkin-stat-hero {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}
.checkin-stat-num   { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--brand); }
.checkin-stat-label { font-size: .9rem; color: var(--text-3); font-weight: 500; }

.checkin-group-breakdown { display: flex; flex-direction: column; gap: 4px; }
.checkin-group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: var(--surface);
  border-radius: 6px;
  border: 1px solid var(--accent-soft);
  font-size: .85rem;
}
.checkin-group-name     { color: var(--text-2); font-weight: 500; }
.checkin-group-fraction { font-weight: 600; color: var(--brand); }
.checkin-group-sep      { color: var(--text-4); margin: 0 2px; }
.checkin-stats-group-label { text-align: center; color: var(--text-3); font-size: .85rem; margin: 0; }

/* ── Player Cards ── */
.players {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Roster header (compact: title + add + overflow toolbar) ── */
.roster-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.roster-title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.15rem; }
.roster-count { color: var(--accent); font-weight: 700; }
.roster-scope { font-weight: 500; color: var(--muted); }
.roster-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.roster-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.roster-add:hover { background: var(--brand-dark); }
.roster-head .admin-toolbar { margin-bottom: 0; padding: 6px 8px; flex: 1 1 auto; }

/* ── Recent Actions (collapsible) ── */
.recent-actions-card { margin-top: 0; }
.recent-actions-summary {
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.recent-actions-summary::-webkit-details-marker { display: none; }
.recent-actions-summary h3 { margin: 0; display: flex; align-items: center; gap: 6px; }
.recent-actions-summary h3::after { content: '▸'; color: var(--faint); font-size: .85em; }
.recent-actions-card[open] .recent-actions-summary h3::after { content: '▾'; }

/* ── Filter chips ── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--surface-3); }
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.chip.on:hover { background: var(--brand-dark); }
#btn-select-all-visible { margin-left: auto; }

/* visually-hidden source-of-truth controls (chips drive the same state) */
.sr-only-control {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* revealed group / skill sub-controls */
.filter-sub { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-sub.is-open { display: flex; }
.filter-sub label { font-size: .85rem; color: var(--muted); font-weight: 600; }

/* ── A–Z jump strip (iOS Contacts style) ── */
.players-az-strip {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  padding: 4px 6px; /* wider horizontal padding = bigger touch target than the visual letter */
}
.az-letter {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 700;
  color: var(--brand);
  background: transparent;
  border: 0;
  padding: 0 !important;
  margin: 0;
  min-width: 0;
  min-height: 0;
  width: 22px;
  height: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.az-letter.is-empty {
  color: var(--text-4);
  opacity: .35;
  pointer-events: none;
}
.az-letter.is-active,
.az-letter:active {
  color: var(--brand-dark);
  transform: scale(1.4);
}

/* ── Dense one-line roster row (.prow) ── */
.player-card.prow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 10px;
  margin: 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, background .12s, border-color .12s;
}
.player-card.prow.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--brand-ring);
  background: var(--brand-light);
}

.prow .player-select {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  accent-color: var(--accent);
  touch-action: manipulation;
  box-sizing: border-box;
}

.prow-av {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--brand-dark);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.prow-id {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.prow .player-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.prow .player-name {
  font-size: .96rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prow .skill-pill {
  font-size: .72rem;
  background: var(--accent-soft);
  color: var(--brand-dark);
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.prow-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* In/Out big toggle (keeps .btn-checkin / .btn-checkout hooks) */
.prow .tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  min-width: 64px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.prow .tg .tg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.prow .btn-checkin.tg {
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}
.prow .btn-checkin.tg:hover { background: var(--border); }
.prow .btn-checkout.tg.in {
  background: var(--live-soft);
  color: var(--live);
  border: 1px solid color-mix(in oklch, var(--live) 35%, transparent);
}
.prow .btn-checkout.tg.in:hover { background: color-mix(in oklch, var(--live-soft) 80%, var(--live) 8%); }

/* ── C48.5: grouped collapsible roster sections (admin Players "Option C") ── */
.roster-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* small breathing room between sections (the .players flex gap handles 4px; this adds the
   section separation without doubling the row-to-row gap inside a body) */
.roster-group + .roster-group { margin-top: 8px; }

.roster-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 6px 6px;
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .12s;
}
.roster-group-head:active { background: var(--accent-soft); }

.roster-group-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-group-count {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 8px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

.roster-group-caret {
  flex: 0 0 auto;
  color: var(--faint);
  transform: rotate(90deg); /* chevron points down when expanded */
  transition: transform .15s ease;
}
.roster-group.is-collapsed .roster-group-caret { transform: rotate(0deg); } /* points right when collapsed */

.roster-group-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}
.roster-group.is-collapsed .roster-group-body { display: none; }

.player-groups-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.status-pill {
  font-size: .73rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.status-pill.in {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success-border);
}
.status-pill.out {
  background: var(--surface-3);
  color: var(--text-4);
  border: 1px solid var(--border);
}

.player-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  align-self: flex-end; /* sit at bottom-right so the top-right status pill has clear space */
}

.player-status-corner {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: .68rem;
  padding: 1px 7px;
  z-index: 1;
}

.player-card-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Check in / out buttons inside cards */
.btn-checkin,
.btn-checkout {
  padding: 6px 12px;
  font-size: 14px !important;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  min-height: 40px;
  min-width: 72px;
  height: 40px;
}
.btn-checkin { background: var(--brand); color: #fff; border-color: transparent; }
.btn-checkin:hover { background: var(--brand-dark); }
.btn-checkout { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border); }
.btn-checkout:hover { background: var(--border); }

/* legacy — .primary on checkin/checkout was removed but keep compat */
.card-actions { display: none; }

/* ── Player groups ── */
.player-groups-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.player-group-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 500;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.player-group-badge.is-primary {
  background: var(--accent-soft);
  color: var(--brand-dark);
  border-color: var(--accent);
  font-weight: 600;
}
.player-group-none { color: var(--text-4); font-size: .75rem; }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-2);
  font-size: 12px;
}

/* ── legacy status/skill classes (keep for compat) ── */
.status.in  { color: var(--success); font-weight: 600; }
.status.out { color: var(--text-3); }
.skill, .status { font-size: .875rem; display: block; margin-top: .25rem; }
.msg { margin-top: 8px; font-size: .875rem; color: var(--success); }
.placeholder { color: var(--text-4); display: block; padding: 4px 0; }
.spacer { flex: 1; }

/* ── Edit Row (inline player edit) ── */
.player-card .edit-row {
  display: none !important;
  grid-template-columns: 1fr 80px 140px auto;
  gap: 8px;
  align-items: start;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.player-card .edit-row.show { display: grid !important; }

.edit-row input {
  box-sizing: border-box;
  height: 38px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  width: 100%;
}

.edit-actions { display: flex; gap: 6px; }
.btn-save-edit {
  height: 38px;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--success);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.btn-save-edit:hover  { background: #15803d; }
.btn-cancel-edit      { height: 38px; padding: 0 12px; }

/* ── Group select (in edit row) ── */
.group-select { position: relative; display: inline-block; }
.group-select .group-btn {
  height: 38px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
  font-size: 14px !important;
}
.group-select .group-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  border-radius: 8px;
  display: none;
  min-width: 160px;
  padding: 4px;
}
.group-select.open .group-list { display: block; }
.group-list .group-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px !important;
  min-height: 0;
}
.group-list .group-item:hover { background: var(--surface-3); }

.group-chips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }

.admin-groups-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  padding: 2px 8px;
}
.admin-groups-chip.is-primary {
  border-color: var(--success-border);
  background: var(--live-soft);
  color: var(--live);
  font-weight: 600;
}
.admin-groups-empty       { color: var(--text-4); }
.admin-groups-context-note { display: inline-flex; align-self: center; font-size: 12px; color: var(--text-3); }

/* ── Admin player form ── */
.row.admin-player-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(92px, .55fr) minmax(260px, 1.8fr) auto;
  align-items: start;
  gap: 8px;
  margin-top: 0;
}
.row.admin-player-form-row > #admin-player-name  { min-width: 0; }
.row.admin-player-form-row > #admin-player-skill { width: 100%; max-width: 120px; min-width: 92px; }
.row.admin-player-form-row > .admin-player-save-btn { min-height: 38px; align-self: start; white-space: nowrap; }

.admin-player-groups-field { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-player-groups-field input { width: 100%; }
.admin-player-groups-help   { font-size: 12px; color: var(--text-3); line-height: 1.3; margin-top: 2px; }
.admin-player-groups-preview {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 1rem; margin-top: 2px; padding-top: 4px;
  border-top: 1px dashed var(--border);
}

/* ── Filters section ── */
#filtersBody {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── Floating bulk bar ── */
#bulkBar.bulkbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(74px + env(safe-area-inset-bottom, 0px)); /* clears the bottom nav */
  z-index: 1200;
  width: min(720px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 28px oklch(0.18 0.005 75 / .18);
}
.bulkbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}
.bulkbar-inner #bulkCount { font-weight: 700; }
.bulkbar-spacer { flex: 1 1 auto; }
.bulkbar-grouplabel { font-size: .85rem; color: var(--muted); font-weight: 600; }
#bulkBar button,
#bulkBar select { min-height: 40px; }
#bulkBar select:disabled { opacity: .6; cursor: not-allowed; }
/* C47 (rank 16): on phones, keep the bulk bar to ONE horizontally-scrollable row instead of wrapping
   to 3+ rows over the last roster cards. */
@media (max-width: 700px) {
  .bulkbar-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bulkbar-inner .bulkbar-spacer { display: none; }
  #bulkBar button, #bulkBar select, #bulkBar .bulkbar-grouplabel { flex-shrink: 0; white-space: nowrap; }
}

/* ── Popups / Modals ── */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(15,23,42,.5);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.popup-card {
  width: min(640px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem); /* dvh wins where supported so Save/Cancel never clip under the iOS toolbar */
  overflow: auto;
  margin: 0;
}
/* C47: kiosk "tap a name -> confirm" popup (Option A center modal; reuses .popup-overlay/.popup-card). */
.kc-card { width: min(360px, calc(100vw - 2rem)); text-align: center; padding: 26px 22px 22px; }
.kc-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.kc-name { font-family: 'Sora','Inter',sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; word-break: break-word; color: var(--ink); }
.kc-q { color: var(--muted); font-size: 15px; margin: 6px 0 22px; }
.kc-confirm, .kc-cancel { display: block; width: 100%; padding: 16px 20px; border-radius: 12px; font-size: 17px; font-weight: 600; font-family: inherit; cursor: pointer; }
.kc-confirm { border: none; background: var(--accent); color: #fff; }
.kc-confirm-danger { background: var(--danger); }
.kc-confirm:active { transform: scale(.985); }
.kc-cancel { border: 1px solid var(--border); background: var(--card); color: var(--ink); margin-top: 10px; }
.kc-cancel:active { transform: scale(.985); }
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.popup-header h3 { margin: 0; }
.popup-body { display: block; }

/* ── Player edit popup form ── */
.popup-edit-row {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
}
.popup-edit-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 6px;
}
.popup-edit-input {
  width: 100%;
  padding: 10px 12px !important;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px !important;
  box-sizing: border-box;
}
.popup-edit-row .group-select { width: 100%; margin-top: 2px; }
.popup-edit-row .group-btn {
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  padding: 0 12px;
  font-size: 15px;
  cursor: pointer;
}
.popup-edit-row .group-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-top: 4px;
  display: none;
}
.popup-edit-row .group-select.open .group-list { display: block; }
.popup-edit-row .group-chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.popup-edit-row .btn-save-edit,
.popup-edit-row .btn-cancel-edit { flex: 1; min-height: 44px; font-size: 15px !important; }
.popup-edit-row .edit-actions { display: flex; gap: 8px; }

/* ── Checkin (public view) ── */
.card-checkin h2  { margin: 0 0 10px; }
.card-checkin .checkin-actions { align-items: stretch; gap: 8px; margin-top: 8px; }
.card-checkin .checkin-actions button { flex: 1 1 140px; min-height: 46px; font-size: 15px !important; font-weight: 600; }

.card-register h2     { margin: 0 0 10px; }
.card-register button { width: 100%; min-height: 46px; font-size: 15px !important; }

/* ── Admin login ── */
.card.card-login h2 { margin: 0 0 10px; }

/* ── Session empty state ── */
.session-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-top: 1rem;
  box-shadow: var(--shadow-sm);
}
.session-empty-icon svg { width: 56px; height: 56px; color: #93c5fd; margin-bottom: 1rem; }
.session-empty-title { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0 0 .5rem; }
.session-empty-desc  { color: var(--text-3); font-size: .95rem; max-width: 300px; line-height: 1.6; margin: 0; }

/* ── Session tab ── */
.session-admin-card h3,
.session-info-card h3 { margin: 0 0 12px; }

.session-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.session-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-2);
  margin-top: 6px;
}
.session-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  box-sizing: border-box;
}
.session-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.session-form-actions button { flex: 1 1 140px; min-height: 42px; }

.session-info-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  margin: 0 0 10px;
}
.session-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
}
.session-detail-row:last-child { border-bottom: none; }

/* C36 T4 (§38 option B): unified session screen — title + form + inline "what players see" preview */
.session-title { font-family: 'Sora', 'Inter', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: -.3px; margin: 2px 2px 12px; color: var(--ink); }
.session-card-h { font-family: 'Sora', 'Inter', sans-serif; font-size: .95rem; font-weight: 700; margin: 0 0 12px; }
.session-input { border-radius: var(--r-md); }
.session-preview { margin-top: 14px; background: var(--accent-soft); border-radius: var(--r-md); padding: 12px 14px; }
.session-preview-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; }
.session-preview .session-detail-row { border-bottom: none; padding: 5px 0; font-size: .95rem; }
.session-preview .session-detail-icon svg { color: var(--accent); }
.session-detail-icon { flex-shrink: 0; width: 20px; display: flex; align-items: center; }
.session-detail-icon svg { width: 18px; height: 18px; color: var(--faint); display: block; }

/* ── Courts (Teams) tab — C36 T3 direction-A (run-the-night, nets-first) ── */
.team-size-label { font-size: .8rem; font-weight: 600; color: var(--text-2); margin: 0 0 8px; }
.team-size-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
/* .szc look: each size is a tappable card; accent tint, accent fill when active */
.team-size-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  min-height: 58px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.team-size-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.team-size-chip:active { transform: translateY(1px); }
.team-size-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.team-size-chip.is-active strong,
.team-size-chip.is-active span { color: #fff; }
.team-size-chip strong {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 1.35rem; font-weight: 700; color: var(--accent); line-height: 1;
}
.team-size-chip span { font-size: .72rem; color: var(--text-3); font-weight: 500; }

.teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

/* .tcard look: clean surface card, Sora team #, tokenized */
.generated-team {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.generated-team h4 {
  margin: 0 0 10px;
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.generated-team.is-drop-enabled { border-color: var(--accent); border-style: dashed; }
.generated-team.is-drop-target  {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
}
.generated-team.is-drop-target .team-drop-empty { border-color: var(--accent); background: var(--accent-soft); }

.team-player-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-player-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none; /* stop iOS claiming the gesture as vertical scroll before the drag threshold trips */
  min-height: 44px;
  transition: box-shadow .12s, border-color .12s, background .12s;
}
.team-player-card:hover  { border-color: var(--accent); }
.team-player-card:active { cursor: grabbing; }
.team-player-card .name  { font-weight: 600; font-size: .9rem; color: var(--text); }
.team-player-card .small { color: var(--text-3); font-weight: 600; }

.team-player-card.is-dragging   { opacity: .35; border-style: dashed; border-color: var(--accent); }
.team-player-card.is-swap-target {
  border-color: var(--live);
  background: var(--live-soft);
  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--live) 30%, transparent);
  transform: scale(1.02);
}

.team-drop-empty {
  border: 2px dashed var(--border-2);
  border-radius: var(--r-sm);
  padding: 12px 10px;
  text-align: center;
  background: var(--accent-soft);
  color: var(--text-3);
  font-size: .85rem;
}

.generated-team-dragging .team-player-card:not(.is-dragging) {
  transition: transform .1s, box-shadow .1s;
}

/* ── Generate teams controls ── */
.card-generate-teams h3 { margin-top: 0; }
.card-generate-teams .generate-teams-controls { align-items: center; }
.card-generate-teams .generate-teams-count    { display: inline-flex; align-items: center; gap: 6px; }
.card-generate-teams #group-count { width: 80px; min-width: 80px; flex: 0 0 80px; }
.card-generate-teams .generate-teams-controls button { min-height: 40px; }

/* ── Live Nets / matchups — .net look (the live action, front-and-center) ── */
.card-generate-teams .live-matchups-board {
  margin: 8px 0 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.card-generate-teams .live-matchups-board h4 { margin: 0 0 8px; }

.card-generate-teams .live-nets-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  justify-content: start;
  align-items: start;
}

.card-generate-teams .live-net-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  background: var(--surface);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.card-generate-teams .live-net-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 6px; margin-bottom: 8px;
}
.card-generate-teams .live-net-label {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent);
}
.card-generate-teams .live-net-match-label { color: var(--text-3); font-size: .8rem; text-align: right; }

.card-generate-teams .live-net-court {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-sm);
  padding: 8px;
  background: var(--accent-soft);
  min-height: 140px;
  flex: 1;
}

.card-generate-teams .live-net-team {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 48px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); padding: 6px;
  line-height: 1.2; gap: 2px; color: var(--text);
}
.card-generate-teams .live-net-team strong { font-size: .95rem; }
.card-generate-teams .live-net-team-size   { color: var(--text-3); font-size: .75rem; }

.card-generate-teams .live-net-divider {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent); display: inline-flex; align-items: center; gap: 4px; text-transform: uppercase;
}
.card-generate-teams .live-net-divider::before,
.card-generate-teams .live-net-divider::after { content: ''; width: 24px; border-top: 2px solid var(--border-2); }

.card-generate-teams .live-matchup-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; justify-content: center;
}
/* .wbtn — big Won buttons */
.card-generate-teams .live-matchup-result-btn {
  padding: 10px 14px; min-height: 46px; font-size: 14px !important; font-weight: 600;
  min-width: 120px; flex: 1 1 120px;
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2);
  transition: background .12s, border-color .12s, color .12s;
}
.card-generate-teams .live-matchup-result-btn:hover { background: var(--surface-3); border-color: var(--accent); }
/* recorded winner highlighted with --live-soft / --live */
.card-generate-teams .live-matchup-result-btn.is-selected {
  border-color: color-mix(in oklch, var(--live) 45%, transparent);
  background: var(--live-soft);
  color: var(--live); font-weight: 700;
}
.card-generate-teams .live-matchup-clear-btn {
  padding: 10px 14px; min-height: 46px; font-size: 14px !important;
  border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent); border-radius: var(--r-sm);
  background: var(--danger-light); color: var(--danger-dark);
}
.card-generate-teams .live-matchup-clear-btn:hover { background: color-mix(in oklch, var(--danger-light) 80%, var(--danger) 8%); }
.card-generate-teams .live-matchup-result   { margin-top: 6px; text-align: center; font-size: .8rem; color: var(--text-2); }
.card-generate-teams .live-matchups-empty   { margin: 0; color: var(--text-3); }
.card-generate-teams .live-matchups-waiting { margin: 8px 0 0; color: var(--text-3); font-size: .85rem; }

/* Collapsible Live Nets — header card, tap to collapse (defaults EXPANDED, nets-first) */
.live-nets-collapsible { margin: 4px 0 12px; }
.live-nets-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px !important;
}
.live-nets-toggle:hover { background: var(--surface-3); }
.live-nets-caret { font-weight: 600; color: var(--accent); font-size: 13px !important; }
.live-nets-body.is-collapsed { display: none; }
.live-nets-collapsible .live-matchups-board { margin-top: 8px; }
.live-nets-collapsible .live-matchups-board h4 { display: none; } /* the toggle is the header now */

/* ── Player filter tabs ── */
.player-tabs, .skill-subtabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.player-tabs button, .skill-subtabs button {
  padding: 5px 12px; font-size: .875rem !important;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px; min-height: 32px;
}
.player-tabs button.active, .skill-subtabs button.active {
  background: var(--brand); color: #fff; border-color: transparent;
}

/* ── Misc ── */
.card select, .card label { margin-right: 4px; }
.card-section { margin-bottom: 1rem; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.section-title { font-size: 1rem; font-weight: 600; margin: 8px 0 4px; color: var(--text-2); }
.full-width { width: 100%; }

.admin-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-header h2 { margin: 0; }
.admin-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.loading-message { padding: 2rem; text-align: center; font-family: sans-serif; color: #fff; }

/* Utility classes */
.mb-12 { margin-bottom: 12px; }
.mt-0  { margin-top: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-6  { margin-bottom: 6px; }
.my-8  { margin: 8px 0; }
.m-0   { margin: 0; }
.min-w-220 { min-width: 220px; }
.min-w-280 { min-width: 280px; }
.min-w-180 { min-width: 180px; }
.w-90  { width: 90px; }
.w-100 { width: 100px; }

/* ── Group Manager ── */
#groupManager .gm-table-wrap { overflow-x: auto; }
#groupManager .gm-actions-row { justify-content: flex-start; flex-wrap: wrap; }

/* ── QR Code Modal ── */
.qr-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qr-modal[hidden] { display: none; }
.qr-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; }
.qr-modal-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px 32px 28px; max-width: 440px; width: 100%; text-align: center; box-shadow: var(--shadow-md); animation: qrFadeIn .2s ease-out; }
@keyframes qrFadeIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.qr-modal-close { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: none; background: transparent; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); transition: background .15s; }
.qr-modal-close:hover { background: var(--accent-soft); color: var(--ink); }
.qr-modal-title    { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.qr-modal-subtitle { color: var(--muted); font-size: 15px; margin: 0 0 24px; }
.qr-code-container { display: flex; justify-content: center; margin: 0 auto 20px; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; width: fit-content; }
.qr-code-container img,
.qr-code-container canvas { display: block; max-width: 100%; height: auto; }
.qr-modal-url      { font-family: ui-monospace, monospace; font-size: 13px; color: var(--text-2); background: var(--surface-3); padding: 10px 12px; border-radius: var(--r-sm); margin: 0 0 20px; word-break: break-all; }
.qr-modal-actions  { display: flex; gap: 10px; justify-content: center; }
.qr-modal-actions .btn { flex: 1; padding: 12px 16px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; border: none; cursor: pointer; }
.qr-modal-actions .btn-primary   { background: var(--brand); color: #fff; }
.qr-modal-actions .btn-primary:hover { background: var(--brand-dark); }
.qr-modal-actions .btn-secondary { background: var(--surface-3); color: var(--ink); border: 1px solid var(--border); }
.qr-modal-actions .btn-secondary:hover { background: var(--border); }

/* ── Mobile ── */
@media (max-width: 768px) {
  .container { padding: 8px; }
  .card { padding: 10px; margin-bottom: 8px; }
  .row { gap: 6px; margin-top: 6px; }
  .row.admin-player-form-row { grid-template-columns: 1fr; }
  .row.admin-player-form-row > .admin-player-save-btn { width: 100%; }
  .row.admin-player-form-row > #admin-player-skill    { max-width: none; }
  .popup-overlay { padding: 8px; }
  .popup-card    { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
  .player-card   { padding: 10px; margin-bottom: 6px; }
  .player-card.prow { padding: 6px 8px; gap: 8px; }
  .prow-av { flex-basis: 34px; width: 34px; height: 34px; font-size: .78rem; }
  .prow .tg { min-width: 56px; padding: 0 11px; }
  .prow-actions { gap: 6px; }
  .chip { padding: 0 12px; font-size: .82rem; }
  .roster-head .admin-toolbar { width: 100%; flex: 1 1 100%; }
  .player-card .edit-row { display: block !important; }
  .edit-row input { margin-bottom: 8px; }
  .btn-save-edit  { display: block; width: 100%; }
  .card-generate-teams .live-nets-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .card-generate-teams .live-net-card  { min-height: 220px; }
  .card-generate-teams .live-net-court { min-height: 124px; }
  /* C36 T3: nets-first means Live Nets + team cards flow naturally (single page scroll) — the old
     max-height/overflow caps created an awkward nested double-scroll on mobile; removed. */
  .card-generate-teams .teams { padding-right: 4px; }
  .teams { grid-template-columns: repeat(2, 1fr); }
  .btn-checkin, .btn-checkout { min-width: 70px; padding: 5px 8px; }
  #groupManager .gm-table th,
  #groupManager .gm-table td { padding: 8px 6px; }
}

@media (max-width: 480px) {
  /* one full-width net per row on phones so the two "Won" buttons sit
     side-by-side with a comfortable gap instead of 30px tall, 6px apart */
  .card-generate-teams .live-nets-grid { grid-template-columns: 1fr; }
  .card-generate-teams .live-net-card  { min-height: 0; }
}

@media (min-width: 769px)  { .card-generate-teams .live-nets-grid { grid-template-columns: repeat(3, minmax(170px, 1fr)); } }
@media (min-width: 1120px) { .card-generate-teams .live-nets-grid { grid-template-columns: repeat(4, minmax(180px, 1fr)); } }

/* ===== C26 item 3a: PUBLIC Home + Scores (Direction-A, mobile-first, read-only) ===== */
.ph-brand {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
  padding: 6px 2px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ph-sec {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 2px 11px;
}

/* §13.4 between-rounds lull: quiet line + faint next-matchup rows (the board card no longer vanishes). */
.ph-lull { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 2px 4px 12px; }
.court-row.is-next { opacity: 0.62; }
.court-stat.is-next { color: var(--muted); background: var(--accent-soft); }

.court-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 15px;
  margin-bottom: 9px;
}
.court-row-name {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.court-row-sub {
  font-size: 12.5px; /* S5: was 11.5px — the matchup was the faintest/smallest text in the row */
  color: var(--faint);
  margin-top: 2px;
}
.court-stat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 999px;
}
.court-stat.is-live {
  color: var(--live);
  background: var(--live-soft);
}
.court-stat.is-done {
  color: var(--muted);
  background: var(--accent-soft);
}

@media (min-width: 769px) {
  .ph-brand { font-size: 22px; }
}

/* ===== C26 item 3b: ADMIN Dashboard ("run the night") + static Co-pilot placeholder ===== */
/* Direction-A tokens only. NO skill, NO emoji, NO neon. Mobile-first (390px), holds at 1920. */
.ad-screen { padding: 6px 0 8px; }

.ad-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 15px;
}
.ad-brand {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ad-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.4px;
}

.ad-statcard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 13px;
}
.ad-statbig {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.ad-statnum {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.ad-statlab {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.ad-grpline {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ad-grpline span {
  font-size: 11.5px;
  color: var(--faint);
}
.ad-grpline b {
  color: var(--ink);
  font-weight: 700;
}

.ad-sec {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 2px 11px;
}

.ad-qgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.ad-qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ad-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-ic svg { width: 18px; height: 18px; display: block; }
.ad-qt {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.ad-qs {
  font-size: 11px;
  color: var(--faint);
  margin-top: -5px;
}

.ad-copilot {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-top: 13px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ad-sp {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ad-sp svg { width: 19px; height: 19px; display: block; }
.ad-ct {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.ad-cs {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

/* --- static Co-pilot placeholder --- */
.ad-cop-screen {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  padding: 6px 0 8px;
}
.ad-cop-head {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px 16px;
}
.ad-cop-head svg { width: 18px; height: 18px; display: block; }
.ad-cop-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 9px;
  padding: 24px 12px;
}
.ad-cop-emptytitle {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.ad-cop-emptysub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 320px;
}
.ad-inbar {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 14px;
  margin-top: 14px;
}
.ad-inbar input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--muted);
}
.ad-inbar input:disabled { cursor: not-allowed; }
.ad-send {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.55;
}
.ad-send svg { width: 16px; height: 16px; display: block; }

/* --- C28 Slice 1: co-pilot chat (layout A — chat thread) --- */
/* Fill the tab panel (which has a definite height between header + nav, like the idle-center pattern at
   line ~98) so the thread scrolls and the chips + input pin to the bottom — instead of the whole screen
   stopping at min-height:60vh with the input floating mid-screen. */
.tab-panel > .container:has(> .cop-screen) {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.cop-screen { flex: 1; min-height: 0; }
.cop-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 4px 2px 8px;
}
.cop-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.cop-user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.cop-bot {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.cop-greet { color: var(--muted); }
.cop-error { color: var(--danger); }
.cop-dots { display: inline-flex; gap: 4px; align-items: center; }
.cop-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  animation: cop-blink 1.2s infinite ease-in-out both;
}
.cop-dots span:nth-child(2) { animation-delay: 0.2s; }
.cop-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cop-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.cop-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px 0 0;
}
.cop-chip {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.cop-chip:hover { border-color: var(--accent); }
.cop-inbar { margin-top: 10px; }
.cop-inbar input { color: var(--ink); }
.cop-send { opacity: 1; cursor: pointer; }
/* While typing in the co-pilot (keyboard up), hide the bottom nav so it doesn't ride up above the
   keyboard with the input — Mike: "the bottom nav shouldn't go up too." Toggled by JS (focusin/out). */
body.copilot-typing #bottom-nav { display: none; }
/* C28 Slice 2 — minimal Undo affordance on the co-pilot's answer bubble (instant actions). */
.cop-undo {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
}
.cop-undo:disabled { opacity: 0.6; cursor: default; }

@media (min-width: 769px) {
  .ad-brand { font-size: 20px; }
}

/* ============================================================
   C36 T1 — Check In kiosk (public): type your name -> tap it -> checked in.
   Direction-A tokens only. NO skill, NO emoji, NO neon. Mobile-first (390) + 1920.
   ============================================================ */
.ci-kiosk {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 0 24px;
  position: relative;
}

/* C48.6 (Option A): centered & balanced IDLE kiosk. Public Check In tab's container becomes a
   flex column that fills the panel height; the #js-checkin-stats pill stays at the top (flex:0)
   and the kiosk grows to vertically center its block (mark → title → sub → search → "I'm new" →
   Admin) in the space below. The moment the user types and results appear, the JS removes
   .is-idle (syncKioskIdleState) and the kiosk reverts to normal top-aligned scrolling so the big
   name buttons get full room. .cik-mark only shows in the idle state. dvh-based, correct at
   390px + desktop. (Scoped to the public surface via :has(.ci-kiosk) — admin Players has no .ci-kiosk.) */
#tab-players > .container:has(.ci-kiosk) {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#tab-players > .container:has(.ci-kiosk) > #js-checkin-stats { flex: 0 0 auto; }
/* iPhone fix (2026-06-22, C48.7): the idle kiosk used to be flex:1 (filling below the pinned stat
   card), so on a tall phone the check-in block centered in the LOWER region and the "N Checked In"
   stat was stranded at the top with a big void between them — not "balanced." Instead, center the
   stat card + the block together as ONE group: the container centers its children when idle, and the
   kiosk takes natural height. (Scoped to .is-idle; when typing, .is-idle is dropped → container goes
   back to top-aligned flex-start so the result buttons get full scroll room.) */
/* iPhone fix (2026-06-22, C48.8): Mike — "the checked in should always be at the top and ... just
   center what is already there." Pin the "N Checked In" stat to the very top (absolute, out of the
   flex flow) so it never moves, and center the EXISTING kiosk block in the full screen height. No
   font/content change. */
#tab-players > .container:has(.ci-kiosk.is-idle) { position: relative; justify-content: center; }
#tab-players > .container:has(.ci-kiosk.is-idle) > #js-checkin-stats { position: absolute; top: 0; left: 0; right: 0; }

/* Round 2 — check-in one-tap hero (spec §12.3, Mike's locked pick A). Placed AFTER the .is-idle
   centering rule above so this equal-specificity override wins by source order (the hero container
   carries BOTH .is-idle and .has-hero). */
#tab-players > .container:has(.ci-kiosk.has-hero) { justify-content: flex-start; }
.ckh-card { background: oklch(0.98 0.004 75 / 0.30); -webkit-backdrop-filter: blur(3px) saturate(1.05);
  backdrop-filter: blur(3px) saturate(1.05); border: 1.5px solid var(--accent-bd);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px 18px 18px;
  text-align: center; width: 100%; max-width: 400px; margin: 4px auto 18px; }
.ckh-av { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft);
  border: 1px solid var(--accent-bd); color: var(--accent); font-family: 'Sora','Inter',sans-serif;
  font-weight: 800; font-size: 21px; display: inline-flex; align-items: center; justify-content: center; }
.ckh-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted); margin-top: 12px; }
.ckh-name { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 23px; color: var(--ink); margin-top: 2px; }
.ckh-btn { width: 100%; margin-top: 16px; min-height: 52px; border: none; border-radius: var(--r-md);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 17px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.ckh-btn svg { width: 20px; height: 20px; }
.ckh-btn.is-in { background: var(--live-soft); color: var(--live-ink); border: 1px solid oklch(0.85 0.05 150); }
.ckh-alts { text-align: center; margin-bottom: 6px; }
.ckh-alt-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.ckh-count { text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px 0 0; }

.ci-kiosk.is-idle {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 8px;
}
.cik-mark {
  display: none;
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  color: var(--accent);
  opacity: 0.85;
}
.cik-mark svg { width: 100%; height: 100%; display: block; }
.ci-kiosk.is-idle .cik-mark { display: block; }
/* Idle kiosk: the new-/admin affordances stay visible but tighten up so the centered block
   reads as one balanced unit rather than top-heavy. */
.ci-kiosk.is-idle .cik-h { margin-top: 0; }
.cik-h {
  font-family: 'Sora', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  margin: 14px 0 4px;
}
.cik-sub {
  text-align: center;
  color: var(--text-3);
  font-size: 15px;
  margin: 0 0 18px;
}
.cik-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  padding: 4px 14px;
  box-shadow: var(--shadow-sm);
}
.cik-search svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.cik-search input {
  border: none !important;
  background: transparent;
  box-shadow: none !important;
  height: 52px;
  flex: 1;
  font-size: 18px !important;   /* >=16px: no iOS zoom-on-focus */
  padding: 0;
  color: var(--text);
}
.cik-search input:focus { outline: none; box-shadow: none !important; }

#checkin-results { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

.cik-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  min-height: 70px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.cik-btn:hover { border-color: var(--border-2); }
.cik-btn:active { transform: translateY(1px); }
.cik-btn .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cik-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cik-nm {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  /* 2026-06-27: wrap long names instead of truncating — the kiosk exists for a person to recognise their
     full name (and same-name players disambiguate by it); .cik-btn min-height:70px gives the room. */
  overflow-wrap: anywhere;
}
.cik-gp { font-size: 13px; color: var(--text-3); }
.cik-state {
  font-size: 13px;
  font-weight: 600;
  color: var(--live);
  flex-shrink: 0;
  white-space: nowrap;
}
/* checked-in row: muted-green tint + accent on the avatar swaps to live */
.cik-btn.is-in {
  background: var(--live-soft);
  border-color: var(--success-border);
}
.cik-btn.is-in .av { background: var(--live-soft); color: var(--live); }

.cik-none {
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  margin: 16px 0;
}

.cik-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  background: transparent;
  color: var(--text-2);
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-md);
  min-height: 52px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.cik-new:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cik-new svg { width: 20px; height: 20px; }

.cik-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  background: var(--live);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  z-index: 1200;
  animation: cik-toast-up .22s ease-out;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.cik-toast[hidden] { display: none; }
@keyframes cik-toast-up {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Save-toast (makeSaveToast) — dark-on-light system toast that mirrors .cik-toast's
   entry motion + elevation. Fade-in on create, fade-out via .is-leaving before remove.
   The global prefers-reduced-motion block neutralizes both for reduce-motion users. */
@keyframes save-toast-up {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.save-toast {
  animation: save-toast-up .22s ease-out;
  transition: opacity .2s ease, transform .2s ease;
}
.save-toast.is-leaving {
  opacity: 0;
  transform: translate(-50%, 10px);
}

.cik-adminpanel { margin-top: 18px; }
.cik-adminpanel[hidden] { display: none; }

.cik-admin {
  display: block;
  margin: 22px auto 0;
  background: transparent;
  border: none;
  color: var(--text-4);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 6px 10px;
}
.cik-admin:hover { color: var(--text-3); }

@media (min-width: 769px) {
  .cik-h { font-size: 30px; }
}

/* ===================================================================
   C40/C41/C42 (2026-06-20) — mobile UI reliability check
   Players declutter + Dashboard live board + audit correctness fixes.
   =================================================================== */

/* C40: small Log out in the admin header (operator control moved off the roster) */
.app-header-logout {
  flex-shrink: 0;
  font: 600 12.5px 'Inter', system-ui, sans-serif;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 12px;
  min-height: 36px;
  cursor: pointer;
}
.app-header-logout:active { background: var(--accent-soft); }

/* C40: Session "Run the night" note */
.session-newnight-note { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* C48.6 (Option A): Courts tab — when no teams are generated, the board area below the
   controls is dead space. The #tab-teams container fills the panel height (min-height:100%
   resolves against the absolutely-positioned .tab-panel, which has a definite height) and
   becomes a flex column; .courts-board.is-empty grows to fill it, the controls card stays at
   the top (flex:0) and .courts-empty grows to vertically center its mark + message in the
   space below. When teams exist (.courts-board, no .is-empty) layout stays normal block flow. */
#tab-teams > .container:has(.courts-board.is-empty) {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.courts-board.is-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.courts-board.is-empty > .card-generate-teams { flex: 0 0 auto; }
.courts-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 12px;
  min-height: 180px;
}

/* C41: Dashboard live-courts empty state */
.ad-live-empty {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 13px;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* C42 rank 1: per-row kebab (⋮) overflow menu — previously had ZERO css (unstyled / off-screen) */
.menu-wrap { position: relative; }
.btn-actions {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  color: var(--muted); cursor: pointer; padding: 0;
}
.btn-actions:active { background: var(--accent-soft); }
.card-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 4px);
  z-index: 60; min-width: 168px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 6px;
}
.menu-wrap.menu-open .card-menu { display: block; }
.menu-item {
  display: flex; align-items: center; width: 100%; text-align: left;
  min-height: 44px; padding: 0 12px;
  background: transparent; border: none; border-radius: 8px;
  font: 600 14px 'Inter', system-ui, sans-serif; color: var(--ink); cursor: pointer;
}
.menu-item:active { background: var(--accent-soft); }
.menu-item.danger { color: var(--danger); }

/* C42 rank 4: tournament standings/pool table — previously had ZERO css (raw default table) */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-weight: 700; color: var(--muted);
  padding: 7px 9px; border-bottom: 1px solid var(--border);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
}
.table td { padding: 8px 9px; border-bottom: 1px solid var(--border); color: var(--ink); }
.table tr:last-child td { border-bottom: none; }
.table td:not(:first-child), .table th:not(:first-child) { text-align: right; }

/* C42 rank 5: bigger tap targets for core session controls */
.chip { min-height: 40px; display: inline-flex; align-items: center; }
.nav-btn { min-height: 48px; }
.player-select { width: 26px; height: 26px; }

/* C42 rank 13: press / focus feedback on the primary tappable cards + buttons (was none) */
.ad-qa { transition: transform .08s ease, background .12s ease; }
.ad-qa:active { transform: scale(.985); background: var(--accent-soft); }
/* iPhone fix (2026-06-22, C48.7): iOS holds :active on the LAST-tapped element until you touch
   elsewhere, so .nav-btn:active's pressed-fill PERSISTED on the active tab (a filled box with the
   brand-blue label sitting on it at low contrast). Gate the pressed-fill to hover-capable devices
   (desktop), where :active is transient. On touch the active tab is already shown by .nav-btn.active
   (brand text + the ::before top indicator) and the tap's feedback is the instant screen change. */
/* iPhone fix (2026-06-22, C48.8): the GLOBAL `button:hover { background: var(--brand-dark) }`
   (styles.css ~232) was filling the WHOLE active nav tab dark-blue — the nav tab is a <button> and
   iOS keeps :hover stuck on the last-tapped button until you touch elsewhere, so it stayed boxed
   (the v.7 :active gate fixed the wrong pseudo-class). Mike: "only have the text highlight blue ...
   not the whole box." Force nav buttons transparent in EVERY state; the active tab is shown by
   color alone (.nav-btn.active { color: var(--brand) }). */
.nav-btn, .nav-btn:hover, .nav-btn:active, .nav-btn:focus { background: transparent; }
.ad-qa:focus-visible, .nav-btn:focus-visible,
.roster-add:focus-visible, .app-header-logout:focus-visible, .chip:focus-visible,
.btn-actions:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ===== C43 (2026-06-20) — global + public polish ===== */
/* rank 14: non-color active-nav affordance (top indicator bar, not color-only) */
.nav-btn { position: relative; }
/* C48.8: removed the .nav-btn.active::before top-indicator bar — Mike: "only have the text highlight
   blue ... not the whole box." The active tab is now indicated by blue text/icon alone (.nav-btn.active). */
/* rank 22: "Round complete" pill on Scores when no court is actually live (was "0 playing" + a live dot) */
.ph-done {
  font: 700 11px 'Inter', system-ui, sans-serif;
  color: var(--muted); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 999px; letter-spacing: .02em;
}

/* C44 (rank 6/23): roster loading / empty-roster / no-match states (was a bare "No players found.") */
.roster-empty {
  text-align: center; color: var(--muted); font-size: 14px;
  padding: 28px 16px; line-height: 1.5;
}
.roster-empty strong { color: var(--accent); }

/* ===== C45 (2026-06-20) — admin polish ===== */
/* rank 17: "Select all shown" moved out of the filter chips into its own subtle row */
.select-all-row { margin: 2px 2px 10px; }
.select-all-btn {
  background: transparent; border: none; padding: 6px 2px;
  color: var(--accent); font: 600 13px 'Inter', system-ui, sans-serif; cursor: pointer;
}
.select-all-btn:active { opacity: .7; }
/* rank 31: team-fairness verdict line (was "Candidate runs: 250" jargon) */
.fairness-line { margin: 4px 2px 8px; color: var(--muted); }
.fairness-line strong { color: var(--ink); }

/* C46 (rank 37): disabled secondary button (e.g. Share QR before a session is saved) */
.secondary:disabled, button:disabled { opacity: .5; cursor: not-allowed; }

/* ===================================================================================
   Smoothness reliability check — Batch 2 (2026-06-22): tactile feedback + motion.
   Additive only. Gives the controls that lacked press feedback an intentional :active,
   eases their state changes, animates the shared modal system + the live dot, and gates
   it all behind prefers-reduced-motion. No layout/structure change (§38-exempt).
   =================================================================================== */

/* The In/Out toggle (most-tapped control while running the night) and filter chips had
   no :active and no transition — taps felt dead and the In<->Out flip snapped. */
.prow .tg { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease; }
.prow .tg:active { transform: scale(.96); }
.chip { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease; }
.chip:active { transform: scale(.96); }
.card-generate-teams .live-matchup-result-btn { transition: background-color .15s ease, border-color .15s ease, transform .08s ease; }
.card-generate-teams .live-matchup-result-btn:active { transform: scale(.96); }

/* The player-edit / add-player / Group Manager cards use the shared .popup system, which
   had NO entry animation (only the QR modal faded). Give the shared system a gentle,
   consistent fade + scale-in so modals don't hard-pop. */
.popup-overlay { animation: as-overlay-in .16s ease-out; }
.popup-card    { animation: as-pop-in .18s cubic-bezier(.2,.8,.2,1); }
@keyframes as-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes as-pop-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

@keyframes as-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* Accessibility + Mike's "no excessive motion": honor the OS reduce-motion setting —
   neutralize the press-scale, modal animation, and live pulse for users who ask for it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   C32 #9 — connected "March Madness" bracket tree (buildBracketHTML +
   layoutBracketTree). One pannable/zoomable tree for phone + desktop:
   columns = rounds, SVG elbow connectors between them, champion path
   highlighted in --accent. Fit-to-screen by default (whole bracket, no
   scroll); "Zoom in" lets a big field pan. Tokens only; NEVER renders skill.
   =================================================================== */
.bt-champ { display: flex; align-items: center; gap: 10px; background: var(--live-soft);
  border: 1px solid var(--success); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 10px; }
.bt-cup { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--live);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.bt-champ-lbl { display: block; font-size: 11px; letter-spacing: .08em; color: var(--live); font-weight: 700; }
.bt-champ-nm { display: block; font-family: 'Sora','Inter',sans-serif; color: var(--live); font-weight: 700; font-size: 17px; }
.bt-seed { display: inline-block; min-width: 1.3em; font-size: 10px; font-weight: 700; color: var(--faint); } /* D3: was an inline style on the seed span */

.bt-sides { display: flex; gap: 6px; margin-bottom: 8px; }
.bt-sides button { flex: 1; min-height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--card); color: var(--muted); font-weight: 600; font-size: 14px; }
.bt-sides button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.bt-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.bt-hint { flex: 1; font-size: 12px; color: var(--faint); text-align: left; }

/* C57: map-style pan/zoom — the canvas is transformed (scale + translate) inside a fixed, gesture-owning
   viewport. touch-action:none so a finger drag pans the bracket any direction (handled in JS), not the page. */
.bt-pan { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md);
  background: radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0 / 22px 22px, var(--bg);
  touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.bt-pan.drag { cursor: grabbing; }
/* touch-action:none on the CHILDREN too — the finger actually lands on the canvas/cols/nodes/svg, and
   iOS only honours the touched element's touch-action; without this the native gesture leaks through. */
.bt-canvas, .bt-cols, .bt-col, .bt-node, .bt-links { touch-action: none; }
.bt-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; width: max-content; will-change: transform; }
.bt-links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.bt-link { fill: none; stroke: var(--faint); stroke-width: 1.5; opacity: .5; }
.bt-link.on { stroke: var(--accent); stroke-width: 2.5; opacity: 1; }
.bt-cols { position: relative; display: flex; gap: 46px; align-items: stretch; padding: 16px; }
.bt-col { display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.bt-rlabel { font-family: 'Sora','Inter',sans-serif; font-size: 12px; color: var(--muted);
  text-align: center; margin-bottom: 2px; white-space: nowrap; }

.bt-node { position: relative; width: 176px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-sm); overflow: hidden; }
.bt-node.path { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
.bt-meta { font-size: 10.5px; color: var(--muted); padding: 5px 9px 2px; text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-row { display: flex; align-items: center; gap: 6px; padding: 7px 9px; }
.bt-row.win { background: var(--live-soft); }
.bt-row + .bt-row { border-top: 1px solid var(--border); }
.bt-vs { font-size: 11px; color: var(--faint); text-align: center; padding: 0 9px; }
.bt-name { flex: 1; min-width: 0; font-size: 14px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-row.win .bt-name { font-weight: 700; color: var(--ink); }
.bt-name.bt-tbd { color: var(--faint); font-style: italic; }
.bt-sc { flex: 0 0 auto; font-family: 'Sora','Inter',sans-serif; font-size: 15px; color: var(--faint); }
.bt-row.win .bt-sc { color: var(--live); font-weight: 700; }
/* C72: live-scored bracket match — running score + LIVE pill (mirrors the pool board's .ppg-live*). */
.bt-sc.bt-livesc { color: var(--live); font-weight: 800; }
.bt-livetag { font-size: 9px; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--live); border-radius: 999px; padding: 2px 7px; }
/* A scorable match card is a tap target that opens the result pop-up. */
.bt-node.tappable { cursor: pointer; }
.bt-node.tappable:active { background: var(--accent-soft); }

/* Tournament team self-registration (build 1) — §38 layout A (one card). Direction-A tokens, no neon. */
.reg-screen { padding: 4px 0 10px; }
.reg-h1 { font: 800 22px 'Sora','Inter',sans-serif; margin: 4px 0 2px; }
.reg-sub { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.reg-card { padding: 16px; }
.reg-label { font: 600 12px 'Inter',sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 2px 0 6px; display: block; }
.reg-input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 16px; background: var(--bg); margin-bottom: 10px; }
.reg-remind { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; margin: 2px 0 12px; }
.reg-remind svg { flex: none; margin-top: 1px; color: var(--accent); }
.reg-pay { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.reg-venmo { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: #fff; background: #3D95CE; border: none; border-radius: 10px; padding: 11px 14px; text-decoration: none; }
.reg-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.reg-check input { width: 22px; height: 22px; }
.reg-primary { width: 100%; min-height: 52px; margin-top: 2px; }
.reg-teamspill { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.reg-regrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
/* 2026-06-27: match the roster-popup .tc-paid (filled) so the "paid" pill looks identical on the register
   list and the team card — same label, same look, one tap apart. */
.reg-paidtag { font-size: 11px; font-weight: 800; color: var(--live); background: var(--live-soft); border-radius: 999px; padding: 3px 10px; }
.reg-unpaidtag { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.bt-enter { font-size: 11px; font-weight: 600; color: var(--accent); padding: 4px 9px 8px; }

/* Result pop-up (openBracketResultModal) — sits on the shared .popup-overlay/.popup-card. */
.brm-card { width: min(384px, 94vw); padding: 20px; text-align: left; }
.brm-title { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.brm-sub { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
/* C71: rule-hint pill so the scorer knows the target at a glance */
.brm-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 4px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.brm-hdot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* C71: two big number tiles — winner = the higher score, auto-highlighted green */
.brm-tiles { display: flex; gap: 12px; margin-top: 18px; }
.brm-tile { flex: 1; min-width: 0; position: relative; border: 2px solid var(--border); border-radius: var(--r-md); background: var(--card); padding: 14px 8px 12px; text-align: center; }
.brm-tile.win { border-color: var(--live); background: var(--live-soft); }
.brm-wpill { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--live); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.brm-tile.win .brm-wpill { opacity: 1; }
.brm-tname { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; min-height: 33px; overflow: hidden; }
.brm-num { width: 100%; height: auto; margin: 2px 0 8px; padding: 0; border: none; background: transparent; text-align: center; font-family: 'Sora','Inter',sans-serif; font-size: 42px; font-weight: 800; line-height: 1.05; color: var(--ink); -webkit-appearance: none; -moz-appearance: textfield; }
.brm-num::-webkit-outer-spin-button, .brm-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.brm-num:focus { outline: none; box-shadow: none; }
.brm-tile.win .brm-num { color: var(--live); }
.brm-steps { display: flex; gap: 8px; justify-content: center; }
.brm-step { width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 23px; font-weight: 700; line-height: 1; }
.brm-step:hover { background: var(--surface-3); }
.brm-step:active { transform: translateY(1px); }
.brm-typehint { text-align: center; font-size: 12px; color: var(--faint); margin: 12px 0 0; }
.brm-err { color: var(--danger); font-size: 13px; margin-top: 12px; }
.brm-forfeit { display: block; width: 100%; margin-top: 14px; padding: 4px; background: transparent; border: none; color: var(--faint); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.brm-forfeit:hover, .brm-forfeit:active { background: transparent; color: var(--muted); }
/* C71: forfeit -> "who showed up?" mini choice (no winner tap in this layout) */
.brm-fchoice { margin-top: 10px; padding: 12px; border: 1px dashed var(--border); border-radius: var(--r-md); }
.brm-fq { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center; margin-bottom: 8px; }
.brm-frow { display: flex; gap: 8px; }
.brm-fbtn { flex: 1; min-height: 44px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; }
.brm-fbtn:hover { background: var(--surface-3); }
.brm-actions { display: flex; gap: 10px; margin-top: 18px; }
.brm-actions button { flex: 1; min-height: 48px; font-size: 15px; border-radius: var(--r-md); }

/* C70 — player-first pool board (buildPoolPlayHTML): per pool, per net, the full NUMBERED game schedule. */
.ppl-pool { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.ppl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ppl-name { font-family: 'Sora','Inter',sans-serif; font-size: 21px; font-weight: 800; color: var(--ink); }
.ppl-nets { font-size: 13px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.ppl-nets-edit { background: var(--accent-soft); color: var(--accent); border: none; border-radius: 999px; padding: 5px 11px; cursor: pointer; line-height: 1; }
.ppl-nets-edit:hover, .ppl-nets-edit:active { background: var(--accent-soft); color: var(--accent); }
.ppl-teams { font-size: 12px; color: var(--faint); margin: 5px 0 2px; line-height: 1.4; }
.ppl-ng { margin-top: 14px; }
.ppl-nglabel { font-family: 'Sora','Inter',sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ppg { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border); width: 100%; text-align: left; background: none; }
.ppg[role="button"] { cursor: pointer; }
.ppg[role="button"]:hover .ppg-m, .ppg[role="button"]:active .ppg-m { color: var(--accent); }
.ppg-m { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; display: flex; flex-direction: column; gap: 2px; }
/* "game N" eyebrow label above each matchup (Mike, 2026-06-27; §38 option C of 3). */
.ppg-kick { font-family: 'Sora','Inter',sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--faint); line-height: 1; }
.ppg.is-now .ppg-kick, .ppg.is-live .ppg-kick { color: var(--live); }
.ppg-vs { color: var(--faint); font-weight: 600; font-size: 12px; }
.ppg-w { color: var(--live); }
.ppg-r { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.ppg-cta { font-size: 12px; font-weight: 800; color: var(--accent); }
.ppg-now { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--live); border-radius: 999px; padding: 3px 9px; }
.ppg-score { font-family: 'Sora','Inter',sans-serif; font-size: 15px; font-weight: 800; color: var(--ink); }
.ppg-btn { min-height: 28px; padding: 3px 9px; font-size: 11px; background: var(--card); color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-sm); }
.ppg-btn:hover { background: var(--surface-3); }
.ppg.is-now { background: var(--live-soft); border-radius: var(--r-md); border-top-color: transparent; padding: 11px 10px; margin: 3px 0; }
.ppg.is-now + .ppg { border-top-color: transparent; }
.ppg.is-final .ppg-m { color: var(--muted); font-weight: 600; }
.ppl-foot { margin-top: 12px; }
.ppl-prog { font-size: 12px; color: var(--muted); }
.ppl-more { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 6px; }
.ppl-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--accent); list-style: none; padding: 4px 0; }
.ppl-more > summary::-webkit-details-marker { display: none; }
.ppl-more > summary::before { content: '\25B8  '; color: var(--faint); }
.ppl-more[open] > summary::before { content: '\25BE  '; }
.ppl-more-body { padding-top: 6px; }

/* C69 — tap a registered team -> roster popup card (§38 Option A: avatar list). */
.reg-regrow { cursor: pointer; }
.reg-regrow > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.reg-regchev { flex: 0 0 auto; color: var(--faint); font-weight: 800; font-size: 16px; }
.tc-card { width: min(360px, 94vw); padding: 20px; text-align: left; }
.tc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-name { font-family: 'Sora','Inter',sans-serif; font-size: 21px; font-weight: 800; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-paid { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--live); background: var(--live-soft); border-radius: 999px; padding: 3px 10px; }
.tc-sub { font-size: 12.5px; color: var(--muted); margin: 3px 0 12px; }
.tc-roster { display: flex; flex-direction: column; }
.pl-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.pl-row:first-child { border-top: none; }
.pl-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.pl-name { font-size: 16px; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-close { display: block; width: 100%; margin-top: 18px; min-height: 46px; border-radius: var(--r-md); background: var(--accent); color: #fff; border: none; font-size: 15px; font-weight: 600; }
.tc-close:hover, .tc-close:active { background: var(--brand-dark); }

/* C72 — match-action chooser (Score live / Enter final). */
.mac-card { width: min(360px, 94vw); padding: 20px; text-align: left; }
.mac-title { font-family: 'Sora','Inter',sans-serif; font-size: 18px; font-weight: 800; color: var(--ink); }
.mac-teams { font-size: 14px; color: var(--muted); margin: 4px 0 16px; }
.mac-teams .mac-vs { color: var(--faint); }
.mac-opt { display: block; width: 100%; text-align: left; white-space: normal; border: 1px solid var(--border); background: var(--card); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; cursor: pointer; }
.mac-opt:hover { background: var(--surface-3); }
.mac-live { border-color: var(--live); background: var(--live-soft); }
.mac-live:hover { background: var(--live-soft); }
.mac-opt-t { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.mac-opt-s { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.mac-cancel { display: block; width: 100%; min-height: 44px; margin-top: 4px; background: var(--card); color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; font-weight: 600; }
.mac-cancel:hover { background: var(--surface-3); }

/* C72 — live scorer (full screen, §38 Option A "tap the team"). */
.live-overlay { position: fixed; inset: 0; z-index: 13000; background: var(--surface-3); animation: as-overlay-in .16s ease-out; }
.lsc { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.lsc-h { display: flex; align-items: center; gap: 10px; padding: 14px 14px 6px; padding-top: max(14px, env(safe-area-inset-top)); }
.lsc-back { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1; padding: 0; }
.lsc-htext { flex: 1; min-width: 0; text-align: center; }
.lsc-title { font-family: 'Sora','Inter',sans-serif; font-size: 16px; font-weight: 800; color: var(--ink); }
.lsc-rule { font-size: 12px; color: var(--muted); margin-top: 1px; }
.lsc-livetag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--live); background: var(--live-soft); border-radius: 999px; padding: 4px 10px; }
.lsc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: as-live-pulse 1.8s ease-in-out infinite; }
.lsc-panels { flex: 1; display: flex; gap: 10px; padding: 6px 12px; min-height: 0; }
.lsc-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--border); border-radius: var(--r-lg); background: var(--card); padding: 16px 8px; }
.lsc-panel.lead { border-color: var(--live); background: var(--live-soft); }
.lsc-panel:active { transform: scale(.99); }
.lsc-name { font-size: 16px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lsc-score { font-family: 'Sora','Inter',sans-serif; font-size: clamp(56px, 18vw, 88px); font-weight: 800; color: var(--ink); line-height: 1; }
.lsc-panel.lead .lsc-score { color: var(--live); }
.lsc-tap { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: .03em; }
.lsc-minus { display: flex; gap: 10px; padding: 0 12px; }
.lsc-minusbtn { flex: 1; min-width: 0; min-height: 44px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsc-minusbtn:hover { background: var(--surface-3); }
.lsc-err { color: var(--danger); font-size: 13px; text-align: center; padding: 6px 12px 0; }
.lsc-f { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); text-align: center; }
.lsc-final { background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lsc-confirm { position: absolute; inset: 0; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lsc-confirm-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px; width: min(340px, 92vw); text-align: center; }
.lsc-confirm-t { font-family: 'Sora','Inter',sans-serif; font-size: 22px; font-weight: 800; color: var(--ink); }
.lsc-confirm-s { font-size: 13px; color: var(--muted); margin: 4px 0 18px; }
.lsc-confirm-btns { display: flex; gap: 10px; }
.lsc-confirm-btns button { flex: 1; min-height: 48px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; }

/* C72 — live running score on the pool board (a game being live-scored). */
.ppg.is-live { background: var(--live-soft); border-radius: var(--r-md); border-top-color: transparent; padding: 11px 10px; margin: 3px 0; }
.ppg.is-live + .ppg { border-top-color: transparent; }
.ppg-livescore { font-family: 'Sora','Inter',sans-serif; font-size: 16px; font-weight: 800; color: var(--live); }
.ppg-livetag { font-size: 9px; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--live); border-radius: 999px; padding: 2px 7px; }

/* Seeding list (Mike, 2026-06-27, §38 option B — table): cross-pool seed order on the bracket/tournament views. */
.sd-card { margin-top: 12px; }
.sd-h { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 16px; margin: 0 0 2px; color: var(--ink); }
.sd-sub { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.sd-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.sd-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 6px 6px; border-bottom: 1px solid var(--border); }
.sd-tbl th.r, .sd-tbl td.r { text-align: right; }
.sd-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--border); color: var(--ink); }
.sd-tbl tr:last-child td { border-bottom: none; }
.sd-tbl td.sd-seed { font-family: 'Sora','Inter',sans-serif; font-weight: 800; color: var(--muted); width: 1%; white-space: nowrap; }
.sd-tbl td.sd-nm { font-weight: 700; }
.sd-tbl tr.top td.sd-seed { color: var(--accent); }
.sd-tbl td.sd-pos { color: var(--live); font-weight: 700; }
.sd-tbl td.sd-neg { color: var(--danger); font-weight: 700; }
/* #7 seed override — editable seeding row controls (admin, pre-generate). */
.sd-tbl td.sd-mv { width: 1%; white-space: nowrap; text-align: right; }
.sd-mvbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); background: var(--card); color: var(--ink); border-radius: var(--r-sm); }
.sd-mvbtn:disabled { opacity: .35; }
.sd-mvbtn + .sd-mvbtn { margin-left: 4px; }
.sd-reset { border: none; background: none; padding: 0; color: var(--accent); font-weight: 700; font-size: inherit; cursor: pointer; }

/* Tournament MODE — Manage tab (Mike, 2026-06-27, §38 layout C: teams-first + toolbar). */
.tm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.tm-bar-nm { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); line-height: 1.15; }
.tm-bar-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tm-exit { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: none; border-radius: 999px; padding: 7px 12px; }
.tm-toolbar { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.tm-tool { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; }
.tm-tool.tm-tool-accent { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 40%, var(--border)); }
.tm-tool:active { background: var(--surface-3); }
.tm-addform { margin-bottom: 12px; }
.tm-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* Manage>Teams add card — Quick/Full mode toggle (§38 Option A). Quick hides the roster grid. */
.tm-addcard.is-quick .tm-add-roster { display: none; }
.qa-seg { display: flex; background: var(--surface-3); border-radius: 999px; padding: 3px; gap: 3px; }
.qa-seg-btn { flex: 1; border: none; background: transparent; border-radius: 999px; padding: 7px 6px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.qa-seg-btn.is-on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* #5 — prominent "Generate bracket" CTA banner on the pools board when all games are final (§38 B). */
.gen-banner { display: flex; align-items: center; gap: 10px; background: var(--live-soft); border: 1px solid var(--live); }
.gen-banner-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--live); }
.tm-pay { padding: 10px 14px; margin-bottom: 12px; }
.tm-sec { font-family: 'Sora','Inter',sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 4px 0 8px; }
.tm-team { padding: 12px 13px; margin-bottom: 9px; }
.tm-team-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.tm-team-nm { font-size: 15px; font-weight: 700; color: var(--ink); }
.tm-seed { display: inline-block; min-width: 1.4em; font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 12px; color: var(--accent); }
.tm-team-pl { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.tm-team-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tm-mini { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; }
.tm-mini:active { background: var(--surface-3); }
.tm-mini.tm-mini-dang { color: var(--danger); }
/* Manage HUB — tile grid (§38 layout B); each tile opens its own page. */
.tm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 12px; min-height: 104px; }
.tm-tile:active { background: var(--surface-3); }
.tm-tile-ic { width: 24px; height: 24px; color: var(--accent); }
.tm-tile-lb { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.tm-tile-st { font-size: 11px; color: var(--muted); }
.tm-pagetitle { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); }
.bt-act { display: flex; justify-content: flex-end; padding: 4px 8px 8px; }
.bt-act button { min-height: 28px; padding: 3px 10px; font-size: 12px; }

/* ===================================================================
   PUBLIC DASHBOARD REMAKE (Slice 1, 2026-07-08) — pd-* component kit.
   Namespaced to avoid colliding with the existing stylesheet. Ported
   from the locked mockups (docs/superpowers/specs/2026-07-08-public-dashboard-mockups/).
   Direction-A tokens only; §51 no neon; §11 no emoji.
   =================================================================== */

/* -- shared card + eyebrow -- */
.pd-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 15px; margin-bottom: 12px; }
/* frosted glass ONLY on Home (so the logo reads through there); other tabs keep solid readable cards */
/* Mike (2026-07-09): frosted "windowed" cards on ALL public pages (the logo reads through them),
   with a BOLDER outline so each card's separation is obvious. */
body.pd-public-active .pd-card { background: oklch(0.98 0.004 75 / 0.30); -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05); border: 1.5px solid oklch(0.78 0.01 75); }
.pd-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }

/* -- header pieces (container layout wired in the header task) -- */
.pd-avic { width: 35px; height: 35px; min-height: 0; padding: 0; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.pd-avic svg { width: 18px; height: 18px; flex-shrink: 0; }
.pd-brand { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15.5px; letter-spacing: -.3px; color: var(--ink); }
/* official A.S logo — the single brand mark everywhere (public header, admin header, check-in) */
.as-logo { height: 50px; width: auto; display: block; }
.ad-brand { display: inline-flex; align-items: center; }
.ad-brand-grp { margin-left: 8px; font-weight: 600; font-size: 13px; color: var(--muted); }
/* Mike's pick (2026-07-08): full-bleed logo behind a soft gradient scrim + text wordmark header */
/* Tamed watermark (atom-up 2026-07-10, spec §1): grayscale, ~7%, centered, z-index below all
   content, pointer-events:none — can never collide with text again. Scrim retired on public pages. */
.pd-watermark{
  display: none; position: fixed; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(340px, 80vw); height: auto;
  opacity: var(--wm-opacity); filter: grayscale(1);
}
body.pd-public-active .pd-watermark{ display: block; }
.pd-wordmark { display: flex; flex-direction: column; gap: 2px; }
.pd-wm-1 { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .13em; color: var(--ink); line-height: 1; }
.pd-wm-2 { font-weight: 600; font-size: 9px; letter-spacing: .30em; color: var(--faint); line-height: 1; }
/* Public display face (atom-up 2026-07-10, spec §1): Barlow Semi Condensed on the public surface only.
   Admin keeps Sora via the base rule above. */
body.pd-public-active h1, body.pd-public-active h2, body.pd-public-active h3,
body.pd-public-active .pd-wordmark, body.pd-public-active .score,
body.pd-public-active .statbig .n { font-family: var(--font-display); }
.pd-hgrp { display: flex; align-items: center; gap: 9px; }
/* public dashboard header layout — id-qualified so it beats the base #app-header + its @media centering */
#app-header.pd-header { justify-content: space-between; flex-wrap: wrap; row-gap: 3px; }
#app-header.pd-header .app-header-mode { display: none; }  /* redundant on the public dashboard; sync notice stays */
#app-header.pd-header #js-sync-notice { flex-basis: 100%; }
/* page header for tile sub-pages (Standings / History) */
.pd-pagehdr { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.pd-back { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 9px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.pd-back svg { width: 16px; height: 16px; flex-shrink: 0; }
.pd-htitle { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); }
.pd-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* -- tile grid (Home) -- */
.pd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pd-tile { background: oklch(0.98 0.004 75 / 0.30); -webkit-backdrop-filter: blur(3px) saturate(1.05); backdrop-filter: blur(3px) saturate(1.05); border: 1px solid oklch(1 0 0 / 0.6); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 13px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
/* §31 hover fix: global button:hover (--brand-dark) outweighs .pd-tile's frosted bg — keep hub/Home tiles frosted on desktop hover. */
.pd-tile:hover { background: oklch(0.98 0.004 75 / 0.30); }
.pd-tile:active { background: var(--surface-3); }
.pd-ti { width: 33px; height: 33px; border-radius: 9px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.pd-ti svg { width: 18px; height: 18px; }
.pd-tt { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.pd-ts { font-size: 11px; color: var(--muted); margin-top: -3px; }

/* Round 2 — Tournament hub (spec §12.4) */
.tn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tn-live { display: inline-flex; align-items: center; gap: 6px; background: var(--live-soft);
  border: 1px solid oklch(0.85 0.05 150); color: var(--live-ink); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 700; flex: none; }
.tn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); }

/* -- live board rows (Home "On the courts", mockup .game) -- */
.pd-game { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); }
.pd-game.pd-first { border-top: none; }
.pd-gnet { font-size: 11px; color: var(--muted); font-weight: 600; }
.pd-gt { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.pd-gR { display: flex; align-items: center; gap: 9px; }
.pd-gsc { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.3px; }
.pd-livetag { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--live); background: var(--live-soft); border-radius: 5px; padding: 2px 6px; }
.pd-finaltag { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }

/* -- segmented toggle (Standings / History) -- */
.pd-seg { display: flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: 11px; padding: 3px; margin-bottom: 12px; }
.pd-seg-s { flex: 1; text-align: center; padding: 8px 4px; font-size: 12.5px; font-weight: 700; border-radius: 8px; color: var(--muted); background: none; border: none; }
.pd-seg-s.pd-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }

/* -- standings tables -- */
.pd-ph { display: flex; align-items: center; gap: 7px; font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); margin: 0 0 5px; }
.pd-ph .pd-pl { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.pd-colh { display: flex; align-items: center; gap: 11px; padding: 0 0 3px; font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.pd-colh .pd-rk { width: 18px; text-align: center; }
.pd-colh .pd-rec { margin-left: auto; }
.pd-colh .pd-df { width: 40px; text-align: right; }
.pd-st { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-top: 1px solid var(--border); }
.pd-st.pd-first { border-top: none; }
.pd-st.pd-you { background: var(--accent-soft); margin: 2px -14px; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--accent-bd); }
.pd-st .pd-rk { width: 18px; text-align: center; font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 12.5px; color: var(--muted); }
.pd-st.pd-you .pd-rk { color: var(--accent); }
.pd-st .pd-tm { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.pd-st.pd-you .pd-tm { color: var(--accent); font-weight: 700; }
.pd-youtag { font-size: 9px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 7px; margin-left: 5px; }
.pd-st .pd-rec { margin-left: auto; font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 12.5px; color: var(--muted); }
.pd-st .pd-df { width: 40px; text-align: right; font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 12px; }
.pd-df.pd-p { color: var(--live-ink); }
.pd-df.pd-n { color: var(--faint); }
.pd-medal { width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 10px; color: #fff; flex: none; }
.pd-m1 { background: oklch(0.74 0.10 85); }
.pd-m2 { background: oklch(0.70 0.015 255); }
.pd-m3 { background: oklch(0.60 0.07 50); }
.pd-youcard { background: var(--accent-soft); border: 1px solid var(--accent-bd); border-radius: var(--r-lg); padding: 13px 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 13px; }
.pd-youcard .pd-big { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 28px; color: var(--accent); letter-spacing: -1px; line-height: 1; }
.pd-youcard .pd-l1 { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.pd-youcard .pd-l2 { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pd-foot { font-size: 10.5px; color: var(--faint); text-align: center; margin-top: 9px; line-height: 1.4; }

/* -- history -- */
.pd-yourrec { display: flex; align-items: center; gap: 13px; background: var(--accent-soft); border: 1px solid var(--accent-bd); border-radius: var(--r-lg); padding: 13px 15px; margin-bottom: 11px; }
.pd-yourrec .pd-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.pd-yourrec .pd-ic svg { width: 20px; height: 20px; }
.pd-yourrec .pd-l1 { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.pd-yourrec .pd-l2 { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pd-pt { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); }
.pd-pt.pd-first { border-top: none; }
.pd-pt .pd-nm { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.pd-pt .pd-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pd-plc { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; border-radius: 999px; padding: 3px 9px; flex: none; }
.pd-plc.pd-champ { background: var(--gold-soft); color: oklch(0.42 0.08 72); border: 1px solid var(--gold-bd); }
.pd-plc.pd-fin { background: var(--surface-3); color: var(--muted); border: 1px solid var(--border); }
.pd-plc.pd-mid { background: var(--surface-3); color: var(--faint); border: 1px solid var(--border); }
.pd-rec2 { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.pd-rec2.pd-first { border-top: none; }
.pd-rec2 .pd-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; flex: none; }
.pd-rec2 .pd-ic svg { width: 17px; height: 17px; }
.pd-rec2 .pd-l { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.pd-rec2 .pd-v { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); margin-top: 1px; }
.pd-rec2 .pd-n { margin-left: auto; font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); }
.pd-cw { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border); }
.pd-cw.pd-first { border-top: none; }
.pd-cw .pd-dt { font-size: 11px; color: var(--muted); width: 70px; flex: none; }
.pd-cw .pd-tr { color: var(--gold); display: flex; flex: none; }
.pd-cw .pd-tr svg { width: 16px; height: 16px; }
.pd-cw .pd-tm { font-weight: 600; font-size: 13.5px; color: var(--ink); }

/* -- claim card / gateway (Home) -- */
.pd-claimrow { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 11px 13px; margin-bottom: 11px; width: 100%; text-align: left; }
.pd-claimrow .pd-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.pd-claimrow .pd-ic svg { width: 16px; height: 16px; }
.pd-claimrow .pd-t { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pd-claimrow .pd-s { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pd-claimrow .pd-c { margin-left: auto; color: var(--faint); display: flex; }
.pd-claimrow .pd-c svg { width: 16px; height: 16px; }
.pd-thero .pd-h { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.3px; color: var(--ink); margin-top: 3px; }
.pd-thero .pd-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pd-claimbtn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; border: 1px solid var(--accent-bd); background: var(--accent-soft); color: var(--accent); border-radius: 11px; padding: 10px; font-weight: 700; font-size: 13px; margin-top: 12px; }
.pd-claimbtn svg { width: 15px; height: 15px; }

/* ── Identity/Accounts (2026-07-08): full-screen sign-in page (Mike's pick: Option B clean-centered).
   Appended to <body> as .auth-page so partialRender never wipes it. Muted blue only (§51). ── */
.auth-page {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 26px calc(env(safe-area-inset-bottom, 0px) + 40px);
}
.auth-back {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 14px;
  width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.auth-back svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-back:hover { background: var(--surface-3); }
.auth-inner { width: 100%; max-width: 330px; display: flex; flex-direction: column; }
.auth-logo { width: 64px; height: auto; display: block; margin: 0 auto 12px; }
.auth-wm { text-align: center; margin-bottom: 20px; }
.auth-wm-1 { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .13em; color: var(--ink); line-height: 1; }
.auth-wm-2 { font-weight: 600; font-size: 9px; letter-spacing: .30em; color: var(--faint); line-height: 1; margin-top: 3px; }
.auth-title { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 22px; text-align: center; color: var(--ink); margin: 0 0 5px; }
.auth-sub { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.4; margin: 0 0 6px; }
.auth-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin: 14px 0 5px; }
.auth-input { width: 100%; height: 46px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 16px; }
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-ring); }
.auth-err { background: var(--danger-soft); border: 1px solid var(--danger-light); color: var(--danger-dark); font-size: 12.5px; line-height: 1.35; padding: 9px 11px; border-radius: var(--r-sm); margin-top: 12px; }
.auth-submit { width: 100%; height: 48px; margin-top: 20px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.auth-submit:hover { background: var(--brand-dark); }
.auth-submit:disabled { opacity: .65; cursor: default; }
.auth-alt { display: block; width: 100%; margin-top: 14px; padding: 8px; background: transparent; border: 0; color: var(--accent); font-size: 13.5px; font-weight: 600; cursor: pointer; }
/* signed-in header chip: the account initial in the accent tint */
.pd-avic.is-signedin { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent); font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15px; }
/* account menu (reuses .kc-card chrome) */
.am-card { }
.am-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.am-role { color: var(--muted); font-size: 13px; margin: 4px 0 20px; }

/* ── Slice 3b (2026-07-09): claim-your-team page (Mike's LOCKED Option A, search-your-name)
   + the admin player-editor Account row. Reuses the .auth-page overlay shell + the .cik-* kiosk
   search kit; Direction-A tokens only (§51 no neon, §11 no emoji). */
.claim-page { align-items: flex-start; }                 /* search reads top-down, not centered */
.claim-inner { width: 100%; max-width: 380px; margin: 0 auto; }
.claim-inner .auth-title { margin-top: 6px; }
.claim-search { margin-top: 12px; }
.claim-results { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.claim-note { color: var(--text-3); padding: 10px 2px; }
.claim-row .cik-gp { color: var(--text-3); }
.claim-row.is-claimed { opacity: .55; cursor: default; }
.claim-linked { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 26px; text-align: center; }
.claim-bigav { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-bd); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 1.3rem; }
.claim-nm { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--text); }
.claim-team { color: var(--text-3); font-size: .9rem; }
.claim-linked .auth-submit { margin-top: 16px; }
.claim-linked .auth-err { width: 100%; }
/* admin player-editor Account row (edit modal) */
.edit-account { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px 2px; }
.edit-account .edit-account-status { color: var(--text-3); }
.edit-account .btn-unlink-account { min-height: 0; width: auto; padding: .4rem .85rem; font-size: .85rem; }
/* review fix: 'Claimed' is a taken/negative state — muted gray, never the kiosk's positive green */
.claim-row .cik-state { color: var(--text-4); }

/* ── Slice 3c (2026-07-09): personal layer — Home "your run" hero (LOCKED Option C timeline),
   My Team page (LOCKED Option B scoreboard), Standings You. Direction-A tokens only (§51). ── */
.pd-hteam { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--text); margin-top: 10px; letter-spacing: -.01em; }
.pd-hteam .pd-hmeta { font-size: .78rem; font-weight: 600; color: var(--muted); font-family: 'Inter',sans-serif; letter-spacing: 0; }
.pd-timeline { position: relative; padding-left: 20px; margin-top: 8px; }
.pd-tlline { position: absolute; left: 10px; top: 16px; bottom: 12px; width: 2px; background: var(--border); }
.pd-tl { position: relative; padding: 7px 0; }
.pd-tl::before { content: ""; position: absolute; left: -14px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.pd-tl.done::before { background: var(--live); }
.pd-tl.now::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } /* flat ring per the locked mock, not a glow */
.pd-tl .pd-tlk { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pd-tl.now .pd-tlk { color: var(--accent); }
.pd-tl .pd-tlv { font-size: .85rem; font-weight: 600; color: var(--text); margin-top: 1px; }
.pd-tl.faint .pd-tlv, .pd-tl.faint .pd-tlk { color: var(--faint); }
/* §13.4 ending micro-state: the eliminated terminal node — muted dot (default) + a quiet "Watch the bracket" chip. */
.pd-tl.pd-tl-end .pd-tlk { color: var(--muted); }
.pd-tl-endchip { margin-top: 8px; }
/* My Team page (LOCKED Option B) — mt-* kit */
.mt-center { text-align: center; }
.mt-team { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--text); margin-top: 3px; letter-spacing: -.01em; }
.mt-bigrec { text-align: center; padding: 10px 0 2px; }
.mt-rn { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 44px; letter-spacing: .02em; color: var(--text); line-height: 1; }
.mt-pips { display: flex; gap: 5px; justify-content: center; margin-top: 9px; }
.mt-pip { width: 22px; height: 6px; border-radius: 3px; background: var(--border-2); }
.mt-pip.w { background: var(--live); }
.mt-pip.l { background: var(--danger); }
.mt-next { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid var(--accent-bd); border-radius: var(--r-md); padding: 10px 12px; margin-top: 14px; }
.mt-nettile { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mt-nettile .n1 { font-size: 7.5px; font-weight: 700; opacity: .85; }
.mt-nettile .n2 { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 17px; }
.mt-nl { font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.mt-nv { font-weight: 700; font-size: .85rem; color: var(--text); }
.mt-game { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.mt-game:last-child { border-bottom: 0; }
.mt-wl { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 12px; color: #fff; background: var(--live); }
.mt-wl.l { background: var(--danger); }
.mt-gt { font-size: .85rem; font-weight: 600; color: var(--text); }
.mt-gs { margin-left: auto; font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: .9rem; color: var(--text); }
.mt-roster { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.mt-pl { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.mt-pl .av { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: .8rem; }
.mt-pl .mt-nm { font-size: .9rem; font-weight: 600; color: var(--text); }
.mt-you { margin-left: auto; font-size: .66rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-bd); padding: 1px 8px; border-radius: 999px; }
.pd-tl.done.lost::before { background: var(--danger); } /* green dot = won only; a lost game gets the muted red (§27) */

/* ── Slice 1 (spec §13.1/§13.2): Pools & schedule page + tap-a-team peek. Ported from the Mike-locked
   a1-final mockup onto the app kit; reuses the existing :root tokens + frosted .pd-card (§51 matte only). ── */
.ph-titles { display: flex; flex-direction: column; gap: 3px; }

/* pool filter chips */
.pd-pool-chips { display: flex; gap: 7px; margin-bottom: 15px; }
.pd-pool-chip { flex: 1; padding: 8px 4px; text-align: center; font-size: 12.5px; font-weight: 700; border-radius: 999px; background: oklch(0.98 0.004 75 / 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1.5px solid var(--border-2); color: var(--muted); cursor: pointer; font-family: inherit; }
.pd-pool-chip.pd-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Now playing section head */
.pd-pool-sechd { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pd-pool-sect { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .02em; color: var(--ink); }
.pd-pool-secsub { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
.pd-pool-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-soft); flex: none; }

/* Now playing live score cards */
.pd-pool-live { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; background: var(--live-soft); border: 1px solid oklch(0.85 0.05 150); border-radius: var(--r-md); padding: 10px 11px; margin-top: 8px; }
.pd-pool-live:first-of-type { margin-top: 0; }
.pd-pool-lcnet { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--live-ink); margin-bottom: 4px; }
.pd-pool-lcnet::before { content: ""; width: 5px; height: 5px; border-radius: 2px; background: var(--live); display: inline-block; }
.pd-pool-lcm { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pd-pool-vs { font-size: 11px; font-weight: 600; color: var(--faint); }
.pd-pool-lead { color: var(--live-ink); }
.pd-pool-lcr { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pd-pool-lcsc { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.5px; color: var(--live-ink); line-height: 1; }
.pd-pool-lctag { font-size: 8.5px; font-weight: 800; letter-spacing: .5px; color: #fff; background: var(--live); border-radius: 999px; padding: 2px 7px; }

/* slim pool section label */
.pd-pool-label { display: flex; align-items: center; gap: 9px; margin: 2px 2px 10px; font-family: 'Sora','Inter',sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-pool-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* per-net cards */
.pd-pool-nethd { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.pd-pool-netnm { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 14px; color: var(--ink); letter-spacing: -.2px; }
.pd-pool-court { width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 11px; flex: none; }
.pd-pool-netmeta { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.pd-pool-netmeta.has-live { color: var(--live-ink); }

/* game rows */
.pd-pool-game { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.pd-pool-game.pd-pool-first { border-top: none; }
.pd-pool-game.pd-pool-islive { background: var(--live-soft); border-radius: 10px; border-top-color: transparent; margin: 3px -6px; padding: 9px 6px; }
.pd-pool-gi { min-width: 0; }
.pd-pool-gnet { font-size: 11px; color: var(--muted); font-weight: 600; }
.pd-pool-gt { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.pd-pool-gt b { font-weight: 700; }
.pd-pool-glose { color: var(--muted); font-weight: 500; }
.pd-pool-gr { display: flex; align-items: center; gap: 9px; flex: none; }
.pd-pool-gsc { font-family: 'Sora','Inter',sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.3px; }
.pd-pool-gsc.pd-pool-sclive { color: var(--live-ink); }
.pd-pool-livetag { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--live); background: var(--live-soft); border-radius: 5px; padding: 2px 6px; }
.pd-pool-finaltag { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }

/* tap-a-team target (pools page + Home live board) */
.tapname { border-bottom: 1.5px dotted var(--accent-bd); cursor: pointer; }
.tapname.pd-peeked { color: var(--accent); }

/* team peek popover (body-level, fixed) */
.pd-peek { position: fixed; z-index: 60; max-width: 374px; background: var(--card); border: 1.5px solid var(--accent-bd); border-radius: var(--r-lg); box-shadow: 0 6px 22px oklch(0.18 0.005 75 / .14), 0 2px 6px oklch(0.18 0.005 75 / .08); padding: 13px 14px 12px; }
.pd-peek-arrow { position: absolute; top: -10px; width: 0; height: 0; }
.pd-peek-arrow::before, .pd-peek-arrow::after { content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; }
.pd-peek-arrow::before { bottom: 0; border-bottom: 10px solid var(--accent-bd); }
.pd-peek-arrow::after { bottom: -1.5px; border-bottom: 10px solid var(--card); }
.pd-peek.pd-peek-flip .pd-peek-arrow { top: auto; bottom: -10px; }
.pd-peek.pd-peek-flip .pd-peek-arrow::before { bottom: auto; top: 0; border-bottom: none; border-top: 10px solid var(--accent-bd); }
.pd-peek.pd-peek-flip .pd-peek-arrow::after { bottom: auto; top: -1.5px; border-bottom: none; border-top: 10px solid var(--card); }
.pd-peek-x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 8px; background: none; border: none; color: var(--faint); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pd-peek-x svg { width: 15px; height: 15px; }
.pd-peek-top { display: flex; align-items: center; gap: 10px; padding-right: 24px; }
.pd-peek-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); border: 1px solid var(--accent-bd); display: flex; align-items: center; justify-content: center; flex: none; }
.pd-peek-mark span { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15px; color: var(--accent); }
.pd-peek-id { min-width: 0; flex: 1; }
.pd-peek-name { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15.5px; color: var(--ink); line-height: 1.1; }
.pd-peek-sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 3px; }
.pd-peek-pool { font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-bd); border-radius: 999px; padding: 1px 7px; }
.pd-peek-lock { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--faint); }
.pd-peek-lock svg { width: 11px; height: 11px; }
.pd-peek-rec { display: flex; align-items: baseline; gap: 9px; margin: 11px 0 3px; }
.pd-peek-recbig { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -1px; color: var(--ink); line-height: 1; }
.pd-peek-recl { font-size: 11.5px; color: var(--muted); }
.pd-peek-rows { margin-top: 9px; border-top: 1px solid var(--border); }
.pd-peek-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--border); }
.pd-peek-row:first-child { border-top: none; }
.pd-peek-ic { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.pd-peek-ic svg { width: 14px; height: 14px; }
.pd-peek-ic.pd-peek-live { background: var(--live-soft); color: var(--live-ink); }
.pd-peek-ic.pd-peek-nx { background: var(--accent-soft); color: var(--accent); }
.pd-peek-rl { min-width: 0; flex: 1; }
.pd-peek-rl .k { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.pd-peek-rl .v { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.pd-peek-rl .v .op { color: var(--muted); font-weight: 600; }
.pd-peek-rr { flex: none; text-align: right; }
.pd-peek-rr .sc { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15px; color: var(--live-ink); }
.pd-peek-rr .lt { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .4px; color: var(--live); }
.pd-peek-rr .nx { font-size: 11px; font-weight: 700; color: var(--accent); }
.pd-peek-foot { margin-top: 10px; font-size: 10.5px; color: var(--faint); line-height: 1.4; }

/* ── Slice 2 (spec §13.3): the public Bracket page. Ported from the Mike-locked a2-final mockup onto the
   app kit; reuses the existing pd chrome (.pd-pagehdr/.pd-back/.ph-titles/.pd-eyebrow/.pd-htitle), the
   frosted .pd-card, and the shipped bt-* tree (buildBracketHTML read-only). Gold (§51 matte) appears ONLY
   on the decided championship game + the champions strip + the Completed pill — nothing gold before a
   winner exists, no gold path tint. New classes namespaced pd-bk-*. ── */

/* page header: let the title block flex so the status pill sits hard-right */
.pd-bk-hdr .ph-titles { flex: 1 1 auto; min-width: 0; }

/* status pill (right of the page title) */
.pd-bk-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: auto; border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.pd-bk-pill svg { width: 11px; height: 11px; flex: none; }
.pd-bk-pill.is-gold { background: var(--gold-soft); border: 1px solid var(--gold-bd); color: var(--gold-ink); }
.pd-bk-pill.is-live { background: var(--live-soft); border: 1px solid oklch(0.85 0.05 150); color: var(--live-ink); }
.pd-bk-pill.is-neutral { background: var(--surface-3); border: 1px solid var(--border); color: var(--muted); }
.pd-bk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pdbkpulse 1.8s ease-in-out infinite; }
@keyframes pdbkpulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* live status line ("Double elimination · Winners round 2") — indented under the title */
.pd-bk-statusline { display: flex; align-items: center; gap: 7px; margin: -2px 0 12px 41px; font-size: 11.5px; color: var(--muted); }
.pd-bk-sl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: pdbkpulse 1.8s ease-in-out infinite; flex: none; }

/* completed: matte-gold champions strip above the tree (SOLID gold-soft — never frosted) */
.pd-bk-champbar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; background: var(--gold-soft); border: 1.5px solid var(--gold-bd); border-radius: var(--r-lg); padding: 12px 14px; }
.pd-bk-cbic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--card); border: 1px solid var(--gold-bd); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.pd-bk-cbic svg { width: 21px; height: 21px; }
.pd-bk-cbh { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 15.5px; letter-spacing: -.2px; color: var(--ink); line-height: 1.15; }
.pd-bk-cbs { font-size: 12px; font-weight: 600; color: var(--gold-ink); margin-top: 3px; }
.pd-bk-persist { font-size: 11px; color: var(--faint); text-align: center; margin: 12px 6px 2px; line-height: 1.45; }

/* pre-bracket: frosted .pd-card + these inner bits (icon / heading / progress / seeding chip) */
.pd-bk-preic { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 13px; }
.pd-bk-preic svg { width: 22px; height: 22px; }
.pd-bk-preh { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.2px; color: var(--ink); line-height: 1.28; }
.pd-bk-pres { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.pd-bk-prog { margin-top: 17px; }
.pd-bk-prog-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.pd-bk-prog-l { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.pd-bk-prog-n { font-family: 'Sora','Inter',sans-serif; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pd-bk-bar { height: 8px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); overflow: hidden; }
.pd-bk-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.pd-bk-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; background: var(--accent-soft); border: 1px solid var(--accent-bd); color: var(--accent); border-radius: 999px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.pd-bk-chip svg { width: 14px; height: 14px; flex: none; }
.pd-bk-chip .pd-bk-chip-2 { color: var(--muted); font-weight: 600; }

/* read-only tree modifiers — scoped under .bt-pan.pd-bk-ro so the shared admin bt-* nodes are untouched.
   Nodes stay SOLID var(--card) (inherited from .bt-node); these add ONLY the gold champ game + the matte-
   green live node. No gold path tint (the public tree is rendered with an empty pathIds set). */
.bt-pan.pd-bk-ro .bt-node.pd-bk-champ { border: 1.5px solid var(--gold-bd); box-shadow: 0 0 0 1.5px var(--gold-soft), var(--shadow-sm); }
.bt-pan.pd-bk-ro .bt-node.pd-bk-champ .bt-meta { color: var(--gold-ink); font-weight: 800; display: flex; align-items: center; gap: 3px; }
.pd-bk-trophy { width: 10px; height: 10px; flex: none; }
.bt-pan.pd-bk-ro .bt-node.pd-bk-champ .bt-row.win { background: var(--gold-soft); }
.bt-pan.pd-bk-ro .bt-node.pd-bk-champ .bt-row.win .bt-name { color: var(--ink); font-weight: 800; }
.bt-pan.pd-bk-ro .bt-node.pd-bk-champ .bt-row.win .bt-sc { color: var(--gold); font-weight: 800; }
.bt-pan.pd-bk-ro .bt-node.pd-bk-live { border-color: oklch(0.85 0.05 150); box-shadow: inset 3px 0 0 var(--live), var(--shadow-sm); }
.bt-pan.pd-bk-ro .bt-node.pd-bk-live .bt-meta { color: var(--live-ink); }

/* ===================================================================
   REGISTRATION EVENT CARD + JOIN SHEET (Finish-line Slice 3, 2026-07-09)
   Spec §13.5, Mike's locked round-2 pick A. Ported from the locked visual
   pd-finish/r2-a.html to the pd-* backdrop grammar. Direction-A tokens only;
   §51 matte / no neon; §11 no emoji. Mobile-first (no new >=1024 rules).
   =================================================================== */

/* -- page header row (bare back chevron; the event card owns the naming) -- */
.pd-reg-pagehdr { margin-bottom: 12px; }

/* -- the EVENT card (a frosted .pd-card under body.pd-public-active) -- */
.pd-reg-card { padding: 17px 17px 16px; }
.pd-reg-top { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.pd-reg-mark { width: 48px; height: 48px; flex: none; border-radius: 13px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pd-reg-mark img { width: 34px; height: 34px; object-fit: contain; }

.pd-reg-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 11px 5px 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pd-reg-pill.is-open { background: var(--live-soft); border: 1px solid oklch(0.85 0.05 150); color: var(--live-ink); }
.pd-reg-pill.is-closed { background: var(--surface-3); border: 1px solid var(--border); color: var(--muted); padding-left: 11px; }
.pd-reg-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex: none; animation: pd-reg-pulse 1.8s ease-in-out infinite; }

.pd-reg-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pd-reg-title { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -.5px; color: var(--ink); line-height: 1.05; margin: 5px 0 8px; }
.pd-reg-sub { font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.35; margin-bottom: 15px; }

.pd-reg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.pd-reg-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; padding: 8px 13px 8px 11px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pd-reg-chip svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
.pd-reg-chip.pd-reg-chip-cost { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--brand-dark); }
.pd-reg-chip.pd-reg-chip-cost svg { color: var(--accent); }

.pd-reg-spots { display: flex; align-items: center; gap: 8px; padding: 11px 13px; margin-bottom: 16px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; color: var(--muted); }
.pd-reg-spots .pd-reg-dot { width: 7px; height: 7px; }
.pd-reg-spots b { font-family: 'Sora','Inter',sans-serif; font-weight: 800; color: var(--ink); letter-spacing: -.2px; }

/* full-width primary CTA (shared: event card, sheet submit, success claim) */
.pd-reg-cta { width: 100%; min-height: 56px; border: none; border-radius: var(--r-lg); background: var(--accent); color: oklch(0.99 0.01 240); font-family: 'Sora','Inter',sans-serif; font-weight: 700; letter-spacing: -.1px; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: var(--shadow); }
.pd-reg-cta svg { width: 19px; height: 19px; }
.pd-reg-cta:hover { background: var(--brand-dark); }
.pd-reg-cta:active { background: var(--brand-dark); }
.pd-reg-cta[disabled] { opacity: .6; }
.pd-reg-foot { text-align: center; font-size: 12px; font-weight: 500; color: var(--faint); margin-top: 11px; }
.pd-reg-closed { text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); padding: 6px 4px 2px; }

/* -- the JOIN SHEET (body-level bottom sheet; dimmed backdrop, slide-up) -- */
.pd-reg-scrim { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: flex-end; justify-content: center; background: oklch(0.18 0.005 75 / 0.42); animation: pd-reg-scrimin .18s ease-out; }
.pd-reg-sheet { width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); border: 1px solid var(--border); border-bottom: none; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 30px oklch(0.18 0.005 75 / .18); padding: 8px 17px calc(18px + env(safe-area-inset-bottom, 0px)); animation: pd-reg-sheetup .26s cubic-bezier(.22,1,.36,1); }
.pd-reg-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--border-2); margin: 2px auto 15px; }

.pd-reg-sheethd { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.pd-reg-sheeteyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.pd-reg-sheetteam { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.3px; color: var(--ink); margin-top: 3px; line-height: 1.08; }
.pd-reg-sheetx { margin-left: auto; width: 32px; height: 32px; min-height: 0; padding: 0; flex: none; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.pd-reg-sheetx:hover { background: var(--surface-3); }
.pd-reg-sheetx svg { width: 15px; height: 15px; }

.pd-reg-flbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 16px 2px 8px; }
.pd-reg-finput { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink); background: var(--card); border: 1.5px solid var(--border-2); border-radius: var(--r-md); padding: 15px; min-height: 54px; }
.pd-reg-finput::placeholder { color: var(--faint); font-weight: 500; }
.pd-reg-finput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-ring); }

.pd-reg-plhead { display: flex; align-items: baseline; gap: 8px; margin: 18px 2px 9px; }
.pd-reg-plhead .pd-reg-flbl { margin: 0; }
.pd-reg-plhint { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.pd-reg-pllist { display: flex; flex-direction: column; gap: 9px; }
.pd-reg-plrow { display: flex; align-items: center; gap: 0; background: var(--card); border: 1.5px solid var(--border-2); border-radius: var(--r-md); padding-left: 13px; min-height: 56px; }
.pd-reg-plrow:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--brand-ring); }
.pd-reg-plnum { width: 27px; height: 27px; flex: none; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-bd); color: var(--accent); font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; }
.pd-reg-plinput { flex: 1 1 auto; min-width: 0; border: none; background: none; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink); padding: 15px 13px 15px 12px; }
.pd-reg-plinput:focus { outline: none; }
.pd-reg-plinput::placeholder { color: var(--faint); font-weight: 500; }
.pd-reg-plcap { flex: none; margin-right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; }

.pd-reg-msg { min-height: 0; margin: 12px 2px 0; font-size: 13px; font-weight: 600; text-align: center; }
.pd-reg-msg:empty { margin: 0; }
.pd-reg-sheetcta { margin-top: 14px; }
.pd-reg-pay { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pd-reg-pay svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.pd-reg-pay b { font-weight: 700; color: var(--ink); }

/* -- the "You're in" payoff state (matte amber payment chip, distinct from the reserved gold) -- */
.pd-reg-won { text-align: center; padding: 6px 4px 4px; }
.pd-reg-check { width: 56px; height: 56px; margin: 6px auto 14px; border-radius: 50%; background: var(--live-soft); border: 1px solid oklch(0.85 0.05 150); color: var(--live-ink); display: flex; align-items: center; justify-content: center; }
.pd-reg-check svg { width: 28px; height: 28px; }
.pd-reg-wonh { font-family: 'Sora','Inter',sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.3px; color: var(--ink); }
.pd-reg-wonsub { font-size: 13.5px; color: var(--muted); margin: 6px 0 14px; }
.pd-reg-paychip { display: inline-flex; align-items: center; gap: 7px; background: oklch(0.95 0.035 75); border: 1px solid oklch(0.86 0.06 78); color: oklch(0.46 0.08 70); border-radius: 999px; padding: 7px 13px 7px 11px; font-size: 12.5px; font-weight: 700; margin-bottom: 16px; }
.pd-reg-paychip svg { width: 15px; height: 15px; flex: none; }
.pd-reg-backlink { display: block; width: 100%; margin: 12px auto 0; min-height: 0; padding: 6px; background: none; border: none; color: var(--muted); font-size: 13px; font-weight: 600; }
.pd-reg-backlink:hover { background: none; color: var(--ink); }

@keyframes pd-reg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes pd-reg-scrimin { from { opacity: 0; } to { opacity: 1; } }
@keyframes pd-reg-sheetup { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .pd-reg-scrim, .pd-reg-sheet { animation: none; } .pd-reg-dot { animation: none; } }

/* ===================================================================
   SLICE 5 — DESKTOP FULL-WIDTH TREATMENT (spec §13.8, 2026-07-09)
   Mike (locked): "A is the best, but on desktop you can fit a lot more
   showing, use the full space." Option A's chrome (one app, one scroll)
   but the PUBLIC content uses the full ~1140px width at >=1024px.

   SCOPING CONTRACT (so 390px + the admin surface are byte-identical):
   every rule below is BOTH scoped to body.pd-public-active AND inside
   @media (min-width:1024px) — with ONE exception: the two mobile-INERT
   structural hooks directly below. They use display:contents so the JS
   wrapper divs (.pd-pool-cols/.pd-pool-col in the Pools page,
   .pd-cardgrid in Standings) generate NO box below 1024px — the wrapped
   content renders exactly as the pre-Slice-5 flat stack. The @media
   block re-materialises them as grids. This is the only base-layer add.
   =================================================================== */

/* — mobile-inert structural hooks (see contract above) — */
.pd-pool-cols, .pd-pool-col, .pd-cardgrid { display: contents; }

@media (min-width: 1024px) {
  /* ---- chrome: bottom nav becomes a slim top tab strip under the header ---- */
  /* #app-shell is a flex column (header · #app-content · #bottom-nav in source order); reorder so the
     nav sits directly under the header. Public only — admin keeps its bottom bar. */
  body.pd-public-active #bottom-nav { order: 1; }
  body.pd-public-active #app-content { order: 2; }
  body.pd-public-active #bottom-nav {
    min-height: 0;
    border-top: none;
    border-bottom: 1px solid var(--border);
    padding: 0;
    background: var(--bg);
  }
  /* slim, horizontal tab buttons (icon + label in a row), centred as a strip */
  body.pd-public-active #bottom-nav .nav-btn {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 7px;
    padding: 11px 26px;
    font-size: 13px;
  }
  body.pd-public-active #bottom-nav .nav-btn svg { width: 17px; height: 17px; }
  body.pd-public-active #bottom-nav .nav-btn.active { box-shadow: inset 0 -2px 0 var(--brand); }

  /* ---- content width: the public column widens to ~1140px (was the 900px phone column) ---- */
  body.pd-public-active .container { max-width: 1140px; }
  /* the Check In kiosk stays a comfortable narrow column (its card is centred, no reflow this slice) */
  body.pd-public-active #tab-players > .container { max-width: 640px; }

  /* ---- typography: Sora titles up a notch on the surfaces that go wide (A direction) ---- */
  body.pd-public-active .pd-thero .pd-h { font-size: 22px; }
  body.pd-public-active .pd-htitle { font-size: 19px; }
  body.pd-public-active .mt-team { font-size: 1.5rem; }
  body.pd-public-active .mt-rn { font-size: 52px; }

  /* ---- Tournament hub: header card full width, tiles 4-across ---- */
  body.pd-public-active .pd-tiles { grid-template-columns: repeat(4, 1fr); }

  /* ---- Pools & schedule: now-playing cluster = a full-width ROW of live cards (was a vertical stack) ---- */
  body.pd-public-active section.pd-card:has(> .pd-pool-live) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
  }
  body.pd-public-active section.pd-card:has(> .pd-pool-live) > .pd-pool-sechd { grid-column: 1 / -1; }
  body.pd-public-active section.pd-card:has(> .pd-pool-live) > .pd-pool-live { margin-top: 0; }

  /* ---- Pools & schedule: the pools become side-by-side columns ---- */
  body.pd-public-active .pd-pool-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    align-items: start;
  }
  body.pd-public-active .pd-pool-col { display: block; } /* each pool = one column; its net cards stack within */

  /* ---- Standings: by-pool mini-tables 2–3 across; Overall as a centred wider table ---- */
  body.pd-public-active .pd-cardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    align-items: start;
  }
  body.pd-public-active .pd-cardgrid > .pd-card { margin-bottom: 0; }
  /* Overall view = a single bare .pd-card (+ foot) that is a DIRECT child of the container (pool cards live
     inside .pd-cardgrid, so they are untouched) — centre it. */
  body.pd-public-active #tab-standings > .container > .pd-card,
  body.pd-public-active #tab-standings > .container > .pd-foot { max-width: 620px; margin-left: auto; margin-right: auto; }

  /* ---- My Team: a comfortable centred column (scoreboard reads best focused, not stretched) ---- */
  body.pd-public-active #tab-myteam > .container > * { max-width: 720px; margin-left: auto; margin-right: auto; }

  /* ---- History: comfortable centred column ---- */
  body.pd-public-active #tab-history > .container > * { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* ---- Registration event card: centred (the hero sells before it asks — not a full-width band) ---- */
  body.pd-public-active #tab-tournament > .container:has(> .pd-reg-card) > * { max-width: 600px; margin-left: auto; margin-right: auto; }
  /* (Bracket keeps its full-width tree + champions strip from the widened container; pan stays available.) */

  /* ---- atom-up Home (2026-07-10 spec §3): rail + board at >=1024, CSS-only ----
     Mobile (<1024) is byte-identical — the flatten rules live in @media (max-width:1023px)
     and the .hm-rail/.hm-board base layer is untouched block flow. */
  body.pd-public-active #tab-home .hm{ max-width: 1140px; margin: 0 auto; }
  body.pd-public-active #tab-home .hm.is-live{ display: grid; grid-template-columns: 360px 1fr; column-gap: 40px; align-items: start; }
  /* rail = lead + coming-up + standings + link; board = LIVE NOW section */
  body.pd-public-active #tab-home .hm.is-live .hm-rail{ grid-column: 1; }
  body.pd-public-active #tab-home .hm.is-live .hm-board{ grid-column: 2; display: block; }
  body.pd-public-active #tab-home .hm.is-live .hm-board .hm-netgrid{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  body.pd-public-active #tab-home .hm:not(.is-live){ max-width: 640px; }
}

/* pnav — floating full-width rounded public nav (atom-up rung 5, pick H1).
   Mobile-only: #bottom-nav is a static in-flow flex child of #app-shell, so the float is done with
   margin (content clearance stays automatic); the base rule's env(safe-area-inset-bottom) padding
   relocates into the bottom margin calc. The >=1024 top tab strip (media block above) is untouched. */
@media (max-width: 1023px){
  body.pd-public-active #bottom-nav{
    margin: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; border-radius: 18px; border: 1px solid var(--border);
    background: oklch(1 0 0 / .82);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px oklch(0.18 0.005 75 / .10);
    padding-bottom: 0;
  }
}

/* ── hm-* : atom-up public Home kit (2026-07-10 spec) — card-free ── */
.hm{ position: relative; z-index: 1; }
.hm-lead{ display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 12px 2px 6px; }
.hm-eyebrow{ display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--live-ink); text-transform: uppercase; }
.hm-eyebrow .hm-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.hm-eyebrow.is-quiet{ color: var(--muted); } .hm-eyebrow.is-quiet .hm-dot{ background: var(--faint); }
.hm-lead h1{ font-family: var(--font-display); font-size: 27px; font-weight: 700; margin: 8px 0 4px; }
.hm-meta{ font-size: 13px; color: var(--muted); }
.hm-logo{ height: 148px; max-height: 148px; width: auto; align-self: center; justify-self: end; object-fit: contain; object-position: right center; }
.hm-cta{ grid-column: 1 / -1; margin-top: 14px; width: 100%; padding: 13px 0; background: var(--accent); color: #fff; border: none; border-radius: 11px; font: 600 15px 'Inter', sans-serif; }
/* Registration cluster (Mike rung-12 pick D + v10 iteration, 2026-07-10): title flush at top; the
   Register CTA sits INSIDE the wrapper and its width ends at the SAME right boundary as the status
   divider's hairline (the shared 118px logo reserve); the logo mark is absolutely sized to the FULL
   cluster height — title + meta + status divider + CTA — running from the title's top to the button's
   bottom. Every text element reserves the logo's width (118px = ~106px logo at the 236/335 intrinsic
   ratio for a ~150px wrapper + gap; the divider's right hairline stops before the logo because the
   ::after flex item lays out inside the padded content box; max-width guards the 2-line-title case where
   the taller wrapper would make the contained logo wider than the reserve). The reg status is a divider
   LABEL, not an eyebrow under the title. Reg-only — other states keep the shared .hm-lead grammar. */
.hm-regwrap{ position: relative; padding: 2px 2px 0; }
.hm-regwrap .hm-reginfo{ padding-right: 118px; }
.hm-regwrap h1{ font-family: var(--font-display); font-size: 27px; font-weight: 700; line-height: 1.05; margin: 0; }
.hm-regwrap .hm-meta{ margin-top: 5px; }
.hm-regwrap .hm-cta{ width: calc(100% - 118px); display: block; }
.hm-regwrap .hm-reglogo{ position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 118px; object-fit: contain; object-position: right top; }
.hm-status{ display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-right: 118px; }
.hm-status::before, .hm-status::after{ content: ''; flex: 1; height: 1px; background: oklch(0.88 0.005 75); }
.hm-status span{ font: 700 13px var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: oklch(0.42 0.006 75); }
.hm-status.is-closed span{ color: oklch(0.55 0.005 75); }
.hm-sect{ font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin: 20px 2px 8px; }
.hm-nethead{ display: flex; align-items: center; gap: 10px; font: 700 12.5px var(--font-display); letter-spacing: .12em; color: var(--ink); }
.hm-nethead::after{ content: ''; flex: 1; height: 1px; background: var(--border); }
.hm-netblock{ margin-bottom: 16px; }
.hm-game{ display: flex; align-items: center; padding: 8px 2px 0; }
.hm-teams{ flex: 1; min-width: 0; }
.hm-teams .hm-row{ display: flex; justify-content: space-between; align-items: baseline; padding: 1.5px 0; }
.hm-teams .hm-nm{ font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-teams .hm-sc{ font-family: var(--font-display); font-size: 15px; font-weight: 700; margin-left: 12px; }
.hm-pill{ font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 99px; margin-left: 12px; background: var(--live-soft); color: var(--live-ink); }
.hm-pill.is-done{ background: oklch(0.94 0.004 75); color: var(--muted); }
.hm-mini{ display: flex; justify-content: space-between; align-items: baseline; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 14px; }
.hm-mini:last-of-type{ border-bottom: none; }
.hm-mini .hm-rk{ color: var(--muted); font: 700 12px var(--font-display); margin-right: 8px; }
.hm-mini .hm-rec{ font-family: var(--font-display); font-weight: 700; }
.hm-link{ display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; font: 600 13.5px 'Inter', sans-serif; color: var(--brand-dark); }
.hm-detail{ display: flex; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 14px; align-items: center; }
.hm-detail:last-of-type{ border-bottom: none; }
.hm-detail svg{ width: 18px; height: 18px; stroke: var(--faint); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hm-detail .hm-d2{ color: var(--muted); margin-left: auto; font-size: 13px; }
/* — kit extensions required to render the spec states as <button>s (reset the global button chrome);
   matte, existing tokens only (§51). — */
.hm-link{ width: 100%; background: none; border: none; text-align: left; gap: 10px; }
.hm-link:hover{ background: none; }
.hm-link > span{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-link .hm-chev{ flex: none; }
.hm-empty{ padding: 8px 2px; color: var(--muted); font-size: 13px; }

/* — atom-up Home mobile ordering. On mobile the tournament-live rail/board wrappers dissolve
   (display:contents) so their children lay out directly under .hm as a flex column, and `order`
   sequences them: lead → LIVE NOW → COMING UP → STANDINGS → link. Scoped to mobile; the ≥1024
   rail+board grid is added in the desktop media block (Task 4, CSS-only). — */
@media (max-width: 1023px){
  body.pd-public-active #tab-home .hm.is-live{ display: flex; flex-direction: column; }
  body.pd-public-active #tab-home .hm.is-live .hm-rail,
  body.pd-public-active #tab-home .hm.is-live .hm-board{ display: contents; }
  body.pd-public-active #tab-home .hm.is-live .hm-rail > .hm-lead{ order: 1; }
  body.pd-public-active #tab-home .hm.is-live .hm-board > .hm-sect{ order: 2; }
  body.pd-public-active #tab-home .hm.is-live .hm-board > .hm-netgrid{ order: 2; }
  body.pd-public-active #tab-home .hm.is-live .hm-rail > .hm-comingup{ order: 3; }
  body.pd-public-active #tab-home .hm.is-live .hm-rail > .hm-standings{ order: 4; }
  body.pd-public-active #tab-home .hm.is-live .hm-rail > .hm-link{ order: 5; }
}