/* Pomodoro (/tools/pomodoro): the timer ring, the one piece the tool kit in article.css can't draw. */
.pm-clock { position: relative; width: min(28rem, 100%); aspect-ratio: 1; margin-inline: auto; }
.pm-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pm-track { stroke: var(--line); }
.pm-arc { stroke: var(--cta-main); transition: stroke 0.3s; }
.pm-clock[data-mode="short"] .pm-arc { stroke: var(--link); }
.pm-clock[data-mode="long"] .pm-arc { stroke: var(--warn); }
.pm-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pm-time { direction: ltr; font-size: clamp(5.2rem, 4rem + 3vw, 6.8rem); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.pm-phase { margin-top: var(--space-8); font-size: var(--fs-small); color: var(--text-subtle); }
.pm-controls { justify-content: center; }