/* =====================================================================
   sabio-ui.css -- the shared look (UI refinement, phase 1, Nov 2026)
   =====================================================================
   James, 11 Nov 2026: "Sabio should have a similar flow to the MDKO
   portals." Clean cards with a coloured top accent, a serif display face
   for headings over a clean sans body, compact two-column facts, status
   badges, a bottom bar on phones, generous spacing, one kind of button.

   Rules of this file
   - Additive. Everything new is an .sg-* class. The only rules that touch
     existing markup are in "harmonize" below and are visual only (font,
     radius, colour) -- no display/position/size changes to shared parts.
   - Club colours: every colour here comes from the --cg-primary family,
     which ui.js (cgBrandVars) recomputes from the club's palette and for
     dark mode. Nothing in this file names navy or a club's green.
   - Dark mode: every token has a [data-theme="dark"] value below.
   - Loaded LAST in <head>, after styles.css and each page's own <style>,
     so equal specificity resolves in its favour. Page-specific rules are
     scoped with body[data-page=...] for the same reason.
   - Not loaded on the scorer (portal), boards (live, tv), print, embed or
     the marketing pages. Those keep their own tuned layouts.
   ===================================================================== */

/* ---- fonts (self-hosted: the app works offline, no Google call) ---- */
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-latin-v9.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin-v38.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens ---------------------------------------------------------- */
:root {
  --sg-font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sg-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* the club's colour family (ui.js keeps these current) */
  --sg-brand:      var(--cg-primary, #162b42);
  --sg-brand-ink:  var(--cg-primary-ink, var(--cg-primary, #162b42));
  --sg-brand-soft: var(--cg-primary-soft, #eef1f6);
  --sg-brand-tint: var(--cg-primary-tint, #dadde1);
  --sg-brand-line: var(--cg-primary-line, #a6aeb7);
  --sg-on-brand:   var(--cg-on-primary, #ffffff);
  --sg-gold:       var(--cg-accent, #bca876);

  /* surfaces and ink */
  --sg-paper:     #f5f5f1;
  --sg-surface:   #ffffff;
  --sg-surface-2: #f7f8f6;
  --sg-ink:       #17212b;
  --sg-ink-2:     #45515d;
  --sg-mute:      #66717c;   /* 4.8:1 on white */
  --sg-line:      #e4e6e8;
  --sg-line-2:    #eef0f1;

  /* status colours: semantic, never derived from the club colour */
  --sg-good: #157a3c;  --sg-good-soft: #e5f4ea;
  --sg-warn: #946200;  --sg-warn-soft: #fbf1dc;
  --sg-bad:  #b42318;  --sg-bad-soft:  #fdebe9;
  --sg-info: #2a4d9b;  --sg-info-soft: #e9eefa;

  --sg-r-lg: 18px;  --sg-r-md: 14px;  --sg-r-sm: 10px;  --sg-r-pill: 999px;
  --sg-shadow:    0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.05);
  --sg-shadow-up: 0 -1px 0 rgba(16,24,40,.04), 0 -6px 18px rgba(16,24,40,.06);
  --sg-gap: 0.85rem;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  /* paper picks up a whisper of the club colour, like MDKO's warm grey */
  :root { --sg-paper: color-mix(in srgb, var(--cg-primary-soft, #eef1f6) 30%, #f6f6f2); }
}
[data-theme="dark"] {
  --sg-paper:     #0d161f;
  --sg-surface:   #16222e;
  --sg-surface-2: #1c2a38;
  --sg-ink:       #e8eef4;
  --sg-ink-2:     #c2ccd6;
  --sg-mute:      #9aa8b6;
  --sg-line:      #2b3a49;
  --sg-line-2:    #233140;
  --sg-good: #6fd394;  --sg-good-soft: #163526;
  --sg-warn: #f0c46a;  --sg-warn-soft: #3a2f14;
  --sg-bad:  #ff9b8f;  --sg-bad-soft:  #3d1d1b;
  --sg-info: #9fb8f2;  --sg-info-soft: #1d2a45;
  --sg-shadow:    0 1px 2px rgba(0,0,0,.35);
  --sg-shadow-up: 0 -1px 0 rgba(255,255,255,.04), 0 -6px 18px rgba(0,0,0,.35);
}

/* =====================================================================
   harmonize -- the few rules that touch existing shared markup.
   Visual only: typeface, card radius/shadow, the bottom bar.
   ===================================================================== */
body { font-family: var(--sg-font); }
/* form controls do not inherit a font on their own */
button, input, select, textarea { font-family: inherit; }
/* numbers line up in every list and table */
table, .rv-card { font-variant-numeric: tabular-nums; }

.rv-card {
  border-color: var(--sg-line);
  border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-shadow);
}
[data-theme="dark"] .rv-card { border-color: var(--sg-line); }
.rv-h { font-family: var(--sg-font-display); font-weight: 600; letter-spacing: -0.005em; }

/* ---- bottom bar: one bar, same on every app page ---- */
#cgTabBar {
  background: var(--sg-surface);
  border-top: 1px solid var(--sg-line);
  box-shadow: var(--sg-shadow-up);
}
#cgTabBar a { position: relative; font-weight: 600; letter-spacing: 0; }
#cgTabBar a.on { color: var(--sg-brand); font-weight: 700; }
/* MDKO's marker: a short bar over the active tab */
#cgTabBar a.on::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.9rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--sg-brand);
}
[data-theme="dark"] #cgTabBar { background: var(--sg-surface); border-top-color: var(--sg-line); }

/* =====================================================================
   components
   ===================================================================== */

/* ---- page title ---- */
.sg-eyebrow {
  font-family: var(--sg-font); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sg-brand);
  margin: 0 0 0.3rem;
}
[data-theme="dark"] .sg-eyebrow { color: var(--sg-gold); }
.sg-title {
  font-family: var(--sg-font-display); font-weight: 600; letter-spacing: -0.01em;
  /* 22px on a phone, 33px on a desktop (was 24-26px on a phone: James,
     12 Nov 2026, "some of this text does not need to be this big") */
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.05rem); line-height: 1.15;
  color: var(--sg-ink); margin: 0;
}
.sg-lede { color: var(--sg-mute); font-size: 0.9rem; line-height: 1.5; margin: 0.35rem 0 0; }

/* ---- card ---- */
.sg-card {
  background: var(--sg-surface); color: var(--sg-ink);
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-shadow); padding: 1.1rem 1.15rem;
  margin-bottom: var(--sg-gap); position: relative;
}
/* the coloured top accent */
.sg-card--accent { border-top: 4px solid var(--sg-brand); }
/* the coloured left accent, for a notice or a single call to action */
.sg-card--flag { border-left: 4px solid var(--sg-brand); }
.sg-card--danger { border-color: color-mix(in srgb, var(--sg-bad) 30%, var(--sg-line)); }
.sg-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; }
.sg-card__title {
  font-family: var(--sg-font-display); font-weight: 600; font-size: 1.15rem;
  line-height: 1.25; color: var(--sg-ink); margin: 0;
}
.sg-card__sub { font-size: 0.82rem; color: var(--sg-mute); line-height: 1.45; margin: 0.2rem 0 0; }

/* ---- facts: two columns of label / value ---- */
.sg-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem; margin: 0;
}
@media (min-width: 700px) { .sg-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sg-facts > div { min-width: 0; }
.sg-facts dt {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sg-mute); margin: 0 0 0.15rem;
}
/* a value wraps rather than ending in "..." (James, 12 Nov 2026: "make
   sure no text is being cut off anywhere") -- except a number like a GHIN,
   which is never split across two lines (sg-nowrap) */
.sg-facts dd {
  margin: 0; font-size: 0.98rem; font-weight: 600; color: var(--sg-ink);
  overflow-wrap: anywhere;
}
.sg-facts dd.sg-nowrap { white-space: nowrap; overflow-wrap: normal; }
.sg-facts dd.sg-none { color: var(--sg-mute); font-weight: 500; }

/* ---- stat tiles ---- */
.sg-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr));
  gap: 0.55rem;
}
.sg-stat {
  background: var(--sg-surface-2); border: 1px solid var(--sg-line-2);
  border-radius: var(--sg-r-md); padding: 0.7rem 0.75rem; min-width: 0;
}
.sg-stat b {
  display: block; font-family: var(--sg-font-display); font-weight: 600;
  font-size: 1.45rem; line-height: 1.1; color: var(--sg-ink);
}
.sg-stat span {
  display: block; font-size: 0.72rem; font-weight: 600; color: var(--sg-mute);
  margin-top: 0.2rem; line-height: 1.3;
}
.sg-stat--brand { background: var(--sg-brand-soft); border-color: transparent; }
.sg-stat--brand b { color: var(--sg-brand-ink); }
[data-theme="dark"] .sg-stat--brand b { color: var(--sg-ink); }

/* ---- badges ---- */
.sg-badge {
  display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%;
  border-radius: var(--sg-r-pill); padding: 0.16rem 0.6rem;
  font-size: 0.7rem; font-weight: 700; line-height: 1.35;
  overflow-wrap: anywhere;   /* a long club name wraps; never "..." (12 Nov 2026) */
  background: var(--sg-surface-2); color: var(--sg-ink-2); border: 1px solid var(--sg-line);
  text-decoration: none;
}
.sg-badge--brand { background: var(--sg-brand-soft); color: var(--sg-brand-ink); border-color: transparent; }
.sg-badge--good  { background: var(--sg-good-soft); color: var(--sg-good); border-color: transparent; }
.sg-badge--warn  { background: var(--sg-warn-soft); color: var(--sg-warn); border-color: transparent; }
.sg-badge--bad   { background: var(--sg-bad-soft);  color: var(--sg-bad);  border-color: transparent; }
.sg-badge--info  { background: var(--sg-info-soft); color: var(--sg-info); border-color: transparent; }
[data-theme="dark"] .sg-badge--brand { color: var(--sg-ink); }
.sg-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* ---- buttons: pill, one height, three weights ---- */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 44px; padding: 0.55rem 1.15rem; border-radius: var(--sg-r-pill);
  font-family: inherit; font-size: 0.88rem; font-weight: 700; line-height: 1.1;
  background: var(--sg-brand); color: var(--sg-on-brand); border: 1px solid var(--sg-brand);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: filter .12s ease, background .12s ease, border-color .12s ease;
}
.sg-btn:hover { filter: brightness(1.08); }
.sg-btn:focus-visible { outline: 3px solid var(--sg-brand-line); outline-offset: 2px; }
.sg-btn--ghost { background: var(--sg-surface); color: var(--sg-brand-ink); border-color: var(--sg-line); }
.sg-btn--ghost:hover { filter: none; border-color: var(--sg-brand); }
[data-theme="dark"] .sg-btn--ghost { color: var(--sg-ink); }
.sg-btn--danger { background: var(--sg-surface); color: var(--sg-bad); border-color: color-mix(in srgb, var(--sg-bad) 35%, var(--sg-line)); }
.sg-btn--sm { min-height: 36px; padding: 0.35rem 0.85rem; font-size: 0.8rem; }
.sg-btn--icon { padding: 0.5rem; min-width: 44px; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---- segmented tabs ---- */
.sg-seg {
  display: flex; gap: 0.25rem; padding: 0.25rem; margin: 0 0 var(--sg-gap);
  background: var(--sg-surface); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-pill); box-shadow: var(--sg-shadow);
  overflow-x: auto; scrollbar-width: none;
}
.sg-seg::-webkit-scrollbar { display: none; }

/* ---- lists that are cards on a phone ---- */
.sg-list { display: grid; gap: 0.55rem; }
.sg-item {
  display: flex; align-items: center; gap: 0.75rem; min-width: 0;
  background: var(--sg-surface); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-md); padding: 0.8rem 0.9rem;
}
.sg-item__main { flex: 1; min-width: 0; }
.sg-item__title { font-weight: 700; font-size: 0.95rem; color: var(--sg-ink); line-height: 1.3;
                  overflow-wrap: anywhere; text-decoration: none; }
a.sg-item__title { color: var(--sg-brand-ink); }
[data-theme="dark"] a.sg-item__title { color: var(--sg-ink); }
.sg-item__meta { font-size: 0.78rem; color: var(--sg-mute); margin-top: 0.15rem; line-height: 1.4; }
.sg-item__side { flex: 0 0 auto; text-align: right; }
.sg-item__num { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.5rem; line-height: 1; color: var(--sg-ink); }
.sg-item__numlab { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-mute); margin-top: 0.2rem; }
.sg-item--muted { opacity: 0.78; }

/* ---- forms ---- */
.sg-field { display: grid; gap: 0.3rem; min-width: 0; }
.sg-field > label, .sg-label { font-size: 0.78rem; font-weight: 600; color: var(--sg-ink-2); }
.sg-input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 0.55rem 0.8rem;
  font: inherit; font-size: 16px; color: var(--sg-ink); background: var(--sg-surface);
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm);
}
.sg-input:focus { outline: none; border-color: var(--sg-brand); box-shadow: 0 0 0 3px var(--sg-brand-tint); }
.sg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.8rem; }
@media (max-width: 420px) { .sg-grid-2--stack { grid-template-columns: 1fr; } }

