/* Create By Asking: visual timer. Loaded after style.css, tools.css and family.css. */

#timer-tool { scroll-margin-top: 84px; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 22px 28px; --vt: #FF5D5D; }
.vt > * { min-width: 0; }
.vt-main { display: grid; justify-items: center; gap: 14px; }
.vt-label { width: min(100%, 460px); text-align: center; font: 700 clamp(1.2rem, 3.6vw, 1.7rem)/1.2 var(--display); }
.tool-shell .vt-label { background: none; border: 0; border-bottom: 1.5px dashed rgba(255, 255, 255, 0.2); border-radius: 0; padding: 4px 6px 8px; }
.tool-shell .vt-label:focus { border-color: #FFC93C; }

/* the disc: a coloured wedge that shrinks as time runs out */
.vt-disc { position: relative; width: min(380px, 80vw); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.08), inset 0 0 0 2px rgba(28, 15, 63, 0.08); }
.vt-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vt-wedge { fill: var(--vt); transition: fill 0.3s; }
.vt-ticks line { stroke: #1C0F3F; stroke-width: 1.2; stroke-linecap: round; opacity: 0.35; }
.vt-ticks line.big { stroke-width: 2.4; opacity: 0.6; }
.vt-hub { fill: #1C0F3F; }
.vt-disc.is-done { animation: vt-done 1s ease-in-out 3; }
@keyframes vt-done { 50% { transform: scale(1.04); box-shadow: 0 0 0 18px rgba(255, 201, 60, 0.35), inset 0 0 0 2px rgba(28, 15, 63, 0.08); } }

.vt-read { font: 800 clamp(2.6rem, 10vw, 4.2rem)/1 var(--display); font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -0.01em; }
.vt.hide-digits .vt-read { visibility: hidden; }
.vt-done-msg { font: 400 clamp(2rem, 8vw, 3.4rem)/1 Shrikhand, var(--display); color: #FFC93C; animation: vt-pop 0.5s cubic-bezier(.2, 1.4, .4, 1); }
.vt-done-msg[hidden] { display: none; }
@keyframes vt-pop { from { transform: scale(0.6); opacity: 0; } }
.vt-ctrl { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.vt-ctrl .btn { min-width: 112px; justify-content: center; }

/* settings */
.vt-side { display: grid; gap: 16px; align-content: start; }
.vt-side .f-row > span { flex-basis: 100%; margin-bottom: 2px; }
.vt-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.vt-presets .chip-dark { padding: 9px 0; text-align: center; font-variant-numeric: tabular-nums; }
.vt-custom { display: flex; gap: 8px; align-items: center; color: #CBBFE8; font-size: var(--step--1); }
.tool-shell .vt-custom input { width: 4.2em; text-align: center; padding: 8px 6px; }
.vt-custom .chip-dark { margin-left: auto; }
.vt-swatches { display: flex; gap: 8px; }
.vt-swatches button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.vt-swatches button[aria-pressed="true"] { border-color: #fff; }
.tool-shell .vt-check { display: flex; align-items: center; gap: 10px; cursor: pointer; color: #F2ECFF; font-size: var(--step--1); }
.tool-shell .vt-check input { width: 18px; height: 18px; accent-color: #FFC93C; padding: 0; margin: 0; }
.vt > .tool-note { grid-column: 1 / -1; margin: 0; }

/* full screen for the board */
#timer-tool.is-full { position: fixed; inset: 0; z-index: 1000; border-radius: 0; grid-template-columns: minmax(0, 1fr); padding: 16px; align-content: center; overflow: auto; }
.vt.is-full .vt-side, .vt.is-full > .tool-note { display: none; }
.vt.is-full .vt-disc { width: min(70vh, 86vw); }
.vt.is-full .vt-read { font-size: clamp(3rem, 9vh, 6rem); }
.vt.is-full .vt-label { font-size: clamp(1.4rem, 4vh, 2.6rem); }
.vt:fullscreen { width: 100%; height: 100%; }
html.vt-lock, html.vt-lock body { overflow: hidden; }

@media (max-width: 820px) { #timer-tool { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vt-disc.is-done, .vt-done-msg { animation: none; } }