/* App screens: admin, family account, sign-in, platform.
   These keep their own neutral palette whatever colors the club chose (a pale
   brand color would make a tool unreadable); the club shows up in the brand
   badge, the family header and the site preview, which re-applies its look.
   Light and dark: the device setting by default, or <html data-theme> when
   the person picked one (web/js/theme.js). Components use tokens only. */
/* Tokens (colors, type, spacing, dark mode) live in tokens.css, loaded first; the old names used below
   (--bg, --ink, --brand, --radius ...) are aliases defined there. */
body.admin, body.login-page {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss01";   /* Inter's straight-sided 1 and open digits read better in tables */
}
body.admin h1, body.admin h2, body.admin h3, body.admin h4,
body.login-page h1, body.login-page h2, body.login-page h3 { color: var(--ink); letter-spacing: -.01em; font-family: var(--font-ui); }
/* Page titles are the bold condensed display face (sports feel); everything else stays in Inter. */
body.admin h1, body.login-page h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; line-height: var(--lh-tight); }
body.admin h2 { font-weight: 650; }
body.admin h3 { font-weight: 600; }
body.admin a, body.login-page a { color: var(--c-link); }
/* Phones zoom into any field whose text is under 16px; keep fields at 16px there. */
@media (max-width: 760px) { body.admin :is(input, select, textarea), body.login-page :is(input, select, textarea) { font-size: max(16px, 1em); } }
/* One focus ring everywhere, never removed. */
body.admin :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.login-page :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* Buttons in the app: solid brand blue, quiet ghost, red for destructive. */
body.admin .btn, body.login-page .btn { background: var(--brand); color: var(--brand-ink); border-radius: var(--radius-sm); padding: 10px 18px; font-weight: 600; box-shadow: var(--shadow); }
body.admin .btn:hover, body.login-page .btn:hover { filter: brightness(1.08); }
body.admin .btn-ghost, body.login-page .btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border); box-shadow: none; font-weight: 500; padding: 8px 14px; }
body.admin .btn-ghost:hover, body.login-page .btn-ghost:hover { background: var(--surface-hover); filter: none; }
body.admin .btn-danger, body.login-page .btn-danger { background: var(--c-danger-fill); color: #fff; }
body.admin .btn-light { background: var(--surface); color: var(--ink); }
body.admin .btn-small, body.login-page .btn-small { padding: 6px 12px; font-size: .88rem; }
body.admin input, body.admin textarea, body.admin select,
body.login-page input, body.login-page textarea, body.login-page select { background: var(--surface); color: var(--ink); border-color: var(--border); }
body.admin :is(input, textarea, select), body.login-page :is(input, textarea, select) { border-color: var(--c-border-strong); }

/* The club's own look inside the editor preview: always the light site. */
.site-preview {
  --primary: var(--club-primary, #0b2545); --accent: var(--club-accent, #13a8e0);
  --highlight: var(--club-highlight, #f2b705); --ink: var(--club-ink, #1b1f24);
  --muted: var(--club-muted, #5b6672); --surface-alt: var(--club-surface-alt, #f3f7fa);
  --surface: #ffffff; --border: #dde3ea; --radius: 10px;
  --font-heading: var(--club-font-heading, "Bitter", Georgia, serif);
  --font-body: var(--club-font-body, "Roboto", "Segoe UI", sans-serif);
  font-family: var(--font-body); color: var(--ink); background: var(--surface); color-scheme: light;
}
body.admin .site-preview h1, body.admin .site-preview h2, body.admin .site-preview h3, body.admin .site-preview h4 { color: var(--primary); letter-spacing: 0; }
body.admin .site-preview .sec-hero h1, body.admin .site-preview .sec-cta h2 { color: #fff; }
body.admin .site-preview a { color: var(--link); }
body.admin .site-preview .btn { background: var(--highlight); color: var(--ink); border-radius: var(--radius); padding: 12px 22px; font-weight: 700; box-shadow: none; }
body.admin .site-preview .btn-light { background: #fff; color: var(--primary); }

.row input[type="text"], .row input[type="email"] { width: auto; flex: 1; min-width: 140px; }
.muted { color: var(--muted); }

/* ---- sign-in ---- */
body.login-page { min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, var(--brand-soft), transparent 70%), var(--bg); }
.login-card { max-width: 420px; margin: 8vh auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 28px; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 1.6rem; }
.login-card .btn { width: 100%; padding: 12px 18px; }
.login-links { margin-top: 20px; font-size: .92rem; }
.resume-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.resume-list .btn { width: 100%; text-align: center; }
@media (max-width: 480px) { .login-card { margin: 0; min-height: 100vh; border-radius: 0; border: 0; box-shadow: none; } }

/* ---- top bar (family account, platform) ---- */
.admin-bar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.admin-bar-inner { max-width: 1400px; margin: 0 auto; padding: 0 16px; min-height: 56px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.admin-brand { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 10px; }
body.admin .admin-brand { color: inherit; }
.admin-brand small { color: var(--muted); font-weight: 400; }
.admin-nav { display: flex; gap: 4px; flex: 1; }
.admin-nav a { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 500; }
.admin-nav a:hover { background: var(--surface-hover); }
.admin-nav a.active { background: var(--brand); color: var(--brand-ink); }
.admin-user { display: flex; align-items: center; gap: 12px; font-size: .9rem; }
.admin-user .who { color: var(--muted); }
.badge { background: var(--c-danger-fill); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; font-weight: 700; }
@media (max-width: 760px) { .admin-user .who { display: none; } }

/* Family account: the club's own color across the top, readable text on it. */
.account-page .admin-bar { background: var(--club-header, var(--club-primary, #0b2545)); color: var(--club-header-ink, var(--club-primary-ink, #fff)); border-bottom: 0; }
.account-page .admin-bar a, .account-page .admin-brand, .account-page .admin-brand small, .account-page .admin-user .who { color: inherit; }
.account-page .admin-brand small { opacity: .8; }
.account-page .admin-bar .admin-nav a { color: inherit; opacity: .9; }
.account-page .admin-bar .admin-nav a:hover { background: rgba(127, 127, 127, .2); }
.account-page .admin-bar .btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.account-page .admin-nav a[hidden] { display: none; }
/* On a phone the family header wrapped to three rows (about a quarter of the screen, and it stays on top while
   scrolling). Keep it compact: no "My account" label, tighter links, at most two short rows. */
/* The rows are fixed so they don't depend on the club's name length: the name (cut short with "..." when long) and
   Sign out on the first row, the links on the second. Before, a short name pulled the links up beside it and pushed
   Sign out alone onto a row of its own. */
@media (max-width: 600px) {
  .account-page .admin-bar-inner { gap: 2px 8px; padding: 6px 12px; min-height: 0; flex-wrap: wrap; }
  .account-page .admin-brand { order: 1; flex: 1 1 0; min-width: 0; }
  .account-page .admin-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-page .admin-brand small { display: none; }
  .account-page .admin-user { order: 2; margin-left: auto; flex: none; }
  .account-page .admin-bar .admin-nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -8px; }
  .account-page .admin-bar .admin-nav a { padding: 6px 8px; white-space: nowrap; }
}

/* ---- admin sidebar (desktop) / drawer (phones) ----
   Dark rail, the club's mark at the top (its color is identity only), seven folding groups, All tools. */
body.has-sidebar .admin-bar { display: contents; }
.sidebar { background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; width: 248px; position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; overflow-y: auto; padding: 12px 10px 14px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.sidebar .admin-brand { padding: 6px 8px 12px; color: #fff; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .brand-text strong { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; line-height: 1.1; }
.sidebar .brand-text small { color: var(--side-muted); font-size: var(--t-small); }
.brand-mark { width: 36px; height: 36px; border-radius: var(--r-md); flex: none; object-fit: contain; background: var(--club-primary, #0b2545); color: var(--club-primary-ink, #fff); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
img.brand-mark { background: #fff; padding: 2px; }
.sidebar .admin-nav { display: block; flex: 1; }
.nav-group { margin: 0 0 2px; }
.nav-home { margin-bottom: 6px; }
.nav-group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--side-muted); margin: 0; padding: 8px 10px; font-weight: 600; border-radius: var(--r-md); }
summary.nav-group-title { cursor: pointer; list-style: none; min-height: 36px; }
summary.nav-group-title::-webkit-details-marker { display: none; }
summary.nav-group-title::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); }
details.nav-group[open] > summary.nav-group-title::after { transform: rotate(45deg); }
summary.nav-group-title > span:first-child { flex: 1; }
summary.nav-group-title:hover { background: var(--side-hover); color: #fff; }
.nav-count { font-size: .72rem; font-weight: 600; color: var(--side-muted); letter-spacing: 0; font-variant-numeric: tabular-nums; }
details.nav-group[open] { padding-bottom: 6px; }
.sidebar .admin-nav a, .side-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 36px; border-radius: var(--r-md); color: var(--side-ink); text-decoration: none; font-weight: 500; font-size: .875rem; background: none; border: 0; width: 100%; font-family: inherit; cursor: pointer; text-align: left; position: relative; }
.sidebar .admin-nav a:hover, .side-link:hover { background: var(--side-hover); color: #fff; }
/* The current screen: a solid brand pill (white text 6.78 light / 5.01 dark) and a 3px club-colored edge. */
.sidebar .admin-nav a.active, .side-link.active { background: var(--c-side-active); color: var(--c-side-active-ink); }
/* With the club's colors on: a club-colored band across the top of the sidebar (identity, like the brand mark). */
:root[data-app-brand="club"] .sidebar { box-shadow: inset 0 4px 0 var(--club-primary, transparent); }
.sidebar .admin-nav a.active::before, .side-link.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--club-primary, #fff); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.sidebar .admin-nav a .badge { margin-left: auto; }
body.admin a.side-link { color: var(--side-ink); }
body.admin a.side-link.active { color: var(--c-side-active-ink); }
.side-link.all-tools { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 var(--r-md) var(--r-md); padding-top: 10px; }
.side-link.all-tools .nav-count { margin-left: auto; }
.side-link.all-tools.active .nav-count { color: var(--c-side-active-ink); }
.nav-hint { margin: 6px 10px 10px; font-size: .8rem; }
.sidebar .nav-hint a { display: inline; padding: 0; color: var(--side-muted); text-decoration: underline; width: auto; min-height: 0; background: none; }
.sidebar .admin-nav a.active .badge { background: var(--c-side-active-ink); color: var(--c-side-active); }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 10px; margin-top: 8px; }
body.admin .side-foot a.side-link { color: var(--side-ink); }
.side-foot .admin-user { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
.side-foot .admin-user .who { color: var(--side-muted); font-size: .8rem; display: block; overflow-wrap: anywhere; }
.side-foot .btn-ghost { background: transparent !important; color: var(--side-ink) !important; border-color: rgba(255, 255, 255, .18) !important; }
.topbar { display: none; }
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 45; }
@media (min-width: 900px) {
  body.has-sidebar { --sticky-top: 16px; }
  body.has-sidebar #admin-app { padding-left: 252px; }
  body.has-sidebar .scrim { display: none; }
}
@media (max-width: 899px) {
  body.has-sidebar { --sticky-top: 72px; }
  /* Closed: no shadow (it showed as a grey smear along the screen's left edge) and hidden from Tab and screen readers. */
  .sidebar { transform: translateX(-100%); transition: transform .2s ease, visibility .2s; visibility: hidden; }
  body.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-lg); }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40; min-height: 56px; padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .topbar-brand { display: flex; align-items: center; gap: 10px; color: var(--ink) !important; text-decoration: none; min-width: 0; }
  .topbar-brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .brand-mark { width: 28px; height: 28px; font-size: .85rem; }
  .menu-btn { background: none; border: 0; padding: 10px; margin-left: -6px; color: var(--ink); cursor: pointer; border-radius: var(--radius-sm); }
  .menu-btn .icon { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---- page body ---- */
.admin-main { max-width: 1100px; margin: 0 auto; padding: 28px 20px 72px; }
.admin-main > h1, .admin-main h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .6em; }
@media (max-width: 600px) { .admin-main { padding: 18px 14px 64px; } .admin-main h1 { font-size: 1.35rem; } }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow); }
.panel h2 { font-size: 1.08rem; font-weight: 650; margin-bottom: .8em; }
@media (max-width: 600px) { .panel { padding: 16px; border-radius: 10px; } }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.hint { color: var(--muted); font-size: .88rem; margin-top: 4px; }
.chip { display: inline-block; font-size: .74rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-alt); color: var(--muted); font-weight: 600; }
.chip.live { background: var(--ok-soft); color: var(--ok); }
.chip.draft { background: var(--warn-soft); color: var(--warn-ink); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }

/* ---- dashboard ---- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; gap: 10px; align-items: baseline; }
.checklist li:last-child { border: 0; }
.checklist .tick { width: 1.2em; font-weight: 700; color: var(--muted); }
.checklist li.done .tick { color: var(--ok); }
.checklist li.done a { color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink) !important; display: block; }
.stat strong { display: block; font-size: 1.6rem; line-height: 1.2; }
.stat span { color: var(--muted); font-size: .88rem; }
a.stat:hover { border-color: var(--brand); }

/* ---- page editor ---- */
.editor-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; max-width: 1700px; margin: 0 auto; padding: 20px 16px 64px; align-items: start; }
/* Below 1350px the preview goes under the editor, in the editor's column: spanning both columns put it under the
   page list, which stays pinned while scrolling and covered the left of the preview (QA 2026-10-23). */
@media (max-width: 1350px) { .editor-layout { grid-template-columns: 220px minmax(0, 1fr); } .preview-pane { grid-column: 2; } }
@media (max-width: 760px) { .editor-layout { grid-template-columns: 1fr; } .preview-pane { grid-column: auto; } }
.page-list, .editor, .preview-pane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.page-list { padding: 14px; position: sticky; top: var(--sticky-top); }
@media (max-width: 760px) { .page-list { position: static; } }
.pl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pl-head h2 { margin: 0; font-size: 1.05rem; }
/* The Teams page reuses the page list look. */
#pages-ul, #teams-ul { list-style: none; margin: 0; padding: 0; }
#pages-ul button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--ink); }
#pages-ul button:hover { background: var(--surface-hover); }
#pages-ul button.active { background: var(--brand); color: var(--brand-ink); }
#pages-ul button.active .chip { background: var(--brand-ink); color: var(--brand); }
.editor { padding: 20px; min-width: 0; }
.editor-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.editor-bar h2 { margin: 0; font-size: 1.3rem; }
.ed-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dirty-dot { color: var(--danger); font-weight: 700; }
.page-settings { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 14px; margin: 14px 0; }
.page-settings summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.page-settings[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.check input { width: auto; }
.slug-input { display: flex; align-items: center; gap: 4px; }
.slug-input span { color: var(--muted); }

.sec-card { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; background: var(--surface); }
.sec-card > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.sec-card > summary::-webkit-details-marker { display: none; }
.sec-card[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-alt); border-radius: var(--radius) var(--radius) 0 0; }
.sec-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--brand-text); min-width: 78px; }
.sec-sum { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sec-card.is-hidden .sec-sum { color: var(--muted); text-decoration: line-through; }
/* A flag such as "Starter text" sits on a second line under the section's name, so the summary keeps its room. */
.sec-card > summary { flex-wrap: wrap; row-gap: 4px; }
.sec-flag { flex-basis: 100%; padding-left: 20px; line-height: 1; }
.sec-tools { display: flex; gap: 2px; }
.sec-tools button { background: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 1rem; color: var(--muted); }
.sec-tools button:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.sec-tools button:disabled { opacity: .3; cursor: default; }
.sec-card-wrap { position: relative; }
.sec-card-wrap > .sec-tools { position: absolute; right: 8px; top: 6px; }
.sec-card-wrap .sec-card > summary { padding-right: 190px; }   /* room for the actions laid over the row */
@media (max-width: 700px) { .sec-card-wrap > .sec-tools { position: static; justify-content: flex-end; padding: 0 8px 8px; margin-top: -4px; } .sec-card-wrap .sec-card > summary { padding-right: 12px; } .sec-card-wrap .sec-card[open] { margin-bottom: 0; } }
/* Phones (S-41): a section's actions (reorder, hide, copy, delete) used to sit under the card, so with a card open they
   were under the whole form, far from the section's name, and under a closed card they read as the next card's. They
   now sit in a strip on top of each card, joined to it, right above its name. Only the drawing order changes. */
@media (max-width: 700px) {
  .sec-card-wrap { display: flex; flex-direction: column; margin-bottom: 12px; }
  .sec-card-wrap > .sec-tools { order: -1; margin: 0; padding: 2px 8px; background: var(--surface-alt); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .sec-card-wrap > .sec-card, .sec-card-wrap > .sec-card[open] { margin-bottom: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .sec-card-wrap > .sec-card > summary { border-top-left-radius: 0; border-top-right-radius: 0; }
}
.sec-body { padding: 14px; }
.add-section { margin-top: 8px; }
.add-menu { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.add-menu button { text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer; font: inherit; }
.add-menu button:hover { border-color: var(--brand); }
.add-menu small { display: block; color: var(--muted); }

.rich-tools { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface-alt); }
.rich-tools button { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font: inherit; min-width: 34px; }
.rich-tools button:hover { border-color: var(--brand); }
.rich-area { min-height: 140px; padding: 12px; border: 1px solid var(--border); border-radius: 0 0 8px 8px; background: var(--surface); color: var(--ink); }
.rich-area:focus { outline: 2px solid var(--brand); outline-offset: -2px; }

.img-field { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.img-field img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); }
.img-field .img-controls { flex: 1; min-width: 200px; }
.preview-pane { position: sticky; top: var(--sticky-top); max-height: calc(100vh - var(--sticky-top) - 20px); overflow: auto; }
.preview-head { padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 700; position: sticky; top: 0; background: var(--surface); z-index: 1; display: flex; justify-content: space-between; }
@media (max-width: 1350px) { .preview-pane { position: static; max-height: none; } }
.site-preview .sec { padding: 36px 0; }
.site-preview .sec-hero { padding: 56px 0; }

dialog { border: 1px solid var(--border); border-radius: 16px; padding: 24px; max-width: 520px; width: calc(100% - 32px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog h2 { font-size: 1.2rem; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
@media (max-width: 600px) {
  dialog { max-width: none; width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92vh; }
}
.version-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.version-list li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* ---- settings ---- */
.color-row { display: flex; gap: 16px; flex-wrap: wrap; }
.color-row label { display: flex; align-items: center; gap: 8px; }
.color-row input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.menu-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.menu-item .row { margin-bottom: 6px; }
.menu-item .row input { flex: 1; min-width: 140px; }
.menu-child { margin-left: 28px; }
.save-bar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin: 0 -16px; z-index: 5; }

/* ---- messages ---- */
.msg-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .msg-layout { grid-template-columns: 1fr; } }
.msg-list { list-style: none; margin: 0; padding: 0; }
.msg-list button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 12px; cursor: pointer; font: inherit; color: var(--ink); display: block; }
.msg-list button:hover, .msg-list button.active { background: var(--surface-hover); }
.msg-list .unread strong::before { content: "\25CF "; color: var(--brand-text); }
.msg-list small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-body { white-space: pre-wrap; background: var(--surface-alt); border-radius: 8px; padding: 14px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; }
.tabs button { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; white-space: nowrap; }
.tabs button.active { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* ---- shared admin tables, two-column layout, small helpers ---- */
.editor-layout.two { grid-template-columns: 240px minmax(0, 1fr); }
@media (max-width: 760px) { .editor-layout.two { grid-template-columns: 1fr; } }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; background: var(--surface-alt); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tr:last-child td { border-bottom: 0; }
body.admin .schedule th, body.admin .schedule td { border-color: var(--border); }
.table-wrap { overflow-x: auto; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type="search"], .toolbar input[type="text"] { width: auto; flex: 1; min-width: 180px; }
.toolbar select { width: auto; }
.empty { color: var(--muted); padding: 16px 0; }
.ui-dialog { max-width: 640px; max-height: 90vh; overflow: auto; }
.pill { display: inline-block; font-size: .74rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-alt); color: var(--muted); margin-right: 4px; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 760px) { .cols-2 { grid-template-columns: 1fr; } }
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 8px; gap: 10px; flex-wrap: wrap; }
.section-title h3 { margin: 0; font-size: 1.05rem; font-family: var(--font-body); }
.notice { background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--ink); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.notice[data-state="ok"] { background: var(--ok-soft); border-color: var(--ok); }
.item-row { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.item-row .row { justify-content: space-between; margin-bottom: 6px; }
.event-card { background: var(--surface); border-color: var(--border); }

/* Big touch targets on phones (attendance, RSVP buttons). */
@media (pointer: coarse) {
  body.admin .btn-small { min-height: 40px; }
  .sidebar .admin-nav a, .side-link { min-height: 44px; }
}

/* Links inside lists read as items, not prose: underline only on hover. */
.checklist a, .table a, .msg-list a { text-decoration: none; }
.checklist a:hover, .table a:hover { text-decoration: underline; }

/* ---- website editor extras (item 1b) ---- */
.starter-btn { width: 100%; margin-top: 12px; }
.drag-handle { cursor: grab; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 2px; user-select: none; }
.sec-card.dragging { opacity: .5; }
.sec-card.drop-before { box-shadow: 0 -3px 0 var(--brand); }
.sec-card.drop-after { box-shadow: 0 3px 0 var(--brand); }
.sec-style { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; }
.sec-style-toggle { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font: inherit; font-size: .9rem; margin-bottom: 8px; }
.sec-style-toggle::before { content: "\25B8  "; }
.sec-style-toggle[aria-expanded="true"]::before { content: "\25BE  "; }
.add-group { width: 100%; }
.add-group-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 6px 0; }
.add-menu-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 8px; }
.add-menu-row button { text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; font: inherit; }
.add-menu-row button:hover { border-color: var(--brand); }
.add-menu-row small { display: block; color: var(--muted); font-size: .8rem; }
.img-frame { position: relative; display: inline-block; line-height: 0; }
.img-frame img { width: 160px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-alt); }
.img-frame.can-focus { cursor: crosshair; }
.focus-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid #fff; background: var(--brand); box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.lib-dialog { max-width: 760px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; }
.lib-item { padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--surface-alt); cursor: pointer; line-height: 0; }
.lib-item:hover, .lib-item:focus-visible { border-color: var(--brand); }
.lib-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.device-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.device-switch button { background: var(--surface); color: var(--muted); border: 0; padding: 4px 10px; font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; }
.device-switch button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.preview-head { align-items: center; gap: 8px; }
.site-preview.device-framed { margin: 12px auto; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.a11y-box { border: 1px solid var(--warn-border); background: var(--warn-soft); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 12px; }
.a11y-box.ok { border-color: var(--border); background: var(--ok-soft); }
.a11y-box summary { cursor: pointer; font-weight: 600; }
.a11y-box ul { margin: 8px 0 0 18px; padding: 0; }
.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.theme-card { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; background: var(--surface); color: var(--ink); text-align: left; font: inherit; }
.theme-card[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.theme-card .tc-sample { height: 54px; border-radius: 6px; margin-bottom: 8px; background: var(--club-primary, #0b2545); position: relative; }
.theme-card .tc-sample::after { content: ""; position: absolute; left: 10px; bottom: 10px; width: 40px; height: 12px; background: var(--club-highlight, #f2b705); }
.theme-card[data-theme-key="modern"] .tc-sample { border-radius: 14px; } .theme-card[data-theme-key="modern"] .tc-sample::after { border-radius: 99px; }
.theme-card[data-theme-key="bold"] .tc-sample { border-radius: 2px; } .theme-card[data-theme-key="bold"] .tc-sample::after { width: 60px; height: 14px; }
.theme-card[data-theme-key="minimal"] .tc-sample { background: var(--surface-alt); border: 1px solid var(--border); } .theme-card[data-theme-key="minimal"] .tc-sample::after { background: var(--club-primary, #0b2545); height: 4px; }
.theme-card small { display: block; color: var(--muted); font-size: .8rem; }
.contrast-warn { color: var(--danger); font-size: .88rem; margin: 8px 0 0; }

/* ---- family home (item 2) ---- */
.next-card { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.next-card:last-child { border-bottom: 0; }
.next-card.is-cancelled .next-body > strong { text-decoration: line-through; color: var(--muted); }
.date-chip { flex: none; width: 56px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); text-align: center; padding: 6px 0; line-height: 1.15; align-self: flex-start; }
.date-chip span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.date-chip strong { display: block; font-size: 1.35rem; }
.next-body { flex: 1; min-width: 0; }
.next-body .chip { margin-left: 6px; }
.rsvp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rsvp-name { min-width: 64px; font-weight: 600; font-size: .92rem; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.segmented .seg { background: var(--surface); color: var(--ink); border: 0; border-right: 1px solid var(--border); padding: 7px 14px; font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; min-height: 36px; }
.segmented .seg:last-child { border-right: 0; }
.segmented .seg:hover { background: var(--surface-hover); }
.segmented .seg[aria-pressed="true"][data-answer="going"] { background: var(--c-ok-fill); color: #fff; }
.segmented .seg[aria-pressed="true"][data-answer="not_going"] { background: var(--c-danger-fill); color: #fff; }
.segmented .seg[aria-pressed="true"][data-answer="maybe"] { background: var(--c-warn-fill); color: #fff; }
@media (pointer: coarse) { .segmented .seg { min-height: 44px; padding: 8px 16px; } }
.todo-list { display: grid; gap: 6px; }
.todo-item { text-align: left; background: var(--warn-soft); border: 1px solid var(--warn-border); color: var(--ink); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; cursor: pointer; }
.todo-item:hover { filter: brightness(.98); }
.pref-block { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.pref-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pref-block h3 { font-size: 1rem; margin-bottom: 6px; }
.pref-block .row .field { margin-bottom: 0; }
.pref-block input[type="time"] { width: auto; }
#cal-url { flex: 1; min-width: 200px; font-family: ui-monospace, monospace; font-size: .85rem; }
.mfa-qr { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--border); }
#mfa-code { width: 120px; letter-spacing: .2em; font-size: 1.1rem; }

/* ---- practice deck ---- */
.deck-cards { display: grid; gap: 10px; }
.deck-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); display: grid; gap: 8px; }
.deck-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deck-head strong { font-size: 1.05rem; }
.deck-alert { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); padding: 6px 10px; font-size: .9rem; font-weight: 600; }
.deck-contacts { display: flex; gap: 6px; flex-wrap: wrap; }
.deck-counts { font-weight: 600; }
.deck .segmented .seg { flex: 1; }
.deck .segmented { display: flex; width: 100%; }

/* ---- sport picker (signup, settings) ---- */
.sport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.sport-card { position: relative; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px 12px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.sport-card:hover { border-color: var(--brand); }
.sport-card[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.sport-card[data-order="main"]::after { content: "Main"; position: absolute; top: 6px; right: 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-text); }
.num-input { width: 64px !important; text-align: center; }
input.invalid { border-color: var(--danger) !important; }
.seed-input { width: 110px !important; }
.period-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.period { display: grid; gap: 4px; justify-items: center; }
.period input { width: 56px; text-align: center; }
.score-grid select { width: auto; min-width: 52px; padding: 6px; }
.score-grid td.avg { font-weight: 700; font-variant-numeric: tabular-nums; }
#offer-msg { flex: 1; }
.offer-card { border: 2px solid var(--brand); background: var(--brand-soft); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }
.offer-card p { margin: 6px 0; }
.deck-out { background: var(--c-danger-fill); color: #fff; }
.out-row { border-color: var(--danger); }
.doc-upload { margin-top: 8px; }
.doc-file { max-width: 240px; }
.pitch-info { font-weight: 600; }

/* ---- chat (item 4) ---- */
.chat-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 0; max-width: 1200px; margin: 0 auto; height: calc(100vh - 56px); }
.chat-list { border-right: 1px solid var(--border); background: var(--surface); overflow-y: auto; }
.chat-list-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
.chat-list-head h1 { font-size: 1.2rem; margin: 0; }
.chat-items { list-style: none; margin: 0; padding: 0; }
.chat-items button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 12px 16px; cursor: pointer; font: inherit; color: var(--ink); display: block; }
.chat-items button:hover, .chat-items button.active { background: var(--surface-hover); }
.chat-items button.unread strong::before { content: "\25CF "; color: var(--brand-text); }
.chat-items small { display: block; color: var(--muted); }
.chat-thread, .chat-empty { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.chat-empty { align-items: center; justify-content: center; }
.chat-thread-head { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.chat-thread-head h2 { font-size: 1.1rem; margin: 0; }
.chat-thread-head .hint { margin: 2px 0 0; }
.chat-back { display: none; }
.chat-notice { margin: 0; padding: 8px 16px; font-size: .85rem; color: var(--muted); background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; background: var(--surface); border: 1px solid var(--border); border-radius: 14px 14px 14px 4px; padding: 8px 12px; align-self: flex-start; box-shadow: var(--shadow); }
.msg.mine { align-self: flex-end; background: var(--brand-soft); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.msg.removed .msg-body { color: var(--muted); font-style: italic; }
.msg-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .82rem; margin-bottom: 2px; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-acts { margin-top: 4px; }
.msg-act { background: none; border: 0; color: var(--muted); font: inherit; font-size: .78rem; cursor: pointer; padding: 0; margin-right: 10px; text-decoration: underline; }
.chat-compose { border-top: 1px solid var(--border); background: var(--surface); padding: 10px 16px; display: grid; gap: 6px; }
.chat-compose textarea { resize: none; }
.chat-emergency { font-size: .85rem; margin: 0; }
.pick-list { max-height: 40vh; overflow-y: auto; margin: 8px 0; }
@media (max-width: 760px) {
  .chat-layout { grid-template-columns: 1fr; height: calc(100vh - 56px); }
  .chat-thread, .chat-empty { display: none; }
  body.thread-open .chat-list { display: none; }
  body.thread-open .chat-thread { display: flex; }
  .chat-back { display: inline-block; }
  .msg { max-width: 90%; }
}
.msg .msg-body { background: none; padding: 0; border-radius: 0; }
.inv-line .inv-label { flex: 1; min-width: 160px; }
.inv-line .inv-amount { width: 110px !important; }

/* Family registration extras: waiver text, plan schedule, bills */
.waiver-text { max-height: 40vh; overflow: auto; white-space: pre-wrap; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--surface-alt); margin-bottom: 8px; }
.plan-table { width: 100%; margin-top: 8px; font-size: .92em; }
.plan-table td, .plan-table th { padding: 4px 8px; text-align: left; }
.pay-code { font-size: 1.3em; letter-spacing: .08em; }
.bill-lines { margin: 6px 0; padding-left: 18px; }
.signed-waivers { margin-top: 10px; }

/* Support threads (platform admin and club Help page) */
.support-msg { border-left: 3px solid var(--border); padding: 6px 10px; margin: 8px 0; }
.support-msg.from-platform { border-left-color: var(--brand); background: var(--brand-soft); }
.plan-banner { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; }
.plan-banner a { color: inherit; font-weight: 700; }
.plan-choices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 12px 0; }
.plan-choice { display: flex; flex-direction: column; gap: 6px; }
.draft-note { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); padding: 8px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Reports: simple horizontal bars */
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 180px) 1fr 90px; gap: 10px; align-items: center; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--surface-alt); border-radius: 999px; height: 12px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; min-width: 2px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .bar-row { grid-template-columns: 1fr 70px; } .bar-track { grid-column: 1 / -1; grid-row: 2; } }
.danger-zone { border-color: var(--danger); }
/* Quick search */
.qs-btn { margin-left: auto; }
.qs-dialog { width: min(560px, calc(100vw - 32px)); padding: 12px; }
.qs-dialog input { width: 100%; font-size: 1.05rem; padding: 10px 12px; }
.qs-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 50vh; overflow: auto; }
.qs-list a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); }
.qs-list a:hover, .qs-list a:focus { background: var(--surface-hover); }
.delete-account { margin-top: 16px; }
.lang-switch { margin-left: 8px; }
.side-search { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 24px); margin: 4px 12px 8px; padding: 8px 10px; border: 1px solid var(--side-hover); border-radius: var(--radius-sm); background: transparent; color: var(--side-muted); font: inherit; cursor: pointer; }
.side-search:hover { background: var(--side-hover); color: var(--side-ink); }
.side-search kbd { font-size: .75em; color: #c3cddd; }   /* readable on the dark sidebar (4.5:1 or better) */
.qs-dialog { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.qs-dialog::backdrop { background: rgba(0, 0, 0, .35); }

/* Setup checklists and warning notes */
.setup-steps { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 4px; }
.setup-steps li { padding-left: 4px; }
.setup-steps li.done { color: var(--ok); }
.setup-steps li.todo { color: var(--muted); }
.note.warn { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--warn-border); border-left: 4px solid var(--warn-ink); background: var(--warn-soft); color: var(--warn-ink); border-radius: 6px; }

/* Family account tabs and the "you owe" bar */
[data-tab-hidden] { display: none !important; }
.owe-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--warn-border); background: var(--warn-soft); color: var(--warn-ink); border-radius: 10px; font-weight: 600; }
.owe-bar[hidden] { display: none; }

/* Registration details editor, receipts and aid */
.detail-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.detail-row input[type="text"] { flex: 1 1 180px; }
.addon-row { align-items: center; gap: 8px; flex-wrap: wrap; }
.history-row .btn { margin-top: 6px; }
.receipt table { width: 100%; }
.receipt th { text-align: left; width: 8em; font-weight: 600; }
@media print {
  body.printing-receipt > *:not(dialog) { display: none !important; }
  body.printing-receipt dialog.ui-dialog { position: static; box-shadow: none; border: 0; width: auto; max-width: none; }
  body.printing-receipt dialog.ui-dialog .dialog-actions, body.printing-receipt dialog.ui-dialog h2 { display: none; }
}

.code-area { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; width: 100%; }
/* The Visits column chart (admin-analytics.js): only a .bars box that holds .bar columns. The horizontal bar lists
   (.bars holding .bar-row: Reports and Finance) keep the grid above; this rule used to squeeze them into one line. */
.bars:has(> .bar) { display: flex; align-items: flex-end; gap: 2px; height: 140px; }
.bars .bar { flex: 1; background: var(--c-brand); border-radius: 2px 2px 0 0; min-width: 2px; }

/* ===== Platform pack: settings sections (appended; see web/js/admin-settings-nav.js) ===== */
[data-section-hidden] { display: none !important; }
.settings-nav { display: flex; gap: 4px; overflow-x: auto; margin: 4px 0 8px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 6; -webkit-overflow-scrolling: touch; }
.settings-nav a { flex: none; padding: 10px 14px; font-weight: 600; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; min-height: 44px; display: inline-flex; align-items: center; }
.settings-nav a:hover { color: var(--ink); }
.settings-nav a.on { color: var(--brand-text); border-bottom-color: var(--brand-text); }
.settings-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.settings-nav-hint { margin: 0 0 16px; }

/* ===== Platform pack: design pass (appended; only tokens above, no new colors) =====
   A calmer, card-based dashboard in the spirit of the big team apps: roomier cards, a lift on hover,
   friendlier empty states, a progress bar for setup, and a banner for "waiting for review". Text
   colors are the existing --ink / --muted / --warn-ink tokens, which keep 4.5:1 in light and dark. */
.admin-main > h1 { letter-spacing: -.02em; }
.panel { border-radius: calc(var(--radius) + 2px); padding: 22px 24px; }
.panel > h2:first-child { display: flex; align-items: center; gap: 10px; }
a.stat { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand); }
a.stat:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stat { padding: 18px 18px 16px; border-radius: calc(var(--radius) + 2px); }
.stat strong { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.stat span { display: block; margin-top: 2px; }
.empty { text-align: center; padding: 28px 16px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-alt); }
li.empty { list-style: none; }   /* an empty list says so in one box, without a bullet beside it */
.checklist li { align-items: center; padding: 12px 4px; border-radius: var(--radius-sm); }
.checklist li:hover { background: var(--surface-hover); }
.checklist .tick { flex: none; width: 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--border); font-size: .85rem; }
.checklist li.done .tick { background: var(--ok-soft); border-color: var(--ok); }
.checklist li a { flex: 1; color: var(--ink); }
.checklist li.done a { text-decoration: line-through; text-decoration-color: var(--border); }
.checklist .cta { flex: none; font-size: .85rem; font-weight: 600; color: var(--brand-text); }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.setup-head h2 { margin: 0; }
.progress { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; margin: 4px 0 12px; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
.review-banner { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--warn-border); border-left: 5px solid var(--warn-ink); background: var(--warn-soft); color: var(--warn-ink); border-radius: var(--radius); font-weight: 600; }
.review-banner p { margin: 0; }
.review-banner small { display: block; font-weight: 400; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { a.stat, .progress > span { transition: none; } a.stat:hover { transform: none; } }
@media (max-width: 560px) { .panel { padding: 16px; } .admin-main { padding: 20px 16px 72px; } }

/* A long option (a session with its team and time) must not make a select wider than a phone screen. */
select { max-width: 100%; text-overflow: ellipsis; }

/* Athlete usage chart (Settings > Your plan). Colors follow the theme, so dark mode works. */
.usage-chart { width: 100%; max-width: 480px; height: auto; display: block; }
.usage-bar { fill: var(--c-brand); }   /* the themed brand token: readable on the dark card too (the raw club navy was 1.3:1) */
.usage-axis { stroke: var(--border); stroke-width: 1; }
.usage-val, .usage-lab { fill: var(--text, currentColor); font-size: 11px; }
.usage-table caption { text-align: left; font-size: .85rem; color: var(--muted, inherit); padding-bottom: 4px; }

/* ---- editor: add-section picker, empty states, reorder grip, publish line ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-state { border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center; margin: 12px 0; background: var(--surface-alt); }
.empty-state p { max-width: 520px; margin: 6px auto 0; }
.pub-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.pub-line .hint { margin: 0; }
.pl-links { margin-top: 12px; }
.drag-grip { cursor: grab; letter-spacing: -2px; }
.drag-grip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Room for the actions laid over the row; on phones they sit under it instead (see the rule near .sec-tools), so no room is kept. */
@media (min-width: 701px) { .sec-card-wrap .sec-card > summary { padding-right: 230px; } }
.add-menu { display: block; }
.add-search { margin-bottom: 8px; }
.add-menu-row { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.add-menu .pick { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; }
.pick-text { display: block; min-width: 0; }
.pick-text strong { display: block; }
.pick-good { color: var(--ink); }
.sec-thumb { width: 64px; height: 46px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); position: relative; display: grid; gap: 3px; padding: 4px; flex: none; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sec-thumb i { display: block; background: var(--border); border-radius: 2px; }
.sec-thumb i:nth-child(n+5) { display: none; }
.th-banner { grid-template-columns: 1fr; grid-template-rows: 1fr 6px 6px; }
.th-banner i:nth-child(1) { background: var(--brand); } .th-banner i:nth-child(2) { width: 50%; justify-self: center; } .th-banner i:nth-child(3) { width: 30%; justify-self: center; background: var(--highlight); } .th-banner i:nth-child(4) { display: none; }
.th-text { grid-template-columns: 1fr; grid-template-rows: 6px 4px 4px 4px; } .th-text i:nth-child(1) { width: 50%; background: var(--brand); } .th-text i:nth-child(4) { width: 70%; }
.th-photo-text { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .th-photo-text i:nth-child(1) { grid-row: 1 / 3; background: var(--brand); opacity: .55; } .th-photo-text i:nth-child(n+3) { height: 4px; align-self: center; }
.th-cards { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } .th-cards i:nth-child(4) { display: none; }
.th-gallery { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; } .th-gallery i { background: var(--brand); opacity: .4; }
.th-gallery i:nth-child(n+5) { display: block; }
.th-video { place-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr; } .th-video i:nth-child(1) { background: var(--ink); width: 100%; height: 100%; opacity: .75; } .th-video i:nth-child(n+2) { display: none; }
.th-band { grid-template-columns: 1fr; grid-template-rows: 1fr; } .th-band i:nth-child(1) { background: var(--highlight); } .th-band i:nth-child(n+2) { display: none; }
.th-people { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 5px; } .th-people i:nth-child(-n+3) { border-radius: 50%; background: var(--brand); opacity: .5; } .th-people i:nth-child(4) { grid-column: 1 / 4; }
.th-list { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .th-list i { border-left: 4px solid var(--brand); }
.th-table { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .th-table i:nth-child(1) { background: var(--brand); opacity: .6; }
.th-calendar { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .th-calendar i { background: var(--surface-alt); border: 1px solid var(--border); }
.th-form { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 6px; } .th-form i:nth-child(1), .th-form i:nth-child(2) { background: var(--surface); border: 1px solid var(--border); } .th-form i:nth-child(3) { width: 40%; background: var(--highlight); } .th-form i:nth-child(4) { display: none; }
.th-faq { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .th-faq i { border-left: 4px solid var(--highlight); }
.th-files { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); } .th-files i { width: 80%; border-left: 8px solid var(--brand); } .th-files i:nth-child(4) { display: none; }
.th-alert { grid-template-columns: 1fr; grid-template-rows: 1fr; } .th-alert i:nth-child(1) { background: #f2d27a; } .th-alert i:nth-child(n+2) { display: none; }
.th-lock { place-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr; } .th-lock i:nth-child(1) { width: 40%; height: 70%; background: var(--ink); opacity: .6; border-radius: 4px; } .th-lock i:nth-child(n+2) { display: none; }
.th-code { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); background: #111827; } .th-code i { background: #4ade80; width: 60%; opacity: .8; } .th-code i:nth-child(2) { width: 40%; margin-left: 10px; }
.th-price { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } .th-price i:nth-child(2) { background: var(--brand); } .th-price i:nth-child(4) { display: none; }
.th-logos { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; place-items: center; } .th-logos i { width: 100%; height: 40%; }
.th-stats { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; } .th-stats i { background: var(--brand); opacity: .35; } .th-stats i:nth-child(4) { display: none; }
.th-quote { grid-template-columns: 1fr; grid-template-rows: 1fr 5px; } .th-quote i:nth-child(1) { border-left: 4px solid var(--highlight); background: var(--surface-alt); } .th-quote i:nth-child(2) { width: 40%; } .th-quote i:nth-child(n+3) { display: none; }
.th-clock { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; } .th-clock i { background: var(--brand); opacity: .5; }
.th-social { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; place-items: center; } .th-social i { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--brand); opacity: .5; }
.th-mail { grid-template-columns: 1fr 14px; grid-template-rows: 1fr; align-items: center; } .th-mail i:nth-child(1) { height: 60%; background: var(--surface); border: 1px solid var(--border); } .th-mail i:nth-child(2) { height: 60%; background: var(--highlight); } .th-mail i:nth-child(n+3) { display: none; }
.th-bracket { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .th-bracket i:nth-child(1) { grid-row: 1; } .th-bracket i:nth-child(2) { grid-row: 2; } .th-bracket i:nth-child(3) { grid-column: 2; grid-row: 1 / 3; background: var(--brand); opacity: .4; } .th-bracket i:nth-child(4) { grid-column: 3; grid-row: 1 / 3; background: var(--highlight); }
.th-slides { grid-template-columns: 1fr; grid-template-rows: 1fr 5px; } .th-slides i:nth-child(1) { background: var(--brand); } .th-slides i:nth-child(2) { width: 40%; justify-self: center; } .th-slides i:nth-child(n+3) { display: none; }
.th-bar { grid-template-columns: 1fr; grid-template-rows: 8px; align-content: start; } .th-bar i:nth-child(1) { background: var(--highlight); } .th-bar i:nth-child(n+2) { display: none; }

/* The editor preview follows the club's saved style choices, same rules as the public site (base.css). */
.site-preview[data-site-buttons="pill"] { --site-btn-radius: 999px; }
.site-preview[data-site-buttons="rounded"] { --site-btn-radius: 10px; }
.site-preview[data-site-buttons="square"] { --site-btn-radius: 2px; }
.site-preview[data-site-buttons="outline"] .btn:not(.btn-ghost):not(.btn-light):not(.btn-danger) { background: transparent !important; color: inherit !important; border: 2px solid currentColor; }
.site-preview[data-site-corners="sharp"] { --site-radius: 2px; }
.site-preview[data-site-corners="soft"] { --site-radius: 10px; }
.site-preview[data-site-corners="round"] { --site-radius: 22px; }
.site-preview[data-site-space="compact"] .sec { padding: 24px 0; }
.site-preview[data-site-space="roomy"] .sec { padding: 56px 0; }
body.admin .site-preview[data-site-buttons] .btn { border-radius: var(--site-btn-radius); }
body.admin .site-preview[data-site-mode="dark"] { --surface: #0f1419; --surface-alt: #171e26; --ink: #e8edf2; --muted: #a8b3be; --border: #2b3641; color-scheme: dark; }
body.admin .site-preview[data-site-mode="dark"] :is(h2, h3, h4) { color: var(--ink); }
body.admin .site-preview[data-site-mode="dark"] .sec-hero h1, body.admin .site-preview[data-site-mode="dark"] .sec-cta h2, body.admin .site-preview[data-site-mode="dark"] .bg-brand :is(h2, h3), body.admin .site-preview[data-site-mode="dark"] .bg-accent :is(h2, h3) { color: inherit; }
body.admin .site-preview[data-site-mode="dark"] .card h3 { color: var(--ink); }

/* ---- site menu editor ---- */
.menu-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; margin: 10px 0; background: var(--surface); }
.menu-item.is-off { opacity: .65; }
.menu-item .row { align-items: center; margin-bottom: 6px; }
.menu-child { margin-left: 28px; border-left: 3px solid var(--border); padding-left: 10px; }
.m-preview { background: var(--side-bg); color: #fff; border-radius: var(--radius-sm); padding: 8px 12px; }
.m-preview-list, .m-preview-list ul { list-style: none; margin: 0; padding: 0; }
.m-preview-list { display: flex; gap: 18px; flex-wrap: wrap; }
.m-preview-list ul { font-size: .85rem; opacity: .8; }

/* Features screen (modules on and off) */
.mode-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mode-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; min-height: 44px; }
.mode-card:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.mode-card small { display: block; margin-top: 4px; }
.feature-row { padding: 12px 0; border-top: 1px solid var(--border); }
.feature-row:first-of-type { border-top: 0; }
.feature-row .hint { margin: 4px 0 0 34px; }
.switch-row, .check { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
.switch-row input, .check input, .mode-card input { width: 22px; height: 22px; flex: none; }
/* A tick box inside a menu-item row (e.g. an athlete question's "Required") must not stretch like the text boxes beside it,
   or it drifts far from its label. */
.menu-item .row .check input { flex: none; min-width: 0; }
/* Details someone can look at but not change (e.g. an assistant coach on Team > Details): plainly not editable. */
.read-only input:disabled, .read-only textarea:disabled, .read-only select:disabled { background: var(--surface-alt); color: var(--muted); cursor: not-allowed; }
details.advanced { margin: 6px 0 0 34px; }
details.advanced summary { cursor: pointer; color: var(--muted); min-height: 32px; }
.buyout-amount { margin: 8px 0 0 34px; max-width: 420px; }

/* ---- messaging: search, unread counts, replies, reactions, attachments, outside group link (comms) ---- */
.chat-search { padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.chat-search input { width: 100%; }
.chat-items .unread-count { margin-left: 8px; vertical-align: middle; }
.chat-items .empty { padding: 16px; color: var(--muted); }
.chat-ext { padding: 0 16px 10px; border-bottom: 1px solid var(--border); }
.chat-link { margin: 0; padding: 10px 16px; background: var(--brand-soft); border-bottom: 1px solid var(--border); font-weight: 600; }
.chat-link .btn { margin-left: 6px; }
.msg-quote { border-left: 3px solid var(--border); padding: 2px 8px; margin: 2px 0 4px; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.msg-files { display: grid; gap: 4px; margin-top: 4px; }
.react-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.react-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 2px 8px; font: inherit; font-size: .8rem; cursor: pointer; min-height: 28px; }
.react-chip.mine { background: var(--brand-soft); border-color: var(--brand); }
.react-pick summary { cursor: pointer; border: 1px dashed var(--border); border-radius: 999px; padding: 2px 10px; list-style: none; font-size: .8rem; min-height: 28px; display: inline-flex; align-items: center; }
.react-pick[open] { display: flex; flex-wrap: wrap; gap: 4px; }
.react-pick button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; min-width: 36px; min-height: 36px; font-size: 1rem; cursor: pointer; }
.reply-bar { font-size: .85rem; color: var(--muted); background: var(--surface-alt); padding: 4px 8px; border-radius: 8px; }
.attach-btn { position: relative; }
.attach-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.attach-btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.attach-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.new-chat-tabs { margin-bottom: 8px; gap: 6px; }
.new-chat-tabs [aria-selected="true"] { background: var(--brand-soft); border-color: var(--brand); }
.notice-plan table { width: 100%; }
.notice-plan .locked-note { color: var(--muted); font-size: .85rem; }
.mod-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--surface); }
.mod-card .mod-body { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-alt); padding: 8px; border-radius: 8px; margin: 6px 0; }
.mod-card .mod-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Bulk actions bar (Athletes and Registrations): stays in view on a phone while a long list scrolls. */
/* (It is drawn as the shared selection bar, .sel-bar in components.css: sticky under the top bar while the list scrolls.) */
.bulk-bar[hidden] { display: none; }
@media (max-width: 760px) { .bulk-bar.sel-bar { box-shadow: var(--sh-2); } }
td input[type="checkbox"], th input[type="checkbox"] { width: 20px; height: 20px; }
.reg-pick { float: left; margin: 2px 10px 0 0; }

/* Billing decisions v3: Customize details, interval choice, pause panel, payment method lists (phone first). */
details.customize { margin: 10px 0; }
details.customize > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
fieldset.choice-group { border: 0; padding: 0; margin: 8px 0; }
fieldset.choice-group .check { min-height: 44px; margin-bottom: 4px; }
.pay-method-list { margin: 6px 0 10px 18px; padding: 0; }
.pay-method-list li { margin-bottom: 4px; }
#plan-pause { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border, #ddd); }
#plan-pause .row { flex-wrap: wrap; gap: 8px; }
#plan-pause select { max-width: 100%; }
.plan-config-row { flex-wrap: wrap; align-items: end; gap: 8px; }
.plan-banner[data-read-only="1"] { font-weight: 600; }

/* Landing on a record from the home action list (deep-link.js) and the daily action list itself. */
.deep-focus { outline: 3px solid var(--accent, #2563eb); outline-offset: 2px; border-radius: 6px; }
/* The daily list is an action list: one bordered list, a row per task (title, detail, chevron), the urgent ones with a
   red or amber edge. The words in the section heading carry the urgency; the edge only repeats it. */
.ac-body > h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.ac-body > h3:first-child { margin-top: 0; }
.ac-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.ac-item + .ac-item { border-top: 1px solid var(--c-border); }
.ac-item a.ac-link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: 10px var(--s-4) 10px calc(var(--s-4) + 4px); min-height: 52px; text-decoration: none; color: var(--c-ink); border-left: 4px solid transparent; }
.ac-item.is-now a.ac-link { border-left-color: var(--c-danger-fill); }
.ac-item.is-soon a.ac-link { border-left-color: var(--c-warn-border); }
.ac-item a.ac-link > strong { grid-column: 1; font-weight: 600; overflow-wrap: anywhere; }
.ac-item a.ac-link > small { grid-column: 1; color: var(--c-muted); }
.ac-item a.ac-link > .ac-go { grid-column: 2; grid-row: 1 / span 2; color: var(--c-muted); font-size: 1.4rem; line-height: 1; }
.ac-item a.ac-link:hover { background: var(--c-surface-hover); }
.ac-item a.ac-link:hover > strong { text-decoration: underline; }
.ac-item a.ac-link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.stat-error strong { color: var(--danger, #b91c1c); }

/* Accessibility warnings in the page editor and the swaps/guests/check-in block on Volunteers. */
.a11y-warn { margin-top: 6px; padding: 8px 10px; border-left: 4px solid var(--highlight); background: var(--surface-alt); }
.a11y-warn:empty { display: none; }
.vp-extras { margin: 8px 0; }
.vp-url { min-width: 0; flex: 1 1 240px; }
.vp-qr svg { max-width: 260px; height: auto; }

/* ===== UX audit: taking attendance on a phone =====
   The three-column table squeezed the four status buttons into a stack of four rows per athlete. On a phone each
   athlete becomes one card: name on top, the four buttons in one line, the note below. */
@media (max-width: 640px) {
  #roll-panel table, #roll-panel tbody, #roll-panel tr, #roll-panel td { display: block; width: 100%; }
  #roll-panel thead { display: none; }
  #roll-panel tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  #roll-panel td { padding: 4px 0; border: 0; }
  #roll-panel td .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  #roll-panel td .row .btn { width: 100%; padding-left: 4px; padding-right: 4px; }
  #roll-panel td input[type="text"], #roll-panel td input:not([type]) { width: 100%; }
}

/* A table that turns into one card per row on a phone (add class "table-stack"). Used where the row's buttons were
   pushed off the right edge of the screen. The first cell is the row's title. */
@media (max-width: 640px) {
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack thead { display: none; }
  .table-stack tr { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .table-stack td { padding: 2px 0; border: 0; }
  .table-stack td:first-child { font-weight: 600; }
  .table-stack td:last-child { padding-top: 8px; }
  .table-stack td:empty { display: none; }
  .table-stack td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--muted, #667); font-size: .85em; }
}

/* "More options" fold used on the family account page and elsewhere */
details.pref-more { margin: 10px 0; }
details.pref-more > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* Design screen: the preview and Save stay in view while the controls scroll; the fine-tuning sits under "Customize". */
details.dz-custom > summary { cursor: pointer; padding: 4px 0; }
details.dz-custom > summary .hint { margin-left: 6px; }

/* Registration page sections (one at a time; the panel's own hidden attribute still means "not for this role") */
.reg-pane-off { display: none !important; }
.tabs button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* a pass opened from a family's QR code on the sessions page */
.highlight[aria-current="true"] { outline: 3px solid var(--highlight); outline-offset: 2px; }

/* All tools page (/admin/tools) */
.tools-search { max-width: 520px; margin-bottom: var(--s-2); }
.tools-group h2 { font-size: var(--t-h3); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 600; margin-bottom: var(--s-3); }
.tools-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1) var(--s-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tool-link { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 10px; border-radius: var(--r-md); color: var(--c-ink) !important; text-decoration: none; font-weight: 500; }
.tool-link .icon { color: var(--c-muted); }
.tool-link:hover { background: var(--c-surface-hover); }

/* ===== Family app shell (account, chat, my-pass; web/js/account-tabs.js) =====
   One-row header on the club's color (identity), then the tabs: a fixed bottom bar on phones, one row under
   the header from 761px. Badges sit on the tab icon so an amount never pushes or cuts the label. */
.fam-bar { position: sticky; top: 0; z-index: 40; background: var(--club-header, var(--club-primary, #0b2545)); color: var(--club-header-ink, var(--club-primary-ink, #fff)); }
.fam-bar-inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-2) 0 var(--s-4); min-height: 56px; display: flex; align-items: center; gap: var(--s-3); }
.fam-brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit !important; text-decoration: none; }
.fam-brand strong { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.1; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-bar .brand-mark { width: 32px; height: 32px; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.fam-bar .brand-mark.has-logo { background: #fff; padding: 2px; }
.fam-bar .brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.fam-me { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.fam-me:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
body.admin .fam-me:focus-visible { outline-color: currentColor; }
.fam-me .avatar { background: var(--club-header-ink, #fff); color: var(--club-header, #0b2545); font-family: var(--font-display); font-size: 1rem; }
.fam-me-wrap .menu { right: 0; min-width: 230px; }
.fam-who { margin: 0; padding: 8px 12px 6px; font-size: var(--t-small); color: var(--c-muted); overflow-wrap: anywhere; border-bottom: 1px solid var(--c-border); margin-bottom: 4px; }
.fam-who:empty { display: none; }

.family-tabs { --tabbar-h: 0px; display: flex; gap: var(--s-1); margin: 0 0 var(--s-4); }
.fam-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--c-muted) !important; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.fam-tab:hover { color: var(--c-ink) !important; }
.fam-tab.on, .fam-tab[aria-current="page"] { color: var(--c-ink) !important; border-bottom-color: var(--c-brand); }
.fam-tab-icon { position: relative; display: inline-flex; }
.fam-tab .icon { width: 20px; height: 20px; }
.fam-tab[data-go="more"] .icon { stroke-width: 3.4; }
.fam-badge { position: absolute; top: -7px; left: 12px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--c-danger-fill); color: #fff; font-size: .6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 0 0 2px var(--c-surface); }
.fam-badge.is-money { background: var(--c-warn-fill); }
.fam-badge.is-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -3px; left: 16px; }
.fam-more-wrap { display: none; }
.fam-more { min-width: 220px; }
@media (min-width: 761px) {
  /* One row of tabs under the header (on /chat and /my-pass straight under it; on /account under the greeting). */
  .family-tabs { position: sticky; top: 56px; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
  body.chat-page .family-tabs, body.pass-shell .family-tabs { margin: 0; padding: 0 max(var(--s-4), calc((100% - 1100px) / 2)); }
  .family-tabs .phone-only { display: none !important; }
}
@media (max-width: 760px) {
  body.fam-shell { --tabbar-h: 64px; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  .family-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; gap: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 0 0 env(safe-area-inset-bottom, 0px); background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: 0 -2px 12px rgba(16, 24, 40, .06); }
  .family-tabs .desk-only { display: none; }
  .fam-more-wrap { display: flex; position: relative; }
  .fam-more-wrap .fam-tab { width: 100%; }
  .fam-tab { flex-direction: column; justify-content: center; gap: 3px; min-height: 0; height: 64px; padding: 6px 2px 4px; border-bottom: 0; font-size: .72rem; font-weight: 600; }
  .fam-tab .icon { width: 24px; height: 24px; }
  .fam-tab.on, .fam-tab[aria-current="page"] { color: var(--c-link) !important; }
  .fam-tab.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--c-brand); }
  .fam-tab-label { max-width: 100%; overflow: visible; }
  .fam-more { right: 6px; left: auto; bottom: calc(100% + 8px); }
  /* The chat thread uses the whole screen; its Back button returns to the list and the tab bar. */
  body.chat-page.thread-open { padding-bottom: 0; }
  body.chat-page.thread-open .family-tabs { display: none; }
}
/* Chat: fits between the header (and tabs) and the bottom of the screen. */
body.chat-page .chat-layout { height: calc(100vh - 56px - 47px); height: calc(100dvh - 56px - 47px); }
@media (max-width: 760px) {
  body.chat-page .chat-layout { height: calc(100vh - 56px - var(--tabbar-h)); height: calc(100dvh - 56px - var(--tabbar-h) - env(safe-area-inset-bottom, 0px)); }
  body.chat-page.thread-open .chat-layout { height: calc(100dvh - 56px); }
}
@media print { .family-tabs, .fam-bar { display: none !important; } }

/* ===== Redesigned admin screens: dashboard, Athletes, People, money (docs/ui-components.md) ===== */
/* Dashboard */
.kpi-grid.dash-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 600px) { .kpi-grid.dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.first-run .form-status:empty { display: none; }
.dash-kpis > p { grid-column: 1 / -1; margin: 0; }
.kpi.kpi-error .kpi-value { color: var(--c-muted); }
.kpi.kpi-error .kpi-sub { color: var(--c-danger); font-weight: 600; }
.dash-cols { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.dash-cols > .panel { margin: 0; }
.dash-cols > .panel:only-child, .dash-cols > .panel[hidden] + .panel { grid-column: 1 / -1; }
@media (max-width: 1000px) { .dash-cols { grid-template-columns: minmax(0, 1fr); } }
.dash-todo > h2, .dash-setup h2 { font-size: var(--t-h2); margin: 0 0 var(--s-3); }
.dash-setup .setup-head { align-items: flex-start; margin-bottom: var(--s-2); }
.dash-setup .setup-head h2 { margin: 0; }
.setup-count { margin: 2px 0 0; color: var(--c-muted); font-size: var(--t-small); font-weight: 600; }
.dash-setup .checklist li { padding: 10px 2px; font-size: .9375rem; }
.dash-setup .checklist .cta { display: none; }
.first-run h2 { margin: 0 0 var(--s-1); font-size: var(--t-h2); }
.first-run p { margin: 0; color: var(--c-muted); max-width: 70ch; }
.first-run-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: var(--s-3); }
.first-run-actions .spacer { flex: 1 1 auto; }
@media (max-width: 600px) { .first-run-actions .spacer { display: none; } .first-run-actions .btn { flex: 1 1 100%; } .first-run-actions .btn-quiet { order: 5; } }

/* Tables that sit edge to edge in their card; the toolbar and notes inside keep the card's padding. */
/* No overflow clipping here: a row's ⋯ menu must be able to open past the card's edge. These tables have few columns
   and become cards on a phone, so they never need to scroll sideways. */
body.admin .panel.flush { padding: 0; }
/* A wide table (a score sheet, a 9-column report) scrolls inside its panel instead of pushing the page sideways.
   A ⋯ menu below a short table still shows in full: ui-kit.js marks the wrap .menu-escape while it is open. */
.panel.flush > .table-wrap, body.admin .panel.flush.table-wrap { margin: 0; overflow-x: auto; }
body.admin .panel.flush.table-wrap.sticky-head { overflow: auto; }
.panel.flush.table-wrap thead th:first-child { border-top-left-radius: var(--r-lg); }
.panel.flush.table-wrap thead th:last-child { border-top-right-radius: var(--r-lg); }
.panel.flush .in-panel { margin: 0; padding: var(--s-4) var(--s-5) 0; }
.panel.flush .tbl-toolbar.in-panel { padding-bottom: var(--s-3); }
.panel.flush .form-status.in-panel:empty { display: none; }
.panel.flush .form-status.in-panel { padding-bottom: var(--s-4); }
.panel.flush .table { margin: 0; }
.panel.flush .table th:first-child, .panel.flush .table td:first-child { padding-left: var(--s-5); }
.panel.flush .table th:last-child, .panel.flush .table td:last-child { padding-right: var(--s-4); }
/* A name that opens the record: looks like the row's link, is a button because the record opens in a dialog. */
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--c-ink); text-align: left; cursor: pointer; }
.link-btn:hover { text-decoration: underline; color: var(--c-link); }
.table tr.empty-row td { padding: 0; }
.table tr.empty-row:hover td { background: none; }
.tb-views select { min-width: 0; max-width: 200px; }
.wrap-anywhere { overflow-wrap: anywhere; }
.table td .cluster { gap: var(--s-1); }
.col-role select { width: auto; max-width: 100%; }
.invites-head { margin: var(--s-6) 0 var(--s-2); font-size: var(--t-h3); }
/* Filters drawer */
.filter-fields .field { margin-bottom: var(--s-4); }
.filter-fields .filter-check { display: flex; align-items: center; gap: var(--s-2); min-height: var(--tap); margin-bottom: var(--s-3); font-weight: 600; }
.filter-fields .filter-age { margin-bottom: var(--s-2); }
.filter-fields .filter-age .cols-2 { gap: var(--s-3); }
.filter-views { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.sheet-foot .spacer { flex: 1; }
@media (max-width: 640px) {
  .table-cards td.col-role select { margin-top: var(--s-1); }
  .table-cards td[data-label] { font-size: var(--t-small); }
  .table-cards td.col-main .cell-main { font-size: var(--t-body); }
  .panel.flush .table-cards td:first-child, .panel.flush .table-cards td:last-child { padding-left: 0; padding-right: 0; }
  .panel.flush .table-cards tr { padding-left: var(--s-4); }
  .panel.flush .table-cards tr:has(td.col-check) { padding-left: 52px; }
  .panel.flush .in-panel { padding-left: var(--s-4); padding-right: var(--s-4); }
  /* Short label: value pairs sit side by side under the name, so a card stays three lines tall. */
  .panel.flush .table-cards td[data-label] { display: inline-block; width: auto; margin: 2px var(--s-4) 0 0; vertical-align: middle; }
  .table-cards td .cluster { display: inline-flex; vertical-align: middle; }
}
/* Money screens: link tabs to the other money screens under the title (money-nav.js), and the Owed / Received /
   Refunds tabs on Money today. */
.money-nav-row { display: flex; align-items: flex-end; gap: var(--s-2); margin: 0 0 var(--s-5); border-bottom: 1px solid var(--c-border); }
.money-nav-row > .tabbar { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; }
.tabbar.money-nav:not([hidden]) { margin-bottom: var(--s-5); }
.money-nav-row > .tabbar.money-nav { margin-bottom: 0; }
.money-more { flex: none; }
.money-more-btn { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--c-muted); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.money-more-btn:hover, .money-more-btn[aria-expanded="true"] { color: var(--c-ink); }
@media (max-width: 640px) { .money-more-btn { font-size: 0; padding: 0 var(--s-2); } .money-more-btn::before { content: "More"; font-size: 1rem; } }
.mt-tabs { margin: 0; padding-top: var(--s-2); padding-bottom: 0; }
.panel.flush .tabbar.in-panel { padding-bottom: 0; }
#mt-lists [role="tabpanel"] > .empty-card { padding-left: var(--s-5); padding-right: var(--s-5); }
#mt-lists [role="tabpanel"] .card-link { font-size: var(--t-small); }
#mt-remind-status:empty { display: none; }
body.admin .tabbar.money-nav > a { color: var(--c-muted); }
body.admin .tabbar.money-nav > a:hover, body.admin .tabbar.money-nav > a[aria-current="page"] { color: var(--c-ink); }
/* Money in tables lines up on the right (the base .table rule would otherwise pull headers and cells left). */
.table th.num, .table td.num { text-align: right; }
.panel.flush > .card-head.in-panel { margin: 0; padding-bottom: var(--s-3); }
.panel.flush > .card-head.in-panel h2 { font-size: var(--t-h2); }
/* A group of toolbar items that shows or hides together but lays out as part of the toolbar line. */
.tbl-toolbar .tb-group:not([hidden]) { display: contents; }
#remind-status:empty, #dl-status:empty, #rc-csv-status:empty, #reg-bulk-status:empty { display: none; }
#rb-chips.in-panel { padding: 0; }
#rb-chips.in-panel, #rb-bulk-box { margin: 0 var(--s-5) var(--s-3); }
#rb-chips.in-panel { margin-top: 0; }
@media (max-width: 640px) { #rb-chips.in-panel, #rb-bulk-box { margin-left: var(--s-4); margin-right: var(--s-4); } .table-cards td.num { text-align: left; } }
@media (max-width: 640px) {
  /* A ticked card is tinted as a whole, not cell by cell. */
  .table-cards tr.is-selected { background: var(--c-brand-soft); }
  .table .table-cards tr.is-selected td, .table-cards tr.is-selected td { background: transparent; }
}

/* Done-for-you setup: Admin > Setup help, the dashboard review card and the platform setup queue. */
.link-button { background: none; border: 0; padding: var(--s-2) 0; min-height: 40px; font: inherit; font-weight: 600; color: var(--c-link); cursor: pointer; text-align: left; }
.link-button:hover { text-decoration: underline; }
.setup-colors { gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-3); }
.setup-colors input[type="color"] { width: 88px; height: 44px; padding: 2px; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); }
#look-mode { margin-top: var(--s-2); }
#look-website { margin-top: var(--s-3); }
.setup-history, .setup-file-list, .setup-pages { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.setup-history li, .setup-file-list li, .setup-pages li { padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); overflow-wrap: anywhere; }
.setup-file-list li { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.setup-file-list .btn { margin-left: auto; }
.setup-review-card { border-left: 4px solid var(--c-ok); }
.setup-review-actions { gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.setup-offer { background: var(--c-brand-soft); }
.setup-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.setup-help-line { margin: var(--s-4) 0 0; }
.setup-asset-grid { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); }
.setup-asset-grid li { display: flex; flex-direction: column; gap: var(--s-1); overflow-wrap: anywhere; }
.setup-asset-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--c-surface-alt); }
.setup-actions { gap: var(--s-2); flex-wrap: wrap; }
.setup-terms { font-weight: 600; }
/* A fieldset is as wide as its widest child by default (min-width: min-content): on a phone that pushed the page sideways. */
#setup-form .form-section { min-width: 0; }
#setup-form input[type="file"] { max-width: 100%; }
@media (max-width: 600px) { #look-mode { display: flex; flex-wrap: wrap; border-radius: var(--r-md); } }

/* The public "Numbers" section also uses .stat and its spans. In the page editor and Design previews it must look the
   way visitors see it, not like an admin stat tile (the preview promises "what you see is what visitors get"). */
.stats > .stat { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; color: inherit !important; }
.stats > .stat > .stat-value { font-size: clamp(2.2rem, 7cqi, 3.4rem); color: var(--primary); margin-top: 0; }
.stats > .stat > .stat-label { font-size: 1rem; color: var(--muted); margin-top: 0; }
.bg-brand .stats > .stat > span, .bg-accent .stats > .stat > span, .bg-dark .stats > .stat > span, [data-site-mode="dark"] .stats > .stat > .stat-value { color: inherit; }
/* Sections on a colored or photo background take the text color the site picks for that background (white or dark,
   whichever reads), as on the public site; a fixed white or club-colored heading failed contrast in the preview. */
body.admin .site-preview .sec-cta h2, body.admin .site-preview .sec-hero h1, body.admin .site-preview .sec-hero h2,
body.admin .site-preview :is(.bg-brand, .bg-accent, .bg-dark) :is(h1, h2, h3, h4) { color: inherit; }
body.admin .site-preview :is(.sec-announcement, .sec-alert) a, body.admin .site-preview :is(.bg-brand, .bg-accent, .bg-dark, .sec-cta) a:not(.btn) { color: inherit; }

/* Settings > Email > "Send from your own domain" (web/js/admin-sending-domain.js). Phone first: the records table
   stacks (table-stack), long DKIM values wrap anywhere, buttons wrap onto new lines. */
.sd-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; background: var(--surface); }
.sd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sd-head h3 { margin: 0; }
.sd-note { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--c-link, var(--brand-text)); background: var(--c-brand-soft, var(--surface-alt)); border-radius: 6px; }
.sd-preview { margin: 8px 0 12px; overflow-wrap: anywhere; }
.sd-card .row { flex-wrap: wrap; gap: 8px; }
.sd-table code { font-size: .85em; }
.sd-value { display: inline-block; max-width: 100%; }
.sd-copy { min-height: 32px; }
details.sd-advanced { margin: 12px 0 18px; }
details.sd-advanced > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

/* "Opening this screen..." while an admin screen is still loading (admin-common.js openGuard). */
.admin-opening { max-width: 420px; margin: 20vh auto 0; padding: 0 16px; text-align: center; color: var(--muted); }