/* Stopwatch & Timer — a mode bar, then one pane per mode (layout from
   styles/components/form.css): the stopwatch card (big display, controls)
   over a laps card whose rows app.js adds, and the timer card (countdown,
   duration, presets, controls). Duration fields use the shared unit field; only
   the display and lap rows are the page's own. */

/* The display is the page: far larger than the shared hero value. */
.st-display {
  font-family: var(--mono);
  font-size: clamp(56px, 16vw, 92px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
  text-align: center;
  overflow-wrap: normal;
}
.st-cs { font-size: 0.5em; color: var(--text-muted); vertical-align: baseline; }
.st-display.is-done { color: var(--danger, #FF3B30); animation: st-flash 0.8s var(--ease-standard) 3; }
@keyframes st-flash { 50% { opacity: 0.35; } }

.st-actions { justify-content: center; }
/* Disabled Lap: neutral muted treatment, not a faded accent tint, so 'unavailable' reads clearly. */
.st-actions .btn--tinted:disabled {
  background: var(--bg-fill);
  color: var(--text-muted);
  opacity: 0.6;
}

/* Laps: the list is the card, each lap one row (newest first). */
ol.st-laps { list-style: none; margin: 0; padding: 0; }
.st-lap {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.st-lap > :first-child { flex: 1 1 auto; }
.st-lap__split { color: var(--accent); }
.st-lap__total { color: var(--text-muted); }