/* Online clock (templates/clock/page.html) */
.ck { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 18px; text-align: center; }
.ck:fullscreen { justify-content: center; background: var(--surface); }
.ck-face { font-size: clamp(3.2rem, 15vw, 7.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ck:fullscreen .ck-face { font-size: min(22vw, 40vh); }
.ck-face small { font-size: .45em; color: var(--muted); }
.ck-phase { margin: 0; min-height: 1.4em; font-weight: 600; color: var(--accent); }
.ck-presets { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ck-hms { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.ck-hms label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.ck-hms input { width: 92px; text-align: center; font-size: 1.2rem; font-weight: 600; }
.ck-pomo input { width: 110px; }
.ck-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ck-btns .btn { min-width: 96px; padding: 11px 18px; font-size: 1rem; }
.ck-laps { width: min(100%, 460px); margin: 0 auto; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ck-laps th, .ck-laps td { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ck-laps tr.best td { color: var(--ok); font-weight: 600; }
.ck-laps tr.worst td { color: var(--bad); }

/* extra pages (clock2.js) */
.ck2.work { background: color-mix(in srgb, var(--bad) 12%, var(--surface)); }
.ck2.rest { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.ck2.prep { background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.ck-world { display: flex; flex-direction: column; gap: 6px; width: min(100%, 560px); text-align: left; }
.ck-city { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ck-city > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ck-city small { color: var(--muted); font-size: .78rem; }
.ck-city.night { background: var(--surface-2); }
.ck-ctime { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ck-local { font-size: clamp(2.6rem, 10vw, 4.6rem); }
.ck-add, .ck-conv { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.ck-wide input { width: 240px; text-align: left; font-size: 1rem; font-weight: 500; }
.ck-title { margin: 0; font-size: 1.2rem; }
.ck-units { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: min(100%, 640px); }
.ck-units div { display: flex; flex-direction: column; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ck-units b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ck-units span { font-size: .75rem; color: var(--muted); }
.ck-beats { display: flex; gap: 10px; }
.ck-beats i { width: 18px; height: 18px; border-radius: 50%; background: var(--line); transition: background .05s; }
.ck-beats i.on { background: var(--accent); }
.ck-beats i:first-child.on { background: var(--gold); }
.ck-range { width: min(100%, 420px); }
.ck-tap { min-width: 220px; padding: 14px; }
@media (max-width: 560px) { .ck-units { grid-template-columns: repeat(3, minmax(0, 1fr)); } }