/* ---- empty state ---- */
.sg-empty {
  text-align: center; padding: 1.4rem 1rem; color: var(--sg-mute); font-size: 0.88rem;
  border: 1px dashed var(--sg-line); border-radius: var(--sg-r-md); background: var(--sg-surface-2);
}
.sg-empty b { display: block; font-family: var(--sg-font-display); font-weight: 600; font-size: 1.05rem; color: var(--sg-ink); margin-bottom: 0.25rem; }

/* =====================================================================
   page: golfer profile   (body[data-page="profile"])
   Same data, same ids, same actions -- hierarchy and spacing only.
   ===================================================================== */
body[data-page="profile"], body[data-page="rounds"] { background: var(--sg-paper); }
html:has(body[data-page="profile"]), html:has(body[data-page="rounds"]) { background: var(--sg-paper); }
[data-theme="dark"] body[data-page="profile"], [data-theme="dark"] body[data-page="rounds"] { background: var(--sg-paper); }
body[data-page="profile"] .rv-wrap { max-width: 50rem; padding-top: 1rem; }
@media (min-width: 641px) and (pointer: coarse) { body[data-page="profile"] .rv-wrap { max-width: 52rem; } }

/* every section card gets a real heading instead of a small grey label */
body[data-page="profile"] .rv-card > .rv-lab:first-child,
body[data-page="rounds"]  #rvHome > .rv-card > .rv-lab:first-child {
  font-family: var(--sg-font-display); font-size: 1.12rem !important; font-weight: 600;
  color: var(--sg-ink); text-transform: none; letter-spacing: 0 !important;
  margin: 0 0 0.45rem; line-height: 1.3;
}
body[data-page="profile"] .rv-card > .rv-lab:first-child span,
body[data-page="rounds"]  #rvHome > .rv-card > .rv-lab:first-child span {
  font-family: var(--sg-font); font-size: 0.8rem; color: var(--sg-mute) !important;
}
body[data-page="profile"] .rv-card { padding: 1.1rem 1.15rem; margin-bottom: var(--sg-gap); background: var(--sg-surface); }
body[data-page="profile"] .rv-sub { color: var(--sg-mute); font-size: 0.8rem; line-height: 1.5; }

/* ---- hero ---- */
body[data-page="profile"] .pf-hero { border-top: 4px solid var(--sg-brand); padding: 1.25rem 1.2rem 1.15rem; }
.pf-hero__row { display: flex; gap: 1rem; align-items: center; }
.pf-hero__who { flex: 1; min-width: 0; }
.pf-hero__avatar { position: relative; flex: 0 0 auto; }
.pf-hero__avatar > span:first-child > *, .pf-hero__avatar img { box-shadow: 0 0 0 3px var(--sg-surface), 0 0 0 4px var(--sg-line); }
/* the camera: a small badge on the avatar's edge, not a 44px block over the face */
body[data-page="profile"] .pf-hero__cam {
  position: absolute; right: -2px; bottom: -2px; width: 28px !important; height: 28px !important;
  min-width: 0 !important; min-height: 0 !important; border-radius: 50%; padding: 0;
  border: 2px solid var(--sg-surface); background: var(--sg-brand); color: var(--sg-on-brand);
  font-size: 0.72rem; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* a bigger hit area than the badge shows */
body[data-page="profile"] .pf-hero__cam::after { content: ""; position: absolute; inset: -8px; }
body[data-page="profile"] #pfName.sg-title { margin: 0; overflow-wrap: anywhere; }
/* A name never runs on under the QR: it wraps between words, shrinks to fit
   (pfFitName in profile.html), and breaks inside a word only as a last resort. */
body[data-page="profile"] .pf-hero__who .sg-title { white-space: normal; overflow-wrap: anywhere; }
body[data-page="profile"] #pfEmail { margin-top: 0.2rem; font-size: 0.82rem; overflow-wrap: anywhere; }
/* GHIN under the name (James, 12 Nov 2026) */
body[data-page="profile"] .pf-hero__ghin { margin-top: 0.25rem; font-size: 0.86rem; font-weight: 600; color: var(--sg-ink-2, var(--sg-ink)); line-height: 1.3; }
body[data-page="profile"] .pf-hero__ghin:empty { display: none; }
body[data-page="profile"] .pf-hero__ghin .sg-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
body[data-page="profile"] .pf-hero__ghin .sg-none { color: var(--sg-mute); font-weight: 500; }
.pf-hero__ghinlab { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; color: var(--sg-mute); margin-right: 0.15rem; }
/* index, best score, clubs: one line, each at its own width */
body[data-page="profile"] .pf-hero .sg-facts.pf-facts-line { display: flex; flex-wrap: nowrap; gap: 0 1.6rem; }
body[data-page="profile"] .pf-hero .sg-facts.pf-facts-line > div { flex: 0 1 auto; min-width: 0; }
body[data-page="profile"] .pf-hero .sg-facts.pf-facts-line dt { white-space: normal; overflow-wrap: normal; }
body[data-page="profile"] .pf-hero__badges { margin-top: 0.7rem; }
body[data-page="profile"] .pf-hero .sg-actions.pf-hero__acts { margin-top: 0.8rem; }
.pf-hero__qr { flex: 0 0 auto; text-align: center; }
.pf-hero__qr #pfQr { width: 5.6rem; background: #fff; padding: 0.3rem; border-radius: 10px; border: 1px solid var(--sg-line); box-sizing: content-box; }
.pf-hero__qr #pfQr svg, .pf-hero__qr #pfQr canvas, .pf-hero__qr #pfQr img { width: 100% !important; height: auto !important; display: block; }
/* a friend's QR: same box as your own */
.pf-hero__qr .pf-qrbox { width: 5.6rem; background: #fff; padding: 0.3rem; border-radius: 10px; border: 1px solid var(--sg-line); box-sizing: content-box; }
.pf-hero__qr .pf-qrbox svg { width: 100% !important; height: auto !important; display: block; }
.pf-hero__qrlab { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--sg-mute); margin-top: 0.3rem; }
body[data-page="profile"] .pf-hero .sg-facts { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--sg-line-2); }
body[data-page="profile"] #pfChips:not(:empty) { margin-top: 0.7rem; }
body[data-page="profile"] .pf-hero .sg-actions { margin-top: 0.8rem; }
body[data-page="profile"] .pf-hero .sg-actions .rv-btn { margin: 0; }
/* the edit form: index + GHIN side by side, top-aligned so a note under one
   does not push the other box down; on a narrow phone they stack */
body[data-page="profile"] .pf-edit-pair { align-items: flex-start; margin-top: 0.1rem; }
body[data-page="profile"] .pf-edit-pair > div { flex: 1 1 9rem; min-width: 0; }

/* ---- type scale on the profile header (James, 12 Nov 2026: "some of this
   text does not need to be this big") ---- */
body[data-page="profile"] .pf-hero__who .sg-title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.85rem); line-height: 1.18; }
body[data-page="profile"] .pf-hero .sg-facts dt { font-size: 0.64rem; letter-spacing: 0.07em; margin-bottom: 0.1rem; }
body[data-page="profile"] .pf-hero .sg-facts dd { font-size: 0.92rem; }
@media (max-width: 699px) {
  /* facts sit side by side at their own width (one line: index, best,
     clubs -- GHIN moved under the name, 12 Nov 2026) */
  body[data-page="profile"] .pf-hero .sg-facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
  body[data-page="profile"] .pf-hero .sg-facts.pf-facts-line { flex-wrap: nowrap; gap: 0 1.25rem; }
  body[data-page="profile"] .pf-hero .sg-facts > div { flex: 0 1 auto; }
}
@media (max-width: 480px) {
  .pf-hero__row { gap: 0.8rem; }
  .pf-hero__qr #pfQr, .pf-hero__qr .pf-qrbox { width: 4.6rem; }
  /* four actions as a tidy 2 x 2 rather than 3 + a lonely one */
  body[data-page="profile"] #pfMain .pf-hero .sg-actions { display: grid; grid-template-columns: 1fr 1fr; }
  body[data-page="profile"] #pfMain .pf-hero .sg-actions .sg-btn { padding-left: 0.6rem; padding-right: 0.6rem; }
  body[data-page="profile"] .pf-hero { padding: 0.95rem 1rem 0.9rem; }
  body[data-page="profile"] .pf-hero .sg-facts { margin-top: 0.7rem; padding-top: 0.65rem; }
  body[data-page="profile"] #pfEmail { font-size: 0.8rem; }
  /* "GOLFER PROFILE" on one line beside the avatar */
  body[data-page="profile"] .pf-hero__who .sg-eyebrow { font-size: 0.64rem; letter-spacing: 0.07em; margin-bottom: 0.2rem; }
}
@media (min-width: 700px) {
  body[data-page="profile"] .pf-hero { padding: 1.5rem 1.6rem 1.35rem; }
  .pf-hero__qr #pfQr, .pf-hero__qr .pf-qrbox { width: 6.4rem; }
}

/* the edit form */
body[data-page="profile"] #pfEdit { border-top: 1px solid var(--sg-line-2) !important; padding-top: 1rem !important; margin-top: 1rem !important; }
body[data-page="profile"] #pfEdit .rv-lab { font-size: 0.78rem; font-weight: 600; color: var(--sg-ink-2); text-transform: none; letter-spacing: 0; margin: 0.6rem 0 0.3rem; }
body[data-page="profile"] .rv-in { min-height: 44px; border-radius: var(--sg-r-sm); border-color: var(--sg-line); background: var(--sg-surface); color: var(--sg-ink); }
body[data-page="profile"] textarea.rv-in { min-height: 4.5rem; }

/* ---- tabs: one segmented control ---- */
body[data-page="profile"] .pf-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0.25rem;
  padding: 0.25rem; margin: 0 0 var(--sg-gap);
  background: var(--sg-surface); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-pill); box-shadow: var(--sg-shadow);
}
body[data-page="profile"] .pf-tab {
  border: 0; background: transparent; color: var(--sg-ink-2);
  border-radius: var(--sg-r-pill); padding: 0.55rem 0.4rem; min-height: 40px;
  font-family: inherit; font-size: 0.86rem; font-weight: 600; white-space: nowrap;
}
body[data-page="profile"] .pf-tab.on { background: var(--sg-brand); color: var(--sg-on-brand); font-weight: 700; }
body[data-page="profile"] .pf-tab:not(.on):hover { background: var(--sg-surface-2); }

/* ---- bio + fun facts ---- */
body[data-page="profile"] .pf-bio q, body[data-page="profile"] .pf-bio__quote {
  display: block; font-family: var(--sg-font-display); font-style: italic; font-weight: 500;
  font-size: 1.12rem; line-height: 1.4; color: var(--sg-ink); quotes: none;
}

/* ---- handicap index tiles ---- */
body[data-page="profile"] #pfIndex .sg-stats { margin-top: 0.2rem; }

/* ---- the rounds list: a table on a tablet/desktop, cards on a phone ---- */
body[data-page="profile"] .pf-rt { font-size: 0.85rem; }
body[data-page="profile"] .pf-rt th {
  background: transparent; border: 0; border-bottom: 1px solid var(--sg-line);
  font-size: 0.66rem !important; letter-spacing: 0.08em; color: var(--sg-mute) !important;
  padding: 0.5rem 0.45rem;
}
body[data-page="profile"] .pf-rt td { padding: 0.65rem 0.45rem; border-bottom: 1px solid var(--sg-line-2); color: var(--sg-ink); }
body[data-page="profile"] .pf-rt tbody tr { border-top: 0 !important; background: transparent; }
body[data-page="profile"] .pf-rt tbody tr:hover { background: var(--sg-surface-2); }
body[data-page="profile"] .pf-rt td.c a { color: var(--sg-brand-ink) !important; }
[data-theme="dark"] body[data-page="profile"] .pf-rt td.c a,
[data-theme="dark"] body[data-page="profile"] .pf-rt td.c > div:first-child { color: var(--sg-ink) !important; }
body[data-page="profile"] .pf-rlist-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.2rem 0 0.75rem; }
body[data-page="profile"] .pf-rlist-tools .rv-in { min-height: 40px; font-size: 0.86rem !important; }

