, not class="set-row" on a grid
div), so a `.set-row .set-idx` ancestor-scoped selector here would
never actually match a real . Found while wiring
up .set-calc below for Freestyle Session's 🧮 button — same dead-selector bug
would have applied there too. */
.set-idx { font-family: var(--font-display); font-weight: 700; color: var(--c-text-lt); text-align: center; }
.set-row input { text-align: center; padding: var(--sp-2); }
.set-row .set-remove { color: var(--c-text-lt); text-align: center; }
.set-row .set-remove:hover { color: var(--c-bad); }
.set-row .set-done { width: 100%; height: 40px; border-radius: var(--r-md); border: 1.5px solid var(--c-border-md); display: flex; align-items: center; justify-content: center; color: var(--c-text-lt); }
.set-row .set-done.is-done { background: var(--c-good-dim); border-color: var(--c-good); color: var(--c-good); }
/* Freestyle Session variant — no done column, since every row is already a
logged set (no prescription to check off against), and a remove
button on every row, not just the last (no live mid-workout mis-tap
risk to guard against here). PLANNING.md §6.4, 2026-09-17. */
.set-row--quick { grid-template-columns: 32px 1fr 1fr 1fr 32px; }
.set-row--quick.set-row--bw { grid-template-columns: 32px 1fr 1fr 32px; }
/* Strength-only variant with a 🧮 target-weight helper column (added
2026-09-22, usability feedback — "calculate my target weight based on
my 1RM... and just have the app plug in the weights"). One extra
column vs. set-row--quick's base 5, only ever applied where there's a
real weight field to fill (never bodyweight/cardio rows, which have
nothing for a %1RM calculation to plug into). */
.set-row--quick.set-row--calc { grid-template-columns: 32px 1fr 1fr 1fr 32px 32px; }
/* Same dead-selector issue as .set-idx above — real Freestyle Session markup has
no .set-row ancestor, so this is unscoped too. */
.set-calc { color: var(--c-text-lt); text-align: center; font-size: var(--text-sm); }
.set-calc:hover { color: var(--c-brand); }
/* Small muted column-label row above a set table — same look already
repeated inline on session-log.html; given a real class here so
Freestyle Session doesn't add a fourth inline copy of it. */
.set-row-head { font-size: var(--text-xs); color: var(--c-text-lt); font-family: var(--font-display); font-weight: 700; }
/* Base sizing for a round icon/number toggle button (RPE picker, Daily
Status faces) — previously only ever set via repeated inline style;
given a real base rule so new uses don't add another copy. */
.face-btn { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; }
.timer { text-align: center; font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--c-dark); margin: var(--sp-4) 0; }
/* Floating rest timer — was a static card at the top of session-log.html,
which meant scrolling all the way back up to use it mid-session; fixed
2026-09-14 to stay reachable from anywhere on the page. */
.rest-timer-float { position: fixed; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 50; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-full); box-shadow: var(--shadow-md); padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; gap: 6px; max-width: calc(100vw - var(--sp-4)); }
.rest-timer-display { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--c-dark); min-width: 3.2ch; text-align: center; }
/* Narrower than the standard .btn--sm horizontal padding — five controls
now share this pill (−15/+15 steppers added alongside Start/Pause/
Reset), and the default 16px side padding was sized for one or two
buttons at a time, not five on a 360-400px phone screen. Vertical
padding is left at the same var(--sp-2) every other button on this
page uses — narrower tap targets are an acceptable tradeoff here,
shorter ones aren't, for the same reduced-touch-accuracy reasons
already driving every other control on this page (PLANNING.md §6.4). */
.rest-timer-float .btn { padding: var(--sp-2) 10px; font-size: var(--text-xs); }
/* Client-private workout rating (workout-instance.html) — click-to-fill
stars, same ★ character search.html already uses for public ratings,
so the visual language carries over once this feeds a real public
aggregate later (PLANNING.md §6.4). */
.star-btn { font-size: 1.4rem; line-height: 1; color: var(--c-border-md); padding: 0 1px; }
.star-btn.is-filled { color: var(--c-accent); }
.star-picker { display: flex; gap: 2px; }
span.star-btn { cursor: default; }
/* A rating beside its caption — "Your rating ★★★★★" on a workout row, or the
tappable stars on a finished one. */
.rate-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
form.rate-row .star-btn { background: none; border: 0; cursor: pointer; }
/* Exercise cards in a live session — full visibility of the whole
session is deliberate (PLANNING.md §6.4): nothing is hidden behind
"current only." No highlighted-border "current" state either
(removed 2026-09-14, same review pass that dropped "Set X of Y") —
every card gets equal visual weight; only the logged data itself
(checkmarks, filled inputs) signals progress. */
.exercise-card summary { cursor: pointer; list-style: none; }
.exercise-card summary::-webkit-details-marker { display: none; }
/* A deliberately-linked sequence (superset, pre-fatigue, contrast set,
jumbo set — all the same primitive, PLANNING.md §6.4) — bracketed
together with no gap between the cards inside, distinct from the
normal gap between freely-orderable exercises elsewhere in the
session. */
.exercise-group { border-left: 3px solid var(--c-accent); padding-left: var(--sp-4); margin-bottom: var(--sp-4); }
.exercise-group .exercise-card { margin-bottom: var(--sp-3); }
.exercise-group .exercise-card:last-child { margin-bottom: 0; }
.group-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; color: var(--group-color, var(--c-accent)); margin-bottom: var(--sp-2); }
/* ---- Techniques (strip sets, to failure, superset, contrast set, ...) ---- */
/* Builder: a technique menu per set row and one per exercise card ("apply to
all sets"), both a native popover of checkboxes. */
.card-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.tech-menu { position: relative; display: inline-block; }
.tech-menu > summary { cursor: pointer; list-style: none; }
.tech-menu > summary::-webkit-details-marker { display: none; }
.tech-menu-body { position: absolute; z-index: 20; right: 0; top: 100%; margin-top: 4px; width: max-content; max-width: 300px; padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border-md); border-radius: var(--r-md); box-shadow: var(--shadow-md); text-align: left; }
.tech-menu-body .check-row small { font-weight: 400; }
table.set-table col.col-tech { width: 8.5rem; }
/* The builder can carry Reps, Weight, 🧮, % 1RM and Technique at once; on a phone the columns tighten so the set's remove button stays on the card. */
@media (max-width: 480px) {
table.set-table--prescribe col.col-idx { width: 2rem; }
table.set-table--prescribe col.col-num { width: 3rem; }
table.set-table--prescribe col.col-tech { width: 5rem; }
table.set-table--prescribe col.col-remove { width: 1.4rem; }
}
/* The popover must escape the cell — every other set-table cell clips. */
table.set-table td.tech-cell { overflow: visible; }
.tech-cell .tech-menu { display: block; }
.tech-cell .tech-menu-body { left: 0; right: auto; }
.tech-cell .tech-menu > summary { padding: 5px 6px; border: 1px solid var(--c-border-md); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text-lt); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-cell .tech-menu > summary.has-techniques { color: var(--c-brand); border-color: var(--c-brand); font-weight: 600; }
/* A linked group of exercise cards (builder, Log Session): one accent bar
down the left edge, the cards sitting close, and the group's type and note
above the first. */
/* Linked groups side by side must not blur together: every other group takes a
second colour (.group-alt), a group's cards share a faint tint of it, and a
wider gap follows the group. */
.is-grouped { --group-color: var(--c-accent); --group-tint: var(--c-accent-dim); }
.is-grouped.group-alt { --group-color: var(--c-brand); --group-tint: rgba(44, 110, 138, 0.1); }
.card.is-grouped { border-left: 5px solid var(--group-color); background: linear-gradient(var(--group-tint), var(--group-tint)), var(--c-surface); }
.card.is-grouped:not(.group-end) { margin-bottom: var(--sp-2); }
.card.is-grouped.group-end { margin-bottom: var(--sp-8); }
.group-controls, .group-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.group-controls label, .group-heading .group-label { margin: 0; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; }
.group-controls select, .group-controls input { width: auto; }
.group-controls input { flex: 1; min-width: 12rem; }
.group-heading .group-note { font-size: var(--text-sm); color: var(--c-text-md); }
/* The author's cue for one exercise, shown wherever the member sees that exercise. */
.exercise-note { font-size: var(--text-sm); color: var(--c-text-md); margin: var(--sp-2) 0 0; }
/* The same bracket on a read-only prescription table (Find/My Content's View
sessions, the workout detail page): an accent bar down the group's rows. */
tr.group-row > td, tr.is-grouped > td:first-child { border-left: 5px solid var(--group-color); }
tr.is-grouped > td { background: var(--group-tint); }
tr.group-row > td { padding-bottom: 0; }
.tech-cell .tech-menu > summary { font-family: var(--font-display); }
/* Read-only: a technique shown as a small pill beside what it applies to. */
.tech-chip { display: inline-block; padding: 1px 8px; border-radius: var(--r-full); background: var(--c-accent-dim); color: var(--c-accent); font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.tech-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: var(--sp-2); vertical-align: middle; }
/* ---- Modal (native |