/* §12.3 the set row, and the today view around it. Tokens only. */

.today-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.today-title {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: 650;
}

.today-sub,
.preview-meta,
.ex-progress,
.plate-hint,
.ex-facts,
.done-flags {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.today-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.btn-primary {
  border-color: var(--accent-line);
  color: var(--accent);
}

/* ---- pre-start preview ---- */

.preview {
  display: flex;
  flex-direction: column;
}

.preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-2) 0;
  border-top: var(--hair) solid var(--line-soft);
}

/* §7.3: a session swapped in for today. Says what moved and offers the way
   back — an occurrence-level change, so it is stated where the occurrence is,
   not on the plan. */
.swap-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: var(--hair) solid var(--line);
  border-left: var(--edge-active) solid var(--accent);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.swap-note .btn-sm {
  margin-left: auto;
}

/* ---- rest timer ---- */

/* Pins BELOW the sticky header (not under it) so the countdown stays readable
   however far down the exercise list you have scrolled. */
.rest {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 5;
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-left: var(--edge-active) solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.rest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.rest-label {
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.rest-clock {
  color: var(--accent);
  font-size: var(--fs-num);
  font-weight: 650;
  line-height: var(--lh-tight);
}

.rest-bar {
  height: var(--s-1);
  margin: var(--s-2) 0;
  background: var(--surface-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.rest-fill {
  height: 100%;
  background: var(--accent);
}

.rest-next {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.rest-actions {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* ---- exercise cards ---- */

.ex-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ex-card--log {
  padding: 0;
  border-left: var(--edge-active) solid transparent;
}

/* The current exercise is the one bright thing on screen (§12.3). */
.ex-card--current {
  border-left-color: var(--accent);
}

/* §7.6 — waiting is distinct from skipped: deferred work is still coming. */
.ex-card--waiting {
  border-left-color: var(--warn);
}

.ex-card--skipped {
  opacity: var(--op-muted);
}

/* §7.1 mid-session swap: closed to further sets, but NOT muted like a skip —
   what it holds was performed, and the point of the split is that it stays
   readable. A plain edge marks it as finished with rather than dropped. */
.ex-card--swapped {
  border-left-color: var(--line);
}

.swap-line {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.chip--wait {
  color: var(--warn);
  border-color: var(--warn-line);
}

.ex-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ex-head-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-2) var(--card-pad);
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ex-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}

/* A status pill is one word and has to read as one word. `.chip` carries
   `overflow-wrap: anywhere` for chips holding free text; here the chip is a
   flex item next to an exercise name long enough to squeeze it, and that rule
   then breaks "waiting" mid-word into "waiti / ng". The name is what gives way
   — it already wraps — so the pill neither shrinks nor breaks. */
.ex-title > .chip {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.ex-nm {
  font-size: var(--fs-name);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ex-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--card-pad) var(--s-1);
}

.ex-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ex-note {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-label);
  font-style: italic;
}

/* ---- expanded card: this lift's §11 history, read-only ---- */

.ex-hist {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ex-hist-sessions {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.hist-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-1) 0;
  border-top: var(--hair) solid var(--line-soft);
  font-size: var(--fs-label);
}

.hist-date {
  flex: 0 0 auto;
  color: var(--text-dim);
}

.hist-sets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  color: var(--text);
}

/* A PR is marked, never congratulated (§12.6). */
.hist-set--pr {
  color: var(--accent);
}

/* ---- logged sets: one quiet line each (§12.3) ---- */

.done-list {
  display: flex;
  flex-direction: column;
}

.done {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-1) 0;
  border-top: var(--hair) solid var(--line-soft);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.done-n {
  min-width: var(--s-5);
  color: var(--text-dim);
}

.done-val {
  color: var(--text);
}

/* Warm-up and feeder sets recede further — they are not working volume. */
.done--warmup,
.done--feeder {
  opacity: var(--op-muted);
}

.done-type {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
}

.done-edit {
  min-width: var(--tap);
  min-height: var(--tap);
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
}

.done-edit + .done-edit {
  margin-left: 0;
}

/* ---- warm-up ramp offer (§8.2) ---- */

/* The box is a grouping cue, not a container to sit inside: "Add ramp" is
   already at the §12.4 floor, so the padding around it and the gap between
   rows come down to --s-1. Nothing that gets touched mid-set got smaller. */
.ramp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-1) var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-shade);
  border-radius: var(--r-md);
}

