/* HeroX HQ v2.6 — project workspace: Asana list (Tasks), Asana board (Engineering), HQ PO tracker chips, Budget vs Finance, Install planner */
:root{--as-line:#edeae9;--as-hover:#f9f8f8;--as-ink:#1e1f21;--as-ink2:#6d6e6f;--as-sel:#eef4fd;--as-done:#58a182;--as-col:#f6f5f4}
@media (prefers-color-scheme:dark){:root{--as-line:#2b3547;--as-hover:#172133;--as-ink:#e2e8f0;--as-ink2:#94a3b8;--as-sel:#16263d;--as-done:#5fbf8f;--as-col:#131c2c}}

/* ---------- popup menu (assignee, chips, row menu) ---------- */
.hqpop{position:absolute;z-index:600;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.18);padding:6px;min-width:190px;max-width:340px}
.hqpop-t{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink3);padding:4px 8px 6px}
.hqpop-q{width:100%;border:1px solid var(--border);border-radius:7px;padding:6px 9px;margin-bottom:6px;background:var(--surface);font-size:13px}
.hqpop-q:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.hqpop-l{max-height:300px;overflow:auto;display:flex;flex-direction:column}
.hqpop-l button{display:flex;align-items:center;gap:8px;border:0;background:none;text-align:left;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink);white-space:nowrap}
.hqpop-l button:hover{background:var(--surface2)}
.hqpop-l button.on{background:var(--as-sel);font-weight:600}
.hqpop-l button.danger{color:var(--bad)}
.hqpop-l button .av{margin-right:0}
.hqpop-sep{height:1px;background:var(--border);margin:4px 2px}
.hqpop .pp-none{display:inline-flex;width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--ink3);align-items:center;justify-content:center;color:var(--ink3)}
.hqpop.rowmenu{min-width:230px}
.hqpop.shpop{min-width:120px}

