/* ============================================================================
   The org app layer — sits OVER the kit (ui-kit.css). The MEMBER'S surface:
   fully brand-absorbed ("AGAME's app"), phone-first, follow-along first.
   Vocabulary: shell (top bar + bottom tabs → rail at 1024), the live-score
   hero, event rows, conversation rows + bubbles, team rows/roster, pools/
   standings tables, the bracket, kid chips/cards.

   Brand: --accent / --on-accent / --accent-ink are emitted per-tenant in
   shell.html — never defined here, never authored (computed contrast math).
   Brief: design/brief-mobileapp.md · Laws: ADR-005 (no inline styles, ever).
   ========================================================================= */

/* -- product type scale (same doctrine as MyHQ: 16 body, 13px floor) ------ */
.ma { font: 400 16px/1.55 var(--font-ui); background: var(--bg); color: var(--text); }
.ma-title { font: 700 28px/1.2 var(--font-ui); letter-spacing: -.01em; }
.ma-sub { font: 400 14px/1.5 var(--font-ui); color: var(--text-3); margin-top: 4px; }
.ma-eyebrow {
  display: block; margin-bottom: var(--s-3);
  font: 700 11.5px/1 var(--font-ui); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3);
}
.ma-narrow > section { margin-top: var(--s-6); }
.ma-narrow > section:first-of-type { margin-top: var(--s-5); }

/* -- shell ---------------------------------------------------------------- */
.ma-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ma-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  gap: var(--s-3); min-height: 56px; padding: 0 var(--s-4);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.ma-mark {
  width: 30px; height: 30px; border-radius: var(--r-1); flex: none;
  display: grid; place-items: center; font: 800 12px var(--font-ui);
  background: var(--accent); color: var(--on-accent);
}
.ma-mark-link { display: grid; text-decoration: none; border: 0; background: none; padding: 0; cursor: pointer; }
/* the demo switchboard (logo tap) — review scaffolding */
.ma-demo-group { margin-top: var(--s-3); padding: 0 var(--s-2); font: 700 11.5px var(--font-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.ma-demochips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-2) 0; }
.ma-demochip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4);
  border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--surface); text-decoration: none;
  font: 600 13.5px var(--font-ui); color: var(--text-2);
}
.ma-demochip[aria-current="true"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent-ink);
}
.ma-mark.is-img { width: 30px; height: 30px; border-radius: var(--r-1); background: none; object-fit: contain; }
.ma-org { font: 800 15px var(--font-ui); letter-spacing: .01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-top-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.ma-avatar {
  width: 34px; height: 34px; border-radius: var(--r-full); border: 0; cursor: pointer;
  display: grid; place-items: center; text-decoration: none;
  font: 700 12.5px var(--font-ui);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-ink);
}
.ma-main { flex: 1; padding: var(--s-5) var(--s-4) 96px; }
.ma-main.is-full { padding-bottom: var(--s-4); }
.ma-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  text-decoration: none; color: var(--text-2); font: 600 15px var(--font-ui);
  background: none; border: 0; cursor: pointer; padding: 0;
}

/* -- bottom tabs (phone) → left rail (desktop) ---------------------------- */
.ma-tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--border);
}
.ma-tab {
  flex: 1; min-height: 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; position: relative;
  color: var(--text-3); text-decoration: none;
  font: 600 11px var(--font-ui); transition: color var(--t-fast) var(--ease);
}
.ma-tab svg { width: 22px; height: 22px; }
.ma-tab[aria-current="page"] { color: var(--accent-ink); }
.ma-tab-badge {
  position: absolute; left: 50%; top: 6px; transform: translateX(6px);
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent);
  font: 800 10px/17px var(--font-ui); text-align: center;
}
.ma-press { transition: transform var(--t-fast) var(--ease); }
.ma-press:active { transform: scale(.98); }

/* -- the greeting's weather glyph ----------------------------------------- */
.ma-wx { vertical-align: -2px; color: var(--accent-ink); }

/* -- next up: hero cards, horizontally swipeable when there are several --- */
.ma-nextrow {
  display: flex; gap: var(--s-3); overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4);
}
.ma-nextrow::-webkit-scrollbar { display: none; }
.ma-nextrow .ma-next { flex: 0 0 86%; scroll-snap-align: start; position: relative; }
.ma-nextrow .ma-next:only-child { flex-basis: 100%; }
.ma-next-kid {
  position: absolute; top: var(--s-3); right: var(--s-3);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px 4px 4px; border-radius: var(--r-full);
  background: var(--surface-2); font: 700 12.5px var(--font-ui); color: var(--text-2);
}
.ma-next-kid .ma-av { width: 26px; height: 26px; font-size: 11px; }
.ma-next {
  display: block; padding: var(--s-4); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
}

/* -- the score ticker ------------------------------------------------------ */
.ma-ticker {
  display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4);
}
.ma-ticker::-webkit-scrollbar { display: none; }
.ma-tick {
  flex: none; min-width: 128px; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1); background: var(--surface);
  border: 1px solid var(--border); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 2px;
}
.ma-tick.is-mine { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ma-tick-row { display: flex; justify-content: space-between; gap: var(--s-3); }
.ma-tick-row .name { font: 700 12px var(--font-ui); letter-spacing: .02em; }
.ma-tick-row .pts { font: 800 12.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-tick-tag { font: 600 10.5px var(--font-ui); letter-spacing: .05em; color: var(--text-3); margin-top: 2px; }
.ma-tick.is-mine .ma-tick-tag { color: var(--accent-ink); }

/* -- important-messages count (the app-style red badge) -------------------- */
.ma-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 6px; border-radius: var(--r-full);
  background: var(--danger); color: #FAFAF9;
  font: 800 11px/1 var(--font-ui); letter-spacing: 0; vertical-align: -4px;
}

/* -- the week day-pills (dashboard scrubber into the Scheduler) ------------ */
.ma-daypills {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.ma-daypill {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 0 7px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none;
}
.ma-daypill.is-out { opacity: .45; }
.ma-daypill-dot { width: 5px; height: 5px; border-radius: var(--r-full); background: transparent; }
.ma-daypill-dot.is-on { background: var(--accent); }
.ma-daypill-num {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-full); font: 700 14px var(--font-ui);
  font-variant-numeric: tabular-nums; color: var(--text-2);
}
.ma-daypill-num.is-today { background: var(--accent); color: var(--on-accent); font-weight: 800; }

.ma-daypill-num.is-selected { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent-ink); font-weight: 800; }
.ma-day-label { font: 600 13px var(--font-ui); color: var(--text-3); margin-bottom: var(--s-3); }
.ma-viewall {
  display: block; margin-top: var(--s-3); padding: 13px; text-align: center;
  border-radius: var(--r-1); border: 1px solid var(--border);
  background: var(--surface); text-decoration: none;
  font: 600 14px var(--font-ui); color: var(--accent-ink);
}

