/* ============================================================
   POMODORO / FOCUS MODE
   ============================================================ */
/* isolation makes .app a stacking context, so the veil's z-index:-1 paints
   ABOVE the marble background but BELOW every piece of content - the theme
   change is a real crossfade with zero layout involvement. */
.app{isolation:isolate}
.theme-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .9s ease;
  background-position:center;background-size:cover;
}
.app[data-ptheme] .theme-veil{opacity:1}
/* Every theme is three parts: the veil's own gradient stack (the scene), an
   optional ::before pattern layer that MOVES (rain, snow, petals, aurora -
   transform-only, so it stays on the compositor), and an optional ::after
   accent that BREATHES (glows, twinkles, sheens - opacity-only). */
.theme-veil::before,.theme-veil::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-position:center;opacity:0;
}
/* falling layers are one tile taller than the veil and translate exactly one
   tile per loop, so the pattern hands off seamlessly */
@keyframes veilFall{from{transform:translateY(-360px)}to{transform:translateY(0)}}
@keyframes veilDrift{
  from{transform:translateX(-6%) rotate(-2deg)}
  to{transform:translateX(6%) rotate(2deg)}
}
@keyframes veilBreathe{from{opacity:.25}to{opacity:.7}}
@keyframes veilTwinkle{from{opacity:.2}to{opacity:.85}}
@keyframes veilSheen{
  0%{transform:translateX(-70%)}
  55%,100%{transform:translateX(70%)}
}

/* --- Autumn Ember: amber dusk, golden glows, leaves sifting down --- */
.app[data-ptheme="autumn"] .theme-veil{
  background:
    radial-gradient(58% 48% at 82% 8%, rgba(255,158,44,.30), transparent 70%),
    radial-gradient(52% 46% at 12% 88%, rgba(196,88,22,.32), transparent 72%),
    linear-gradient(152deg, rgba(47,21,7,.93), rgba(99,48,15,.84) 48%, rgba(26,11,4,.95));
}
.app[data-ptheme="autumn"] .theme-veil::before{
  inset:-360px 0 0 0;opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='360'%3E%3Cg fill='%23ffb648' fill-opacity='.07'%3E%3Cpath d='M42 34c19-15 40-12 46 7-17 10-38 8-46-7z'/%3E%3Cpath d='M198 158c4-23 21-36 40-31-2 20-17 34-40 31z'/%3E%3Cpath d='M116 286c-21-6-29-25-19-42 18 6 28 23 19 42z'/%3E%3Cpath d='M236 60c-14-11-14-28-2-36 10 9 12 25 2 36z'/%3E%3Cpath d='M30 220c16-12 33-10 38 5-14 9-31 7-38-5z'/%3E%3C/g%3E%3C/svg%3E") repeat;
  animation:veilFall 46s linear infinite;
}
.app[data-ptheme="autumn"] .theme-veil::after{
  background:radial-gradient(42% 34% at 50% 96%, rgba(255,140,40,.26), transparent 75%);
  animation:veilBreathe 7s ease-in-out infinite alternate;
}

/* --- Golden Hour: the last warm light, rose horizon --- */
.app[data-ptheme="golden"] .theme-veil{
  background:
    radial-gradient(70% 52% at 50% 104%, rgba(255,171,64,.42), transparent 72%),
    radial-gradient(50% 40% at 78% 90%, rgba(236,94,80,.30), transparent 70%),
    radial-gradient(46% 40% at 16% 12%, rgba(90,44,86,.34), transparent 75%),
    linear-gradient(168deg, rgba(38,20,44,.94), rgba(120,52,44,.82) 62%, rgba(64,24,18,.94));
}
.app[data-ptheme="golden"] .theme-veil::after{
  background:radial-gradient(34% 26% at 50% 100%, rgba(255,210,120,.35), transparent 75%);
  animation:veilBreathe 9s ease-in-out infinite alternate;
}