@media (max-width: 600px) {
  body[data-page="profile"] .pf-rt, body[data-page="profile"] .pf-rt tbody { display: block; width: 100%; }
  body[data-page="profile"] .pf-rt thead { display: none; }
  body[data-page="profile"] .pf-rt tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    grid-template-areas: "c c c g" "d d d g" "h n x x";
    gap: 0.1rem 0.6rem; align-items: start;
    background: var(--sg-surface) !important; border: 1px solid var(--sg-line) !important;
    border-radius: var(--sg-r-md); padding: 0.8rem 0.9rem; margin-bottom: 0.55rem;
  }
  body[data-page="profile"] .pf-rt td {
    display: block; padding: 0 !important; border: 0 !important; text-align: left !important;
    white-space: normal; max-width: none !important; min-width: 0;
  }
  body[data-page="profile"] .pf-rt td.c  { grid-area: c; font-size: 0.95rem; }
  body[data-page="profile"] .pf-rt td.c .tee { display: inline !important; }
  body[data-page="profile"] .pf-rt td.dt { grid-area: d; font-size: 0.78rem; }
  body[data-page="profile"] .pf-rt td.gr {
    grid-area: g; text-align: right !important; font-family: var(--sg-font-display);
    font-size: 1.55rem; line-height: 1; align-self: center;
  }
  body[data-page="profile"] .pf-rt td.gr b { font-weight: 600; }
  body[data-page="profile"] .pf-rt td.gr::before { display: none !important; }
  body[data-page="profile"] .pf-rt td.gr::after {
    content: "Gross"; display: block; font-family: var(--sg-font); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-mute); margin-top: 0.25rem;
  }
  body[data-page="profile"] .pf-rt td.ho { grid-area: h; }
  body[data-page="profile"] .pf-rt td.nt { grid-area: n; }
  body[data-page="profile"] .pf-rt td.df { grid-area: x; }
  body[data-page="profile"] .pf-rt td.fl { grid-area: x; }
  body[data-page="profile"] .pf-rt td.ho, body[data-page="profile"] .pf-rt td.nt,
  body[data-page="profile"] .pf-rt td.df, body[data-page="profile"] .pf-rt td.fl {
    margin-top: 0.6rem; padding-top: 0.55rem !important; border-top: 1px solid var(--sg-line-2) !important;
    font-size: 0.92rem;
  }
  body[data-page="profile"] .pf-rt td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-mute); margin-bottom: 0.1rem;
  }
  /* tournament rows: the place lines under gross/net stay readable */
  body[data-page="profile"] .pf-rt td.gr .rv-sub { font-family: var(--sg-font); font-size: 0.66rem !important; text-align: right; }
}

/* ---- settings ---- */
body[data-page="profile"] #pfDangerCard { background: var(--sg-surface) !important; border-color: color-mix(in srgb, var(--sg-bad) 28%, var(--sg-line)) !important; }
body[data-page="profile"] #pfDangerCard > .rv-lab:first-child { color: var(--sg-bad) !important; }

/* ---- dark-mode repairs on this page (white tabs, dim numbers) ---- */
[data-theme="dark"] body[data-page="profile"] .pf-tab { background: transparent; color: var(--sg-ink-2); }
[data-theme="dark"] body[data-page="profile"] .pf-tab.on { background: var(--sg-brand); color: var(--sg-on-brand); }

/* =====================================================================
   page: rounds   (body[data-page="rounds"])
   The home list and the round header. The scorecard grid itself
   (#rvScoreTable) is NOT restyled: it is the scoring screen.
   ===================================================================== */
body[data-page="rounds"] #rvHome .rv-card,
body[data-page="rounds"] #rvRound > .rv-card,
body[data-page="rounds"] #rvTabGroup .rv-card { padding: 1.1rem 1.15rem; margin-bottom: var(--sg-gap); }
body[data-page="rounds"] #rvAuthCard { border-top: 4px solid var(--sg-brand); }
body[data-page="rounds"] #rvAuthCard .rv-h { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem); margin: 0 0 0.35rem; color: var(--sg-ink); }
body[data-page="rounds"] #rvAuthCard > .rv-sub { font-size: 0.86rem; color: var(--sg-mute); }
body[data-page="rounds"] #rvHome .rv-in { border-radius: var(--sg-r-sm); border-color: var(--sg-line); }

/* my golf: tiles */
body[data-page="rounds"] #rvStats .sg-stats { margin-top: 0.15rem; }
body[data-page="rounds"] .rv-statfoot { margin-top: 0.7rem; font-size: 0.78rem; color: var(--sg-mute); line-height: 1.45; }
body[data-page="rounds"] .rv-statfoot button {
  font: inherit; font-weight: 700; color: var(--sg-brand-ink); background: none; border: 0;
  padding: 0; margin-left: 0.15rem; text-decoration: underline; cursor: pointer; min-height: 0; min-width: 0;
}
[data-theme="dark"] body[data-page="rounds"] .rv-statfoot button { color: var(--sg-ink); }

/* my rounds & history: cards */
body[data-page="rounds"] #rvMine.sg-list { margin-top: 0.2rem; }
body[data-page="rounds"] #rvMine .sg-item { padding: 0.8rem 0.85rem; flex-wrap: wrap; }
body[data-page="rounds"] #rvMine .sg-item__side { display: flex; align-items: center; gap: 0.7rem; }
body[data-page="rounds"] #rvMine .sg-item__acts { display: flex; gap: 0.35rem; }
body[data-page="rounds"] #rvMine .sg-item__acts .rv-btn { margin: 0; }
body[data-page="rounds"] #rvMine .sg-item--abandoned { background: var(--sg-surface-2); }
@media (max-width: 420px) {
  body[data-page="rounds"] #rvMine .sg-item__side { width: 100%; justify-content: space-between; padding-top: 0.55rem; border-top: 1px solid var(--sg-line-2); }
  body[data-page="rounds"] #rvMine .sg-item__score { text-align: left; display: flex; align-items: baseline; gap: 0.4rem; }
}

/* the round header: course as the title. On a phone the buttons go under
   the course instead of squeezing it into a narrow column. */
@media (max-width: 600px) {
  body[data-page="rounds"] .rv-rhead { flex-direction: column; align-items: stretch !important; }
  body[data-page="rounds"] .rv-rhead > div:last-child { flex-wrap: wrap; justify-content: flex-start; }
}
body[data-page="rounds"] #rvRound > .rv-card:first-of-type,
body[data-page="rounds"] .rv-rhead { border-top: 4px solid var(--sg-brand); }
body[data-page="rounds"] #rvRCourse { font-family: var(--sg-font-display); font-weight: 600 !important; font-size: 1.3rem; color: var(--sg-ink) !important; line-height: 1.2; }
body[data-page="rounds"] #rvRMeta { font-size: 0.78rem !important; color: var(--sg-mute) !important; margin-top: 0.2rem; line-height: 1.45; }
body[data-page="rounds"] #rvRWho { font-size: 0.78rem !important; color: var(--sg-ink-2); }
body[data-page="rounds"] #rvClock { font-size: 0.78rem !important; color: var(--sg-ink-2) !important; }
/* Map / Leaderboard / SG: the same pill as every other secondary button */
body[data-page="rounds"] div:has(> #rvQuickMap) > .rv-btn {
  border-radius: var(--sg-r-pill); background: var(--sg-surface); border: 1px solid var(--sg-line);
  box-shadow: none; color: var(--sg-ink-2); font-weight: 600;
}
/* Card / Games / Group: one segmented control, like the profile tabs */
body[data-page="rounds"] .rv-tabs {
  gap: 0.25rem; padding: 0.25rem; background: var(--sg-surface); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-pill); box-shadow: var(--sg-shadow); margin-bottom: var(--sg-gap);
}
body[data-page="rounds"] .rv-tab {
  border: 0; border-radius: var(--sg-r-pill); background: transparent; color: var(--sg-ink-2);
  font-family: inherit; font-weight: 600; font-size: 0.86rem; min-height: 40px;
}
body[data-page="rounds"] .rv-tab.on { background: var(--sg-brand); color: var(--sg-on-brand); font-weight: 700; }
[data-theme="dark"] body[data-page="rounds"] .rv-tab { background: transparent; color: var(--sg-ink-2); }
[data-theme="dark"] body[data-page="rounds"] .rv-tab.on { background: var(--sg-brand); color: var(--sg-on-brand); }

/* the policy links at the foot of the profile */
body[data-page="profile"] #pfLegal a { color: var(--sg-brand-ink); font-weight: 600; }
[data-theme="dark"] body[data-page="profile"] #pfLegal a { color: var(--sg-ink-2); }

/* where a differential came from (GHIN / PCC / provisional): readable in dark mode */
[data-theme="dark"] body[data-page="profile"] .df-official { background: var(--sg-good-soft); color: var(--sg-good); }
[data-theme="dark"] body[data-page="profile"] .df-pcc      { background: var(--sg-info-soft); color: var(--sg-info); }
[data-theme="dark"] body[data-page="profile"] .df-prov     { background: var(--sg-warn-soft); color: var(--sg-warn); }
[data-theme="dark"] body[data-page="profile"] .df-team     { background: #2a2445; color: #c9bff5; }

/* =====================================================================
   PHASE 2 (11 Nov 2026): club pages, the club admin console, the
   platform desk. Same rules as phase 1: visual only, same ids, same
   data, same actions. The live board and scoring grids are NOT
   restyled -- only the chrome around them (#liveScoresContent,
   #scoreGrid and the payout math are left exactly as they were).
   Pages opt in with class="sg-club" on <body>.
   ===================================================================== */

/* ---- shared: page header (eyebrow + serif title + one line) ---- */
.sg-pagehead { display: flex; align-items: center; gap: 0.9rem; margin: 0.4rem 0 1.05rem; min-width: 0; }
.sg-pagehead__text { flex: 1; min-width: 0; }
.sg-pagehead .sg-title { overflow-wrap: anywhere; }
.sg-pagehead__crest { flex: 0 0 auto; margin: 0 !important; }
.sg-pagehead__crest img {
  display: block; width: 3.2rem !important; max-width: none !important; height: 3.2rem !important;
  object-fit: contain; background: #fff; padding: 0.25rem; box-sizing: border-box;
  border-radius: 14px !important; border: 1px solid var(--sg-line); box-shadow: var(--sg-shadow);
}
.sg-pagehead__acts { flex: 0 0 auto; }

/* ---- shared: the paper and the sheet ---- */
body.sg-club { background: var(--sg-paper); color: var(--sg-ink); }
html:has(> body.sg-club) { background: var(--sg-paper); }
[data-theme="dark"] body.sg-club { background: var(--sg-paper); }
/* the white sheet behind every page goes; the cards float on the paper */
body.sg-club > .container {
  background: transparent; box-shadow: none; border: 0; padding: 0.35rem 0.5rem 1rem;
}
@media (min-width: 700px) { body.sg-club > .container { padding: 0.6rem 0.9rem 1.5rem; } }
[data-theme="dark"] body.sg-club > .container { background: transparent !important; }
body.sg-club h1, body.sg-club h2, body.sg-club h3 { letter-spacing: -0.005em; }

/* pill buttons everywhere on these pages (shape only; colors stay theirs) */
body.sg-club .btn, body.sg-club .btn-sm, body.sg-club .eh-btn, body.sg-club .btn-su, body.sg-club .skip-btn {
  border-radius: var(--sg-r-pill) !important;
}
body.sg-club .btn { font-weight: 700; }

/* ---- shared: one look for a select or a text box in page chrome ---- */
body.sg-club .sg-ctl, body.sg-club .ls-controls select, body.sg-club #lsDay, body.sg-club #lsTournament {
  min-height: 40px; border-radius: var(--sg-r-sm) !important; border: 1px solid var(--sg-line) !important;
  background-color: var(--sg-surface) !important; color: var(--sg-ink) !important;
  padding: 0.4rem 0.65rem !important; font-size: 0.86rem !important; font-family: inherit;
}

/* =====================================================================
   page: club home   (home.html, body[data-page="clubhome"])
   ===================================================================== */
body[data-page="clubhome"] .wrap { max-width: 56rem; padding-top: 0.6rem; }
@media (min-width: 700px) { body[data-page="clubhome"] .wrap { padding-left: 1.2rem; padding-right: 1.2rem; } }

/* section headings: serif, ink, the link on the right as a quiet pill */
body[data-page="clubhome"] h2.sec {
  font-family: var(--sg-font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.25;
  color: var(--sg-ink); margin: 1.7rem 0 0.75rem; flex-wrap: wrap; row-gap: 0.3rem;
}
body[data-page="clubhome"] h2.sec > span,
body[data-page="clubhome"] h2.sec select { font-family: var(--sg-font); }
body[data-page="clubhome"] h2.sec > span[style] { color: var(--sg-mute) !important; }
body[data-page="clubhome"] h2.sec a {
  font-family: var(--sg-font); font-size: 0.76rem; font-weight: 700; color: var(--sg-brand-ink);
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-pill);
  padding: 0.38rem 0.8rem; margin-top: 0; margin-bottom: 0;
}
[data-theme="dark"] body[data-page="clubhome"] h2.sec a { color: var(--sg-ink); }
body[data-page="clubhome"] h2.sec select {
  border: 1px solid var(--sg-line) !important; background: var(--sg-surface) !important;
  color: var(--sg-ink) !important; border-radius: var(--sg-r-pill) !important; padding: 0.3rem 0.6rem !important;
}
body[data-page="clubhome"] #fullHome > h2.sec:first-of-type { margin-top: 0.4rem; }

