/* Idle overlay occupies a fixed box. Quotes float above the large clock, so
   changing text never moves the clock or the page title. */
#heroStage>#idleClockMirror,
#heroStage>#idleClockMirror.is-visible{
  position:absolute!important;
  z-index:8!important;
  display:block!important;
  left:0!important;
  top:24px!important;
  width:100%!important;
  max-width:100%!important;
  height:180px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  transform:none!important;
  opacity:1!important;
  transition:opacity .5s ease!important;
  pointer-events:none!important;
  overflow:visible!important;
}
/* Quote has a fixed independent layer above the digits, not a flex row. */
#idleClockMirror .idle-clock-caption{
  position:absolute!important;
  z-index:2!important;
  top:0!important;
  left:50%!important;
  display:block!important;
  box-sizing:border-box!important;
  width:min(82vw,1040px)!important;
  max-width:min(82vw,1040px)!important;
  min-height:2.8em!important;
  margin:0!important;
  padding:0 12px!important;
  color:#fff!important;
  font:800 clamp(16px,1.7vw,24px)/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:.01em!important;
  text-align:center!important;
  text-transform:none!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  text-wrap:balance!important;
  text-shadow:0 2px 5px rgba(13,39,57,.88),0 0 14px rgba(13,39,57,.52)!important;
  transform:translateX(-50%)!important;
}
#idleClockMirror .idle-clock-caption.is-scrambling{animation:idle-caption-scan .24s steps(2,end) infinite}
#idleClockMirror .idle-clock-caption.is-reminder{
  color:#e1193f!important;
  text-transform:uppercase!important;
  letter-spacing:.065em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.68),0 0 9px rgba(255,255,255,.46)!important;
}
html[data-theme="dark"] #idleClockMirror .idle-clock-caption{color:#fff!important}
html[data-theme="dark"] #idleClockMirror .idle-clock-caption.is-reminder{color:#e1193f!important}
#idleClockMirror .flip-clock-display{
  position:absolute!important;
  z-index:1!important;
  top:96px!important;
  left:50%!important;
  order:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:31px!important;
  margin:0!important;
  transform:translateX(-50%) scale(2.55)!important;
  transform-origin:top center!important;
}
@media(min-width:901px){
  #heroStage>#idleClockMirror,#heroStage>#idleClockMirror.is-visible{top:24px!important}
  #idleClockMirror .idle-clock-caption{top:0!important}
  #idleClockMirror .flip-clock-display{top:100px!important}
}
@media(max-width:900px){
  #heroStage>#idleClockMirror,#heroStage>#idleClockMirror.is-visible{top:16px!important}
  #idleClockMirror .idle-clock-caption{width:min(90vw,760px)!important;max-width:min(90vw,760px)!important;font-size:clamp(15px,2.8vw,20px)!important;line-height:1.4!important}
  #idleClockMirror .flip-clock-display{top:94px!important;transform:translateX(-50%) scale(1.85)!important}
}
@media(max-width:520px){
  #heroStage>#idleClockMirror,#heroStage>#idleClockMirror.is-visible{top:12px!important}
  #idleClockMirror .idle-clock-caption{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;padding:0 4px!important;font-size:clamp(14px,3.9vw,16px)!important;line-height:1.38!important;min-height:2.8em!important}
  #idleClockMirror .flip-clock-display{top:88px!important;height:28px!important;transform:translateX(-50%) scale(1.62)!important}
}
@media(max-width:360px){
  #idleClockMirror .idle-clock-caption{font-size:13px!important}
  #idleClockMirror .flip-clock-display{top:86px!important;transform:translateX(-50%) scale(1.45)!important}
}
@media(prefers-reduced-motion:reduce){
  #heroStage>#idleClockMirror,#heroStage>#idleClockMirror.is-visible{transition:none!important}
  #idleClockMirror .idle-clock-caption.is-scrambling{animation:none!important}
}
/* Header clock is the only clock before idle. During idle, replace it with the
   single enlarged copy; keep the date in the header in place. */
html.idle-clock-mode #flipClock.flip-clock{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
html:not(.idle-clock-mode) #flipClock.flip-clock{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
/* Respect the native hidden state until the ten-second idle timer expires. */
#heroStage>#idleClockMirror[hidden]{display:none!important}
@media(max-width:520px){#heroStage>#idleClockMirror,#heroStage>#idleClockMirror.is-visible{height:160px!important}}

/* Improve quote contrast: navy on the light theme, white on the dark theme.
   The single reminder keeps its red accent in either theme. */
html:not([data-theme="dark"]) #idleClockMirror .idle-clock-caption:not(.is-reminder){
  color:#123f70!important;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 1px 8px rgba(255,255,255,.62)!important;
}
html[data-theme="dark"] #idleClockMirror .idle-clock-caption:not(.is-reminder){
  color:#fff!important;
  text-shadow:0 2px 5px rgba(0,0,0,.88),0 0 14px rgba(0,0,0,.56)!important;
}