/* -- eyebrow row with a right-aligned quiet action ------------------------- */
.ma-eyebrow-row { display: flex; align-items: baseline; justify-content: space-between; }
.ma-eyebrow-row .ma-eyebrow { margin-bottom: var(--s-3); }
.ma-eyebrow-act {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 12.5px var(--font-ui); color: var(--accent-ink); text-decoration: none;
}
.ma-next-time { display: flex; align-items: baseline; gap: var(--s-2); }
.ma-next-time time { font: 800 34px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.ma-next-time span { font: 600 13px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.ma-next-title { margin-top: var(--s-2); font: 700 17px/1.3 var(--font-ui); }
.ma-next-where { margin-top: 2px; font: 400 14px var(--font-ui); color: var(--text-2); }
.ma-next-note { margin-top: var(--s-3); font: 400 13px var(--font-ui); color: var(--text-3); }

/* -- photography: identity, not decoration — one banner per detail screen -- */
.ma-photo {
  margin-top: var(--s-4); border-radius: var(--r-2); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.ma-photo img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* -- needs-you cards (family STATES: waiver, balance, spots) -------------- */
.ma-attn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.ma-attn-card {
  padding: var(--s-4); border-radius: var(--r-2);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
}
.ma-attn-num { font: 700 24px/1 var(--font-ui); letter-spacing: -.02em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.ma-attn-label { font: 400 13px/1.35 var(--font-ui); color: var(--text-2); margin-top: 6px; }

/* -- generic list card ---------------------------------------------------- */
.ma-list {
  border-radius: var(--r-2); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1); overflow: hidden;
}
.ma-list > * { border-bottom: 1px solid var(--border); }
.ma-list > *:last-child { border-bottom: 0; }

/* -- event row (schedule + home) ------------------------------------------ */
.ma-ev {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 68px; padding: var(--s-3) var(--s-4);
  text-decoration: none; color: inherit;
}
.ma-ev-time { flex: none; width: 80px; }
.ma-ev-time time { display: block; font: 700 13.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-ev-time .ma-ev-kind { display: block; font: 600 11px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-top: 2px; }
.ma-ev-body { flex: 1; min-width: 0; }
.ma-ev-title { display: block; font: 600 15px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-ev-where { display: block; font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-ev-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* a list row that is a button (e.g. Settings' Appearance toggle) */
.ma-ev.is-btn { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
/* the card vault: its sections live inside the swap region, so the page's
   own section rhythm must be restated here (Lance 09-08: "update the spacing") */
#cards > section { margin-top: var(--s-6); }
#cards > section:first-child { margin-top: var(--s-5); }
#cards > .ma-ticketrow { margin-top: var(--s-5); }
/* card-vault row actions (Make primary / Remove) */
.ma-ev-side.is-row { flex-direction: row; align-items: center; gap: var(--s-2); }
.ma-cardact {
  min-height: 34px; padding: 0 var(--s-3); cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: var(--surface); font: 600 12.5px var(--font-ui); color: var(--accent-ink);
}
.ma-cardact.is-quiet { border-color: transparent; color: var(--text-3); }
.ma-ev-score { font: 800 15px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-pill {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-full);
  font: 700 11px/1.5 var(--font-ui); text-transform: uppercase; letter-spacing: .04em;
  background: var(--surface-2); color: var(--text-2);
}
.ma-pill.is-next { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); }
.ma-kid-dot {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 11.5px var(--font-ui); color: var(--accent-ink);
}

.ma-ev-state { display: block; font: 600 12.5px var(--font-ui); color: var(--accent-ink); margin-top: 3px; }

/* -- the org-branded wallet row (SketchPlay Bucks) ------------------------ */
.ma-bucks { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); text-decoration: none; color: inherit; }
.ma-bucks-bal { flex: none; font: 800 26px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.ma-bucks-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ma-bucks-body { flex: 1; min-width: 0; }
.ma-bucks-label { display: block; font: 600 14px var(--font-ui); }
.ma-bucks-add {
  flex: none; display: grid; place-items: center; min-height: 40px;
  padding: 0 var(--s-4); border-radius: var(--r-full); text-decoration: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink); font: 700 13.5px var(--font-ui);
}
.ma-seeall {
  display: block; padding: 13px var(--s-4); text-align: center;
  text-decoration: none; font: 600 14px var(--font-ui); color: var(--accent-ink);
}
/* wallet activity: credits wear the accent; running balance sits under;
   reasons wrap rather than truncate (a ledger must stay readable) */
.ma-list.is-wallet .ma-ev-title { white-space: normal; }
.ma-ev-score.is-credit { color: var(--accent-ink); }
.ma-ev-after { font: 500 12px var(--font-ui); color: var(--text-3); font-variant-numeric: tabular-nums; }
/* load-credit chips: one tap adds (charged to the saved card) */
.ma-addchips { display: flex; gap: var(--s-2); }
.ma-addchip {
  flex: 1 1 0; min-height: 52px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--surface); box-shadow: var(--shadow-1);
  font: 700 17px var(--font-ui); font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}

/* -- news rows (home: latest) --------------------------------------------- */
.ma-news {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); text-decoration: none; color: inherit;
}
.ma-news-icon {
  width: 34px; height: 34px; flex: none; border-radius: var(--r-1);
  display: grid; place-items: center; margin-top: 2px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
}
.ma-news-body { flex: 1; min-width: 0; }
.ma-news-title { display: block; font: 600 15px var(--font-ui); }
.ma-news-sub { display: block; font: 400 13px/1.4 var(--font-ui); color: var(--text-3); margin-top: 2px; }

/* -- kid chips: a LEFT-ALIGNED SCROLLER, never a stacked grid — one kid
      looks intentional, six kids scroll (Lance 09-07) -------------------- */
.ma-kidrow {
  display: flex; gap: var(--s-3); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4);
}
.ma-kidrow::-webkit-scrollbar { display: none; }
.ma-kidchip {
  flex: 0 0 112px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; padding: var(--s-4) var(--s-2);
  border-radius: var(--r-2); background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1); text-decoration: none; color: inherit;
}
.ma-av {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center; font: 700 14px var(--font-ui);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-ink);
}
.ma-kidchip-name { font: 600 14px var(--font-ui); }
.ma-kidchip-sub { font: 400 12.5px/1.35 var(--font-ui); color: var(--text-3); }

.ma-kidcard {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); text-decoration: none; color: inherit;
}
.ma-kidcard .ma-av { width: 52px; height: 52px; font-size: 16px; }
.ma-kidcard-body { flex: 1; min-width: 0; }
.ma-kidcard-name { display: block; font: 600 16px var(--font-ui); }
.ma-kidcard-sub { display: block; font: 400 13.5px var(--font-ui); color: var(--text-3); margin-top: 2px; }

/* -- the profile card (Household round): ONE skeleton, role-varied —
      the parent's card and the athlete's card are the same component ------- */
.ma-prof {
  padding: var(--s-4); border-radius: 18px; margin: 0;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.ma-prof-head { display: flex; align-items: center; gap: var(--s-3); }
.ma-av.is-prof { width: 64px; height: 64px; font-size: 20px; }
.ma-prof-id { flex: 1; min-width: 0; }
.ma-prof-name { font: 700 19px/1.25 var(--font-ui); letter-spacing: -.01em; }
.ma-prof-meta { font: 400 13.5px/1.4 var(--font-ui); color: var(--text-3); margin-top: 2px; }
.ma-dl {
  margin: var(--s-3) 0 0; padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.ma-dl > div { display: flex; gap: var(--s-3); align-items: baseline; }
.ma-dl dt { flex: none; width: 84px; font: 600 12.5px var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.ma-dl dd { min-width: 0; font: 500 14.5px/1.4 var(--font-ui); overflow-wrap: anywhere; }
.ma-prof-edit {
  flex: none; align-self: flex-start; min-height: 36px; padding: 0 var(--s-4);
  cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: var(--surface); font: 600 13.5px var(--font-ui); color: var(--text-2);
}
.ma-prof-fine { margin-top: var(--s-3); font: 400 13px/1.5 var(--font-ui); color: var(--text-3); }
.ma-prof-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); }
.ma-prof-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ma-prof-field.is-wide { grid-column: 1 / -1; }
.ma-formacts { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.ma-formacts .ma-cta { flex: 1; margin-top: 0; min-height: 48px; }
.ma-formacts .ma-deny { width: auto; margin-top: 0; padding: 0 var(--s-4); }

/* -- the message forms (Contact the org / App support) + sent panel -------- */
.ma-msgform { display: flex; flex-direction: column; gap: var(--s-2); }
.ma-msgbox { min-height: 120px; resize: vertical; }
.ma-sent {
  padding: var(--s-6) var(--s-4); border-radius: 18px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
}
.ma-sent-title { font: 700 17px var(--font-ui); }
.ma-sent-sub { font: 400 14px var(--font-ui); color: var(--text-3); }

/* -- notifications: category rows + per-channel chips (Opus spec 09-08) --- */
.ma-ngroup { padding: var(--s-4); }
.ma-ngroup.is-marketing { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.ma-ngroup-title { font: 600 15px var(--font-ui); }
.ma-ngroup-desc { font: 400 13.5px/1.5 var(--font-ui); color: var(--text-3); margin-top: 4px; }
.ma-chans { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.ma-chan {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-3); font: 600 13px var(--font-ui); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.ma-chan.is-on {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent-ink);
}
.ma-chan[disabled] { opacity: .4; cursor: default; }   /* dim, but memory shows */
.ma-nbanner {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
  border-radius: var(--r-2); background: var(--surface-2);
  font: 400 13px/1.5 var(--font-ui); color: var(--text-2);
}
.ma-nalways { padding: var(--s-4); }
.ma-nfine { margin-top: var(--s-3); font: 400 13px/1.55 var(--font-ui); color: var(--text-3); }
.ma-nfine.is-inset { margin: 0; padding: 0 var(--s-4) var(--s-3); }
/* the groups region carries its own section rhythm (it's a swap region) */
#ma-notif-groups > section { margin-top: var(--s-6); }

/* -- conversations + thread (same doctrine as MyHQ) ----------------------- */
.ma-conv {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-height: 72px;
  text-decoration: none; color: inherit;
}
.ma-conv-body { flex: 1; min-width: 0; }
.ma-conv-name { display: block; font: 600 15px var(--font-ui); }
.ma-conv-prev {
  display: block; font: 400 14px/1.35 var(--font-ui); color: var(--text-3);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-conv-meta {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  flex: none; align-self: flex-start; padding-top: 3px;
}
.ma-conv-time { font: 500 12px var(--font-ui); color: var(--text-3); }
.ma-unread {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent);
  font: 800 11px/20px var(--font-ui); text-align: center;
}
.ma-conv.is-unread .ma-conv-name { font-weight: 700; }
.ma-conv.is-unread .ma-conv-prev { color: var(--text-2); }

/* -- Messages tab: kind differentiation (square = community/group) --------- */
.ma-av.is-square { border-radius: var(--r-1); }
.ma-kindtag {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
  font: 700 10.5px var(--font-ui); letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-ink); vertical-align: 1px;
}

/* dialogs: the UA stylesheet paints dialog text browser-black (CanvasText),
   and our dark mode is data-theme-driven, not color-scheme — so every sheet
   went dark-on-dark (Lance 09-08). One rule, all dialogs. */
.ma dialog { color: var(--text); }

/* ==== the account sheet (menu study 09-07): a heavy surface — slow launch,
   long settle (--ease-sheet), the app RECEDES behind it, rows arrive with a
   30ms stagger, 1:1 drag-to-dismiss. No overshoot, no blur — weight. ======= */
.ma-shell {
  transition: transform 320ms var(--ease-sheet), border-radius 320ms var(--ease-sheet);
  transform-origin: 50% 0;
}
body.ma-receded .ma-shell {
  transform: scale(.94) translateY(-6px); border-radius: 18px; overflow: hidden;
}
.ma-usheet {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: none;
  /* six rows + header + footer: fits a 375×812 phone, but larger text sizes
     need the scroll insurance; contain keeps drag-to-dismiss reading right */
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-radius: 20px 20px 0 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface) 70%, #FFFFFF) inset, var(--shadow-2, var(--shadow-1));
  transform: translateY(100%);
  transition: transform var(--t-sheet) var(--ease-sheet);
}
.ma-usheet.is-open { transform: translateY(0); }
.ma-usheet.is-closing { transition: transform 200ms cubic-bezier(.4, 0, 1, 1); transform: translateY(100%); }
.ma-usheet::backdrop { background: rgb(10 10 15 / .42); opacity: 0; transition: opacity 180ms linear; }
.ma-usheet.is-open::backdrop { opacity: 1; }
.ma-usheet-grab { display: grid; place-items: center; padding: 10px 0 2px; cursor: grab; touch-action: none; }
.ma-usheet-grab i { width: 36px; height: 4px; border-radius: var(--r-full); background: var(--border-strong); }
.ma-usheet-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-height: 64px; touch-action: none;
}
.ma-usheet-head .ma-av { width: 56px; height: 56px; font-size: 17px; }
.ma-usheet-id { display: flex; flex-direction: column; }
.ma-usheet-id > span:first-child { font: 700 17px var(--font-ui); }
.ma-usheet-sub { font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 1px; }
.ma-usheet-rows { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-2) var(--s-4); }
.ma-urow {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: 0 var(--s-4); border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: inherit; font: 600 15.5px var(--font-ui);
}
.ma-usheet .ma-urow {
  opacity: 0; transform: translateY(10px);
  transition: opacity 200ms cubic-bezier(.2,.7,.3,1), transform 200ms cubic-bezier(.2,.7,.3,1);
}
.ma-urow > svg:first-child { color: var(--text-3); }
.ma-urow-chev { margin-left: auto; color: var(--text-3); }
.ma-usheet.is-open .ma-urow { opacity: 1; transform: none; }
.ma-usheet.is-open .ma-urow:nth-child(1) { transition-delay: 130ms; }
.ma-usheet.is-open .ma-urow:nth-child(2) { transition-delay: 160ms; }
.ma-usheet.is-open .ma-urow:nth-child(3) { transition-delay: 190ms; }
.ma-usheet.is-open .ma-urow:nth-child(4) { transition-delay: 220ms; }
.ma-usheet.is-open .ma-urow:nth-child(5) { transition-delay: 250ms; }
.ma-usheet.is-open .ma-urow:nth-child(6) { transition-delay: 280ms; }
.ma-urow.is-bucks {
  min-height: 76px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}
