/* =====================================================================
   Taskbook — design system
   Warm minimalist. Ink on paper, one accent (sage) reserved for primary
   actions and Assist. One semantic tone, "critical", marks overdue,
   over-capacity and destructive states and is never used decoratively.
   4px baseline. Five type sizes (12/13/14/16/24). Three weights.
   ===================================================================== */
:root{
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  --font:"Inter","InterVariable",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r-sm:4px; --r:6px; --r-lg:8px;
  --topbar:56px; --sb-w:264px; --detail-w:416px; --assist-w:440px;

  --ease:cubic-bezier(.2,0,0,1); --dur:160ms;
  --tr:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
       border-color var(--dur) var(--ease),opacity var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

/* ---------- paper (light) ---------- */
[data-theme="light"]{
  --canvas:#F7F5F0; --sidebar:#F0EDE6; --surface:#FCFBF8; --block:#ECE9E1; --block-hover:#E5E1D8;
  --ink-1:#26231F; --ink-2:#57524A; --ink-3:#736D63; --ink-4:#B3ADA1;
  --line:rgba(38,35,31,.08); --line-strong:rgba(38,35,31,.14);
  --hover:rgba(38,35,31,.04); --press:rgba(38,35,31,.07); --select:rgba(38,35,31,.06);
  --accent:#4F6E5A; --accent-hover:#415C4B; --accent-tint:rgba(79,110,90,.09);
  --accent-line:rgba(79,110,90,.34); --on-accent:#FAF9F5; --accent-inverse:#A3C0AB;
  --critical:#A5503F; --critical-tint:rgba(165,80,63,.07);
  --scrim:rgba(38,35,31,.20);
  --elev:0 1px 2px rgba(38,35,31,.04),0 8px 24px rgba(38,35,31,.07);
  color-scheme:light;
}
/* ---------- ink (dark) ---------- */
[data-theme="dark"]{
  --canvas:#191816; --sidebar:#141312; --surface:#1F1E1B; --block:#27251F; --block-hover:#2E2C26;
  --ink-1:#ECE8E0; --ink-2:#B0AA9F; --ink-3:#8C877D; --ink-4:#5A564F;
  --line:rgba(236,232,224,.07); --line-strong:rgba(236,232,224,.13);
  --hover:rgba(236,232,224,.04); --press:rgba(236,232,224,.07); --select:rgba(236,232,224,.06);
  --accent:#93B39D; --accent-hover:#A7C3AF; --accent-tint:rgba(147,179,157,.10);
  --accent-line:rgba(147,179,157,.32); --on-accent:#141312; --accent-inverse:#4F6E5A;
  --critical:#D48A78; --critical-tint:rgba(212,138,120,.08);
  --scrim:rgba(0,0,0,.45);
  --elev:0 1px 2px rgba(0,0,0,.2),0 12px 32px rgba(0,0,0,.3);
  color-scheme:dark;
}
/* Semantic aliases. Priority is an ink ramp, not a colour ramp. */
:root{
  --text:var(--ink-1); --text-2:var(--ink-2); --text-3:var(--ink-3);
  --bg:var(--canvas); --bg-2:var(--sidebar); --panel:var(--surface); --panel-2:var(--block);
  --line-soft:var(--line); --active:var(--press); --sel:var(--select); --accent-soft:var(--accent-tint);
  --p1:var(--ink-1); --p2:var(--ink-2); --p3:var(--ink-3); --p4:var(--ink-4);
  --ok:var(--ink-2); --warn:var(--ink-1); --danger:var(--critical); --info:var(--ink-3);
}

/* ============================== base ============================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;background:var(--canvas);color:var(--ink-1);
  font:400 14px/20px var(--font);letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:var(--accent);text-decoration:none}
::placeholder{color:var(--ink-3);opacity:.8}
::selection{background:var(--accent-tint)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
[hidden]{display:none!important}
svg{flex:none}
input[type=checkbox]{accent-color:var(--accent)}

*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translate(-50%,6px)}}
@keyframes lift{from{opacity:0;transform:translateY(6px)}}
@keyframes sheet{from{opacity:0;transform:translateX(12px)}}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ============================== shell layout ============================== */
.app{display:grid;grid-template-columns:var(--sb-w) 0 minmax(0,1fr);height:100vh;overflow:hidden}
.app.detail-open{grid-template-columns:var(--sb-w) 0 minmax(0,1fr) var(--detail-w)}
.app.sb-collapsed{grid-template-columns:0 0 minmax(0,1fr)}
.app.sb-collapsed.detail-open{grid-template-columns:0 0 minmax(0,1fr) var(--detail-w)}
.app.sb-collapsed .sidebar{visibility:hidden}

.resizer{position:relative;z-index:6;cursor:col-resize}
.resizer::after{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:transparent;transition:var(--tr)}
.resizer:hover::after,.resizer.dragging::after{background:var(--line-strong)}

.main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--canvas)}
.view{flex:1;overflow:hidden auto;position:relative}

/* ============================== sidebar ============================== */
.sidebar{display:flex;flex-direction:column;overflow:hidden auto;padding:0 var(--s-3) var(--s-7);
  background:var(--sidebar);border-right:1px solid var(--line)}
.sb-head{display:flex;align-items:center;gap:var(--s-1);height:var(--topbar);flex:none;padding:0 0 0 var(--s-2)}
.logo{display:flex;align-items:center;gap:var(--s-2);font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.01em}
.logo .mark{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--ink-1);color:var(--canvas)}
.logo .mark svg{width:12px;height:12px;stroke-width:2.6}
.sb-add{padding:var(--s-1) 0 var(--s-4)}
.sb-section{display:flex;flex-direction:column;gap:1px}
.sb-label{display:flex;align-items:center;gap:var(--s-1);height:28px;margin-top:var(--s-5);padding:0 var(--s-1) 0 var(--s-2);
  font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3);user-select:none}
