/* ADH-Done · NeoMorphism. One material, one light (top-left), one accent. Built on the neomorphism skill tokens. */
:root{
  --base:#e7e9f3;--hi:rgba(255,255,255,.95);--lo:rgba(150,160,190,.55);--edge-hi:rgba(255,255,255,.8);--edge-lo:rgba(120,130,160,.35);
  --ink:#252a3a;--muted:#596179;--accent:#5546e6;--accent-2:#7d6dff;--on-accent:#fff;--glow:rgba(85,70,230,.32);--danger:#b4233c;
  --raise:-6px -6px 14px var(--hi),6px 6px 14px var(--lo),-1px -1px 0 var(--edge-hi),1px 1px 2px var(--edge-lo);
  --raise-sm:-3px -3px 7px var(--hi),3px 3px 7px var(--lo),-1px -1px 0 var(--edge-hi),1px 1px 1px var(--edge-lo);
  --raise-lg:-12px -12px 28px var(--hi),12px 12px 28px var(--lo),-1px -1px 0 var(--edge-hi),1px 1px 2px var(--edge-lo);
  --inset:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi);
  --inset-sm:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
  font-family:"Segoe UI Variable Text","Segoe UI Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  --base:#262a35;--hi:rgba(255,255,255,.06);--lo:rgba(0,0,0,.55);--edge-hi:rgba(255,255,255,.07);--edge-lo:rgba(0,0,0,.6);
  --ink:#e8ebf4;--muted:#a3aac0;--accent:#a49bff;--accent-2:#b9b2ff;--on-accent:#17133d;--glow:rgba(164,155,255,.28);--danger:#ff8fa3;color-scheme:dark}}

*{box-sizing:border-box}
html,body{margin:0;background:var(--base);color:var(--ink);-webkit-font-smoothing:antialiased}
body{font-size:15px;line-height:1.45}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
button,input,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default;opacity:.45}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[data-icon]{display:inline-grid;place-items:center;flex-shrink:0}
svg{display:block}
[data-icon] svg,.task-symbol svg,.icon-button svg,.note-bullet svg,.mission-icon svg,.routine-option svg,.step-check svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Shell */
.app{position:relative;display:flex;flex-direction:column;height:100dvh;max-width:440px;margin:0 auto;overflow:hidden;background:var(--base)}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 20px 8px;flex-shrink:0}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.logo{width:42px;height:42px;border-radius:50%;box-shadow:var(--raise);color:var(--accent)}
.logo svg{width:22px;height:22px;stroke-width:2.6}
.wordmark{font-size:20px;font-weight:800;letter-spacing:-.04em}
.pill{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 12px;border-radius:999px;box-shadow:var(--raise-sm);font-size:13px;font-weight:600;color:var(--ink);transition:box-shadow .12s var(--ease)}
.pill [data-icon]{color:var(--accent)}
.pill [data-icon] svg{width:18px;height:18px}
.pill:active{box-shadow:var(--inset-sm)}
.warning{margin:0 20px 8px;padding:12px 14px;border-radius:16px;box-shadow:var(--inset);font-size:13px;color:var(--danger)}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;padding:8px 20px 24px}
.scroll::-webkit-scrollbar{display:none}
.view{animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* Type */
.eyebrow{font-size:10.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hello{margin:8px 0 18px}
.hello.row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
h1{font-size:32px;line-height:1.05;font-weight:300;letter-spacing:-.04em}
h1 b,h2 b{font-weight:800}
.intro{font-size:14px;color:var(--muted);margin:-8px 0 20px;text-wrap:pretty}
.hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--muted);text-align:center;margin:14px 0}
.hint [data-icon] svg{width:15px;height:15px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin:24px 4px 10px;font-size:13px;font-weight:700}
.section-head .meta{display:flex;align-items:center;gap:6px;font-weight:500;color:var(--muted);font-size:12px}
.section-head .meta svg{width:15px;height:15px}

/* ===== Focus ===== */
.focus{position:relative;border-radius:32px;padding:4px 0 6px;transition:box-shadow .35s var(--ease),transform .35s var(--ease),padding .35s var(--ease)}
.mission{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:24px;box-shadow:var(--inset)}
.mission-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--raise-sm);color:var(--accent)}
.mission-icon svg{width:22px;height:22px}
.mission-copy{min-width:0}
.mission-index{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.mission h2{font-size:20px;font-weight:750;letter-spacing:-.03em;line-height:1.2;overflow-wrap:anywhere}
.status{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--muted);padding-left:4px}
.status i{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.running .status{color:var(--accent)}
.running .status i{background:var(--accent);box-shadow:0 0 0 4px var(--glow);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.step-link{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:44px;margin:6px 0 2px;font-size:13.5px;color:var(--muted)}
.step-link>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.step-link [data-icon]:first-child{color:var(--accent)}
.step-link svg{width:16px;height:16px}

/* Hero dial */
.dial{position:relative;width:min(262px,72vw);aspect-ratio:1;margin:10px auto 20px;border-radius:50%;box-shadow:var(--raise-lg)}
.dial-well{position:absolute;inset:7%;border-radius:50%;box-shadow:var(--inset);transition:box-shadow .5s var(--ease)}
.dial-arc{position:absolute;inset:7%;width:86%;height:86%;overflow:visible}
.dial-arc circle{fill:none}
.dial-arc .track{stroke:transparent}
.elapsed{stroke:url(#arcGrad);stroke-width:12;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:120px 120px;filter:drop-shadow(0 2px 6px var(--glow))}
#arcGrad stop:first-child{stop-color:var(--accent-2)}
#arcGrad stop:last-child{stop-color:var(--accent)}
.timer-head{fill:var(--base);stroke:var(--accent);stroke-width:5;opacity:0;transition:opacity .3s var(--ease)}
.timer-head.started,.running .timer-head{opacity:1}
.dial-core{position:absolute;inset:20%;border-radius:50%;box-shadow:var(--raise);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 12%}
.time{font-size:clamp(40px,12vw,50px);font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.time-help{font-size:11px;line-height:1.35;color:var(--muted);margin-top:8px}
.running .dial-well{box-shadow:var(--inset),inset 0 0 0 1px var(--glow)}
.running .dial::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,transparent 58%,var(--glow) 70%,transparent 74%);animation:breathe 4s ease-in-out infinite;pointer-events:none}
@keyframes breathe{0%,100%{opacity:.25;transform:scale(.97)}50%{opacity:1;transform:scale(1.02)}}

/* Finish: time fades, tick draws, one ripple */
.done-tick{position:absolute;inset:0;margin:auto;width:52%;height:52%;fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;pointer-events:none}
.dial::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;pointer-events:none}
.win .done-tick{animation:tick 1.5s var(--ease) forwards}
.win .time,.win .time-help{animation:swap 1.5s var(--ease)}
.win .dial::after{animation:ripple 1s var(--ease) .25s}
@keyframes tick{0%{opacity:1;stroke-dashoffset:1}30%{stroke-dashoffset:0}70%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
@keyframes swap{0%{opacity:1}10%,75%{opacity:0}100%{opacity:1}}
@keyframes ripple{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.16)}}

/* Controls: round buttons with a visible caption under each */
.controls{display:flex;align-items:center;justify-content:center;gap:30px;margin:4px 0 34px}
.round,.play{position:relative;display:grid;place-items:center;border-radius:50%;transition:box-shadow .12s var(--ease),transform .12s var(--ease)}
.round{width:58px;height:58px;box-shadow:var(--raise);color:var(--muted)}
.round:active:not(:disabled){box-shadow:var(--inset);color:var(--accent);transform:scale(.98)}
.round [data-icon] svg{width:22px;height:22px}
.play{width:80px;height:80px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:-8px -8px 18px var(--hi),0 12px 26px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.play:active:not(:disabled){transform:scale(.96);box-shadow:inset 3px 3px 9px rgba(30,20,120,.45)}
.play svg{width:30px;height:30px;fill:currentColor;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.cap,.play>span:last-child{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:650;color:var(--muted)}
.play>span:last-child{color:var(--accent)}

/* Timer tools: one inset rail of small soft buttons */
.tools{display:flex;gap:6px;padding:6px;border-radius:20px;box-shadow:var(--inset)}
.tools button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:14px;font-size:13px;font-weight:600;color:var(--ink);transition:box-shadow .12s var(--ease)}
.tools button [data-icon]{color:var(--accent)}
.tools button svg{width:16px;height:16px}
.tools button:active{box-shadow:var(--raise-sm)}
.wander{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-top:12px;border-radius:18px;box-shadow:var(--raise);font-size:14px;font-weight:650;color:var(--accent)}

/* Tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px;border-radius:26px;box-shadow:var(--raise-lg);text-align:left;min-height:134px;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.tile:active,.wide-tile:active,.wins:active{box-shadow:var(--inset);transform:scale(.99)}
.tile-icon{width:48px;height:48px;border-radius:50%;box-shadow:var(--inset);color:var(--accent);margin-bottom:auto}
.tile-icon svg{width:22px;height:22px}
.tile strong{font-size:15px;font-weight:700;margin-top:12px}
.tile small,.wide-tile small{font-size:12px;color:var(--muted)}
.wins{display:block;width:100%;margin-top:18px;padding:16px 18px;border-radius:26px;box-shadow:var(--raise-lg);text-align:left;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.wins-head{display:flex;align-items:center;gap:9px}
.wins-head [data-icon]{color:var(--accent)}
.wins-head strong{flex:1;font-size:14px;font-weight:700}
.wins-count{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.ruler{display:flex;gap:5px;margin:13px 0 9px;padding:5px;border-radius:999px;box-shadow:var(--inset-sm)}
.ruler i{flex:1;height:6px;border-radius:999px;background:transparent}
.ruler i.complete{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.caption{font-size:12px;color:var(--muted)}

/* Focus mode: the focus block lifts into a raised card, the rest blurs back */
.veil{position:absolute;inset:0;z-index:15;opacity:0;pointer-events:none;background:color-mix(in srgb,var(--base) 45%,transparent);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);transition:opacity .35s var(--ease)}
.app.focusing .veil{opacity:1;pointer-events:auto}
.app.focusing .focus{z-index:20;background:var(--base);padding:14px 14px 16px;margin:0 -14px;box-shadow:var(--raise-lg);transform:translateY(-2px)}

/* ===== Missions ===== */
.count{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--inset);font-size:17px;font-weight:700;flex-shrink:0}
.wide-tile{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px 14px 14px;border-radius:24px;box-shadow:var(--raise);text-align:left;transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.wide-tile .tile-icon{margin:0}
.wide-tile>span:nth-child(2){flex:1;min-width:0}
.wide-tile strong{display:block;font-size:14.5px;font-weight:700}
.wide-tile>[data-icon]:last-child{color:var(--muted)}
#notesRecap{margin-top:22px}
.list{display:flex;flex-direction:column;gap:4px}
.task-row{display:flex;align-items:center;gap:2px;min-height:72px;padding:6px 4px 6px 8px;border-radius:22px;transition:box-shadow .2s var(--ease)}
.task-row.active{box-shadow:var(--inset)}
.task-row.dragging{box-shadow:var(--raise-lg);background:var(--base);z-index:2;position:relative}
.task-select{flex:1;min-width:0;display:flex;align-items:center;gap:13px;min-height:58px;text-align:left}
.task-symbol{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--raise-sm);color:var(--muted)}
.task-row.active .task-symbol{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--on-accent);box-shadow:0 6px 14px var(--glow)}
.task-copy{min-width:0;flex:1}
.task-name{display:block;font-size:15px;font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.task-min{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.task-row.done .task-name{text-decoration:line-through;color:var(--muted)}
.task-row.done .task-symbol{color:var(--accent)}
/* Size: three little capsules, filled by size (word always shown too) */
.size-badge{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:12px;color:var(--muted)}
.size-badge::before{content:"";width:16px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent) 0 4px,transparent 4px 6px,var(--b2,var(--track)) 6px 10px,transparent 10px 12px,var(--b3,var(--track)) 12px 16px)}
:root{--track:rgba(89,97,121,.25)}
@media(prefers-color-scheme:dark){:root{--track:rgba(163,170,192,.25)}}
.size-medium{--b2:var(--accent)}
.size-deep{--b2:var(--accent);--b3:var(--accent)}
.icon-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:var(--muted);transition:box-shadow .12s var(--ease),color .12s}
.icon-button:active{box-shadow:var(--inset-sm);color:var(--accent)}
.handle{width:32px;cursor:grab;touch-action:none;user-select:none}
.handle svg{width:16px!important;height:20px!important}

/* Cards and forms */
.card{margin-top:26px;padding:20px;border-radius:28px;box-shadow:var(--raise-lg)}
.card h2{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:750;letter-spacing:-.02em;margin-bottom:16px}
.card h2 [data-icon]{color:var(--accent)}
label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:650;margin:0 0 9px}
label [data-icon]{color:var(--accent)}
label svg{width:16px;height:16px}
input,textarea{display:block;width:100%;min-width:0;border:0;border-radius:16px;background:var(--base);box-shadow:var(--inset);padding:13px 16px;min-height:50px;font-size:16px;line-height:1.5;color:var(--ink);margin-bottom:16px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
textarea{resize:vertical;min-height:130px}
.minutes{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 18px}
.minutes label{margin:0}
.stepper{display:flex;align-items:center;gap:8px}
.mini-round{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--raise-sm);color:var(--accent);flex-shrink:0;transition:box-shadow .12s var(--ease)}
.mini-round:active{box-shadow:var(--inset-sm)}
.mini-round svg{width:18px;height:18px}
.mini-round.accent{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--on-accent);box-shadow:0 6px 14px var(--glow);width:50px;height:50px}
.stepper-well{display:flex;align-items:center;border-radius:14px;box-shadow:var(--inset);padding:0 12px 0 4px}
.stepper-well input{box-shadow:none;background:none;width:48px;min-height:44px;margin:0;padding:0;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.stepper-well span{font-size:12px;color:var(--muted)}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{appearance:none;margin:0}
.accent-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;border-radius:18px;font-size:15px;font-weight:700;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:-6px -6px 14px var(--hi),0 10px 22px var(--glow),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.accent-btn:active{transform:scale(.98);box-shadow:inset 3px 3px 8px rgba(30,20,120,.4)}
.accent-btn svg{width:18px;height:18px}
.soft-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:16px;box-shadow:var(--raise);font-size:14px;font-weight:650;color:var(--ink);transition:box-shadow .12s var(--ease)}
.soft-btn [data-icon]{color:var(--accent)}
.soft-btn svg{width:17px;height:17px}
.soft-btn:active:not(:disabled){box-shadow:var(--inset)}
.soft-btn.full{width:100%;margin-top:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 18px}
.danger{display:flex;align-items:center;justify-content:center;gap:7px;margin:14px auto 0;min-height:48px;padding:0 16px;font-size:14px;font-weight:650;color:var(--danger)}
.danger svg{width:17px;height:17px}

/* ===== Thoughts ===== */
#noteForm{margin-top:0}
#noteForm .hint{margin-bottom:0}
.note-item{display:flex;align-items:flex-start;gap:12px;padding:12px 4px 12px 6px;border-radius:20px}
.note-item+.note-item{border-top:1px solid var(--track)}
.note-bullet{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--inset-sm);color:var(--accent)}
.note-bullet svg{width:18px;height:18px}
.note-body{flex:1;min-width:0;padding-top:2px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.note-body small{display:block;margin-top:5px;font-size:12px;color:var(--muted);white-space:normal}
.note-linked{display:inline-flex;margin-top:6px;font-size:11.5px;font-weight:650;color:var(--accent)}
.note-actions{display:flex;flex-direction:column}
.note-to-task{color:var(--accent)}
.empty-note{padding:24px 18px;border-radius:22px;box-shadow:var(--inset);text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6}
.empty-note strong{display:block;color:var(--ink);font-weight:650;margin-bottom:3px}

/* ===== Nav ===== */
.nav{display:flex;justify-content:space-around;gap:6px;margin:6px 16px calc(12px + env(safe-area-inset-bottom));padding:8px;border-radius:28px;box-shadow:var(--raise);flex-shrink:0;position:relative;z-index:5;background:var(--base)}
.nav-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;border-radius:20px;font-size:11.5px;font-weight:650;color:var(--muted);transition:box-shadow .15s var(--ease),color .15s}
.nav-button svg{width:21px;height:21px}
.nav-button.selected{box-shadow:var(--inset);color:var(--accent)}
.nav-count{margin-left:3px}

