:root{--bg:#f5f5f3;--panel:#fff;--fg:#1d1d1f;--mut:#6e6e73;--line:#e5e5e2;--soft:#f0f0ed;--acc:#3d6fd6;--danger:#d64545;--shadow:0 10px 30px rgba(0,0,0,.14);color-scheme:light}
/* theme: follows the device unless Settings → Appearance picks Light or Dark (html[data-theme]) */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#131315;--panel:#1c1c1f;--fg:#ececee;--mut:#9a9aa1;--line:#2d2d32;--soft:#26262a;--acc:#7ea3f2;--shadow:0 10px 30px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme=dark]{--bg:#131315;--panel:#1c1c1f;--fg:#ececee;--mut:#9a9aa1;--line:#2d2d32;--soft:#26262a;--acc:#7ea3f2;--shadow:0 10px 30px rgba(0,0,0,.5);color-scheme:dark}
:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{font:14px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--fg);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
#app{height:100vh;display:flex;flex-direction:column;gap:10px;padding:14px 20px 16px;max-width:1600px;margin:0 auto}

.top{display:flex;align-items:center;gap:6px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand h1{font-size:24px;margin:0;font-weight:700;letter-spacing:-.02em;line-height:0}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .brand h1 img{filter:invert(1) hue-rotate(180deg) brightness(1.1)}}
:root[data-theme=dark] .brand h1 img{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
.ib{border:0;background:none;border-radius:8px;min-width:32px;height:32px;display:inline-grid;place-items:center;font-size:20px;padding:0 6px}
.ib:hover,.daylbl:hover{background:var(--soft)}
.circ{border:1.5px solid var(--mut);border-radius:50%;min-width:24px;height:24px;font-size:16px;line-height:1;color:var(--mut)}
.prod{display:flex;align-items:center;gap:7px;border:0;background:var(--soft);border-radius:999px;padding:4px 12px 4px 6px;margin-left:8px;font-size:13px;color:var(--mut);white-space:nowrap;min-width:0;overflow:hidden}
.prod:hover{color:var(--fg)}
.prod span{overflow:hidden;text-overflow:ellipsis}.prod em{font-style:normal}
.prod svg{flex:none}.prod .rt,.wgoal .rt{fill:none;stroke:var(--line);stroke-width:3}.prod .rf,.wgoal .rf{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .4s}
.prod.met{color:#2f8f5b}.prod.met .rf,.wgoal.met .rf{stroke:#3aa36b}
.hlbar{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;overflow:hidden;padding:0 12px}
.hseg{display:flex;gap:8px;align-items:center}
.hseg.nx{opacity:.5;cursor:pointer;border-radius:8px;padding:2px 4px}.hseg.nx:hover{opacity:.85;background:var(--soft)}
.hd{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;cursor:default}
.hseg.nx .hd{cursor:pointer}
.hd i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.hd.ok{color:#3aa36b;font-weight:500}.hd.none{color:var(--mut);font-weight:500}
.hn{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-right:2px}
.wkbtn{border:0;background:var(--soft);border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--mut);white-space:nowrap}.wkbtn:hover{color:var(--fg)}
.todaypill{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:600;color:var(--acc)}
.todaypill:hover{background:var(--soft)}
.pre{display:flex;gap:6px;flex-wrap:wrap}.pre button{padding:5px 12px;border-radius:999px}.pre button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.glist{display:flex;flex-direction:column;gap:6px;max-height:40vh;overflow-y:auto}
.gi{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:6px 8px}
.gi i{display:none}.gi.off{opacity:.5}.gi.off b{text-decoration:line-through}
.gt{flex:1;min-width:0;display:flex;flex-direction:column}.gt b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gt small{color:var(--mut);font-size:11.5px}
dialog .gi input{width:72px!important;padding:4px 6px!important;text-align:right}
.gi button{border:0!important;background:none!important;padding:2px 6px!important;color:var(--mut)}.gi button:hover{color:var(--fg)}
dialog.wide{width:min(980px,96vw)}
.wh{display:flex;align-items:center;gap:6px}.wh h3{margin:0 6px;min-width:120px;text-align:center}.wh .sp{flex:1}
.wgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;max-height:65vh;overflow-y:auto}
.wday{border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:5px;cursor:pointer;min-height:180px;min-width:0}
.wday:hover{border-color:var(--acc)}.wday.cur{background:var(--soft)}
.wday.today .wdh span{background:var(--acc);color:#fff}
.wdh{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--mut);margin-bottom:2px}
.wdh span{font-weight:600;color:var(--fg);border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;padding:0 4px}
.wit{border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 14%,var(--panel));border-radius:6px;padding:3px 6px;font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wit small{display:block;color:var(--mut);font-size:10.5px}
.wit.done{opacity:.55;text-decoration:line-through}
.wempty{color:var(--mut);text-align:center;margin:auto}
.wp{margin-top:auto;font-size:11px;color:#2f8f5b;font-weight:600}
@media (max-width:760px){.wgrid{grid-template-columns:1fr}.wday{min-height:0}}
.hsep{width:1px;height:16px;background:var(--line)}
.daylbl{border:0;background:none;font-size:17px;font-weight:500;padding:4px 10px;border-radius:8px;min-width:150px}

.catbar{display:flex;align-items:center;gap:10px;min-height:36px}
.lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;max-width:65%;padding-bottom:2px;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
.chips::-webkit-scrollbar{height:4px}.chips::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.catmore{font-size:14px;color:var(--mut)}
.chip{display:flex;align-items:center;gap:7px;border:1.5px solid transparent;background:var(--soft);border-radius:999px;padding:5px 14px;white-space:nowrap;user-select:none;touch-action:none;flex:none}
.chip i,.menu i{width:11px;height:11px;border-radius:50%;background:var(--c,#9aa0a6);display:inline-block;flex:none}
.chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 20%,var(--panel))}
.hint{color:var(--mut);font-size:12.5px}

main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) 1fr;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.panel{display:flex;flex-direction:column;min-height:0;padding:16px 18px}
#repo{border-right:1px solid var(--line);position:relative}
.ph{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:6px;margin-bottom:10px;min-height:28px}
#tl{container-type:inline-size}
.ph h2{font-size:18px;font-weight:600;margin:0}
.muted{color:var(--mut);font-size:13px}
.search{display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:10px;padding:0 10px;margin-bottom:10px;color:var(--mut)}
.search input{border:0;background:none;outline:0;font:inherit;color:var(--fg);padding:9px 0;flex:1}
.tabs{display:flex;gap:4px;margin-bottom:10px}
.tabs button{border:0;background:none;padding:6px 12px;border-radius:999px;color:var(--mut)}
.tabs button.on{background:var(--soft);color:var(--fg);font-weight:600}
.tabs i{font-style:normal;font-size:11px;margin-left:5px;opacity:.7}
.list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px 2px 12px;margin:0 -2px}
.card{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;padding:10px 10px 10px 12px;background:var(--panel);cursor:grab;user-select:none;touch-action:none;transition:box-shadow .15s;flex:none}
.card:hover{box-shadow:0 2px 10px rgba(0,0,0,.07)}
.card.sel{outline:2px solid var(--acc);outline-offset:-1px}
.cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cb b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb small{color:var(--mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb em{font-style:normal;font-size:11.5px;color:var(--mut)}
.grip{color:var(--mut);opacity:.5;font-size:16px}
.chk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);background:none;color:transparent;font-size:12px;flex:none;display:grid;place-items:center;padding:0}
.chk:hover{border-color:var(--c);color:var(--c)}
.card.done .chk{background:var(--c);border-color:var(--c);color:#fff}
.card.done b{text-decoration:line-through;color:var(--mut)}
.empty{color:var(--mut);text-align:center;padding:30px 10px;font-size:13px}
#repo.dropzone::after{content:"Drop to unschedule";position:absolute;inset:8px;border:2px dashed var(--acc);border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 10%,var(--panel));color:var(--acc);font-weight:600;pointer-events:none}

.tlbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px}
.tlin{display:flex;padding:8px 0;box-sizing:border-box}
.labels{position:relative;width:58px;flex:none}
.labels span{position:absolute;right:12px;transform:translateY(-50%);font-size:12px;color:var(--mut);white-space:nowrap}
.grid{position:relative;flex:1}
.hl{position:absolute;left:0;right:0;border-top:1px solid var(--line)}
.hl.half{border-top-style:dashed;opacity:.5}
.past{position:absolute;left:0;right:0;top:0;background:color-mix(in srgb,var(--fg) 3.5%,transparent);pointer-events:none}
.now{position:absolute;left:-5px;right:0;border-top:2px solid var(--danger);z-index:5;pointer-events:none}
.now::before{content:"";position:absolute;left:0;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--danger)}

