/* Stage chrome and the table view (rows, grouping, steps, state). */
/* ───────── Stage ───────── */
.stage{grid-row:1;display:flex;flex-direction:column;min-width:0;background:var(--stage);container-type:inline-size;container-name:stage;position:relative}
.shead{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;border-bottom:1px solid var(--line-soft);flex:none}
.crumbs{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;color:var(--muted)}
.ci{display:flex;align-items:center;min-width:0;flex:0 1 auto}
.ci.cur{flex-shrink:1}
.crumb{padding:2px 6px;border-radius:var(--r2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;min-width:0}
.crumb:hover{background:var(--hover);color:var(--text)}
.crumb.cur{color:var(--text);font-weight:600}
.crumbs .sep{color:var(--faint);flex:none;display:grid}
.crumbs .sep .ic{width:11px;height:11px}
.vtabs{display:flex;gap:2px;background:var(--side);padding:2px;border-radius:var(--r3);flex:none}
.btn.vpick{display:none;flex:none}
.vtab{display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r2);color:var(--muted)}
.vtab:hover{color:var(--text)}
.vtab[aria-selected="true"]{background:var(--raised);color:var(--text);box-shadow:0 0 0 1px var(--line-soft)}
.stools{display:flex;align-items:center;gap:10px;padding:8px 14px 6px;color:var(--muted);flex:none;min-height:38px}
.stools .ttl{font-size:15px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stools .count{color:var(--faint)}
.stools .sp{flex:1}
.tgl{display:flex;align-items:center;gap:6px;color:var(--muted);padding:2px 6px;border-radius:var(--r2)}
.tgl:hover{background:var(--hover);color:var(--text)}
.tgl .sw{width:22px;height:12px;border-radius:6px;background:var(--line);position:relative;transition:background .12s}
.tgl .sw::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--text);transition:transform .12s}
.tgl[aria-pressed="true"] .sw{background:var(--accent)} .tgl[aria-pressed="true"] .sw::after{transform:translateX(10px);background:var(--accent-ink)}
.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r2);border:1px solid var(--line);background:var(--raised);color:var(--text);white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{border-color:var(--line)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{height:24px;padding:0 8px;font-size:12px}
.sbody{flex:1;overflow:auto;outline:none;position:relative}

/* table rows */
.thead,.trow{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line-soft)}
.thead{position:sticky;top:0;z-index:2;background:var(--stage);height:28px;font-size:11px;letter-spacing:var(--caps);text-transform:uppercase;color:var(--faint)}
.thead button{display:inline-flex;align-items:center;gap:4px;letter-spacing:inherit;text-transform:inherit;color:inherit}
.thead button:hover,.thead button[aria-pressed="true"]{color:var(--text)}
.thead .ic{width:11px;height:11px}
.trow{height:var(--rowh)}
.trow:hover{background:var(--hover)}
.srow{cursor:default}
.srow.cur{background:var(--sel-off)}
.sbody:focus-within .srow.cur{background:var(--sel)}
.sbody:focus-visible .srow.cur{box-shadow:inset 2px 0 0 var(--accent)}
.srow.done .lbl{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--line)}
.srow.done .c-prio,.srow.done .c-tags,.srow.done .c-who,.srow.done .end,.srow.done .cmeta{opacity:.55}
.srow.flash{animation:flash 1.4s ease-out}
@keyframes flash{from{background:var(--accent-soft)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.srow.flash,dialog[open],dialog[open]::backdrop,.menu,.toast{animation:none}.row .caret .ic,.tgl .sw,.tgl .sw::after,.side{transition:none!important}}
.c{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-chk{width:20px;flex:none}
.c-title{flex:1;min-width:120px;display:flex;align-items:center;gap:8px}
.c-title .lbl{overflow:hidden;text-overflow:ellipsis}
.c-list{width:96px;flex:none;color:var(--muted)}
.c-prio{width:76px;flex:none}
.c-due{width:80px;flex:none}
.c-tags{width:150px;flex:none;display:flex;gap:4px;overflow:hidden}
.c-est{width:44px;flex:none;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.c-steps{width:66px;flex:none;color:var(--muted);display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.c-phase{width:150px;flex:none;color:var(--muted)}
.c-who{width:78px;flex:none}
.c-result{width:220px;flex:none;color:var(--muted)}
.pbar{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden;min-width:14px}
.pbar i{display:block;height:100%;background:var(--ok)}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid transparent}
button.pill:hover{filter:brightness(1.15)}
button.pill.p-medium:hover{filter:none;background:var(--hover)}
.pill.p-critical{background:color-mix(in srgb,var(--crit) 18%,transparent);color:var(--crit)}
.pill.p-high{background:color-mix(in srgb,var(--high) 16%,transparent);color:var(--high)}
.pill.p-medium{background:transparent;color:var(--muted);font-weight:500}
.pill.p-low{background:transparent;border-color:var(--line);color:var(--muted)}
.pill.who-human{background:var(--accent-soft);color:var(--accent)}
.pill.who-agent{background:color-mix(in srgb,var(--med) 15%,transparent);color:var(--med)}
.pill.none{background:transparent;border-color:var(--line-soft);color:var(--faint);font-weight:500}
.tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r1);background:var(--raised);color:var(--muted);font-size:11px;white-space:nowrap}
.tag.more{background:transparent;color:var(--faint);padding:0 2px}
.due{color:var(--muted);padding:2px 4px;border-radius:var(--r1);margin-left:-4px}
.due:hover{background:var(--raised);color:var(--text)}
.due.over{color:var(--danger)} .due.today{color:var(--warn)}
.blocked{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r1);font-size:11px;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 45%,transparent);white-space:nowrap}
.addrow{display:flex;align-items:center;gap:10px;padding:0 14px;height:36px;border-bottom:1px solid var(--line-soft);color:var(--faint)}
.addrow > span:first-child{width:20px;display:grid;place-items:center;flex:none}
.addrow .sig{flex:none;font-size:11px;color:var(--faint);white-space:nowrap}
.addrow input{flex:1;min-width:0;background:none;border:0;outline:0;height:34px;color:var(--text)}
.addrow input::placeholder{color:var(--faint)}
.addrow:focus-within{background:var(--hover);color:var(--accent)}
.ren{width:100%;min-width:0;height:22px;background:var(--stage);border:1px solid var(--accent);border-radius:var(--r1);padding:0 5px;outline:0}
.empty{display:grid;place-items:center;gap:6px;padding:48px 20px;text-align:center;color:var(--faint)}
.empty b{color:var(--muted);font-weight:600}
@container stage (max-width:960px){.c-tags,.c-result,.addrow .sig{display:none}}
@container stage (max-width:720px){.c-list,.c-phase{display:none}}
@container stage (max-width:620px){.c-est{display:none}}
@container stage (max-width:560px){.c-state{display:none}.c-title .blocked:not(.ok){display:inline-flex}}
@container stage (max-width:520px){.c-steps,.c-who{display:none}}
@container stage (max-width:420px){.c-prio{display:none}.trow,.thead,.addrow{gap:8px;padding:0 10px}.stools{flex-wrap:wrap;row-gap:4px}.stools .btn kbd{display:none}.detail,.ov{padding:16px 14px 60px}.props{grid-template-columns:96px minmax(0,1fr)}}
.stools .count,.tgl,.btn{white-space:nowrap}
.nolist .c-list{display:none}
@container stage (max-width:1180px){.vtab:not([aria-selected="true"]) span{display:none}}
@container stage (max-width:1000px){.ci.d2,.ci.d3,.ci.d4,.ci.d5,.ci.d6,.ci.d7{display:none}}
@container stage (max-width:640px){.ci:not(.cur){display:none}.vtabs{display:none}.btn.vpick{display:inline-flex}}
.vtab:disabled{opacity:.3;cursor:default}
.vtab:disabled:hover{color:var(--muted)}
.grp{display:flex;align-items:center;gap:6px;color:var(--muted)}
.grp select{background:var(--raised);border:1px solid var(--line);border-radius:var(--r2);height:26px;padding:0 6px}

