/*!
 * Marrow Dashboard Theme Layer
 * ------------------------------------------------------------------
 * One stylesheet that gives every dashboard shell (coach, athlete, gym)
 * the marrowfitness.com look: a black surface with red accents by default,
 * a light bone day theme on request, and vibrant color coded metrics.
 * Pair it with /assets/js/theme-toggle.js which stamps
 * data-mz-theme="dark" or "light" on the html element and mounts the
 * user facing day and night switch.
 *
 * Include lines for any dashboard page (after the surface stylesheet):
 *   <link rel="stylesheet" href="/assets/css/dashboard-theme.css">
 *   <script src="/assets/js/theme-toggle.js"></script>
 *
 * Rules honored:
 *   - Brand tokens come from /css/styles.css. The dark theme REMAPS their
 *     values under :root[data-mz-theme="dark"] so the whole existing
 *     dashboard CSS flips without rewrites. No new brand identity tokens.
 *   - The metric colors below are FUNCTIONAL data viz tokens, not brand
 *     colors, following the --marrow-ember-text precedent in styles.css.
 *     Each has a light value and a dark value tuned for WCAG AA on its
 *     surface. Meaning is fixed: training reads green, mind reads cyan,
 *     spirit reads violet, money reads gold, roster reads blue.
 *   - prefers-reduced-motion stills every transition this file adds.
 *   - No em or en dashes anywhere in this file.
 */

/* =====================================================================
   1. FUNCTIONAL METRIC TOKENS (light theme defaults, AA on bone)
   ===================================================================== */