.blk{position:absolute;display:flex;padding:4px 28px 4px 13px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:8px;background:color-mix(in srgb,var(--c) 20%,var(--panel));overflow:hidden;cursor:grab;user-select:none;touch-action:none;z-index:2}
.blk::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--c)}
.bi{min-width:0;display:flex;flex-direction:column}
.bi b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bi small{font-size:11.5px;color:var(--mut);white-space:nowrap}
.blk.short{padding-top:0;padding-bottom:0;align-items:center}
.blk.short::before{top:2px;bottom:2px}
.blk.short .bi{flex-direction:row;gap:6px;align-items:baseline}
.blk.narrow{padding-right:4px}.blk.narrow small,.blk.narrow .play{display:none}
.blk.narrow:hover .play{display:grid}
.blk.done{opacity:.6}.blk.done b{text-decoration:line-through}
.blk.sel{box-shadow:0 0 0 2px var(--acc);z-index:3}
.blk.act{box-shadow:0 0 0 2px var(--c)}
.blk.moving{opacity:.3}
.blk{transition:opacity .15s}.blk.dim{opacity:.18}
.blk.preview{left:2px;right:2px;background:color-mix(in srgb,var(--acc) 12%,transparent);border:1.5px dashed var(--acc);z-index:6;pointer-events:none;align-items:flex-start}
.blk.preview::before{display:none}
.blk.preview small{font-size:12px;font-weight:600;color:var(--acc)}
.play{position:absolute;top:4px;right:4px;width:20px;height:20px;border:0;border-radius:5px;background:color-mix(in srgb,var(--c) 40%,var(--panel));font-size:9px;display:grid;place-items:center;padding:0;z-index:4}
.blk.short .play{top:50%;transform:translateY(-50%);height:16px}
.play:hover{background:var(--c);color:#fff}
.h{position:absolute;left:0;right:0;height:8px;cursor:ns-resize;z-index:3}
.h.top{top:-1px}.h.bot{bottom:-1px}
.h::after{content:"";position:absolute;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:var(--c);opacity:0;transition:opacity .15s}
.h.top::after{top:2px}.h.bot::after{bottom:2px;opacity:.6}
.blk:hover .h::after{opacity:.9}
.droptgt{outline:2px dashed var(--acc)!important;outline-offset:1px}
.ghost{position:fixed!important;left:0;top:0;margin:0;z-index:1000;pointer-events:none;box-shadow:var(--shadow);opacity:.95}
body.dragging,body.dragging *{cursor:grabbing!important}
body.painting .card,body.painting .blk{cursor:copy}

.dock{display:flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);flex:none}
.dock .ico{font-size:22px}
.dt{flex:1;min-width:0;display:flex;flex-direction:column}
.dt b{font-weight:500;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsub{color:var(--mut);font-size:12.5px}
.dtime{font:600 30px/1 ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.over .dtime{color:var(--danger)}
.paused .dtime{opacity:.45}
.round{background:var(--fg)!important;color:var(--panel)!important;border-radius:50%!important;width:32px;font-size:12px}

.menu{position:fixed;z-index:1001;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px;min-width:190px;display:flex;flex-direction:column}
.menu button{border:0;background:none;text-align:left;padding:6px 10px;border-radius:6px;display:flex;align-items:center;gap:8px}
.menu button:hover{background:var(--soft)}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.danger{color:var(--danger)!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--fg);color:var(--panel);padding:9px 14px;border-radius:10px;z-index:1002;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)}
body.timing .toast{bottom:96px}
.toast button{border:0;background:none;color:color-mix(in srgb,var(--acc) 55%,#fff);font-weight:700;padding:0}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--fg);padding:20px;width:min(460px,92vw);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.28)}
dialog form{display:flex;flex-direction:column;gap:12px}
dialog h3{margin:4px 0 0;font-size:16px}
dialog input:not([type=checkbox]):not([type=radio]):not([type=color]),dialog textarea,dialog select{font:inherit;color:inherit;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
dialog textarea{resize:vertical}
#eTitle{font-size:16px;font-weight:600}
dialog label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--mut);flex:1}
dialog label.ck{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--fg);flex:none}
dialog footer{display:flex;flex-direction:row-reverse;gap:8px;align-items:center;margin-top:4px}
dialog footer .sp{flex:1}
dialog button{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 14px}
button.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
#eBlocks{display:flex;flex-direction:column;gap:4px}
.eb{display:flex;justify-content:space-between;align-items:center;background:var(--soft);border-radius:8px;padding:3px 3px 3px 10px;font-size:13px}
.eb button{border:0;background:none;padding:2px 8px}
#xOut{font:12.5px/1.5 ui-monospace,Menlo,monospace}
#cColor{width:40px;height:32px;border:0;padding:0;background:none}
.sw{display:flex;gap:6px;flex-wrap:wrap}
.sw button{width:24px;height:24px;border-radius:50%;padding:0;border:2px solid var(--panel);background:var(--c);box-shadow:0 0 0 1px var(--line)}

