{"version":3,"file":"timer.module.mjs","names":[],"sources":["../../../../package/common/timer/timer.module.pcss"],"sourcesContent":[".timer {\n  /* em, because the readout inside the ring is em too: a fixed ring stayed put while its own\n     digits grew with the theme until they filled it. */\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1em;\n  width: fit-content;\n\n  &-ringWrapper {\n    position: relative;\n    width: var(--timer-size, 10em);\n    height: var(--timer-size, 10em);\n    transform-origin: center;\n  }\n\n  &-ringSvg {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n  }\n\n  &-ripples {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  &-ripple {\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    border: 0.125em solid var(--timer-ripple-color, var(--timer-progress-color, var(--primary-color)));\n    opacity: 0;\n    transform: scale(0.94);\n\n    /* One-shot per spawned instance (see the ripple spawner in timer.tsx), not an infinite\n       loop — so pausing simply stops new spawns while already-mid-flight ripples keep\n       animating to completion via `forwards` instead of vanishing mid-cycle. */\n    animation: timerRippleHalo 3s ease-out forwards;\n  }\n\n  /* Not em, unlike everything else here: inside the svg this is a viewBox user unit, so it\n     already scales with the ring, and it has to stay equal to the `strokeWidth` prop that\n     timer.tsx subtracts from the circle's radius. */\n  &-ringTrack {\n    fill: none;\n\n    /* Not --background-accent-light, which is Card's own surface: on a Card the ring vanished. A\n       tint of the text colour shows on any surface. */\n    stroke: var(--timer-track-color, color-mix(in srgb, currentcolor 20%, transparent));\n    stroke-width: var(--timer-stroke-width, 10px);\n  }\n\n  &-ringProgress {\n    fill: none;\n    stroke: var(--timer-progress-color, var(--primary-color));\n    stroke-width: var(--timer-stroke-width, 10px);\n    stroke-linecap: round;\n\n    /* Single combined transform, not split across an SVG `transform` attribute on this element\n       plus a separate CSS transform on an ancestor — that split combination, together with an\n       actively-transitioning stroke-dashoffset, is a known trigger for SVG dash-rendering glitches\n       in some engines (the visible arc appearing to jump/drift independent of the actual\n       dashoffset value). scaleX(-1) mirrors so the depleting boundary sweeps clockwise (matching\n       a clock face) instead of the counter-clockwise direction a <circle>'s implicit path winds\n       by default; rotate(-90deg) moves the fixed anchor from 3 o'clock to 12 o'clock. Both applied\n       around the circle's own center, which coincides with the viewBox center here. `counterClockwise`\n       overrides this inline (timer.tsx) by dropping the scaleX(-1), keeping just the rotate — that\n       default winding direction is exactly counter-clockwise, so no mirroring is needed for it. */\n    transform: scaleX(-1) rotate(-90deg);\n    transform-origin: 50% 50%;\n\n    /* Matches (slightly exceeds) the JS tick interval (TICK_MS in timer.tsx) so the ring\n       tracks the real remaining time closely instead of perpetually chasing a target that's\n       always a full second stale — a much longer transition here reads as sluggish since the\n       rendered ring never catches up to the true value while ticking continues. */\n    transition:\n      stroke-dashoffset 220ms linear,\n      stroke 0.3s ease;\n\n    &-urgent {\n      stroke: var(--timer-urgent-color, var(--error-color));\n    }\n  }\n\n  &-display {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    padding: 0 0.75em;\n  }\n\n  &-time {\n    font-size: 1.4em;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    color: var(--timer-text-color, var(--text-color));\n  }\n\n  &-label {\n    margin-top: 0.25em;\n    font-size: 0.8em;\n    color: var(--timer-label-color, var(--text-dark));\n  }\n\n  &-controls {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 0.5em;\n  }\n\n  &-controlsRow {\n    display: flex;\n    align-items: center;\n    gap: 0.5em;\n  }\n\n  &-cancelButton {\n    opacity: 0.6;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  &-pulsing &-ringWrapper {\n    animation: timerHeartbeat 1s ease-in-out infinite;\n  }\n\n  &-critical &-ringWrapper {\n    animation-duration: 0.6s;\n  }\n}\n\n@keyframes timerHeartbeat {\n  0%,\n  100% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(1.045);\n  }\n}\n\n@keyframes timerRippleHalo {\n  0% {\n    transform: scale(0.94);\n    opacity: 0.5;\n  }\n\n  100% {\n    transform: scale(1.35);\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .timer-ringProgress {\n    transition: stroke 0.3s ease;\n  }\n\n  .timer-pulsing .timer-ringWrapper {\n    animation: none;\n  }\n\n  .timer-ripple {\n    animation: none;\n    opacity: 0;\n  }\n}\n"],"mappings":""}