/*
 * mlp-workout-timer styles. Import after platform.css, same convention as mlp-forms/mlp-dialog —
 * reuses its tokens (--c-*, --s-*, --radius, --t-*). This is the timer *mechanism* only: the
 * phase label, the countdown, and its own Start/Pause/Reset controls. What page it's mounted on
 * (a routine-run step) is the consuming view's own content.
 */

.mlp-workout-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  text-align: center;
}

.mlp-workout-timer__phase {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.mlp-workout-timer__time {
  font-family: var(--f-mono);
  font-size: var(--t-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

.mlp-workout-timer--done .mlp-workout-timer__phase {
  color: var(--c-success);
}

.mlp-workout-timer--done .mlp-workout-timer__time {
  color: var(--c-success);
}

.mlp-workout-timer__controls {
  display: flex;
  gap: var(--s-2);
}

.mlp-workout-timer__button {
  padding: var(--s-2) var(--s-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.mlp-workout-timer__button:hover {
  background: var(--c-accent-hover);
}

.mlp-workout-timer__button--ghost {
  background: none;
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

.mlp-workout-timer__button--ghost:hover {
  background: var(--c-accent-wash);
  color: var(--c-text);
}