/* table: grouping, steps, state */
.c-car{width:18px;flex:none;display:flex;align-items:center}
.trow.step .c-car{width:36px}
.trow.step{height:30px}
.trow.step .lbl{color:var(--muted)}
.trow .caret{width:18px;height:18px;display:grid;place-items:center;color:var(--faint);border-radius:var(--r1)}
.trow .caret:hover{color:var(--text);background:var(--raised)}
.trow .caret .ic{width:12px;height:12px;transition:transform .12s}
.trow .caret[aria-expanded="true"] .ic{transform:rotate(90deg)}
.c-state{width:96px;flex:none}
.c-title .blocked:not(.ok){display:none}
.phase{color:var(--faint);font-size:11px}
.gh{display:flex;align-items:baseline;gap:10px;padding:14px 14px 6px;border-bottom:1px solid var(--line-soft)}
.gh .gt{font-weight:600}
.gh.over .gt{color:var(--danger)} .gh.today .gt{color:var(--accent)}
.gh .cnt{color:var(--faint);font-size:12px}
.st{display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.st i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--faint);flex:none}
button.st{padding:2px 6px;margin-left:-6px;border-radius:var(--r1)}
button.st:hover{background:var(--raised);color:var(--text)}
.st-doing i{background:var(--med);border-color:var(--med)}
.st-blocked{color:var(--danger)} .st-blocked i{background:var(--danger);border-color:var(--danger)}
.st-done i{background:var(--ok);border-color:var(--ok)}
.trow.done .c-state{opacity:.55}
.mi .dot.st-todo{background:transparent;border:1.5px solid var(--faint)} .mi .dot.st-doing{background:var(--med)} .mi .dot.st-blocked{background:var(--danger)} .mi .dot.st-done{background:var(--ok)}
.await{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r1);font-size:11px;color:var(--accent);background:var(--accent-soft);white-space:nowrap;flex:none}
.blocked.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.cmeta .await{height:16px}