/* ============================================================================
 * 1009 SHARED·STEPPER — the one nudge-a-number control
 * ============================================================================
 * BUILT 2026-08-28 as the second piece of the tools chassis, straight after 428. Same
 * method: measured off the bottle logger Andrew kept, never designed fresh.
 *
 * 🔴 THE ± STAY, AND THE REASON MATTERS BECAUSE THE OPPOSITE RULING ALSO EXISTS.
 * On 2026-08-06 Andrew ruled the DURATION control into a tap-to-spin: "where u spin the
 * numbers for hours and minutes in the same surface once you have tapped on the button" —
 * and logger-surface.css records "AND THE ± ARE GONE WITH IT". Read only that, and you
 * delete the plus and minus here while quoting Andrew at yourself.
 *
 * It does not apply. That ruling is about a control whose value is 5-10 HOURS: nudging is
 * the wrong input for a number you would have to tap forty times to reach, and the ± were
 * making the resting state look like a field waiting to be poked. Millilitres move in TENS
 * from a value that already opens on her last amount — one or two taps, at 3am, one-handed.
 * The screen he KEPT renders the ±; that is the authority, and it was verified by driving
 * the reference, not by reading its stylesheet. Two jobs, two controls.
 *
 * `.spin` — the tap-to-spin one — is a LATER chassis piece and already has its brief written
 * in logger-surface.css ("INTENDED AS A SHARED CONTROL... NOT ported yet... the class names
 * are deliberately kind-free so the port is a move, not a rewrite"). Do not fold them
 * together here: that would be one control with two contradictory rulings inside it.
 *
 * ⚠️ ONE MEASURED CHANGE FROM WHAT SHIPS, and it is invisible on purpose — see --stp-hit
 * below. Nothing else moves: the pill, the figure, the circles and the ink are the kept
 * screen's, to the pixel.
 * ============================================================================ */

.stp {
  /* ⚠️ --teal-700, NOT --accent, AND D-741 ALREADY RULED THIS (2026-08-22): "resting text is
     --teal-700, pressed --teal-800; --accent stays for fills/glyphs". The ± are drawn as TEXT
     characters, so they are text by every measure that matters here — the contrast audit reads
     them as text and fails --accent on --surface-card. Same finding, same fix, as 428's selected
     pill and 901's healthy green. A host may override; the default is the ruled resting ink. */
  --stp-ink: var(--teal-700);

  display: flex;
  width: 100%;
  align-items: center;
  /* ⚠️ space-between CENTRES THE FIGURE ONLY BECAUSE THE TWO BUTTONS ARE THE SAME WIDTH —
     the reference's own warning, kept because it is still true. If either button ever changes
     size the number drifts off-centre and reads as a bug rather than a layout rule. The case
     for the edges is thumb memory: after the first tap she knows where − and + are without
     looking, which is the whole argument for a stepper at 3am. */
  justify-content: space-between;
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  padding: var(--space-8) var(--space-16);
  /* ⚠️ PINNED, AND IT HAS TO BE. The reference control is 52px because its figure is 24px; taking
     the nearest type ROLE dropped the figure to 22 and the control followed it to 49 — a height
     nobody chose, three pixels off the one Andrew signed and off the 4px grid besides. Height is
     a size, so it is stated as one rather than left to fall out of the type. */
  min-height: var(--dim-52, 52px);
}

/* THE BUTTONS — a 32px circle you can hit at 44.
   🔴 THE VISIBLE CIRCLE IS 32 AND THE TARGET IS 44, AND THAT IS THE ONE CHANGE HERE.
   As shipped, the ± are 32×32 against --control-min 44px — under the touch floor, in the
   screen Andrew signed. The floor is not a style, so it cannot be waived by taste; but the
   circle IS a style, and raising it would change a look he has already ruled on. So the two
   are separated: the drawn circle stays 32, and the tappable area grows to 44 through the
   pseudo-element. The pill is 52px tall, so a 44px target fits inside it without the control
   growing by a pixel. Nothing moves; the miss rate does. */
.stp-btn {
  position: relative;
  width: var(--dim-32);
  height: var(--dim-32);
  border-radius: var(--radius-round);
  border: 0;
  background: none;
  color: var(--stp-ink);
  cursor: pointer;
  font-family: var(--font-body);
  /* ⚠️ THE TYPE SCALE HAS NO ROLE AT 20 — it runs 22 · 18 · 16 · 14 · 13 · 12 · 11 · 10. The
     reference's ± are 20px; taking the nearest role BELOW rather than pinning a raw 20 that no
     role owns. Below, not above, because the figure drops 24 -> 22 for the same reason: keeping
     the ± under the figure preserves the reference's hierarchy (20 < 24 becomes 18 < 22) instead
     of flattening the two. A 2px change from what shipped; on the sign-off sheet. */
  font-size: var(--text-subtitle);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.stp-btn::after {
  /* the hit target, not a shape: never painted, never measured by the eye */
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--control-min);
  height: var(--control-min);
  transform: translate(-50%, -50%);
}
.stp-btn:active { background: var(--surface-well); }
.stp-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* At the end of the range the button stops being an offer. Quieter, not hidden — a control
   that vanishes at the boundary makes the boundary look like a bug. */
.stp-btn:disabled { color: var(--text-tertiary); cursor: default; }
.stp-btn:disabled:active { background: none; }

/* THE FIGURE — display face, because it is the one thing on the control worth reading. */
.stp-v {
  font-family: var(--font-display);
  /* nearest role to the reference's 24 — see the ± note above. Still 'large text' by WCAG
     (>=18.66px at 600), so the untouched state may stay in the quietest ink. */
  font-size: var(--text-title);
  font-weight: var(--weight-600);
  min-width: var(--dim-48, 48px);
  text-align: center;
  color: var(--text-primary);
}
/* The unit rides with the number and never competes with it: body face, one size down,
   secondary ink. It is a label on a figure, not a second figure. */
.stp-v em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-500);
  color: var(--text-secondary);
  margin-left: var(--space-4);
}
/* Untouched: the number is not an answer yet, so it must not look like one. Straight from
   the reference (.stepper.is-blank), and the reasoning is worth keeping — an untouched
   default in full ink is a value she never chose, presented as one she did. */
.stp.is-blank .stp-v { color: var(--text-tertiary); }
/* ⚠️ THE UNIT DOES NOT GO AS QUIET AS THE FIGURE, AND THAT IS A CONTRAST FLOOR, NOT A CHOICE.
   The reference lets tertiary cascade onto both. It gets away with it on the FIGURE, which at
   22px/600 is 'large text' and needs only 3:1 — but the unit is 14px, normal text, and needs
   4.5:1, which tertiary on --surface-card does not clear. So the reference has a latent failure
   here that nobody had measured; secondary is the nearest ink that passes. On the sign-off sheet. */
.stp.is-blank .stp-v em { color: var(--text-secondary); }

/* THE TYPEABLE VALUE — bare on the pill, no box (D-435, one level of carding).
   A box round the number inside a carded pill is box-within-box; the reference already
   carries this note against .timechip and it applies unchanged. */
.stp-v input {
  width: 3ch;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: center;
}
.stp-v input::placeholder { color: var(--text-tertiary); }
.stp-v input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-2);
}