/* ---------- Phone player ----------
 * The workout player at up to 600 px wide in portrait (PHONE_QUERY in core/phone-player.js). app.js sets
 * data-layout="phone" on the runner root and draws ui/phone-player.js, whose `p-…` markup is its own: every rule
 * here is scoped to that attribute, so the desktop player's rules in style.css are neither used nor changed.
 * Part names follow research/timer-glossary.md, "On a phone". Colors come from the player theme variables only.
 *
 * Fit rule: the whole player is one column exactly as tall as the visible viewport and the page never scrolls.
 * Fixed parts take their height; the Stage (timed steps) or the Round list (AMRAP, rounds) takes whatever is left.
 * When height runs short the parts give way in this order: round button, score panel, row height, then the
 * Round list scrolls inside itself. */
/* `display` is set only while the player is showing: style.css hides a view with `.view[hidden]`, which has the same
 * weight as a plain root rule here and comes earlier, so an unconditional `display` would un-hide the player and
 * leave it, live, underneath every other page. */
.runner[data-layout="phone"]:not([hidden]) { display: flex; }
.runner[data-layout="phone"] { flex-direction: column; gap: 8px; height: 100dvh; min-height: 0; overflow: hidden; padding: 8px 12px max(10px, env(safe-area-inset-bottom)); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Pulling down on the player must not refresh the page. */
html:has(#runner[data-layout="phone"]:not([hidden])) { overscroll-behavior-y: contain; }

.runner[data-layout="phone"] .p-panel { background: var(--panel); border-radius: 16px; }
.runner[data-layout="phone"] .p-lb { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.runner[data-layout="phone"] .p-right { text-align: right; }

/* Header: back · workout title · Workout left · menu */
.runner[data-layout="phone"] .p-head { flex: none; display: flex; align-items: center; gap: 10px; height: 48px; }
.runner[data-layout="phone"] .p-ib { flex: none; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--rule2); border-radius: 50%; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.runner[data-layout="phone"] .p-dots { font-size: 24px; font-weight: 900; line-height: 1; }
.runner[data-layout="phone"] .p-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 700; }
.runner[data-layout="phone"] .p-left { flex: none; text-align: right; }
.runner[data-layout="phone"] .p-left b { display: block; margin-top: 2px; font-size: 20px; font-weight: 900; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }

/* Stage: the title at the top and the ring filling everything under it. The ring has no size of its own, so a
 * taller phone gets a bigger ring, never a bigger gap. */
.runner[data-layout="phone"] .p-stage { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 12px; text-align: center; }
/* Always rendered, with a fixed height, so the text can come and go without moving the title or the ring. */
.runner[data-layout="phone"] .p-state { flex: none; min-height: 18px; line-height: 18px; font-size: 14px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text); }
.runner[data-layout="phone"] .p-state.paused { color: var(--warn); }
.runner[data-layout="phone"] .p-state.rest { color: var(--done); }
.runner[data-layout="phone"] .p-h { flex: none; max-width: 100%; font-size: clamp(32px, 5.4vh, 36px); font-weight: 900; line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
/* Long step titles (authored instructions) drop a size and cap at three lines so the ring keeps its room. */
.runner[data-layout="phone"] .p-h.long { font-size: clamp(20px, 3.7vh, 24px); line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.runner[data-layout="phone"] .p-sides { flex: none; display: flex; gap: 8px; }
.runner[data-layout="phone"] .p-side { padding: 6px 14px; border: 1.5px solid var(--rule2); border-radius: 999px; font-size: 14px; font-weight: 900; letter-spacing: 0.1em; color: var(--muted); }
.runner[data-layout="phone"] .p-side.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.runner[data-layout="phone"] .p-dial { flex: 1 1 0; min-height: 0; align-self: stretch; position: relative; }
.runner[data-layout="phone"] .p-dial .dial { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Next card: the one piece of the Queue the phone keeps. */
.runner[data-layout="phone"] .p-next { flex: none; padding: 9px 14px 10px; }
.runner[data-layout="phone"] .p-next-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 2px; font-size: 22px; font-weight: 900; line-height: 1.12; }
/* The name may take two lines so "set 2" or a side is never cut off; the amount stays whole unless it is a sentence. */
.runner[data-layout="phone"] .p-next-n { flex: 1 1 0; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.runner[data-layout="phone"] .p-next-a { flex: 0 0 auto; max-width: 50%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 17px; font-weight: 700; color: var(--muted); }

/* Score panel (AMRAP): block clock and rounds logged, in place of the ring. */
.runner[data-layout="phone"] .p-score { flex: none; display: flex; flex-direction: column; gap: 6px; padding: clamp(8px, 1.8vh, 12px) 18px; }
.runner[data-layout="phone"] .p-score-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.runner[data-layout="phone"] .p-num { font-size: clamp(48px, 10.2vh, 68px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.runner[data-layout="phone"] .p-num.accent { color: var(--accent-text); }

/* Round panel (fixed rounds): the round, the time in it, and the track. The track never wraps: the stops share one
 * line and shrink with the round count (--stops is set on the panel). */
.runner[data-layout="phone"] .p-round { flex: none; display: flex; flex-direction: column; gap: 10px; padding: clamp(10px, 1.8vh, 14px) 14px; }
.runner[data-layout="phone"] .p-round-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.runner[data-layout="phone"] .p-round-title, .runner[data-layout="phone"] .p-round-clock { font-size: clamp(26px, 8vw, 34px); font-weight: 900; line-height: 1; white-space: nowrap; }
.runner[data-layout="phone"] .p-round-clock { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.runner[data-layout="phone"] .track { flex-wrap: nowrap; justify-content: stretch; align-items: flex-start; gap: clamp(2px, calc(60px / var(--stops, 5)), 8px); }
.runner[data-layout="phone"] .track .r { flex: 1 1 0; min-width: 0; width: auto; gap: 3px; }
.runner[data-layout="phone"] .track .c { width: 100%; height: clamp(28px, 5.4vh, 40px); border-width: 2px; border-radius: 999px; font-size: clamp(10px, calc(200px / var(--stops, 5)), 18px); box-shadow: none; }
.runner[data-layout="phone"] .track .t { max-width: 100%; min-height: 14px; overflow: hidden; white-space: nowrap; font-size: clamp(9px, calc(130px / var(--stops, 5)), 12px); line-height: 14px; }

/* Round list: every exercise of one round, amount first. Rows share the spare height evenly. */
.runner[data-layout="phone"] .p-list { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 5px; }
.runner[data-layout="phone"] .p-li { flex: 1 0 auto; min-height: 28px; display: flex; align-items: center; gap: 12px; padding: 2px 14px; border-radius: 12px; background: var(--panel); font-size: 18px; font-weight: 700; line-height: 1.08; }
.runner[data-layout="phone"] .p-amt { flex: none; min-width: 44px; font-size: 26px; font-weight: 900; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.runner[data-layout="phone"] .p-name { min-width: 0; overflow-wrap: anywhere; }
.runner[data-layout="phone"] .p-name small { font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.runner[data-layout="phone"] .p-list[data-few] .p-li { font-size: 21px; }
.runner[data-layout="phone"] .p-list[data-few] .p-amt { font-size: 30px; }

/* Round button: the largest control, directly above Controls. It is the first part to give up height. */
.runner[data-layout="phone"] .p-big { flex: none; height: clamp(64px, 13.2vh, 88px); border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 28px; font-weight: 900; }
.runner[data-layout="phone"] .p-big:active:not(:disabled) { transform: scale(0.985); }
.runner[data-layout="phone"] .p-big .p-plus { font-size: 34px; line-height: 1; }
.runner[data-layout="phone"] .p-big .p-word { font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; }

/* Controls: one row. The primary control is twice as wide; the row is taller when it has one. */
.runner[data-layout="phone"] .p-row { flex: none; display: flex; align-items: stretch; gap: 8px; }
.runner[data-layout="phone"] .p-btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 8px; border: 2px solid var(--rule2); border-radius: 16px; background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 900; white-space: nowrap; }
.runner[data-layout="phone"] .p-btn.primary { flex: 2 1 0; min-height: 60px; border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-size: 20px; }
.runner[data-layout="phone"] .p-pause { flex: none; width: 14px; height: 18px; border: solid currentColor; border-width: 0 5px; }
.runner[data-layout="phone"] .p-lbl { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.05; }
.runner[data-layout="phone"] .p-what { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }

/* Progress strip: one segment per block along the bottom edge. */
.runner[data-layout="phone"] .p-strip { flex: none; height: 6px; display: flex; gap: 3px; }
.runner[data-layout="phone"] .p-strip .seg { display: flex; min-width: 4px; overflow: hidden; border-radius: 3px; background: var(--rule); }
.runner[data-layout="phone"] .p-strip .seg > div { background: var(--accent); }
.runner[data-layout="phone"] .p-strip .seg.done > div { background: var(--done); }

/* The floor (a small phone with the browser bars showing, about 548 px tall): tighten in the give-up order so a
 * seven-exercise round still fits without the Round list scrolling. */
@media (max-height: 580px) {
  .runner[data-layout="phone"] { gap: 6px; padding-top: 6px; }
  .runner[data-layout="phone"] .toast { top: 6px; }
  .runner[data-layout="phone"] .p-big { height: 64px; }
  .runner[data-layout="phone"] .p-score { gap: 2px; padding: 6px 16px; }
  .runner[data-layout="phone"] .p-num { font-size: 44px; }
  .runner[data-layout="phone"] .p-list { gap: 3px; }
  .runner[data-layout="phone"] .p-li { min-height: 26px; padding: 1px 12px; font-size: 17px; line-height: 1.05; }
  .runner[data-layout="phone"] .p-amt { font-size: 24px; }
}

/* The undo toast sits on the Header, between the back and menu buttons, so it hides only the workout title for its
 * four seconds and never the clock, the round count or the round button. The app notice goes under the Header. */
.runner[data-layout="phone"] .toast { top: 8px; bottom: auto; height: 48px; max-width: calc(100vw - 148px); padding: 0 16px; gap: 10px; white-space: nowrap; }
.runner[data-layout="phone"] .toast:has(button) { padding-right: 0; }
.runner[data-layout="phone"] .toast button { min-height: 48px; padding: 0 16px; border: 0; border-left: 1.5px solid var(--bg); border-radius: 0 14px 14px 0; }
html:has(#runner[data-layout="phone"]:not([hidden])) #notice { top: 62px; bottom: auto; width: max-content; max-width: calc(100vw - 24px); }

/* Finished and no-session screens: today's content in one centered column that fits the smallest phone. */
.runner[data-layout="phone"] .col-main { flex: 1 1 0; min-height: 0; gap: 0; }
.runner[data-layout="phone"] .finish { flex: 1 1 0; min-height: 0; overflow-y: auto; gap: 10px; padding: 8px 4px; }
.runner[data-layout="phone"] .finish h1, .runner[data-layout="phone"] .finish h2 { margin: 0; font-size: 28px; line-height: 1.1; text-wrap: balance; }
.runner[data-layout="phone"] .finish p { font-size: 16px; }
.runner[data-layout="phone"] .finish .stats { gap: 20px; margin: 4px 0; }
.runner[data-layout="phone"] .finish .stat .v { font-size: 36px; line-height: 1.1; }
.runner[data-layout="phone"] .finish .controls { align-self: stretch; }

/* ⋯ menu: a modal dialog on <body>. The player theme's variables are set inline on it. */
dialog.p-menu { width: 260px; max-width: calc(100vw - 24px); margin: 62px 12px auto auto; padding: 6px; border: 0; border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: 0 0 0 1.5px var(--rule2), 0 20px 60px rgba(0, 0, 0, 0.5); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
dialog.p-menu::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog.p-menu button { width: 100%; min-height: 52px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: inherit; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; text-align: left; }
dialog.p-menu button:active:not(:disabled) { background: var(--rule); }
dialog.p-menu button.danger { color: color-mix(in srgb, red 55%, var(--text)); }
dialog.p-menu button.close { color: var(--muted); }
dialog.p-menu :focus-visible { outline-color: var(--accent); }