:root {
  --mzv-train:  #0F7B37;  /* training and sessions, green */
  --mzv-mind:   #0E7490;  /* mind and recovery, cyan */
  --mzv-spirit: #6D28D9;  /* spirit and streaks, violet */
  --mzv-money:  #995F0B;  /* payments and revenue, gold */
  --mzv-roster: #1D4ED8;  /* roster and people, blue */
  --mzv-onfill: #FBF8F2;  /* constant light text for red or dark fills */
  /* Surface the ember token for theme use even if styles.css is older. */
  --marrow-ember-text: #E08894;
  /* Vitality kit fallbacks so this layer stands alone on pages that do
     not load /assets/css/vitality.css. Same values, no conflict. */
  --mz-accent: var(--brand-fill, var(--marrow-red, #6B0F1A));
  --mz-accent-text: var(--brand-accent, var(--marrow-red, #6B0F1A));
  --mz-surface: var(--bone-white, #FBF8F2);
  --mz-line: var(--line, rgba(10, 9, 8, 0.08));
}

/* =====================================================================
   2. DARK THEME TOKEN REMAP
   The black background, red accent look Edwin locked for the dashboards.
   :root[data-mz-theme="dark"] outranks the :root block in styles.css, so
   every token driven rule in the existing dashboard CSS flips with it.
   ===================================================================== */
:root[data-mz-theme="dark"] {
  color-scheme: dark;
  --bone-cream: #0A0908;                   /* page background, true Marrow black */
  --bone-white: #171411;                   /* cards and raised surfaces */
  --bone-black: #F2EDE3;                   /* primary text, bone on black */
  --steel: #A8B4C4;                        /* secondary text, 8.7:1 on card */
  --steel-mid: #8393A6;
  --steel-light: #C3CEDC;
  --line: rgba(242, 237, 227, 0.14);
  /* Metric colors go neon in the dark, all 7:1 or better on the card. */
  --mzv-train:  #3DDC84;
  --mzv-mind:   #33CFEE;
  --mzv-spirit: #B79CFF;
  --mzv-money:  #F5B83D;
  --mzv-roster: #5EA8FF;
  /* Vitality kit accent text flips to the AA ember red on dark. */
  --mz-accent-text: var(--marrow-ember-text);
}

/* =====================================================================
   3. DARK THEME COMPONENT OVERRIDES
   Everything the token flip cannot reach: hardcoded rgba surfaces, red
   text that needs the brighter ember value on black, and fills whose
   text must stay light in both themes.
   ===================================================================== */

/* Immersive ambient orb backdrop across every dark dashboard surface, matching
 * the Marrow app opening and the sign in page. Six low opacity marrow red orbs
 * spread to the corners and mid edges so depth reads everywhere, never a central
 * cluster. Pinned behind all content at z-index -1 (above the true black page
 * background, below cards and nav). Dark theme only, so the day theme stays bone.
 * The same no new color gradient language as the login backdrop. */
[data-mz-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(139, 24, 40, 0.30), transparent) left -9vmax top -9vmax / 50vmax 50vmax no-repeat,
    radial-gradient(closest-side, rgba(139, 24, 40, 0.30), transparent) right -9vmax top -9vmax / 50vmax 50vmax no-repeat,
    radial-gradient(closest-side, rgba(139, 24, 40, 0.30), transparent) left -9vmax bottom -9vmax / 50vmax 50vmax no-repeat,
    radial-gradient(closest-side, rgba(139, 24, 40, 0.30), transparent) right -9vmax bottom -9vmax / 50vmax 50vmax no-repeat,
    radial-gradient(closest-side, rgba(139, 24, 40, 0.20), transparent) left 50% top -12vmax / 46vmax 46vmax no-repeat,
    radial-gradient(closest-side, rgba(139, 24, 40, 0.20), transparent) left 50% bottom -12vmax / 46vmax 46vmax no-repeat;
  filter: blur(54px);
}
@media (prefers-reduced-motion: no-preference) {
  [data-mz-theme="dark"] body::before {
    animation: dash-orb-drift 40s ease-in-out infinite alternate;
  }
}
@keyframes dash-orb-drift {
  from { transform: translate3d(-1.2%, -1%, 0) scale(1.02); }
  to   { transform: translate3d(1.2%, 1.1%, 0) scale(1.05); }
}

/* Nav and mobile bars: black glass instead of bone glass. */
[data-mz-theme="dark"] .dash-nav { background: rgba(10, 9, 8, 0.88); }
[data-mz-theme="dark"] .dash-bottom-nav { background: rgba(13, 11, 10, 0.94); }

/* The Marrow orb in the nav carries hardcoded bone black strokes. */
[data-mz-theme="dark"] .logo-svg circle,
[data-mz-theme="dark"] .logo-svg g { stroke: #EFE9DC; }

/* Solid marrow red TEXT fails AA on black. Remap known red text to the
   ember accessibility token. Fills, borders, dots, and rails stay solid red. */
[data-mz-theme="dark"] .card-eyebrow,
[data-mz-theme="dark"] .vs-time-period,
[data-mz-theme="dark"] .bnav-btn[aria-current="page"],
[data-mz-theme="dark"] .lib-tab[aria-selected="true"],
[data-mz-theme="dark"] .set-tab[aria-selected="true"],
[data-mz-theme="dark"] .ex-tag.shared,
[data-mz-theme="dark"] .logo-upload-status.is-error,
[data-mz-theme="dark"] .status-pill.onboarding,
[data-mz-theme="dark"] .status-pill.silent,
[data-mz-theme="dark"] .status-pill.uncollectible,
[data-mz-theme="dark"] .recovery-score-num.red,
[data-mz-theme="dark"] .week-row[data-today="true"] .week-day,
[data-mz-theme="dark"] .booking-date-mon,
[data-mz-theme="dark"] .coach-attribution strong,
[data-mz-theme="dark"] .next-up .d,
[data-mz-theme="dark"] .error-block,
[data-mz-theme="dark"] .preview-badge,
[data-mz-theme="dark"] .card-eyebrow.mz-brand-eyebrow {
  color: var(--marrow-ember-text);
}
[data-mz-theme="dark"] .bnav-btn[aria-current="page"] svg { stroke: var(--marrow-ember-text); }

/* Red tinted chips read against black with a slightly stronger tint. */
[data-mz-theme="dark"] .status-pill.onboarding,
[data-mz-theme="dark"] .status-pill.silent,
[data-mz-theme="dark"] .status-pill.uncollectible {
  background: rgba(139, 24, 40, 0.3);
}

/* Green and amber pills: brighter values for AA on the dark tint. */
[data-mz-theme="dark"] .status-pill.active,
[data-mz-theme="dark"] .status-pill.paid,
[data-mz-theme="dark"] .recovery-score-num.green {
  color: #57D9A3;
}
[data-mz-theme="dark"] .status-pill.active,
[data-mz-theme="dark"] .status-pill.paid { background: rgba(87, 217, 163, 0.14); }
[data-mz-theme="dark"] .status-pill.paused,
[data-mz-theme="dark"] .status-pill.open,
[data-mz-theme="dark"] .status-pill.departing,
[data-mz-theme="dark"] .recovery-score-num.amber {
  color: #F0B429;
}
[data-mz-theme="dark"] .status-pill.paused,
[data-mz-theme="dark"] .status-pill.open,
[data-mz-theme="dark"] .status-pill.departing { background: rgba(240, 180, 41, 0.14); }

/* Light theme fix for a pre-existing trap: the amber pill text #B8853F
   reads 3.06:1 on bone, under AA. Deepened to 5.2:1 on themed pages. */
[data-mz-theme="light"] .status-pill.paused,
[data-mz-theme="light"] .status-pill.open,
[data-mz-theme="light"] .status-pill.departing,
[data-mz-theme="light"] .recovery-score-num.amber { color: #8A6118; }

/* Red and dark fills keep constant light text in both themes. Under the
   dark remap --bone-white becomes the card charcoal, which would put dark
   text on a red button. These stay bone. */
[data-mz-theme="dark"] .badge-unread,
[data-mz-theme="dark"] .review-action.primary,
[data-mz-theme="dark"] .vs-link.primary,
[data-mz-theme="dark"] .msg-thread-unread,
[data-mz-theme="dark"] .composer-send,
[data-mz-theme="dark"] .logo-upload-btn:hover,
[data-mz-theme="dark"] .plan-badge,
[data-mz-theme="dark"] .btn-primary-dash,
[data-mz-theme="dark"] .retry-banner,
[data-mz-theme="dark"] .retry-btn,
[data-mz-theme="dark"] .week-tab[data-active="true"][data-deload="true"],
[data-mz-theme="dark"] .att-action.primary,
[data-mz-theme="dark"] .tier-pill.founder_cohort,
[data-mz-theme="dark"] .role-pill.owner {
  color: var(--mzv-onfill);
}

/* Focus ring and selection need the bright red on black. */
[data-mz-theme="dark"] a:focus-visible,
[data-mz-theme="dark"] button:focus-visible,
[data-mz-theme="dark"] input:focus-visible,
[data-mz-theme="dark"] [tabindex]:focus-visible {
  outline-color: var(--marrow-ember-text);
}
[data-mz-theme="dark"] ::selection { background: var(--marrow-red-glow); color: #FBF8F2; }

/* Overlays and shadows deepen on black. */
[data-mz-theme="dark"] .more-sheet { background: rgba(0, 0, 0, 0.62); }
[data-mz-theme="dark"] .dash-settings-menu,
[data-mz-theme="dark"] .card,
[data-mz-theme="dark"] .mz-statcard { box-shadow: none; }
[data-mz-theme="dark"] .dash-settings-menu { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); }
[data-mz-theme="dark"] .skeleton {
  background: linear-gradient(90deg, #1E1A16 0%, rgba(242, 237, 227, 0.08) 50%, #1E1A16 100%);
  background-size: 200% 100%;
}

/* Cards on black get a hairline top light and a faint red breath, the
   marrowfitness.com dark section feel. */
[data-mz-theme="dark"] .card {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(139, 24, 40, 0.10), transparent 55%),
    var(--bone-white);
  border-color: var(--line);
}

/* Print always renders the light palette, ink on paper. */
@media print {
  :root[data-mz-theme="dark"] {
    --bone-cream: #EFE9DC;
    --bone-white: #FBF8F2;
    --bone-black: #0A0908;
    --steel: #475569;
    --line: rgba(10, 9, 8, 0.08);
  }
}

/* =====================================================================
   4. VIBRANT COLOR CODED METRICS (both themes)
   Stat tiles opt in with data-viz="training|mind|spirit|money|roster".
   The number takes the meaning color, the tile gets a soft wash of the
   same hue, and in the dark theme a quiet neon glow.
   ===================================================================== */
.mz-statcard[data-viz]         { --viz: var(--mz-accent); }
.mz-statcard[data-viz="training"] { --viz: var(--mzv-train); }
.mz-statcard[data-viz="mind"]     { --viz: var(--mzv-mind); }
.mz-statcard[data-viz="spirit"]   { --viz: var(--mzv-spirit); }
.mz-statcard[data-viz="money"]    { --viz: var(--mzv-money); }
.mz-statcard[data-viz="roster"]   { --viz: var(--mzv-roster); }

.mz-statcard[data-viz] {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--viz) 9%, var(--mz-surface)), var(--mz-surface));
  border-color: color-mix(in srgb, var(--viz) 22%, var(--mz-line));
}
.mz-statcard[data-viz] .v { color: var(--viz); }
.mz-statcard[data-viz] .d.up { color: var(--viz); }
.mz-statcard[data-viz]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--viz), color-mix(in srgb, var(--viz) 30%, transparent));
}
[data-mz-theme="dark"] .mz-statcard[data-viz] {
  box-shadow: 0 0 34px -18px color-mix(in srgb, var(--viz) 80%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .mz-statcard[data-viz] { background: var(--mz-surface); }
}

/* Momentum sparkline takes the training green. */
.wk-momentum .mz-spark i { background: color-mix(in srgb, var(--mzv-train) 45%, var(--mz-surface)); }
.wk-momentum .mz-spark i:last-child { background: var(--mzv-train); }

/* =====================================================================
   5. SPACING POLISH (both themes)
   Fixes the cramped Today and By the numbers headers and the clipped
   MOMENTUM label Edwin flagged on 2026-07-02.
   ===================================================================== */
.section-head { margin-bottom: 30px; row-gap: 12px; }
.section-sub { margin-top: 8px; }
.card-head { margin-bottom: 22px; row-gap: 6px; }
.card-title { margin-top: 7px; }
.kpi-grid { gap: 16px 18px; }
.card.mz-rail { padding-left: 30px; }
.wk-momentum {
  padding: 4px 2px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.wk-momentum .card-eyebrow { white-space: nowrap; overflow: visible; }
@media (min-width: 720px) {
  .card.mz-rail { padding-left: 34px; }
}

/* =====================================================================
   6. THEME TOGGLE BUTTON (mounted by theme-toggle.js)
   ===================================================================== */
.mz-theme-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--bone-black);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  margin-right: 8px;
  flex-shrink: 0;
}
.mz-theme-btn:hover { border-color: var(--bone-black); background: var(--bone-white); transform: rotate(12deg); }
.mz-theme-btn svg { width: 17px; height: 17px; }
.mz-theme-btn-floating {
  position: fixed;
  right: 16px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 120;
  background: var(--bone-white);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  margin-right: 0;
}
@media (min-width: 900px) {
  .mz-theme-btn-floating { bottom: 20px; }
}