.sb-item{position:relative;display:flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-1) 0 var(--s-2);
  border-radius:var(--r);color:var(--ink-2);font-size:13px;line-height:20px;font-weight:500;cursor:pointer;user-select:none;transition:var(--tr)}
.sb-item:hover{background:var(--hover);color:var(--ink-1)}
.sb-item.active{background:var(--select);color:var(--ink-1)}
.sb-item .ico{display:grid;place-items:center;width:16px;height:16px;flex:none;color:var(--ink-3);transition:var(--tr)}
.sb-item .ico svg{width:16px;height:16px}
.sb-item.active .ico,.sb-item:hover .ico{color:var(--ink-1)}
.sb-item.assist .ico{color:var(--accent)}
.sb-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-item .ct{min-width:20px;text-align:right;font-size:12px;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sb-item .ct.hot{color:var(--critical);font-weight:500}
.sb-item .row-act{display:flex;opacity:0;transition:opacity var(--dur) var(--ease)}
.sb-item:hover .row-act{opacity:1}
.sb-item:hover .ct{display:none}
.sb-item.drop-target{box-shadow:inset 0 0 0 1px var(--accent-line);background:var(--accent-tint)}
.sb-empty{padding:var(--s-1) var(--s-2) var(--s-2);font-size:12px;line-height:16px;color:var(--ink-3)}
.twisty{display:grid;place-items:center;width:16px;height:16px;flex:none;border-radius:var(--r-sm);color:var(--ink-3);
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.twisty svg{width:12px;height:12px}
.twisty:hover{background:var(--press)}
.twisty.open{transform:rotate(90deg)}
.twisty-gap{width:16px;flex:none}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.dot.sm{width:6px;height:6px}
.lead-dot{margin-top:6px}

/* ============================== topbar ============================== */
.topbar{display:flex;align-items:center;gap:var(--s-2);height:var(--topbar);flex:none;padding:0 var(--s-5) 0 var(--s-4);
  background:var(--canvas);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.topbar.scrolled{border-bottom-color:var(--line)}
.crumb{display:flex;align-items:center;gap:var(--s-2);min-width:0;color:var(--ink-3)}
.crumb svg{width:16px;height:16px}
.crumb strong{font-size:14px;line-height:20px;font-weight:600;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}
.bar-inline{display:block;width:48px}

/* ============================== controls ============================== */
.iconbtn{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:var(--r);color:var(--ink-3);transition:var(--tr)}
.iconbtn svg{width:16px;height:16px}
.iconbtn:hover{background:var(--hover);color:var(--ink-1)}
.iconbtn:active{background:var(--press)}
.iconbtn.on{color:var(--accent)}
.iconbtn.sm{width:24px;height:24px}
.iconbtn.sm svg{width:14px;height:14px}
.iconbtn.xs{width:20px;height:20px;border-radius:var(--r-sm)}
.iconbtn.xs svg{width:12px;height:12px}

.btn{display:inline-flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-3);border-radius:var(--r);
  font-size:13px;line-height:20px;font-weight:500;color:var(--ink-2);white-space:nowrap;border:1px solid transparent;transition:var(--tr)}
.btn svg{width:14px;height:14px}
.btn:hover{background:var(--hover);color:var(--ink-1)}
.btn:active{background:var(--press)}
.btn.sm{height:28px;padding:0 var(--s-2);gap:6px;font-size:13px}
.btn.block{width:100%}
.btn.ghost{border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink-4)}
.btn.set{color:var(--ink-1)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn.primary .kbd{border-color:transparent;background:rgba(255,255,255,.14);color:var(--on-accent)}
/* Assist actions: accent outline, never a fill — distinct without shouting */
.btn.assist{color:var(--accent);border-color:var(--accent-line)}
.btn.assist:hover{background:var(--accent-tint);color:var(--accent-hover);border-color:var(--accent)}
.btn.assist-quiet{color:var(--accent)}
.btn.assist-quiet:hover{background:var(--accent-tint);color:var(--accent-hover)}
.btn.danger{color:var(--critical);border-color:var(--line-strong)}
.btn.danger:hover{background:var(--critical-tint);border-color:var(--critical)}
.btn:disabled{opacity:.4;pointer-events:none}

.seg{display:inline-flex;align-items:center;gap:2px;height:32px;padding:2px;border-radius:var(--r);background:var(--hover);flex:none}
.seg button{height:28px;padding:0 var(--s-3);border-radius:var(--r-sm);font-size:13px;line-height:20px;font-weight:500;color:var(--ink-3);transition:var(--tr)}
.seg button:hover{color:var(--ink-1)}
.seg button.on{background:var(--surface);color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--line-strong)}

.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);font:500 11px/16px var(--font);color:var(--ink-3);white-space:nowrap}

/* ============================== pages ============================== */
.page{max-width:768px;margin:0 auto;padding:var(--s-6) var(--s-7) 160px}
.page.wide{max-width:1200px}
.page-head{padding-bottom:var(--s-4)}
.page-title{display:flex;align-items:baseline;gap:var(--s-3);margin:0;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em}
.page-title svg{width:20px;height:20px;align-self:center;color:var(--ink-3);stroke-width:1.6}
.page-title .count{font-size:16px;line-height:24px;font-weight:400;color:var(--ink-3);letter-spacing:0;font-variant-numeric:tabular-nums}
.page-sub{margin-top:var(--s-1);font-size:13px;line-height:20px;color:var(--ink-3);max-width:640px}

/* ============================== sections ============================== */
.sec{margin-top:var(--s-6)}
.page-head + .sec,.page-head + .card2 + .sec,.score + .sec{margin-top:var(--s-5)}
.sec-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s-2);height:40px;
  background:var(--canvas);border-bottom:1px solid var(--line);font-size:13px;line-height:20px;font-weight:600;cursor:pointer;user-select:none}
