/* ============================================================================
   MATCH CENTRE — one page for the whole life of a fixture.
   Built from the `design_handoff_match_centre` bundle (option 1b).

   The page used to be three loosely related screens: a detail page, a squad
   builder and a live tracker, each with its own idea of what a fixture looks
   like. This is one page with three states, derived from the data — `pre`,
   `live`, `finished` — so the coach opens the same URL on Tuesday, on Saturday
   at 15:00, and on Sunday morning, and finds the thing that matters that day
   in the same place.

   THE HANDOFF SPECIFIES RAW HEX. This file does not. Every value below is the
   repo's own token, per the handoff's own instruction ("express values as the
   existing CSS custom properties rather than raw hex where a token exists").
   That is not pedantry: RUCK is multi-tenant, and a hard-coded `#e84545` under
   a hard-coded `#fff` is exactly the bug that shipped white-on-yellow lettering
   on the live bar for any club whose colour is not red. Accent grounds here use
   the SOLVED pair --accent-btn / --on-accent, computed per club in brand.js.
   ============================================================================ */

:root {
  /* THE BOARD. A scoreboard is black in a stadium and black in a living room;
     it does not follow the reading theme, because it is not a reading surface.
     These four are therefore fixed in both themes — the one place in the
     product where that is the correct answer rather than an oversight.
     --board-dim is measured at 7.4:1 on --board. */
  --board: #14161c;
  --board-raised: #1e222b;
  --board-line: rgba(255, 255, 255, 0.11);
  --board-ink: #ffffff;
  --board-dim: #aeb6c4;

  /* Clocks, shirt numbers and scorelines. The handoff asks for JetBrains Mono
     from Google Fonts; it also offers the fallback, and RUCK deliberately
     dropped its Google Fonts request when Archivo was self-hosted — a third
     party in front of the first letter, for a face used on four labels, is a
     bad trade. System monospace with tabular figures does the same job with no
     network at all. */
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* The handoff's body-card shadow, between --shadow-xs and --shadow-sm. */
  --mc-card-shadow: 0 2px 8px rgba(22, 23, 28, 0.05);
}
[data-theme="dark"] {
  --mc-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* ---------------------------------------------------------------------------
   FRAME
   --------------------------------------------------------------------------- */
.match-centre { max-width: 1180px; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   HEADER — breadcrumb, scoreboard, tabs. One white block, hairline below.
   --------------------------------------------------------------------------- */
.mc-head {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-bottom-width: 1px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 22px 30px 0;
}

.mc-topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}

.mc-crumbs {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: var(--fs-micro); font-weight: var(--w-strong);
  letter-spacing: 0; text-transform: none; color: var(--text-tertiary);
}
/* An inline breadcrumb link is text in a sentence, so WCAG's 24px minimum is
   what applies rather than the 38px this product uses for buttons — but 17px
   of bare line box did not clear even that. */
.mc-crumbs a { color: var(--text-tertiary); text-decoration: none; display: inline-block; padding: 5px 0; }
.mc-crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.mc-crumbs .mc-crumb-mid { color: var(--text-secondary); }
.mc-crumbs .mc-crumb-now {
  color: var(--text-primary); font-weight: var(--w-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-crumbs .mc-sep { color: var(--text-tertiary); flex-shrink: 0; }

.mc-chips { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-full);
  font-size: var(--fs-micro); font-weight: var(--w-display); letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}
.mc-chip.is-pre { background: var(--info-bg); color: var(--info-text); }
/* Live is the club's own moment, so it wears the club's colour — as a SOLID
   ground, using the solved pair. It was the club colour at 20% under
   --accent-text, which is solved against a card and measured 3.92:1 on the wash
   for a green club: the one chip on the page that must never be missed. */
.mc-chip.is-live { background: var(--accent-btn); color: var(--on-accent); }
.mc-chip.is-done { background: var(--success-bg); color: var(--success-text); }
.mc-chip.is-off { background: var(--warning-bg); color: var(--warning-text); }
.mc-chip.is-comp {
  background: var(--n-50); color: var(--text-secondary);
  font-size: var(--fs-label); letter-spacing: 0; text-transform: none;
  font-weight: var(--w-title);
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
}

/* --- scoreboard ---------------------------------------------------------- */
.mc-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 24px;
  padding-bottom: 20px; margin: 0;
}
.mc-side { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mc-side.is-away { flex-direction: row-reverse; text-align: right; }
.mc-side-text { min-width: 0; }
/* These are spans (they live inside the h1), so they need to be told to stack —
   left inline, the club's record ran on after its name and the away side read
   "Clube Desportivo Universitário do Porto FORA" as one sentence. */
.mc-club, .mc-record { display: block; }
/* A size modifier on the existing .team-badge, not a second crest component:
   the deterministic monogram hue, the logo fallback and the alt handling are
   already solved there and must not fork. */
.mc-crest.team-badge {
  width: 56px; height: 56px; border-radius: var(--r-md); flex-shrink: 0;
  font-family: var(--font-display); font-size: var(--fs-title);
  font-weight: var(--w-display); letter-spacing: -0.01em;
}
.mc-club {
  font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--w-display);
  letter-spacing: -0.02em; line-height: var(--lh-tight); color: var(--text-primary);
  overflow-wrap: anywhere;
}
.mc-record {
  margin-top: 3px;
  font-size: var(--fs-micro); font-weight: var(--w-title);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--text-tertiary);
}