/* cards */
body[data-page="clubhome"] .card, body[data-page="clubhome"] .ipcard, body[data-page="clubhome"] .strip,
body[data-page="clubhome"] .hl {
  background: var(--sg-surface); color: var(--sg-ink); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow); padding: 1rem 1.1rem; margin-bottom: var(--sg-gap);
}
body[data-page="clubhome"] .card h3, body[data-page="clubhome"] .cta h3 {
  font-family: var(--sg-font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.3;
  color: var(--sg-ink); margin: 0 0 0.25rem;
}
body[data-page="clubhome"] .meta { color: var(--sg-mute); font-size: 0.8rem; line-height: 1.45; }
body[data-page="clubhome"] .empty { color: var(--sg-mute); }
body[data-page="clubhome"] .chip {
  background: var(--sg-brand-soft); color: var(--sg-brand-ink); border: 0;
  font-family: var(--sg-font); font-size: 0.66rem; vertical-align: middle;
}
[data-theme="dark"] body[data-page="clubhome"] .chip { color: var(--sg-ink); }

/* the next event: the one card that is allowed to shout */
body[data-page="clubhome"] .cta {
  background: var(--sg-surface); color: var(--sg-ink); border: 1px solid var(--sg-line);
  border-top: 4px solid var(--sg-brand); border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
  padding: 1.15rem 1.2rem;
}
body[data-page="clubhome"] .cta h3 { font-size: 1.35rem; margin-top: 0.5rem; }
body[data-page="clubhome"] .cta .fee { background: var(--sg-surface-2); border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-md); }
body[data-page="clubhome"] .cta .fee .amt { font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink); }
body[data-page="clubhome"] .cta .fee .lbl { color: var(--sg-mute); }
body[data-page="clubhome"] .cta .howto { background: var(--sg-warn-soft); border: 1px solid transparent; color: var(--sg-ink); border-radius: var(--sg-r-md); }
body[data-page="clubhome"] .cta .chiprow .chip { background: var(--sg-surface-2); border: 1px solid var(--sg-line); color: var(--sg-ink-2); }

/* buttons: the club color, pill, one height */
body[data-page="clubhome"] .btn, body[data-page="clubhome"] .eh-btn {
  min-height: 42px; padding: 0.5rem 1.05rem; font-size: 0.84rem; font-weight: 700;
  background: var(--sg-brand); color: var(--sg-on-brand); border: 1px solid var(--sg-brand);
}
body[data-page="clubhome"] .btn.ghost, body[data-page="clubhome"] .eh-btn.ghost {
  background: var(--sg-surface) !important; color: var(--sg-brand-ink) !important; border: 1px solid var(--sg-line) !important;
}
body[data-page="clubhome"] .btn.ghost:hover, body[data-page="clubhome"] .eh-btn.ghost:hover { border-color: var(--sg-brand) !important; }
[data-theme="dark"] body[data-page="clubhome"] .btn.ghost,
[data-theme="dark"] body[data-page="clubhome"] .eh-btn.ghost { color: var(--sg-ink) !important; }
body[data-page="clubhome"] .eh-btn.danger { background: var(--sg-surface) !important; color: var(--sg-bad) !important; border: 1px solid color-mix(in srgb, var(--sg-bad) 35%, var(--sg-line)) !important; }
body[data-page="clubhome"] .btnrow { gap: 0.45rem; margin-top: 0.8rem; }

/* trophy room */
body[data-page="clubhome"] .card.trophy { border-top: 4px solid var(--sg-brand); padding: 1.1rem 1.15rem 1.15rem; }
body[data-page="clubhome"] .card.trophy h3 { font-size: 1.22rem; }
body[data-page="clubhome"] .flightlab {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sg-brand-ink); margin: 1rem 0 0.4rem;
}
[data-theme="dark"] body[data-page="clubhome"] .flightlab { color: var(--sg-gold); }
body[data-page="clubhome"] .podium {
  background: var(--sg-surface-2); border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-md);
  padding: 0.7rem 0.8rem;
}
body[data-page="clubhome"] .podium .t { color: var(--sg-mute); font-size: 0.64rem; letter-spacing: 0.09em; margin-bottom: 0.35rem; }
body[data-page="clubhome"] .podium ol { font-size: 0.86rem; padding-left: 1.2rem; }
body[data-page="clubhome"] .podium li { padding: 0.18rem 0; }
body[data-page="clubhome"] .podium li::marker { font-weight: 700; color: var(--sg-mute); }
body[data-page="clubhome"] .podium li:first-child { font-weight: 700; }
body[data-page="clubhome"] .podium li:first-child::marker { color: var(--sg-gold); }
body[data-page="clubhome"] .podium .tp { color: var(--sg-mute); }
body[data-page="clubhome"] .daytab { background: var(--sg-brand); color: var(--sg-on-brand); border-radius: var(--sg-r-pill); padding: 0.2rem 0.7rem; font-size: 0.66rem; }

/* tables on the home page (season leaders, by tournament) */
body[data-page="clubhome"] .leadtab { font-size: 0.84rem; }
body[data-page="clubhome"] .leadtab th { color: var(--sg-mute); border-bottom: 1px solid var(--sg-line); font-size: 0.64rem; letter-spacing: 0.08em; padding: 0.4rem 0.35rem; }
body[data-page="clubhome"] .leadtab td { border-bottom: 1px solid var(--sg-line-2); padding: 0.45rem 0.35rem; }
body[data-page="clubhome"] .leadtab .num { color: var(--sg-ink); }
body[data-page="clubhome"] .row { border-bottom: 1px solid var(--sg-line-2); }
body[data-page="clubhome"] .row .win { color: var(--sg-brand-ink); }
[data-theme="dark"] body[data-page="clubhome"] .row .win { color: var(--sg-ink); }
body[data-page="clubhome"] #btQ { border: 1px solid var(--sg-line) !important; border-radius: var(--sg-r-sm) !important; min-height: 40px; background: var(--sg-surface); color: var(--sg-ink); }
body[data-page="clubhome"] #homeDiag { color: var(--sg-mute) !important; }

/* quick links: tiles */
body[data-page="clubhome"] .quick { gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(7.6rem, 1fr)); }
body[data-page="clubhome"] .quick a {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-md);
  box-shadow: var(--sg-shadow); color: var(--sg-ink); font-weight: 700; font-size: 0.8rem; padding: 0.85rem 0.5rem;
}
body[data-page="clubhome"] .quick a:hover { border-color: var(--sg-brand); }
body[data-page="clubhome"] .joincta { border-radius: var(--sg-r-lg); padding: 1.2rem 1.1rem; }
body[data-page="clubhome"] .joincta .btn { background: #fff !important; color: var(--cg-primary) !important; border-color: #fff !important; }

/* reactions under the tables */
body[data-page="clubhome"] .rxbar button, body[data-page="clubhome"] .cmtbtn {
  background: var(--sg-surface); border-color: var(--sg-line); color: var(--sg-ink-2); min-height: 32px; padding: 0.2rem 0.65rem;
}

/* event-pack clubs: the events hub */
body[data-page="clubhome"] .eh-hero { margin: 0.2rem 0 0.35rem; align-items: flex-end; }
body[data-page="clubhome"] .eh-hero h1 {
  font-family: var(--sg-font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--sg-ink);
  font-size: clamp(1.35rem, 1.05rem + 1.6vw, 2.15rem); line-height: 1.15;
}
body[data-page="clubhome"] .eh-sub { margin: 0 0 1.1rem; color: var(--sg-mute); font-size: 0.9rem; line-height: 1.5; }
body[data-page="clubhome"] .eh-pill { border-radius: var(--sg-r-pill); font-size: 0.74rem; padding: 0.32rem 0.8rem; }
body[data-page="clubhome"] .eh-note {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-left: 4px solid var(--sg-gold);
  border-radius: var(--sg-r-md); color: var(--sg-ink-2); font-size: 0.84rem; padding: 0.7rem 0.9rem;
}
body[data-page="clubhome"] .eh-note a { color: var(--sg-brand-ink); }
[data-theme="dark"] body[data-page="clubhome"] .eh-note { background: var(--sg-surface); color: var(--sg-ink-2); border-color: var(--sg-line); border-left-color: var(--sg-gold); }
[data-theme="dark"] body[data-page="clubhome"] .eh-note a { color: var(--sg-ink); }
body[data-page="clubhome"] #ehUp .card { border-top: 4px solid var(--sg-brand); }
body[data-page="clubhome"] #ehPast .card { box-shadow: none; }
body[data-page="clubhome"] .eh-tools {
  margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--sg-line-2); font-size: 0.78rem; gap: 0.35rem 0.9rem;
}
body[data-page="clubhome"] .eh-tools a { color: var(--sg-brand-ink); }
[data-theme="dark"] body[data-page="clubhome"] .eh-tools a { color: var(--sg-ink-2); }
body[data-page="clubhome"] .eh-create { background: var(--sg-surface); border: 1px solid var(--sg-line); border-top: 4px solid var(--sg-brand); border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow); }
body[data-page="clubhome"] .eh-create h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.2rem; }
body[data-page="clubhome"] .eh-in, body[data-page="clubhome"] .eh-radio { border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm); background: var(--sg-surface); color: var(--sg-ink); }
body[data-page="clubhome"] .eh-radio.sel { background: var(--sg-brand-soft); border-color: var(--sg-brand); }
/* on a phone the three buttons on an event card share the row evenly */
@media (max-width: 480px) {
  body[data-page="clubhome"] #ehUp .btnrow, body[data-page="clubhome"] #ehPast .btnrow,
  body[data-page="clubhome"] #upcoming .btnrow { display: grid; grid-template-columns: 1fr 1fr; }
  body[data-page="clubhome"] #ehUp .btnrow > *, body[data-page="clubhome"] #ehPast .btnrow > *,
  body[data-page="clubhome"] #upcoming .btnrow > * { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
  body[data-page="clubhome"] #ehUp .btnrow > :only-child, body[data-page="clubhome"] #ehPast .btnrow > :only-child,
  body[data-page="clubhome"] #upcoming .btnrow > :only-child { grid-column: 1 / -1; }
}
/* the "today" banner keeps its gold, rounded like the rest */
body[data-page="clubhome"] #todayBanner .tb { border-radius: var(--sg-r-lg); }

/* =====================================================================
   pages: results (history.html) and live (live.html) -- chrome only.
   #liveScoresContent is the board and is left exactly as it was.
   ===================================================================== */
body[data-page="history"] #liveScoresSection,
body[data-page="live"] #liveScoresSection {
  background: var(--sg-surface) !important; color: var(--sg-ink);
  border: 1px solid var(--sg-line) !important; border-top: 4px solid var(--sg-brand) !important;
  border-radius: var(--sg-r-lg) !important; box-shadow: var(--sg-shadow); padding: 1rem 1.05rem !important;
  margin: 0 0 1rem !important;
}
body[data-page="history"] #liveScoresSection > div:first-child,
body[data-page="live"] #liveScoresSection > div:first-child {
  padding-bottom: 0.8rem; margin-bottom: 0.8rem !important; border-bottom: 1px solid var(--sg-line-2);
  gap: 0.6rem !important; justify-content: flex-start !important;
}
body[data-page="history"] #liveScoresSection > div:first-child > h3,
body[data-page="live"] #liveScoresSection > div:first-child > h3 {
  flex: 1 1 100%;
  font-family: var(--sg-font-display); font-weight: 600; font-size: 1.12rem !important; color: var(--sg-ink) !important;
}
body[data-page="history"] #liveScoresSection .btn-sm,
body[data-page="live"] #liveScoresSection > div:first-child .btn-sm,
body[data-page="history"] #lsResultsBtn, body[data-page="live"] #lsResultsBtn {
  min-height: 40px; padding: 0.45rem 0.95rem !important; font-size: 0.8rem !important; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.3rem; border-radius: var(--sg-r-pill) !important; margin: 0;
}
body[data-page="history"] #lsUpdated, body[data-page="live"] #lsUpdated, body[data-page="live"] #lsFeedAge { color: var(--sg-mute) !important; }
@media (max-width: 640px) {
  body[data-page="history"] .ls-controls select { font-size: 16px !important; }
}

/* =====================================================================
   page: events / sign-up (signup.html, body[data-page="home"]) -- the
   hero, the tabs and the cards. The money lines are not touched.
   ===================================================================== */
body.sg-club[data-page="home"] .su-hero { border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow); }
body.sg-club[data-page="home"] .su-hero-title { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.45rem; }
@media (max-width: 640px) { body.sg-club[data-page="home"] .su-hero-title { font-size: 1.22rem; } }
/* dark mode: the hero mixed the lifted club color with white, so its white
   title sat on pale gray. A dark plate with the club color on top instead. */
[data-theme="dark"] body.sg-club[data-page="home"] .su-hero {
  background: linear-gradient(135deg, var(--sg-surface-2) 0%, var(--sg-surface) 100%);
  border: 1px solid var(--sg-line); border-top: 4px solid var(--sg-brand);
}
body.sg-club[data-page="home"] .signup-tabs {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-pill);
  box-shadow: var(--sg-shadow); padding: 0.25rem;
}
body.sg-club[data-page="home"] .signup-tab { border-radius: var(--sg-r-pill); color: var(--sg-ink-2); min-height: 40px; }
body.sg-club[data-page="home"] .signup-tab.active { background: var(--sg-brand); color: var(--sg-on-brand); box-shadow: none; }
body.sg-club[data-page="home"] .signup-tab.active .cnt { background: rgba(255,255,255,.22); color: var(--sg-on-brand); }
body.sg-club[data-page="home"] .sfc, body.sg-club[data-page="home"] .event-card {
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
}
body.sg-club[data-page="home"] .sfc-title { color: var(--sg-ink); font-family: var(--sg-font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.sg-club[data-page="home"] .su-note { border-radius: var(--sg-r-md); }

/* =====================================================================
   page: club admin console (admin.html, body[data-page="admin"])
   ===================================================================== */
body[data-page="admin"].sg-club .admin-page #adminPanel,
body[data-page="admin"].sg-club .admin-page #adminLogin {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-shadow); padding: 1rem 1.05rem;
}
@media (min-width: 700px) { body[data-page="admin"].sg-club .admin-page #adminPanel { padding: 1.25rem 1.4rem; } }
/* the dashboard: no sheet, the module cards are the page */
body[data-page="admin"][data-admin-view=""] .admin-page #adminPanel {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}

/* sign in */
body[data-page="admin"] .admin-page #adminLogin { border-top: 4px solid var(--sg-brand); max-width: 28rem; margin: 0.6rem auto 1rem; padding: 1.3rem 1.3rem 1.2rem; }
body[data-page="admin"] #adminLogin > h3 { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.45rem !important; color: var(--sg-ink); margin-bottom: 0.9rem !important; }
body[data-page="admin"] #adminLogin input[type="text"], body[data-page="admin"] #adminLogin input[type="password"] {
  min-height: 44px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm); background: var(--sg-surface); color: var(--sg-ink);
}
body[data-page="admin"] #adminLogin label { color: var(--sg-ink-2); font-weight: 600; }
body[data-page="admin"] #adminLogin > .btn { width: 100%; justify-content: center; min-height: 46px; font-size: 0.95rem; margin-top: 0.6rem; }