.ma-urow-bucks { display: flex; flex-direction: column; gap: 2px; }
.ma-urow-bucks-label { font: 700 12px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.ma-urow-bucks-bal { font: 800 28px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-usheet-out {
  display: block; width: 100%; min-height: 44px; margin: 0 0 calc(var(--s-4) + env(safe-area-inset-bottom));
  border: 0; background: none; cursor: pointer;
  font: 600 14px var(--font-ui); color: var(--text-3);
}
/* the quiet Sketchplay door — a different company answers this one */
.ma-usheet-fine {
  margin: var(--s-4) 0 0; padding-top: var(--s-3); text-align: center;
  border-top: 1px solid var(--border);
}
.ma-usheet-fine a {
  display: inline-block; min-height: 32px;
  font: 600 13px var(--font-ui); color: var(--text-3); text-decoration: none;
}
@media (min-width: 640px) {
  .ma-usheet { width: 420px; border-radius: var(--r-2); margin-bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ma-shell { transition: none; }
  body.ma-receded .ma-shell { transform: none; border-radius: 0; }
  .ma-usheet { transition: opacity 100ms linear; transform: none; opacity: 0; }
  .ma-usheet.is-open { opacity: 1; }
  .ma-usheet.is-closing { transform: none; opacity: 0; }
  .ma-urow { transition: none; opacity: 1; transform: none; }
  .ma-usheet.is-open .ma-urow { transition-delay: 0s; }
}

/* -- bottom sheet (compose) ------------------------------------------------- */
.ma-sheetdlg {
  border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: none;
  background: transparent;
}
.ma-sheetdlg::backdrop { background: rgb(10 10 15 / .45); }
.ma-sheet-body {
  background: var(--bg); border-radius: 18px 18px 0 0;
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: var(--s-2);
}
.ma-sheet-opt {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-2);
  background: var(--surface); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.ma-sheet-opt-title { display: block; font: 700 15.5px var(--font-ui); }
.ma-sheet-opt-sub { display: block; font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 1px; }
.ma-sheet-cancel {
  margin-top: var(--s-2); padding: 13px; border: 0; border-radius: var(--r-1);
  background: var(--surface-2); color: var(--text-2); cursor: pointer;
  font: 600 14.5px var(--font-ui);
}
@media (min-width: 640px) {
  .ma-sheetdlg { margin: auto; width: 420px; }
  .ma-sheet-body { border-radius: var(--r-2); }
}

/* -- pending peer-group invite (accept in place) ----------------------------- */
.ma-invite {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.ma-invite-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
.ma-invite-yes {
  padding: 8px 16px; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: 700 13px var(--font-ui);
}
.ma-invite-no {
  padding: 6px 16px; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: none; color: var(--text-3); font: 600 12.5px var(--font-ui);
}

/* -- member picker rows (new group) ----------------------------------------- */
.ma-pick {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-height: 60px; cursor: pointer;
}
.ma-pick input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }

/* -- the community wall (new posts at TOP — the law) ----------------------- */
.ma-wall { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
.ma-post {
  padding: var(--s-4); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.ma-post.is-pinned { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ma-post-pin { display: flex; align-items: center; gap: 5px; font: 700 11.5px var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: var(--s-3); }
.ma-post-head { display: flex; align-items: center; gap: var(--s-3); }
.ma-post-head .ma-av { width: 38px; height: 38px; font-size: 13px; }
.ma-post-who { font: 700 14.5px var(--font-ui); }
.ma-post-who time { display: block; font: 500 12px var(--font-ui); color: var(--text-3); margin-top: 1px; }
.ma-post-body { margin-top: var(--s-3); font: 400 15px/1.5 var(--font-ui); }
.ma-post-foot { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.ma-post-reacts { font: 600 13px var(--font-ui); color: var(--text-2); }
.ma-post-comments { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--font-ui); color: var(--text-3); }

.ma-thread { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-4); }
.ma-day {
  align-self: center; margin: var(--s-3) 0;
  font: 600 11.5px var(--font-ui); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3);
}
.ma-msg {
  max-width: 78%; align-self: flex-start; padding: 9px 13px;
  border-radius: var(--r-2); background: var(--surface-2);
}
.ma-msg-who { font: 700 12px var(--font-ui); color: var(--text-3); margin-bottom: 2px; }
.ma-msg-body { font: 400 15px/1.4 var(--font-ui); white-space: pre-wrap; }
.ma-msg-at { font: 500 11px var(--font-ui); color: var(--text-3); margin-top: 3px; text-align: right; }
.ma-msg.is-mine { align-self: flex-end; background: var(--accent); color: var(--on-accent); }
.ma-msg.is-mine .ma-msg-at { color: color-mix(in srgb, var(--on-accent) 65%, transparent); }
.ma-composer {
  position: sticky; bottom: 0; display: flex; gap: var(--s-2);
  padding: var(--s-3) 0; background: var(--bg); border-top: 1px solid var(--border);
}
.ma-composer .input { flex: 1; }
.ma-send {
  width: 48px; height: 48px; flex: none; border: 0; border-radius: var(--r-1);
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; cursor: pointer;
}
.ma-send svg { width: 20px; height: 20px; }

/* -- segmented control ----------------------------------------------------- */
.ma-seg {
  display: flex; gap: 2px; padding: 3px; border-radius: var(--r-full);
  background: var(--surface-2); overflow-x: auto;
}
.ma-seg > * {
  flex: 1; min-width: max-content; text-align: center; padding: 8px 14px;
  border: 0; border-radius: var(--r-full); cursor: pointer;
  font: 600 13.5px var(--font-ui); color: var(--text-2);
  background: none; text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ma-seg > [aria-current="true"], .ma-seg > [aria-selected="true"] {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-1);
}

/* -- teams ----------------------------------------------------------------- */
.ma-team {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); min-height: 76px;
  text-decoration: none; color: inherit;
}
.ma-team .ma-av { border-radius: var(--r-1); }
.ma-team-body { flex: 1; min-width: 0; }
.ma-team-name { display: block; font: 600 15px var(--font-ui); }
.ma-team-sub { display: block; font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-team-rec { flex: none; font: 700 14px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-2); }

.ma-roster-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4); min-height: 52px;
  text-decoration: none; color: inherit;
}
.ma-roster-n {
  width: 34px; flex: none; text-align: center;
  font: 800 14px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--accent-ink);
}
.ma-roster-name { flex: 1; font: 500 15px var(--font-ui); }
.ma-roster-row.is-mine .ma-roster-name { font-weight: 700; }
.ma-roster-pos { flex: none; font: 600 12.5px var(--font-ui); color: var(--text-3); }