body.popout{overflow:auto}
.pop{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center}
.pop b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop .dtime{font-size:38px;margin:4px 0}
.pop button{border:1px solid var(--line);background:var(--soft);border-radius:8px;padding:6px 16px}
@media (max-width:1100px){.prod .lg{display:none}}
/* narrow timeline panel: the overview bar gets its own row under the title instead of squeezing between title and snap */
@container (max-width:640px){#tl .hlbar{order:3;flex-basis:100%;justify-content:flex-start;padding:0;overflow-x:auto;scrollbar-width:none}}
@media (max-width:820px){.catbar .lbl{display:none}.chips{max-width:none;flex:1}.daylbl{min-width:0;font-size:15px}}
.gi .usep{font-size:11.5px;white-space:nowrap;color:var(--acc)!important}
@media (min-width:1101px){.prod .sm{display:none}}

/* ---------- phone layout ---------- */
.mtabs{display:none}
#app{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app input,dialog input,dialog textarea{-webkit-user-select:text;user-select:text}
.lifted{transform:scale(1.03);box-shadow:var(--shadow)!important;transition:transform .12s}
@media (max-width:700px){
  #app{padding:max(8px,env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));gap:8px;height:100dvh}
  .top{gap:2px}
  .brand{gap:6px;min-width:0}.brand h1{display:none}
  .prod{margin-left:2px}
  #exportBtn{display:none}
  .daylbl{font-size:14px;padding:4px 4px;white-space:nowrap}
  .prod{font-size:12px;padding:4px 8px 4px 4px;flex:none}.prod em{display:none}
  #snapLbl,.dsub{display:none}
  .brand img{width:24px;height:24px}
  .todaypill{padding:3px 8px;font-size:12px}
  .catbar{min-height:32px}.chip{padding:5px 11px}
  main{grid-template-columns:1fr;border-radius:14px}
  body[data-m=tl] #repo,body[data-m=repo] #tl{display:none}
  #repo{border-right:0}
  .panel{padding:12px 12px}
  .ph h2{font-size:16px}
  .labels{width:48px}.labels span{right:8px;font-size:11px}
  .h{height:16px}.h.top{top:-4px}.h.bot{bottom:-4px}
  .h::after{opacity:.5}
  .play{width:26px;height:26px;font-size:11px}
  .card{padding:12px 10px 12px 12px}.chk{width:26px;height:26px}
  .grip{display:none}
  .blk.sel{box-shadow:0 0 0 2px var(--acc),var(--shadow);z-index:7}
  .blk:not(.sel) .h::after{opacity:0}
  .blk.sel .h{height:22px}.blk.sel .h.top{top:-11px}.blk.sel .h.bot{bottom:-11px}
  .blk.sel .h::after{opacity:1;width:34px;height:6px;margin-left:-17px;border-radius:4px;background:var(--acc)}
  .blk.sel .h.top::after{top:8px}.blk.sel .h.bot::after{bottom:8px}
  .blk.sel{overflow:visible}
  .mtabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px;flex:none}
  .mtabs button{flex:1;border:0;background:none;border-radius:10px;padding:10px;font-weight:600;color:var(--mut)}
  .mtabs button.on{background:var(--soft);color:var(--fg)}
  body.dragging .mtabs{opacity:.4}
  .dock{padding:8px 12px;gap:8px}.dock .ico,.dock [data-act=popout],.dock [data-act=mode]{display:none}
  .dt b{font-size:14px}.dtime{font-size:22px}
  dialog{padding:16px}
  .wgrid{max-height:70vh}
}

.linkbtn{border:0!important;background:none!important;color:var(--acc);padding:7px 4px!important}

/* touch screens: let the page scroll through cards and blocks; a selected block slides */
@media (pointer:coarse){.card,.blk{touch-action:pan-y}.chip,.chips{touch-action:pan-x}.blk.sel,.blk.sel .h{touch-action:none}}
.logobtn{border:0;background:none;padding:0;border-radius:8px;display:grid;cursor:pointer;transition:transform .12s}.logobtn:hover{transform:scale(1.08)}.logobtn:active{transform:scale(.95)}
.helpbtn{font-size:15px;font-weight:700;color:var(--mut);border:1.5px solid var(--line)!important;border-radius:50%!important;min-width:26px;height:26px}
.painthint{display:flex;align-items:center;gap:8px;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 14%,var(--panel));border-radius:999px;padding:4px 6px 4px 10px;font-size:12.5px;white-space:nowrap}
.painthint i{width:10px;height:10px;border-radius:50%;background:var(--c)}.painthint span{background:var(--c);color:#fff;border-radius:999px;padding:2px 10px;font-weight:600}
.dropcancel{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:999;background:var(--danger);color:#fff;font-weight:700;padding:16px 28px;border-radius:999px;box-shadow:var(--shadow)}
.dx{position:absolute;top:10px;right:10px;border:0!important;background:none!important;font-size:22px;line-height:1;padding:4px 8px!important;color:var(--mut);z-index:2}
dialog{position:fixed}
dialog form>.dx+*{margin-right:34px}
.when{gap:8px}.when label{min-width:0}
.qagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qagrid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:12px;font-size:12.5px;text-align:center}
.qagrid span{font-size:20px}
.qalist{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow-y:auto}
.qalist button{display:flex;align-items:center;gap:10px;text-align:left;border-left:4px solid var(--c,var(--line))!important;padding:9px 10px}
.qalist i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}.qalist span{display:flex;flex-direction:column;min-width:0}.qalist small{color:var(--mut);font-size:11.5px}
#qaQ{flex:1}
.helpdlg{width:min(420px,92vw)}
.slide{text-align:center;padding:10px 6px 0;min-height:220px;display:flex;flex-direction:column;align-items:center;gap:6px;touch-action:pan-y;user-select:none}
.slide .hic{font-size:40px;width:76px;height:76px;border-radius:22px;background:var(--soft);display:grid;place-items:center;margin-bottom:6px}
.slide h3{margin:0;font-size:18px}.slide p{margin:0;color:var(--mut);line-height:1.5}
.helpnav{display:flex;align-items:center;justify-content:space-between}
.dots{display:flex;gap:6px}.dots button{width:8px;height:8px;border-radius:50%;padding:0!important;border:0!important;background:var(--line)!important}.dots button.on{background:var(--acc)!important;width:20px;border-radius:4px}
@media (max-width:700px){.qagrid{grid-template-columns:repeat(2,1fr)}.helpbtn{min-width:24px;height:24px}.painthint{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom));z-index:50;box-shadow:var(--shadow);padding:8px 8px 8px 14px;font-size:14px}}
/* phone held sideways: both panels side by side, compact header */
@media (max-height:500px) and (orientation:landscape){
  #app{padding:6px 12px calc(6px + env(safe-area-inset-bottom));gap:6px;height:100dvh}
  .brand h1,.catbar .lbl,#exportBtn{display:none}
  .catbar{min-height:28px}.chip{padding:3px 10px}
  main{grid-template-columns:minmax(220px,38%) 1fr}
  .panel{padding:8px 10px}.ph{margin-bottom:6px}.ph h2{font-size:15px}
  .search{margin-bottom:6px}.search input{padding:6px 0}.tabs{margin-bottom:6px}
  .card{padding:7px 8px}.cb small{display:none}
  .dock{padding:6px 10px}.dtime{font-size:20px}.dsub,.dock .ico{display:none}
  .mtabs{display:none!important}
  body[data-m] #repo,body[data-m] #tl{display:flex!important}
}