.sec-head.static{position:static;background:transparent;cursor:default}
.sec-head svg{width:14px;height:14px;color:var(--ink-3)}
.sec-head .twisty svg{width:12px;height:12px}
.sec-head .ct{font-size:12px;line-height:16px;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sec-head .row-act{opacity:0;transition:opacity var(--dur) var(--ease)}
.sec-head:hover .row-act{opacity:1}
.sec.collapsed .sec-body{display:none}
.group-label{margin:var(--s-5) 0 var(--s-2);font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}

/* ============================== task row ============================== */
.task{position:relative;display:flex;align-items:flex-start;gap:var(--s-3);margin:0 calc(-1 * var(--s-2));
  padding:var(--s-3) var(--s-2);border-radius:var(--r);transition:var(--tr)}
.task::after{content:"";position:absolute;left:38px;right:var(--s-2);bottom:0;height:1px;background:var(--line);pointer-events:none}
.task:hover{background:var(--hover)}
.task.sel{background:var(--select)}
.task.clickable{cursor:pointer}
.task.dragging{opacity:.4}
.task.drop-above{box-shadow:inset 0 2px 0 var(--accent)}
.task.drop-below{box-shadow:inset 0 -2px 0 var(--accent)}
.task .grip{position:absolute;left:-16px;top:14px;display:grid;place-items:center;width:16px;height:16px;color:var(--ink-4);cursor:grab;opacity:0;transition:opacity var(--dur) var(--ease)}
.task .grip svg{width:14px;height:14px}
.task:hover .grip{opacity:1}
.task.done .t-title{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.task.blocked .t-title{color:var(--ink-2)}

.check{display:grid;place-items:center;width:18px;height:18px;flex:none;margin-top:1px;border-radius:50%;
  border:1.5px solid var(--ink-4);color:var(--ink-2);transition:var(--tr)}
.check svg{width:10px;height:10px;stroke-width:3;opacity:0;transition:opacity var(--dur) var(--ease)}
.check:hover{border-color:var(--ink-2)}
.check:hover svg{opacity:.55}
.check.p1{border-color:var(--ink-1);border-width:2px}
.check.p2{border-color:var(--ink-2)}
.check.p3{border-color:var(--ink-3)}
.check.on,.check.on.p1,.check.on.p2,.check.on.p3{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.check.on svg{opacity:1}
.check.sm{width:16px;height:16px;margin-top:2px}

.t-body{flex:1;min-width:0}
.t-title{font-size:14px;line-height:20px;color:var(--ink-1);word-break:break-word;cursor:pointer}
.t-desc{font-size:13px;line-height:20px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);margin-top:var(--s-1);font-size:12px;line-height:16px;color:var(--ink-3)}
.t-meta .mi{display:inline-flex;align-items:center;gap:var(--s-1);transition:color var(--dur) var(--ease)}
.t-meta .mi svg{width:12px;height:12px}
.t-meta button.mi:hover{color:var(--ink-1)}
.t-meta .mi.proj{margin-left:auto}
.t-meta .mi.prio{font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.t-meta .mi.prio.p1{color:var(--ink-1)}
.t-meta .due.today{color:var(--ink-1);font-weight:500}
.t-meta .due.soon{color:var(--ink-2)}
.t-meta .due.overdue{color:var(--critical);font-weight:500}
.t-actions{display:flex;align-self:flex-start;margin:-6px -4px 0 0;opacity:0;transition:opacity var(--dur) var(--ease)}
.t-actions.pinned{opacity:1}
.task:hover .t-actions,.task:focus-within .t-actions{opacity:1}
.subcount{display:inline-flex;align-items:center;gap:2px;color:var(--ink-3);transition:color var(--dur) var(--ease)}
.subcount:hover{color:var(--ink-1)}
.subcount svg{width:12px;height:12px}
.subwrap{margin-left:9px;padding-left:var(--s-3);border-left:1px solid var(--line)}
.dep-warn{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--ink-2)}
.dep-warn svg{width:12px;height:12px}

.chip{display:inline-flex;align-items:center;gap:var(--s-1);height:20px;padding:0 6px;border-radius:var(--r-sm);
  background:var(--hover);color:var(--ink-2);font-size:12px;line-height:16px;white-space:nowrap;transition:var(--tr)}
.chip svg{width:12px;height:12px}
button.chip:hover{background:var(--press);color:var(--ink-1)}
.chip.lab{height:auto;padding:0;background:none;color:var(--ink-3)}
.chip.lab:hover{background:none;color:var(--ink-1)}
.chip.draggable{cursor:grab}
.chip.p1{box-shadow:inset 2px 0 0 var(--ink-1)} .chip.p2{box-shadow:inset 2px 0 0 var(--ink-2)} .chip.p3{box-shadow:inset 2px 0 0 var(--ink-3)}
/* Assist provenance: the mark plus small caps — no box, no glow */
.chip.assist,.ai-source,.badge.assist{color:var(--accent);font-variant-caps:all-small-caps;letter-spacing:.05em;font-weight:500}
.chip.assist{height:auto;padding:0;background:none}

.addrow{display:flex;align-items:center;gap:var(--s-3);height:40px;margin:0 calc(-1 * var(--s-2));padding:0 var(--s-2);
  border-radius:var(--r);color:var(--ink-3);font-size:13px;line-height:20px;cursor:pointer;transition:var(--tr)}
.addrow .plus{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;transition:var(--tr)}
.addrow .plus svg{width:14px;height:14px}
.addrow:hover{color:var(--accent)}
.addrow:hover .plus{background:var(--accent-tint)}

.empty{padding:var(--s-8) var(--s-5);text-align:center;color:var(--ink-3)}
.empty .big{display:grid;place-items:center;color:var(--ink-4)}
.empty .big svg{width:32px;height:32px;stroke-width:1.4}
.empty h3{margin:var(--s-4) 0 var(--s-1);font-size:14px;line-height:20px;font-weight:600;color:var(--ink-1)}
.empty p{max-width:360px;margin:0 auto;font-size:13px;line-height:20px}
.empty-action{margin-top:var(--s-5)}

/* ============================== composer ============================== */
.composer{margin:var(--s-2) 0;padding:var(--s-3) var(--s-4);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);transition:border-color var(--dur) var(--ease)}
.composer:focus-within{border-color:var(--ink-4)}
.composer .ci{display:block;width:100%;background:none;border:0;outline:0;resize:none;overflow:hidden;font-size:14px;line-height:20px}
.composer .cd{display:block;width:100%;margin-top:var(--s-1);background:none;border:0;outline:0;resize:none;overflow:hidden;font-size:13px;line-height:20px;color:var(--ink-2)}
.composer .cbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
.composer .cfoot{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.parsed{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-2)}
.parsed:empty{display:none}
.pill{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-sm);background:var(--hover);color:var(--ink-2);font-size:12px;line-height:16px;font-weight:500}