/* dashboard heading */
body[data-page="admin"] #admHubHead { display: none; }
body[data-page="admin"][data-admin-view=""] #admHubHead { display: flex; }

/* dashboard: one card per module, each listing its own doors */
@media (min-width: 1000px) {
  body[data-page="admin"] #adminHub[style*="display: block"] {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sg-gap); align-items: start;
  }
  body[data-page="admin"] #adminHub .adm-mod { margin-bottom: 0; }
}
body[data-page="admin"] .adm-mod {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-top: 4px solid var(--sg-brand);
  border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow); padding: 1.05rem 1.05rem 1.1rem; margin-bottom: var(--sg-gap);
}
body[data-page="admin"] .adm-mod-h { align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
body[data-page="admin"] .adm-mod-i {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sg-brand-soft); color: var(--sg-brand-ink);
}
[data-theme="dark"] body[data-page="admin"] .adm-mod-i { color: var(--sg-ink); }
body[data-page="admin"] .adm-mod-t { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.18rem; line-height: 1.25; color: var(--sg-ink); }
body[data-page="admin"] .adm-mod-b { font-size: 0.8rem; color: var(--sg-mute); margin-top: 0.1rem; }
body[data-page="admin"] .adm-items { gap: 0.45rem; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); }
body[data-page="admin"] .adm-item {
  position: relative; background: var(--sg-surface-2); border: 1px solid var(--sg-line-2);
  border-radius: var(--sg-r-md); padding: 0.75rem 2.1rem 0.75rem 0.9rem; color: var(--sg-ink);
  transition: border-color .12s ease, background .12s ease;
}
body[data-page="admin"] .adm-item::after {
  content: "\203A"; position: absolute; right: 0.85rem; top: 50%; transform: translateY(-52%);
  font-size: 1.35rem; line-height: 1; color: var(--sg-mute);
}
body[data-page="admin"] .adm-item:hover, body[data-page="admin"] .adm-item:focus-visible {
  background: var(--sg-surface); border-color: var(--sg-brand); box-shadow: none;
}
body[data-page="admin"] .adm-item:hover::after { color: var(--sg-brand-ink); }
body[data-page="admin"] .adm-item-t { font-size: 0.92rem; font-weight: 700; color: var(--sg-ink); }
body[data-page="admin"] .adm-item-b { font-size: 0.76rem; line-height: 1.4; color: var(--sg-mute); margin-top: 0.15rem; }

/* inside a section: back pill, serif title, then the tab strip */
body[data-page="admin"] #adminBreadcrumbBar { gap: 0.5rem 0.8rem !important; margin-bottom: 0.9rem !important; }
body[data-page="admin"] #adminBreadcrumbBar .btn {
  width: auto !important; background: var(--sg-surface) !important; color: var(--sg-ink-2) !important;
  border: 1px solid var(--sg-line) !important; min-height: 36px; padding: 0.35rem 0.9rem !important;
  font-size: 0.78rem !important; font-weight: 700; box-shadow: none; flex: 0 0 auto;
}
body[data-page="admin"] #adminViewTitle {
  font-family: var(--sg-font-display); font-weight: 600; font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem) !important;
  line-height: 1.2; color: var(--sg-ink) !important; flex: 1 1 100%;
}
/* the tabs wrap onto a second line on a phone instead of scrolling with
   the last one cut in half ("Pay...", 12 Nov 2026) */
body[data-page="admin"] #adminTabBar.cg-tabs {
  background: var(--sg-surface-2); border: 1px solid var(--sg-line); border-radius: 22px;
  padding: 0.25rem; gap: 0.2rem; margin-bottom: 1rem;
  flex-wrap: wrap !important; overflow: visible !important;
}
body[data-page="admin"] #adminTabBar.cg-tabs button,
body[data-page="admin"] #adminTabBar.cg-tabs a {
  background: transparent !important; color: var(--sg-ink-2) !important; border-radius: var(--sg-r-pill) !important;
  padding: 0.5rem 0.9rem !important; min-height: 38px; font-size: 0.8rem !important; text-transform: capitalize;
}
body[data-page="admin"] #adminTabBar.cg-tabs button.active { background: var(--sg-brand) !important; color: var(--sg-on-brand) !important; }
body[data-page="admin"] #adminTabBar.cg-tabs a { color: var(--sg-brand-ink) !important; border: 1px dashed var(--sg-line) !important; }
[data-theme="dark"] body[data-page="admin"] #adminTabBar.cg-tabs a { color: var(--sg-ink) !important; }

/* section cards and their titles */
body[data-page="admin"] .form-section, body[data-page="admin"] .afc {
  border: 1px solid var(--sg-line) !important; border-radius: var(--sg-r-lg) !important; box-shadow: var(--sg-shadow) !important;
}
body[data-page="admin"] .afc-title { color: var(--sg-ink) !important; font-size: 0.9rem !important; border-bottom-color: var(--sg-line-2) !important; }
body[data-page="admin"] .section-header {
  background: var(--sg-surface); color: var(--sg-ink); border: 1px solid var(--sg-line); border-left: 4px solid var(--sg-brand);
  border-radius: var(--sg-r-md); padding: 0.6rem 1rem;
}
[data-theme="dark"] body[data-page="admin"] .section-header { background: var(--sg-surface); }
body[data-page="admin"] .section-header h2, [data-theme="dark"] body[data-page="admin"] .section-header h2 { color: var(--sg-ink); font-family: var(--sg-font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: 0; }
body[data-page="admin"] #adminPanel h3[style] { font-family: var(--sg-font-display); font-weight: 600; letter-spacing: 0; }
body[data-page="admin"] #adminPanel h3[style*="font-size: 0.85rem"], body[data-page="admin"] #adminPanel h3[style*="font-size:0.85rem"],
body[data-page="admin"] #adminPanel h3[style*="font-size:0.95rem"], body[data-page="admin"] #adminPanel h3[style*="font-size: 0.95rem"] {
  font-size: 1.15rem !important; color: var(--sg-ink) !important;
}
body[data-page="admin"] #adminPanel .rv-sub { color: var(--sg-mute); font-size: 0.84rem; line-height: 1.5; }
body[data-page="admin"] #adminPanel .form-group label { color: var(--sg-ink-2); }

/* small inline buttons: pill, a touch taller */
body[data-page="admin"] #adminPanel button.btn-sm, body[data-page="admin"] #adminPanel .btn {
  border-radius: var(--sg-r-pill) !important; min-height: 36px;
}
/* fields */
body[data-page="admin"] #adminPanel input[type="text"], body[data-page="admin"] #adminPanel input[type="number"],
body[data-page="admin"] #adminPanel input[type="email"], body[data-page="admin"] #adminPanel input[type="date"],
body[data-page="admin"] #adminPanel select, body[data-page="admin"] #adminPanel textarea {
  border-radius: var(--sg-r-sm) !important; border-color: var(--sg-line) !important;
  background-color: var(--sg-surface); color: var(--sg-ink);
}
body[data-page="admin"] #adminPanel input[type="text"], body[data-page="admin"] #adminPanel input[type="number"],
body[data-page="admin"] #adminPanel select { min-height: 38px; }

/* payments: four equal cards */
body[data-page="admin"] #paymentsSection > div {
  background: var(--sg-surface) !important; border: 1px solid var(--sg-line) !important; border-radius: var(--sg-r-lg) !important;
  box-shadow: var(--sg-shadow); padding: 1rem 1.1rem !important; margin-bottom: var(--sg-gap) !important;
}
body[data-page="admin"] #paymentsSection > div > div:first-child {
  font-family: var(--sg-font-display); font-weight: 600 !important; font-size: 1.08rem !important; color: var(--sg-ink) !important;
}
body[data-page="admin"] #paymentsSection > div#payStripeCard { border-top: 4px solid var(--sg-brand) !important; }

/* members: the tinted panels become plain sub-cards, the roster a clean table */
body[data-page="admin"] #membersSection { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
body[data-page="admin"] #membersSection > div[style*="background:#f4f8f4"],
body[data-page="admin"] #membersSection > div[style*="background:#f6faf7"],
body[data-page="admin"] #membersSection > #memberRolesBox {
  background: var(--sg-surface-2) !important; border: 1px solid var(--sg-line-2) !important; border-radius: var(--sg-r-md) !important;
  padding: 0.85rem 0.95rem !important;
}
body[data-page="admin"] #membersSection > div[style*="background:#f4f8f4"] > div:first-child,
body[data-page="admin"] #membersSection > div[style*="background:#f6faf7"] > div:first-child {
  font-size: 0.86rem !important; color: var(--sg-ink) !important;
}
body[data-page="admin"] #membersSection > div[style*="background:#f4f8f4"] > div:nth-child(2) { color: var(--sg-mute) !important; font-size: 0.76rem !important; }
body[data-page="admin"] #memberSearch { border: 1px solid var(--sg-line) !important; min-height: 40px; }
body[data-page="admin"] #membersList table { font-size: 0.8rem !important; }
body[data-page="admin"] #membersList thead tr { border-bottom: 1px solid var(--sg-line) !important; color: var(--sg-mute) !important; }
body[data-page="admin"] #membersList th { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.45rem !important; }
body[data-page="admin"] #membersList tbody tr { border-bottom: 1px solid var(--sg-line-2) !important; }
body[data-page="admin"] #membersList tbody tr:hover { background: var(--sg-surface-2); }
body[data-page="admin"] #membersList td { padding: 0.55rem 0.45rem; vertical-align: top; }

/* the events list (tList): cards with the club color down the side */
body[data-page="admin"] #tList > div > div:not([style*="text-transform:uppercase"]) {
  background: var(--sg-surface) !important; border: 1px solid var(--sg-line) !important;
  border-left: 4px solid var(--sg-brand) !important; border-radius: var(--sg-r-md) !important;
  box-shadow: var(--sg-shadow) !important;
}
body[data-page="admin"] #tList > div > div > div[style*="background:#fff"] { background: transparent !important; }
body[data-page="admin"] #tList > div > div > div:first-child b,
body[data-page="admin"] #tList > div > div > div:first-child strong { font-size: 0.95rem; color: var(--sg-ink); }
body[data-page="admin"] #tList div[style*="color:#777"] { color: var(--sg-mute) !important; font-size: 0.76rem !important; }
body[data-page="admin"] #tList > div > div[style*="text-transform:uppercase"] { color: var(--sg-mute) !important; letter-spacing: 0.1em !important; margin-top: 0.6rem !important; }

/* scoring rules (club settings): each group a quiet sub-card */
body[data-page="admin"] #scoringRulesSection > div[style*="background:#f6faf7"] {
  background: var(--sg-surface-2) !important; border: 1px solid var(--sg-line-2) !important;
  border-radius: var(--sg-r-md) !important; padding: 0.85rem 0.95rem !important;
}
body[data-page="admin"] #scoringRulesSection .sr-grp {
  font-family: var(--sg-font-display); font-weight: 600 !important; font-size: 1rem !important; color: var(--sg-ink) !important;
}
body[data-page="admin"] #scoringRulesSection > p, body[data-page="admin"] #membersSection > div > div[style*="color:#556"] { color: var(--sg-mute) !important; font-size: 0.8rem !important; line-height: 1.5; }
/* the section title is already the page title above the tabs */
body[data-page="admin"] #scoringRulesSection > h3:first-child,
body[data-page="admin"] #paymentsSection > h3:first-child { display: none; }

/* the crest above the sheet: the top bar already carries it on the console */
body[data-page="admin"] .container > .dmvi-logo { display: none !important; }

/* ---- the header on a computer (12 Nov 2026) ----
   The club admin bar carried ten things on one line and pushed "Sign out"
   off a 1280px screen. On the console itself "Manage the club" points at
   the page you are on, so it goes; and if the links still do not fit they
   wrap onto a second line instead of running off the edge. */
@media (min-width: 1025px) and (pointer: fine) {
  body[data-page="admin"] #navManageClub { display: none; }
  .site-topbar > .site-nav { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.25rem; }
}

/* ---- the console header on a phone (12 Nov 2026) ----
   Back, logo, theme, help, who-you-are and the menu share 360px; the
   who-you-are chip was capped at 30vw and its name cut to "atherine", and
   the logo was squeezed. On a phone the chip shows the role ("ADMIN") and
   opens the same menu; the name is in that menu and on the chip's title. */
