/* css/controls.css — Braun redesign control primitives (v3.0).
   One family: .btn / .seg / .stepper / .pill. Imported into the `components` layer
   AFTER buttons.css so the new .btn base wins during migration.
   Authoritative values: design_handoff_show_clock/rd-styles.css §"CONTROL PRIMITIVES". */

.tnum { font-variant-numeric: tabular-nums; }

.btn {
  height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; border-radius: var(--r-ctrl); font-size: 14px; font-weight: 500;
  color: var(--muted); border: 1px solid var(--line-2); transition: var(--transition); white-space: nowrap;
  font-family: var(--sans); background: none; cursor: pointer;
}
.btn:hover { color: var(--fg); border-color: var(--muted); }
.btn--pri {
  background: var(--amber); color: var(--ink-on-accent); border-color: transparent; font-weight: 600; /* AUD-F41 */
  box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--amber) 70%, transparent);
}
.btn--pri:hover { filter: brightness(1.08); color: var(--ink-on-accent); } /* AUD-F41 */
.btn--icon { width: 40px; padding: 0; font-size: 16px; }
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn--ghost { border-color: transparent; }
.btn--ghost:hover { border-color: var(--line-2); background: color-mix(in oklab, var(--fg) 3%, transparent); }
.btn--danger { color: var(--error); border-color: color-mix(in oklab, var(--error) 35%, transparent); }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-ctrl); overflow: hidden; height: 40px; }
.seg button { padding: 0 14px; border-right: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 500; transition: var(--transition); font-family: var(--sans); background: none; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--amber); color: var(--ink-on-accent); font-weight: 600; } /* AUD-F41 */
.seg button:not(.on):hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 4%, transparent); }
.seg--full { display: flex; width: 100%; height: 42px; }
.seg--full button { flex: 1; }

.stepper { display: inline-flex; align-items: center; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r-ctrl); overflow: hidden; }
.stepper[data-s="late"] { border-color: color-mix(in oklab, var(--error) 38%, transparent); }
.stepper[data-s="ahead"] { border-color: color-mix(in oklab, var(--blue) 38%, transparent); }
.stepper button { width: 46px; height: 100%; font-size: 20px; font-weight: 500; color: var(--fg); background: color-mix(in oklab, var(--fg) 5%, transparent); transition: var(--transition); border: none; cursor: pointer; font-family: var(--sans); }
.stepper button:hover { color: var(--amber); background: color-mix(in oklab, var(--fg) 10%, transparent); }
.stepper__mid {
  min-width: 96px; padding: 0 12px; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; cursor: pointer;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: none;
}
.stepper[data-s="late"] .stepper__mid { color: var(--late-ink); }   /* AUD-F9 */
.stepper[data-s="ahead"] .stepper__mid { color: var(--ahead-ink); } /* AUD-F9 */

/* status pill — THE single schedule-status component */
.pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px;
  border: 1px solid; flex-shrink: 0; font-family: var(--sans);
}
.pill .pd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* AUD-F9: text inks moved to the per-theme --*-ink tokens — "Running late" is the
   most safety-relevant glance readout in the app and its LATE ink failed 4.5:1 in
   BOTH dark (4.16) and light (4.17). Tints/borders keep the raw accents. */
.pill--on { color: var(--ok-ink); border-color: color-mix(in oklab, var(--green) 30%, transparent); background: color-mix(in oklab, var(--green) 11%, transparent); }
.pill--late { color: var(--late-ink); border-color: color-mix(in oklab, var(--error) 34%, transparent); background: color-mix(in oklab, var(--error) 12%, transparent); }
.pill--ahead { color: var(--ahead-ink); border-color: color-mix(in oklab, var(--blue) 34%, transparent); background: color-mix(in oklab, var(--blue) 12%, transparent); }
.pill--idle { color: var(--muted); border-color: var(--line-2); background: var(--surface); }