.ac{position:fixed;z-index:80;min-width:240px;max-height:280px;overflow:auto;padding:var(--s-1);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--elev)}
.ac-item{display:flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:13px;cursor:pointer;transition:var(--tr)}
.ac-item svg{width:14px;height:14px;color:var(--ink-3)}
.ac-item.on{background:var(--select)}
.ac-item .hint{margin-left:auto;font-size:12px;color:var(--ink-3)}

/* ============================== board ============================== */
.board{display:flex;align-items:flex-start;gap:var(--s-5);height:100%;padding:var(--s-5) var(--s-7) var(--s-6);overflow-x:auto}
.col{display:flex;flex-direction:column;flex:none;width:288px;max-height:calc(100vh - 128px)}
.col-head{display:flex;align-items:center;gap:var(--s-2);height:40px;flex:none;padding:0 var(--s-1);border-bottom:1px solid var(--line);font-size:13px;line-height:20px;font-weight:600}
.col-head .ct{font-size:12px;font-weight:400;color:var(--ink-3);font-variant-numeric:tabular-nums}
.col-body{display:flex;flex-direction:column;gap:var(--s-2);min-height:64px;padding:var(--s-3) 0;overflow:auto;border-radius:var(--r-lg);transition:background-color var(--dur) var(--ease)}
.col.drop-target .col-body{background:var(--accent-tint)}
.col-body .addrow{margin:0;height:36px}
.add-col{height:40px;padding:0 var(--s-1);color:var(--ink-3);font-size:13px;border-bottom:1px dashed var(--line-strong);transition:var(--tr)}
.add-col:hover{color:var(--ink-1);border-bottom-color:var(--ink-4)}
.card{padding:var(--s-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;transition:var(--tr)}
.card:hover{border-color:var(--line-strong)}
.card.dragging{opacity:.4}
.card .ct-row{display:flex;align-items:flex-start;gap:var(--s-3)}
.card-title{font-size:13px;line-height:20px;color:var(--ink-1)}
.card .t-meta{margin-top:var(--s-2);padding-left:30px}

/* ============================== calendar ============================== */
.cal-toolbar{display:flex;align-items:center;gap:var(--s-2);height:40px;margin-bottom:var(--s-4)}
.cal-title{margin:0 0 0 var(--s-2);font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.cal-grid{position:relative;display:grid;grid-template-columns:56px repeat(var(--days,7),minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cal-hcell{position:sticky;top:0;z-index:8;padding:var(--s-2) var(--s-2) var(--s-3);background:var(--canvas);text-align:center}
.cal-hcell .dn{font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.cal-hcell .dd{display:grid;place-items:center;width:28px;height:28px;margin:var(--s-1) auto 0;border-radius:50%;font-size:16px;line-height:24px;font-weight:600}
.cal-hcell.today .dd{background:var(--ink-1);color:var(--canvas)}
.cal-bar{margin-top:var(--s-2)}
.cal-load{margin-top:var(--s-1);font-size:12px;line-height:16px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cal-hour{height:48px;padding:var(--s-1) var(--s-2) 0 0;background:var(--canvas);text-align:right;font-size:12px;line-height:16px;color:var(--ink-3)}
.cal-cell{height:48px;background:var(--canvas);transition:box-shadow var(--dur) var(--ease)}
.cal-cell:hover{box-shadow:inset 0 0 0 100vmax var(--hover)}
.cal-cell.drop-target{box-shadow:inset 0 0 0 100vmax var(--accent-tint),inset 0 0 0 1px var(--accent-line)}
.cal-now{position:absolute;left:0;right:0;height:1px;background:var(--ink-1);z-index:9;pointer-events:none}
.cal-now::before{content:"";position:absolute;left:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink-1)}
.blk{position:absolute;left:4px;right:4px;z-index:4;overflow:hidden;padding:var(--s-1) var(--s-2);border-radius:var(--r-sm);
  background:var(--block);box-shadow:inset 2px 0 0 var(--ink-4);font-size:12px;line-height:16px;cursor:pointer;transition:var(--tr)}
.blk:hover{background:var(--block-hover);z-index:10}
.blk.p1{box-shadow:inset 2px 0 0 var(--ink-1)} .blk.p2{box-shadow:inset 2px 0 0 var(--ink-2)} .blk.p3{box-shadow:inset 2px 0 0 var(--ink-3)}
.blk .bt{font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk .bm{color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.blk.done{opacity:.5}
.blk.done .bt{text-decoration:line-through}
.unsched{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4);padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg)}
.unsched-note{width:100%;margin-bottom:var(--s-1);font-size:12px;line-height:16px;color:var(--ink-3)}

.mhead{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-bottom:var(--s-2)}
.mhead-d{text-align:center;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.mgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mcell{display:flex;flex-direction:column;gap:var(--s-1);min-height:112px;padding:var(--s-2);background:var(--canvas);transition:box-shadow var(--dur) var(--ease)}
.mcell.drop-target{box-shadow:inset 0 0 0 100vmax var(--accent-tint)}
.mcell .md{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-2)}
.mcell.out .md{color:var(--ink-4)}
.mcell.out .mtask{opacity:.55}
.mcell.today .md{background:var(--ink-1);color:var(--canvas)}
.mtask{padding:2px 6px;border-radius:var(--r-sm);background:var(--block);box-shadow:inset 2px 0 0 var(--ink-4);font-size:12px;line-height:16px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:var(--tr)}
.mtask:hover{background:var(--block-hover)}
.mtask.p1{box-shadow:inset 2px 0 0 var(--ink-1)} .mtask.p2{box-shadow:inset 2px 0 0 var(--ink-2)} .mtask.p3{box-shadow:inset 2px 0 0 var(--ink-3)}
.mtask.done{opacity:.5;text-decoration:line-through}
.mcell-more{padding:0 6px;font-size:12px;line-height:16px;color:var(--ink-3)}

/* ============================== detail panel ============================== */
.detail{overflow:hidden auto;background:var(--surface);border-left:1px solid var(--line)}
.dt-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--s-2);height:var(--topbar);padding:0 var(--s-3) 0 var(--s-5);background:var(--surface);border-bottom:1px solid var(--line)}
.dt-head .btn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dt-body{padding:var(--s-5) var(--s-5) var(--s-8)}
.dt-title{display:block;width:100%;padding:0;background:none;border:0;outline:0;resize:none;overflow:hidden;font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.dt-desc{display:block;width:calc(100% + 16px);min-height:64px;margin:var(--s-2) -8px 0;padding:var(--s-2);background:none;border:1px solid transparent;
  border-radius:var(--r);outline:0;resize:vertical;font-size:13px;line-height:20px;color:var(--ink-2);transition:var(--tr)}
.dt-desc:hover{border-color:var(--line)}
.dt-desc:focus{border-color:var(--line-strong);background:var(--canvas)}
.dt-fields{margin-top:var(--s-5);border-top:1px solid var(--line)}
.dt-row{display:flex;align-items:center;gap:var(--s-3);min-height:40px;border-bottom:1px solid var(--line);font-size:13px;line-height:20px}
.dt-row .k{width:88px;flex:none;color:var(--ink-3)}
.dt-row .v{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2)}
.dt-row .v > .btn:first-child,.dt-row .v > .flex > .btn:first-child{margin-left:calc(-1 * var(--s-2))}
.dt-row .chip.lab{height:24px}
.dt-sec{margin-top:var(--s-6)}
.dt-sec h4{display:flex;align-items:center;gap:var(--s-2);height:28px;margin:0 0 var(--s-2);font-size:13px;line-height:20px;font-weight:600}
.dt-sec h4 svg{width:14px;height:14px;color:var(--ink-3)}
.subtask-row{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.subtask-title{font-size:13px;line-height:20px;cursor:pointer}
.subtask-row .muted{line-height:20px}
.cmt{display:flex;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.cmt .av{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--block);color:var(--ink-2);font-size:12px;font-weight:600}
.cmt .av.assist{background:var(--accent-tint);color:var(--accent)}
.cmt .av svg{width:14px;height:14px}
.cmt .cb{flex:1;min-width:0}
.cmt .cm{font-size:12px;line-height:16px;color:var(--ink-3)}
.cmt .cx{margin-top:2px;font-size:13px;line-height:20px;white-space:pre-wrap;word-break:break-word}
.act-item{display:flex;align-items:flex-start;gap:var(--s-2);padding:var(--s-1) 0;font-size:13px;line-height:20px;color:var(--ink-2)}
.act-item .ad{display:grid;place-items:center;height:20px;color:var(--ink-3)}
.act-item .ad svg{width:14px;height:14px}
.act-item.clickable{cursor:pointer;transition:color var(--dur) var(--ease)}
.act-item.clickable:hover{color:var(--ink-1)}

/* ============================== assist panel ============================== */
.ai-panel{position:fixed;top:0;right:0;bottom:0;z-index:70;display:flex;flex-direction:column;width:min(var(--assist-w),100vw);
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--elev);animation:sheet 200ms var(--ease)}
.ai-head{display:flex;align-items:center;gap:var(--s-2);height:var(--topbar);flex:none;padding:0 var(--s-3) 0 var(--s-5);border-bottom:1px solid var(--line)}
.ai-head .ttl{display:flex;align-items:center;gap:var(--s-2);font-size:14px;line-height:20px;font-weight:600}
.ai-head .ttl svg{width:16px;height:16px;color:var(--accent)}
.ai-source{font-size:13px;color:var(--ink-3)}
.ai-tabs{display:flex;gap:var(--s-5);flex:none;padding:0 var(--s-5);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ai-tabs::-webkit-scrollbar{display:none}
.ai-tab{position:relative;display:flex;align-items:center;height:40px;flex:none;font-size:13px;line-height:20px;font-weight:500;color:var(--ink-3);white-space:nowrap;transition:color var(--dur) var(--ease)}
.ai-tab:hover{color:var(--ink-1)}
.ai-tab.on{color:var(--ink-1)}
.ai-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:1px;background:var(--accent);opacity:0;transition:opacity var(--dur) var(--ease)}
.ai-tab.on::after{opacity:1}
.ai-tabs.modal-tabs{margin:calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-5);padding:0 var(--s-5)}
.ai-body{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--s-5)}

.thinking{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) 0;font-size:13px;color:var(--ink-3)}
.dots{display:inline-flex;gap:4px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:pulse 1.2s var(--ease) infinite}
.dots i:nth-child(2){animation-delay:.15s} .dots i:nth-child(3){animation-delay:.3s}

