/* styles.css — Chrono.
 *
 * Every number in the "tokens" block below comes from SPEC §5, which was
 * measured pixel-by-pixel off Apple's own iOS 27 screenshots. Units are CSS px,
 * which on iOS are points. Do not "improve" these values by eye — they were
 * measured. Layout-specific numbers (things the spec does not pin down) are
 * marked "// choice" and listed in BUILD-NOTES.md.
 */

:root {
  --bg: #000000;
  --capsule: #1f1f1f;
  --well: #0a0a0a;
  --tint: #ff9f0a;
  --tablabel: #c6c6c6;
  --grey: #8e8e93;
  --hairline: #333338;
  --sheet: #1c1c1e;
  --card: #2c2c2e;
  --white: #ffffff;
  --green: #30d158;
  --red: #ff453a;
  --tab-h: 60px;            /* choice: native capsule height */
  --tab-inset: 10px;
  --tab-bottom: 25px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

/* Every number in the app is tabular. SPEC §5.6 */
.num,
.readout,
.tab-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease; /* choice: a cross-fade between tabs */
}

.page.active {
  visibility: visible;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Tab capsule — SPEC §5.1
   --------------------------------------------------------------------------- */

.tabbar {
  position: fixed;
  left: var(--tab-inset);
  right: var(--tab-inset);
  bottom: calc(var(--tab-bottom) + var(--safe-b));
  height: var(--tab-h);
  padding: 4px;
  background: var(--capsule);
  border-radius: calc(var(--tab-h) / 2);
  display: flex;
  z-index: 60;
}

.tabwell {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  background: var(--well);
  border-radius: calc(var(--tab-h) / 2 - 4px);
  transition: transform 0.35s cubic-bezier(0.32, 1.1, 0.5, 1);
  will-change: transform;
}

.tab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--tablabel);
  transition: color 0.2s ease;
}

.tab svg {
  width: 24px;
  height: 24px;
  display: block;
}

.tab.active {
  color: var(--tint);
}

/* ---------------------------------------------------------------------------
   Stopwatch — SPEC §5.3
   --------------------------------------------------------------------------- */

.readout {
  /* measured: digits top 172, baseline 232, 83 pt thin.
     The 6 px of adjustment centres the *glyphs* rather than the line box. */
  position: absolute;
  left: 0;
  right: 0;
  top: 152px; /* choice: calibrated so glyph tops land at 172 (see BUILD-NOTES) */
  height: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(83px, 21.3vw);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.011em;
  color: var(--white);
  white-space: nowrap;
}

.readout.small {
  font-size: min(64px, 16.4vw);
}

.btn-circle {
  position: absolute;
  top: 380.5px; /* 420 - 79/2 */
  width: 79px;
  height: 79px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.2, 1.3, 0.4, 1);
}

.btn-circle.left { left: 33.5px; }   /* centre x = 73 */
.btn-circle.right { right: 16.5px; } /* centre x = 334 */

.btn-circle::after {
  /* the 8 % white tap overlay */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.btn-circle:active {
  transform: scale(0.92);
  transition-duration: 0.12s;
}

.btn-circle:active::after {
  opacity: 1;
  transition-duration: 0.12s;
}

.btn-circle .btn-label {
  position: relative;
  z-index: 1;
  transition: opacity 0.2s ease;
}

/* The material rule: fill is the tint at 20 % over black, label is full tint. */
.btn-circle.start { background: #0a2a12; color: var(--green); }
.btn-circle.stop { background: #330d0e; color: var(--red); }
.btn-circle.grey { background: #333333; color: var(--white); }
.btn-circle.orange { background: #33200a; color: var(--tint); }

.btn-circle[data-tint="1"] { background: color-mix(in srgb, var(--green) 20%, #000); color: var(--green); }

/* Page dots — SPEC §5.2 */
.dots {
  position: absolute;
  top: 399.25px; /* 413.25 − 14 of hit padding: the dots themselves stay at y = 417 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 14px 8px;
  z-index: 2;
}

.dot {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: rgba(142, 142, 147, 0.4);
  flex: none;
  transition: background 0.2s ease;
}

.dot.active {
  background: var(--white);
}

.dot-add {
  position: absolute;
  top: 403px;
  /* anchored to the right button, not to the centre, so the two can never
     collide on a narrow screen */
  right: 107px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.dot-add:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.16);
}

.dot-add[hidden] {
  display: none;
}

/* Lap list — SPEC §5.4 */
.laps {
  position: absolute;
  left: 0;
  right: 0;
  top: 466px;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 110px;
}

.lap {
  position: relative;
  height: 41.7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 400;
}

.lap + .lap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 23px;
  right: 23px;
  height: 0.8px;
  background: var(--hairline);
}

.lap .lap-label {
  padding-left: 30px;
  color: var(--white);
}

.lap .lap-time {
  padding-right: 30px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--white);
}

.lap.fastest .lap-time { color: var(--green); }
.lap.slowest .lap-time { color: var(--red); }

.lap.enter {
  animation: lapIn 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes lapIn {
  from { height: 0; opacity: 0; transform: translateY(-6px); }
  to { height: 41.7px; opacity: 1; transform: none; }
}

.empty-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 466px;
  padding: 0 30px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--grey);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Timers — SPEC §5.5
   --------------------------------------------------------------------------- */

.timers {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 130px;
}

.timers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-t) + 12px) 4px 10px;
}

.timers-title {
  font-size: 20px;
  font-weight: 700;
}

.plus-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--card);
  color: var(--tint);
  font-size: 22px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.plus-btn:active { transform: scale(0.9); }

.timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  gap: 12px;
}

.timer-row + .timer-row { border-top: 0.8px solid var(--hairline); }

.timer-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.timer-label {
  font-size: 15px;
  color: var(--grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-value {
  font-size: 34px;
  font-weight: 200;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.timer-row.fired .timer-value { color: var(--red); }

.timer-actions { display: flex; gap: 10px; flex: none; }

.pill {
  height: 36px;
  min-width: 68px;
  padding: 0 14px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.pill:active { transform: scale(0.95); }
.pill.orange { background: #33200a; color: var(--tint); }
.pill.grey { background: #2c2c2e; color: #ebebf5; }

.timers-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 70%;
  color: var(--grey);
  font-size: 15px;
}

/* ---------------------------------------------------------------------------
   The timer sheet — the screen to copy most carefully. SPEC §5.5
   --------------------------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 70;
}

.backdrop.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 9px;
  right: 9px;
  top: 65px;
  bottom: calc(13px + var(--safe-b));
  background: var(--sheet);
  border-radius: 36px;
  z-index: 80;
  transform: translateY(110%) scale(1);
  transition: transform 0.42s cubic-bezier(0.28, 1.12, 0.44, 1);
  display: flex;
  flex-direction: column;
  padding: 0 26px;
  overflow: hidden;
  will-change: transform;
}

.sheet.open { transform: none; }

.sheet-head {
  position: relative;
  height: 62px; /* choice: puts the 37.5 pt circles' centre at y = 100, as measured */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.sheet-head .circle-sm {
  width: 37.5px;
  height: 37.5px;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.24);
  color: #ebebf5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}

.sheet-head .circle-sm:active {
  transform: scale(0.92);
  background: rgba(118, 118, 128, 0.36);
}

.sheet-head .circle-sm svg { width: 17px; height: 17px; }

.sheet-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  pointer-events: none;
}

.sheet-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

/* Picker band: 286 × 49, radius = height/2 */
.picker {
  width: 286px;
  height: 49px;
  border-radius: 24.5px;
  background: var(--card);
  display: flex;
  align-items: center;
  margin-top: 12px;
  overflow: hidden;
  position: relative;
  flex: none;
}

.picker .col {
  flex: 1 1 0;
  height: 49px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: center;
  position: relative;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.picker .col::-webkit-scrollbar { display: none; }

.picker .col .spacer { height: 24.5px; }

.picker .col .cell {
  height: 49px;
  line-height: 49px;
  font-size: 22px;
  scroll-snap-align: center;
  color: var(--grey);
  transition: color 0.12s linear, opacity 0.12s linear;
}

.picker .col .cell.sel { color: var(--white); }

.picker .colon {
  flex: none;
  width: 8px;
  text-align: center;
  font-size: 22px;
  color: var(--grey);
  padding-bottom: 2px;
}

/* Preset circles: 75 pt, four across 302 pt */
.presets {
  width: 302px;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  flex: none;
}

.preset {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.preset:active { transform: scale(0.94); background: #3a3a3c; }
.preset .n { font-size: 26px; font-weight: 400; color: var(--white); font-variant-numeric: tabular-nums; }
.preset .u { font-size: 15px; color: var(--tint); }

/* Section header: 20 pt bold, aligned to the card edge */
.section-head {
  width: 302px;
  font-size: 20px;
  font-weight: 700;
  margin: 26px 0 8px;
  flex: none;
}

/* Grouped card: 302 × 98, radius 22 */
.card {
  width: 302px;
  border-radius: 22px;
  background: var(--card);
  overflow: hidden;
  flex: none;
}

.row {
  width: 100%;
  height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 17px;
  position: relative;
  text-align: left;
}

.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0.8px;
  background: rgba(84, 84, 88, 0.65);
}

.row .rv {
  color: var(--grey);
  max-width: 55%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}

.row input.rv {
  text-align: right;
  color: var(--tint);
}

.sheet-hint {
  width: 302px;
  font-size: 13px;
  color: var(--grey);
  margin-top: 18px;
  line-height: 1.35;
  flex: none;
}

/* ---------------------------------------------------------------------------
   Session
   --------------------------------------------------------------------------- */

.session {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--safe-t) + 18px) 20px 130px;
}

.session h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  outline: none;
}

.session .sub {
  font-size: 13px;
  color: var(--grey);
  margin: 0 0 22px;
  line-height: 1.4;
}

.session h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 26px 0 10px;
}

.s-card {
  background: var(--card);
  border-radius: 22px;
  overflow: hidden;
}

.s-row {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 17px;
  gap: 12px;
  position: relative;
  width: 100%;
  text-align: left;
}

.s-row + .s-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0.8px;
  background: rgba(84, 84, 88, 0.65);
}

.s-row .sv { color: var(--grey); font-size: 15px; text-align: right; }
.s-row.accent { color: var(--tint); }
.s-row .chev { color: #636366; }

.s-note {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.4;
  margin: 10px 4px 0;
}

.paste {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.paste input {
  flex: 1 1 auto;
  height: 44px;
  border-radius: 12px;
  background: var(--card);
  padding: 0 14px;
  font-size: 15px;
  min-width: 0;
}

.paste button {
  flex: none;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--tint);
  color: #000;
  font-weight: 600;
  font-size: 15px;
}

/* QR card */
.qr-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.qr-card {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  position: relative;
}

.qr-card svg { width: 100%; height: auto; aspect-ratio: 1; display: block; }

.link-box {
  width: 100%;
  background: var(--card);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--grey);
  word-break: break-all;
  max-height: 88px;
  overflow-y: auto;
  user-select: text;
  -webkit-user-select: text;
}

/* ---------------------------------------------------------------------------
   Chips, alerts, toasts
   --------------------------------------------------------------------------- */

.chip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--safe-t) + 8px);
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(28, 28, 30, 0.94);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 500;
  color: var(--tint);
  z-index: 90;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.chip.grey { color: #d1d1d6; }
.chip[hidden] { display: none; }

.chip:active { transform: translateX(-50%) scale(0.96); }

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  bottom: calc(96px + var(--safe-b));
  background: rgba(44, 44, 46, 0.96);
  color: #fff;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 20px;
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: 86vw;
  text-align: center;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Timer-fired overlay */
.alarm {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.alarm.open { opacity: 1; pointer-events: auto; }

.alarm .eyebrow {
  font-size: 15px;
  color: var(--tint);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.alarm .who {
  font-size: 28px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 4px;
}

.alarm .zero {
  font-size: 83px;
  font-weight: 100;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 26px;
}

.alarm .btn-wide {
  width: 230px;
  height: 52px;
  border-radius: 26px;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alarm .btn-wide.orange { background: #33200a; color: var(--tint); }

/* ---------------------------------------------------------------------------
   Motion preferences — SPEC §5.7
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tabwell { transition: none; }
  .sheet { transition: opacity 0.2s ease; transform: none; opacity: 0; pointer-events: none; }
  .sheet.open { opacity: 1; pointer-events: auto; }
  .btn-circle:active { transform: none; }
  .lap.enter { animation: none; }
  .page { transition: none; }
}

/* ---------------------------------------------------------------------------
   Pieces the HTML asks for that the measured spec does not cover.
   All of these are "choice" — see BUILD-NOTES.md.
   --------------------------------------------------------------------------- */

body { touch-action: manipulation; }

/* Session tab title, editable in place */
.session-title {
  display: block;
  width: 100%;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding: 0;
  margin: 0 0 4px;
  color: var(--white);
}

.session-title::placeholder { color: #3a3a3c; }

.chip-inline {
  display: inline-block;
  margin: 0 0 8px;
  padding: 9px 13px;
  border-radius: 12px;
  background: #33200a;
  color: var(--tint);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* A timer on its own gets the full stopwatch treatment. */
.timer-solo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 0 30px;
}

.timer-solo .solo-label {
  font-size: 15px;
  color: var(--grey);
  margin-bottom: 10px;
  max-width: 80%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-solo .solo-value {
  font-size: min(83px, 21.3vw);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.011em;
  margin-bottom: 42px;
  color: var(--white);
}

.timer-solo.fired .solo-value { color: var(--red); }

.timer-solo .solo-actions {
  display: flex;
  gap: 26px;
}

.btn-circle.static {
  position: static;
  flex: none;
}

.preset.on {
  background: #33200a;
  box-shadow: inset 0 0 0 1px rgba(255, 159, 10, 0.35);
}

/* Action sheet — the one control the native app has and the spec did not name. */
.action-sheet {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  padding: 10px 10px calc(10px + var(--safe-b));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.action-sheet.open {
  opacity: 1;
  pointer-events: auto;
}

.action-card {
  width: 100%;
  background: rgba(28, 28, 30, 0.98);
  border-radius: 22px;
  overflow: hidden;
  transform: translateY(24px);
  transition: transform 0.3s cubic-bezier(0.28, 1.1, 0.44, 1);
}

.action-sheet.open .action-card { transform: none; }

.action-title {
  padding: 16px 20px 12px;
  font-size: 13px;
  color: var(--grey);
  text-align: center;
  line-height: 1.35;
}

.action-input {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  height: 44px;
  border-radius: 12px;
  background: var(--card);
  padding: 0 12px;
  font-size: 17px;
  color: var(--white);
}

.action-item {
  display: block;
  width: 100%;
  height: 52px;
  font-size: 17px;
  color: var(--tint);
  border-top: 0.8px solid rgba(84, 84, 88, 0.65);
}

.action-item:active { background: rgba(255, 255, 255, 0.06); }
.action-item.destructive { color: var(--red); }
.action-item.cancel { font-weight: 600; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .action-card { transition: none; transform: none; }
}

/* A disabled control keeps its fill and dims only its label (native behaviour). */
.btn-circle.dim { background: #333333; }
.btn-circle.dim .btn-label { color: rgba(255, 255, 255, 0.32); }

/* The UA's [hidden] rule loses to any explicit display; make it stick. */
[hidden] { display: none !important; }

/* A filled value in a sheet row reads as light grey, not as the tint. */
.row input.rv { color: #ebebf5; }
.row input.rv::placeholder { color: var(--grey); }

/* ─────────────────────────────────────────────────────────────────────────
   Layout fixes, 2026-11-10, after measuring the rendered page against SPEC §5.

   1. The add-a-stopwatch control sat in the gutter between Lap and Start, where
      it read as a stray dot rather than a button. It belongs at the top right,
      which is where every iOS app puts an add affordance — and where this app's
      own Timers tab already puts its. It stays out of the native layout's way.
   2. The capsule was 49 pt; SPEC §5.1 calls for 60 (369 × 60, radius 30), which
      is what makes the selection well 52 pt tall rather than 41.
   ───────────────────────────────────────────────────────────────────────── */
.dot-add {
	top: calc(env(safe-area-inset-top, 0px) + 10px);
	right: 16px;
	width: 36px;
	height: 36px;
	font-size: 22px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Empty-state hint, 2026-11-10. It sat ~40 pt under the buttons, where it read
   as a caption for Reset rather than as an empty state. Moved down into the
   empty lap area, smaller and dimmer, so the screen still looks like the native
   app until you actually start something.
   ───────────────────────────────────────────────────────────────────────── */
.empty-hint {
	top: 500px;
	font-size: 13px;
	line-height: 1.35;
	color: #6e6e73;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
}