/* ---------- Tasks: Asana list view ---------- */
.tl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tl-bar .sub svg{vertical-align:-2px;color:var(--ink3)}
.tl-late{color:var(--bad)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:4px 11px;font-size:12.5px;cursor:pointer;color:var(--ink2)}
.seg button+button{border-left:1px solid var(--border)}
.seg button.on{background:var(--surface2);color:var(--ink);font-weight:600}
.tl{background:var(--surface);border:1px solid var(--as-line);border-radius:10px;padding:0 0 10px;--cols:minmax(340px,1fr) 150px 118px 104px 112px}
.tl-hd,.tl-row{display:grid;grid-template-columns:var(--cols);align-items:stretch}
.tl-hd{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--as-line);border-radius:10px 10px 0 0;font-size:12px;color:var(--as-ink2);font-weight:500}
.tl-hd > div{padding:9px 10px;border-left:1px solid var(--as-line)}
.tl-hd > div:first-child{border-left:0;padding-left:44px}
.tl-sec{display:flex;align-items:center;gap:6px;padding:20px 14px 8px 16px;font-weight:700;font-size:15.5px;color:var(--as-ink);cursor:pointer;user-select:none;position:relative}
.tl-sec .tl-sn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-sec .tl-cnt{font-weight:400;font-size:12.5px;color:var(--as-ink2);white-space:nowrap;margin-left:4px}
.tl-sadd{opacity:0;border:0;background:none;color:var(--as-ink2);font-size:18px;line-height:1;cursor:pointer;border-radius:6px;width:24px;height:24px}
.tl-sec:hover .tl-sadd{opacity:1}.tl-sadd:hover{background:var(--surface2);color:var(--ink)}
.tl-car{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--as-ink2);border-radius:4px;transition:transform .12s;cursor:pointer}
.tl-car svg{transition:transform .12s}.tl-car.on svg{transform:rotate(90deg)}
.tl-car:hover{background:var(--surface2);color:var(--ink)}
.tl-car.none{visibility:hidden}
.tl-row{border-top:1px solid var(--as-line);min-height:37px;font-size:14px;color:var(--as-ink);position:relative}
.tl-row:hover{background:var(--as-hover)}
.tl-row.sel{background:var(--as-sel)}
.tl-row > div{min-width:0}
.tl-name{display:flex;align-items:center;gap:6px;padding:4px 10px 4px calc(26px + var(--d,0) * 26px);position:relative;cursor:pointer}
.tl-h{position:absolute;left:calc(4px + var(--d,0) * 26px);top:50%;transform:translateY(-50%);width:16px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ink3);opacity:0;cursor:grab;border-radius:4px}
.tl-row:hover .tl-h{opacity:1}.tl-h:hover{background:var(--surface2);color:var(--ink)}
.tl .circ{width:16px;height:16px;border:1.5px solid var(--as-ink2);color:transparent;margin-right:2px;transition:background .12s,border-color .12s}
.tl .circ:hover{border-color:var(--as-done);color:var(--as-done);background:color-mix(in srgb,var(--as-done) 12%,transparent)}
.circ.on,.tl .circ.on{background:var(--as-done);border-color:var(--as-done);color:#fff}
.circ svg{display:block}
.tl-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:2px 4px;border-radius:4px;border:1px solid transparent}
.tl-row:not(.done) .tl-t:hover{border-color:var(--as-line)}
.tl-row.done .tl-t{color:var(--as-ink2)}
.tl-row.done .circ{opacity:.9}
.tl-sc{display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--as-ink2);padding:1px 5px;border-radius:5px;cursor:pointer;flex-shrink:0;white-space:nowrap}
.tl-sc:hover{background:var(--surface2);color:var(--ink)}
.tl-ic{color:var(--ink3);display:inline-flex;flex-shrink:0}
.tl-det{margin-left:auto;flex-shrink:0;font-size:12px;color:var(--as-ink2);padding:2px 7px;border-radius:5px;opacity:0;white-space:nowrap}
.tl-row:hover .tl-det{opacity:1}.tl-det:hover{background:var(--surface2);color:var(--ink)}
.tl-c{display:flex;align-items:center;gap:6px;padding:4px 10px;border-left:1px solid var(--as-line);font-size:13px;overflow:hidden;white-space:nowrap}
.tl-c.ed{cursor:pointer}.tl-c.ed:hover{box-shadow:inset 0 0 0 1px var(--ink3);border-radius:2px}
.tl-c .av{width:24px;height:24px;font-size:10.5px;margin-right:0}
.tl-own{overflow:hidden;text-overflow:ellipsis}
.tl-ph{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:1.5px dashed var(--ink3);color:var(--ink3);opacity:0}
.tl-row:hover .tl-ph,.ek:hover .tl-ph{opacity:1}
.tl-due{color:var(--as-ink2)}
.tl-due.late,.ek-due.late,.ek-sd.late,.dsub .late{color:var(--bad)}
.tl-due.near,.ek-due.near,.ek-sd.near,.dsub .near{color:#0d7a4e}
.tl-c .chip{border-radius:6px;font-size:12px}
.tl-c.editing{padding:2px 4px}
.tl-date{width:100%;height:28px;border:1px solid var(--sel);border-radius:5px;padding:0 6px;background:var(--surface);font-size:12.5px}
.tl-rn{flex:1;min-width:0;height:28px;border:1px solid var(--sel);border-radius:5px;padding:0 8px;background:var(--surface);font-size:14px;outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--sel) 18%,transparent)}
.tl-new{background:var(--as-hover)}
.tl-new .circ{opacity:.5}
.tl-add{padding:8px 10px 8px calc(52px + var(--d,0) * 26px);color:var(--as-ink2);font-size:13.5px;cursor:pointer;border-top:1px solid var(--as-line)}
.tl-add:hover{background:var(--as-hover);color:var(--ink)}
.tl-newsec{padding:16px 16px 4px;color:var(--as-ink2);font-weight:600;cursor:pointer}
.tl-newsec:hover{color:var(--ink)}
.tl-newsec .tl-rn{width:420px;max-width:100%;font-weight:600}
.tl-row.dragging{opacity:.4}
.tl-row.drop-b,.tl-add.drop-b{box-shadow:inset 0 2px 0 var(--sel)}
.tl-row.drop-a,.tl-sec.drop-a{box-shadow:inset 0 -2px 0 var(--sel)}
@media (max-width:860px){.tl{--cols:1fr 92px}.tl-hd > div:nth-child(n+3),.tl-row > div:nth-child(n+3){display:none}.tl-det{display:none}.tl-name{padding-left:calc(22px + var(--d,0) * 16px)}.tl-h{left:calc(2px + var(--d,0) * 16px)}.tl-add{padding-left:calc(46px + var(--d,0) * 16px)}}