.card2{margin-bottom:var(--s-3);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg)}
.card2.alert{border-color:var(--critical-tint);background:var(--critical-tint)}
.card2 .c2h{display:flex;align-items:flex-start;gap:var(--s-2);font-size:14px;line-height:20px;font-weight:600}
.card2 .c2h > svg{width:16px;height:16px;margin-top:2px;color:var(--ink-3)}
.card2 .c2b{margin-top:var(--s-1);font-size:13px;line-height:20px;color:var(--ink-2)}
.card2 .c2b strong,.lead strong,.score-body strong{font-weight:600;color:var(--ink-1)}
.card2 .c2f,.c2f{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-top:var(--s-3)}
/* Assist-authored summaries: a single accent rule, nothing else */
.lead{margin-bottom:var(--s-5);padding:2px 0 2px var(--s-4);border-left:2px solid var(--accent)}
.lead .c2h{display:flex;align-items:center;gap:var(--s-2);font-size:13px;line-height:20px;font-weight:600;color:var(--ink-1)}
.lead .c2h svg{width:14px;height:14px;color:var(--accent)}
.lead .c2b{margin-top:var(--s-1);font-size:14px;line-height:24px;color:var(--ink-2)}
.detail-mono{font-family:var(--mono);font-size:12px!important;line-height:16px!important;color:var(--ink-3)!important;margin-top:var(--s-2)!important}
.note{font-style:italic;color:var(--ink-3)}