.mc-centre {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  min-width: 244px;
}
.mc-panel {
  padding: 11px 28px; border-radius: var(--r-lg); text-align: center;
  background: var(--n-50); border: 1px solid var(--border-subtle);
}
.mc-panel.is-board {
  background: var(--board); border-color: transparent;
  display: inline-flex; align-items: center; gap: 16px; padding: 9px 22px;
}
.mc-kick {
  display: block;
  font-family: var(--font-display); font-size: var(--fs-score); font-weight: var(--w-display);
  letter-spacing: -0.03em; line-height: 1.05; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mc-kick-sub {
  display: block; margin-top: 3px;
  font-size: var(--fs-label); font-weight: var(--w-title); color: var(--text-tertiary);
}
.mc-score {
  font-family: var(--font-display); font-size: var(--fs-hero); font-weight: var(--w-display);
  letter-spacing: -0.03em; line-height: 1; color: var(--board-ink);
  font-variant-numeric: tabular-nums;
}
.mc-score.is-them { color: var(--board-dim); }
.mc-score-sep { font-size: var(--fs-stat); font-weight: var(--w-title); color: var(--board-dim); }
.mc-clockcol { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mc-clock {
  font-family: var(--font-mono); font-size: var(--fs-title); font-weight: 700;
  color: var(--board-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* The running clock is the club's colour, solved for a dark ground — the one
   already computed for dark mode. A raw pink here would be a second red that
   no club chose. */
.mc-clock.is-running { color: var(--accent-text-dark); }
.mc-period {
  font-size: var(--fs-micro); font-weight: var(--w-display); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--board-dim); white-space: nowrap;
}
.mc-livedot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: mc-pulse 1.5s ease-in-out infinite; flex-shrink: 0;
}
@keyframes mc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --- tabs ---------------------------------------------------------------- */
.mc-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 12px 18px; min-height: 44px; white-space: nowrap;
  font-family: inherit; font-size: var(--fs-body); font-weight: var(--w-strong);
  color: var(--text-secondary); text-decoration: none;
  border-bottom: 2.5px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mc-tab:hover { color: var(--text-primary); }
.mc-tab.is-active {
  color: var(--text-primary); font-weight: var(--w-title);
  border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------------------
   BODY
   --------------------------------------------------------------------------- */
.mc-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 336px;
  gap: 18px; align-items: start;
  padding: 20px 30px 30px;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle); border-top: none;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.mc-main, .mc-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.mc-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--mc-card-shadow);
}
.mc-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.mc-card-title {
  font-family: var(--font-display); font-size: var(--fs-title);
  font-weight: var(--w-title); letter-spacing: var(--track-snug);
  color: var(--text-primary); margin: 0;
}
.mc-card-count {
  font-size: var(--fs-label); font-weight: var(--w-title); color: var(--text-tertiary);
  flex-shrink: 0;
}

