/* Opaque clock surfaces: light default, graphite variant. */
html .topnav .nav-clock{
 --clock-bg:#fafaf8;--clock-ink:#172b39;--clock-muted:#526573;
 --clock-face:#f0f1ef;--clock-border:#dfe4e5;--clock-accent:#008d98;
 --clock-track:#d5dcdf;--clock-button:#007d87;--clock-button-ink:#fff;
 background:var(--clock-bg);color:var(--clock-ink);box-shadow:0 3px 10px #10263718;
}
html[data-theme="graphite"] .topnav .nav-clock{
 --clock-bg:#252b31;--clock-ink:#f5f8fc;--clock-muted:#bacbd7;
 --clock-face:#353e47;--clock-border:#566674;--clock-accent:#54bcec;
 --clock-track:#8294a1;--clock-button:#a0def7;--clock-button-ink:#183648;
}
html .nav-clock:before,html .nav-clock:after{display:none}
html .topnav .nav-clock.clock-open{height:166px;border-radius:25px;background:var(--clock-bg);box-shadow:0 8px 22px #132c3c25}
html .nav-clock .clock-toggle{height:54px;padding:5px 6px}
html .nav-clock .nav-clock-time{width:100%;height:44px;align-items:center;background:var(--clock-face);border:1px solid var(--clock-border);border-radius:25px;color:var(--clock-ink);font-size:24px;line-height:1;font-weight:700;letter-spacing:-1px}
html .nav-clock .clock-colon{animation:none}
html .nav-clock .clock-settings{height:112px;padding:3px 12px 10px;gap:5px}
html .nav-clock .clock-settings .nav-clock-date{font-size:13px;line-height:19px;font-weight:700;color:var(--clock-ink);letter-spacing:-.3px}
html .nav-clock .clock-duration-slider{height:6px;margin:5px 0 2px;background:linear-gradient(to right,var(--clock-accent) 0 var(--duration-fill,0%),var(--clock-track) var(--duration-fill,0%) 100%)}
html .nav-clock .clock-duration-slider::-webkit-slider-thumb{border:2px solid var(--clock-accent);background:#fff;box-shadow:0 1px 3px #0003}
html .nav-clock .clock-duration-slider::-moz-range-thumb{border:2px solid var(--clock-accent);background:#fff}
html .nav-clock .clock-duration-scale{color:var(--clock-muted);font-size:9px;line-height:12px}
html .nav-clock .clock-settings .clock-remaining{color:var(--clock-ink);font-size:10px;line-height:14px;margin:0}
html .nav-clock .clock-plan-button{height:25px;margin:0;background:var(--clock-button);color:var(--clock-button-ink);font-size:11px;font-weight:700;border-radius:15px;gap:5px}
html .nav-clock .clock-plan-button:hover{filter:brightness(.94)}
html .nav-clock .clock-toggle:focus-visible,html .nav-clock .clock-plan-button:focus-visible{outline:2px solid var(--clock-accent);outline-offset:-3px}
html .nav-clock .clock-duration-slider:focus-visible{outline:2px solid var(--clock-accent);outline-offset:4px}
html .nav-clock.clock-finished .nav-clock-time{color:#a83430}
html[data-theme="graphite"] .nav-clock.clock-finished .nav-clock-time{color:#ffbab4}

/* The collapsed clock fills the same 54px nav capsule as its neighbours. */
html .nav-clock:not(.clock-open) .clock-toggle{padding:0}
html .nav-clock:not(.clock-open) .nav-clock-time{height:54px;border:0;border-radius:30px;background:transparent}