.timer-toolbar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}.time-nav button[aria-selected=true]{background:var(--color-primary);color:var(--color-primary-content);border-color:var(--color-primary)}
.timer-settings{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.6rem 1rem}.timer-settings label{margin:.3rem 0}.timer-settings input[type=range]{padding:0;max-width:7rem}.timer-settings button{font-size:.75rem}
.time-suite .timer-stop-all{background:var(--timer-alarm);border-color:var(--timer-alarm);color:#fff;animation:timer-glow 1.1s ease-in-out infinite}
.time-suite{--timer-late:#d99a1e;--timer-alarm:#d8435a;--timer-break:#4f8fd6}
/* Keep primary buttons solid on hover; the suite's grey hover left white text unreadable. */
.time-suite .time-primary:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary) 86%,#000);border-color:color-mix(in srgb,var(--color-primary) 86%,#000)}
.timer-announcement:not(:empty){border-left:3px solid var(--color-primary);padding:.8rem 1rem;margin:1rem 0;background:var(--color-base-200)}
[data-timer-app]:fullscreen{overflow:auto;background:var(--color-base-200);padding:2rem;max-width:none;margin:0}
.timer-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr)}.timer-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
.timer-quick-label{font-size:.8rem;font-weight:650;margin:1.1rem 0 .1rem}.timer-optional{font-weight:400;color:var(--muted)}
.time-suite .timer-presets button{flex:1 1 auto;padding:.8rem .9rem;font-size:.95rem}
.time-suite .timer-presets button:hover{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,var(--color-base-100))}
.time-suite .timer-presets button:active{transform:scale(.96)}
.timer-start{width:100%;margin-top:.4rem}
.timer-new{animation:timer-arrive .45s cubic-bezier(.2,1.3,.4,1)}@keyframes timer-arrive{from{opacity:0;transform:translateY(12px) scale(.96)}}

/* Countdown cards: a ring that drains as time runs down. */
.timer-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.timer-card{position:relative;overflow:hidden;text-align:center;padding:1.1rem 1.1rem 1.2rem;transition:border-color .3s,box-shadow .3s,background .3s}
.timer-card-head{display:flex;align-items:center;gap:.5rem;text-align:left}.timer-card h3{font-weight:650;overflow-wrap:anywhere;flex:1;min-width:0}
.timer-pill{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;background:var(--color-base-200);color:var(--muted);white-space:nowrap}
.time-suite .timer-remove{border:0;background:none;padding:.2rem .45rem;font-size:1.1rem;line-height:1;color:var(--muted)}.time-suite .timer-remove:hover{background:var(--color-base-200)}
.time-suite .timer-dial{position:relative;display:block;width:min(100%,210px);aspect-ratio:1;margin:.6rem auto .4rem;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.time-suite .timer-dial:hover{background:none}.timer-dial svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.timer-track{fill:none;stroke:var(--color-base-200);stroke-width:7}
.timer-arc{fill:none;stroke:var(--color-primary);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .4s}
.timer-dial-text{position:absolute;inset:0;display:grid;place-content:center;gap:.15rem}
.timer-dial-text small{font-size:.75rem;color:var(--muted)}
.timer-digits{font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1}
.timer-card .timer-digits{font-size:clamp(2rem,4.6vw,2.6rem)}
.timer-digits span{display:inline-block}.timer-digits .roll{animation:timer-roll .32s cubic-bezier(.2,.9,.3,1.25)}
@keyframes timer-roll{from{transform:translateY(-.45em);opacity:0}}
.timer-card[data-state=ready] .timer-arc,.timer-card[data-state=paused] .timer-arc{opacity:.55}
.timer-card[data-state=paused] .timer-digits{opacity:.6}
.timer-card[data-state=late] .timer-arc{stroke:var(--timer-late)}
.timer-card[data-state=final] .timer-arc{stroke:var(--timer-alarm)}.timer-card[data-state=final] .timer-digits{color:var(--timer-alarm)}
.timer-card[data-state=final] .timer-dial{animation:timer-beat 1s ease-out infinite}
.timer-card[data-state=done]{border-color:var(--color-primary)}
.timer-card[data-state=ringing]{border-color:var(--timer-alarm);background:color-mix(in srgb,var(--timer-alarm) 7%,var(--color-base-100));animation:timer-shake .6s ease-in-out infinite,timer-halo 1.1s ease-in-out infinite}
.timer-card[data-state=ringing] .timer-arc{stroke:var(--timer-alarm)}.timer-card[data-state=ringing] .timer-digits{color:var(--timer-alarm)}
.timer-card[data-state=ringing] .timer-pill{background:var(--timer-alarm);color:#fff}
.timer-card[data-state=running] .timer-pill,.timer-card[data-state=late] .timer-pill{background:color-mix(in srgb,var(--color-primary) 16%,transparent);color:var(--color-base-content)}
.timer-card[data-state=ringing] .time-primary{background:var(--timer-alarm);border-color:var(--timer-alarm);color:#fff}
.timer-card .time-actions{justify-content:center}.timer-card .time-actions button{font-size:.8rem}
.timer-empty{text-align:center;padding:2rem 1rem}
@keyframes timer-beat{0%{transform:scale(1.035)}35%{transform:scale(1)}}
@keyframes timer-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-.6deg)}40%{transform:rotate(.6deg)}60%{transform:rotate(-.4deg)}80%{transform:rotate(.3deg)}}
@keyframes timer-halo{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--timer-alarm) 18%,transparent)}}
@keyframes timer-glow{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--timer-alarm) 25%,transparent)}}

