/* 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}

/* Выбор времени лентой: тянем ползунок, крупно видно, сколько часов выбрано */
html .nav-clock .clock-settings{height:150px!important;gap:4px}
html .topnav .nav-clock.clock-open{height:208px!important}
html .nav-clock .clock-pick-value{display:block;white-space:nowrap;text-align:center;font-size:26px;line-height:30px;font-weight:600;letter-spacing:-.5px;color:var(--clock-accent)}
html .nav-clock .clock-ruler{position:relative;padding:2px 4px 0}
html .nav-clock .clock-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;--pick:37%}
html .nav-clock .clock-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--clock-accent) var(--pick),var(--clock-track) var(--pick))}
html .nav-clock .clock-range::-moz-range-track{height:8px;border-radius:4px;background:var(--clock-track)}
html .nav-clock .clock-range::-moz-range-progress{height:8px;border-radius:4px;background:var(--clock-accent)}
html .nav-clock .clock-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;border-radius:50%;background:#fff;border:3px solid var(--clock-accent);box-shadow:0 2px 6px #10263733}
html .nav-clock .clock-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--clock-accent)}
html .nav-clock .clock-range:focus-visible{outline:2px solid var(--clock-accent);outline-offset:4px;border-radius:6px}
html .nav-clock .clock-ticks{position:relative;height:14px;margin:0 11px;font-size:10px;line-height:14px;color:var(--clock-muted)}
html .nav-clock .clock-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
html .nav-clock .clock-ticks span:last-child{transform:translateX(-85%)}
html .nav-clock .clock-plan-button{height:28px;font-size:11px;padding:0 6px;white-space:nowrap;width:100%}

/* Таймер в шапке не рисуется: он идёт только внутри плана дел */
html .nav-clock .clock-plan-button span{display:none}