/* Per-screen bento layouts. Size classes: Compact <760 / Medium 760-1023 / Expanded >=1024. */

/* ---------- Screen entry: plays only on navigation (main.js sets #content[data-enter]) ---------- */
@media (prefers-reduced-motion: no-preference) {
  #content[data-enter] :is(.court-card, .setup-card, .round-row, .standings-row, .podium__slot, .highlight, .panel-section, .timer-dock,
    .setup-hero, .live-banner, .empty-state, .screen-head, .player-filter, .stat-card, .standings-tie) {
    animation: fade-rise var(--dur-slow) var(--ease-out) both;
  }
  #content[data-enter] :is(.court-grid, .round-list, .standings-list, .setup-col, .highlights, .panel, .live-panel) > :nth-child(2) { animation-delay: 45ms; }
  #content[data-enter] :is(.court-grid, .round-list, .standings-list, .setup-col, .highlights, .live-panel) > :nth-child(3) { animation-delay: 90ms; }
  #content[data-enter] :is(.court-grid, .round-list, .standings-list, .setup-col, .highlights, .live-panel) > :nth-child(4) { animation-delay: 135ms; }
  #content[data-enter] :is(.court-grid, .round-list, .standings-list, .setup-col, .highlights, .live-panel) > :nth-child(5) { animation-delay: 180ms; }
  #content[data-enter] :is(.court-grid, .round-list, .standings-list, .setup-col, .highlights, .live-panel) > :nth-child(n+6) { animation-delay: 225ms; }
  #content[data-enter] .live-panel > * { animation-delay: 120ms; }
}

/* ---------- Setup ---------- */
.setup-header { display: none; }
.setup-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-4); padding: var(--card-pad-hero); margin-bottom: var(--gap-tile);
  background: var(--glass-solid); background-color: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
}
.setup-hero::before { /* ball */
  content: ''; position: absolute; right: -50px; top: -34px; width: 230px; aspect-ratio: 1; background: url('../assets/ball.svg') center / contain no-repeat;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.4)); animation: ball-spin 90s linear infinite; pointer-events: none;
}
.setup-hero::after { content: ''; position: absolute; inset: 0; background: var(--line-strong); opacity: 0.14; pointer-events: none; -webkit-mask: url('../assets/court-lines.svg') no-repeat left -8% bottom -46% / 55% auto; mask: url('../assets/court-lines.svg') no-repeat left -8% bottom -46% / 55% auto; }
.setup-hero > * { position: relative; z-index: 1; }
.setup-hero__title { font-size: var(--t-display); font-weight: 800; font-style: italic; letter-spacing: -0.045em; line-height: 0.96; margin: var(--space-2) 0 var(--space-3); max-width: 12ch; }
.setup-hero__sub { color: var(--text2); }
.setup-grid { display: flex; flex-direction: column; gap: var(--gap-tile); }
.setup-col { display: flex; flex-direction: column; gap: var(--gap-tile); min-width: 0; }
.live-banner { border-radius: var(--radius-3); padding: var(--card-pad-y) var(--card-pad); margin-bottom: var(--gap-tile); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; border-color: var(--accent-line); }
.live-banner__title { font-size: var(--t-section); font-weight: 800; letter-spacing: -0.03em; }
.live-banner__meta { color: var(--text2); margin-top: 2px; }
.live-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.setup-footer {
  position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-4) 0 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); border-radius: var(--radius-full);
  background: var(--glass-solid); background-color: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.setup-footer__line { color: var(--text); font-weight: 600; font-size: var(--t-label); } /* R4-14: data, so no caps */
.setup-footer__hint { color: var(--live); margin-top: 2px; }
/* R4-07: Start session and the live footer's pair are .btn--lg (64 / 19); md (56 / 17) on Compact.
   The 64px pill sits 8px (+1) inside the 82px bar: concentric. */