/* --- Sakura Dusk: plum evening, petals on the wind --- */
.app[data-ptheme="sakura"] .theme-veil{
  background:
    radial-gradient(56% 44% at 80% 10%, rgba(244,143,177,.20), transparent 72%),
    radial-gradient(48% 42% at 12% 88%, rgba(136,58,110,.30), transparent 72%),
    linear-gradient(158deg, rgba(40,16,38,.94), rgba(96,42,84,.84) 52%, rgba(26,10,26,.95));
}
.app[data-ptheme="sakura"] .theme-veil::before{
  inset:-360px 0 0 0;opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='360'%3E%3Cg fill='%23ffb7d0' fill-opacity='.09'%3E%3Cpath d='M40 40c8-12 22-12 26 0-4 12-18 12-26 0z'/%3E%3Cpath d='M180 120c10-9 22-5 23 6-9 8-21 4-23-6z'/%3E%3Cpath d='M90 230c3-13 16-17 24-9-3 12-15 16-24 9z'/%3E%3Cpath d='M220 300c9-10 21-8 24 3-8 9-20 7-24-3z'/%3E%3Cpath d='M130 330c4-12 17-15 24-7-4 11-16 14-24 7z'/%3E%3C/g%3E%3C/svg%3E") repeat;
  animation:veilFall 38s linear infinite;
}

/* --- Cozy Forest: deep green canopy light --- */
.app[data-ptheme="forest"] .theme-veil{
  background:
    radial-gradient(56% 46% at 85% 6%, rgba(64,145,90,.22), transparent 70%),
    radial-gradient(50% 44% at 10% 92%, rgba(26,84,48,.30), transparent 72%),
    linear-gradient(158deg, rgba(6,22,13,.94), rgba(17,52,31,.86) 50%, rgba(4,14,8,.96));
}
.app[data-ptheme="forest"] .theme-veil::after{
  background:radial-gradient(40% 55% at 72% 0%, rgba(190,255,170,.13), transparent 70%);
  animation:veilBreathe 11s ease-in-out infinite alternate;
}

/* --- Ocean Depths: teal water, light playing far above --- */
.app[data-ptheme="ocean"] .theme-veil{
  background:
    radial-gradient(64% 40% at 50% 0%, rgba(64,190,200,.20), transparent 68%),
    radial-gradient(48% 44% at 88% 78%, rgba(20,90,120,.32), transparent 74%),
    linear-gradient(172deg, rgba(6,30,42,.92), rgba(10,58,80,.86) 52%, rgba(3,16,26,.96));
}
.app[data-ptheme="ocean"] .theme-veil::after{
  opacity:1;
  background:
    radial-gradient(24% 60% at 34% 0%, rgba(160,240,255,.14), transparent 75%),
    radial-gradient(18% 52% at 62% 0%, rgba(160,240,255,.10), transparent 75%);
  animation:veilDrift 17s ease-in-out infinite alternate;
}

/* --- Aurora Borealis: arctic night, the sky moving --- */
.app[data-ptheme="aurora"] .theme-veil{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='24' cy='40' r='1' fill-opacity='.4'/%3E%3Ccircle cx='120' cy='18' r='1.2' fill-opacity='.3'/%3E%3Ccircle cx='210' cy='74' r='1' fill-opacity='.4'/%3E%3Ccircle cx='170' cy='128' r='.9' fill-opacity='.35'/%3E%3Ccircle cx='66' cy='180' r='1.1' fill-opacity='.3'/%3E%3Ccircle cx='250' cy='232' r='1.2' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E") repeat,
    linear-gradient(170deg, rgba(4,12,22,.95), rgba(10,28,44,.90) 55%, rgba(3,8,16,.97));
}
.app[data-ptheme="aurora"] .theme-veil::before{
  opacity:.55;
  background:
    radial-gradient(60% 26% at 30% 18%, rgba(64,235,166,.34), transparent 70%),
    radial-gradient(50% 22% at 66% 30%, rgba(94,140,255,.26), transparent 70%),
    radial-gradient(40% 18% at 50% 10%, rgba(180,110,255,.20), transparent 70%);
  animation:veilDrift 26s ease-in-out infinite alternate;
}