/* =====================================================================
   7. CALENDAR (coach dashboard schedule card)
   Month and week views, sessions from the live scheduling data path.
   ===================================================================== */
.mz-cal-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mz-cal-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel);
  min-width: 110px;
  text-align: center;
}
.mz-cal-nav-btn,
.mz-cal-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone-black);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mz-cal-nav-btn { width: 30px; height: 30px; border-radius: 50%; }
.mz-cal-nav-btn:hover { border-color: var(--bone-black); }
.mz-cal-nav-btn svg { width: 14px; height: 14px; }
.mz-cal-viewtoggle { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.mz-cal-view-btn {
  border: none;
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
}
.mz-cal-view-btn[aria-pressed="true"] {
  background: var(--bone-black);
  color: var(--bone-cream);
}
.mz-cal-weekdays,
.mz-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.mz-cal-weekdays {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  text-align: center;
}
.mz-cal-day {
  position: relative;
  min-height: 56px;
  padding: 6px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--bone-black);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mz-cal-day:hover { border-color: color-mix(in srgb, var(--mz-accent) 40%, var(--line)); }
.mz-cal-day.is-out { opacity: 0.34; }
.mz-cal-day.is-today {
  border-color: var(--marrow-red);
  box-shadow: inset 0 0 0 1px var(--marrow-red);
}
.mz-cal-day[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mz-accent) 12%, var(--mz-surface));
  border-color: var(--marrow-red);
}
.mz-cal-day .n { line-height: 1; }
.mz-cal-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.mz-cal-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mzv-train);
  display: block;
}
.mz-cal-dots i.virtual { background: var(--mzv-mind); }
.mz-cal-count {
  font-size: 9px;
  color: var(--steel);
  letter-spacing: 0.08em;
}
.mz-cal-agenda { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.mz-cal-agenda-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 10px;
}
.mz-cal-week { display: grid; gap: 8px; }
@media (min-width: 900px) { .mz-cal-week { grid-template-columns: repeat(7, 1fr); } }
.mz-cal-weekcol {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  min-height: 84px;
}
.mz-cal-weekcol.is-today { border-color: var(--marrow-red); }
.mz-cal-weekcol h4 {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 0 8px;
  font-weight: 500;
}
.mz-cal-event {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--mzv-train) 10%, var(--mz-surface));
  border-left: 3px solid var(--mzv-train);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--bone-black);
}
.mz-cal-event.virtual {
  background: color-mix(in srgb, var(--mzv-mind) 10%, var(--mz-surface));
  border-left-color: var(--mzv-mind);
}
.mz-cal-event .t {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--steel);
  flex-shrink: 0;
}
.mz-cal-empty-note {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--steel);
}
.mz-cal-empty-note a { color: var(--mz-accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   8. MARROW BRANDMARK (Programming section and anywhere a section
   needs to carry the official app mark)
   ===================================================================== */
.mz-brand-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mz-brand-eyebrow .mz-brand-mark { width: 18px; height: 18px; flex-shrink: 0; }
/* The official mark keeps its ink stroke: bone black in the light theme,
   bone text in the dark theme. The center hex stays marrow red. */
.mz-brand-mark circle,
.mz-brand-mark g { stroke: var(--bone-black); }

/* =====================================================================
   9. ACHIEVEMENT ENGINE, dark theme depth
   The card itself flips with the token remap. This adds the black
   theater dim and a soft accent glow so the moment lands at night.
   ===================================================================== */
[data-mz-theme="dark"] .marrow-achv-wrap { background: rgba(0, 0, 0, 0.62); }
[data-mz-theme="dark"] .marrow-achv-card {
  box-shadow:
    0 0 0 1px rgba(242, 237, 227, 0.07),
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 70px -24px color-mix(in srgb, var(--achv-accent, var(--marrow-red)) 55%, transparent);
}
[data-mz-theme="dark"] .marrow-achv-eyebrow { color: var(--marrow-ember-text); }

/* Mind body spirit panel: keep its red wash breathing on black. */
[data-mz-theme="dark"] .mbs {
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(139, 24, 40, 0.14), transparent 55%),
    var(--bone-white);
  box-shadow: none;
}

/* =====================================================================
   10. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mz-theme-btn,
  .mz-cal-day,
  .mz-cal-nav-btn,
  .mz-cal-view-btn { transition: none; }
  .mz-theme-btn:hover { transform: none; }
}

/* ------------------------------------------------------------------
 * QA walkthrough 2026-07-03: dark-scope repairs for surfaces that
 * hardcode the cream sticky nav or invert fills through raw tokens.
 * Scoped to dark so the light theme keeps the original look untouched.
 * ------------------------------------------------------------------ */
:root[data-mz-theme="dark"] .programs-nav,
:root[data-mz-theme="dark"] .rev-nav {
  background: rgba(10, 9, 8, 0.92);
  border-bottom-color: var(--mz-line);
}
/* Adversarial review 2026-07-03: the onboarding wizards hardcode the same
 * cream sticky bar. This commit put the dark default on those pages, which
 * left bone text (#F2EDE3 after the token flip) on the cream glass. Same
 * repair as programs-nav above. */
:root[data-mz-theme="dark"] .wiz-nav,
:root[data-mz-theme="dark"] .wiz-header {
  background: rgba(10, 9, 8, 0.92);
  border-bottom-color: var(--mz-line);
}
/* Inverted stat tile (light fill in the light theme). Under dark the
 * remapped tokens flipped it cream on black; pin it to the card surface
 * with an accent edge so it still reads as the highlighted tile. */
:root[data-mz-theme="dark"] .metric-tile.accent {
  background: var(--bone-white);
  color: var(--bone-black);
  border-color: var(--mz-accent);
}
:root[data-mz-theme="dark"] .metric-tile.accent .k {
  color: var(--steel);
  opacity: 1;
}
/* The accent tile's value and meta pin to the inverted fill colors, which
 * both resolve dark-on-dark once the tile sits on a card surface. Pin them
 * back to readable ink and secondary text. */
:root[data-mz-theme="dark"] .metric-tile.accent .v { color: var(--bone-black); }
:root[data-mz-theme="dark"] .metric-tile.accent .meta { color: var(--steel); opacity: 1; }

/* =====================================================================
   11. CONTRAST PAIRING LAYER  (V3 item 13)
   ---------------------------------------------------------------------
   A semantic text-on-background system. Every text ROLE maps to a
   foreground token that is guaranteed to clear WCAG contrast against the
   background it is meant to sit on: 4.5:1 for normal text, 3:1 for large
   text. Nothing here restyles an existing selector. It only defines
   custom properties and opt-in utility classes, so with no class adopted
   and no theme selected the rendered look is byte for byte the current
   Marrow default. Surfaces adopt the roles page by page in a later wave.

   Every value maps to an EXISTING token from styles.css or from the
   sections above. No new brand color values are introduced here.

   Verified pairings (sRGB relative luminance, WCAG 2.x):
     LIGHT (page --bone-cream #EFE9DC, card --bone-white, marrow-red fill)
       heading / body   --bone-black #0A0908 on bone-cream ....... 16.45:1
       muted            --steel #475569 on bone-cream ............. 6.26:1
       link             --marrow-red #6B0F1A on bone-cream ....... 10.16:1
       on-accent        --mzv-onfill #FBF8F2 on marrow-red ....... 11.60:1
       placeholder      --steel #475569 on bone-cream ............. 6.26:1
       badge            --bone-black on --steel-light chip ....... 11.36:1
     DARK (page #0A0908, card #171411, marrow-red fill)
       heading / body   #F2EDE3 on page ......................... 17.05:1
       heading / body   #F2EDE3 on card ......................... 15.72:1
       muted            #A8B4C4 on card .......................... 8.73:1
       link             --marrow-ember-text #E08894 on page ...... 7.69:1
       link             --marrow-ember-text #E08894 on card ...... 7.09:1
       on-accent        --mzv-onfill #FBF8F2 on marrow-red ....... 11.60:1
       placeholder      #A8B4C4 on card .......................... 8.73:1
   The role tokens ride the existing token flips, so --mz-fg-heading and
   its siblings auto-correct in the dark theme. Only the link role needs
   an explicit
   dark value, because solid marrow red text scores 1.62:1 on black.

   Design note (item 51 research fold). A premium dashboard earns its calm
   from restraint, not decoration. The disciplines applied here:
     - One ink for text, one accent for meaning. Color carries data
       (the metric tokens above), never mood. Text stays near-monochrome.
     - Contrast is a floor, not a target. Body copy sits far above 4.5:1
       so the eye never strains, while muted and placeholder text stay a
       clear step down without dropping under the line.
     - A muted role is a deliberate tier, not faded body text. It reads as
       hierarchy, so secondary information recedes without becoming noise.
     - The type scale climbs in gentle steps (roughly a 1.2 ratio) and the
       spacing rhythm holds to an 8px lattice (section 5 above), so the
       page feels engineered rather than assembled.
     - Links declare themselves with the brand red, underlined on adoption,
       never by color alone, so meaning survives a grayscale or colorblind
       read.
   ===================================================================== */
:root {
  /* Text role foregrounds (light theme values, all existing tokens). */
  --mz-fg-heading:     var(--bone-black);
  --mz-fg-body:        var(--bone-black);
  --mz-fg-muted:       var(--steel);
  --mz-fg-on-card:     var(--bone-black);
  --mz-fg-on-accent:   var(--mzv-onfill);   /* text on a marrow-red or brand-primary fill */
  --mz-fg-badge:       var(--bone-black);    /* text on a neutral chip surface */
  --mz-fg-placeholder: var(--steel);         /* WCAG pass, not the sub-3:1 hint gray */
  --mz-fg-link:        var(--marrow-red);

  /* Background reference aliases, so a surface can name the pairing it is
     adopting without guessing which token the role was tuned against. */
  --mz-bg-page:    var(--bone-cream);
  --mz-bg-card:    var(--bone-white);
  --mz-bg-accent:  var(--marrow-red);
  --mz-bg-badge:   var(--steel-light);
}

/* Only the link role cannot ride the token flip: solid marrow red text
   fails on the dark page. Remap it to the accessibility ember, matching
   the red-text handling already used across section 3. */
:root[data-mz-theme="dark"] {
  --mz-fg-link: var(--marrow-ember-text);
}

/* Opt-in utility classes. A surface adds the class to adopt the role.
   Absent the class, nothing changes. */
.mz-fg-heading { color: var(--mz-fg-heading); }
.mz-fg-body    { color: var(--mz-fg-body); }
.mz-fg-muted   { color: var(--mz-fg-muted); }
.mz-fg-on-card { color: var(--mz-fg-on-card); }
.mz-fg-badge   { color: var(--mz-fg-badge); }
.mz-on-accent  { color: var(--mz-fg-on-accent); }
.mz-fg-link    { color: var(--mz-fg-link); }
.mz-fg-link:hover { color: var(--marrow-red-glow); }
.mz-fg-placeholder::placeholder { color: var(--mz-fg-placeholder); opacity: 1; }

/* =====================================================================
   12. PER-COACH THEMING ENGINE HOOKS  (V3 items 18 to 21, engine only)
   ---------------------------------------------------------------------
   A coach brand layer that sits OVER the locked Marrow tokens, never
   replacing them. The three properties below default to the locked
   brand values, so a surface that reads var(--mz-brand-primary) renders
   exactly the Marrow red until a coach theme is stored. No existing
   selector reads these yet, so defining them changes nothing today.

   /assets/js/theme-engine.js fills these at runtime only when a coach
   theme exists, and recomputes --mz-brand-on-primary and the on-accent
   pairing from the chosen color's luminance so text on the brand fill
   always clears 4.5:1. When nothing is stored the engine writes nothing
   and these defaults hold, keeping the default look unchanged.
   ===================================================================== */
:root {
  --mz-brand-primary:     var(--marrow-red);        /* coach primary, falls back to locked red */
  --mz-brand-offset:      var(--marrow-red-glow);   /* coach offset / hover, falls back to glow */
  --mz-brand-on-primary:  var(--mzv-onfill);        /* readable text on the primary fill */
}

/* Opt-in brand fill utilities. Text color is the engine-computed readable
   pairing, so it stays legible whatever primary the coach chose. */
.mz-brand-fill {
  background: var(--mz-brand-primary);
  color: var(--mz-brand-on-primary);
}
.mz-brand-fill--offset { background: var(--mz-brand-offset); color: var(--mz-brand-on-primary); }
.mz-brand-edge { border-color: var(--mz-brand-primary); }

/* =====================================================================
   13. DASHBOARD BUTTON AFFORDANCE  (V3.1 item 9, appended 2026-07-07)
   ---------------------------------------------------------------------
   This theme layer loads AFTER each surface stylesheet, so it can enrich
   the per-surface .btn-primary-dash base (defined in coach/athlete/gym
   dashboard.css) without editing it. Adds depth, a clear pressed state,
   and a focus-visible ring so the dashboard primary button reads as
   obviously clickable. Hover background stays owned by the surface rule
   (a different property), so nothing is overwritten. The reworked
   .btn-secondary base in styles.css keys off --bone-black, which the dark
   remap in section 2 flips, so the secondary button self-corrects to light
   ink on the dark dashboard theme with no extra rule here.
   ===================================================================== */
.btn-primary-dash {
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.18);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-primary-dash:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(107, 15, 26, 0.30); }
.btn-primary-dash:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 3px; }
.btn-primary-dash:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(10, 9, 8, 0.24); }
:root[data-mz-theme="dark"] .btn-primary-dash:focus-visible { outline-color: var(--marrow-ember-text); }
:root[data-mz-theme="dark"] .btn-primary-dash:hover { box-shadow: 0 8px 22px rgba(139, 24, 40, 0.5); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary-dash { transition: background 0.15s ease; }
  .btn-primary-dash:hover, .btn-primary-dash:active { transform: none; }
}

