/* WUMETAX TIME: readability and responsive refinements, 2026-10-23.
   Preserve the original flat colors and layout without squeezing numbers. */
:root { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { scroll-padding-top: 6.5rem; }
#sec-clock, #sec-alarm, #sec-timer, #sec-date, #sec-timeplus, #sec-world {
  scroll-margin-top: 6.5rem;
}
#brand-name {
  display: block;
  white-space: nowrap;
  font-size: clamp(1rem, 2.1vw, 1.5rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: 0.012em;
}
#brand-subtitle { line-height: 1.45; letter-spacing: 0.015em; }
#main-header-logo { flex: none; }
#clock-fullscreen-container { min-width: 0; container-type: inline-size; }
#hero-clock-row { min-width: 0; gap: 0.1rem; overflow: visible; }
#hero-time-main {
  min-width: 0;
  font-size: clamp(2rem, 10.7vw, 7.35rem);
  line-height: 1.16;
  letter-spacing: 0.008em;
  white-space: nowrap;
}
#hero-time-ms {
  flex: none;
  font-size: clamp(1rem, 3.75vw, 2.65rem);
  letter-spacing: 0;
  line-height: 1.3;
}
#sec-timer h2 {
  font-size: clamp(1.75rem, 3.15vw, 2.9rem);
  line-height: 1.33;
  letter-spacing: 0.008em;
  overflow-wrap: anywhere;
}
#sec-timer h3 {
  line-height: 1.4;
  letter-spacing: 0.008em;
}
#sec-timer .time-work-card {
  min-width: 0;
  overflow-wrap: break-word;
}
#sec-timer .time-tool-heading {
  min-width: 0;
  flex: 1 1 auto;
}
#sec-timer .time-tool-subtitle {
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.012em;
}
#sec-timer .time-readout-surface {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
}
#timer-display,
#sw-display-main {
  display: inline-block;
  font-size: clamp(2rem, 5.4vw, 4.625rem);
  line-height: 1.23;
  font-weight: 800;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
#timer-display { display: block; }
#sw-display-ms {
  display: inline-block;
  margin-left: 0.375rem;
  font-size: clamp(1rem, 2.5vw, 2.25rem);
  line-height: 1.35;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#sw-readout-row {
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0;
}
@supports (container-type: inline-size) {
  #hero-time-main { font-size: clamp(2rem, 10.7cqi, 7.35rem); }
  #hero-time-ms { font-size: clamp(1rem, 4cqi, 2.65rem); }
  #timer-display { font-size: clamp(2rem, 10.8cqi, 4.625rem); }
  #sw-display-main { font-size: clamp(1.875rem, 9.8cqi, 4.45rem); }
  #sw-display-ms { font-size: clamp(1rem, 3.9cqi, 2.125rem); }
}
#timer-progress-hints,
#stopwatch-stats {
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  line-height: 1.55;
  font-size: 0.8125rem;
}
#timer-progress-hints > *,
#stopwatch-stats > * { white-space: normal; }
#sec-timer .time-preset-grid button,
#sec-timer .time-adjust-row button {
  min-width: 0;
  padding-inline: 0.4rem;
  line-height: 1.35;
  font-size: 0.82rem;
  white-space: nowrap;
}
#sec-timer .time-action-row button {
  min-width: 0;
  padding-inline: 0.35rem;
  font-size: clamp(0.79rem, 1.2vw, 0.99rem);
  line-height: 1.3;
}
#sec-timer .time-action-row button svg { flex: none; }
#sec-timer .time-input-grid > * { min-width: 0; }
#sec-timer .time-input-grid label {
  font-size: 0.76rem;
  line-height: 1.4;
}
#sec-timer .time-input-grid input {
  min-width: 0;
  font-size: 1.125rem;
}
#sec-timer #sw-laps-container { overflow-wrap: anywhere; }
#sec-timer .time-tool-heading h3,
#sec-timer #timer-mode-badge { overflow-wrap: anywhere; }
#sec-timer button:focus-visible,
#sec-timer input:focus-visible,
#sec-timer a:focus-visible,
#sec-timer select:focus-visible,
header button:focus-visible,
header a:focus-visible {
  outline: 3px solid #f59e0b !important;
  outline-offset: 2px;
}
@media (max-width: 1023px) {
  #main-brand { min-width: 0; flex: 1 1 auto; }
  #main-brand-link { min-width: 0; }
  #header-actions { flex: none; }
  #brand-name { font-size: clamp(0.99rem, 2.8vw, 1.375rem); }
}
@media (max-width: 640px) {
  #sec-timer .time-work-card { padding: 1.1rem; }
  #sec-timer .time-readout-surface { padding: 1.15rem 0.8rem; }
  #sec-timer .time-preset-grid { gap: 0.5rem; }
  #sec-timer h2 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); }
  #timer-progress-hints, #stopwatch-stats { font-size: 0.75rem; }
  #sec-timer .time-input-grid { gap: 0.55rem; }
  #sec-timer .time-action-row { gap: 0.5rem; }
  #sw-readout-row { padding-inline: 0; }
  #brand-name { letter-spacing: 0; }
}
@media (max-width: 390px) {
  #main-header-logo { width: 2.125rem; height: 2.125rem; font-size: 1.2rem; }
  #brand-subtitle { display: none; }
  #header-actions { gap: 0.35rem; }
  #header-actions > button { padding-inline: 0.6rem; }
  #sec-timer .time-adjust-row { gap: 0.3rem; }
  #sec-timer .time-adjust-row button { font-size: 0.72rem; padding-inline: 0.2rem; }
  #sec-timer .time-tool-subtitle { font-size: 0.75rem; }
  #timer-display, #sw-display-main { letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #sec-timer .time-work-card button { transition-duration: 0.01ms; }
}