:root{
  --band:68px;
  --bg:#fff; --surface:#fff; --sunk:#f6f6f6; --hover:#f2f2f2; --ink:#111; --ink2:#4d4d4d; --muted:#8a8a8a; --line:#e5e5e5; --line2:#d4d4d4;
  --now:#ff4d17; --now-ink:#d43a08; --prog:#00b3a4; --prog-ink:#00806f; --wait:#ffb000; --wait-ink:#9a6400; --done:#1fbf5a; --done-ink:#12803a;
  --open:#c9c9c9; --accent:#3d5afe;
  --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
  --area:hsl(var(--h,220) 75% 52%);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0b0b; --surface:#131313; --sunk:#181818; --hover:#1c1c1c; --ink:#ededed; --ink2:#b3b3b3; --muted:#8a8a8a; --line:#242424; --line2:#333;
    --now:#ff6a3d; --now-ink:#ff8a63; --prog:#2dd4bf; --prog-ink:#5eead4; --wait:#fbbf24; --wait-ink:#fcd34d; --done:#4ade80; --done-ink:#86efac;
    --open:#444; --accent:#7c8cff;
    --area:hsl(var(--h,220) 75% 62%);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
#stage{position:fixed;inset:var(--band) 0 0 0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
button,a,input,select{touch-action:manipulation}
button{font:inherit;color:inherit}
a{color:var(--accent);text-underline-offset:2px}
code{font:12.5px var(--mono);background:var(--sunk);border:1px solid var(--line);padding:0 4px;border-radius:4px;overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}

/* Tick: 44px hit area, 22px circle */
.tick{flex:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:8px;-webkit-tap-highlight-color:transparent}
.tick i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line2);display:grid;place-items:center;color:transparent;transition:border-color 150ms ease-out,background-color 150ms ease-out}
.tick svg{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){.tick:hover i{border-color:var(--ink)}}
.tick:active i{transform:scale(.92)}
.tick[aria-checked=true] i{background:var(--done);border-color:var(--done);color:#fff}
.just .tick i{animation:pop 260ms var(--ease)}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Status pills (mono) */
.pill{display:inline-flex;align-items:center;gap:5px;font:500 11px/1 var(--mono);letter-spacing:.02em;padding:4px 7px;border-radius:6px;white-space:nowrap;background:var(--sunk);color:var(--ink2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.plain::before{display:none}
.pill.today{background:color-mix(in srgb,var(--now) 13%,transparent);color:var(--now-ink)}
.pill.inprogress{background:color-mix(in srgb,var(--prog) 14%,transparent);color:var(--prog-ink)}
.pill.waiting{background:color-mix(in srgb,var(--wait) 18%,transparent);color:var(--wait-ink)}
.pill.done,.pill.active,.pill.confirmed{background:color-mix(in srgb,var(--done) 14%,transparent);color:var(--done-ink)}
.pill.sent,.pill.open,.pill.draft{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.pill.paused,.pill.idle,.pill.archived,.pill.unknown,.pill.disabled,.pill.superseded{background:var(--sunk);color:var(--muted)}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--area)}

/* Toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:400;
  background:var(--ink);color:var(--bg);padding:8px 8px 8px 14px;border-radius:8px;font-size:14px;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 24px);
  transition:opacity 180ms ease-out,transform 180ms var(--ease)}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{flex:none;border:0;background:color-mix(in srgb,var(--bg) 18%,transparent);color:inherit;font-weight:600;padding:0 12px;height:32px;border-radius:6px;cursor:pointer}
@media (max-width:859px){body[data-v="1"] .toast,body[data-v="2"] .toast{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}