/* §12.3 — the signature set row. Weight and reps large, tabular and
   directly tappable; the open field becomes a stepper with − and + at the
   screen edges. Tokens only. */

/* ---- the active set row (§12.3) ---- */

/* Density (§12.1): every row in here is a tap target at its floor size, so the
   only space that may be taken is the space BETWEEN them. The gap is --s-2
   rather than --s-3, and the block no longer carries a margin AND a padding on
   top of the .ex-body gap that already separates it — three spacings doing one
   job. Nothing inside got smaller. */
.active-set {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-2);
  border-top: var(--hair) solid var(--line-soft);
}

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

/* Repainted in place as the weight is typed, so it is always in the tree.
   Empty it would still be a flex item and would still add a row gap. */
.under-wrap:empty {
  display: none;
}

/* Sized with the target line it sits opposite, not above it — this is a
   position marker, not a heading. */
.active-n {
  font-size: var(--fs-label);
  font-weight: 650;
}

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

.val-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

/* While a field is being stepped it owns the whole row, edge to edge. */
.val-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.val-alt {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
}

.altval {
  display: flex;
  align-items: baseline;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: var(--s-1) var(--s-4);
  background: none;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-name);
  cursor: pointer;
}

.side-tag {
  min-width: var(--s-5);
  color: var(--text-dim);
  font-weight: 650;
}

.times {
  color: var(--text-dim);
  font-size: var(--fs-name);
}

/* The numbers are the content: large, tabular, and themselves the control. */
.bigval {
  display: flex;
  flex: 1 1 0;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--tap-lg);
  padding: var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-shade);
  border-bottom-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--inset-1);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.bigval-n {
  font-size: var(--fs-num);
  font-weight: 650;
  line-height: var(--lh-tight);
}

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

/* Stepper: − and + at the screen edges, thumb-sized, never centred (§12.3).
   The negative inline margin breaks the row out of the card's padding so the
   buttons sit as close to the bezel as the layout allows. */
.stepper {
  display: flex;
  flex: 1 1 100%;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s-2);
  margin-inline: calc(-1 * var(--card-pad));
}

.step {
  flex: 0 0 auto;
  min-width: var(--tap-lg);
  min-height: var(--tap-lg);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-name);
  font-weight: 650;
  cursor: pointer;
}

.stepper-mid {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--tap-lg);
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

/* The weight, typed. Sits where .stepper-mid does and reads at the same size —
   the number is still the content, it just takes a keyboard as well as thumbs.
   A recessed well (§12.5a) so it reads as a field rather than a label. */
.wt-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--tap-lg);
  padding: 0 var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-shade);
  border-bottom-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--inset-1);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-num);
  font-weight: 650;
  line-height: var(--lh-tight);
  text-align: center;
}

/* Not yet the user's number: dashed while it is the app's suggestion, and the
   numeral dimmed with it. The "prefilled" pill that used to say this in a word
   is gone, so the value has to carry the whole distinction on its own — a
   dashed edge alone was the quieter half of a two-part signal. Dim here is
   --text-dim, the same tone every other secondary numeral in the app uses —
   measured at 4.97:1 on --surface-alt, clear of the §12.4 4.5:1 floor, against
   12.96:1 confirmed. It goes to full contrast on the first keystroke or
   stepper press and never comes back. */
.wt-input--prefill,
.bigval--prefill {
  border-style: dashed;
}

.wt-input--prefill,
.bigval--prefill .bigval-n {
  color: var(--text-dim);
}

/* Plate-derived jumps (§7.2c). A second row, so the ±one-increment pair keeps
   the screen edges §12.3 asks for. Two groups, pushed apart, largest outermost
   so the reach matches the size of the change. */
.step-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-inline: calc(-1 * var(--card-pad));
}

.step-more-side {
  display: flex;
  gap: var(--s-2);
}

.step-jump {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
}

.step-jump:hover {
  border-color: var(--accent-line);
  color: var(--accent);
}

/* Last time's numbers and the §8.3 plate breakdown, on one line beneath the
   boxes. Two rows for two short dim notes was a row of pure spacing; they wrap
   onto a second line only when they genuinely do not fit. */
.last-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--s-2);
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-align: center;
}

/* Two facts sharing a row need a mark between them, or "× 8  20 kg bar" reads
   as one run of numbers. The same middle dot the rest of the app separates
   facts with. */
.last-line > :not(:first-child)::before {
  content: '·';
  margin-right: var(--s-2);
}

.plate-hint--warn {
  color: var(--warn);
}

/* ---- rir, type and technique chips ---- */

.rir-row,
.type-row,
.flag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.rir-chips,
.flag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.chip--pick {
  min-height: var(--tap);
  padding: var(--s-1) var(--s-3);
  color: var(--text-dim);
  font: inherit;
  font-size: var(--fs-label);
  cursor: pointer;
}

.chip--on {
  border-color: var(--accent-line);
  color: var(--accent);
}

.btn-log {
  min-height: var(--tap-lg);
  border-color: var(--accent-line);
  color: var(--accent);
  font-size: var(--fs-name);
}

/* Editing a logged set: the way out sits beside the way in. Save keeps the
   width it has when it is alone on the row; Cancel takes only what its word
   needs, and both keep the full stepper height so the pair reads as one
   control rather than two of different sizes. */
.log-row {
  display: flex;
  gap: var(--s-2);
}

.log-row .btn-log {
  flex: 1 1 auto;
}

.btn-cancel {
  min-height: var(--tap-lg);
}

/* Nothing to log: the weight is empty and no number may be invented for it.
   Still full size — the control has not moved, it is simply not ready. */
.btn-log:disabled {
  border-color: var(--line);
  color: var(--text-dim);
  box-shadow: none;
  cursor: default;
}