/* =====================================================================
   14. COLOR PICKER POPOVER  (V3.1 item 1, appended 2026-07-07)
   ---------------------------------------------------------------------
   Styles only. The open/close, swatch selection, and native input wiring
   are built separately in JS against these class names. Premium, compact,
   floats above content, keyboard focusable, dark-mode aware through the
   token flip. Used where a coach or gym picks their brand primary color.
   ===================================================================== */
.mz-colorpick { position: relative; display: inline-flex; }

.mz-colorpick-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: var(--bone-white);
  color: var(--bone-black);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 600 13px var(--sans);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.mz-colorpick-trigger:hover { border-color: var(--bone-black); box-shadow: 0 6px 16px rgba(10, 9, 8, 0.10); }
.mz-colorpick-trigger:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 2px; }
.mz-colorpick-trigger .mz-colorpick-chip {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--mz-brand-primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex: none;
}
.mz-colorpick-trigger .mz-colorpick-caret {
  width: 10px;
  height: 10px;
  color: var(--steel);
  flex: none;
  transition: transform 0.15s ease;
}
.mz-colorpick.is-open .mz-colorpick-trigger .mz-colorpick-caret,
.mz-colorpick-trigger[aria-expanded="true"] .mz-colorpick-caret { transform: rotate(180deg); }