.sev{width:8px;height:8px;flex:none;margin-top:6px;border-radius:50%}
.sev.high{background:var(--critical)}
.sev.med{background:var(--ink-2)}
.sev.low{box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.badge{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-sm);background:var(--hover);
  font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.badge.high{background:var(--critical-tint);color:var(--critical)}
.badge.assist{background:var(--accent-tint)}

.prop{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-2);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-lg);transition:var(--tr)}
.prop:hover{border-color:var(--line-strong)}
.prop.clickable{cursor:pointer}
.prop.clickable:hover{background:var(--hover)}
.prop .cbx{width:16px;height:16px;flex:none;margin:2px 0 0}
.prop .pb{flex:1;min-width:0}
.prop .pt{font-size:13px;line-height:20px;color:var(--ink-1)}
.prop input.pt{display:block;width:100%;padding:0;background:none;border:0;border-bottom:1px solid transparent;outline:0;transition:border-color var(--dur) var(--ease)}
.prop input.pt:focus{border-bottom-color:var(--line-strong)}
.prop .pm{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);margin-top:var(--s-1);font-size:12px;line-height:16px;color:var(--ink-3)}
.prop .iconbtn{margin:-6px -6px 0 0}
.seg-inline{display:flex;gap:var(--s-1);flex:none}

.score{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-5);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg)}
.score-title{font-size:14px;line-height:20px;font-weight:600}
.score-body{margin-top:var(--s-1);font-size:13px;line-height:20px;color:var(--ink-2)}
.ring{position:relative;flex:none}
.ring svg{display:block;transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums}

.load-row{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-5)}
.load-k{width:40px;font-size:12px;line-height:16px;color:var(--ink-3)}
.load-v{font-size:12px;line-height:16px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}

.bar{height:4px;border-radius:2px;background:var(--line-strong);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:2px;background:var(--ink-3);transition:width 400ms var(--ease)}
.bar > i.ok{background:var(--ink-2)} .bar > i.warn{background:var(--ink-1)} .bar > i.danger{background:var(--critical)}
.bar-cell{width:88px;flex:none;align-self:center}
.pct-cell{width:40px;flex:none;align-self:center;text-align:right;font-variant-numeric:tabular-nums}

/* ============================== kv / stats ============================== */
.kv-row{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6)}
.kv-k{font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.kv-v{margin-top:2px;font-size:16px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums}
.kv-v.crit{color:var(--critical)} .kv-v.strong{color:var(--ink-1)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:var(--s-3);margin-bottom:var(--s-5)}
.stat{padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-lg)}
.stat .lbl{font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.stat .val{margin-top:var(--s-2);font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .sub{font-size:12px;line-height:16px;color:var(--ink-3)}
.stat .extra{margin-top:var(--s-3)}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);gap:4px;margin-top:var(--s-4);overflow-x:auto}
.heat i{width:12px;height:12px;border-radius:2px;background:var(--line)}
.heat i[data-l="1"]{background:color-mix(in srgb,var(--ink-2) 22%,transparent)}
.heat i[data-l="2"]{background:color-mix(in srgb,var(--ink-2) 45%,transparent)}
.heat i[data-l="3"]{background:color-mix(in srgb,var(--ink-2) 70%,transparent)}
.heat i[data-l="4"]{background:var(--ink-1)}
.week-grid{display:flex;align-items:flex-start;gap:var(--s-6);margin-top:var(--s-4)}
.week-chart{flex:0 0 256px}
.chartbars{display:flex;align-items:flex-end;gap:var(--s-2);height:120px}
.chartbars .cb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--s-1);height:100%}
.chartbars .cb i{display:block;width:100%;min-height:2px;border-radius:2px 2px 0 0;background:var(--ink-3);transition:height 400ms var(--ease)}
.chartbars .cb span{font-size:12px;line-height:16px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.prio-stat{min-width:96px}

/* workload chart */
.wl{display:flex;align-items:flex-end;gap:var(--s-2);height:176px;margin-top:var(--s-5)}
.wl-col{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);flex:1;min-width:0;height:100%;cursor:pointer}
.wl-val{height:16px;max-width:100%;overflow:hidden;font-size:12px;line-height:16px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.wl-track{position:relative;display:flex;align-items:flex-end;flex:1;width:100%;border-radius:var(--r-sm);transition:background-color var(--dur) var(--ease)}
.wl-col:hover .wl-track{background:var(--hover)}
.wl-bar{display:block;width:100%;border-radius:2px 2px 0 0;background:var(--ink-4);transition:height 400ms var(--ease)}
.wl-bar.near{background:var(--ink-2)} .wl-bar.over{background:var(--critical)} .wl-bar.off{opacity:.5}
.wl-cap{position:absolute;left:0;right:0;border-top:1px dashed var(--ink-3);pointer-events:none}
.wl-day{font-size:12px;line-height:16px;color:var(--ink-3);white-space:nowrap}
.wl-col.today .wl-day{color:var(--ink-1);font-weight:600}

/* ============================== overlays ============================== */
.overlay{position:fixed;inset:0;z-index:60;background:var(--scrim);animation:fade var(--dur) var(--ease)}
.modal{position:fixed;left:50%;top:12vh;z-index:65;display:flex;flex-direction:column;width:min(560px,calc(100vw - 32px));max-height:76vh;overflow:hidden;
  transform:translateX(-50%);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--elev);animation:rise 180ms var(--ease)}