/* --- Deep Space: nebulae and a sky that twinkles --- */
.app[data-ptheme="space"] .theme-veil{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='24' cy='40' r='1' fill-opacity='.5'/%3E%3Ccircle cx='120' cy='18' r='1.4' fill-opacity='.35'/%3E%3Ccircle cx='210' cy='74' r='1' fill-opacity='.5'/%3E%3Ccircle cx='276' cy='150' r='1.3' fill-opacity='.3'/%3E%3Ccircle cx='170' cy='128' r='.9' fill-opacity='.45'/%3E%3Ccircle cx='66' cy='180' r='1.2' fill-opacity='.4'/%3E%3Ccircle cx='140' cy='240' r='1' fill-opacity='.5'/%3E%3Ccircle cx='250' cy='262' r='1.4' fill-opacity='.3'/%3E%3Ccircle cx='36' cy='276' r='1' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") repeat,
    radial-gradient(60% 50% at 78% 12%, rgba(108,74,214,.28), transparent 70%),
    radial-gradient(46% 42% at 14% 84%, rgba(38,58,168,.30), transparent 72%),
    linear-gradient(158deg, rgba(6,8,22,.95), rgba(26,20,64,.88) 52%, rgba(4,5,14,.97));
}
.app[data-ptheme="space"] .theme-veil::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='80' cy='90' r='1.3' fill-opacity='.8'/%3E%3Ccircle cx='230' cy='40' r='1.1' fill-opacity='.7'/%3E%3Ccircle cx='190' cy='200' r='1.4' fill-opacity='.8'/%3E%3Ccircle cx='40' cy='250' r='1' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E") repeat;
  animation:veilTwinkle 3.4s ease-in-out infinite alternate;
}

/* --- Midnight Rain: indigo glass, streaks running down --- */
.app[data-ptheme="rainnight"] .theme-veil{
  background:
    radial-gradient(56% 42% at 78% 6%, rgba(90,120,220,.18), transparent 70%),
    radial-gradient(48% 44% at 14% 90%, rgba(40,56,130,.26), transparent 74%),
    linear-gradient(166deg, rgba(8,11,26,.95), rgba(22,30,66,.88) 54%, rgba(5,7,18,.97));
}
.app[data-ptheme="rainnight"] .theme-veil::before{
  inset:-360px 0 0 0;opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='360'%3E%3Cg stroke='%23aac4ff' stroke-opacity='.10' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='30' y1='10' x2='26' y2='44'/%3E%3Cline x1='110' y1='80' x2='106' y2='118'/%3E%3Cline x1='180' y1='30' x2='176' y2='62'/%3E%3Cline x1='70' y1='200' x2='66' y2='236'/%3E%3Cline x1='150' y1='260' x2='146' y2='300'/%3E%3Cline x1='200' y1='180' x2='196' y2='214'/%3E%3Cline x1='40' y1='310' x2='36' y2='344'/%3E%3C/g%3E%3C/svg%3E") repeat;
  animation:veilFall 5.5s linear infinite;
}

/* --- First Snow: hushed slate, flakes drifting --- */
.app[data-ptheme="snow"] .theme-veil{
  background:
    radial-gradient(58% 42% at 50% 0%, rgba(200,220,240,.14), transparent 70%),
    radial-gradient(46% 40% at 86% 88%, rgba(90,110,140,.22), transparent 74%),
    linear-gradient(170deg, rgba(20,26,36,.94), rgba(44,56,74,.86) 55%, rgba(14,18,26,.96));
}
.app[data-ptheme="snow"] .theme-veil::before{
  inset:-360px 0 0 0;opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='360'%3E%3Cg fill='white'%3E%3Ccircle cx='30' cy='30' r='1.8' fill-opacity='.16'/%3E%3Ccircle cx='140' cy='70' r='1.3' fill-opacity='.12'/%3E%3Ccircle cx='210' cy='140' r='1.9' fill-opacity='.15'/%3E%3Ccircle cx='80' cy='190' r='1.2' fill-opacity='.12'/%3E%3Ccircle cx='170' cy='250' r='1.7' fill-opacity='.16'/%3E%3Ccircle cx='50' cy='310' r='1.4' fill-opacity='.12'/%3E%3Ccircle cx='230' cy='330' r='1.2' fill-opacity='.12'/%3E%3C/g%3E%3C/svg%3E") repeat;
  animation:veilFall 22s linear infinite;
}

