/* Clock-specific layout. Shared shell/type/buttons live in site.css. */
.clock-page .clock-section { min-height: 650px; padding: 58px 32px 64px; }
.clock-page .clock-face { max-width: 1160px; height: clamp(200px, 32dvh, 330px); }
.clock-page .time-row { font-family: Manrope, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.12; letter-spacing: -.065em; gap: .09em; color: var(--clock-ink, var(--text)); }
.clock-page .smaller-seconds { letter-spacing: -.055em; }
.clock-page .period { font: 600 .105em/1.4 Manrope, sans-serif; letter-spacing: .02em; color: var(--muted); }
.clock-page .time-row:has(.clock-dial) .period { font-size: .19em; align-self: flex-end; margin-bottom: .05em; }
.clock-page .date { font-size: 14px; font-weight: 500; letter-spacing: .03em; margin-top: 22px; color: var(--muted); }
.clock-page .source-note { margin: 20px 0 28px; font-size: 10px; line-height: 1.85; }
.clock-page #timezone { font-size: 11px; font-weight: 500; color: var(--muted); }
.clock-page #controls { display: flex; max-width: 760px; gap: 9px; align-items: stretch; }
.clock-page #controls > :is(.tool-button, .fullscreen-button) { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 47px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 11px; font-weight: 600; box-shadow: 0 2px 3px #00000003; }
.clock-page #controls > #format-toggle { min-width: 90px; flex-direction: row; }
.clock-page #controls > #settings-open { gap: 8px; }
.clock-page #controls .fullscreen-button svg { width: 14px; height: 14px; }
.clock-page #controls button:hover { filter: none; border-color: var(--muted); }
.clock-page #wake-detail { max-width: 540px; margin-top: 6px; font-size: 9px; line-height: 1.7; opacity: .9; }
.clock-page .feedback { font-size: 11px; }
.clock-page #display-settings { width: min(720px, calc(100vw - 40px)); max-width: 720px; padding: 28px; border-radius: 20px; box-shadow: 0 24px 100px #0003; overscroll-behavior: contain; }
.clock-page #display-settings::backdrop { background: #11182770; backdrop-filter: blur(5px); }
.clock-page .settings-heading h2 { font-size: 24px; font-weight: 600; }
.clock-page .settings-heading .tool-button { font-size: 11px; border-radius: 9px; }
.clock-page #settings-description { font-size: 12px; max-width: 47ch; }
.clock-page #display-settings fieldset { margin-block: 22px; border-radius: 13px; }
.clock-page #display-settings legend { font-size: 12px; font-weight: 600; }
.clock-page #display-settings select { font-size: 12px; }
.clock-page #display-settings .settings-note { font-size: 10px; }
.clock-page #display-settings .tool-button { font-size: 12px; }
.clock-page #display-settings .share-notice { font-size: 11px; }
.clock-page dialog { overscroll-behavior: contain; }
.clock-page .share-notice { max-width: 600px; margin-inline: auto; font-size: 11px; line-height: 1.7; }

:root:is([data-clock-style=analog], [data-clock-style=quartz]) .clock-page .clock-face { height: clamp(270px, 43dvh, 405px); }
:root:is([data-clock-style=analog], [data-clock-style=quartz]) .clock-page .time-row { align-items: flex-end; gap: .02em; }

html:fullscreen .clock-page .clock-section { padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(74px, calc(58px + env(safe-area-inset-bottom))) max(24px, env(safe-area-inset-left)); }
html:fullscreen .clock-page .clock-section h1 { margin: 0 0 12px; font-size: 13px; }
html:fullscreen .clock-page .clock-face { max-width: none; }
html:fullscreen:is([data-clock-style=analog], [data-clock-style=quartz]) .clock-page .clock-face { height: auto; }
html:fullscreen .clock-page .source-note { margin: 10px 0 16px; }
html:fullscreen .clock-page #controls { max-width: 850px; }
html:fullscreen .clock-page #controls > :is(.tool-button, .fullscreen-button) { min-height: 42px; padding: 9px 15px; }
.clock-page .fullscreen-recovery { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }

@media (max-width: 650px) {
  .clock-page .clock-section { min-height: 600px; padding: 40px 18px 44px; }
  .clock-page .clock-face { height: 190px; }
  :root:is([data-clock-style=analog], [data-clock-style=quartz]) .clock-page .clock-face { height: 270px; }
  .clock-page .date { font-size: 12px; letter-spacing: 0; margin-top: 18px; }
  .clock-page .source-note { margin: 13px 0 22px; font-size: 9px; }
  .clock-page #controls { display: grid; grid-template-columns: 1fr 1fr; max-width: 380px; gap: 8px; }
  .clock-page #controls > :is(.tool-button, .fullscreen-button) { min-height: 46px; padding: 10px; font-size: 10px; }
  .clock-page #wake-detail { grid-column: 1/-1; font-size: 9px; line-height: 1.6; }
  .clock-page #display-settings { padding: 20px 16px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); border-radius: 16px; }
  .clock-page .settings-heading h2 { font-size: 21px; }
  .clock-page #display-settings .settings-heading .tool-button { padding: 9px; font-size: 10px; }
  html:fullscreen .clock-page #controls > :is(.tool-button, .fullscreen-button) { min-width: 120px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .clock-page .clock-section { padding-top: 18px; }
  .clock-page .clock-face { height: 150px; }
  :root:is([data-clock-style=analog], [data-clock-style=quartz]) .clock-page .clock-face { height: 180px; }
  html:fullscreen .clock-page .clock-section { padding: 10px 12px 58px; }
  html:fullscreen:is([data-clock-style=analog], [data-clock-style=quartz]) .clock-page .clock-face { height: auto; }
  html:fullscreen .clock-page #controls > :is(.tool-button, .fullscreen-button) { min-height: 34px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}