@media (max-width: 480px) {
  body[data-page="admin"] #adminWhoBadge > span:first-child { display: none; }
  body[data-page="admin"] .site-topbar > .topbar-brand { flex: 0 0 auto; }
  body[data-page="admin"] .site-topbar > .topbar-brand > span { display: none; }
  body[data-page="admin"] .site-topbar > .topbar-brand img { flex-shrink: 0; }
}

/* ---- phones: one step down for headings and buttons (James, 12 Nov 2026:
   "some of this text does not need to be this big"). Body text stays at
   13px or more and every button keeps its 44px height. ---- */
@media (max-width: 480px) {
  .sg-btn { font-size: 0.84rem; padding: 0.5rem 1rem; }
  .sg-card__title { font-size: 1.06rem; }
  body[data-page="profile"] .rv-card > .rv-lab:first-child,
  body[data-page="rounds"]  #rvHome > .rv-card > .rv-lab:first-child { font-size: 1.05rem !important; }
  body[data-page="clubhome"] h2.sec { font-size: 1.12rem; }
  body[data-page="clubhome"] .card h3 { font-size: 1.06rem; }
  body[data-page="clubhome"] .cta h3 { font-size: 1.2rem; }
  body[data-page="clubhome"] .card.trophy h3 { font-size: 1.12rem; }
  body[data-page="admin"] .adm-mod-t { font-size: 1.08rem; }
  body[data-page="admin"] #adminLogin > h3 { font-size: 1.3rem !important; }
  body.sg-club[data-page="home"] .su-hero-title { font-size: 1.15rem; }
}

/* =====================================================================
   PHASE 3 (12 Nov 2026): the club admin, organized.
   Areas -- Tournaments, Members, Money, Club settings, Admin users --
   and everything about ONE event under that event (sabio-admin.js draws
   the frame). Same ids, same data, same actions underneath.
   ===================================================================== */

/* ---- the event frame: back, switcher, name, tabs ---- */
.sga-ws {
  background: var(--sg-surface); color: var(--sg-ink);
  border: 1px solid var(--sg-line); border-top: 4px solid var(--sg-brand);
  border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
  padding: 0.85rem 0.95rem 0.9rem; margin: 0 0 var(--sg-gap);
}
@media (min-width: 700px) { .sga-ws { padding: 1rem 1.2rem 1.05rem; } }
.sga-ws__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.sga-ws__back {
  display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0.3rem 0.85rem 0.3rem 0.6rem;
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-pill); background: var(--sg-surface);
  color: var(--sg-ink-2); font-size: 0.8rem; font-weight: 700; text-decoration: none; flex: 0 0 auto;
}
.sga-ws__back:hover { border-color: var(--sg-brand); color: var(--sg-brand-ink); }
.sga-ws__switch { flex: 1 1 14rem; min-width: 0; margin: 0; display: block; }
.sga-ws__sel, .sga-ws__day {
  width: 100%; min-height: 40px; max-width: 100%; box-sizing: border-box;
  border: 1px solid var(--sg-line) !important; border-radius: var(--sg-r-sm) !important;
  background-color: var(--sg-surface) !important; color: var(--sg-ink) !important;
  font: inherit; font-size: 0.86rem !important; font-weight: 600; padding: 0.4rem 0.6rem !important;
}
.sga-ws__slot { display: contents; }
.sga-ws__day { width: auto; flex: 0 0 auto; }
.sga-ws__head { margin-bottom: 0.75rem; min-width: 0; }
.sga-ws__name {
  font-family: var(--sg-font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.85rem); line-height: 1.2; color: var(--sg-ink);
  margin: 0.4rem 0 0.15rem; overflow-wrap: anywhere;
}
.sga-ws__meta { margin: 0; color: var(--sg-mute); font-size: 0.86rem; line-height: 1.45; overflow-wrap: anywhere; }

.sga-ws__tabs {
  display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.3rem;
  background: var(--sg-surface-2); border: 1px solid var(--sg-line-2); border-radius: 22px;
}
.sga-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  min-height: 40px; padding: 0.45rem 0.85rem; border-radius: var(--sg-r-pill);
  color: var(--sg-ink-2); font-size: 0.82rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sga-tab:hover { background: var(--sg-surface); color: var(--sg-brand-ink); }
.sga-tab.on { background: var(--sg-brand); color: var(--sg-on-brand); }
.sga-tab svg { flex: 0 0 auto; opacity: 0.85; }
.sga-tab__s { display: none; }
[data-theme="dark"] .sga-tab:hover { color: var(--sg-ink); }
/* on a phone: short names, an even grid -- every tab visible, none cut */
@media (max-width: 640px) {
  .sga-ws__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 16px; gap: 0.25rem; }
  .sga-tab { flex-direction: column; gap: 0.15rem; padding: 0.4rem 0.2rem; min-height: 52px; border-radius: 12px; font-size: 0.7rem; white-space: normal; text-align: center; line-height: 1.15; }
  .sga-tab__l { display: none; }
  .sga-tab__s { display: block; }
}
@media (max-width: 359px) { .sga-ws__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- notes inside the frame: closed / finished / draft / to fix ---- */
.sga-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.8rem;
  margin-top: 0.75rem; padding: 0.7rem 0.85rem; border-radius: var(--sg-r-md);
  background: var(--sg-surface-2); border: 1px solid var(--sg-line); color: var(--sg-ink-2);
  font-size: 0.84rem; line-height: 1.5;
}
.sga-note__t { flex: 1 1 18rem; min-width: 0; }
.sga-note__t svg { vertical-align: -3px; }
.sga-note__t b { color: var(--sg-ink); }
.sga-note__a { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sga-note--closed { background: var(--sg-surface-2); border-color: var(--sg-line); border-left: 4px solid var(--sg-mute); }
.sga-note--info { background: var(--sg-info-soft); border-color: transparent; color: var(--sg-ink-2); }
.sga-note--warn { background: var(--sg-warn-soft); border-color: transparent; }
.sga-note--good { background: var(--sg-good-soft); border-color: transparent; }
#sgaWsHost > .sga-note { margin: 0 0 var(--sg-gap); }
@media (max-width: 480px) { .sga-note__a { width: 100%; } .sga-note__a .sg-btn { flex: 1 1 auto; } }

/* ---- an area's own pages: a short strip of chips ---- */
.sga-area { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.sga-chip {
  min-height: 40px; padding: 0.4rem 0.95rem; border-radius: var(--sg-r-pill);
  border: 1px solid var(--sg-line); background: var(--sg-surface); color: var(--sg-ink-2);
  font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer;
}
.sga-chip:hover { border-color: var(--sg-brand); color: var(--sg-brand-ink); }
.sga-chip.on { background: var(--sg-brand); border-color: var(--sg-brand); color: var(--sg-on-brand); }
[data-theme="dark"] .sga-chip:hover { color: var(--sg-ink); }
.sga-crumb {
  display: block; font-family: var(--sg-font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sg-brand); margin-bottom: 0.15rem;
}
[data-theme="dark"] .sga-crumb { color: var(--sg-gold); }
/* the frame names the event: the console's own crumb and title step aside */
body[data-page="admin"] #adminEventStrip.sga-ws { margin-bottom: 1rem; }

/* ---- the tournaments list: one card per event ---- */
body[data-page="admin"] #tournamentsSection > div:first-of-type h3[data-help="tournaments"] { display: none; }
body[data-page="admin"] #tAddBtn { min-height: 44px; padding: 0.55rem 1.15rem !important; font-size: 0.88rem !important; }
.sga-group {
  display: flex; align-items: baseline; gap: 0.45rem; margin: 1.1rem 0 0.55rem;
  font-family: var(--sg-font) !important; font-size: 0.72rem !important; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sg-mute) !important;
}
.sga-group:first-child { margin-top: 0.2rem; }
.sga-group span { font-weight: 700; letter-spacing: 0; }
.sga-tgrid { display: grid; gap: 0.6rem; }
@media (min-width: 960px) { .sga-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sga-tcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-left: 4px solid var(--sg-brand);
  border-radius: var(--sg-r-md); box-shadow: var(--sg-shadow);
}
.sga-tcard--closed, .sga-tcard--finished { border-left-color: var(--sg-line); }
.sga-tcard--draft { border-left-color: var(--sg-warn); }
.sga-tcard__main { display: block; padding: 0.85rem 0.95rem 0.5rem; text-decoration: none; color: inherit; min-width: 0; border-radius: var(--sg-r-md) var(--sg-r-md) 0 0; }
.sga-tcard__main:hover .sga-tcard__name { color: var(--sg-brand-ink); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .sga-tcard__main:hover .sga-tcard__name { color: var(--sg-ink); }
.sga-tcard__name {
  font-family: var(--sg-font-display) !important; font-weight: 600; font-size: 1.1rem !important; line-height: 1.25;
  color: var(--sg-ink) !important; margin: 0.4rem 0 0.15rem !important; overflow-wrap: anywhere; letter-spacing: 0;
}
.sga-tcard__meta { margin: 0; font-size: 0.82rem; color: var(--sg-mute); line-height: 1.4; overflow-wrap: anywhere; }
.sga-tcard__draft {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 0.15rem 0.95rem 0.4rem;
  padding: 0.5rem 0.65rem; border-radius: var(--sg-r-sm); background: var(--sg-warn-soft); color: var(--sg-warn);
  font-size: 0.8rem; font-weight: 600;
}
.sga-tcard__draft span { flex: 1 1 10rem; }
.sga-tcard__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; padding: 0.35rem 0.95rem 0.85rem; margin-top: auto; }
.sga-tcard__acts .sg-btn--sm { min-height: 40px; }
@media (max-width: 480px) {
  .sga-tcard__acts .sg-btn { flex: 1 1 auto; }
  .sga-tcard__acts .sga-more { flex: 0 0 auto; }
}
.sga-more { position: relative; }
.sga-more > summary { list-style: none; cursor: pointer; min-width: 44px; padding-left: 0.6rem; padding-right: 0.6rem; }
.sga-more > summary::-webkit-details-marker { display: none; }
.sga-more__menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; min-width: 14rem; max-width: 80vw;
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-md);
  box-shadow: 0 10px 30px rgba(16,24,40,.18); padding: 0.35rem; display: grid;
}
.sga-more__menu > a, .sga-more__menu > button {
  display: block; text-align: left; min-height: 44px; padding: 0.6rem 0.75rem; border: 0; background: none;
  font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--sg-ink); text-decoration: none;
  border-radius: var(--sg-r-sm); cursor: pointer;
}
.sga-more__menu > a:hover, .sga-more__menu > button:hover { background: var(--sg-surface-2); }
.sga-more__menu > .sga-danger { color: var(--sg-bad); }
.sga-more-past { text-align: center; margin: 0.8rem 0 0.2rem; }

/* ---- the dashboard: the next events, one tap away ---- */
.sga-hub-events { display: grid; gap: 0.4rem; margin: 0 0 0.6rem; }
.sga-hub-events__h { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-mute); }
.sga-hub-ev {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; align-items: center;
  padding: 0.6rem 0.8rem; border-radius: var(--sg-r-md); text-decoration: none;
  background: var(--sg-brand-soft); color: var(--sg-ink); border: 1px solid transparent;
}
.sga-hub-ev:hover { border-color: var(--sg-brand); }
.sga-hub-ev .sg-badge { grid-row: span 2; align-self: center; }
.sga-hub-ev b { font-size: 0.9rem; overflow-wrap: anywhere; }
.sga-hub-ev span:last-child { font-size: 0.76rem; color: var(--sg-mute); }
[data-theme="dark"] .sga-hub-ev { background: var(--sg-surface-2); }

/* ---- the Settings tab: one event's settings, not the list ---- */
body.sga-settings-mode #tournamentsSection > *:not(#sgaSettingsCard) { display: none !important; }
body.sga-settings-mode #tList { display: none !important; }
.sga-settings .sg-card__head { flex-wrap: wrap; }
.sga-settings .sg-facts dd { font-size: 0.9rem; line-height: 1.45; }
.sga-mute { color: var(--sg-mute); font-weight: 500; font-size: 0.82rem; }

/* ---- a sheet (Clone) ---- */
.sga-sheet {
  position: fixed; inset: 0; z-index: 21000; background: rgba(10,18,26,.55);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.sga-sheet__card {
  width: 100%; max-width: 34rem; max-height: 92vh; overflow-y: auto; box-sizing: border-box;
  background: var(--sg-surface); color: var(--sg-ink); border-radius: var(--sg-r-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,.3); padding: 1.2rem 1.25rem 1.1rem; border-top: 4px solid var(--sg-brand);
}
.sga-sheet__title { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.9rem; overflow-wrap: anywhere; }
.sga-sheet__fine { font-size: 0.8rem; color: var(--sg-mute); line-height: 1.5; margin: 0.8rem 0 0; }
.sga-sheet__msg { min-height: 1.2rem; color: var(--sg-bad); font-size: 0.84rem; font-weight: 600; margin-top: 0.5rem; }
.sga-sheet__acts { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.6rem; }
.sga-form { display: grid; gap: 0.75rem; }
.sga-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.sga-clone-what { display: grid; gap: 0.5rem; margin-top: 0.95rem; }
.sga-clone-what > div { background: var(--sg-surface-2); border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-md); padding: 0.65rem 0.8rem; font-size: 0.82rem; line-height: 1.5; color: var(--sg-ink-2); }
.sga-clone-what b { display: flex; align-items: center; gap: 0.3rem; color: var(--sg-ink); margin-bottom: 0.15rem; }
.sga-clone-what > div:first-child b { color: var(--sg-good); }
.sga-clone-what > div:last-child b { color: var(--sg-bad); }
@media (max-width: 560px) {
  .sga-sheet { align-items: flex-end; padding: 0; }
  .sga-sheet__card { max-width: none; border-radius: 20px 20px 0 0; max-height: 94vh; padding: 1.1rem 1rem 1.3rem; }
  .sga-sheet__acts .sg-btn { flex: 1 1 auto; }
}

