todos.css

/* ---------- The helper's to-do list: header button (only when a list exists) + panel (popover on desktop, bottom sheet on phone) ---------- */
.tdw{display:contents}
.tdbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:999px;background:var(--abub);color:var(--ink2);font-size:13px;flex:none;transition:background .15s,color .15s,box-shadow .2s}
.tdbtn:hover,.tdbtn.on{background:var(--hover);color:var(--ink)}
.tdbtn.on{box-shadow:0 0 0 1.5px var(--line2)}
.tdn{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1),color .25s}
.tdring{flex:none;display:block}
.tdring circle{fill:none;stroke-width:2.4}
.tdtrack{stroke:color-mix(in srgb,var(--mute) 30%,transparent)}
.tdfill{stroke:var(--ink2);stroke-linecap:round;transition:stroke-dasharray .45s cubic-bezier(.2,.8,.2,1)}
.tdbtn.all .tdfill{stroke:var(--live)}.tdbtn.all .tdn,.tdbtn.all>svg{color:var(--live)}
.tdpop.all .tdbar i{background:var(--live)}
.tdok{fill:none;stroke:var(--live);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* appears gently; something got done while the panel was closed: a brief count bump */
.tdbtn.fresh{animation:tdin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes tdin{from{opacity:0;transform:scale(.85)}}
.tdbtn.bump .tdn{animation:tdbump 1.2s cubic-bezier(.2,.8,.2,1)}
.tdbtn.bump svg{animation:tdglow 1.2s ease-out}
@keyframes tdbump{0%{transform:none}18%{transform:translateY(-2px) scale(1.18);color:var(--live)}60%{color:var(--live)}100%{transform:none}}
@keyframes tdglow{0%{filter:none}25%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--live) 70%,transparent))}100%{filter:none}}

#tdpw{position:fixed;inset:0;z-index:70;pointer-events:none}
#tdpw:empty{display:none}#tdpw.on{pointer-events:auto}
/* Agent updates reveal the checklist without blocking typing/dictation behind it. Manual opening stays modal. */
#tdpw.automatic{pointer-events:none}#tdpw.automatic .tdpop{pointer-events:auto}#tdpw.automatic .tdback{display:none}
.tdback{position:absolute;inset:0}
.tdpop{position:fixed;display:flex;flex-direction:column;min-height:0;background:var(--sheet);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px rgba(28,27,25,.16),var(--lift);padding:8px 8px 6px;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .16s,transform .18s cubic-bezier(.2,.8,.2,1)}
#tdpw.on .tdpop{opacity:1;transform:none}
:root[data-theme=dark] .tdpop{box-shadow:0 30px 80px rgba(0,0,0,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tdpop{box-shadow:0 30px 80px rgba(0,0,0,.55)}}
.tdhead,.tdbar,.tdfoot,.tdpop .grab{flex:none}
.tdhead{display:flex;align-items:flex-start;gap:10px;padding:6px 4px 10px 10px}
.tdtitle{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tdtitle h2{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.tdtitle span{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.tdx{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--mute);flex:none;margin-top:-2px}.tdx:hover{background:var(--abub);color:var(--ink)}
.tdbar{height:5px;margin:0 10px 8px;border-radius:999px;background:var(--abub);overflow:hidden}
.tdbar i{display:block;height:100%;border-radius:inherit;background:var(--ink2);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.tdlist{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 2px;display:flex;flex-direction:column;gap:1px}
.tdrow{width:100%;display:flex;align-items:flex-start;gap:11px;padding:8px 10px;border-radius:12px;text-align:left;color:var(--ink);font-size:14px;line-height:1.4;transition:background .15s}
.tdrow:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--ink2)}
.tdchk{width:19px;height:19px;flex:none;margin-top:0;border-radius:6px;border:1.5px solid var(--line2);background:var(--sheet);display:grid;place-items:center;color:transparent;transition:background .15s,border-color .15s,color .15s,transform .1s}
.tdchk svg{width:12px;height:12px}
.tdrow:active .tdchk{transform:scale(.9)}
.tdtext{flex:1;min-width:0;overflow-wrap:anywhere;padding-top:0}
.tdrow.done .tdchk{background:var(--ink2);border-color:var(--ink2);color:var(--sheet)}
.tdrow.done .tdtext{color:var(--faint)}
@media (hover:hover){.tdrow:hover{background:var(--abub)}.tdrow:hover .tdchk{border-color:var(--mute)}.tdrow:hover:not(.done) .tdchk{color:var(--faint)}}
/* the item it is on now: the app's marigold, like the computer's busy dot */
.tdrow.doing{background:var(--mari-soft)}
@media (hover:hover){.tdrow.doing:hover{background:color-mix(in srgb,#f5bd3c 30%,var(--sheet))}}
.tdrow.doing .tdchk{border-color:color-mix(in srgb,var(--mari) 70%,var(--line2))}
.tdrow.doing .tdtext{font-weight:600}
.tdnow{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:1px;font-size:12px;font-weight:600;color:var(--mari-ink)}
.tdnow i{width:7px;height:7px;border-radius:50%;background:var(--mari);opacity:.6}
.tdnow.live i{opacity:1;animation:tdpulse 1.8s ease-in-out infinite}
.tdnow.ready i{opacity:1}
@keyframes tdpulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mari) 55%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--mari) 0%,transparent)}}
.tdfoot{margin:6px 10px 4px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--mute);line-height:1.45}
@media (prefers-reduced-motion:reduce){.tdbtn.fresh,.tdbtn.bump .tdn,.tdbtn.bump svg,.tdnow.live i{animation:none}.tdfill,.tdbar i{transition:none}}

/* phone: a round header button with the count inside the ring; the panel is a bottom sheet */
.tdbtn.m{padding:0;gap:0;height:48px;width:48px;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--ink)}
.tdbtn.m .tdring{grid-area:1/1}.tdbtn.m .tdring circle{stroke-width:1.6}.tdbtn.m .tdok{display:none}.tdbtn.m .tdn{grid-area:1/1;font-size:11px;letter-spacing:-.02em}
.tdbtn.m.on{box-shadow:none}
@media (max-width:767px){
  .tdback{background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
  #tdpw.on .tdback{opacity:1}
  .tdpop{left:0;right:0;bottom:0;top:auto;max-height:85dvh;border:0;border-radius:32px 32px 0 0;padding:10px 12px calc(12px + env(safe-area-inset-bottom));opacity:1;transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
  #tdpw.on .tdpop{transform:none}
  .tdhead{padding:2px 4px 12px 10px}.tdtitle h2{font-size:19px}.tdtitle span{font-size:14px}
  .tdbar{height:6px;margin-bottom:10px}
  .tdrow{padding:11px 10px;gap:13px;font-size:16px}
  .tdchk{width:23px;height:23px;border-radius:7px}.tdchk svg{width:14px;height:14px}
  .tdnow{font-size:13px}
  .tdfoot{font-size:13px}
}
/* the phone header is full: while the checklist button is there, the header buttons sit a little closer so the title keeps its room */
@media (max-width:767px){.mh:has(.tdbtn){gap:5px}.mh:has(.tdbtn) .mpill{padding-right:14px}}