.setup-footer__start-sub { display: none; }
/* R1-03: slim hero once players exist; slim Saved groups row when there are none. */
.setup-hero--compact { padding: var(--space-4) var(--card-pad-hero); }
.setup-hero--compact::before { width: 120px; right: -24px; top: -26px; }
.setup-hero--compact .setup-hero__title { font-size: var(--t-title); max-width: none; margin: var(--space-1) 0 0; }
.live-banner__kicker { color: var(--accent); margin-bottom: var(--space-1); }
.setup-card--slim { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); flex-wrap: wrap; }
.setup-card--slim .roster-row { flex: 0 0 auto; }
.setup-groups-empty .setup-card__title { margin-bottom: var(--space-1); }
.setup-card--slim .roster-card--new { min-height: var(--btn-sm); padding: 0 var(--space-4); }
/* R1-04: live footer - Regenerate (secondary) + Back to session (primary). */
.setup-footer__actions { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }

/* R3-05: the sticky footer floats one padding-width above the bottom edge, and cards used to
   peek through that strip under it. Fade the strip out so the footer reads as the page's end. */
.content-scroll:has(> .content-inner--setup) {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent); mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}
@media (min-width: 1024px) {
  .content-scroll:has(> .content-inner--setup) {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  }
  .setup-grid { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; }
}
@media (max-width: 759px) {
  .setup-hero::before { width: 130px; right: -30px; top: -20px; }
  .setup-hero__title { font-size: var(--t-title); max-width: 11ch; }
  .setup-hero__sub { font-size: var(--t-hint); }
  /* R1-12: one 56px button; the long summary line is dropped (players, format, courts and rounds
     are all on the cards above) and the session length rides on the button as a sub-label.
     The "Add N more players" hint stays, at 12px. */
  .setup-footer { border-radius: var(--radius-3); padding: var(--space-2); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-2); }
  .setup-footer__line { display: none; }
  .setup-footer__hint { font-size: var(--t-label); margin: 2px 0 0; }
  .setup-footer__summary:not(:has(.setup-footer__hint)) { display: none; }
  .setup-footer__start-sub { display: inline; font-weight: 600; opacity: 0.75; }
  .setup-footer .btn--lg { min-height: var(--btn-md); font-size: var(--t-btn-md); --nub-size: 40px; --nub-inset: 8px; }
  .setup-footer__start { width: 100%; }
  .setup-footer__summary { text-align: center; }
  .setup-hero--compact { display: none; }
  .live-banner { padding: var(--space-3) var(--space-3) var(--space-3) var(--card-pad); flex-wrap: nowrap; gap: var(--space-3); }
  .live-banner__title { font-size: var(--t-body-lg); }
  .live-banner__actions .btn { min-height: var(--btn-sm); padding: 0 var(--space-4); font-size: var(--t-btn-sm); white-space: nowrap; }
  .setup-footer__actions { gap: var(--space-2); }
  .setup-footer__actions .btn { flex: 1 1 0; min-width: 0; padding-left: var(--space-4); }
  .setup-footer__regen { flex-grow: 0.7 !important; }
  .hide-compact { display: none; }
  .setup-stats-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Round ---------- */
