/* 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) and (hover:hover) and (pointer:fine){
  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 .tube-body{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 .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)}}



/* 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}
/* Auto mode: the arrows stay while a task runs, so you can step back to the one it just ticked off. */
.app.focusing.auto-on .pager{display:flex}
.app.focusing.auto-on .pager .pager-side{visibility:hidden}
.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,.mix{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:0}
.add-pair{display:flex;gap:12px;margin:4px 0 0}.add-pair #openAdd{flex:1.4;width:auto}.add-pair .soft-btn{flex:1;min-height:54px;border-radius:18px;color:var(--muted);font-weight:600}.add-pair .soft-btn .emo{width:22px;height:22px;opacity:.85}
.simple .add-pair .soft-btn{display:none}
/* 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,.mix,.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>*,.add-pair,.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{display:none}
.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}
.app.focusing .wander{margin-top:46px}
/* v68: Codex QA fixes */
@media(max-width:359px){.hd-word{display:none}.top-right{gap:5px}.pill{padding:0 9px 0 7px}}
.time-help{font-size:max(11px,calc(var(--size) * .044))!important}
/* 44px hit areas without making the visuals bigger */
.row-play,.list-tick,.t-tick,.chip,.seg.range.today-seg button{position:relative}
.row-play::after{content:'';position:absolute;inset:-5px}
.task-row .row-play::after{inset:-2px}
.list-tick::after{content:'';position:absolute;inset:0 -2px}
.chip::after{content:'';position:absolute;inset:-3px 0}
.seg.range.today-seg button::after{content:'';position:absolute;inset:-7px 0}
@media(max-width:400px){.task-row .t-tick::after{content:'';position:absolute;inset:0 -5px}}
/* v70: tick celebration */
.tick-fx{position:fixed;z-index:60;width:0;height:0;pointer-events:none}
.fx-goo{position:absolute;left:-60px;top:-60px;width:120px;height:120px;filter:url(#goo)}
.fx-goo i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:linear-gradient(135deg,var(--g1,#a99ff7),var(--g3,#6a58f0));animation:lavaout .62s cubic-bezier(.2,.8,.2,1) both}
.fx-goo .fx-core{width:30px;height:30px;margin:-15px 0 0 -15px;animation:lavacore .62s cubic-bezier(.2,.8,.2,1) both}
@keyframes lavaout{0%{transform:translate(0,0) scale(.4);opacity:1}55%{transform:translate(var(--dx),var(--dy)) scale(var(--s));opacity:1}100%{transform:translate(calc(var(--dx)*1.15),calc(var(--dy)*1.15)) scale(0);opacity:0}}
@keyframes lavacore{0%{transform:scale(.5);opacity:1}40%{transform:scale(1.35)}100%{transform:scale(0);opacity:0}}
.fx-bit{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--c);animation:fxfly .78s cubic-bezier(.15,.75,.3,1) var(--d) both}
.fx-bit.strip{width:4px;height:10px;border-radius:2px}
@keyframes fxfly{0%{transform:translate(0,0) rotate(0) scale(.6);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 26px)) rotate(var(--rot)) scale(.9);opacity:0}}
.today-task.done strong{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 55%,transparent)}
.today-task.done .today-emo,.list-row.done .r-emo{opacity:.55}
.list-row.done .r-copy{opacity:.85}
.moved-note{margin:4px 8px 16px;font-size:13px;line-height:1.45;color:var(--muted);text-align:center}
/* ===== v72: feel layer ===== */
/* music + brain-wandered row */
.focus-extras{display:flex;gap:10px;align-items:stretch;margin-top:14px}
.app.focusing .focus-extras{margin-top:46px}
.focus-extras .wander{flex:1;margin:0!important}
.focus-extras .wander[hidden]{display:none}
.sound-pill{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 16px 0 12px;margin:0 auto;border-radius:18px;font-size:13.5px;font-weight:650;color:var(--muted);background:var(--base);box-shadow:var(--raise-sm);transition:transform .35s var(--spring),box-shadow .15s var(--ease),color .15s}
.focus-extras .wander:not([hidden])~.sound-pill,.focus-extras:has(.wander:not([hidden])) .sound-pill{margin:0}
.sound-pill .emo{width:20px;height:20px}
.sound-pill.on{color:var(--accent)}
.sound-pill:active{transform:scale(.95);box-shadow:var(--inset-sm)}
.clean .sound-pill{background:var(--card)}
/* intro */
.onb{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:calc(40px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom));background:var(--base);animation:introin .4s var(--ease)}
.onb.out{animation:introout .32s var(--ease) forwards}
@keyframes introin{from{opacity:0}}@keyframes introout{to{opacity:0;transform:scale(1.03)}}
.onb-skip{position:absolute;top:calc(18px + env(safe-area-inset-top));right:20px;min-height:44px;padding:0 14px;font-size:14px;font-weight:650;color:var(--muted)}
.onb-card{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:320px}
.onb-card.in-l{animation:cardinl .45s var(--ease)}.onb-card.in-r{animation:cardinr .45s var(--ease)}
@keyframes cardinl{from{opacity:0;transform:translateX(40px)}}@keyframes cardinr{from{opacity:0;transform:translateX(-40px)}}
.onb-orb{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;margin-bottom:30px;box-shadow:var(--raise-lg);animation:orbfloat 4s ease-in-out infinite}
.onb-orb .emo{width:84px;height:84px}
@keyframes orbfloat{50%{transform:translateY(-8px)}}
.onb-card h2{font-size:32px;font-weight:300;letter-spacing:-.035em;margin:0 0 12px}
.onb-card h2 b{font-weight:700}
.onb-card p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
.onb-dots{display:flex;gap:8px}.onb-dots i{width:8px;height:8px;border-radius:4px;background:var(--track);transition:width .3s var(--ease),background .3s}.onb-dots i.on{width:26px;background:var(--accent)}
.onb-next{width:min(320px,100%);margin:0}
/* swipe = not today */
.swiping{position:relative;z-index:3;touch-action:none}
.swipe-hint{position:absolute;top:50%;left:100%;margin-left:14px;transform:translateY(-50%);display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px;color:var(--muted);transition:color .15s,transform .2s var(--spring)}
.swipe-hint .emo{width:22px;height:22px}
.swipe-hint.ready{color:var(--accent);transform:translateY(-50%) scale(1.08)}
.task-row,.today-task,.r-item{touch-action:pan-y}
.ghost-row{overflow:hidden}
/* sheets slide away */
.sheet.closing{animation:sheetaway .19s ease-in forwards}
.sheet.drop.closing{animation:sheetup .19s ease-in forwards}
.sheet.closing::backdrop{opacity:0;transition:opacity .19s}
@keyframes sheetaway{to{transform:translateY(100%);opacity:.6}}
@keyframes sheetup{to{transform:translateY(-100%);opacity:.6}}
/* progress chart + bars grow in */
#recapDialog[open] .bar i{animation:bargrow .7s var(--spring) both;animation-delay:calc(var(--k,0) * 30ms)}
@keyframes bargrow{from{height:0}}
.routine-bar i{animation:barwidth .7s var(--ease) both}
@keyframes barwidth{from{width:0}}
/* finale */
.lava-wash{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(120% 70% at 50% 110%,#7a68ff 0%,#a99ff7 45%,rgba(198,191,251,.0) 75%);animation:wash 2.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes wash{0%{transform:translateY(100%);opacity:.95}45%{transform:translateY(0);opacity:.85}100%{transform:translateY(-30%);opacity:0}}
.rest.finale .rest-orb{animation:bloom 1.4s cubic-bezier(.34,1.56,.64,1) .3s both}
@keyframes bloom{0%{transform:scale(.3) rotate(-40deg);opacity:0}70%{transform:scale(1.12) rotate(6deg);opacity:1}100%{transform:none}}
.rest.finale h2,.rest.finale p,.rest.finale .rest-stats,.rest.finale button{animation:rise2 .6s var(--ease) both}
.rest.finale p{animation-delay:.55s}.rest.finale .rest-stats{animation-delay:.7s}.rest.finale button{animation-delay:.85s}.rest.finale h2{animation-delay:.45s}
.confetti-rain{position:fixed;inset:0;z-index:75;pointer-events:none;overflow:hidden}
.confetti-rain i{position:absolute;top:-20px;width:9px;height:9px;border-radius:50%;background:var(--c);animation:fall 2.2s cubic-bezier(.3,.6,.4,1) var(--d) forwards}
.confetti-rain i.strip{width:5px;height:13px;border-radius:2px}
@keyframes fall{to{transform:translate(var(--x),110vh) rotate(var(--r))}}
/* evening wrap-up */
.wrapup{padding:18px 18px 14px;margin:0 0 18px;border-radius:26px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--base)),var(--base));box-shadow:var(--raise)}
.wrapup h2{font-size:22px;font-weight:300;letter-spacing:-.03em;margin:4px 0 12px}.wrapup h2 b{font-weight:700}
.wrap-stats{display:flex;gap:10px;margin-bottom:12px}.wrap-stats span{flex:1;display:flex;flex-direction:column;padding:10px 12px;border-radius:16px;box-shadow:var(--inset-sm)}
.wrap-stats strong{font-size:20px;font-weight:700}.wrap-stats small{font-size:12px;color:var(--muted)}
.wrap-row{display:flex;align-items:center;gap:10px;padding:5px 2px;font-size:14px}.wrap-row .emo{width:20px;height:20px}
.wrap-more{display:block;min-height:40px;margin:2px 0 -6px;padding:0 2px;font:inherit;font-size:13.5px;font-weight:650;color:var(--accent);background:none;border:0;cursor:pointer}
.clean .wrapup{background:var(--t-lilac);box-shadow:none}
@media(prefers-reduced-motion:reduce){.onb,.onb-card,.onb-orb,.sheet.closing,.rest.finale *{animation:none!important}}
.onb:focus{outline:none}
/* Read-only cover when another tab is in charge (app.js lockOut). */
.elsewhere{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--base) 82%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.elsewhere-card{max-width:320px;display:grid;gap:18px;text-align:center;font-size:16px;line-height:1.45;color:var(--ink)}
/* Short phones (e.g. 320x568): a bigger inner circle so the countdown and helper fit without tiny text. */
@media (max-height:640px){
  .dial{--size:max(184px,min(262px,72vw,calc(100dvh - 400px)))!important}
  .dial-core{inset:13%;padding:0 7%}
  .time{font-size:calc(var(--size) * .17)!important}
  .time-help{max-width:100%!important;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Your mixes: sheet + the little YouTube dock above the bottom bar (extras.js). */
#mixForm{margin:4px 0 16px}#mixForm input{flex:1;min-width:0;margin:0}#mixForm .accent-btn{flex-shrink:0;width:auto;padding:0 20px;margin:0}
.mix-list{display:grid;gap:10px;margin-bottom:14px}
.mix-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 6px 6px 14px;border-radius:16px;box-shadow:var(--raise)}
.mix-row .emo{width:24px;height:24px;flex-shrink:0}
.mix-row span{flex:1;min-width:0;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Start my day / Back to your day (Clean): the aura breathes and a soft ripple leaves the disc, so it reads as "tap me". */
@keyframes dayBreathe{0%,100%{scale:1;opacity:.6}50%{scale:1.14;opacity:1}}
@keyframes dayRipple{0%{scale:1;opacity:.55}100%{scale:1.7;opacity:0}}
.clean .start-day .go-disc::before{animation:aurora 9s linear infinite,dayBreathe 3.2s ease-in-out infinite}
.clean .start-day .go-disc::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;border:2px solid #b9b0ff;pointer-events:none;animation:dayRipple 3.2s ease-out infinite}
@media(prefers-reduced-motion:reduce){.clean .start-day .go-disc::before{animation:none}.clean .start-day .go-disc::after{display:none}}
/* Focus scope toggle (Your day | All tasks) and the Finish my day sheet */
.focus-scope{margin:0 auto 12px;max-width:300px}.focus-scope[hidden]{display:none}
#parkQuick{grid-column:1/-1}
.wrap-finish{margin-top:16px;width:100%}
.finish-list{display:grid;gap:10px;margin:4px 0 18px}
.finish-row{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;padding:12px 14px;border-radius:16px;box-shadow:var(--raise);transition:opacity .2s,transform .2s var(--ease)}
.finish-row.gone{opacity:0;transform:translateX(30px)}
.finish-row .emo{width:26px;height:26px}
.finish-row>span{font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finish-acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.finish-empty{display:flex;align-items:center;gap:10px;color:var(--muted)}.finish-empty .emo{width:32px;height:32px}
#finishAll[hidden]{display:none}

/* YouTube mixes: a calm line under the timer, no video (extras.js). The player is invisible and only takes taps when iPhone needs one to start. */
.yt-line{position:relative;display:none;align-items:center;gap:10px;margin-top:12px;min-height:48px;padding:4px 4px 4px 14px;border-radius:999px;box-shadow:var(--raise-sm);overflow:hidden}
.yt-line.on{display:flex}
.yt-line .emo{width:22px;height:22px;flex-shrink:0}
.yt-line .yt-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-line button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--ink);flex-shrink:0}
.yt-line button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.yt-line .yt-play{box-shadow:var(--raise-sm)}.yt-line .yt-play svg{fill:currentColor}
.yt-hit{position:absolute;inset:0;opacity:.011;pointer-events:none;overflow:hidden;z-index:2}
.yt-frame{position:absolute;left:50%;top:50%;width:320px;height:180px;margin:-90px 0 0 -160px}
.yt-frame iframe{width:100%;height:100%;border:0}
.yt-line.need-tap .yt-hit{pointer-events:auto}
.yt-line.need-tap{box-shadow:0 0 0 2px var(--accent),var(--raise-sm)}.yt-line.need-tap .yt-title{color:var(--ink)}.yt-line.need-tap button{visibility:hidden}
/* v83: Day done — Today becomes a clean slate with the lotus blooming in. */
@keyframes zenBloom{0%{transform:scale(.6) rotate(-8deg);opacity:0}60%{transform:scale(1.06) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes zenFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.zen-done{margin-top:28px;padding:40px 18px 30px}
.zen-done .zen-orb{width:116px;height:116px;animation:zenBloom 1.1s var(--ease) both}
.zen-done .zen-orb .emo{width:68px;height:68px;animation:zenFloat 5s ease-in-out 1.2s infinite}
.zen-done h2{font-size:28px;margin-top:4px}
.zen-links{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap;justify-content:center}
.zen-links button{min-height:44px;padding:0 6px;font-size:14px;font-weight:650;color:var(--accent);background:none;border:0}
@media(prefers-reduced-motion:reduce){.zen-done .zen-orb,.zen-done .zen-orb .emo{animation:none}}
/* Calm focus screen: near-black, the lava orb fills with the round, the time drifts slowly so nothing burns in. */
  box-shadow:0 0 0 1px rgba(185,176,255,.12),0 0 90px -12px rgba(125,109,255,.38),inset 0 0 40px rgba(0,0,0,.6)}
/* The surface: two big slowly-turning rounded squares cut into the top of the fill, so it wobbles like a lava lamp. */
/* Notification settings */
.notify-more[hidden]{display:none}
.setting-row .n-time{width:auto;min-width:104px;margin:0;flex-shrink:0}
.mix-list{grid-template-columns:minmax(0,1fr)}
.awake-vid{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}

/* v86: Today | Tomorrow, folding sections, tomorrow planning */
.seg.range.day-flip{display:flex;width:max-content;margin:-6px 0 14px;padding:3px;border-radius:14px}
.seg.range.day-flip button{flex:0 0 auto;min-height:32px;padding:0 16px;border-radius:11px;font-size:13px;position:relative}
.seg.range.day-flip button::after{content:'';position:absolute;inset:-6px 0}
button.section-head.fold{width:calc(100% - 8px);padding:0;background:none;border:0;font:inherit;font-size:13px;font-weight:700;color:inherit;cursor:pointer;justify-content:flex-start;gap:6px;min-height:32px}
button.section-head.fold>svg{width:14px;height:14px;flex-shrink:0;transform:rotate(90deg);transition:transform .3s var(--spring);color:var(--muted)}
button.section-head.fold.shut>svg{transform:none}
button.section-head.fold .meta{margin-left:auto}
button.section-head.fold.shut .meta{min-width:24px;height:22px;justify-content:center;padding:0 8px;border-radius:11px;font-weight:700;color:var(--accent);box-shadow:var(--inset-sm)}
.clean button.section-head.fold.shut .meta{box-shadow:none;background:var(--btn);color:var(--on-btn)}
.today-task .row-play{margin-left:2px}
.wake-card{padding:14px 14px 10px;margin:0 0 6px;border-radius:24px;box-shadow:var(--raise-sm)}
.clean .wake-card{background:var(--card)}
.wake-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.wake-row .emo{width:30px;height:30px}
.wake-copy{flex:1;min-width:0;display:flex;flex-direction:column}.wake-copy strong{font-size:15px}.wake-copy small{font-size:12px;color:var(--muted)}
.wake-row .n-time{width:auto;min-width:104px}
.wake-help{margin:8px 2px 2px;font-size:13px;color:var(--muted)}.wake-help summary{min-height:36px;display:flex;align-items:center;cursor:pointer;font-weight:650;color:var(--accent)}
.wake-help ol{margin:4px 0 6px;padding-left:20px;line-height:1.6}.wake-help p{margin:0 0 6px}
.tomorrow-card .routine-head{align-items:center}
.skip-all{margin-left:auto;min-height:40px;padding:0 6px;font:inherit;font-size:13px;font-weight:650;color:var(--accent);background:none;border:0}
.tom-row{display:flex;align-items:center;gap:10px;padding:8px 2px}
.tom-row .r-copy{flex:1;min-width:0}
.tom-row .r-emo .emo{width:22px;height:22px}
.skip-chip{flex-shrink:0;min-height:32px;padding:0 12px;font-size:12.5px}
.tom-row.skipped .r-name{text-decoration:line-through;color:var(--muted)}
.tom-row.skipped .r-emo{opacity:.4}
.tom-task{padding-right:10px}
.tom-open{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:0;background:none;border:0;font:inherit;color:inherit;text-align:left}
.wrap-tomorrow{margin:10px auto -4px;text-align:center}

/* v87: Clean pre-focus dial had almost no contrast (white on off-white). Give it a hairline, a tinted groove and a lavender track ring. */
.clean .dial{box-shadow:0 0 0 1px rgba(43,40,51,.07),0 22px 44px -20px rgba(43,40,51,.32),0 3px 8px rgba(43,40,51,.05)}
.clean .dial-well{background:#e6e1fa!important;box-shadow:inset 0 3px 8px rgba(43,40,51,.12),inset 0 0 0 1px rgba(43,40,51,.06)!important}
.clean .dial-core{background:var(--card);box-shadow:0 0 0 1px rgba(43,40,51,.06),0 12px 26px -12px rgba(43,40,51,.30)}
@media(prefers-color-scheme:dark){.clean .dial{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 22px 44px -20px rgba(0,0,0,.7)}.clean .dial-well{background:color-mix(in srgb,#aaa1f7 16%,var(--base))!important;box-shadow:inset 0 3px 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.05)!important}.clean .dial-core{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 12px 26px -12px rgba(0,0,0,.6)}}

/* v87: Clean tick splash: wider, wonkier, squishier (squash and stretch with a little overshoot) */
.clean .fx-goo{left:-90px;top:-90px;width:180px;height:180px}
.clean .fx-goo i{width:22px;height:22px;margin:-11px 0 0 -11px;animation:lavasquish .82s cubic-bezier(.3,1.4,.5,1) both}
.clean .fx-goo .fx-core{width:36px;height:36px;margin:-18px 0 0 -18px;animation:coresquish .8s cubic-bezier(.3,1.3,.5,1) both}
@keyframes lavasquish{0%{transform:translate(0,0) scale(.3);opacity:1}28%{transform:translate(calc(var(--dx)*.55),calc(var(--dy)*.55)) scale(calc(var(--s)*1.3),calc(var(--s)*.75))}52%{transform:translate(var(--dx),var(--dy)) scale(calc(var(--s)*.82),calc(var(--s)*1.18));opacity:1}72%{transform:translate(calc(var(--dx)*1.1),calc(var(--dy)*1.1)) scale(calc(var(--s)*1.06),calc(var(--s)*.94))}100%{transform:translate(calc(var(--dx)*1.2),calc(var(--dy)*1.2)) scale(0);opacity:0}}
@keyframes coresquish{0%{transform:scale(.4);opacity:1}22%{transform:scale(1.6,1.15)}42%{transform:scale(1.15,1.55)}62%{transform:scale(1.42,1.28)}100%{transform:scale(0);opacity:0}}
@media(prefers-color-scheme:dark){.clean .fx-goo i{background:linear-gradient(135deg,#b9b0ff,#7a68ff)}}

/* v87: Focus extras row: Music, (Brain dump while running), Auto */
.focus-extras{justify-content:center}
.focus-extras .sound-pill{margin:0}
.auto-pill{padding:0 14px 0 11px}
.auto-pill .emo{opacity:.45;filter:grayscale(1);transition:opacity .3s,filter .3s}
.auto-pill.on .emo{opacity:1;filter:none}
.auto-pill.on{color:var(--accent);box-shadow:var(--inset-sm)}
.clean .auto-pill.on{background:var(--btn);color:var(--on-btn);box-shadow:none}
.sound-pill.off .emo{opacity:.55}
/* long YouTube titles drift to the end and back */
.yt-line .yt-title.marq{text-overflow:clip;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.yt-title span{display:inline-block}
.yt-title.marq span{padding-left:8px;animation:marq var(--dur,10s) ease-in-out infinite alternate}
@keyframes marq{0%,12%{transform:none}88%,100%{transform:translateX(var(--shift,0))}}
/* Calm screen (opt-in): the dial's own lava in a dark orb, the time, the task */
.amb{position:fixed;inset:0;z-index:86;display:grid;place-items:center;background:#060609;opacity:0;pointer-events:none;transition:opacity 1.4s ease}
.amb.on{opacity:1;pointer-events:auto}
.amb.shield{pointer-events:auto;transition:opacity .5s ease}
html.ambient{background:#060609}
.amb-drift{display:grid;justify-items:center;gap:6px;text-align:center;animation:ambDrift 140s ease-in-out infinite alternate}
@keyframes ambDrift{0%{transform:translate(-10px,-16px)}35%{transform:translate(12px,6px)}70%{transform:translate(-6px,14px)}100%{transform:translate(10px,-8px)}}
.amb-orb{position:relative;width:min(64vw,250px);aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:26px;background:radial-gradient(circle at 50% 35%,#17142a,#0a0910 70%);box-shadow:0 0 0 1px rgba(185,176,255,.14),0 0 70px rgba(125,109,255,.22)}
.amb-orb svg{position:absolute;inset:0;width:100%;height:100%}
.amb .lb{animation-play-state:running}
.amb-time{margin:0;font-size:64px;font-weight:200;letter-spacing:-.03em;color:#ece9ff;font-variant-numeric:tabular-nums}
.amb-task{margin:0;max-width:78vw;font-size:16px;font-weight:550;color:#8e88a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amb-hint{margin:26px 0 0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#3f3a52}
@media(prefers-reduced-motion:reduce){.amb-drift,.amb .lb,.yt-title.marq span{animation:none}}

/* v88: Set a time sheet */
.time-pair{display:flex;align-items:flex-end;gap:10px;margin:6px 0 4px}
.time-pair label{flex:1;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650;color:var(--muted)}
.time-pair input{width:100%}
.time-pair>span{padding-bottom:14px;color:var(--muted)}

/* v88: mission pick list: pencil on every row, greyed when it won't fit the slot */
.pick-wrap{position:relative}
.pick-wrap .pick-row{width:100%}
.pick-wrap .pick-copy{margin-right:38px}
.pick-edit{position:absolute;right:46px;top:50%;width:36px;height:36px;margin-top:-18px;display:grid;place-items:center;border-radius:50%;color:var(--muted);background:none;border:0}
.pick-edit svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pick-row.nofit{opacity:.42;box-shadow:none}
.pick-row.nofit .pick-box{box-shadow:none;border:1.5px dashed var(--muted)}
.pick-wrap.fresh .pick-edit{color:var(--accent);animation:freshPulse 1.2s ease 2}
@keyframes freshPulse{50%{transform:scale(1.25)}}
.pick-hint{margin:8px 4px 0}
@media(prefers-reduced-motion:reduce){.pick-wrap.fresh .pick-edit{animation:none}}

/* v89: music pill = a symbol; tap for the menu */
.sound-pill.icon-only{width:44px;padding:0;gap:0;border-radius:50%}
.sound-pill.icon-only>span:empty{display:none}
.sound-pill.icon-only.off .emo{opacity:.5;filter:grayscale(.6)}
.sound-pill .yt-ico{width:22px;height:22px;flex-shrink:0}
/* bell in the Set a time sheet */
.bell-chip{display:inline-flex;align-items:center;gap:8px;margin:12px 0 2px}
.bell-chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bell-chip[aria-pressed=true]{color:var(--accent);box-shadow:var(--inset-sm)}
.clean .bell-chip[aria-pressed=true]{background:var(--btn);color:var(--on-btn);box-shadow:none}
#nLead{width:auto;min-width:96px}
/* locked in: after a few seconds the task card settles into a quiet title */
.app.focusing .focus.settled .mission{grid-template-columns:1fr;padding:2px 8px;background:none!important;box-shadow:none!important;transition:padding .5s var(--ease)}
.app.focusing .focus.settled :is(.mission-icon,.status,.mission-edit,.mission-index){display:none}
.app.focusing .focus.settled .mission-copy{text-align:center}
.app.focusing .focus.settled .mission h2{font-size:15px;font-weight:600;color:var(--muted);-webkit-line-clamp:1;animation:settleIn .7s var(--ease) both}
@keyframes settleIn{from{opacity:0;transform:translateY(-6px) scale(1.06)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.app.focusing .focus.settled .mission h2{animation:none}}

/* v90: Set a time = one big, pre-filled start time; end time is optional */
.time-big{display:flex;align-items:center;gap:12px;margin:4px 0 10px}
.time-big .picker-label{margin:0;min-width:56px}
.time-big input{flex:1;min-width:0;min-height:58px;padding:0 16px;border:0;border-radius:18px;font:inherit;font-size:30px;font-weight:300;letter-spacing:-.02em;text-align:center;color:var(--ink);background:var(--base);box-shadow:var(--inset-sm);font-variant-numeric:tabular-nums}
.clean .time-big input{background:var(--card);box-shadow:inset 0 0 0 1px rgba(43,40,51,.08)}
.time-big.end input{font-size:22px;min-height:48px}
.time-quick{margin:0 0 6px}
.time-add-end{display:block;min-height:40px;margin:2px 0 4px;padding:0 2px;font:inherit;font-size:13.5px;font-weight:650;color:var(--accent);background:none;border:0}
#timeForm .pair:has(#timeClear[hidden]){display:block}#timeForm .pair:has(#timeClear[hidden]) .accent-btn{width:100%}

/* v91: daily idea */
.idea{position:relative;margin:0 0 16px;padding:12px 40px 12px 34px;border-radius:20px;box-shadow:var(--inset-sm);transition:opacity .25s,transform .25s}
.clean .idea{background:var(--card);box-shadow:inset 0 0 0 1px rgba(43,40,51,.06)}
.idea-mark{position:absolute;left:12px;top:4px;font-size:30px;font-weight:700;line-height:1;color:var(--accent);opacity:.55}
.idea p{margin:0;font-size:14px;line-height:1.45;font-weight:550}
.idea figcaption{margin-top:4px;font-size:11.5px;color:var(--muted)}
.idea-x{position:absolute;right:4px;top:4px;width:36px;height:36px;box-shadow:none!important;background:none!important;color:var(--muted)}
.idea-x svg{width:14px;height:14px}
.idea.gone{opacity:0;transform:scale(.97)}
/* spaces */
.space-filter{margin:0 0 12px}
.space-new{margin:6px 0 4px}
/* landscape phone: Focus goes side by side (dial left, everything else right) */
@media (orientation:landscape) and (max-height:520px){
  .app{max-width:none}
  .scroll{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  #focusView .focus{display:grid;grid-template-columns:auto 1fr;column-gap:28px;align-items:center;max-width:820px;margin-left:auto;margin-right:auto}
  #focusView .focus>*{grid-column:2}
  #focusView .focus>.dial{grid-column:1;grid-row:1 / span 8;--size:min(240px,62dvh);margin:0}
  #focusView .focus .controls{margin-bottom:8px}
  #todayView,#tasksView,#routinesView,#notesView{max-width:640px;margin:0 auto}
}
/* foldables, tablets: more room. Lists read in a wider, centred column; Today's cards flow in two columns */
@media (min-width:700px) and (min-height:521px) and (pointer:coarse){  /* real foldables/tablets only: a wide desktop window still shows the phone frame */
  .app{max-width:860px}
  #focusView,#tasksView,#notesView,#routinesView{max-width:520px;margin:0 auto}
  #todayBody{columns:2;column-gap:22px}
  #todayBody>*{break-inside:avoid}
  #todayBody>:is(.day-flip,.idea,.wrapup,.start-day,.moved-note,.zen-done){column-span:all}
}
/* v91: landscape phone: slim header and icon-only bottom bar so the Focus dial fits */
@media (orientation:landscape) and (max-height:520px){
  .top{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:4px}
  .nav{margin:2px max(16px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));padding:4px}
  .nav-button{min-height:40px;font-size:0;gap:0}
  .nav-button .nav-count{font-size:10px}
  #focusView .focus>.dial{--size:min(230px,calc(100dvh - 150px));align-self:start}
  #focusView .focus{align-items:start;row-gap:10px}
  #focusView .focus .pager{margin:0}
  .app.focusing .focus{margin:0 auto}
}
@media (orientation:landscape) and (max-height:520px){
  #focusView .focus .pager{display:none}
  #focusView .focus .mission{padding:6px 10px 6px 6px}
  #focusView .focus .mission-icon{width:44px;height:44px}
  #focusView .focus .mission h2{font-size:17px}
  #focusView .focus .controls{margin:0 0 4px}
  #focusView .focus .focus-scope{margin:0}
}

/* v92: Colour = Orange. Neutral near-white base (no tint) so the accent pops. Text-orange is #b93d0a (4.9:1 on the base); fills are the glossy #ff7a2e → #e8590c. */
html[data-accent=orange]{--base:#eef0f3;--hi:rgba(255,255,255,.95);--lo:rgba(160,166,180,.5);--edge-hi:rgba(255,255,255,.85);--edge-lo:rgba(140,146,160,.3);--ink:#20232a;--muted:#555b68;
  --accent:#b93d0a;--accent-2:#ff7a2e;--on-accent:#fff;--glow:rgba(255,106,31,.38);--tint:rgba(255,106,31,.10);--lava-a:#ffd2ad;--lava-b:#ff9a5c;--fill:#f26a1b}
html[data-accent=orange]{--ring:rgba(201,79,10,.4)}
html[data-accent=orange].clean{--base:#fff;--card:#fff;--btn:#ffe8d9;--on-btn:#9a3408;--disc:#e8590c;--on-disc:#fff}
@media(prefers-color-scheme:dark){html[data-accent=orange]{--base:#1f2126;--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:#eef0f4;--muted:#a8aebb;
  --accent:#ff9a5c;--accent-2:#ffb37f;--on-accent:#2a1205;--glow:rgba(255,140,70,.3);--tint:rgba(255,140,70,.12);--lava-a:#ffb07a;--lava-b:#ff7a2e;--fill:#ff8a45}
  html[data-accent=orange].clean{--base:#141517;--card:#1d1f23;--btn:#3a2418;--on-btn:#ffcfae;--disc:#ff8a45;--on-disc:#2a1205}}
/* v111: ONE button system for every accent (Andy 25/10: "they should look the same, just the accent colour").
   Each accent only supplies its gloss colours; the rules below are shared. */
html{--g1:#b0a6ff;--g2:#7a68ff;--g3:#5546d6;--g-disc:#6a57f2;--g-press:rgba(40,25,140,.3);--g-ring:#a99ff7;--g-well:#e6e1fa;--g-aura:conic-gradient(from 0deg,#a99ff7,#d4ceff,#8f80ff,#e3defc,#b0a6ff,#a99ff7)}
html[data-accent=orange]{--g1:#ffa165;--g2:#ff7a2e;--g3:#e8590c;--g-disc:#f26a1b;--g-press:rgba(150,50,0,.26);--g-ring:#ffb07a;--g-well:#ffeadb;--g-aura:conic-gradient(from 0deg,#ffb07a,#ffd3b0,#ff8a45,#ffe0c2,#ffa165,#ffb07a)}
@media(prefers-color-scheme:dark){html{--g-well:color-mix(in srgb,#8f80ff 16%,var(--base))}html[data-accent=orange]{--g-well:color-mix(in srgb,#ff8a45 14%,var(--base))}}
html[data-accent] :is(.accent-btn,.start-day .go-disc,.go-disc,.accent-plus){background:linear-gradient(160deg,var(--g1),var(--g2) 45%,var(--g3));color:#fff}
html[data-accent=orange] .logo.line{background:#ffe8d9}html[data-accent=orange] .logo.line .brain{stroke:#d9480f}
@media(prefers-color-scheme:dark){html[data-accent=orange] .logo.line{background:#3a2418}html[data-accent=orange] .logo.line .brain{stroke:#ffb07a}}
html[data-accent=orange] .fx-goo i{background:linear-gradient(135deg,#ffb07a,#ff6a1f)}
html[data-accent=orange] .lava-wash{background:radial-gradient(120% 70% at 50% 110%,#ff7a2e 0%,#ffb07a 45%,rgba(255,211,176,0) 75%)}
/* v112: Clean shows the Focus circle like Classic: plain base, no tinted fill (Andy 25/10) */
html[data-accent] .clean .dial-well,html[data-accent].clean .dial-well{background:var(--base)!important}
html[data-accent].clean .controls .play::before,html[data-accent].clean .start-day .go-disc::before,html[data-accent].clean .accent-plus::before{background:var(--g-aura)}
html[data-accent].clean .start-day .go-disc::after{border-color:var(--g-ring)}
html[data-accent].clean .controls .play{background:linear-gradient(160deg,var(--g1),var(--g2) 45%,var(--g3))}
/* the picker */
.accent-pick{display:flex;gap:10px;margin:0 0 6px}
.accent-pick button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:16px;font-size:13.5px;font-weight:650;box-shadow:var(--raise-sm)}
.accent-pick button[aria-checked=true]{box-shadow:var(--inset-sm);color:var(--accent)}
.accent-pick i{width:18px;height:18px;border-radius:50%;background:linear-gradient(160deg,#9a8cff,#4c3bdc)}
.accent-pick [data-accent=orange] i{background:linear-gradient(160deg,#ffa165,#e8590c)}
.clean .accent-pick button{background:var(--card)}

/* v93: quote card "Read" (lava pop, then it melts away) */
.idea{padding:12px 14px 10px 34px}
.idea-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:4px}
.idea-foot figcaption{margin:0;padding-bottom:6px}
.idea-read{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px 0 9px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--accent);box-shadow:var(--raise-sm);position:relative}
.idea-read::after{content:'';position:absolute;inset:-6px}
.idea-read svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.idea-read:active{box-shadow:var(--inset-sm);transform:scale(.95)}
.clean .idea-read{background:var(--btn);color:var(--on-btn);box-shadow:none}
.idea{transition:opacity .4s var(--ease),transform .4s var(--ease),max-height .4s var(--ease)}
.idea.gone{opacity:0;transform:scale(.94) translateY(-6px)}
/* Tomorrow tab count */
.flip-n{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:999px;font-size:10.5px;font-weight:800;color:var(--on-accent);background:var(--accent-2)}
/* opening: hidden until drawn, then logo pops, header settles, cards rise, bar glides up */
html.boot #app{opacity:0}
html.opening .top{animation:openTop .55s var(--ease) both}
html.opening .logo{animation:logoPop .8s cubic-bezier(.3,1.5,.5,1) .05s both}
html.opening .nav{animation:openNav .7s var(--ease) .18s both}
html.opening .view:not([hidden]){animation:openView .6s var(--ease) .06s both}
@keyframes openTop{from{opacity:0;transform:translateY(-10px)}}
@keyframes openNav{from{opacity:0;transform:translateY(26px)}}
@keyframes openView{from{opacity:0;transform:translateY(12px)}}
@keyframes logoPop{0%{opacity:0;transform:scale(.4) rotate(-24deg)}60%{opacity:1;transform:scale(1.14) rotate(4deg)}100%{transform:none}}

/* v93: orange Focus polish: the play keeps its raised neo ring with a glossy orange disc inside (never the deep text-orange); lighter lava; room under the settled title */
html[data-accent]:not(.clean) .play{background:var(--base)}
html[data-accent] .play::before,html[data-accent] .viewing-done .play::before{background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.42),transparent 44%),linear-gradient(150deg,var(--g1),var(--g-disc) 72%)}
html[data-accent] .running .play::before{box-shadow:inset 3px 3px 6px rgba(255,255,255,.32),inset -4px -4px 8px var(--g-press),0 0 16px var(--glow)}
html[data-accent] .play:active:not(:disabled)::before{box-shadow:inset -2px -2px 5px rgba(255,255,255,.2),inset 4px 4px 9px var(--g-press)}
html[data-accent=orange] #liqGrad stop:first-child,html[data-accent=orange] #arcGrad stop:first-child{stop-color:#ffc08f}
html[data-accent=orange] #liqGrad stop:last-child,html[data-accent=orange] #arcGrad stop:last-child{stop-color:#f26a1b}
.app.focusing .focus.settled .mission{margin-bottom:14px}

#headerDone{display:none}#openRecap{width:44px;height:44px;padding:0;justify-content:center}

/* ---------- Pomodoro scenes (scenes.js) ---------- */
.scene{position:absolute;inset:0;overflow:hidden;border-radius:50%;pointer-events:none}
.scene .sc-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc-thumb{display:block;width:100%;height:100%}
.sc-la{stop-color:var(--lava-a,#c3b9ff)}.sc-lb{stop-color:var(--lava-b,#7d6bff)}
.sc-pool,.sc-water{transition:y .9s var(--ease,ease),transform .9s var(--ease,ease)}
@keyframes scBlob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8px,-14px) scale(1.15)}}
.sc-b1,.sc-b2,.sc-b3{transform-box:fill-box;transform-origin:center;animation:scBlob 7s ease-in-out infinite}.sc-b2{animation-duration:9s;animation-direction:reverse}.sc-b3{animation-duration:11s}
@keyframes scDrift{to{transform:translateX(-180px)}}
.sc-w1{animation:scDrift 9s linear infinite}.sc-w2{animation:scDrift 14s linear infinite}
@keyframes scSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.sc-lotus{transform-origin:90px 120px;animation:scSway 8s ease-in-out infinite}
.sc-shadow{transition:cx 1.2s ease}
@keyframes scTw{0%,100%{opacity:.25}50%{opacity:.9}}
.sc-st{animation:scTw 4s ease-in-out infinite}.sc-st:nth-child(2n){animation-delay:1.3s}.sc-st:nth-child(3n){animation-delay:2.4s}
@keyframes scRain{from{transform:translate(0,-60px)}to{transform:translate(-14px,120px)}}
.sc-rain{animation:scRain 1.1s linear infinite}.sc-rain.sc-r2{animation-duration:1.6s;animation-delay:-.7s;opacity:.5}
@keyframes scSteam{0%{opacity:0;transform:translateY(4px)}50%{opacity:.75}100%{opacity:0;transform:translateY(-12px)}}
.sc-steam{animation:scSteam 3.2s ease-in-out infinite}.sc-steam.sc-s2{animation-delay:1.6s}
@keyframes scCloud{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
.sc-cl1{animation:scCloud 26s ease-in-out infinite alternate}.sc-cl2{animation:scCloud 34s ease-in-out infinite alternate-reverse}.sc-cl3{animation:scCloud 40s ease-in-out infinite alternate}
@keyframes scTrain{0%{transform:translateX(-170px)}40%,100%{transform:translateX(380px)}}.sc-train{animation:scTrain 16s linear infinite}
@keyframes scSpark{0%,80%,100%{opacity:0;transform:scale(.4)}88%{opacity:.9;transform:scale(1)}}.sc-spark{transform-origin:150px 80px;animation:scSpark 7s ease-in-out infinite}
@keyframes scFlick{0%,92%,100%{opacity:1}95%{opacity:.82}}.sc-cityLit{animation:scFlick 6s infinite}
@keyframes scTail{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}.sc-tail{transform-origin:78px 268px;animation:scTail 3.4s ease-in-out infinite}
@keyframes scWalk{0%{transform:translateX(330px);opacity:1}18%{transform:translateX(0);opacity:1}18.1%,79.9%{opacity:0;transform:translateX(0)}80%{opacity:1;transform:translateX(0)}96%,100%{transform:translateX(-140px);opacity:1}}
.sc-walker{animation:scWalk 30s linear infinite}
@keyframes scSit{0%,18%{opacity:0}18.1%,79.9%{opacity:1}80%,100%{opacity:0}}.sc-sitter{animation:scSit 30s linear infinite}
@keyframes scLeg{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}.sc-lg1,.sc-lg2{transform-box:fill-box;transform-origin:top;animation:scLeg .5s ease-in-out infinite}.sc-lg2{animation-delay:-.25s}
@keyframes scWt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}.sc-wtail{transform-box:fill-box;transform-origin:bottom left;animation:scWt 1.4s ease-in-out infinite}
@keyframes scSpin{to{transform:rotate(360deg)}}
.sc-halo{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,#cfc6ff,#ffffff,#b8acfa,#ffffff,#cfc6ff);filter:blur(16px);opacity:.55;will-change:transform;animation:scSpin 18s linear infinite}
@keyframes scRipple{from{r:120;opacity:.7;stroke-width:6}to{r:176;opacity:0;stroke-width:1}}
.sc-ring{fill:none;stroke:#a99cf5;opacity:0}.scene.whole .sc-ring{animation:scRipple 1.6s cubic-bezier(.2,.8,.2,1) 2}.scene.whole .sc-ring.sc-rb{animation-delay:.35s}
@keyframes scBreathe{0%,100%{transform:scale(.62)}45%,55%{transform:scale(1)}}
.sc-breath{transform-origin:90px 90px;animation:scBreathe 8s ease-in-out infinite}.sc-breath.sc-bb2{animation-delay:.25s}
@media(prefers-reduced-motion:reduce){.scene *,.scene{animation:none!important;transition:none!important}}

/* ---------- Pomodoro on the Focus screen (pomo.js) ---------- */
.pomo-stage[hidden],.pomo-controls[hidden],.pomo-pick[hidden],.pomo-end[hidden],.pomo-round[hidden],.pomo-breath[hidden],.pomo-break-line[hidden]{display:none!important}
.app.pomo:not(.pomo-run) #focusCard>.mission,.app.pomo:not(.pomo-run) #focusCard>.pager,.app.pomo:not(.pomo-run) #timerRing,.app.pomo:not(.pomo-run) .focus-extras,
.app.pomo #focusCard>.controls:not(.pomo-controls),.app.pomo .timesup,.app.pomo-run #timerRing>:not(.dial-well):not(.pomo-stage){display:none!important}
.pomo-pick{display:grid;gap:2px;margin:4px 0 6px;padding:6px;border-radius:26px;box-shadow:var(--raise)}
.clean .pomo-pick{background:var(--card)}
.pomo-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 10px;border-radius:20px;cursor:pointer;transition:background .2s,transform .12s var(--ease)}
.pomo-row:active{transform:scale(.985);background:var(--tint,rgba(85,70,230,.07))}
.pomo-thumb{width:42px;height:42px;border-radius:50%;overflow:hidden;flex:none;box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.pomo-copy{flex:1;min-width:0;display:grid;gap:2px}.pomo-copy strong{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pomo-copy small{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pomo-end{display:flex;align-items:center;gap:6px;margin:0 auto 10px;padding:8px 14px;min-height:36px;border-radius:99px;box-shadow:var(--raise);font-size:13px;font-weight:600;color:var(--muted)}
.clean .pomo-end{background:var(--card)}
.pomo-end svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pomo-round{text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:6px 0 -4px}
.pomo-stage{position:absolute;inset:9%;border-radius:50%;overflow:hidden;z-index:3;box-shadow:inset 3px 3px 9px var(--lo),inset -3px -3px 9px var(--hi)}
.pomo-scene{position:absolute;inset:0;border-radius:50%}
.pomo-scene.in{animation:pomoIn .7s var(--ease,ease) both}
@keyframes pomoIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.pomo-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;z-index:2}
.pomo-time{font-size:clamp(40px,12vw,50px);font-weight:250;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink);text-shadow:0 0 12px var(--base),0 0 3px var(--base)}
.pomo-sub{font-size:12px;font-weight:600;color:var(--muted);text-shadow:0 0 8px var(--base),0 0 2px var(--base)}
.pomo-stage.light .pomo-time{color:#fff;text-shadow:0 2px 12px rgba(16,10,44,.8)}.pomo-stage.light .pomo-sub{color:#efe6ff;text-shadow:0 1px 8px rgba(16,10,44,.8)}
.pomo-stage:has(.scene.sc-lofi) .pomo-read{justify-content:flex-start;padding-top:19%;gap:3px}.pomo-stage:has(.scene.sc-lofi) .pomo-time{font-size:clamp(30px,9vw,38px)}
.pomo-stage:has(.scene.sc-bloom) .pomo-read{justify-content:flex-end;padding-bottom:9%;gap:2px}.pomo-stage:has(.scene.sc-bloom) .pomo-time{font-size:clamp(28px,8.5vw,36px);color:#1d3a30;text-shadow:0 0 10px rgba(255,255,255,.85)}.pomo-stage:has(.scene.sc-bloom) .pomo-sub{color:#2f5a4c;text-shadow:0 0 6px rgba(255,255,255,.8)}
.pomo-controls .play svg{width:22px;height:22px}
.pomo-breath{position:relative;height:18px;margin:-4px 0 4px;font-size:13px;font-weight:600;color:#2f7f63}
.pomo-breath span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
@keyframes pomoWords{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
.pomo-breath .bw1{animation:pomoWords 8s infinite}.pomo-breath .bw2{opacity:0;animation:pomoWords 8s infinite 4s}
.pomo-break-line{text-align:center;font-size:13px;color:var(--muted);margin:0 0 10px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pomo-breath{color:#8fd9b8}}
:root[data-theme=dark] .pomo-breath{color:#8fd9b8}
/* each template adds only a breath of tint behind the dial */
.app.pomo-run #focusView{background:radial-gradient(120% 55% at 50% 32%,var(--pomo-tint,transparent),transparent 72%);transition:background 1s}
.app[data-pomo-scene=lava]{--pomo-tint:rgba(125,107,255,.12)}.app[data-pomo-scene=tide]{--pomo-tint:rgba(95,176,222,.16)}.app[data-pomo-scene=bloom]{--pomo-tint:rgba(98,201,162,.16)}
.app[data-pomo-scene=moon]{--pomo-tint:rgba(91,95,168,.18)}.app[data-pomo-scene=lofi]{--pomo-tint:rgba(176,84,154,.14)}.app[data-pomo-scene=yinyang]{--pomo-tint:rgba(154,146,238,.16)}.app[data-pomo-scene=break]{--pomo-tint:rgba(98,201,162,.2)}
@media(prefers-reduced-motion:reduce){.pomo-breath span{animation:none!important}.pomo-breath .bw2{display:none}.pomo-scene.in{animation:none}}

.pomo-new{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;margin:2px 0 0;font-size:14px;font-weight:650;color:var(--accent);border-radius:16px}
.pomo-new svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pomo-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:2px 0 18px}
.pomo-scene-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:16px;font-size:12px;font-weight:600;color:var(--muted);transition:box-shadow .15s,color .15s}
.pomo-scene-opt .pomo-thumb{width:40px;height:40px}
.pomo-scene-opt[aria-checked=true]{box-shadow:var(--raise),0 0 0 2px var(--accent);color:var(--ink)}
.clean .pomo-scene-opt[aria-checked=true]{background:var(--card)}
.pomo-steps{margin:4px 0 2px}.pomo-steps .minutes{margin:0 0 12px}.pomo-steps label{font-size:14px;font-weight:600}
.pomo-select{width:100%;margin:6px 0 18px}


/* mission time slot: a real well on iPhone, with --:-- until set */
.time-well{position:relative;display:block}
.time-pair input{-webkit-appearance:none;appearance:none;display:block;min-height:48px;margin:0;text-align:center;box-shadow:var(--inset);border-radius:14px}
.time-pair input::-webkit-date-and-time-value{text-align:center}
.time-well.empty::after{content:"--:--";position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:600;color:var(--muted);opacity:.6;pointer-events:none}
.time-well.empty input{color:transparent}
.pick-hint+.mission-new-task{margin-top:10px}

.focus-scope [hidden]{display:none!important}

/* Classic lava: blobs break off, float up and sink back, like a lava lamp */
@keyframes scRise{0%,100%{transform:translate(0,4px) scale(.7)}45%{transform:translate(6px,-78px) scale(1)}60%{transform:translate(2px,-84px) scale(.95)}}
.sc-r1,.sc-r2,.sc-r3{transform-box:fill-box;transform-origin:center;animation:scRise 11s ease-in-out infinite}.sc-r2{animation-duration:14s;animation-delay:-5s}.sc-r3{animation-duration:9s;animation-delay:-2.5s}

/* v97: calmer running screen, equal tabs, emoji badges, new lotus */
#focusScope>button{flex:1 1 0;min-width:0}
.app.pomo-run #focusCard>.mission,.app.pomo-run #focusCard>.pager,.app.pomo-run #autoPick,.app.pomo-run #focusView .tiles{display:none!important}
.pomo-round{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 -2px}.pomo-round .emo{width:22px;height:22px}
.pomo-task[hidden]{display:none!important}
.pomo-task{display:flex;align-items:center;justify-content:center;gap:10px;max-width:300px;margin:-4px auto 14px;padding:6px 14px 6px 6px;font-size:14px;font-weight:600;color:var(--muted)}
.pomo-task-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pomo-tick{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;position:relative}
.pomo-tick::after{content:"";position:absolute;inset:-6px}
.pomo-tick .r-box{width:24px;height:24px}
.pomo-thumb{overflow:visible;position:relative}.pomo-thumb>svg{border-radius:50%;overflow:hidden}
.pomo-badge{position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--base);box-shadow:var(--raise)}
.clean .pomo-badge{background:var(--card)}
.pomo-badge .emo{width:16px;height:16px}
.sc-petal{transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.sc-heart,.sc-glow{transition:opacity 1.6s ease}
@keyframes scRipple2{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.2);opacity:0}}
.sc-ripple{transform-box:fill-box;transform-origin:center;animation:scRipple2 6s ease-out infinite}.sc-rp2{animation-delay:3s}
.sc-lotus{transform-origin:90px 94px}

/* Deep work sky: stars wheel, the planet turns, a shooting star now and then */
@keyframes scWheel{to{transform:rotate(360deg)}}
.sc-sky{transform-origin:90px 90px;animation:scWheel 240s linear infinite}
@keyframes scBands{from{transform:translateX(0)}to{transform:translateX(-30px)}}
.sc-bands{animation:scBands 9s linear infinite}
@keyframes scMeteor{0%{transform:translate(-50px,10px);opacity:0}2%{opacity:1}12%{transform:translate(170px,92px);opacity:0}100%{transform:translate(170px,92px);opacity:0}}
.sc-meteor{animation:scMeteor 9s cubic-bezier(.3,0,.7,1) infinite;animation-delay:2s}
.sc-shadow{transition:cx 1.2s ease}
.pomo-stage:has(.scene.sc-moon) .pomo-read{padding-top:0}

/* v97: chill Pomodoro: scene + clock + brain; tap the dial for controls */
.pomo-hint[hidden]{display:none!important}
.pomo-hint{text-align:center;font-size:12px;color:var(--muted);margin:-2px 0 8px}
#pomoStage{cursor:pointer;-webkit-tap-highlight-color:transparent}#pomoStage:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.app.pomo-run #pomoControls,.app.pomo-run #soundPick,.app.pomo-run .yt-line{transition:opacity .5s ease,visibility .5s}
.app.pomo-run:not(.pomo-reveal) #pomoControls,.app.pomo-run:not(.pomo-reveal) #soundPick,.app.pomo-run:not(.pomo-reveal) .yt-line{opacity:0;visibility:hidden;pointer-events:none}
.app.pomo-run .focus-extras #wander{font-size:0;gap:0;flex:none!important;width:48px!important;min-width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;margin-left:auto;margin-right:auto}
.app.pomo-run #wander .emo{width:24px;height:24px}
.app.pomo-run .focus-extras{position:relative;justify-content:center}.app.pomo-run .focus-extras #soundPick{position:absolute;right:calc(50% + 36px);left:auto;top:50%;transform:translateY(-50%)}

.app.pomo-run #pomoControls{max-height:140px;overflow:hidden;transition:opacity .45s ease,visibility .45s,max-height .45s cubic-bezier(.2,.8,.2,1),margin .45s}
.app.pomo-run:not(.pomo-reveal) #pomoControls{max-height:0;margin-top:0;margin-bottom:0}

/* Focus tiles: Brain dump | Pomodoro (Brain dump spans when Pomodoro is open) */
#focusView .tiles #parkQuick{grid-column:auto}
#focusView .tiles:has(#pomoTile[hidden]) #parkQuick{grid-column:1/-1}
#pomoTile[hidden]{display:none}

#restPomo{margin-top:10px}

/* tapping the dial: no text cursor or selection in the clock; open controls keep the Pause glow */
#pomoStage,#pomoStage *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#pomoStage:focus:not(:focus-visible){outline:none}
.app.pomo-run.pomo-reveal #pomoControls{overflow:visible}

/* tabs span the full card width */
#focusView .focus-scope{max-width:none;width:100%}
.pomo-resume{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:6px 4px 2px;border-radius:16px;font-size:14px;font-weight:650;color:var(--accent);box-shadow:var(--inset)}
.pomo-resume>svg{width:14px;height:14px;fill:currentColor}

/* desktop time stepper (extras.js) */
.tstep-native{display:none!important}
.tstep-host.time-well::after{display:none!important}
.tstep{display:flex;align-items:center;justify-content:center;gap:6px}
.tstep .tminus,.tstep .tplus,.tstep .tclear{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;box-shadow:var(--raise);color:var(--muted)}
.tstep .tclear{width:28px;height:28px;box-shadow:none}
.tstep .tclear[hidden]{display:none}
.tstep svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tstep .tval{min-width:66px;height:44px;padding:0 10px;border-radius:14px;box-shadow:var(--inset);font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
.tstep-host.empty .tval{color:var(--muted)}
.clean .tstep .tminus,.clean .tstep .tplus{background:var(--card)}
/* Pomodoro resume: raised, play + the scene preview */
.pomo-resume{box-shadow:var(--raise)!important;gap:10px}
.clean .pomo-resume{background:var(--card)}
.pomo-resume .pomo-thumb{width:28px;height:28px}

/* v101: quote card with real quotes + bookmark */
.idea .idea-mark{display:none}
.idea blockquote{margin:0}
.idea figcaption cite,.wisdom-item cite{font-style:italic}
.idea-save{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--accent);position:relative;margin-left:auto}
.idea-save::after{content:"";position:absolute;inset:-4px}
.idea-save svg{width:20px;height:20px}
.idea-foot{gap:8px}
/* Wisdom under Thoughts */
.wisdom-list{display:grid;gap:12px;margin:0 0 22px}
.wisdom-item{position:relative;margin:0;padding:16px 46px 14px 18px;border-radius:22px;box-shadow:var(--raise)}
.clean .wisdom-item{background:var(--card)}
.wisdom-item p{margin:0;font-size:15px;line-height:1.5}
.wisdom-item figcaption{margin-top:8px;font-size:12.5px;color:var(--muted)}
.wisdom-x{position:absolute;top:8px;right:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.wisdom-x::after{content:"";position:absolute;inset:-7px}
.wisdom-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.wisdom-empty{margin:0 0 22px}
/* discard a paused Pomodoro */
.pomo-resume-row{display:flex;align-items:center;gap:8px;margin:6px 4px 2px}
.pomo-resume-row .pomo-resume{flex:1;margin:0}
.pomo-resume-x{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--muted);position:relative;box-shadow:var(--raise)}
.pomo-resume-x::after{content:"";position:absolute;inset:-4px}
.pomo-resume-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.clean .pomo-resume-x{background:var(--card)}
/* bottom shelf: the selected tab is just the accent colour (icon, label and soft pill) */
.nav .selected [data-icon]{color:inherit}
/* v111: violet uses exactly the same neutral surfaces as orange (base, shadows, text) in every look; only the accent changes (Andy 25/10). */
html[data-accent=violet]{--base:#eef0f3;--hi:rgba(255,255,255,.95);--lo:rgba(160,166,180,.5);--edge-hi:rgba(255,255,255,.85);--edge-lo:rgba(140,146,160,.3);--ink:#20232a;--muted:#555b68}
html[data-accent=violet].clean{--base:#fff;--card:#fff;--glow:rgba(85,70,230,.32);--tint:rgba(85,70,230,.10)}
@media(prefers-color-scheme:dark){html[data-accent=violet]{--base:#1f2126;--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:#eef0f4;--muted:#a8aebb}
  html[data-accent=violet].clean{--base:#141517;--card:#1d1f23;--glow:rgba(164,155,255,.28);--tint:rgba(164,155,255,.12)}}

/* Pomodoro timer: the Clear your head button sits centred between the dial and the card bottom */
.app.pomo-run .focus-extras #wander{margin-top:0}
.app.pomo-run .focus-extras{margin-top:4px;margin-bottom:4px}

.wake-card{position:relative}
.wake-card{overflow:visible}

#wakeSet svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}

/* Progress stats: equal, centred cards; the saved line has its own strip so nothing gets pushed */
.stats .stat{position:relative;justify-content:center;min-height:132px;padding:14px 6px 26px}
.stats .stat small{white-space:nowrap}
.stats .stat-saved{position:absolute;left:0;right:0;bottom:10px}

.pomo-resume .pomo-thumb svg{width:100%;height:100%;fill:initial}

.pomo-resume>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* v102: the lava app icon is the logo too */
.logo.line{overflow:hidden;padding:0;background:none!important}
.logo .logo-img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}


/* break: pale mint scene → dark clock text in both themes */
.pomo-stage:has(.scene.sc-break) .pomo-time{color:#1d3a30;text-shadow:0 0 10px rgba(255,255,255,.85)}.pomo-stage:has(.scene.sc-break) .pomo-sub{color:#2f5a4c;text-shadow:0 0 6px rgba(255,255,255,.8)}

/* ---------- v111 streamline: quick add + More options fold, mission time slider ---------- */
.drawer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--spring),opacity .3s var(--ease)}
.drawer>.drawer-in{overflow:hidden;min-height:0;padding:0 8px;margin:0 -8px}
.drawer.open{grid-template-rows:1fr;opacity:1}
.drawer.open>.drawer-in{padding-top:8px;padding-bottom:8px}
.quick-row{display:flex;gap:10px;align-items:center}
.quick-row input{flex:1;min-width:0}
.send-btn{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent);background:linear-gradient(135deg,var(--accent-2),var(--accent));box-shadow:var(--raise-sm),0 8px 18px var(--glow);transition:transform .2s var(--spring)}
.send-btn:active{transform:scale(.9)}
.send-btn svg{width:22px;height:22px;stroke-width:2.4}
.more-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:6px 0 2px;padding:0 2px;background:none;border:0;color:var(--muted);font-size:13px;font-weight:650;text-align:left}
.more-toggle small{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.more-toggle [data-icon] svg,.time-toggle [data-icon] svg{width:16px;height:16px;transition:transform .4s var(--spring)}
.more-toggle[aria-expanded=true] [data-icon] svg,.time-toggle[aria-expanded=true] [data-icon] svg{transform:rotate(90deg)}
.time-toggle{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;margin:14px 0 6px;padding:10px 16px;border:0;border-radius:20px;background:var(--base);box-shadow:var(--raise-sm);color:var(--ink);text-align:left;transition:box-shadow .2s var(--ease),transform .3s var(--spring)}
.time-toggle:active{transform:scale(.98)}
.time-toggle[aria-expanded=true]{box-shadow:var(--inset)}
.time-toggle .emo{width:30px;height:30px}
.time-toggle .tt-copy{display:grid;gap:1px;flex:1;min-width:0}
.time-toggle .tt-copy span{font-size:12px;color:var(--muted);font-weight:600}
.time-toggle .tt-copy b{font-size:16px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time-toggle.set .tt-copy b{color:var(--ink)}
.clean .time-toggle{background:var(--card)}
.slide-read{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 4px 0}
.slide-read b{font-size:30px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.slide-read b.bump{animation:slideBump .32s var(--spring)}
@keyframes slideBump{from{transform:translateY(5px) scale(.96);opacity:.5}}
.slide-read small{font-size:13px;color:var(--muted);font-weight:600}
.big-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:20px 0 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent)) no-repeat 0 0/calc(18px + (100% - 36px) * var(--f,.3)) 100%,var(--base);box-shadow:var(--inset);outline-offset:6px}
.big-range::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm),inset 0 0 0 9px var(--accent);transition:transform .25s var(--spring);cursor:grab}
.big-range:active::-webkit-slider-thumb{transform:scale(1.14)}
.big-range::-moz-range-thumb{width:36px;height:36px;border:0;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm),inset 0 0 0 9px var(--accent)}
.clean .big-range{background-color:var(--card)}
.clean .big-range::-webkit-slider-thumb{background:var(--card)}
.slide-ticks{position:relative;height:16px;margin:0 18px}
.slide-ticks span{position:absolute;left:calc(var(--x) * 100%);transform:translateX(-50%);font-size:11px;font-weight:650;color:var(--muted)}
.slide-links{display:flex;justify-content:space-between;gap:12px;margin:10px 0 2px}
.slide-links .link{min-height:40px;font-size:13px}
#missionSlot{margin-top:6px}
@media (prefers-reduced-motion:reduce){.drawer,.time-toggle,.send-btn{transition:none}.slide-read b.bump{animation:none}}

/* v112: Clean bottom bar follows the accent (it was hard-coded lavender). The splash sits ABOVE the blob: the tapped tab is selected at once, so the blob used to hide it. */
.clean .nav-button.selected::before{z-index:-2;background:linear-gradient(140deg,color-mix(in srgb,var(--accent-2) 14%,#fff),color-mix(in srgb,var(--accent-2) 26%,#fff) 55%,color-mix(in srgb,var(--accent-2) 18%,#fff));box-shadow:0 4px 14px -6px var(--glow)}
.clean .nav-button::after{z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 50%,transparent),transparent 70%)}
@media(prefers-color-scheme:dark){.clean .nav-button.selected::before{background:linear-gradient(140deg,color-mix(in srgb,var(--accent-2) 20%,var(--card)),color-mix(in srgb,var(--accent-2) 30%,var(--card)) 55%,color-mix(in srgb,var(--accent-2) 22%,var(--card)));box-shadow:0 4px 14px -6px rgba(0,0,0,.6)}.clean .nav-button::after{background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 45%,transparent),transparent 70%)}}

/* v114: decide at Go: 5 · 15 · 25 min or Just go */
.timesup.gopick{grid-template-columns:repeat(4,1fr);gap:10px}
.timesup.gopick button{min-height:76px;gap:2px}
.timesup.gopick strong{font-size:20px;line-height:1.1}
.timesup.gopick small{font-size:11px;color:var(--muted);font-weight:650}
.timesup.gopick [data-go=up] strong{font-size:13px}
.timesup.gopick [data-go=up]{color:var(--accent)}
.clean .timesup.gopick button{background:var(--card)}

/* v118: the running mission's name on the Focus tabs is tappable to edit it */
#scopeDay.editable::after{content:"";display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px;background:currentColor;opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20h4L19 9l-4-4L4 16z%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 20h4L19 9l-4-4L4 16z%27/%3E%3C/svg%3E") center/contain no-repeat}

/* v120: Tasks list uses Today's list rows (tap the name to edit) */
.all-list{margin:0}
.trow-open{display:flex;align-items:center;gap:8px;flex:1;min-width:0;min-height:52px;padding:0;border:0;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.trow-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
.trow-open .r-emo{flex:0 0 auto}
.done-body.today-list{padding-top:4px;background:none;box-shadow:none}

/* v122: scenes on the normal Focus dial (Classic = the original lamp). Hold the dial to choose. */
.app.task-scene:not(.pomo) #timerRing>:not(.dial-well):not(#taskStage):not(.burst):not(.saved){display:none!important}
.app.pomo #taskStage{display:none!important}
.task-stage{cursor:pointer;-webkit-touch-callout:none;user-select:none}
#timerRing{-webkit-touch-callout:none}
#focusCard.scene-picking #timerRing{animation:dialWiggle .34s ease-in-out infinite alternate}
@keyframes dialWiggle{from{transform:rotate(-1.6deg) scale(.97)}to{transform:rotate(1.6deg) scale(.97)}}
.scene-pick{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 2px}
.scene-pick[hidden],.scene-hint[hidden]{display:none!important}
.scene-name{min-width:132px;text-align:center;font-weight:750;font-size:15px;font-variant-numeric:tabular-nums}
.scene-hint{margin:6px auto 0;text-align:center;font-size:12px;font-weight:600;color:var(--muted)}
#focusCard.scene-picking .controls,#focusCard.scene-picking .timesup,#focusCard.scene-picking .gopick{opacity:.35;pointer-events:none;transition:opacity .2s}
@media (prefers-reduced-motion:reduce){#focusCard.scene-picking #timerRing{animation:none;outline:2px dashed var(--accent);outline-offset:6px;border-radius:50%}}
/* the task hint line is longer than Pomodoro's: keep it inside the circle (Bloom sits low under the flower) */
.task-stage .pomo-sub{max-width:64%;text-align:center;line-height:1.25}
.task-stage:has(.scene.sc-bloom) .pomo-read{padding-bottom:15%}
.task-stage:has(.scene.sc-bloom) .pomo-sub{max-width:50%}

/* v123: emoji on the Focus tabs */
.focus-scope button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0}
.focus-scope button .emo{width:16px;height:16px;flex:none}
.focus-scope button>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scopeDay.editable::after{flex:none}
/* Pomodoro: Clear your head + tick-off list, side by side in the middle */
.app.pomo-run .focus-extras #wander:not([hidden])+#pomoList:not([hidden]){margin-left:14px}
.app.pomo-run .focus-extras #wander:has(+#pomoList:not([hidden])){margin-right:0}
.app.pomo-run .focus-extras #pomoList{font-size:0;gap:0;flex:none!important;width:48px;min-width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;margin-right:auto}
.app.pomo-run #pomoList .emo{width:22px;height:22px}
#pomoList[hidden]{display:none!important}
#pomoTasksDialog .today-list{margin-top:4px}
/* Balance: the yin yang fills the circle, no stray colour behind it */
.sc-yinyang .sc-halo,.sc-yinyang .sc-yshadow{display:none}
.sc-yinyang .sc-svg{transform:scale(1.32);transform-origin:50% 50%}
/* Study: livelier water. A third wave, a gentle bob, light shimmer and rising bubbles */
.sc-tide .sc-water{animation:scBob 6s ease-in-out infinite}
@keyframes scBob{0%,100%{translate:0 0}50%{translate:0 -3px}}
.sc-tide .sc-w3{animation:scDrift 6s linear infinite reverse}
.sc-tide .sc-shine{animation:scShine 4.5s ease-in-out infinite}
@keyframes scShine{0%,100%{opacity:.15}50%{opacity:.5}}
.sc-tide .sc-bub{animation:scBub 5s ease-in infinite;opacity:0}
.sc-tide .sc-bub:nth-child(2){animation-delay:-1.4s;animation-duration:6.5s}.sc-tide .sc-bub:nth-child(3){animation-delay:-2.9s;animation-duration:4.4s}.sc-tide .sc-bub:nth-child(4){animation-delay:-3.8s;animation-duration:7s}.sc-tide .sc-bub:nth-child(5){animation-delay:-.6s;animation-duration:5.6s}
@keyframes scBub{0%{opacity:0;transform:translateY(0)}15%{opacity:.75}85%{opacity:.6}100%{opacity:0;transform:translateY(-70px)}}

/* v124: a running task = the calm Pomodoro screen. No aura; controls fade out (they keep their place) until you tap the dial. */
.app.focusing:not(.pomo) .dial::before{display:none!important}
.app.focusing:not(.pomo) #focusCard>.controls,.app.focusing:not(.pomo) #soundPick,.app.focusing:not(.pomo) #autoPick,.app.focusing:not(.pomo) .yt-line{transition:opacity .45s ease,visibility .45s}
.app.focusing:not(.pomo):not(.task-reveal) #focusCard>.controls,.app.focusing:not(.pomo):not(.task-reveal) #soundPick,.app.focusing:not(.pomo):not(.task-reveal) #autoPick,.app.focusing:not(.pomo):not(.task-reveal) .yt-line{opacity:0;visibility:hidden;pointer-events:none}
.app.focusing:not(.pomo) .focus-extras{position:relative;justify-content:center}
.app.focusing:not(.pomo) .focus-extras #autoPick{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.app.focusing:not(.pomo) .focus-extras #soundPick{position:absolute;right:0;left:auto;top:50%;transform:translateY(-50%)}
.app.focusing:not(.pomo) .focus-extras :is(#wander,#runDone){font-size:0;gap:0;flex:none!important;width:48px!important;min-width:48px;height:48px;padding:0;justify-content:center;border-radius:50%}
.app.focusing:not(.pomo) .focus-extras #wander{margin-left:auto;margin-right:0}
.app.focusing:not(.pomo) .focus-extras #runDone{margin-left:14px;margin-right:auto}
.app.focusing:not(.pomo) :is(#wander,#runDone) .emo{width:24px;height:24px}
#runDone[hidden]{display:none!important}

/* v125: free-flow break nudge */
.timesup.ffbreak{grid-template-columns:repeat(2,1fr)}
.timesup.ffbreak .ffb-msg{grid-column:1/-1;margin:0;text-align:center;font-weight:700;font-size:15px}
.timesup.ffbreak button{min-height:76px}

/* v127: running task and running Pomodoro share one layout. Faded controls take no space; one centred icon row: music · brain · ✅ */
.app.focusing:not(.pomo):not(.task-reveal) #focusCard>.controls{display:none}
.app:is(.pomo-run,.focusing:not(.pomo)) .focus-extras{display:flex;justify-content:center;align-items:center;gap:14px;position:relative}
.app:is(.pomo-run,.focusing:not(.pomo)) .focus-extras #soundPick{position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;order:-1;min-width:48px;width:auto;height:48px;min-height:48px;margin:0!important}
.app:is(.pomo-run,.focusing:not(.pomo)) .focus-extras #soundPick.icon-only{width:48px;padding:0;border-radius:50%}
.app:is(.pomo-run,.focusing:not(.pomo)) .focus-extras :is(#wander,#runDone,#pomoList){margin:0!important}
.app.focusing:not(.pomo) .focus-extras #autoPick{display:none!important}
.app.focusing:not(.pomo) .focus-extras{margin-top:4px;margin-bottom:4px}

/* v129: Lists. The Tasks heading is a dropdown; grouped sections */
.list-pick{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer;text-align:left}
.list-pick svg{width:20px;height:20px;transform:rotate(90deg);opacity:.5;flex:none;margin-top:4px}
.list-pick:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}
.list-head{margin-top:14px}
.list-head:first-child{margin-top:0}

/* v130: search, notepad lines, symbol pop-up, park as task */
.task-search{display:block;width:100%;min-height:44px;margin:0 0 12px;padding:0 16px;border:0;border-radius:14px;background:var(--base);box-shadow:var(--inset-sm);color:var(--ink);font:inherit;font-size:16px}
.clean .task-search{background:var(--card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--muted) 18%,transparent)}
.task-search::placeholder{color:var(--muted)}
.all-list .r-list>.trow+.trow{box-shadow:0 -1px 0 color-mix(in srgb,var(--muted) 14%,transparent)}
.sym-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;margin:4px 0 8px;padding:6px 14px 6px 8px;border:0;border-radius:16px;background:var(--base);box-shadow:var(--raise-sm);color:var(--ink);font:inherit;font-size:14px;font-weight:650;text-align:left}
.clean .sym-btn{background:var(--card)}
.sym-btn .sym-cur{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;box-shadow:var(--inset-sm)}
.sym-btn .sym-cur .emo{width:28px;height:28px}
.sym-btn .sym-label{flex:1;min-width:0}
.sym-btn [data-icon] svg{width:16px;height:16px;transition:transform .35s var(--spring)}
.sym-btn[aria-expanded=true] [data-icon] svg{transform:rotate(90deg)}
.sym-drawer .emoji-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));justify-items:center;overflow:visible;scroll-snap-type:none;margin-bottom:10px}
.park-as{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.park-as .soft-btn{min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px}
.park-as [data-icon] svg{width:16px;height:16px}

/* v131: one + everywhere (not Focus). Sits above the tab bar; hold to fan out Task · List · Routine · Thought */
.fab{position:absolute;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:30;width:58px;height:58px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,var(--g1),var(--g2) 45%,var(--g3));box-shadow:0 10px 24px -6px var(--glow),var(--raise-sm),inset 0 1px 0 rgba(255,255,255,.35);touch-action:none;-webkit-touch-callout:none;user-select:none;transition:transform .35s var(--spring)}
.fab[hidden]{display:none}
.fab svg{width:26px;height:26px;stroke-width:2.6;transition:transform .35s var(--spring)}
.fab:active{transform:scale(.92)}
.fab.open svg{transform:rotate(45deg)}
.fab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.app:has(#fab:not([hidden])) .scroll{padding-bottom:110px}
.app::after{content:"";position:absolute;inset:0;z-index:29;background:rgba(18,16,28,.38);opacity:0;pointer-events:none;transition:opacity .22s ease}
.app.fab-on::after{opacity:1;pointer-events:auto}
/* the page itself blurs (backdrop-filter on the scrim drew nothing in WebKit or Chrome here) */
.app>:not(.fab):not(.fab-menu){transition:filter .28s ease}
.app.fab-on>:not(.fab):not(.fab-menu){filter:blur(7px) saturate(.75)}
@media (prefers-reduced-motion:reduce){.fab,.fab svg,.fab-menu button{transition:none}}

/* v132: Adding to a list: a chip with ✕ under the box */
.to-list{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:4px 4px 4px 10px;border-radius:999px;background:var(--tint);color:var(--accent);font-size:14px;font-weight:700;max-width:100%}
.to-list[hidden]{display:none}
.to-list .emo{width:20px;height:20px}
.to-list-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.to-list-x{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit;position:relative}
.to-list-x::after{content:"";position:absolute;inset:-6px}
.to-list-x svg{width:14px;height:14px;stroke-width:2.4}

/* v133: the + feels better. Nothing on the page gets selected while you hold; it swells and a ring fills; options spring up */
html.no-select,html.no-select *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
.fab,.fab-menu,.fab-menu *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.fab::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--g1) calc(var(--fill,0)*1turn),transparent 0);opacity:0;z-index:-1;-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%)}
.fab.holding{transform:scale(1.08)}
.fab.holding::before{opacity:.9;animation:fabFill .3s linear forwards}
@property --fill{syntax:'<number>';inherits:false;initial-value:0}
@keyframes fabFill{from{--fill:0}to{--fill:1}}
@media (prefers-reduced-motion:reduce){.fab.holding::before{animation:none;opacity:.6}}
/* v135: app-like, no iOS text selection/callout from long presses anywhere; typing fields stay selectable */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* v135: in the running icon row the music button wears the same surround as the cloud and tick */
.app:is(.pomo-run,.focusing:not(.pomo)) .focus-extras #soundPick{background:transparent;box-shadow:var(--raise)}


/* v137: the + menu is a marking menu (Pinterest-style arc). Options fan out up-left of the +, away from the thumb; you pick by nudging toward one, so your thumb never covers it. The aimed-at bubble pops out along its ray and its name shows above it. */
#fabMenu{position:absolute;right:calc(max(18px,env(safe-area-inset-right,0px)) + 29px);bottom:calc(127px + env(safe-area-inset-bottom,0px));width:0;height:0;z-index:31}
#fabMenu[hidden]{display:none}
#fabMenu button{position:absolute;left:-28px;top:-28px;width:56px;height:56px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--base);box-shadow:var(--raise);color:var(--ink);font:inherit;isolation:isolate;opacity:0;transform:translate(0,0) scale(.3);transition:opacity .2s ease,transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;transition-delay:calc(var(--i,0)*40ms)}
.clean #fabMenu button{background:var(--card)}
#fabMenu button[hidden]{display:none}
#fabMenu.in button{opacity:1;transform:translate(var(--x),var(--y))}
#fabMenu button::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;background:linear-gradient(160deg,var(--g1),var(--g2) 45%,var(--g3));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);opacity:0;transition:opacity .2s ease}
#fabMenu button .emo{width:30px;height:30px;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .2s}
#fabMenu button>span:first-child{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:700;line-height:1;color:var(--ink);background:var(--base);box-shadow:var(--raise-sm);padding:5px 9px;border-radius:999px;transition:background-color .2s,color .2s,box-shadow .2s,opacity .2s}
#fabMenu.in.sliding button{transition-delay:0s;transform:translate(var(--x),var(--y)) scale(.86)}
#fabMenu.in.sliding button:not(.hot) .emo{opacity:.45}
#fabMenu.in.sliding button:not(.hot)>span:first-child{opacity:0}
.clean #fabMenu button>span:first-child{background:var(--card)}
#fabMenu.in.sliding button.hot{transform:translate(calc(var(--x)*1.08),calc(var(--y)*1.08)) scale(1.24);box-shadow:0 18px 34px -12px var(--glow),0 6px 14px -8px var(--glow)}
#fabMenu.sliding button.hot::before,#fabMenu.picking button.chosen::before{opacity:1}
#fabMenu.sliding button.hot .emo{transform:scale(1.1) rotate(-8deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.22))}
#fabMenu.in.sliding button.hot>span:first-child{background:var(--ink);color:var(--base);box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
#fabMenu.in.picking button{opacity:0;transform:translate(var(--x),var(--y)) scale(.6);transition:opacity .16s ease,transform .2s ease}
#fabMenu.in.picking button.chosen{opacity:1;transform:translate(calc(var(--x)*1.14),calc(var(--y)*1.14)) scale(1.45);transition:transform .17s cubic-bezier(.34,1.56,.64,1)}
#fabMenu button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){#fabMenu button,#fabMenu button .emo{transition:opacity .15s ease}}
/* v138: lower-left bubbles carry their name on the LEFT (above them sits the next bubble); the aimed-at bubble draws on top */
#fabMenu button.side>span:first-child{bottom:auto;top:50%;left:auto;right:calc(100% + 8px);transform:translateY(-50%)}
#fabMenu button.hot,#fabMenu button.chosen{z-index:2}
/* v140: Clean nav, a touch more lava: bigger selected blob, a slightly wider, stronger splash */
.clean .nav-button.selected::before{inset:1px 2px}
.clean .nav-button::after{width:76px;height:76px;margin:-38px 0 0 -38px;background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 60%,transparent),transparent 70%)}
.clean .nav-button.splash::after{animation:navSplash .7s var(--ease)}
@keyframes navSplash{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(1.95)}}
@media(prefers-reduced-motion:reduce){.clean .nav-button.splash::after{animation:none}}
/* v141: wake card, "No alarm tomorrow" sits under the Set button; when skipped, a quiet way back */
.wake-skip{display:block;margin:6px auto 0;color:var(--muted);font-weight:650}
.wake-back{display:block;margin:0 auto 8px;font-weight:650}
/* v142: Week view (Today | Tomorrow | Week). Strip = pinned, raised; each day = a quiet section with routine chips + task rows. */
.wk-nav{display:flex;gap:8px;align-self:center}
.wk-arrow{width:36px;height:36px}
.wk-arrow:disabled{opacity:.35;box-shadow:none}
.wk-arrow .left svg{transform:rotate(180deg)}
.wk-strip{position:sticky;top:0;z-index:6;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin:0 -4px 14px;padding:8px 4px;border-radius:22px;background:var(--base);box-shadow:var(--raise-sm)}
.clean .wk-strip{background:var(--card)}
.wk-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:4px 0 6px;border-radius:14px;color:var(--ink);transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.wk-dow{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.wk-cell.wkend .wk-dow{opacity:.75}
.wk-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;font-weight:750;font-variant-numeric:tabular-nums}
.wk-cell.today .wk-num{color:var(--on-accent);background:var(--accent);box-shadow:0 4px 12px -5px var(--glow)}
.wk-cell.today .wk-dow{color:var(--accent)}
.wk-cell.seen{box-shadow:var(--inset-sm)}
.clean .wk-cell.seen{box-shadow:none;background:color-mix(in srgb,var(--accent-2) 12%,transparent)}
.wk-load{width:62%;height:4px;border-radius:4px;background:color-mix(in srgb,var(--muted) 18%,transparent);overflow:hidden}
.wk-load i{display:block;height:100%;width:calc(var(--h,0)*100%);border-radius:4px;background:var(--accent-2);transition:width .5s var(--ease)}
.wk-dots{display:flex;gap:3px;height:4px}
.wk-dots i{width:4px;height:4px;border-radius:50%;background:var(--accent)}
.wk-day{margin:0 0 14px;padding:2px 0 4px;border-radius:20px;scroll-margin-top:96px}
.wk-day.flash{animation:wkFlash 1s var(--ease)}
@keyframes wkFlash{0%{background:color-mix(in srgb,var(--accent-2) 16%,transparent)}100%{background:transparent}}
.wk-head{display:flex;align-items:center;gap:8px;margin:0 4px 8px;min-height:36px}
.wk-head h3{display:flex;align-items:baseline;gap:8px;margin:0;flex:1;min-width:0;font-size:16px;font-weight:750}
.wk-date{font-size:12.5px;font-weight:600;color:var(--muted)}
.wk-day.is-today .wk-name{color:var(--accent)}
.wk-meta{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.wk-day.free .wk-head{opacity:.7}
.wk-day.free{margin-bottom:6px}
.wk-add{position:relative;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--accent);box-shadow:var(--raise-sm);flex-shrink:0}
.wk-add::after{content:'';position:absolute;inset:-7px}
.wk-add:active{box-shadow:var(--inset-sm)}
.wk-add svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.wk-rts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.wk-rt{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px 0 8px;border-radius:999px;font-size:13px;font-weight:650;color:var(--ink);box-shadow:var(--raise-sm)}
.wk-rt .emo{width:20px;height:20px}
.wk-rt b{font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.wk-rt[aria-expanded=true]{box-shadow:var(--inset-sm);color:var(--accent)}
.clean .wk-rt{box-shadow:none}
.clean .wk-rt[data-tint=peach]{background:var(--t-peach)}.clean .wk-rt[data-tint=lilac]{background:var(--t-lilac)}.clean .wk-rt[data-tint=sky]{background:var(--t-sky)}.clean .wk-rt[data-tint=rose]{background:var(--t-rose)}.clean .wk-rt[data-tint=mint]{background:var(--t-mint)}
.clean .wk-rt[aria-expanded=true]{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent-2) 55%,transparent)}
.wk-items{margin:0 0 10px;padding:4px 12px;border-radius:20px;box-shadow:var(--inset-sm)}
.clean .wk-items{box-shadow:none;background:var(--card)}
.wk-task{margin-bottom:8px}
.wk-weekly{margin:-4px 6px 14px;font-size:12.5px;color:var(--muted)}
.wk-overdue .wk-name{color:var(--danger)}
.wk-move{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent);min-height:36px}
.wk-later-date{margin:12px 6px 6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.wk-anytime{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 6px;padding:12px 14px;border-radius:18px;font-size:14px;font-weight:650;color:var(--ink);box-shadow:var(--raise-sm)}
.clean .wk-anytime{box-shadow:none;background:var(--card)}
.wk-anytime .emo{width:22px;height:22px}
.wk-anytime span{flex:1;text-align:left}
.wk-anytime svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:359px){.wk-num{width:26px;height:26px;font-size:14px}.wk-dow{font-size:9.5px}.wk-meta{font-size:11px}}
@media(prefers-reduced-motion:reduce){.wk-day.flash{animation:none}}
/* the pinned strip hides what scrolls up behind it (the scroller's top padding would let a sliver show) */
.wk-strip::before{content:'';position:absolute;left:-24px;right:-24px;top:-12px;height:12px;background:var(--base);z-index:-1}
/* v143: Progress, "Where your focus went": a ranked list, one hue (same accent as Focus per day); emoji + name carry identity, bar = share of the top. Tap a row for what it was. */
.mix{margin:12px 0 14px}
.mix[hidden]{display:none}
.mix-lead{margin:-4px 4px 12px;font-size:15px;font-weight:550;color:var(--ink);line-height:1.4}
.mix-lead b{font-weight:800;color:var(--accent)}
.mix-rows{display:grid;gap:2px}
.mix-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:auto 6px;column-gap:10px;row-gap:6px;align-items:center;width:100%;min-height:52px;padding:8px 4px;border-radius:14px;text-align:left;color:var(--ink)}
.mix-row .emo{grid-row:1/3;width:26px;height:26px}
.mix-name{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mix-row.top .mix-name{font-weight:800}
.mix-time{font-size:12.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mix-bar{grid-column:2/4;height:6px;border-radius:4px;background:var(--track);overflow:hidden}
.mix-bar i{display:block;height:100%;width:calc(var(--w,0)*100%);border-radius:4px;background:var(--accent);opacity:.45;transition:width .6s var(--spring)}
.mix-row.top .mix-bar i{opacity:1}
.mix-row[aria-expanded=true]{background:color-mix(in srgb,var(--accent-2) 10%,transparent)}
.mix-items{margin:2px 4px 8px 42px;padding:2px 0}
.mix-items p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:6px 0;font-size:13px;font-weight:550}
.mix-items p+p{border-top:1px solid var(--track)}
.mix-items span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mix-items small{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mix-items .mix-more{color:var(--muted);font-size:12.5px}
@media(prefers-reduced-motion:reduce){.mix-bar i{transition:none}}
.mix-row{box-shadow:none;background:none}
.mix-row+.mix-row{border-top:1px solid var(--track);border-radius:0}
.mix-row[aria-expanded=true]{border-radius:14px}
.mix-initial{grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent-2) 18%,transparent)}
/* v144: Progress stats re-laid (Andy: "big stretched cards look long and weird"). One wide focus card (emoji · big time · "focused", saved on the right),
   then two short side-by-side cards (emoji · number · label). Nothing wraps, nothing towers. */
.stats{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stats .stat{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;min-height:0;padding:12px 14px;text-align:left;border-radius:20px}
.stats .stat [data-emoji]{margin:0;flex-shrink:0;line-height:0}
.stats .stat .emo{width:26px;height:26px}
.stats .stat strong{font-size:24px;line-height:1}
.stats .stat small{font-size:12.5px;line-height:1.2;white-space:normal}
.stats .hero-stat{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:end;padding:14px 18px}
.stats .hero-stat [data-emoji]{grid-row:1/3;align-self:center}
.stats .hero-stat .emo{width:38px;height:38px}
.stats .hero-stat strong{grid-row:1/3;align-self:center;font-size:40px;white-space:nowrap}
.stats .hero-stat small:not(.stat-saved){grid-column:3;grid-row:1/3;align-self:center;font-size:14px;font-weight:600}
.stats .stat-saved{position:static;grid-column:3;grid-row:2;align-self:end;justify-self:end;text-align:right}
.stats .hero-stat:has(.stat-saved:not(:empty)) small:not(.stat-saved){grid-row:1;align-self:end}
.stats .stat-saved:not(:empty){background:rgba(255,255,255,.9);padding:2px 8px;border-radius:999px}
.stats .stat-saved:empty{display:none}
@media (max-width:359px){.stats .hero-stat strong{font-size:34px}.stats .stat strong{font-size:21px}.stats .stat{padding:11px 12px;gap:8px}}

/* v146: a scene fills the whole dial (the 9% bezel and inner shadow were the old progress tube's groove); a bigger dial; the clock scales with the circle */
.pomo-stage{inset:0;box-shadow:none;container-type:size}
.app.task-scene:not(.pomo) .dial-well,.app.pomo-run .dial-well{display:none}
.app.task-scene:not(.pomo) #timerRing,.app.pomo-run #timerRing{--size:max(184px,min(316px,84vw,calc(100dvh - 400px)))!important}
.pomo-time{font-size:24cqw}
.pomo-sub{font-size:clamp(12px,4.8cqw,15px)}
.pomo-stage:has(.scene.sc-lofi) .pomo-time{font-size:19cqw}
.pomo-stage:has(.scene.sc-bloom) .pomo-time{font-size:18cqw}
.sc-yinyang .sc-svg{transform:scale(1.56)}
/* v146: Space: drifting nebula, far stars, a turning galaxy, a ringed giant with a moon going round it, an ice planet on a slow orbit, a satellite now and then */
.sc-bands{animation-duration:24s}
@keyframes scNeb{from{transform:translate(-5px,2px)}to{transform:translate(6px,-3px)}}
.sc-neb ellipse{animation:scNeb 28s ease-in-out infinite alternate}.sc-neb .sc-n2{animation-duration:36s;animation-direction:alternate-reverse}.sc-neb .sc-n3{animation-duration:44s}
@keyframes scDust{to{stroke-dashoffset:-36}}
.sc-ringdust{stroke-dasharray:.5 1.6;animation:scDust 12s linear infinite}
.sc-far{transform-origin:90px 90px;animation:scWheel 420s linear infinite}
@keyframes scSat{0%{transform:translate(0,0);opacity:0}3%{opacity:1}50%{transform:translate(200px,-22px);opacity:1}51%,100%{transform:translate(200px,-22px);opacity:0}}
.sc-sat{animation:scSat 64s linear infinite}
.sc-blink{animation:scTw 1.4s steps(2,jump-none) infinite}
.sc-meteor{animation-duration:13s}

/* v147: Café (rainy evening) and Office (bright day to golden hour) */
.pomo-stage:has(.scene.sc-cafe) .pomo-read{justify-content:flex-start;padding-top:19%;gap:3px}.pomo-stage:has(.scene.sc-cafe) .pomo-time{font-size:19cqw}
.pomo-stage:has(.scene.sc-office) .pomo-read{justify-content:flex-start;padding-top:21%;gap:3px}.pomo-stage:has(.scene.sc-office) .pomo-time{font-size:20cqw;color:#3b3330;text-shadow:0 0 12px rgba(255,251,240,.95),0 0 3px rgba(255,251,240,.9)}.pomo-stage:has(.scene.sc-office) .pomo-sub{color:#5f5047;text-shadow:0 0 8px rgba(255,251,240,.95)}
.sc-bulb .g{opacity:0;transition:opacity 1.4s ease}.sc-bulb .c{transition:fill 1.4s ease}.sc-bulb.on .g{opacity:1;animation:scTw 5s ease-in-out infinite}.sc-bulb.on .c{fill:#ffe1a0}
.sc-bulb:nth-child(3n) .g{animation-delay:-1.7s}.sc-bulb:nth-child(4n) .g{animation-delay:-3.1s}
.sc-bo{animation:scTw 6s ease-in-out infinite}.sc-bo:nth-child(2n){animation-delay:-2s;animation-duration:8s}.sc-bo:nth-child(3n){animation-delay:-4s}
/* v149 café v2 (Andy's rainy-window reference): neon that hums and flickers, wet-street reflections, cars passing, the Edison bulb breathing */
@keyframes scNeon{0%,100%{opacity:1}46%{opacity:1}47%{opacity:.55}48%{opacity:1}73%{opacity:.85}}
.sc-neon{animation:scNeon 5s steps(1,end) infinite}.sc-n2{animation-duration:7s;animation-delay:-2s}.sc-n3{animation-duration:9s;animation-delay:-5s}.sc-n4{animation-duration:6.5s;animation-delay:-3.5s}
@keyframes scWet{0%,100%{opacity:.75;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.08)}}
.sc-wet rect{transform-box:fill-box;transform-origin:top;animation:scWet 3.2s ease-in-out infinite}.sc-wet rect:nth-child(2n){animation-delay:-1.4s;animation-duration:4.1s}
@keyframes scCar{0%{transform:translateX(-60px)}38%,100%{transform:translateX(330px)}}
.sc-car1{animation:scCar 17s linear infinite}.sc-car2{animation:scCar 23s linear infinite;animation-delay:-11s}
@keyframes scEdison{0%,100%{opacity:.85}50%{opacity:1}}.sc-edglow{animation:scEdison 4.6s ease-in-out infinite}
@keyframes scDrop{0%{transform:translateY(0);opacity:0}8%{opacity:.85}70%{opacity:.6}100%{transform:translateY(80px);opacity:0}}
.sc-drop{animation:scDrop 9s ease-in infinite}.sc-drop:nth-child(2){animation-delay:-3s;animation-duration:12s}.sc-drop:nth-child(3){animation-delay:-6s}.sc-drop:nth-child(4){animation-delay:-1.5s;animation-duration:11s}.sc-drop:nth-child(5){animation-delay:-7.5s;animation-duration:14s}
@keyframes scUmb{0%{transform:translateX(0)}45%,100%{transform:translateX(420px)}}
.sc-umb{animation:scUmb 30s linear infinite;animation-delay:-4s}
.sc-tree,.sc-mon{transform-box:fill-box;transform-origin:50% 100%;animation:scSway 6s ease-in-out infinite}.sc-mon{animation-duration:9s}
.sc-ivy{transform-box:fill-box;transform-origin:50% 0;animation:scSway 7s ease-in-out infinite reverse}
@keyframes scBirds{0%{transform:translate(-20px,0)}35%,100%{transform:translate(130px,-26px)}}
.sc-birds{animation:scBirds 30s linear infinite}
@keyframes scDogB{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.06)}}
.sc-dog{transform-box:fill-box;transform-origin:50% 100%;animation:scDogB 4.4s ease-in-out infinite}
@keyframes scType{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
.sc-type{transform-box:fill-box;transform-origin:left;animation:scType 9s steps(14) infinite}.sc-t2{animation-delay:1.2s}.sc-t3{animation-delay:2.4s}
.sc-cur{animation:scTw 1.1s steps(2,jump-none) infinite}
.sc-sun{transition:cy 1.2s ease,fill 2s ease}.sc-beam{transition:transform 1.2s ease}

/* v150: the Focus play / Keep going button = a soft glow that breathes (Andy: the hard orange aurora ring "looks crap") */
.clean .controls .play::before,html[data-accent].clean .controls .play::before{inset:-16px;-webkit-mask:none;mask:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--g2) 75%,transparent) 55%,color-mix(in srgb,var(--g1) 40%,transparent) 75%,transparent);filter:blur(8px);opacity:.8;animation:playGlow 6s ease-in-out infinite}
.clean .running .controls .play::before,html[data-accent].clean .running .controls .play::before{animation-duration:4s}
@keyframes playGlow{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.95;transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.clean .controls .play::before,html[data-accent].clean .controls .play::before{animation:none;opacity:.6}}

/* v151: Add sheet tidy. More options = one card of rows (value on the right); a row opens its own chips, one at a time. A pinned footer adds. */
.opt-card{border-radius:20px;background:var(--base);box-shadow:var(--raise-sm);padding:4px 0;margin:4px 0 6px}
.clean .opt-card{background:var(--card)}
.opt-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0;padding:6px 14px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:inherit;font-size:14px;font-weight:650;text-align:left;-webkit-tap-highlight-color:transparent}
.opt-card>.opt-row+.opt-row,.opt-card>.drawer+.opt-row,.opt-card>.opt-row+.drawer+.opt-row{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
.opt-row .emo,.opt-row [data-emoji] img,.opt-row>[data-emoji]{width:24px;height:24px;flex:none}
.opt-row .opt-name{flex:none}
.opt-row .opt-val{flex:1;min-width:0;text-align:right;color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opt-row [data-icon=chevron]{flex:none;color:var(--muted);transition:transform .3s var(--spring)}
.opt-row[aria-expanded=true] [data-icon=chevron]{transform:rotate(90deg)}
.opt-row.off{opacity:.45}
.opt-row[hidden]{display:none}
.opt-card .sym-btn{margin:0;min-height:52px;box-shadow:none;background:none;border-radius:0;padding-left:10px}
.opt-card .minutes.static{justify-content:space-between;cursor:default}
.opt-card .minutes.static label{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;font-weight:650;color:var(--ink)}
.opt-card .minutes .mini-round{width:36px;height:36px}
.opt-drawer>.drawer-in{padding-left:14px!important;padding-right:14px!important}
.opt-drawer .chips{margin:0}
.bells{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px}
.bells[hidden]{display:none}
.bells-lab{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--muted)}
.bells .chip{min-height:36px;padding:0 12px}
.bells .chip[aria-pressed=true]{color:var(--accent-text,var(--accent));box-shadow:var(--inset)}
.add-foot{display:none}
#addForm:has(#addMore.open) .add-foot{display:flex;gap:10px;position:sticky;bottom:0;z-index:3;margin:8px -22px 0;padding:12px 22px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,color-mix(in srgb,var(--base) 0%,transparent),var(--base) 28%)}
.add-foot .soft-btn{flex:0 0 auto;padding:0 18px;margin:0}
.add-foot .accent-btn{flex:1;margin:0}
#addDialog:has(#addMore.open){padding-bottom:0}

/* v152: urgent = a small coral dot before the name; the Tasks "Show" filter */
.urgent :is(.r-name,.today-copy strong,.pick-copy span)::before,.urgent-ico{content:'';display:inline-block;width:8px;height:8px;margin:0 7px 1px 4px;border-radius:50%;background:#ef5a45;box-shadow:0 0 0 3px rgba(239,90,69,.18);vertical-align:middle;flex:none}
.urgent-opt .urgent-ico{margin:0 9px 0 8px}
.urgent-opt .switch,.urgent-row .switch{transform:scale(.86);transform-origin:right center}
.urgent-row{margin:10px 0 4px}
.sort-link.on{color:var(--accent-text,var(--accent));font-weight:750}
#showTasks{margin-right:10px}
/* v158: a finish stays in the scene. The lava is the payoff: a press, a surge to full, the tick lands as it crests, one soft light, then the saving. Nothing flies about. */
#focusCard.celebrating #timerRing{--size:max(184px,min(316px,84vw,calc(100dvh - 400px)))!important}
.task-stage.is-done .pomo-read{display:none}
.fin-tick{display:none;position:absolute;inset:0;margin:auto;width:40%;height:40%;z-index:9;overflow:visible;pointer-events:none}
.task-stage.is-done .fin-tick{display:block}
.fin-tick path{fill:none;stroke:currentColor;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.celebrating .fin-tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:tickDraw .22s cubic-bezier(.45,0,.2,1) .43s forwards}
@keyframes tickDraw{to{stroke-dashoffset:0}}
.celebrating .dial{animation:finPress .34s var(--ease,ease-out)}
@keyframes finPress{0%{scale:1}26%{scale:.98}100%{scale:1}}
.celebrating :is(.sc-pool,.sc-blobs,.sc-water){transition-duration:.42s;transition-timing-function:cubic-bezier(.3,0,.15,1)}
.celebrating .task-stage::after{content:'';position:absolute;inset:0;z-index:8;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.55),transparent 66%);opacity:0;animation:finGlow .75s ease-out .62s}
@keyframes finGlow{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
.celebrating .dial::before,.celebrating .dial::after{animation:none!important;opacity:0!important}
.celebrating .dial-core::before{animation:none}
.celebrating :is(.controls,.focus-extras,.pager,.tools,.step-link,.wander,.yt-line,.tiles){opacity:0!important;pointer-events:none;transition:opacity .2s}
.saved,.celebrating .saved{bottom:17%;padding:0;background:none;box-shadow:none;z-index:9}
.saved{transform:translate(-50%,0)}
.celebrating .saved{animation:finSaved 1.35s linear .7s both}
@keyframes finSaved{0%{opacity:0}18%,82%{opacity:1}100%{opacity:0}}
.saved strong{color:inherit;font-size:15px;font-weight:650}
.saved small{display:none}
@media(prefers-color-scheme:light){.saved strong{color:inherit}}
@media(prefers-reduced-motion:reduce){.celebrating .dial,.celebrating .task-stage::after{animation:none}.celebrating .fin-tick path{animation:none;stroke-dashoffset:0}.celebrating .saved{animation:none;opacity:1}}
/* v161: room to breathe on Today and Tomorrow */
.day-block{margin-top:16px}.day-block>.section-head:first-child{margin-top:0}.day-block>.routine-card{margin-top:0;margin-bottom:0}
.start-day{margin-bottom:0}.done-block{margin-top:16px}
.routine-head.tap-open{gap:10px}
/* v159: just a length; a moved row glows so you can see where it went */
.length-only :is(.time-big,#timeQuick,#timeAddEnd,.bells,.hint){display:none!important}
.just-moved{animation:justMoved 1.7s ease-out}
@keyframes justMoved{0%,55%{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 0 22px color-mix(in srgb,var(--accent) 30%,transparent);border-radius:14px}100%{box-shadow:0 0 0 2px transparent;border-radius:14px}}
@media(prefers-reduced-motion:reduce){.just-moved{animation:none}}
/* v158: one form, notes, repeating rows, lists */
.edit-card{margin:12px 0}
.edit-card .time-big{margin:4px 0}
#editNotes,#addNotes,#itemNotes{width:100%;resize:vertical}
.note-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.note-links a,.note-full a{color:var(--accent-text,var(--accent));font-weight:650}
.note-full{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.5;margin:8px 0 12px;user-select:text;-webkit-user-select:text}
.focus-note{display:block;width:100%;min-height:36px;margin:6px 0 2px;padding:6px 14px;border-radius:12px;font-size:13.5px;color:var(--muted);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;box-shadow:none}
.focus-note::before{content:'';display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-1px;background:currentColor;-webkit-mask:var(--note-ico) center/contain no-repeat;mask:var(--note-ico) center/contain no-repeat}
.app.focusing:not(.task-reveal) .focus-note,.app.pomo .focus-note{display:none}
:root{--note-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h7l3 3v11H3zM5 6v1.5h6V6zm0 3v1.5h6V9zm0 3v1.5h4V12z' fill-rule='evenodd'/%3E%3C/svg%3E");--repeat-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l3 3-3 3'/%3E%3Cpath d='M4 11V9a4 4 0 0 1 4-4h12M7 22l-3-3 3-3'/%3E%3Cpath d='M20 13v2a4 4 0 0 1-4 4H4'/%3E%3C/svg%3E")}
.has-note :is(.r-meta,.today-copy small)::after,.is-repeat .r-meta::after{content:'';display:inline-block;width:12px;height:12px;margin-left:6px;vertical-align:-1px;background:var(--muted);-webkit-mask:var(--note-ico) center/contain no-repeat;mask:var(--note-ico) center/contain no-repeat}
.is-repeat .r-meta::after{-webkit-mask-image:var(--repeat-ico);mask-image:var(--repeat-ico)}
.rep-card{margin-top:10px;background:var(--card,var(--base));box-shadow:var(--raise-sm)}
.rep-card .r-check .r-emo{width:30px;flex:none}
.day-block>.fold+.rep-card{margin-top:10px}
.lists-row{display:flex;align-items:center;gap:8px;margin:8px 0}.lists-row input{flex:1;min-width:0;margin:0}
.park-as{grid-template-columns:1fr 1fr 1fr}
.park-lists{margin-top:8px}
/* v154: Today's cards are blocks you can drag; Tomorrow says what isn't on */
.day-block{display:block}.day-block.dragging-row{position:relative;z-index:5}
.day-block>.section-head:first-child{margin-top:22px}
.not-tom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 4px 0;font-size:13px;color:var(--muted)}
.not-tom>span{min-width:0}.not-tom-add{flex:none;min-height:44px;white-space:nowrap}
.not-tom-sum{width:calc(100% - 8px);min-height:44px;text-align:left;background:none;box-shadow:none;border-radius:0;padding:0}
.not-tom-sum svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--spring)}
.not-tom-sum.open svg{transform:rotate(180deg)}
.not-tom-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px;font-size:13px;color:var(--muted)}
.not-tom-row>span{min-width:0}
/* v154: a finished routine on Today taps open */
.routine-head.tap-open{cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}
.tap-chev{display:grid;place-items:center;margin-left:auto;width:24px;height:24px;color:var(--muted);transition:transform .3s var(--spring)}
.tap-chev.open{transform:rotate(90deg)}
.tap-chev svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:reduce){.tap-chev{transition:none}}
/* v153: hold menus stay on screen; too tall a menu scrolls */
.ctx-menu{max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
/* v153: before Go the dial shrinks so Go and the music row clear the nav; it grows back once running */
@media(orientation:portrait){.app.task-scene:not(.pomo):not(.focusing) #timerRing{--size:max(104px,min(316px,84vw,calc(100dvh - 584px)))!important}}
@container (max-width:150px){.task-stage .pomo-sub{display:none}}
#timerRing{transition:--p .3s linear,width .5s var(--spring)}
@media(prefers-reduced-motion:reduce){#timerRing{transition:none}}
@media(max-height:700px) and (orientation:portrait){.app.task-scene:not(.pomo):not(.focusing) .mission .status{display:none}}
@media(max-height:600px) and (orientation:portrait){.app.task-scene:not(.pomo):not(.focusing) #timerRing{--size:88px!important}}
/* v153: "Tap here to start your mix" has to show on the calm running screen too */
.app.focusing:not(.pomo) .yt-line.on.need-tap{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}

/* v161: fold arrows follow the text colour, so they show in dark */
.section-head.fold svg{fill:currentColor;stroke:currentColor;color:var(--ink)}
/* v164: clean-up. Flat everyday surfaces, one title style, nothing that repeats the + */
#todayTiles,.add-pair,#notesRecap,#listEyebrow{display:none!important}
#focusCard:not(.viewing-done) #status{display:none}
.hello h1,.sheet-head h2{font-weight:700;letter-spacing:-.03em}
.hello h1 b,.sheet-head h2 b,.list-pick b{font-weight:inherit}
.hello h1{font-size:30px}.sheet-head h2{font-size:24px}
#todayDate,#taskCount{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:13.5px}
.clean :is(.today-task,.seg,.soft-btn,.chip,.task-search,.card,.setting-row,.opt-card,.stepper-well,.wide-tile,.start-day,.idea,.wake-card,.note-item,.wk-day,.trow,.sort-link,.rep-card,.mini-round,.icon-button){box-shadow:none}
.clean :is(.today-task,.rep-card,.card,.start-day,.idea,.wake-card,.note-item,.opt-card,.setting-row,.wide-tile,.all-list){background:var(--card,#fff);border:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}
.clean .icon-button{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.clean .start-day{padding-block:12px}
.clean .start-day .go-disc{width:44px;height:44px}
.clean .start-day .go-disc::before,.clean .start-day .go-disc::after,.clean .start-day::before,.clean .start-day::after{display:none!important}
.clean .today-task+.today-task{margin-top:6px}
.clean .idea{margin-top:24px;background:none;border:0;padding-inline:4px}
#thought{min-height:64px;field-sizing:content}
.clean .card#noteForm{background:none;border:0;padding:0}
#tasksView .eyebrow{display:none!important}
/* v165: Settings sections, Wisdom fold, a smaller wake-up */
.set-sec{margin-top:10px;background:var(--card,#fff);border:1px solid color-mix(in srgb,var(--ink) 6%,transparent);border-radius:16px;padding:0 14px}
.set-sec>summary{list-style:none;min-height:50px;display:flex;align-items:center;justify-content:space-between;font-weight:650;font-size:15.5px;cursor:pointer}
.set-sec>summary::-webkit-details-marker{display:none}
.set-sec>summary::after{content:'›';font-size:20px;color:var(--muted);transition:transform .25s var(--spring)}
.set-sec[open]>summary::after{transform:rotate(90deg)}
.set-sec[open]{padding-bottom:12px}
.clean .set-sec .setting-row{background:none;border:0;padding:10px 0;margin:0}
.clean .set-sec .setting-row+.setting-row{border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:0}
.clean .set-sec .wide-tile{background:none;border:0;padding:8px 0;margin:0}
.clean .set-sec .wide-tile .tile-icon{display:none}
.set-sec h3{margin:12px 0 6px;font-size:13px;color:var(--muted);font-weight:600}.set-sec h3 [data-icon]{display:none}
#wisdomHead .emo{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
#wisdomHead{cursor:pointer}
#wisdomHead.shut .meta{opacity:.8}
.wake-card{padding:12px 14px}.wake-copy small{display:none}.wake-card #wakeSet{min-height:40px;margin-top:8px}.wake-card .wake-skip{min-height:36px;font-size:13px}.wake-card .wake-help{margin-top:2px}.wake-card .wake-help summary{font-size:12.5px;color:var(--muted);font-weight:500}
.clean .skip-chip{background:none;border:0;box-shadow:none;color:var(--accent-text,var(--accent));font-weight:600;padding:0 4px;min-height:36px}
.clean .routine-card .r-item>.icon-button{background:none;color:var(--muted)}
.clean .routine-card .routine-head>.icon-button{background:none}
.clean .routine-title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-load{display:none}
/* v166: everything presses like something real */
.clean :is(button:not(#fab):not([data-fab]),.tile,.wide-tile,summary,[role=button]){transition:scale .34s var(--spring),transform .34s var(--spring),background-color .2s,color .2s,opacity .2s}
.clean :is(button,.tile,.wide-tile,[role=button]):active{scale:.95;transition-duration:.08s}
.clean :is(.fab,.accent-btn,.play,.start-day):active{scale:.93}
.clean .routine-head:active,.clean .section-head.fold:active{scale:.985}
@media(prefers-reduced-motion:reduce){.clean :is(button,.tile,.wide-tile,[role=button]):active{scale:1}}
/* v166: the lava bar */
.nav{position:relative;touch-action:none;isolation:isolate}
.nav-lava{position:absolute;left:0;top:5px;bottom:5px;width:60px;z-index:-1;border-radius:22px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent-2) 16%,#fff),color-mix(in srgb,var(--accent-2) 30%,#fff));transition:transform .46s cubic-bezier(.3,1.5,.5,1),width .46s cubic-bezier(.3,1.5,.5,1),scale .3s var(--spring);pointer-events:none}
.nav.touching .nav-lava{scale:1.06 1.1}
.nav.sliding .nav-lava{transition:transform .07s linear,width .12s ease-out,scale .3s var(--spring);scale:1.04 1.16;border-radius:26px}
.clean .nav-button.selected::before{display:none!important}
.nav .nav-button svg,.nav .nav-button img{transition:scale .28s var(--spring)}
.nav .nav-button.near{color:var(--accent)}
.nav .nav-button.near svg{scale:1.18}
.nav.sliding .nav-button.selected:not(.near){color:inherit}
.nav.jiggle .nav-lava{opacity:0}
@media(prefers-reduced-motion:reduce){.nav-lava,.nav.sliding .nav-lava{transition:none;scale:1}}
.app:has(.nav.jiggle) .fab{display:none}
/* v167: running Focus is the sleep screen: a clean orb in the dark, nothing on the lava, thin time beneath, the task under that. Light is the option. */
.run-clock{display:none}
html:not(.focus-light):has(.app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo)) body{background:#060609}
html:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo){--base:#060609;--card:#121118;--ink:#ece9ff;--muted:#8e88a8;--tint:#1a1824;background:#060609;color:#ece9ff}
html:not(.focus-light) .app.focusing:not(.pomo) :is(.round,.sound-pill,.icon-button){background:#121118;box-shadow:none;color:#ece9ff}
html:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo) :is(.mission,.focus-scope,#focusNote){display:none!important}
html:not(.focus-light) .app.focusing.task-reveal:not(.pomo) .mission{display:block!important;background:#121118;box-shadow:none}
html:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo) #focusCard{background:none;box-shadow:none;border:0}
html:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo) #timerRing{--size:min(64vw,250px)!important;box-shadow:none;background:none;margin-bottom:24px}
html:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo) .task-stage{background:radial-gradient(circle at 50% 35%,#17142a,#0a0910 70%);box-shadow:0 0 0 1px rgba(185,176,255,.14),0 0 70px rgba(125,109,255,.22)}
html:not(.focus-light) .app.focusing:not(.pomo) .task-stage .pomo-read{display:none}
html:not(.focus-light) .app.focusing:not(.pomo) .run-clock{display:grid;justify-items:center;gap:4px;text-align:center;margin-bottom:22px}
.run-clock p{margin:0}
#runClockTime{font-size:64px;font-weight:200;letter-spacing:-.03em;line-height:1.05;color:#ece9ff;font-variant-numeric:tabular-nums}
#runClockTask{max-width:78vw;font-size:16px;font-weight:550;color:#8e88a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo) .fin-tick{color:#fff!important}
html:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo) .saved{color:#fff!important}
html:not(.focus-light) .app.focusing .nav-lava{opacity:0}
html:not(.focus-light) .app.focusing .nav,html:not(.focus-light) .app:has(#focusCard.celebrating) .nav{background:#0d0c12;box-shadow:none}
html:not(.focus-light) .app.focusing .veil,html:not(.focus-light) .app.focusing::before{background:transparent}
/* v167: the + is lava again: no ring, soft glow, a squash and a spring */
.clean .fab{box-shadow:0 8px 20px -8px var(--glow);transition:scale .42s cubic-bezier(.3,1.7,.5,1),transform .42s cubic-bezier(.3,1.7,.5,1),border-radius .3s}
.clean .fab:active{scale:.88 .84}
.fab::before{display:none!important}
.clean .fab.holding{transform:none;scale:1.16;animation:fabLava 1.1s ease-in-out infinite}
@keyframes fabLava{0%,100%{border-radius:50%}33%{border-radius:56% 44% 52% 48%/48% 56% 44% 52%}66%{border-radius:46% 54% 44% 56%/54% 46% 56% 44%}}
.clean .fab.open{scale:1.04;animation:fabPop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes fabPop{0%{scale:.82 .9}60%{scale:1.1 1.02}100%{scale:1.04}}
#fabMenu button{width:50px;height:50px;left:-25px;top:-25px}
#fabMenu button .emo{width:26px;height:26px}
@media(prefers-reduced-motion:reduce){.clean .fab,.clean .fab.holding,.clean .fab.open{animation:none;scale:1}}
html:not(.focus-light) .app:has(#focusCard.celebrating) .tiles{opacity:0;pointer-events:none}
html:not(.focus-light) .app:has(#focusCard.celebrating) .nav-lava{opacity:0}
html:not(.focus-light) .app:has(#focusCard.celebrating) .nav-button.selected{background:none}
html:not(.focus-light) .app:has(#focusCard.celebrating):not(.pomo) .run-clock{display:grid;justify-items:center;gap:4px;margin-bottom:22px;visibility:hidden}
html:not(.focus-light) .app:has(#focusCard.celebrating):not(.pomo) #focusCard{padding-top:46px}
.done-block .routine-card{margin-bottom:8px}
/* v168: nothing on the lava, ever. Idle and paused: time under the orb, everything fits with no scroll */
.app.task-scene:not(.pomo) .task-stage:not(.is-done) .pomo-read{display:none}
.app.task-scene:not(.pomo) .run-clock{display:grid;justify-items:center;gap:2px;text-align:center;margin:0 0 10px;cursor:pointer}
.app.task-scene:not(.pomo):not(.focusing) #runClockTime{font-size:46px;color:var(--ink)}
.app.task-scene:not(.pomo):not(.focusing) #runClockTask{font-size:13.5px;color:var(--muted)}
.app.task-scene:not(.pomo):not(.focusing) #timerRing{margin-bottom:12px}
@media(orientation:portrait){.app.task-scene:not(.pomo):not(.focusing) #timerRing{--size:max(96px,min(300px,84vw,calc(100dvh - 660px)))!important}}
#focusView>.tiles,#parkQuick,#pomoTile{display:none!important}
#timeAddEnd,#timeEndRow,#timeHint,#timeForm .bells-lab+*~.x{display:none!important}
#timeForm .bells{flex-wrap:wrap}
#timeForm .bells-lab{font-size:0}#timeForm .bells-lab svg{font-size:initial}
#timeForm .bells-lab::after{content:'Remind me';font-size:13.5px}
#timeFor{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:13.5px}
/* v169: rain falls along its own line, no bounce. Ripples spread from the lily. A ticking office clock. A slimmer pre-Go card. */
@keyframes scRainFall{0%{transform:translate(33px,-120px);opacity:0}8%{opacity:var(--rain-o,1)}92%{opacity:var(--rain-o,1)}100%{transform:translate(-33px,120px);opacity:0}}
.sc-rain{--rain-o:.45;animation:scRainFall 1.25s linear infinite!important}.sc-rain.sc-r2{--rain-o:.5;animation-duration:1.7s!important;animation-delay:-.7s!important}
.sc-lotus{transform-origin:90px 106px}
.sc-rp3{animation-delay:1.5s}
.sc-sh{transform-box:view-box;transform-origin:150px 62px;animation:scTick 60s steps(60) infinite}
@keyframes scTick{to{transform:rotate(360deg)}}
.app.task-scene:not(.pomo):not(.focusing) #focusCard .mission{padding-block:8px;min-height:0}
.app.task-scene:not(.pomo):not(.focusing) #activeIcon{width:44px;height:44px}
.app.task-scene:not(.pomo):not(.focusing) #focusScope{margin-bottom:8px}
.app.task-scene:not(.pomo):not(.focusing) .pager{margin-block:6px}
.app.task-scene:not(.pomo):not(.focusing) .controls{margin-bottom:6px}
.app.task-scene:not(.pomo):not(.focusing) .focus-extras{margin-top:0}
@media(prefers-reduced-motion:reduce){.sc-rain,.sc-sh{animation:none!important}}
.app.task-scene:not(.pomo):not(.focusing) .controls{margin-bottom:36px}
.app.task-scene:not(.pomo):not(.focusing) #focusView{padding-bottom:0}
@media(max-height:700px){.app.task-scene:not(.pomo):not(.focusing) #runClockTime{font-size:34px}.app.task-scene:not(.pomo):not(.focusing) #runClockTask{display:none}}
.app.task-scene:not(.pomo):not(.focusing) #viewScroll{padding-bottom:0}
/* v170: landscape, running: orb on the left, time on the right, nothing cut off */
@media(orientation:landscape) and (max-height:520px){
html:not(.focus-light) .app.focusing:not(.pomo) #focusCard{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:56px;width:100%;margin:auto;padding:0}
html:not(.focus-light) .app.focusing:not(.pomo) #timerRing{--size:calc(100dvh - 48px)!important;grid-row:1/span 2;margin:0}
html:not(.focus-light) .app.focusing:not(.pomo) .run-clock{grid-column:2;margin:0;align-self:end}
html:not(.focus-light) .app.focusing:not(.pomo) .focus-extras{grid-column:2;align-self:start;margin-top:12px;justify-content:center}
html:not(.focus-light) .app.focusing:not(.pomo) .nav,html:not(.focus-light) .app.focusing:not(.pomo) .top{display:none}
}
@media(orientation:landscape) and (max-height:520px){html:not(.focus-light) .app.focusing:not(.pomo) #focusCard{min-height:calc(100dvh - 8px);align-content:center}html:not(.focus-light) .app.focusing:not(.pomo) #viewScroll{padding:0}}
/* v171: the sound sheet */
#soundDialog{max-height:82dvh;overflow-y:auto}
#soundNow{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:13.5px;min-height:18px}
.snd-head{margin:14px 2px 4px;font-size:13px;font-weight:600;color:var(--muted)}
#soundRows{display:grid}
.snd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:0 14px;background:var(--card,#fff);text-align:left;font-size:15px;font-weight:550;color:var(--ink);border-radius:0;box-shadow:none;border:0}
.snd-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snd-row+.snd-row{border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.snd-head+.snd-row{border-radius:14px 14px 0 0}
.snd-row:has(+.snd-head),.snd-row:last-child{border-radius:0 0 14px 14px}
.snd-head+.snd-row:has(+.snd-head),.snd-head+.snd-row:last-child{border-radius:14px}
.snd-row.on{color:var(--accent-text,var(--accent));font-weight:700}
.snd-row svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.snd-add{color:var(--accent-text,var(--accent))}
.snd-hold{margin-top:14px;border-radius:14px}
#soundRows{grid-template-columns:minmax(0,1fr)}
.snd-solo{border-radius:14px}
/* v172: the length picker replaces the music row, so it all still fits */
#focusCard:has(#goPick:not([hidden])) .focus-extras{display:none}
.app.task-scene:not(.pomo):not(.focusing) #goPick button{min-height:52px;padding-block:6px}
.app.task-scene:not(.pomo):not(.focusing) #goPick{margin-top:0}
/* v173: nothing around the orb while running: header and bar gone, no blur. Bigger orb. */
html:not(.focus-light) .app.focusing:not(.pomo) :is(.top,.nav,.veil){opacity:0!important;pointer-events:none;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html:not(.focus-light) .app.focusing:not(.pomo) #timerRing{--size:min(80vw,330px,calc(100dvh - 330px))!important}
#soundPick .emo{opacity:1;filter:none}#soundPick.quiet .emo{opacity:.4;filter:grayscale(.7)}
/* v173: scenes: birds, a turning planet, a dog that wakes */
.sc-lbirds{animation:scLBirds 34s linear infinite}
@keyframes scLBirds{0%{transform:translate(-60px,20px)}45%{transform:translate(400px,-16px)}100%{transform:translate(400px,-16px)}}
.sc-bird{transform-box:fill-box;transform-origin:center;animation:scFlap .9s ease-in-out infinite alternate}.sc-b2{animation-delay:-.3s}.sc-b3{animation-delay:-.6s}
@keyframes scFlap{to{transform:scaleY(.35)}}
.sc-psurf{animation:scPSurf 16s linear infinite}
@keyframes scPSurf{to{transform:translateX(-96px)}}
.sc-dhead{transform-box:fill-box;transform-origin:70% 90%;animation:scDogHead 18s ease-in-out infinite}
@keyframes scDogHead{0%,48%,90%,100%{transform:none}54%,84%{transform:rotate(9deg) translateY(-3px)}}
.sc-eyeo{opacity:0;animation:scEyeO 18s steps(1) infinite}
@keyframes scEyeO{0%,52%{opacity:0}53%,84%{opacity:1}85%,100%{opacity:0}}
.sc-eyec{animation:scEyeC 18s steps(1) infinite}
@keyframes scEyeC{0%,52%{opacity:1}53%,84%{opacity:0}85%,100%{opacity:1}}
.sc-pupil{animation:scLook 18s ease-in-out infinite}
@keyframes scLook{0%,56%{transform:none}60%,68%{transform:translateX(-1.3px)}72%,80%{transform:translateX(1.3px)}84%,100%{transform:none}}
.sc-dtail{transform-box:fill-box;transform-origin:0% 100%;animation:scDogTail 18s ease-in-out infinite}
@keyframes scDogTail{0%,58%,84%,100%{transform:none}60%,64%,68%,72%,76%,80%{transform:rotate(-14deg)}62%,66%,70%,74%,78%,82%{transform:rotate(12deg)}}
.sc-dear{transform-box:fill-box;transform-origin:50% 0;animation:scEar 18s ease-in-out infinite}
@keyframes scEar{0%,53%,86%,100%{transform:none}55%,58%{transform:rotate(-12deg)}}
.sc-lbirds{opacity:.7}
@media(prefers-reduced-motion:reduce){.sc-lbirds,.sc-bird,.sc-psurf,.sc-dhead,.sc-eyeo,.sc-eyec,.sc-pupil,.sc-dtail,.sc-dear{animation:none}.sc-lbirds{opacity:0}}
/* v174: tidier lists. Search, Show and Sort share a line; next-up routines; compact wake-up; a soft edge above the bar */
.task-tools{display:flex;align-items:center;gap:8px;margin:0 0 12px}.task-tools .task-search{flex:1;min-width:0;margin:0}.task-tools .sort-link{flex:none;min-height:44px}
.r-more{display:block;width:100%;min-height:44px;background:none;border:0;box-shadow:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600}
.wake-card .wake-row{margin-bottom:6px}
.wake-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px}
.wake-card .wake-actions #wakeSet{width:auto;min-height:38px;margin:0;padding:0 14px;display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.wake-card .wake-actions .wake-skip{display:inline-block;margin:0}
.wake-card .wake-actions .wake-help{margin:0}.wake-card .wake-actions .wake-help[open]{flex-basis:100%}
.day-block>.section-head .skip-all{margin-left:auto}
.app:not(:has(#focusView:not([hidden]))) #viewScroll{-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
.wake-card .wake-actions #wakeSet{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text,var(--accent));border:0;border-radius:12px}
.task-tools .sort-link{border-radius:14px;padding:0 12px}
.r-more{min-height:36px;margin-top:2px}
/* v175: list headings sit together, the + clears the end of a list, handles for ordering, logs */
#tasksView button.section-head.list-head{margin:0 4px;min-height:44px}
#tasksView .list-head+.routine-card{margin:2px 0 10px}
#tasksView #taskList>.section-head:not(.list-head){margin:12px 4px 8px}
.app:not(:has(#focusView:not([hidden]))) #viewScroll{padding-bottom:96px}
#tasksView .done-head{padding-right:56px}
.lists-grip{flex:none;display:grid;place-items:center;width:32px;height:44px;color:var(--muted);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.lists-grip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
#listKindWrap{margin-bottom:14px}#listKind{display:flex}#listKind button{flex:1}
.log-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 4px;background:none;border:0;box-shadow:none;color:inherit;font:inherit;text-align:left}
.log-row+.log-row{border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
#logForm{display:flex;gap:8px;align-items:stretch;margin-bottom:10px}#logForm input{flex:1;min-width:0;margin:0}#logForm .accent-btn{flex:none;width:auto;margin:0;padding:0 16px;white-space:nowrap}
#logDialog,#entryDialog{max-height:82dvh;overflow-y:auto}
.log-recent{margin-bottom:6px}
.log-day{border-radius:14px;background:var(--card,#fff);overflow:hidden}
.log-entry{display:flex;gap:14px;align-items:center;width:100%;min-height:46px;padding:0 14px;background:none;border:0;border-radius:0;box-shadow:none;color:var(--ink);font:inherit;font-size:15px;text-align:left}
.log-entry+.log-entry{border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.log-time{flex:none;min-width:64px;font-weight:650;font-variant-numeric:tabular-nums}.log-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.log-foot{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.log-foot input{flex:1;margin:0}.log-foot .link{min-height:44px;font-weight:600;color:var(--muted)}
.log-del{color:#c0453a!important}#entryForm .log-del{display:block;margin:10px auto 0;min-height:44px;font-weight:600}
/* v175: Just go sits like its neighbours */
#goPick [data-go=up]{gap:1px}#goPick [data-go=up] [data-icon]{width:22px;height:22px}#goPick [data-go=up] [data-icon] svg{width:17px;height:17px}#goPick [data-go=up] strong{font-size:12.5px;line-height:1.2}
/* v176: routine item sheet uses Add's rows */
.opt-det>summary{list-style:none;cursor:pointer}.opt-det>summary::-webkit-details-marker{display:none}
.opt-det>summary [data-icon=chevron]{flex:none;color:var(--muted);transition:transform .3s var(--spring)}.opt-det[open]>summary [data-icon=chevron]{transform:rotate(90deg)}
.opt-in{padding:2px 14px 12px}.opt-in .days{margin-top:10px}.opt-in .date-input{margin:10px 0 0}
.item-card>*+*{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
.item-card label.opt-row{justify-content:space-between;text-transform:none;letter-spacing:0;color:var(--ink);margin:0}
.opt-input{width:auto;min-width:0;max-width:130px;min-height:36px;margin:0;padding:0 8px;border:0;border-radius:10px;background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:none;color:var(--ink);font:inherit;font-size:16px;text-align:right}
#itemMins.opt-input{width:58px}.opt-mins{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600}
/* v176: landscape pause: room between the controls and the sound buttons */
@media(orientation:landscape) and (max-height:520px){.app.task-scene:not(.pomo):not(.focusing) .focus-extras{margin-top:14px;margin-bottom:10px}}
/* v176: Astra's clean-up pass */
.clean .r-item:not(.done) .r-box,.clean .t-tick[aria-pressed=false] .r-box{color:transparent}
.list-row .r-name{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.28}
.today-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;line-height:1.28}
.clean .today-task:has(+.today-task){margin-bottom:0;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.clean .today-task+.today-task{margin-top:0;border-top:0;border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
.today-task:last-child,.day-block>.today-task:last-of-type{margin-bottom:0}
.ctx-menu .ctx-item,.ctx-menu .ctx-item+.ctx-item{border-top:0;border-radius:10px}
.ctx-item.danger{margin-top:6px;position:relative}.ctx-item.danger::before{content:'';position:absolute;left:10px;right:10px;top:-3px;height:1px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
#addForm:has(#addMore:not([inert])) .send-btn{display:none}
#addEyebrow:empty{display:none}
.clean .wrapup{padding:16px;margin:16px 0 0;border-radius:20px}.wrapup h2{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.wrap-stats{gap:14px;margin-bottom:8px}.wrap-stats span{flex:none;flex-direction:row;align-items:baseline;gap:5px;padding:0;box-shadow:none;border-radius:0}.wrap-stats strong{font-size:15px}.wrap-stats small{font-size:13px}
.wrap-finish{margin-top:10px}
.clean .note-item{padding-right:12px}.note-actions .icon-button{width:36px;height:36px}.note-actions{gap:6px;margin:0}.note-actions .note-pill{order:0;margin:0}.note-actions .note-pill:first-child{margin-left:52px}.note-actions{justify-content:flex-start}.note-actions .icon-button{margin-left:0}.note-actions .note-pill+.icon-button,.note-actions>.icon-button:first-of-type{margin-left:auto}
.wisdom-label{display:inline-flex;align-items:center;gap:8px}.wisdom-label .emo{width:20px;height:20px}
.note-actions{padding-left:52px}.note-actions .note-pill{order:-1}.note-actions .note-pill:first-child{margin-left:0}.note-actions>.icon-button:first-of-type{margin-left:0}.note-actions .note-pill:last-child{margin-right:auto}
/* v178: lighter tops. A slimmer header; Cards/List is a quiet view setting; day tabs fill the width; Show and Sort are plain words */
.clean .top .logo{width:34px;height:34px}.clean .top .wordmark{font-size:19px}
.clean .top .pill,.clean .top .gear{width:40px;height:40px;min-height:40px}
.clean .top .pill .emo,.clean .top .pill [data-emoji] img{width:22px;height:22px}
.clean .hello h1{font-size:28px;line-height:1.15}.clean .hello .eyebrow{margin-bottom:1px}
.clean .today-head{margin-bottom:10px;align-items:flex-end}
.clean .seg.range.today-seg{margin:0 0 3px;padding:0;gap:14px;background:none;border:0;box-shadow:none}
.clean .seg.range.today-seg button{min-height:28px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--muted);font-size:13px;font-weight:600}
.clean .seg.range.today-seg button[aria-checked=true]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.clean .seg.range.day-flip{display:flex;width:100%;margin:0 0 12px}
.clean .seg.range.day-flip button{flex:1 1 0;min-height:36px;padding:0 8px}
.clean .start-day{margin-bottom:0}
#todayBody>.start-day+.day-block{margin-top:14px}
#todayBody>.start-day+.day-block>.section-head:first-child,#todayBody>.start-day+.day-block>button.section-head:first-child{margin-bottom:6px}
.clean #tasksView .hello{margin-bottom:8px}
.task-tools{gap:14px;margin-bottom:8px}
.clean .task-tools .task-search{min-height:40px;height:40px;padding-left:36px;border:0;border-radius:12px;background:color-mix(in srgb,var(--ink) 6%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 11px 50%/17px no-repeat;box-shadow:none}
.clean .task-tools .sort-link{min-height:40px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--muted);font-size:14px;font-weight:600;position:relative}
.clean .task-tools .sort-link::after{content:'';position:absolute;inset:-2px -7px}
.clean .task-tools .sort-link.on{padding:0 10px;border-radius:12px;background:var(--tint);color:var(--accent-text,var(--accent))}
.clean button.section-head.fold.list-head.empty .meta{background:none;color:var(--muted);font-weight:600}
.clean .top .pill{padding:0;min-width:40px;max-width:40px;justify-content:center}
/* v179: row sizes, Astra on real screens: slightly smaller symbols, readable details, tighter Cards rows */
.list-row .r-emo{width:26px}.list-row .r-emo .emo,.list-row .r-emo img{width:26px;height:26px}
.today-task .today-emo{width:26px;height:26px;flex:none}.today-task .today-emo .emo,.today-task .today-emo img{width:26px;height:26px}
.list-row .r-meta,.today-copy small{font-size:12px}
.clean .today-task{box-sizing:border-box;min-height:60px;padding-top:8px;padding-bottom:8px}
/* v180: the + menu is one straight stack */
#fabMenu button>span:first-child{font-size:14px;font-weight:650;padding:7px 12px;border-radius:12px}
#fabMenu button.side>span:first-child{right:calc(100% + 10px)}
/* v181: iPhone's date field stays inside the sheet */
#entryDate{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;margin:0 0 14px;text-align:center}.entry-field{font-size:16px}
#entryDialog{overflow-x:hidden}
/* v181: Calm screen removed: running Focus is already this calm */
.setting-row:has(#calmScreen){display:none!important}
/* v183: Lists. Logs and notes sit in with your lists; a note is a page you type on */
.log-row.side-row{min-height:44px;margin:0 4px;padding:0;gap:8px;width:calc(100% - 8px)}
.log-row.side-row+.log-row.side-row{border-top:0}
.side-row .r-emo{flex:none;width:20px;display:grid;place-items:center}.side-row .r-emo .emo,.side-row .r-emo img{width:19px;height:19px}
.side-copy{flex:1;min-width:0;display:flex;flex-direction:column}.side-name{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-meta{flex:none;font-size:13px;color:var(--muted)}
#listKindWrap #listKind button{min-width:0}
#pageDialog{max-height:92dvh;overflow-y:auto}
#pageDialog .sheet-head{align-items:center;gap:12px;margin-bottom:10px}
.page-name{flex:1;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font:inherit;font-size:24px;font-weight:700;letter-spacing:-.03em}
.page-name:focus{outline:none;box-shadow:none}
.page-text{display:block;width:100%;box-sizing:border-box;height:58dvh;margin:0;padding:14px;border:0;border-radius:16px;background:var(--card,#fff);box-shadow:none;color:var(--ink);font:inherit;font-size:16px;line-height:1.5;resize:none}
.page-text:focus{outline:none}
#pageDialog input.page-name,.clean #pageDialog input.page-name{min-height:44px;margin:0;padding:0;border:0;background:none;box-shadow:none;font-size:24px;font-weight:700}
#taskList .side-row .side-name{font-size:13px;font-weight:700;line-height:1.3;color:var(--ink)}
#taskList .side-row .side-sub{font-size:12px}
#taskList .side-row .side-meta{font-size:13px;font-weight:600}
/* v183: note formatting */
.page-tools{display:flex;gap:4px;margin:0 0 8px}
.page-tools button{flex:1;min-height:40px;padding:0;border:0;border-radius:10px;background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:none;color:var(--ink);font:inherit;font-size:15px;font-weight:600}
.page-tools button:active{background:var(--tint)}
.page-text{height:auto;min-height:52dvh;overflow-y:auto;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;white-space:pre-wrap;overflow-wrap:anywhere}
.page-text.empty::before{content:attr(data-empty);color:var(--muted);pointer-events:none}
.page-text h3{margin:10px 0 4px;font-size:19px;font-weight:700;letter-spacing:-.02em}.page-text ul,.page-text ol{margin:4px 0;padding-left:24px;white-space:normal}.page-text li{margin:2px 0}
/* v183: Astra's pass on notes; symbols for lists */
.page-tools button[aria-pressed=true]{background:var(--tint);color:var(--accent-text,var(--accent))}
#pageDialog[open]{display:flex;flex-direction:column}#pageDialog .page-text{flex:1 1 auto;border-radius:12px}
#pageDialog.kb{height:100%}#pageDialog.kb .page-text{min-height:0}#pageDialog.kb .log-foot,#pageDialog.kb .sym-strip{display:none}
.side-icon{color:var(--muted)}.side-row .side-icon{width:16px}.log-row.side-row{gap:4px}.side-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.log-row.side-row.own .side-icon{width:20px}.log-row.side-row.own{gap:6px}.side-row.own .side-icon .emo,.side-row.own .side-icon img{width:19px;height:19px}
.head-emo{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}.head-emo .emo,.head-emo img{width:19px;height:19px}
.sym-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 2px;margin:4px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}.sym-strip::-webkit-scrollbar{display:none}.sym-strip[hidden]{display:none}
.sym-strip .emoji-opt{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent);box-shadow:none;color:var(--muted)}.sym-strip .emoji-opt[aria-pressed=true]{background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--accent)}.sym-strip .emo,.sym-strip img{width:24px;height:24px}.sym-strip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.lists-sym{flex:none;width:36px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;box-shadow:none;color:var(--muted)}.lists-sym .emo,.lists-sym img{width:22px;height:22px}.lists-sym svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#fabMenu button [data-icon] svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* v184: a note is a full page, like Apple Notes. Done on top, formatting above the keyboard */
dialog#pageDialog.sheet{position:fixed;inset:0 0 auto 0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:none;border-radius:0;box-sizing:border-box;padding:calc(env(safe-area-inset-top,0px) + 8px) 18px 8px;background:var(--card,#fff);overflow:hidden}
#pageDialog[open]{display:flex;flex-direction:column;gap:6px}
.page-head{flex:none;display:flex;align-items:center;gap:6px;min-height:44px}
#pageDialog input.page-name,.clean #pageDialog input.page-name{flex:1;min-width:0;min-height:44px;font-size:22px;background:none}
.page-more-btn{flex:none;width:40px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;box-shadow:none;color:var(--muted)}.page-more-btn svg{width:22px;height:22px}
.page-done{flex:none;min-height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--btn,var(--accent));color:var(--on-btn,#fff);box-shadow:none;font:inherit;font-size:15px;font-weight:650;position:relative}.page-done::after{content:'';position:absolute;inset:-4px 0}
.page-more{flex:none}.page-more[hidden]{display:none}.page-more-row{display:flex;justify-content:space-between;gap:12px}.page-more-row .link{min-height:44px;font-weight:600;color:var(--muted)}.page-more-row .log-del{color:#c0453a}
#pageDialog .page-text{flex:1 1 0;min-height:0;height:auto;padding:4px 0;border:0;border-radius:0;background:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
#pageDialog .page-tools{flex:none;order:9;margin:0;padding-bottom:env(safe-area-inset-bottom,0px)}
.page-tools button{min-height:44px;display:grid;place-items:center}.page-tools svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;overflow:visible}.page-tools svg text{font-family:inherit}
/* v185: logs open in place */
.log-head{display:flex;align-items:center;gap:6px;min-height:44px;margin:0 4px}
.log-head .log-toggle{flex:1;min-width:0;width:auto;margin:0;gap:6px}
.log-toggle>svg{flex:none;width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--spring)}.log-acc.open .log-toggle>svg{transform:rotate(90deg)}
.log-now{flex:none;display:inline-flex;align-items:center;gap:3px;min-height:32px;padding:0 11px 0 8px;border:0;border-radius:16px;background:var(--btn,var(--tint));color:var(--on-btn,var(--accent));box-shadow:none;font:inherit;font-size:13px;font-weight:650;position:relative}.log-now::after{content:'';position:absolute;inset:-6px -2px}.log-now svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.log-body{margin:2px 0 10px;padding:6px 14px 10px;border-radius:18px;background:var(--card,#fff);border:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}
.log-daylabel{margin:8px 0 0;font-size:12px;font-weight:600;color:var(--muted)}
.log-body .log-entry{padding:0;min-height:44px}
.log-inline{margin:6px 0 0}.log-inline input{display:block;box-sizing:border-box;width:100%;min-height:42px;margin:0;font-size:16px}
.log-all{display:block;margin:6px auto 0;min-height:36px;font-size:13.5px;font-weight:600;color:var(--muted)}
/* v185: Skip is a quiet word, not a row of bubbles */
.clean .tom-row .skip-chip,.clean .tom-task .skip-chip{background:none!important;border:0!important;box-shadow:none!important;color:var(--muted);font-size:13.5px;font-weight:600;padding:0 2px 0 10px;min-height:44px}
.clean .tom-row.skipped .skip-chip{color:var(--accent-text,var(--accent))}
/* v187: one loud button per screen: the rest are calm */
.clean .accent-btn,.clean .log-now,.clean .r-focus{box-shadow:none}
.clean .r-focus .go-disc,.clean .row-play{box-shadow:none}
html[data-accent].clean .r-focus .go-disc{background:var(--accent)}
/* v187: a repeating row lines up with the tasks above it */
.day-block>.rep-card{padding:0;margin-top:6px;border-radius:22px}.day-block>.rep-card .r-list{margin:0}.day-block>.rep-card .r-item{padding:10px 8px 10px 10px}.day-block>.rep-card .r-check{gap:12px}.day-block>.rep-card .r-emo{width:26px}
/* v187: small iPhones: before Go, the sound row gives way so Go clears the bar */
@media(max-height:600px){.app.task-scene:not(.pomo):not(.focusing) .focus-extras{display:none}.app.task-scene:not(.pomo):not(.focusing) #focusScope{display:none}}
/* ============ v188: GLASS. The whole app, over the Chill art. Live blur only on the bar, sheets and menus; cards are translucent, which saves the battery. ============ */
html.look-glass{--base:transparent!important;--card:rgba(255,255,255,.11)!important;--ink:#f7f3ff!important;--muted:#d3cbea!important;--accent:#c9bcff!important;--accent-2:#a897ff!important;--accent-text:#d6ccff!important;--btn:rgba(255,255,255,.16)!important;--on-btn:#fff!important;--tint:rgba(255,255,255,.14)!important;--track:rgba(255,255,255,.18)!important;--danger:#ff9d9d!important;--t-lilac:rgba(255,255,255,.1)!important;background:#2b2150!important;color-scheme:dark}
html.look-glass body{background:transparent!important;color:var(--ink)}
html.look-glass body::before{content:'';position:fixed;inset:0;z-index:-2;background:none}
html.look-glass body::after{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,17,46,.62),rgba(24,17,46,.42) 45%,rgba(24,17,46,.66));pointer-events:none}
html.look-glass .app,html.look-glass .scroll{background:transparent!important}
html.look-glass :is(.routine-card,.routine-card[data-tint],.today-task,.start-day,.wake-card,.opt-card,.setting-row,.note-item,.wk-day,.all-list,.rep-card,.wrapup,.idea,.card,.log-body,.mission,.done-group,.wisdom-item,.task-search,details.set-sec){background:rgba(255,255,255,.11)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important;color:var(--ink)}
html.look-glass .routine-bar{background:rgba(255,255,255,.18)!important}
html.look-glass :is(.seg,.seg.range){background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important}
html.look-glass :is(.seg button)[aria-checked=true],html.look-glass :is(.seg button)[aria-selected=true]{background:rgba(255,255,255,.24)!important;color:#fff!important;box-shadow:none!important}
html.look-glass .seg button{color:var(--muted)}
html.look-glass .clean .seg.range.today-seg,html.look-glass .seg.range.today-seg{background:none!important;border:0!important}html.look-glass .seg.range.today-seg button[aria-checked=true]{background:none!important;box-shadow:inset 0 -2px 0 #fff!important}
html.look-glass :is(.pill,.gear,.icon-button,.mini-round,.round,.soft-btn,.chip,.sort-link.on,.row-play,.r-focus,.page-tools button,.emoji-opt,.tval,.tplus,.tminus,.lists-row input){background:rgba(255,255,255,.14)!important;box-shadow:none!important;border:0!important;color:var(--ink)!important}
html.look-glass :is(input,textarea):not(.page-name){background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important}
html.look-glass ::placeholder{color:rgba(255,255,255,.62)}
html.look-glass .r-box{border-color:rgba(255,255,255,.55)!important;background:transparent!important}
html.look-glass :is(.r-item.done,.today-task.done) .r-box{background:#2fa876!important;border-color:#2fa876!important}
html.look-glass .nav{background:rgba(40,30,72,.5)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 12px 30px -14px rgba(8,4,24,.7)!important;-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
html.look-glass .nav-lava{background:rgba(255,255,255,.2)!important}
html.look-glass .nav-button{color:#efeaff!important}html.look-glass .nav-button.selected{color:#fff!important}
html.look-glass dialog.sheet,html.look-glass dialog#pageDialog.sheet{background:rgba(38,28,68,.78)!important;color:var(--ink);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3)}
html.look-glass dialog::backdrop{background:rgba(12,8,28,.5)}
html.look-glass :is(.ctx-menu,.toast){background:rgba(44,33,78,.86)!important;color:var(--ink);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}html.look-glass .ctx-item{color:var(--ink)}html.look-glass .ctx-item svg{color:var(--muted)}
html.look-glass #viewScroll{-webkit-mask-image:none!important;mask-image:none!important}
html.look-glass .r-item.done .r-name,html.look-glass .today-task.done strong{color:var(--muted)}
/* Focus: the scene carries it, no black */
html.look-glass:not(.focus-light) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo){--base:transparent!important;--card:rgba(255,255,255,.11)!important;--ink:#f7f3ff!important;--muted:#d3cbea!important;background:transparent!important}
html.look-glass:not(.focus-light):has(.app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo)) body{background:transparent!important}
html.look-glass .app.focusing .run-clock{text-shadow:0 2px 18px rgba(12,8,28,.55)}
@media(prefers-reduced-transparency:reduce){html.look-glass :is(.nav,dialog.sheet,.ctx-menu,.toast){-webkit-backdrop-filter:none;backdrop-filter:none;background:#2f2456!important}}
/* Glass: darker cards so words stay easy to read over the picture; ticks visible */
html.look-glass :is(.routine-card,.routine-card[data-tint],.today-task,.start-day,.wake-card,.opt-card,.setting-row,.note-item,.wk-day,.all-list,.rep-card,.wrapup,.idea,.card,.log-body,.mission,.done-group,.wisdom-item,details.set-sec){background:rgba(34,25,62,.5)!important;border-color:rgba(255,255,255,.14)!important}
html.look-glass .today-task+.today-task{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important}
html.look-glass .r-box{box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.6)!important;color:transparent}
html.look-glass :is(.r-item.done,.today-task.done) .r-box{box-shadow:none!important;background:#2fa876!important;color:#fff}
html.look-glass :is(.today-emo,.r-emo,.side-icon,.head-emo){background:none!important}
html.look-glass .switch{background:rgba(255,255,255,.2)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)!important}html.look-glass .switch i{background:#fff!important}html.look-glass .switch[aria-checked=true]{background:#8d7bff!important}
html.look-glass .stepper-well{background:rgba(255,255,255,.1)!important;border:0!important;box-shadow:none!important}html.look-glass .stepper-well input{background:none!important;border:0!important;box-shadow:none!important}
html.look-glass .accent-pick button{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;color:var(--ink)!important}html.look-glass .accent-pick button[aria-checked=true]{background:rgba(255,255,255,.24)!important}
/* Glass, Astra's pass: easy reading first */
html.look-glass :is(.routine-card,.routine-card[data-tint],.today-task,.start-day,.wake-card,.opt-card,.setting-row,.note-item,.wk-day,.all-list,.rep-card,.wrapup,.idea,.card,.log-body,.mission,.done-group,.wisdom-item,details.set-sec){background:rgba(33,24,58,.72)!important}
html.look-glass .today-task+.today-task{background:rgba(33,24,58,.72)!important}
html.look-glass #viewScroll{-webkit-mask-image:linear-gradient(transparent 0,#000 12px,#000 calc(100% - 22px),transparent)!important;mask-image:linear-gradient(transparent 0,#000 12px,#000 calc(100% - 22px),transparent)!important}
html.look-glass .app.focusing:not(.pomo) :is(#soundPick,#autoPick,.focus-extras button,.focus-extras a,.tools button,.wander){opacity:1}
html.look-glass .app.focusing:not(.pomo) #focusCard button.sound-pill,html.look-glass .app.focusing:not(.pomo) .run-tools button{width:44px;height:44px;border-radius:50%;background:rgba(33,24,58,.72)!important;border:1px solid rgba(255,255,255,.22)!important}
html.look-glass .row-play{background:rgba(255,255,255,.2)!important;color:#fff!important}
html.look-glass .r-box{background:rgba(33,24,58,.5)!important;box-shadow:inset 0 0 0 2px #c5b8dc!important}
html.look-glass dialog.sheet{border:0!important;box-shadow:0 16px 40px rgba(10,5,20,.3)}
html.look-glass .wk-rt,html.look-glass .wk-rt[data-tint]{background:rgba(255,255,255,.14)!important;color:#fff!important}html.look-glass .wk-rt b{color:#d3cbea!important}
html.look-glass .routine-tint,html.look-glass [data-tint]:not(.routine-card):not(.wk-rt){background:rgba(255,255,255,.12)!important;color:#fff}
.sunday-card{padding:14px 16px 8px;margin:0 0 12px;border-radius:20px;background:var(--card,#fff);border:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}.sunday-card h2{margin:0 0 4px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.sunday-row{display:block;width:100%;min-height:44px;padding:0;border:0;background:none;box-shadow:none;color:var(--accent-text,var(--accent));font:inherit;font-size:14.5px;font-weight:600;text-align:left}.sunday-x{display:block;min-height:40px;font-size:13px;font-weight:600;color:var(--muted)}
html.look-glass .sunday-card{background:rgba(33,24,58,.72)!important;border-color:rgba(255,255,255,.14)!important}
/* v191: Glass is calm: a soft dusk gradient everywhere, the painting only while focusing */
html.look-glass body::before{background:radial-gradient(110% 60% at 88% 0,#6d4fb0 0,transparent 62%),radial-gradient(90% 55% at 0 100%,#a4527f 0,transparent 66%),linear-gradient(170deg,#2a2150,#3b2c6b 55%,#47305f)}
html.look-glass body::after{background:none}
html.look-glass :is(.routine-card,.routine-card[data-tint],.today-task,.today-task+.today-task,.start-day,.wake-card,.opt-card,.setting-row,.note-item,.wk-day,.all-list,.rep-card,.wrapup,.idea,.card,.log-body,.mission,.done-group,.wisdom-item,details.set-sec,.sunday-card){background:rgba(255,255,255,.09)!important}
/* The wrap-up card is neutral, so it suits either colour */
.clean .wrapup{background:var(--card,#fff);border:1px solid color-mix(in srgb,var(--ink) 6%,transparent)}
/* v191: the bottom bar works like Reddit's: lists run behind a floating capsule, and a liquid lens swells past its edges under your thumb. Web can't refract, so the lens fakes it with a bright rim and a rainbow edge. */
@media(orientation:portrait){
  .clean .app:not(.focusing) .nav{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--card,#fff) 66%,transparent);border:1px solid color-mix(in srgb,#fff 55%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7)}
  .clean .app:not(:has(#focusView:not([hidden]))) #viewScroll{-webkit-mask-image:none;mask-image:none;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .clean .app:has(#focusView:not([hidden])):not(.focusing) #viewScroll{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
.nav{overflow:visible}
.nav.touching .nav-lava,.nav.sliding .nav-lava{z-index:2;background:color-mix(in srgb,#fff 26%,transparent)!important;-webkit-backdrop-filter:saturate(1.9) brightness(1.08);backdrop-filter:saturate(1.9) brightness(1.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 2px 4px rgba(255,255,255,.75),inset 0 -3px 8px rgba(255,255,255,.4),0 10px 26px -6px rgba(24,14,70,.32)}
.nav-lava::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:2.5px;background:conic-gradient(from 210deg,#ff6ad5,#ffd36a,#7dffb0,#6ac8ff,#b98bff,#ff6ad5);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .22s ease}
.nav.touching .nav-lava::after,.nav.sliding .nav-lava::after{opacity:.62}
.nav.touching .nav-lava{scale:1.05 1.24;border-radius:30px}
.nav.sliding .nav-lava{scale:1.12 1.5;border-radius:32px;transition:transform .09s linear,width .14s ease-out,scale .34s cubic-bezier(.3,1.6,.5,1)}
html.look-glass .nav{overflow:visible}html.look-glass .nav.sliding .nav-lava,html.look-glass .nav.touching .nav-lava{background:rgba(255,255,255,.16)!important}
@media(prefers-reduced-motion:reduce){.nav.touching .nav-lava,.nav.sliding .nav-lava{scale:1}}
/* ============ v192: IMMERSIVE FOCUS. Your scene, full screen and still animated, with glass cards on top. ============ */
.imm-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.imm-scene[hidden]{display:none}
.imm-scene .sc-svg{position:absolute;inset:0;width:100%;height:100%;transform:none!important}
html.imm-on{background:#17122c!important}html.imm-on body{background:transparent!important}html.imm-on body::before,html.imm-on body::after{display:none!important}
html.imm-on .app,html.imm-on #viewScroll,html.imm-on #focusView,html.imm-on #focusCard{background:transparent!important;transform:none!important;animation:none!important;filter:none!important;box-shadow:none!important;--base:transparent!important;--ink:#f7f3ff!important;--muted:#ded7f2!important;color:#f7f3ff}
html.imm-on .app>.top,html.imm-on .app>.nav,html.imm-on .fab{display:none!important}
html.imm-on #focusCard>*:not(.imm-ui):not(.yt-line){visibility:hidden!important;pointer-events:none!important}
html.imm-on #viewScroll{overflow:hidden;padding:0}
.imm-ui{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);justify-content:flex-end;pointer-events:none}.imm-ui[hidden]{display:none}
.imm-ui.has-video{justify-content:space-between}.imm-ui>*{pointer-events:auto}
.imm-card{border-radius:30px;padding:14px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07) 55%,rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 18px 40px -22px rgba(10,5,30,.65);-webkit-backdrop-filter:blur(20px) saturate(1.5) brightness(.72);backdrop-filter:blur(20px) saturate(1.5) brightness(.72);color:#fff}
.imm-task{display:flex;align-items:center;gap:12px}.imm-emo{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9)}.imm-emo .emo,.imm-emo img{width:27px;height:27px}
.imm-copy{min-width:0;display:flex;flex-direction:column}.imm-where{font-size:12.5px;color:rgba(255,255,255,.76);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.imm-name{font-size:17px;font-weight:650;line-height:1.22;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.imm-slot{height:256px;margin-top:12px}.imm-slot[hidden]{display:none}
.imm-timer{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;gap:6px;padding:16px 10px}
.imm-col{display:grid;gap:12px;justify-items:center}.imm-btn{display:grid;justify-items:center;gap:4px;padding:0;border:0;background:none;box-shadow:none;color:#fff;font:inherit}.imm-btn small{font-size:11.5px;font-weight:550;color:rgba(255,255,255,.92);white-space:nowrap}
.imm-ic{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}.imm-ic svg{width:22px;height:22px}.imm-btn:active .imm-ic{scale:.9}.imm-ic[data-i=check]{color:#7ff0c2}
.imm-ring{position:relative;width:min(44vw,172px);aspect-ratio:1;justify-self:center}.imm-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.imm-tr{fill:none;stroke:rgba(255,255,255,.2);stroke-width:5}.imm-pr{fill:none;stroke:#b8a6ff;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;filter:drop-shadow(0 0 5px rgba(160,135,255,.9));transition:stroke-dashoffset .5s linear}
.imm-read{position:absolute;inset:0;display:grid;place-content:center;justify-items:center}.imm-time{font-size:clamp(30px,10vw,40px);font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.imm-by{font-size:12.5px;color:rgba(255,255,255,.8)}
.imm-dock{position:relative;display:flex;gap:2px;padding:7px 8px;border-radius:36px;margin-top:8px}.imm-tab{position:relative;z-index:1;flex:1;display:grid;justify-items:center;gap:1px;min-height:58px;align-content:center;padding:0;border:0;background:none;box-shadow:none;color:#fff;font:inherit}.imm-tab svg{width:24px;height:24px}.imm-tab small{font-size:12px;font-weight:600}
.imm-dock:not(.liq-on){background:rgba(40,30,72,.55);border:1px solid rgba(255,255,255,.3)}
/* The video card: only ever styled, never moved, or YouTube reloads. Top, left and width come from its slot. */
html.imm-on .yt-line.on{display:block!important;position:fixed;z-index:20;margin:0;padding:208px 0 0;min-height:0;background:none!important;border:0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;color:#fff;border-radius:18px}
html.imm-on .yt-line.on>.emo{display:none}html.imm-on .yt-line.on .yt-title{display:inline-block;width:calc(100% - 98px);vertical-align:middle;font-size:13.5px;font-weight:600}
html.imm-on .yt-line.on button{width:40px;height:40px;margin-left:4px;vertical-align:middle;border-radius:50%;color:#fff;background:rgba(255,255,255,.17)!important;box-shadow:none;visibility:visible!important}
html.imm-on .yt-line.on .yt-hit{position:absolute;inset:0 0 auto 0;height:200px;opacity:1;pointer-events:auto;border-radius:18px;overflow:hidden}html.imm-on .yt-line.on .yt-frame{position:absolute;inset:0;width:100%;height:100%;margin:0}
/* ============ The lava bar ============ */
.liq-canvas{position:absolute;left:-18px;top:-18px;z-index:0;pointer-events:none}
html.look-glass .nav.liq-on{background:rgba(30,22,58,.2)!important;border-color:transparent!important;box-shadow:none!important;border-radius:36px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav.liq-on .nav-lava{display:none}.nav.liq-on .nav-button{position:relative;z-index:1;background:none!important;box-shadow:none!important;color:#fff!important}.nav.liq-on .nav-button.near svg{scale:1.16}
html.look-glass .card-unused{}
/* v192 tuning */
.imm-scene.scene,.imm-scene{border-radius:0!important;clip-path:none!important;-webkit-mask:none!important;mask:none!important;box-shadow:none!important;background:#17122c}
.imm-scene svg{border-radius:0!important}
html.imm-on #focusCard *:not(.imm-ui):not(.imm-ui *):not(.yt-line):not(.yt-line *){visibility:hidden!important;pointer-events:none!important}
.imm-card{background:linear-gradient(160deg,rgba(60,46,104,.62),rgba(32,24,62,.5) 60%,rgba(52,40,92,.56))}
.imm-where{color:rgba(255,255,255,.82)}
html.imm-on .yt-line.on{display:grid!important;grid-template-columns:minmax(0,1fr) 40px 40px;gap:6px;align-items:center}
html.imm-on .yt-line.on .yt-title{display:block;width:auto}html.imm-on .yt-line.on button{margin:0}
/* v193: the wrap-up never pushes the page sideways; nothing can */
.wrap-stats{flex-wrap:wrap;gap:4px 14px}.wrapup{min-width:0;max-width:100%;box-sizing:border-box}#viewScroll{overflow-x:hidden}
@media(orientation:portrait){.clean .app:not(.focusing) .nav{background:color-mix(in srgb,var(--card,#fff) 84%,transparent)}}
/* v193: immersive: steady reading, safe edges, fits any screen */
.imm-ui{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow-y:auto;overscroll-behavior:contain}
.imm-ui>*{flex:none}
.imm-card{background:linear-gradient(160deg,rgba(60,46,104,.8),rgba(32,24,62,.76) 60%,rgba(52,40,92,.78))}
.imm-btn small{font-size:12.5px;font-weight:600}.imm-where,.imm-by{font-size:13px}
@media(max-height:720px){.imm-ui{gap:8px;padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}.imm-card{padding:10px}.imm-timer{padding:10px 6px}.imm-ring{width:112px}.imm-time{font-size:26px}.imm-by{font-size:11.5px}.imm-col{gap:6px}.imm-ic{width:42px;height:42px}.imm-tab{min-height:46px}}
@media(orientation:landscape) and (max-height:520px){.imm-ui,.imm-ui.has-video{display:grid;grid-template-columns:1fr 1fr;align-content:center;align-items:center;gap:10px}}
/* v194: the bar zooms what's under your thumb */
.liq-canvas{left:-30px;top:-30px}
.nav.liq-on .nav-button svg,.nav.liq-on .nav-button img,.imm-tab svg{transition:scale .3s cubic-bezier(.3,1.7,.5,1)}.nav.liq-on .nav-button>span:not(.nav-count):last-child,.imm-tab small{transition:scale .3s cubic-bezier(.3,1.7,.5,1);display:block}
.nav.liq-on .nav-button.near svg,.nav.liq-on .nav-button.near img,.imm-tab.near svg{scale:1.42}.nav.liq-on .nav-button.near>span:not(.nav-count):last-child,.imm-tab.near small{scale:1.14}
.imm-dock{touch-action:none}
/* v194: logs */
.log-acc.open .log-body{padding-top:10px}
.log-inline{display:flex;gap:8px;margin:0 0 8px}.log-inline input{flex:1;min-width:0;min-height:44px}
.log-go{flex:none;min-width:68px;min-height:44px;padding:0 16px;border:0;border-radius:14px;background:var(--disc,var(--accent));color:#fff;box-shadow:none;font:inherit;font-size:15px;font-weight:650}.log-go:active{scale:.94}
.log-recent{margin:0 0 4px;flex-wrap:wrap}.log-recent .chip{min-height:36px}
.log-foot-row{display:flex;justify-content:space-between;margin-top:6px}.log-foot-row .link{min-height:40px;margin:0;font-size:13.5px;font-weight:600;color:var(--muted)}.log-foot-row .log-clear{color:var(--muted)}
/* v194: painted scenes */
.imm-art{position:absolute;left:50%;bottom:0;width:max(100vw,46.2dvh);height:calc(max(100vw,46.2dvh)*2.164);translate:-50% 0;background-size:cover;background-position:center bottom;overflow:hidden;animation:immDrift 60s ease-in-out infinite alternate}
@keyframes immDrift{to{scale:1.05}}
.imm-art i{position:absolute;display:block;pointer-events:none}
.fx-rain{inset:-100% 0 0 0;background:repeating-linear-gradient(97deg,transparent 0 27px,rgba(255,255,255,.2) 27px 28px,transparent 28px 61px);-webkit-mask:repeating-linear-gradient(180deg,#000 0 22px,transparent 22px 92px);mask:repeating-linear-gradient(180deg,#000 0 22px,transparent 22px 92px);opacity:.42;animation:fxRain 1.5s linear infinite}.fx-r2{opacity:.24;left:-3%;animation-duration:2.3s;animation-delay:-.7s}
@keyframes fxRain{to{transform:translateY(184px)}}
.fx-glow{aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--c),.5),rgba(var(--c),.1) 55%,transparent);mix-blend-mode:screen;animation:fxGlow 5s ease-in-out infinite}
@keyframes fxGlow{0%,100%{opacity:.55;scale:.97}50%{opacity:1;scale:1.03}}
.fx-steam{width:5%;height:6%;border-radius:50%;background:rgba(255,255,255,.4);filter:blur(7px);animation:fxSteam 5s ease-in infinite}.fx-s2{animation-delay:-2.4s}
@keyframes fxSteam{0%{opacity:0;transform:translateY(16px)}35%{opacity:.7}100%{opacity:0;transform:translate(9px,-72px) scale(1.5)}}
.fx-light{width:6px;height:6px;translate:-50% -50%;border-radius:50%;background:#ffd98f;box-shadow:0 0 10px 3px rgba(255,205,120,.75);animation:fxLight 7s steps(1) infinite}.fx-bulb{animation:fxGlow 4s ease-in-out infinite}
@keyframes fxLight{0%,44%{opacity:.95}45%,70%{opacity:.15}71%,100%{opacity:.95}}
.fx-beam{inset:0;background:linear-gradient(115deg,rgba(255,235,180,.34),transparent 56%);mix-blend-mode:screen;animation:fxGlow 11s ease-in-out infinite}
.fx-mote{width:4px;height:4px;border-radius:50%;background:rgba(255,245,210,.85);box-shadow:0 0 6px rgba(255,235,170,.8);animation:fxMote 15s ease-in-out infinite}
@keyframes fxMote{0%,100%{transform:translate(0,0);opacity:.15}50%{transform:translate(26px,-54px);opacity:.95}}
.fx-breath{width:18%;height:5%;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.2),transparent);animation:fxGlow 3.6s ease-in-out infinite}
.fx-star{border-radius:50%;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.9);animation:fxStar 4.5s ease-in-out infinite}
@keyframes fxStar{0%,100%{opacity:.12}50%{opacity:1}}
.fx-shoot{left:75%;top:10%;width:110px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);rotate:-24deg;opacity:0;animation:fxShoot 13s ease-in infinite}
@keyframes fxShoot{0%,88%{opacity:0;transform:translateX(0)}90%{opacity:1}96%,100%{opacity:0;transform:translateX(-340px)}}
.fx-neb{inset:0 -20% 30% -20%;background:radial-gradient(40% 30% at 35% 35%,rgba(150,110,255,.3),transparent),radial-gradient(34% 26% at 70% 55%,rgba(90,160,255,.22),transparent);mix-blend-mode:screen;animation:fxNeb 40s ease-in-out infinite alternate}
@keyframes fxNeb{to{transform:translateX(14%) scale(1.1)}}
.fx-swell{left:-10%;width:120%;height:2.4%;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62) 30%,rgba(255,255,255,.3) 70%,transparent);filter:blur(4px);animation:fxSwell 9s ease-in-out infinite}
@keyframes fxSwell{0%{transform:translateY(-22px) scaleX(.9);opacity:0}45%{opacity:.85}100%{transform:translateY(46px) scaleX(1.06);opacity:0}}
.fx-glint{width:12px;height:2px;border-radius:2px;background:#fff6dc;box-shadow:0 0 6px rgba(255,240,190,.9);animation:fxStar 3.4s ease-in-out infinite}
.fx-gulls{left:-12%;top:30%;width:34px;height:12px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M1 8q4-5 7 0q3-5 7 0M20 4q3-3 5 0q3-3 5 0'/%3E%3C/svg%3E");animation:fxGulls 42s linear infinite}
@keyframes fxGulls{to{transform:translateX(560px) translateY(-30px)}}
.fx-ripple{width:26%;aspect-ratio:3;translate:-50% -50%;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);animation:fxRipple 6s ease-out infinite}
@keyframes fxRipple{0%{scale:.2;opacity:0}12%{opacity:.8}100%{scale:1.7;opacity:0}}
.fx-petal,.fx-leaf{top:-4%;width:11px;height:8px;border-radius:70% 10% 70% 10%;background:#f6a7c6;box-shadow:0 1px 2px rgba(60,20,60,.25);animation:fxFall 22s linear infinite}.fx-leaf{background:#c9503c}
@keyframes fxFall{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:.95}92%{opacity:.95}100%{transform:translate(70px,calc(100dvh + 40px)) rotate(420deg);opacity:0}}
.fx-mist{left:-30%;width:160%;top:62%;height:18%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.28),transparent);filter:blur(10px);animation:fxMist 34s ease-in-out infinite alternate}.fx-m2{top:74%;animation-duration:47s;animation-direction:alternate-reverse}
@keyframes fxMist{to{transform:translateX(18%)}}
@media(prefers-reduced-motion:reduce){.imm-art,.imm-art i{animation:none}.fx-steam,.fx-shoot,.fx-gulls,.fx-petal,.fx-leaf{display:none}}
/* v194: the two layouts. Glass: frosted, lava dock. Clean: bright cards with the normal header and tabs. */
.imm-brand{display:none;align-items:center;gap:10px;font-size:26px;font-weight:300;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 10px rgba(12,8,28,.5)}.imm-brand img{width:38px;height:38px;border-radius:50%}.imm-brand b{font-weight:700}
html.look-glass .imm-brand{display:flex}
.imm-label{margin:0 0 10px;text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.imm-task{padding:10px 12px;border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.13)}.imm-slot{margin-top:10px}.imm-where:empty{display:none}
.imm-now{margin-top:auto}.imm-ui.has-video .imm-now{margin-top:0}.imm-ui.has-video .imm-timer{margin-bottom:auto}.imm-ui{justify-content:flex-start}.imm-dock{margin-top:6px}
html.imm-on:not(.look-glass) .imm-dock{display:none}
html.imm-on:not(.look-glass) .app.focusing:not(.pomo)>.top{display:flex!important;opacity:1!important;pointer-events:auto!important;position:absolute;left:0;right:0;top:0;z-index:30;--ink:#fff;background:none!important;box-shadow:none!important}
html.imm-on:not(.look-glass) .top .wordmark{color:#fff;text-shadow:0 1px 10px rgba(12,8,28,.5)}
html.imm-on:not(.look-glass) .top :is(.pill,.gear){background:#fff!important;color:#1d1b24!important;--ink:#1d1b24}
html.imm-on:not(.look-glass) .app.focusing:not(.pomo)>.nav{display:flex!important;opacity:1!important;pointer-events:auto!important;position:absolute;left:0;right:0;bottom:0;z-index:30;--ink:#1d1b24;--muted:#555b68;--base:#f4f5f7;--card:#fff;background:#fff!important;color:#1d1b24}
html.imm-on:not(.look-glass) .app.focusing:not(.pomo)>.nav .nav-lava{opacity:1}
html.imm-on:not(.look-glass) .app.focusing:not(.pomo)>.nav .nav-button{color:#555b68;background:none}
html.imm-on:not(.look-glass) .app.focusing:not(.pomo)>.nav .nav-button.selected{color:var(--accent)}
html.imm-on:not(.look-glass) .imm-ui{padding-top:calc(env(safe-area-inset-top,0px) + 74px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 108px)}
html.imm-on:not(.look-glass) .imm-card{background:rgba(255,255,255,.93);border-color:rgba(255,255,255,.7);box-shadow:0 18px 40px -22px rgba(10,5,30,.55);-webkit-backdrop-filter:none;backdrop-filter:none;color:#1d1b24}
html.imm-on:not(.look-glass) .imm-label{color:#555b68}html.imm-on:not(.look-glass) .imm-task{background:none;border:0;padding:0 2px}
html.imm-on:not(.look-glass) .imm-where,html.imm-on:not(.look-glass) .imm-by,html.imm-on:not(.look-glass) .imm-btn small{color:#555b68}
html.imm-on:not(.look-glass) .imm-btn{color:#1d1b24}html.imm-on:not(.look-glass) .imm-ic{background:#fff;border:0;box-shadow:0 3px 10px rgba(30,20,70,.14)}html.imm-on:not(.look-glass) .imm-ic[data-i=pause]{background:var(--disc,#5b52d6);color:#fff}html.imm-on:not(.look-glass) .imm-ic[data-i=check]{color:#1f9d6a}
html.imm-on:not(.look-glass) .imm-tr{stroke:rgba(70,60,140,.14)}html.imm-on:not(.look-glass) .imm-pr{stroke:var(--accent);filter:none}
html.imm-on:not(.look-glass) .yt-line.on{color:#1d1b24}html.imm-on:not(.look-glass) .yt-line.on button{color:#1d1b24;background:#eeecf8!important}
html.imm-on .yt-line.on.seek3{grid-template-columns:minmax(0,1fr) 40px 70px}html.imm-on .yt-line.seek3 [data-yt=skip]{width:70px;border-radius:20px;font-size:0}html.imm-on .yt-line.seek3 [data-yt=skip] svg{display:none}html.imm-on .yt-line.seek3 [data-yt=skip]::after{content:'+3 min';font-size:13px;font-weight:650}
html.imm-on .yt-line.on .yt-play svg{fill:none}
html.imm-on:not(.look-glass) .yt-line.on .yt-title{color:#1d1b24!important}
html.imm-on:not(.look-glass) .top .wordmark,html.imm-on:not(.look-glass) .top .wordmark b{color:#fff;text-shadow:0 1px 3px rgba(12,8,28,.75),0 2px 16px rgba(12,8,28,.65)}
.fx-breath{width:24%;height:6%;mix-blend-mode:soft-light;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent)}
.fx-mist{opacity:.6}
/* Cards sit up top, like the mock-ups, so the painting's subject shows below them */
.imm-now,.imm-ui.has-video .imm-now{margin-top:0}.imm-ui.has-video .imm-timer{margin-bottom:0}.imm-ui.has-video{justify-content:flex-start}.imm-dock{margin-top:auto}
@media(max-height:720px){.imm-brand{display:none!important}}
html.imm-on:not(.look-glass) .imm-ui{justify-content:flex-start}
.imm-dock.liq-on{-webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25);border-radius:36px;box-shadow:none}
@media(orientation:landscape) and (max-height:520px){.imm-ui .imm-dock{grid-column:1/-1;margin:0}.imm-ui .imm-tab{min-height:42px}}
/* v195: Clean's bar is warm lava in your accent colour. The see-through rainbow lens belongs to Glass, and the lava stays under the icons. */
@keyframes navLavaSquish{0%,100%{border-radius:30px 26px 32px 24px/26px 32px 24px 30px}33%{border-radius:24px 32px 26px 30px/32px 24px 30px 26px}66%{border-radius:32px 24px 30px 26px/24px 30px 26px 32px}}
html:not(.look-glass) .nav.touching .nav-lava,html:not(.look-glass) .nav.sliding .nav-lava{z-index:-1;-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(70% 55% at 32% 22%,color-mix(in srgb,var(--g1) 44%,#fff),transparent 72%),linear-gradient(150deg,color-mix(in srgb,var(--g1) 62%,#fff),color-mix(in srgb,var(--g2) 58%,#fff))!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -5px 10px color-mix(in srgb,var(--g3) 26%,transparent),0 10px 22px -8px color-mix(in srgb,var(--g3) 60%,transparent);animation:navLavaSquish 1.5s ease-in-out infinite}
html:not(.look-glass) .nav-lava::after{display:none}
html:not(.look-glass) .nav.touching .nav-lava{scale:1.07 1.1}
html:not(.look-glass) .nav.sliding .nav-lava{scale:1.06 1.18}
@media(prefers-color-scheme:dark){html:not(.look-glass) .nav.touching .nav-lava,html:not(.look-glass) .nav.sliding .nav-lava{background:radial-gradient(70% 55% at 32% 22%,color-mix(in srgb,var(--g1) 60%,transparent),transparent 72%),linear-gradient(150deg,color-mix(in srgb,var(--g2) 66%,#000),color-mix(in srgb,var(--g3) 74%,#000))!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 10px 22px -8px rgba(0,0,0,.6)}}
@media(prefers-reduced-motion:reduce){html:not(.look-glass) .nav.touching .nav-lava,html:not(.look-glass) .nav.sliding .nav-lava{animation:none;scale:1}}
/* v196: a focus screen. No top bar, compact cards, more of your scene. The video stays at YouTube's 200px minimum height with nothing in front of it. */
html.imm-on{background:var(--imm-top,#17122c)!important}
html.imm-on .app>.top,html.imm-on:not(.look-glass) .app.focusing:not(.pomo)>.top{display:none!important}
html.look-glass .imm-brand{display:none}
.imm-ui,html.imm-on:not(.look-glass) .imm-ui{gap:10px;padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
.imm-card{padding:12px;border-radius:24px}
.imm-name{font-size:15.5px;-webkit-line-clamp:1}
.imm-emo{width:38px;height:38px}.imm-emo .emo,.imm-emo img{width:23px;height:23px}
.imm-timer{grid-template-columns:72px 1fr 72px;gap:4px;padding:10px 6px}
.imm-col{gap:6px}.imm-ic{width:42px;height:42px}.imm-ic svg{width:20px;height:20px}.imm-btn{gap:2px}.imm-btn small,.imm-where,.imm-by{font-size:12px}
.imm-ring{width:116px}.imm-time{font-size:28px}
.imm-ui.has-video .imm-label{display:none}
.imm-ui.has-video .imm-task,html.imm-on:not(.look-glass) .imm-ui.has-video .imm-task{height:40px;padding:0;background:none;border:0}
.imm-ui.has-video .imm-copy{flex:1;padding-right:122px}
.imm-ui.has-video .imm-slot{height:200px;margin-top:8px}
html.imm-on .yt-line.on{padding:0!important;height:248px;grid-template-rows:40px;align-content:start;pointer-events:none!important}
html.imm-on .yt-line.on .yt-title{visibility:hidden!important}
html.imm-on .yt-line.on button{pointer-events:auto}
html.imm-on .yt-line.on .yt-hit{top:48px;height:200px;border-radius:0}
/* Pomodoro uses the same screen, through its breaks and pauses too */
html.imm-on:not(.look-glass) .app.pomo-run>.nav{display:flex!important;opacity:1!important;pointer-events:auto!important;position:absolute;left:0;right:0;bottom:0;z-index:30;--ink:#1d1b24;--muted:#555b68;--base:#f4f5f7;--card:#fff;background:#fff!important;color:#1d1b24}
html.imm-on:not(.look-glass) .app.pomo-run>.nav .nav-lava{opacity:1}
html.imm-on:not(.look-glass) .app.pomo-run>.nav .nav-button{color:#555b68;background:none}
html.imm-on:not(.look-glass) .app.pomo-run>.nav .nav-button.selected{color:var(--accent)}
html.imm-on .app.pomo-run #focusView>*:not(#focusCard){visibility:hidden!important;pointer-events:none!important}
/* Smaller still: the timer is one slim strip, so most of the screen is your scene */
html.imm-on .app,html.imm-on #viewScroll,html.imm-on #focusView,html.imm-on #focusCard{-webkit-mask:none!important;mask:none!important;clip-path:none!important}
html.imm-on .app,html.imm-on #focusView,html.imm-on #focusCard{overflow:visible!important}
.imm-timer{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:center;gap:2px;padding:8px}
.imm-col{display:contents}.imm-ring{order:-1;width:70px;margin-right:4px}.imm-time{font-size:18px;letter-spacing:-.01em}.imm-by{display:none}
.imm-tr,.imm-pr{stroke-width:6}
.imm-ic{width:40px;height:40px}.imm-btn small{font-size:11.5px}
@media(max-width:345px){.imm-ring{width:58px;margin-right:0}.imm-time{font-size:15px}.imm-ic{width:36px;height:36px}.imm-btn small{font-size:10.5px}}
@media(orientation:landscape) and (max-height:520px){
  .imm-ui,.imm-ui.has-video,html.imm-on:not(.look-glass) .imm-ui{display:grid;grid-template-columns:minmax(0,380px) minmax(0,340px);grid-template-rows:auto 1fr;justify-content:space-between;align-content:stretch;align-items:start;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 12px) calc(env(safe-area-inset-bottom,0px) + 10px) calc(env(safe-area-inset-left,0px) + 12px)}
  .imm-ui .imm-dock{grid-column:1/-1;align-self:end;justify-self:center;width:min(400px,100%);margin:0}
  .imm-ui .imm-card{min-width:0}
}
/* Lists page: drag anything */
.list-block{display:block}.list-block.dragging-row{position:relative;z-index:5;background:var(--card,var(--base));border-radius:18px;box-shadow:var(--raise-lg);transition:none}
.list-block>.list-head{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.list-block .side-row{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#tasksView .list-block+.list-block{margin-top:0}
.log-foot-row .log-copy{margin-left:auto;margin-right:18px}
/* The main button keeps a soft glow, not a halo */
.clean .controls .play::before,.clean .start-day .go-disc::before,.clean .accent-plus::before{inset:-5px;filter:blur(8px);opacity:.34}
@media(prefers-color-scheme:dark){.clean .controls .play::before,.clean .start-day .go-disc::before,.clean .accent-plus::before{opacity:.26}}
html.imm-on .yt-line.on{border-radius:0}
/* ============ v196: Clean's contrast, from Astra's review. Things that can be tapped have a visible edge; text and icons never look disabled when they aren't. ============ */
html.clean:not(.look-glass){--muted:#596170;--track:#e4e6eb}
html.clean:not(.look-glass) .app:not(.focusing) :is(.top .pill,.top .gear,.mini-round,.round,.sound-pill,.soft-btn,.start-day,.routine-card,.wide-tile,.task-head,.setting-row,.set-sec){border:1px solid rgba(32,35,43,.08);box-shadow:0 2px 3px rgba(32,35,43,.04),0 8px 20px rgba(32,35,43,.05)}
html.clean:not(.look-glass) .seg.range:not(.today-seg) button{color:#596170;opacity:1}
html.clean:not(.look-glass) .seg.range:not(.today-seg) button:is([aria-selected=true],[aria-checked=true]){color:#22252c;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.08)}
html.clean:not(.look-glass) :is(.r-item:not(.done) .r-box,.t-tick[aria-pressed=false] .r-box){background:transparent;border:0;box-shadow:inset 0 0 0 2px #868c98;opacity:1}
html.clean:not(.look-glass) .app:not(.focusing) :is(.task-stage,.pomo-stage){background:#fafbfd;box-shadow:0 0 0 1px #d1d6df,0 10px 24px rgba(32,35,43,.08)}
/* The main buttons keep white text readable. Glow is a tight shadow, not a haze. */
html.clean:not(.look-glass) .controls .play{background:linear-gradient(160deg,#7a6af0,#5140c8);box-shadow:0 8px 20px rgba(81,64,200,.18),0 2px 4px rgba(32,35,43,.08)}
html.clean:not(.look-glass) .accent-btn{background:linear-gradient(135deg,#7262ea,#5140c8)!important;color:#fff}
html.clean:not(.look-glass) .controls .play::before,html.clean:not(.look-glass) .start-day .go-disc::before,html.clean:not(.look-glass) .accent-plus::before{display:none}
html.clean[data-accent=orange]:not(.look-glass) .controls .play{background:linear-gradient(160deg,#ee6a1e,#c94f0a);box-shadow:0 8px 20px rgba(194,75,8,.16),0 2px 4px rgba(32,35,43,.08)}
html.clean[data-accent=orange]:not(.look-glass) .accent-btn{background:linear-gradient(135deg,#c94f0a,#a83a06)!important}
/* Bottom bar: a calm selected tile */
html.clean:not(.look-glass) .nav:not(.touching):not(.sliding) .nav-lava{background:#e9e4fc}
html.clean:not(.look-glass) .nav-button.selected{color:#5140c8}
html.clean[data-accent=orange]:not(.look-glass) .nav:not(.touching):not(.sliding) .nav-lava{background:#ffe7d7}
html.clean[data-accent=orange]:not(.look-glass) .nav-button.selected{color:#aa3d08}
/* Icons that were fading into white */
html.clean:not(.look-glass) .sound-pill.quiet{opacity:1}html.clean:not(.look-glass) .sound-pill.quiet .emo{opacity:1;filter:brightness(.62) contrast(1.15)}
html.clean:not(.look-glass) .auto-pill:not(.on) .emo{opacity:.9;filter:brightness(.82)}
html.clean:not(.look-glass) .nav [data-emoji=clearhead] img{filter:brightness(.82) saturate(1.25) drop-shadow(0 0 .6px rgba(50,50,80,.6))}
/* Undo: no stray highlight, and readable on the black Focus screen */
html:not(.look-glass) .toast button{box-shadow:none;background:color-mix(in srgb,var(--accent) 13%,var(--card,#fff));color:var(--accent)}
html:not(.focus-light):not(.look-glass) .app:is(.focusing,:has(#focusCard.celebrating)):not(.pomo) .toast button{background:rgba(255,255,255,.13);color:#fff}
/* Park to a new list */
.park-new{display:flex;gap:8px;width:100%}.park-new input{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(32,35,43,.14);background:var(--card,#fff);color:var(--ink);font:inherit;font-size:16px}
.park-new-chip{display:inline-flex;align-items:center;gap:5px;color:var(--accent)}.park-new-chip svg{width:15px;height:15px}
@media(prefers-color-scheme:dark){
  html[data-accent].clean:not(.look-glass){--base:#131416;--card:#202226;--muted:#aeb4c0;--track:#2b2e34}
  html.clean:not(.look-glass) .app:not(.focusing) :is(.top .pill,.top .gear,.mini-round,.round,.sound-pill,.soft-btn,.start-day,.routine-card,.wide-tile,.task-head,.setting-row,.set-sec){border-color:rgba(255,255,255,.09);box-shadow:0 6px 16px rgba(0,0,0,.16)}
  html.clean:not(.look-glass) .seg.range:not(.today-seg) button{color:#aeb4c0}
  html.clean:not(.look-glass) .seg.range:not(.today-seg) button:is([aria-selected=true],[aria-checked=true]){color:#f0f1f4;background:#202226}
  html.clean:not(.look-glass) :is(.r-item:not(.done) .r-box,.t-tick[aria-pressed=false] .r-box){box-shadow:inset 0 0 0 2px #737b89}
  html.clean:not(.look-glass) .app:not(.focusing) :is(.task-stage,.pomo-stage){background:#191c22;box-shadow:0 0 0 1px #3b414c,0 10px 24px rgba(0,0,0,.2)}
  html.clean:not(.look-glass) .controls .play{box-shadow:0 6px 18px rgba(125,100,235,.14)}
  html.clean[data-accent=orange]:not(.look-glass) .controls .play{box-shadow:0 6px 18px rgba(220,100,30,.14)}
  html.clean:not(.look-glass) .nav:not(.touching):not(.sliding) .nav-lava{background:#2d2743}
  html.clean:not(.look-glass) .nav-button.selected{color:#b8a7ff}
  html.clean[data-accent=orange]:not(.look-glass) .nav:not(.touching):not(.sliding) .nav-lava{background:#3a2418}
  html.clean[data-accent=orange]:not(.look-glass) .nav-button.selected{color:#ffb98a}
  html.clean:not(.look-glass) .nav{border:1px solid rgba(255,255,255,.12)}
  html.clean:not(.look-glass) .sound-pill.quiet .emo,html.clean:not(.look-glass) .auto-pill:not(.on) .emo,html.clean:not(.look-glass) .nav [data-emoji=clearhead] img{filter:none}
  .park-new input{border-color:rgba(255,255,255,.16)}
}
html.clean:not(.look-glass) #soundPick.quiet .emo{opacity:1;filter:brightness(.6) contrast(1.15)}
@media(prefers-color-scheme:dark){html.clean:not(.look-glass) #soundPick.quiet .emo{opacity:.85;filter:none}}
/* Last of the all-screens check */
html.clean:not(.look-glass) .controls .play{color:#fff}
html.clean:not(.look-glass) .switch[aria-checked=false]{background:#e4e5eb;box-shadow:inset 0 0 0 1px #a6adba;opacity:1}
html.clean:not(.look-glass) .switch[aria-checked=false] i{background:#fff;box-shadow:0 0 0 1px #858e9e}
html.clean:not(.look-glass) #timeDialog .chip:not(.on):not([aria-pressed=true]):not([aria-checked=true]):not(.selected){box-sizing:border-box;border:1px solid #e5e7eb}
@media(prefers-color-scheme:dark){html.clean:not(.look-glass) .switch[aria-checked=false]{background:#2b2e34;box-shadow:inset 0 0 0 1px #5a606c}html.clean:not(.look-glass) .switch[aria-checked=false] i{background:#aeb4c0;box-shadow:none}html.clean:not(.look-glass) #timeDialog .chip:not(.on):not([aria-pressed=true]):not([aria-checked=true]):not(.selected){border-color:#34363c}html.clean:not(.look-glass) #tasksHeading svg{color:#b2b7c2}html.clean:not(.look-glass) #tasksHeading::after{color:#b2b7c2;border-top-color:#b2b7c2;opacity:1}}
/* ============ v197: Glass the way Reddit does it. The app stays plain and neutral so it's easy to read; real glass is only on what floats above it. ============ */
html.look-glass{--card:rgba(255,255,255,.065)!important;--ink:#f3f4f6!important;--muted:#b4b8c2!important;--accent:#b5acf8!important;--accent-2:#9f94f4!important;--accent-text:#c6bffb!important;background:#15161a}
html.look-glass[data-accent=orange]{--accent:#ffb07a!important;--accent-2:#ff9a5c!important;--accent-text:#ffc29a!important}
html.look-glass body::before{background:#15161a}html.look-glass body::after{background:none}
html.look-glass :is(.routine-card,.routine-card[data-tint],.today-task,.today-task+.today-task,.start-day,.wake-card,.opt-card,.setting-row,.note-item,.wk-day,.all-list,.rep-card,.wrapup,.idea,.card,.log-body,.mission,.done-group,.wisdom-item,details.set-sec,.sunday-card){background:#212329!important;border-color:rgba(255,255,255,.07)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.look-glass :is(.seg,.seg.range){background:#2a2c33!important;border-color:transparent!important}
html.look-glass :is(.seg button)[aria-checked=true],html.look-glass :is(.seg button)[aria-selected=true]{background:#3a3d46!important}
html.look-glass .seg.range.today-seg{background:none!important}html.look-glass .seg.range.today-seg button[aria-checked=true],html.look-glass .seg.range.today-seg button[aria-selected=true]{background:none!important}
html.look-glass :is(.pill,.gear,.icon-button,.mini-round,.round,.soft-btn,.chip,.sort-link.on,.row-play,.r-focus,.page-tools button,.emoji-opt,.tval,.tplus,.tminus,.lists-row input){background:rgba(255,255,255,.1)!important}
html.look-glass .r-box{background:transparent!important;box-shadow:inset 0 0 0 2px #8d93a0!important}
html.look-glass :is(.r-item.done,.today-task.done) .r-box{background:#2fa876!important;box-shadow:none!important}
html.look-glass :is(.go-btn,.r-focus) .go-disc{background:var(--g3)!important;color:#fff!important}
html.look-glass dialog.sheet,html.look-glass dialog#pageDialog.sheet{background:rgba(32,34,40,.94)!important}
html.look-glass dialog::backdrop{background:rgba(0,0,0,.5)}
html.look-glass :is(.ctx-menu,.toast){background:rgba(38,40,47,.94)!important}
html.look-glass .nav,html.look-glass .nav.liq-on{background:rgba(255,255,255,.035)!important}
@media(prefers-reduced-transparency:reduce){html.look-glass :is(.nav,dialog.sheet,.ctx-menu,.toast){background:#202227!important}}
html.imm-on .imm-card{background:rgba(22,23,28,.42);border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
html.imm-on:not(.look-glass) .imm-card{background:rgba(255,255,255,.93);-webkit-backdrop-filter:none;backdrop-filter:none}
/* Focus is for focusing: the bar steps away until you tap, and the cards can be dragged */
html.imm-on,html.imm-on body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.imm-now{margin-top:var(--imm-shift,0px)!important;position:relative}
.imm-card{touch-action:none}.imm-grab{position:absolute;top:4px;left:50%;width:34px;height:4px;margin-left:-17px;border-radius:2px;background:currentColor;opacity:.32}
.imm-ui,html.imm-on:not(.look-glass) .imm-ui{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
@media(orientation:portrait){.imm-ui .imm-dock{position:absolute;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);margin:0}}
.imm-dock,html.imm-on:not(.look-glass) .app>.nav{transition:opacity .28s ease,translate .36s cubic-bezier(.3,1.3,.5,1)}
html.imm-on:not(.imm-show) .imm-dock{opacity:0;translate:0 26px;pointer-events:none}
html.imm-on:not(.look-glass) .app.focusing:not(.pomo)>.nav,html.imm-on:not(.look-glass) .app.pomo-run>.nav{opacity:0!important;translate:0 26px;pointer-events:none!important}
.imm-pickbar{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);translate:-50% 0;z-index:40;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:26px;background:rgba(22,23,28,.72);color:#fff;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);white-space:nowrap}.imm-pickbar[hidden]{display:none}
.imm-pickbar button{min-width:44px;min-height:44px;border:0;border-radius:22px;background:none;box-shadow:none;color:#fff;font:inherit;font-size:22px}.imm-pickbar .imm-pickdone{font-size:14px;font-weight:650;padding:0 14px;background:rgba(255,255,255,.16)}.imm-pickname{min-width:82px;text-align:center;font-weight:650;font-size:15px}
.imm-art{animation:immFade .45s ease}@keyframes immFade{from{opacity:.25}}
@media(prefers-reduced-motion:reduce){.imm-art{animation:none}}
/* Rain falls outside the window, not on the table */
.log-foot{flex-wrap:wrap;gap:4px 10px}
/* A fine line gives a long Lists page some rhythm */
.list-block+.list-block{border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.list-block.dragging-row,.list-block.dragging-row+.list-block{border-top-color:transparent}
/* + menu names were white on white in Glass */
html.look-glass{--glass-lt:0;--glass-top:#15161a}
html.look-glass #fabMenu button>span:first-child{background:#2a2c33!important;color:#f3f4f6!important;box-shadow:0 6px 16px rgba(0,0,0,.28)!important}
/* ============ Light Glass: a bright app, with real glass only on what floats over it ============ */
@media(prefers-color-scheme:light){
html.look-glass{--glass-lt:1;--glass-top:#f4f5f7;--card:#fff!important;--ink:#1d1f26!important;--muted:#596170!important;--accent:#5140c8!important;--accent-2:#7a6af0!important;--accent-text:#4f3fc4!important;background:#f4f5f7;color-scheme:light}
html.look-glass[data-accent=orange]{--accent:#aa3d08!important;--accent-2:#d4570f!important;--accent-text:#aa3d08!important}
html.look-glass body{color:var(--ink)}html.look-glass body::before{background:#f4f5f7}
html.look-glass :is(.routine-card,.routine-card[data-tint],.today-task,.today-task+.today-task,.start-day,.wake-card,.opt-card,.setting-row,.note-item,.wk-day,.all-list,.rep-card,.wrapup,.idea,.card,.log-body,.mission,.done-group,.wisdom-item,details.set-sec,.sunday-card){background:#fff!important;border-color:rgba(32,35,43,.08)!important;color:var(--ink);box-shadow:0 2px 3px rgba(32,35,43,.04),0 8px 20px rgba(32,35,43,.05)!important}
html.look-glass :is(.seg,.seg.range){background:#e4e6eb!important}html.look-glass .seg button{color:#596170!important}
html.look-glass :is(.seg button)[aria-checked=true],html.look-glass :is(.seg button)[aria-selected=true]{background:#fff!important;color:#22252c!important;box-shadow:0 2px 4px rgba(0,0,0,.08)!important}
html.look-glass .seg.range.today-seg{background:none!important}html.look-glass .seg.range.today-seg button[aria-checked=true],html.look-glass .seg.range.today-seg button[aria-selected=true]{background:none!important;box-shadow:none!important;color:#22252c!important}
html.look-glass :is(.pill,.gear,.icon-button,.mini-round,.round,.soft-btn,.chip,.sort-link.on,.page-tools button,.emoji-opt,.tval,.tplus,.tminus,.lists-row input){background:#fff!important;color:var(--ink);border:1px solid rgba(32,35,43,.08)!important}
html.look-glass :is(.row-play,.r-focus){background:color-mix(in srgb,var(--accent-2) 14%,#fff)!important;color:var(--accent)!important}
html.look-glass .r-box{box-shadow:inset 0 0 0 2px #868c98!important}
html.look-glass :is(.switch)[aria-checked=false]{background:#e4e5eb!important;box-shadow:inset 0 0 0 1px #a6adba!important}
html.look-glass dialog.sheet,html.look-glass dialog#pageDialog.sheet{background:rgba(250,251,253,.84)!important;color:var(--ink);box-shadow:0 16px 40px rgba(32,35,43,.16)}
html.look-glass dialog::backdrop{background:rgba(24,26,34,.2)}
html.look-glass :is(.ctx-menu,.toast){background:rgba(250,251,253,.86)!important;color:var(--ink);border-color:rgba(32,35,43,.08)!important}html.look-glass .ctx-item{color:var(--ink)!important}
html.look-glass :is(input,textarea){color:var(--ink)}
html.look-glass .nav,html.look-glass .nav.liq-on{background:rgba(255,255,255,.3)!important;border-color:transparent!important;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
html.look-glass .nav-button,html.look-glass .nav.liq-on .nav-button{color:#30333c!important}
html.look-glass .nav-button.selected,html.look-glass .nav.liq-on .nav-button.selected{color:#fff!important}
html.look-glass #fabMenu button>span:first-child{background:#fff!important;color:#1d1f26!important;box-shadow:0 6px 16px rgba(32,35,43,.14)!important}
html.look-glass .r-item.done .r-name,html.look-glass .today-task.done strong{color:var(--muted)}
}
html.look-glass .idea-read{color:var(--ink)!important}
@media(prefers-color-scheme:light){
html.look-glass .idea-read{background:#eef0f4!important}
html.look-glass .task-search{background:#e4e6eb!important;color:var(--ink)!important;border:0!important}html.look-glass .task-search::placeholder{color:#596170!important}
html.look-glass .seg.range.today-seg button[aria-checked=true],html.look-glass .seg.range.today-seg button[aria-selected=true]{border-bottom-color:#22252c!important}html.look-glass .seg.range.today-seg button::after{background:currentColor!important}
html.look-glass .nav.liq-on.touching .nav-button.selected:not(.near),html.look-glass .nav.liq-on .nav-button.selected:not(.near):has(~ .near),html.look-glass .nav.liq-on .nav-button.near~.nav-button.selected{color:#30333c!important}
html.look-glass .nav.liq-on .nav-button.near{color:#fff!important}
html.look-glass .nav [data-emoji=clearhead] img{filter:brightness(.82) saturate(1.25) drop-shadow(0 0 .6px rgba(50,50,80,.6))}
html.look-glass #soundPick.quiet .emo{opacity:1;filter:brightness(.6) contrast(1.15)}
}
/* Astra's light Glass check */
@media(prefers-color-scheme:light){
html.look-glass :is(input,textarea):not(.page-name){color:#1d1f26!important}html.look-glass :is(input,textarea)::placeholder{color:#596170!important;opacity:1}
html.look-glass .seg.range.today-seg button::after{background:transparent!important}html.look-glass .seg.range.today-seg button[aria-checked=true],html.look-glass .seg.range.today-seg button[aria-selected=true]{box-shadow:inset 0 -2px 0 #22252c!important}
html.look-glass :is(.wk-rt,.wk-rt[data-tint]){background:#eef0f4!important;color:#1d1f26!important}html.look-glass .wk-rt b{color:#596170!important}
html.look-glass{--danger:#b4233c!important}
}
/* Rain stays outside the window */
.fx-rainbox{left:0;right:0;top:0;overflow:hidden}.fx-rainbox>i{position:absolute;display:block}
/* The lamp's lava, moving inside the glass */
/* Clipped to the painted glass, so the lava can never leave the lamp. */
.fx-lamp{clip-path:polygon(29% 0,76% 0,100% 82.6%,97% 92%,91% 100%,10% 100%,3% 92%,0 82.6%)}.fx-lamp canvas{display:block;width:100%;height:100%}
/* The normal dark Focus screen, with the video where the dial sits */
html.imm-plain:not(.focus-light) .imm-card,html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-card{background:#17181d;border-color:rgba(255,255,255,.08);box-shadow:none;color:#f3f4f6;-webkit-backdrop-filter:none;backdrop-filter:none}
html.imm-plain:not(.focus-light) .imm-timer,html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-timer{background:none;border-color:transparent}
html.imm-plain.imm-on:not(.focus-light):not(.look-glass) :is(.imm-where,.imm-by,.imm-btn small,.imm-label){color:#c2c6cf}
html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-btn{color:#f3f4f6}
html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-ic{background:#24262c;box-shadow:none;border:1px solid rgba(255,255,255,.08)}
html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-ic[data-i=pause]{background:var(--g3,#5140c8);color:#fff}
html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-ic[data-i=check]{color:#7ff0c2}
html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-tr{stroke:rgba(255,255,255,.14)}html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .imm-pr{stroke:#b5acf8}
html.imm-plain.imm-on:not(.focus-light):not(.look-glass) .yt-line.on button{color:#f3f4f6;background:#24262c!important}
/* Lists */
.list-nothing{margin:0;padding:14px 16px;font-size:14px;color:var(--muted)}
html.clean .r-item .r-name,html.clean .list-row .r-name,html.clean .task-row .r-name,html.clean .today-task strong{font-size:15.5px;font-weight:550;line-height:1.28}
html.clean .r-item .r-meta,html.clean .list-row .r-meta,html.clean .task-row .r-meta{font-size:12.5px}
/* ============ v197: refined, not zoomed in. One scale for the whole app, Clean and Glass. Spacing 4/8/12/16/24. Radius 8 controls, 10 tiles, 14 cards. Visible shapes shrink; tap areas stay 44pt. ============ */
html.clean .top .wordmark{font-size:20px}html.clean .top .logo{width:30px;height:30px}
html.clean .top :is(.pill,.gear){width:34px;height:34px;min-width:34px;min-height:34px;max-width:34px;box-shadow:none}html.clean .top :is(.pill,.gear) :is(svg,img){width:18px;height:18px}
html.clean #viewScroll h1{font-size:26px;line-height:1.15;font-weight:650;letter-spacing:-.02em}
html.clean .seg.range:not(.today-seg){padding:3px;border-radius:10px;margin-bottom:12px}
html.clean .seg.range:not(.today-seg) button{min-height:30px;border-radius:8px;font-size:13px;font-weight:550}
html.clean .start-day{min-height:0;padding:10px 12px;border-radius:14px;gap:10px;box-shadow:none}html.clean .start-day .go-disc{width:32px;height:32px}html.clean .start-day .go-disc svg{width:14px;height:14px}
html.clean .start-day strong{font-size:15px;font-weight:600}html.clean .start-day small{font-size:12.5px}
html.clean .routine-card,html.clean .routine-card[data-tint],html.clean .wake-card,html.clean .all-list,html.clean .rep-card,html.clean .wide-tile,html.clean .opt-card,html.clean details.set-sec{border-radius:14px;box-shadow:none}
html.clean:not(.look-glass) :is(.routine-card,.routine-card[data-tint]){background:var(--card)}
html.clean .routine-card{padding:12px}
html.clean .routine-emo{width:30px;height:30px;min-width:30px;box-shadow:none}html.clean .routine-emo :is(img,.emo){width:20px;height:20px}
html.clean .routine-head{gap:10px}html.clean .routine-head :is(h3,strong,.routine-name){font-size:15px;font-weight:600}html.clean .routine-head small{font-size:12.5px}
html.clean .go-btn{min-height:28px;padding:2px 10px 2px 3px;gap:5px;font-size:13px;font-weight:600;box-shadow:none}html.clean .go-btn .go-disc{width:22px;height:22px}html.clean .go-btn .go-disc svg{width:10px;height:10px}
html.clean .r-item,html.clean .task-row,html.clean .today-task{min-height:48px;padding-top:6px;padding-bottom:6px;gap:10px}
html.clean .r-box{width:20px;height:20px}html.clean .r-box svg{width:12px;height:12px}
html.clean :is(.r-item:not(.done) .r-box,.t-tick[aria-pressed=false] .r-box){box-shadow:inset 0 0 0 1.5px #868c98}
html.clean .r-emo{width:20px;height:20px;min-width:20px}html.clean .r-emo :is(img,.emo){width:20px;height:20px;filter:none}html.clean .list-row .r-emo{margin:0 2px}
html.clean .r-item .r-name,html.clean .list-row .r-name,html.clean .task-row .r-name,html.clean .today-task strong{font-size:15px;font-weight:500;line-height:1.3}
html.clean .r-item .r-meta,html.clean .list-row .r-meta,html.clean .task-row .r-meta,html.clean .today-task small{font-size:12.5px;line-height:1.3}
html.clean .row-play{width:28px;height:28px;min-width:28px;background:none!important;box-shadow:none;color:var(--muted)}html.clean .row-play svg{width:12px;height:12px}
html.clean .section-head,html.clean button.section-head.fold.list-head,html.clean #tasksView button.section-head.list-head{min-height:40px;font-size:14px;font-weight:600}
html.clean .section-head .meta{font-size:12.5px;font-weight:500;background:none!important;color:var(--muted)!important;min-width:0;padding:0}
html.clean #taskList .side-row .side-name{font-size:14px;font-weight:600}html.clean .log-row{min-height:40px}
html.clean .log-now,html.clean .log-now:active{min-height:28px;padding:0 4px;background:none!important;color:var(--accent);font-size:13px;font-weight:600;box-shadow:none}html.clean .log-now svg{width:13px;height:13px}
html.clean .task-search{min-height:36px;border-radius:10px;font-size:15px}
html.clean .nav{min-height:56px;padding-top:4px;padding-bottom:4px;border-radius:20px;box-shadow:0 8px 24px rgba(32,35,43,.08)}
html.clean .nav-button{min-height:46px;font-size:11px;font-weight:500;gap:2px}html.clean .nav-button :is(svg,img){width:21px;height:21px}
html.clean .nav-lava{top:4px;bottom:4px;border-radius:12px}
html.clean .nav.liq-on{border-radius:32px}
html.clean .fab{width:48px;height:48px;box-shadow:0 6px 16px rgba(32,35,43,.18)}html.clean .fab svg{width:20px;height:20px}
html.clean #fabMenu button>span:last-child{width:42px;height:42px}html.clean #fabMenu button>span:last-child :is(img,svg,.emo){width:22px;height:22px}html.clean #fabMenu button>span:first-child{font-size:13px;font-weight:550;padding:5px 11px}
html.clean .controls .round{width:44px;height:44px;box-shadow:none}html.clean .controls .round svg{width:18px;height:18px}html.clean .controls .play{width:64px;height:64px}html.clean .controls .play svg{width:22px;height:22px}
html.clean .mini-round{width:32px;height:32px;min-width:32px;min-height:32px;box-shadow:none}html.clean .mini-round svg{width:15px;height:15px}
html.clean .sound-pill{min-height:32px;font-size:13px;box-shadow:none}html.clean .sound-pill .emo{width:18px;height:18px}
html.clean .setting-row{min-height:48px;font-size:15px}html.clean .setting-row strong{font-size:15px;font-weight:500}html.clean .setting-row small{font-size:12.5px}
html.clean .set-sec>summary{min-height:46px;font-size:15px;font-weight:550}
html.clean .accent-btn{min-height:44px;border-radius:12px;font-size:15px;font-weight:600}html.clean .soft-btn{min-height:38px;border-radius:10px;font-size:13.5px;box-shadow:none}
html.clean .idea{padding:10px 12px;border-radius:14px;box-shadow:none}html.clean .idea p{font-size:14px;line-height:1.35}html.clean .idea-foot{font-size:12px}html.clean .idea-read{min-height:28px;font-size:12.5px}
html.clean dialog.sheet h2{font-size:21px;letter-spacing:-.015em}
@media(prefers-color-scheme:dark){html.clean .nav{box-shadow:0 8px 24px rgba(0,0,0,.3)}}
/* Glass keeps its own bar: the bubble is the selected state */
html.look-glass .nav.liq-on{box-shadow:none}
/* Even row rhythm everywhere */
html.clean .r-list{gap:0}
html.clean .r-list>.r-item,html.clean .all-list .r-item,html.clean .routine-card .r-item{min-height:44px;padding:5px 2px;margin:0}
html.clean .list-tick{width:30px;min-width:30px;height:30px;margin:0 2px 0 0;padding:0;display:grid;place-items:center}
html.clean .r-check{min-height:34px;padding:0 2px;gap:10px;width:auto}
html.clean .today-task{padding-left:12px;padding-right:12px}
html.clean .app:not(.focusing):not(.pomo-run) #timerRing{width:min(60vw,236px,max(120px,calc(100dvh - 516px)));height:auto;aspect-ratio:1;margin-left:auto;margin-right:auto}
.ctx-item.on{font-weight:650;color:var(--accent)!important}.ctx-item.on::after{content:'✓';margin-left:auto}
html.clean .top :is(.pill,.gear){max-height:34px;padding:0}html.clean .all-list .r-list,html.clean .rep-card .r-list{margin-top:0}
/* ============ v198: the timer is the hero again, as in the mock-up. The video runs edge to edge in its card, so no black bars. ============ */
html.imm-plain .imm-scene{background:var(--imm-top,#060609)}
.imm-timer{grid-template-columns:72px minmax(0,1fr) 72px;gap:6px;padding:14px 8px}
.imm-col{display:grid;gap:10px;justify-items:center}
.imm-ring{order:0;width:min(42vw,170px);margin:0 auto}
.imm-time{font-size:40px;font-weight:300;letter-spacing:-.02em}
.imm-by{display:block;font-size:12px}
.imm-tr,.imm-pr{stroke-width:4}
.imm-ic{width:44px;height:44px}
.imm-ui.has-video .imm-slot{height:auto;aspect-ratio:16/9;min-height:200px;margin:8px -12px 0}
html.imm-on .yt-line.on{padding:0 12px!important;height:calc(var(--imm-h,200px) + 48px)}
html.imm-on .yt-line.on .yt-hit{height:var(--imm-h,200px)}
@media(max-height:720px){.imm-ring{width:116px}.imm-time{font-size:28px}.imm-ic{width:38px;height:38px}.imm-timer{padding:8px}.imm-col{gap:6px}}
@media(max-width:345px){.imm-timer{grid-template-columns:62px minmax(0,1fr) 62px}.imm-ring{width:116px}.imm-time{font-size:28px}.imm-ic{width:38px;height:38px}.imm-btn small{font-size:10.5px}}
/* Inspection fixes: consistent ticks, headings, labels and edges in every look */
html.clean .routine-title h2{font-size:15px;font-weight:600;letter-spacing:-.005em}
html.clean #listPick svg{fill:var(--muted)!important;stroke:var(--muted)!important;color:var(--muted)}
html.clean .routine-card:not(.all-list) .r-check{padding-left:5px}
html.clean .today-task{padding-left:9px}
html.clean .controls .play>span:last-child{top:calc(100% + 13px)}
html.clean .idea{padding:6px 4px}
html.clean .app:not(.focusing) .nav{border-color:rgba(32,35,43,.06)}
@media(prefers-color-scheme:dark){html.clean .app:not(.focusing) .nav{border-color:rgba(255,255,255,.1)}}
html.look-glass.clean .app .nav.liq-on{border-color:transparent!important}
/* Glass matches Clean's controls */
html.look-glass.clean .row-play.row-play{background:none!important;border:0!important;color:var(--muted)!important}
html.look-glass.clean .r-focus.r-focus,html.look-glass.clean .go-btn.go-btn{background:color-mix(in srgb,var(--accent-2) 16%,transparent)!important;border:0!important;color:var(--accent)!important}
html.look-glass.clean :is(.r-item,.routine-head,.tom-row,.tom-task) :is(.icon-button,.soft-btn,.skip-chip).icon-button,html.look-glass.clean :is(.r-item,.routine-head,.tom-row,.tom-task) :is(.soft-btn,.skip-chip,.chip){background:none!important;border:0!important;box-shadow:none!important}
html.look-glass.clean .set-sec .setting-row.setting-row{background:none!important;border:0!important;box-shadow:none!important;padding-left:0;padding-right:0}
html.look-glass.clean .task-tools .task-search.task-search{background:color-mix(in srgb,var(--ink) 7%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px 50%/16px!important;border:0!important;padding-left:34px}
@media(prefers-color-scheme:light){
html.look-glass.clean dialog :is(input:not([type=range]):not([type=checkbox]),textarea){background:#fff!important;border:1px solid rgba(32,35,43,.1)!important}
html.look-glass.clean .routine-bar.routine-bar{background:rgba(29,27,36,.07)!important}
html.look-glass.clean .dots i:not(.here):not(.done){background:#c9cdd6}
}
/* Nothing sits on the video: no drag handle, and messages go below the cards */
.imm-grab{display:none}
.imm-ui.has-video .imm-slot{aspect-ratio:auto;min-height:0;height:max(200px,calc((100vw - 32px)*.5625))}
html.imm-on .toast{position:fixed;top:auto;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);background:rgba(22,23,28,.88)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12);box-shadow:none}
html.imm-on .toast::before,html.imm-on .toast::after{display:none}
@media(orientation:landscape) and (max-height:520px){.imm-ui.has-video .imm-slot{height:200px}html.imm-on .toast{left:auto;right:12px;width:min(340px,44vw);bottom:12px}}
/* A roomier bar and + button */
html.clean .nav{min-height:64px}html.clean .nav-button{min-height:54px;font-size:12px}html.clean .nav-button :is(svg,img){width:24px;height:24px}
html.clean .fab{width:56px;height:56px}html.clean .fab svg{width:22px;height:22px}
/* Real glass: content scrolls under a frosted header, and sheets, menus and the + are see-through */
html.look-glass .app:not(.focusing):not(.pomo-run)>.top{position:absolute;left:0;right:0;top:0;z-index:20;background:color-mix(in srgb,var(--glass-top,#f4f5f7) 62%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--glass-edge,rgba(32,35,43,.06))}
html.look-glass .app:not(.focusing):not(.pomo-run) #viewScroll{padding-top:calc(var(--glass-head,62px) + env(safe-area-inset-top,0px));-webkit-mask-image:none!important;mask-image:none!important}
html.look-glass.clean .top :is(.pill,.gear){background:rgba(255,255,255,.28)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.look-glass dialog.sheet,html.look-glass dialog#pageDialog.sheet{background:rgba(32,34,40,.72)!important;border-top:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5)}
html.look-glass .ctx-menu{background:rgba(38,40,47,.66)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 40px rgba(0,0,0,.34);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6)}
html.look-glass.clean .fab{background:linear-gradient(160deg,color-mix(in srgb,var(--g1) 72%,transparent),color-mix(in srgb,var(--g3) 80%,transparent))!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -5px 10px rgba(255,255,255,.14),0 8px 20px rgba(32,35,43,.2);-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5)}
html.look-glass.clean #fabMenu button>span{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.look-glass{--glass-edge:rgba(255,255,255,.07)}
@media(prefers-color-scheme:light){
html.look-glass{--glass-edge:rgba(32,35,43,.06)}
html.look-glass dialog.sheet,html.look-glass dialog#pageDialog.sheet{background:rgba(250,251,253,.68)!important;border-top:1px solid rgba(255,255,255,.8)}
html.look-glass .ctx-menu{background:rgba(250,251,253,.62)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 16px 40px rgba(32,35,43,.16)}
html.look-glass.clean #fabMenu button>span:first-child{background:rgba(255,255,255,.66)!important}html.look-glass.clean #fabMenu button>span:last-child{background:rgba(255,255,255,.6)!important;border:1px solid rgba(255,255,255,.7)}
html.look-glass.clean .top :is(.pill,.gear){background:rgba(255,255,255,.5)!important;border-color:rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 0 #fff,0 2px 8px rgba(32,35,43,.06)}
}
@media(prefers-reduced-transparency:reduce){html.look-glass :is(dialog.sheet,.ctx-menu){background:var(--glass-top)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
html.look-glass.clean .app:not(.focusing) :is(.task-stage,.pomo-stage){box-shadow:0 0 0 1px var(--glass-edge)}
@media(max-width:345px){html.clean .nav-button{font-size:11px}}
/* More room for task names: tighter tick, icon and play, and an even inset all round the bar */
html.clean .all-list{padding:4px 8px}
html.clean .r-list>.r-item,html.clean .all-list .r-item{gap:6px}
html.clean .list-tick{width:26px;min-width:26px;margin:0}
html.clean .list-row .r-emo{margin:0}
html.clean .list-row .r-copy{margin-left:2px}
html.clean .row-play{width:24px;min-width:24px;margin-left:0}
html.clean .t-tick{width:26px;min-width:26px}
html.clean .today-task{gap:8px}
html.clean .routine-card:not(.all-list) .r-item{padding-left:0}html.clean .routine-card:not(.all-list) .r-check{padding-left:0}
html.clean .nav{padding:5px;gap:2px}
html.clean .fab{right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px))}
/* The symbol picker pops out as a grid, so you can see them all */
.sym-strip,.sym-strip:not([hidden]){position:fixed;left:16px;right:16px;top:50%;translate:0 -50%;z-index:60;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;justify-items:center;max-width:420px;margin:0 auto;max-height:64dvh;overflow-y:auto;padding:12px;border-radius:14px;background:var(--card,#fff);border:1px solid var(--line,rgba(32,35,43,.08));box-shadow:0 0 0 100vmax rgba(14,15,20,.28),0 16px 40px rgba(14,15,20,.2)}
html.look-glass .sym-strip{background:var(--glass-top,#15161a)}
.sym-strip .emoji-opt{width:44px;height:44px}
/* Air between the tick and the icon on Today */
html.clean .today-task .t-tick{margin-right:4px}
/* The page colour under the status bar follows the look (an old rule forced purple) */
html.look-glass:not(.imm-on){background:var(--glass-top)!important}
/* + menu icons stay perfect circles */
html.look-glass.clean #fabMenu button>span:last-child{border-radius:50%;overflow:hidden}
html.look-glass.clean #fabMenu button{background:none!important;box-shadow:none!important;border:0!important}
html.look-glass .ctx-menu{border-radius:20px}
/* Lists fade out behind the bottom bar, so nothing pokes out underneath it */
.app{--fade-bg:var(--base)}html.look-glass .app{--fade-bg:var(--glass-top)}
.app:not(.focusing):not(.pomo-run)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(92px + env(safe-area-inset-bottom,0px));z-index:21;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--fade-bg) 42%)}
.app:has(#focusView:not([hidden]))::before{display:none}
html.clean .app>.nav{z-index:22}html.clean .fab{z-index:30}
@media(orientation:landscape) and (max-height:520px){.app::before{display:none}}
html.look-glass .nav.liq-on .nav-button.selected>span:not(.nav-count):last-child{text-shadow:0 1px 2px rgba(30,20,110,.45)}
/* Glass: the page starts clear of the frosted header. Thoughts is one calm stack, with no box round it. */
html.look-glass .app:not(.focusing):not(.pomo-run) #viewScroll{padding-top:calc(var(--glass-head,70px) + 14px)}
html.look-glass.clean .card#noteForm.card{background:none!important;border:0!important;box-shadow:none!important;padding:0}
html.clean #noteForm{display:grid;gap:8px}html.clean #noteForm textarea{margin:0;border-radius:14px;background:var(--card);border:1px solid var(--line,rgba(32,35,43,.08))}html.clean #noteForm .park-as{margin:0;gap:8px}html.clean #noteForm .accent-btn{margin:0}
html.look-glass.clean #noteForm textarea{background:color-mix(in srgb,var(--ink) 5%,#fff0)!important;border:1px solid var(--glass-edge)!important}
@media(prefers-color-scheme:light){html.look-glass.clean #noteForm textarea{background:#fff!important}}
/* The black Focus screen reaches every edge */
html:not(.focus-light):not(.imm-on):has(.app.focusing:not(.pomo)){background:#060609!important}
html:not(.focus-light):not(.imm-on):has(.app.focusing:not(.pomo)) body{background:#060609!important}
html.look-glass:not(.focus-light):not(.imm-on):has(.app.focusing:not(.pomo)) body::before{background:#060609}
/* New list: the symbols sit in the sheet as a tidy grid */
#listSym.sym-strip:not([hidden]){position:static;translate:none;box-shadow:none;border:0;background:none;padding:0;margin:4px 0;max-width:none;max-height:152px}
/* ============ Launch: Glass is parked (the code stays, html.labs shows the option). Clean gets the living bubble. ============ */
html:not(.look-glass):not(.labs) :is(#lookLabel,.seg:has(>[data-look])){display:none!important}
html{--bub:.914,.894,.988;--bub2:.72,.66,.98}html[data-accent=orange]{--bub:1,.906,.843;--bub2:1,.72,.52}
@media(prefers-color-scheme:dark){html{--bub:.176,.153,.263;--bub2:.32,.27,.56}html[data-accent=orange]{--bub:.227,.141,.094;--bub2:.46,.25,.12}}
html:not(.look-glass) .nav.liq-on .nav-button{color:var(--muted)!important}
html:not(.look-glass) .nav.liq-on .nav-button.selected{color:var(--accent)!important}
html:not(.look-glass) .nav.liq-on .nav-button.near{color:var(--accent)!important}
html:not(.look-glass) .nav.liq-on .nav-button.selected:not(.near):has(~ .near),html:not(.look-glass) .nav.liq-on .nav-button.near~.nav-button.selected{color:var(--muted)!important}
/* ============ v200: a running Pomodoro looks and behaves like task Focus ============ */
html:not(.focus-light):has(.app.pomo-run.focusing) body{background:#060609}
html:not(.focus-light) .app.pomo-run.focusing{--base:#060609;--card:#121118;--ink:#ece9ff;--muted:#8e88a8;--tint:#1a1824;background:#060609;color:#ece9ff}
html:not(.focus-light) .app.pomo-run.focusing :is(.round,.sound-pill,.icon-button){background:#121118;box-shadow:none;color:#ece9ff}
html:not(.focus-light) .app.pomo-run.focusing :is(.mission,.focus-scope,#focusNote){display:none!important}
html:not(.focus-light) .app.pomo-run.focusing #focusCard{background:none;box-shadow:none;border:0}
html:not(.focus-light) .app.pomo-run.focusing #timerRing{--size:min(64vw,250px)!important;box-shadow:none;background:none;margin-bottom:24px}
html:not(.focus-light) .app.pomo-run.focusing .pomo-stage{background:radial-gradient(circle at 50% 35%,#17142a,#0a0910 70%);box-shadow:0 0 0 1px rgba(185,176,255,.14),0 0 70px rgba(125,109,255,.22)}
html:not(.focus-light) .app.pomo-run.focusing .pomo-stage .pomo-read{display:none}
html:not(.focus-light) .app.pomo-run.focusing .run-clock{display:grid;justify-items:center;gap:4px;text-align:center;margin-bottom:22px}
html:not(.focus-light) .app.pomo-run.focusing .fin-tick{color:#fff!important}
html:not(.focus-light) .app.pomo-run.focusing .saved{color:#fff!important}
html:not(.focus-light) .app.pomo-run.focusing .nav,html:not(.focus-light) .app.pomo-run.focusing .top{display:none}
html:not(.focus-light) .app.pomo-run.focusing :is(.top,.nav,.veil){opacity:0!important;pointer-events:none;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html:not(.focus-light) .app.pomo-run.focusing #timerRing{--size:min(80vw,330px,calc(100dvh - 330px))!important}
html:not(.focus-light):not(.look-glass) .app.pomo-run.focusing .toast button{background:rgba(255,255,255,.13);color:#fff}
html:not(.focus-light):not(.imm-on):has(.app.pomo-run.focusing){background:#060609!important}
html:not(.focus-light):not(.imm-on):has(.app.pomo-run.focusing) body{background:#060609!important}
html:not(.focus-light):not(.imm-on):has(.app.pomo-run.focusing),html:not(.focus-light):not(.imm-on):has(.app.pomo-run.focusing) body{background:#060609!important}
html:not(.focus-light) .app.pomo-run.focusing #focusView{background:none}
html:not(.focus-light) .app.pomo-run.focusing .pomo-round,html:not(.focus-light) .app.pomo-run.focusing #pomoHint{color:var(--muted)}
html:not(.focus-light) .app.pomo-run.focusing .pomo-stage .pomo-read{display:none}
html:not(.focus-light):not(.imm-on) .app.pomo-run.focusing :is(.top,.nav,.veil){opacity:0!important;pointer-events:none;filter:none!important}
html:not(.focus-light) .app.pomo-run.focusing #pomoControls .round{background:#121118;color:#ece9ff}
@media(orientation:landscape) and (max-height:520px){html:not(.focus-light):not(.imm-on) .app.pomo-run.focusing #timerRing{--size:min(58dvh,220px)!important;margin-bottom:6px}html:not(.focus-light):not(.imm-on) .app.pomo-run.focusing .run-clock{margin-bottom:4px}}
html:not(.focus-light):not(.imm-on) .app.pomo-run.focusing #timerRing{--size:min(64vw,250px)!important}

/* The video card: the video runs to the card's rounded edge, with no strip beneath. In landscape it's as large as fits, with the timer beside it, both centred. */
.imm-ui.has-video .imm-now{padding-bottom:0}
html.imm-on .yt-line.on .yt-hit{border-radius:0 0 23px 23px}
@media(orientation:landscape) and (max-height:520px){
  html.imm-on{--imm-vw:max(356px,min(calc((100dvh - 81px - env(safe-area-inset-bottom,0px))*16/9),62vw))}
  .imm-ui.has-video,html.imm-on:not(.look-glass) .imm-ui.has-video{grid-template-columns:var(--imm-vw) minmax(0,1fr);grid-template-rows:minmax(0,1fr);justify-content:stretch;align-content:center;align-items:center;gap:12px}
  .imm-ui.has-video .imm-now{margin-top:0!important}
  .imm-ui.has-video .imm-grab{display:none}
  .imm-ui.has-video .imm-slot{height:calc(var(--imm-vw)*.5625)}
  .imm-ui.has-video .imm-timer{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:8px 4px;padding:10px 8px;transition:translate .36s var(--ease,ease)}
  .imm-ui.has-video .imm-col{display:contents}
  .imm-ui.has-video .imm-ring{order:-1;grid-column:1/-1;width:min(132px,34dvh);margin:0;transition:width .36s var(--ease,ease)}
  .imm-ui.has-video .imm-time{font-size:26px}
  .imm-ui.has-video .imm-by{display:none}
  .imm-ui.has-video .imm-ic{width:38px;height:38px}
  /* Nothing may cover the video, so the menu sits under the timer, icons only */
  html.imm-show .imm-ui.has-video .imm-timer{align-self:start}
  html.imm-show .imm-ui.has-video .imm-ring{width:min(84px,22dvh)}
  html.imm-show .imm-ui.has-video .imm-time{font-size:17px}
  html.imm-on:not(.look-glass):has(.imm-ui.has-video) .app>.nav{position:fixed;left:auto;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 6px);width:calc(100vw - var(--imm-vw,356px) - 36px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));min-width:0;max-width:none;height:48px;min-height:48px;padding:2px;margin:0;transform:none}
  html.clean.imm-on:has(.imm-ui.has-video) .app>.nav .nav-button{flex:1 1 0;min-width:0;min-height:44px;padding:0;font-size:0;gap:0}html.imm-on:has(.imm-ui.has-video) .app>.nav .nav-button>span:last-child{display:none}html.clean.imm-on:has(.imm-ui.has-video) .app>.nav .nav-lava{top:2px;bottom:2px}
}

/* Small controls keep their look, with a finger-sized target around them */
html.clean .list-tick,html.clean .mini-round{position:relative}
html.clean .list-tick::after{content:'';position:absolute;inset:-9px}
html.clean .mini-round::after{content:'';position:absolute;inset:-6px}

/* Battery: nothing loops at rest. The selected tab holds still, and Start my day breathes a few times, then settles. */
.clean .nav-button.selected::before{animation:none}
.clean .start-day .go-disc::before{animation-iteration-count:3}
.clean .start-day .go-disc::after{animation-iteration-count:3}
.amb:not(.on) .amb-drift{animation-play-state:paused}

/* Lists: one grouped page. A log says it's a log, and list tools sit quietly at the bottom. */
.log-mark{width:14px;height:14px;margin-left:7px;vertical-align:-1px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;display:inline-block}
.list-foot{display:flex;justify-content:center;gap:22px;padding:14px 0 90px}.list-foot[hidden]{display:none}
#listPick:is(span){cursor:default}

/* The + menu: bigger, calm line symbols, and a lava bubble that follows your finger */
html.clean #fabMenu button{width:64px;height:64px;background:var(--card);color:var(--accent);box-shadow:0 8px 22px -8px rgba(32,35,43,.3),0 0 0 1px rgba(32,35,43,.05);transition:transform .34s cubic-bezier(.3,1.5,.5,1),opacity .2s ease,background .15s ease,color .15s ease}
html.clean #fabMenu button svg{width:27px;height:27px}
html.clean #fabMenu button>span:first-child{font-size:17px;font-weight:600;padding:10px 16px;border-radius:999px;background:var(--card);color:var(--ink);box-shadow:0 6px 18px -8px rgba(32,35,43,.3)}
html.clean #fabMenu.in.sliding button:not(.hot)>span:first-child{opacity:.55}
html.clean #fabMenu.in.sliding button:not(.hot){opacity:.75}
html.clean #fabMenu.in.sliding button.hot{transform:translate(var(--x),var(--y)) scale(1.12);background:none;color:#fff;box-shadow:none}
html.clean #fabMenu.in.sliding button.hot>span:first-child{background:var(--accent);color:#fff}
#fabMenu .fab-lava{position:absolute;width:64px;height:64px;border-radius:50%;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(160deg,var(--g1),var(--g2) 45%,var(--g3));box-shadow:0 12px 28px -8px var(--glow);transition:transform .22s cubic-bezier(.3,1.5,.5,1),opacity .15s ease}
#fabMenu .fab-lava.on{opacity:1}
html.clean #fabMenu button.hot{z-index:3}
@media (prefers-reduced-motion:reduce){#fabMenu .fab-lava{transition:opacity .15s ease}}
html.clean #fabMenu.in button:not(.hot):not(.chosen){transform:translate(var(--x),var(--y)) scale(1)}
.list-section{margin:18px 4px 4px;font-size:13px;font-weight:600;color:var(--muted)}.list-section:first-child{margin-top:6px}

/* The main Lists page. Every row: symbol, name, quiet detail, chevron. The whole row opens. */
.list-section{display:flex;align-items:center;justify-content:space-between;min-height:30px;margin:20px 2px 2px;font-size:13px;font-weight:600;color:var(--muted)}
.list-section .list-edit{background:none;border:0;padding:6px 2px;font:inherit;color:var(--accent);min-height:30px}
#tasksView .list-section+.list-block{border-top:0}
#tasksView .list-block>button.list-head.shut>svg,#tasksView .log-toggle>svg{display:none}
#tasksView .list-block>button.list-head.shut{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 4px;font-size:16px;font-weight:500;width:100%}
#tasksView .list-block>button.list-head .fold-label{flex:1;text-align:left}
#tasksView .list-block>button.list-head.shut .meta{background:none;color:var(--muted);font-size:15px;font-weight:400}
#tasksView .list-block>button.list-head.shut::after,#tasksView .log-toggle::after,#tasksView .list-block>.side-row::after,#tasksView .done-toggle::after{content:'';flex:none;width:8px;height:8px;margin:0 4px 0 2px;border-top:1.8px solid var(--muted);border-right:1.8px solid var(--muted);rotate:45deg;opacity:.65}
#tasksView .head-emo{flex:none;width:26px;display:grid;place-items:center}#tasksView .head-emo.plain{color:var(--muted)}#tasksView .head-emo.plain svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#tasksView .log-row.side-row{min-height:52px;gap:12px;margin:0;width:100%;padding:0 4px}#tasksView .side-name{font-size:16px;font-weight:500}#tasksView .side-row .side-icon,#tasksView .log-toggle .head-emo{width:26px;flex:none;justify-content:center;display:grid;place-items:center}#tasksView .side-icon svg{width:19px;height:19px}#tasksView .side-meta{font-size:14px}
#tasksView .log-head{align-items:center;gap:10px}
/* Done today: an ordinary row, last on the page */
#tasksView .done-group{margin-top:20px;border:0;border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:0;background:none;box-shadow:none;padding:0}
#tasksView .done-head{padding:0;display:flex;align-items:center;gap:8px;background:none;border:0;box-shadow:none}
#tasksView .done-toggle{flex:1;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 4px;background:none;border:0;box-shadow:none;font:inherit;font-size:16px;font-weight:500;color:var(--ink);text-align:left}
#tasksView .done-toggle>svg{display:none}#tasksView .done-toggle>span:not(.done-tick){flex:1}
#tasksView .done-toggle .done-tick{flex:none;width:26px;display:grid;place-items:center;color:var(--live)}#tasksView .done-tick svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#tasksView .done-toggle b{background:none;color:var(--muted);font-size:15px;font-weight:400;min-width:0;padding:0}
#tasksView .done-group.open .done-toggle::after{rotate:135deg}
#tasksView .done-clear{background:none;border:0;box-shadow:none;color:var(--accent);min-height:44px;padding:0 6px;font-weight:500}

#tasksView .log-toggle{padding:0 4px;gap:12px}
#tasksView .side-row .side-icon{margin:0}#tasksView .list-block>.side-row{padding:0 4px}
#tasksView .done-toggle>span:not(.done-tick){font-size:16px;font-weight:500}
#tasksView .done-toggle .done-tick{display:grid!important;font-size:0}
#tasksView .done-toggle .done-tick svg{display:block}
#tasksView .done-toggle b,#tasksView .done-toggle b::before,#tasksView .done-toggle b::after{background:none!important;border:0!important;box-shadow:none!important;outline:0;width:auto;height:auto;color:var(--muted)!important;animation:none}
#tasksView .list-block>.side-row .side-icon{width:26px!important;display:grid;place-items:center}
#tasksView .done-toggle .done-tick svg{display:block!important;width:19px!important;height:19px!important;transform:none!important;stroke:var(--live)!important;fill:none!important}
#tasksView .done-group .done-toggle>span{font-size:16px!important;font-weight:500!important}
#tasksView .done-group .done-toggle>span.done-tick{display:grid!important;position:static!important;flex:none!important;width:26px!important;height:26px!important;min-width:26px;place-items:center;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
#tasksView .done-group .done-toggle>span.dt-mark{flex:none!important;width:26px;height:26px;display:grid;place-items:center}
#tasksView .dt-mark svg{display:block!important;width:19px!important;height:19px!important;fill:none!important;stroke:var(--live)!important;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#tasksView .done-group .done-toggle>span:not(.dt-mark){flex:1}
#tasksView .list-block>.side-row{gap:12px!important}#tasksView .list-block>.side-row .side-icon{flex:0 0 26px}

/* Computer: tabs down the left, content in a comfortable column. Touch devices keep the phone layout. */
@media(min-width:900px) and (hover:hover) and (pointer:fine){
  html,body{background:var(--base)}
  .app{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);max-width:none;width:100%;height:100dvh;margin:0;border-radius:0;box-shadow:none}
  .app::before{display:none}
  .app>.top{grid-column:2;grid-row:1;width:100%;max-width:760px;margin:0 auto;box-sizing:border-box}
  .app>#viewScroll{grid-column:2;grid-row:2;width:100%;min-width:0}
  .app>#viewScroll>*{max-width:760px;margin-left:auto;margin-right:auto}
  html.clean .app>.nav,html.clean .app:not(.focusing)>.nav{grid-column:1;grid-row:1/3;position:static;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:4px;margin:0;padding:88px 14px 20px;min-height:0;height:100%;box-sizing:border-box;border:0;border-right:1px solid color-mix(in srgb,var(--ink) 7%,transparent);border-radius:0;box-shadow:none;background:none}
  html.clean .app>.nav .liq-canvas,html.clean .app>.nav .nav-lava{display:none!important}
  html.clean .app>.nav .nav-button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink);background:none}
  html.clean .app>.nav .nav-button:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
  html.clean .app>.nav .nav-button.selected{background:var(--btn);color:var(--on-btn)}
  html.clean .app>.nav .nav-button.selected::before{display:none}
  html.clean .fab{position:fixed;right:max(32px,calc(50vw - 480px));bottom:32px}
  .app>.top{position:static}
}
.list-sec{border-top:0!important}.list-sec>.list-section{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin-top:18px}.list-sec:first-child>.list-section{margin-top:4px}
/* Search is off for now: the page reads better without it. */#tasksView .task-search{display:none}#tasksView .task-tools{justify-content:flex-end;min-height:0;margin-top:-34px;margin-bottom:0}
#tasksView .task-tools[hidden]{display:none}

/* Pick for me is gone from Focus: Your day, All tasks and Pomodoro cover it, and Mellow can be asked. */
#focusPick{display:none!important}
/* Running Focus over a scene: dark glass you can see through, and a smaller timer */
html.imm-on:not(.look-glass):not(.imm-plain) .imm-card{background:rgba(16,16,24,.4);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -22px rgba(10,5,30,.6);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);color:#f5f5f8}
html.imm-on:not(.look-glass):not(.imm-plain) :is(.imm-where,.imm-by,.imm-btn small,.imm-label){color:rgba(255,255,255,.72)}
html.imm-on:not(.look-glass):not(.imm-plain) :is(.imm-btn,.imm-name,.imm-time){color:#f5f5f8}
html.imm-on:not(.look-glass):not(.imm-plain) .imm-ic{background:rgba(255,255,255,.14);box-shadow:none;border:1px solid rgba(255,255,255,.12);color:#fff}
html.imm-on:not(.look-glass):not(.imm-plain) .yt-line.on{color:#f5f5f8}
html.imm-on:not(.look-glass):not(.imm-plain) .yt-line.on button{color:#fff;background:rgba(255,255,255,.14)!important}
html.imm-on:not(.look-glass):not(.imm-plain) .yt-line.on .yt-title{color:#f5f5f8!important}
html.imm-on:not(.look-glass):not(.imm-plain) .imm-tr{stroke:rgba(255,255,255,.2)}
@media(orientation:portrait){
  .imm-ui .imm-ring{width:min(36vw,132px)}.imm-ui .imm-time{font-size:30px}
  .imm-ui.has-video .imm-ring{width:min(27vw,104px)}.imm-ui.has-video .imm-time{font-size:23px}.imm-ui.has-video .imm-by{font-size:11px}
  .imm-ui.has-video .imm-timer{padding:8px 6px}.imm-ui.has-video .imm-ic{width:38px;height:38px}.imm-ui.has-video .imm-btn small{font-size:11.5px}.imm-ui.has-video .imm-col{gap:6px}
  .imm-ui .imm-ic{width:40px;height:40px}.imm-ui .imm-btn small{font-size:12px}
}
/* Segmented bars slide under a thumb, like the tab bar. */
.seg{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}.seg button{position:relative;z-index:1}
.seg-ghost{position:absolute;display:block;z-index:0;background:var(--card);box-shadow:var(--raise-sm);transition:left .22s cubic-bezier(.3,1.25,.5,1),width .22s cubic-bezier(.3,1.25,.5,1);pointer-events:none}
.seg.seg-gliding button{background:none!important;box-shadow:none!important}
/* The tick is a plain line in the app's own colour, never a green sticker. */
.toast-emo .emo-tick{color:var(--accent)}

/* Warm shade: cards sit visibly on the page, in every accent. Decided with Astra, 31/10/2026. */
html.clean:not(.look-glass),html[data-accent].clean:not(.look-glass),html[data-accent=orange].clean:not(.look-glass),html[data-accent=violet].clean:not(.look-glass){--base:#fbfaf7;--card:#f4f1eb;--card-raised:#fffefc;--track:#ecE8e1;--line:#e6e1d8;--ink:#26231f;--muted:#5e584f}
@media(prefers-color-scheme:dark){html.clean:not(.look-glass),html[data-accent].clean:not(.look-glass),html[data-accent=orange].clean:not(.look-glass),html[data-accent=violet].clean:not(.look-glass){--base:#161513;--card:#201e1b;--card-raised:#2a2824;--track:#2c2925;--line:#35322d;--ink:#f3efe8;--muted:#b6aea2}}
html.clean:not(.look-glass) .seg-ghost,.clean .seg.range button[aria-selected=true],.clean .seg.range button[aria-checked=true]{background:var(--card-raised)}
html.clean:not(.look-glass) .seg.range:not(.today-seg){background:var(--track);box-shadow:none}
html.clean:not(.look-glass) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select){background:var(--card-raised);border-color:var(--line)}
html.clean:not(.look-glass) :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
html.clean:not(.look-glass) .toast{background:var(--card-raised);border:1px solid var(--line)}
html.clean:not(.look-glass) :is(.pill,.gear){background:var(--card-raised)}
html.clean:not(.look-glass) .r-box{box-shadow:inset 0 0 0 2px var(--muted)}
html.clean:not(.look-glass) :is(.r-item.done,.today-task.done) .r-box{box-shadow:none}
html.clean:not(.look-glass) .switch[aria-checked=false]{background:var(--track);box-shadow:inset 0 0 0 1px var(--muted)}
/* A task with a note shows the symbol on the Focus card. */
.imm-task{align-items:center}.imm-note{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;box-shadow:none;padding:0}.imm-note svg{width:22px;height:22px}.imm-note[hidden]{display:none}
html.focus-light .imm-note{background:rgba(32,35,43,.08);color:var(--ink)}
/* Lists sit on a shaded panel, like every other group. */
html.clean:not(.look-glass) .list-sec>:not(.list-section){background:var(--card)}
html.clean:not(.look-glass) .list-sec>:not(.list-section){padding-left:10px;padding-right:10px}html.clean:not(.look-glass) .list-sec>.list-section+*{border-top-left-radius:16px;border-top-right-radius:16px}html.clean:not(.look-glass) .list-sec>:last-child:not(.list-section){border-bottom-left-radius:16px;border-bottom-right-radius:16px}
/* With a video, the controls take the card's right side, so the note symbol rides on the task's icon. */
.imm-task{position:relative}.imm-ui.has-video .imm-note{position:absolute;left:22px;top:18px;width:24px;height:24px;margin:0;background:var(--accent);color:#fff;z-index:3}.imm-ui.has-video .imm-note svg{width:14px;height:14px}.imm-ui.has-video .imm-note::after{content:'';position:absolute;inset:-10px}
/* The tick and emoji line up with a task's first line, however long it runs. */
html.clean .list-row.trow{align-items:flex-start}html.clean .trow .trow-open{align-items:flex-start;min-height:0;padding-top:13px;padding-bottom:13px;height:auto}html.clean .trow .r-check{margin-top:6px}html.clean .trow .row-play{align-self:center}
html.clean .trow .r-emo{width:24px;height:24px;margin-top:-2px;flex:none}html.clean .trow .r-emo :is(img,.emo){width:24px;height:24px}
.shared-mark{display:inline-flex;margin-left:8px;color:var(--accent);vertical-align:-3px}.shared-mark svg{width:17px;height:17px}
/* The tint stays quiet: bars, inputs and small buttons stay light, only groups of rows take the shade. */
html.clean:not(.look-glass) .app:not(.focusing) .nav{background:var(--card-raised);border-color:var(--line)}
html.clean:not(.look-glass) :is(#noteForm textarea,.park-as button){background:var(--card-raised);border-color:var(--line);box-shadow:none}
html.clean:not(.look-glass) :is(.log-sheet,.log-panel,.log-open,.log-body){background:var(--card-raised)}
html.clean:not(.look-glass) .list-sec>:not(.list-section){box-shadow:none}
html.imm-on,html.imm-on body{overflow-x:clip}
/* Focus card: the whole task name, up to two lines. */
.imm-name{-webkit-line-clamp:2!important}
.lists-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:36px 20px;margin-top:12px;border-radius:20px;background:var(--card)}.lists-empty strong{font-size:17px}.lists-empty p{margin:0 0 6px;color:var(--muted);font-size:14px}.lists-empty .accent-btn{width:auto;padding:0 22px}
/* Your data: the note reads as a normal paragraph. */
#settingsDialog .hint{text-align:left}
/* Narrow phones: a log's name is never squeezed out by its time. */
@media(max-width:345px){.log-toggle .side-meta{display:none}}
/* Readable green. */
html.clean:not(.look-glass) .routine-card.complete .routine-title small{color:#237851}
@media(prefers-color-scheme:dark){html.clean:not(.look-glass) .routine-card.complete .routine-title small{color:#6ccd9c}}
a.wide-tile{display:flex;align-items:center;text-decoration:none;color:var(--ink);text-align:left}a.wide-tile strong{color:var(--ink)}
#settingsDialog p.hint{display:block}#settingsDialog p.hint span{display:inline}