.modal.lg{width:min(760px,calc(100vw - 32px))}
.m-head{display:flex;align-items:center;gap:var(--s-2);height:var(--topbar);flex:none;padding:0 var(--s-3) 0 var(--s-5);border-bottom:1px solid var(--line);font-size:14px;line-height:20px;font-weight:600}
.m-head > svg{width:16px;height:16px;color:var(--ink-3)}
.m-body{padding:var(--s-5);overflow:auto}
.m-foot{display:flex;justify-content:flex-end;gap:var(--s-2);flex:none;padding:var(--s-3) var(--s-5);border-top:1px solid var(--line)}
.dialog-text{margin:0;font-size:13px;line-height:20px;color:var(--ink-2)}
.field{margin-bottom:var(--s-5)}
.field:last-child{margin-bottom:0}
.field > label{display:block;margin-bottom:var(--s-2);font-size:13px;line-height:20px;font-weight:500;color:var(--ink-1)}
.field .hint,.hint{margin-top:var(--s-2);font-size:12px;line-height:16px;color:var(--ink-3)}
.hint.syntax{line-height:24px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.inp{display:block;width:100%;height:36px;padding:0 var(--s-3);background:var(--canvas);border:1px solid var(--line-strong);border-radius:var(--r);
  outline:0;font-size:14px;line-height:20px;transition:var(--tr)}
.inp:hover{border-color:var(--ink-4)}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
textarea.inp{height:auto;min-height:88px;padding:var(--s-2) var(--s-3);resize:vertical}
.inp.mono{font-family:var(--mono);font-size:13px}
.inp.inp-sm{height:28px;padding:0 var(--s-2);font-size:13px}
input[type=file].inp{height:auto;padding:var(--s-2)}
.swatches{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.sw{width:24px;height:24px;border-radius:50%;cursor:pointer;transition:box-shadow var(--dur) var(--ease)}
.sw:hover{box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line-strong)}
.sw.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink-1)}
.examples{display:grid;gap:var(--s-2)}
.example{display:block;padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r);text-align:left;transition:var(--tr)}
.example:hover{border-color:var(--line-strong);background:var(--hover)}
.example-q{font:500 12px/16px var(--mono);color:var(--ink-1)}
.example .hint{margin-top:2px}

.cmdk{position:fixed;left:50%;top:14vh;z-index:66;width:min(640px,calc(100vw - 32px));overflow:hidden;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--elev);animation:rise 180ms var(--ease)}
.cmdk > input{display:block;width:100%;height:56px;padding:0 var(--s-5);background:none;border:0;border-bottom:1px solid var(--line);outline:0;font-size:16px;line-height:24px}
.cmdk .res{max-height:52vh;overflow:auto;padding:var(--s-2)}
.cmdk .grp{padding:var(--s-3) var(--s-3) var(--s-1);font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.cmdk .r{display:flex;align-items:center;gap:var(--s-3);height:36px;padding:0 var(--s-3);border-radius:var(--r);font-size:13px;line-height:20px;color:var(--ink-2);cursor:pointer;transition:var(--tr)}
.cmdk .r svg{width:14px;height:14px;color:var(--ink-3)}
.cmdk .r.on{background:var(--select);color:var(--ink-1)}
.cmdk .r .sub{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.cmdk.quickadd{padding:var(--s-2)}
.cmdk.quickadd .composer{margin:0;border:0;background:transparent}

.menu{position:fixed;z-index:90;min-width:224px;max-height:70vh;overflow:auto;padding:var(--s-1);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--elev);animation:fade 120ms var(--ease)}
.menu .mi{display:flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-2);border-radius:var(--r-sm);font-size:13px;line-height:20px;color:var(--ink-1);cursor:pointer;transition:background-color var(--dur) var(--ease)}
.menu .mi:hover{background:var(--hover)}
.menu .mi > svg{width:14px;height:14px;color:var(--ink-3)}
.menu .mi.sub{color:var(--ink-2)}
.menu .mi.danger,.menu .mi.danger > svg{color:var(--critical)}
.menu .mi .r{margin-left:auto;font-size:12px;color:var(--ink-3)}
.menu .mi svg.r{width:14px;height:14px;color:var(--accent)}
.menu .mi-gap{width:14px;flex:none}
.menu .sep{height:1px;margin:var(--s-1) calc(-1 * var(--s-1));background:var(--line)}
.menu .hd{padding:var(--s-2) var(--s-2) var(--s-1);font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.menu-pad{padding:var(--s-1)}
.menu-input{width:calc(100% - 8px);height:32px;margin:var(--s-1)}
.menu-row{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-2);color:var(--ink-3)}
.menu-row svg{width:14px;height:14px}
.menu-scroll{max-height:256px;overflow:auto}
.menu-note{max-width:304px;padding:var(--s-2);font-size:13px;line-height:20px}