.round-main { min-width: 0; }
@media (min-width: 760px) {
  .court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) and (max-width: 1023px) {
  .court-card__team-row { flex-wrap: wrap; }
  /* R1-01: two-up cards use the stacked row (name on its own line, score row below). */
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__team-name { flex-basis: 100%; }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__score { width: 100%; justify-content: space-between; }
}
@media (min-width: 1024px) {
  /* Dense boards (5-8 courts) step down but keep 64px score targets. */
  .court-grid--n5 .court-card__team-row, .court-grid--n6 .court-card__team-row, .court-grid--n7 .court-card__team-row, .court-grid--n8 .court-card__team-row { min-height: 84px; }
  .court-grid--n2 .court-card__header, .court-grid--n3 .court-card__header, .court-grid--n4 .court-card__header, .court-grid--n5 .court-card__header,
  .court-grid--n6 .court-card__header, .court-grid--n7 .court-card__header, .court-grid--n8 .court-card__header { flex-wrap: wrap; }
  .court-grid--n2 .court-card, .court-grid--n3 .court-card, .court-grid--n4 .court-card, .court-grid--n5 .court-card, .court-grid--n6 .court-card, .court-grid--n7 .court-card, .court-grid--n8 .court-card { --score: 72px; }
  .court-grid--n2 .court-card__score-value, .court-grid--n3 .court-card__score-value, .court-grid--n4 .court-card__score-value, .court-grid--n5 .court-card__score-value,
  .court-grid--n6 .court-card__score-value, .court-grid--n7 .court-card__score-value, .court-grid--n8 .court-card__score-value { font-size: var(--t-num-xl); }
  /* R1-01: 2+ courts sit two-up beside the live panel (with full-width content, two courts one
     above the other stretched each card across the screen and pushed Court 2 below the fold).
     Use the Compact stacked row: partners on one name line, then  -  score  +  spread below. */
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__team-row { flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__team-name { flex-basis: 100%; font-size: var(--t-team); }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__score { width: 100%; justify-content: space-between; }
}
/* R1-01: on narrower Expanded screens (iPad landscape) give 3+ court boards a little more width. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .round-layout:has(:is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8)) { --panel-w: 340px; }
}
/* R2-01: 1024-1139px (iPad 9.7"/mini landscape) with 3+ courts. Two-up cards were 236px wide
   and clipped the "+" button. Give the courts a little more room (300px panel), trim the card
   padding and the score digits, and let the score row flex so  -  score  +  always fits.
   Names may take up to 3 lines here instead of truncating (ux 4.3). */
@media (min-width: 1024px) and (max-width: 1139px) {
  .round-layout:has(:is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8)) { --panel-w: 300px; gap: 20px; }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card { --card-pad: 16px; }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__team-name { font-size: var(--t-title-sm); }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__score { min-width: 0; gap: var(--space-1); }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .court-card__score-value { font-size: var(--t-num-lg); }
  :is(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .stepper-btn--court:not(.stepper-btn--plus) { width: var(--btn-md); height: var(--btn-md); }
  .round-layout:has(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .timer-dock__controls { gap: var(--space-1); }
}
/* UX note: at 1180x820 the last Up next row fell just below the panel fold. */
@media (min-width: 1024px) and (max-height: 899px) {
  /* short Expanded viewports: the same insets, one step tighter vertically (documented budget) */
  .live-panel { gap: var(--space-3); }
  .sidebar__upnext { gap: var(--space-2); }
  .sidebar__game-row { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .panel-section { padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .panel-sitting, .panel-leader { padding-top: var(--space-1); padding-bottom: var(--space-1); }
  .live-panel .panel-section { gap: var(--space-2); }
  .live-panel .timer-dock { padding-top: var(--space-3); padding-bottom: var(--space-3); row-gap: var(--space-2); }
}
/* R2-26: 1024x768 with 1-2 courts - slimmer rows so Court 2's "Mark done" clears the command bar. */
@media (min-width: 1024px) and (max-height: 799px) {
  .court-grid--n1 .court-card { padding-top: 10px; padding-bottom: 10px; gap: 2px; }
  .court-grid--n1 .court-card__team-row { min-height: 66px; }
  .court-grid--n1 .court-card__score-value { font-size: var(--t-num-lg); }
  .court-grid--n1 .court-card__done { min-height: var(--btn-sm); font-size: var(--t-btn-sm); margin-top: var(--space-1); }
}
@media (max-width: 759px) {
  .court-card { border-radius: var(--radius-3); }
  .court-card__header { flex-wrap: wrap; row-gap: var(--space-2); }
  .court-card__team-row { min-height: 84px; flex-wrap: wrap; }
  .court-card__team-name { flex-basis: 100%; font-size: var(--t-section); }
  .court-card__score { width: 100%; justify-content: space-between; }
  .court-card__score-value { font-size: var(--t-num-xl); }
}

/* ---------- Live panel sections ---------- */
.panel-section { border-radius: var(--radius-3); padding: var(--card-pad-y) var(--card-pad); display: flex; flex-direction: column; gap: var(--space-3); }
.panel-section__title { color: var(--text2); }
.panel-empty { color: var(--text2); line-height: 1.4; padding: var(--space-1) 0 var(--space-2); }
.sidebar__standings { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar__upnext { display: flex; flex-direction: column; gap: var(--space-2); }
.sidebar__game-row { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-2); align-items: baseline; padding: var(--space-3); border-radius: var(--radius-1); background: var(--sunken); border: 1px solid var(--line); } /* R4-08: nested radius */
.sidebar__game-court { font-weight: 800; color: var(--accent); }
.sidebar__game-label { font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.sidebar__game-row--sitting { background: transparent; border-style: dashed; }
.sidebar__game-row--sitting .sidebar__game-court { color: var(--text3); }

.panel-section .link-btn { align-self: flex-start; }
/* R2-05: one-line leader row (replaces the Leaderboard section). */
/* R4-11: one baseline for LEADER / name / pts / STANDINGS; the chevron centres itself. */
.panel-leader { flex-direction: row; align-items: center; padding: var(--space-1) var(--space-3) var(--space-1) var(--card-pad); min-height: 52px; }
.panel-leader__row { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-2) var(--space-3); }
.panel-leader__label { color: var(--text2); flex: none; }
.panel-leader__name { font-size: var(--t-body-lg); font-weight: 800; letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-leader__pts { color: var(--text2); font-weight: 700; flex: none; }
.panel-leader { width: 100%; text-align: left; color: var(--text); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.panel-leader:active { transform: scale(0.98); }
.panel-leader__link { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--link); font-family: var(--font-family-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap; }
/* Narrow panel (1024px with 3+ courts): the chevron alone carries "open standings". */
@media (max-width: 1139px) and (min-width: 1024px) { .round-layout:has(.court-grid--n2, .court-grid--n3, .court-grid--n4, .court-grid--n5, .court-grid--n6, .court-grid--n7, .court-grid--n8) .panel-leader__link-text { display: none; } }
/* Leaderboard (top 3 / top 5 when the panel has room; livePanel.fitLeaderboard picks). */
.panel-board__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; }
.panel-board__head .panel-leader__link { min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-full); }
/* Board rows are read-only (the Standings link is the target), so they can be slimmer than
   the 52px Leader row: more places fit above Up next. */
.panel-board .standings-row--sidebar { min-height: 44px; }
/* Sitting out: label and names on one row. */
.panel-sitting { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3) var(--card-pad); min-height: 60px; }
.panel-sitting .panel-section__title { margin-right: var(--space-1); }

/* ---------- Standings ---------- */
.screen-head .screen-title, .content-inner > .screen-title { display: none; }
.screen-head { margin-bottom: var(--gap-tile); }
.standings-layout { display: flex; flex-direction: column; gap: var(--gap-tile); }
@media (min-width: 760px) and (max-width: 1023px) {
  .standings-layout .podium__slot--1 { min-height: 220px; }
}
/* R1-13: Expanded - sticky podium card on the left (~40%), full table on the right. */
@media (min-width: 1024px) {
  .standings-layout--split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  .standings-layout--split .podium {
    position: sticky; top: 0; margin-bottom: 0;
    grid-template-columns: 1fr 1fr; grid-template-areas: "p1 p1" "p2 p3"; align-items: stretch;
  }
  .standings-layout--split .podium__slot--1 { grid-area: p1; min-height: 220px; }
  .standings-layout--split .podium__slot--2 { grid-area: p2; min-height: 150px; }
  .standings-layout--split .podium__slot--3 { grid-area: p3; min-height: 150px; }
  .standings-layout--split .podium--tied .podium__slot--1 { min-height: 170px; }
}
@media (max-width: 759px) {
  .standings-row, .standings-head { padding-right: var(--space-4); gap: var(--space-3); }
  .standings-head__col--pfpa { display: none; }
  .standings-row__name { font-size: var(--t-body-lg); }
  .standings-row__stats { grid-template-columns: auto; row-gap: 2px; }
  .standings-head .standings-row__stats { row-gap: 0; }
  .standings-row__pfpa { display: none; }
  .standings-row__pfpa-sub, .standings-head__name-sub { display: inline; } /* R3-04: PF-PA under the name */

  .standings-layout .podium { display: none; } /* the list already leads with the leader on phones */
}

/* ---------- Schedule ---------- */
@media (min-width: 1024px) {
  .round-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-tile); align-items: start; }
}

/* =====================================================================
   Persona "Do now" (UXR-05 / UXR-16)
   ===================================================================== */
/* UXR-05: after Start over, the cleared session waits at the top of the empty Setup. */
.restore-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  margin-bottom: var(--gap-tile); padding: var(--space-4) var(--space-4) var(--space-4) var(--card-pad); border-radius: var(--radius-3);
  background: var(--glass-solid); background-color: var(--surface); border: var(--stroke-hair) solid color-mix(in oklab, var(--live) 55%, transparent); box-shadow: var(--shadow-2);
}
.restore-card__title { font-size: var(--t-lead); font-weight: 800; letter-spacing: -0.02em; }
.restore-card__meta { color: var(--text2); font-size: var(--t-hint); font-weight: 600; margin-top: 2px; }
.restore-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* R4-07: md buttons (56 / 17; were 52 / 16) */
@media (max-width: 759px) {
  .restore-card { padding: var(--space-4); }
  .restore-card__actions { width: 100%; }
  .restore-card__actions .btn { flex: 1 1 auto; }
  .restore-card__restore { flex-grow: 2 !important; }
}