/* -- tournament: match rows, standings, bracket ---------------------------- */
.ma-match {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
}
.ma-match-when { flex: none; width: 74px; }
.ma-match-when time { display: block; font: 700 13.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-match-when .ma-match-court { display: block; font: 500 11.5px var(--font-ui); color: var(--text-3); margin-top: 2px; }
.ma-match-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ma-match-team { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.ma-match-team .name { font: 500 14.5px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-match-team .pts { font: 700 14.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-match-team.is-mine .name { font-weight: 700; color: var(--accent-ink); }
.ma-match-status { flex: none; align-self: flex-start; }

/* -- the real match card (legacy read shape) ------------------------------- */
.ma-match2 {
  padding: var(--s-3) var(--s-4); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.ma-match2.is-mine { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.ma-match2-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.ma-match2-when { font: 700 13px var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ma-match2-team { display: flex; align-items: center; gap: var(--s-3); padding: 6px 0; }
.ma-match2-team .ma-av { width: 34px; height: 34px; font-size: 12px; }
.ma-match2-name { flex: 1; min-width: 0; font: 600 15px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-match2-name span { display: block; font: 400 13px var(--font-ui); color: var(--text-3); }
.ma-match2-team.is-us .ma-match2-name { color: var(--accent-ink); }
.ma-match2-score {
  flex: none; min-width: 40px; padding: 7px 0; text-align: center;
  border-radius: var(--r-1); background: var(--surface-2);
  font: 800 16px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-3);
}
.ma-match2-score.is-win { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); }
.ma-bgame-info { padding: 6px var(--s-3); font: 600 13px var(--font-ui); color: var(--text-3); background: var(--surface-2); }

/* -- the real score-entry contract ---------------------------------------- */
.ma-score-name span { display: block; font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 2px; }
.ma-score-in {
  width: 120px; margin: var(--s-3) auto 0; display: block;
  padding: var(--s-2); text-align: center; border-radius: var(--r-1);
  border: 1px solid var(--border-strong); background: var(--surface);
  font: 800 40px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text);
}
.ma-score-notify { border: 0; padding: var(--s-4); margin: 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s-3); }

.ma-standings { width: 100%; border-collapse: collapse; }
.ma-standings th {
  padding: 10px var(--s-3); text-align: left;
  font: 700 11.5px var(--font-ui); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.ma-standings td {
  padding: 11px var(--s-3); font: 500 14px var(--font-ui);
  border-bottom: 1px solid var(--border);
}
.ma-standings tr:last-child td { border-bottom: 0; }
.ma-standings .num { text-align: right; font-variant-numeric: tabular-nums; }
.ma-standings tr.is-mine td { font-weight: 700; }
.ma-standings tr.is-mine td:first-child { color: var(--accent-ink); }

/* bracket: rounds as columns inside ONE horizontal scroller (the page body
   never scrolls sideways); FULL viewport height so later rounds center
   against their feeders (Lance 09-07) */
.ma-bracket { overflow-x: auto; padding-bottom: var(--s-2); }
.ma-bracket-cols { display: flex; gap: var(--s-4); min-width: max-content; min-height: calc(100dvh - 420px); }
.ma-round { width: 230px; flex: none; display: flex; flex-direction: column; }
.ma-round-games { flex: 1; }
.ma-round-name { font: 700 12px var(--font-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-3); }
.ma-round-games { display: flex; flex-direction: column; gap: var(--s-3); justify-content: space-around; height: 100%; }
.ma-bgame {
  border-radius: var(--r-1); background: var(--surface);
  border: 1px solid var(--border); overflow: hidden;
}
.ma-bteam {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 9px var(--s-3); border-bottom: 1px solid var(--border);
}
.ma-bteam:last-child { border-bottom: 0; }
.ma-bteam .seed { flex: none; width: 26px; font: 700 11px var(--font-ui); color: var(--text-3); }
.ma-bteam .name { flex: 1; min-width: 0; font: 500 13.5px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-bteam .pts { flex: none; font: 700 13.5px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-bteam.is-mine .name { font-weight: 700; color: var(--accent-ink); }
.ma-bteam.is-tbd .name { color: var(--text-3); font-style: italic; }

/* -- the flyer art slot: 4:5, works for flyers AND logos ------------------- */
.ma-tourn-row { display: flex; align-items: flex-start; gap: var(--s-4); }
.ma-tourn-info { flex: 1; min-width: 0; }
.ma-flyer {
  flex: none; width: 96px; margin: 0;
  border-radius: var(--r-2); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.ma-flyer img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ma-flyer.is-logo img { object-fit: contain; padding: 12px; box-sizing: border-box; }

/* breathing room under the tournament segment bar */
#tourn-seg { padding-top: var(--s-4); }

/* -- tournament header ------------------------------------------------------ */
.ma-tourn-head { padding: var(--s-2) 0 0; }
.ma-tourn-my {
  margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-ink); font: 600 13.5px/1.45 var(--font-ui);
}

/* -- the ONE matchup row: date/time/court · A vs B · result ---------------- */
.ma-mrow { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-height: 64px; text-decoration: none; color: inherit; }
.ma-mrow-when { flex: none; width: 64px; display: flex; flex-direction: column; }
.ma-mrow-when time { font: 700 13px var(--font-ui); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-mrow-when span { font: 500 13px var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-mrow-mid { flex: 1; min-width: 0; }
.ma-mrow-vs { display: block; font: 600 14px/1.35 var(--font-ui); }
.ma-mrow-vs b { font: 700 11px var(--font-ui); color: var(--text-3); text-transform: uppercase; padding: 0 3px; }
.ma-mrow-court { display: block; font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-mrow-res { flex: none; font: 800 14px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-mrow-res.is-w { color: var(--accent-ink); }
.ma-mrow-res.is-l { color: var(--text-3); font-weight: 700; }
.ma-mrow-res.is-tbd { color: var(--text-3); font-weight: 600; }

/* -- the team hero: photo · identity · form · follow · next up -------------- */
.ma-teamhero {
  border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); overflow: hidden; margin-top: var(--s-3);
}
.ma-teamhero-photo { position: relative; margin: 0; }
.ma-teamhero-photo img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.ma-photo-edit.is-icon {
  top: var(--s-3); right: var(--s-3); bottom: auto;
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
}
.ma-photo-add {
  display: block; width: 100%; padding: var(--s-4); border: 0; cursor: pointer;
  background: var(--surface-2); text-align: left;
  font: 600 14.5px var(--font-ui); color: var(--text-2);
}
.ma-photo-add span { display: block; font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 2px; }
.ma-photo-add svg { vertical-align: -3px; margin-right: 6px; color: var(--text-3); }
.ma-teamhero-id {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
}
.ma-teambadge {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font: 800 15px var(--font-ui);
  border: 1px solid var(--border);
}
.ma-teamhero-stats { flex: 1; min-width: 0; }
.ma-teamhero-rec { display: block; font: 700 14.5px var(--font-ui); }
.ma-form { display: flex; gap: 6px; margin-top: 3px; }
.ma-form i { font: 800 13px var(--font-ui); font-style: normal; color: var(--text-3); }
.ma-form i.is-w { color: var(--accent-ink); }
.ma-teamhero-follow { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ma-follow {
  padding: 8px 18px; border-radius: var(--r-full); cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent;
  font: 700 13.5px var(--font-ui);
}
.ma-follow.is-on { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); }
.ma-followers { font: 500 12.5px var(--font-ui); color: var(--text-3); }
.ma-teamhero-next { padding: var(--s-3) var(--s-4) var(--s-4); }
.ma-teamhero-next .ma-eyebrow { display: flex; align-items: center; justify-content: space-between; }
.ma-next-kid.is-inline { position: static; }
.ma-teamhero-next .ma-next-time time { font-size: 28px; }
.ma-teamhero-next .ma-next-title { margin-top: 4px; }

/* roster/coach refinements */
.ma-plainlist { list-style: none; margin: 0; padding: 0; }
.ma-plainlist > li { border-bottom: 1px solid var(--border); }
.ma-plainlist > li:last-child { border-bottom: 0; }
.ma-roster-pos { width: 34px; text-align: right; flex: none; }
.ma-roster-chev { width: 18px; flex: none; color: var(--text-3); }
.ma-coach-act {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-full); color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  text-decoration: none;
}
.ma-eyebrow-tight { margin-top: var(--s-4); }
.ma-socialrow { display: flex; gap: var(--s-2); }
.ma-social-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--surface);
  border: 1px solid var(--border); color: var(--text-2); text-decoration: none;
}

/* -- team page: personal photo, coaches, socials ---------------------------- */
.ma-photo.is-team { position: relative; }
.ma-photo-empty { display: grid; place-items: center; aspect-ratio: 21 / 9; color: var(--text-3); background: var(--surface-2); }
.ma-photo-edit {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border: 0; border-radius: var(--r-full); cursor: pointer;
  background: rgb(10 10 15 / .62); color: #FAFAF9;
  font: 600 12.5px var(--font-ui);
}
.ma-coach { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); min-height: 64px; }
.ma-coach-body { flex: 1; min-width: 0; }
.ma-coach-name { display: block; font: 600 15px var(--font-ui); }
.ma-coach-contact { display: block; font: 400 13px var(--font-ui); color: var(--text-3); margin-top: 2px; }
.ma-coach-contact a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.ma-socials { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ma-social-chip {
  display: inline-flex; padding: 8px 14px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  font: 600 13px var(--font-ui); color: var(--text); text-decoration: none;
}

/* -- tickets (buy · store · show at the gate) ------------------------------ */
.ma-ticket {
  border-radius: var(--r-2); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  padding: var(--s-5); text-align: center;
}
.ma-ticket-event { font: 700 18px var(--font-ui); }
.ma-ticket-when { font: 400 13.5px var(--font-ui); color: var(--text-3); margin-top: 2px; }
.ma-ticket-kind { display: inline-block; margin-top: var(--s-2); padding: 3px 12px; border-radius: var(--r-full); font: 700 12px var(--font-ui); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-ink); }
.ma-ticket-qr { margin-top: var(--s-4); }
.ma-ticket-qr img { width: 190px; height: 190px; border-radius: var(--r-1); border: 1px solid var(--border); background: #FFFFFF; padding: 8px; }
.ma-ticket-code { font: 700 14px var(--font-ui); letter-spacing: .12em; margin-top: var(--s-2); font-variant-numeric: tabular-nums; }
.ma-ticket-hint { font: 400 12.5px var(--font-ui); color: var(--text-3); margin-top: var(--s-3); }
.ma-ticketrow { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.ma-ticket-chip {
  flex: 1 1 0; justify-content: center;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-radius: var(--r-full); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  font: 600 13.5px var(--font-ui); color: var(--text);
}
.ma-ticket-chip svg { color: var(--accent-ink); }
.ma-ticket-chip.is-buy { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ma-ticket-chip.is-buy svg { color: var(--on-accent); }

/* tournament segment filters (search + team + division/age) */
.ma-tourn-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.ma-tourn-filters > input[type="search"] { flex: 1 1 100%; }
.ma-tourn-filters .selectwrap { flex: 1 1 0; min-width: 0; }
.ma-tourn-filters > .input { flex: 1 1 0; min-width: 0; width: auto; }

/* -- scorekeeper: courtside speed (giant targets, zero chrome) ------------- */
.ma-score { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.ma-score-team {
  border-radius: var(--r-2); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  padding: var(--s-4); text-align: center;
}
.ma-score-name { font: 700 16px var(--font-ui); }
.ma-score-pts { font: 800 56px/1 var(--font-ui); font-variant-numeric: tabular-nums; margin-top: var(--s-2); color: var(--accent-ink); }
.ma-score-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-4); }
.ma-score-add, .ma-score-minus {
  min-height: 60px; border: 0; border-radius: var(--r-1); cursor: pointer;
  font: 800 20px var(--font-ui);
  background: var(--accent); color: var(--on-accent);
}
.ma-score-minus { background: var(--surface-2); color: var(--text-2); }
.ma-score-open {
  display: inline-block; padding: 8px 16px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font: 700 13px var(--font-ui);
}

/* -- the calendar (Option B: strip ⇄ month grid, a scrubber over the agenda) */
.ma-cal { background: var(--bg); padding-bottom: var(--s-2); }
.ma-cal-monthrow { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: var(--s-2); }
.ma-cal-title {
  display: inline-flex; align-items: center; gap: 6px;
  font: 800 18px var(--font-ui); letter-spacing: -.01em; color: var(--text);
  text-decoration: none;
}
.ma-cal-chev { color: var(--text-3); transition: transform var(--t-fast) var(--ease); }
.ma-cal-chev.is-open { transform: rotate(180deg); }
.ma-cal-arrow {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--text-3); text-decoration: none;
}
/* fixture world holds one month — adjacent-month arrows honestly disabled */
.ma-cal-arrow.is-off { opacity: .3; }
.ma-cal-arrow-flip { display: grid; transform: scaleX(-1); }
.ma-cal-dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
  margin-bottom: var(--s-2);
}
.ma-cal-dow span { text-align: center; font: 700 11px var(--font-ui); letter-spacing: .04em; color: var(--text-3); }
.ma-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.ma-cell {
  min-height: 54px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding-top: 4px; border-radius: var(--r-1);
}
.ma-cell.is-out { opacity: .35; }
.ma-cell-num {
  width: 30px; height: 30px; display: grid; place-items: center;
  font: 600 15px var(--font-ui); font-variant-numeric: tabular-nums;
  border-radius: var(--r-full);
}
/* soft-fill language: no outlines, no rings (Lance 09-07) */
.ma-cell-num.has-events { background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent-ink); font-weight: 700; }
.ma-cell-num.has-needs { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-ink); font-weight: 700; }
.ma-cell-num.is-past { background: var(--surface-2); color: var(--text-3); }
.ma-cell-num.is-selected { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent-ink); font-weight: 800; }
.ma-cell-num.is-today { background: var(--accent); color: var(--on-accent); font-weight: 800; }
.ma-cell-dots { display: flex; gap: 3px; min-height: 5px; }
.ma-cell-dots i { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--text-3); }
.ma-cell-dots i.is-hollow { background: none; border: 1px solid var(--text-3); box-sizing: border-box; }

/* -- calendar v2: the day as a moment, events as soft cards ---------------- */
.ma-day-hero { font: 800 30px/1.1 var(--font-ui); letter-spacing: -.015em; margin-bottom: var(--s-4); }
.ma-day-hero span { display: block; margin-top: 4px; font: 400 14px/1.4 var(--font-ui); color: var(--text-3); letter-spacing: 0; }
.ma-dayblock { margin-top: var(--s-6); }
.ma-cards { display: flex; flex-direction: column; gap: var(--s-3); }
.ma-evc {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-4); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.ma-evc-link { display: flex; align-items: flex-start; gap: var(--s-3); flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.ma-evc-pin {
  flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0;
  display: grid; place-items: center; border: 0; border-radius: var(--r-full);
  background: none; color: var(--text-3); cursor: pointer;
}
.ma-evc-pin.is-on { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ma-evc.is-game { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); }
.ma-evc-icon {
  width: 40px; height: 40px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent-ink);
}
.ma-evc-body { flex: 1; min-width: 0; }
.ma-evc-meta { display: block; font: 600 13px var(--font-ui); color: var(--text-3); }
.ma-evc-meta time { color: var(--accent-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ma-evc-title { display: block; font: 700 16.5px/1.3 var(--font-ui); margin-top: 3px; }
.ma-evc-where { display: block; font: 400 13.5px var(--font-ui); color: var(--text-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-evc-state { display: inline-block; margin-top: var(--s-2); padding: 3px 10px; border-radius: var(--r-full); font: 700 13px var(--font-ui); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); }
.ma-evc-side { flex: none; align-self: flex-start; padding-top: 2px; }

/* -- event detail: the friendly-date hero ---------------------------------- */
.ma-evd-hero { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--s-3) 0 var(--s-5); }
.ma-evd-date { font: 800 34px/1.05 var(--font-ui); letter-spacing: -.02em; color: var(--accent-ink); }
.ma-evd-date span { display: block; margin-top: 4px; font: 600 16px var(--font-ui); color: var(--text-2); letter-spacing: 0; }
.ma-evd-icon {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-ink);
}
.ma-evd-card {
  border-radius: 18px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-1); padding: var(--s-5);
}
.ma-evd-title { font: 700 21px/1.25 var(--font-ui); letter-spacing: -.01em; }
.ma-evd-rows { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.ma-evd-rows div { display: flex; gap: var(--s-3); align-items: flex-start; }
.ma-evd-rows dt { flex: none; color: var(--text-3); padding-top: 1px; }
.ma-evd-rows dd { font: 500 15.5px/1.45 var(--font-ui); }
.ma-evd-rows dd.is-state { color: var(--accent-ink); font-weight: 700; }
.ma-evd-rows dd time { font-variant-numeric: tabular-nums; }

/* the contact sheet */
.ma-cellsheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.ma-cellspec { margin: 0; text-align: center; }
.ma-cellspec-box {
  display: grid; place-items: center; min-height: 76px;
  border-radius: var(--r-1); background: var(--surface); border: 1px solid var(--border);
}
.ma-cellspec-box .ma-cell { width: 47px; }
.ma-cellspec figcaption { margin-top: 6px; font: 500 12.5px/1.3 var(--font-ui); color: var(--text-3); }

/* -- sparse-schedule lanes (09-07 consult): series, bridge, discover -------- */
.ma-series {
  display: block; padding: var(--s-4); border-radius: 18px; margin-top: var(--s-3);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  text-decoration: none; color: inherit;
}
.ma-series-title { display: block; font: 700 16.5px var(--font-ui); }
.ma-series-rhythm { display: block; font: 400 14px var(--font-ui); color: var(--text-2); margin-top: 3px; }
.ma-series-prog { display: block; font: 600 13px var(--font-ui); color: var(--accent-ink); margin-top: var(--s-2); }
.ma-series-rail { display: flex; gap: 4px; margin-top: var(--s-3); }
.ma-series-rail i { flex: 1; height: 4px; border-radius: var(--r-full); background: var(--surface-2); }
.ma-series-rail i.is-done { background: var(--accent); }

.ma-bridge {
  display: block; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius: 18px; border: 1px solid var(--border); background: var(--surface);
  border-left: 3px solid var(--accent);
  text-decoration: none; color: inherit;
}
.ma-bridge-label { display: block; font: 700 11.5px var(--font-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); }
.ma-bridge-title { display: block; font: 700 16.5px var(--font-ui); margin-top: 4px; }
.ma-bridge-when { display: block; font: 400 14px var(--font-ui); color: var(--text-2); margin-top: 2px; }
.ma-bridge-state { display: block; font: 600 13px var(--font-ui); color: var(--accent-ink); margin-top: var(--s-2); }

/* discover: different physics — dashed, no shadow, no tint; Register is
   the ONLY accent; a card with a button is something you don't have */
.ma-disclane { margin-top: var(--s-6); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.ma-disclane-note { font: 400 13px var(--font-ui); color: var(--text-3); margin-bottom: var(--s-3); }
.ma-disc {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: 18px; margin-bottom: var(--s-3);
  border: 1px dashed var(--border-strong); background: none;
}
.ma-disc-body { flex: 1; min-width: 0; }
.ma-disc-state { display: inline-block; margin-top: var(--s-2); padding: 3px 10px; border-radius: var(--r-full); font: 700 13px var(--font-ui); border: 1px solid var(--border-strong); color: var(--text-2); }
.ma-disc-cta {
  flex: none; display: grid; place-items: center; min-height: 44px; padding: 0 var(--s-4);
  border: 0; border-radius: var(--r-1); cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; font: 700 14px var(--font-ui);
}
.ma-season { margin-top: var(--s-6); padding: var(--s-4); border-radius: var(--r-2); background: var(--surface-2); font: 400 14px/1.5 var(--font-ui); color: var(--text-2); }

/* -- QUICK registration: the STEPPED sheet — pager panels, sticky truth
      footer; the body scrolls, the frame doesn't ------------------------- */
.ma-qr-scrim { position: fixed; inset: 0; z-index: 45; background: rgb(10 10 15 / .42); cursor: pointer; }
.ma-qr-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-height: 88dvh; overflow: hidden;
  display: flex; flex-direction: column;
  /* top air like the auth sheets (Lance: space is important) */
  padding: var(--s-8) var(--s-4) 0;
  background: var(--bg); border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-2, var(--shadow-1)); color: var(--text);
}
.ma-qr-sheet form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ma-qr-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: var(--s-4);
}
.ma-qr-back {
  flex: none; width: 40px; height: 40px; border: 0; background: none;
  color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-inline-start: calc(var(--s-2) * -1);
}
.ma-qr-dots {
  display: flex; gap: var(--s-2); justify-content: center;
  list-style: none; padding: 0; margin: 0 0 var(--s-5);
}
.ma-qr-dots li { width: 8px; height: 8px; border-radius: var(--r-full); border: 1.5px solid var(--border-strong); }
.ma-qr-dots li.is-done { background: var(--border-strong); border-color: transparent; }
.ma-qr-dots li.is-now { width: 22px; background: var(--accent); border-color: transparent; }
@keyframes qr-fwd { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qr-back { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.ma-qr-step.is-fwd { animation: qr-fwd 160ms var(--ease); }
.ma-qr-step.is-back { animation: qr-back 160ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .ma-qr-step.is-fwd, .ma-qr-step.is-back { animation: none; } }
.ma-qr-steptitle { font: 800 18px/1.3 var(--font-ui); margin-bottom: var(--s-2); outline: none; }
@media (min-width: 640px) { .ma-qr-sheet { left: auto; right: auto; width: 480px; margin: 0 auto; inset-inline: 0; } }
.ma-qr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.ma-qr-id { min-width: 0; }
.ma-qr-title { font: 700 19px/1.25 var(--font-ui); letter-spacing: -.01em; }
.ma-qr-meta { font: 400 13.5px var(--font-ui); color: var(--text-3); margin-top: 2px; }
.ma-qr-note { font: 400 14px/1.5 var(--font-ui); color: var(--text-2); margin-bottom: var(--s-3); }
.ma-qr-kids { display: flex; flex-direction: column; gap: var(--s-2); }
.ma-qr-kid { position: relative; }
.ma-qr-kid input { position: absolute; opacity: 0; pointer-events: none; }
.ma-qr-kidrow {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 64px; padding: var(--s-2) var(--s-3); border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.ma-qr-kidname { flex: 1; min-width: 0; font: 600 15.5px var(--font-ui); }
.ma-qr-kidname span { display: block; font: 400 13px var(--font-ui); color: var(--text-3); }
.ma-qr-tick { color: transparent; }
.ma-qr-kid:has(input:checked) .ma-qr-kidrow {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ma-qr-kid:has(input:checked) .ma-qr-tick { color: var(--accent-ink); }
/* stage C: pricing options — set-everyone rows + the per-kid select */
.ma-qr-note.is-stage { margin-top: var(--s-5); }
.ma-qr-opts { display: flex; flex-direction: column; gap: var(--s-2); }
.ma-qr-opt { position: relative; }
.ma-qr-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ma-qr-optrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 56px; padding: var(--s-2) var(--s-3); border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.ma-qr-optname { font: 600 15px var(--font-ui); }
.ma-qr-optname span { display: block; font: 400 13px var(--font-ui); color: var(--text-3); }
.ma-qr-optprice { font: 700 15.5px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.ma-qr-opt:has(input:checked) .ma-qr-optrow {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ma-qr-optrow.is-out { opacity: .5; cursor: default; }
.ma-qr-optrow.is-out .ma-qr-optprice { color: var(--text-3); }
.ma-qr-optwrap { flex: none; width: 128px; }
.ma-qr-kidopt { font-size: 13.5px; min-height: 40px; }
/* stage D: per-athlete FieldSpec fields */
.ma-qr-fields { border: 1px solid var(--border); border-radius: 14px; padding: var(--s-3) var(--s-4) var(--s-4); margin: 0 0 var(--s-3); display: flex; flex-direction: column; gap: 4px; }
.ma-qr-fields-kid { padding: 0 var(--s-2); font: 700 14px var(--font-ui); }
.ma-qr-help { font: 400 13px/1.45 var(--font-ui); color: var(--text-3); margin-top: 2px; }
/* stage B: insurance rows (also reused for the Bucks/card rows in PAY) */
.ma-qr-inslist, .ma-qr-cardlist { display: flex; flex-direction: column; gap: var(--s-2); }
.ma-qr-ins { position: relative; display: block; margin-top: var(--s-2); }
.ma-qr-ins input { position: absolute; opacity: 0; pointer-events: none; }
.ma-qr-insrow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 56px; padding: var(--s-2) var(--s-3); border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.ma-qr-insname { font: 600 14.5px var(--font-ui); min-width: 0; }
.ma-qr-insname span { display: block; font: 400 13px/1.4 var(--font-ui); color: var(--text-3); }
.ma-qr-insquote { flex: none; font: 700 15px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.ma-qr-ins:has(input:checked) .ma-qr-insrow {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ma-qr-address { margin-top: var(--s-3); display: flex; flex-direction: column; gap: 4px; }
.ma-qr-addrrow { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-2); }
.ma-qr-addrrow > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* the waiver line — agreement is a recorded act */
.ma-qr-waiver { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-4); cursor: pointer; }
.ma-qr-waiver input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 2px; }
.ma-qr-waivertext { font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); }
.ma-auth-link.is-btn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
/* protection panels: provider-authored coverage bullets + legal line */
.ma-qr-cov { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.ma-qr-cov li { display: flex; gap: var(--s-2); font: 400 13.5px/1.45 var(--font-ui); color: var(--text-2); }
.ma-qr-cov svg { color: var(--accent-ink); flex: none; margin-top: 2px; }
.ma-qr-covlink { min-height: 44px; border: 0; background: none; padding: 0; cursor: pointer; font: 600 13.5px var(--font-ui); color: var(--accent-ink); }
.ma-qr-legal { font: 400 13px/1.5 var(--font-ui); color: var(--text-3); margin-top: var(--s-4); }
.ma-qr-ins.is-kid .ma-av { flex: none; }
.ma-qr-ins.is-kid .ma-qr-insname { flex: 1; }

/* the payment-method pill: the chosen method alone + "Change"; tapping
   opens the full chooser (cards, Apple Pay, ACH — one grammar) */
.ma-qr-methods { display: flex; flex-direction: column; gap: var(--s-2); }
.ma-qr-methods.is-collapsed .ma-qr-ins:not(:has(input:checked)) { display: none; }
.ma-qr-change { flex: none; font: 600 13px var(--font-ui); color: var(--accent-ink); display: none; }
.ma-qr-methods.is-collapsed .ma-qr-ins:has(input:checked) .ma-qr-change { display: block; }
/* a method the insurer refuses (Cash App + protection) dims, never hides */
.ma-qr-ins.is-out { opacity: .5; pointer-events: none; }
/* pack XOR discount: the blocked code field reads as blocked */
.ma-qr-step .input.is-out, .ma-qr-step .ma-auth-label.is-out { opacity: .5; }

/* the pay footnotes: quiet, centered, AIR above and below (the space law:
   --s-5 between zones, --s-6 before the terminal act) */
.ma-qr-notes {
  margin: var(--s-5) auto var(--s-6); max-width: 42ch;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.ma-qr-notes p { font: 400 13px/1.6 var(--font-ui); color: var(--text-3); text-align: center; }

/* PAY: the receipt is the itemization (ledger = split, button = total due) */
.ma-qr-receipt { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-2); background: var(--surface-2); margin-bottom: var(--s-5); }
.ma-qr-rrow { display: flex; justify-content: space-between; gap: var(--s-3); font: 400 13.5px var(--font-ui); font-variant-numeric: tabular-nums; margin: 0; }
.ma-qr-rrow.is-off b { color: var(--accent-ink); }
.ma-qr-rrow.ma-qr-rtotal { border-top: 1px solid var(--border); padding-top: var(--s-2); font-weight: 800; font-size: 16px; }

/* the sticky truth footer: ledger + acts, on every step */
.ma-qr-foot {
  position: sticky; bottom: 0; z-index: 2;
  padding: var(--s-3) 0 calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--bg);
  box-shadow: 0 -1px 0 var(--border), 0 -12px 16px -12px rgb(0 0 0 / .18);
}
.ma-qr-ledger { text-align: center; font: 600 13px var(--font-ui); color: var(--text-2); font-variant-numeric: tabular-nums; min-height: 18px; margin-bottom: var(--s-2); }
.ma-qr-acts { display: flex; gap: var(--s-2); }
.ma-qr-acts .ma-cta { flex: 1; margin-top: 0; }
.ma-qr-skip {
  flex: 0 0 38%; min-height: 52px; border-radius: var(--r-1);
  border: 1px solid var(--border-strong); background: var(--surface);
  font: 700 15px var(--font-ui); color: var(--text-2); cursor: pointer;
}
.ma-qr-fine { margin-top: var(--s-3); text-align: center; font: 400 13px/1.5 var(--font-ui); color: var(--text-3); }

/* -- honest coming/empty state --------------------------------------------- */
.ma-empty {
  padding: var(--s-6) var(--s-4); text-align: center;
  color: var(--text-3); font: 400 14px/1.5 var(--font-ui);
}

/* -- powered-by (quiet, Family screen) ------------------------------------- */
.ma-powered {
  margin-top: var(--s-8); text-align: center;
  font: 600 12px var(--font-ui); color: var(--text-3);
}

/* -- the arrival journey on the kit's sign-in family (phone sign-in B6) ----
   The poster and register wear .signin* from the kit (one implementation
   with SKP ID's club page). The app's own domain has no SKP ID footer, so
   its sheet keeps the bottom air the footer gave (Lance liked that space). */
.signin.is-app .signin-sheet { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); }
/* register: Just me hides the athletes and swaps the button (one form) */
.ma-reg .ma-reg-me { display: none; }
.ma-reg:has(input[name="who"][value="me"]:checked) .ma-reg-athletes,
.ma-reg:has(input[name="who"][value="me"]:checked) .ma-reg-family { display: none; }
.ma-reg:has(input[name="who"][value="me"]:checked) .ma-reg-me { display: flex; }
.ma-reg-athletes .signin-athlete + .signin-athlete { margin-top: var(--s-2); }
.ma-reg-add { display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start; min-height: 44px; font-size: 14px; }

/* -- form pieces the app's screens share (born in the arrival journey) ----- */
.ma-auth-form { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.ma-auth-label { font: 700 12.5px var(--font-ui); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-3); margin-top: var(--s-3); }
.ma-cta {
  margin-top: var(--s-4); min-height: 52px; border: 0; border-radius: var(--r-1);
  display: grid; place-items: center; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
  font: 700 16px var(--font-ui);
}
.ma-cta[disabled] { opacity: .45; cursor: default; }
.ma-auth-fine { margin-top: var(--s-4); font: 400 13px/1.5 var(--font-ui); color: var(--text-3); }
.ma-auth-fine.is-center { text-align: center; }

/* -- the claim deny path: real target, zero visual weight ------------------- */
.ma-deny {
  display: block; width: 100%; min-height: 44px; margin-top: var(--s-2);
  border: 0; background: none; cursor: pointer;
  font: 600 14.5px var(--font-ui); color: var(--text-2); text-align: center;
}
.ma-sheet-title { font: 800 18px var(--font-ui); letter-spacing: -.015em; padding: var(--s-2) var(--s-2) 0; }
.ma-sheet-note { font: 400 13.5px var(--font-ui); color: var(--text-3); padding: 2px var(--s-2) var(--s-2); }

/* -- the "make this yours" setup card (household_intent = pending) ---------- */
.ma-setup {
  padding: var(--s-4); border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid var(--border);
}
.ma-setup-title { font: 700 16px var(--font-ui); }
.ma-setup-sub { font: 400 13.5px/1.45 var(--font-ui); color: var(--text-2); margin-top: 4px; }
.ma-setup-acts { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.ma-setup-cta {
  display: inline-grid; place-items: center; min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-1); background: var(--accent); color: var(--on-accent);
  text-decoration: none; font: 700 14.5px var(--font-ui);
}
.ma-setup-later { font: 600 13.5px var(--font-ui); color: var(--text-3); background: none; border: 0; cursor: pointer; }
.ma-auth-link { color: var(--accent-ink); font-weight: 600; }
.ma-claim-check {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink);
}
.ma-auth-athletes { border: 0; padding: 0; margin: var(--s-3) 0 0; }
.ma-auth-athletes legend { padding: 0; margin-bottom: var(--s-2); }

/* month-grid cells navigate when the Scheduler grid is open */
.ma-cellwrap { display: block; text-decoration: none; color: inherit; }

/* ==== the stat room (slice 1, 09-08): courtside speed — big targets, BOTH
   teams (D1: full dual-roster), fixed action pad, one giant Undo. Team
   colors are ARTWORK, injected per-page as --sr-a/--sr-b (+ computed inks).
   SPACE IS THE RULE (Lance): --s-2 inside a component, --s-4 inside a
   panel, --s-5 between zones, --s-6 before a terminal act. --s-3 is NEVER
   a structural gap. ==== */
.ma-sr { padding-bottom: var(--s-6); }
.ma-sr-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.ma-sr-sync { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--font-ui); color: var(--text-3); }
.ma-sr-sync i { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); animation: sr-pulse 2s ease-in-out infinite; }
@keyframes sr-pulse { 50% { opacity: .35; } }
.ma-sr-topacts { display: flex; align-items: center; gap: var(--s-2); }
.ma-sr-quiet {
  min-height: 36px; padding: 0 var(--s-3); cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: var(--surface); font: 600 13px var(--font-ui); color: var(--text-2);
}
.ma-sr-quiet.is-end { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.ma-sr-quiet.is-alert { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

/* ---- the Edit-roster drawer (AGAME feedback 09-15) ---- */
.ma-sr-roster { display: flex; flex-direction: column; gap: var(--s-3); }
.ma-sr-rrow { padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
.ma-sr-rrow.is-new { border-bottom: 0; }
.ma-sr-redit { display: flex; align-items: center; gap: var(--s-2); }
.ma-sr-rnum { flex: 0 0 64px; text-align: center; font-variant-numeric: tabular-nums; }
.ma-sr-rname { flex: 1 1 auto; min-width: 0; }
.ma-sr-rdrop { flex: none; display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--r-full); color: var(--text-3); }
.ma-sr-rdrop input { position: absolute; opacity: 0; pointer-events: none; }
.ma-sr-rdrop span[aria-hidden] { font: 600 18px var(--font-ui); line-height: 1; }
.ma-sr-rrow:has([name=drop]:checked) .ma-sr-rdrop { color: var(--danger); border-color: var(--danger); }
.ma-sr-rrow:has([name=drop]:checked) .input { opacity: .4; text-decoration: line-through; }
.ma-sr-rwaiver { margin: var(--s-2) 0 0; font: 600 13px var(--font-ui); }
.ma-sr-rwaiver.is-ok { display: flex; align-items: center; gap: var(--s-1); color: var(--text-3); }
.ma-sr-rsign { margin-top: var(--s-2); }
.ma-sr-rsign summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); cursor: pointer; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); border-radius: var(--r-full); font: 600 13px var(--font-ui); color: var(--danger); list-style: none; }
.ma-sr-rsign summary::-webkit-details-marker { display: none; }
.ma-sr-rsign-body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) 0 var(--s-2); }
.ma-sr-rosterlink { margin-top: var(--s-4); align-self: flex-start; }

