.stage{
  position:relative;width:250px;height:250px;margin:0 auto 6px;
  display:flex;align-items:center;justify-content:center;
}
.stage.flat{height:auto;width:100%;max-width:420px;min-height:96px;flex-direction:column;gap:14px}
.stage svg{width:100%;height:100%;display:block}

/* 1 — the ring */
.vring .track{fill:none;stroke:var(--border);stroke-width:9}
.vring .prog{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dasharray .3s linear,stroke .4s}

/* 2 — the consumed pie */
.vpie .disc{fill:color-mix(in srgb, var(--accent) 16%, transparent);stroke:var(--border);stroke-width:1}
.vpie .slice{fill:var(--accent);transition:fill .4s}
.stage.pie{height:auto;flex-direction:column;gap:14px}
.stage.pie svg{width:196px;height:196px;flex:none}
.stage.pie .clockbox{position:static;inset:auto}

/* 3 — the depletion bar */
.vbar{width:100%;height:22px;background:var(--well);border:1px solid var(--border);border-radius:var(--r-pill);overflow:hidden}
.vbar .fill{height:100%;background:var(--accent);width:100%;transition:width .3s linear,background .4s}

/* 4 — segments */
.vdots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:340px}
.vdots i{
  width:16px;height:16px;border-radius:4px;background:var(--well);
  border:1px solid var(--border);display:block;
}
.vdots i.on{background:var(--accent);border-color:var(--accent)}

/* the clock over the face */
.clockbox{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.stage.flat .clockbox{position:static;inset:auto}

/* the face is a button: pressing the circle starts or pauses */
.dial{cursor:pointer;background:none;border:0;padding:0;margin:0 auto;display:block;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dial:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:50%}

/* focus blocks done, beside a tomato — see estebanTimerViz.pomoCount() */
.pomocount{
  display:flex;align-items:center;gap:.42em;
  font-size:var(--fs-12);color:var(--muted);font-variant-numeric:tabular-nums;line-height:1;
}
.pomocount .pomoicon{
  width:1.5em;height:1.5em;flex:none;
  fill:none;stroke:var(--coral);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.pomocount .pomoicon .body{fill:color-mix(in srgb, var(--coral) 45%, transparent)}

/* ------------------------------------------------------- the color slots */

.colslot{
  display:flex;align-items:center;gap:12px;padding:13px 0;
  border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.colslot:first-child{border-top:0;padding-top:16px}
.colslot .collbl{flex:1 1 auto;min-width:0;font-size:var(--fs-14);color:var(--gray);font-weight:600}
@media (prefers-reduced-motion:reduce){
  .vring .prog,.vbar .fill,.vpie .slice{transition:none !important}
}