/* ==========================================================================
   DoCalc — timer.css
   Styling for the Timer & Stopwatch utility (utilities/timer.html) only.
   Reuses .result-panel as the base for the big display "stage", since it's
   already the site's dark, high-contrast panel treatment.
   ========================================================================== */

.timer-stage {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.timer-stage-top {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.timer-stage-top .result-label { margin-bottom: 0; }

.timer-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid #334155; border-radius: 50%;
  color: #cbd5e1;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.timer-icon-btn:hover { border-color: var(--color-primary); color: #fff; }
.timer-icon-btn svg { width: 17px; height: 17px; }
.timer-icon-btn .icon-sun { display: none; }
.timer-stage.is-light .timer-icon-btn .icon-sun { display: block; }
.timer-stage.is-light .timer-icon-btn .icon-moon { display: none; }

.timer-big-display {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(48px, 9vw, 104px);
  line-height: 1.05; letter-spacing: 0.01em;
  color: #fff;
  margin: 18px 0 8px;
  font-variant-numeric: tabular-nums;
}

.timer-controls {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 18px; width: 100%;
}
.timer-controls .btn { min-width: 130px; }

/* .btn-outline defaults to dark text for a light page background — unusable
   on this dark stage, so Reset/Fullscreen get their own dark-safe variant
   (same treatment as .print-result-btn elsewhere on calculator pages). */
.timer-btn-outline {
  height: 48px; padding: 0 20px;
  border-radius: var(--radius-sm);
  border: 1px solid #334155; background: transparent; color: #fff;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.timer-btn-outline:hover { border-color: var(--color-primary); background: rgba(37,99,235,0.12); }

/* ---- Light "day" display (independent of the site's own dark mode) ---- */
.timer-stage.is-light {
  background: #f8fafc; border: 1px solid var(--color-border);
}
.timer-stage.is-light .timer-big-display { color: #0f172a; }
.timer-stage.is-light .result-label { color: #64748b; }
.timer-stage.is-light .timer-icon-btn { border-color: #cbd5e1; color: #475569; }
.timer-stage.is-light .timer-icon-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.timer-stage.is-light .timer-btn-outline { color: #334155; border-color: #cbd5e1; }
.timer-stage.is-light .timer-btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-accent-light); }

/* ---- Timer-finished flash ---- */
@keyframes timer-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
  50% { box-shadow: 0 0 0 12px rgba(74, 222, 128, 0.18); }
}
.timer-stage.is-flashing { animation: timer-flash 0.55s ease-in-out 4; }
.timer-stage.is-flashing .timer-big-display { color: #4ade80; }
.timer-stage.is-light.is-flashing .timer-big-display { color: #15803d; }

/* ---- Fullscreen: fill the viewport, scale the display up with it ---- */
.timer-stage:fullscreen,
.timer-stage.is-fullscreen {
  width: 100vw; height: 100vh;
  max-width: none; border-radius: 0;
  justify-content: center;
  padding: 40px;
}
.timer-stage:fullscreen .timer-big-display,
.timer-stage.is-fullscreen .timer-big-display {
  font-size: clamp(72px, 16vw, 220px);
  margin: 32px 0;
}

@media (max-width: 560px) {
  .timer-controls .btn { min-width: 0; flex: 1 1 calc(50% - 5px); }
}