.ramp-actions {
  display: flex;
  gap: var(--s-2);
  margin-left: auto;
}

/* The dismiss, top-left. Deliberately below the §12.4 floor and the only
   control in the session view that is: the floor covers what is touched
   mid-set, and this is touched once, before the first set, to take an offer
   off the screen. Sized so it is still a target rather than a hairline, and
   aligned to the top of the box rather than the middle of the row so it reads
   as the box's own corner control instead of another item in the line. */
.ramp-x {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-6);
  height: var(--s-6);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-label);
  line-height: 1;
  cursor: pointer;
}

.ramp-x:hover {
  color: var(--text);
}

/* ---- B1 "short on time" ---- */

/* Same shape as .swap-note and for the same reason: both report a change that
   belongs to today's occurrence and offer the way back. Neutral edge, not
   --warn — a trimmed session is a decision, not a fault (§7.3, §12.6). */
.trim-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: var(--hair) solid var(--line);
  border-left: var(--edge-active) solid var(--accent);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.trim-note span {
  flex: 1 1 12ch;
}

/* A row about to leave the session. Dimmed and struck, never hidden — what
   comes out is the whole point of showing the preview. */
.preview-row--dropped .preview-nm,
.preview-row--dropped .preview-meta {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: var(--line);
  text-underline-offset: var(--underline-offset);
}

/* The name is the only thing in the row allowed to wrap. Without this the chip
   broke across two lines as "droppe / d" on the longest exercise name in the
   fixture, and the set count broke with it — caught on a 375px screenshot, not
   by reading the markup. */
.preview-row .chip,
.preview-row .preview-meta,
.preview-row .preview-cue,
.preview-row .preview-rir {
  flex: 0 0 auto;
  white-space: nowrap;
}

.preview-row--cut .preview-meta {
  color: var(--accent);
}

.trim-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--card-pad) 0;
}

.trim-label {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.trim-input {
  width: 6ch;
  min-height: var(--tap);
  padding: var(--s-2);
  font-size: var(--fs-input);
}

.trim-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3) var(--card-pad);
}

/* §12.4 — touched mid-planning but also one-handed on the way to the gym. */
.trim-chip {
  min-height: var(--tap);
  padding: 0 var(--s-3);
  cursor: pointer;
}

.trim-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: 0 var(--card-pad);
}

.trim-estimate {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.trim-est-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-label);
  color: var(--text-dim);
}

.trim-est-row--after {
  color: var(--text);
}

.trim-basis,
.trim-empty,
.trim-short {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
}

.trim-section {
  display: flex;
  flex-direction: column;
}

.trim-section-title {
  color: var(--text-dim);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

.trim-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) 0;
  border-top: var(--hair) solid var(--line-soft);
}

.trim-nm {
  flex: 1 1 auto;
  min-width: 0;
}

.trim-meta {
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-align: right;
}

.trim-actions {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4) var(--card-pad) var(--s-5);
}

/* ---- non-blocking nudge (§8.5) ---- */

.nudge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-left: var(--edge-active) solid var(--warn);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.nudge .btn-sm {
  margin-left: auto;
}

/* ---- §10 progression cue ---- */

/* Sits in the card body above the set row, so the suggested load is readable
   without expanding anything. Quiet by default; only the ready state earns the
   accent edge, because that is the one that asks you to do something. */
.prog {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-shade);
  border-radius: var(--r-md);
  font-size: var(--fs-label);
}

.prog--ready {
  border-left: var(--edge-active) solid var(--accent);
}

.prog-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
}

.prog-head {
  color: var(--accent);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
}

.prog-line .num {
  color: var(--text);
}

.prog-how,
.prog-why,
.prog-line--quiet {
  margin: 0;
  color: var(--text-dim);
}

.prog-line--warn {
  color: var(--warn);
}

.prog-line--note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-dim);
}

.prog-line--note .btn-sm {
  margin-left: auto;
}

/* The pre-start preview's one-glance version of the same suggestion. */
.preview-nm {
  margin-right: auto;
}

.preview-cue {
  color: var(--accent);
  font-size: var(--fs-label);
}

/* §10.1 reference line — the template's original prescription. */
.ex-ref {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-label);
}