/* scoreboard — sticky: the score never leaves while the pad covers the rest */
.ma-sr-score {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  position: sticky; top: 56px; z-index: 12;
  padding: var(--s-4) 0 var(--s-5); background: var(--bg);
}
.ma-sr-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; }
.ma-sr-team b {
  padding: 2px 10px; border-radius: var(--r-full);
  font: 800 12px var(--font-ui); letter-spacing: .06em;
}
/* the contrast floor (StatKeeper design lab's own warning): a muddy team
   color still reads as a chip in dark mode */
.ma-sr-team b, .ma-sr-panel-name i, .ma-sr-play-dot { box-shadow: 0 0 0 1px var(--border-strong); }
.ma-sr-team.is-a b { background: var(--sr-a); color: var(--sr-a-ink); }
.ma-sr-team.is-b b { background: var(--sr-b); color: var(--sr-b-ink); }
.ma-sr-team strong { font: 800 48px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-sr-periods { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); min-width: 0; }
.ma-sr-period {
  min-width: 44px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); font: 700 13px var(--font-ui); color: var(--text-3);
}
.ma-sr-period.is-now { background: var(--accent); border-color: transparent; color: var(--on-accent); }

/* ticker: last play + Undo, or the chain prompt */
.ma-sr-ticker {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  min-height: 60px; padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  background: var(--surface); border: 1px solid var(--border);
}
/* teaching voice: centred + dashed, replaced by the first real play (N=1) */
.ma-sr-ticker.is-guide {
  justify-content: center; text-align: center;
  background: var(--surface-2); border-style: dashed;
}
.ma-sr-guide { font: 600 14px/1.4 var(--font-ui); color: var(--text-2); }
.ma-sr-ticker.is-prompt { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.ma-sr-last { flex: 1; min-width: 0; font: 600 14px var(--font-ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-sr-undo {
  min-height: 44px; padding: 0 var(--s-5); cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--r-full);
  background: var(--surface-2); font: 800 14px var(--font-ui); color: var(--text);
}
.ma-sr-undo[disabled] { opacity: .4; cursor: default; }
.ma-sr-ticker-label { font: 800 13px var(--font-ui); letter-spacing: .04em; color: var(--accent-ink); }
.ma-sr-pnum {
  min-width: 48px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--border-strong); border-bottom-width: 3px;
  border-radius: 12px; background: var(--surface);
  font: 800 14px var(--font-ui); font-variant-numeric: tabular-nums;
}
.ma-sr-pnum.is-a { border-bottom-color: var(--sr-a); }
.ma-sr-pnum.is-b { border-bottom-color: var(--sr-b); }
.ma-sr-pnum.is-none { font-weight: 600; color: var(--text-3); border-bottom-width: 1px; }

/* the two team panels — stacked on phone, side by side at 768 */
.ma-sr-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 768px) { .ma-sr-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ma-sr-panel { padding: var(--s-4); border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
@media (min-width: 480px) { .ma-sr-panel { padding: var(--s-5); } }
.ma-sr-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.ma-sr-panel-name { display: flex; align-items: center; gap: 7px; margin-bottom: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px var(--font-ui); letter-spacing: .03em; }
.ma-sr-quiet[disabled] { opacity: .45; cursor: default; }
.ma-sr-panel-name i { width: 10px; height: 10px; border-radius: 3px; }
.ma-sr-panel.is-a .ma-sr-panel-name i { background: var(--sr-a); }
.ma-sr-panel.is-b .ma-sr-panel-name i { background: var(--sr-b); }
.ma-sr-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.ma-sr-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 96px; padding: var(--s-2) 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
/* foul trouble is the one thing a taker must see without asking */
.ma-sr-tile.is-trouble {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-2));
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
}
@media (min-width: 480px) {
  .ma-sr-tile { min-height: 108px; }
  .ma-sr-tile b { font-size: 32px; }
  .ma-sr-tile span { font-size: 14px; }
}
.ma-sr-tile b { font: 800 28px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-sr-tile span { max-width: 100%; font: 600 13px var(--font-ui); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-sr-tile i { font: 600 13px var(--font-ui); font-style: normal; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* forced starters check-in (can't log until five are on — the +/- law) */
.ma-sr-starters-note { font: 400 13.5px/1.5 var(--font-ui); color: var(--text-2); margin-bottom: var(--s-2); }
.ma-sr-starters { display: flex; flex-direction: column; }
.ma-sr-starters .ma-cta { width: 100%; margin-top: var(--s-4); }
.ma-sr-starters .ma-cta[disabled] { opacity: .45; cursor: default; }
.ma-sr-starters-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }
.ma-sr-pick { position: relative; }
.ma-sr-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ma-sr-pick-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: 76px; padding: var(--s-2) 2px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
.ma-sr-pick-tile b { font: 800 22px var(--font-ui); font-variant-numeric: tabular-nums; }
.ma-sr-pick-tile span { max-width: 100%; font: 600 13px var(--font-ui); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-sr-pick:has(input:checked) .ma-sr-pick-tile {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}


/* the action pad / drawers — a true bottom SHEET: scrim dims the room
   (the account-sheet overlay grammar), no border (Lance: never), tall
   enough to breathe */
.ma-sr-scrim { position: fixed; inset: 0; z-index: 35; background: rgb(10 10 15 / .42); cursor: pointer; }
.ma-sr-padwrap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  min-height: 45dvh; max-height: 72dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-6) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--bg); border: 0;
  border-radius: 20px 20px 0 0; box-shadow: var(--shadow-2, var(--shadow-1));
}
@media (min-width: 640px) { .ma-sr-padwrap { left: auto; right: auto; width: 480px; margin: 0 auto; position: fixed; inset-inline: 0; } }
.ma-sr-padhead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.ma-sr-padwho { font: 600 14.5px var(--font-ui); }
.ma-sr-padwho b { font-size: 17px; font-variant-numeric: tabular-nums; }
.ma-sr-acts { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.ma-sr-acts.is-subs { flex-wrap: wrap; row-gap: var(--s-2); }
.ma-sr-act {
  flex: 1 1 0; min-height: 60px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); font: 700 14px var(--font-ui); color: var(--text);
}
.ma-sr-act.is-make { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.ma-sr-act.is-miss { background: none; border: 2px solid var(--border-strong); color: var(--text-2); }
.ma-sr-act.is-warn { background: color-mix(in srgb, var(--danger) 10%, var(--surface-2)); }
.ma-sr-acts.is-subs .ma-sr-act { flex: 0 1 auto; padding: 0 var(--s-4); }

/* End belongs below both teams — the terminal act gets --s-6 of air */
.ma-sr-endrow { margin-top: var(--s-6); }
.ma-sr-end {
  display: block; width: 100%; min-height: 52px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: var(--r-1); background: var(--surface);
  font: 700 15px var(--font-ui); color: var(--danger);
}
.ma-sr-end[disabled] { opacity: .45; cursor: default; }

/* reserved: the list's filter/search row lands here (Events > Games IA) */
.ma-sr-listtools { min-height: 44px; }

/* the staff shift row: content, then a 50/50 action pair (the ticket-row
   grammar). The row is never a link — the buttons are the only doors. */
.ma-evc.is-shift { flex-direction: column; align-items: stretch; gap: var(--s-4); }
.ma-evc-top { display: flex; align-items: flex-start; gap: var(--s-2); }
.ma-evc.is-shift .ma-ticketrow { margin-top: 0; }
.ma-ticket-chip { cursor: pointer; }
.ma-ticket-chip.is-off, .ma-ticket-chip[disabled] {
  opacity: .45; cursor: default; box-shadow: none;
}
/* the pair on an event-listing game card (staff only) */
.ma-ticketrow.is-staff { margin-top: var(--s-3); }

/* the plays drawer */
.ma-sr-plays { display: flex; flex-direction: column; }
.ma-sr-play { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; border-bottom: 1px solid var(--border); }
.ma-sr-play:last-child { border-bottom: 0; }
.ma-sr-play-q { flex: none; font: 700 13px var(--font-ui); color: var(--text-3); }
.ma-sr-play-dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-full); }
.ma-sr-play-dot.is-a { background: var(--sr-a); }
.ma-sr-play-dot.is-b { background: var(--sr-b); }
.ma-sr-play-label { flex: 1; min-width: 0; font: 500 13.5px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-sr-play-score { flex: none; font: 700 13px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-3); }
.ma-sr-play.is-voided .ma-sr-play-label { text-decoration: line-through; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .ma-sr-sync i { animation: none; } }