/* ---------- due dates, urgency, parts, Off the Clock, anytime (v1.3) ---------- */
:root{--ur:#e5484d;--uo:#f0802a;--uy:#e2b33b}
.u-r{--u:var(--ur)}.u-o{--u:var(--uo)}.u-y{--u:var(--uy)}
/* days-left chip: next to the play button on blocks, at the right of cards */
.due{flex:none;display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);background:var(--panel);color:var(--mut);border-radius:999px;padding:1px 7px;font-size:11.5px;font-weight:600;line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.due b{font-weight:800}
.due[class*=u-]{border-color:var(--u);background:color-mix(in srgb,var(--u) 16%,var(--panel));color:color-mix(in srgb,var(--u) 75%,var(--fg))}
.due:hover{border-color:var(--fg)}
.blk .due{align-self:flex-start;margin-left:auto;padding:0 6px;font-size:11px}
.blk.short .due{align-self:center}
/* 45-minute and other short blocks: one line, the title gives way first, then the time */
.blk{container-type:inline-size}
.blk.short .bi{flex:1;gap:6px;min-width:0}
.blk.short .bi b{flex:0 1 auto;min-width:2em}
.blk.short .bi small{flex:0 10 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.blk.tiny .bi small,.blk.tiny .due span{display:none}
.blk.short .play{height:18px}.blk.tiny .play{height:14px;width:18px}
@container (max-width:110px){.blk.short .bi small{display:none}.blk .due span{display:none}}
/* Off the Clock: hatched, still visible */
.blk.offc{border-style:dashed;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,var(--panel)) 0 7px,color-mix(in srgb,var(--c) 7%,var(--panel)) 7px 14px)}
/* parts */
.ppill{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:600;border-radius:999px;padding:0 7px;line-height:16px;background:var(--soft);color:var(--mut);border:1px solid var(--line)}
.kids{display:flex;flex-direction:column;gap:6px;margin:-2px 0 2px 18px;padding-left:10px;border-left:2px solid var(--line)}
.card.kid{padding-top:7px;padding-bottom:7px}
.fold{border:0;background:var(--soft);border-radius:999px;padding:0 8px;margin-right:6px;font-size:11px;font-weight:600;color:var(--fg);line-height:18px}
.fold:hover,.fold.on{background:color-mix(in srgb,var(--acc) 16%,var(--panel))}
.stale{color:#b07a2a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .stale{color:#d9a75a}}
:root[data-theme=dark] .stale{color:#d9a75a}
/* repository header: sort */
.pha{display:flex;align-items:center;gap:6px}
.sortbtn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:2px 10px;font-size:12px;color:var(--mut);white-space:nowrap}
.sortbtn:hover{color:var(--fg);background:var(--soft)}.sortbtn.dir{color:var(--acc);font-weight:600}
/* due soon strip */
.soon{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin:-2px 0 10px;padding-bottom:2px;flex:none;touch-action:pan-x}
.soon::-webkit-scrollbar{display:none}
.soon .lbl{font-size:10.5px;flex:none}
.spill{flex:none;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--u);background:color-mix(in srgb,var(--u) 12%,var(--panel));border-radius:999px;padding:3px 9px;font-size:12px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spill b{color:var(--u);font-weight:800}.spill span{font-weight:600;color:color-mix(in srgb,var(--u) 75%,var(--fg))}
/* anytime tray */
.tray{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-4px 0 8px;padding:6px 8px;border:1px dashed var(--line);border-radius:12px;min-height:38px}
.tray.empty{display:none}
body.dragging .tray.empty{display:flex}
.tray.over{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--panel))}
.tray .lbl{font-size:10.5px}
.tchip{display:flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--c) 55%,var(--line));border-radius:999px;padding:3px 8px 3px 4px;background:var(--panel);font-size:13px;cursor:grab;user-select:none;touch-action:none;max-width:100%}
.tchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tchip .chk{width:20px;height:20px;border-color:var(--c)}
.tchip.done{opacity:.6}.tchip.done span{text-decoration:line-through}.tchip.done .chk{background:var(--c);border-color:var(--c);color:#fff}
.tdrop{font-size:12px}
@media (pointer:coarse){.tchip{touch-action:pan-y}}
/* editor */
.erow2{align-items:flex-start}
.parbtn{text-align:left;width:100%;padding:7px 10px!important;background:var(--soft)!important;min-height:37px;display:flex;align-items:center;gap:4px;overflow:hidden}
.parbtn .ppill{font-size:12.5px;line-height:20px;background:var(--panel)}
.parpick{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px;margin-top:-4px}
.parlist{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.parlist button{display:flex;align-items:center;gap:8px;text-align:left;padding:7px 10px}
.parlist i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.parlist span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.parlist small{color:var(--mut)}
.parlist .mk{color:var(--acc);font-weight:600}
.ekids{display:flex;flex-direction:column;gap:4px}
.kidrow{display:flex;align-items:center;gap:8px;text-align:left;padding:5px 10px!important;border:0!important;background:var(--soft)!important}
.kidrow i{font-style:normal;color:var(--mut)}.kidrow span{flex:1}.kidrow small{color:var(--mut)}.kidrow.done span{text-decoration:line-through;color:var(--mut)}
.elbl{font-size:12.5px;color:var(--mut)}
.efield{display:flex;flex-direction:column;gap:4px}
.efield small.u-r,.efield small.u-o,.efield small.u-y{color:color-mix(in srgb,var(--u) 80%,var(--fg))}
.qd{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.qd button{border-radius:999px!important;padding:5px 12px!important}
.qd button.on{background:var(--acc);border-color:var(--acc);color:#fff}
dialog .qd input[type=date]{width:auto!important;padding:5px 8px!important;border-radius:999px!important}
.qd .qx{padding:5px 10px!important;color:var(--mut)}
.urgsel{display:flex;gap:8px}
.urgsel button{width:38px;height:34px;padding:0!important;border-radius:10px!important;font-weight:800;font-size:16px;color:var(--u);border-color:color-mix(in srgb,var(--u) 50%,var(--line))!important}
.urgsel .ux{color:var(--mut);opacity:.6}
.urgsel button.on{background:var(--u,var(--soft))!important;color:#fff;border-color:var(--u,var(--fg))!important;opacity:1}
.urgsel .ux.on{background:var(--soft)!important;color:var(--fg);border-color:var(--fg)!important}
dialog label.ck small{font-size:12px}
/* phone */
@media (max-width:700px){
  .sortbtn span{display:none}.sortbtn{padding:4px 9px;font-size:13px}
  .mtabs button[data-n]:not([data-n=""])::after{content:attr(data-n);display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;border-radius:999px;background:var(--ur);color:#fff;font-size:11px;padding:0 5px}
  .due{padding:2px 8px;font-size:12px}
  .blk .due{font-size:11px}
}
.panel{min-width:0}.soon{min-width:0;max-width:100%}

/* ---------- v1.3 polish ---------- */
/* urgency chip: one soft pill, same height and line as the play button */
.due{border:0;height:20px;padding:0 7px;gap:3px;border-radius:6px;background:var(--soft);color:var(--mut);font-size:11.5px;font-weight:600}
.due b{font-weight:800;font-size:12px}
.due[class*=u-]{background:color-mix(in srgb,var(--u) 18%,var(--panel));color:color-mix(in srgb,var(--u) 70%,var(--fg))}
.due[class*=u-] b{color:var(--u)}
.due.only{padding:0;width:20px;justify-content:center}
.due:hover{border:0;filter:brightness(.96)}
.blk .due{position:absolute;top:4px;right:28px;margin:0;align-self:auto;height:20px;font-size:11px}
.blk.short .due,.blk.short .play{top:50%;transform:translateY(-50%)}
.blk.short .play{height:20px}
.blk.tiny .due,.blk.tiny .play{height:16px}
.blk:has(.due){padding-right:var(--pr,78px)}
.blk:has(.due.only){--pr:52px}
.play{border-radius:6px}
@container (max-width:110px){.blk:has(.due){--pr:52px}.blk .due{padding:0;width:20px;justify-content:center}}
/* cards: category as a short bar above the title, urgency as the left edge */
.card .chk{border-color:color-mix(in srgb,var(--c) 45%,var(--line))}
/* task settings: body scrolls, buttons stay pinned at the bottom */
dialog#ed{padding:0;max-height:92dvh;overflow:hidden}
#ed form{max-height:92dvh;gap:0}
#ed form>.dx+*{margin-right:0}
.ebody{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
#eTitle{width:calc(100% - 30px)}
#ed footer{margin:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel);flex-wrap:nowrap}
.erow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.erow2 label{min-width:0}
.parbtn{height:38px;min-height:0}
.esec{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px}
.eh{display:flex;align-items:baseline;gap:8px;min-width:0}
.eh small{color:var(--mut);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.eh small.u-r,.eh small.u-o,.eh small.u-y{color:color-mix(in srgb,var(--u) 80%,var(--fg));font-weight:600}
.elbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.qd button,.qd .qx{height:32px;padding:0 12px!important;font-size:13px}
dialog .qd input[type=date]{height:32px;width:150px!important;font-size:13px}
.urow{align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:6px;margin-top:4px}
.urgsel{gap:6px}
.urgsel button{width:auto;height:30px;padding:0 10px!important;font-size:12.5px;font-weight:600;color:var(--fg);display:inline-flex;align-items:center;gap:6px;border-color:var(--line)!important}
.urgsel button i{width:9px;height:9px;border-radius:50%;background:var(--u)}
.urgsel .ux{opacity:1;color:var(--mut)}
.urgsel button.on{background:color-mix(in srgb,var(--u) 18%,var(--panel))!important;color:var(--fg);border-color:var(--u)!important}
.urgsel .ux.on{background:var(--soft)!important;border-color:var(--fg)!important;color:var(--fg)}
#eUrgTxt{font-size:12px}
.opts{gap:2px;padding:4px 12px}
.tg{display:flex!important;flex-direction:row!important;align-items:center;gap:12px!important;padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer;color:var(--fg)!important;font-size:14px!important}
.tg:last-of-type{border-bottom:0}
.tg input{width:20px;height:20px;accent-color:var(--acc);flex:none;margin:0}
.tg span{display:flex;flex-direction:column;gap:1px;min-width:0}.tg b{font-weight:600}.tg small{color:var(--mut);font-size:12px}
.when.sub{padding:2px 0 10px 32px;border-bottom:1px solid var(--line)}
.opts #eBlocks:empty{display:none}
.einfo{font-size:12px;text-align:center}
@media (max-width:700px){
  .blk .due{top:7px;right:34px}.blk:has(.due){--pr:86px}.blk:has(.due.only){--pr:60px}
  .blk.short .play{height:24px}
  .ebody{padding:16px}
  #ed footer{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:6px}
  #ed footer button{padding:8px 12px}
  dialog .qd input[type=date]{width:140px!important}
}
@media (max-width:700px){.qd{gap:5px}.qd button{padding:0 9px!important}.esec{padding:10px}}
.spill{border:0;border-radius:8px;height:26px;background:color-mix(in srgb,var(--u) 16%,var(--panel))}
#eWhen.sub{border-bottom:0}
#ed .dx{background:var(--panel)!important;border-radius:50%;width:34px;height:34px;padding:0!important}

/* cards: category is the left edge, urgency a short bar above the title */
.ctop{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.ubar{width:28px;height:4px;border-radius:4px;background:var(--u);flex:none}
/* settings: sections in boxes (pages and the group list: see the end of this file) */
dialog#sd{padding:0;max-height:92dvh;overflow:hidden}
#sd form{max-height:92dvh;overflow-y:auto;padding:20px 20px 0;gap:8px}
#sd form>.dx+*{margin-right:34px}
#sd .stitle{font-size:18px;margin:0 0 4px;order:0}
#sd form>h3:not(.stitle){font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:10px 0 0}
.ssec,#syncBox,#mcpBox,#pwaBox,#pwaInst{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
.ssec>p,#syncBox>p,#mcpBox>p,#pwaBox>p,#pwaInst>p{margin:0}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ssec .tg{padding:8px 0;border-bottom:1px solid var(--line)}.ssec .tg:last-child{border-bottom:0;padding-bottom:0}
#sd .dx{background:var(--panel)!important;border-radius:50%;width:34px;height:34px;padding:0!important}
#syncBox .row input{flex:1;min-width:140px}
@media (max-width:700px){#sd form{padding:16px 16px 0}}
@media (max-width:700px){#syncBox .row input{flex-basis:100%}}
.opts>.elbl{padding-top:8px}
.edue{display:flex;flex-direction:column;gap:8px;padding:10px 0 12px}
.edue .eh b{font-weight:600;font-size:14px}
#eWhen.sub,#eAnyW.sub{border-bottom:1px solid var(--line)}
dialog .qd input[type=time]{height:32px;width:118px!important;font-size:13px;padding:5px 8px!important;border-radius:999px!important}
.opts .tg{border-bottom:1px solid var(--line)}
.opts:has(#eOff) .tg{border-bottom:0}
.ebody>*{flex-shrink:0}
@media (max-width:700px){dialog .qd input[type=date]{width:128px!important;padding:5px 6px!important}dialog .qd input[type=time]{width:100px!important;padding:5px 6px!important}.qd .qx{padding:0 8px!important}}
@media (max-width:700px){#eWhen label:first-child{flex-basis:100%}}
.due.none{background:var(--soft);color:var(--mut);opacity:.75}
.due.none:hover,.card:hover .due.none,.blk:hover .due.none{opacity:.9;background:var(--soft)}
.blk:has(.due.none){--pr:52px}
@media (max-width:700px){.blk:has(.due.none){--pr:60px}}
.eh .opt{font-weight:400;font-size:12px;color:var(--mut);margin-left:2px}
.menu .msub{margin-left:auto;padding-left:12px;color:var(--mut)}

/* ---------- V4 ---------- */
/* drag fix: the empty "anytime" drop zone floats over the top of the timeline while placing, so nothing shifts under the pointer */
#tl{position:relative}
body.dragging .tray.empty{display:none}
body.dragplace .tray.empty{display:flex;position:absolute;left:18px;right:18px;top:52px;z-index:8;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(4px);box-shadow:var(--shadow);border-color:var(--acc);margin:0}
body.dragplace .tray.empty{flex-wrap:nowrap;min-height:0;padding:5px 10px;white-space:nowrap;overflow:hidden}
body.dragplace .tray.empty .tdrop{overflow:hidden;text-overflow:ellipsis}
body.dragplace .tray.empty.over{background:color-mix(in srgb,var(--acc) 14%,var(--panel))}
/* task settings: every field box the same height (Category used to be shorter than "Part of") */
dialog select{appearance:none;-webkit-appearance:none;height:38px;line-height:20px;padding:8px 32px 8px 10px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239a9aa1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;text-overflow:ellipsis;white-space:nowrap}
.erow2 .parbtn,.erow2 select{height:38px;min-height:38px;border-radius:8px;font-size:14px}
.parbtn{border:1px solid var(--line)!important;padding:0 10px!important}
#ed .when input,#eSessW input{height:38px;min-height:38px;-webkit-appearance:none;appearance:none;display:block;line-height:20px}
/* description: grows with its text, ⤢ opens it tall */
.edesc{position:relative}
.edesc textarea{display:block;min-height:58px;padding-right:38px!important}
.dbig{position:absolute;right:6px;top:6px;width:28px;height:28px;padding:0!important;border-radius:7px!important;font-size:15px;color:var(--mut);background:var(--panel)!important}
.dbig:hover{color:var(--fg)}
#ed.descbig .edesc textarea{height:min(62dvh,560px)!important;resize:none}
/* parts fold, in the list and in task settings */
.fold .chev,.kfold .chev{display:inline-block;width:10px}
.fold{padding:1px 9px;line-height:20px;border:1px solid var(--line)}
.kfold{display:flex;align-items:center;gap:6px;border:0!important;background:none!important;padding:2px 0!important;text-align:left;color:var(--mut)}
.kfold:hover .elbl{color:var(--fg)}
/* reorder: a line where the card will land */
.card.ins-b{box-shadow:0 -3px 0 -1px var(--acc)}
.card.ins-a{box-shadow:0 3px 0 -1px var(--acc)}
.list.ins-end::after{content:"";display:block;height:3px;border-radius:3px;background:var(--acc);flex:none}
.chip.ins-l{box-shadow:-4px 0 0 -1px var(--acc)}.chip.ins-r{box-shadow:4px 0 0 -1px var(--acc)}
.mtabs.droptab [data-m=tl]{outline:2px dashed var(--acc);outline-offset:-3px;color:var(--acc)}
body.dragging .mtabs.droptab{opacity:1}
/* search: what matched */
mark{background:color-mix(in srgb,#f5c542 45%,transparent);color:inherit;border-radius:3px;padding:0 1px}
/* filters */
.filtbtn i{font-style:normal;background:var(--acc);color:#fff;border-radius:999px;padding:0 6px;margin-left:4px;font-size:11px}
.filtbtn.on{color:var(--acc);border-color:var(--acc)}
.filtbar{display:flex;align-items:center;gap:8px;margin:-4px 0 10px;padding:5px 6px 5px 12px;border-radius:10px;background:color-mix(in srgb,var(--acc) 10%,var(--panel));color:var(--acc);font-size:12.5px;font-weight:600;flex:none}
.filtbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filtbar button{border:0;background:none;color:inherit;padding:2px 6px}
.filt{position:absolute;left:12px;right:12px;top:52px;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;max-height:calc(100% - 64px);overflow-y:auto}
.fh{display:flex;align-items:center;gap:8px}.fh b{flex:1;font-size:15px}
.fopts{display:flex;flex-wrap:wrap;gap:6px}
.fo{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 11px;font-size:12.5px;height:30px}
.fo i{width:9px;height:9px;border-radius:50%;background:var(--c);display:none}.fo[style] i{display:inline-block}
.fo.on{background:color-mix(in srgb,var(--acc) 14%,var(--panel));border-color:var(--acc);color:var(--fg);font-weight:600}
.frange{display:flex;gap:10px}.frange label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut);flex:1}
.frange input{font:inherit;color:inherit;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:6px 8px;height:36px}
/* sessions and overnight */
.night{flex-basis:100%;color:var(--acc);font-size:12px;font-weight:600}
.sessadd{align-self:flex-start;border:0!important;background:none!important;color:var(--acc);font-size:13px;padding:6px 0!important}
.sess{align-items:flex-end}.sess .primary{height:38px}
/* version history (Settings) */
#verBox{border:1px solid var(--line);border-radius:12px;padding:4px 12px}
#verBox details{border-bottom:1px solid var(--line);padding:8px 0}#verBox details:last-child{border-bottom:0}
#verBox summary{cursor:pointer;display:flex;align-items:baseline;gap:8px;list-style:none}
#verBox summary::-webkit-details-marker{display:none}
#verBox summary::before{content:"▸";color:var(--mut);width:10px}#verBox details[open]>summary::before{content:"▾"}
#verBox summary b{font-size:14px}#verBox summary small{color:var(--mut);font-size:12px}#verBox summary em{font-style:normal;color:var(--mut);font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#verBox .vtag{font-size:10.5px;font-weight:700;color:#fff;background:var(--acc);border-radius:999px;padding:1px 7px}
#verBox h4{margin:10px 0 4px 18px;font-size:12.5px}
#verBox ul{margin:0;padding:0 0 0 34px;font-size:13px;color:var(--fg)}#verBox li{margin:2px 0}
#verBox>details>p{margin:6px 0 0 18px}
@media (max-width:700px){.filtbtn span{display:none}.filt{left:8px;right:8px}#ed.descbig .edesc textarea{height:58dvh!important}}
.dropcancel{transition:bottom .15s}body:has(.mtabs.droptab) .dropcancel{bottom:calc(82px + env(safe-area-inset-bottom));padding:10px 22px}

/* ---------- V4 additions: pickers, appearance, focus session ---------- */
.seg{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;align-self:flex-start;max-width:100%}
.seg button{border:0!important;border-radius:0!important;background:var(--panel);padding:7px 12px;font-size:13px;color:var(--mut);white-space:nowrap}
.seg button+button{border-left:1px solid var(--line)!important}
.seg button.on{background:color-mix(in srgb,var(--acc) 16%,var(--panel));color:var(--fg);font-weight:600}
dialog select.tsel{height:32px!important;width:118px!important;border-radius:999px!important;padding:0 28px 0 12px!important;font-size:13px;background-position:right 10px center}
.tsel.dim{opacity:.55}
.rempick{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--soft) 45%,var(--panel))}
.rempick .qd button{height:32px}
dialog .rempick input[type=date]{height:32px;width:150px!important;padding:5px 10px!important;border-radius:999px!important;font-size:13px}
.erem .row label{min-width:0}
.menu .mhead{pointer-events:none;color:var(--mut);font-size:12px}
.focusbtn{border:1px solid color-mix(in srgb,var(--acc) 45%,var(--line));background:color-mix(in srgb,var(--acc) 10%,var(--panel));color:var(--acc);border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:600;white-space:nowrap;margin-left:8px}
.focusbtn:hover{background:color-mix(in srgb,var(--acc) 18%,var(--panel))}
body.focusing .focusbtn span::after{content:" · add"}
.fbar{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 14px;border:1.5px solid color-mix(in srgb,var(--acc) 50%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--acc) 6%,var(--panel));transition:box-shadow .15s}
.fbar.over{box-shadow:0 0 0 3px var(--acc);background:color-mix(in srgb,var(--acc) 14%,var(--panel))}
body.dragging .fbar:not([hidden])::after{content:"Drop a task here to add it to the session";font-size:12px;color:var(--acc);font-weight:600}
body.focusing #dock{display:none!important}
.fhd{display:flex;align-items:center;gap:10px;min-width:0}
.fhd .sp{flex:1}
.fico{font-size:18px}
.ftime{font:600 18px/1 ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.fprog{width:120px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}.fprog i{display:block;height:100%;background:var(--acc)}
.fbtn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 12px;font-size:13px;white-space:nowrap}
.fbtn:hover{background:var(--soft)}.fbtn.ok{background:#3aa36b;border-color:#3aa36b;color:#fff}.fbtn.end{color:var(--danger)}
.fnow{display:flex;align-items:center;gap:10px;min-width:0}
.fdot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.ftask{display:flex;flex-direction:column;min-width:0;flex:1}.ftask small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.ftask b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ftask em{font-style:normal;font-size:12.5px;color:var(--mut)}
.ftask.idle b{color:var(--mut)}
.fseg{font-variant-numeric:tabular-nums;color:var(--mut);font-size:13px;white-space:nowrap}
.fq{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.fq small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-right:2px}
.fchip{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,var(--c) 50%,var(--line));background:var(--panel);border-radius:999px;padding:2px 6px 2px 9px;font-size:12.5px;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fchip i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}.fchip span{color:var(--mut);padding:0 3px}.fchip span:hover{color:var(--danger)}
.fchip.fdone{opacity:.75;padding-right:9px}
@media (max-width:700px){.ftask{flex-basis:calc(100% - 24px)}.fnow .fseg{margin-left:20px}.fbar{padding:8px 10px;gap:6px}.fprog{width:60px}.ftime{font-size:15px}.fnow{flex-wrap:wrap}.fhd .fbtn{padding:4px 9px}.focusbtn{margin-left:auto}}
/* 🔔 reminders panel */
.rembtn{position:relative}.rembtn i{position:absolute;top:1px;right:0;min-width:16px;height:16px;border-radius:999px;background:var(--acc);color:#fff;font:700 10px/16px -apple-system,sans-serif;font-style:normal;padding:0 4px;text-align:center}
.remd{width:min(520px,94vw)}
.remlist{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto}
.remg{display:flex;flex-direction:column;gap:6px}
.remrow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:6px 8px 6px 10px}
.remrow.off{opacity:.55}.remrow.off b{text-decoration:line-through}
.remt{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;width:66px;flex:none}
.remx{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:0!important;background:none!important;padding:0!important}
.remx b{font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remx small{color:var(--mut);font-size:12px}
.sw2{flex:none!important;display:inline-block!important;position:relative;width:38px;height:22px;cursor:pointer}
.sw2 input{opacity:0;width:0;height:0;position:absolute}
.sw2 span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}
.sw2 span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw2 input:checked+span{background:var(--acc)}.sw2 input:checked+span::after{transform:translateX(16px)}
@media (max-width:700px){.remt{width:58px;font-size:12.5px}}
.remt{white-space:nowrap;width:auto;min-width:64px}
@media (max-width:700px){.top .ib{min-width:28px;padding:0 3px}.rembtn i{right:-3px}}

/* ---------- V5 phone: waffle menu, swipe actions (mobile.js) ---------- */
.wafbtn{display:none;position:relative}
.wafbtn i,.waf .wgrid2 i{position:absolute;top:1px;right:0;min-width:15px;height:15px;border-radius:8px;background:var(--acc);color:#fff;font:600 10px/15px system-ui,sans-serif;font-style:normal;padding:0 3px}
.wafbtn.on{background:var(--soft)}
.waf{position:fixed;z-index:1001;top:calc(max(8px,env(safe-area-inset-top)) + 44px);right:10px;width:min(300px,calc(100vw - 20px));background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:8px}
.waf[hidden]{display:none}
.waf .wgoal{display:flex;align-items:center;gap:10px;border:0;background:var(--soft);border-radius:12px;padding:10px 12px;text-align:left;color:var(--fg)}
.waf .wgoal span{display:flex;flex-direction:column}.waf .wgoal small{color:var(--mut);font-size:12.5px}
.waf .wgoal svg{width:26px;height:26px;flex:none}
.wgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.wgrid2 button{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;border-radius:12px;padding:12px 4px 10px;font-size:12px;color:var(--fg)}
.wgrid2 button:active,.wgrid2 button:hover{background:var(--soft)}
.wgrid2 i{top:6px!important;right:18px!important}
.list{position:relative}
.card.swiping{position:relative;z-index:1;transition:none;box-shadow:var(--shadow)}
.swbg{position:absolute;border-radius:12px;display:flex;align-items:center;padding:0 18px;font-weight:600;font-size:14px;color:#fff;background:var(--mut);pointer-events:none;opacity:.55;transition:opacity .12s}
.swbg.r{justify-content:flex-start}.swbg.l{justify-content:flex-end}
.swbg.ok{background:#2f9e5b}.swbg.bad{background:#e5484d}.swbg.warn{background:#d9822b}.swbg:not(.ok):not(.bad):not(.warn){background:var(--acc)}
.swbg.arm{opacity:1}
.swbg span{white-space:nowrap}
@media (min-width:701px){#sd .s-sw{display:none}}
.s-sw.sgrid{grid-template-columns:1fr}.s-sw .swnote{grid-column:1/-1}
@media (max-width:700px){
  .wafbtn{display:inline-grid}
  #prod,#statsBtn,#remBtn,#helpBtn,#setBtn,#exportBtn{display:none!important}
  .brand{margin-right:auto}
  .top{gap:4px}
  #tlBody{touch-action:pan-y}
  .daylbl{font-size:15px}
}

/* Settings in two levels (settings.js): a list of groups, each opening a page; laptop shows the list as a left rail */
dialog#sd{width:min(860px,96vw)}
#sd form{padding-bottom:20px}
.sshell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start}
.snav{display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.snav button{box-sizing:border-box;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:none;border-radius:10px;padding:8px 10px;text-align:left;width:100%;color:var(--fg)}
.snav button:hover{background:var(--soft)}.snav button.on{background:color-mix(in srgb,var(--acc) 14%,var(--panel))}
.sic{width:30px;height:30px;flex:none;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:15px}
.snav button.on .sic{background:var(--panel)}
.stx{display:flex;flex-direction:column;min-width:0;flex:1}.stx b{font-size:14px;font-weight:600}.stx small{color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snav .chev{color:var(--mut);display:none}
.spage{display:flex;flex-direction:column;gap:8px;min-width:0}
.sph{display:flex;align-items:center;gap:8px;min-height:34px;margin-right:34px}.sph h3{margin:0;font-size:17px}
.sback{display:none}
.stag{font-size:11px;font-weight:600;color:var(--mut);background:var(--soft);border-radius:999px;padding:2px 8px}
.ssaved{font-size:12px;font-weight:600;color:#3aa36b}
#sd .ssub{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:10px 0 0}
.smore{border:1px solid var(--line);border-radius:12px;padding:10px 12px}.smore summary{cursor:pointer;color:var(--mut);font-size:13px}.smore[open] summary{margin-bottom:10px}
#sKpi .kitem{border-color:var(--line)}#sKpi{padding:12px}
@media (max-width:700px){
  .sshell{grid-template-columns:minmax(0,1fr)}
  #sd.inpage .snav{display:none}#sd:not(.inpage) .spages{display:none}#sd.inpage .stitle{display:none}
  .snav button{padding:10px 6px;border-bottom:1px solid var(--line);border-radius:0}.snav button.on{background:none}.snav .chev{display:block}
  .sback{display:inline-grid;margin-left:-8px}
  .spage{animation:sin .18s ease-out}
}
@keyframes sin{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}

/* recurring tasks (recur.js) and rest days (rest.js) */
.erep{display:flex;flex-direction:column;gap:6px;padding-top:6px}.erep .row{align-items:flex-end}.erep label{flex:1}
#eRepNW{display:flex;align-items:center;gap:6px;flex:none}#eRepNW input{width:64px!important}
#eRepD .fo,#sRestD .fo{min-width:44px;justify-content:center}
.srest{display:flex;flex-direction:column;gap:6px;padding-top:8px}
.grest{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:4px 0}
.prod.rest{color:#2f8f5b}.restic{font-size:14px}
.wday.rest{background:repeating-linear-gradient(135deg,transparent 0 8px,color-mix(in srgb,#5fae94 10%,transparent) 8px 12px)}
.grest{padding-bottom:10px!important}
.elearn{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--mut);padding:2px 0 0 28px}.elearn b{color:var(--fg)}

/* stale task sweep (sweep.js) */
dialog.swdlg{width:min(560px,94vw);max-height:88vh}
.swlist{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.swlist li{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.swlist li>span:first-of-type{display:flex;flex-direction:column;min-width:0}.swlist b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swlist small{color:var(--mut);font-size:12px}
.swb{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.swb button{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--soft);color:var(--fg);border-radius:8px;padding:5px 10px;cursor:pointer}
.swb button[data-a=arch]{margin-left:auto}
.swday{position:relative}.swday input{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0;pointer-events:none}
.swdlg footer{display:flex;gap:12px;align-items:center}.swdlg footer .sp{flex:1}
.ssweep{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ssweep .tg{flex:1;min-width:220px}
.earch{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--mut);background:var(--soft);border-radius:8px;padding:6px 10px;margin-bottom:10px}

/* suggestions (suggest.js) */
.sug{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:13px;line-height:1.45}
.sug[hidden]{display:none}.sug .sugi{font-size:16px;line-height:1.3}.sug p{margin:0}
.sug div{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 14px}.sug .linkbtn{font-size:12.5px;padding:2px 0!important;min-height:0;height:auto;line-height:1.5;white-space:nowrap}.sug .linkbtn.mut{color:var(--mut)}
.ssug{display:flex;flex-direction:column;align-items:flex-start;gap:6px}

/* modes (modes.js): a switched-off feature's controls are hidden, its data is untouched */
body.no-timer .play,body.no-timer #prod,body.no-timer #dock,body.no-reminders #remBtn,body.no-due .due,body.no-due #soon,
body.no-anytime #tray,body.no-browse #filtBtn,body.no-browse #sortBtn,body.no-browse #sortDir,body.no-browse #wkBtn,body.no-browse #filtBar,
body.no-focus #focusBtn,body.no-focus #fbar,body.no-stats #statsBtn,body.no-extras #exportBtn,
body.no-reminders [data-f~=reminders],body.no-due [data-f~=due],body.no-urgency [data-f~=urgency],body.no-parts [data-f~=parts],
body.no-anytime [data-f~=anytime],body.no-offClock [data-f~=offClock],body.no-sessions [data-f~=sessions],body.no-extras [data-f~=extras]{display:none!important}
.mdpick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mdpick button{font:inherit;text-align:left;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:10px 12px;cursor:pointer}
.mdpick button small{color:var(--mut);font-size:12px;line-height:1.4}.mdpick button.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc);background:var(--soft)}
.mdnote{font-size:12.5px;margin:10px 0 4px}
.mdgrp{display:flex;flex-direction:column;margin-top:10px}.mdgrp .elbl{margin-bottom:2px}
.mdf.fixed{opacity:.6}
@media (max-width:700px){.mdpick{grid-template-columns:minmax(0,1fr)}}