.minical{width:248px;padding:var(--s-1) var(--s-2) var(--s-2)}
.minical-head{display:flex;align-items:center;margin-bottom:var(--s-1)}
.minical-title{flex:1;text-align:center;font-size:13px;line-height:20px;font-weight:600}
.minical-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.minical-dow{padding:var(--s-1) 0;text-align:center;font-size:12px;line-height:16px;color:var(--ink-3)}
.minical-day{height:28px;border-radius:var(--r-sm);text-align:center;font-size:12px;line-height:16px;color:var(--ink-1);font-variant-numeric:tabular-nums;transition:var(--tr)}
.minical-day:hover{background:var(--hover)}
.minical-day.today{font-weight:600;box-shadow:inset 0 0 0 1px var(--line-strong)}
.minical-day.sel{background:var(--accent);color:var(--on-accent);font-weight:600}

.toasts{position:fixed;left:50%;bottom:var(--s-5);z-index:100;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);transform:translateX(-50%)}
.toast{display:flex;align-items:center;gap:var(--s-3);min-height:40px;padding:var(--s-1) var(--s-1) var(--s-1) var(--s-4);
  background:var(--ink-1);color:var(--canvas);border-radius:var(--r-lg);box-shadow:var(--elev);font-size:13px;line-height:20px;
  animation:lift 180ms var(--ease);transition:opacity 200ms var(--ease)}
.toast button{height:32px;padding:0 var(--s-2);border-radius:var(--r);font-weight:500;transition:var(--tr)}
.toast .toast-action{color:var(--accent-inverse)}
.toast .toast-dismiss{display:grid;place-items:center;width:32px;padding:0;color:var(--canvas);opacity:.6}
.toast .toast-dismiss svg{width:14px;height:14px}
.toast button:hover{background:color-mix(in srgb,var(--canvas) 12%,transparent);opacity:1}

.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:var(--s-6)}
.shortcut-group h4{margin:0 0 var(--s-2);font-size:12px;line-height:16px;font-weight:500;color:var(--ink-3)}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:32px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}

/* ============================== utilities ============================== */
.hr{height:1px;margin:var(--s-5) 0;background:var(--line)}
.muted{color:var(--ink-3)}
.small{font-size:12px;line-height:16px}
.strong{color:var(--ink-1);font-weight:500}
.critical{color:var(--critical)}
.accent{color:var(--accent)}
.strike{text-decoration:line-through;color:var(--ink-3)}
.code{font-family:var(--mono);font-size:.92em;padding:1px 4px;border-radius:var(--r-sm);background:var(--block)}
.flex{display:flex;align-items:center;gap:var(--s-2)}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.clickable{cursor:pointer}
.ellipsis{min-width:0;max-width:208px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gap-8{gap:var(--s-2)}
.mt-4{margin-top:var(--s-1)} .mt-8{margin-top:var(--s-2)} .mt-12{margin-top:var(--s-3)} .mt-16{margin-top:var(--s-4)}
.mb-4{margin-bottom:var(--s-1)} .mb-8{margin-bottom:var(--s-2)} .mb-12{margin-bottom:var(--s-3)} .mb-16{margin-bottom:var(--s-4)}
.ml-8{margin-left:var(--s-2)}
.pad-y-8{padding:var(--s-2) 0} .pad-y-12{padding:var(--s-3) 0}

/* ============================== responsive ============================== */
@media (max-width:900px){
  .app,.app.detail-open,.app.sb-collapsed{grid-template-columns:minmax(0,1fr)}
  .resizer{display:none}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:58;width:min(284px,84vw);visibility:visible;
    transform:translateX(-100%);transition:transform 200ms var(--ease);box-shadow:var(--elev)}
  .app.drawer .sidebar{transform:none}
  .app.sb-collapsed .sidebar{visibility:visible}
  .drawer-scrim{position:fixed;inset:0;z-index:57;background:var(--scrim);animation:fade var(--dur) var(--ease)}
  .detail{position:fixed;top:0;right:0;bottom:0;z-index:55;width:min(416px,100vw);box-shadow:var(--elev)}
  .topbar{padding:0 var(--s-3)}
  .page{padding:var(--s-5) var(--s-4) 160px}
  .board{padding:var(--s-4)}
  .week-grid{flex-direction:column}
  .week-chart{flex:none;width:100%}
  .field-row{grid-template-columns:1fr}
  /* card actions drop beneath the title instead of squeezing it */
  .card2 .c2h{flex-wrap:wrap}
  .card2 .c2h > .spacer{flex-basis:100%;height:0}
  .score{flex-wrap:wrap}
}
@media (min-width:901px){.drawer-scrim{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
}

/* ============================== calendar block editing ============================== */
.blk{user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}
.blk .bt,.blk .bm{pointer-events:none}
.blk-h{position:absolute;left:0;right:0;z-index:2;height:6px;cursor:ns-resize}
.blk-h.top{top:0}
.blk-h.bot{bottom:0}
.blk.short .blk-h{height:4px}
/* a quiet grip line appears on hover so the edges read as handles */
.blk-h::after{content:"";position:absolute;left:50%;width:16px;height:2px;margin-left:-8px;border-radius:1px;
  background:var(--ink-3);opacity:0;transition:opacity var(--dur) var(--ease)}
.blk-h.top::after{top:2px}
.blk-h.bot::after{bottom:2px}
.blk:hover .blk-h::after{opacity:.5}
.blk-h:hover::after{opacity:1}
.blk.short .blk-h::after{display:none}
.blk.dragging,.blk.dragging.p1,.blk.dragging.p2,.blk.dragging.p3{z-index:20;cursor:grabbing;background:var(--block-hover);
  box-shadow:inset 2px 0 0 var(--accent),0 0 0 1px var(--accent-line),var(--elev)}
.blk.dragging .bm{color:var(--ink-2)}
body.cal-drag,body.cal-drag *{user-select:none!important;-webkit-user-select:none!important}
body.cal-drag-move,body.cal-drag-move *{cursor:grabbing!important}
body.cal-drag-resize,body.cal-drag-resize *{cursor:ns-resize!important}
body.cal-drag .cal-cell:hover{box-shadow:none}
.check-list{display:flex;flex-direction:column;gap:var(--s-2)}