/* --- scoring bar (live) --------------------------------------------------- */
.mc-actions { background: var(--board); border-radius: var(--r-lg); padding: 18px 20px; }
.mc-act-label {
  font-size: var(--fs-micro); font-weight: var(--w-display); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--board-dim); margin-bottom: 13px;
}
.mc-act-row { display: flex; flex-wrap: wrap; gap: 9px; }
.mc-act {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  min-height: 42px; padding: 0 18px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-body); font-weight: var(--w-title);
  background: rgba(255, 255, 255, 0.09); color: var(--board-ink);
  transition: background var(--t-fast) var(--ease);
}
.mc-act:hover { background: rgba(255, 255, 255, 0.17); }
.mc-act.is-primary {
  background: var(--accent-btn); color: var(--on-accent); font-weight: var(--w-display);
}
.mc-act.is-primary:hover { background: var(--accent-dark); }
.mc-swatch { width: 13px; height: 13px; border-radius: var(--r-xs); flex-shrink: 0; }
.mc-swatch.is-yellow { background: var(--notify); }
.mc-swatch.is-red { background: var(--danger); }
/* A focus ring has to clear a near-black ground, so it cannot be the accent. */
.mc-actions .mc-act:focus-visible,
.mc-panel.is-board :focus-visible { outline: 2px solid var(--board-ink); outline-offset: 2px; }

/* --- side toggle ---------------------------------------------------------- */
.mc-sides {
  display: inline-flex; padding: 3px; gap: 3px; margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.08); border-radius: var(--r-full);
  max-width: 100%; overflow: hidden;
}
.mc-side-btn {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  min-height: 38px; padding: 0 14px; border-radius: var(--r-full);
  font-size: var(--fs-label); font-weight: var(--w-title); color: var(--board-dim);
  background: transparent; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 46%;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mc-side-btn.is-active { background: var(--board-raised); color: var(--board-ink); }

/* --- preparation (pre) ---------------------------------------------------- */
.mc-prep-row {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 10px; border-radius: var(--r-md);
}
.mc-prep-row + .mc-prep-row { margin-top: 2px; }
.mc-prep-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--n-50); border: 2px solid var(--n-200);
}
.mc-prep-row.is-done .mc-prep-dot {
  background: var(--success-bg); border-color: var(--success);
}
.mc-prep-body { flex: 1; min-width: 0; }
.mc-prep-title, .mc-prep-sub { display: block; }
.mc-prep-title { font-size: var(--fs-body); font-weight: var(--w-title); color: var(--text-primary); }
.mc-prep-row.is-done .mc-prep-title { color: var(--text-secondary); }
.mc-prep-sub { font-size: var(--fs-label); color: var(--text-secondary); margin-top: 1px; }
.mc-prep-tag {
  flex-shrink: 0; padding: 5px 11px; border-radius: var(--r-full);
  font-size: var(--fs-micro); font-weight: var(--w-display); letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--warning-bg); color: var(--warning-text);
}
.mc-prep-row.is-done .mc-prep-tag { background: var(--success-bg); color: var(--success-text); }

/* --- timeline ------------------------------------------------------------- */
.mc-time-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
.mc-time-row + .mc-time-row { margin-top: 4px; }
.mc-time-clock {
  text-align: right; padding-top: 1px;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
  color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.mc-time-body {
  border-left: 2px solid var(--border-subtle); padding: 0 0 18px 18px;
  position: relative;
}
.mc-time-row:last-child .mc-time-body { padding-bottom: 2px; }
.mc-time-dot {
  position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--bg-card);
  background: var(--n-400);
}
.mc-time-dot.is-ours { background: var(--accent); }
.mc-time-dot.is-yellow { background: var(--notify); }
.mc-time-dot.is-red { background: var(--danger); }
.mc-time-title { font-size: var(--fs-body); font-weight: var(--w-title); color: var(--text-primary); }
.mc-time-sub { font-size: var(--fs-label); color: var(--text-secondary); margin-top: 2px; }
.mc-time-tools { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* btn-sm is 34px across the product; on a touchline, undoing the wrong event
   because the right one was a 34px target is the failure that matters. */
.mc-time-tools .btn { min-height: 38px; }

.mc-empty {
  padding: 30px 20px; text-align: center;
  border: 1.5px dashed var(--border-default); border-radius: var(--r-md);
}
.mc-empty-title { font-size: var(--fs-body); font-weight: var(--w-title); color: var(--text-secondary); }
.mc-empty-sub { font-size: var(--fs-label); color: var(--text-tertiary); margin-top: 4px; }

/* --- comparison ----------------------------------------------------------- */
.mc-cmp-row + .mc-cmp-row { margin-top: 15px; }
.mc-cmp-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline; gap: 10px; margin-bottom: 5px;
}
.mc-cmp-us, .mc-cmp-them {
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--w-display);
  font-variant-numeric: tabular-nums;
}
.mc-cmp-us { color: var(--text-primary); }
.mc-cmp-them { color: var(--text-tertiary); text-align: right; }
.mc-cmp-label {
  font-size: var(--fs-micro); font-weight: var(--w-display); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-tertiary); text-align: center;
}
.mc-cmp-bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
.mc-cmp-half { display: flex; }
.mc-cmp-half.is-us { justify-content: flex-end; }
.mc-cmp-bar { height: 6px; border-radius: var(--r-full); background: var(--n-200); }
.mc-cmp-bar.is-us { background: var(--accent); }

