/* =============================================================================
 * Member account app — the member front door (/account).
 *
 * Design language is PORTED FROM THE WEBSITE, not invented here: the mockup is
 * TMV-Web `public/m/app.html` (the folder copy is ground truth, not the
 * design_handoff.zip copy). Ink #211f1b, brand yellow #ffd400, paper #e9e7e1,
 * Archivo display face, full-bleed mobile-first shell with a persistent bottom
 * bar. Members meet this app on a phone; it is designed phone-first and simply
 * centres itself on a desktop.
 *
 * Deliberately its OWN stylesheet, not css/style.css: TMV Members' sheet is
 * ~17.5k lines built for a different product, and the account page must not
 * inherit its cascade. Nothing here is shared with it.
 *
 * NOTE on category colours: the SSOT is SERVICE_COLORS
 * (public/js/foundation/service-colors.js, ADR-0312), the same palette the
 * website copies. Colours arrive from JS; do not hardcode category hexes here.
 * ========================================================================== */

:root {
  --ma-ink: #211f1b;
  --ma-yellow: #ffd400;
  --ma-paper: #e9e7e1;
  --ma-surface: #f5f4f1;
  --ma-card: #fff;
  --ma-line: #ebe9e4;
  --ma-muted: #8a877f;
  --ma-muted-2: #6a6760;
  --ma-eyebrow: #9b8e6a;
  --ma-good: #5fd07f;
  --ma-bad: #f44336;
  --ma-display: 800 1rem/1.1 'Archivo', sans-serif;
  --ma-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* JS-set: the real viewport unit. iOS Safari's `vh` includes the collapsing
     toolbar, so a `100vh` shell is cut off in a standalone PWA — the same fix
     TMV Members carries. */
  --ma-vh: 1vh;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ma-paper); }
body { font-family: var(--ma-body); color: var(--ma-ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--ma-yellow); color: var(--ma-ink); }

.ma-root {
  display: flex;
  flex-direction: column;
  height: calc(var(--ma-vh, 1vh) * 100);
  max-width: 520px;         /* phone-first; centred, never stretched, on desktop */

  margin-inline: auto;
  background: var(--ma-surface);
  position: relative;
  overflow: hidden;
}
/* The flex-column host for header+scroll+nav, one level below .ma-root.
   render() writes here, never to .ma-root. */
.ma-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- boot / centred states ---- */
.ma-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.ma-msg { max-width: 34ch; text-align: center; }
.ma-msg h2 { font: 800 22px/1.15 'Archivo', sans-serif; letter-spacing: -.02em; margin: 0 0 10px; }
.ma-msg p { font: 400 14.5px/1.6 var(--ma-body); color: var(--ma-muted-2); margin: 0 0 18px; }

.ma-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid rgba(33, 31, 27, .14);
  border-top-color: var(--ma-ink);
  animation: ma-spin .7s linear infinite;
}
@keyframes ma-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ma-spinner { animation-duration: 2s; } }

/* ---- app header (mirrors the website's mobile header: brand + status pill,
   and a back button + title on sub-screens) ---- */
.m-head {
  flex: none; background: var(--ma-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: max(16px, env(safe-area-inset-top)) 18px 16px;
}
.m-head-main, .m-head-sub { display: flex; align-items: center; justify-content: space-between; }
.m-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-brand img { flex: none; width: 32px; height: 32px; object-fit: contain; }
.m-brand span { font: 900 14.5px/1 'Archivo', sans-serif; letter-spacing: .01em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.m-back { cursor: pointer; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 5px; font: 800 17px/1 'Archivo', sans-serif; letter-spacing: -.01em; color: #fff; white-space: nowrap; }
.m-back i { font-size: 18px; color: var(--ma-yellow); }
.m-status { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .04em; text-transform: uppercase; border-radius: 8px; padding: 7px 11px; white-space: nowrap; color: var(--ma-good); background: rgba(95, 208, 127, .13); border: 1px solid rgba(95, 208, 127, .28); }
.m-status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ma-good); }
.m-status.is-closed { color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.m-status.is-closed .m-status-dot { background: rgba(255, 255, 255, .4); }

/* ---- scroll region (shell uses .m-scroll; the claim/message states use .ma-scroll) ---- */
.ma-scroll, .m-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ma-scroll::-webkit-scrollbar, .m-scroll::-webkit-scrollbar { display: none; }
/* nav is a flex sibling (not absolute) now, so no nav-overlap padding is needed. */
.ma-page { padding: 18px 18px 28px; }
.m-pad { padding: 16px 18px 28px; }
.m-pad-x { padding: 0 18px; }

/* ---- type ---- */
.ma-h1 { font: 800 26px/1.1 'Archivo', sans-serif; letter-spacing: -.02em; margin: 0 0 4px; }
.ma-sub { font: 500 14px/1.4 var(--ma-body); color: var(--ma-muted); margin: 0 0 20px; }
.ma-eyebrow {
  font: 800 14px/1 'Archivo', sans-serif; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ma-eyebrow); margin: 0 0 12px;
}

/* ---- the dark hero card (member identity / membership status) ---- */
.ma-hero {
  background: var(--ma-ink); color: #fff; border-radius: 20px;
  padding: 20px 22px; margin-bottom: 16px; position: relative; overflow: hidden;
}
.ma-hero > * { position: relative; }
.ma-hero-id { display: flex; align-items: center; gap: 14px; }
.ma-hero-av {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ma-yellow); color: var(--ma-ink);
  display: flex; align-items: center; justify-content: center;
  font: 900 20px/1 'Archivo', sans-serif;
}
.ma-hero-name { font: 800 18px/1.1 'Archivo', sans-serif; letter-spacing: -.01em; }
.ma-hero-meta { font: 600 12.5px/1.3 var(--ma-body); color: rgba(255, 255, 255, .6); margin-top: 4px; }

/* ---- live open/closed row (top of the Home status card) ---- */
.ma-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ma-open {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.ma-open .ma-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.ma-open.is-on { color: var(--ma-good); }
.ma-open.is-on .ma-dot { background: var(--ma-good); animation: ma-pulse 1.6s ease-in-out infinite; }
.ma-hours { font: 600 12px/1 var(--ma-body); color: rgba(255, 255, 255, .6); }
@keyframes ma-pulse {
  0% { box-shadow: 0 0 0 0 rgba(95, 208, 127, .5); }
  70% { box-shadow: 0 0 0 6px rgba(95, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 208, 127, 0); }
}
@media (prefers-reduced-motion: reduce) { .ma-open.is-on .ma-dot { animation: none; } }

/* Waiver pill — background tint + icon, no side-stripe accent. */
.ma-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 8px; padding: 6px 10px; white-space: nowrap;
}
.ma-pill.is-ok { color: var(--ma-good); background: rgba(95, 208, 127, .14); }
.ma-pill.is-bad { color: var(--ma-bad); background: rgba(244, 67, 54, .14); }