.mz-colorpick-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 140;
  min-width: 232px;
  padding: 14px;
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(10, 9, 8, 0.18);
  display: none;
}
.mz-colorpick-panel[data-mz-open="true"],
.mz-colorpick.is-open .mz-colorpick-panel {
  display: block;
  animation: mz-colorpick-in 0.16s ease both;
}
.mz-colorpick-panel--right { left: auto; right: 0; }
[data-mz-theme="dark"] .mz-colorpick-panel { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); }
@keyframes mz-colorpick-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mz-colorpick-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.mz-colorpick-swatch {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mz-colorpick-swatch:hover { transform: scale(1.08); }
.mz-colorpick-swatch:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 2px; }
.mz-colorpick-swatch[aria-pressed="true"],
.mz-colorpick-swatch.is-selected {
  box-shadow: 0 0 0 2px var(--bone-white), 0 0 0 4px var(--bone-black);
}
[data-mz-theme="dark"] .mz-colorpick-swatch:focus-visible { outline-color: var(--marrow-ember-text); }

.mz-colorpick-native {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font: 500 12px var(--sans);
  color: var(--steel);
}
.mz-colorpick-native label { color: var(--steel); }
.mz-colorpick-native input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.mz-colorpick-native input[type="color"]:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mz-colorpick-trigger,
  .mz-colorpick-trigger .mz-colorpick-caret,
  .mz-colorpick-swatch { transition: none; }
  .mz-colorpick-panel[data-mz-open="true"],
  .mz-colorpick.is-open .mz-colorpick-panel { animation: none; }
  .mz-colorpick-swatch:hover { transform: none; }
}

