/* exerciseAndRestTimer.css — the floating per-client timer stack: compact labelled countdown
   cards (overtime/stopped/flash states). Extracted from index.css 2026-07-27.
   Inherits design tokens, glass-card/button/flex foundations and
   color scheme from index.css, loaded first — this file adds only what
   exerciseAndRestTimer.js owns. */

/* Per-client timer stack: a column of compact labelled countdowns floating over the clipboard. */
/* Same viewport-vs-column pinning as .floating-action-btn — see the note there. */
.timer-stack {
  position: fixed;
  bottom: calc(92px + var(--safe-bottom) + 12px);
  right: max(6px, calc((100vw - var(--app-max-width, 480px)) / 2 + 6px));
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 190px;
  max-height: 60vh;
  overflow-y: auto;
  pointer-events: none; /* let taps fall through the gaps between cards */
}
.timer-card {
  pointer-events: auto;
  padding: 8px 12px;
  cursor: pointer;
  /* Force full opacity regardless of theme: --card-bg carries a translucent alpha (for the
     glassmorphic look other cards use sitting on the page background), but the timer stack now
     floats over arbitrary view content (13.4), so any see-through would blend with whatever's
     underneath. Paint the theme's card tint over an opaque backing instead of using --card-bg
     directly, and drop the blur since there's nothing left behind it to blur. */
  background-image: linear-gradient(var(--card-bg), var(--card-bg));
  background-color: var(--bg-color);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.timer-card.timer-card-enter {
  animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.timer-card-head {
  margin-bottom: 2px;
  gap: 8px;
}
.timer-card-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.timer-card-who {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-main);
}
.timer-card-who i {
  color: var(--primary);
  flex: 0 0 auto;
}
.timer-card-who strong {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timer-card-type {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The glyph stays small; the target around it is a thumb, as for .modal-close-btn. A trainer week of
   2026-10-11 measured it at 13 pixels high, the one control that closes a running timer mid-set. The
   negative margin keeps the card as tall as it was. */
.timer-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: -12px -12px -12px 0;
}
.timer-close:hover {
  color: var(--text-main);
}
.timer-card-time {
  font-family: var(--font-header);
  font-size: 30px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Overtime: past zero the countdown goes negative and turns red to demand attention. */
.timer-card.overtime {
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
}
.timer-card.overtime .timer-card-time,
.timer-card.overtime .timer-card-label i {
  color: var(--danger);
}
/* Stopped: the owning exercise/circuit finished, so the timer is frozen at its final value and
   dimmed to read as "done, awaiting dismissal" rather than something still needing attention —
   deliberately NOT a warning color, which stays reserved for a still-running overtime timer. */
.timer-card.stopped {
  opacity: 0.6;
}
.timer-card.stopped .timer-card-time,
.timer-card.stopped .timer-card-label i {
  color: var(--text-muted);
}
/* Start-button feedback: a warning flash when a start is refused (timer still has time left), and
   an acknowledge blink when an overtime timer is reset. Neither disturbs the running countdown. */
@keyframes timerFlashWarn {
  0%,
  100% {
    background: var(--card-bg);
    border-color: var(--card-border);
  }
  35% {
    background: var(--timer-warn-peak-color);
    border-color: #f59e0b;
  }
}
.timer-card.flash-warning {
  animation: timerFlashWarn 1s ease;
}
@keyframes timerBlinkAck {
  0%,
  40%,
  100% {
    background: var(--card-bg);
    border-color: var(--card-border);
  }
  20%,
  60% {
    background: color-mix(in srgb, var(--success) 38%, var(--card-bg));
    border-color: var(--success);
  }
}
.timer-card.flash-ack {
  animation: timerBlinkAck 1s ease;
} /* MODAL DIALOGS */