/* ---- membership countdown ----
   The mockup's Account tab said "Renews in 18 days" with a repeat icon, which
   implies auto-renew. Memberships do NOT renew — that's Square Subscriptions,
   deliberately out of scope. The mockup's own HOME card had it right ("18 days
   left of 30" + a progress bar), so that framing is used in both places. */
.ma-count-label {
  font: 700 12px/1 'Archivo', sans-serif; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 7px;
}
.ma-count-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.ma-count-big { font: 900 26px/1 'Archivo', sans-serif; color: var(--ma-yellow); }
.ma-count-of { font: 600 12.5px/1 var(--ma-body); color: rgba(255, 255, 255, .6); }
.ma-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.ma-track > i { display: block; height: 100%; border-radius: 999px; background: var(--ma-yellow); }

/* ---- list rows (passes, visits, settings) ---- */
.ma-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.ma-row {
  display: flex; align-items: center; gap: 13px;
  background: var(--ma-card); border: 1px solid var(--ma-line);
  border-radius: 14px; padding: 15px 16px;
  text-align: left; width: 100%;
}
.ma-row-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: var(--ma-line);
}
.ma-row-main { flex: 1; min-width: 0; }
.ma-row-title { font: 800 14px/1.15 'Archivo', sans-serif; }
.ma-row-sub { font: 500 12px/1.3 var(--ma-body); color: var(--ma-muted); margin-top: 3px; }
.ma-row-val { font: 800 13px/1 'Archivo', sans-serif; white-space: nowrap; }

.ma-empty {
  background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px;
  padding: 22px 18px; text-align: center;
  font: 500 13.5px/1.5 var(--ma-body); color: var(--ma-muted);
}

/* ---- buttons ---- */
.ma-btn {
  cursor: pointer; width: 100%; border: 0; border-radius: 16px; padding: 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 800 15px/1 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: .03em;
  text-decoration: none;
}
.ma-btn[disabled] { opacity: .55; cursor: default; transform: none; }
.ma-btn.is-primary { background: var(--ma-yellow); color: var(--ma-ink); }
.ma-btn.is-secondary { background: var(--ma-card); color: var(--ma-ink); border: 1px solid var(--ma-line); }
.ma-btn.is-ghost {
  background: none; color: var(--ma-muted-2); text-transform: none;
  letter-spacing: 0; font: 600 13px/1 var(--ma-body); padding: 12px;
}