/* --- Nordic Fjord: steel water, ice light --- */
.app[data-ptheme="nordic"] .theme-veil{
  background:
    radial-gradient(60% 42% at 50% 0%, rgba(140,190,210,.16), transparent 70%),
    radial-gradient(44% 40% at 12% 90%, rgba(50,80,100,.26), transparent 74%),
    linear-gradient(170deg, rgba(14,22,30,.94), rgba(32,52,66,.88) 55%, rgba(9,14,20,.96));
}

/* --- Velvet Noir: near-black violet, a sheen passing rarely --- */
.app[data-ptheme="noir"] .theme-veil{
  background:
    radial-gradient(52% 40% at 82% 8%, rgba(120,80,200,.14), transparent 72%),
    radial-gradient(46% 42% at 12% 92%, rgba(60,30,90,.20), transparent 74%),
    linear-gradient(160deg, rgba(10,7,16,.96), rgba(28,18,44,.92) 55%, rgba(6,4,10,.97));
}
.app[data-ptheme="noir"] .theme-veil::after{
  opacity:1;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.045) 50%, transparent 58%);
  animation:veilSheen 14s ease-in-out infinite;
}

/* --- Minimal Dark: nothing but night --- */
.app[data-ptheme="dark"] .theme-veil{
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(165deg, rgba(9,10,13,.96), rgba(21,23,29,.94));
}