/* ===== Toast ===== */
.toast{position:absolute;left:16px;right:16px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 18px;border-radius:20px;background:var(--base);box-shadow:var(--raise-lg);font-size:14px;font-weight:550;animation:pop .25s var(--ease)}
.toast>span{flex:1}
.toast button{min-height:44px;padding:0 16px;border-radius:14px;font-weight:700;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 6px 14px var(--glow)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.97)}}

/* ===== Sheets ===== */
.sheet{position:fixed;inset:auto 0 0;width:100%;max-width:440px;max-height:calc(100dvh - 24px);margin:0 auto;padding:10px 22px calc(24px + env(safe-area-inset-bottom));overflow:auto;border:0;border-radius:32px 32px 0 0;background:var(--base);color:var(--ink);box-shadow:0 -14px 40px var(--lo),0 -1px 0 var(--edge-hi)}
.sheet[open]{animation:sheet .3s var(--ease)}
@keyframes sheet{from{transform:translateY(24px);opacity:.6}}
.sheet::backdrop{background:rgba(40,44,60,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.grip{width:40px;height:5px;margin:0 auto 18px;border-radius:999px;box-shadow:var(--inset-sm)}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.sheet-head h2{font-size:26px;font-weight:300;letter-spacing:-.035em;line-height:1.15}
.close{box-shadow:var(--raise-sm);margin:-2px -4px 0 0}
.sheet h3{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin:20px 0 12px}
.sheet h3 [data-icon]{color:var(--accent)}
.sheet h3 svg{width:17px;height:17px}
.sheet .intro{margin:-6px 0 18px}
.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.choice.four{grid-template-columns:repeat(4,1fr)}
.choice button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:12px 6px;border-radius:22px;box-shadow:var(--raise);transition:box-shadow .12s var(--ease),transform .12s var(--ease)}
.choice.four button{min-height:82px}
.choice button [data-icon]{width:40px;height:40px;border-radius:50%;box-shadow:var(--inset-sm);color:var(--accent);margin-bottom:4px}
.choice button strong{font-size:14px;font-weight:700}
.choice button small{font-size:11px;color:var(--muted)}
.choice button:active{box-shadow:var(--inset);transform:scale(.98)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 6px;border-radius:22px;box-shadow:var(--inset);text-align:center}
.stat [data-icon]{color:var(--accent);margin-bottom:4px}
.stat strong{font-size:30px;font-weight:250;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1.1}
.stat small{font-size:11px;color:var(--muted)}
.hero-stat{background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 10px 22px var(--glow);color:var(--on-accent)}
.hero-stat [data-icon],.hero-stat small{color:var(--on-accent)}
.recap-list{margin:0;padding-left:20px;font-size:14px;line-height:1.7;overflow-wrap:anywhere}
.recap-empty{font-size:13.5px;color:var(--muted)}
#copyRecap{margin-top:24px}
.steps{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}
.step-item{display:flex;align-items:center;gap:4px;border-radius:18px}
.step-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:13px;min-height:52px;padding:6px 8px;text-align:left;font-size:14.5px;overflow-wrap:anywhere}
.step-check{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--inset-sm)}
.step-check svg{width:16px;height:16px;stroke-width:2.4}
.step-toggle[aria-pressed=true] .step-check{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--on-accent);box-shadow:0 4px 10px var(--glow)}
.step-toggle[aria-pressed=true]>span:last-child{text-decoration:line-through;color:var(--muted)}
.inline{display:flex;gap:10px;align-items:center}
.inline input{margin:0;flex:1}
#stepForm+.hint{margin:16px 0}
.routine-option{display:flex;align-items:center;gap:13px;width:100%;padding:12px 10px;border-radius:20px;text-align:left;color:var(--accent);transition:box-shadow .15s var(--ease)}
.routine-option>span:nth-child(2){flex:1;min-width:0;color:var(--ink)}
.routine-option strong{display:block;font-size:14.5px;font-weight:650}
.routine-option small{display:block;font-size:12px;color:var(--muted)}
.routine-option>svg:first-child{width:44px;height:44px;padding:11px;border-radius:50%;box-shadow:var(--raise-sm)}
.routine-option[aria-pressed=true]{box-shadow:var(--inset)}
.preview{margin:14px 0;padding:16px;border-radius:22px;box-shadow:var(--inset)}
.preview h3{margin-top:0}
.preview .accent-btn{margin-top:14px}
.save-routine{margin-top:22px;padding-top:20px;border-top:1px solid var(--track)}
.save-routine input{margin-bottom:0}

/* Larger screens: a phone on a soft plinth */
@media(min-width:600px){
  body{display:grid;place-items:center;min-height:100dvh}
  .app{height:min(900px,calc(100dvh - 48px));width:420px;border-radius:44px;box-shadow:var(--raise-lg)}
  .sheet{max-width:420px;bottom:max(24px,calc((100dvh - 900px)/2));border-radius:32px 32px 44px 44px}
}
@media(max-height:740px) and (max-width:599px){.dial{width:min(220px,62vw);margin:6px auto 16px}.hello{margin:4px 0 12px}h1{font-size:28px}.controls{margin-bottom:30px}}
@media(max-width:359px){.scroll{padding-left:14px;padding-right:14px}.controls{gap:20px}.tiles{gap:12px}.tile{padding:14px}.choice.four{grid-template-columns:repeat(2,1fr)}}

/* Accessibility fallbacks */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.win .done-tick{animation:tickfade 1.5s linear forwards!important}@keyframes tickfade{0%,100%{opacity:0;stroke-dashoffset:0}15%,75%{opacity:1;stroke-dashoffset:0}}}
@media(prefers-reduced-transparency:reduce){.veil{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--base);opacity:.92}}
@media(prefers-contrast:more){:root{--lo:rgba(110,120,150,.75)}.round,.pill,.tile,.wide-tile,.wins,.choice button,.soft-btn,.nav,.mini-round,.icon-button,input,textarea,.tools{outline:1px solid var(--muted)}}
@media(forced-colors:active){.round,.play,.pill,.tile,.wide-tile,.wins,.choice button,.soft-btn,.accent-btn,.nav-button,.mini-round,.icon-button,input,textarea,.tools button,.task-row,.dial{border:1px solid CanvasText}.nav-button.selected,.task-row.active{outline:2px solid Highlight}.elapsed{stroke:Highlight}}
/* No stray dot on the ring before any time has passed */
.dial:not(.started-arc) .elapsed{opacity:0}
.dial-arc:has(.timer-head.started) .elapsed,.running .elapsed{opacity:1}
/* Focus mode: drop the heading so the whole lifted card fits the screen */
.app.focusing .hello{display:none}

/* ===== Pass 2: fixes + a little more contrast and colour ===== */
:root{--base:#e4e7f2;--ink:#1b1f2e;--muted:#4a5168;--accent:#4c3bdc;--accent-2:#7a68ff;--tint:rgba(76,59,220,.09);
  --lo:rgba(140,150,185,.62);--edge-lo:rgba(110,120,155,.4)}
@media(prefers-color-scheme:dark){:root{--base:#242833;--ink:#eef0f7;--muted:#b1b8cc;--accent:#ada5ff;--accent-2:#c6c0ff;--tint:rgba(173,165,255,.12);--lo:rgba(0,0,0,.62)}}

/* Toast sits under the header, never over the controls */
.toast{top:calc(70px + env(safe-area-inset-top));bottom:auto;animation:drop .25s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-10px) scale(.97)}}

/* Mission panel: status sits on the right, no empty half */
.mission{grid-template-columns:auto 1fr auto;padding:10px 12px 10px 10px}
.status{grid-column:auto;padding:7px 11px;border-radius:999px;box-shadow:var(--raise-sm);font-size:11px;white-space:nowrap;align-self:center}
.running .status{color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 4px 12px var(--glow)}
.running .status i{background:var(--on-accent);box-shadow:none}
@media(max-width:380px){.status{font-size:0;padding:7px}.status i{width:9px;height:9px}}

/* Ring: bigger head covers the arc's start cap, so no double blob */
.timer-head{stroke-width:4}

/* A touch more colour: accent-tinted wells behind every symbol */
.tile-icon,.choice button [data-icon],.note-bullet,.count,.wide-tile .tile-icon{background:var(--tint)}
.mission{background:linear-gradient(135deg,var(--tint),transparent 60%)}
.eyebrow{color:var(--accent)}
.cap{color:var(--ink)}
.hint,.caption,.time-help,.task-min,.size-badge,.tile small,.wide-tile small{color:var(--muted)}