/* =====================================================================
   15. COMMUNITY + EVENTS TABS AND CARDS  (V3.1 item 12, 2026-07-07)
   ---------------------------------------------------------------------
   Two new dashboard tabs, Community and Events. The tabs and panels reuse
   the existing .dash-section-btn and .dash-section look verbatim, so they
   are visually identical to Today and Training. The two additions below
   are only the per-section accent hooks and the premium surface cards the
   Events and Community feeds render into.

   Every text-on-background pair uses the readable-ink pairing tokens
   (--mz-fg-*, section 11) or the engine-computed --mz-brand-on-primary, so
   copy stays legible on the light theme, the dark theme, and any per-coach
   primary color. No hardcoded near-white ink on light.
   ===================================================================== */

/* Tab accent parity for the two new sections (matches the existing
   underline treatment in the surface dashboard.css). */
.dash-section-btn[data-section="community"][aria-selected="true"]::after,
.dash-section-btn[data-section="events"][aria-selected="true"]::after {
  background: var(--marrow-red);
}
[data-mz-theme="dark"] .dash-section-btn[data-section="community"][aria-selected="true"]::after,
[data-mz-theme="dark"] .dash-section-btn[data-section="events"][aria-selected="true"]::after {
  background: var(--marrow-ember-text);
}