/* ---------- mode switch (Clocks / Focus / Personal) ---------- */
.mode-switch{
  grid-column:1/-1;justify-self:center;position:relative;
  display:inline-flex;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  margin-bottom:4px;
}
.mode-opt{
  position:relative;z-index:1;width:92px;border:0;background:none;cursor:pointer;
  color:var(--wk-white-70);font-family:var(--wk);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:9px 0;border-radius:999px;
  transition:color .28s ease;
}
.mode-opt.is-on{color:var(--wk-navy)}
.mode-opt:focus-visible{outline:2px solid var(--wk-white);outline-offset:2px}
.mode-thumb{
  position:absolute;top:4px;bottom:4px;left:4px;width:92px;border-radius:999px;
  background:var(--wk-white);box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.app.pomo-on .mode-thumb{transform:translateX(92px)}
.app.personal-on .mode-thumb{transform:translateX(184px)}
/* a session running behind the clocks: the Focus tab wears a breathing dot */
.mode-opt.is-live:not(.is-on)::after{
  content:"";position:absolute;top:7px;right:10px;width:6px;height:6px;border-radius:50%;
  background:var(--wk-green);box-shadow:0 0 6px rgba(0,174,11,.9);
  animation:liveDot 1.6s ease-in-out infinite alternate;
}
@keyframes liveDot{from{opacity:.45}to{opacity:1}}

/* ---------- the focus timer itself ---------- */
/* Swap is display-based inside the same grid area, so the right-hand card's
   tracks never move; both directions re-run the entrance animation. */
.app.pomo-on .clock-panel,.app.personal-on .clock-panel{display:none}
.pomo{grid-column:1/-1;display:none;flex-direction:column;align-items:center;gap:10px}
.app.pomo-on .pomo{display:flex;animation:paneContentIn .45s cubic-bezier(.22,1,.36,1) both}
.clock-panel{animation:paneContentIn .45s cubic-bezier(.22,1,.36,1) both}
.pomo-ring{width:min(56vw,230px);max-width:230px}
/* the top of the ring turns into a classic twin-bell alarm clock in the
   last two minutes of focus - invisible and silent otherwise. A gold-lit
   halo blooms behind the ring, the arc itself goes amber, and the phase
   label swaps to say so - the whole clock reads as "ringing", not just
   two small icons. */
.pomo-ring::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, transparent 64%, rgba(255,157,60,.5) 76%, transparent 92%);
  opacity:0;transition:opacity .4s ease;
}
.pomo.is-alarm-soon .pomo-ring::before{opacity:1;animation:pomoRingGlow 1.1s ease-in-out infinite}
@keyframes pomoRingGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.pomo-alarm{
  position:absolute;top:-15px;left:50%;z-index:2;pointer-events:none;
  display:flex;gap:34px;
  opacity:0;transform:translateX(-50%) scale(.55) translateY(6px);
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1);
}
.pomo.is-alarm-soon .pomo-alarm{opacity:1;transform:translateX(-50%) scale(1) translateY(0)}
.pomo-bell{
  width:30px;height:27px;transform-origin:50% 12%;overflow:visible;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)) drop-shadow(0 0 7px rgba(255,157,60,.6));
}
.pomo-bell-r{transform:scaleX(-1)}
.pomo-bell-waves{opacity:0}
.pomo.is-alarm-soon .pomo-bell-waves{animation:pomoWaveOut 1s ease-out infinite}
@keyframes pomoWaveOut{0%{opacity:0}20%{opacity:1}70%{opacity:.15}100%{opacity:0}}
.pomo.is-alarm-soon .pomo-bell-l{animation:pomoBellRingL .5s ease-in-out infinite}
.pomo.is-alarm-soon .pomo-bell-r{animation:pomoBellRingR .5s ease-in-out infinite .08s}
@keyframes pomoBellRingL{
  0%,100%{transform:rotate(0deg)}
  22%{transform:rotate(-22deg)}
  55%{transform:rotate(16deg)}
  80%{transform:rotate(-8deg)}
}
@keyframes pomoBellRingR{
  0%,100%{transform:scaleX(-1) rotate(0deg)}
  22%{transform:scaleX(-1) rotate(-22deg)}
  55%{transform:scaleX(-1) rotate(16deg)}
  80%{transform:scaleX(-1) rotate(-8deg)}
}
/* the arc itself catches the alarm - amber overrides the usual focus green */
.app .pomo.is-alarm-soon.is-focus .ring-progress{stroke:#ff9d3c;transition:stroke .4s ease}
.pomo-ring .ring-center{flex-direction:column;gap:2px}
.pomo-phase{
  font-family:var(--wk);font-size:10px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--wk-white-70);transition:color .3s ease;
}
.pomo.is-alarm-soon .pomo-phase{color:#ffb35a;animation:pomoLabelPulse 1.1s ease-in-out infinite}
@keyframes pomoLabelPulse{0%,100%{opacity:.7}50%{opacity:1}}
.pomo-time{font-size:clamp(30px,9vw,42px);font-weight:500;display:inline-block}
.pomo.is-alarm-soon .pomo-time{animation:pomoTimePulse 1s ease-in-out infinite}
@keyframes pomoTimePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.pomo-dots{display:flex;gap:7px;margin-top:8px}
.pomo-dot{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);
  transition:background .3s ease,box-shadow .3s ease;
}
.pomo-dot.is-done{background:var(--wk-white)}
.pomo-dot.is-now{background:var(--wk-green);box-shadow:0 0 9px rgba(0,174,11,.8)}
.pomo-round{
  margin:8px 0 0;font-family:var(--wk);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--wk-white-60);
}
/* break phases turn the arc white; focus keeps the green. Specific enough to
   beat the shift-state tint (.band[data-s] ~ .stage) either way. */
.app .pomo.is-break .ring-progress{stroke:rgba(255,255,255,.85)}
.app .pomo.is-focus .ring-progress{stroke:var(--wk-green)}
/* nowrap now that the five controls (reset, play, skip, sound, settings)
   are sized to actually fit one row at the rail's usual widths - they used
   to wrap, dropping settings onto a lonely second row on its own. */
.pomo-controls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;justify-content:center}
/* icon-only now: ▶ to start/resume, ‖ to pause - still the white pill so
   the primary control keeps its visual weight, just not so wide it forces
   the row onto two lines */
