/* timer_html, root .tm-wrap.
   Rules whose subject is the root (.tm-wrap and its three [data-state] variants) stay
   bare; every other selector is scoped :where(.tm-wrap), which adds no specificity. */
.tm-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--ch-bg-secondary);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-full);
  font-family: var(--ch-font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--ch-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
:where(.tm-wrap) .tm-icon {
  font-size: 14px;
  line-height: 1;
}
:where(.tm-wrap) .tm-value {
  min-width: 48px;
  text-align: right;
}
/* Visual emphasis when remaining < 60s — drives focus without
   blocking interaction. */
.tm-wrap[data-state="warning"] {
  background: var(--ch-warning-bg, #fef3c7);
  border-color: var(--ch-warning-border, #fcd34d);
  color: var(--ch-warning, #d97706);
}
/* Final 10s — stronger emphasis. */
.tm-wrap[data-state="critical"] {
  background: var(--ch-danger-bg, #fee2e2);
  border-color: var(--ch-danger-border, #fca5a5);
  color: var(--ch-danger, #dc2626);
}
.tm-wrap[data-state="zero"] {
  background: var(--ch-danger-bg, #fee2e2);
  border-color: var(--ch-danger-border, #fca5a5);
  color: var(--ch-danger, #dc2626);
}