/* ---------------------------------------------------------------------------
   RAIL
   --------------------------------------------------------------------------- */
.mc-rail-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--mc-card-shadow);
}
.mc-rail-card.is-board { background: var(--board); border-color: transparent; color: var(--board-ink); }
.mc-rail-label {
  font-size: var(--fs-micro); font-weight: var(--w-display); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 14px;
}
.mc-rail-card.is-board .mc-rail-label { color: var(--board-dim); }

.mc-logi-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: var(--fs-label);
}
.mc-logi-row + .mc-logi-row { margin-top: 9px; }
.mc-logi-key { color: var(--board-dim); }
.mc-logi-val { font-weight: var(--w-title); color: var(--board-ink); text-align: right; min-width: 0; }
.mc-divider { height: 1px; background: var(--board-line); margin: 16px 0; }

.mc-staff { display: flex; align-items: center; }
.mc-staff-av {
  width: 34px; height: 34px; border-radius: 50%; margin-right: -8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: var(--w-display); color: var(--board-ink);
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-dark));
  border: 2px solid var(--board);
}
.mc-staff-av:last-child { margin-right: 0; }
.mc-staff-more { margin-left: 14px; font-size: var(--fs-label); color: var(--board-dim); }

.mc-avail-n {
  font-family: var(--font-display); font-size: var(--fs-match); font-weight: var(--w-display);
  letter-spacing: -0.03em; line-height: 1; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mc-avail-of { font-size: var(--fs-label); font-weight: var(--w-title); color: var(--text-secondary); margin-left: 7px; }
.mc-avail-bar {
  display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden;
  margin-top: 12px; background: var(--n-200);
}
.mc-avail-seg { height: 100%; }
.mc-avail-seg.is-yes { background: var(--success); }
.mc-avail-seg.is-maybe { background: var(--warning); }
.mc-avail-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px;
  font-size: var(--fs-label); font-weight: var(--w-medium); color: var(--text-secondary);
}
.mc-avail-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mc-avail-key { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.mc-high-row { display: flex; align-items: center; gap: 11px; }
.mc-high-row + .mc-high-row { margin-top: 13px; }
/* The design-system .avatar, one step between -sm and the default. */
.mc-high-av.avatar { width: 38px; height: 38px; font-size: var(--fs-label); }
.mc-high-body { flex: 1; min-width: 0; }
.mc-high-name, .mc-high-note { display: block; }
.mc-high-name { font-size: var(--fs-body); font-weight: var(--w-title); color: var(--text-primary); }
.mc-high-note { font-size: var(--fs-label); color: var(--text-secondary); margin-top: 1px; }
.mc-high-val {
  font-family: var(--font-display); font-size: var(--fs-title); font-weight: var(--w-display);
  color: var(--accent-text); flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* --- calls to action ------------------------------------------------------ */
.mc-ctas { display: flex; flex-direction: column; gap: 10px; }
.mc-cta {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  min-height: 50px; padding: 0 20px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: var(--fs-body); font-weight: var(--w-display); text-decoration: none;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.mc-cta.is-primary {
  background: var(--accent-btn); color: var(--on-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent);
}
.mc-cta.is-primary:hover { background: var(--accent-dark); }
.mc-cta.is-dark {
  background: var(--board); color: var(--board-ink);
  box-shadow: 0 8px 20px rgba(22, 23, 28, 0.22);
}
.mc-cta.is-dark:hover { background: var(--board-raised); }
.mc-cta.is-secondary { background: var(--n-100); color: var(--text-primary); }
.mc-cta.is-secondary:hover { background: var(--n-200); }
/* Deleting a fixture is not a peer of editing one. Given the same 50px pill it
   read as the third thing you might do next; it is the thing you almost never
   do, and it is irreversible. */
.mc-cta.is-quiet {
  min-height: 40px; background: none; color: var(--danger-text);
  font-size: var(--fs-label); font-weight: var(--w-title); box-shadow: none;
}
.mc-cta.is-quiet:hover { background: var(--danger-bg); }
.mc-cta[disabled], .mc-cta.is-disabled {
  opacity: 0.5; cursor: not-allowed; box-shadow: none; pointer-events: none;
}

/* ---------------------------------------------------------------------------
   MOBILE — one column, compressed header, CTAs pinned above the bottom nav.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .mc-head { padding: 14px 14px 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .mc-body {
    grid-template-columns: minmax(0, 1fr); gap: 14px;
    padding: 14px 12px 18px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
  .mc-topline { margin-bottom: 12px; }
  .mc-crumbs { display: none; }
  .mc-chips { width: 100%; justify-content: space-between; }

  /* Crest + two-line name each side, score in the middle. */
  .mc-board {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px; padding-bottom: 14px;
  }
  .mc-side, .mc-side.is-away { flex-direction: column; gap: 7px; text-align: center; }
  .mc-crest.team-badge { width: 46px; height: 46px; font-size: var(--fs-label); }
  .mc-club { font-size: var(--fs-micro); font-weight: var(--w-display); letter-spacing: 0; }
  .mc-record { display: none; }
  .mc-centre { min-width: 0; gap: 6px; }
  .mc-panel { padding: 0; background: none; border: none; }
  .mc-panel.is-board { padding: 0; background: none; gap: 9px; }
  .mc-kick { font-size: var(--fs-stat); }
  .mc-kick-sub { display: none; }
  .mc-score { color: var(--text-primary); }
  .mc-score.is-them { color: var(--text-tertiary); }
  .mc-score-sep { color: var(--text-tertiary); }
  .mc-clock { font-size: var(--fs-label); color: var(--accent-text); }
  .mc-clock.is-running { color: var(--accent-text); }
  .mc-period { color: var(--text-tertiary); }

  /* Not stretched to equal widths: four tabs at equal width overflow a 320px
     row and clip the last label. They size to their words and the row scrolls. */
  .mc-tab { padding: 12px 12px; font-size: var(--fs-label); }
  .mc-card, .mc-rail-card { padding: 16px; }

  /* The scoring bar becomes a thumb-reachable grid. */
  .mc-act-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .mc-act { min-height: 46px; border-radius: var(--r-md); justify-content: center; }


  /* The 52px clock gutter and its rule cost more than they earn on a 320px
     row, so the clock becomes a chip beside the text instead. */
  .mc-time-row { display: flex; gap: 9px; align-items: flex-start; }
  .mc-time-body { border-left: none; padding: 0 0 12px; flex: 1; min-width: 0; }
  .mc-time-dot { display: none; }
  .mc-time-clock {
    text-align: center; min-width: 40px; padding: 2px 7px; margin-top: 1px;
    border-radius: var(--r-full); flex-shrink: 0;
    font-size: var(--fs-micro); background: var(--n-50); color: var(--text-secondary);
  }
  .mc-time-title { font-size: var(--fs-label); }
  .mc-time-sub { font-size: var(--fs-label); }

  /* Last on the page, and still in reach — sitting on top of the bottom nav
     rather than under it. */
  .mc-ctas {
    position: sticky; bottom: calc(var(--bottomnav-h, 0px) + 8px); z-index: 5;
    padding: 10px 0 2px;
    background: linear-gradient(to bottom, transparent, var(--bg-app) 22%);
  }
}

@media (max-width: 380px) {
  .mc-chip.is-comp { display: none; }
  .mc-club { font-size: var(--fs-micro); }
}

/* Motion is decoration here; the pulse is the only thing that moves. */
@media (prefers-reduced-motion: reduce) {
  .mc-livedot { animation: none; }
}