/* Size chips: icon + word + its own soft tint, readable at a glance */
.size-badge{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:3px 9px 3px 7px;border-radius:999px;font-size:12px;font-weight:650;vertical-align:middle}
.size-badge::before{display:none}
.size-badge svg{width:13px!important;height:13px!important;stroke-width:2!important}
.task-min{display:block;font-size:13px}
.size-quick{background:#d9f2e6;color:#0b6b45}
.size-medium{background:#fbebcf;color:#8a4b00}
.size-deep{background:#e3defc;color:#3a2bb8}
@media(prefers-color-scheme:dark){.size-quick{background:rgba(52,199,132,.16);color:#7fe0b2}.size-medium{background:rgba(255,176,59,.16);color:#ffc977}.size-deep{background:rgba(173,165,255,.18);color:#cdc8ff}}
.task-row.active .size-badge{box-shadow:none}

/* Inputs: focus glows inside the well instead of a floating outline */
input:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--inset),0 0 0 2px var(--accent)}
.stepper-well input:focus-visible{box-shadow:none}
.stepper-well:focus-within{box-shadow:var(--inset),0 0 0 2px var(--accent)}

/* Readability: nothing small and pale */
.mission-index,.status,.time-help,.caption,.hint,.tile small,.wide-tile small,.choice button small,.stat small,.note-body small{font-size:12.5px}
.time-help{font-size:12px}
input::placeholder,textarea::placeholder{color:#5f667d}
@media(prefers-color-scheme:dark){input::placeholder,textarea::placeholder{color:#9aa2b8}}

/* Input focus, premium: deeper well + hairline accent inside the edge, label lights up. No outer ring. */
:root{--ring:rgba(76,59,220,.45)}
@media(prefers-color-scheme:dark){:root{--ring:rgba(173,165,255,.5)}}
input,textarea{transition:box-shadow .2s var(--ease)}
input:focus-visible,textarea:focus-visible{outline:none;box-shadow:inset 5px 5px 11px var(--lo),inset -5px -5px 11px var(--hi),inset 0 0 0 1.5px var(--ring)}
.stepper-well:focus-within{box-shadow:var(--inset),inset 0 0 0 1.5px var(--ring)}
label:has(+ input:focus-visible),label:has(+ textarea:focus-visible),.minutes:focus-within label{color:var(--accent)}
textarea{resize:none}
.size-badge svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.task-min{display:inline;font-size:13px}
.size-badge{margin:0 0 0 8px;padding:2px 8px 2px 6px;font-size:11.5px}
.task-name{margin-bottom:3px}

/* ===== Premium emoji: 3D Fluent emoji set INTO wells or sitting ON raised discs ===== */
.emo{display:block;width:26px;height:26px;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 3px 3px rgba(40,30,110,.22))}
[data-emoji]{display:inline-grid;place-items:center;flex-shrink:0}
@media(prefers-color-scheme:dark){.emo{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}}

/* List: emoji etched INTO a carved well; the current mission's emoji sits ON a raised disc with an accent halo */
.task-symbol{width:50px;height:50px;box-shadow:var(--inset);background:var(--base)}
.task-symbol .emo{width:28px;height:28px;filter:drop-shadow(0 2px 2px rgba(40,30,110,.18))}
.task-row.active .task-symbol{background:var(--base);box-shadow:var(--raise),0 0 0 2px var(--accent),0 8px 18px var(--glow)}
.task-row.active .task-symbol .emo{width:30px;height:30px;transform:translateY(-1px)}
.task-row.done .task-symbol .emo{opacity:.85}

/* Focus mission: big emoji on a raised disc */
.mission-icon{width:54px;height:54px;box-shadow:var(--raise)}
.mission-icon .emo{width:32px;height:32px}
.mission{background:var(--base)}

/* Tiles, pickers, stats: emoji in tinted carved wells */
.tile-icon{width:58px;height:58px}
.tile-icon .emo{width:34px;height:34px}
.wide-tile .tile-icon{width:52px;height:52px}
.wide-tile .tile-icon .emo{width:30px;height:30px}
.choice button [data-emoji]{width:52px;height:52px;border-radius:50%;box-shadow:var(--inset-sm);background:var(--tint);margin-bottom:6px}
.choice button [data-emoji] .emo{width:32px;height:32px}
.stat [data-emoji]{margin-bottom:6px}
.stat .emo{width:32px;height:32px}
.hero-stat .emo{filter:drop-shadow(0 3px 4px rgba(20,10,80,.4))}
.pill .emo{width:22px;height:22px}
.wins-head .emo{width:24px;height:24px}
.tools .emo{width:18px;height:18px}
.note-bullet{width:46px;height:46px;background:var(--base);box-shadow:var(--inset-sm)}
.note-bullet .emo{width:26px;height:26px}
.routine-option>img.emo:first-child{width:50px;height:50px;padding:10px;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm);filter:none}

/* Size chips: neutral etched pill, the emoji carries the colour */
.size-badge,.size-quick,.size-medium,.size-deep{background:transparent;color:var(--ink);box-shadow:var(--inset-sm);padding:3px 10px 3px 5px;gap:5px;font-weight:650}
.size-badge .emo{width:17px;height:17px;filter:drop-shadow(0 1px 1px rgba(40,30,110,.25))}
.task-row.active .size-badge{box-shadow:var(--inset-sm)}

/* Live signal: a green glowing dot (state is also in the words beside it) */
:root{--live:#16c47f;--live-glow:rgba(22,196,127,.55)}
@media(prefers-color-scheme:dark){:root{--live:#3ee69d;--live-glow:rgba(62,230,157,.5)}}
.status i{width:8px;height:8px;background:var(--live);box-shadow:0 0 0 3px rgba(22,196,127,.15),0 0 8px var(--live-glow)}
.running .status{color:var(--ink);background:var(--base);box-shadow:var(--raise-sm)}
.running .status i{background:var(--live);animation:live 1.6s ease-in-out infinite}
@keyframes live{0%,100%{box-shadow:0 0 0 2px rgba(22,196,127,.25),0 0 6px var(--live-glow)}50%{box-shadow:0 0 0 6px rgba(22,196,127,0),0 0 14px var(--live-glow)}}
.task-row.active .task-name::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 2px 8px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live-glow);vertical-align:middle}
.wins-count{display:inline-flex;align-items:center;gap:7px}
.wins:has(.ruler i.complete) .wins-count::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 8px var(--live-glow)}
@media(prefers-reduced-motion:reduce){.running .status i{animation:none}}

/* ===== Tactile list: rows rest flat, lift on hover, sink when picked; Go pops out ===== */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}
.task-row{transition:box-shadow .3s var(--ease),transform .35s var(--spring)}
@media(hover:hover){.task-row:not(.picked):not(.done):hover{box-shadow:var(--raise-sm);transform:translateY(-1px)}}
.task-row:not(.picked):has(.task-select:active){box-shadow:var(--inset-sm);transform:scale(.985)}
/* The current mission (green dot) no longer gets depth unless it's the picked one */
.task-row.active:not(.picked){box-shadow:none}
.task-row.active:not(.picked) .task-symbol{box-shadow:var(--inset)}
.task-row.picked{box-shadow:var(--inset);animation:sink .38s var(--ease)}
@keyframes sink{0%{box-shadow:var(--raise-sm);transform:scale(1)}45%{box-shadow:var(--inset);transform:scale(.98)}100%{box-shadow:var(--inset);transform:scale(1)}}
.task-row.picked .task-symbol{background:var(--base);box-shadow:var(--raise),0 0 0 2px var(--accent),0 8px 18px var(--glow);transition:box-shadow .3s var(--ease)}
.task-row.picked .task-symbol .emo{width:30px;height:30px;transform:translateY(-1px)}
.task-row .task-symbol .emo{transition:transform .35s var(--spring)}
.task-row:has(.task-select:active) .task-symbol .emo{transform:scale(.9)}

/* Go: a raised accent capsule that pops out of the surface and presses in */
.go-btn{display:flex;align-items:center;gap:6px;height:46px;padding:0 16px 0 13px;margin-right:2px;border-radius:999px;flex-shrink:0;font-size:14.5px;font-weight:800;letter-spacing:.01em;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:-4px -4px 10px var(--hi),0 8px 18px var(--glow),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .35s var(--spring),box-shadow .15s var(--ease)}
.go-btn svg{width:16px;height:16px;fill:currentColor;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.go-btn:active{transform:scale(.92);box-shadow:inset 3px 3px 8px rgba(30,20,120,.5);transition:transform .1s var(--ease),box-shadow .1s var(--ease)}
.go-btn.pop{animation:popout .5s var(--spring)}
@keyframes popout{0%{opacity:0;transform:scale(.4) translateX(10px)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.task-row.picked .size-badge{box-shadow:var(--raise-sm)}

/* Every surface: press sinks fast, release springs back */
.tile,.wide-tile,.wins,.round,.pill,.choice button,.soft-btn,.accent-btn,.mini-round,.nav-button,.tools button,.icon-button,.wander,.step-link,.logo{transition:box-shadow .18s var(--ease),transform .4s var(--spring),color .15s}
.tile:active,.wide-tile:active,.wins:active,.choice button:active{transform:scale(.97);box-shadow:var(--inset);transition:transform .1s var(--ease),box-shadow .1s var(--ease)}
.round:active:not(:disabled),.pill:active,.mini-round:active,.soft-btn:active,.wander:active{transform:scale(.95);box-shadow:var(--inset);transition:transform .1s var(--ease),box-shadow .1s var(--ease)}
.play{transition:transform .4s var(--spring),box-shadow .18s var(--ease)}
.play:active:not(:disabled){transform:scale(.93);transition:transform .1s var(--ease),box-shadow .1s var(--ease)}
.nav-button:active{transform:scale(.95)}
.nav-button.selected{transition:box-shadow .3s var(--ease),transform .4s var(--spring),color .15s}
.tools button:active{transform:scale(.95);box-shadow:var(--inset-sm)}
@media(prefers-reduced-motion:reduce){.task-row.picked,.go-btn.pop{animation:none}}

/* ===== Pass 3: calmer. Softer depth, symbols sit straight on the surface ===== */
:root{--lo:rgba(150,160,190,.42);--edge-lo:rgba(120,130,160,.28);--hi:rgba(255,255,255,.9);
  --raise:-5px -5px 12px var(--hi),5px 5px 12px var(--lo),-1px -1px 0 var(--edge-hi),1px 1px 2px var(--edge-lo);
  --raise-sm:-3px -3px 6px var(--hi),3px 3px 6px var(--lo);
  --raise-lg:-10px -10px 24px var(--hi),10px 10px 24px var(--lo),-1px -1px 0 var(--edge-hi),1px 1px 2px var(--edge-lo);
  --inset:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi);
  --inset-sm:inset 2px 2px 4px var(--lo),inset -2px -2px 4px var(--hi)}
@media(prefers-color-scheme:dark){:root{--lo:rgba(0,0,0,.45);--hi:rgba(255,255,255,.05)}}

/* List symbols: just the emoji, no well, no disc */
.task-symbol,.task-row.active:not(.picked) .task-symbol,.task-row.picked .task-symbol{width:44px;height:44px;background:none;box-shadow:none}
.task-symbol .emo,.task-row.picked .task-symbol .emo{width:32px;height:32px;transform:none;filter:drop-shadow(0 3px 3px rgba(40,30,110,.2))}
.task-row.picked .task-symbol .emo{transform:scale(1.08)}
/* Size: just the symbol (word kept for screen readers + tooltip) */
.size-badge,.size-quick,.size-medium,.size-deep,.task-row.picked .size-badge,.task-row.active .size-badge{background:none;box-shadow:none;padding:0;margin-left:6px}
.size-badge .emo{width:18px;height:18px}
/* Picked row: a gentle press, not a trench */
.task-row.picked{box-shadow:var(--inset-sm)}
@keyframes sink{0%{box-shadow:none;transform:scale(1)}45%{box-shadow:var(--inset-sm);transform:scale(.985)}100%{box-shadow:var(--inset-sm);transform:scale(1)}}

/* Every violet button is the same soft capsule as Go: no white halo bleeding off the edge, emoji instead of line icons */
.accent-btn,.go-btn{box-shadow:0 8px 20px -6px var(--glow),0 2px 4px rgba(40,30,120,.18),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(30,20,120,.18)}
.accent-btn{gap:10px}
.accent-btn .emo{width:22px;height:22px;filter:drop-shadow(0 2px 2px rgba(20,10,80,.35))}
.accent-btn:active{box-shadow:inset 3px 3px 8px rgba(30,20,120,.45)}
/* Room for each card's light so it never gets sliced into a hard strip at the scroll edge */
.scroll{padding-left:24px;padding-right:24px}
.app.focusing .focus{margin:0 -12px;padding-left:12px;padding-right:12px}

/* Go, rebuilt in the surface's own material: a soft raised capsule, violet word, tiny violet play disc */
.go-btn{height:44px;padding:0 16px 0 6px;gap:9px;background:var(--base);color:var(--accent);font-size:14.5px;font-weight:750;letter-spacing:.01em;box-shadow:var(--raise-sm),-1px -1px 0 var(--edge-hi);transition:transform .35s var(--spring),box-shadow .18s var(--ease)}
.go-disc{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 3px 8px -2px var(--glow),inset 0 1px 0 rgba(255,255,255,.3)}
.go-disc svg{width:12px;height:12px;margin-left:2px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.go-btn:active{transform:scale(.95);box-shadow:var(--inset-sm);transition:transform .1s var(--ease),box-shadow .1s var(--ease)}
.go-btn:active .go-disc{transform:scale(.9)}
@keyframes popout{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
.go-btn.pop{animation:popout .35s var(--spring)}
/* A picked finished mission just presses in; reopen/edit lives under ••• */
.task-row.done.picked{box-shadow:var(--inset-sm)}
.task-select:focus-visible{outline:none}
.task-row:has(.task-select:focus-visible){outline:2px solid var(--ring);outline-offset:2px}
.go-btn:focus-visible{outline:2px solid var(--ring);outline-offset:3px}


/* Pager: browse every mission from the Focus screen */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 2px 0}
.pager .mini-round{width:42px;height:42px;color:var(--ink)}
.pager .mini-round:disabled{opacity:.35;box-shadow:var(--inset-sm)}
.dots{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 12px;border-radius:999px;box-shadow:var(--inset-sm);min-height:28px}
.dots i{width:7px;height:7px;border-radius:999px;background:var(--track);transition:width .35s var(--spring),background .2s}
.dots i.done{background:var(--live);box-shadow:0 0 6px var(--live-glow)}
.dots i.here{width:22px;background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:0 0 8px var(--glow)}
.dots i.done.here{background:var(--live);box-shadow:0 0 8px var(--live-glow)}
.mission{touch-action:pan-y;user-select:none}
.slide-l .mission,.slide-l .dial-core{animation:slideL .32s var(--ease)}
.slide-r .mission,.slide-r .dial-core{animation:slideR .32s var(--ease)}
@keyframes slideL{from{opacity:.2;transform:translateX(18px)}}
@keyframes slideR{from{opacity:.2;transform:translateX(-18px)}}
/* Viewing a finished mission */
.viewing-done .time{font-size:40px;font-weight:300;color:var(--live)}
.viewing-done .elapsed{stroke:var(--live);filter:drop-shadow(0 2px 6px var(--live-glow))}
.viewing-done .mission h2{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--live)}
.brand{border-radius:999px}
@media(prefers-reduced-motion:reduce){.slide-l .mission,.slide-l .dial-core,.slide-r .mission,.slide-r .dial-core{animation:none}}

/* ===== Type: Plus Jakarta Sans, airy and delicate (bundled for offline) ===== */
@font-face{font-family:"Jakarta";src:url("./fonts/jakarta.woff2") format("woff2");font-weight:200 800;font-display:swap}
:root,button,input,textarea{font-family:"Jakarta","Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{letter-spacing:.005em}
h1{font-weight:300;letter-spacing:-.025em;line-height:1.12}
h1 b,h2 b{font-weight:700}
.sheet-head h2{font-weight:300;letter-spacing:-.02em}
.wordmark{font-weight:700;letter-spacing:-.02em}
.mission h2{font-weight:650;letter-spacing:-.015em}
.time{font-weight:200;letter-spacing:-.03em}
.task-name{font-weight:600;letter-spacing:-.005em}
.tile strong,.wide-tile strong,.wins-head strong,.choice button strong,.card h2{font-weight:650;letter-spacing:-.01em}
.go-btn,.accent-btn{font-weight:650;letter-spacing:.01em}
.cap,.play>span:last-child,.nav-button,.mission-index,.status{font-weight:600}
.eyebrow{font-weight:700;letter-spacing:.18em}
.stat strong{font-weight:200;letter-spacing:-.03em}

/* Finished mission: a glowing green tick instead of the dot */
.status .tick{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--live);box-shadow:0 0 0 3px rgba(22,196,127,.15),0 0 10px var(--live-glow)}
.status .tick svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-color-scheme:dark){.status .tick{color:#0b2a1d}}
.viewing-done .status{gap:7px;padding-left:7px}
/* "Do it again" uses a stroked arrow, not a filled shape */
.viewing-done .play svg{fill:none;stroke:currentColor;stroke-width:2.4}


/* Emoji picker: a carved rail of symbols; the chosen one rises out of it */
.picker-label{display:block;font-size:13px;font-weight:650;margin:2px 0 9px}
.emoji-picker{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:8px;margin:0 0 18px;border-radius:20px;box-shadow:var(--inset);scroll-padding:8px;scroll-snap-type:x proximity}
.emoji-picker::-webkit-scrollbar{display:none}
.emoji-opt{flex-shrink:0;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;scroll-snap-align:start;transition:box-shadow .2s var(--ease),transform .35s var(--spring)}
.emoji-opt .emo{width:28px;height:28px;transition:transform .35s var(--spring)}
.emoji-opt.auto{width:58px;grid-template-rows:auto auto;gap:0;align-content:center}
.emoji-opt.auto .emo{width:22px;height:22px}
.emoji-opt.auto small{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--accent)}
.emoji-opt[aria-checked=true]{background:var(--base);box-shadow:var(--raise-sm),0 0 0 2px var(--accent)}
.emoji-opt[aria-checked=true] .emo{transform:scale(1.12)}
.emoji-opt:active .emo{transform:scale(.88)}
.emoji-opt:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
#editForm .emoji-picker{margin-bottom:16px}

/* Finished missions: their own emoji, softened, with a glowing green tick badge (matches the Done pill) */
.task-symbol{position:relative}
.task-row.done .task-symbol .emo{opacity:.55;filter:grayscale(.35) drop-shadow(0 2px 2px rgba(40,30,110,.15))}
.task-row.done .task-symbol::after{content:"";position:absolute;right:0;bottom:2px;width:18px;height:18px;border-radius:50%;background:var(--live) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px var(--base),0 0 10px var(--live-glow)}


/* Receipts: range tabs + a day-grouped log */
.seg.range{display:flex;padding:5px;border-radius:18px;box-shadow:var(--inset);margin:0 0 16px}
.seg.range button{flex:1;min-height:42px;border-radius:13px;font-size:13px;font-weight:650;color:var(--muted);transition:box-shadow .25s var(--ease),color .2s,transform .35s var(--spring)}
.seg.range button[aria-selected=true]{background:var(--base);box-shadow:var(--raise-sm);color:var(--accent)}
.seg.range button:active{transform:scale(.96)}
.log{display:flex;flex-direction:column}
.day-head{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:14px 0 4px}
.day-head:first-child{margin-top:0}
.log-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;min-height:44px;padding:4px 0}
.log-row .emo{width:26px;height:26px}
.log-row span{font-size:14.5px;font-weight:550;overflow-wrap:anywhere}
.log-row small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.log-row+.log-row{border-top:1px solid var(--track)}

/* Finished mission on the dial: a raised glowing tick disc, "Done" set small and neat beneath */
.viewing-done .dial-core::before{content:"";width:62px;height:62px;border-radius:50%;margin-bottom:10px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/30px no-repeat,linear-gradient(135deg,#43e3a0,#0fae6c);box-shadow:0 10px 22px -6px var(--live-glow),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,80,45,.2)}
.viewing-done .time{font-size:17px;font-weight:650;letter-spacing:.02em;color:var(--ink)}
.viewing-done .time-help{margin-top:3px}
/* Tick etched INTO the dial: a carved well with a glowing green engraved tick */
.viewing-done .dial-core::before{width:66px;height:66px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%2316c47f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/34px no-repeat,radial-gradient(circle,rgba(22,196,127,.14),transparent 65%),var(--base);box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi),0 0 0 1px rgba(22,196,127,.18)}
@media(prefers-color-scheme:dark){.viewing-done .dial-core::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%233ee69d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/34px no-repeat,radial-gradient(circle,rgba(62,230,157,.16),transparent 65%),var(--base)}}
.viewing-done .elapsed{opacity:1}
.viewing-done .dial:not(.started-arc) .elapsed{opacity:1}
.viewing-done .dial-arc .elapsed{stroke-width:5;opacity:.85;filter:drop-shadow(0 0 5px var(--live-glow))}


/* Energy scale: three bolts, lit by how much the mission asks of you */
.size-badge{gap:0}
.size-badge .emo{width:15px;height:15px;margin-right:-2px}
.emo.off{opacity:.2;filter:grayscale(1)}
.bolts{display:inline-flex;align-items:center;justify-content:center;gap:0}
.choice button .bolts{width:auto;height:52px;padding:0 12px;border-radius:999px;box-shadow:var(--inset-sm);background:var(--tint);margin-bottom:6px}
.choice button .bolts .emo{width:22px;height:22px;margin:0 -3px}

/* Logo: fine brain + green tick on a raised disc; ADH thin · Done bold, live-dot separator */
.brand{cursor:default}
.logo svg{width:26px;height:26px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.logo .brain{stroke:var(--accent);stroke-width:1.6}
.logo .mid{stroke-width:1.4;opacity:.55}
.logo .tick{stroke:var(--live);stroke-width:2.3}
.wordmark{font-weight:300;letter-spacing:-.01em;font-size:21px;display:inline-flex;align-items:center}
.wordmark b{font-weight:700;letter-spacing:-.015em}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 5px;background:var(--live);box-shadow:0 0 8px var(--live-glow)}
.logo{display:grid;place-items:center;flex-shrink:0}


/* ===== Liquid timer: the dial's carved groove fills with glossy liquid as time passes ===== */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.dial{--size:min(262px,72vw);width:var(--size);--deg:calc(var(--p) * 360deg);--r:calc(var(--size) * .365);--t:calc(var(--size) * .118);transition:--p .3s linear}
@media(max-height:740px) and (max-width:599px){.dial{--size:min(220px,62vw)}}
.dial-arc{display:none}
.liquid{position:absolute;inset:0;border-radius:50%;pointer-events:none;overflow:hidden;
  background:conic-gradient(from 0deg,var(--accent-2),var(--accent) 55%,#6f5cff);
  -webkit-mask:radial-gradient(closest-side,transparent 60.5%,#000 61.5% 84.5%,transparent 85.5%),conic-gradient(#000 var(--deg),transparent 0);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(closest-side,transparent 60.5%,#000 61.5% 84.5%,transparent 85.5%) intersect,conic-gradient(#000 var(--deg),transparent 0);
  filter:drop-shadow(0 0 6px var(--glow))}
/* depth inside the tube: light along the outer wall, shade along the inner */
.liquid::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(20,10,90,.35) 62%,rgba(255,255,255,0) 70%,rgba(255,255,255,.35) 82%,rgba(255,255,255,0) 85%)}
.sheen{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.55) 80%,transparent 90%);animation:sheen 6s linear infinite}
@keyframes sheen{to{transform:rotate(1turn)}}
/* bubbles ride around the tube; only visible where there's liquid */
.b{position:absolute;left:50%;top:50%;width:0;height:0;animation:orbit var(--dur,8s) linear infinite;animation-delay:var(--delay,0s)}
.b i{position:absolute;width:var(--bs,5px);height:var(--bs,5px);margin:calc(var(--bs,5px) / -2);border-radius:50%;transform:translateY(calc(var(--r) * -1 + var(--off,0px)));background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.95),rgba(255,255,255,.35) 60%,rgba(255,255,255,.1));box-shadow:0 0 4px rgba(255,255,255,.5);animation:bob 1.8s ease-in-out infinite alternate}
@keyframes orbit{to{transform:rotate(1turn)}}
@keyframes bob{from{translate:0 -2px;scale:.85}to{translate:0 2px;scale:1.1}}
.b0{--dur:7s;--delay:-1s;--bs:6px;--off:-3px}.b1{--dur:9s;--delay:-3s;--bs:4px;--off:3px}.b2{--dur:8s;--delay:-5s;--bs:5px;--off:0px}
.b3{--dur:11s;--delay:-2s;--bs:3px;--off:-5px}.b4{--dur:7.5s;--delay:-6s;--bs:7px;--off:2px}.b5{--dur:10s;--delay:-8s;--bs:4px;--off:5px}.b6{--dur:8.5s;--delay:-4s;--bs:3px;--off:-1px}
.dial:not(.running .dial) .b,.dial .b{animation-play-state:paused}
.running .dial .b{animation-play-state:running}
/* rounded ends: a meniscus at the leading edge, a round start cap */
.liquid-cap{position:absolute;left:50%;top:50%;width:var(--t);height:var(--t);margin:calc(var(--t) / -2);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s var(--ease)}
.liquid-cap.start{transform:translateY(calc(var(--r) * -1));background:var(--accent-2)}
.liquid-cap.tip{transform:rotate(var(--deg)) translateY(calc(var(--r) * -1));background:radial-gradient(circle at 40% 35%,#9a8bff,var(--accent) 70%);box-shadow:0 0 10px var(--glow),inset 0 1px 1px rgba(255,255,255,.5)}
.dial:not([style*="--p: 0;"]):not([style*="--p:0;"]) .liquid-cap{opacity:1}
.dial[style*="--p: 0"] .liquid-cap{opacity:0}
.running .dial-well{box-shadow:var(--inset)}
/* finished mission: the groove is full of green */
.viewing-done .liquid{background:conic-gradient(from 0deg,#43e3a0,#0fae6c 60%,#2fd690);filter:drop-shadow(0 0 6px var(--live-glow))}
.viewing-done .liquid-cap{display:none}
.viewing-done .b{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.sheen,.b,.b i{animation:none!important}.dial{transition:none}}


/* ===== Liquid v2: one continuous SVG tube (round ends, no seams) + sheen/bubbles flowing inside ===== */
.liquid-cap{display:none}
.liquid{background:none;filter:none;-webkit-mask:radial-gradient(closest-side,transparent 62%,#000 63.5% 83%,transparent 84.5%),conic-gradient(#000 var(--deg),transparent 0);mask:radial-gradient(closest-side,transparent 62%,#000 63.5% 83%,transparent 84.5%) intersect,conic-gradient(#000 var(--deg),transparent 0);z-index:1}
.liquid::after{display:none}
.tube{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;pointer-events:none;opacity:0;transition:opacity .4s var(--ease)}
.has-liquid .tube{opacity:1}
.tube circle{fill:none;stroke-linecap:round;stroke-dasharray:calc(var(--p) * 100) 100}
#liqGrad stop:first-child{stop-color:var(--accent-2)}
#liqGrad stop:last-child{stop-color:var(--accent)}
.tube-body{stroke:url(#liqGrad);stroke-width:25}
.tube-glow{stroke:var(--accent);stroke-width:25;opacity:.35}
.tube-shade{stroke:rgba(20,10,90,.28);stroke-width:5}
.tube-shine{stroke:rgba(255,255,255,.42);stroke-width:4}
.has-liquid .liquid{opacity:1}.liquid{opacity:0;transition:opacity .4s var(--ease)}
.dial-core{z-index:2}
/* finished: the tube is full of green */
.viewing-done #liqGrad stop:first-child{stop-color:#43e3a0}
.viewing-done #liqGrad stop:last-child{stop-color:#0fae6c}
.viewing-done .tube-glow{stroke:#16c47f}
.viewing-done .liquid{background:none}
/* With living liquid, the outer halo only needs to whisper */
.running .dial::before{inset:-6px;background:radial-gradient(circle,transparent 62%,var(--glow) 70%,transparent 73%);animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.08}50%{opacity:.35}}


/* ===== Lava lamp: the dial's centre fills with slow, merging, wobbling liquid ===== */
.tube,.liquid{display:none}
:root{--lava-a:#b4a8ff;--lava-b:#7d6bff}
@media(prefers-color-scheme:dark){:root{--lava-a:#7a68ff;--lava-b:#4c3bdc}}
.dial-core{overflow:hidden;isolation:isolate}
.dial-core>.time,.dial-core>.time-help,.dial-core>.done-tick{position:relative;z-index:2}
.lamp{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:0;opacity:0;transition:opacity .6s var(--ease)}
.has-liquid .lamp{opacity:1}
.goo{position:absolute;inset:-10%;filter:url(#goo)}
.pool,.blob{position:absolute;background:linear-gradient(180deg,var(--lava-a),var(--lava-b))}
/* the pool: its height is the whole-mission progress */
.pool{left:0;right:0;bottom:0;height:calc((var(--p) + .1) / 1.2 * 100%);border-radius:0}
/* blobs live around the surface: some swell and lift away, some roll along it */
.blob{border-radius:50%;width:var(--s);height:var(--s);left:var(--x);bottom:calc((var(--p) + .1) / 1.2 * 100% - var(--s) / 2);animation:var(--anim) var(--d) ease-in-out infinite alternate;animation-delay:var(--dl);animation-play-state:paused}
.running .blob{animation-play-state:running}
@keyframes rise{0%{transform:translateY(25%) scale(.9,1.05)}50%{transform:translateY(-55%) scale(1.05,.92)}100%{transform:translateY(-120%) scale(.85,1.1)}}
@keyframes roll{0%{transform:translate(-18%,20%) scale(1.2,.8)}100%{transform:translate(18%,-10%) scale(.9,1.1)}}
@keyframes bob{0%{transform:translateY(10%) scale(1,1)}100%{transform:translateY(-35%) scale(1.1,.9)}}
.k0{--s:34%;--x:8%;--anim:roll;--d:6s;--dl:-1s}
.k1{--s:28%;--x:58%;--anim:roll;--d:7.5s;--dl:-4s}
.k2{--s:20%;--x:30%;--anim:rise;--d:9s;--dl:-2s}
.k3{--s:15%;--x:62%;--anim:rise;--d:11s;--dl:-6s}
.k4{--s:24%;--x:40%;--anim:bob;--d:5.5s;--dl:-3s}
.k5{--s:12%;--x:20%;--anim:rise;--d:13s;--dl:-9s}
/* glass bowl: soft top highlight and a little depth at the rim */
.glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 60% 35% at 38% 18%,rgba(255,255,255,.55),transparent 70%),radial-gradient(circle,transparent 62%,rgba(30,20,100,.12) 100%)}
@media(prefers-color-scheme:dark){.glass{background:radial-gradient(ellipse 60% 35% at 38% 18%,rgba(255,255,255,.12),transparent 70%),radial-gradient(circle,transparent 62%,rgba(0,0,0,.25) 100%)}}
/* text stays readable on top of the lava */
.time{font-weight:250}
.has-liquid .time-help{color:var(--ink);opacity:.8}
@media(prefers-color-scheme:dark){.has-liquid .time,.has-liquid .time-help{text-shadow:0 1px 6px rgba(0,0,0,.35)}}
/* finished: the lamp is full of green, gently alive */
.viewing-done{--lava-a:#7fefc0;--lava-b:#17c47f}
.viewing-done .blob{animation-play-state:running}
.viewing-done .dial-core::before{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.blob{animation:none!important}}
.dial-core>.done-tick{position:absolute;z-index:3}

/* ===== No haze: the dial is calm material, the life is inside the lamp ===== */
.running .dial::before{display:none}
.running .dial-well{box-shadow:var(--inset)}

/* Lava scales with the fill, so a little progress is a little puddle, not random lumps */
.blob{width:calc(var(--s) * min(1, var(--p) * 2.5 + .25));height:calc(var(--s) * min(1, var(--p) * 2.5 + .25));bottom:calc((var(--p) + .1) / 1.2 * 100% - var(--s) * min(1, var(--p) * 2.5 + .25) / 2)}

/* ===== Start: a raised bezel of surface material with a violet gem set into it ===== */
.play{width:88px;height:88px;background:var(--base);color:var(--on-accent);box-shadow:var(--raise),-1px -1px 0 var(--edge-hi);isolation:isolate}
.play::before{content:"";position:absolute;inset:11px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.45),transparent 42%),linear-gradient(145deg,var(--accent-2),var(--accent) 65%);
  box-shadow:inset 0 -3px 6px rgba(20,10,90,.35),inset 0 2px 2px rgba(255,255,255,.35),0 0 0 1px rgba(40,20,140,.25),0 6px 14px -4px var(--glow);
  transition:transform .4s var(--spring),box-shadow .15s var(--ease),filter .15s}
.play svg{width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(20,10,90,.35))}
.play:active:not(:disabled){transform:scale(.97);box-shadow:var(--inset)}
.play:active:not(:disabled)::before{transform:scale(.94);filter:brightness(.9);box-shadow:inset 0 3px 8px rgba(20,10,90,.5),0 0 0 1px rgba(40,20,140,.3)}
.running .play::before{box-shadow:inset 0 -3px 6px rgba(20,10,90,.35),inset 0 2px 2px rgba(255,255,255,.35),0 0 0 1px rgba(40,20,140,.25),0 0 18px var(--glow)}
.viewing-done .play::before{background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.45),transparent 42%),linear-gradient(145deg,var(--accent-2),var(--accent) 65%)}
@media(prefers-color-scheme:dark){.play svg{filter:none}}

/* Captions sit on one shared baseline (the big button is 30px taller) */
.controls{align-items:center}
.round .cap{top:calc(100% + 24px)}
.play>span:last-child{top:calc(100% + 9px)}

/* Gem, refined: moulded soft rim light instead of a glossy hotspot; no outline */
.play::before{background:linear-gradient(145deg,var(--accent-2),var(--accent) 70%);
  box-shadow:inset 3px 3px 6px rgba(255,255,255,.28),inset -4px -4px 8px rgba(20,10,90,.32),0 6px 14px -4px var(--glow)}
.running .play::before{box-shadow:inset 3px 3px 6px rgba(255,255,255,.28),inset -4px -4px 8px rgba(20,10,90,.32),0 0 16px var(--glow)}
.play:active:not(:disabled)::before{box-shadow:inset -2px -2px 5px rgba(255,255,255,.18),inset 4px 4px 9px rgba(20,10,90,.45)}
.viewing-done .play::before{background:linear-gradient(145deg,var(--accent-2),var(--accent) 70%)}
@media(prefers-color-scheme:dark){.play::before{box-shadow:inset 3px 3px 6px rgba(255,255,255,.35),inset -4px -4px 8px rgba(40,20,120,.35),0 6px 14px -4px var(--glow)}}

/* Timer tools: each one a small raised button, its icon etched into a little well */
.tools{gap:10px;padding:8px}
.tools button{gap:9px;min-height:48px;padding:0 14px 0 8px;border-radius:16px;background:var(--base);box-shadow:var(--raise-sm);font-weight:650}
.tools button>[data-icon],.tools button>[data-emoji]{width:32px;height:32px;border-radius:50%;box-shadow:var(--inset-sm);background:var(--tint)}
.tools button>[data-icon] svg{width:15px;height:15px;stroke-width:2.2}
.tools button>[data-emoji] .emo{width:18px;height:18px}
.tools button:active{box-shadow:var(--inset-sm);transform:scale(.96)}

/* ===== Flow pass: faint ring in the groove, an orbiting light, lava alive from second one ===== */
/* 1. Faint progress ring in the groove (fine glowing line, round ends) */
.tube{display:block;opacity:1}
.tube-shade,.tube-shine{display:none}
.tube-body{stroke-width:5;opacity:.9}
.tube-glow{stroke-width:9;opacity:.35}
.dial:not(.has-liquid) .tube{opacity:0}
/* the empty groove gets a whisper of a track so the ring always reads as a ring */
.dial-well::after{content:"";position:absolute;inset:calc(var(--size) * .072);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 14%,transparent)}
/* 2. A soft light orbiting the groove while the timer runs */
.comet{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;pointer-events:none;opacity:0;z-index:1;
  background:radial-gradient(circle,#fff 0 25%,var(--accent-2) 45%,transparent 70%);box-shadow:0 0 14px 4px var(--glow);
  transform:rotate(0deg) translateY(calc(var(--r) * -1));transition:opacity .5s var(--ease)}
.running .comet{opacity:.9;animation:comet 6s linear infinite}
@keyframes comet{from{transform:rotate(0deg) translateY(calc(var(--r) * -1))}to{transform:rotate(360deg) translateY(calc(var(--r) * -1))}}
.viewing-done .comet{display:none}
/* 3. Lava: a living pool from the first second, and blobs that travel up through the lamp */
.dial{--lv:var(--p)}
.running .dial,.dial.running{--lv:max(var(--p),.12)}
.running .lamp{opacity:1}
.pool{height:calc((var(--lv) + .1) / 1.2 * 100%)}
.blob{bottom:calc((var(--lv) + .1) / 1.2 * 100% - var(--s) * min(1, var(--lv) * 2.5 + .25) / 2);width:calc(var(--s) * min(1, var(--lv) * 2.5 + .25));height:calc(var(--s) * min(1, var(--lv) * 2.5 + .25))}
@keyframes rise{0%{transform:translateY(30%) scale(.9,1.08)}35%{transform:translateY(calc(var(--size) * -.12)) scale(1.06,.92)}70%{transform:translateY(calc(var(--size) * -.3)) scale(.92,1.08)}100%{transform:translateY(calc(var(--size) * -.4)) scale(.8,1.12)}}
.k2,.k3,.k5{--anim:rise}
.k2{--d:7s}.k3{--d:9s}.k5{--d:10s}
@keyframes roll{0%{transform:translate(-22%,25%) scale(1.25,.8)}100%{transform:translate(22%,-15%) scale(.88,1.12)}}
@media(prefers-reduced-motion:reduce){.running .comet{animation:none;opacity:0}}

/* Tool buttons: evenly centred contents */
.tools button{justify-content:center;padding:0 12px}
.dial:not(.ring-on):not(.viewing-done .dial) .tube{opacity:0}.viewing-done .tube{opacity:1}

/* No orbiting dot: the faint ring alone carries the motion */
.comet{display:none!important}
/* Faint ring breathes slowly while running, so the outside still feels alive */
.running .dial-well::after{animation:ringbreathe 4s ease-in-out infinite}
@keyframes ringbreathe{0%,100%{border-color:color-mix(in srgb,var(--accent) 12%,transparent)}50%{border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 20%,transparent)}}
@media(prefers-reduced-motion:reduce){.running .dial-well::after{animation:none}}

/* Undo: a raised pill of the same material, violet word, presses in */
.toast button{background:var(--base);color:var(--accent);font-weight:700;box-shadow:var(--raise-sm),-1px -1px 0 var(--edge-hi);transition:transform .35s var(--spring),box-shadow .15s var(--ease)}
.toast button:active{box-shadow:var(--inset-sm);transform:scale(.95)}
.task-copy{white-space:nowrap}.task-name{white-space:normal}.task-row.picked .task-min{font-size:12px}.task-row.picked .size-badge{margin-left:4px}.task-row.picked .size-badge .emo{width:13px;height:13px}

/* Lava tuned for readability: pastel lilac (light), deep violet (dark); text never grey over liquid */
:root{--lava-a:#d4cdff;--lava-b:#b3a6ff}
@media(prefers-color-scheme:dark){:root{--lava-a:#6a58f0;--lava-b:#4232c8}}
.has-liquid .time-help,.running .time-help{color:var(--ink);opacity:1;font-weight:550}
.has-liquid .time,.running .time{font-weight:300}
@media(prefers-color-scheme:dark){.has-liquid .time,.running .time,.has-liquid .time-help,.running .time-help{color:#fff;text-shadow:0 1px 8px rgba(20,10,80,.45)}}
.viewing-done{--lava-a:#c9f5df;--lava-b:#8de6bb}
@media(prefers-color-scheme:dark){.viewing-done{--lava-a:#1fa86c;--lava-b:#0d7a4c}}

/* Aura: a soft violet bloom behind the dial, only while running, breathing very slowly */
.dial::before{display:block!important;content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent) 55%,transparent 72%);filter:blur(10px);transition:opacity .8s var(--ease)}
.running .dial::before{opacity:.55;animation:aura 6s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.7;transform:scale(1.03)}}
.viewing-done .dial::before{opacity:.5;background:radial-gradient(circle,rgba(22,196,127,.22) 55%,transparent 72%);animation:none}
@media(prefers-reduced-motion:reduce){.running .dial::before{animation:none}}
#taskList{margin-bottom:6px}
/* Aura v2: wider bloom that actually extends past the dial's edge */
.dial::before{inset:-34px;filter:blur(14px);background:radial-gradient(closest-side,transparent 62%,color-mix(in srgb,var(--accent) 45%,transparent) 80%,transparent 100%)}
.running .dial::before{animation:aura 6s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:.95;transform:scale(1.04)}}
.viewing-done .dial::before{opacity:.7;background:radial-gradient(closest-side,transparent 62%,rgba(22,196,127,.4) 80%,transparent 100%)}
.focus{overflow:visible}


/* ===== QA pass ===== */
/* Aura: beats the older running rule */
.running .dial::before{display:block;inset:-34px;filter:blur(14px);background:radial-gradient(closest-side,transparent 62%,color-mix(in srgb,var(--accent) 45%,transparent) 80%,transparent 100%);animation:aura 6s ease-in-out infinite}

/* Done group: folded tray at the end of the list */
.done-group{margin-top:10px;border-radius:22px;box-shadow:var(--inset-sm);padding:4px}
.done-head{display:flex;align-items:center;gap:6px}
.done-toggle{flex:1;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:18px;font-size:14px;font-weight:650;color:var(--ink);text-align:left}
.done-toggle>span:first-child{color:var(--muted);transition:transform .3s var(--spring)}
.done-toggle>span:first-child svg{width:16px;height:16px}
.done-group.open .done-toggle>span:first-child{transform:rotate(90deg)}
.done-toggle b{min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-size:12px;color:#fff;background:var(--live);box-shadow:0 0 8px var(--live-glow)}
@media(prefers-color-scheme:dark){.done-toggle b{color:#0b2a1d}}
.done-clear{min-height:40px;padding:0 14px;margin-right:4px;border-radius:14px;font-size:13px;font-weight:650;color:var(--accent);box-shadow:var(--raise-sm);transition:transform .35s var(--spring),box-shadow .15s var(--ease)}
.done-clear:active{box-shadow:var(--inset-sm);transform:scale(.95)}
.done-body{display:flex;flex-direction:column;gap:2px;padding:2px 2px 4px}
.done-body .task-row{min-height:60px}
.done-body .handle{display:none}
/* Done group chevron (raw svg from icon()) */
.done-toggle>svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--spring)}
.done-group.open .done-toggle>svg{transform:rotate(90deg)}
.done-toggle span{white-space:nowrap}
/* Finished view never shows the finish-animation tick */
.viewing-done .done-tick{display:none}
/* Toasts float a little lower so headings stay readable underneath */
.toast{top:calc(64px + env(safe-area-inset-top));left:20px;right:20px;padding:10px 10px 10px 16px;font-size:13.5px}
/* Focus mode fits on screen: arrows are locked while running, so they step aside */
.app.focusing .pager{display:none}
.app.focusing .focus{scroll-margin:8px}
.app.focusing .controls{margin-bottom:30px}
/* Short screens in focus mode: smaller dial and tighter spacing so everything fits */
@media (max-height:780px){
  .app.focusing .dial{--size:min(200px,54vw,calc(100dvh - 470px));margin:4px auto 12px}
  .app.focusing .step-link{min-height:34px;margin:2px 0 0;font-size:12.5px}
  .app.focusing .mission{padding:6px 10px 6px 6px}
  .app.focusing .mission-icon{width:44px;height:44px}
  .app.focusing .mission h2{font-size:17px}
  .app.focusing .controls{gap:24px;margin:0 0 26px}
  .app.focusing .round{width:50px;height:50px}
  .app.focusing .play{width:74px;height:74px}
  .app.focusing .play::before{inset:9px}
  .app.focusing .tools button{min-height:42px}
  .app.focusing .wander{min-height:44px;margin-top:8px}
  .app.focusing .focus{padding-top:10px;padding-bottom:10px}
  .app.focusing .time{font-size:38px}
}
.app.focusing .nav{position:absolute;left:0;right:0;bottom:0}

/* Brain = the 3D 🧠 everywhere */
.logo{position:relative}
.logo .emo{width:28px;height:28px}
.logo-tick{position:absolute;right:3px;bottom:4px;width:15px;height:15px;border-radius:50%;background:var(--live) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;box-shadow:0 0 0 2px var(--base),0 0 8px var(--live-glow)}
.wander .emo{width:22px;height:22px}
label .emo{width:18px;height:18px}
.nav-button .emo{width:23px;height:23px;filter:grayscale(1) opacity(.65);transition:filter .2s}
.nav-button.selected .emo{filter:drop-shadow(0 2px 3px rgba(40,30,110,.25))}
.hint .emo{width:15px;height:15px}
.logo-tick{right:-1px;bottom:-1px;width:14px;height:14px;background-size:9px}.logo .emo{width:26px;height:26px;transform:translate(-2px,-2px)}.nav-button .emo{width:21px;height:21px}


/* ===== The finish moment ===== */
.dial.surge{transition:--p 1.1s cubic-bezier(.2,.8,.2,1)}
.celebrating .dial{animation:dialpop .7s var(--spring)}
@keyframes dialpop{0%{transform:scale(1)}30%{transform:scale(.94)}65%{transform:scale(1.06)}100%{transform:scale(1)}}
.celebrating .dial-core::before{animation:tickin .6s var(--spring) .25s both}
@keyframes tickin{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
/* ring of light that leaves the dial */
.celebrating .dial::after{border:3px solid var(--live);animation:ripple 1.1s var(--ease) .15s;opacity:0}
.celebrating .dial::before{opacity:1!important;background:radial-gradient(closest-side,transparent 60%,rgba(22,196,127,.55) 80%,transparent 100%)!important;animation:aurapulse 1.4s var(--ease)!important}
@keyframes aurapulse{0%{transform:scale(.9);opacity:0}30%{opacity:1;transform:scale(1.08)}100%{opacity:.5;transform:scale(1)}}
/* confetti */
.burst{position:absolute;left:50%;top:50%;width:0;height:0;z-index:6;pointer-events:none}
.burst i,.burst img{position:absolute;left:0;top:0;width:var(--sz);height:var(--sz);margin:calc(var(--sz) / -2);border-radius:50%;background:var(--c);opacity:0;animation:pop 1.6s cubic-bezier(.15,.7,.3,1) var(--d) forwards}
.burst i.strip{border-radius:2px;width:calc(var(--sz) * .55);height:calc(var(--sz) * 1.6)}
.burst img{width:18px;height:18px;margin:-9px;background:none;border-radius:0}
@keyframes pop{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.2)}35%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) * .5)) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx) * 1.1),calc(var(--dy) + 90px)) rotate(var(--rot)) scale(.8)}}
/* time-saved pill */
.saved{position:relative;z-index:7;display:flex;flex-direction:column;align-items:center;gap:1px;width:max-content;margin:-18px auto 0;padding:9px 20px 8px;border-radius:999px;background:var(--base);box-shadow:var(--raise),0 0 0 1.5px rgba(22,196,127,.35),0 8px 24px -6px var(--live-glow);opacity:0;transform:translateY(8px) scale(.8);pointer-events:none;height:0;padding-top:0;padding-bottom:0;overflow:hidden}
.celebrating .saved{height:auto;padding-top:9px;padding-bottom:8px;margin-bottom:10px;animation:savedin 2.4s var(--spring) .35s both}
@keyframes savedin{0%{opacity:0;transform:translateY(10px) scale(.7)}18%{opacity:1;transform:translateY(0) scale(1.06)}28%{transform:scale(1)}85%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-6px) scale(.96)}}
.saved strong{font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--live);font-variant-numeric:tabular-nums}
@media(prefers-color-scheme:light){.saved strong{color:#0d9a5f}}
.saved small{font-size:11.5px;font-weight:600;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.celebrating .dial,.celebrating .dial-core::before,.celebrating .dial::after{animation:none}.celebrating .saved{animation:savedfade 2.4s linear both}@keyframes savedfade{0%,100%{opacity:0}10%,85%{opacity:1;transform:none}}}
/* Finish moment polish */
.burst{z-index:8}
.burst i{box-shadow:0 0 6px var(--c);filter:saturate(1.2)}
.burst img{width:22px;height:22px;margin:-11px}
@keyframes pop{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.3)}30%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) * .5)) scale(1.1)}75%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx) * 1.12),calc(var(--dy) + 110px)) rotate(var(--rot)) scale(.8)}}
.saved,.celebrating .saved{position:absolute;left:50%;bottom:-20px;margin:0;height:auto;padding:9px 20px 8px;white-space:nowrap}
.saved{transform:translate(-50%,8px) scale(.8)}
@keyframes savedin{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}18%{opacity:1;transform:translate(-50%,0) scale(1.06)}28%{transform:translate(-50%,0) scale(1)}85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px) scale(.96)}}
.celebrating .controls,.celebrating .tools,.celebrating .pager,.celebrating .step-link{opacity:.35;pointer-events:none;transition:opacity .3s}
.stat-saved{color:#0d9a5f!important;font-weight:700;font-size:11.5px}@media(prefers-color-scheme:dark){.stat-saved{color:var(--live)!important}}


/* ===== Time's up ===== */
.times-up .controls,.times-up .tools{display:none}
.timesup{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:4px 0 6px}
.timesup button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;border-radius:24px;background:var(--base);box-shadow:var(--raise);transition:transform .35s var(--spring),box-shadow .15s var(--ease);animation:tuin .5s var(--spring) both}
.timesup button:nth-child(2){animation-delay:.06s}.timesup button:nth-child(3){animation-delay:.12s}
@keyframes tuin{from{opacity:0;transform:translateY(12px) scale(.9)}}
.timesup [data-emoji]{width:46px;height:46px;border-radius:50%;box-shadow:var(--inset-sm);background:var(--tint)}
.timesup .emo{width:26px;height:26px}
.timesup strong{font-size:14px;font-weight:700}
.timesup button:active{transform:scale(.95);box-shadow:var(--inset)}
#tuDone strong{color:#0d9a5f}
@media(prefers-color-scheme:dark){#tuDone strong{color:var(--live)}}
/* the dial waits: lava full and calm, a soft amber halo breathing */
.times-up .dial::before{display:block;opacity:1;inset:-30px;filter:blur(14px);background:radial-gradient(closest-side,transparent 62%,rgba(255,176,59,.45) 80%,transparent 100%);animation:aura 3s ease-in-out infinite}
.times-up .time-help{color:var(--ink);font-weight:600}
.times-up .status{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.timesup button{animation:none}.times-up .dial::before{animation:none}}
.focus.times-up .dial::before{display:block!important;opacity:1!important;inset:-30px!important;filter:blur(14px)!important;background:radial-gradient(closest-side,transparent 62%,rgba(255,176,59,.5) 80%,transparent 100%)!important;animation:aura 3s ease-in-out infinite!important}


/* Duplicate of the header trophy pill */
.wins{display:none}

/* Rest / empty state */
.rest{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 8px 6px;animation:rise .4s var(--ease)}
.rest-orb{width:min(210px,58vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin:4px 0 26px;box-shadow:var(--raise-lg);position:relative}
.rest-orb::before{content:"";position:absolute;inset:14%;border-radius:50%;box-shadow:var(--inset);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--live) 18%,transparent),transparent 70%)}
.rest-orb::after{content:"";position:absolute;inset:-26px;border-radius:50%;z-index:-1;filter:blur(14px);background:radial-gradient(closest-side,transparent 62%,rgba(22,196,127,.35) 80%,transparent 100%);animation:aura 6s ease-in-out infinite}
.rest-orb .emo{position:relative;width:76px;height:76px;filter:drop-shadow(0 8px 10px rgba(40,30,110,.25));animation:floaty 4s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-7px) rotate(-3deg)}}
.rest h2{font-size:28px;font-weight:300;letter-spacing:-.025em;line-height:1.15}
.rest p{font-size:14px;color:var(--muted);margin:10px 0 18px;max-width:290px;text-wrap:pretty}
.rest-stats{display:flex;gap:12px;margin-bottom:22px}
.rest-stats:empty{display:none}
.rest-stats span{display:flex;flex-direction:column;align-items:center;min-width:104px;padding:12px 14px;border-radius:20px;box-shadow:var(--inset)}
.rest-stats strong{font-size:26px;font-weight:250;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rest-stats span:nth-child(2) strong{color:#0d9a5f}
@media(prefers-color-scheme:dark){.rest-stats span:nth-child(2) strong{color:var(--live)}}
.rest-stats small{font-size:12px;color:var(--muted)}
.rest .accent-btn{max-width:320px}
.rest .soft-btn{max-width:320px}
.rest .accent-btn .emo{width:22px;height:22px}
@media(prefers-reduced-motion:reduce){.rest-orb .emo,.rest-orb::after{animation:none}}
.rest.empty .rest-orb::before{background:radial-gradient(circle at 50% 60%,var(--tint),transparent 70%)}.rest.empty .rest-orb::after{background:radial-gradient(closest-side,transparent 62%,var(--glow) 80%,transparent 100%)}
/* Header logo = the app icon in miniature */
.logo{background:radial-gradient(circle at 30% 20%,#7a68ff,#3b2bb8 55%,#1f1670);box-shadow:var(--raise),inset 0 1px 0 rgba(255,255,255,.25)}
.logo .emo{filter:drop-shadow(0 2px 3px rgba(11,6,48,.5))}
.logo-tick{background-color:#22d389;box-shadow:0 0 0 2px #2a1e8c,0 0 8px rgba(46,240,160,.7)}
.wordmark b{margin-left:0}.wordmark{letter-spacing:-.015em}
/* Logo: back to the subtle line mark on a raised lavender disc */
.logo.line{background:var(--base);box-shadow:var(--raise)}
.logo.line svg{width:26px;height:26px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.logo.line .brain{stroke:var(--accent);stroke-width:1.6}
.logo.line .mid{stroke-width:1.4;opacity:.55}
.logo.line .tick{stroke:var(--live);stroke-width:2.3}
/* Timer text scales with the dial so it never touches the edge */
.time{font-size:calc(var(--size) * .2)!important}
.time-help{font-size:calc(var(--size) * .046);max-width:78%}
.viewing-done .time{font-size:calc(var(--size) * .085)!important}

/* Focus screen: no heading, so the dial and controls sit above the fold */
#focusView .hello{display:none}
#focusView{padding-top:4px}
/* Mission panel: name gets the full width; status is a small line under it */
.mission{grid-template-columns:auto 1fr;grid-template-rows:auto;row-gap:0;padding:10px 14px 10px 10px}
.mission-copy{display:flex;flex-direction:column;gap:2px}
.mission h2{font-size:19px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mission .status,.running .mission .status,.times-up .mission .status,.viewing-done .mission .status{grid-column:2;grid-row:2;justify-self:start;padding:0;margin-top:3px;background:none!important;box-shadow:none!important;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.mission .status i{width:7px;height:7px}
.mission .status .tick{width:15px;height:15px}
.mission .status .tick svg{width:9px;height:9px}
@media(max-width:380px){.mission .status{font-size:12px}.status i{width:7px;height:7px}}
.mission-index{font-size:11.5px}
@media (max-height:700px){.dial{--size:min(262px,72vw,calc(100dvh - 400px))}.step-link{min-height:36px}}
.time-help{max-width:86%}


/* Time is a button: tap to change length */
button.time{background:none;border:0;padding:2px 8px;border-radius:14px;cursor:pointer;color:inherit;font-family:inherit;line-height:1;transition:transform .35s var(--spring)}
button.time:active{transform:scale(.94)}
button.time:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* More breathing room inside the circle */
.time{font-size:calc(var(--size) * .175)!important;letter-spacing:-.02em}
.time-help{font-size:calc(var(--size) * .044);max-width:72%;margin-top:6px}
.viewing-done .time{font-size:calc(var(--size) * .08)!important}
.durations{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:6px}
.durations button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:78px;border-radius:22px;box-shadow:var(--raise);transition:transform .35s var(--spring),box-shadow .15s var(--ease)}
.durations strong{font-size:26px;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.durations small{font-size:12px;font-weight:600;color:var(--muted)}
.durations button:active{transform:scale(.95);box-shadow:var(--inset)}
.durations button[aria-checked=true]{box-shadow:var(--inset),0 0 0 2px var(--accent)}
.durations button[aria-checked=true] strong{color:var(--accent);font-weight:500}
/* First step = a plain prompt line, not a button */
.step-link{pointer-events:none;cursor:default}
.step-link>[data-icon]:last-child{display:none}
#tinyStart{display:none!important}
/* Ring from second one: a short lit cap is visible immediately */
.running .tube{opacity:1!important}
.running .tube circle{stroke-dasharray:max(calc(var(--p) * 100),.6) 100}
/* Pager arrows: tactile press */
.pager .mini-round{transition:transform .4s var(--spring),box-shadow .15s var(--ease),color .15s}
.pager .mini-round:active:not(:disabled){transform:scale(.88);box-shadow:var(--inset);color:var(--accent);transition:transform .08s var(--ease),box-shadow .08s var(--ease)}
.pager .mini-round:not(:disabled):hover{color:var(--accent)}
.dots i{transition:width .45s var(--spring),background .25s,box-shadow .25s}


/* ===== Lava v3: single SVG ===== */
.goo{display:none}
.lava{position:absolute;inset:0;width:100%;height:100%;display:block}
.lava .la{stop-color:var(--lava-a)}
.lava .lb2{stop-color:var(--lava-b)}
#lavaPool,#lavaBlobs{transition:y .6s var(--ease)}
.lb{transform-box:fill-box;transform-origin:center;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused}
.running .lb,.viewing-done .lb{animation-play-state:running}
.lb.roll{animation-name:lroll}.lb.rise{animation-name:lrise}.lb.bob{animation-name:lbob}
@keyframes lroll{0%{transform:translate(-6px,2px) scale(1.25,.8)}100%{transform:translate(6px,-2px) scale(.9,1.1)}}
@keyframes lrise{0%{transform:translate(0,3px) scale(.9,1.08)}40%{transform:translate(1px,-14px) scale(1.05,.94)}100%{transform:translate(-1px,-34px) scale(.8,1.12)}}
@keyframes lbob{0%{transform:translate(0,2px)}100%{transform:translate(0,-8px) scale(1.08,.92)}}
@media(prefers-reduced-motion:reduce){.lb{animation:none}}
#openSteps,.step-link{display:none!important}

/* v47: focus mode centres the card; nothing else competes */
.app.focusing .scroll{display:flex;flex-direction:column}
.app.focusing #focusView{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:64px}
.app.focusing #focusView .tiles,.app.focusing #focusView .wins{display:none}
/* v47: toast symbol + flick up to dismiss */
.toast{touch-action:none;transition:transform .22s var(--ease),opacity .22s var(--ease)}
.toast>.toast-emo{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--tint);box-shadow:var(--inset-sm)}
.toast-emo[hidden]{display:none}
.toast-emo .emo{width:24px;height:24px}
.toast::after{content:'';position:absolute;left:50%;bottom:5px;width:30px;height:4px;margin-left:-15px;border-radius:2px;background:var(--muted);opacity:.28}
/* v47: mission name is a raised, tappable surface (tap = edit) */
.mission{position:relative;box-shadow:var(--raise);cursor:pointer;transition:box-shadow .18s var(--ease),transform .35s var(--spring)}
.mission:active{box-shadow:var(--inset-sm);transform:scale(.985)}
.mission:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mission-edit{position:absolute;top:10px;right:12px;width:16px;height:16px;color:var(--muted);opacity:.55}
.mission-edit svg{width:16px;height:16px}
.slide-l .mission,.slide-r .mission{animation-name:popout}
@keyframes popout{0%{opacity:0;transform:scale(.94);box-shadow:var(--inset-sm)}60%{opacity:1;transform:scale(1.015)}100%{transform:none;box-shadow:var(--raise)}}
.mission{padding-right:34px}
/* v47: brain-wandered sheet drops from the top so the iPhone keyboard can't cover it */
#wanderDialog{top:0;bottom:auto;border-radius:0 0 32px 32px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:22px;box-shadow:0 14px 40px var(--lo)}
#wanderDialog[open]{animation:sheetdown .3s var(--ease)}
#wanderDialog .grip{display:none}
@keyframes sheetdown{from{transform:translateY(-100%)}}
.note-body{cursor:text}
.note-edit{flex:1;min-width:0;margin:0;font:inherit;font-size:15px;line-height:1.4;padding:10px 12px;border-radius:14px}
/* v47: effort sort + friendlier drag */
.sorts{display:flex;gap:10px;margin:0 0 12px}
.sorts button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:14px;font-size:13px;font-weight:650;color:var(--ink);background:var(--base);box-shadow:var(--raise-sm);transition:box-shadow .15s var(--ease),transform .35s var(--spring)}
.sorts button:active{box-shadow:var(--inset-sm);transform:scale(.96)}
.sorts .emo{width:18px;height:18px}
.handle{width:44px!important;min-height:52px}
.task-row.dragging{transition:none!important;z-index:5;opacity:.97}
.timesup [data-icon]{display:grid;place-items:center;width:30px;height:30px;color:var(--muted)}
.timesup [data-icon] svg{width:22px;height:22px;stroke-width:2.2}
/* v48: header right cluster, settings, star rating */
.top-right{display:flex;align-items:center;gap:10px}
.gear{box-shadow:var(--raise-sm);color:var(--muted)}
.gear:active{box-shadow:var(--inset-sm)}
.gear svg{width:20px;height:20px}
button.brand{padding:0 12px 0 0;background:none;font:inherit;cursor:pointer}
button.brand:active .logo{transform:scale(.94)}
.seg.range button[aria-checked=true]{background:var(--base);box-shadow:var(--raise-sm);color:var(--accent)}
.stars{display:flex;justify-content:center;gap:10px;margin:8px 0 18px}
.stars button{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--raise-sm);transition:transform .35s var(--spring),box-shadow .15s var(--ease)}
.stars button:active{transform:scale(.9);box-shadow:var(--inset-sm)}
.stars svg{width:30px;height:30px;fill:var(--base);stroke:var(--muted);stroke-width:1.2;stroke-linejoin:round;opacity:.55;transition:fill .25s var(--ease),opacity .25s,stroke .25s,filter .3s}
.stars button.on svg{fill:#ffc23d;stroke:#e9a113;opacity:1;filter:drop-shadow(0 0 8px rgba(255,190,50,.55))}
.stars button.on{box-shadow:var(--inset-sm)}
.stars button.pop svg{animation:starpop .55s var(--spring) both;animation-delay:calc(var(--i)*70ms)}
@keyframes starpop{0%{transform:scale(.4) rotate(-30deg);opacity:.4}60%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
.rate-msg{text-align:center;font-size:14.5px;font-weight:550;color:var(--ink);margin:0 0 16px;min-height:2.6em}
@media(prefers-reduced-motion:reduce){.stars button.pop svg{animation:none}}
@media(max-width:359px){.top{padding-left:12px;padding-right:12px}.top-right{gap:6px}.pill{padding:0 10px 0 8px;gap:5px}.brand{gap:7px}}
/* v48: progress trend, wins per day */
.trend{margin:6px 0 4px;padding:16px 14px 12px;border-radius:24px;box-shadow:var(--inset)}
.trend-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 4px 12px}
.trend-head strong{font-size:14px;font-weight:700}
.trend-head small{font-size:12px;color:var(--muted)}
.bars{display:grid;grid-template-columns:repeat(14,1fr);gap:2px;height:120px;align-items:end}
.bar{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;padding:0;background:none;border-radius:8px;cursor:pointer}
.bar i{display:block;width:min(14px,70%);height:calc(var(--h)*(100% - 22px));min-height:3px;border-radius:4px 4px 2px 2px;background:var(--accent);opacity:.45;transition:height .5s var(--spring),opacity .2s}
.bar.zero i{background:var(--muted);opacity:.25}
.bar.today i,.bar.picked i{opacity:1;box-shadow:0 4px 10px var(--glow)}
.bar small{font-size:10.5px;font-weight:600;color:var(--muted);line-height:1}
.bar.today small{color:var(--ink)}
.trend-note{margin:12px 4px 0;font-size:13.5px;font-weight:550;color:var(--ink);min-height:1.4em}
/* ===== v48: Today, Missions, Routines ===== */
/* sheets with text inputs drop from the top so the iPhone keyboard never covers them */
.sheet.drop{top:0;bottom:auto;border-radius:0 0 32px 32px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:22px;box-shadow:0 14px 40px var(--lo)}
.sheet.drop[open]{animation:sheetdown .3s var(--ease)}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:650;color:var(--ink);background:var(--base);box-shadow:var(--raise-sm);transition:box-shadow .15s var(--ease),transform .35s var(--spring),color .15s}
.chip .emo{width:17px;height:17px}
.chip:active{transform:scale(.95)}
.chip[aria-checked=true]{box-shadow:var(--inset-sm);color:var(--accent)}
.chips[hidden],.picker-label[hidden]{display:none}
.date-input{margin:-6px 0 18px}
.optional{font-weight:500;color:var(--muted);margin-left:4px}
#addForm .pair{margin-top:6px}
#addForm .pair .accent-btn{margin:0}
#todayView .section-head,#routinesView .section-head,#tasksView .section-head{margin-top:22px}
#openAdd{margin:4px 0 0}
/* Today */
.zen{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 18px 22px;margin:8px 0 6px;border-radius:30px;box-shadow:var(--inset)}
.zen-orb{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--raise);margin-bottom:14px}
.zen-orb .emo{width:56px;height:56px}
.zen h2{font-size:24px;font-weight:300;letter-spacing:-.03em;margin:0 0 6px}
.zen p{margin:0;color:var(--muted);font-size:14px;max-width:26ch}
.today-task{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 10px;margin:0 0 10px;border-radius:22px;box-shadow:var(--raise-sm)}
.today-emo{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center}
.today-emo .emo{width:30px;height:30px}
.today-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.today-copy strong{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-copy small{font-size:12px;color:var(--muted)}
#todayTiles{margin-top:22px}
/* routine cards */
.routine-card{padding:14px 14px 10px;margin:0 0 14px;border-radius:26px;box-shadow:var(--raise)}
.routine-card.compact.complete{padding-bottom:14px}
.routine-head{display:flex;align-items:center;gap:12px}
.routine-emo{width:46px;height:46px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;box-shadow:var(--inset-sm);background:var(--tint)}
.routine-emo .emo{width:28px;height:28px}
.routine-title{flex:1;min-width:0}
.routine-title h2{font-size:18px;font-weight:650;letter-spacing:-.02em;margin:0}
.routine-title small{font-size:12.5px;color:var(--muted);font-weight:550}
.routine-card.complete .routine-title small{color:var(--live);font-weight:700}
.routine-bar{display:block;height:6px;margin:12px 2px 4px;border-radius:3px;box-shadow:var(--inset-sm);overflow:hidden}
.routine-bar i{display:block;height:100%;width:calc(var(--p)*100%);border-radius:3px;background:linear-gradient(90deg,var(--accent-2),var(--live));transition:width .6s var(--spring)}
.r-list{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.r-item{display:flex;align-items:center;gap:4px}
.r-check{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 6px;border-radius:16px;text-align:left}
.r-check:disabled{opacity:1;cursor:default}
.r-box{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;box-shadow:var(--raise-sm);color:transparent;transition:box-shadow .2s var(--ease),background .25s,transform .35s var(--spring)}
.r-box svg{width:16px;height:16px;stroke-width:3}
.r-check:active .r-box{transform:scale(.88);box-shadow:var(--inset-sm)}
.r-item.done .r-box{box-shadow:var(--inset-sm),0 0 12px rgba(22,196,127,.35);background:var(--live);color:#fff}
@keyframes rtick{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
.r-copy{display:flex;flex-direction:column;min-width:0}
.r-name{font-size:15px;font-weight:600;transition:color .2s,opacity .2s}
.r-item.done .r-name{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent)}
.r-meta{font-size:11.5px;color:var(--muted)}
.r-item.later{opacity:.55}
.r-item.later .r-box{box-shadow:var(--inset-sm)}
.r-later-head{font-size:12px;font-weight:700;color:var(--muted);margin:10px 6px 2px;text-transform:uppercase;letter-spacing:.06em}
.r-add{display:flex;align-items:center;gap:8px;width:100%;min-height:46px;margin-top:6px;padding:0 10px;border-radius:16px;font-size:13.5px;font-weight:650;color:var(--accent)}
.r-add svg{width:18px;height:18px}
.r-add:active{box-shadow:var(--inset-sm)}
.chips.suggest{margin:10px 2px 4px;align-items:center}
.sug-label{font-size:12px;color:var(--muted);font-weight:600;margin-right:2px}
.days{display:flex;gap:6px;margin:-6px 0 18px}
.days[hidden]{display:none}
.days .day{flex:1;min-height:42px;border-radius:14px;font-size:13px;font-weight:700;color:var(--muted);box-shadow:var(--raise-sm);transition:box-shadow .15s,color .15s}
.days .day[aria-pressed=true]{box-shadow:var(--inset-sm);color:var(--accent)}
/* missions */
.missions{display:flex;flex-direction:column;gap:12px}
.mission-card{display:flex;align-items:center;gap:6px;padding:8px 8px 8px 6px;border-radius:24px;box-shadow:var(--raise)}
.mission-card.on{box-shadow:var(--raise),0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.mission-open{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:4px 6px;border-radius:18px;text-align:left}
.mission-emo{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;box-shadow:var(--inset-sm)}
.mission-emo .emo{width:24px;height:24px}
.mission-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mission-copy strong{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mission-copy small{font-size:12px;color:var(--muted)}
.mission-copy .routine-bar{margin:6px 0 0;height:5px}
.mission-new>svg{width:20px;height:20px;color:var(--accent);margin-left:auto;flex-shrink:0}
.pick-list{display:flex;flex-direction:column;gap:8px;margin:0 0 18px;max-height:42dvh;overflow:auto;padding:4px}
.pick-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px 6px 10px;border-radius:18px;text-align:left;box-shadow:var(--raise-sm);transition:box-shadow .15s}
.pick-row .emo{width:26px;height:26px}
.pick-copy{flex:1;min-width:0;display:flex;flex-direction:column}
.pick-copy span{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-copy small{font-size:11.5px;color:var(--muted)}
.pick-box{width:26px;height:26px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;box-shadow:var(--inset-sm);color:transparent}
.pick-box svg{width:14px;height:14px;stroke-width:3}
.pick-row[aria-pressed=true]{box-shadow:var(--inset-sm)}
.pick-row[aria-pressed=true] .pick-box{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 10px var(--glow)}
/* tags on task rows */
.task-tag{display:inline-block;align-self:flex-start;margin-top:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650;color:var(--accent);background:var(--tint)}
.edit-extra{margin-top:4px}
@media(prefers-reduced-motion:reduce){.r-item.done .r-box{animation:none}}
/* v48 fixes */
.r-box svg,.pick-box svg,.r-add svg,.mission-new>svg,.chip svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.tile-icon{display:grid;place-items:center}
.pill{white-space:nowrap}
.accent-plus{margin-left:10px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 6px 14px -4px var(--glow),inset 0 1px 0 rgba(255,255,255,.35)}
.accent-plus svg{stroke-width:2.4}
/* v49: simple mode + switch */
.simple .nav [data-tab=today],.simple .nav [data-tab=routines],.simple #missionStrip,.simple #missionsHead,.simple .edit-extra,.simple #toRoutine,.simple #addWhenLabel,.simple #addWhen,.simple #addDate,.simple #addMissionLabel,.simple #addMission,.simple .task-tag{display:none!important}
.setting-row{display:flex;align-items:center;gap:14px;margin:18px 0 20px;padding:14px 14px 14px 16px;border-radius:22px;box-shadow:var(--inset)}
.setting-row>span{flex:1;display:flex;flex-direction:column;gap:3px}
.setting-row strong{font-size:15px;font-weight:650}
.setting-row small{font-size:12.5px;color:var(--muted);line-height:1.35}
.switch{position:relative;flex-shrink:0;width:58px;height:34px;border-radius:999px;box-shadow:var(--inset-sm);transition:background .25s var(--ease)}
.switch i{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm);transition:transform .35s var(--spring)}
.switch[aria-checked=true]{background:linear-gradient(135deg,var(--accent-2),var(--accent))}
.switch[aria-checked=true] i{transform:translateX(24px)}
.pager .mini-round{flex-shrink:0}
dialog:focus{outline:none}
.mission-new-task{display:flex;gap:10px;align-items:center;margin:-6px 0 20px}.mission-new-task input{flex:1;min-width:0;margin:0}.mission-new-task .mini-round{flex-shrink:0;width:44px;height:44px}
.task-row.active .task-name::after{display:none}
/* v49: tick-off on task rows, Focus on routines */
.t-tick{flex-shrink:0;width:40px;height:44px;display:grid;place-items:center;border-radius:14px}
.t-tick:active .r-box{transform:scale(.88);box-shadow:var(--inset-sm)}
.t-tick[aria-pressed=true] .r-box{box-shadow:var(--inset-sm),0 0 12px rgba(22,196,127,.35);background:var(--live);color:#fff}
.task-row .t-tick{margin-left:-4px}
.today-task .t-tick{margin-right:-6px}
.r-focus{display:flex;align-items:center;gap:7px;height:38px;padding:0 13px 0 5px;border-radius:999px;flex-shrink:0;font-size:13px;font-weight:750;color:var(--accent);background:var(--base);box-shadow:var(--raise-sm);transition:transform .35s var(--spring),box-shadow .15s var(--ease)}
.r-focus .go-disc{width:28px;height:28px}
.r-focus:active{transform:scale(.95);box-shadow:var(--inset-sm)}
@media(max-width:400px){.task-row .t-tick{width:34px}.task-row .task-symbol{width:36px!important}.task-row .task-symbol .emo{width:26px!important;height:26px!important}.task-row .go-btn{padding:0 13px 0 5px;gap:6px}}
/* ===== v50: rearrange the bottom bar ===== */
.nav{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.nav.jiggle{touch-action:none}
.nav.jiggle .nav-button{animation:jig .26s ease-in-out infinite alternate}
.nav.jiggle .nav-button:nth-child(even){animation-delay:-.13s;animation-duration:.3s}
.nav.jiggle .nav-button.dragging{animation:none;z-index:2;box-shadow:var(--raise);background:var(--base);color:var(--accent)}
@keyframes jig{from{rotate:-2.4deg}to{rotate:2.4deg}}
.nav-done{position:absolute;right:20px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:7;height:40px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:750;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 8px 18px -6px var(--glow);animation:pop .25s var(--spring)}
@media(prefers-reduced-motion:reduce){.nav.jiggle .nav-button{animation:none;outline:2px dashed var(--accent);outline-offset:-4px}}
/* ===== v51: Clean look. Calm off-white, white cards, muted pastels, hairlines instead of puffy shadows ===== */
html.clean{--base:#f6f4f0;--card:#fff;--ink:#1d1b24;--muted:#625e6b;--accent:#4f46c8;--accent-2:#7a72e6;--on-accent:#fff;--btn:#e9e6fb;--on-btn:#3a31a6;--disc:#5b52d6;--on-disc:#fff;
  --hi:rgba(255,255,255,0);--lo:rgba(40,32,60,.1);--edge-hi:rgba(255,255,255,0);--edge-lo:rgba(40,32,60,.06);--glow:rgba(29,27,36,.18);--tint:#eeecf7;--track:rgba(29,27,36,.08);--ring:rgba(79,70,200,.4);--live:#2f9e6e;--live-glow:rgba(47,158,110,.3);
  --raise:0 1px 2px rgba(29,27,36,.05),0 10px 28px -14px rgba(29,27,36,.2);--raise-sm:0 1px 2px rgba(29,27,36,.05),0 6px 16px -10px rgba(29,27,36,.2);--raise-lg:0 2px 4px rgba(29,27,36,.04),0 18px 40px -18px rgba(29,27,36,.22);
  --inset:inset 0 0 0 1px rgba(29,27,36,.08);--inset-sm:inset 0 0 0 1px rgba(29,27,36,.08);--lava-a:#d9d3f7;--lava-b:#a79eed;
  --t-peach:#f7e5da;--t-sage:#dcebe1;--t-lilac:#e7e3f6;--t-sky:#dfeaf4;--t-rose:#f6e2e7;--b-peach:#d4825c;--b-sage:#3f9a6c;--b-lilac:#6b5fd3;--b-sky:#4a87c2;--b-rose:#c45f7d}
@media(prefers-color-scheme:dark){html.clean{--base:#131217;--card:#1c1a22;--ink:#f1eff6;--muted:#aaa5b8;--accent:#aaa1f7;--accent-2:#c6bffb;--on-accent:#15131c;--btn:#2a2640;--on-btn:#d4ceff;--disc:#a99ff7;--on-disc:#15131c;
  --lo:rgba(0,0,0,.45);--glow:rgba(0,0,0,.4);--tint:#25222f;--track:rgba(255,255,255,.1);--ring:rgba(170,161,247,.5);--live:#4cc792;
  --raise:0 0 0 1px rgba(255,255,255,.05),0 12px 30px -16px rgba(0,0,0,.7);--raise-sm:0 0 0 1px rgba(255,255,255,.05),0 6px 16px -10px rgba(0,0,0,.6);--raise-lg:0 0 0 1px rgba(255,255,255,.05),0 18px 40px -18px rgba(0,0,0,.7);
  --inset:inset 0 0 0 1px rgba(255,255,255,.09);--inset-sm:inset 0 0 0 1px rgba(255,255,255,.09);--lava-a:#5a4fc4;--lava-b:#3b3291;
  --t-peach:#33261f;--t-sage:#1c2d25;--t-lilac:#26223a;--t-sky:#1b2733;--t-rose:#33212a;--b-peach:#f0a07a;--b-sage:#5fcf98;--b-lilac:#aaa1f7;--b-sky:#7fb6e8;--b-rose:#ee8faf}}
/* surfaces: white cards on the calm base */
.clean :is(.tile,.wide-tile,.today-task,.mission,.pill,.gear,.nav,.chip,.mini-round,.round,.sorts button,.icon-button.close,.pick-row,.stars button,.durations button,.choice button,.timesup button,.soft-btn,.days .day,.emoji-opt,.toast,.wins,.rest,.note-item,.card,.task-row.picked,.r-focus,.go-btn,.stepper-well,.trend,.zen-orb,.mission-emo,.routine-emo,.tile-icon,.today-emo){background:var(--card)}
.clean :is(input,textarea,select){background:var(--card);box-shadow:var(--inset)}
.clean .sheet{background:var(--base)}
.clean .nav{box-shadow:var(--raise-lg)}
/* selected states read by fill, not by being carved in */
.clean .nav-button.selected{box-shadow:none;background:var(--tint);color:var(--accent)}
.clean .chip[aria-checked=true],.clean .days .day[aria-pressed=true]{background:var(--btn);color:var(--on-btn);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--on-btn) 35%,transparent)}
.clean .seg.range{box-shadow:none;background:var(--track)}
.clean .seg.range button[aria-selected=true],.clean .seg.range button[aria-checked=true]{background:var(--card);color:var(--ink);box-shadow:var(--raise-sm)}
.clean .task-row.picked{box-shadow:var(--raise);animation:none}
.clean .pick-row[aria-pressed=true]{background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--accent)}
.clean .emoji-opt[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--disc)}
/* one confident primary: a soft ink pill */
.clean :is(.play,.accent-btn,.accent-plus,.nav-done,.go-btn,.r-focus,.switch[aria-checked=true]){background:var(--btn);color:var(--on-btn);box-shadow:0 1px 2px rgba(58,49,166,.08),0 8px 20px -12px rgba(58,49,166,.35)}
.clean :is(.go-btn,.r-focus) .go-disc{background:var(--disc);color:var(--on-disc);box-shadow:none}
.clean .play::before{display:none}
.clean .go-btn{padding:0 16px 0 6px}
/* pastel blocks for routines and missions, flat and calm */
.clean .routine-card,.clean .mission-card{box-shadow:none;border-radius:26px}
.clean .routine-card[data-tint=peach]{background:var(--t-peach);--bar:var(--b-peach)}
.clean .routine-card[data-tint=lilac]{background:var(--t-lilac);--bar:var(--b-lilac)}
.clean .routine-card[data-tint=sky]{background:var(--t-sky);--bar:var(--b-sky)}
.clean .routine-card[data-tint=rose]{background:var(--t-rose);--bar:var(--b-rose)}
.clean .routine-card[data-tint=mint],.clean .mission-card{background:var(--t-sage);--bar:var(--b-sage)}
.clean .routine-card .routine-emo,.clean .mission-card .mission-emo{background:rgba(255,255,255,.7);box-shadow:none}
.clean .routine-card .r-box,.clean .t-tick .r-box{background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1.5px rgba(29,27,36,.18)}
.clean .r-item.done .r-box,.clean .t-tick[aria-pressed=true] .r-box{background:var(--live);box-shadow:none}
.clean .routine-bar{box-shadow:none;background:rgba(29,27,36,.07)}
.clean .routine-bar i{background:var(--bar,var(--btn))}
.clean .r-add{color:var(--ink)}
.clean .task-tag{background:var(--tint);color:var(--ink)}
@media(prefers-color-scheme:dark){
  .clean .routine-card .routine-emo,.clean .mission-card .mission-emo{background:rgba(255,255,255,.07)}
  .clean .routine-card .r-box,.clean .t-tick .r-box{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
  .clean .routine-bar{background:rgba(255,255,255,.08)}}
/* the focus dial goes quiet: hairline rings, soft lilac lava */
.clean .dial-well{box-shadow:var(--inset)}
.clean .tube-shine,.clean .tube-shade{opacity:.35}
.clean .tile,.clean .wins{box-shadow:var(--raise-sm)}
.clean .size-badge{box-shadow:none;background:var(--tint)}
/* v51: a faint tick in every empty circle says "tap to tick" */
.r-item:not(.done) .r-box,.t-tick[aria-pressed=false] .r-box{color:color-mix(in srgb,var(--muted) 38%,transparent)}
.r-item.later .r-box{color:transparent}
/* v51: motion. Only the thing you touched animates; screens rise in softly */
@keyframes draw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes popin{0%{transform:scale(.55)}55%{transform:scale(1.18)}100%{transform:none}}
.just .r-box{animation:popin .45s var(--spring)}
.just .r-box svg path{stroke-dasharray:24;animation:draw .38s .08s var(--ease) both}
@keyframes rise2{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view.entering :is(.hello,.routine-card,.today-task,.mission-card,.task-row,.tile,.wide-tile,.section-head,.zen,.note-item,.card,.focus,.missions>*,#openAdd,.sorts){animation:rise2 .5s var(--ease) both;animation-delay:calc(var(--n,0) * 45ms)}
.clean button:not(:disabled):active{transition-duration:.08s}
@media(prefers-reduced-motion:reduce){.just .r-box,.just .r-box svg path,.view.entering *{animation:none!important}}
.mission-exit{display:flex;align-items:center;gap:8px;margin:0 auto 12px;min-height:36px;padding:0 6px 0 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink);background:var(--tint);box-shadow:var(--raise-sm);transition:transform .35s var(--spring)}
.mission-exit[hidden]{display:none}
.mission-exit:active{transform:scale(.96)}
.mission-exit .exit-x{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:650;color:var(--muted);background:var(--base)}
.clean .stepper-well input{background:none;box-shadow:none}
.clean .play{box-shadow:0 0 0 6px color-mix(in srgb,var(--btn) 45%,transparent),0 12px 26px -12px rgba(58,49,166,.4)}
.clean .switch[aria-checked=true] i{background:var(--disc)}
.clean .controls .play{background:#2b2833;color:#f4f2fb;box-shadow:0 0 0 7px color-mix(in srgb,var(--btn) 70%,transparent),0 14px 28px -14px rgba(29,27,36,.55)}
@media(prefers-color-scheme:dark){.clean .controls .play{background:#e9e6fb;color:#2b2833;box-shadow:0 0 0 7px rgba(170,161,247,.16),0 14px 28px -14px rgba(0,0,0,.7)}}
/* v52: Start my day */
.start-day{display:flex;align-items:center;gap:12px;width:100%;padding:10px 18px 10px 10px;margin:2px 0 18px;border-radius:24px;text-align:left;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:0 12px 26px -12px var(--glow);transition:transform .35s var(--spring)}
.start-day:active{transform:scale(.97)}
.start-day .go-disc{width:46px;height:46px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22);color:inherit;box-shadow:none}
.start-day .go-disc svg{width:18px;height:18px;fill:currentColor;stroke:currentColor}
.sd-copy{display:flex;flex-direction:column;gap:2px}
.sd-copy strong{font-size:16.5px;font-weight:750;letter-spacing:-.01em}
.sd-copy small{font-size:12.5px;opacity:.85;font-weight:550}
.clean .start-day{background:#2b2833;color:#f4f2fb;box-shadow:0 0 0 6px color-mix(in srgb,var(--btn) 70%,transparent),0 14px 28px -14px rgba(29,27,36,.5);margin-top:8px}
.clean .start-day .go-disc{background:rgba(255,255,255,.12)}
@media(prefers-color-scheme:dark){.clean .start-day{background:#e9e6fb;color:#2b2833;box-shadow:0 0 0 6px rgba(170,161,247,.16)}.clean .start-day .go-disc{background:rgba(43,40,51,.08)}}
.clean .start-day{background:var(--card);color:var(--ink);box-shadow:var(--raise)}
.clean .start-day .go-disc{background:#2b2833;color:#f4f2fb;box-shadow:0 0 0 5px color-mix(in srgb,var(--btn) 75%,transparent)}
.clean .start-day small{color:var(--muted);opacity:1}
@media(prefers-color-scheme:dark){.clean .start-day{background:var(--card);color:var(--ink);box-shadow:var(--raise)}.clean .start-day .go-disc{background:#e9e6fb;color:#2b2833;box-shadow:0 0 0 5px rgba(170,161,247,.16)}}
.task-copy{overflow:hidden}
.task-tag{display:block;width:max-content;max-width:100%;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v55: Start my day as a raised neo card with the glowing play disc (Classic) */
.start-day{background:var(--base);color:var(--ink);box-shadow:var(--raise)}
.start-day .go-disc{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--on-accent);box-shadow:0 8px 18px var(--glow),-3px -3px 8px var(--hi)}
.start-day .sd-copy small{color:var(--muted);opacity:1}
.mission-block .routine-head .icon-button{margin-left:-4px}
/* v56: press-and-hold menu on Today rows */
.r-item,.today-task{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .25s var(--spring),box-shadow .2s var(--ease)}
.r-item.held,.today-task.held{z-index:4;transform:scale(1.03);border-radius:16px;background:var(--card,var(--base));box-shadow:var(--raise-lg)}
.r-item.dragging-row,.today-task.dragging-row{z-index:5;transition:none;box-shadow:var(--raise-lg);background:var(--card,var(--base));border-radius:16px}
.ctx-menu{position:fixed;z-index:40;min-width:196px;padding:6px;border-radius:18px;background:var(--card,var(--base));box-shadow:var(--raise-lg),0 0 0 1px rgba(29,27,36,.05);transform-origin:top left;animation:ctxin .22s var(--spring)}
.ctx-menu.up{transform-origin:bottom left}
@keyframes ctxin{from{opacity:0;transform:scale(.86)}}
.ctx-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 14px;border-radius:12px;font-size:14.5px;font-weight:600;color:var(--ink);text-align:left}
.ctx-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.ctx-item:active,.ctx-item:focus-visible{background:var(--tint);outline:none}
.ctx-item.danger,.ctx-item.danger svg{color:var(--danger)}
.ctx-item+.ctx-item{border-top:1px solid color-mix(in srgb,var(--muted) 14%,transparent)}
@media(prefers-reduced-motion:reduce){.ctx-menu{animation:none}}
/* v56: Clean aurora. The soft purple halos become a slow, blurred northern-lights glow */
@keyframes aurora{to{transform:rotate(1turn)}}
.clean .controls .play,.clean .start-day .go-disc,.clean .accent-plus{position:relative;isolation:isolate}
.clean .controls .play::before,.clean .start-day .go-disc::before,.clean .accent-plus::before{content:'';display:block;position:absolute;inset:-9px;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,#b9b0ff,#8fdcea,#f3b2dc,#bdeed6,#c7b8ff,#b9b0ff);filter:blur(9px);opacity:.75;animation:aurora 9s linear infinite}
.clean .start-day .go-disc::before{inset:-7px;filter:blur(7px)}
.clean .accent-plus::before{inset:-6px;filter:blur(7px);opacity:.6}
.clean .controls .play,.clean .start-day .go-disc{box-shadow:0 14px 28px -14px rgba(29,27,36,.45)!important}
.clean .running .play::before{animation-duration:5s;opacity:.9}
@media(prefers-color-scheme:dark){.clean .controls .play::before,.clean .start-day .go-disc::before,.clean .accent-plus::before{opacity:.5;background:conic-gradient(from 0deg,#7d70f0,#3fb6c9,#d26fb0,#4fbf8f,#8e7bf2,#7d70f0)}}
@media(prefers-reduced-motion:reduce){.clean .controls .play::before,.clean .start-day .go-disc::before,.clean .accent-plus::before{animation:none}}
#openAdd [data-icon] svg{width:20px;height:20px;stroke-width:2.2}
.tile-icon[data-icon] svg{width:24px;height:24px;stroke-width:2}
.missions .mission-new{margin-top:-4px}
.ctx-menu .ctx-item{background:none;box-shadow:none;border-radius:12px}.ctx-menu .ctx-item:active{background:var(--tint)}
/* v56b: aurora only round the edge (a hole in the middle keeps the button itself clean) */
.clean .controls .play::before,.clean .start-day .go-disc::before,.clean .accent-plus::before{-webkit-mask:radial-gradient(closest-side,transparent 74%,#000 86%);mask:radial-gradient(closest-side,transparent 74%,#000 86%)}
/* v56b: Clean bottom bar. The selected tab is a slowly wobbling lavender lava blob; tapping splashes */
.clean .nav-button{position:relative;isolation:isolate}
.clean .nav-button.selected{background:none}
.clean .nav-button.selected::before{content:'';position:absolute;inset:3px 6px;z-index:-1;background:linear-gradient(140deg,#ece8fd,#ddd7fb 55%,#e6e1fd);border-radius:46% 54% 52% 48%/55% 45% 55% 45%;animation:lavablob 6s ease-in-out infinite;box-shadow:0 4px 14px -6px rgba(91,82,214,.35)}
@keyframes lavablob{0%,100%{border-radius:46% 54% 52% 48%/55% 45% 55% 45%;transform:scale(1)}25%{border-radius:58% 42% 45% 55%/45% 58% 42% 55%;transform:scale(1.03,.98)}50%{border-radius:42% 58% 60% 40%/52% 40% 60% 48%;transform:scale(.98,1.03)}75%{border-radius:55% 45% 40% 60%/42% 55% 45% 58%;transform:scale(1.02)}}
.clean .nav-button::after{content:'';position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;z-index:-2;border-radius:50%;background:radial-gradient(circle,rgba(156,145,240,.45),rgba(156,145,240,0) 70%);opacity:0;transform:scale(.2);pointer-events:none}
.clean .nav-button.splash::after{animation:splash .6s var(--ease)}
@keyframes splash{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1.7)}}
@media(prefers-color-scheme:dark){.clean .nav-button.selected::before{background:linear-gradient(140deg,#2c2843,#35305a 55%,#2a2640);box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}.clean .nav-button::after{background:radial-gradient(circle,rgba(170,161,247,.4),rgba(170,161,247,0) 70%)}}
@media(prefers-reduced-motion:reduce){.clean .nav-button.selected::before,.clean .nav-button.splash::after{animation:none}}
.missions .mission-new>svg{margin-left:0}
/* v57: no double-tap zoom (pinch-zoom still works); inputs stay 16px so iPhone never zooms into a field */
html,body{touch-action:manipulation}
.note-edit,.stepper-well input,#missionNewTask,#itemTime,#itemMins,.date-input{font-size:16px}
/* v57: calm Tasks list */
.sheet.drop .grip{display:none}
#tasksView .hello{margin-bottom:14px}
#taskCount{color:var(--muted);letter-spacing:.08em}
.section-head .meta{display:flex;align-items:center;gap:4px}
.sort-link{margin-left:8px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--accent);background:var(--tint)}
.sort-link:active{transform:scale(.95)}
.mission-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 10px;margin:0 -2px}
.mission-chips::-webkit-scrollbar{display:none}
.mchip{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 12px;border-radius:999px;background:var(--card,var(--base));box-shadow:var(--raise-sm);font-size:14px;font-weight:650;color:var(--ink);transition:transform .35s var(--spring)}
.mchip:active{transform:scale(.96)}
.mchip .emo{width:20px;height:20px}
.mc-n{min-width:26px;height:26px;padding:0 8px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:750;background:var(--tint);color:var(--accent)}
.mchip.on{box-shadow:var(--raise-sm),inset 0 0 0 1.5px var(--accent)}
.mchip.add{padding:0 12px;gap:6px;color:var(--accent);background:transparent;box-shadow:none}
.mchip.add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.clean .mchip:not(.add){background:var(--t-sage);box-shadow:none}
.clean .mc-n{background:rgba(255,255,255,.7);color:var(--ink)}
@media(prefers-color-scheme:dark){.clean .mc-n{background:rgba(255,255,255,.08);color:var(--ink)}}
/* rows: same height, one line name, one quiet meta line */
#taskList{gap:2px}
.task-row{min-height:64px;gap:2px;padding:4px 6px 4px 2px}
.task-row .task-select{gap:11px;min-height:56px}
.task-row .task-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15.5px;font-weight:600;line-height:1.3;-webkit-line-clamp:unset}
.task-row .task-min{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
.task-row .size-emo{width:14px!important;height:14px!important;flex-shrink:0;filter:none}
.task-row .task-symbol{width:38px;height:38px}
.task-row .task-symbol .emo{width:28px;height:28px}
.task-row.picked .go-btn{margin-left:4px}
.task-row.done .task-name{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 55%,transparent)}
.task-row.held,.task-row.dragging-row{z-index:4;background:var(--card,var(--base));box-shadow:var(--raise-lg);border-radius:20px}
.task-row.held{transform:scale(1.02)}
.task-row{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative}
.sort-link.held{transform:none}
.chips.off,.picker-label.off{display:none}
.simple #addRepeatLabel,.simple #addRepeat,.simple #addDays{display:none!important}
.today-seg{margin:0 0 16px}.today-list{padding-top:8px}.clean .today-list{background:var(--card);box-shadow:var(--raise-sm)}
/* v58: thought cards. Text full width, actions in one row bottom-right */
.note-item{flex-wrap:wrap}
.note-item .note-body{flex:1 1 0;min-width:0}
.note-actions{flex-direction:row;flex-basis:100%;justify-content:flex-end;align-items:center;gap:2px;margin:-4px 0 -6px}
.note-actions .icon-button{width:40px;height:40px}
.note-actions .note-pill{order:-1;margin-right:auto;margin-left:62px}
.note-pill{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px 0 9px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--accent);background:var(--tint)}
.note-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.note-pill:active{transform:scale(.95)}
.note-linked{display:inline-block;margin-top:6px}
/* nav: the thoughts count is a small badge, so the label never wraps */
.nav-button{position:relative}
.nav-count{position:absolute;top:5px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 5px;margin:0;border-radius:999px;display:grid;place-items:center;font-size:10px;font-weight:800;line-height:1;color:var(--on-accent);background:var(--accent)}
.nav-count:empty{display:none}
/* v59: the arc runs on its own; no thin track line under it */
.dial-arc .track{display:none}
/* mission chips: active = pressed in (neo), not a purple outline */
.mchip.on{box-shadow:var(--inset-sm);color:var(--accent)}
.mchip.on .mc-n{background:var(--base);box-shadow:var(--raise-sm)}
.clean .mchip.on{box-shadow:inset 0 0 0 1.5px var(--b-sage);color:var(--ink)}
.clean .mchip.on .mc-n{box-shadow:none}
/* Cards / List: a small pill on the right */
.today-seg{width:max-content;margin:-4px 0 12px auto;padding:3px;border-radius:14px}
.today-seg button{flex:0 0 auto;min-height:30px;padding:0 14px;border-radius:11px;font-size:12px}
.dial-well{box-shadow:none!important;background:none!important}
.seg.range.today-seg{display:flex;width:max-content;margin:-4px 0 12px auto;padding:3px;border-radius:14px}
.seg.range.today-seg button{flex:0 0 auto;min-height:30px;padding:0 14px;border-radius:11px;font-size:12px}
/* v60: backup */
.file-btn{display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
#settingsDialog .pair .soft-btn,#settingsDialog .pair .accent-btn{margin:0}
#settingsDialog .pair svg{width:16px;height:16px}
.today-head{align-items:flex-end}
.seg.range.today-seg{margin:0 0 6px}
.start-day{margin-bottom:6px}#todayView .start-day+.section-head,#todayView .start-day+.zen{margin-top:16px}
/* v62 */
.r-emo{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center}
.r-emo .emo{width:24px;height:24px}
.r-check{gap:11px}
.task-row{padding-left:8px}
.task-row .t-tick{margin-left:0}
.task-row.picked{padding-left:10px}
#missionsHead[hidden]{display:none}
.mission-chips.none{padding:6px 0 0;margin:2px 0 4px}
.mission-chips.none .mchip.add{padding-left:4px}
.today-list .r-check{gap:8px;padding-right:4px}.today-list .r-copy{flex:1}.today-list .r-check .r-box{margin-left:auto}.today-list .r-emo{width:28px}
/* v65: list rows. Emoji + text, then a small play and a separate tick */
.list-row{align-items:center;gap:8px;min-height:56px;padding:2px 2px 2px 4px}
.list-row .r-copy{flex:1;min-width:0}
.list-row .r-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-play{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--tint);transition:transform .3s var(--spring)}
.row-play svg{width:13px;height:13px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;margin-left:2px}
.row-play:active{transform:scale(.88)}
.list-tick{flex:0 0 auto;min-height:44px;width:40px;padding:0;justify-content:center}
.today-list .r-check.list-tick .r-box{margin:0}
.task-row .row-play{width:40px;height:40px;margin:0 4px}
.task-row .row-play svg{width:15px;height:15px}
/* v67: symmetric focus row, neo play buttons */
.pager .pager-side{color:var(--accent)}
.pager .pager-side svg{width:18px;height:18px;stroke-width:2}
.pager .pager-side[data-x],.pager .accent-plus{margin:0}
.row-play{background:var(--base);box-shadow:var(--raise-sm);color:var(--accent)}
.row-play:active{box-shadow:var(--inset-sm)}
.row-play svg{margin:0;transform:translateX(1px)}
.clean .row-play{background:var(--tint);box-shadow:none}
.dots{flex-wrap:nowrap;overflow:hidden;gap:5px;padding:8px 10px}