/* ----- Events surface, built to beat Eventbrite ----- */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.ev-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mz-bg-card, var(--bone-white));
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ev-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(10, 9, 8, 0.10);
  border-color: color-mix(in srgb, var(--mz-brand-primary) 40%, var(--line));
}
[data-mz-theme="dark"] .ev-card:hover { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5); }

.ev-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--mz-brand-primary) 24%, var(--bone-white)),
      color-mix(in srgb, var(--mz-brand-primary) 6%, var(--bone-white)));
  display: flex;
  align-items: flex-end;
  padding: 12px;
  overflow: hidden;
}
.ev-card-media img,
.ev-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ev-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}
.ev-card-date {
  font: 600 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mz-fg-muted, var(--steel));
}
.ev-card-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--mz-fg-heading, var(--bone-black));
}
.ev-card-meta {
  font: 400 13.5px var(--sans);
  line-height: 1.5;
  color: var(--mz-fg-muted, var(--steel));
}
.ev-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

/* Badge sits on the brand fill, ink is the engine-computed readable pairing. */
.ev-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mz-brand-primary);
  color: var(--mz-brand-on-primary);
  font: 600 10.5px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ev-badge--soft {
  background: color-mix(in srgb, var(--mz-brand-primary) 14%, var(--bone-white));
  color: var(--mz-fg-heading, var(--bone-black));
}
.ev-badge--free {
  background: color-mix(in srgb, var(--mzv-train) 16%, var(--bone-white));
  color: var(--mzv-train);
}

/* RSVP action. Compact filled button on the brand color, full microstates. */
.ev-rsvp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--mz-brand-primary);
  color: var(--mz-brand-on-primary);
  font: 600 12.5px var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.18);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ev-rsvp:hover { background: var(--mz-brand-offset); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(107, 15, 26, 0.28); }
.ev-rsvp:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 2px; }
.ev-rsvp:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(10, 9, 8, 0.24); }
.ev-rsvp[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mz-brand-primary) 14%, var(--bone-white));
  color: var(--mz-fg-heading, var(--bone-black));
  box-shadow: none;
}
.ev-rsvp[disabled] { background: var(--steel); color: var(--mzv-onfill); cursor: not-allowed; box-shadow: none; }
[data-mz-theme="dark"] .ev-rsvp:focus-visible { outline-color: var(--marrow-ember-text); }

/* Co-host stack. Small overlapping avatars plus a label. */
.ev-cohost { display: inline-flex; align-items: center; gap: 8px; }
.ev-cohost-avatars { display: inline-flex; }
.ev-cohost-avatars > * {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--bone-white);
  margin-left: -8px;
  object-fit: cover;
  background: color-mix(in srgb, var(--mz-brand-primary) 20%, var(--bone-white));
}
.ev-cohost-avatars > *:first-child { margin-left: 0; }
.ev-cohost-label {
  font: 500 12px var(--sans);
  color: var(--mz-fg-muted, var(--steel));
}