/* ---- a closed event: what cannot change looks it ---- */
.sga-ro { opacity: 0.6; cursor: not-allowed !important; }
#tournamentForm.sga-form-closed #tSaveBtn, #tournamentForm.sga-form-closed #tCancelBtn,
#tournamentForm.sga-form-closed #aiDraftCard { display: none !important; }
#sgaFormNote .sga-note { margin: 0 0 0.9rem; }

/* ---- the event settings form ----
   On a phone the form was a modal inside 2.5rem of padding, its payment
   boxes laid out for 18rem columns: "e.g. Ken H", "phor", "@l" (James,
   12 Nov 2026). Now a full-width sheet, every label above its box. */
.sga-paygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0.7rem; margin-top: 0.4rem; }
.sga-paybox {
  min-width: 0; background: var(--sg-surface-2); border: 1px solid var(--sg-line); border-radius: var(--sg-r-md);
  padding: 0.8rem 0.85rem;
}
.sga-paybox--xd { border-color: color-mix(in srgb, #b34700 40%, var(--sg-line)); }
.sga-payfields { display: grid; gap: 0.55rem; margin: 0.3rem 0 0.7rem; }
#tournamentForm .sga-payfields > label.sga-payfield { display: grid !important; flex-direction: unset !important; width: auto !important; gap: 0.25rem; margin: 0 !important; font-size: 0.8rem !important; font-weight: 600 !important; color: var(--sg-ink-2) !important; text-align: left !important; }
#tournamentForm .sga-payfield input, #tournamentForm .sga-paymethod input[type="text"], #tournamentForm .sga-contact input {
  display: block !important;
  width: 100% !important; min-width: 0 !important; max-width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 0.5rem 0.7rem !important; font-size: 16px !important; font-family: inherit;
  border: 1px solid var(--sg-line) !important; border-radius: var(--sg-r-sm) !important;
  background: var(--sg-surface) !important; color: var(--sg-ink) !important; margin: 0 !important;
}
.sga-paymethods { display: grid; gap: 0.4rem; }
#tournamentForm .sga-paymethods > label.sga-paymethod {
  display: grid !important; flex-direction: unset !important; width: auto !important; align-items: center !important; grid-template-columns: auto 1fr; align-items: center; gap: 0.35rem 0.55rem;
  margin: 0 !important; padding: 0.55rem 0.65rem; border: 1px solid var(--sg-line-2); border-radius: var(--sg-r-sm);
  background: var(--sg-surface); cursor: pointer; text-align: left !important;
}
#tournamentForm .sga-paymethod > input[type="checkbox"] { width: 1.3rem !important; min-width: 1.3rem !important; height: 1.3rem; margin: 0 !important; accent-color: var(--sg-brand); }
.sga-paybox--xd .sga-paymethod input[type="checkbox"] { accent-color: #b34700; }
.sga-paymethod__n { font-size: 0.86rem; font-weight: 700; color: var(--sg-ink); }
#tournamentForm .sga-paymethod input[type="text"] { grid-column: 1 / -1; }
.sga-paymethod:has(input[type="checkbox"]:not(:checked)) input[type="text"] { opacity: 0.75; }
.sga-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem; margin-top: 0.7rem; }
.sga-contact__l { grid-column: 1 / -1; font-size: 0.8rem; font-weight: 600; color: var(--sg-ink-2); }

@media (max-width: 640px) {
  #tFormOverlay { padding: 0 !important; align-items: stretch !important; }
  #tFormOverlay > div { border-radius: 0 !important; max-width: none !important; min-height: 100%; }
  #tFormModalBody { padding: 0.75rem 0.75rem 2rem !important; }
  #tFormModalClose { min-width: 44px; min-height: 40px; font-size: 1rem !important; }
  #tournamentForm .form-group { min-width: 0; }
  #tournamentForm .form-group > label { display: block; text-align: left; }
  #tournamentForm input:not([type="checkbox"]):not([type="radio"]), #tournamentForm select, #tournamentForm textarea {
    max-width: 100%; box-sizing: border-box; font-size: 16px;
  }
  #tournamentForm input[type="text"], #tournamentForm input[type="tel"], #tournamentForm input[type="email"],
  #tournamentForm input[type="number"], #tournamentForm input[type="date"], #tournamentForm input[type="time"],
  #tournamentForm input[type="datetime-local"], #tournamentForm input[type="url"], #tournamentForm select { min-height: 44px; }
  #tournamentForm .afc { padding: 0.8rem 0.75rem; }
  /* rows of label + control wrap instead of squeezing the control */
  #tournamentForm label[style*="display:flex"] { flex-wrap: wrap; }
  #tournamentForm label[style*="display:flex"] > select, #tournamentForm label[style*="display:flex"] > input[type="text"],
  #tournamentForm label[style*="display:flex"] > input[type="number"] { flex: 1 1 9rem; min-width: 0 !important; }
}
[data-theme="dark"] #tFormOverlay > div { background: var(--sg-surface) !important; }

/* ---- every admin form on a phone: label above a full-width box ---- */
@media (max-width: 640px) {
  body[data-page="admin"] #adminPanel .form-group > label { display: block; text-align: left; margin-bottom: 0.25rem; }
  body[data-page="admin"] #adminPanel .form-group > input:not([type="checkbox"]):not([type="radio"]),
  body[data-page="admin"] #adminPanel .form-group > select,
  body[data-page="admin"] #adminPanel .form-group > textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; min-height: 44px; font-size: 16px; }
  body[data-page="admin"] #adminPanel button.btn-sm, body[data-page="admin"] #adminPanel .btn { min-height: 40px; }
}

/* =====================================================================
   /event-setup and /ops: the same paper, cards and frame as the console
   ===================================================================== */
body.sg-club[data-page="setup"] .container > .dmvi-logo,
body.sg-club[data-page="ops"] .container > .dmvi-logo { display: none !important; }
body.sg-club[data-page="setup"] #setupLogin, body.sg-club[data-page="ops"] #opsLogin {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-top: 4px solid var(--sg-brand);
  border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow); max-width: 28rem;
}
/* the old bar keeps only what the frame does not do */
body.sga-framed .setup-bar .brand, body.sga-framed #setupNewEvent, body.sga-framed #setupTournament,
body.sga-framed .setup-signout, body.sga-framed .ops-bar .brand,
body.sga-framed #opsTournament, body.sga-framed .ops-signout { display: none !important; }
body.sga-framed .setup-bar { display: none !important; }
body.sga-framed .ops-bar {
  position: static; background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 0.7rem;
}
body.sga-framed .ops-bar > span[style*="flex:1"] { display: none; }
body.sg-club[data-page="ops"] .ops-back { min-height: 40px; min-width: 44px; border-radius: var(--sg-r-pill); background: var(--sg-surface); border-color: var(--sg-line); color: var(--sg-ink-2); }
body.sg-club[data-page="ops"] .ops-chip { background: var(--sg-brand-soft); color: var(--sg-brand-ink); font-size: 0.8rem; padding: 0.35rem 0.85rem; }
[data-theme="dark"] body.sg-club[data-page="ops"] .ops-chip { color: var(--sg-ink); }

/* the plan / credits bar: one quiet line, not a wall of buttons */
body.sg-club[data-page="setup"] #setupBillingBar > div {
  border: 1px solid var(--sg-line) !important; border-radius: var(--sg-r-md) !important;
  background: var(--sg-surface) !important; color: var(--sg-ink-2) !important; box-shadow: var(--sg-shadow);
}
body.sg-club[data-page="setup"] #setupBillingBar button, body.sg-club[data-page="setup"] #setupBillingBar a { border-radius: var(--sg-r-pill) !important; min-height: 36px; }

/* progress, step pills and the step cards */
body.sg-club[data-page="setup"] .setup-progress {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-md); box-shadow: var(--sg-shadow);
}
body.sg-club[data-page="setup"] .setup-progress .track { background: var(--sg-line-2); }
body.sg-club[data-page="setup"] .setup-progress .fill { background: var(--sg-brand); }
body.sg-club[data-page="setup"] .setup-pills { top: 0; background: var(--sg-paper); }
body.sg-club[data-page="setup"] .setup-pill {
  min-height: 38px; background: var(--sg-surface); border: 1px solid var(--sg-line); color: var(--sg-ink-2); font-size: 0.76rem;
}
body.sg-club[data-page="setup"] .setup-pill.done .pnum { background: var(--sg-good-soft); color: var(--sg-good); }
body.sg-club[data-page="setup"] .setup-sec {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
}
body.sg-club[data-page="setup"] .setup-sec-head { min-height: 56px; background: var(--sg-surface); }
body.sg-club[data-page="setup"] .setup-sec.open .setup-sec-head { background: var(--sg-surface-2); }
body.sg-club[data-page="setup"] .setup-sec-num { background: var(--sg-brand) !important; color: var(--sg-on-brand); }
body.sg-club[data-page="setup"] .setup-sec-title { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.02rem; color: var(--sg-ink); }
body.sg-club[data-page="setup"] .setup-sec-sub { font-size: 0.78rem; color: var(--sg-mute); }
body.sg-club[data-page="setup"] .setup-sec-body { border-top: 1px solid var(--sg-line-2); }
body.sg-club[data-page="setup"] .setup-sec-badge.done { background: var(--sg-good-soft); color: var(--sg-good); border-color: transparent; }
body.sg-club[data-page="setup"] .setup-sec-badge.warn { background: var(--sg-warn-soft); color: var(--sg-warn); border-color: transparent; }
body.sg-club[data-page="setup"] .setup-sec-badge.todo { background: var(--sg-surface-2); color: var(--sg-mute); border-color: var(--sg-line); }
body.sg-club[data-page="setup"] .setup-sec button, body.sg-club[data-page="setup"] .setup-sec .btn-sm { border-radius: var(--sg-r-pill) !important; min-height: 36px; }
body.sg-club[data-page="setup"] .setup-sec input[type="text"], body.sg-club[data-page="setup"] .setup-sec input[type="search"],
body.sg-club[data-page="setup"] .setup-sec input[type="number"], body.sg-club[data-page="setup"] .setup-sec select {
  border-radius: var(--sg-r-sm) !important; border-color: var(--sg-line) !important; min-height: 40px;
  background-color: var(--sg-surface); color: var(--sg-ink);
}
body.sg-club[data-page="setup"] .spm-card { background: var(--sg-surface); color: var(--sg-ink); border-radius: var(--sg-r-lg); }
@media (max-width: 640px) { body.sg-club[data-page="setup"] .spm-card { border-radius: 20px 20px 0 0; } }
body.sg-club[data-page="setup"] .spm-card input, body.sg-club[data-page="setup"] .spm-card select { min-height: 44px; font-size: 16px !important; }
[data-theme="dark"] body.sg-club[data-page="setup"] .setup-sec,
[data-theme="dark"] body.sg-club[data-page="setup"] .setup-sec-head { background: var(--sg-surface); }
[data-theme="dark"] body.sg-club[data-page="setup"] .setup-sec.open .setup-sec-head { background: var(--sg-surface-2); }

/* ops: hub cards and the printables list */
body.sg-club[data-page="ops"] .ops-hub-card {
  background: var(--sg-surface) !important; border: 1px solid var(--sg-line) !important; border-top: 4px solid var(--sg-brand) !important;
  border-radius: var(--sg-r-lg) !important; box-shadow: var(--sg-shadow); color: var(--sg-ink);
}
body.sg-club[data-page="ops"] .ops-hub-card div[style*="font-weight:700"] { color: var(--sg-ink) !important; font-family: var(--sg-font-display); font-weight: 600 !important; font-size: 1rem !important; }
body.sg-club[data-page="ops"] #opsTabPrintables > div, body.sg-club[data-page="ops"] #opsTabPairings > div,
body.sg-club[data-page="ops"] #opsTabSponsors > div, body.sg-club[data-page="ops"] #opsTabVendors > div,
body.sg-club[data-page="ops"] #opsTabInvoices > div {
  border-radius: var(--sg-r-lg) !important;
}

/* one event's page on the console: the frame is the header, the
   sections float on the paper like the dashboard's cards */
body[data-page="admin"].sga-ws-view .admin-page #adminPanel {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
/* the portal's "Admin Dashboard" shortcut: the frame's back link does that */
body.sga-framed #memberAdminBtn { display: none !important; }

/* styles.css caps EVERY input inside a label in this form at 6rem
   ("#tournamentForm label input { max-width: 6rem !important }") -- meant
   for a number inside a sentence, it is what cut names, phones and
   handles to "Ken H", "phor", "@l". Text boxes get the full width back;
   short number boxes keep their cap. */
