/* ═══════════════════════════════════════════════════════════════════════════
   17 · THE SET ROW (v3.12, the UX audit's move 1 — Arrick, 2026-09-05)
   One row, every surface. These rules are NOT media-scoped on purpose: the
   builder, the wizard's set card, the phone recorder and the desktop recorder
   draw the identical row (js/ui/setrow.js), so the row is styled once, after
   the phone layer, and no surface re-skins it. The card around it stays the
   surface's own (.pg-card / .blk). The recorder's own rules that used to sit
   in 14-phone-page.css moved here unchanged; `--sr-grey` is the old --pg-grey.
   ═══════════════════════════════════════════════════════════════════════════ */
.sr-th,.sr-tr,.sr-foot{--sr-grey:#B2B2B2}
/* rows align on their BOTTOM edge — the underline is the datum the eye reads
   across, so the set number, the field rule and the control all end on it */
.sr-th,.sr-tr{display:grid;grid-template-columns:46px minmax(0,1fr) minmax(0,1fr) 32px;column-gap:14px;align-items:end}
.sr-th{font-family:var(--courier);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin:32px 0 0}
.sr-tr{margin-top:11px}
.sr-th+.sr-tr{margin-top:0}   /* the field's own top padding is the gap under the header */
.sr-tr.nu{box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:var(--radius);padding:0 9px 4px;margin:11px -9px 0}
.sr-tr.nu.live{box-shadow:inset 0 0 0 1.5px var(--volt-ink)}   /* the set in work wears the clock's colour */
.sr-i{font-family:var(--helv);font-weight:700;font-size:14px;letter-spacing:-.01em;padding-bottom:8px}
.sr-u{font-family:var(--courier);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sr-grey);padding-bottom:8px}
/* the field. `input.sr-in` (0,1,1) — the app's `input:not([type])` rule carries a
   48px min-height at the same specificity, so the class alone could never shorten
   a field; the element-qualified selector wins by order (the v3.1 lesson). */
input.sr-in{width:100%;border:none;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;
  font-family:var(--helv);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--ink);
  padding:16px 0 6px;height:44px;min-height:0;line-height:22px;-webkit-appearance:none}
input.sr-in:focus{outline:none;border-bottom-color:var(--purple,#5400DB)}
input.sr-in::placeholder{color:var(--sr-grey);font-weight:500}
input.sr-in.live{color:var(--sr-grey)}   /* the running row's Time field shows the live split in platinum until ■ commits it */
/* the ONE control: ▶ ready · ■ in work (volt, breathing) · ✓ done (ink) · plain tick off the clock */
.sr-chk{position:relative;width:32px;height:32px;border:1.5px solid var(--sr-grey);border-radius:var(--radius);background:transparent;
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;flex:0 0 auto;-webkit-tap-highlight-color:transparent;padding:0;cursor:pointer}
.sr-chk::after{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px}   /* a 44px target on a 32px square */
.sr-chk svg{width:17px;height:17px;stroke:var(--sr-grey);stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sr-chk.on{background:var(--ink);border-color:var(--ink)}
.sr-chk.on svg{stroke:#fff;stroke-width:2.4}
.sr-chk.play svg{fill:var(--ink);stroke:none}
.sr-chk.live{background:var(--volt);border-color:var(--volt);animation:sr-breathe 2s ease-in-out infinite}
.sr-chk.live svg{fill:#fff;stroke:none}
.sr-chk.held{transform:scale(.9)}
.sr-chk:active{transform:scale(.94)}
@keyframes sr-breathe{0%,100%{opacity:1}50%{opacity:.78}}
@media(prefers-reduced-motion:reduce){.sr-chk.live{animation:none}}
/* the set count: − / + in the footer, never a × on the row */
.sr-step{display:inline-flex;align-items:center;gap:8px}
.sr-step button{width:32px;height:32px;border:1.5px solid var(--ink);border-radius:var(--radius);background:transparent;color:var(--ink);font-family:var(--courier);font-size:16px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;cursor:pointer}
.sr-step button:active{background:var(--ink);color:#fff}
.sr-step>span{font-family:var(--courier);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sr-grey);margin-left:2px}
.sr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}   /* the builder's and the desktop's footer (the phone's is .pg-card-f) */
/* the whisper: last time's rows, under the movement's name, live sessions only */
.sr-last{display:block;font-family:var(--courier);font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sr-grey);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the builder's quiet door to a weight column on loadable station work */
.sr-addw{font-family:var(--courier);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text);background:transparent;padding:0;cursor:pointer}
.sr-addw:hover{color:var(--ink)}
/* the desktop's cards hold the row a little tighter than the phone's plate */
@media(min-width:721px){
  .blk .sr-th,.blk .sr-tr{grid-template-columns:46px 200px 200px 32px}   /* a set is a short sentence; it doesn't stretch to the card's edge */
  .blk .sr-th{margin-top:14px}
  .blk .sr-foot{margin-top:12px}
  .blk-in .sr-th{margin-top:10px}
}

/* v3.16 (audit R-3) — the PR: the row flashes volt for a beat when a set beats the movement's best */
@keyframes sr-pr{0%{background:var(--volt)}100%{background:transparent}}
.sr-tr.pr{animation:sr-pr .9s var(--ease) forwards}
@media(prefers-reduced-motion:reduce){.sr-tr.pr{animation:none;outline:2px solid var(--volt)}}