/* ---- household switcher (self + kids via the caretaker edge) ---- */
.ma-who { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px; scrollbar-width: none; }
.ma-who::-webkit-scrollbar { display: none; }
.ma-who button {
  flex: none; cursor: pointer; border-radius: 8px; padding: 9px 15px;
  font: 700 13px/1 'Archivo', sans-serif;
  background: var(--ma-card); color: var(--ma-muted-2); border: 1px solid var(--ma-line);
}
.ma-who button.is-on { background: var(--ma-ink); color: #fff; border-color: var(--ma-ink); }

/* ---- binding (claim your records) ---- */
.ma-claim { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.ma-claim label {
  display: flex; align-items: center; gap: 13px; cursor: pointer;
  background: var(--ma-card); border: 1px solid var(--ma-line);
  border-radius: 14px; padding: 15px 16px;
}
.ma-claim label.is-on { border-color: var(--ma-ink); background: #fffdf2; }
.ma-claim input { flex: none; width: 20px; height: 20px; accent-color: var(--ma-ink); }
.ma-claim .ma-row-main { flex: 1; }

/* ---- bottom nav — mirrors the website exactly: Home · Train · Book · Schedule
   · More, with Book a raised 64px circular FAB. ---- */
.m-nav {
  flex: none; position: relative; z-index: 30;
  background: rgba(28, 26, 23, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 9px 12px calc(13px + env(safe-area-inset-bottom, 10px));
  display: flex; align-items: flex-end;
}
.m-navbtn {
  flex: 1; cursor: pointer; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: rgba(255, 255, 255, .42);
  transition: color .12s ease;
}
.m-navbtn i { font-size: 26px; }
.m-navbtn span { font: 700 12px/1 'Archivo', sans-serif; letter-spacing: .02em; }
.m-navbtn.active { color: #fff; }
.m-navbtn:active { transform: scale(.94); }
.m-navcenter .m-navcenter-c {
  width: 54px; height: 54px; margin-top: -30px; border-radius: 50%;
  background: var(--ma-yellow); border: 4px solid #2e2c29;
  box-shadow: 0 6px 15px -7px rgba(255, 212, 0, .45);
  display: flex; align-items: center; justify-content: center;
}
.m-navcenter .m-navcenter-c i { font-size: 23px; color: var(--ma-ink); }
.m-navcenter span:last-child { font-weight: 800; text-transform: uppercase; }

/* ---- toast ---- */
.ma-toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ma-ink); color: #fff;
  border-radius: 12px; padding: 12px 18px; z-index: 60;
  font: 600 13px/1.4 var(--ma-body); max-width: min(420px, 88vw);
  box-shadow: 0 12px 30px -12px rgba(28, 25, 23, .7);
}
.ma-toast.is-bad { background: var(--ma-bad); }

/* ===========================================================================
 * HOME — account dashboard (the mockup's member wallet carousel + bookings).
 * Values are literal from the mockup; per-card colours (glow, tint, bar width,
 * dot state) arrive inline from JS.
 * ========================================================================= */
.ma-home { padding: 22px 0 28px; }
.ma-home-top { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px; margin-bottom: 12px; }
.ma-home-eyebrow { font: 800 13px/1 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #9b8e6a; margin: 0; }
.ma-manage, .ma-book-link {
  cursor: pointer; background: none; border: 0; padding: 0;
  font: 800 11.5px/1 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  color: #211f1b; display: inline-flex; align-items: center; gap: 5px;
}

/* member wallet carousel */
.ma-wallet { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 2px; scrollbar-width: none; }
.ma-wallet::-webkit-scrollbar { display: none; }
.ma-wcard { scroll-snap-align: center; flex: none; width: calc(100% - 40px); background: #211f1b; color: #fff; border-radius: 24px; padding: 24px; position: relative; overflow: hidden; }
/* Solo account (one member): the card fills the whole width, no peek gap for a
   card that isn't there. Multiple cards keep the calc()-40px peek above. */
.ma-wcard:only-child { width: 100%; }
.ma-wcard-glow { position: absolute; inset: 0; }           /* per-member radial tint */
.ma-wcard-inner { position: relative; }

/* header: name + role, and the waiver chip (an anchor to the waiver page) */
.ma-wcard-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ma-wcard-id { flex: 1; min-width: 0; }
.ma-wcard-name { font: 800 20px/1.1 'Archivo', sans-serif; letter-spacing: -.01em; }
.ma-wcard-role { font: 600 13.5px/1.3 var(--ma-body); color: rgba(255, 255, 255, .55); margin-top: 3px; }
.ma-wchip { flex: none; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .05em; text-transform: uppercase; border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.ma-wchip i { font-size: 12px; }
.ma-wchip.is-ok { color: #5fd07f; background: rgba(95, 208, 127, .14); }     /* waiver signed */
.ma-wchip.is-need { color: #ffd400; background: rgba(255, 212, 0, .14); }    /* waiver needed */

/* an entitlement entry: a membership or a pass, separated by a top hairline */
.ma-went { padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.ma-went:last-child { padding-bottom: 2px; }
.ma-went-type { font: 700 9.5px/1 'Archivo', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .4); }

/* headline row: category name (colour set inline) + the big count on the right */
.ma-went-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 11px; }
.ma-went-name { font: 800 21px/1 'Archivo', sans-serif; }
.ma-went-count { flex: none; font: 800 21px/1 'Archivo', sans-serif; color: #fff; }
.ma-went-count small { font: 700 12px/1 'Archivo', sans-serif; color: rgba(255, 255, 255, .5); }

/* membership progress bar (continuous days; fill colour set inline) */
.ma-wbar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; margin: 14px 0 12px; }
.ma-wbar > i { display: block; height: 100%; border-radius: 999px; }

/* pass pips: one per ticket, filled = remaining, max 10 per row (wraps for 20-packs) */
.ma-wpips { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 12px; }
.ma-wpips-row { display: flex; gap: 4px; }
.ma-wpip { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); }

/* small print: two facts pinned to opposite edges so they scan as columns */
.ma-went-facts { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ma-went-facts span { font: 600 11.5px/1 var(--ma-body); color: rgba(255, 255, 255, .5); }
/* Why a membership's auto-renew needs a look: a failed payment, a stop, a pause. */
.ma-went-note { font: 600 11.5px/1.4 var(--ma-body); color: rgba(255, 255, 255, .72); margin-top: 10px; }
/* Manage, on an entitlement a member can act on (a pause, the auto-renew's payments): opens the action sheet (ADR-0401). */
.ma-went-manage { cursor: pointer; margin-top: 12px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: 8px 11px; background: rgba(255, 212, 0, .12); color: #ffd400; font: 700 11.5px/1 'Archivo', sans-serif; letter-spacing: .02em; }
.ma-went-manage i { font-size: 11px; }
.ma-went-manage:active { transform: scale(.97); }

/* empty-slot quick-add (shown when a member has no membership / passes yet) */
.ma-addslot { cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .05); border: 1px dashed rgba(255, 255, 255, .22); border-radius: 14px; padding: 14px; color: #fff; }
.ma-addslot-plus { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #ffd400; color: #211f1b; display: flex; align-items: center; justify-content: center; }
.ma-addslot-plus i { font-size: 13px; }
.ma-addslot-label { font: 700 12.5px/1 'Archivo', sans-serif; }

/* carousel dots (family accounts only) */
.ma-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 2px; }
.ma-dot { cursor: pointer; padding: 6px 3px; background: none; border: 0; display: flex; align-items: center; }
.ma-dot span { height: 6px; border-radius: 999px; transition: width .2s ease, background .2s ease; }

/* active bookings — upcoming campRegistrations[] cards, or the empty state */
.ma-bookings { padding: 0 18px; margin-top: 28px; }
.ma-bookings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.ma-bookings-title { font: 800 17px/1 'Archivo', sans-serif; letter-spacing: -.01em; margin: 0; }
.ma-book-empty { background: #fff; border: 1px solid #ebe9e4; border-radius: 16px; padding: 22px; text-align: center; font: 600 13px/1.5 var(--ma-body); color: #8a877f; }
.ma-book-empty b { color: #211f1b; font-weight: 800; }
.ma-bkgs { display: flex; flex-direction: column; gap: 10px; }
.ma-bkg { background: #fff; border: 1px solid #ebe9e4; border-radius: 16px; padding: 15px 17px; display: flex; align-items: center; gap: 12px; }
.ma-bkg-main { flex: 1; min-width: 0; }
.ma-bkg-title { font: 800 14px/1.3 'Archivo', sans-serif; letter-spacing: -.01em; color: #211f1b; }
.ma-bkg-sub { font: 600 12px/1.5 var(--ma-body); color: #8a877f; margin-top: 2px; }
.ma-bkg-late { font: 600 11px/1.4 var(--ma-body); color: #8a877f; margin-top: 5px; }
.ma-bkg-receipt { color: #8a877f; font-size: 17px; padding: 6px; display: flex; }
.ma-bkg-main { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; }
.ma-bkg-chev { flex: none; font-size: 12px; color: #c4c0b7; }

/* ---- the booking screen (member-booking.js): the week as day tiles, the changes as rows ---- */
.ma-bk-card { padding: 16px; margin-bottom: 14px; }
.ma-bk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ma-bk-id { flex: 1; min-width: 0; }
.ma-bk-camper { font: 800 17px/1.15 'Archivo', sans-serif; letter-spacing: -.01em; color: var(--ma-ink); }
.ma-bk-dates { font: 600 12.5px/1.4 var(--ma-body); color: var(--ma-muted); margin-top: 4px; }
.ma-bk-dates + .ma-bk-dates { margin-top: 0; }
.ma-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.ma-days:has(.ma-day:nth-child(7)) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ma-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 12px; border: 1px solid var(--ma-line); background: var(--ma-card); color: var(--ma-muted); font: inherit; padding: 8px 0; }
button.ma-day { cursor: pointer; }
button.ma-day:active { transform: scale(.96); }
.ma-day.is-on { background: var(--ma-ink); border-color: var(--ma-ink); color: #fff; }
.ma-day.is-off { opacity: .4; cursor: default; }
.ma-day.is-late::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ma-yellow); }
.ma-day-w { font: 700 9.5px/1 'Archivo', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ma-day-n { font: 800 16px/1 'Archivo', sans-serif; }
.ma-bk-legend { font: 600 11.5px/1.4 var(--ma-body); color: var(--ma-muted); margin-top: 6px; }
.ma-bk-fact .ma-acct-label { line-height: 1.3; font-weight: 600; }
.ma-bk-k { margin: 0 0 3px; font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ma-bk-receipts { margin: 14px 0 4px; }
.ma-bk-receipt { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--ma-body); color: var(--ma-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Email preferences: a free visit to claim, as a card with its choices and one Claim. */
.ma-offer { padding: 16px; margin-bottom: 14px; }
.ma-offer-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ma-offer-head > i { flex: none; font-size: 20px; color: var(--ma-ink); }
.ma-offer-t { font: 800 15px/1.15 'Archivo', sans-serif; color: var(--ma-ink); }
.ma-offer-s { font: 600 12.5px/1.4 var(--ma-body); color: var(--ma-muted); margin-top: 3px; }
.ma-eyebrow-gap { margin-top: 26px; }
.ma-row-a { display: inline-block; margin-top: 6px; font: 700 12.5px/1 var(--ma-body); color: var(--ma-ink); text-decoration: underline; text-underline-offset: 3px; }
.ma-order .ma-row-sub .ma-order-line { display: block; }
.ma-order .ma-row-main { flex: 1; }
a.ma-tag { text-decoration: none; }
.ma-textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; padding: 12px 14px; margin: 0 0 14px; font: 500 16px/1.4 var(--ma-body); color: var(--ma-ink); }

/* ---- Account page (More → account card): the mockup's 6-row account card ---- */
.ma-acct-card { background: #fff; border: 1px solid #ebe9e4; border-radius: 16px; overflow: hidden; margin-bottom: 22px; }
.ma-acct-head { display: flex; align-items: center; gap: 13px; padding: 16px; border-bottom: 1px solid #f0efea; }
.ma-acct-av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #ffd400; color: #211f1b; display: flex; align-items: center; justify-content: center; font: 900 18px/1 'Archivo', sans-serif; }
.ma-acct-idtxt { flex: 1; min-width: 0; }
.ma-acct-name { font: 800 16px/1.1 'Archivo', sans-serif; }
.ma-acct-holder { font: 500 12px/1 var(--ma-body); color: #8a877f; margin-top: 4px; }
.ma-acct-row { cursor: pointer; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #f0efea; display: flex; align-items: center; gap: 13px; padding: 15px 16px; text-decoration: none; }
.ma-acct-row:active { background: #faf9f6; }
.ma-acct-ico { flex: none; font-size: 16px; width: 20px; text-align: center; }
.ma-acct-label { flex: 1; font: 600 14px/1 var(--ma-body); }
.ma-acct-chev { flex: none; font-size: 12px; color: #c4c0b7; }
/* A row's second line (the booking screen's change rows and facts). */
.ma-acct-sub { display: block; font: 500 12px/1.3 var(--ma-body); color: var(--ma-muted); margin-top: 3px; }

/* ---- Family page — waiver indicator on a LIGHT household row. A tint pill (no
   side-stripe), reusing the proven light-bg colours from .m-sess-badge (green)
   and .m-warn (amber): green = signed, amber = a waiver is needed. ---- */
.ma-fam-w { display: inline-flex; align-items: center; font: 700 10px/1 'Archivo', sans-serif; letter-spacing: .04em; text-transform: uppercase; border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
.ma-fam-w.is-ok { color: #1b6b2f; background: #e6f4ea; }
.ma-fam-w.is-need { color: #9a7b00; background: #fff7d6; }

/* ---- Family page — "Find my family" (F2) self-service link block. The pick
   rows reuse .ma-claim (see the first-bind claim screen). A short muted lead,
   stacked buttons, a soft-tint status note (no side-stripe), and a hairline
   rule separating the "link existing" path from the "sign a waiver" path. ---- */
.ma-fam-find-lead { font: 500 13px/1.5 var(--ma-body); color: var(--ma-muted-2); margin: 0 0 12px; }
.ma-fam-find .ma-btn + .ma-btn { margin-top: 8px; }
.ma-fam-find-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #faf9f6; font: 500 12.5px/1.5 var(--ma-body); color: var(--ma-muted-2); }
.ma-fam-divider { height: 1px; background: var(--ma-line); margin: 18px 0; }

/* ===========================================================================
 * PORTED WEBSITE PARTS (the More sheet, the hero block and the shared tokens).
 * Rules transcribed from the public site's mobile app (see docs mweb-port-spec). Shell classes (.m-head/.m-nav/
 * .m-pad/.m-stack/…) already live above and are NOT redefined here.
 * ========================================================================= */

/* ---- component design tokens the ported CSS references ---- */
:root {
  --brand: #ffd400; --ink: #211f1b; --card: #ffffff;
  --line: #ebe9e4; --line-soft: #f0efea;
  --text: #211f1b; --text-2: #3a3833; --text-3: #5b5853;
  --muted: #6a6760; --muted-2: #8a877f; --muted-3: #9b9890; --faint: #b0aca3;
  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* The website's card and page tokens, for the schedule's shared styles (schedule-web.css); the gutter is the
     phone's, this app's .m-pad side padding. The category colours (--c-*) are set from JS (paintCategoryTokens). */
  --bg: #f5f4f1; --radius: 16px; --radius-lg: 22px; --gutter: 18px;
  --shadow-sm: 0 1px 3px rgba(28, 25, 23, .05), 0 16px 34px -30px rgba(28, 25, 23, .4);
  --shadow-lg: 0 1px 3px rgba(28, 25, 23, .05), 0 26px 48px -26px rgba(28, 25, 23, .5);
}

/* ---- MobileHero ---- */
/* The website's phone hero (its `.pagehero`): a full-bleed band flush under the header, not a card. */
.mh { background: radial-gradient(360px 200px at 92% -20%, rgba(255, 212, 0, .16), transparent 70%), #211f1b; color: #fff; padding: 26px 22px 24px; position: relative; overflow: hidden; }
.m-pad > .mh:first-child { margin: -16px -18px 0; }
.mh-inner { position: relative; }
.mh-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 10.5px/1 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffd400; margin-bottom: 16px; }
.mh-rule { width: 18px; height: 2px; background: #ffd400; }
.mh-title { font: 800 30px/1.04 'Archivo', sans-serif; letter-spacing: -.02em; margin: 0 0 12px; }
.mh-desc { font: 400 14px/1.55 inherit; color: rgba(255,255,255,.72); margin: 0; }
.mh-stats { display: flex; border-top: 1px solid rgba(255,255,255,.12); margin-top: 20px; padding-top: 16px; }
.mh-stat { flex: 1; }
.mh-stat-v { font: 800 18px/1 'Archivo', sans-serif; color: #ffd400; }
.mh-stat-l { font: 600 10.5px/1.3 inherit; color: rgba(255,255,255,.6); margin-top: 5px; }

/* ---- shared section chrome ---- */
.m-chev { font-size: 13px; color: #c4c0b7; }

/* ---- More: member-only "My account" entry ---- */
.m-acct { cursor: pointer; width: 100%; background: #fff; border: 1px solid #ebe9e4; border-radius: 16px; box-shadow: 0 1px 3px rgba(28,25,23,.04), 0 14px 30px -24px rgba(28,25,23,.38); padding: 14px 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 13px; text-align: left; }
.m-acct-av { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #ffd400; color: #211f1b; display: flex; align-items: center; justify-content: center; font: 900 18px/1 'Archivo', sans-serif; }
.m-acct-txt { flex: 1; min-width: 0; }
.m-acct-t { font: 800 15.5px/1.15 'Archivo', sans-serif; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-acct-s { font: 500 12px/1.35 inherit; color: #8a877f; margin-top: 3px; }

/* ---- Tile icon and text, shared with the More sheet's .m-tile-row below ---- */
.m-tile-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.m-tile-ic i { font-size: 19px; }
.m-tile-t { font: 800 14.5px/1.1 'Archivo', sans-serif; letter-spacing: -.005em; }
.m-tile-s { font: 500 11.5px/1.35 inherit; color: #8a877f; margin-top: 4px; }
.m-visit { background: #211f1b; color: #fff; border-radius: 20px; padding: 24px; }
.m-visit-eyebrow { display: flex; align-items: center; gap: 9px; font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffd400; margin-bottom: 18px; }
.m-visit-rows { display: flex; flex-direction: column; gap: 14px; }
.m-visit-row { display: flex; align-items: flex-start; gap: 12px; }
.m-visit-row i { font-size: 15px; color: #ffd400; margin-top: 2px; }
.m-visit-t { font: 700 13.5px/1.3 'Archivo', sans-serif; }
.m-visit-s { font: 500 12px/1.3 inherit; color: rgba(255,255,255,.6); margin-top: 3px; }
.m-visit-btns { display: flex; gap: 10px; margin-top: 6px; }
.m-visit-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 11px; padding: 12px; color: #fff; text-decoration: none; font: 700 12px/1 'Archivo', sans-serif; }

/* ---- More sheet — mirrors the website's slide-up overlay exactly: a backdrop
   + rounded panel that sits BEHIND the tab bar (z-index below .m-nav's 30), so
   it visually tucks under it rather than covering it. Mounted as part of the
   normal viewShell() render, but its OWN open/close is a direct classList
   toggle (mountMoreSheet()/toggleMoreSheet()/closeMoreSheet() in the JS) that
   bypasses the full re-render — that's what lets the CSS transition below
   actually play instead of popping instantly, given this app rebuilds
   innerHTML on every render() call. */
.m-sheet-root {
  --sheet-close-dur: .4s;
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  visibility: hidden; transition: visibility 0s linear var(--sheet-close-dur);
}
.m-sheet-root.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.m-sheet-backdrop { position: absolute; inset: 0; background: rgba(20,18,16,.5); opacity: 0; transition: opacity .35s ease; }
.m-sheet-root.open .m-sheet-backdrop { opacity: 1; }
.m-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(var(--ma-vh, 1vh) * 82);
  display: flex; flex-direction: column; background: var(--ma-card);
  border-radius: 20px 20px 0 0; transform: translateY(100%);
  transition: transform var(--sheet-close-dur) cubic-bezier(.22, 1, .36, 1);
}
.m-sheet-root.open .m-sheet-panel { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .m-sheet-root { --sheet-close-dur: 0s; }
  .m-sheet-backdrop, .m-sheet-panel { transition: none; }
}
.m-sheet-grab { flex: none; width: 38px; height: 4px; border-radius: 999px; background: var(--ma-line); margin: 10px auto 2px; }
.m-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* The panel sits BEHIND the tab bar (z-index above), so the last real row
   needs its own clearance to end up tappable instead of sliding out of view
   underneath it. .m-nav's own vertical footprint (9px top pad + ~45px icon/
   label content + 13px+safe-area bottom pad) is ~76px before the safe area. */
.m-sheet-scroll .m-pad { padding-bottom: calc(76px + env(safe-area-inset-bottom, 10px)); }
/* ---- the action sheet (member-sheet.js): a feature's own bottom sheet, the More sheet's chrome ---- */
/* The action sheet covers the tab bar (the More sheet sits behind it, since the bar's More button is its toggle). */
#ma-sheet { z-index: 40; }
#ma-sheet .m-sheet-scroll .m-pad { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.ma-sheet-panel { max-height: calc(var(--ma-vh, 1vh) * 90); }
.ma-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 0 14px; }
.ma-sheet-id { flex: 1; min-width: 0; }
.ma-sheet-eyebrow { font: 700 9.5px/1 'Archivo', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--ma-muted); margin-bottom: 8px; }
.ma-sheet-title { font: 800 20px/1.1 'Archivo', sans-serif; letter-spacing: -.01em; margin: 0; color: var(--ma-ink); }
.ma-sheet-sub { font: 600 12.5px/1.4 var(--ma-body); color: var(--ma-muted); margin-top: 5px; }
.ma-tag { flex: none; display: inline-flex; align-items: center; border-radius: 8px; padding: 6px 9px; font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .02em; white-space: nowrap; }
.ma-tag.is-ok { color: #1f7a3a; background: rgba(95, 208, 127, .18); }
.ma-tag.is-wait { color: #7a5a00; background: rgba(255, 212, 0, .22); }
.ma-tag.is-stop { color: #a3261a; background: rgba(255, 87, 71, .14); }
.ma-tag.is-off { color: var(--ma-muted-2); background: var(--ma-line); }
.ma-points { margin: 0 0 18px; padding: 0 0 0 18px; font: 500 13.5px/1.5 var(--ma-body); color: var(--ma-ink); }
.ma-points li + li { margin-top: 3px; }
.ma-sheet-p { font: 500 13.5px/1.55 var(--ma-body); color: var(--ma-ink); margin: 0 0 14px; }
.ma-sheet-fine { font-size: 12.5px; color: var(--ma-muted); }
.ma-sheet-fine a { color: var(--ma-ink); font-weight: 700; }
.ma-sheet-label { font: 700 9.5px/1 'Archivo', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--ma-muted); margin: 4px 0 8px; }
.ma-options { margin-bottom: 14px; }
.ma-options label.is-off { opacity: .5; }
.ma-facts { background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; padding: 6px 16px; margin: 0 0 14px; }
.ma-facts-title { font: 700 9.5px/1 'Archivo', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--ma-muted); padding: 10px 0 4px; }
.ma-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #f0efea; }
.ma-facts-title + .ma-fact { border-top: 0; }
.ma-fact-k { font: 600 13px/1.3 var(--ma-body); color: var(--ma-ink); }
.ma-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; font: 600 13px/1 var(--ma-body); }
.ma-field input { font: 600 16px/1 var(--ma-body); border: 0; background: none; color: var(--ma-ink); text-align: right; }
.ma-sheet-err { font: 600 13px/1.45 var(--ma-body); color: #a3261a; margin: 12px 0 0; }
/* The way back from a step of a sheet to the list it opened on. */
.ma-sheet-back { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; margin: 2px 0 10px; color: var(--ma-muted); font: 700 12.5px/1 var(--ma-body); }
.ma-sheet-back i { font-size: 12px; }
[data-ma-sheet-body] .ma-acct-card { margin-bottom: 14px; }
[data-ma-sheet-body] .ma-acct-row:disabled { cursor: default; opacity: .5; }

/* Manage and the buy form (ADR-0401): the membership as its card shows it, things to do as the More sheet lists them. */
.ma-mm-card { background: #211f1b; color: #fff; border-radius: 16px; padding: 16px; margin: 6px 0 14px; }
.ma-mm-card .ma-went-head { margin-top: 9px; }
.ma-mm-card .ma-went-name { margin: 0; }
.ma-mm-line { font: 500 12.5px/1.4 var(--ma-body); color: rgba(255, 255, 255, .72); margin-top: 10px; }
.ma-mm-alert { background: #fdecea; border-radius: 14px; padding: 14px; margin: 0 0 14px; }
.ma-mm-alert p { font: 600 13.5px/1.45 var(--ma-body); color: #8f2118; margin: 0 0 12px; }
.ma-mm-call { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.ma-mm-fine { margin: 8px 0 14px; text-align: center; }
[data-ma-sheet-body] .m-tile-row:disabled { cursor: default; opacity: .5; }
.ma-ic-go { background: #fff5c2; color: #7a6300; }
.ma-ic-stop { background: #f3f2ee; color: var(--ma-muted-2); }
.ma-tiles { display: grid; gap: 8px; margin: 0 0 16px; }
.ma-tile { cursor: pointer; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 48px; padding: 10px 12px; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 12px; text-align: center; }
.ma-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ma-tile.is-on { background: var(--tile-tint, #211f1b); border-color: var(--tile-tint, #211f1b); }
.ma-tile.is-off { opacity: .5; cursor: default; }
.ma-tile:focus-within { outline: 2px solid var(--ma-ink); outline-offset: 2px; }
.ma-tile-t { font: 800 14px/1.15 'Archivo', sans-serif; color: var(--ma-ink); }
.ma-tile-s { font: 600 11.5px/1.3 var(--ma-body); color: var(--ma-muted); }
.ma-tile.is-on .ma-tile-t { color: var(--ma-yellow); }
.ma-tile.is-on .ma-tile-s { color: rgba(255, 255, 255, .72); }
.ma-tile[style*="--tile-tint"]:not(.is-on) .ma-tile-t { color: var(--tile-tint); }
.ma-tile[style*="--tile-tint"].is-on .ma-tile-t, .ma-tile[style*="--tile-tint"].is-on .ma-tile-s { color: #fff; }
.ma-receipt { border-top: 1px solid var(--ma-line); margin: 0 0 16px; }
.ma-receipt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ma-line); font: 500 13px/1.3 var(--ma-body); color: var(--ma-muted-2); }
.ma-receipt-row b { font-weight: 700; color: var(--ma-ink); text-align: right; }
.ma-done { text-align: center; padding: 14px 0 4px; }
.ma-done-ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: #e6f4ea; color: #1b6b2f; font-size: 26px; margin-bottom: 12px; }
.ma-done .ma-sheet-title { margin-bottom: 8px; }
.ma-buy-title { margin: 6px 0 16px; }
.ma-buy-list { border: 1px solid var(--ma-line); border-radius: 14px; overflow: hidden; margin: 0 0 16px; }
.ma-buy-row { cursor: pointer; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--ma-line); }
.ma-buy-row:last-child { border-bottom: 0; }
.ma-buy-row input { position: absolute; opacity: 0; pointer-events: none; }
.ma-buy-row.is-on { background: var(--tile-tint, #211f1b); }
.ma-buy-row.is-off { opacity: .5; cursor: default; }
.ma-buy-season { padding: 10px 14px 6px; font: 700 9.5px/1 'Archivo', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--ma-muted); border-bottom: 1px solid var(--ma-line); }
.ma-reg-field { display: block; margin: 0 0 10px; padding: 0; border: 0; background: none; }
.ma-reg-field > span { display: block; font: 600 12.5px/1.2 var(--ma-body); color: var(--ma-muted-2); margin-bottom: 5px; }
.ma-buy-row:focus-within { outline: 2px solid var(--ma-ink); outline-offset: -2px; }
.ma-buy-label { font: 700 14px/1.2 var(--ma-body); color: var(--ma-ink); }
.ma-buy-price { flex: none; font: 800 15px/1 'Archivo', sans-serif; color: var(--ma-ink); }
.ma-buy-row.is-on .ma-buy-label { color: #fff; }
.ma-buy-row.is-on .ma-buy-price { color: #fff; }
.ma-buy-row.is-on .ma-acct-sub { color: rgba(255, 255, 255, .8); }
.ma-sheet-foot { flex: none; background: var(--ma-card); padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ma-line); }
.ma-sheet-foot:empty { display: none; }
.ma-buy-tick { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; font: 500 13.5px/1.3 var(--ma-body); color: var(--ma-ink); }
.ma-buy-tick input { flex: none; width: 20px; height: 20px; accent-color: var(--ma-ink); }
.ma-buy-tick a { color: inherit; font-weight: 700; }

/* The website's pages in the app (member-web-frames.js, ADR-0401): one layer over the shell's scroll region, under the tab bar
   and the sheets. A frame shows once its page says it is ready; a spinner until then; a way out if it never does. */
#ma-web { position: fixed; z-index: 10; background: var(--ma-surface); }
#ma-web[hidden], .ma-web-wrap[hidden] { display: none; }
.ma-web-wrap { position: absolute; inset: 0; }
.ma-web-page { display: block; width: 100%; height: 100%; border: 0; visibility: hidden; }
.ma-web-wrap[data-state="ready"] .ma-web-page { visibility: visible; }
.ma-web-wait { position: absolute; inset: 0; justify-content: center; padding: 0; }
.ma-web-wrap[data-state="ready"] .ma-web-wait, .ma-web-wrap[data-state="failed"] .ma-web-wait { display: none; }
.ma-web-fail { display: none; position: absolute; inset: 0; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; text-align: center; }
.ma-web-wrap[data-state="failed"] .ma-web-fail { display: flex; }
.ma-web-fail p { font: 500 14.5px/1.5 var(--ma-body); color: var(--ma-ink); margin: 0 0 6px; }
.ma-web-fail a { text-decoration: none; }
.m-waiver-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px; margin-bottom: 9px; background: #211f1b; color: #fff; border-radius: 14px; text-decoration: none; }
.m-waiver-row .m-tile-s { color: rgba(255, 255, 255, .65); }
.m-waiver-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--ma-yellow); color: #211f1b; font-size: 19px; }
.ma-sheet .ma-btn + .ma-btn, [data-ma-sheet-body] .ma-btn + .ma-btn { margin-top: 10px; }
[data-ma-sheet-body] .ma-btn { margin-top: 4px; }
.ma-sheet-foot .ma-sheet-err { margin: 0 0 10px; }
[data-ma-sheet-body] .ma-eyebrow { margin-top: 22px; }
.m-tile-rows { display: grid; gap: 9px; margin-bottom: 20px; }
.m-tile-row { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; text-align: left; text-decoration: none; color: inherit; background: var(--ma-card); border: 1px solid var(--ma-line); border-radius: 14px; padding: 12px 13px; }
.m-tile-row:active { transform: scale(.99); }
.m-tile-row .m-tile-ic { flex: none; border-radius: 11px; }
.m-tile-row .m-tile-t { font-size: 14.5px; }
.m-tile-row .m-tile-s { font-size: 12.5px; margin-top: 2px; }

/* ---- note, card, brand button ---- */
.m-note { display: flex; gap: 10px; background: #fff; border: 1px solid #ebe9e4; border-left: 4px solid #ffd400; border-radius: 12px; padding: 13px 15px; margin: 0 0 14px; }
.m-note i { font-size: 15px; color: #211f1b; margin-top: 1px; }
.m-note span { font: 600 12.5px/1.5 inherit; color: #3a3833; }
.m-note a { color: var(--ma-ink); font-weight: 700; }

.m-brandbtn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #ffd400; color: #211f1b; text-decoration: none; border-radius: 12px; padding: 13px; font: 800 13px/1 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: .03em; }

.m-card { background: #fff; border: 1px solid #ebe9e4; border-radius: 16px; box-shadow: 0 1px 3px rgba(28,25,23,.04), 0 14px 30px -24px rgba(28,25,23,.38); padding: 18px 20px; margin-bottom: 12px; }
.m-card-title { font: 800 14px/1.1 'Archivo', sans-serif; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }

/* ---- hours and contact blocks (member-account-render.js) ---- */
.m-hours { background: #211f1b; color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 16px; }
.m-hours-label { font: 700 11px/1 'Archivo', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffd400; margin-bottom: 6px; }
.m-hours-title { font: 800 20px/1.1 'Archivo', sans-serif; }
.m-hrow { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.m-hrow span:first-child { font: 600 13.5px/1 inherit; color: rgba(255,255,255,.82); }
.m-htime { font: 600 13.5px/1 inherit; color: rgba(255,255,255,.55); }

.m-contact { background: #fff; border: 1px solid #ebe9e4; border-radius: 18px; box-shadow: 0 1px 3px rgba(28,25,23,.04), 0 14px 30px -24px rgba(28,25,23,.38); padding: 22px 24px; margin-bottom: 16px; }
.m-contact-row { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; font: 600 14px/1.55 inherit; color: #211f1b; }
.m-contact-row a { color: #211f1b; text-decoration: none; }
.m-contact-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; background: #f3f2ee; display: flex; align-items: center; justify-content: center; }
.m-contact-ic i { font-size: 16px; color: #211f1b; }

.m-bullets { font: 400 13px/1.55 inherit; color: inherit; margin: 0 0 16px; padding-left: 18px; }
.m-bullets li { margin: 0 0 4px; }

/* ---- press feedback (tiles / rows) ---- */

/* ---- The live screens' shared states. The Schedule tab is the website's own schedule, styled by schedule-web.css and
   schedule-changes.css (linked in account.html), not by this file. ---- */
.app-scroll { scrollbar-width: none; }
.app-scroll::-webkit-scrollbar { display: none; }
.m-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 18px; }
.m-chip { flex: none; cursor: pointer; font: 700 12.5px/1 'Archivo', sans-serif; border-radius: 8px; padding: 9px 15px; white-space: nowrap; }
.m-sched-day { margin-bottom: 22px; }
.m-sched-daylabel { font: 800 12px/1 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #9b8e6a; margin-bottom: 11px; }
.m-sched-card { background: #fff; border: 1px solid #ebe9e4; border-radius: 16px; box-shadow: 0 1px 3px rgba(28,25,23,.04), 0 14px 30px -24px rgba(28,25,23,.38); overflow: hidden; }
.m-sess { display: flex; gap: 13px; padding: 14px 16px; border-bottom: 1px solid #f0efea; }
.m-sess:last-child { border-bottom: 0; }
.m-sess-bar { flex: none; width: 4px; align-self: stretch; border-radius: 2px; }
.m-sess-name { font: 800 14.5px/1.15 'Archivo', sans-serif; color: #211f1b; }
.m-sess-meta { font: 500 12.5px/1.3 inherit; color: #8a877f; margin-top: 4px; }
.m-sess-badge { font: 800 9px/1 'Archivo', sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; padding: 3px 5px; margin-left: 8px; }
.m-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 0; color: #9b8e6a; font: 600 13px/1 -apple-system, system-ui, sans-serif; }
.m-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #e6e4dd; border-top-color: #211f1b; animation: tmv-spin-g .8s linear infinite; }

.m-autonote { display: flex; align-items: center; gap: 9px; background: #f3f2ee; border-radius: 12px; padding: 13px 15px; margin-top: 4px; }
.m-autonote i { font-size: 14px; color: #9b8e6a; }
.m-autonote span { font: 500 12px/1.4 inherit; color: #6a6760; }
@keyframes tmv-spin-g { to { transform: rotate(360deg); } }

.m-status-dot.tmv-pulse { animation: ma-pulse 1.6s ease-in-out infinite; }

/* ---- the schedule in the portal: the website's parts, with the owner's corners (no pills) ---- */
/* The bar and the week are drawn together once the schedule has arrived (schedule-page.js), so until then their room is
   held and nothing on screen moves when they land. This page is a phone frame at every window width, so the bar is always
   the phone's: the 44px arrows plus the 14px under them (measured loaded at 390px: 58px), kept by a min-height that holds
   the margin inside. The week's 70vh keeps the note and the next step below the fold; a loaded week is taller, so nothing
   jumps up either. These are the app's own rules: schedule-web.css is a verbatim copy of the website's (ADR-0400). Full
   screen's `min-height: 0` (`.sched-main.is-full > [data-sched-week]`) outranks them: keep the selectors bare. */
[data-sched-top] { min-height: 58px; }
[data-sched-week] { min-height: 70vh; }
[data-phone-frame] .ws-filter { border-radius: 8px; }
[data-phone-frame] .wk-arrow { border-radius: 10px; }
/* The class popup's last block: no booking, who is covered, where to buy (classPopupFoot in member-account.js). */
.ws-pop-cover { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 13.5px/1.45 var(--font-body); color: var(--ink); }
.ws-pop-cover-h { font: 800 13px/1.3 var(--font-display); color: var(--ink); margin-bottom: 6px; }
.ws-pop-cover ul { list-style: none; margin: 0 0 6px; padding: 0; }
.ws-pop-cover li { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.ws-pop-cover li .bi { color: #1b6b2f; font-size: 15px; }
.ws-pop-cover p { margin: 4px 0 8px; color: var(--muted); }
.ws-pop-buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--brand); color: var(--ink); text-decoration: none; font: 800 12.5px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; }

/* ---- A tap shows something is happening (the owner's rule 25, ADR-0416) ----
   One owner for the whole app. Every button and link answers a press at once by sinking a little (a part with its own
   press below, the tab bar's .94 or a day tile's .96, keeps it: these rules weigh nothing). A tap whose work is on its
   way, marked aria-busy (runTap in design-system/pending.js for a tap in the shell, waitAttrs in member-sheet.js for a
   button a sheet draws again while it waits), keeps its words, takes no second tap, and spins beside its words. */
:where(#ma-root) :where(button, a[href], [role="button"]) { transition: transform .12s ease; }
:where(#ma-root) :where(button, a[href], [role="button"]):where(:not([disabled])):active { transform: scale(.98); }
:where(#ma-root) [aria-busy="true"] { pointer-events: none; cursor: progress; }
.ma-btn[aria-busy="true"] { opacity: 1; }
:where(#ma-root) :where(button, a)[aria-busy="true"]::after {
  content: ''; display: inline-block; flex: none; vertical-align: middle; margin-inline-start: 4px;
  width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ma-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { :where(#ma-root) :where(button, a)[aria-busy="true"]::after { animation-duration: 2s; } }

/* A thumb's reach on the small text links (the account audit, 2026-11-10: Back was 47 by 13, a receipt link 13 high). Each
   keeps its look and its place; an unseen box around it takes the tap. ::before, because a waiting tap's spinner is ::after. */
.ma-sheet-back, .ma-bk-receipt, .ma-row-a, .ma-manage, .ma-book-link, .m-back, .ma-bkg-receipt, .ma-wchip { position: relative; }
.ma-sheet-back::before, .ma-bk-receipt::before, .ma-row-a::before, .ma-manage::before, .ma-book-link::before, .m-back::before, .ma-bkg-receipt::before, .ma-wchip::before { content: ''; position: absolute; inset: -14px -10px; }

/* The signed-out view's code-by-email steps (ADR-0421): the Google button, a quiet line, then the email field and its
   button as one column; the code step is the same column. The field is `.ma-field`, the buy form's. */
.ma-signin { width: 100%; max-width: 342px; }
.ma-signin .ma-btn { width: 100%; }
.ma-signin .ma-signin-or { margin: 18px 0 12px; }
.ma-signin form { display: flex; flex-direction: column; margin: 0; }
.ma-signin-field { text-align: left; margin-bottom: 12px; }
.ma-signin-field input { flex: 1; min-width: 0; outline: 0; }
.ma-signin-field:focus-within { border-color: var(--ma-ink); }
.ma-signin .ma-signin-code { letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.ma-signin .ma-btn.is-ghost { margin-top: 6px; }
.ma-signin .ma-sheet-err { text-align: left; color: #a3261a; font: 600 13px/1.45 var(--ma-body); margin: -4px 2px 12px; }

/* The frame of someone not in an account yet (ADR-0422): the sign-in and the "ask us" messages sit at the top of the
   app's scroll region, under its header, and the website's tabs are links. */
a.m-navbtn, a.m-back { text-decoration: none; }
.ma-guest { display: flex; flex-direction: column; }
.ma-guest .ma-center { flex: none; align-items: flex-start; padding-top: 34px; }

/* "This phone" on the Notifications page (ADR-0423): the account card, with its own lead line, the iPhone's three steps
   and the buttons full width. */
.ma-phone { padding: 16px; margin-bottom: 18px; }
.ma-phone .ma-btn { width: 100%; }
.ma-phone .m-note { margin-bottom: 12px; }
.ma-phone-lead { font: 500 13.5px/1.5 var(--ma-body); color: var(--ma-muted-2); margin: 0 0 14px; }
.ma-phone-title { font: 700 14px/1.3 var(--ma-body); color: var(--ma-ink); margin: 0 0 8px; }
.ma-phone-steps { margin: 0; padding-left: 20px; font: 500 13.5px/1.6 var(--ma-body); color: var(--ma-ink); }