.pomo-main{
  min-width:68px;height:42px;border-radius:999px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--wk-white);color:#12131a;
  box-shadow:0 10px 22px rgba(0,0,0,.3);
  transition:transform .14s ease,box-shadow .2s ease;
}
.pomo-main svg{width:19px;height:19px}
.pomo-main:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.36)}
.pomo-main:active{transform:scale(.97)}
.pomo-side{
  flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);color:var(--wk-white);
  transition:background .16s ease,transform .14s ease;
}
.pomo-side:hover{background:rgba(255,255,255,.2)}
.pomo-side:active{transform:scale(.93)}
.pomo-side svg{width:16px;height:16px}
.pomo-tool{opacity:.85}
.pomo-tool:hover{opacity:1}

/* ---------- settings sheet controls ---------- */
/* Theme and sound pickers are dropdowns built on the assign flow's af-*
   dropdown skin, so the two flows read as one system. Long lists scroll. */
.pdrop{margin-bottom:16px}
.pdrop .af-panel{max-height:264px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.4) transparent}
.pdrop .af-panel::-webkit-scrollbar{width:6px}
.pdrop .af-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.4);border-radius:999px}
.pdrop-swatch{
  flex:none;width:26px;height:26px;border-radius:8px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);
}
.pdrop .af-trigger .pdrop-swatch{margin-right:12px}
.pdrop .af-opt .pdrop-swatch{margin-right:2px}
.pdrop .af-opt{gap:12px}
.pdrop .af-opt-sub{
  display:block;font-size:11px;color:var(--wk-white-60);letter-spacing:.01em;
  margin-top:2px;text-transform:none;font-weight:400;
}
.pnum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.pnum-grid label.fld{margin-bottom:8px}
.pnum-grid input{padding:13px 10px;text-align:center}
.prow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0}
.prow-label{font-family:var(--wk);font-size:13.5px;color:var(--wk-white)}
.prow-sub{display:block;font-size:11px;color:var(--wk-white-60);margin-top:2px}
.pswitch{
  position:relative;flex:none;width:46px;height:26px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);padding:0;
  transition:background .2s ease,border-color .2s ease;
}
.pswitch::after{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.pswitch[aria-pressed="true"]{background:var(--wk-green);border-color:transparent}
.pswitch[aria-pressed="true"]::after{transform:translateX(20px)}
.pvol{display:flex;align-items:center;gap:12px;margin:6px 0 14px}
.pvol input[type=range]{flex:1;accent-color:#fff;height:4px;cursor:pointer}
.pvol svg{width:16px;height:16px;color:var(--wk-white-70);flex:none}

/* desktop rail: the timer has to live inside the same height the two rings
   occupied, or the card column's rows shift when the mode flips */
@media (min-width:1024px){
  .pomo-ring{width:clamp(140px,26vh,220px)}
  .app.panes .pomo{gap:1.2vh}
  .app.panes .pomo-ring{width:clamp(150px,24vh,240px)}
  .app.panes .clock{align-content:start}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Focus mode's card: today's tally + streak ---------- */
.fc-streak-value{display:inline-flex;align-items:center;gap:6px}
.fc-flame{width:20px;height:20px;flex:none;color:#ffb35a}

/* ---------- Focus Anchor, step 2: the countdown recedes for the ring ----------
   Personal mode + an active focus round only (.pomo-focus-run, set in
   pomoRender()) - Focus mode's own timer is untouched. transform rather
   than a smaller font-size: no reflow of the ring-center stack it sits in,
   and it shares the exact same transition timing as the task list's fade. */
#pomoTime{transition:transform .28s ease}
.app.personal-on.pomo-focus-run #pomoTime{transform:scale(.8)}

/* ---------- squircle corners (superellipse, progressive enhancement) ----------
   Nearly everything else in this file is a circle or pill by design (mode
   switch, pomo-main/-side controls, dots, the alarm-glow ring, pswitch) and
   is left alone on purpose - see the token comment in base.css for why. */
@supports (corner-shape:superellipse(1)){
  .pdrop-swatch{corner-shape:var(--squircle-xs)}
}