/* ----- Community feed ----- */
.cm-feed { display: flex; flex-direction: column; gap: 16px; }
.cm-post {
  background: var(--mz-bg-card, var(--bone-white));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cm-post:hover { border-color: color-mix(in srgb, var(--mz-brand-primary) 30%, var(--line)); box-shadow: 0 12px 30px rgba(10, 9, 8, 0.07); }
[data-mz-theme="dark"] .cm-post:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.cm-post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cm-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: color-mix(in srgb, var(--mz-brand-primary) 20%, var(--bone-white));
  flex: none;
}
.cm-post-author {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--mz-fg-heading, var(--bone-black));
  line-height: 1.2;
}
.cm-post-time {
  font: 500 11.5px var(--mono);
  letter-spacing: 0.06em;
  color: var(--mz-fg-muted, var(--steel));
}
.cm-post-body {
  font: 400 14.5px var(--sans);
  line-height: 1.6;
  color: var(--mz-fg-body, var(--bone-black));
}
.cm-post-actions { display: flex; gap: 18px; margin-top: 14px; }
.cm-post-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font: 500 12.5px var(--sans);
  color: var(--mz-fg-muted, var(--steel));
  transition: color 0.15s ease;
}
.cm-post-action:hover { color: var(--mz-fg-link, var(--marrow-red)); }
.cm-post-action:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 3px; border-radius: 3px; }
.cm-post-action[aria-pressed="true"] { color: var(--mz-fg-link, var(--marrow-red)); font-weight: 600; }
[data-mz-theme="dark"] .cm-post-action:focus-visible { outline-color: var(--marrow-ember-text); }

/* Community area tiles (topics, spaces, groups a member can enter). */
.cm-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.cm-area-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mz-brand-primary) 7%, var(--bone-white)), var(--bone-white));
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.cm-area-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mz-brand-primary) 45%, var(--line));
  box-shadow: 0 14px 32px rgba(10, 9, 8, 0.08);
}
.cm-area-card:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 2px; }
[data-mz-theme="dark"] .cm-area-card:focus-visible { outline-color: var(--marrow-ember-text); }
.cm-area-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--mz-fg-heading, var(--bone-black));
}
.cm-area-count {
  font: 500 12px var(--mono);
  letter-spacing: 0.08em;
  color: var(--mz-fg-muted, var(--steel));
}

@supports not (background: color-mix(in srgb, red, blue)) {
  .ev-card-media { background: var(--bone-cream); }
  .cm-area-card { background: var(--bone-white); }
}
@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-rsvp, .cm-post, .cm-post-action, .cm-area-card { transition: none; }
  .ev-card:hover, .ev-rsvp:hover, .cm-area-card:hover { transform: none; }
}

/* =====================================================================
   16. CHECK-IN SECTION  (V3.1 item 10, appended 2026-07-07)
   ---------------------------------------------------------------------
   A shared check-in block reused by both the Training and Nutrition
   surfaces: the section shell, a cadence row, and the delivery-method
   pills (text, virtual, phone, email). Readable-ink tokens throughout so
   it holds on light, dark, and any per-coach primary.
   ===================================================================== */
.checkin-section {
  background: var(--mz-bg-card, var(--bone-white));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checkin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.checkin-section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--mz-fg-heading, var(--bone-black));
}
.checkin-section-note {
  font: 400 13px var(--sans);
  color: var(--mz-fg-muted, var(--steel));
}

.checkin-cadence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkin-cadence-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bone-black) 3%, var(--bone-white));
  color: var(--mz-fg-body, var(--bone-black));
  font: 600 12.5px var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.checkin-cadence-option:hover { border-color: var(--bone-black); transform: translateY(-1px); }
.checkin-cadence-option:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 2px; }
.checkin-cadence-option[aria-pressed="true"],
.checkin-cadence-option.is-selected {
  background: var(--mz-brand-primary);
  border-color: var(--mz-brand-primary);
  color: var(--mz-brand-on-primary);
}
[data-mz-theme="dark"] .checkin-cadence-option:focus-visible { outline-color: var(--marrow-ember-text); }

/* Delivery-method pills. Neutral by default, brand fill when selected, each
   method keeps a small color cue drawn from the functional metric tokens
   so the four read apart at a glance. */
.checkin-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checkin-method {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bone-white);
  color: var(--mz-fg-body, var(--bone-black));
  font: 600 12.5px var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.checkin-method::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--steel);
  flex: none;
}
.checkin-method--text::before    { background: var(--mzv-train); }
.checkin-method--virtual::before { background: var(--mzv-mind); }
.checkin-method--phone::before   { background: var(--mzv-money); }
.checkin-method--email::before   { background: var(--mzv-roster); }
.checkin-method:hover { border-color: var(--bone-black); transform: translateY(-1px); }
.checkin-method:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 2px; }
.checkin-method[aria-pressed="true"],
.checkin-method.is-selected {
  background: var(--mz-brand-primary);
  border-color: var(--mz-brand-primary);
  color: var(--mz-brand-on-primary);
}
.checkin-method[aria-pressed="true"]::before,
.checkin-method.is-selected::before { background: var(--mz-brand-on-primary); }
[data-mz-theme="dark"] .checkin-method:focus-visible { outline-color: var(--marrow-ember-text); }

@supports not (background: color-mix(in srgb, red, blue)) {
  .checkin-cadence-option { background: var(--bone-white); }
}
@media (prefers-reduced-motion: reduce) {
  .checkin-cadence-option, .checkin-method { transition: border-color 0.15s ease, background 0.15s ease; }
  .checkin-cadence-option:hover, .checkin-method:hover { transform: none; }
}