#tournamentForm label input[type="text"], #tournamentForm label input[type="tel"],
#tournamentForm label input[type="email"], #tournamentForm label input[type="url"] {
  max-width: 100% !important;
}
#tournamentForm .sga-contact > input { max-width: 100% !important; width: 100% !important; }

/* ---- the score grid on a phone: no clipped boxes ----
   The playing-handicap box was 32px wide with 12px of padding a side, so
   "12" showed as "1"; the tee and start pickers showed only their arrow.
   Same grid, same columns -- the boxes are just wide enough for what is
   in them (it scrolls sideways, as it always has). */
@media (max-width: 768px), (pointer: coarse) {
  body[data-page="admin"] #scoreGrid td .chcp-input {
    width: 2.5rem !important; min-width: 2.5rem; padding: 2px !important; text-align: center; font-size: 15px !important;
  }
  body[data-page="admin"] #scoreGrid td input[type="number"]:not(.chcp-input) { padding: 1px !important; min-width: 1.9rem; }
  body[data-page="admin"] #scoreGrid td select {
    width: auto !important; min-width: 4.6rem; max-width: 7rem; padding: 2px 18px 2px 6px !important;
    font-size: 13px !important; background-position: right 4px center !important;
  }
}
/* members: the "Membership" heading on its own line, the fields under it */
body[data-page="admin"] #membersSection > div[style*="background:#f6faf7"] > div:first-child { flex: 1 1 100%; align-self: auto !important; }
/* inside an event the frame's switcher is THE event picker: the pages'
   own tournament pickers step aside (their day pickers stay) */
body.sga-ws-view .form-group:has(> #payTournamentSel),
body.sga-ws-view .form-group:has(> #healthTournamentSel),
body.sga-ws-view #tournamentFilter { display: none !important; }

/* the event pages: "Manage the club" points at the console the frame's
   back link already reaches; without it the header fits on one line */
@media (min-width: 1025px) and (pointer: fine) {
  body[data-page="setup"] #navManageClub, body[data-page="ops"] #navManageClub { display: none; }
}
/* the step pills wrap instead of scrolling with the last ones cut off */
body.sg-club[data-page="setup"] .setup-pills { position: static; flex-wrap: wrap; overflow: visible; }
/* the platform desk: its sections as one strip under the heading */
.pa-desk .pa-jump { margin: 0 0 1rem; }
.pa-desk .pa-jump .sga-chip { min-height: 38px; padding: 0.35rem 0.85rem; font-size: 0.8rem; }
.pa-desk .card[id^="paSec"], .pa-desk #paGolfersCard { scroll-margin-top: 4.5rem; }

/* =====================================================================
   Edit Member window (James, 13 Nov 2026: "This needs fixing")
   Centered dialog on a desktop, full-screen sheet on a phone; Save is in a
   footer that never scrolls away.
   ===================================================================== */
html.sgem-open, html.sgem-open body { overflow: hidden; }
.sgem {
  position: fixed; inset: 0; z-index: 21000; background: rgba(10,18,26,.55);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}
.sgem-card {
  width: 100%; max-width: 46rem; max-height: min(92vh, 60rem); box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--sg-surface); color: var(--sg-ink); border-radius: var(--sg-r-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,.3); border-top: 4px solid var(--sg-brand);
  font-family: var(--sg-font);
}
.sgem-head { display: flex; gap: 0.75rem; align-items: flex-start; padding: 1.05rem 1.25rem 0.8rem; border-bottom: 1px solid var(--sg-line-2); }
.sgem-head-t { flex: 1; min-width: 0; }
.sgem-head .sg-eyebrow { margin: 0 0 0.15rem; }
.sgem-title { font-family: var(--sg-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; margin: 0; overflow-wrap: anywhere; color: var(--sg-ink); }
.sgem-sub { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; margin-top: 0.4rem; font-size: 0.8rem; color: var(--sg-mute); }
.sgem-x {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sg-line);
  background: var(--sg-surface); color: var(--sg-ink-2); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sgem-x:hover { border-color: var(--sg-brand); color: var(--sg-ink); }
.sgem-body { flex: 1 1 auto; overflow-y: auto; padding: 0.4rem 1.25rem 1rem; overscroll-behavior: contain; }
.sgem-sec { padding: 0.85rem 0 0.95rem; border-bottom: 1px solid var(--sg-line-2); display: grid; gap: 0.7rem; }
.sgem-sec:last-child { border-bottom: 0; }
.sgem-sec h3 {
  margin: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sg-mute);
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: baseline;
}
.sgem-sec h3 .sgem-opt { letter-spacing: 0; text-transform: none; }
.sgem-opt { font-weight: 500; font-size: 0.74rem; color: var(--sg-mute); }
.sgem-grid { display: grid; gap: 0.7rem 0.8rem; }
.sgem-grid--name { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.7fr) minmax(0, 1.2fr); }
.sgem-grid--2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.sgem-grid--golf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sgem-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sgem-grid--addr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.sgem-grid--addr .sgem-wide { grid-column: span 1; }
.sgem .sg-input { min-height: 42px; }
.sgem textarea.sg-input { min-height: 64px; resize: vertical; }
.sgem select.sg-input { padding-right: 0.5rem; }
.sgem .sg-field > label { font-size: 0.78rem; }
.sgem .sgem-bad { border-color: var(--sg-bad) !important; box-shadow: 0 0 0 3px var(--sg-bad-soft) !important; }
.sgem-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--sg-ink-2); cursor: pointer; width: fit-content; }
.sgem-check input, .sgem-role input { width: 1.05rem; height: 1.05rem; accent-color: var(--sg-brand); margin: 0; }
.sgem-hint { margin: -0.15rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--sg-mute); }
.sgem-roles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sgem-role {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: var(--sg-r-pill);
  border: 1px solid var(--sg-line); background: var(--sg-surface-2); font-size: 0.82rem; cursor: pointer; color: var(--sg-ink);
}
.sgem-role:has(input:checked) { border-color: var(--sg-brand); background: var(--sg-brand-soft); }
[data-theme="dark"] .sgem-role:has(input:checked) { background: var(--sg-surface-2); }
.sgem-note { font-size: 0.8rem; line-height: 1.45; border-radius: var(--sg-r-sm); padding: 0.55rem 0.75rem; border: 1px solid var(--sg-line); }
.sgem-note--warn { background: var(--sg-warn-soft); color: var(--sg-ink); border-color: color-mix(in srgb, var(--sg-warn) 35%, transparent); }
.sgem-note--good { background: var(--sg-good-soft); color: var(--sg-ink); border-color: color-mix(in srgb, var(--sg-good) 30%, transparent); }
.sgem-muted { color: var(--sg-mute); font-size: 0.82rem; margin: 0; }
.sgem-lbl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.sgem-lbl-row > label { font-size: 0.78rem; }
.sgem-linkbtn { background: none; border: 0; padding: 0.2rem 0; font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--sg-brand-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; flex: 0 0 auto; }
#editMemberModal textarea.sg-input[readonly] { background: var(--sg-surface-2) !important; color: var(--sg-ink-2) !important; cursor: default; }  /* styles.css sets every textarea background with !important */
.sgem-hist { display: grid; gap: 0.35rem; }
.sgem-hist-row { display: grid; gap: 0.1rem; padding: 0.5rem 0.65rem; border-radius: var(--sg-r-sm); background: var(--sg-surface-2); font-size: 0.8rem; }
.sgem-hist-w { color: var(--sg-mute); font-size: 0.74rem; }
.sgem-hist-a { font-weight: 700; color: var(--sg-ink); }
.sgem-hist-c { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; color: var(--sg-ink-2); }
.sgem-hist .sg-btn { justify-self: start; }
.sgem-tourn { font-size: 0.8rem; color: var(--sg-ink-2); }
.sgem-tourn summary { cursor: pointer; font-weight: 700; color: var(--sg-ink); padding: 0.3rem 0; }
.sgem-tourn-row { padding: 0.25rem 0; border-bottom: 1px dotted var(--sg-line); }
.sgem-foot {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sg-line); background: var(--sg-surface); box-shadow: var(--sg-shadow-up);
}
.sgem-err { flex-basis: 100%; min-height: 0; color: var(--sg-bad); font-size: 0.84rem; font-weight: 600; }
.sgem-err:empty { display: none; }
.sgem-foot-gap { flex: 1; }
@media (max-width: 720px) {
  .sgem-grid--golf, .sgem-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgem-grid--addr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sgem-grid--addr .sgem-wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sgem { padding: 0; align-items: stretch; }
  .sgem-card { max-width: none; max-height: none; height: 100%; border-radius: 0; border-top-width: 3px; }
  .sgem-head { padding: calc(0.8rem + env(safe-area-inset-top, 0px)) 1rem 0.7rem; }
  .sgem-title { font-size: 1.25rem; }
  .sgem-body { padding: 0.2rem 1rem 1rem; }
  .sgem-grid--name { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); }
  .sgem-grid--name > :last-child { grid-column: 1 / -1; }
  .sgem-grid--2 { grid-template-columns: 1fr; }
  .sgem-foot { padding-left: 1rem; padding-right: 1rem; }
  .sgem-foot .sg-btn { flex: 1 1 auto; }
  .sgem-foot .sgem-del { flex: 0 0 auto; }
  .sgem-foot-gap { display: none; }
}

/* ---- the live line in a small form dialog (Renew shows the paid-through date) ---- */
.cg-form-live {
  display: grid; gap: 0.15rem; margin: 0.2rem 0 0.4rem; padding: 0.6rem 0.75rem; border-radius: 10px;
  background: var(--sg-brand-soft); color: var(--sg-ink); font-size: 0.84rem; line-height: 1.4;
  border: 1px solid var(--sg-line);
}
.cg-form-live b { font-size: 0.95rem; }
.cg-form-live span { color: var(--sg-ink-2); font-size: 0.78rem; }
.cg-form-live--good { background: var(--sg-good-soft); border-color: color-mix(in srgb, var(--sg-good) 30%, transparent); }
.cg-form-live--good b { color: var(--sg-good); }
.cg-form-live--warn { background: var(--sg-warn-soft); }
.cg-form-live--bad { background: var(--sg-bad-soft); }
.cg-form-live--bad b { color: var(--sg-bad); }

/* =====================================================================
   Activity log (club admin)
   ===================================================================== */
.sgact { display: grid; gap: 0.8rem; }
.sgact-head { display: flex; gap: 0.8rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sgact-head .sg-card__sub { max-width: 44rem; }
.sgact-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.6rem 0.7rem; }
.sgact-filters .sg-input { min-height: 40px; font-size: 0.9rem; }
.sgact-member { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.88rem; padding: 0.5rem 0.75rem; border-radius: var(--sg-r-sm); background: var(--sg-brand-soft); color: var(--sg-ink); }
[data-theme="dark"] .sgact-member { background: var(--sg-surface-2); }
.sgact-count { margin: 0; font-size: 0.8rem; color: var(--sg-mute); }
.sgact-list { display: grid; gap: 0; border: 1px solid var(--sg-line); border-radius: var(--sg-r-md); overflow: hidden; background: var(--sg-surface); }
.sgact-list > .sg-empty { border: 0; border-radius: 0; }
.sgact-row {
  display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) 11rem; gap: 0.3rem 1rem; align-items: start;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--sg-line-2);
}
.sgact-row:last-child { border-bottom: 0; }
.sgact-when { font-size: 0.8rem; color: var(--sg-ink-2); font-variant-numeric: tabular-nums; display: grid; gap: 0.1rem; }
.sgact-club-n { font-size: 0.72rem; color: var(--sg-mute); }
.sgact-main { min-width: 0; display: grid; gap: 0.3rem; }
.sgact-line { display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; align-items: center; }
.sgact-who-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 0.92rem; color: var(--sg-brand-ink); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.sgact-who-link:hover { text-decoration: underline; }
[data-theme="dark"] .sgact-who-link { color: var(--sg-ink); }
.sgact-target { font-weight: 700; font-size: 0.9rem; color: var(--sg-ink); overflow-wrap: anywhere; }
.sgact-changes { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: 0.82rem; color: var(--sg-ink-2); }
.sgact-ch s { color: var(--sg-mute); }
.sgact-ch b { font-weight: 600; color: var(--sg-ink); }
.sgact-by { display: grid; gap: 0.1rem; justify-items: end; text-align: right; font-size: 0.82rem; min-width: 0; }
.sgact-by-n { font-weight: 600; color: var(--sg-ink); overflow-wrap: anywhere; }
.sgact-ip { font-size: 0.72rem; color: var(--sg-mute); font-variant-numeric: tabular-nums; }
.sgact-more { text-align: center; }
@media (max-width: 760px) {
  .sgact-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .sgact-when { order: 2; grid-auto-flow: column; justify-content: start; gap: 0.6rem; }
  .sgact-main { order: 1; }
  .sgact-by { order: 3; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 0.6rem; }
  .sgact-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sgact [hidden], .sgem [hidden] { display: none !important; }
/* a placeholder must never read as a value ("No phone on file" looked like data in dark mode) */
.sgem .sg-input::placeholder, .sgact .sg-input::placeholder { color: var(--sg-mute); -webkit-text-fill-color: var(--sg-mute); opacity: 0.85; font-style: italic; }