/* Stopwatch: a dial with a sweeping hand, and big round controls. */
.timer-stage{text-align:center}.timer-stage .time-actions{justify-content:center}
.watch-dial{width:min(290px,72vw);margin:1rem auto .4rem}.watch-dial svg{width:100%;height:auto;display:block;overflow:visible}
.watch-face{fill:var(--color-base-200);stroke:var(--color-base-300);stroke-width:1}
.watch-tick{stroke:var(--muted);stroke-width:1;opacity:.45}.watch-tick.major{stroke:var(--color-base-content);stroke-width:2.2;opacity:.8}
.watch-hand line{stroke:var(--color-primary);stroke-width:3;stroke-linecap:round}.watch-hand circle{fill:var(--color-primary)}
.watch-hub{fill:var(--color-base-content);stroke:var(--color-base-200);stroke-width:2}
.watch-lap-mark{fill:var(--timer-late);stroke:var(--color-base-100);stroke-width:1.5}
.watch-lap-arc{fill:none;stroke:color-mix(in srgb,var(--color-primary) 55%,transparent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;transform:rotate(-90deg);transform-origin:110px 110px;transition:stroke .3s}
.watch-lap-arc.over{stroke:var(--timer-late)}
.timer-stage .watch-digits{font-size:clamp(3rem,9vw,5.2rem);margin:.4rem 0 0}
.watch-digits small{font-size:.45em;font-weight:650;color:var(--muted);letter-spacing:-.02em}
.watch-lap-now{min-height:1.4em;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.watch-controls{display:flex;justify-content:center;align-items:center;gap:1.1rem;margin:1.2rem 0 .4rem}
.time-suite .watch-round{width:78px;height:78px;border-radius:50%;padding:0;font-size:.9rem;font-weight:700;transition:transform .12s,background .2s}
.time-suite .watch-round:active:not(:disabled){transform:scale(.94)}
.time-suite .watch-go{width:96px;height:96px;font-size:1.05rem;background:var(--color-primary);border-color:var(--color-primary);color:var(--color-primary-content);box-shadow:0 8px 22px -10px var(--color-primary)}
.time-suite .watch-go:hover{background:color-mix(in srgb,var(--color-primary) 88%,#000)}
.watch[data-running=true] .watch-go{background:var(--timer-alarm);border-color:var(--timer-alarm);color:#fff;box-shadow:0 8px 22px -10px var(--timer-alarm)}
.timer-laps{max-height:26rem;overflow:auto;margin-top:1.6rem;text-align:left}
.watch-laps-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--muted);font-size:.85rem;margin-bottom:.4rem}.watch-laps-head button{font-size:.75rem}
.timer-laps table{width:100%;font-variant-numeric:tabular-nums;font-size:.875rem}
.timer-laps td,.timer-laps th{padding:.6rem;border-bottom:1px solid var(--color-base-300);text-align:right}.timer-laps td:first-child,.timer-laps th:first-child{text-align:left}
.timer-laps tbody tr{animation:timer-row .3s ease-out}@keyframes timer-row{from{background:color-mix(in srgb,var(--color-primary) 14%,transparent)}}
.watch-live td{color:var(--muted);font-style:italic}
.timer-laps em{font-style:normal;font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-left:.5rem;padding:.1rem .4rem;border-radius:999px}
.timer-laps tr[data-best=fastest] td:nth-child(2){color:var(--color-success,#1f9d55);font-weight:700}.timer-laps tr[data-best=fastest] em{background:color-mix(in srgb,var(--color-success,#1f9d55) 16%,transparent)}
.timer-laps tr[data-best=slowest] td:nth-child(2){color:var(--timer-alarm);font-weight:700}.timer-laps tr[data-best=slowest] em{background:color-mix(in srgb,var(--timer-alarm) 14%,transparent)}
.timer-laps td[data-trend=faster]{color:var(--color-success,#1f9d55)}.timer-laps td[data-trend=slower]{color:var(--timer-alarm)}

/* Pomodoro: the same ring, blue on breaks. */
.focus-stage .focus-dial{width:min(260px,70vw);cursor:default;margin:1rem auto}
.focus-stage .timer-digits{font-size:clamp(2.6rem,6vw,3.6rem)}
.focus-stage[data-kind=break] .timer-arc{stroke:var(--timer-break)}
.focus-stage[data-running=false] .timer-arc{opacity:.6}
.timer-phases{display:flex;gap:.5rem;flex-wrap:wrap;text-align:left;margin-top:1.5rem;max-height:15rem;overflow:auto}
.timer-phases li{padding:.4rem .65rem;border-radius:.4rem;background:var(--color-base-200);font-size:.75rem;border-left:3px solid var(--color-primary)}
.timer-phases li[data-kind=break]{border-left-color:var(--timer-break)}.timer-phases li[data-past=true]{opacity:.5}
.timer-phases li[aria-current=step]{background:var(--color-primary);color:var(--color-primary-content)}
.timer-phases li[aria-current=step][data-kind=break]{background:var(--timer-break);color:#fff}
@media(max-width:760px){.timer-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.time-suite .watch-round{width:68px;height:68px}.time-suite .watch-go{width:84px;height:84px}}
@media(prefers-reduced-motion:reduce){.time-suite *{animation:none!important;transition:none!important}}