/* ==== desktop: the SAME design, wider (documented stops only) ============= */
@media (min-width: 1024px) {
  .ma-shell { flex-direction: row; }
  .ma-tabs {
    position: sticky; top: 0; bottom: auto; left: auto; right: auto;
    flex-direction: column; width: 216px; height: 100vh; flex: none;
    padding: var(--s-5) var(--s-3); gap: 2px;
    border-top: 0; border-right: 1px solid var(--border);
    background: var(--surface-2);
  }
  .ma-tab {
    flex: none; flex-direction: row; justify-content: flex-start;
    gap: var(--s-3); min-height: 44px; padding: 0 var(--s-3);
    border-radius: var(--r-1); font-size: 14.5px;
  }
  .ma-tab[aria-current="page"] { background: var(--surface); box-shadow: var(--shadow-1); }
  .ma-tab-badge { position: static; transform: none; margin-left: auto; }
  .ma-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .ma-main { padding: var(--s-6) var(--s-6) var(--s-8); }
  .ma-narrow { max-width: 760px; width: 100%; margin: 0 auto; }
  .ma-tabs.is-phone-hidden { display: flex; }
}
.ma-tabs.is-phone-hidden { display: none; }
@media (min-width: 1024px) { .ma-tabs.is-phone-hidden { display: flex; } }