/* UXR-16: phone rows carry the record in words on the name line, so the stats cell is points only. */
@media (max-width: 759px) {
  .standings-row__record, .standings-head__col--record { display: none; }
  .standings-row__detail { padding-left: 58px; }
  .standings-row__detail-record { display: none; }
}

/* UXR-15a: on phones nothing may sit (or peek) under the floating Start bar. The scroller's
   bottom strip used to show cards scrolling beneath the bar (only faded by R3-05's mask), and
   taps near the bar's edge started the session. The bar now carries its own backdrop band - the
   page colour, fading in over 12px above it and running to the scroller's bottom edge - so
   content ends visibly above the bar at every scroll position, and the strip belongs to the bar. */
@media (max-width: 759px) {
  .content-scroll:has(> .content-inner--setup) { padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .setup-footer { bottom: 10px; margin-top: 24px; isolation: isolate; }
  .setup-footer::before {
    content: ''; position: absolute; z-index: -1; left: -17px; right: -17px; top: -14px; bottom: -11px; pointer-events: auto;
    background: linear-gradient(to bottom, transparent, var(--bg) 14px);
  }
  /* The bar is its own stacking context, so its frame moves to ::after to paint above the band. */
  .setup-footer { background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .setup-footer::after {
    content: ''; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; pointer-events: none;
    background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3);
  }
}
/* UXR-15c: two lg steppers side by side overflowed their tiles on phones, so the courts "+"
   touched the rounds "−". On Compact each tile is a full-width row (label left, stepper right),
   the same shape as "Minutes per game", leaving well over 8px between any two targets. */
@media (max-width: 759px) {
  .setup-stats-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .setup-stats-row .stat-card { flex-direction: row; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
  .setup-stats-row .stepper-value--lg { min-width: 2ch; text-align: center; } /* the three steppers line up */
}

/* =====================================================================
   Critique round 4 (UI): detail pass
   ===================================================================== */
/* UX note (R4-14): the inline "vs" in Up next and the Schedule rows is the court card's quiet "vs". */
.vs-inline { color: var(--text3); font-weight: 600; }
/* R4-24: no one-word last lines in running text; headings balance. */
.welcome__lead, .setup-card__hint, .dialog__body, .champion__why, .sheet__hint, .help p, .empty-state__text, .welcome__step-text { text-wrap: pretty; }
.dialog__title, .sheet__title, .empty-state__title, .welcome__title { text-wrap: balance; }

/* R4-06: a hint inside a kicker takes the kicker's style. */
.kicker > .setup-card__hint { font-size: inherit; font-weight: inherit; }
/* UX note (R4-14 durations): "2 h 15 min" never wraps inside the stepper, and the value box is
   wide enough for the longest duration so the - button never jumps; on a narrow phone the label
   takes the row above the stepper instead. */
.planner .stepper-value--sm { white-space: nowrap; min-width: 4.8em; }
.planner .setting-subrow { flex-wrap: wrap; row-gap: 0; }
.planner .setting-subrow .stepper { margin-left: auto; }