/* drawer extras */
#drawer .dt-done svg{vertical-align:-1px}
#drawer .dt-done.on{background:var(--ok-soft);border-color:var(--ok-soft);color:var(--ok)}
.dsubs{margin-top:8px;border-top:1px solid var(--as-line)}
.dsub{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--as-line);font-size:13.5px}
.dsub a{color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsub a:hover{text-decoration:underline}
.dsub.done a{color:var(--as-ink2)}
.dsub .circ{width:16px;height:16px;border:1.5px solid var(--as-ink2);color:transparent}
.dsub .circ.on{background:var(--as-done);border-color:var(--as-done);color:#fff}
.dsub .av{width:20px;height:20px;font-size:9.5px;margin-right:0}
.dsub-add{padding:8px 0}

/* ---------- Engineering: Asana board ---------- */
.eb{display:flex;gap:14px;overflow-x:auto;padding-bottom:16px;align-items:flex-start}
.eb-col{background:var(--as-col);border-radius:12px;flex:1 1 0;min-width:250px;max-width:380px;display:flex;flex-direction:column;padding:0 0 8px;border:1px solid transparent}
.eb-col.over{border-color:var(--sel);background:color-mix(in srgb,var(--sel) 6%,var(--as-col))}
.eb-ch{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;font-weight:650;font-size:14px;color:var(--as-ink)}
.eb-cc{font-weight:400;color:var(--as-ink2);font-size:13px}
.eb-plus{border:0;background:none;color:var(--as-ink2);font-size:18px;line-height:1;width:26px;height:26px;border-radius:6px;cursor:pointer}
.eb-plus:hover{background:var(--surface);color:var(--ink)}
.eb-cards{padding:0 8px;min-height:40px;display:flex;flex-direction:column;gap:8px}
.eb-empty{color:var(--ink3);font-size:12.5px;text-align:center;padding:14px 0;border:1.5px dashed var(--border);border-radius:9px}
.eb-col.over .eb-empty{display:none}
.eb-add{margin:8px 8px 0;border:0;background:none;text-align:left;color:var(--as-ink2);font-size:13.5px;padding:8px 8px;border-radius:8px;cursor:pointer}
.eb-add:hover{background:var(--surface);color:var(--ink)}
.ek{background:var(--surface);border:1px solid var(--as-line);border-radius:10px;padding:11px 12px 10px;box-shadow:0 1px 2px rgba(15,23,42,.05);cursor:pointer;font-size:13.5px;color:var(--as-ink)}
.ek:hover{border-color:#c9cbcd;box-shadow:0 2px 8px rgba(15,23,42,.08)}
.ek.dragging{opacity:.35}
.ek-ph{border:2px dashed var(--sel);border-radius:10px;background:color-mix(in srgb,var(--sel) 7%,transparent);flex-shrink:0}
.ek-h{display:flex;gap:8px;align-items:flex-start}
.ek-h .circ{margin-top:1px;width:16px;height:16px;border:1.5px solid var(--as-ink2);color:transparent}
.ek-h .circ:hover,.ek-s .circ:hover{border-color:var(--as-done);color:var(--as-done)}
.ek .circ.on{background:var(--as-done);border-color:var(--as-done);color:#fff}
.ek-t{font-weight:500;line-height:1.35;min-width:0;word-break:break-word}
.ek.done .ek-t{color:var(--as-ink2)}
.ek-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0 24px}
.ek-chips:empty{display:none}
.ek-chips .chip{border-radius:6px}
.ek-proj{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;padding:1px 8px;border-radius:6px;background:var(--info-soft);color:var(--info);line-height:20px}
.ek-f{display:flex;align-items:center;gap:8px;margin:9px 0 0 24px;min-height:24px}
.ek-as .av{width:24px;height:24px;margin:0;font-size:10.5px}
.ek-as.ed,.ek-due.ed{border-radius:6px;cursor:pointer}
.ek-due{font-size:12.5px;color:var(--as-ink2);display:inline-flex;align-items:center;min-height:24px;padding:0 3px}
.ek-due.ed:hover,.ek-as.ed:hover .tl-ph{color:var(--ink);border-color:var(--ink2)}
.ek-due .tl-date{width:140px}
.ek-sc{display:inline-flex;align-items:center;gap:3px;border:1px solid transparent;background:none;color:var(--as-ink2);font-size:12px;padding:2px 6px;border-radius:6px;cursor:pointer}
.ek-sc:hover{background:var(--surface2);border-color:var(--border);color:var(--ink)}
.ek-sc.ghost{opacity:0}.ek:hover .ek-sc.ghost{opacity:1}
.ek-car{display:inline-flex}.ek-car svg{transition:transform .12s}.ek-car.on svg{transform:rotate(90deg)}
.ek-prog{height:3px;background:var(--surface2);border-radius:3px;margin:8px 0 0 24px;overflow:hidden}
.ek-prog i{display:block;height:100%;background:var(--as-done)}
.ek-subs{margin:8px -4px 0 18px;border-top:1px solid var(--as-line);padding-top:4px;cursor:default}
.ek-s{display:flex;align-items:center;gap:7px;padding:4px 4px;border-radius:6px;font-size:12.5px}
.ek-s:hover{background:var(--as-hover)}
.ek-s .circ{width:14px;height:14px;border:1.5px solid var(--as-ink2);color:transparent;flex-shrink:0}
.ek-s .circ svg{width:8px;height:8px}
.ek-st{flex:1;min-width:0;cursor:pointer;line-height:1.3}
.ek-st:hover{text-decoration:underline}
.ek-s.done .ek-st{color:var(--as-ink2);text-decoration:line-through}
.ek-s .av{width:18px;height:18px;font-size:8.5px;margin:0}
.ek-sd{font-size:11.5px;color:var(--as-ink2);white-space:nowrap}
.ek-addsub{padding:6px 4px 2px}
.ek-addsub .in{font-size:12.5px}
.ek-new{cursor:default}
.ek-ta{width:100%;border:0;resize:none;font:inherit;font-size:13.5px;background:none;color:var(--ink);outline:none;margin-bottom:6px}
.ek-new select{margin-top:2px}

/* ---------- PO tracker: the sheet's dropdown chips & bands ---------- */
.chip.shc{border-radius:12px;font-size:11.5px;font-weight:600;letter-spacing:.2px;padding:0 8px;line-height:19px;gap:5px}
.chip.sh-true{background:#11734b;color:#d4edbc}
.chip.sh-false{background:#b10202;color:#ffcfc9}
.chip.sh-dep{background:#ffe5a0;color:#473821}
.chip.shc[data-podd]{cursor:pointer}
.chip.shc .dd{display:inline-block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4.5px solid currentColor;opacity:.85}
.chip.shc[data-podd]:hover{filter:brightness(1.08);box-shadow:0 0 0 2px color-mix(in srgb,currentColor 25%,transparent)}
.hq .sheet td .cv .chip.shc{vertical-align:middle}
.sheet tr.grp.po.pb-1 td{background:#1f4e78}.sheet tr.grp.po.pb-2 td{background:#2e7d32}.sheet tr.grp.po.pb-3 td{background:#8e4b10}
.sheet tr.grp.po.pb-4 td{background:#5b3a7a}.sheet tr.grp.po.pb-5 td{background:#0e6b6b}.sheet tr.grp.po.pb-6 td{background:#7a1f2b}
.sheet tr.grp.po td .cv,.sheet tr.grp.po .caret{color:#fff}
.hq .sheet td.shade:not(.sel){background:#f7f7f7}
@media (prefers-color-scheme:dark){.hq .sheet td.shade:not(.sel){background:#162033}}

/* ---------- Budget vs Finance ---------- */
.kpi.big.low{border-color:var(--warn)}.kpi.big.low .v{color:var(--warn)}
.kpi.neg .v{color:var(--bad)}
.bprof{padding:6px 16px 10px}
.bp-row{display:grid;grid-template-columns:170px 1fr auto;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border)}
.bp-row.warn .bp-v{color:var(--warn)}
.bp-l{font-weight:650}
.bp-f{color:var(--ink2);font-size:13px}.bp-f b{color:var(--ink);font-weight:600}
.bp-v{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bp-v small{font-weight:500;color:var(--ink2);font-size:12px;margin-left:4px}
.bp-note{font-size:12.5px;color:var(--ink2);padding-top:9px;line-height:1.5}
.bt-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px}
.bt{--bcols:minmax(200px,1.6fr) repeat(2,minmax(100px,1fr)) minmax(120px,1fr) 150px;border-top:1px solid var(--border);font-variant-numeric:tabular-nums}
.bt.fin{--bcols:minmax(200px,1.6fr) repeat(4,minmax(100px,1fr)) 150px}
.bt-h,.bt summary,.bt-t{display:grid;grid-template-columns:var(--bcols);align-items:center}
.bt-h > div,.bt summary > div,.bt-t > div{padding:8px 12px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-h > div:first-child,.bt summary > div:first-child,.bt-t > div:first-child{text-align:left}
.bt-h{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2);font-weight:600;background:var(--surface2);border-bottom:1px solid var(--border)}
.bt-r{border-bottom:1px solid var(--border)}
.bt summary{cursor:pointer;list-style:none;font-size:13.5px}
.bt summary::-webkit-details-marker{display:none}
.bt summary:hover{background:var(--surface2)}
.bt-c{display:flex;align-items:center;gap:6px;font-weight:550}
.bt-car{display:inline-flex;color:var(--ink3)}.bt-car svg{transition:transform .12s}
.bt-r[open] .bt-car svg{transform:rotate(90deg)}
.bt .neg{color:var(--bad);font-weight:600}
.bt-r.over summary{background:color-mix(in srgb,var(--bad-soft) 45%,transparent)}
.bt-u{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.bt-u span{font-size:12px;color:var(--ink2);width:38px;text-align:right}
.bbar{flex:1;max-width:90px;height:6px;border-radius:6px;background:var(--surface2);overflow:hidden}
.bbar i{display:block;height:100%;background:var(--as-done)}
.bbar.over i{background:var(--bad)}
.bt-d{padding:6px 14px 12px 36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;background:var(--surface2)}
.bt-dl{font-size:12.5px}
.bt-dl > b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2);margin-bottom:4px}
.bt-dl > div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dashed var(--border)}
.bt-dl > div > span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.bt-t{font-weight:700;background:var(--surface2);font-size:13.5px}
.bcash{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.bl > div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px}
.bl > div > span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:550}
.bl .tot{font-weight:700;border-bottom:0;border-top:2px solid var(--border);margin-top:2px}
.bl .tot.sub2{font-weight:500;color:var(--ink2);border-top:0}
@media (max-width:860px){.bt,.bt.fin{--bcols:1.4fr 1fr 1fr}.bt-h > div:nth-child(n+4),.bt summary > div:nth-child(n+4),.bt-t > div:nth-child(n+4){display:none}.bp-row{grid-template-columns:1fr auto}.bp-f{grid-column:1/-1;order:3}}

/* ---------- Install planner ---------- */
.ip-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:14px;align-items:start}
@media (max-width:1000px){.ip-top{grid-template-columns:1fr}}
.ip-win{display:grid;grid-template-columns:minmax(260px,1.4fr) 1fr 1fr;gap:10px;margin-top:12px}
.ip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
@media (max-width:640px){.ip-grid,.ip-win{grid-template-columns:1fr}}
.ip-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.ip-f > span:first-child{font-size:11.5px;color:var(--ink2);font-weight:500}
.ip-2{display:flex;align-items:center;gap:6px}.ip-2 i{color:var(--ink3);font-style:normal}
.ipin{border:1px solid transparent;background:var(--surface2);border-radius:7px;padding:6px 9px;width:100%;min-width:0;font-size:13.5px;color:var(--ink)}
.ipin:hover{border-color:var(--border)}
.ipin:focus{outline:2px solid var(--accent-soft);border-color:var(--accent);background:var(--surface)}
.ipin:disabled{background:none;padding-left:0}
.ip-more{margin-top:12px}
.ip-more summary,.ip-ck summary,.ip-resp summary{cursor:pointer;color:var(--ink2);font-size:13px;user-select:none}
.ip-more summary:hover,.ip-ck summary:hover,.ip-resp summary:hover{color:var(--ink)}
.ip-next{margin-top:10px;font-size:13.5px}
.ip-ck{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.ip-ck summary{font-weight:600;color:var(--ink)}
.ip-it{cursor:pointer;align-items:flex-start}
.ip-it input{margin-top:3px}
.ip-it .strike{text-decoration:line-through}
.ip-resp{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px}
.ip-resp summary{font-size:14px;color:var(--ink)}
.sheet tr.po-ro td:not(.rn){background:color-mix(in srgb,var(--surface2) 55%,transparent)}
.sheet tr.po-ro .del{display:none}
.sheet tr.grp.ship-po td{background:var(--info-soft)}.sheet tr.grp.ship-po td .cv{color:var(--info)}
table.ip-tab td{vertical-align:middle}
/* Tasks across projects (Home → Overdue tasks) and the task it opens */
.tl-row.tl-hl{background:color-mix(in srgb,var(--warn,#d97706) 18%,transparent);box-shadow:inset 3px 0 0 var(--warn,#d97706);transition:background 1.5s}
.task-x{gap:10px;align-items:flex-start}
.task-x input[type=checkbox]{margin-top:3px}
.task-x.late{box-shadow:inset 3px 0 0 var(--bad,#dc2626);background:color-mix(in srgb,var(--bad,#dc2626) 5%,transparent)}
.task-x .num{min-width:110px;text-align:right}