/* Herald · Timers — app tweaks. Base in glass-core.css.
   Additive display: luminous, no dark fills. DONE must grab a glance. */
.t-out {
  flex-shrink: 0;
  text-align: center;
  padding: 14px 0 10px;
}
.t-big {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.18);
}
.t-sub {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
/* Remaining time on a running row — big, tabular, right-aligned. */
.t-rem {
  flex-shrink: 0;
  font-size: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  align-self: center;
  padding-left: 10px;
}
/* A finished timer: bright amber, pulsing — readable across a room. */
.t-done .t-rem,
.t-big.t-done {
  color: #ffce75;
  text-shadow: 0 0 24px rgba(255, 206, 117, 0.75);
}
.row.t-done {
  border-color: rgba(255, 206, 117, 0.7);
  background: linear-gradient(180deg, rgba(255, 206, 117, 0.16), rgba(255, 206, 117, 0.05));
  animation: t-pulse 1.1s ease-in-out infinite;
}
@keyframes t-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 206, 117, 0); }
  50% { box-shadow: 0 0 22px rgba(255, 206, 117, 0.5); }
}
.t-big.t-done { animation: t-pulse 1.1s ease-in-out infinite; }

/* Circular countdown — depletes as the timer runs down. */
.t-ring {
  position: relative;
  width: 264px;
  height: 264px;
  margin: 8px auto 12px;
  flex-shrink: 0;
}
.t-ring svg { width: 100%; height: 100%; display: block; }
.t-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 11;
}
.t-ring-fg {
  fill: none;
  stroke: var(--app-accent, var(--brand));
  stroke-width: 11;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.9s linear;
  filter: drop-shadow(0 0 9px var(--aa-glow, rgba(106, 255, 180, 0.7)));
}
.t-ring-fg.t-ring-done {
  stroke: #ffce75;
  filter: drop-shadow(0 0 12px rgba(255, 206, 117, 0.85));
}
.t-ring-c {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.t-ring .t-big { font-size: 50px; }
.t-ring .t-sub { margin-top: 6px; }

/* Clock & stopwatch: big, luminous, glanceable. */
.clk-wrap { flex-shrink: 0; text-align: center; padding: 18px 0 14px; }
.clk-time {
  font-size: 70px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.2);
}
.clk-date {
  margin-top: 12px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.4px;
}