/* ============================================================
   Spreadbox · Build flow v2 — styles
   Azure product palette (#007FFF). Timeline/bar UI elements
   ported verbatim from "testing-flow-3 copy".
   ============================================================ */

:root{
  --paper:#FAFBFD; --surface:#FFFFFF; --side:#FFFFFF; --side-2:#F8FAFC;
  --ink:#1E293B; --ink-2:#64748B; --ink-3:#94A3B8;
  --line:#E6E8EC; --line-2:#E2E8F0;
  --nav-ink:#475467; --nav-active:#eef0f4;
  --accent:#007FFF; --accent-d:#0066CC; --accent-sf:#E6F2FF;
  /* status */
  --todo:#94A3B8; --doing:#007FFF; --review:#8B5CF6; --done:#10B981; --reopen:#EF4444;
  --todo-bg:#F1F5F9; --doing-bg:#E6F2FF; --review-bg:#F5F3FF; --done-bg:#ECFDF5; --reopen-bg:#FEF2F2;
  --r:12px; --r-s:8px;
  --sh:0 1px 2px 0 rgba(0,0,0,.04);
  --sh-m:0 4px 6px -1px rgba(0,0,0,.05),0 2px 4px -1px rgba(0,0,0,.03);
  --sh-lg:0 12px 28px -10px rgba(15,23,42,.22);
  --ease:cubic-bezier(.4,0,.2,1);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* day geometry (minutes): 8:00–20:00 window, office 9–18:30, lunch 13:30–14:30, now 2 PM */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;letter-spacing:-.006em;font-size:14px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-sf)}
/* global icon safety net — bare inline SVGs never balloon */
svg{display:inline-block;vertical-align:middle;width:18px;height:18px;flex:none}

.app{display:flex;min-height:100vh}

/* ---------------- SIDEBAR ---------------- */
.rail{width:236px;flex:0 0 236px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 16px}
.sb-logo{width:30px;height:30px;border-radius:8px;background:#fff url('/logo.png') center/cover no-repeat!important;border:1px solid rgba(15,23,42,.08);box-shadow:0 1px 3px rgba(15,23,42,.06);flex:none;font-size:0;color:transparent}
.sb-brand b{font-weight:750;font-size:15px;letter-spacing:-.2px}
.sb-beta{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:4px;background:var(--accent);color:#fff;font-weight:700;font-size:9px;letter-spacing:.25px;text-transform:uppercase}
.sb-nav{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.sb-item{height:42px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:14px;color:var(--nav-ink);font-size:14px;font-weight:550;width:100%;text-align:left;transition:background .12s,color .12s}
.sb-item:hover{background:var(--side-2)}
.sb-item.on{background:var(--nav-active);color:var(--ink);font-weight:650}
.sb-item.on svg{color:var(--accent)}
.sb-item svg{width:19px;height:19px;color:var(--ink-3)}
.sb-item .ct{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3)}
.sb-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:12px}
.sb-team{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px}
.sb-team:hover{background:var(--side-2)}
.sb-team b{font-size:13px;font-weight:650}.sb-team span{font-size:11px;color:var(--ink-3)}

/* ---------------- TOP BAR (product replica) ---------------- */
.shell{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:65px;display:flex;align-items:center;gap:8px;padding:0 15px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.tb-left{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.tb-ico-round{width:36px;height:36px;flex:none;border-radius:50%;background:rgba(120,120,128,.12);color:#64748B;display:grid;place-items:center}
.tb-ico-round:hover{background:rgba(120,120,128,.2)}
.tb-ico-round svg{width:18px;height:18px}
.tb-banner{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:42px;background:#F0F3FF;color:#007FFF;font-size:12.5px;font-weight:600;max-width:330px;overflow:hidden;white-space:nowrap}
.tb-banner svg{width:15px;height:15px}
.tb-banner b{font-weight:750}
.tb-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-clock{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:42px;background:var(--accent);color:#fff;font-size:13px;font-weight:650}
.tb-clock.run{background:#0F172A}
.tb-clock .dot{width:8px;height:8px;border-radius:50%;background:#22C55E}
.tb-clock svg{width:15px;height:15px}
.tb-ask{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 15px;border-radius:42px;color:#fff;font-size:14px;font-weight:550;background:linear-gradient(90deg,#a855f7,#6366f1);box-shadow:var(--sh-m)}
.tb-ask .sp{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.tb-ask svg{width:14px;height:14px}
.tb-tools{display:flex;align-items:center;gap:8px;padding:0 6px}
.tb-tool{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;color:#64748B}
.tb-tool:hover{background:#F8FAFC;color:var(--accent)}
.tb-tool svg{width:19px;height:19px}
.tb-bell{position:relative;width:34px;height:34px;border-radius:14px;display:grid;place-items:center;color:#64748B}
.tb-bell:hover{background:#F8FAFC;color:var(--accent)}
.tb-bell svg{width:19px;height:19px}
.tb-bell .n{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;border-radius:50%;background:#EF4444;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;box-shadow:0 0 0 2px #fff}
.tb-prof{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:14px}
.tb-prof:hover{background:#F8FAFC}
.tb-prof svg{width:15px;height:15px;color:#94A3B8}

/* ---------------- MAIN / PAGE ---------------- */
.main{flex:1;min-width:0;overflow-x:hidden}
.page{padding:22px 28px 60px;max-width:1320px;width:100%}
.page.wide{max-width:1560px}
.page-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.page-head .htxt h1{margin:0;font-size:22px;font-weight:750;letter-spacing:-.5px}
.page-head .htxt p{margin:3px 0 0;color:var(--ink-3);font-size:13px}
.page-head .spacer{flex:1}
.crumbs{display:flex;align-items:center;gap:3px;margin-bottom:16px;font-size:13px;font-weight:600;flex-wrap:wrap}
.crumbs a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);padding:3px 8px;border-radius:7px;transition:background .12s,color .12s;white-space:nowrap}
.crumbs a:hover{background:var(--accent-sf);color:var(--accent-d)}
.crumbs a .cr-ic{display:inline-grid;place-items:center;color:var(--ink-3)}.crumbs a .cr-ic svg{width:14px;height:14px}
.crumbs > span:not(.cur){display:inline-flex;color:var(--ink-3);padding:3px 2px}
.crumbs .sep{display:inline-flex;align-items:center;color:var(--ink-3);padding:0}.crumbs .sep svg{width:13px;height:13px;opacity:.45}
.crumbs .cur{color:var(--ink);font-weight:750;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:440px}
.sec-label{font-size:11px;font-weight:750;letter-spacing:.6px;color:var(--ink-3);text-transform:uppercase;margin:0 0 10px}
.empty{padding:36px;text-align:center;color:var(--ink-3)}
.muted-line{font-size:12.5px;color:var(--ink-3);padding:6px 2px}

/* avatars */
.av{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px}
.av.sm{width:22px;height:22px;font-size:9.5px}
.av.lg{width:44px;height:44px;font-size:16px}
.av-stack{display:flex}.av-stack .av{margin-left:-7px;box-shadow:0 0 0 2px #fff}.av-stack .av:first-child{margin-left:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-weight:600;font-size:13px;box-shadow:var(--sh)}
.btn:hover{border-color:#cfd4de;background:#fbfbfd}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(0,127,255,.28)}
.btn.primary:hover{background:var(--accent-d)}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:#f0f1f5}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:9px}
.btn.ico{padding:8px;gap:0}
.btn.ico svg{width:16px;height:16px}
.auto-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;color:var(--accent);background:var(--accent-sf);font-weight:700;font-size:11px}
.auto-btn:hover{filter:brightness(.97)}.auto-btn svg{width:12px;height:12px}

/* cards + grid */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(2,1fr)}}

/* status pills + dots */
.sdot{width:9px;height:9px;border-radius:50%;flex:none}
.s-todo{background:var(--todo)} .s-doing{background:var(--doing)} .s-review{background:var(--review)} .s-done{background:var(--done)} .s-hold{background:#F59E0B} .s-reopened{background:var(--reopen)}
.spill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:650;line-height:1}
.spill.todo{background:var(--todo-bg);color:#5b6677} .spill.doing{background:var(--doing-bg);color:var(--accent-d)} .spill.review{background:var(--review-bg);color:#6d28d9} .spill.done{background:var(--done-bg);color:#047857} .spill.reopened{background:var(--reopen-bg);color:#b91c1c}
.pstat{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:650}
.pstat .dot{width:6px;height:6px;border-radius:50%}
.pstat.ok{background:#ecfdf5;color:#0f8a4d}.pstat.ok .dot{background:#10b981}
.pstat.warn{background:#fff7ed;color:#c2710c}.pstat.warn .dot{background:#f59e0b}
.pstat.bad{background:#fef2f2;color:#c93636}.pstat.bad .dot{background:#ef4444}
.pstat.done{background:#eef2ff;color:#4f46e5}.pstat.done .dot{background:#6366f1}
/* stage progress panel */
.stp-card{padding:16px 18px}
.stp-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stp-steps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.stp{display:inline-flex;align-items:center;gap:7px}
.stp-no{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:800;background:#f1f5f9;color:var(--ink-3)}
.stp-no svg{width:12px;height:12px}
.stp-nm{font-size:12.5px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.stp.cur .stp-no{background:var(--accent);color:#fff}
.stp.cur .stp-nm{color:var(--ink);font-weight:750}
.stp.done .stp-no{background:#10b981;color:#fff}
.stp.done .stp-nm{color:var(--ink-2)}
.stp-line{flex:0 0 18px;height:2px;background:var(--line)}
.stp-bot{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);flex-wrap:wrap}
.stp-lbl{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.stp-stat{font-size:12px;font-weight:650;color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;cursor:pointer;background:#fff}
.stp-stat:hover{border-color:#cfd4de}
.stp-stat.ok.on{background:#ecfdf5;color:#0f8a4d;border-color:#a7f3d0}
.stp-stat.warn.on{background:#fff7ed;color:#c2710c;border-color:#fed7aa}
.stp-stat.bad.on{background:#fef2f2;color:#c93636;border-color:#fecaca}
.stp-complete{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:750;color:#4f46e5}
.stp-complete svg{width:15px;height:15px}
.stp-pct{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.ms-chip.ms-done{background:#ecfdf5;border-color:#a7f3d0}

/* persona / segmented tabs */
.seg{display:inline-flex;background:#eef0f3;border-radius:11px;padding:3px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:9px;font-weight:600;font-size:13px;color:var(--ink-2)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh)}

/* ============================================================
   TIMELINE / DAY-SCHEDULE BARS — ported from testing-flow-3 copy
   ============================================================ */
.tl-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.tl-legend{display:flex;gap:16px;font-size:12px;color:var(--ink-2);margin-left:auto;align-items:center}
.tl-legend i{width:15px;height:11px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.lg-cur{background:var(--accent)} .lg-mtg{background:#475569} .lg-done{background:var(--done-bg);border:1px solid #A7F3D0} .lg-free{background:#fff;border:1px dashed var(--line-2)}
.lg-now i{width:2px;height:12px;background:var(--reopen)}

.daycard{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh)}
.od-nav{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.od-arrow{width:30px;height:30px;display:inline-grid;place-items:center;border:1px solid var(--line-2);border-radius:9px;background:#fff;color:var(--ink-2);cursor:pointer;box-shadow:var(--sh)}
.od-arrow:hover{background:var(--paper);color:var(--ink);border-color:#cfd4de}
.od-arrow svg{width:15px;height:15px}
.od-nav-lbl{font-size:14px;font-weight:750;color:var(--ink);min-width:150px;text-align:center}
.od-today-btn{font-size:12px;font-weight:650;color:var(--accent-d);background:var(--accent-sf);border-radius:8px;padding:6px 11px;cursor:pointer}
.od-today-btn:hover{background:#d8e9ff}
.oneday{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh);margin-top:4px}
.od-group{border-bottom:1px solid var(--line)}
.od-group:last-child{border-bottom:0}
.od-phead{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--side-2)}
.od-phead b{font-size:13px;font-weight:700;color:var(--ink)}
.od-phead .pj-mono{width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:10px;font-weight:800}
.od-pcount{margin-left:auto;font-size:11px;color:var(--ink-3);font-weight:600}
.dayrow{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.dayrow:last-child{border-bottom:0}
.dayrow:hover{background:#fcfdff}
.dayrow.head{background:#fbfbfd}
.dayrow-lane{flex:0 0 250px;border-right:1px solid var(--line);padding:11px 14px;display:flex;align-items:center;gap:10px}
.dayrow-lane .who{min-width:0;flex:1}
.dayrow-lane .who .nm{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dayrow-lane .who .nm a:hover{color:var(--accent)}
.dayrow-lane .who .sub{font-size:11px;color:var(--ink-3);margin-top:1px}
.dayrow-lane .who .sub b{color:var(--accent);font-weight:700}
.tl-load{font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:5px;margin-left:4px}
/* In the person row header the pill is now a flex child of .tl-rh itself (the
   stats line it used to trail is gone), so it must not be squeezed by the name. */
.tl-rh>.tl-load{flex-shrink:0;margin-left:0;cursor:default}
.tl-load.lv-free{background:#E6F2FF;color:#0066CC}.tl-load.lv-some{background:#CCE4FF;color:#0066CC}
.tl-load.lv-busy{background:var(--accent);color:#fff}.tl-load.lv-full{background:var(--reopen);color:#fff}

/* axis header */
.dayrow.head .dayrow-lane{font-size:11px;font-weight:750;letter-spacing:.5px;color:var(--ink-3);text-transform:uppercase}
.dayaxis{position:relative;flex:1;height:42px;margin-right:12px}
.dayaxis .ax-tick{position:absolute;bottom:7px;transform:translateX(-50%);font-size:11px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.dayaxis .today-pill{position:absolute;top:7px;left:10px;background:#eef1ff;color:var(--accent-d);font-size:11px;font-weight:700;padding:3px 10px;border-radius:7px}

/* the day track (full width single day) — surface like tf3 .scol */
.daytrack{position:relative;flex:1;min-width:0;align-self:center;height:54px;margin:7px 12px 7px 0;border-radius:6px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.daytrack.today{box-shadow:inset 0 0 0 1px var(--accent)}
/* the day-row lane carries the same plan-over-activity split as the timeline */
.daytrack:has(.act-ch) .blk{bottom:42%}
.daytrack:has(.act-ch) .free{bottom:42%}
.daytrack:has(.act-ch) .rem-pin.on-dt{top:29%;margin-top:0}
.off{position:absolute;top:0;bottom:0;background:rgba(15,23,42,.05);z-index:0}
.tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(15,23,42,.06);z-index:1}
.hr{position:absolute;top:2px;font-size:9px;font-weight:600;color:var(--ink-3);padding-left:3px;z-index:1}
.lun{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,#eeece6,#eeece6 3px,#f7f5f0 3px,#f7f5f0 6px);z-index:0}
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--reopen);opacity:.5;z-index:3}
.blk{position:absolute;top:5px;bottom:5px;border-radius:5px;display:flex;align-items:center;padding:0 7px;overflow:hidden;z-index:2}
.blk.own{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);cursor:pointer}
.blk.own:hover{filter:brightness(1.07)}
.blk.meeting{background:repeating-linear-gradient(45deg,#475569,#475569 7px,#3f4a5e 7px,#3f4a5e 14px);cursor:pointer}
.blk.meeting .blk-mi{width:13px;height:13px;color:#fff;margin-right:5px;flex:none}
.blk .bl{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.buf{position:absolute;top:6px;bottom:6px;border-radius:2px;background:repeating-linear-gradient(45deg,rgba(15,23,42,.13),rgba(15,23,42,.13) 2px,transparent 2px,transparent 4px);z-index:2}
.free{position:absolute;top:5px;bottom:5px;border-radius:5px;cursor:pointer;z-index:2}
.free:hover{background:rgba(0,127,255,.14);box-shadow:inset 0 0 0 1px var(--accent)}
.free-lab{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:var(--accent-d);white-space:nowrap;pointer-events:none;opacity:.85}
.dayrow-free{align-self:center;flex:0 0 86px;text-align:right;padding-right:14px;font-size:11.5px;color:var(--ink-3);font-weight:650}

/* project sub-lane grouping */
.daygroup{display:flex;align-items:center;border-bottom:1px solid var(--line);background:#fbfbfd;padding:9px 14px;gap:10px}
.daygroup .pc-code{width:32px;height:32px;border-radius:9px;color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.daygroup .gname{font-weight:700;font-size:13.5px}
.daygroup .gsub{font-size:11px;color:var(--ink-3)}

/* ============================================================
   TASKS TABLE (spreadsheet)
   ============================================================ */
.filter-sel select{padding:8px 12px;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:13px;font-weight:600;background:#fff;box-shadow:var(--sh)}
.tbl-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{text-align:left;font-size:10.5px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);padding:11px 12px;background:#fbfbfd;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tbody td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr.trow{cursor:pointer}
.tbl tbody tr.trow:hover{background:#f7faff}
.tbl .c-dot{width:34px;text-align:center}
.tbl .c-h{width:78px}
.tbl .c-go{width:40px;text-align:center}
.t-name{font-weight:650;font-size:13.5px;color:var(--ink)}
.t-desc{font-size:11.5px;color:var(--ink-3);margin-top:2px;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-mtg{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#475569;background:#eef1f5;border-radius:5px;padding:1px 6px;margin-right:6px}
.cellchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2)}
.code-dot{display:inline-block;width:8px;height:8px;border-radius:3px}
.flow-tag{display:inline-flex;align-items:center;gap:5px;background:var(--accent-sf);color:var(--accent-d);border-radius:7px;padding:3px 8px;font-size:11px;font-weight:650}
.flow-tag svg{width:12px;height:12px}
.hrs-in{width:60px;border:1px solid transparent;background:transparent;border-radius:7px;padding:6px 8px;font:inherit;font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.hrs-in:hover{border-color:var(--line-2);background:#fff}
.hrs-in:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(0,127,255,.12)}
.row-go{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.row-go:hover{background:#eef0f4;color:var(--accent)}.row-go svg{width:15px;height:15px}
.dead{font-size:12px;color:var(--ink-2);font-weight:600;white-space:nowrap}
.dead.over{color:var(--reopen)}
.add-row td{background:#fbfbfd}
.add-inline{display:inline-flex;align-items:center;gap:6px;color:var(--accent-d);font-weight:650;font-size:12.5px;padding:4px 0}
.add-inline:hover{text-decoration:underline}.add-inline svg{width:14px;height:14px}

/* ============================================================
   FULL-PAGE TASK VIEW
   ============================================================ */
.taskpage{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
@media(max-width:1100px){.taskpage{grid-template-columns:1fr}}
.tp-main .tp-title{font-size:25px;font-weight:760;letter-spacing:-.5px;margin:6px 0 12px;line-height:1.2}
.tp-statusrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.tp-advance{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;background:var(--accent);color:#fff;font-weight:650;font-size:13px;box-shadow:0 6px 16px rgba(0,127,255,.26)}
.tp-advance svg{width:15px;height:15px}
.tp-advance.done{background:var(--done)}
.tp-advance.review{background:var(--review)}
.tp-advance.reopen{background:var(--reopen)}
.desc-card{padding:20px 22px}
.desc-card .sec-label{margin-bottom:10px}
.desc-body{font-size:14.5px;line-height:1.65;color:#33405a;white-space:pre-wrap}
.tp-sub{margin-top:20px}
.tp-disc{margin-top:18px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}
.tp-disc summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:650;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.tp-disc summary::-webkit-details-marker{display:none}
.tp-disc summary .ct{margin-left:auto;font-size:11px;color:var(--ink-3)}
.tp-disc .disc-body{padding:4px 16px 16px}
.chat-msg{display:flex;align-items:flex-end;gap:8px;margin-bottom:9px}
.chat-msg.me{flex-direction:row-reverse}
.chat-msg .bubble{background:#eef1f5;border-radius:13px;padding:8px 12px;font-size:13px;max-width:80%;line-height:1.45}
.chat-msg.me .bubble{background:var(--accent);color:#fff}
.chat-in{display:flex;gap:8px;margin-top:6px}
.chat-in input{flex:1;padding:9px 12px;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:13px}
.chat-in input:focus{outline:none;border-color:var(--accent)}
.chat-scroll{max-height:300px;overflow-y:auto;margin-bottom:6px;display:flex;flex-direction:column}
.chat-who{display:block;font-size:10.5px;font-weight:700;color:var(--ink-3);margin-bottom:2px}
.chat-msg .chat-t{display:block;font-size:9.5px;color:var(--ink-3);margin-top:3px;opacity:.85}
.chat-msg.me .chat-t{color:rgba(255,255,255,.8)}
.chat-empty{font-size:12.5px;color:var(--ink-3);text-align:center;padding:18px 0}
/* global search */
.srch{width:min(560px,92vw)}
.srch-in{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.srch-in svg{width:18px;height:18px;color:var(--ink-3)}
.srch-in input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:transparent}
.srch-res{max-height:420px;overflow-y:auto;padding:8px}
.srch-sec{font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 4px}
.srch-r{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;cursor:pointer;text-align:left}
.srch-r:hover{background:var(--accent-sf)}
.srch-r .pj-mono{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;font-size:10px;font-weight:800}
.srch-r .sdot{width:9px;height:9px;border-radius:50%;flex:none}
.srch-nm{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-sub{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap;flex:none}
.srch-empty{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:13px}
/* top-bar menus + notifications */
.menu-pop{width:240px;padding:6px}
.menu-pop .mp-h{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding:8px 10px 6px}
.menu-pop .mp-h svg{width:14px;height:14px}
.mp-i{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:9px 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.mp-i:hover{background:var(--paper)}
.mp-i>svg{width:15px;height:15px;flex:none;color:var(--ink-3)}
.mp-i.danger{color:var(--reopen)}
.mp-tip{font-size:12.5px;color:var(--ink-2);padding:6px 10px;line-height:1.4}
.mp-prof{display:flex;align-items:center;gap:9px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.mp-nm{font-size:13.5px;font-weight:700}.mp-sub{font-size:11.5px;color:var(--ink-3)}
.ask-pop{width:280px}.ask-pop .mp-body{font-size:12.5px;color:var(--ink-2);line-height:1.5;padding:4px 10px 10px}
.np{width:330px;padding:6px}
.np-h{font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;padding:9px 10px 6px}
.np-i{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border-radius:8px}
.np-i:hover{background:var(--paper)}
.np-t{font-size:12.5px;color:var(--ink);line-height:1.4}
.np-time{font-size:11px;color:var(--ink-3);margin-top:1px}

/* onboarding wizard */
#onb[hidden]{display:none}
.onb-scrim{position:fixed;inset:0;z-index:80;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.onb-card{width:min(560px,100%);background:#fff;border-radius:20px;box-shadow:0 30px 90px rgba(15,23,42,.35);overflow:hidden;animation:onbIn .18s ease both}
@keyframes onbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.onb-top{display:flex;align-items:center;gap:10px;padding:16px 20px 0}
.onb-top .sb-logo{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800}
.onb-step{font-size:12px;font-weight:650;color:var(--ink-3)}
.onb-x{margin-left:auto;width:28px;height:28px;border-radius:8px;color:var(--ink-3);font-size:13px}
.onb-x:hover{background:var(--paper);color:var(--ink)}
.onb-dots{display:flex;gap:6px;padding:14px 22px 2px}
.onb-dot{height:5px;flex:1;border-radius:3px;background:var(--line)}
.onb-dot.on{background:var(--accent)}.onb-dot.done{background:#a7c8f5}
.onb-body{padding:14px 24px 8px;min-height:230px}
.onb-body h2{margin:6px 0 6px;font-size:21px;font-weight:780;letter-spacing:-.4px}
.onb-sub{margin:0 0 18px;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.onb-l{display:block;font-size:12px;font-weight:650;color:var(--ink-2);margin:0 0 7px}
.onb-in{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;font:inherit;font-size:15px;background:#fff;margin-bottom:10px}
.onb-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,127,255,.12)}
.onb-invites,.onb-stages{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.onb-inv{display:flex;gap:8px;align-items:center}.onb-inv .onb-in{margin:0;flex:1}.onb-inv select.onb-in{flex:0 0 165px}
.onb-stage{display:flex;gap:9px;align-items:center}.onb-stage .onb-in{margin:0;flex:1}
.onb-stage-no{width:24px;height:24px;border-radius:50%;background:var(--accent-sf);color:var(--accent-d);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.onb-grip{flex:none;cursor:grab;color:var(--ink-3);font-size:15px;line-height:1;padding:2px;user-select:none}
.onb-grip:active{cursor:grabbing}
.onb-cdot{width:11px;height:11px;border-radius:50%;flex:none}
.onb-stage{padding:3px;border-radius:10px;transition:background .12s,box-shadow .12s}
.onb-stage:hover{background:var(--side-2)}
.onb-stage.dragging{opacity:.4;background:var(--accent-sf);box-shadow:0 6px 18px rgba(15,23,42,.18)}
.onb-stage.drop-above{box-shadow:inset 0 3px 0 -1px var(--accent)}
.onb-stage.drop-below{box-shadow:inset 0 -3px 0 -1px var(--accent)}
.onb-grip:hover{color:var(--accent)}
.onb-break{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.onb-break-l{display:inline-grid;place-items:center;color:var(--ink-3)}.onb-break-l svg{width:15px;height:15px}
.onb-break-to{font-size:12px;color:var(--ink-3)}
.onb-break input[type=time]{border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;font:inherit;font-size:13px;background:#fff}
.onb-add{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;color:var(--accent-d);background:var(--accent-sf);border-radius:9px;padding:8px 12px}
.onb-add svg{width:14px;height:14px}
.onb-hint{font-size:13px;color:var(--ink-3)}
.onb-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600}
.onb-tstages{display:flex;flex-direction:column;gap:9px}
.onb-tstage{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;font-weight:600}
.onb-tstage .sdot{width:11px;height:11px;border-radius:50%}
.onb-summary{display:flex;gap:12px}
.onb-summary>div{flex:1;background:var(--side-2);border:1px solid var(--line);border-radius:13px;padding:16px;text-align:center}
.onb-summary b{display:block;font-size:22px;font-weight:800;color:var(--accent-d)}
.onb-summary span{font-size:12px;color:var(--ink-3)}
.onb-foot{display:flex;align-items:center;gap:10px;padding:8px 22px 22px}
@media(max-width:520px){.onb-summary{flex-direction:column}.onb-inv select.onb-in{flex:0 0 120px}}
/* side rail */
.tp-side .card{padding:16px 18px;margin-bottom:14px}
.tp-kv{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.tp-kv:last-child{border-bottom:0}
.tp-kv .k{font-size:11px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px;width:96px;flex:none}
.tp-kv .v{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;flex:1}
.tp-edit{border:1px solid transparent;background:transparent;border-radius:7px;padding:5px 7px;font:inherit;font-size:13px;font-weight:600;width:100%}
.tp-edit:hover{border-color:var(--line-2);background:#fff}.tp-edit:focus{outline:none;border-color:var(--accent);background:#fff}
.pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pa{border:1px solid var(--line);border-radius:11px;padding:12px}
.pa .lab{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3)}
.pa .tm{font-size:14px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
.pa.actual{background:var(--accent-sf);border-color:#cfe4ff}
.pa.inprog{background:#fff7ed;border-color:#fed7aa}
.pa.inprog .tm{color:#c2710c}

/* ============================================================
   PROJECTS — cards + stage stepper + kanban (no accordion)
   ============================================================ */
.proj-card{padding:0;overflow:hidden;cursor:pointer;transition:.12s;border-radius:14px}
.proj-card:hover{border-color:#bcd6ff;box-shadow:var(--sh-lg);transform:translateY(-2px)}
.pc-top{padding:16px 16px 14px;display:flex;align-items:flex-start;gap:12px}
.pc-code{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:none}
.pc-nm{font-weight:750;font-size:16px;letter-spacing:-.3px}
.pc-cl{font-size:12px;color:var(--ink-3);margin-top:2px}
.pc-meta{padding:0 16px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pc-meta .k{font-size:10px;color:var(--ink-3);font-weight:650;text-transform:uppercase;letter-spacing:.4px}
.pc-meta .v{font-size:13px;font-weight:600;margin-top:2px}
.pc-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:#fbfbfd}
.pc-foot .spacer{flex:1}

/* stage stepper */
.stepper{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px}
.step{flex:1;min-width:170px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;position:relative}
.step.cur{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,127,255,.08)}
.step.done{background:#fbfffd;border-color:#bbf0d4}
.step .st-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.step .st-no{width:20px;height:20px;border-radius:50%;background:var(--todo-bg);color:var(--ink-3);font-size:11px;font-weight:700;display:grid;place-items:center}
.step.cur .st-no{background:var(--accent);color:#fff}
.step.done .st-no{background:var(--done);color:#fff}
.step .st-nm{font-weight:700;font-size:13.5px}
.step .st-prog{height:5px;border-radius:999px;background:#eef0f4;overflow:hidden;margin:4px 0 9px}
.step .st-prog i{display:block;height:100%;background:var(--accent)}
.step.done .st-prog i{background:var(--done)}
.ms-chips{display:flex;flex-wrap:wrap;gap:6px}
.ms-chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:4px 8px;font-size:11px;font-weight:600;color:var(--ink-2)}
.ms-chip svg{width:12px;height:12px;color:var(--ink-3)}
.ms-chip b{color:var(--ink);font-weight:700}
.ms-chip .x{color:var(--ink-3);font-size:14px;line-height:1;padding:0 0 0 1px}.ms-chip .x:hover{color:var(--reopen)}
.ms-chip.add{border-style:dashed;color:var(--accent-d);background:#f5faff}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:14px;overflow-x:auto;padding-bottom:8px}
@media(max-width:1280px){.kanban{grid-template-columns:repeat(5,260px)}}
.kcol{background:#f6f8fb;border:1px solid var(--line);border-radius:13px;display:flex;flex-direction:column;min-height:120px}
.kcol-h{display:flex;align-items:center;gap:8px;padding:11px 13px;font-size:12.5px;font-weight:700}
.kcol-h .cn{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);background:#fff;border-radius:999px;padding:1px 8px}
.kcol-b{padding:0 9px 10px;display:flex;flex-direction:column;gap:9px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer;box-shadow:var(--sh);transition:.1s}
.kcard:hover{border-color:#bcd6ff;box-shadow:var(--sh-m);transform:translateY(-1px)}
.kcard .kt{font-weight:650;font-size:13px;line-height:1.35}
.kcard .kd{font-size:11.5px;color:var(--ink-3);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.kcard .kf{display:flex;align-items:center;gap:8px;margin-top:10px}
.kcard .kf .kh{font-size:11px;color:var(--ink-3);font-weight:650}
.kcard .kf .spacer{flex:1}
.kadd{display:flex;align-items:center;gap:6px;justify-content:center;padding:9px;border:1px dashed var(--line-2);border-radius:10px;color:var(--ink-3);font-size:12px;font-weight:600;margin:0 9px 10px}
.kadd:hover{border-color:var(--accent);color:var(--accent)}

/* tabs (project detail / settings) */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tabs button{border:0;background:transparent;padding:10px 14px;font-weight:600;font-size:13.5px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}

/* overview grid */
.ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-bottom:18px}
.ov-grid .o{background:#fff;padding:15px}
.ov-grid .o .k{font-size:10px;color:var(--ink-3);font-weight:650;text-transform:uppercase;letter-spacing:.4px}
.ov-grid .o .v{font-size:15px;font-weight:650;margin-top:5px}

/* ============================================================
   FLOWS — list + canvas (fixed)
   ============================================================ */
.flow-card{padding:16px;cursor:pointer;transition:.12s;border-radius:14px}
.flow-card:hover{border-color:#bcd6ff;box-shadow:var(--sh-lg);transform:translateY(-2px)}
.fc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.flow-ic{width:34px;height:34px;flex:none;border-radius:10px;background:var(--accent-sf);color:var(--accent-d);display:grid;place-items:center}
.flow-ic svg{width:18px;height:18px}.flow-ic.lg{width:44px;height:44px;border-radius:12px}.flow-ic.lg svg{width:22px;height:22px}
.fc-nm{font-weight:700;font-size:15px}.fc-sub{font-size:12px;color:var(--ink-3)}
.fc-seq{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.seq-pill{background:#f1f5f9;border-radius:8px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.seq-arrow svg{width:14px;height:14px;color:var(--ink-3)}
.flow-canvas{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;padding:22px;border:1px dashed var(--line-2);border-radius:16px;background:repeating-linear-gradient(45deg,#fbfbfd 0 16px,#f6f8fb 16px 32px);min-height:160px}
.flow-node{width:230px;background:#fff;border-radius:13px;box-shadow:var(--sh-m);border:1px solid var(--line);overflow:hidden;position:relative}
.flow-node::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}
.fn-head{display:flex;align-items:center;padding:9px 12px 4px;gap:7px}
.fn-stage{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-3)}
.fn-move{margin-left:auto;display:flex;gap:3px}
.fn-move button{width:22px;height:22px;border:1px solid var(--line-2);background:#fff;border-radius:6px;display:grid;place-items:center;color:var(--ink-3)}
.fn-move button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.fn-move button:disabled{opacity:.35}.fn-move button svg{width:12px;height:12px}
.fn-name{padding:0 12px 9px;font-weight:700;font-size:13.5px;line-height:1.3}
.fn-foot{display:flex;align-items:center;gap:7px;padding:9px 12px;border-top:1px solid var(--line);background:#fbfbfd}
.fn-who{font-size:12px;color:var(--ink-2);font-weight:600}.fn-h{font-size:11.5px;color:var(--ink-3);font-weight:650}
.fn-rm{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--ink-3)}
.fn-rm:hover{background:var(--reopen-bg);color:var(--reopen)}.fn-rm svg{width:14px;height:14px}
.canvas-arrow{display:flex;align-items:center;color:#c2cad6;padding:0 8px;align-self:center}.canvas-arrow svg{width:24px;height:24px}
.add-pick{display:flex;flex-wrap:wrap;gap:9px}
.pick-pill{display:inline-flex;align-items:center;gap:7px;border:1px dashed #b9d4ff;background:#f5faff;color:var(--accent-d);border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:650}
.pick-pill:hover{filter:brightness(.98)}.pick-pill svg{width:13px;height:13px}
.pp-stage{color:var(--ink-3);font-weight:600;font-size:11px}

/* ============================================================
   ANALYTICS — KPI cards + colored calendar heatmap + bars
   ============================================================ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:1180px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px;box-shadow:var(--sh)}
.kpi .top{display:flex;align-items:center;justify-content:space-between}
.kpi .lab{font-size:10.5px;font-weight:650;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.kpi .acc{width:8px;height:8px;border-radius:50%}
.kpi .val{font-size:24px;font-weight:780;margin-top:8px;letter-spacing:-.5px}
.kpi .hint{font-size:11.5px;color:var(--ink-3);margin-top:2px}

.hm-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.period{display:inline-flex;align-items:center;gap:8px;height:34px;background:#EEF0F2;border-radius:9px;padding:0 12px;font-size:13px;font-weight:600;color:#123362}
.period svg{width:15px;height:15px;color:#64748B}
.navbtns{display:inline-flex;align-items:center;background:#EEF0F2;border-radius:9px;height:34px;padding:0 3px}
.navbtns button{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:#64748B}
.navbtns button:hover{background:#fff}.navbtns svg{width:15px;height:15px}

.hm{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh);padding:16px;overflow-x:auto}
.hm-grid{display:grid;gap:4px;min-width:max-content}
.hm-head{font-size:9px;font-weight:650;text-transform:uppercase;text-align:center;color:var(--ink-3)}
.hm-head.we{color:#cbd5e1}
.hm-head .d{display:block;font-size:10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hm-rowlab{display:flex;align-items:center;gap:8px;min-width:0;padding-right:8px}
.hm-rowlab .nm{font-size:12.5px;font-weight:600;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-rowlab .sub{font-size:10px;color:var(--ink-3)}
.hm-cell{height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;background:#F1F5F9}
.hm-cell.hot{color:#fff}.hm-cell.cool{color:#334155}
.hm-cell:hover{box-shadow:inset 0 0 0 2px rgba(0,127,255,.4)}
.hm-legend{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:10.5px;color:var(--ink-3)}
.hm-legend .sw{width:18px;height:11px;border-radius:3px}

.bar-row{display:flex;align-items:center;gap:14px;padding:9px 0}
.bar-track{flex:1;height:12px;border-radius:999px;background:#eef0f4;overflow:hidden}
.bar-track i{display:block;height:100%;border-radius:999px}
.bar-val{width:54px;text-align:right;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}

/* ============================================================
   SETTINGS — 3 tabs
   ============================================================ */
.set-card{padding:18px}
.set-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:0}
.set-row .nm{font-weight:650;font-size:13.5px}.set-row .sub{font-size:11.5px;color:var(--ink-3)}
.set-row .spacer{flex:1}
.role-tag{background:#f1f5f9;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.sal-tag{background:#ecfdf5;color:#047857;border-radius:8px;padding:4px 10px;font-size:12px;font-weight:700}
.hours-input{display:flex;align-items:center;gap:8px}
.hours-input input{width:96px;padding:7px 10px;border:1px solid var(--line-2);border-radius:9px;font:inherit;font-size:13px}
.profile-hero{display:flex;align-items:center;gap:16px;padding:20px;border-radius:16px;background:linear-gradient(120deg,#eef4ff,#f7faff);border:1px solid var(--line);margin-bottom:16px}
.daychips{display:flex;gap:6px;flex-wrap:wrap}
.daychip{padding:5px 11px;border-radius:8px;font-size:12px;font-weight:650;background:#f1f5f9;color:var(--ink-3)}
.daychip.on{background:var(--accent);color:#fff}

/* ============================================================
   MODAL / POPOVER / TOAST
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);z-index:40}
.modal{position:fixed;z-index:50;top:50%;left:50%;transform:translate(-50%,-48%);width:min(540px,calc(100vw - 32px));background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(15,23,42,.32);overflow:hidden;opacity:0;animation:pop .18s ease forwards;max-height:92vh;overflow-y:auto}
@keyframes pop{to{opacity:1;transform:translate(-50%,-50%)}}
.modal-head{padding:18px 20px 4px}
.modal-head .crumbs{margin-bottom:4px}
.modal-head h3{margin:0;font-size:18px;font-weight:750;letter-spacing:-.3px}
.modal-head p{margin:3px 0 0;font-size:12.5px;color:var(--ink-3)}
.modal-body{padding:14px 20px 6px}
.modal-foot{display:flex;align-items:center;gap:10px;padding:14px 20px 20px}
.modal-foot .spacer{flex:1}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;font:inherit;font-size:14px;background:#fff}
.dur-row{display:flex;align-items:center;gap:6px}
.dur-row input{flex:1;min-width:0;text-align:center}
.dur-u{font-size:13px;font-weight:650;color:var(--ink-3)}
.field textarea{resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,127,255,.14)}
.field .row{display:flex;gap:10px}.field .row>*{flex:1}
.field .opt{color:var(--ink-3);font-weight:500}
.assignee-pick{display:flex;gap:8px;flex-wrap:wrap}
.assignee-pick .ap{display:flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px 4px 5px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.assignee-pick .ap.on{border-color:var(--accent);background:var(--accent-sf);color:var(--accent-d)}

.pop-scrim{position:fixed;inset:0;z-index:55}
.pop{position:fixed;z-index:56;width:300px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-lg);padding:6px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#1E293B;color:#fff;padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.22s;z-index:60;display:flex;align-items:center;gap:9px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:16px;height:16px;color:#6ee7a8}
/* Save failures must be unmissable — a silent failed save is how a day's work disappears. */
.toast.err{background:#B91C1C;box-shadow:0 12px 30px rgba(185,28,28,.35)}
/* ---- owner admin ---------------------------------------------------------
   The entry point sits in the sidebar footer, directly above the team switcher,
   and renders for exactly one account. It is deliberately quiet — this is an
   internal tool, not a product feature, and no customer should ever wonder what
   it is. */
.sb-admin{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;margin-bottom:6px;border:0;border-radius:10px;background:none;cursor:pointer;color:var(--ink-3);font-size:13px;font-weight:600;text-align:left}
.sb-admin:hover{background:var(--hover);color:var(--ink-1)}
.sb-admin.on{background:var(--hover);color:var(--ink-1)}
.sb-admin svg{width:17px;height:17px;flex:none}
.rail.collapsed .sb-admin{justify-content:center;padding:9px 0}
.rail.collapsed .sb-admin span{display:none}

.ad-sec{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;margin:22px 0 12px}
.ad-sec:first-child{margin-top:0}
.ad-tools{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ad-search{flex:1;max-width:340px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px;background:var(--surface)}
.ad-count{font-size:12px;color:var(--ink-3)}
.ad-u{display:flex;align-items:center;gap:8px}
.ad-u b{font-size:13px;font-weight:650}
.ad-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:5px;background:#FEF3C7;color:#B45309}
.ad-lim{font-size:12px;color:var(--ink-3);font-weight:600}
.ad-lim.set{color:#1D4ED8;background:#DBEAFE;padding:3px 8px;border-radius:6px}
.ad-lim.blocked{color:#B91C1C;background:#FEE2E2;padding:3px 8px;border-radius:6px}
.btn.sm{padding:5px 10px;font-size:12px}

/* ---- plan vs actual ----------------------------------------------------
   The one number no other tool can give an architecture studio: what the work
   actually cost, against what it was quoted. Green = under, amber = over. */
.pva{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-1)}
.pva i{font-style:normal;font-weight:600;font-size:11px;padding:1px 5px;border-radius:5px;background:#F1F5F9;color:var(--ink-3)}
.pva.on i{background:#DCFCE7;color:#15803D}
.pva.under i{background:#DBEAFE;color:#1D4ED8}
.pva.over i{background:#FEF3C7;color:#B45309}
.pva.over{color:#B45309}

/* ---- end-of-day confirm ------------------------------------------------- */
.confirm-cta{border-color:#FCD34D!important;background:#FFFBEB!important;color:#92400E!important;font-weight:650}
.confirm-cta svg{color:#B45309}
.confirm-cta i{font-style:normal;background:#B45309;color:#fff;border-radius:999px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;margin-left:5px}
.cd-list{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow:auto;margin:-4px -4px 0;padding:4px}
.cd-row{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:10px}
.cd-row:hover{background:#F8FAFC}
.cd-task{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.cd-nm{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-times{display:flex;align-items:center;gap:7px;flex:none}
.cd-times input[type=time]{width:96px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;font-variant-numeric:tabular-nums;background:#fff}
.cd-dash{color:var(--ink-3);font-size:12px}
.cd-mins{width:58px;text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
.cd-mins.bad{color:#DC2626}
.cd-rm{width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:none;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;flex:none}
.cd-rm:hover{background:#FEE2E2;color:#DC2626;border-color:#FECACA}
.cd-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.cd-total b{font-size:16px;color:var(--ink-1);font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .cd-row{flex-direction:column;align-items:stretch;gap:9px}
  .cd-times{justify-content:space-between}
  .cd-times input[type=time]{flex:1;width:auto}
}

/* "We don't have data for this yet" — shown instead of a confident-looking zero. */
.ana-note{display:flex;gap:11px;align-items:flex-start;background:#F1F5F9;border:1px solid #E2E8F0;border-radius:12px;padding:13px 15px;margin-bottom:16px;font-size:13px;color:#475569;line-height:1.5}
.ana-note svg{width:17px;height:17px;flex:0 0 auto;color:#64748B;margin-top:1px}
.ana-note strong{color:#0F172A;font-weight:650}

[hidden]{display:none!important}

/* ============================================================
   tf4 FORK — plan/activity (.figd), today strips (.ts-/.tl-proj),
   projects-today panel (.pt-), flow canvas (.fn/.fg/.fl-),
   task cards (.tc-), day tabs (.t-dtab)  [verbatim from testing-flow-4]
   ============================================================ */
.fl-wrap{ position:relative; transform-origin:0 0; }
.fl-stage{ position:relative; }
.fl-zoom{ position:absolute; right:14px; bottom:14px; z-index:15; display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--sh-m); padding:5px 7px; }
.fl-zoom .zb{ width:26px; height:26px; }
.fl-zoom .zlab{ min-width:42px; text-align:center; }
.fl-svg{ position:absolute; inset:0; pointer-events:none; z-index:2; }   /* above the milestone boxes (z-1), below the nodes (z-3) so wires read clearly */
.fl-edge-halo{ fill:none; stroke:#fff; stroke-width:7; stroke-linecap:round; }   /* white halo so the wire stands out on the dotted canvas */
.fl-edge{ fill:none; stroke:#334155; stroke-width:3; stroke-linecap:round; }
.fl-edge.flow{ stroke-dasharray:4 3; } .fl-edge.tmp{ stroke:var(--accent); stroke-width:2; stroke-dasharray:5 4; }
.fl-hit{ fill:none; stroke:transparent; stroke-width:12; pointer-events:stroke; cursor:pointer; }
.fn{ position:absolute; z-index:3; background:#fff; border:1px solid var(--line-2); border-radius:11px; padding:9px 11px; display:flex; flex-direction:column; gap:5px; cursor:grab; box-shadow:var(--sh-m); user-select:none; transition:border-color .12s; }
.fn:active{ cursor:grabbing; } .fn:hover{ border-color:var(--accent); }
.fn.drop{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-sf), var(--sh-m); }
.fn.editing{ border-color:var(--accent); cursor:default; }
.fn-top{ display:flex; align-items:center; gap:7px; }
.fn-dot{ width:8px;height:8px;border-radius:50%; flex-shrink:0; }
.fn-dot.s-todo{ background:var(--todo); } .fn-dot.s-doing{ background:var(--doing); } .fn-dot.s-review{ background:var(--review); } .fn-dot.s-done{ background:var(--done); } .fn-dot.s-reopened{ background:var(--reopen); }
.fn-nm{ font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:text; }
.fn-edit{ font-size:13px; font-weight:650; border:none; outline:none; background:var(--accent-sf); border-radius:5px; padding:1px 4px; width:100%; }
.fn-meta{ display:flex; align-items:center; gap:7px; font-size:10.5px; color:var(--ink-3); }
.fn-stg{ font-size:9.5px; font-weight:650; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fn-meta .av{ width:18px;height:18px;font-size:8px; }
.fn-dur{ font-weight:650; color:var(--ink-2); } .fn-sch{ margin-left:auto; font-weight:650; } .fn.sched .fn-sch{ color:var(--done); }
.fn-noone{ font-style:italic; }
.fn-port{ position:absolute; right:-9px; top:50%; transform:translateY(-50%); width:18px;height:18px;border-radius:50%; background:#fff; border:1px solid var(--line-2); color:var(--ink-3); display:grid;place-items:center; opacity:0; transition:.12s; cursor:crosshair; }
.fn-port svg{ width:11px;height:11px; } .fn:hover .fn-port{ opacity:1; }
.fg{ position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:0 11px; background:var(--paper); border:1.5px dashed var(--line-2); border-radius:11px; cursor:grab; }
.fg:active{ cursor:grabbing; } .fg.reached{ background:var(--done-bg); border-style:solid; border-color:#A7F3D0; }
.fg-ico{ width:22px;height:22px;border-radius:7px;background:#fff;display:grid;place-items:center;color:var(--ink-3);flex-shrink:0; }
.fg-ico svg{ width:14px;height:14px; } .fg.reached .fg-ico{ color:var(--done); }
.fg-l{ font-size:12.5px; font-weight:700; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fg-s{ font-size:10px; color:var(--ink-3); display:block; }
.fg-re{ width:26px;height:26px;border-radius:7px;color:var(--reopen);display:grid;place-items:center;flex-shrink:0; }
.fg-re svg{ width:15px;height:15px; } .fg-re:hover{ background:var(--reopen-bg); }
.fl-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:11px; box-shadow:var(--sh); }
.fl-search{ display:flex; align-items:center; gap:7px; flex:1; min-width:190px; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:6px 11px; transition:border-color .12s, box-shadow .12s; }
.fl-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-sf); background:#fff; }
.fl-search svg{ width:15px;height:15px; color:var(--ink-3); flex-shrink:0; }
.fl-search input{ flex:1; border:none; background:none; outline:none; font-size:14px; color:var(--ink); }
.fl-g{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.fl-g select{ font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0; color:var(--ink-2); border:1px solid var(--line-2); border-radius:8px; padding:7px 10px; background:#fff; outline:none; transition:border-color .12s, box-shadow .12s; }
.fl-g select:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-sf); }
.fl-clear{ font-size:12px; font-weight:650; color:var(--accent); padding:5px 9px; border-radius:7px; }
.fl-clear:hover{ background:var(--accent-sf); }
.fl-count{ margin-left:auto; font-size:11.5px; color:var(--ink-3); font-weight:650; font-variant-numeric:tabular-nums; }
.tc-list{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.tc{ padding:18px 22px; border-bottom:1px solid #F1F5F9; }
.tc:last-child{ border-bottom:none; }
.tc-top{ display:flex; align-items:center; gap:10px; }
.tc-when{ font-size:13px; font-weight:700; color:var(--ink-2); flex-shrink:0; font-variant-numeric:tabular-nums; min-width:62px; }
.tc-when.unsch{ font-weight:600; color:var(--ink-3); font-variant-numeric:normal; }
.tc-name{ font-size:16px; font-weight:600; color:var(--ink); text-align:left; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-name:hover{ color:var(--accent); }
.tc-sp{ flex:1; }
.tc-timer{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 18px 0 16px; border-radius:999px; background:#E6F2FF; color:var(--accent); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; flex-shrink:0; }
.tc-timer svg{ width:15px; height:15px; }
.tc-timer:hover{ background:#D6E9FF; }
.tc-stpill{ height:38px; padding:0 22px; border-radius:999px; background:#EEF1F4; color:#475467; font-size:15px; font-weight:600; flex-shrink:0; }
.tc-stpill:hover{ filter:brightness(.97); }
.tc-bot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.tc-meta{ display:flex; align-items:center; gap:8px; min-width:0; }
.tc-av{ width:30px; height:30px; border-radius:50%; font-size:11px; flex-shrink:0; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.tc-un{ background:#F1F5F9!important; box-shadow:0 0 0 1px var(--line); }
.tc-arr{ display:flex; color:#94A3B8; margin:0 2px; } .tc-arr svg{ width:15px; height:15px; }
.tc-proj{ display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:600; color:var(--accent); margin-left:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-proj.inbox{ color:var(--ink-2); } .tc-proj:hover{ text-decoration:underline; }
.tc-pdot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; } .tc-proj.inbox .tc-pdot{ background:var(--ink-3); }
.tc-att{ font-size:14px; color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; margin-left:6px; white-space:nowrap; }
.tc-icons{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.tc-ic{ width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:#94A3B8; }
.tc-ic svg{ width:18px; height:18px; } .tc-ic:hover{ background:#F1F5F9; color:var(--ink-2); }
/* flush variant — task cards embedded inside the "Your day" card */
.tc-list.flush{ border:none; border-radius:0; background:transparent; }
.tc-list.flush .tc{ padding:13px 2px; }
.tc-list.flush .tc:first-child{ padding-top:2px; }
.tc-list.flush .tc:last-child{ padding-bottom:2px; }
.tt-detail{ padding:18px 22px 20px 52px; background:var(--accent-sf); border-bottom:1px solid var(--line); }
.td-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 30px; max-width:820px; }
.td-f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.td-f>span{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.td-f>div{ font-size:14px; color:var(--ink); }
.td-who{ font-size:13.5px; font-weight:600; color:var(--ink); border:1px solid var(--line-2); border-radius:9px; padding:7px 9px; background:#fff; outline:none; max-width:200px; }
.td-who:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-sf); }
.td-deps{ display:flex; flex-wrap:wrap; gap:5px; }
.td-unsched{ font-size:11px; font-weight:650; color:var(--reopen); display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:2px 7px; border-radius:6px; }
.td-unsched svg{ width:12px; height:12px; } .td-unsched:hover{ background:var(--reopen-bg); }

/* ====================== TASK COMPOSER (modal) ====================== */
.modal-scrim{ position:fixed; inset:0; background:rgba(20,22,18,.40); backdrop-filter:blur(2px); z-index:50; opacity:0; pointer-events:none; transition:opacity .16s var(--ease); }
.modal-scrim.show{ opacity:1; pointer-events:auto; }
.modal{ position:fixed; z-index:51; left:50%; top:50%; transform:translate(-50%,-47%) scale(.98); width:min(480px,92vw); max-height:90vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--sh-lg); padding:20px; opacity:0; pointer-events:none; transition:opacity .16s var(--ease), transform .16s var(--ease); }
.modal.show{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.cmp-h{ display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; }
.cmp-eyebrow{ font-size:11px; font-weight:650; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.cmp-h b{ font-family:var(--serif); font-size:21px; font-weight:600; display:block; margin-top:3px; }
.cmp-field{ display:block; margin-bottom:13px; }
.cmp-field>span{ display:block; font-size:10.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.cmp-field input,.cmp-field select{ width:100%; font-size:14px; font-family:inherit; color:var(--ink); border:1.5px solid var(--line-2); border-radius:9px; padding:9px 10px; background:#fff; outline:none; transition:border-color .12s, box-shadow .12s; }
.cmp-field input:focus,.cmp-field select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-sf); }
.cmp-field select:disabled{ background:var(--paper); color:var(--ink-3); }
.cmp-title-f input{ font-size:15.5px; font-weight:600; }
.cmp-title-f textarea{ width:100%; font-family:inherit; font-size:15px; line-height:1.5; font-weight:500; color:var(--ink); border:1.5px solid var(--line-2); border-radius:10px; padding:10px 12px; background:#fff; outline:none; resize:vertical; min-height:56px; transition:border-color .12s, box-shadow .12s; }
.cmp-title-f textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-sf); }
.cmp-title-f textarea::placeholder{ color:var(--ink-3); font-weight:400; }
.cmp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.cmp-grid .cmp-field{ grid-column:span 2; margin-bottom:13px; }
.cmp-grid .cmp-half{ grid-column:span 1; }
.cmp-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; padding-top:15px; border-top:1px solid var(--line); }
.cmp-dest{ font-size:11.5px; color:var(--ink-3); } .cmp-dest b{ color:var(--ink-2); font-weight:650; }
.cmp-actions{ display:flex; gap:8px; }
.cmp-opt{ font-weight:600; font-size:9.5px; color:var(--ink-3); text-transform:none; letter-spacing:0; margin-left:6px; }
/* assignee picker with availability */
.cmp-who-f{ margin-bottom:13px; }
.cmp-who{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.cmp-person{ display:flex; align-items:center; gap:8px; padding:8px 9px; border:1.5px solid var(--line-2); border-radius:10px; background:#fff; text-align:left; transition:.12s; min-width:0; }
.cmp-person:hover{ border-color:var(--accent); }
.cmp-person.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-sf); background:var(--accent-sf); }
.cmp-person .av{ width:24px;height:24px;border:none;flex-shrink:0; }
.cmp-pn{ font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-load{ margin-left:auto; display:flex; gap:2px; flex-shrink:0; }
.cmp-load .ld{ width:5px; height:14px; border-radius:2px; background:var(--line); }
.ld.lv-free{ background:#E0E7FF; } .ld.lv-some{ background:#C7D2FE; } .ld.lv-busy{ background:var(--accent); } .ld.lv-full{ background:var(--reopen); }
.cmp-person.noone{ grid-column:span 2; justify-content:center; color:var(--ink-2); }
.cmp-person.noone .cmp-pavx{ color:var(--ink-3); font-size:14px; }
/* schedule-onto-day strip */
.cmp-sched{ margin-bottom:13px; }
.cmp-days{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.cmp-day{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 4px; border:1.5px solid var(--line-2); border-radius:9px; background:#fff; transition:.12s; }
.cmp-day:hover:not([disabled]){ border-color:var(--accent); background:var(--accent-sf); }
.cmp-day.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-sf); background:var(--accent-sf); }
.cmp-day[disabled]{ opacity:.5; cursor:not-allowed; }
.cmp-day b{ font-size:11px; font-weight:700; color:var(--ink); }
.cmp-day .cmp-dd{ font-size:9.5px; color:var(--ink-3); }
.cmp-dl{ width:100%; height:4px; border-radius:3px; background:var(--line); overflow:hidden; margin:1px 0; }
.cmp-dl u{ display:block; height:100%; }
.cmp-dl u.lv-free{ background:#E0E7FF; } .cmp-dl u.lv-some{ background:#A5B4FC; } .cmp-dl u.lv-busy{ background:var(--accent); } .cmp-dl u.lv-full{ background:var(--reopen); }
.cmp-day em{ font-size:9px; font-style:normal; font-weight:650; }
.cmp-day em.cmp-free{ color:var(--accent); } .cmp-day em.cmp-set{ color:var(--accent-d); } .cmp-day em.cmp-nofit{ color:var(--ink-3); }
.shake{ animation:shake .35s var(--ease); border-color:var(--reopen)!important; }
@keyframes shake{ 0%,100%{transform:none} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* ====================== FLOW · stage bands + detach tray ====================== */
.fl-band{ position:absolute; z-index:0; border-radius:12px; background:rgba(15,23,42,.022); border:1.5px dashed transparent; transition:background .13s var(--ease), border-color .13s var(--ease); }
.fl-band:nth-child(even){ background:rgba(15,23,42,.04); }
.fl-band-h{ position:absolute; top:8px; left:12px; right:12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fl-band.drop{ background:var(--accent-sf); border-color:var(--accent); }
.fl-band.drop .fl-band-h{ color:var(--accent-d); }
.fl-tray{ position:absolute; z-index:0; border-radius:12px; background:rgba(197,138,30,.055); border:1.5px dashed var(--line-2); transition:background .13s var(--ease), border-color .13s var(--ease); }
.fl-tray-h{ position:absolute; top:9px; left:14px; display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:650; color:var(--ink-3); }
.fl-tray-h svg{ width:14px;height:14px; }
.fl-tray.drop{ background:var(--review-bg); border-color:var(--review); }
.fl-tray.drop .fl-tray-h{ color:#9a6a14; }

/* ====================== FLOW · node menu + detached state ====================== */
.fn-top .fn-nm{ flex:1; }
.fn-menu{ margin-left:auto; width:22px; height:22px; border-radius:6px; color:var(--ink-3); display:grid; place-items:center; opacity:0; transition:.12s; flex-shrink:0; }
.fn-menu svg{ width:16px;height:16px; }
.fn:hover .fn-menu,.fn-menu:focus-visible{ opacity:1; } .fn-menu:hover{ background:var(--paper); color:var(--ink); }
.fn.detached{ border-style:dashed; border-color:var(--review); background:#fffdf7; }
.fn.detached .fn-dot{ box-shadow:0 0 0 2px #fffdf7; }
.fn-stg.det{ display:inline-flex; align-items:center; gap:4px; color:var(--review); font-weight:700; }
.fn-stg.det svg{ width:11px;height:11px; }

.ts-row{ display:flex; align-items:center; gap:10px; padding:5px 0; cursor:pointer; border-radius:8px; }
.ts-id{ width:84px; flex-shrink:0; display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink); } .ts-id .av{ width:24px;height:24px;font-size:9px; } .ts-id .pj-mono{ width:26px;height:24px;border-radius:7px;font-size:9px; }
.ts-stack{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.ts-lane{ position:relative; height:40px; background:#fff; border-radius:8px; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; transition:box-shadow .1s; }
.ts-row:hover .ts-lane{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.ts-now{ position:absolute; top:0; bottom:0; width:2px; background:var(--reopen); z-index:6; }
.ts-status{ position:relative; height:5px; border-radius:3px; background:var(--line); overflow:visible; }
.ts-status i{ position:absolute; top:0; bottom:0; border-radius:2px; }
.ts-status i.s-done{ background:var(--done); } .ts-status i.s-doing{ background:var(--accent); } .ts-status i.s-review{ background:var(--review); } .ts-status i.s-todo{ background:var(--line-2); } .ts-status i.s-reopened{ background:var(--reopen); }
/* ===== Start-your-day — pixel-faithful build of Figma node 27:1367 ===== */
.figd{ background:#fff; border:1px solid #e6e8ec; border-radius:14px; padding:15px 19px 17px; margin-bottom:18px; }
.figd-lbl{ font-family:var(--font); font-size:11px; font-weight:800; letter-spacing:.55px; text-transform:uppercase; color:#94a3b8; line-height:1; }
.figd-lbl em{ font-style:normal; font-weight:600; letter-spacing:.2px; text-transform:none; color:#b3bdcc; }
.figd-lbl2{ margin-top:30px; }
.figd-ruler{ position:relative; height:13px; margin:11px 0 8px; }
.figd-ruler span{ position:absolute; top:0; font-size:10px; line-height:1.3; color:#94a3b8; letter-spacing:-0.09px; white-space:nowrap; font-weight:400; }
.figd-lanewrap{ position:relative; }
.figd-lane{ position:relative; height:64px; border-radius:8px; background:#fff; box-shadow:inset 0 0 0 1px #e6e8ec; overflow:hidden; }
.figd-cap{ position:absolute; top:0; height:64px; background:rgba(15,23,42,0.05); }
.figd-blk{ position:absolute; top:2px; height:60px; display:flex; flex-direction:column; justify-content:center; gap:2px; padding:0 9px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25); }
.figd-conn{ background:linear-gradient(180deg,#766feb,#2c277f); align-items:center; justify-content:center; padding:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22); }
/* ── the Activity lane: real recorded sessions, not the plan ──────────────
   `.act` blocks sit above the office-hours caps, because work done outside
   office hours is exactly what this lane must not hide. */
.figd-blk.act{ z-index:2; }
/* a session still running — the right edge is "now", so it stays unresolved */
.figd-blk.act.live{ border-top-right-radius:0; border-bottom-right-radius:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 10px),transparent); }
/* worked entirely outside its planned window — the one disagreement worth seeing */
.figd-blk.act.offplan{ box-shadow:inset 0 0 0 2px #F59E0B; }

/* ── reminder pins ────────────────────────────────────────────────────────
   A reminder is a MOMENT, not a range — so the pin has no width. It is
   translated -50% so its centre, not its left edge, lands on the minute. */
.rem-pin{ position:absolute; z-index:5; transform:translateX(-50%); display:grid; place-items:center;
  width:20px; height:20px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:#475569; color:#fff; box-shadow:0 0 0 2px #fff, 0 1px 3px rgba(15,23,43,.25);
  transition:transform .13s ease, background .13s ease, box-shadow .13s ease; }
.rem-pin svg{ width:11px; height:11px; display:block; }
.rem-pin:hover{ transform:translateX(-50%) scale(1.18); background:#0f172b; }
.rem-pin:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.rem-pin.due{ background:#F59E0B; }                       /* its moment has passed and it isn't done */
.rem-pin.done{ background:#CBD5E1; color:#64748B; }
.rem-pin.on-figd{ top:50%; margin-top:-10px; }            /* the 64px My-day lane */
.rem-pin.on-dt{ top:50%; margin-top:-9px; width:18px; height:18px; }   /* the shorter team day-track */
.rem-pin.on-dt svg{ width:10px; height:10px; }
.rem-pin.on-tl{ top:50%; margin-top:-8px; width:17px; height:17px; }   /* the team timeline's day cell */
.rem-pin.on-tl svg{ width:9px; height:9px; }
@media (prefers-reduced-motion:reduce){ .rem-pin{ transition:none } .rem-pin:hover{ transform:translateX(-50%) } }

/* the pin's popover: read it, mark it, drop it */
.rem-pop{ padding:12px 13px 11px; min-width:230px; max-width:290px; }
.rem-pop-t{ display:flex; gap:9px; align-items:flex-start; }
.rem-pop-ic{ display:grid; place-items:center; flex:0 0 22px; height:22px; border-radius:50%;
  background:#475569; color:#fff; margin-top:1px; }
.rem-pop-ic svg{ width:12px; height:12px; }
.rem-pop.is-due .rem-pop-ic{ background:#F59E0B; }
.rem-pop.is-done .rem-pop-ic{ background:#CBD5E1; color:#64748B; }
.rem-pop-x b{ display:block; font-size:13px; font-weight:650; line-height:1.35; color:var(--ink-1); }
.rem-pop.is-done .rem-pop-x b{ text-decoration:line-through; color:var(--ink-3); }
.rem-pop-x span{ display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3); }
.rem-pop-a{ display:flex; gap:7px; margin-top:11px; }
.rem-pop-a .btn{ flex:1; justify-content:center; }
.figd-pic{ display:grid; place-items:center; width:20px; height:20px; color:#fff; }
.figd-pic svg{ width:20px; height:20px; }
.figd-fic{ display:block; width:16px; height:16px; color:#fff; flex-shrink:0; }
.figd-fic svg{ width:16px; height:16px; display:block; }
.figd-fic.sm{ width:9px; height:9px; } .figd-fic.sm svg{ width:9px; height:9px; }
.figd-dep{ font-style:normal; font-size:9.5px; font-weight:600; color:rgba(255,255,255,0.85); letter-spacing:-0.09px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.figd-tt{ font-size:12px; font-weight:700; color:#fff; letter-spacing:-0.09px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.figd-deprow{ display:flex; align-items:center; gap:3px; max-width:100%; }
.figd-lun{ position:absolute; top:2px; height:60px; background:repeating-linear-gradient(45deg,#eeece6,#eeece6 3px,#f7f5f0 3px,#f7f5f0 6px); display:flex; align-items:center; justify-content:center; z-index:1; }
.figd-lun em{ font-style:normal; font-size:8.5px; font-weight:700; color:#a98c5c; letter-spacing:-.09px; }
.figd-free{ position:absolute; top:2px; height:60px; display:flex; align-items:center; padding:0 4px; cursor:pointer; border-radius:6px; z-index:3; }
.figd-free:hover{ background:rgba(0,127,255,.08); box-shadow:inset 0 0 0 1px rgba(0,127,255,.3); }
.figd-free em{ font-style:normal; font-size:8.5px; font-weight:700; color:#0066cc; opacity:.85; letter-spacing:-0.09px; white-space:nowrap; }
.tp-edited{font-size:11px;color:var(--ink-3);font-weight:600;font-style:italic}
.tp-hourlink{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:650;color:var(--accent-d);cursor:pointer;padding:2px 5px;border-radius:6px}
.tp-hourlink:hover{background:var(--accent-sf)}
.set-save:disabled{background:var(--line)!important;color:var(--ink-3)!important;box-shadow:none;cursor:default;opacity:1}
.set-save:disabled svg{opacity:.6}
.tp-hourlink svg{width:11px;height:11px}
.desc-card.tp-editing{box-shadow:inset 0 0 0 1.5px var(--accent-sf)}
.desc-card.tp-editing .desc-body{background:#fbfdff}
.tp-edit:disabled,.ap2:disabled{cursor:default}
.tp-edit:not(:disabled){border-color:var(--accent)!important}
/* multi-project popup */
.pp-body{padding:10px 18px 4px}
.pp-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.pp-rn{flex:none;width:24px;height:24px;margin-top:26px;border-radius:50%;background:var(--accent-sf);color:var(--accent-d);display:grid;place-items:center;font-size:12px;font-weight:800}
.pp-grid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}
.pp-grid .field{margin-bottom:8px}
.pp-rm{flex:none;margin-top:30px}
.pp-rm-sp{flex:none;width:30px}
.pp-breaks{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.pp-break{display:flex;align-items:center;gap:9px}
.pp-break-l{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650}
.pp-break-l svg{width:14px;height:14px;color:var(--ink-3)}
.pp-break-to{font-size:12px;color:var(--ink-3)}
.pp-break input[type=time]{border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;font:inherit;font-size:13px}
@media(max-width:680px){.pp-grid{grid-template-columns:1fr}}
.figd-ci{ position:absolute; top:0; height:64px; width:2px; background:#007fff; z-index:3; }
.figd-ci.off{ background:#F59E0B; }   /* clocked in outside office hours */
.figd-now{ position:absolute; top:0; height:64px; width:2.5px; background:#ef4444; transform:translateX(-50%); z-index:4; }
.figd-nowpill{ position:absolute; top:-8px; transform:translateX(-50%); z-index:6; background:#ef4444; color:#fff; font-size:9px; font-weight:800; letter-spacing:-0.09px; line-height:1.3; padding:1px 5px; border-radius:999px; }
.figd-footwrap{ margin-top:20px; }
.figd-foot{ width:100%; display:flex; align-items:center; justify-content:center; gap:9px; background:#f3f3f4; border:none; border-radius:8px; padding:9px 14px; cursor:pointer; transition:background .12s; }
.figd-foot:hover{ background:#ebebed; }
.figd-foot-t{ font-size:11px; font-weight:800; letter-spacing:.55px; text-transform:uppercase; color:#94a3b8; }
.figd-foot-cv{ display:grid; place-items:center; color:#94a3b8; transform:rotate(90deg); transition:transform .16s var(--ease); }
.figd-foot-cv svg{ width:18px; height:18px; }
.figd-footwrap.open .figd-foot-cv{ transform:rotate(-90deg); }
.figd-footwrap.open .figd-foot{ border-radius:8px 8px 0 0; }
.figd-foot-b{ background:#f9fafb; border:1px solid #f3f3f4; border-top:none; border-radius:0 0 8px 8px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; animation:fade .18s var(--ease); }
/* ===== Focus bar — Plan + Analytics (legacy, kept for other surfaces) ===== */
.mdb{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 18px 16px; margin-bottom:18px; }
.mdb-grid{ display:grid; grid-template-columns:70px 1fr 96px; column-gap:14px; row-gap:8px; align-items:center; }
.mdb-corner{ } .mdb-axis{ position:relative; }
.mdb-ruler{ position:relative; height:13px; }
.mdb-ruler span{ position:absolute; transform:translateX(-50%); font-size:10px; color:var(--ink-3); white-space:nowrap; }
.mdb-lbl{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.mdb-lane{ position:relative; min-width:0; }
.mdb-lane .ts-lane.focus{ height:64px; }
/* focus task block — two lines: name + downstream flow hint */
.blk.own.focus{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:0 9px; }
.blk-nm{ font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; pointer-events:none; }
.blk-dep{ display:flex; align-items:center; gap:3px; font-size:9.5px; font-weight:600; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; pointer-events:none; }
.blk-dep svg{ width:9px; height:9px; flex-shrink:0; }
.mdb-hrs{ text-align:right; } .mdb-hrs b{ font-size:16px; font-weight:750; color:var(--ink); display:block; line-height:1.05; } .mdb-hrs span{ font-size:10px; color:var(--ink-3); display:block; }
.mdb-hrs.sub b{ font-size:13px; color:var(--accent); }
/* the bottom (Analytics) row is the important one — taller, and expands on hover with a "now" summary */
.mdb .ts-status.focus{ height:14px; border-radius:5px; transition:height .16s var(--ease); }
.mdb .ts-status.focus i{ border-radius:3px; }
.mdb .ts-status.focus .ts-seglab{ display:none; position:absolute; left:6px; right:4px; top:50%; transform:translateY(-50%); font-size:10px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.mdb:hover .ts-status.focus{ height:30px; }
.mdb:hover .ts-status.focus .ts-seglab{ display:block; }
.mdb-hrs .mdb-now-now{ display:none; font-size:11px; color:var(--ink-2); font-weight:600; margin-top:1px; max-width:160px; }
.mdb-now-now b{ color:var(--ink); font-weight:700; }
.mdb:hover .mdb-hrs .mdb-now-now{ display:block; }
.mdb:hover .mdb-hrs.sub b, .mdb:hover .mdb-hrs.sub span:not(.mdb-now-now){ display:none; }
/* unscheduled badges + drag-and-drop scheduling */
/* collapsible "N tasks not yet scheduled" footer (matches the Figma start-your-day bar) */
.mdb-unsbar{ margin-top:14px; }
.mdb-unsbar-h{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; background:var(--side-2); border:1px solid var(--line); border-radius:10px; cursor:pointer; transition:.12s; }
.mdb-unsbar-h:hover{ background:#F1F5F9; border-color:var(--line-2); }
.mdb-unsbar-t{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); }
.mdb-unsbar-cv{ display:grid; place-items:center; color:var(--ink-3); transition:transform .16s var(--ease); }
.mdb-unsbar-cv svg{ width:15px; height:15px; }
.mdb-unsbar.open .mdb-unsbar-cv{ transform:rotate(180deg); }
.mdb-unsbar.open .mdb-unsbar-h{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.mdb-unsbar-b{ border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; animation:fade .18s var(--ease); }
.mdb-uns-hint{ font-size:11px; color:var(--ink-3); }
.mdb-uns-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.uns-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; background:#fff; border:1px solid var(--line-2); font-size:13px; font-weight:600; color:var(--ink); cursor:grab; transition:.12s; max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uns-chip:hover{ border-color:var(--accent); box-shadow:0 2px 8px -2px rgba(0,127,255,.3); }
.uns-chip:active{ cursor:grabbing; } .uns-chip.dragging{ opacity:.45; }
.uns-chip em{ font-style:normal; color:var(--ink-3); font-weight:600; font-size:11px; }
.uns-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; background:#94A3B8; } .uns-dot.s-doing{ background:var(--accent); } .uns-dot.s-reopened{ background:var(--reopen); } .uns-dot.s-review{ background:var(--review); }
.mdb-uns-empty{ font-size:13px; color:var(--ink-3); }
.free.free-add{ cursor:pointer; } .free.free-add:hover{ background:rgba(0,127,255,.10); box-shadow:inset 0 0 0 1.5px rgba(0,127,255,.45); }
/* free time in the personal Plan lane reads as green "Nh free" (matches Figma) */
.ts-lane.focus .free.free-add{ background:rgba(16,185,129,.12); }
.ts-lane.focus .free.free-add:hover{ background:rgba(16,185,129,.22); box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.5); }
.ts-lane.focus .free-lab{ color:var(--done); opacity:1; font-size:9.5px; font-weight:700; }
.mdb-droplane.drop-hot .ts-lane.focus{ box-shadow:inset 0 0 0 2px var(--accent); background:var(--accent-sf); }
.blk.own.focus[draggable]{ cursor:grab; } .blk.own.focus.dragging{ opacity:.45; }
.mdb-barrier{ position:absolute; top:50%; transform:translate(-50%,-50%); z-index:8; width:19px; height:19px; display:grid; place-items:center; color:#EF4444; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2),0 0 0 1px rgba(239,68,68,.25); cursor:pointer; }
.mdb-barrier svg{ width:11px; height:11px; }
.mdb-barrier:hover{ box-shadow:0 2px 7px rgba(0,0,0,.28),0 0 0 2px rgba(239,68,68,.4); }
.mdb .ts-now{ width:2.5px; animation:mdbpulse 1.6s ease-in-out infinite; }
@keyframes mdbpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.mdb-nowtag{ position:absolute; top:-2px; transform:translateX(-50%); z-index:9; font-size:9px; font-weight:800; color:#fff; background:var(--reopen); padding:1px 5px; border-radius:999px; pointer-events:none; }
.ts-status .ts-ci{ position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--accent-d); border-radius:2px; }
.ts-status.empty{ background:transparent; }
.ts-meta{ width:88px; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.ts-avs{ display:flex; } .ts-avs .av{ width:21px; height:21px; font-size:8.5px; margin-left:-5px; } .ts-avs .av:first-child{ margin-left:0; }
.ts-cnt{ font-size:10.5px; color:var(--ink-3); font-weight:600; white-space:nowrap; }
.ts-legend{ display:flex; gap:14px; margin-left:94px; margin-top:8px; font-size:10.5px; color:var(--ink-3); }
.ts-legend span{ display:inline-flex; align-items:center; gap:5px; } .ts-legend i{ width:11px; height:7px; border-radius:2px; } .ts-legend i.done{ background:var(--done); } .ts-legend i.prog{ background:var(--accent); } .ts-legend i.todo{ background:var(--line-2); }
/* meetings today */
.mtoday{ display:flex; align-items:center; gap:11px; padding:9px 6px; border-radius:9px; cursor:pointer; } .mtoday:hover{ background:var(--paper); }
.mtoday-when{ width:50px; flex-shrink:0; font-size:12px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.mtoday-ttl{ flex:1; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--accent-d); } .mtoday-ttl svg{ width:14px; height:14px; flex-shrink:0; }
.mtoday.ev .mtoday-ttl{ color:#c2410c; }
.mtoday-who{ display:flex; flex-shrink:0; } .mtoday-who .av{ width:22px; height:22px; font-size:9px; margin-left:-5px; } .mtoday-who .av:first-child{ margin-left:0; }
/* reserved/static heights — sections keep their footprint, scroll inside */
.t-scroll{ overflow-y:auto; }
.t-day .t-scroll.big{ height:360px; } .t-att .t-scroll{ height:150px; } .t-meet .t-scroll{ height:120px; } .t-team .t-scroll{ height:268px; } .t-proj .t-scroll{ height:248px; }
.t-scroll::-webkit-scrollbar{ width:7px; } .t-scroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:4px; }

/* ====================== TODAY — FULL-WIDTH ROWS ====================== */
/* Senior architect "My dashboard / Team dashboard" segmented switch */
.t-dashtabs{ display:inline-flex; gap:4px; padding:4px; background:var(--side-2); border:1px solid var(--line); border-radius:11px; margin:0 0 16px; }
.t-dtab{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:650; color:var(--ink-2); padding:8px 16px; border-radius:8px; cursor:pointer; transition:.12s; }
.t-dtab i{ display:grid; place-items:center; } .t-dtab i svg{ width:15px; height:15px; }
.t-dtab:hover{ color:var(--ink); }
.t-dtab.on{ background:#fff; color:var(--accent); box-shadow:var(--sh); }
.today-rows{ display:flex; flex-direction:column; gap:16px; }
/* Row 1: Your day (tabbed) | Meetings today */
.today-row1{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:start; }
@media (max-width:880px){ .today-row1{ grid-template-columns:1fr; } }
.t-tabs{ display:flex; gap:2px; margin:2px 0 12px; border-bottom:1px solid var(--line); }
.t-tab{ font-size:15px; font-weight:650; color:var(--ink-3); padding:8px 14px; border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; transition:color .1s; }
.t-tab:hover{ color:var(--ink-2); }
.t-tab.on{ color:var(--accent-d); border-bottom-color:var(--accent); }
.t-tab span{ font-size:12px; font-weight:700; background:var(--paper); color:var(--ink-3); border-radius:999px; padding:1px 8px; }
.t-tab span.hot{ background:#f59e0b; color:#fff; }
.t-meet-side .t-scroll{ height:404px; }
/* segmented toggle (People / Projects) */
.t-seg{ margin-left:auto; display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px; }
.t-seg button{ font-size:12px; font-weight:650; color:var(--ink-3); padding:4px 11px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; } .t-seg button svg{ width:13px; height:13px; }
.t-seg button.on{ background:var(--surface); color:var(--accent-d); box-shadow:var(--sh); }
.t-teamload h3 .n{ margin-left:auto; }
.t-openplan{ display:inline-flex; align-items:center; gap:3px; margin-left:12px; font-size:12.5px; font-weight:650; color:var(--accent); padding:5px 11px; border-radius:8px; background:var(--accent-sf); flex-shrink:0; } .t-openplan:hover{ background:#D6E9FF; } .t-openplan svg{ width:13px; height:13px; }
.t-teamload .t-scroll{ height:auto; max-height:480px; }
/* hover focuses the block you're on and dims its neighbours (no whole-row highlight) */
.ts-row:hover .ts-lane{ box-shadow:inset 0 0 0 1px var(--line-2); }
.ts-lane:hover .blk{ opacity:.4; transition:opacity .1s; }
.ts-lane:hover .blk:hover{ opacity:1; box-shadow:inset 0 0 0 2px rgba(255,255,255,.9); filter:saturate(1.12) brightness(1.04); }
.blk[data-tid]{ cursor:pointer; } .tl-seg[data-act]{ cursor:pointer; }
/* Row 2: Team today — thin per-person lines per project */
.tl-wrap{ max-height:none; }
.tl-proj{ padding:6px 0 7px; border-top:1px solid var(--line); } .tl-proj:first-of-type{ border-top:none; padding-top:2px; }
.tl-phead{ display:flex; align-items:center; gap:9px; cursor:pointer; margin:0 0 7px; padding:3px 4px; border-radius:8px; } .tl-phead:hover{ background:var(--paper); }
.tl-phead .pj-mono{ width:24px; height:22px; border-radius:7px; font-size:9px; } .tl-phead b{ font-size:13px; font-weight:680; }
.tl-meta{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.tl-cnt{ font-size:11px; font-weight:600; color:var(--ink-3); }
.tl-mtg{ font-size:10.5px; font-weight:700; color:#c2410c; background:#fff7ed; border:1px solid #fed7aa; border-radius:999px; padding:1px 8px; display:inline-flex; align-items:center; gap:4px; } .tl-mtg svg{ width:11px; height:11px; }
.tl-lanes{ display:flex; flex-direction:column; gap:3px; padding-left:94px; }
.tl-lane{ display:flex; align-items:center; gap:8px; }
.tl-av{ width:24px; flex-shrink:0; margin-left:-30px; } .tl-av .av{ width:20px; height:20px; font-size:8px; }
.tl-track{ position:relative; flex:1; height:16px; background:var(--paper); border-radius:7px; box-shadow:inset 0 0 0 1px var(--line); }
.tl-seg{ position:absolute; top:4px; height:8px; border-radius:4px; min-width:4px; transition:opacity .1s, transform .1s; }
.tl-seg.masked{ opacity:.32; }
.tl-seg.mtg{ top:2px; height:12px; background:#F59E0B!important; border-radius:3px; box-shadow:0 0 0 1.5px var(--surface); z-index:3; }
/* hover one segment → focus it, dim the rest in that lane's project */
.pt-card{ border:1px solid var(--line); border-radius:11px; margin-bottom:8px; background:var(--surface); overflow:hidden; transition:box-shadow .12s; }
.pt-card.open{ box-shadow:var(--sh); border-color:var(--line-2); }
.pt-head{ display:flex; flex-direction:column; gap:13px; padding:14px 14px 13px; cursor:pointer; } .pt-head:hover{ background:var(--paper); }
.pt-h1{ display:flex; align-items:center; gap:11px; }
.pt-head .pj-mono.lg{ width:38px; height:38px; border-radius:10px; font-size:12px; font-weight:700; flex-shrink:0; display:grid; place-items:center; }
.pt-id{ flex:1; min-width:0; }
.pt-nm{ font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-loc{ display:flex; align-items:center; gap:4px; font-size:11.5px; color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pt-loc svg{ width:12px; height:12px; flex-shrink:0; }
.pt-tr{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.pt-caret{ color:var(--ink-3); display:flex; transition:transform .15s; flex-shrink:0; } .pt-caret svg{ width:16px; height:16px; } .pt-caret.on{ transform:rotate(90deg); color:var(--accent); }
.pt-mtop{ display:inline-flex; align-items:center; gap:4px; height:26px; padding:0 9px; border-radius:999px; background:#FFF7ED; color:#F59E0B; font-size:12px; font-weight:800; flex-shrink:0; } .pt-mtop svg{ width:15px; height:15px; }
/* single line: people (left) · metrics group (right, fills width) */
.pt-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pt-metrics{ display:flex; align-items:center; gap:16px; }
.pt-ppl{ display:flex; align-items:center; flex-shrink:0; }
.pt-ppl .pt-av{ width:26px; height:26px; font-size:10px; border-radius:50%; margin-left:-7px; border:2px solid #fff; } .pt-ppl .pt-av:first-child{ margin-left:0; }
.pt-ppl .kc-more{ font-size:10px; font-weight:800; color:var(--ink-2); margin-left:4px; }
.pt-noppl{ color:var(--ink-3); font-weight:700; }
.pt-metric{ display:flex; align-items:center; gap:7px; } .pt-metric b{ font-size:14px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.pt-pie{ width:24px; height:24px; border-radius:50%; background:conic-gradient(var(--rc) var(--p), #E3E8EE 0deg); flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.pt-div{ width:1px; height:22px; background:var(--line); flex-shrink:0; }
/* current milestone + stage as horizontal capsules */
.pt-stage{ border-top:1px solid var(--line); padding-top:11px; }
.pt-stage-h{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2); margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-stage-h b{ color:var(--ink); font-weight:650; } .pt-stage-h em{ color:var(--ink-3); font-style:normal; }
.pt-now-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pt-caps{ display:flex; align-items:center; gap:5px; }
.pt-cap{ height:8px; border-radius:999px; flex:1 1 0; background:#EDF0F3; }
.pt-cap.cur{ flex:5 1 0; height:22px; border-radius:999px; position:relative; overflow:hidden; display:flex; align-items:center; }
.pt-cap.cur i{ position:absolute; left:0; top:0; bottom:0; opacity:.32; }
.pt-cap-l{ position:relative; z-index:1; font-size:10px; font-weight:800; padding:0 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-detail{ padding:0 12px 11px 12px; border-top:1px solid var(--line); }
.pt-now{ display:flex; align-items:center; gap:7px; padding:9px 0 8px; font-size:12.5px; font-weight:600; } .pt-now .av{ width:20px; height:20px; font-size:8px; margin-left:auto; }
.pt-now-l{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-d); background:var(--accent-sf); padding:1px 7px; border-radius:999px; flex-shrink:0; }
.pt-now-t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-foot{ display:flex; align-items:center; justify-content:space-between; } .pt-allot{ font-size:11.5px; color:var(--ink-3); font-weight:600; }
.pt-avs{ display:flex; } .pt-avs .av{ width:22px; height:22px; font-size:9px; margin-left:-5px; } .pt-avs .av:first-child{ margin-left:0; }
/* Today → Worked on tab */
.wk-row{ display:flex; align-items:center; gap:9px; padding:9px 6px; border-radius:9px; cursor:pointer; } .wk-row:hover{ background:var(--paper); }
.wk-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--line-2); } .wk-dot.s-done{ background:var(--done); } .wk-dot.s-doing{ background:var(--accent); } .wk-dot.s-review{ background:var(--review,#F59E0B); }
.wk-nm{ flex:1; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wk-nm.done{ text-decoration:line-through; color:var(--ink-3); }
.wk-pj{ font-size:11px; color:var(--ink-3); flex-shrink:0; } .wk-t{ font-size:12px; font-weight:700; color:var(--ink-2); flex-shrink:0; font-variant-numeric:tabular-nums; }
/* Projects today (right rail) — collapsed people avatars + expanded day lines */
.pt-avs{ display:flex; flex-shrink:0; } .pt-avs .pt-av{ width:22px; height:22px; font-size:9px; margin-left:-5px; } .pt-avs .pt-av:first-child{ margin-left:0; }
.pt-detail2{ padding:10px 12px 12px; border-top:1px solid var(--line); }
.pt-ruler{ position:relative; height:13px; margin-left:28px; margin-bottom:4px; } .pt-ruler span{ position:absolute; transform:translateX(-50%); font-size:9.5px; color:var(--ink-3); }
.pt-lane{ display:flex; align-items:center; gap:7px; margin-bottom:5px; } .pt-lane:last-child{ margin-bottom:0; }
.pt-lav{ width:21px; flex-shrink:0; } .pt-lav .av{ width:21px; height:21px; font-size:8px; }
/* ===== IA hubs: secondary tab strip ===== */
.hub-tabs{ display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.hub-tab{ font-size:13.5px; font-weight:650; color:var(--ink-3); padding:8px 15px; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; transition:color .1s; }
.hub-tab:hover{ color:var(--ink-2); } .hub-tab.on{ color:var(--accent-d); border-bottom-color:var(--accent); }
.s-sec:first-of-type{ } /* single 'Workspace' section now */
/* ===== compact stage-progress bar ===== */
.psb{ display:flex; gap:4px; margin-top:7px; }
.psb-seg{ height:22px; border-radius:6px; display:flex; align-items:center; padding:0 8px; overflow:hidden; white-space:nowrap; min-width:10px; box-sizing:border-box; }
.psb-seg .l{ font-size:11px; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.psb-seg.done{ background:var(--done-bg); border:1px solid #A7F3D0; } .psb-seg.done .l{ color:#047857; }
.psb-seg.cur{ color:#fff; box-shadow:var(--sh); } .psb-seg.cur .l{ color:#fff; }
.psb-seg.up{ background:#fff; border:1px dashed var(--line-2); } .psb-seg.up .l{ color:var(--ink-3); }
/* projects-today header (stage bar layout) */
.pt-top{ display:flex; align-items:baseline; gap:8px; min-width:0; } .pt-top b{ font-size:13px; font-weight:680; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pt-allot{ font-size:11px; color:var(--ink-3); font-weight:600; margin-left:auto; white-space:nowrap; flex-shrink:0; }
.pt-head{ align-items:flex-start; } .pt-head .pt-avs{ margin-top:2px; } .pt-head .pt-caret{ margin-top:2px; }
/* projects list — full-width stage line */
.prow-stages{ grid-column:1/-1; padding-top:2px; }
/* Projects today — highlighted metric chips + meeting badge */
.pt-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px; }
.pt-chip{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; cursor:default; }
.pt-chip.hrs{ background:var(--accent-sf); color:var(--accent-d); }
.pt-chip.tk{ background:var(--paper); color:var(--ink-2); border:1px solid var(--line); }
.pt-chip.mtg{ background:#fff7ed; color:#b45309; border:1px solid #fed7aa; } .pt-chip.mtg svg{ width:11px; height:11px; }
.pt-avs{ cursor:default; }

/* ============================================================
   v3 supplemental — strip primitives, task clock, assignee strip,
   updates feed, punctuality, presence, stage-edit, meeting highlight
   ============================================================ */
.ts-ruler{position:relative;height:13px;margin:2px 0 6px}
.ts-h{position:absolute;top:0;font-size:10px;color:var(--ink-3);transform:translateX(-50%);font-weight:600}
.ts-id{display:flex;align-items:center;gap:8px;width:96px;flex:none;font-size:12.5px;font-weight:650;color:var(--ink-2)}
.ts-id span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-stack{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ts-meta{width:104px;flex:none;text-align:right;font-size:11px;color:var(--ink-3);font-weight:600}
.ts-meta b{font-size:13px;color:var(--ink);display:block}
.ts-meta i{color:var(--accent);font-style:normal;font-weight:700}
.ts-hrsmeta b{font-variant-numeric:tabular-nums}
.ts-avs{display:flex;justify-content:flex-end}.ts-avs .av{margin-left:-6px;box-shadow:0 0 0 2px #fff}
.ts-cnt{display:block;font-size:11px;margin-top:2px}
.pj-mono{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-size:10px;font-weight:800;flex:none}
.pj-mono.lg{width:40px;height:40px;border-radius:11px;font-size:13px}
.kc-more{font-size:10px;font-weight:700;color:var(--ink-3);margin-left:4px}
.ts-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--reopen);opacity:.6;z-index:5}
.blk-mtgi{display:grid;place-items:center;width:13px;height:13px;color:#fff;flex:none;margin-right:4px}
.blk-mtgi svg{width:13px;height:13px}
.tl-track{position:relative;flex:1;height:16px;background:#fff;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.tl-av{flex:none}
.pt-lane{display:flex;align-items:center;gap:8px;padding:4px 0}
.pt-lav{flex:none}
.pt-ruler{position:relative;height:13px;margin-bottom:4px}
.pt-ruler span{position:absolute;font-size:9.5px;color:var(--ink-3);transform:translateX(-50%);font-weight:600}
.pt-detail2{padding:6px 12px 10px;border-top:1px solid var(--line);background:#fbfcfe}
.tk-empty{padding:24px;text-align:center;color:var(--ink-3);font-size:13px}

/* meeting highlight when arriving from "show in timeline" */
.blk.hl,.tl-seg.hl{box-shadow:0 0 0 2px #ef4444,0 0 0 5px rgba(239,68,68,.22)!important;z-index:7!important}

/* task page: pausable clock + assignee bar graphic */
.tp-clock{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:14px;margin-bottom:14px;border:1px solid}
.tp-clock.run{background:linear-gradient(120deg,#fff7ed,#fffdf9);border-color:#fdba74d}
.tp-clock.idle{background:#f8fafc;border-color:var(--line)}
.tp-clock .tc-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none}
.tp-clock.run .tc-ico{background:#f59e0b;box-shadow:0 6px 16px rgba(245,158,11,.32)}
.tp-clock.idle .tc-ico{background:var(--ink-3)}
.tp-clock .tc-ico svg{width:20px;height:20px}
.tp-clock .big{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.1}
.tp-clock.run .big{color:#b45309}
.tp-clock .lab{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3)}
.tp-clock .pz{margin-left:auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;color:var(--ink-2)}
.tp-clock .pz:hover{border-color:var(--accent);color:var(--accent)}.tp-clock .pz svg{width:17px;height:17px}
.tp-clock.idle.ready{background:linear-gradient(120deg,rgba(0,127,255,.08),rgba(99,102,241,.05));border-color:rgba(0,127,255,.2)}
.tp-clock.idle.ready .tc-ico{background:linear-gradient(135deg,#007FFF,#6366F1);box-shadow:0 6px 16px rgba(0,127,255,.28)}
.tp-clock.idle.ready .big{color:var(--ink)}
.tp-clock .pz.go{background:#007FFF;border-color:#007FFF;color:#fff}
.tp-clock .pz.go:hover{background:#0068d6;border-color:#0068d6;color:#fff}
.tp-iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.tp-iconbtn:hover{background:#f4f7fb;color:var(--ink);border-color:var(--line-2)}
.tp-iconbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tp-iconbtn svg{width:16px;height:16px}
.desc-read{font-size:16px;line-height:1.6;color:var(--ink);font-weight:500;white-space:pre-wrap;word-wrap:break-word;min-height:40px}
/* ===== Tasks: filter toolbar + bulk actions + row select ===== */
.task-toolbar{display:flex;align-items:center;gap:10px;margin:14px 0 14px;flex-wrap:wrap}
.tf-search{display:flex;align-items:center;gap:7px;background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;padding:0 11px;height:38px;flex:0 1 280px;min-width:200px}
.tf-search svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.tf-search input{border:none;outline:none;background:none;font:inherit;font-size:13.5px;width:100%;color:var(--ink)}
.tf-sel{height:38px;border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);padding:0 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.tf-sel:hover{border-color:var(--line-2)}
.tf-clear{height:38px;border:1px solid var(--line);border-radius:10px;background:none;padding:0 13px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer}
.tf-clear:hover{background:var(--bg);color:var(--ink)}
.bulkbar{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,rgba(0,127,255,.08),rgba(99,102,241,.05));border:1px solid rgba(0,127,255,.22);border-radius:12px;padding:9px 13px;margin-bottom:12px;flex-wrap:wrap}
.bulk-n{font-weight:700;font-size:13px;color:var(--accent)}
.bulk-sel{height:34px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 9px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink)}
.bulk-del{height:34px;border:1px solid #fecaca;background:#fff;color:#ef4444;border-radius:9px;padding:0 12px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.bulk-del:hover{background:#fef2f2}.bulk-del svg{width:14px;height:14px}
.bulk-clear{background:none;border:none;color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;font-weight:600}
.bulk-clear:hover{color:var(--ink)}
.tbl th.c-check,.tbl td.c-check{width:40px;text-align:center;padding-left:10px}
.row-check,.c-check input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#007FFF;vertical-align:middle}
.trow.sel{background:rgba(0,127,255,.06)}
.trow.sel:hover{background:rgba(0,127,255,.1)}
@media(prefers-color-scheme:dark){.bulk-sel{background:#1e293b;color:#e2e8f0}.bulk-del{background:#1e293b}}
/* ===== Meeting dialog: availability + clash reschedule ===== */
#mtg-avail{margin-top:14px}
.cdb-mtg{position:absolute;top:2px;bottom:2px;border-radius:6px;background:repeating-linear-gradient(45deg,rgba(0,127,255,.2),rgba(0,127,255,.2) 5px,rgba(0,127,255,.33) 5px,rgba(0,127,255,.33) 10px);border:1.5px solid #007FFF;display:flex;align-items:center;justify-content:center;z-index:4;pointer-events:none}
.cdb-mtg b{font-size:9px;font-weight:800;color:#0059b3;text-transform:uppercase;letter-spacing:.4px}
.cdb-blk.clash{outline:2px solid #ef4444;outline-offset:-1px;z-index:3}
/* Meeting dialog — auto-suggested "When" panel */
#mtg-when{display:flex;flex-direction:column;gap:11px}
.mtg-suggest{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.4}
.mtg-suggest svg{width:17px;height:17px;flex:none}
.mtg-suggest>span{flex:1;min-width:0}
.mtg-suggest b{font-weight:750}
.mtg-suggest.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}
.mtg-suggest.ok svg{color:#16a34a}
.mtg-suggest.warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.mtg-suggest.warn svg{color:#f59e0b}
.mtg-suggest.none{background:var(--paper);border:1px dashed var(--line-2);color:var(--ink-3)}
.mtg-suggest.none svg{color:var(--ink-3)}
.mtg-reset{flex:none;border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:4px 9px;font:inherit;font-size:11.5px;font-weight:600;color:var(--accent);cursor:pointer}
.mtg-reset:hover{background:var(--paper)}
.mtg-dayrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mtg-dayrow label{font-size:12px;font-weight:700;color:var(--ink-2)}
.mtg-dayrow select{flex:none;width:auto;min-width:150px}
.mtg-hint{font-size:11.5px;color:var(--ink-3)}
.mtg-push{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font-size:12.5px;line-height:1.45;cursor:pointer}
.mtg-push svg{width:16px;height:16px;flex:none;color:#f59e0b}
.mtg-push>span:first-of-type{flex:1;min-width:0}
.mtg-push-t{flex:none;display:inline-flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.mtg-push-t input{width:15px;height:15px;accent-color:#f59e0b;cursor:pointer}
@media(prefers-color-scheme:dark){
  .mtg-suggest.ok{background:rgba(22,163,74,.13);border-color:rgba(22,163,74,.36);color:#86efac}
  .mtg-suggest.warn,.mtg-push{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#fed7aa}
  .mtg-reset{background:rgba(255,255,255,.05)}
}
/* React TimelineCalendar wrapper */
.tlc{display:block}
.tlc-host{display:block}
.tlc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tlc-nav{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.tlc-section{margin-bottom:22px}
.tlc-section:last-child{margin-bottom:0}
.tlc-section .sec-label{margin-bottom:8px}
.blk.proj{border-radius:8px;display:flex;align-items:center;padding:0 9px;color:#fff;font-size:11px;font-weight:650;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.12)}
.blk.proj .bl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
/* One-day timeline day navigation */
.od-daynav{display:flex;align-items:center;gap:8px;margin:2px 0 12px}
.od-nav{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card,#fff);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.od-nav:hover{background:var(--bg);color:var(--ink);border-color:var(--line-2)}
.od-nav svg{width:15px;height:15px}
.od-daylbl{font-size:13.5px;font-weight:700;color:var(--ink);min-width:130px;text-align:center}
.od-today{height:32px;border:1px solid var(--line);border-radius:9px;background:none;padding:0 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer}
.od-today:hover{background:rgba(0,127,255,.07)}
.astrip{padding:15px 17px}
.astrip .ah{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.astrip .ah .nm{font-weight:650;font-size:13px}.astrip .ah .sp{flex:1}
.asched{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.asched input{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:5px 8px;font:inherit;font-size:12px;font-weight:600;color:var(--ink)}
.asched input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.asched-dash{color:var(--ink-3);font-size:12px}
.asched-clr{font-size:11.5px;font-weight:650;color:var(--ink-3);padding:5px 9px;border-radius:8px;cursor:pointer}
.asched-clr:hover{background:var(--paper);color:var(--reopen)}
/* read mode: the scheduled slot is a control, not a label — click it to change the
   day & time (the editor used to hide behind the pencil). */
.asched-open{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;color:var(--ink-3);background:transparent;border:1px solid transparent;padding:4px 8px;border-radius:8px;cursor:pointer}
.asched-open svg{width:12px;height:12px;opacity:0;transition:opacity .12s ease}
.asched-open:hover{background:var(--accent-sf);border-color:var(--line);color:var(--accent)}
.asched-open:hover svg,.asched-open:focus-visible svg{opacity:1}
@media (hover:none){.asched-open svg{opacity:.6}}
/* Cancel sits next to the ✓ while editing and reverts the edit wholesale */
.tp-cancel{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:12.5px;font-weight:650;cursor:pointer;flex:none}
.tp-cancel:hover{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.aday{position:relative;height:50px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.aday .dim{opacity:.32}
.anext{display:flex;align-items:center;gap:9px;margin-top:13px;padding:10px 13px;border-radius:11px;background:var(--accent-sf);font-size:12.5px;font-weight:600;color:var(--accent-d)}
.anext svg{width:15px;height:15px;flex:none}.anext b{font-weight:750}

/* updates feed */
.uf-filters{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.uf-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:12px;font-weight:600;color:var(--ink-2)}
.uf-chip.on{background:var(--accent-sf);border-color:#b9d4ff;color:var(--accent-d)}
.uf-feed{max-width:760px}
.uf-row{display:flex;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.uf-row:last-child{border-bottom:0}
.uf-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.uf-ic svg{width:16px;height:16px}
.uf-x{flex:1;min-width:0}
.uf-t{font-size:13.5px;font-weight:550;line-height:1.4}.uf-t b{font-weight:750}
.uf-m{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.uf-time{font-size:11.5px;color:var(--ink-3);white-space:nowrap;flex:none}

/* punctuality ring + arrivals histogram */
.punc{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:center}
@media(max-width:900px){.punc{grid-template-columns:1fr}}
.ring-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.ring{position:relative;width:150px;height:150px}
.ring .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .ctr b{font-size:30px;font-weight:800;display:block}
.ring .ctr span{font-size:11px;color:var(--ink-3);font-weight:600}
.punc-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.punc-stat{border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.punc-stat .k{font-size:11px;color:var(--ink-3);font-weight:650;display:flex;align-items:center;gap:6px}
.punc-stat .k .d{width:8px;height:8px;border-radius:50%}
.punc-stat .v{font-size:22px;font-weight:780;margin-top:3px}
.histo{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:14px}
.histo .hb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.histo .hcol{width:62%;min-height:2px;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.histo .hseg{border-radius:3px 3px 0 0;width:100%}
.histo .hlab{font-size:10px;color:var(--ink-3);font-weight:600}
.histo .hn{font-size:10px;color:var(--ink-2);font-weight:700;height:13px}

/* presence stacked bars */
.pres{display:flex;align-items:flex-end;gap:10px;height:210px;padding-top:10px;position:relative}
.pres .pb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
.pres .pcol{width:66%;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.pres .pseg{width:100%}
.pres .plab{font-size:9.5px;color:var(--ink-3);font-weight:600;text-align:center;white-space:nowrap}
.pres-tgt{position:absolute;left:0;right:0;border-top:2px dashed #10b981;pointer-events:none}

/* stage-edit strip on project detail */
.stedit .st-nm-in{border:1px solid transparent;background:transparent;font-weight:700;font-size:13.5px;width:100%;border-radius:6px;padding:2px 4px}
.stedit .st-nm-in:hover{background:#fff;border-color:var(--line-2)}
.stedit .st-nm-in:focus{outline:none;border-color:var(--accent);background:#fff}

/* meetings table show-in-timeline button */
.show-tl{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);background:#fff;font-size:12px;font-weight:600;color:var(--accent-d)}
.show-tl:hover{border-color:var(--accent);background:var(--accent-sf)}.show-tl svg{width:13px;height:13px}

/* stragglers */
.zb{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font-size:15px;font-weight:600}
.zb.tdy{width:auto;padding:0 10px;font-size:11px;font-weight:650}
.zb:hover{background:var(--paper)}
.tl-seg.mtg{background:#475569!important}
.fc-blank{font-size:13px}
.pt-mtop{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--ink-2);background:var(--paper);border-radius:6px;padding:2px 7px}
.pt-mtop svg{width:12px;height:12px}

/* Today team view — by-project timeline card (blue summary) */
.ptl-proj{border-bottom:1px solid var(--line)}
.ptl-proj:last-child{border-bottom:0}
.ptl-row{display:flex;align-items:stretch;cursor:pointer}
.ptl-row:hover{background:#fcfdff}
.ptl-lane{flex:0 0 250px;border-right:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:9px}
.ptl-chev{width:18px;height:18px;color:var(--ink-3);flex:none;transition:transform .15s}
.ptl-chev.on{transform:rotate(90deg)}
.ptl-area{flex:1;min-width:0;padding:9px 12px;display:flex;flex-direction:column}
.ptl-strip{height:5px;border-radius:3px;margin-bottom:7px}
.ptl-sum{flex:1;background:#eef4ff;border:1px solid #d7e3ff;border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:13px;min-width:0}
.ptl-sum .h{font-size:20px;font-weight:780;color:#26408b;letter-spacing:-.5px}
.ptl-sum .tc{font-size:12px;color:#5a6ba8;font-weight:650;white-space:nowrap}
.ptl-chips{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.ptl-chip{background:#fff;border:1px solid #d7e3ff;color:#4a55a8;font-size:11px;font-weight:650;padding:3px 9px;border-radius:7px;white-space:nowrap}
.ptl-avs{margin-left:auto;display:flex;flex:none}
.ptl-avs .av{margin-left:-6px;box-shadow:0 0 0 2px #eef4ff}

/* ============================================================
   tf3 FORK — FULL zoomable timeline (verbatim from testing-flow-3 copy)
   ============================================================ */
.tl-bar{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.tl-bar .spacer{ flex:1 1 auto; }
.seg{ display:inline-flex; gap:2px; padding:3px; background:var(--line); border-radius:9px; }
.seg button{ font-size:13.5px; font-weight:600; color:var(--ink-3); padding:8px 13px; border-radius:7px; display:inline-flex; align-items:center; gap:6px; }
.seg button svg{ width:15px;height:15px; }
.seg button.on{ background:#fff; color:var(--ink); box-shadow:var(--sh); }
.zoomc{ display:flex; align-items:center; gap:8px; }
.zoomc input[type=range]{ width:130px; accent-color:var(--accent); }
.zb{ width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);background:#fff;color:var(--ink-2);font-size:15px;font-weight:600; }
.zb.tdy{ width:auto; padding:0 10px; font-size:11px; font-weight:650; }
.zb:hover{ background:var(--paper); }
.zlab{ font-size:11.5px; font-weight:600; color:var(--ink-3); min-width:62px; }
.tl-legend{ display:flex; gap:16px; font-size:12.5px; color:var(--ink-2); margin-left:auto; }
.tl-legend i{ width:15px;height:11px;border-radius:3px;display:inline-block; vertical-align:-1px; margin-right:5px; }
.lg-done{ background:var(--done-bg); border:1px solid #A7F3D0; } .lg-cur{ background:var(--accent); } .lg-up{ background:#fff; border:1px dashed var(--line-2); }
.lg-td i{ width:2px;height:12px; background:var(--reopen); }

/* isolate: keeps the sticky name column's z-index (which must sit above the
   "now" line) from competing with the page-level sticky topbar. */
.tl-scroll{ --tl-left:240px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--sh); isolation:isolate; }
/* chunky, always-visible horizontal scrollbar so mouse users can grab & drag it too.
   NB: no standard scrollbar-width/color here — setting them makes modern Chromium
   ignore the ::-webkit rules below (which Chrome + the Capacitor WebView use). */
.tl-scroll::-webkit-scrollbar, .sg2::-webkit-scrollbar{ height:13px; }
.tl-scroll::-webkit-scrollbar-track, .sg2::-webkit-scrollbar-track{ background:transparent; }
.tl-scroll::-webkit-scrollbar-thumb, .sg2::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; border:3px solid transparent; background-clip:padding-box; }
.tl-scroll::-webkit-scrollbar-thumb:hover, .sg2::-webkit-scrollbar-thumb:hover{ background:var(--ink-3); background-clip:padding-box; }
.tl-inner{ position:relative; }
.tl-head{ display:flex; }
.tl-corner{ position:sticky; left:0; z-index:23; background:var(--surface); border-right:1px solid var(--line); display:flex; align-items:center; gap:7px; padding:0 16px; font-size:11px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); flex-shrink:0; }
.tl-cadd{ display:grid; place-items:center; width:21px; height:21px; border-radius:6px; color:var(--ink-3); cursor:pointer; opacity:0; transition:opacity .12s var(--ease), background .12s var(--ease), color .12s var(--ease); }
.tl-cadd svg{ width:14px; height:14px; }
.tl-cadd:hover{ background:var(--accent-sf); color:var(--accent-d); }
.tl-scroll:hover .tl-cadd, .tl-cadd:focus-visible{ opacity:1; }
@media (hover:none){ .tl-cadd{ opacity:1; } }
.tl-addbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:9px 10px; border-radius:9px; border:1px dashed var(--line-2); background:transparent; color:var(--accent-d); font-size:13px; font-weight:650; cursor:pointer; }
.tl-addbtn svg{ width:15px; height:15px; }
.tl-addbtn:hover{ background:var(--accent-sf); border-color:var(--accent); border-style:solid; }
.tl-axis{ position:relative; display:flex; flex-direction:column; }
.tl-band{ display:flex; height:22px; }
.tl-units{ position:relative; flex:1; }
/* The month label STICKS to the left edge while its month is on screen. Each
   month block is as wide as the month — 30,000px at Day zoom — so a static label
   scrolls out of sight and the header reads "Fri 23" with no month anywhere. */
.tl-mo{ flex-shrink:0; border-right:1px solid var(--line); display:flex; align-items:center; font-size:11.5px; font-weight:600; color:var(--ink-2); }
/* NOT overflow:hidden — an overflow ancestor becomes the sticky containing block
   and silently kills the sticky below. And it sticks at 248px, not 0: the frozen
   240px name column is sticky-left too, so a label pinned at 0 hides behind it. */
.tl-mo>span{ position:sticky; left:248px; padding:0 9px; white-space:nowrap; background:var(--surface); z-index:1; }
.tl-u{ position:absolute; top:0; bottom:0; border-right:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:3px; font-size:11px; color:var(--ink-2); box-sizing:border-box; }
/* header hour ruler (shown once, only at hour-detail zoom) */
.tl-u.hh{ display:block; }
.tl-u-dt{ position:absolute; left:10px; top:5px; font-size:10.5px; font-weight:650; color:var(--ink-2); }
.tl-hh{ position:absolute; bottom:5px; padding-left:3px; font-size:10px; color:var(--ink-3); white-space:nowrap; }
.tl-u.we{ background:var(--paper); color:var(--ink-3); }
.tl-u .dow{ font-size:8.5px; color:var(--ink-3); white-space:nowrap; } .tl-u .d{ font-weight:650; }

.tl-row{ display:flex; }
.tl-rh{ position:sticky; left:0; z-index:22; background:var(--surface); border-right:1px solid var(--line); display:flex; align-items:center; gap:9px; padding:0 12px; flex-shrink:0; }
.tl-chev{ width:20px;height:20px;color:var(--ink-3);display:grid;place-items:center;border-radius:5px; flex-shrink:0; }
.tl-chev svg{ width:14px;height:14px; transition:transform .2s var(--ease); } .tl-chev.open svg{ transform:rotate(90deg); }
.tl-chev:hover{ background:var(--paper); color:var(--ink); }
.tl-rmono{ width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0; }
.tl-rh .tx{ min-width:0; flex:1; } .tl-rname{ font-size:13px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Person rows lost their stats line, so the name has the height to itself and
   should use the second line rather than clip — "Arulmurugan Prak…" is a worse
   header than a two-line name, and saying who this is is the header's only job.
   Scoped to .person: project rows still carry a second line (the next action). */
.tl-row.person .tl-rname{ white-space:normal; text-overflow:clip; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tl-rnext{ font-size:11px; color:var(--ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-rnext.bad{ color:var(--reopen); }
.tl-auto{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-sf); padding:3px 8px; border-radius:7px; display:inline-flex; align-items:center; gap:3px; flex-shrink:0; }
.tl-auto svg{ width:11px;height:11px; }
/* NB: .tl-track collides with the 16px progress bar of the same name, which
   sets overflow:hidden. Scope to the timeline's own tracks — an overflow!=visible
   ancestor would capture the sticky stage labels below. */
.tl-track{ position:relative; flex-shrink:0; }
.tl-row>.tl-track{ overflow:visible; }
/* NO RULES BETWEEN THE ROWS.
   `.tl-track` is declared twice further up for a completely different component
   (the little inline load bar), carrying `box-shadow: inset 0 0 0 1px var(--line)`.
   The gantt's own `.tl-track` rule only re-declares position and flex-shrink, so
   the box-shadow cascaded straight through — and the top and bottom edges of that
   inset outline are the horizontal lines that were being drawn between every row.
   A cascade collision, not a border anybody wrote on purpose. */
.tl-row>.tl-track,.sub-t{ box-shadow:none; border-radius:0; }
.tl-grid{ position:absolute; top:0; bottom:0; width:1px; background:var(--line); }
.tl-today{ position:absolute; top:0; bottom:0; width:2px; background:var(--reopen); opacity:.85; z-index:20; pointer-events:none; }   /* the "now" line sits above the bars so it's always visible */
/* overflow stays visible: an overflow!=visible box is itself a scroll container,
   which would anchor the sticky label to the bar instead of to .tl-scroll.
   The label clips itself instead. */
.bar{ position:absolute; border-radius:8px; display:flex; align-items:center; padding:0 9px; overflow:visible; box-shadow:var(--sh); z-index:2; }
.bar.cur{ color:#fff; } .bar.up{ background:#fff; border:1px dashed var(--line-2); } .bar.done{ background:var(--done-bg); border:1px solid #A7F3D0; }
/* pin the stage label clear of the sticky name column so it survives a
   horizontal scroll, clamped inside its own bar so it leaves with the bar */
.bar>.l,.bar>.rib-l{ position:sticky; left:calc(var(--tl-left,240px) + 10px); display:inline-flex; align-items:center; gap:7px; min-width:0; max-width:100%; overflow:hidden; }
.bar>.l>b,.bar>.rib-l>b{ font-weight:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .l-d{ font-style:normal; font-weight:500; white-space:nowrap; opacity:.72; flex:none; }
.bar .l{ font-size:12.5px; font-weight:600; }
.bar .l .l-d{ font-size:11px; }
.bar.cur .l{ color:#fff; } .bar.done .l{ color:#047857; } .bar.up .l{ color:var(--ink-3); }

/* sub-lane day schedule */
.sub{ display:flex; background:#F8FAFC; }
.sub.sub-dim{ background:#FBFCFD; }
.sub.sub-dim .sub-h{ background:#FBFCFD; color:var(--ink-3); }
.sub.sub-dim .scol{ opacity:.5; }
.sub.sub-dim:hover .scol{ opacity:.85; }
.sub-noassign{ margin-left:auto; padding-right:8px; font-size:9.5px; font-style:normal; font-weight:600; color:var(--ink-3); opacity:.7; white-space:nowrap; }
.sub-h{ position:sticky; left:0; z-index:21; background:#F8FAFC; border-right:1px solid var(--line); display:flex; align-items:center; gap:8px; padding-left:32px; flex-shrink:0; font-size:12px; font-weight:600; color:var(--ink-2); }
.sub-h .av{ width:19px;height:19px;font-size:8px; }
.sub-t{ position:relative; flex-shrink:0; }
.scol{ position:absolute; top:7px; bottom:7px; border-radius:3px; overflow:hidden; z-index:2; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.scol.today{ box-shadow:inset 0 0 0 1px var(--accent); } .scol.past{ opacity:.6; }
.sub-t .tl-grid{ pointer-events:none; z-index:1; }
.sub-t .tl-today{ pointer-events:none; z-index:20; }
.off{ position:absolute; top:0; bottom:0; background:rgba(15,23,42,.05); z-index:0; }
.tick{ position:absolute; top:0; bottom:0; width:1px; background:rgba(15,23,42,.06); z-index:1; }
.hr{ position:absolute; top:1px; font-size:8px; font-weight:600; color:var(--ink-3); padding-left:2px; z-index:1; }
.lun{ position:absolute; top:0; bottom:0; background:repeating-linear-gradient(45deg,#eeece6,#eeece6 3px,#f7f5f0 3px,#f7f5f0 6px); }
.blk{ position:absolute; top:2px; bottom:2px; border-radius:3px; display:flex; align-items:center; padding:0 4px; overflow:hidden; z-index:2; }
.blk.own{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); cursor:grab; }
.blk.own:active{ cursor:grabbing; } .blk.own:hover{ filter:brightness(1.07); }
.blk.other{ background:repeating-linear-gradient(45deg,#cdcabf,#cdcabf 2px,#e2dfd5 2px,#e2dfd5 4px); }

/* ══ PLAN vs ACTIVITY in a day cell ══════════════════════════════════════════
   The baseline/actual idiom: the plan keeps the top of the cell, and what was
   really recorded gets its own channel directly beneath, on the SAME x-axis.
   Sharing the axis is the whole point — drift is then a thing you see, not a
   sum you do. Activity under its plan block went as planned; activity poking
   out to the left started early; an empty stretch of channel under a plan block
   is time the studio planned for and nobody recorded.

   The channel renders even when empty, deliberately. "Nothing recorded" is the
   difference between a day that cost money and a day that only looked like it
   would — and it is exactly what a plan-shaped Activity lane used to hide. */
.scol.pva .blk{ bottom:42%; }                     /* the plan yields the floor */
.scol.pva .free{ bottom:42%; }
.scol.pva .rem-pin.on-tl{ top:29%; }
.act-ch{ position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1;
  background:rgba(15,23,42,.045); border-top:1px solid rgba(15,23,42,.07); }
.ablk{ position:absolute; bottom:2px; height:calc(38% - 4px); border-radius:2px; z-index:3;
  cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
  transition:filter .12s; }
.ablk:hover{ filter:brightness(1.1); }
/* still running: the right edge is "now", so it must not read as a closed span */
.ablk.live{ border-top-right-radius:0; border-bottom-right-radius:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 6px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 6px),transparent); }
/* recorded outside the slot it was planned for — the disagreement worth seeing */
.ablk.offplan{ box-shadow:inset 0 0 0 1.5px #F59E0B; }
@media (prefers-reduced-motion:reduce){ .ablk{ transition:none } }

/* the toggle. The key is the control: two stacked bars = what the cell shows. */
.pva-tg{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 8px;
  border:1px solid var(--line-2); border-radius:9px; background:var(--surface);
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink-3);
  cursor:pointer; white-space:nowrap; transition:border-color .12s, color .12s, background .12s; }
.pva-tg:hover{ border-color:var(--ink-3); color:var(--ink-2); }
.pva-tg.on{ background:var(--accent-sf); border-color:var(--accent); color:var(--accent-d); }
.pva-key{ display:flex; flex-direction:column; gap:2px; width:14px; }
.pva-key i{ display:block; height:4px; border-radius:1px; background:currentColor; opacity:.35; }
.pva-key .pva-k-pl{ width:14px; }
.pva-key .pva-k-ac{ width:9px; }
.pva-tg.on .pva-key i{ opacity:1; }
.pva-tg.on .pva-key .pva-k-ac{ background:var(--accent); }

/* the "6h planned · 4h actual (−33%)" readout, wherever hours are shown */
.pv-pl{ color:var(--ink-3); }
.pv-none{ color:var(--ink-3); font-style:italic; opacity:.85; }
.pv-act{ font-weight:750; color:var(--ink-2); }
.pv-act i{ font-style:normal; font-weight:700; opacity:.85; }
.pv-act.over{ color:#B45309; } .pv-act.under{ color:#0369A1; } .pv-act.on{ color:#047857; }
/* "nothing was recorded against this" in an Actual column. It must read as an
   answer, not as a missing value — the whole point of the column is that an
   empty one is a fact about the day, not a rendering gap. */
.pv-dash{ color:var(--ink-3); font-weight:600; cursor:default; }
.blk .bl{ font-size:8.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.buf{ position:absolute; top:3px; bottom:3px; border-radius:2px; background:repeating-linear-gradient(45deg,rgba(15,23,42,.13),rgba(15,23,42,.13) 2px,transparent 2px,transparent 4px); z-index:2; }
.free{ position:absolute; top:2px; bottom:2px; border-radius:3px; cursor:pointer; z-index:2; }
.free:hover{ background:rgba(99,102,241,.16); box-shadow:inset 0 0 0 1px var(--accent); }
.sub-note{ padding:12px 16px; font-size:12px; color:var(--ink-3); background:#F8FAFC; }
/* project view · day cells (hours · people · tasks · milestones) at day zoom */
.bar.rib{ border-radius:4px; opacity:.9; } .bar.rib.done{ background:var(--done-bg); border-color:#cfe5dd; } .bar.rib.up{ background:#fff; border:1px dashed var(--line-2); }
.bar.rib .rib-l{ font-size:9px; font-weight:700; padding:0 6px; line-height:14px; gap:6px; }
.bar.rib .rib-l .l-d{ font-size:8.5px; font-weight:600; }
.pcell{ position:absolute; top:22px; bottom:5px; border-radius:7px; overflow:hidden; z-index:2; padding:5px 8px; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.pcell.empty{ background:transparent; }
.pcell:not(.empty){ background:#fff; box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:box-shadow .1s; }
.pcell:not(.empty):hover{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.pcell.today:not(.empty){ box-shadow:inset 0 0 0 1.5px var(--accent); background:var(--accent-sf); }
.pcell.past{ opacity:.55; }
/* NB: .pc-top collides with the project card's header, which pads 16/16/14.
   Reset it — that padding was silently inflating the day cell. */
.pcell .pc-top{ display:flex; align-items:center; gap:8px; padding:0; }
.pc-hrs{ font-size:16px; font-weight:750; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; flex-shrink:0; }
.pc-hrs.sm{ font-size:11px; margin:auto; }
/* a project-day with recorded time but nothing planned: the plan figure is 0h
   and must not shout — the actual next to it is the story */
.pc-hrs.zero{ color:var(--ink-3); font-weight:600; }
/* recorded hours, beside the planned ones. This is the number that cost money,
   so it is never the quiet one. */
.pc-act{ font-size:13px; font-weight:750; color:var(--ink-2); font-variant-numeric:tabular-nums;
  line-height:1; flex-shrink:0; padding:2px 6px; border-radius:5px; background:rgba(15,23,42,.05); }
.pc-act.sm{ font-size:10px; padding:1px 4px; margin:auto; }
.pc-act.over{ color:#B45309; background:#FEF3C7; }
.pc-act.under{ color:#0369A1; background:#E0F2FE; }
.pc-act.on{ color:#047857; background:#D1FAE5; }
.pc-act.none{ font-weight:600; color:var(--ink-3); background:transparent; padding-left:0; }
.pc-cnt{ font-size:11px; font-weight:600; color:var(--ink-3); flex-shrink:0; }
.pc-ms-row{ display:flex; gap:4px; flex-wrap:nowrap; overflow:hidden; }
.pc-ms{ font-size:9.5px; font-weight:650; padding:2px 7px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.pc-ms.more{ background:var(--paper); color:var(--ink-3); }
.pc-avs{ display:flex; align-items:center; margin-left:auto; flex-shrink:0; }
.pc-avs .av{ width:19px; height:19px; font-size:8.5px; border:2px solid #fff; margin-right:-5px; }
.pcell.today .pc-avs .av{ border-color:var(--accent-sf); }
.pc-more{ font-size:9.5px; font-weight:700; color:var(--ink-3); margin-left:9px; }
/* timeline filters + zoom presets + load pill + free-drag */
.tl-filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tl-filters .fl-g{ gap:6px; }
.z-presets{ display:inline-flex; gap:3px; padding:3px; background:var(--side-2); border:1px solid var(--line); border-radius:10px; }
.zp{ font-size:12px; font-weight:650; color:var(--ink-2); padding:6px 12px; border-radius:7px; white-space:nowrap; cursor:pointer; transition:background .12s, color .12s, box-shadow .12s; }
.zp.on{ background:#fff; color:var(--ink); box-shadow:var(--sh); }
/* 3-day & One day are standalone buttons beside the Month/Week/Day group */
.zp-solo{ background:var(--side-2); border:1px solid var(--line); border-radius:10px; margin-left:5px; color:var(--ink-2); }
.zp-solo:hover{ color:var(--ink); background:var(--paper); }
.zp-solo.on{ background:#fff; color:var(--ink); box-shadow:var(--sh); border-color:var(--line); }
/* One-day day navigation (‹ Today ›) */
.odn-wrap{ display:inline-flex; align-items:center; gap:4px; margin-left:10px; }
.odn-b{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--card,#fff); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.odn-b:hover{ background:var(--paper); color:var(--ink); }
.odn-b svg{ width:15px; height:15px; }
.odn-today{ height:30px; border:1px solid var(--line); border-radius:8px; background:none; padding:0 13px; font:inherit; font-size:12.5px; font-weight:650; color:var(--accent); cursor:pointer; }
.odn-today:hover{ background:rgba(0,127,255,.07); }
.zp:hover:not(.on){ color:var(--ink); }
.tl-legend{ margin:0 0 12px; }
.tl-load{ font-size:9.5px; font-weight:800; padding:1px 5px; border-radius:5px; margin-left:4px; }
.tl-load.lv-free{ background:#E6F2FF; color:#0066CC; } .tl-load.lv-some{ background:#CCE4FF; color:#0066CC; }
.tl-load.lv-busy{ background:var(--accent); color:#fff; } .tl-load.lv-full{ background:var(--reopen); color:#fff; }
.tl-row.person .tl-rname{ font-size:13.5px; }
.free-lab{ position:absolute; left:4px; top:50%; transform:translateY(-50%); font-size:8.5px; font-weight:700; color:var(--accent-d); white-space:nowrap; pointer-events:none; opacity:.85; }
.free{ touch-action:none; }
.fsel{ position:absolute; top:2px; bottom:2px; background:rgba(99,102,241,.22); box-shadow:inset 0 0 0 1.5px var(--accent); border-radius:3px; z-index:6; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.fsel span{ font-size:8.5px; font-weight:800; color:var(--accent-d); background:#fff; padding:1px 4px; border-radius:4px; white-space:nowrap; box-shadow:var(--sh); }
/* remove-from-day X on a scheduled block */
.blk-x{ position:absolute; top:1px; right:1px; z-index:4; width:15px; height:15px; border-radius:5px; display:grid; place-items:center; background:rgba(255,255,255,.92); color:#333; opacity:0; transition:opacity .1s; }
.blk-x svg{ width:10px; height:10px; }
.blk.own:hover .blk-x{ opacity:1; }
.blk-x:hover{ background:var(--reopen); color:#fff; }

/* ============================================================
   v4 — draggable STAGE GANTT, timeline TABLE view, UPDATES chat
   ============================================================ */
.view-toggle{display:inline-flex;background:#eef0f3;border-radius:9px;padding:3px;margin-left:auto}
.view-toggle button{border:0;background:transparent;padding:6px 12px;border-radius:7px;font-weight:600;font-size:12.5px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.view-toggle button.on{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.view-toggle svg{width:14px;height:14px}

/* stage gantt */
.sg{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh);overflow-x:auto;overflow-y:hidden;position:relative}
.sg-inner{position:relative;min-width:max-content}
.sg-head{display:flex;border-bottom:1px solid var(--line);background:#fbfbfd}
.sg-corner{position:sticky;left:0;z-index:5;flex:0 0 262px;background:#fbfbfd;border-right:1px solid var(--line);padding:11px 14px;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3)}
.sg-axis{position:relative;height:36px;flex:1}
.sg-mo{position:absolute;top:0;height:36px;border-left:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink-2);padding:9px 0 0 8px;white-space:nowrap}
.sg-tpill{position:absolute;top:6px;transform:translateX(-50%);background:var(--reopen);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;z-index:4;white-space:nowrap}
.sg-row{display:flex;border-bottom:1px solid var(--line);min-height:72px}
.sg-row:last-child{border-bottom:0}
.sg-row:hover{background:#fcfdff}
.sg-lane{position:sticky;left:0;z-index:3;flex:0 0 262px;background:#fff;border-right:1px solid var(--line);padding:11px 12px;display:flex;gap:9px;align-items:flex-start}
.sg-row:hover .sg-lane{background:#fcfdff}
.sg-no{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-top:1px}
.sg-laneb{min-width:0;flex:1}
.sg-nm{border:1px solid transparent;background:transparent;border-radius:6px;padding:2px 5px;font-weight:700;font-size:13.5px;width:100%}
.sg-nm:hover{border-color:var(--line-2);background:#fff}.sg-nm:focus{outline:none;border-color:var(--accent);background:#fff}
.sg-mschips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.sg-track{position:relative;flex:1}
.sg-grid{position:absolute;top:0;bottom:0;width:1px;background:rgba(15,23,42,.05)}
.sg-todayl{position:absolute;top:0;bottom:0;width:2px;background:var(--reopen);opacity:.5}
.sg-bar{position:absolute;top:26px;height:30px;border-radius:9px;display:flex;align-items:center;color:#fff;font-size:12px;font-weight:700;cursor:grab;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 10px -3px rgba(15,23,42,.35);user-select:none;z-index:2}
.sg-bar:active{cursor:grabbing;filter:brightness(1.05)}
.sg-bl{padding:0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.sg-h{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;z-index:3}
.sg-h.l{left:0;border-radius:9px 0 0 9px}.sg-h.r{right:0;border-radius:0 9px 9px 0}
.sg-h::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:12px;background:rgba(255,255,255,.6);border-radius:2px}
.sg-ms{position:absolute;top:5px;width:13px;height:13px;border-radius:3px;transform:translateX(-50%) rotate(45deg);cursor:grab;z-index:4;box-shadow:0 0 0 2px #fff}
.sg-ms:active{cursor:grabbing}
.sg-dur{position:absolute;top:60px;font-size:10px;font-weight:600;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap;pointer-events:none}
.sg-addrow{display:flex;align-items:center;gap:7px;justify-content:center;padding:11px;color:var(--accent-d);font-weight:650;font-size:12.5px;cursor:pointer;border-top:1px dashed var(--line-2)}
.sg-addrow:hover{background:#f5faff}

/* stage calendar v2 — user-scheduled, week-gridded */
.sg2{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh);overflow-x:auto;overflow-y:hidden;position:relative}
.sg2.empty{padding:8px}
.sg2-inner{position:relative;min-width:max-content}
.sg2-head{display:flex;border-bottom:1px solid var(--line);background:#fbfbfd;position:sticky;top:0;z-index:6}
.sg2-corner{position:sticky;left:0;z-index:7;flex:none;background:#fbfbfd;border-right:1px solid var(--line);padding:0 14px;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);display:flex;align-items:center}
.sg2-axis{position:relative;height:52px;flex:none}
.sg2-mos{position:absolute;top:0;left:0;right:0;height:24px}
.sg2-mo{position:absolute;top:0;height:24px;border-left:1px solid var(--line);font-size:11px;font-weight:700;color:var(--ink-2);padding:5px 0 0 8px;white-space:nowrap;overflow:hidden}
.sg2-wks{position:absolute;top:24px;left:0;right:0;height:28px}
.sg2-wk{position:absolute;top:0;height:28px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;padding-left:6px;line-height:1}
.sg2-wk b{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.sg2-wk i{font-size:8.5px;font-style:normal;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.3px}
.sg2-tpill{position:absolute;top:3px;transform:translateX(-50%);background:var(--reopen);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;z-index:5;white-space:nowrap;pointer-events:none}
.sg2-row{display:flex;border-bottom:1px solid var(--line);min-height:86px}
.sg2-row:last-of-type{border-bottom:0}
.sg2-row:hover{background:#fcfdff}
.sg2-row.on{background:#f3f8ff}
.sg2-lane{position:sticky;left:0;z-index:3;flex:none;background:#fff;border-right:1px solid var(--line);padding:11px 12px;display:flex;gap:9px;align-items:flex-start}
.sg2-row:hover .sg2-lane,.sg2-row.on .sg2-lane{background:inherit}
.sg2-no{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;flex:none;margin-top:1px;background:#f1f5f9;color:var(--ink-3)}
.sg2-laneb{min-width:0;flex:1}
.sg2-nm{border:1px solid transparent;background:transparent;border-radius:6px;padding:2px 5px;font-weight:700;font-size:13.5px;width:100%}
.sg2-nm:hover{border-color:var(--line-2);background:#fff}.sg2-nm:focus{outline:none;border-color:var(--accent);background:#fff}
.sg2-dates{display:flex;align-items:center;gap:5px;margin:6px 0 2px;flex-wrap:wrap}
.sg2-date{border:1px solid var(--line-2);background:#fff;border-radius:7px;padding:3px 6px;font-size:11.5px;font-weight:600;color:var(--ink);font-family:inherit;cursor:pointer;color-scheme:light}
.sg2-date:hover{border-color:var(--accent)}.sg2-date:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,127,255,.15)}
.sg2-date[value=""]{color:var(--ink-3);border-style:dashed}
.sg2-arrow{font-size:11px;color:var(--ink-3)}
.sg2-clear{border:none;background:#f1f5f9;color:var(--ink-3);width:20px;height:20px;border-radius:6px;font-size:13px;cursor:pointer;line-height:1}
.sg2-clear.wide{width:auto;height:auto;padding:3px 10px;font-size:11px;font-weight:700}
.sg2-clear:hover{background:#fde8e8;color:var(--reopen)}
.sg2-place{border:1px dashed var(--accent);background:#f5faff;color:var(--accent-d);border-radius:7px;padding:3px 9px;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:3px}
.sg2-place:hover{background:#e8f3ff}
.sg2-place.on{background:var(--accent);color:#fff;border-style:solid}
.sg2-place svg{width:11px;height:11px}
.sg2-mschips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.sg2-track{position:relative;flex:1 0 auto;cursor:default}
.sg2-track.unsched,.sg2-track.placing{cursor:copy}
.sg2-we{position:absolute;top:0;bottom:0;background:rgba(15,23,42,.035);z-index:0}
.sg2-gl{position:absolute;top:0;bottom:0;width:1px;background:rgba(15,23,42,.06);z-index:0}
.sg2-tl{position:absolute;top:0;bottom:0;width:2px;background:var(--reopen);opacity:.45;z-index:1}
.sg2-bar{position:absolute;top:30px;height:32px;border-radius:9px;display:flex;align-items:center;color:#fff;font-size:12px;font-weight:700;cursor:grab;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 10px -3px rgba(15,23,42,.35);user-select:none;z-index:2}
.sg2-bar:active{cursor:grabbing;filter:brightness(1.05)}
.sg2-bl{padding:0 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.sg2-h{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize;z-index:3}
.sg2-h.l{left:0;border-radius:9px 0 0 9px}.sg2-h.r{right:0;border-radius:0 9px 9px 0}
.sg2-h::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:13px;background:rgba(255,255,255,.65);border-radius:2px}
.sg2-ms{position:absolute;top:8px;width:13px;height:13px;border-radius:3px;transform:translateX(-50%) rotate(45deg);cursor:grab;z-index:4;box-shadow:0 0 0 2px #fff}
.sg2-ms:active{cursor:grabbing}
.sg2-hint{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:11px;font-weight:600;color:var(--ink-3);pointer-events:none;padding:0 12px}
.sg2-track.placing .sg2-hint{color:var(--accent-d)}
.sg2-track.unsched:hover{background:rgba(0,127,255,.04)}
.sg2-track.unsched:hover .sg2-hint{color:var(--accent-d)}
.sg2-tmp{position:absolute;top:26px;bottom:22px;width:3px;background:var(--accent);border-radius:2px;z-index:3;box-shadow:0 0 0 3px rgba(0,127,255,.18)}
/* live range preview drawn between the first and second placement clicks */
.sg2-tmp-bar{position:absolute;top:30px;height:32px;border-radius:9px;opacity:.55;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;z-index:2;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);pointer-events:none;transition:left .06s linear,width .06s linear}
.sg2-tmp-lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;text-shadow:0 1px 2px rgba(15,23,42,.35)}
.sg2-addrow{display:flex;align-items:center;gap:7px;justify-content:center;padding:11px;color:var(--accent-d);font-weight:650;font-size:12.5px;cursor:pointer;border-top:1px dashed var(--line-2)}
.sg2-addrow:hover{background:#f5faff}

/* updates chat */
.cu-wrap{max-width:780px}
.cu-feed{display:flex;flex-direction:column;gap:12px;padding:8px 2px 4px}
.cu-msg{display:flex;align-items:flex-end;gap:9px}
.cu-msg.me{flex-direction:row-reverse}
.cu-bub{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 13px;max-width:76%;box-shadow:var(--sh)}
.cu-bub.me{background:var(--accent);border-color:var(--accent);color:#fff}
.cu-who{font-size:11px;font-weight:750;color:var(--accent-d);margin-bottom:2px}
.cu-txt{font-size:13.5px;line-height:1.45}.cu-txt b{font-weight:750}
.cu-kind{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;opacity:.8;margin-bottom:3px}
.cu-kind svg{width:11px;height:11px}
.cu-time{font-size:10.5px;color:var(--ink-3);margin-top:3px}.cu-bub.me .cu-time{color:rgba(255,255,255,.82)}
.cu-compose{display:flex;gap:9px;margin-top:16px}
.cu-compose input{flex:1;padding:11px 14px;border:1px solid var(--line-2);border-radius:11px;font:inherit;font-size:14px;background:#fff}
.cu-compose input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,127,255,.12)}

/* updates — left filters+search, right chat */
.cu-layout{display:grid;grid-template-columns:248px 1fr;gap:22px;align-items:start}
@media(max-width:920px){.cu-layout{grid-template-columns:1fr}}
.cu-side{position:sticky;top:80px}
.cu-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:11px;padding:9px 12px;margin-bottom:10px;background:#fff}
.cu-search svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.cu-search input{border:0;outline:0;flex:1;font:inherit;font-size:13px;background:transparent}
.cu-filters{display:flex;flex-direction:column;gap:3px}
.uf-side{display:flex;align-items:center;text-align:left;padding:9px 11px;border-radius:10px;border:0;background:transparent;font-size:13px;font-weight:600;color:var(--ink-2);width:100%}
.uf-side:hover{background:var(--side-2)}
.uf-side.on{background:var(--accent-sf);color:var(--accent-d)}
.uf-side .uf-c{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3)}
.uf-side.on .uf-c{color:var(--accent-d)}
.cu-main{min-width:0}

/* ============ tf3c FLOW fork (verbatim) ============ */
.fl{ height:min(640px,72vh); overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface) radial-gradient(circle, rgba(15,23,42,.05) 1px, transparent 1px) 0 0/22px 22px; box-shadow:var(--sh); cursor:grab; }
.fl.pan{ cursor:grabbing; }
.fl-wrap{ position:relative; transform-origin:0 0; }
.fl-stage{ position:relative; }
.fl-zoom{ position:absolute; right:14px; bottom:14px; z-index:15; display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--sh-m); padding:5px 7px; }
.fl-zoom .zb{ width:26px; height:26px; }
.fl-zoom .zlab{ min-width:42px; text-align:center; }
.fl-svg{ position:absolute; inset:0; pointer-events:none; z-index:2; }   /* above the milestone boxes (z-1), below the nodes (z-3) so wires read clearly */
.fl-edge-halo{ fill:none; stroke:#fff; stroke-width:7; stroke-linecap:round; }   /* white halo so the wire stands out on the dotted canvas */
.fl-edge{ fill:none; stroke:#334155; stroke-width:3; stroke-linecap:round; }
.fl-edge.flow{ stroke-dasharray:4 3; } .fl-edge.tmp{ stroke:var(--accent); stroke-width:2; stroke-dasharray:5 4; }
.fl-hit{ fill:none; stroke:transparent; stroke-width:12; pointer-events:stroke; cursor:pointer; }
.xnote{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px; margin-bottom:14px; background:var(--accent-sf); border:1px solid #C7D2FE; border-radius:11px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.xnote b{ color:var(--ink); font-weight:680; }
.xnote .xnote-i{ flex-shrink:0; width:26px; height:26px; border-radius:8px; background:#fff; display:grid; place-items:center; color:var(--accent); margin-top:1px; }
.xnote .xnote-i svg{ width:15px; height:15px; }
.xnote.slim{ padding:9px 12px; font-size:12px; }
.cmp-day .cmp-dd{ font-size:9.5px; color:var(--ink-3); }
.cmp-dl{ width:100%; height:4px; border-radius:3px; background:var(--line); overflow:hidden; margin:1px 0; }
.cmp-dl u{ display:block; height:100%; }
.cmp-dl u.lv-free{ background:#E0E7FF; } .cmp-dl u.lv-some{ background:#A5B4FC; } .cmp-dl u.lv-busy{ background:var(--accent); } .cmp-dl u.lv-full{ background:var(--reopen); }
.cmp-day em{ font-size:9px; font-style:normal; font-weight:650; }
.cmp-day em.cmp-free{ color:var(--accent); } .cmp-day em.cmp-set{ color:var(--accent-d); } .cmp-day em.cmp-nofit{ color:var(--ink-3); }
.shake{ animation:shake .35s var(--ease); border-color:var(--reopen)!important; }
@keyframes shake{ 0%,100%{transform:none} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* ====================== FLOW · stage bands + detach tray ====================== */
.fl-band{ position:absolute; z-index:0; border-radius:12px; background:rgba(15,23,42,.022); border:1.5px dashed transparent; transition:background .13s var(--ease), border-color .13s var(--ease); }
.fl-band:nth-child(even){ background:rgba(15,23,42,.04); }
.fl-band-h{ position:absolute; top:8px; left:12px; right:12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.045em; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fl-band.drop{ background:var(--accent-sf); border-color:var(--accent); }
.fl-band.drop .fl-band-h{ color:var(--accent-d); }
.fl-tray{ position:absolute; z-index:0; border-radius:12px; background:rgba(197,138,30,.055); border:1.5px dashed var(--line-2); transition:background .13s var(--ease), border-color .13s var(--ease); }
.fl-tray-h{ position:absolute; top:9px; left:14px; display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:650; color:var(--ink-3); }
.fl-tray-h svg{ width:14px;height:14px; }
.fl-tray.drop{ background:var(--review-bg); border-color:var(--review); }
.fl-tray.drop .fl-tray-h{ color:#9a6a14; }

/* ====================== FLOW · node menu + detached state ====================== */
.fn-top .fn-nm{ flex:1; }
.fn-menu{ margin-left:auto; width:22px; height:22px; border-radius:6px; color:var(--ink-3); display:grid; place-items:center; opacity:0; transition:.12s; flex-shrink:0; }
.fn-menu svg{ width:16px;height:16px; }
.fn:hover .fn-menu,.fn-menu:focus-visible{ opacity:1; } .fn-menu:hover{ background:var(--paper); color:var(--ink); }
.fn.detached{ border-style:dashed; border-color:var(--review); background:#fffdf7; }
.fn.detached .fn-dot{ box-shadow:0 0 0 2px #fffdf7; }
.fn-stg.det{ display:inline-flex; align-items:center; gap:4px; color:var(--review); font-weight:700; }
.fn-stg.det svg{ width:11px;height:11px; }

.menu{ position:fixed; z-index:55; width:252px; max-height:74vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--sh-lg); padding:6px; opacity:0; transform:scale(.97); transform-origin:top left; pointer-events:none; transition:opacity .12s var(--ease), transform .12s var(--ease); }
.menu.show{ opacity:1; transform:scale(1); pointer-events:auto; }
.mn-h{ font-size:12.5px; font-weight:700; color:var(--ink); padding:7px 9px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-sec{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; padding:8px 9px 3px; }
.mn-i{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 9px; border-radius:8px; font-size:13px; font-weight:550; color:var(--ink); }
.mn-i:hover{ background:var(--paper); }
.mn-i.cur{ color:var(--accent); font-weight:650; }
.mn-ic{ width:18px; height:18px; display:grid; place-items:center; color:var(--ink-3); flex-shrink:0; font-size:13px; }
.mn-ic svg{ width:15px;height:15px; }
.mn-i.cur .mn-ic{ color:var(--accent); }
.mn-l{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-ck{ width:15px; color:var(--accent); flex-shrink:0; } .mn-ck svg{ width:15px;height:15px; }
.mn-div{ height:1px; background:var(--line); margin:5px 4px; }
.mn-i.danger{ color:var(--reopen); } .mn-i.danger .mn-ic{ color:var(--reopen); } .mn-i.danger:hover{ background:var(--reopen-bg); }
.mn-empty{ font-size:12px; color:var(--ink-3); padding:8px 9px; }

/* ====================== FLOWS · index table ====================== */
.ft-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; }
.ft-head,.ft-row{ display:grid; grid-template-columns:38px minmax(180px,1.3fr) minmax(150px,1fr) minmax(220px,1.5fr) 120px 160px 30px; align-items:center; gap:14px; padding:0 16px; }
.ft-head{ height:42px; border-bottom:1px solid var(--line); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); background:var(--paper); }
.ft-row{ min-height:66px; padding-top:11px; padding-bottom:11px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s; }
.ft-row:last-child{ border-bottom:none; }
.ft-row:hover{ background:var(--paper); }
.ft-row:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.ft-n{ font-size:12px; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ft-name{ display:flex; align-items:center; gap:9px; min-width:0; }
.ft-name .ft-ic{ width:30px; height:30px; border-radius:8px; background:var(--accent-sf); color:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.ft-name .ft-ic svg{ width:17px; height:17px; }
.ft-name b{ font-size:14px; font-weight:680; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ft-projs{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ft-proj{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-2); min-width:0; }
.ft-proj .mono{ width:20px; height:20px; border-radius:5px; display:grid; place-items:center; font-size:8.5px; font-weight:700; flex-shrink:0; }
.ft-pn{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ft-ms{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.ft-pill{ font-size:10.5px; font-weight:650; padding:3px 8px; border-radius:6px; white-space:nowrap; max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.ft-pill.more{ background:var(--paper); color:var(--ink-3); }
.ft-tc{ font-size:10.5px; color:var(--ink-3); font-weight:600; width:100%; margin-top:1px; }
.ft-avs{ display:flex; align-items:center; }
.ft-avs .ft-av{ margin-left:-7px; } .ft-avs .ft-av:first-child{ margin-left:0; }
.ft-avs .av{ border-color:var(--surface); }
.ft-more{ font-size:10.5px; font-weight:700; color:var(--ink-3); margin-left:4px; }
.ft-tl{ display:flex; flex-direction:column; gap:5px; }
.ft-tl-d{ font-size:11.5px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ft-tl-bar{ position:relative; height:6px; border-radius:5px; background:var(--line); overflow:visible; }
.ft-tl-bar > i{ position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:var(--accent); }
.ft-tl-bar.upcoming > i{ background:var(--todo); } .ft-tl-bar.past > i{ background:var(--done); }
.ft-tl-now{ position:absolute; top:-3px; width:2px; height:12px; background:var(--reopen); border-radius:2px; }
.ft-go{ color:var(--ink-3); display:grid; place-items:center; } .ft-go svg{ width:16px; height:16px; }
.ft-row:hover .ft-go{ color:var(--accent); }
.ft-none{ font-size:12px; color:var(--ink-3); }
@media (max-width:1080px){ .ft-head,.ft-row{ grid-template-columns:30px 1.3fr 1fr 1.4fr 96px 30px; } .ft-head span:nth-child(6),.ft-row > span:nth-child(6){ display:none; } }

/* ====================== FLOW CANVAS · milestone containers ====================== */
.fl-title{ cursor:text; border-bottom:1.5px dashed transparent; }
.fl-title:hover{ border-bottom-color:var(--line-2); }
.fl-name-edit{ font-family:var(--serif); font-size:30px; font-weight:600; letter-spacing:-.01em; border:none; outline:none; background:var(--accent-sf); border-radius:8px; padding:0 8px; color:var(--ink); width:min(560px,80%); }
/* the flow name now lives in the breadcrumb, so the rename field must inherit crumb type */
.crumbs .fl-name-edit{ font-family:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; padding:1px 6px; width:auto; min-width:180px; max-width:min(420px,50vw); }
.fc-box{ position:absolute; z-index:1; border:1.5px dashed var(--line-2); border-radius:14px; background:rgba(15,23,42,.014); transition:border-color .13s var(--ease), background .13s var(--ease); }
.fc-box .fc-h{ position:absolute; top:0; left:12px; right:12px; height:30px; display:flex; align-items:center; gap:8px; transform:translateY(-50%); }
.fc-stg{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:6px; flex-shrink:0; }
.fc-name{ flex:1; min-width:36px; font-size:13px; font-weight:700; color:var(--ink); cursor:text; background:var(--surface); padding:2px 6px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:0 0 0 1px var(--line); }
.fc-box .tk-edit.ms{ flex:1; min-width:36px; }
.fc-box .tk-edit.ms{ background:var(--accent-sf); box-shadow:0 0 0 1px var(--accent); }
.fc-cnt{ font-size:10.5px; font-weight:650; color:var(--ink-3); background:var(--surface); padding:2px 6px; border-radius:6px; box-shadow:0 0 0 1px var(--line); }
.fc-proj{ width:20px; height:20px; border-radius:5px; display:grid; place-items:center; font-size:8.5px; font-weight:700; flex-shrink:0; box-shadow:0 0 0 1px var(--surface); }
.fc-re,.fc-x{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex-shrink:0; background:var(--surface); box-shadow:0 0 0 1px var(--line); }
.fc-re{ color:var(--reopen); } .fc-re svg{ width:13px; height:13px; } .fc-re:hover{ background:var(--reopen-bg); }
.fc-x{ color:var(--ink-3); } .fc-x svg{ width:12px; height:12px; } .fc-x:hover{ background:var(--reopen-bg); color:var(--reopen); }
.fc-box.drop{ border-color:var(--accent); border-style:solid; background:var(--accent-sf); }
.fc-box.empty{ border-color:var(--line-2); }
.fc-empty{ position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:12px; color:var(--ink-3); }
.fc-blank{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); text-align:center; font-size:14px; color:var(--ink-3); }
.fc-task .fn-sel{ position:absolute; left:-9px; top:-9px; width:20px; height:20px; border-radius:6px; background:var(--surface); border:1.5px solid var(--line-2); color:#fff; display:grid; place-items:center; opacity:0; transition:.12s; z-index:4; }
.fc-task .fn-sel svg{ width:13px; height:13px; }
.fc-task:hover .fn-sel,.fc-task.sel .fn-sel{ opacity:1; }
.fc-task.sel .fn-sel.on{ background:var(--accent); border-color:var(--accent); }
.fc-task.sel{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-sf), var(--sh-m); }
.fc-selbar{ position:sticky; bottom:18px; margin:14px auto 0; width:max-content; display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:8px 10px 8px 16px; border-radius:12px; box-shadow:var(--sh-lg); z-index:20; }
.fc-selbar b{ font-weight:700; }
.fc-selbar .btn.sm{ padding:6px 11px; font-size:12px; }
.fc-selx{ font-size:12px; font-weight:600; color:rgba(255,255,255,.7); padding:5px 8px; border-radius:7px; }
.fc-selx:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* milestone drag grip + menu button */
.fc-grip{ font-size:12px; line-height:1; color:var(--ink-3); cursor:grab; padding:2px 1px; flex-shrink:0; letter-spacing:-1px; user-select:none; }
.fc-box:active .fc-grip{ cursor:grabbing; }
.fc-mn{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex-shrink:0; background:var(--surface); box-shadow:0 0 0 1px var(--line); color:var(--ink-3); }
.fc-mn svg{ width:16px; height:16px; } .fc-mn:hover{ background:var(--paper); color:var(--ink); }
.fc-box{ cursor:grab; } .fc-box:active{ cursor:grabbing; }
.fc-box.empty .fc-empty{ pointer-events:none; }

/* loose / imported tasks */
.fc-task.loose{ border-style:dashed; border-color:var(--review); background:#fffdf7; }
.fc-task.loose .fn-dot{ box-shadow:0 0 0 2px #fffdf7; }
.fn-loose{ margin-left:auto; font-weight:700; color:var(--review); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; }
.fc-loose-h{ position:absolute; z-index:0; display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:650; color:var(--ink-3); }
.fc-loose-h svg{ width:14px; height:14px; }

/* import modal */
.imp-search{ margin-bottom:12px; }
.imp-list{ max-height:50vh; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:4px; margin-bottom:14px; }
.imp-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 9px; border-radius:8px; font-size:13px; }
.imp-row:hover{ background:var(--paper); }

/* description-only task cells */
.t-desc2{font-size:13px;color:var(--ink);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:520px}
.tbl tbody td .t-desc2{font-weight:500}

/* ===== completed task = struck through, everywhere its name is shown.
   The renderer puts .done on the row / card / bar; here we strike the name inside it. */
.trow.done .t-desc2,
.trow.done .t-name,
.tc.done .t-desc2,
.fn.s-done .fn-nm,
.srch-r.done .srch-nm,
.imp-row.done .imp-nm,
.kadd.done .kadd-nm,
.crumbs .cur.done,
.blk.own.done .bl{
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:currentColor;
}
/* the strike carries the "done" signal, so the text itself can recede */
.trow.done .t-desc2,
.trow.done .t-name,
.tc.done .t-desc2,
.srch-r.done .srch-nm,
.imp-row.done .imp-nm,
.kadd.done .kadd-nm{ color:var(--ink-3); }
/* on a coloured timeline bar the label is white — keep it legible, just struck */
.blk.own.done .bl{ text-decoration-thickness:1px; opacity:.85; }

/* timeline block resize handles */
.blk .rh{position:absolute;top:0;bottom:0;width:6px;cursor:ew-resize;z-index:4}
.blk .rh.l{left:0}.blk .rh.r{right:0}
.blk.own[data-blk="move"]{cursor:grab}.blk.own[data-blk="move"]:active{cursor:grabbing}

/* hover tooltip + flow import dialog */
.bktip{position:fixed;z-index:120;width:300px;max-width:92vw;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;box-shadow:0 18px 44px -12px rgba(15,23,42,.34);pointer-events:none;display:flex;flex-direction:column;gap:5px}
.bktip-h{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;font-weight:700}
.bktip-h b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;font-weight:700}
.bktip-h .sdot{margin-top:5px;flex:none}
.bktip-d{font-size:12px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bktip-m{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.bktip-r{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);font-weight:600;margin-top:2px}
.bktip-status{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line,#eef1f6)}
/* ---- redesigned task preview card (showTaskTip) ---- */
.tt-card{display:flex;flex-direction:column;}
.tt-title{font-size:14px;font-weight:750;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-desc{font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tt-meta{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.tt-mrow{display:flex;align-items:center;gap:10px;min-width:0}
.tt-mono{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none;letter-spacing:.02em}
.tt-avs{display:flex;flex:none}
.tt-avs .av{width:32px;height:32px;font-size:12px;margin-left:-8px;border:2px solid var(--surface,#fff)}
.tt-avs .av:first-child{margin-left:0}
.tt-mtext{min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.tt-mtext b{font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a shared task: this person's share of it */
.tt-share{font-weight:600;color:var(--ink-3)}
.tt-mtext span{font-size:11px;color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ONE footer row: the status, then the two actions.
   It used to be two stacked rows, each with its own divider — a select stretched
   to the full width of the card for four words of text, then a pair of buttons
   below it captioned "Edit" and "Delete" beside icons that already said so. The
   status is now a chip that shrinks to its own label, and the actions are icons.
   The card lost a third of its height and every pixel it kept is doing work. */
.tt-foot{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.tt-status{position:relative;display:inline-flex;align-items:center;gap:7px;padding:0 8px 0 10px;height:32px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface,#fff);color:var(--ink);transition:border-color .12s,background .12s}
.tt-status:hover{border-color:var(--sc)}
.tt-status:focus-within{border-color:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 18%,transparent)}
.tt-sdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 15%,transparent)}
/* The chip is sized by its OWN label. A native <select> lays itself out to fit
   its WIDEST option — so "To do" rendered a 160px control, because "Needs
   changes" exists somewhere down the list. The select is still the real control
   (it carries the menu, the keyboard and the a11y) but it is stretched invisibly
   across the chip, and the visible text is a plain span that shrinks to fit. */
.tt-slab{font-size:12.5px;font-weight:650;white-space:nowrap;color:var(--ink)}
.tt-sel{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit}
.tt-chev{width:13px;height:13px;flex:none;color:var(--ink-3);pointer-events:none}
.tt-status:hover .tt-chev{color:var(--ink-2)}
.bktip-sel{flex:1;font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line,#d5dde8);border-radius:7px;padding:5px 7px;background:var(--card,#fff);color:var(--ink,#0f172a);cursor:pointer}
.bktip-sel:hover{border-color:#b9d3f5}
.tp-statussel{border:1px solid var(--line,#d5dde8);cursor:pointer;background:var(--card,#fff)}
.tp-statussel:hover{border-color:#b9d3f5}
.imp-list{max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:5px}
.imp-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px}
.imp-row:hover{border-color:#cfd4ff;background:#fbfbff}
.imp-row.on{border-color:var(--accent);background:var(--accent-sf)}
.imp-ck{width:18px;height:18px;border-radius:6px;border:2px solid #cfd5e2;display:grid;place-items:center;color:#fff;flex:none}
.imp-row.on .imp-ck{background:var(--accent);border-color:var(--accent)}
.imp-ck svg{width:12px;height:12px}
.imp-nm{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imp-loc{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--ink-3);font-weight:600;white-space:nowrap}

/* rich tooltip rows + empty states */
.bktip-li{display:flex;align-items:center;gap:7px;font-size:12px;padding:2px 0}
.bktip-li .sdot{flex:none}
.bktip-li-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);font-weight:550}
.bktip-li-t{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bktip-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.sdot.s-mtg{background:#475569}
.empty-state{text-align:center;padding:56px 24px;color:var(--ink-3)}
.empty-state .es-ic{width:58px;height:58px;border-radius:16px;background:var(--accent-sf);color:var(--accent);display:grid;place-items:center;margin:0 auto 16px}
.empty-state .es-ic svg{width:26px;height:26px}
.empty-state h3{margin:0 0 5px;font-size:16px;font-weight:700;color:var(--ink)}
.empty-state p{margin:0 auto 16px;font-size:13px;max-width:380px;line-height:1.5}
.empty-state .btn{display:inline-flex}

/* two-column create-task popup + multi-assignee */
.modal.modal-wide{width:min(1040px,calc(100vw - 32px))}
.ct-split{display:grid;grid-template-columns:1fr 500px;gap:0;padding:8px 0 0}
@media(max-width:900px){.ct-split{grid-template-columns:1fr}}
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.ct-grid .field.full{grid-column:1 / -1}
.ct-avail{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.ct-left{padding:14px 18px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.ct-lbl{font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:8px}
.ct-desc{flex:1;min-height:200px;width:100%;border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;font:inherit;font-size:15px;line-height:1.6;resize:none;color:var(--ink)}
.ct-desc:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,127,255,.12)}
.ct-right{padding:14px 18px 6px}
.ct-right .field{margin-bottom:13px}
.ap2{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px 4px 5px;font-size:12px;font-weight:600;color:var(--ink-2);background:#fff}
.ap2.on{border-color:var(--accent);background:var(--accent-sf);color:var(--accent-d)}
.ap-ck{display:inline-grid;place-items:center;color:var(--accent)}.ap-ck svg{width:12px;height:12px}
.assignee-pick .ap .ap-ck{margin-left:2px}
/* create-task availability bar */
.cdb-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cdb-title{font-size:12px;font-weight:650;color:var(--ink-2)}
.cdb-daynav{display:flex;align-items:center;gap:8px;margin-left:auto}
.cdb-daynav .cdb-lbl{min-width:118px;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink)}
.cdb-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px 18px}
.cdb-person{min-width:0}
.cdb-name{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--ink);margin-bottom:5px}
.cdb-name .av.sm{width:18px;height:18px;font-size:9px}
.cdb-free-n{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent-d);background:var(--accent-sf);padding:1px 8px;border-radius:999px}
.cdb-nav{width:26px;height:26px;display:inline-grid;place-items:center;border:1px solid var(--line-2);border-radius:7px;background:#fff;color:var(--ink-2);cursor:pointer}
.cdb-nav:hover{background:var(--paper);color:var(--ink)}
.cdb-nav svg{width:14px;height:14px}
.cdb-bar{position:relative;height:48px;border-radius:0;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.cdb-bar:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.cdb-bar .off{background:rgba(15,23,42,.045)}
.cdb-bar .hr{top:2px;font-size:8.5px;color:var(--ink-3)}
.cdb-free{position:absolute;top:18px;bottom:5px;background:repeating-linear-gradient(45deg,var(--accent-sf),var(--accent-sf) 5px,#dcebff 5px,#dcebff 10px);border:1px dashed #9fc6ff;border-radius:0;display:flex;align-items:center;justify-content:center;z-index:1}
.cdb-free em{font-size:9px;font-weight:700;color:var(--accent-d);font-style:normal;white-space:nowrap}
.cdb-bar .cdb-blk{position:absolute;top:18px;bottom:5px;border-radius:0;display:flex;align-items:center;padding:0 6px;overflow:hidden;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);opacity:.4}
.cdb-blk b{font-size:9.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdb-blk.mtg{background:repeating-linear-gradient(45deg,#475569,#475569 6px,#3f4a5e 6px,#3f4a5e 12px)}
.cdb-sel{position:absolute;top:18px;bottom:5px;background:var(--accent);z-index:6;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px #fff,0 2px 7px rgba(0,127,255,.5);pointer-events:none}
.cdb-sel b{font-size:9px;font-weight:800;color:#fff;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.cdb-hover{position:absolute;top:18px;bottom:5px;background:rgba(0,127,255,.16);border:1.5px dashed var(--accent);z-index:5;pointer-events:none}
.ct-foot{gap:10px}

/* ══ the create dialog's Chrome-style tab strip ══════════════════════════
   Chrome's tab, not ours: the active tab is a raised surface CONTINUOUS with
   the pane below it — same white, no seam — while the inactive tabs sit back
   in the frame. That geometry is the message: you are not filtering a list,
   you are choosing which sheet of paper is on top.

   The outward flare at the active tab's base is the giveaway detail. It's two
   transparent squares with a rounded corner and a spread box-shadow the colour
   of the pane, which paints the concave curve where the tab meets the strip. */
/* NO negative margins here. `#modal.modal` (an id selector, so it wins) sets
   padding:0 — every child pads itself, which is why .modal-head/.modal-foot
   carry their own 20px. Pulling -20px to "escape" padding that isn't there put
   the strip 20px outside the modal on both axes: the tab's top 10px was clipped
   away (taking its rounded corners with it), the strip was 40px wider than the
   modal, and scrollWidth exceeded clientWidth — a real horizontal overflow that
   only overflow-x:hidden was hiding. */
.ctabs{ padding:10px 10px 0; background:#E9EDF3;
  border-bottom:1px solid var(--line); border-radius:16px 16px 0 0; }
/* The 8px inset is load-bearing: the first tab's left flare is 7px wide + 2px of
   shadow spread, so without it the active first tab's white reaches the modal
   edge and reads as a corner block, not a lifted tab. Chrome insets its first
   tab from the frame for exactly this reason — the strip has to stay visible
   on BOTH sides of a tab for the tab to look like one. */
.ctabs-in{ display:flex; align-items:flex-end; gap:2px; padding-left:8px; }
.ctab{ position:relative; display:flex; align-items:center; gap:7px;
  padding:9px 17px 10px; border:0; background:transparent; cursor:pointer;
  border-radius:10px 10px 0 0; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--ink-3); letter-spacing:-.1px; white-space:nowrap; margin-bottom:-1px;
  transition:background .15s var(--ease), color .15s var(--ease); }
.ctab:hover{ background:rgba(255,255,255,.5); color:var(--ink-2); }
.ctab .ctab-ic{ display:grid; place-items:center; width:15px; height:15px; opacity:.75; }
.ctab .ctab-ic svg{ width:15px; height:15px; display:block; }
.ctab.on{ background:var(--surface); color:var(--ink); font-weight:700; }
.ctab.on .ctab-ic{ opacity:1; color:var(--accent); }
.ctab.on:hover{ background:var(--surface); }
/* the concave flare where the raised tab meets the strip */
.ctab.on::before,.ctab.on::after{ content:''; position:absolute; bottom:0; width:7px; height:7px;
  background:transparent; pointer-events:none; }
.ctab.on::before{ left:-7px; border-bottom-right-radius:8px; box-shadow:2px 2px 0 2px var(--surface); }
.ctab.on::after{ right:-7px; border-bottom-left-radius:8px; box-shadow:-2px 2px 0 2px var(--surface); }
.ctab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* NB: the first tab flares on its LEFT too. It was suppressed here on the theory
   that there is no neighbour to curve into — but the curve isn't about the
   neighbour, it's about the tab meeting the strip, and Chrome draws it on the
   leftmost tab exactly the same. Without it the active tab flares right and
   sits square left, and the asymmetry is the first thing you notice. The
   strip's 10px left padding leaves room for the 7px flare + 2px spread. */

/* the pane the tabs sit on. It re-renders on switch, so the transition lives
   here as an entry animation rather than on the tab (which is a new element). */
.ct-pane{ animation:ctPane .19s var(--ease) both; }
@keyframes ctPane{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
/* One line, sitting close under the strip. It used to be three sentences
   floating in a dead band: two of them narrated the layout ("describe the work
   on the left · set the options on the right"), which the layout already says
   better than prose can. Only the non-obvious clause survives. */
/* 18px matches .ct-left's padding so the hint shares a left edge with the field
   labels beneath it, instead of hanging out into the gutter on its own. */
.ct-hint{ margin:13px 0 0; padding:0 18px; font-size:12.5px; line-height:1.4; color:var(--ink-3); }
.ct-pane .ct-hint+.ct-split{ padding-top:2px; }
@media (prefers-reduced-motion:reduce){ .ct-pane{ animation:none } .ctab{ transition:none } }

/* ── the reminder pane ──────────────────────────────────────────────────── */
.rm-quick{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:2px; }
.rm-quick-l{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); margin-right:2px; }
.rm-chip{ padding:5px 11px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface);
  font-family:inherit; font-size:12px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:border-color .12s, color .12s, background .12s; }
.rm-chip:hover{ border-color:var(--accent); color:var(--accent-d); }
.rm-chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.rm-warn{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; padding:9px 11px;
  background:#FFFBEB; border:1px solid #FDE68A; border-radius:9px; font-size:12px; color:#92400E; }
.rm-warn svg{ width:14px; height:14px; flex:0 0 14px; margin-top:1px; }
/* A reminder is invisible until you see WHERE it lands — so draw the day it is
   landing in, with the work already on it. Setting a reminder in the middle of
   a client review should be visible BEFORE you set it, not after. */
.rm-prev{ margin-top:8px; }
.rm-prev-bar{ position:relative; height:52px; border-radius:8px; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.rm-prev-off{ position:absolute; top:0; bottom:0; background:rgba(15,23,42,.05); }
.rm-prev-lun{ position:absolute; top:0; bottom:0;
  background:repeating-linear-gradient(45deg,#F6F4EE,#F6F4EE 5px,#EFEDE5 5px,#EFEDE5 10px); }
.rm-prev-blk{ position:absolute; top:9px; bottom:9px; border-radius:3px; opacity:.34; }
.rm-prev-now{ position:absolute; top:0; bottom:0; width:2px; background:#EF4444; z-index:3; }
.rm-prev-pin{ position:absolute; top:50%; margin-top:-11px; z-index:4; transform:translateX(-50%);
  display:grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:#475569; color:#fff; box-shadow:0 0 0 2px #fff, 0 2px 5px rgba(15,23,43,.32);
  transition:left .21s var(--ease); }
.rm-prev-pin svg{ width:11px; height:11px; display:block; }
.rm-prev-ax{ position:relative; height:14px; margin-top:5px; }
.rm-prev-ax span{ position:absolute; transform:translateX(-50%); font-size:9.5px; font-weight:600;
  color:var(--ink-3); white-space:nowrap; }
.rm-prev-say{ margin:11px 0 0; font-size:12.5px; color:var(--ink-3); }
.rm-prev-say b{ color:var(--ink); font-weight:700; }
@media (prefers-reduced-motion:reduce){ .rm-prev-pin{ transition:none } }
@media(max-width:640px){ .ctab{ padding:9px 12px 10px; font-size:12.5px } .rm-form{ padding:12px 0 4px } }
.cdb-pick{margin-top:11px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.cdb-pick.on{display:flex;align-items:center;gap:7px;color:var(--ink)}
.cdb-pick.on b{color:var(--accent-d);font-weight:750}
.cdb-clear{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-2);border:1px solid var(--line-2);border-radius:7px;padding:3px 10px;background:#fff;cursor:pointer}
.cdb-clear:hover{color:var(--reopen);border-color:var(--reopen)}


/* top-bar back / forward */
.tb-navbtns{display:inline-flex;align-items:center;background:rgba(120,120,128,.1);border-radius:10px;padding:2px;margin-right:2px}
.tb-nav{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#64748B}
.tb-nav:hover:not(:disabled){background:#fff;color:var(--accent)}
.tb-nav:disabled{opacity:.32;cursor:default}
.tb-nav svg{width:18px;height:18px}
.tb-nav[data-navfwd] svg{transform:none}

/* breadcrumb task-id chip */
.crumbs .cr-id{font-size:11px;font-weight:650;color:var(--ink-3);background:var(--side-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-variant-numeric:tabular-nums;margin-left:2px}

/* ============================================================
   Instruction capsule tooltip — matches product InstructionTooltip
   bg #0F172B, white 12px medium, rounded, arrow, fade+zoom
   ============================================================ */
.captip{position:fixed;z-index:200;max-width:220px;background:#0F172B;color:#fff;font-size:12px;font-weight:500;line-height:1.35;text-align:center;border-radius:9px;padding:6px 10px;box-shadow:0 6px 20px rgba(15,23,43,.25);pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .12s ease,transform .12s ease}
.captip.show{opacity:1;transform:scale(1)}
.captip-arrow{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #0F172B}
.captip.below .captip-arrow{top:auto;bottom:100%;border-top:0;border-bottom:6px solid #0F172B}

/* clock pill states + menu */
.tb-clock.paused{background:#7c5510}
/* Was slate grey, which read as DISABLED — the one control we most want pressed.
   Accent blue, with a play button and today's date. Never dimmed for office hours. */
.tb-clock.out{background:var(--accent)}
.tb-clock.out:hover{filter:brightness(1.07)}
.tb-date{font-style:normal;font-weight:600;opacity:.72;font-size:12px;padding-left:7px;margin-left:1px;border-left:1px solid rgba(255,255,255,.28)}
.ci-pop{padding:6px}
.ci-h{padding:8px 10px 6px}
.ci-h b{display:block;font-size:13px;font-weight:700}
.ci-h span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.ci-oh{display:flex;align-items:center;gap:8px;margin:2px 4px 6px;padding:8px 10px;border-radius:9px;background:#FFFBEB;border:1px solid #FDE68A}
.ci-oh-x{min-width:0;flex:1}
.ci-oh-t{font-size:11.5px;font-weight:700;color:#92400E}
.ci-oh-s{font-size:11.5px;color:#B45309;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-oh-s.none{font-style:italic;opacity:.8}
.ci-oh-b{flex:none;font-size:11px;font-weight:700;color:#92400E;background:#FDE68A;border-radius:7px;padding:4px 8px;cursor:pointer}
.ci-oh-b:hover{background:#FCD34D}
.ci-mi{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.ci-mi:hover{background:var(--side-2)}
.ci-mi i{display:inline-grid;place-items:center;width:18px;height:18px}.ci-mi i svg{width:16px;height:16px}
.ci-mi.green i{color:#10B981}.ci-mi.amber i{color:#F59E0B}.ci-mi.red i{color:#EF4444}
.ci-mi.red{color:#b91c1c}
.ci-foot{font-size:11px;color:var(--ink-3);padding:7px 10px 4px;border-top:1px solid var(--line);margin-top:4px}

/* settings — product-faithful */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.field-grid{grid-template-columns:1fr}}
.set-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px}
.set-sec-ic{width:32px;height:32px;border-radius:9px;background:var(--accent-sf);color:var(--accent);display:grid;place-items:center;flex:none;font-weight:800}
.set-sec-ic svg{width:17px;height:17px}
.set-help{font-size:12px;color:var(--ink-3);line-height:1.5;margin:2px 0 12px}
.set-sec{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.set-sec h4{margin:0 0 4px;font-size:14px;font-weight:700}
.set-sec.danger h4{color:#b91c1c}
.btn.danger{border-color:#fecaca;color:#b91c1c}.btn.danger:hover{background:#fef2f2}
.you-badge{font-size:9.5px;font-weight:700;background:var(--accent-sf);color:var(--accent-d);border-radius:5px;padding:1px 6px;vertical-align:1px}
.tier-badge{font-size:11px;font-weight:700;border-radius:7px;padding:3px 9px;white-space:nowrap}
.icon-btn{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3)}
.icon-btn:hover{background:#fef2f2;color:#ef4444}.icon-btn svg{width:15px;height:15px}
.roles-list,.week-rows{display:flex;flex-direction:column;gap:8px}
.role-row{display:flex;align-items:center;gap:9px}
.role-in{flex:1;border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;font:inherit;font-size:13px}
.perm-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.perm-toggles{display:flex;gap:6px}
.pt{font-size:11.5px;font-weight:650;padding:5px 11px;border-radius:8px;background:#f1f5f9;color:var(--ink-3);cursor:pointer}
.pt.on{background:var(--accent-sf);color:var(--accent-d)}
.week-row{display:flex;align-items:center;gap:14px}
.week-row .wd{width:44px;font-size:13px;font-weight:650}
.fho{display:inline-flex;align-items:center;gap:4px;background:#f1f5f9;border-radius:9px;padding:3px}
.fho-b{font-size:12px;font-weight:650;height:26px;padding:0 14px;line-height:1;border-radius:7px;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center}
.fho-b.on{background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.fho-b.on.full{color:var(--accent-d)}.fho-b.on.half{color:#c2710c}.fho-b.on.off{color:var(--ink-3)}
.stepper-in{display:inline-flex;align-items:center;gap:10px;background:#f1f5f9;border-radius:9px;padding:4px}
.stepper-in button{width:26px;height:26px;border-radius:7px;background:#fff;box-shadow:var(--sh);font-size:15px;font-weight:600;color:var(--ink-2)}
.stepper-in b{min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.sw{width:38px;height:22px;border-radius:999px;background:#cbd5e1;position:relative;cursor:pointer;flex:none;transition:.15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s;box-shadow:var(--sh)}
.sw.on{background:var(--accent)}.sw.on::after{left:18px}
.sal-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line)}
.sal-edit{display:flex;align-items:center;gap:6px}
.sal-edit input{border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px;text-align:right}
.set-card{margin-bottom:16px}

/* ---- team hierarchy · view-as · permissions · finance (2.0) ---- */
.ro-note{font-size:11px;font-weight:650;color:var(--ink-3);background:#f1f5f9;border-radius:7px;padding:3px 9px;white-space:nowrap}
.va-card{background:linear-gradient(180deg,#f8fbff,#fff)}
.va-top{display:flex;align-items:flex-start;gap:12px}
.va-chips{display:inline-flex;gap:5px;background:#eef2f7;border-radius:10px;padding:4px}
.va-chip{font-size:12px;font-weight:650;height:30px;padding:0 13px;border-radius:8px;color:var(--ink-2);display:inline-flex;align-items:center;white-space:nowrap}
.va-chip.on{background:#fff;color:var(--accent-d);box-shadow:0 1px 3px rgba(15,23,42,.12)}
.va-banner{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:9px 12px}
.va-exit{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent-d);background:#fff;border:1px solid var(--line-2);border-radius:7px;padding:4px 10px;cursor:pointer}
.mem-block{border-bottom:1px solid var(--line)}.mem-block:last-child{border-bottom:0}.mem-block .set-row{border-bottom:0}
.mm-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:0 0 12px 46px}
.mm-field{display:flex;flex-direction:column;gap:3px}
.mm-field>span{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3)}
.mm-sel{border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;cursor:pointer}
.mm-row .btn.xs{height:32px;padding:0 11px;font-size:12px;align-self:flex-end}
.pt.locked{background:var(--accent-sf);color:var(--accent-d);cursor:default;opacity:.85}
.pt.ro{cursor:default;opacity:.7}
.sw.ro,.role-tag.ro{opacity:.6;cursor:default}
.fin-lock{display:flex;align-items:center;gap:14px;padding:8px 4px;font-size:30px}
.fin-lock svg{width:34px;height:34px;color:var(--ink-3)}
.fin-auth{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0 12px;margin-bottom:4px}
.auth-row{display:flex;align-items:center;gap:11px;padding:7px 0}
.auth-ck{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none;cursor:pointer;color:#fff;background:#fff}
.auth-ck svg{width:13px;height:13px}
.auth-ck.on{background:var(--accent);border-color:var(--accent)}
.auth-row.on .nm{color:var(--ink)}
.cost-toggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--ink-2);cursor:pointer;background:#f1f5f9;border-radius:10px;padding:6px 12px}
.cost-cell{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;color:#0369a1;background:#e0f2fe;border-radius:6px;padding:1px 7px;vertical-align:1px}
.tb-preview{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;font-size:12px;font-weight:700;color:#92400e;background:#fffbeb;border:1px solid #fde68a;cursor:pointer;white-space:nowrap}
.tb-preview:hover{background:#fef3c7}

/* fix: neutralize a leftover forked .modal rule that set pointer-events:none
   (was making every modal click pass through to the scrim) */
#modal.modal{pointer-events:auto;padding:0;border:0;z-index:51;width:min(540px,calc(100vw - 32px))}
#modal.modal.modal-wide{width:min(1040px,calc(100vw - 32px))}
#scrim.scrim{z-index:40}

/* interactive timeline tooltip + create-task CTA */
.bktip{pointer-events:auto}
.bktip-cta{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.bktip-newbtn{display:inline-flex;align-items:center;gap:6px;width:100%;justify-content:center;padding:7px 10px;border-radius:9px;background:var(--accent-sf);color:var(--accent-d);box-shadow:inset 0 0 0 1px rgba(0,127,255,.22);font-size:12.5px;font-weight:650;cursor:pointer}
.bktip-newbtn:hover{background:#dbeafe}
.bktip-newbtn svg{width:13px;height:13px}
.sched-newbtn{margin-top:4px}

/* sidebar collapse toggle + collapsed icon rail */
.sb-brand{position:relative}
.sb-toggle{margin-left:auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.sb-toggle:hover{background:var(--side-2);color:var(--accent)}
.sb-toggle svg{width:18px;height:18px}
.rail{transition:width .18s var(--ease),flex-basis .18s var(--ease)}
.rail.collapsed{width:72px;flex:0 0 72px}
.rail.collapsed .sb-brand{justify-content:center;gap:0;padding:6px 0 16px}
.rail.collapsed .sb-brand b,.rail.collapsed .sb-beta{display:none}
.rail.collapsed .sb-toggle{position:absolute;top:-2px;right:-2px;width:24px;height:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.rail.collapsed .sb-toggle svg{width:14px;height:14px}
.rail.collapsed .sb-item{justify-content:center;padding:0;gap:0}
.rail.collapsed .sb-item span:not(.ct){display:none}
.rail.collapsed .sb-item .ct{position:absolute;top:6px;right:10px;margin:0;min-width:15px;height:15px;font-size:9px;background:var(--accent);color:#fff;border-radius:999px;display:grid;place-items:center;padding:0 3px}
.rail.collapsed .sb-item{position:relative}
.rail.collapsed .sb-foot .sb-team>div{display:none}
.rail.collapsed .sb-foot .sb-team{justify-content:center}
.tz-sel{padding:7px 10px;border:1px solid var(--line-2);border-radius:9px;font:inherit;font-size:13px;font-weight:600;background:#fff;cursor:pointer}
.set-row .nm svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;color:var(--ink-3)}

/* break-reason quick chips */
.brk-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.brk-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.brk-chip:hover{border-color:var(--accent);color:var(--accent-d)}
.brk-chip.on{background:var(--accent-sf);border-color:#b9d4ff;color:var(--accent-d)}
.modal-head h3 svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px}

/* timeline period dropdown (replaces standalone Today button) */
.period-btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:9px;border:1px solid var(--line-2);background:#fff;font-size:13px;font-weight:650;color:var(--ink);box-shadow:var(--sh);cursor:pointer}
.period-btn:hover{border-color:#cfd4de;background:#fbfbfd}
.period-btn>svg{width:15px;height:15px;color:var(--ink-3)}
.period-btn>svg:last-child{width:14px;height:14px;margin-left:1px}
.pm{padding:6px}
.pm-sec{font-size:9.5px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);padding:8px 9px 4px}
.pm-i{display:flex;align-items:center;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.pm-i:hover{background:var(--side-2)}
.pm-i.on{color:var(--accent-d);background:var(--accent-sf)}
.pm-i svg{width:15px;height:15px;margin-left:auto;color:var(--accent)}
.pm-div{height:1px;background:var(--line);margin:5px 4px}
.pm-date,.pm-range input{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;color:var(--ink)}
.pm-range{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.pm-range input{flex:1;min-width:0}
.pm-arr{color:var(--ink-3);flex:none}
.pm-apply{width:100%;justify-content:center}

/* ============================================================
   MVP — static login gate + sign-out
   ============================================================ */
.login-scrim{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, #e9f1ff 0%, #f7f9fc 45%, #f3f5f9 100%)}
.login-card{width:min(400px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 80px -24px rgba(15,23,42,.28);padding:28px 28px 22px;display:flex;flex-direction:column}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-brand .sb-logo{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px}
.login-brand b{font-weight:750;font-size:16px;letter-spacing:-.2px}
.login-beta{display:inline-flex;align-items:center;height:17px;padding:0 6px;border-radius:5px;background:var(--accent);color:#fff;font-weight:700;font-size:9px;letter-spacing:.3px;text-transform:uppercase;vertical-align:2px}
.login-card h1{margin:0 0 5px;font-size:21px;font-weight:780;letter-spacing:-.5px}
.login-sub{margin:0 0 18px;font-size:13px;color:var(--ink-3);line-height:1.5}
.login-l{font-size:11.5px;font-weight:650;color:var(--ink-2);margin:0 0 6px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;font:inherit;font-size:14.5px;margin-bottom:13px;background:#fff}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,127,255,.14)}
.login-err{font-size:12.5px;color:#c93636;background:#fef2f2;border:1px solid #fecaca;border-radius:9px;padding:8px 11px;margin-bottom:12px}
.login-btn{width:100%;padding:12px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;font-size:14.5px;box-shadow:0 8px 20px rgba(0,127,255,.3);margin-top:2px}
.login-btn:hover{background:var(--accent-d)}
.login-hint{margin-top:14px;text-align:center;font-size:12px;color:var(--ink-3)}
.login-fill{color:var(--accent-d);font-weight:650;text-decoration:underline;text-underline-offset:2px}
.sb-logout{margin-left:auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.sb-logout:hover{background:#fef2f2;color:#ef4444}
.sb-logout svg{width:16px;height:16px}
.rail.collapsed .sb-logout{display:none}

/* ============================================================
   AVAILABILITY — "today" past-time overlay
   ============================================================ */
.cdb-past{position:absolute;top:0;bottom:0;left:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(100,116,139,.12),rgba(100,116,139,.12) 5px,rgba(100,116,139,.04) 5px,rgba(100,116,139,.04) 10px);
  box-shadow:inset -1px 0 0 rgba(100,116,139,.35)}

/* ============================================================
   ATTACHMENTS & LINKS (task composer + task detail)
   ============================================================ */
.att{margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.att-top{display:flex;align-items:center;gap:8px}
.att-top .sp{flex:1}
.att-h{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:750;letter-spacing:.5px;color:var(--ink-3);text-transform:uppercase}
.att-h svg{width:14px;height:14px}
.att-add{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink-2);font-weight:650;font-size:12px;cursor:pointer;transition:.12s}
.att-add svg{width:14px;height:14px}
.att-add:hover{background:var(--accent-sf);border-color:#bcdcff;color:var(--accent-d)}
.att-linkrow{display:flex;gap:8px;margin-top:10px}
.att-linkinput{flex:1;height:34px;padding:0 12px;border:1px solid var(--line-2);border-radius:9px;font:inherit;font-size:13px;color:var(--ink);background:#fff}
.att-linkinput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.att-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.att-empty{margin-top:10px;font-size:12px;color:var(--ink-3);line-height:1.5;background:var(--paper);border:1px dashed var(--line-2);border-radius:11px;padding:11px 13px}
.att-chip{position:relative;display:flex;align-items:center;width:min(232px,100%);border:1px solid var(--line-2);border-radius:11px;background:#fff;box-shadow:var(--sh);overflow:hidden;transition:.12s}
.att-chip:hover{border-color:#bcdcff;box-shadow:0 4px 14px rgba(15,23,42,.08)}
.att-open{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:8px 6px 8px 8px;cursor:pointer;text-decoration:none;color:inherit}
.att-thumb{flex:0 0 36px;width:36px;height:36px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--paper)}
.att-ext{flex:0 0 36px;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.02em}
.att-ext.linkic{color:var(--accent);background:rgba(0,127,255,.12)}
.att-ext.linkic svg{width:17px;height:17px}
.att-meta{display:flex;flex-direction:column;min-width:0;gap:1px}
.att-name{font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-size{font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-rm{flex:0 0 auto;width:26px;height:26px;margin-right:5px;border:0;border-radius:7px;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;transition:.12s}
.att-rm svg{width:14px;height:14px}
.att-rm:hover{background:#FEE2E2;color:var(--reopen)}

/* ============================================================
   FILE PREVIEWER (images / PDF / video / spreadsheets / 3D / cards)
   ============================================================ */
.pv-scrim{position:fixed;inset:0;z-index:320;background:rgba(8,11,18,.78);backdrop-filter:blur(3px)}
.pv{position:fixed;z-index:321;top:50%;left:50%;transform:translate(-50%,-50%);width:min(1120px,calc(100vw - 36px));height:min(86vh,900px);background:#0f1320;border-radius:16px;box-shadow:0 40px 110px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden}
.pv-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#161b2b;border-bottom:1px solid rgba(255,255,255,.07);color:#e6eaf2}
.pv-bar .sp{flex:1}
.pv-ext{flex:0 0 auto;height:26px;min-width:46px;padding:0 8px;border-radius:7px;display:inline-grid;place-items:center;font-size:11px;font-weight:800;letter-spacing:.03em}
.pv-ext.lg{height:74px;width:74px;border-radius:16px;font-size:18px;margin:0 auto}
.pv-name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.pv-sz{font-size:12px;color:#9aa4ba;white-space:nowrap}
.pv-count{font-size:12px;color:#9aa4ba;font-weight:650}
.pv-btn{width:34px;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:#e6eaf2;cursor:pointer;display:grid;place-items:center;text-decoration:none;transition:.12s}
.pv-btn svg{width:18px;height:18px}
.pv-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.pv-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.pv-body{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto}
.pv-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;display:grid;place-items:center}
.pv-arrow svg{width:24px;height:24px}
.pv-arrow:hover{background:rgba(0,0,0,.7)}
.pv-arrow.l{left:14px}.pv-arrow.r{right:14px}
.pv-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pv-frame{width:100%;height:100%;border:0;background:#fff}
.pv-media{max-width:100%;max-height:100%;background:#000}
.pv-audio{display:flex;flex-direction:column;align-items:center;gap:16px;padding:30px;color:#e6eaf2}
.pv-audio-nm{font-size:14px;font-weight:650;max-width:420px;text-align:center;word-break:break-word}
.pv-load{color:#9aa4ba;font-size:13px;font-weight:600;padding:40px}
.pv-text{margin:0;width:100%;height:100%;overflow:auto;padding:18px 20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;color:#cdd5e6;white-space:pre-wrap;word-break:break-word;background:#0f1320}
.pv-sheet{width:100%;height:100%;display:flex;flex-direction:column;background:#fff}
.pv-tabs{display:flex;gap:4px;padding:7px 10px;background:#f1f5f9;border-bottom:1px solid var(--line);overflow-x:auto;flex:0 0 auto}
.pv-tab{flex:0 0 auto;height:26px;padding:0 12px;border:1px solid var(--line-2);border-radius:7px;background:#fff;color:var(--ink-2);font-weight:650;font-size:12px;cursor:pointer;white-space:nowrap}
.pv-tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pv-sheet-scroll{flex:1;min-height:0;overflow:auto}
.pv-grid{border-collapse:collapse;font-size:12.5px;color:var(--ink);min-width:100%}
.pv-grid th,.pv-grid td{border:1px solid #e8edf3;padding:5px 10px;text-align:left;white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
.pv-grid tr:first-child th,.pv-grid th{position:sticky;top:0;background:#f8fafc;font-weight:750;color:var(--ink);z-index:1}
.pv-grid td.rn,.pv-grid th.rn{position:sticky;left:0;background:#f8fafc;color:var(--ink-3);font-weight:700;text-align:right;min-width:34px}
.pv-body canvas{display:block;border-radius:0;outline:none}
.pv-card{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;padding:34px;color:#e6eaf2;max-width:440px}
.pv-card-ic{width:96px;height:96px;border-radius:22px;display:grid;place-items:center;font-size:24px;font-weight:800;letter-spacing:.02em}
.pv-card-nm{font-size:16px;font-weight:750;color:#fff;word-break:break-word}
.pv-card-sub{font-size:12.5px;color:#9aa4ba;font-weight:600}
.pv-card-note{font-size:13px;color:#aeb8cc;line-height:1.55;margin-top:2px}
.pv-card-dl{margin-top:8px;text-decoration:none}
/* ---- attachment chip: cloud-save + annotation badges ---- */
.att-badge{flex:0 0 auto;margin-left:2px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:8px;font-size:9px;font-weight:800}
.att-badge svg{width:11px;height:11px}
.att-badge.ok{color:#16a34a;background:rgba(34,197,94,.14)}
.att-badge.up{color:#2563eb;background:rgba(37,99,235,.14);animation:attpulse 1s ease-in-out infinite}
.att-badge.err{color:#dc2626;background:rgba(220,38,38,.14)}
.att-badge.ann{color:#7c3aed;background:rgba(124,58,237,.14);font-size:10px}
@keyframes attpulse{0%,100%{opacity:.35}50%{opacity:1}}
.att-chip.uploading{opacity:.85}

/* ---- annotation toolbar (second bar under pv-bar) ---- */
.pv-tools{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#11162340;background:#131829;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap}
.pv-tools .sp{flex:1}
.an-group{display:flex;align-items:center;gap:4px}
.an-sep{width:1px;height:22px;background:rgba(255,255,255,.12);margin:0 2px}
.an-tool{width:32px;height:32px;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:#c8d1e6;cursor:pointer;display:grid;place-items:center;transition:.12s}
.an-tool svg{width:17px;height:17px}
.an-tool:hover{background:rgba(255,255,255,.15);color:#fff}
.an-tool.on{background:var(--accent,#007fff);color:#fff;box-shadow:0 2px 8px rgba(0,127,255,.4)}
.an-cols{gap:5px}
.an-col{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0;transition:.12s}
.an-col:hover{transform:scale(1.12)}
.an-col.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent,#007fff)}
.an-widths .an-w{width:26px;height:28px;border:0;border-radius:7px;background:rgba(255,255,255,.06);cursor:pointer;display:grid;place-items:center}
.an-widths .an-w span{background:#c8d1e6;border-radius:50%;display:block}
.an-widths .an-w.on{background:rgba(255,255,255,.16)}
.an-widths .an-w.on span{background:#fff}
.an-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#dbe2f0;font-weight:650;font-size:12.5px;cursor:pointer;transition:.12s}
.an-btn svg{width:15px;height:15px}
.an-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.an-btn.primary{background:var(--accent,#007fff);color:#fff}
.an-btn.primary:hover{background:#0a6fe0}
@media(max-width:720px){.an-btn span{display:none}.an-btn{padding:0 9px}}

/* ---- annotation overlay surface ---- */
.pv-body.annot{display:block;align-items:stretch;justify-content:stretch}
.pv-annwrap{position:relative;display:inline-block;line-height:0}
.pv-body.annot>.pv-annwrap{display:grid;place-items:center;width:100%;height:100%}
.pv-annwrap.pdf{display:inline-block}
.pv-img.annot{max-width:100%;max-height:calc(86vh - 132px);object-fit:contain}
.an-layer{position:absolute;z-index:6;cursor:crosshair;touch-action:none}
.an-textin{position:absolute;z-index:8;min-width:60px;background:rgba(255,255,255,.96);border:1px dashed var(--accent,#007fff);border-radius:4px;padding:2px 5px;resize:none;overflow:hidden;line-height:1.25;outline:none;box-shadow:0 4px 16px rgba(0,0,0,.3)}

/* ---- PDF viewer (our own — replaces the native iframe/Chrome toolbar) ---- */
.pv-pdf{display:flex;flex-direction:column;width:100%;height:100%;background:#20242e}
.pv-pdfbar{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;background:#181d2b;border-bottom:1px solid rgba(255,255,255,.06);color:#c8d1e6;flex:0 0 auto}
.pv-pg{height:30px;min-width:30px;padding:0 9px;border:0;border-radius:7px;background:rgba(255,255,255,.07);color:#dbe2f0;font-weight:700;font-size:13px;cursor:pointer;display:grid;place-items:center}
.pv-pg svg{width:16px;height:16px}
.pv-pg:hover{background:rgba(255,255,255,.16);color:#fff}
.pv-pgn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;color:#aeb8cc}
.pv-pgn input{width:38px;height:28px;text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:rgba(255,255,255,.05);color:#fff;font-weight:700;font-size:12.5px}
.pv-pgn b{color:#e6eaf2}
.pv-zsep{width:1px;height:20px;background:rgba(255,255,255,.12);margin:0 4px}
.pv-zlab{min-width:44px;text-align:center;font-size:12px;font-weight:700;color:#aeb8cc}
.pv-pdfscroll{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;padding:20px}
.pv-pdfcanvas{display:block;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.4);height:max-content}
.pv-annwrap.pdf{align-self:flex-start;margin:auto}

/* ---- CAD (DXF) viewer ---- */
.pv-cad{width:100%;height:100%;background:#0d1017}
.dxf-canvas{display:block;width:100%;height:100%}
.pv-cadhint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;font-size:11.5px;font-weight:650;color:#9aa4ba;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:20px;pointer-events:none}

@media(max-width:640px){.pv{width:calc(100vw - 16px);height:90vh}.pv-name{max-width:38%}}

/* ===== Auth (login / signup / verify / reset) ===== */
#login{position:fixed;inset:0;z-index:9000}
/* Boot / loading screen */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#f7f9fc;font-family:Inter,system-ui,sans-serif}
.boot-logo{width:66px;height:66px;border-radius:17px;background:#fff;box-shadow:0 10px 34px rgba(15,23,42,.12);display:flex;align-items:center;justify-content:center;animation:bootpulse 1.7s ease-in-out infinite}
.boot-logo img{width:44px;height:44px;display:block}
.boot-word{font-weight:800;font-size:17px;letter-spacing:.01em;color:#0f172a}
.boot-bar{width:150px;height:4px;border-radius:4px;background:rgba(0,127,255,.14);overflow:hidden;position:relative}
.boot-bar span{position:absolute;top:0;height:100%;width:42%;border-radius:4px;background:linear-gradient(90deg,#007FFF,#6366F1);animation:bootslide 1.15s ease-in-out infinite}
@keyframes bootpulse{0%,100%{transform:scale(1);box-shadow:0 10px 34px rgba(15,23,42,.12)}50%{transform:scale(1.07);box-shadow:0 16px 46px rgba(0,127,255,.26)}}
@keyframes bootslide{0%{left:-45%}100%{left:103%}}
@media(prefers-color-scheme:dark){.boot{background:#0b1220}.boot-word{color:#e5e7eb}.boot-bar{background:rgba(99,132,241,.2)}}
.au-scrim{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0b1220,#1e293b);padding:20px}
.au-card{width:100%;max-width:390px;background:#fff;border-radius:18px;padding:30px 28px;box-shadow:0 24px 70px rgba(0,0,0,.4);font-family:Inter,system-ui,sans-serif;box-sizing:border-box}
.au-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:17px;color:#0f172a}
.au-brand .sb-logo{width:30px;height:30px;border-radius:8px;background:#007FFF;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.au-card h1{font-size:22px;font-weight:800;color:#0f172a;margin:0 0 4px;letter-spacing:-.01em}
.au-sub{font-size:13px;color:#64748b;margin:0 0 16px;line-height:1.5}
.au-l{display:block;font-size:12px;font-weight:600;color:#475569;margin:12px 0 5px}
.au-in{width:100%;box-sizing:border-box;border:1px solid #d5dde8;border-radius:10px;padding:11px 13px;font-size:14px;color:#0f172a;outline:none;transition:border .15s,box-shadow .15s;font-family:inherit}
.au-in:focus{border-color:#007FFF;box-shadow:0 0 0 3px rgba(0,127,255,.15)}
.au-btn{width:100%;margin-top:18px;background:#007FFF;color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;font-family:inherit}
.au-btn:hover{background:#0068d6}
.au-row{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}
.au-link{background:none;border:none;color:#007FFF;font-size:12.5px;font-weight:600;cursor:pointer;padding:0;font-family:inherit}
.au-link:hover{text-decoration:underline}
.au-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:12.5px;border-radius:8px;padding:9px 11px;margin-bottom:4px;line-height:1.4}
.au-busy{text-align:center;color:#64748b;font-size:12px;margin-top:12px}
.au-invite{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12.5px;border-radius:9px;padding:10px 12px;margin-bottom:14px;line-height:1.45}
@media(prefers-color-scheme:dark){.au-invite{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35);color:#bfdbfe}}
@media(prefers-color-scheme:dark){.au-card{background:#0f172a}.au-card h1{color:#f1f5f9}.au-brand{color:#f1f5f9}.au-in{background:#1e293b;border-color:#334155;color:#f1f5f9}.au-l{color:#94a3b8}}

/* ===== Team switcher (rail foot) ===== */
.sb-team{display:flex;align-items:center;gap:9px;flex:1;min-width:0;background:none;border:none;cursor:pointer;text-align:left;color:inherit;padding:0;font-family:inherit}
.sb-team>div{min-width:0}
.sb-team b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-team-cx{margin-left:auto;opacity:.5;display:flex;flex:0 0 auto}
.sb-team-cx svg{width:16px;height:16px}
.tm-pop{min-width:230px;padding:6px}
.tm-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8;padding:6px 10px 4px}
.tm-i{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:inherit;text-align:left;font-family:inherit}
.tm-i:hover{background:rgba(0,127,255,.08)}
.tm-i.on{font-weight:700}
.tm-av{width:26px;height:26px;border-radius:7px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 auto}
.tm-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-ck{width:16px;color:#007FFF;display:flex;flex:0 0 auto}
.tm-ck svg{width:16px;height:16px}
.tm-new{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;border-top:1px solid var(--line,#eef1f6);margin-top:5px;padding:10px 10px 4px;cursor:pointer;font:inherit;font-size:13px;font-weight:650;color:#007FFF;text-align:left}
.tm-new:hover{color:#0068d6}
.tm-new svg{width:15px;height:15px}

/* ===== Spreadie (AI assistant) ===== */
.spr-fab{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;z-index:8000;
  background:linear-gradient(135deg,#007FFF,#6366F1);color:#fff;box-shadow:0 10px 28px rgba(0,127,255,.4);display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}
.spr-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,127,255,.5)}
.spr-fab svg{width:24px;height:24px}
.spr{position:fixed;right:22px;bottom:22px;width:390px;max-width:calc(100vw - 24px);height:min(620px,calc(100vh - 40px));z-index:8001;
  display:flex;flex-direction:column;background:var(--card,#fff);border:1px solid var(--line,#e5e9f0);border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,.28);font-family:Inter,system-ui,sans-serif}
.spr-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line,#eef1f6);font-weight:750;color:var(--ink,#0f172a)}
.spr-title{display:flex;align-items:center;gap:8px;font-size:15px}
.spr-title svg{width:18px;height:18px;color:#6366F1}
.spr-x{margin-left:auto;background:none;border:none;font-size:17px;color:var(--ink-3,#94a3b8);cursor:pointer;line-height:1;padding:4px}
.spr-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--bg,#f8fafc)}
.spr-m{display:flex;gap:9px;max-width:100%}
.spr-u{justify-content:flex-end}
.spr-av{width:26px;height:26px;border-radius:8px;flex:0 0 auto;background:linear-gradient(135deg,#007FFF,#6366F1);color:#fff;display:flex;align-items:center;justify-content:center}
.spr-av svg{width:15px;height:15px}
.spr-abody{min-width:0;display:flex;flex-direction:column;gap:8px}
.spr-b{padding:9px 13px;border-radius:13px;font-size:13.5px;line-height:1.5;color:var(--ink,#0f172a);background:#fff;border:1px solid var(--line,#eef1f6);max-width:290px;word-wrap:break-word;overflow-wrap:anywhere}
.spr-u .spr-b{background:#007FFF;color:#fff;border-color:#007FFF}
.spr-act{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dbe4f0;border-radius:12px;padding:9px 11px}
.spr-act.done{opacity:.7}
.spr-act-i{width:24px;height:24px;border-radius:7px;background:rgba(99,102,241,.12);color:#6366F1;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.spr-act-i svg{width:14px;height:14px}
.spr-act-x{min-width:0;flex:1}
.spr-act-t{font-size:12.5px;font-weight:700;color:var(--ink,#0f172a)}
.spr-act-s{font-size:11.5px;color:var(--ink-3,#94a3b8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spr-act-btn{background:#007FFF;color:#fff;border:none;border-radius:8px;padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;flex:0 0 auto;font-family:inherit}
.spr-act-btn:hover{background:#0068d6}
.spr-act-ok{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#10B981;flex:0 0 auto}
.spr-act-ok svg{width:13px;height:13px}
.spr-typing{display:flex;gap:4px;align-items:center}
.spr-typing span{width:6px;height:6px;border-radius:50%;background:#c3ccd9;animation:sprbounce 1.2s infinite}
.spr-typing span:nth-child(2){animation-delay:.2s}.spr-typing span:nth-child(3){animation-delay:.4s}
@keyframes sprbounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.spr-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line,#eef1f6);background:var(--card,#fff)}
.spr-input input{flex:1;border:1px solid var(--line,#d5dde8);border-radius:10px;padding:10px 13px;font-size:13.5px;outline:none;font-family:inherit;color:var(--ink,#0f172a);background:var(--bg,#fff)}
.spr-input input:focus{border-color:#007FFF;box-shadow:0 0 0 3px rgba(0,127,255,.13)}
.spr-send{width:40px;border:none;border-radius:10px;background:#007FFF;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.spr-send:hover{background:#0068d6}.spr-send svg{width:18px;height:18px}
@media(max-width:640px){.spr{right:8px;left:8px;bottom:8px;width:auto;height:min(80vh,560px)}.spr-fab{right:16px;bottom:16px}}
@media(prefers-color-scheme:dark){.spr{background:#0f172a;border-color:#243044}.spr-msgs{background:#0b1220}.spr-b{background:#1e293b;border-color:#243044;color:#e2e8f0}.spr-act{background:#1e293b;border-color:#2d3a4f}.spr-input input{background:#1e293b;border-color:#334155;color:#e2e8f0}}
.spr-act.danger{border-color:#fecaca}
.spr-act.danger .spr-act-i{background:rgba(239,68,68,.12);color:#ef4444}
.spr-act-btn.danger{background:#ef4444}.spr-act-btn.danger:hover{background:#dc2626}

/* ===== Spreadie full page (rail route) ===== */
.spx-page{display:flex;height:calc(100dvh - 65px);background:var(--bg,#f8fafc)}
.spx-side{width:264px;flex:0 0 264px;border-right:1px solid var(--line,#e5e9f0);display:flex;flex-direction:column;background:var(--card,#fff)}
.spx-new{margin:12px;padding:10px 12px;border:1px solid var(--line,#dbe4f0);border-radius:10px;background:none;cursor:pointer;font-weight:650;font-size:13.5px;display:flex;align-items:center;gap:7px;color:var(--ink,#0f172a);font-family:inherit}
.spx-new:hover{background:rgba(0,127,255,.06);border-color:#bcd4f5}
.spx-new svg{width:15px;height:15px}
.spx-shead{display:flex;align-items:center;padding:10px 12px 2px}
.spx-toggle{width:34px;height:34px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--ink-3,#94a3b8);display:flex;align-items:center;justify-content:center}
.spx-toggle:hover{background:rgba(0,0,0,.06);color:var(--ink-2,#475569)}
.spx-toggle svg{width:18px;height:18px}
.spx-side{transition:width .18s ease,flex-basis .18s ease}
.spx-side.collapsed{width:60px;flex-basis:60px}
.spx-side.collapsed .spx-list{display:none}
.spx-side.collapsed .spx-nl{display:none}
.spx-side.collapsed .spx-new{justify-content:center;padding:10px;margin:8px}
.spx-side.collapsed .spx-shead{justify-content:center;padding:10px 0 2px}
.spx-list{flex:1;overflow-y:auto;padding:0 8px 12px}
.spx-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;cursor:pointer;color:var(--ink-2,#475569);font-size:13px}
.spx-item:hover{background:rgba(0,0,0,.04)}
.spx-item.on{background:rgba(0,127,255,.1);color:var(--ink,#0f172a);font-weight:600}
.spx-ic{display:flex;flex:0 0 auto;opacity:.55}.spx-ic svg{width:15px;height:15px}
.spx-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spx-del{opacity:0;background:none;border:none;cursor:pointer;color:var(--ink-3,#94a3b8);padding:2px;flex:0 0 auto}
.spx-item:hover .spx-del{opacity:.7}.spx-del:hover{opacity:1;color:#ef4444}.spx-del svg{width:14px;height:14px}
.spx-main{flex:1;min-width:0;display:flex;flex-direction:column}
.spx-scroll{flex:1;overflow-y:auto;padding:24px 20px}
.spx-scroll .spr-m{max-width:760px;margin:0 auto 16px;width:100%}
.spx-scroll .spr-b{max-width:none}
.spx-scroll .spr-u{justify-content:flex-end}
.spx-scroll .spr-u .spr-b{max-width:72%}
.spx-compose{max-width:768px;width:100%;margin:0 auto;padding:0 20px 10px;box-sizing:border-box}
.spx-box{border:1px solid var(--line,#e3e8ef);border-radius:26px;background:var(--card,#fff);box-shadow:0 4px 20px rgba(15,23,42,.07);padding:6px;transition:border-color .15s,box-shadow .15s}
.spx-box:focus-within{border-color:#bcd4f5;box-shadow:0 6px 26px rgba(0,127,255,.15)}
.spx-thumbs{display:none;flex-wrap:wrap;gap:8px;padding:8px 10px 4px}
.spx-thumb{position:relative;width:60px;height:60px;border-radius:14px;overflow:hidden;border:1px solid var(--line,#e5e9f0);flex:0 0 auto;box-shadow:0 1px 5px rgba(0,0,0,.09)}
.spx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.spx-thumb-x{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(15,23,42,.72);color:#fff;border:none;cursor:pointer;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.spx-thumb-x:hover{background:#ef4444}
.spx-inputrow{display:flex;align-items:flex-end;gap:3px}
.spx-attach{width:40px;height:40px;flex:0 0 auto;border:none;border-radius:50%;background:none;cursor:pointer;color:var(--ink-3,#94a3b8);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.spx-attach:hover{background:rgba(0,0,0,.06);color:var(--ink-2,#475569)}
.spx-attach svg{width:20px;height:20px}
.spx-inputrow textarea{flex:1;min-width:0;border:none;outline:none;resize:none;background:none;padding:10px 6px;font-size:15px;font-family:inherit;line-height:1.45;max-height:200px;color:var(--ink,#0f172a)}
.spx-inputrow textarea::placeholder{color:var(--ink-3,#9aa4b5)}
.spx-send{width:40px;height:40px;flex:0 0 auto;border:none;border-radius:50%;background:linear-gradient(135deg,#007FFF,#3b6fe0);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s,background .2s}
.spx-send:hover{filter:brightness(1.07)}
.spx-inputrow textarea:placeholder-shown~.spx-send{background:#cbd5e1}
.spx-send svg{width:18px;height:18px}
.spx-scroll .spr-m{max-width:768px}
.spx-scroll .spr-a .spr-b{background:none;border:none;padding:3px 0;max-width:none;font-size:15px;line-height:1.65}
.spx-scroll .spr-a .spr-av{box-shadow:0 2px 8px rgba(0,127,255,.25)}
.spx-scroll .spr-u .spr-b{background:#eef2f7;border:none;color:var(--ink,#0f172a);border-radius:18px;padding:10px 15px;font-size:15px;line-height:1.5;max-width:100%}
.spr-ucol{display:flex;flex-direction:column;align-items:flex-end;max-width:78%;margin-left:auto}

/* time + copy under each message. Copy stays quiet until you're on the message,
   so it never competes with the reply itself. */
.spr-meta{display:flex;align-items:center;gap:8px;margin-top:4px;min-height:18px}
.spr-u .spr-meta{justify-content:flex-end}
.spr-tm{font-size:11px;color:var(--ink-3,#8a94a6);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.spr-cp{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:7px;border:1px solid transparent;background:transparent;color:var(--ink-3,#8a94a6);font-size:11px;font-weight:650;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}
.spr-cp svg{width:12px;height:12px}
.spr-m:hover .spr-cp,.spr-cp:focus-visible{opacity:1}
.spr-cp:hover{background:var(--accent-sf,#eff6ff);color:var(--accent,#007FFF);border-color:var(--line,#e5e9f0)}
/* touch: no hover, so the copy affordance is always visible */
@media (hover:none){.spr-cp{opacity:1}}
/* a failed reply reads as an error, not as advice */
.spr-b.spr-errb{background:#fff5f5;border-color:#fecaca;color:#991b1b}

.spr-uimgs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;justify-content:flex-end}
.spr-uimg{max-width:210px;max-height:210px;border-radius:14px;border:1px solid var(--line,#e5e9f0);display:block}
.spx-hint{max-width:768px;width:100%;margin:0 auto 12px;padding:0 20px;font-size:11px;color:var(--ink-3,#94a3b8);text-align:center;box-sizing:border-box}

/* Empty chat: hero + composer + starter chips, centred as one block. */
.spx-main.empty{justify-content:center}
.spx-main.empty .spx-scroll{flex:0 0 auto;overflow:visible;padding-bottom:6px}
.spx-hero{max-width:768px;margin:0 auto;padding:0 20px 10px;text-align:center}
.spx-hero-av{width:42px;height:42px;margin:0 auto 16px;border-radius:13px;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(0,127,255,.28)}
.spx-hero-av svg{width:22px;height:22px}
.spx-hero h1{font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.spx-hero p{font-size:14px;line-height:1.55;color:var(--ink-3);margin:0 auto;max-width:520px}
@media (max-width:760px){.spx-hero h1{font-size:22px}}
@media(max-width:760px){.spx-side{display:none}.spr-uimg{max-width:150px}}
@media(prefers-color-scheme:dark){.spx-page{background:#0b1220}.spx-side{background:#0f172a;border-color:#243044}.spx-item{color:#94a3b8}.spx-item:hover{background:rgba(255,255,255,.05)}.spx-item.on{color:#e2e8f0}.spx-box{background:#131c2b;border-color:#28374d}.spx-inputrow textarea{color:#e5e7eb}.spx-inputrow textarea:placeholder-shown~.spx-send{background:#3a4b63}.spx-scroll .spr-a .spr-b{color:#e5e7eb}.spx-scroll .spr-u .spr-b{background:#26344a;color:#e5e7eb}}
/* ===== Spreadie markdown replies + apply-all ===== */
.spr-md p{margin:0 0 10px}.spr-md p:last-child{margin-bottom:0}
.spr-md ul,.spr-md ol{margin:6px 0 10px;padding-left:22px}
.spr-md ul{list-style:disc}.spr-md ol{list-style:decimal}
.spr-md li{margin:3px 0}
.spr-md .spr-h{font-weight:750;margin:12px 0 6px;line-height:1.3}
.spr-md .spr-h:first-child{margin-top:0}
.spr-md .spr-h1{font-size:19px}.spr-md .spr-h2{font-size:17px}.spr-md .spr-h3{font-size:15px}.spr-md .spr-h4{font-size:14px}
.spr-md strong{font-weight:700}
.spr-md code{background:rgba(0,0,0,.06);padding:1px 6px;border-radius:6px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.spr-md a{color:#007FFF;text-decoration:underline}
.spr-md blockquote{border-left:3px solid var(--line,#e5e9f0);margin:8px 0;padding:2px 0 2px 14px;color:var(--ink-2,#475569)}
.spr-tbl{border-collapse:collapse;margin:10px 0;font-size:13.5px;width:100%}
.spr-tbl th,.spr-tbl td{border:1px solid var(--line,#e5e9f0);padding:7px 11px;text-align:left;vertical-align:top}
.spr-tbl th{background:rgba(0,0,0,.035);font-weight:650}
.spr-acts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.spr-applyall{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#007FFF,#3b6fe0);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 3px 12px rgba(0,127,255,.28)}
.spr-applyall:hover{filter:brightness(1.06)}.spr-applyall svg{width:15px;height:15px}
@media(prefers-color-scheme:dark){.spr-md code{background:rgba(255,255,255,.1)}.spr-tbl th{background:rgba(255,255,255,.05)}.spr-tbl th,.spr-tbl td{border-color:#2d3a4f}.spr-md blockquote{border-color:#2d3a4f}}

/* ============================================================
   MOBILE — bottom tab bar (Spreadie centred), sheets, clean pages
   ============================================================ */
:root{ --kb:0px; }
.mobnav{ display:none; }
.tb-brand-m{ display:none; }
/* bottom nav (shown only on mobile via the media query) */
.mobnav{ position:fixed; left:0; right:0; bottom:0; height:calc(60px + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom); background:var(--surface); border-top:1px solid var(--line); z-index:60; align-items:stretch; justify-content:space-around; box-shadow:0 -2px 18px rgba(15,23,42,.06); }
.mn-tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:none; background:none; color:var(--ink-3); font-size:10px; font-weight:600; cursor:pointer; padding:6px 0; -webkit-tap-highlight-color:transparent; }
.mn-tab svg{ width:22px; height:22px; }
.mn-tab.on{ color:var(--accent); }
.mn-spr{ flex:0 0 auto; width:54px; height:54px; margin-top:-16px; border-radius:50%; border:4px solid var(--surface); background:linear-gradient(135deg,#007FFF,#54a6ff); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 7px 18px rgba(0,127,255,.42); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mn-spr svg{ width:26px; height:26px; }
.mn-spr.on{ box-shadow:0 7px 22px rgba(0,127,255,.6); }
/* bottom sheet */
.sheet-scrim{ position:fixed; inset:0; background:rgba(15,23,42,.42); z-index:70; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:71; background:var(--surface); border-radius:22px 22px 0 0; padding:6px 18px calc(22px + env(safe-area-inset-bottom)); transform:translateY(101%); transition:transform .24s cubic-bezier(.32,.72,0,1); box-shadow:0 -10px 44px rgba(15,23,42,.2); max-height:82vh; overflow-y:auto; }
.sheet.up{ transform:translateY(0); }
.sheet-grab{ width:40px; height:4px; border-radius:2px; background:var(--line-2); margin:6px auto 14px; }
.sheet-h{ font-size:11.5px; font-weight:700; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; margin:0 2px 12px; }
.sheet-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:16px; }
.sheet-i{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:15px 4px; border:1px solid var(--line); border-radius:15px; background:var(--paper); color:var(--ink); font-size:11px; font-weight:600; cursor:pointer; }
.sheet-i svg{ width:22px; height:22px; color:var(--accent); }
.sheet-i:active{ background:var(--surface); }
.sheet-rows{ display:flex; flex-direction:column; }
.sheet-row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border:none; background:none; text-align:left; cursor:pointer; border-radius:12px; width:100%; }
.sheet-row:active{ background:var(--paper); }
.sheet-row .sr-ic{ width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:var(--paper); color:var(--ink-2); flex:none; font-size:12px; font-weight:700; }
.sheet-row .sr-ic svg{ width:19px; height:19px; }
.sheet-row .sr-ic.run{ background:rgba(34,197,94,.12); color:#16a34a; }
.sheet-row .sr-ic.paused{ background:rgba(245,158,11,.12); color:#d97706; }
.sheet-row b{ font-size:14.5px; font-weight:600; color:var(--ink); }
.sheet-row .sr-sub{ margin-left:auto; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; }

@media (max-width:760px){
  .rail{ display:none !important; }
  .app{ display:block; }
  .shell{ width:100%; min-width:0; }
  .main{ padding:14px 13px calc(74px + env(safe-area-inset-bottom)); }
  .mobnav{ display:flex; }
  #spr-fab{ display:none !important; }
  /* minimal top bar — reserve the phone status-bar (notch/clock/battery) area */
  .topbar{ height:calc(54px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 12px 0; box-sizing:border-box; }
  .tb-left .tb-navbtns, .tb-left [data-search], .tb-left [data-help], .tb-banner, .tb-preview{ display:none !important; }
  .tb-left{ gap:0; }
  .tb-brand-m{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
  .tb-brand-m b{ font-size:16.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
  .tb-brand-m .sb-logo{ width:24px; height:24px; flex:none; }
  .tb-clock{ padding:0 9px; height:34px; }
  .tb-clock span:not(.dot){ font-size:12px; }
  .tb-right{ gap:7px; }
  /* full-width, clean pages */
  .page, .page.wide{ max-width:none !important; width:100%; padding:0; }
  .crumbs{ font-size:12px; margin-bottom:12px; }
  h1, .page-title{ font-size:22px; }
  /* forms/dialogs fit the screen */
  .modal{ width:calc(100vw - 20px) !important; max-width:none; max-height:88vh; overflow-y:auto; }
  .modal-wide{ width:calc(100vw - 20px) !important; }
  .ct-split{ grid-template-columns:1fr; }
  .tbl-wrap{ overflow-x:auto; }
  /* timeline toolbar wraps; drop the touch-unfriendly zoom slider */
  .tl-bar{ flex-wrap:wrap; row-gap:9px; }
  .tl-bar .spacer{ display:none; }
  .zoomc{ flex-wrap:wrap; gap:6px; }
  .zoomc input[type=range]{ display:none; }
  .tl-filters{ flex-wrap:wrap; gap:8px; }
  /* Spreadie: pin between the top bar and the bottom nav so the composer clears it */
  .spx-page{ position:fixed; left:0; right:0; top:calc(54px + env(safe-area-inset-top)); bottom:calc(60px + env(safe-area-inset-bottom)); height:auto; z-index:5; }
  .spx-scroll{ padding:18px 14px; }
  .spx-compose{ padding:0 12px 10px; }
  /* tab bars scroll horizontally instead of overflowing/cutting off (Settings, filters) */
  .tabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; margin-bottom:16px; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button{ flex:none; white-space:nowrap; }
  /* desktop multi-column grids stack on a phone */
  .field-grid, .ct-grid, .pp-grid{ grid-template-columns:1fr !important; }
  .kpi-grid{ grid-template-columns:1fr 1fr !important; }
  /* Settings: stack the squished rows and the role-preview card */
  .perm-row{ flex-wrap:wrap; gap:8px 12px; }
  .perm-row>*:first-child{ flex:1 1 100%; }
  .va-top{ flex-direction:column; align-items:flex-start; gap:12px; }
  .va-top .spacer{ display:none; }
  .va-chips{ width:100%; overflow-x:auto; scrollbar-width:none; }
  .va-chips::-webkit-scrollbar{ display:none; }
  .mem-block .set-row{ flex-wrap:wrap; }
  .set-manage{ flex-wrap:wrap; }
  /* raw data tables scroll horizontally rather than crushing their columns */
  .tbl-wrap, .tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.tbl{ min-width:600px; }
  /* Tasks: turn the 11-column table into tap-friendly cards */
  .tk-tblwrap{ overflow:visible; border:none; background:none; }
  table.tbl.tk-tbl{ min-width:0; width:100%; }
  .tk-tbl thead{ display:none; }
  .tk-tbl, .tk-tbl tbody{ display:block; }
  .tk-tbl tr.trow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; border:1px solid var(--line); border-radius:14px; padding:13px 14px; margin-bottom:10px; background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.03); }
  .tk-tbl tr.trow td{ display:block; padding:0; border:none; }
  .tk-tbl tr.trow td.c-check,
  .tk-tbl tr.trow td.c-dot,
  .tk-tbl tr.trow td:nth-child(6),
  .tk-tbl tr.trow td.c-h,
  .tk-tbl tr.trow td.c-go{ display:none; }              /* hide checkbox / dot / flow / hours / chevron */
  .tk-tbl tr.trow td:nth-child(3){ order:1; flex:1 1 100%; min-width:0; }
  .tk-tbl tr.trow td:nth-child(3) .t-desc2{ white-space:normal; font-weight:600; font-size:14.5px; color:var(--ink); line-height:1.35; }
  .tk-tbl tr.trow td:nth-child(10){ order:2; }                     /* status pill leads the meta row */
  .tk-tbl tr.trow td:nth-child(4){ order:3; flex:0 0 auto; }       /* project */
  .tk-tbl tr.trow td:nth-child(5){ order:4; flex:0 0 auto; }       /* stage */
  .tk-tbl tr.trow td:nth-child(7){ order:5; flex:0 0 auto; }       /* assignee */
  .tk-tbl tr.trow td:nth-child(8){ order:6; flex:0 0 auto; }       /* deadline */
  .tk-tbl tr.trow td:nth-child(4), .tk-tbl tr.trow td:nth-child(5),
  .tk-tbl tr.trow td:nth-child(7), .tk-tbl tr.trow td:nth-child(8){ margin-top:2px; }
  .tk-tbl tr.add-row{ display:block; }
  .tk-tbl tr.add-row td{ display:block; padding:6px 0 0; }
  .tk-tbl .cellchip{ font-size:12px; }
  .tk-tbl .dead{ font-size:12px; }
  /* mobile TODAY — team view as full-width day-strip cards (no fixed name column) */
  .mtd-gt{ margin:2px 0 14px; }
  .mtd-gt svg{ width:15px; height:15px; }
  .mtd-ruler{ position:relative; height:14px; margin:0 4px 7px; }
  .mtd-ruler span{ position:absolute; transform:translateX(-50%); font-size:10px; font-weight:600; color:var(--ink-3); white-space:nowrap; }
  .mtd-list{ display:flex; flex-direction:column; gap:12px; padding-bottom:6px; }
  .mtd-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:13px 14px 14px; box-shadow:0 1px 2px rgba(15,23,42,.03); }
  .mtd-head{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
  .mtd-nm{ min-width:0; flex:1; }
  .mtd-nm b{ display:block; font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
  .mtd-nm span{ font-size:12.5px; color:var(--ink-3); }
  .mtd-mono{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-weight:800; font-size:12.5px; flex:none; }
  .mtd-avs{ display:flex; flex:none; }
  .mtd-avs .av{ margin-left:-7px; border:2px solid var(--surface); box-shadow:none; }
  .mtd-avs .av:first-child{ margin-left:0; }
  .mtd-strip.ts{ position:relative; height:60px; background:var(--paper); border-radius:11px; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
  .mtd-strip .blk{ top:6px; bottom:6px; border-radius:6px; }
  .mtd-strip .blk .bl{ font-size:11px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; }
  .mtd-strip .free{ position:absolute; top:6px; bottom:6px; border:1px dashed var(--line-2); border-radius:6px; display:flex; align-items:center; justify-content:center; z-index:1; background:transparent; box-shadow:none; }
  .mtd-strip .free-lab{ font-size:10.5px; font-weight:600; color:var(--ink-3); }
  /* keyboard-safe: give the page room to scroll the focused input up, and lift fixed bottom bars above the keyboard */
  .kb-open .main{ padding-bottom:calc(var(--kb) + 32px) !important; }
  .kb-open .mobnav{ transform:translateY(150%); pointer-events:none; }
  .kb-open .spx-page{ bottom:var(--kb); }
  .kb-open .sheet{ bottom:var(--kb); }
  .kb-open .modal{ top:10px; transform:translateX(-50%); max-height:calc(var(--vvh,100dvh) - 20px); overflow-y:auto; }
  /* mobile Plan & Timeline — day navigator above the day-strip cards */
  .mpl-nav{ display:flex; align-items:center; gap:8px; margin:2px 0 12px; }
  .mpl-b{ width:38px; height:38px; flex:none; display:grid; place-items:center; border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink-2); cursor:pointer; }
  .mpl-b svg{ width:18px; height:18px; }
  .mpl-day{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; border:1px solid var(--line); border-radius:11px; background:var(--surface); font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; }
  .mpl-day svg{ width:15px; height:15px; color:var(--ink-3); }
  .mpl-day.on{ background:var(--accent-sf); border-color:transparent; color:var(--accent); }
  /* ===== premium mobile polish: headers, segmented controls, 44px tap targets ===== */
  .page-head{ flex-wrap:wrap; gap:10px 12px; align-items:center; margin-bottom:16px; }
  .page-head h1, .htxt h1{ font-size:24px; line-height:1.14; letter-spacing:-.02em; }
  .htxt p{ font-size:12.5px; margin-top:3px; }
  .crumbs{ width:100%; font-size:12.5px; }
  .page-head>.spacer{ display:none; }
  .page-head .btn{ flex:1 1 auto; min-height:46px; justify-content:center; }
  .page-head .btn.primary{ flex:1 1 100%; order:-1; }
  .page-head .pc-code{ width:44px; height:44px; font-size:14px; flex:none; }
  .btn{ min-height:44px; padding:0 15px; font-size:14px; border-radius:12px; }
  .btn.sm{ min-height:36px; padding:0 12px; }
  .icon-btn{ min-width:42px; min-height:42px; border-radius:11px; }
  .view-toggle{ padding:3px; border-radius:12px; }
  .view-toggle button{ min-height:38px; padding:0 14px; border-radius:9px; font-size:13.5px; }
  .mtd-gt{ display:flex; }
  .mtd-gt button{ flex:1; justify-content:center; }
  .tabs button{ padding:12px 15px; min-height:46px; font-size:14px; }
  /* project detail: hide the desktop stage-timeline date editor on phones */
  .pj-stagetl{ display:none; }
  /* task detail: touch-size the small action buttons */
  .tp-iconbtn{ min-width:42px; min-height:42px; }
  .att-add{ min-height:42px; padding:0 14px; }
  .chat-in{ gap:8px; }
  .chat-in #taskmsg-input{ min-height:44px; }
  .chat-in .btn{ min-height:44px; }
  /* demo ribbon sits above the bottom nav on phones */
  .demo-banner{ bottom:calc(72px + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); }
  .kb-open .demo-banner{ transform:translateX(-50%) translateY(200%); }
}
/* ---- demo-team ribbon: unobtrusive pill, only shown inside the demo ---- */
.demo-banner{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:200;
  display:flex; align-items:center; gap:10px; background:#0f172a; color:#fff;
  padding:8px 8px 8px 15px; border-radius:999px; box-shadow:0 10px 30px rgba(15,23,42,.30);
  font-size:13px; font-weight:500; line-height:1.2; max-width:520px; }
.demo-banner .db-dot{ width:8px; height:8px; border-radius:50%; background:#F59E0B; box-shadow:0 0 0 3px rgba(245,158,11,.25); flex:none; }
.demo-banner .db-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.demo-banner .db-txt b{ font-weight:700; }
.demo-banner .db-cta{ flex:none; background:#007FFF; color:#fff; border:none; border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:650; cursor:pointer; }
.demo-banner .db-cta:hover{ background:#0068d6; }
/* ---- pending-invite rows in Settings → Team ---- */
.inv-row{ display:flex; align-items:center; gap:11px; padding:10px 2px; border-top:1px solid var(--line); }
.inv-row:first-of-type{ border-top:none; }
.inv-av{ width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; font-weight:800; font-size:13px; color:#92600b; background:#FEF3C7; }
.inv-main{ min-width:0; flex:1; }
.inv-main .nm{ font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inv-main .sub{ font-size:12px; color:var(--ink-3); }

/* ============================================================
   MOTION LAYER — one coherent enter/exit vocabulary + micro-
   interactions across the product. Purely presentational; the
   reduced-motion guard at the very bottom neutralises all of it
   for users who ask. Enter animations replay because overlays are
   toggled via the `hidden` attribute (display:none → display),
   which restarts CSS animations. Exits are driven by a `.closing`
   class added just before the element is hidden (see _animClose).
   ============================================================ */
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes ovOut{from{opacity:1}to{opacity:0}}
@keyframes modalOut{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(-50%,-46%) scale(.97)}}
@keyframes popsIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes popsOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}
@keyframes pvIn{from{opacity:0;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes tipIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes viewIn{from{opacity:0}to{opacity:1}}

/* Centred modal + its backdrop */
.scrim{animation:ovIn .16s ease}
.scrim.closing{animation:ovOut .15s ease forwards;pointer-events:none}
.modal.closing{animation:modalOut .15s ease forwards;pointer-events:none}

/* Floating popover + backdrop */
.pop-scrim{animation:ovIn .13s ease}
.pop-scrim.closing{animation:ovOut .12s ease forwards}
.pop{animation:popsIn .15s cubic-bezier(.2,.8,.2,1);transform-origin:top center}
.pop.closing{animation:popsOut .12s ease forwards;pointer-events:none}

/* File previewer */
.pv-scrim{animation:ovIn .2s ease}
.pv{animation:pvIn .2s cubic-bezier(.2,.8,.2,1)}

/* Mobile bottom-sheet backdrop (the sheet itself already slides) */
.sheet-scrim{animation:ovIn .22s ease}
.sheet-scrim.closing{animation:ovOut .22s ease forwards}

/* Hover tooltip / task card */
.bktip{animation:tipIn .12s ease}

/* Page/view transition on every render() */
#main.vswap{animation:viewIn .2s ease}

/* Button micro-interactions: eased state changes + a real press */
.btn{transition:background .13s ease,border-color .13s ease,box-shadow .13s ease,color .13s ease,transform .07s ease}
.btn:active{transform:translateY(1px)}
.btn.primary:active{transform:translateY(1px)}
/* Segmented control: slide the active pill's look instead of snapping */
.seg button{transition:background .16s ease,color .16s ease,box-shadow .16s ease}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* Timeline empty-state: pinned to the visible left edge (position:sticky) so a
   wide, horizontally-scrolled timeline doesn't push the card off-screen. */
/* No margin:auto — in a 20k-px-wide timeline body it centres the card thousands
   of px out of view and sticky can't pull it back. Pin to the scrollport left. */
.tl-empty{position:sticky;left:0;width:min(620px,92vw);min-height:160px;padding:30px 18px;display:grid;place-items:center}
.tl-empty .empty-state{margin:0}

/* ---- notifications bell -------------------------------------------------
   Was a team-wide activity dump with no recipient and no read state: everyone
   saw everything, so nobody read any of it. Now: only YOUR notifications, with
   real unread state. */
.notif-pop{width:330px;max-height:420px;overflow:auto;padding:0}
.np-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.np-head b{font-size:13px}
.np-read{background:none;border:0;color:#007FFF;font-size:12px;font-weight:650;cursor:pointer;padding:2px 4px}
.np-read:hover{text-decoration:underline}
.np-i{display:flex;gap:10px;align-items:flex-start;width:100%;padding:11px 14px;border:0;background:none;cursor:pointer;text-align:left;border-bottom:1px solid #F8FAFC;position:relative}
.np-i:hover{background:var(--hover)}
.np-i.unread{background:#F5FAFF}
.np-i.unread:hover{background:#EAF4FF}
.np-x{flex:1;min-width:0}
.np-t{font-size:13px;line-height:1.4;color:var(--ink-1);font-weight:600}
.np-i.unread .np-t{font-weight:700}
.np-time{font-size:11.5px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-new{width:7px;height:7px;border-radius:50%;background:#007FFF;flex:none;margin-top:6px}
.np-dot{width:28px;height:28px;border-radius:50%;background:#EEF2F7;display:grid;place-items:center;flex:none;color:var(--ink-3)}
.np-dot svg{width:14px;height:14px}
.np-empty{padding:34px 24px;text-align:center;color:var(--ink-3);font-size:12.5px;display:flex;flex-direction:column;align-items:center;gap:7px;line-height:1.55}
.np-empty svg{width:22px;height:22px;color:#CBD5E1}
.np-empty b{font-size:13.5px;color:var(--ink-1)}
.tb-badge{position:absolute;top:2px;right:2px;min-width:15px;height:15px;border-radius:999px;background:#EF4444;color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;padding:0 3px;border:2px solid var(--surface)}
.tb-bell{position:relative}

/* ---- Analytics: THIS WEEK (the day-one screen) ---------------------------
   The plan is real data — it just isn't measurement. This screen is useful ten
   minutes after signup, and grows an "actual" bar beside each "planned" bar as
   real work gets logged. It is never empty and it never fabricates. */
.wk-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.wk-head b{font-size:14px;color:var(--ink-1)}
.wk-now{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px;background:#DBEAFE;color:#1D4ED8}
.wk-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.wk-who{width:150px;display:flex;align-items:center;gap:8px;min-width:0}
.wk-who span{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-bars{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.wk-bar{height:9px;border-radius:999px;min-width:3px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.wk-bar.plan{background:#93C5FD}
.wk-bar.plan.ok{background:#007FFF}
.wk-bar.plan.over{background:#EF4444}
.wk-bar.plan.low{background:#CBD5E1}
.wk-bar.act{background:#8B5CF6;height:7px}
.wk-val{width:46px;text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.wk-val.over{color:#DC2626}
.wk-val.low{color:var(--ink-3)}
.wk-legend{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.wk-legend .k{width:9px;height:9px;border-radius:3px;display:inline-block}
.wk-legend .k.plan{background:#007FFF}
.wk-legend .k.act{background:#8B5CF6;margin-left:10px}
.wk-note{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:12px 0 0}
.wk-note.bad{color:#B91C1C}

/* ---- Today: your clock, visible ------------------------------------------
   The pill said "on a break — 27 minutes" and nothing in the app backed it up:
   clocking in, breaking, resuming and clocking out recorded NOTHING (the one
   clock write in the codebase was for an off-hours start, and the activity feed
   is project-scoped, so even that had nowhere to render). This is where your day
   is now visible, in the order you lived it. */
.ck-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px;background:var(--surface)}
.ck-card.live{border-color:#BBF7D0;background:#F0FDF4}
.ck-card.brk{border-color:#FDE68A;background:#FFFBEB}
.ck-card.done{background:#F8FAFC}
.ck-card.idle{display:flex;align-items:center;gap:12px}
.ck-card.idle svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.ck-head{display:flex;align-items:center;gap:12px}
.ck-head>svg{width:20px;height:20px;flex:none}
.ck-card.live .ck-head>svg{color:#15803D}
.ck-card.brk .ck-head>svg{color:#B45309}
.ck-x{flex:1;min-width:0}
.ck-x b{display:block;font-size:14px;font-weight:700;color:var(--ink-1)}
.ck-x span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.ck-rows{margin-top:12px;padding-top:11px;border-top:1px solid rgba(15,23,42,.07);display:flex;flex-direction:column;gap:7px}
.ck-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.ck-row b{font-weight:600;color:var(--ink-1)}
.ck-row time{margin-left:auto;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ck-row time i{font-style:normal;color:var(--ink-2);font-weight:650;margin-left:5px}
.ck-dot{width:7px;height:7px;border-radius:50%;flex:none}
.ck-dot.in{background:#10B981}
.ck-dot.brk{background:#F59E0B}
.ck-dot.out{background:#94A3B8}
@media(max-width:760px){.ck-head{flex-wrap:wrap}.ck-head .btn{flex:1}}

/* ---- Analytics → Activity : the audit trail ------------------------------
   What a principal actually asks — "what did Rohan do on Tuesday?" — and until
   now nothing in the product could answer it. Clock events read in a muted
   blue-grey; task work carries its project's colour; breaks are amber. Every
   row is a real record: a work_session or a clock entry. Nothing is estimated. */
.ae-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ae-period{font-size:13.5px;color:var(--ink-1);font-variant-numeric:tabular-nums}
.ae-sel{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:12.5px;font-weight:600;color:var(--ink-2);max-width:180px}
.ae-list{display:flex;flex-direction:column;gap:14px}
.ae-day{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.ae-head{display:flex;align-items:center;gap:12px;padding:13px 16px;background:#FBFCFD;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ae-who{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.ae-who b{display:block;font-size:13.5px;font-weight:700}
.ae-who span{display:block;font-size:11.5px;color:var(--ink-3)}
.ae-sum{display:flex;gap:7px;flex-wrap:wrap}
.ae-chip{font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ae-chip.clock{background:#EEF2F7;color:#475569}
.ae-chip.task{background:#E3F0FE;color:#0060C0}
.ae-chip.est{background:#FEF3C7;color:#B45309}
.ae-rows{display:flex;flex-direction:column}
.ae-row{display:grid;grid-template-columns:78px 20px 1fr auto;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #F6F8FA}
.ae-row:last-child{border-bottom:0}
.ae-row time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ae-ic{font-size:12px;text-align:center;line-height:1}
.ae-x{min-width:0}
.ae-x b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ae-x span{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.ae-dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.ae-dur{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}
/* clock: a muted blue-grey, so the day's frame recedes behind the work inside it */
.ae-row.clock{background:#FAFBFC}
.ae-row.clock .ae-ic{color:#7C8B9C}
.ae-row.clock .ae-x b{color:#475569;font-weight:700}
.ae-row.brk{background:#FFFDF7}
.ae-row.brk .ae-ic{color:#D97706}
.ae-row.brk .ae-x b{color:#92400E}
.ae-row.task .ae-x b{color:var(--ink-1)}
@media(max-width:760px){
  .ae-row{grid-template-columns:64px 16px 1fr;row-gap:2px}
  .ae-dur{grid-column:3;justify-self:start;font-size:11.5px;color:var(--ink-3)}
  .ae-sel{flex:1;max-width:none}
}

/* ---- first run: get the first project onto the calendar ------------------
   Onboarding already ended inside a project — but it stopped at a stage stepper
   and a "New task" button, with nothing telling a first-time principal that the
   next move is to put work in a stage and let Spreadie lay it across the team.
   The loop WORKED and never OCCURRED. This is the missing half. It disappears
   the moment the project has a plan. */
.fr-card{border:1px solid #BFDBFE;background:linear-gradient(180deg,#F5FAFF,#FFF);border-radius:16px;padding:6px 0 8px;margin-bottom:20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.fr-head{display:flex;align-items:flex-start;gap:14px;padding:14px 20px 12px}
.fr-head b{display:block;font-size:15px;font-weight:700;color:var(--ink-1);letter-spacing:-.01em}
.fr-head span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.fr-head>div{flex:1;min-width:0}
.fr-skip{background:none;border:0;color:var(--ink-3);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:7px;flex:none}
.fr-skip:hover{background:var(--hover);color:var(--ink-2)}
.fr-step{display:flex;align-items:center;gap:13px;padding:11px 20px;border-top:1px solid #E6F0FA}
.fr-n{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:800;background:#E2E8F0;color:#94A3B8}
.fr-n svg{width:13px;height:13px}
.fr-step.done .fr-n{background:#DCFCE7;color:#15803D}
.fr-step.on .fr-n{background:#007FFF;color:#fff}
.fr-step.done{opacity:.72}
.fr-x{flex:1;min-width:0}
.fr-x b{display:block;font-size:13.5px;font-weight:650;color:var(--ink-1)}
.fr-x span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px;line-height:1.45}
.fr-step .btn{flex:none}
.fr-step:not(.on):not(.done) .fr-x b{color:var(--ink-3)}
@media(max-width:760px){
  .fr-step{flex-wrap:wrap}
  .fr-step .btn{width:100%;margin-top:8px;margin-left:37px}
}

/* ---- Tasks → Done -------------------------------------------------------
   Finished work does not belong in today's space. It moves here, grouped by
   WHEN it was finished — from the real work sessions, not a guess — so the list
   you look at every morning stays about the work you still have to do. */
.dn-grp{margin-bottom:26px}
.dn-head{display:flex; align-items:baseline; gap:10px; padding:0 0 10px; border-bottom:1px solid var(--line); margin-bottom:4px}
.dn-head b{font-size:13px; font-weight:700}
.dn-head span{font-size:12px; color:var(--ink-3)}
.dn-row{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer}
.dn-row:hover{background:var(--hover)}
.dn-tick{width:20px; height:20px; border-radius:50%; background:#DCFCE7; color:#15803D; display:grid; place-items:center; flex:none}
.dn-tick svg{width:12px; height:12px}
.dn-x{flex:1; min-width:0}
.dn-x b{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); text-decoration:line-through; text-decoration-color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dn-x span{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); margin-top:2px}
.dn-dot{width:7px; height:7px; border-radius:50%; flex:none; display:inline-block}
.dn-pva{width:120px; text-align:right; flex:none}
.dn-re{opacity:0; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:600; padding:5px 10px; border-radius:8px; cursor:pointer; flex:none}
.dn-row:hover .dn-re{opacity:1}
.dn-re:hover{background:var(--hover); color:var(--ink-1)}
@media(max-width:760px){ .dn-pva{display:none} .dn-re{opacity:1} }

/* ---- Add work: a sheet, not a form --------------------------------------
   One line per task. Paste a list, get a row per line. Enter for the next.

   Project and stage belong to the ROW, not to the dialog. They used to be two
   full-width dropdowns across the top — a third of the sheet spent on two
   values, and worse, they forced EVERY task in the batch into one project. A
   batch of work is rarely all in one place, so you had to close the sheet and
   reopen it for the next project. Now each row is a whole task: its own project,
   its own stage, its own person. New rows inherit the row above, so the common
   case still costs nothing. */
.aw-cols{--c: minmax(0,1fr) 130px 130px 128px 60px 84px 34px 28px}
.aw-head{display:grid;grid-template-columns:var(--c);gap:7px;padding:0 2px 7px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.aw-rows{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;padding:1px}
.aw-row{display:grid;grid-template-columns:var(--c);gap:7px;align-items:center}
.aw-head,.aw-row{--c: minmax(0,1fr) 130px 130px 128px 60px 84px 34px 28px}
.aw-row input,.aw-row select{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13.5px;min-width:0;width:100%}
.aw-row .aw-desc{font-weight:550}
.aw-row .aw-desc:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,127,255,.12);outline:none}
.aw-row .aw-sel{font-size:12px;font-weight:600;color:var(--ink-2);padding:9px 6px 9px 9px}
.aw-row .aw-sel:disabled{color:var(--ink-3);background:var(--hover)}
.aw-row .aw-hrs,.aw-row .aw-due{font-variant-numeric:tabular-nums;text-align:center;padding-left:4px;padding-right:4px}
.aw-att{position:relative;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.aw-att svg{width:15px;height:15px}
.aw-att:hover{background:var(--hover);color:var(--ink-1)}
.aw-att.has{border-color:#93C5FD;background:#EFF6FF;color:#1D4ED8}
.aw-att i{position:absolute;top:-5px;right:-5px;background:#007FFF;color:#fff;font-style:normal;font-size:9.5px;font-weight:800;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center;padding:0 3px}
.aw-rm{height:36px;border:0;background:none;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;border-radius:8px}
.aw-rm:hover{background:#FEE2E2;color:#DC2626}
.aw-add{margin-top:10px;width:100%;padding:9px;border:1px dashed var(--line);border-radius:10px;background:none;color:var(--ink-3);font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.aw-add:hover{border-color:#93C5FD;color:#1D4ED8;background:#F8FBFF}
.aw-add svg{width:13px;height:13px}
.aw-attpanel{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#FBFCFD}
.aw-atth{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.aw-atth b{font-size:12.5px}
.aw-att-i{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:12.5px;color:var(--ink-2);border-bottom:1px solid #F1F5F9}
.aw-att-i svg{width:14px;height:14px;color:var(--ink-3);flex:none}
.aw-att-i span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aw-att-i button{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1}
.aw-att-i button:hover{color:#DC2626}
.aw-att-add{display:flex;gap:8px;margin-top:11px}
.aw-linkin{flex:1;padding:8px 11px;border:1px solid var(--line);border-radius:9px;font-size:12.5px;background:var(--surface)}

/* On a phone a row becomes a small card: the task on its own line, the rest
   below it. Nothing is hidden — you can still retarget any row's project. */
@media(max-width:900px){
  .aw-head{display:none}
  .aw-rows{gap:10px}
  .aw-row{
    grid-template-columns:1fr 1fr 34px 28px;
    gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#FBFCFD;
  }
  .aw-row .aw-desc{grid-column:1/-1}
  .aw-row .aw-sel[data-awproj],.aw-row .aw-sel[data-awstage]{grid-column:span 2}
  .aw-row .aw-sel[data-awwho]{grid-column:span 2}
  .aw-row .aw-hrs{grid-column:1}
  .aw-row .aw-due{grid-column:2}
}
}

/* ---- The Monday screen: "here is next week" ------------------------------
   The plan arrives already made. The user's job is to AGREE with it, or correct
   it — never to build it. Grey is what they already had; blue is what Spreadbox
   is proposing to add; amber means someone ends up over capacity, by name. */
.wp-card{border:1px solid #BFDBFE; border-radius:16px; background:linear-gradient(180deg,#F6FAFF,var(--surface)); margin-bottom:18px; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04)}
.wp-head{display:flex; align-items:flex-start; gap:12px; padding:16px 20px 13px}
.wp-ic{width:30px; height:30px; border-radius:9px; background:#007FFF; color:#fff; display:grid; place-items:center; flex:none}
.wp-ic svg{width:16px; height:16px}
.wp-x{flex:1; min-width:0}
.wp-x b{display:block; font-size:15.5px; font-weight:700; letter-spacing:-.01em}
.wp-x span{display:block; font-size:13px; color:var(--ink-3); margin-top:2px; line-height:1.45}
.wp-rows{display:flex; flex-direction:column; gap:5px; padding:4px 20px 12px}
.wp-row{display:flex; align-items:center; gap:12px}
.wp-who{width:150px; display:flex; align-items:center; gap:8px; min-width:0}
.wp-who span{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wp-bar{flex:1; height:10px; border-radius:999px; background:#EEF2F7; display:flex; overflow:hidden; min-width:0}
.wp-bar i{display:block; height:100%}
.wp-bar .ex{background:#CBD5E1}
.wp-bar .new{background:#007FFF}
.wp-bar .new.over{background:#F59E0B}
.wp-bar .new.low{background:#7DD3FC}
.wp-pct{width:46px; text-align:right; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.wp-pct.over{color:#B45309}
.wp-foot{padding:12px 20px 16px; border-top:1px solid #E6F0FA; background:rgba(255,255,255,.5)}
.wp-warn, .wp-ok{font-size:12.5px; line-height:1.5; margin:0 0 12px}
.wp-warn{color:#92400E}
.wp-ok{color:#15803D}
.wp-cta{display:flex; gap:9px; flex-wrap:wrap}
.wp-cta .btn svg{width:14px; height:14px}
@media(max-width:760px){
  .wp-who{width:110px}
  .wp-cta .btn{flex:1}
}
.wp-split{font-size:12.5px;line-height:1.5;margin:0 0 12px;color:#1D4ED8}

/* The bulk sheet is a SECOND door, beside "Add task" — never instead of it.
   The single-task dialog is the right tool for one task and always was. */
.add-row .add-or{font-size:12px;color:var(--ink-3);margin:0 4px}
.add-inline.ghost{color:var(--ink-3);font-weight:600}
.add-inline.ghost:hover{color:#1D4ED8}

/* ---- Money: did this project make money? --------------------------------
   The tenth ability, and the reason a studio renews. Every figure here comes
   from hours somebody actually recorded — nothing is estimated, and nobody was
   ever asked for an hourly rate. */
.tw-money .tbl th.c-h, .tw-money .tbl td.c-h{text-align:right}
.mn-ok{color:#0F8A5F}
.mn-bad{color:#DC2626}
.mn-pct{font-style:normal; font-size:11px; color:var(--ink-3); margin-left:6px; font-variant-numeric:tabular-nums}
.mn-burn{height:6px; border-radius:999px; background:#EEF2F7; overflow:hidden; width:110px}
.mn-burn i{display:block; height:100%; border-radius:999px; transition:width .4s cubic-bezier(.4,0,.2,1)}
.mn-bl{display:block; font-size:11px; color:var(--ink-3); margin-top:4px; font-variant-numeric:tabular-nums}
.oh-in{width:80px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; text-align:center; font-variant-numeric:tabular-nums; font-weight:650; background:var(--surface)}
.lnk{background:none; border:0; padding:0; color:#007FFF; font-weight:650; font-size:inherit; cursor:pointer; text-decoration:underline}
.rsv-wrap{display:flex;align-items:center;gap:6px}
.rsv-wrap span{font-size:13px;color:var(--ink-3);font-weight:600}


/* Created date on the tasks table — a real timestamp, not a frozen "Today". */
.tbl th.c-cr, .tbl td.c-cr{width:92px;white-space:nowrap}
.t-cr{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* The now-line carries the time it claims to mark. It used to point at the wrong
   hour entirely — the ruler mapped 08:00–20:00 across the column while the line
   mapped a full 24h across the same width. */
/* ONE clock, at the foot of the ruler. It used to be `.tl-nowt`, nested inside
   the now-line — and the now-line is drawn once per ROW, so the time was
   restamped on every project, every person and every expanded sub-lane, a
   column of identical red pills sitting on top of the actual work. The line
   still runs through every row (that's its job); the label does not. */
.tl-nowhead{
  position:absolute; bottom:0; transform:translateX(-50%);
  background:var(--reopen,#E5484D); color:#fff; font-size:9.5px; font-weight:700;
  padding:2px 6px; border-radius:5px 5px 0 0; white-space:nowrap; pointer-events:none;
  font-variant-numeric:tabular-nums; line-height:1.3; z-index:6;
}
.tl-today.md{position:absolute; top:0; bottom:0; width:2px; background:var(--reopen,#E5484D); z-index:5; pointer-events:none}

/* ---- Spreadie action cards ------------------------------------------------
   The hierarchy was inverted: "Create task" — the MECHANISM — was the bold
   heading, and the actual work was small grey subtext. An architect's task has
   no separate title; the description IS the task, and it reads like a comment.
   So the description is the CONTENT of the card, and the mechanism is a chip. */
.spr-act{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px}
.spr-act.done{background:#F8FAFC;border-color:#E2E8F0}
.spr-act.danger{border-color:#FECACA;background:#FFFBFB}
.sa-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sa-kind{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#4F46E5;background:#EEF2FF;padding:3px 8px;border-radius:6px;white-space:nowrap}
.sa-kind svg{width:11px;height:11px}
.sa-kind.danger{color:#B91C1C;background:#FEE2E2}
.sa-done{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;color:#15803D;white-space:nowrap}
.sa-done svg{width:13px;height:13px}
/* the sentence — this is what the card is about */
.sa-body{font-size:14.5px;line-height:1.5;font-weight:600;color:var(--ink-1);white-space:pre-wrap;word-break:break-word}
.spr-act.done .sa-body{color:var(--ink-2)}
.sa-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.sa-chip{--c:#94A3B8;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--hover);border:1px solid var(--line);padding:2px 8px;border-radius:6px;white-space:nowrap}
.sa-chip[style*="--c"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.spr-act-btn{border:0;background:#007FFF;color:#fff;font-size:12.5px;font-weight:650;padding:6px 14px;border-radius:8px;cursor:pointer;flex:none}
.spr-act-btn:hover{filter:brightness(1.07)}
.spr-act.danger .spr-act-btn{background:#DC2626}

/* ONE door, after something has actually been applied — not one per card. */
.spr-goto{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:9px 14px;border:1px solid #BFDBFE;background:#EFF6FF;color:#0060C0;font-size:13px;font-weight:650;border-radius:10px;cursor:pointer}
.spr-goto:hover{background:#DBEAFE;border-color:#93C5FD}
.spr-goto svg{width:14px;height:14px}

/* Edit & delete, on the timeline hover card. */
/* Icon-only, square, and the FIRST one carries the auto margin — that is what
   pushes the pair to the right edge and lets the status chip stay its own size. */
.tt-act{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s}
.tt-act:first-of-type{margin-left:auto}
.tt-act:hover{background:var(--hover);color:var(--ink)}
.tt-act svg{width:15px;height:15px}
.tt-act.danger:hover{background:#FEE2E2;color:#DC2626;border-color:#FECACA}
.tt-act:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* team view: the two timelines are tabs now, not a stack */
.tl-tabrow{display:flex;align-items:center;gap:10px;margin-bottom:10px}

/* ── one task, several people, several clocks ──────────────────────────────
   A shared task used to have one number and one block, drawn identically in
   every assignee's lane. Each person now owns their own hours and their own
   slot; this row is where the split is stated. */
.asg-row{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface,#fff)}
.asg-nm{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap}
.asg-when{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:550;white-space:nowrap;font-variant-numeric:tabular-nums}
.asg-h{width:58px;flex:none;font:inherit;font-size:12.5px;font-weight:700;text-align:right;
  border:1px solid var(--line-2);border-radius:7px;padding:4px 6px;background:var(--surface,#fff);color:var(--ink);
  font-variant-numeric:tabular-nums}
.asg-h:disabled{border-color:transparent;background:none;color:var(--ink-2)}
.asg-h:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.asg-hu{font-size:11.5px;color:var(--ink-3);font-weight:600;margin-left:-4px}
.asg-tot{font-size:11.5px;color:var(--ink-3);font-weight:550;padding:2px 2px 0}
.asg-tot em{font-style:normal;opacity:.8}

/* ============================================================
   TASK PAGE — redesign (done-tick, prose description, people & time,
   quiet clock). Everything is editable in place; the pencil is gone.
   ============================================================ */
.tp-crumbline{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tp-eyebrow{font-size:11px;font-weight:750;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}

/* the work is the headline now — a card with a big tick on the left and the
   description reading as prose beside it. */
.desc-card{display:flex;gap:16px;align-items:flex-start;padding:20px 22px}
.tp-done{width:34px;height:34px;flex:none;border-radius:50%;border:2px solid var(--line-2);
  background:#fff;color:transparent;cursor:pointer;display:grid;place-items:center;margin-top:2px;
  transition:border-color .12s,background .12s,color .12s}
.tp-done svg{width:18px;height:18px}
.tp-done:hover{border-color:#10b981;color:#10b981}
.tp-done.on{background:#10b981;border-color:#10b981;color:#fff}
.desc-wrap{flex:1;min-width:0}
.desc-body.desc-live{width:100%;border:1px solid transparent;background:transparent;border-radius:8px;
  resize:none;overflow:hidden;font:inherit;font-size:16px;line-height:1.6;color:var(--ink);font-weight:500;
  padding:2px 4px;margin:0;display:block}
.desc-body.desc-live:hover{background:#f8fafc}
.desc-body.desc-live:focus{outline:none;background:#fbfdff;box-shadow:inset 0 0 0 1.5px var(--accent-sf)}
.desc-card.is-done .desc-body.desc-live{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(16,185,129,.6)}
.done-tag{color:#0f9d6b;font-weight:800}

/* the clock is a slim strip, quiet until it runs — no longer the loudest thing */
.tp-clock{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;margin-bottom:14px;border:1px solid;min-height:0}
.tp-clock .tc-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:none}
.tp-clock .tc-ico svg{width:15px;height:15px}
.tp-clock .tc-tx{min-width:0}
.tp-clock .lab{font-size:11px;font-weight:650;color:var(--ink-2);text-transform:none;letter-spacing:0}
.tp-clock .big{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.15}
.tp-clock.idle{background:#f8fafc;border-color:var(--line)}
.tp-clock.idle .tc-ico{background:var(--ink-3)}
.tp-clock.ok{background:#f0fdf6;border-color:#bbf7d0}
.tp-clock.ok .tc-ico{background:#10b981}
.tp-clock.ok .lab{color:#0f9d6b;font-weight:700}
.tp-clock.run{background:linear-gradient(120deg,#fff7ed,#fffdf9);border-color:#fdba74}
.tp-clock.run .tc-ico{background:#f59e0b}
.tp-clock.run .big{color:#b45309}
.tp-clock .pz{margin-left:auto;height:32px;width:32px;padding:0;gap:6px;justify-content:center;border-radius:9px;border:1px solid var(--line-2);background:#fff;display:inline-flex;align-items:center;color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.tp-clock .pz svg{width:15px;height:15px}
.tp-clock .pz.go{background:#007FFF;border-color:#007FFF;color:#fff}
.tp-clock .pz.go:hover{background:#0068d6}

/* people & time — one row per person, name on top, hours bar + number below.
   fits the rail width; the row that used to be clipped off the screen. */
.pt-block{padding:6px 0 4px}
.pt-block .sec-label{margin-bottom:9px}
.pt-block .pt-row{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px dashed var(--line)}
.pt-block .pt-row:last-of-type{border-bottom:0}
.pt-block .pt-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pt-block .pt-nm{font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-block .pt-when{font-size:11px;color:var(--ink-3);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pt-block .pt-h{width:50px;flex:none;font:inherit;font-size:12.5px;font-weight:700;text-align:right;border:1px solid var(--line-2);border-radius:7px;padding:4px 5px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.pt-block .pt-h:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.pt-block .pt-hu{font-size:11px;color:var(--ink-3);font-weight:600;margin-left:-5px}
.pt-block .pt-x{width:22px;height:22px;flex:none;border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:6px;display:grid;place-items:center;opacity:.55}
.pt-block .pt-x svg{width:13px;height:13px}
.pt-block .pt-x:hover{background:#fee2e2;color:#dc2626;opacity:1}
/* the task's actual rectangle in "On <name>'s day" is now the drag surface */
.aday .blk.own.drg{cursor:grab}
.aday .blk.own.drg:active{cursor:grabbing}
.aday .blk.own.drg .rh.r{position:absolute;top:0;right:0;width:9px;height:100%;cursor:ew-resize;border-radius:0 8px 8px 0}
.aday .blk.own.drg .rh.r:hover{background:rgba(255,255,255,.35)}
.pt-add{margin-top:9px}
.pt-add select{width:100%;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);border:1px dashed var(--line-2);border-radius:8px;padding:7px 9px;background:#fff;cursor:pointer}
.pt-tot{margin-top:9px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.pt-empty{font-size:12.5px;color:var(--ink-3)}
.tp-na{color:var(--ink-3);font-size:13px}

/* ── task status stepper: walk To do → In progress → Review → Done ─────────── */
.tp-stepblock{padding:4px 0 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.tp-stepblock .sec-label{margin-bottom:9px}
.tp-steps{display:flex;gap:4px}
.tp-step{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:40px;padding:5px 3px;
  border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink-3);cursor:pointer;
  font:inherit;font-size:10px;font-weight:700;line-height:1.15;text-align:center;transition:background .12s,color .12s,border-color .12s}
.tp-step span{white-space:normal;word-break:break-word}
.tp-step svg{width:12px;height:12px;flex:none}
.tp-step:hover{border-color:var(--sc);color:var(--sc)}
.tp-step.past{background:color-mix(in srgb,var(--sc) 12%,#fff);border-color:transparent;color:var(--sc)}
.tp-step.cur{background:var(--sc);border-color:var(--sc);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--sc) 34%,transparent)}
.tp-stepx{display:flex;gap:6px;margin-top:8px}
.tp-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink-2);cursor:pointer;font:inherit;font-size:11.5px;font-weight:650}
.tp-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--sc)}
.tp-chip:hover{border-color:var(--sc)}
.tp-chip.on{background:color-mix(in srgb,var(--sc) 14%,#fff);border-color:var(--sc);color:var(--sc)}

/* ── activity + comments: one stream, events + comments interleaved ────────── */
/* SCOPED to .tl-card — the task-page activity timeline. `.tl-scroll` and
   `.tl-empty` are ALSO used by the Plan & Timeline gantt; an unscoped
   `.tl-scroll{padding:8px 12px;...}` here pushed the gantt's sticky column in by
   12px and let day cells bleed left of it. Everything here now only applies
   inside the task timeline card. */
.tl-card{padding:6px 4px 10px}
.tl-card .tl-scroll{max-height:360px;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:12px}
.tl-card .tl-empty{font-size:12.5px;color:var(--ink-3);padding:14px 4px;text-align:center}
.tl-card .tl-ev{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2)}
.tl-card .tl-ev b{font-weight:700;color:var(--ink)}
.tl-card .tl-evic{width:22px;height:22px;flex:none;border-radius:50%;background:var(--side-2,#eef2f7);display:grid;place-items:center;color:var(--ink-3)}
.tl-card .tl-evic svg{width:12px;height:12px}
.tl-card .tl-evtx{flex:1;min-width:0}
.tl-card .tl-evt{font-size:11px;color:var(--ink-3);font-weight:550;white-space:nowrap;flex:none}
.tl-card .tl-msg{display:flex;gap:9px;align-items:flex-start}
.tl-card .tl-msg .av{margin-top:1px}
.tl-card .tl-mb{flex:1;min-width:0;background:var(--side-2,#f5f7fa);border-radius:10px;padding:8px 11px}
.tl-card .tl-msg.me .tl-mb{background:color-mix(in srgb,var(--accent) 9%,#fff)}
.tl-card .tl-mh{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.tl-card .tl-mh b{font-size:12.5px;font-weight:700;color:var(--ink)}
.tl-card .tl-mtx{font-size:13.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.tl-card .tl-in{display:flex;gap:8px;padding:10px 12px 4px;border-top:1px solid var(--line);margin-top:4px}
.tl-card .tl-in input{flex:1;font:inherit;font-size:13.5px;border:1px solid var(--line-2);border-radius:9px;padding:9px 12px;background:#fff;color:var(--ink)}
.tl-card .tl-in input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}

/* ── the tucked-away reference fields ─────────────────────────────────────── */
.tp-details{margin-bottom:14px}
.tp-details>summary{list-style:none;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-3);padding:9px 4px;display:flex;align-items:center;gap:6px}
.tp-details>summary::-webkit-details-marker{display:none}
.tp-details>summary::before{content:"▸";font-size:10px;transition:transform .15s}
.tp-details[open]>summary::before{transform:rotate(90deg)}
.tp-details>summary:hover{color:var(--ink-2)}
.tp-details .card{margin-top:2px}

/* ── task: ONE clear primary action button (replaces the tiny play icon) ──── */
.ta-primary{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;
  border:none;border-radius:12px;background:linear-gradient(135deg,#007FFF,#0068d6);color:#fff;cursor:pointer;
  font:inherit;font-size:15px;font-weight:750;box-shadow:0 8px 20px rgba(0,127,255,.32);transition:transform .1s,box-shadow .12s;margin-bottom:14px}
.ta-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,127,255,.4)}
.ta-primary:active{transform:translateY(0)}
.ta-primary svg{width:19px;height:19px}
.ta-primary.approve{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 20px rgba(16,185,129,.32)}
.ta-primary.approve:hover{box-shadow:0 12px 26px rgba(16,185,129,.42)}
.tp-act{margin-bottom:14px}
.tp-act.run{border:1px solid #fdba74;border-radius:12px;overflow:hidden;background:linear-gradient(120deg,#fff7ed,#fffdf9)}
.tp-act.run .ta-primary{margin:0;border-radius:0;background:linear-gradient(135deg,#10b981,#059669);box-shadow:none;height:44px}
.ta-live{display:flex;align-items:center;gap:9px;padding:11px 13px}
.ta-dot{width:9px;height:9px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18);flex:none;animation:tapulse 1.6s ease-in-out infinite}
@keyframes tapulse{50%{opacity:.4}}
.ta-lab{font-size:12px;font-weight:700;color:#b45309;text-transform:uppercase;letter-spacing:.4px}
.ta-clock{margin-left:2px;font-size:18px;font-weight:800;color:#b45309;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.ta-pause{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border:1px solid #fdba74;border-radius:8px;background:#fff;color:#b45309;cursor:pointer;font:inherit;font-size:12px;font-weight:700}
.ta-pause svg{width:13px;height:13px}
.tp-act.ok{display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid #bbf7d0;border-radius:12px;background:#f0fdf6}
.tp-act.ok .ta-ico{width:32px;height:32px;border-radius:9px;background:#10b981;color:#fff;display:grid;place-items:center;flex:none}
.tp-act.ok .ta-ico svg{width:17px;height:17px}
.tp-act.ok .ta-tx{display:flex;flex-direction:column;line-height:1.25}.tp-act.ok .ta-tx b{font-size:14px;color:#0f9d6b}.tp-act.ok .ta-tx span{font-size:11.5px;color:var(--ink-3)}
.ta-reopen{margin-left:auto;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff;color:var(--ink-2);cursor:pointer;font:inherit;font-size:12px;font-weight:700}

/* ── comment composer: obviously writable, pinned at the bottom ───────────── */
.tl-card .tl-in{gap:8px;padding:11px 12px;border-top:1px solid var(--line);margin-top:6px}
.tl-card .tl-in input{flex:1;font:inherit;font-size:14px;border:1.5px solid var(--line-2);border-radius:10px;padding:11px 14px;background:#fff;color:var(--ink)}
.tl-card .tl-in input::placeholder{color:var(--ink-3)}
.tl-card .tl-in input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.tl-card .tl-in .btn{height:auto;padding:0 18px}

/* ── meeting notes & updates ─────────────────────────────────────────────── */
.mu-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.mu-empty{font-size:12.5px;color:var(--ink-3);padding:4px 2px}
.mu-row{display:flex;gap:9px;align-items:flex-start}
.mu-b{flex:1;min-width:0;background:var(--side-2,#f5f7fa);border-radius:10px;padding:8px 11px}
.mu-h{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}.mu-h b{font-size:12.5px;color:var(--ink)}.mu-h span{font-size:11px;color:var(--ink-3)}
.mu-t{font-size:13.5px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.mu-in{display:flex;gap:8px}
.mu-in input{flex:1;font:inherit;font-size:14px;border:1.5px solid var(--line-2);border-radius:10px;padding:10px 13px;background:#fff;color:var(--ink)}
.mu-in input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}

/* ── Confirm your day: the day drawn, + add an entry ─────────────────────── */
.cd-bar{margin:0 0 16px;padding:6px 2px 2px}
.cdb-ruler{position:relative;height:15px}
.cdb-tick{position:absolute;transform:translateX(-50%);font-size:10px;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cdb-lane{position:relative;height:34px;border-radius:9px;background:var(--side-2,#eef2f7);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.cdb-lun{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(148,163,184,.16),rgba(148,163,184,.16) 4px,transparent 4px,transparent 8px)}
/* SCOPED. `.cdb-blk` is used by TWO different components: the create dialog's
   availability bar (.cdb-bar, 48px, blocks at 18/5) and the confirm-your-day
   lane (.cdb-lane, 34px, blocks at 4/4). This rule came later in the file, so it
   silently won everywhere — and the availability bar's existing-work blocks drew
   at the wrong height while the selection, the free slots and the hover ghost
   kept theirs. Reported as "the filled rectangle heights are not equal to the
   intended height". Same collision family as .tl-scroll / .tl-empty. */
.cdb-lane .cdb-blk{position:absolute;top:4px;bottom:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);overflow:hidden}
.cdb-lane .cdb-blk b{font-size:10px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.cdb-now{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--reopen,#E5484D);z-index:3}
.cd-tin{flex:1;min-width:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;background:#fff;max-width:100%}
.cd-tin::placeholder{color:var(--ink-3);font-weight:500}
.cd-tin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.cd-empty{padding:16px 12px;font-size:13px;color:var(--ink-3);text-align:center}
.cd-add{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;padding:9px 14px;border:1.5px dashed var(--line-2);border-radius:10px;background:none;color:var(--accent-d,#0068d6);cursor:pointer;font:inherit;font-size:13px;font-weight:700}
.cd-add:hover{border-color:var(--accent);background:var(--accent-sf)}
.cd-add svg{width:15px;height:15px}

/* ── Tasks: each task is 2 rows tall — details are STACKED PAIRS (x over y) in
   aligned columns: project/stage, flow/next, created, assigned/due, plan/actual,
   status/icons. ─────────────────────────────────────────────────────────────── */
.tk2-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow-x:auto}
.tk2-lh{display:grid;grid-template-columns:22px 12px minmax(190px,1.5fr) 148px 150px 82px 118px 90px 122px;align-items:center;gap:0 14px;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--paper,#fafbfc)}
.tk2-lh .tk2-check{grid-column:1}
.tk2-hl{font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk2{display:grid;grid-template-columns:22px 12px minmax(190px,1.5fr) 148px 150px 82px 118px 90px 122px;align-items:center;gap:0 14px;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .1s}
.tk2:hover{background:var(--paper,#f8fafc)}
.tk2.sel{background:var(--accent-sf)}
.tk2-cbwrap{display:grid;place-items:center;width:20px;height:20px}
.tk2-check{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.tk2 .sdot{width:9px;height:9px;border-radius:50%}
.tk2-title{min-width:0;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tk2.done .tk2-title{text-decoration:line-through;color:var(--ink-3)}
/* a stacked pair: x on top, y (muted) below */
.tk2-c{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.25}
.tk2-x{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.tk2-y{font-size:11.5px;font-weight:500;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.tk2-x svg,.tk2-y svg{width:12px;height:12px;flex:none;opacity:.8}
.tk2-proj{display:inline-flex;align-items:center;gap:5px;min-width:0}
.tk2-proj .code-dot{width:8px;height:8px;border-radius:50%;flex:none}
.tk2-proj,.tk2-flow{overflow:hidden;text-overflow:ellipsis}
.tk2-flow{color:var(--accent-d,#0068d6);display:inline-flex;align-items:center;gap:5px}
.tk2-y .over,.tk2-x .over{color:#dc2626;font-weight:650}
.tk2-next{display:inline-flex;align-items:center;gap:3px;color:#7c3aed;font-weight:600}
.tk2-next svg{width:12px;height:12px}
.tk2-cnum{text-align:right}
.tk2-cnum .tk2-x,.tk2-cnum .tk2-y{justify-content:flex-end;font-variant-numeric:tabular-nums}
.tk2-cnum em{font-style:normal;font-size:10px;font-weight:800;padding:1px 4px;border-radius:4px;margin-left:2px}
.tk2-cnum em.over{background:#fef3c7;color:#b45309}.tk2-cnum em.under{background:#dbeafe;color:#1d4ed8}.tk2-cnum em.on{background:#dcfce7;color:#15803d}
.tk2-avs{display:flex}
.tk2-avs .av.sm{width:24px;height:24px;font-size:9.5px;margin-left:-7px;border:2px solid var(--surface)}
.tk2-avs .av.sm:first-child{margin-left:0}
.tk2-cend .tk2-x{overflow:visible}
.tk2-icons{display:flex;align-items:center;gap:2px}
.tk2-ic{flex:none;position:relative;width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.tk2-ic svg{width:15px;height:15px}
.tk2-ic:hover{background:var(--hover,#eef2f7);color:var(--ink-2);border-color:var(--line)}
.tk2-badge{position:absolute;top:-3px;right:-3px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;font-style:normal;display:grid;place-items:center;line-height:1}
.tk2-addrow{display:flex;align-items:center;gap:10px;padding:12px 16px}

/* ── topbar: clock date sits OUTSIDE the CTA, no round dot ─────────────────── */
.tb-cdate{font-size:13px;font-weight:650;color:var(--ink-3);white-space:nowrap;margin-right:2px}
.tb-clock .dot{display:none}
.tb-banner{border:none;cursor:pointer;font:inherit}
.tb-banner:hover{filter:brightness(.97)}

/* ── link chip: copy button ───────────────────────────────────────────────── */
.att-cp{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid transparent;background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center}
.att-cp svg{width:14px;height:14px}
.att-cp:hover{background:var(--hover,#eef2f7);color:var(--accent-d,#0068d6);border-color:var(--line)}


/* ── availability bar: the time-under-pointer badge ───────────────────────── */
/* the hover preview is the blue rectangle where the task will land; the time
   sits centred inside it (never clips — it lives within the bar). */
.cdb-hovt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--accent-d,#0059b3);font-size:10.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 1px 2px rgba(255,255,255,.7)}

/* toast "View" link (created a task without leaving the screen) */
.toast-link{background:rgba(255,255,255,.22);color:#fff;border:none;border-radius:6px;padding:2px 9px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;margin-left:2px}
.toast-link:hover{background:rgba(255,255,255,.34)}

/* ══════════════════════════════════════════════════════════════════════════
   THE TASK PAGE, REDESIGNED (2026-07-17)

   The founder's read of the old one: "too many repetitive elements… no clear
   action and no clear what to do… the right side is a machine… the delete
   button is at the bottom so no one could find it at all." And the standard to
   hit: "If we go into a building, we find the stairs without asking, and we
   find the toilet without asking. That's how an architect designs a building.
   The same way, the application should not have to tell you."

   So the page reads top to bottom as the job itself: what the work IS → what to
   do about it → when it's happening and what actually happened → the record.
   Everything you do TO the task (delete, duplicate, next) is in one overflow.
   ══════════════════════════════════════════════════════════════════════════ */
.tp-page .tp-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.tp-page .tp-top .crumbs{margin:0}
.tp-iconbtn{width:30px;height:30px;flex:none;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.tp-iconbtn:hover{color:var(--ink);border-color:var(--ink-3);background:var(--paper)}
.tp-iconbtn svg{width:15px;height:15px}

/* THE WORK. One statement, editable where it sits — no title/description split,
   because taskLabel() only ever truncated the description anyway.
   max-height is LOAD-BEARING: it is what keeps the action bar above the fold
   however long the task, which is the failure mode Jira hit when it moved
   status under the summary (and reverted). Do not remove it. */
.tp-title{display:block;width:100%;border:1px solid transparent;background:transparent;border-radius:10px;
  resize:none;overflow-y:auto;max-height:8.2em;font:inherit;font-size:20px;line-height:1.45;font-weight:600;
  letter-spacing:-.2px;color:var(--ink);padding:6px 8px;margin:0 0 0 -8px}
.tp-title::placeholder{color:var(--ink-3);font-weight:500}
.tp-title:hover{background:var(--paper)}
.tp-title:focus{outline:none;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--accent-sf);border-color:var(--line-2)}
.tp-title.is-done{color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(16,185,129,.55);text-decoration-thickness:2px}
.tp-meta{font-size:11.5px;color:var(--ink-3);margin:2px 0 14px;font-variant-numeric:tabular-nums}

/* THE ACTION BAR — where it is, and the one thing to do next. Nothing else on
   the page changes status. */
.ta-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh);margin-bottom:20px}
.ta-bar .spacer{flex:1}
.ta-bar.is-run{border-color:rgba(0,127,255,.4);box-shadow:0 0 0 3px var(--accent-sf)}
.ta-bar.is-done{background:#F6FEFA;border-color:#A7E8C8}
.ta-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 10px 7px 11px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);font:inherit;font-size:13px;font-weight:700;
  color:var(--ink);cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s}
.ta-pill:hover{border-color:var(--sc,var(--accent));background:var(--paper)}
.ta-pill .ta-cv{display:grid;place-items:center;color:var(--ink-3);margin-left:1px}
.ta-pill .ta-cv svg{width:13px;height:13px}
.ta-note{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.ta-note svg{width:14px;height:14px;color:#10B981}
.ta-note b{color:var(--ink);font-weight:750}
.ta-timer{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:8px;background:var(--accent-sf)}
.ta-timer b{font-size:14px;font-weight:750;color:var(--accent-d);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.ta-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:taPulse 1.6s var(--ease) infinite}
.ta-timer.paused .ta-dot{background:var(--ink-3);animation:none}
@keyframes taPulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.ta-dot{animation:none}}
.btn.lg{padding:10px 18px;font-size:13.5px}

/* the status menu — every status the studio configured, one click away */
.stm{padding:5px;min-width:210px}
.stm-i{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;text-align:left}
.stm-i:hover{background:var(--paper);color:var(--ink)}
.stm-i.on{color:var(--ink);font-weight:750;background:var(--nav-active)}
.stm-i i{margin-left:auto;display:grid;place-items:center;color:var(--sc)}
.stm-i i svg{width:13px;height:13px}
.stm-sep{height:1px;background:var(--line);margin:5px 8px}
.mp-sep{height:1px;background:var(--line);margin:4px 6px}

/* WHEN — the plan stated in words, the lane underneath it */
.tp-sec{margin-bottom:22px}
.tp-h{font-size:11px;font-weight:750;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.tp-h-x{font-weight:600;letter-spacing:.2px;text-transform:none;color:#b3bdcc;margin-left:6px}
.tp-empty,.tp-none{font-size:12.5px;color:var(--ink-3);padding:12px 14px;border:1px dashed var(--line-2);border-radius:10px}
.tw-row{padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:var(--sh);margin-bottom:9px}
.tw-head{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.tw-nm{font-size:13px;font-weight:700}
.tw-plan{font-size:12px;color:var(--ink-3)}
.tw-plan b{color:var(--ink-2);font-weight:700}
.tw-plan i{font-style:normal;color:var(--ink-3)}
.tw-head .spacer{flex:1}
.tw-un{width:24px;height:24px;border:0;border-radius:7px;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.tw-un:hover{background:var(--reopen-bg);color:var(--reopen)}
.tw-un svg{width:12px;height:12px}
.tw-lane{position:relative;height:54px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.tw-lane .act-ch{height:36%}
.tw-lane:has(.act-ch) .blk{bottom:42%}
.tw-lane:has(.act-ch) .free{bottom:42%}
.tp-next{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;
  background:var(--paper);font-size:12.5px;color:var(--ink-2);cursor:pointer;margin-bottom:22px;text-decoration:none}
.tp-next:hover{border-color:var(--accent);color:var(--ink)}
.tp-next b{color:var(--ink);font-weight:700}
.tp-next svg{width:14px;height:14px;margin-left:auto;color:var(--ink-3)}

/* THE RAIL — a property list. The value IS the control. */
.rl{position:sticky;top:16px;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--sh)}
.rl-block{padding-bottom:12px;border-bottom:1px solid var(--line)}
.rl-k{display:block;font-size:10.5px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.rl-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.rl-row:last-child{border-bottom:0;padding-bottom:2px}
.rl-row .rl-k{flex:0 0 74px;margin:0}
.rl-v{flex:1;min-width:0}
.rl-in{width:100%;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);border:1px solid transparent;
  border-radius:7px;padding:5px 7px;background:transparent;cursor:pointer}
.rl-in:hover{background:var(--paper);border-color:var(--line-2)}
.rl-in:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf);cursor:text}
.rl-na{font-size:12.5px;color:var(--ink-3);padding-left:7px}
.rl-p{display:flex;align-items:center;gap:8px;padding:6px 0}
.rl-pn{flex:1;min-width:0;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-h{width:46px;flex:none;font:inherit;font-size:12px;font-weight:700;text-align:right;border:1px solid var(--line-2);
  border-radius:7px;padding:4px 5px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.rl-h:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.rl-hu{font-size:11px;color:var(--ink-3);font-weight:600;margin-left:-3px}
.rl-x{width:22px;height:22px;flex:none;border:0;border-radius:6px;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.rl-x:hover{background:var(--reopen-bg);color:var(--reopen)}
.rl-x svg{width:11px;height:11px}
.rl-add{width:100%;margin-top:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent-d);
  border:1px dashed var(--line-2);border-radius:8px;padding:6px 8px;background:transparent;cursor:pointer}
.rl-add:hover{border-color:var(--accent);background:var(--accent-sf)}
.rl-none{font-size:12.5px;color:var(--ink-3);padding:2px 0 6px}
.rl-tot{font-size:11px;color:var(--ink-3);margin-top:8px}

/* THE RECORD — one stream. An update is badged; a system event is de-weighted
   so a human line always outranks "moved to In progress". */
.tl-card .tp-h{padding:2px 2px 0}
.tl-modes{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--paper);border:1px solid var(--line-2);flex:none}
.tl-modes button{border:0;background:none;padding:4px 10px;border-radius:6px;font:inherit;font-size:11.5px;font-weight:650;
  color:var(--ink-3);cursor:pointer;transition:background .12s,color .12s}
.tl-modes button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}
.tl-comp{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);flex-wrap:wrap}
.tl-inwrap{position:relative;flex:1;min-width:160px}
.tl-inwrap input{width:100%;font:inherit;font-size:13px;border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;background:#fff}
.tl-inwrap input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.tl-badge{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-d);
  background:var(--accent-sf);border-radius:4px;padding:1px 5px;margin-left:1px}
.tl-msg.is-update .tl-mb{background:var(--accent-sf);border-color:rgba(0,127,255,.2)}
.tl-at{font-weight:700;color:var(--accent-d);background:var(--accent-sf);border-radius:4px;padding:0 3px}
.tl-at.me{color:#B45309;background:#FEF3C7}

/* @ — ask someone. Plain on purpose: an input, a list, Enter. */
.mn-pop{position:absolute;left:0;bottom:calc(100% + 6px);z-index:40;min-width:190px;padding:4px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--sh-lg)}
.mn-i{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:7px;background:none;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;text-align:left}
.mn-i:hover,.mn-i.on{background:var(--accent-sf);color:var(--ink)}
.mn-i i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--ink-3)}

@media(max-width:900px){
  .taskpage{grid-template-columns:1fr}
  .rl{position:static}
  .tp-title{font-size:18px}
}

/* `.tl-empty` belongs to the Plan gantt (sticky, 620px wide, min-height 160,
   grid-centred). The task stream reuses the class name and inherited all of it:
   the empty line rendered as a 300px centred column that broke "ask someone with
   @" across three lines. Same collision verify-timeline already guards for
   `.tl-scroll` — scope it under .tl-card, never restyle the bare class. */
.tl-card .tl-empty{position:static;width:auto;min-height:0;padding:26px 14px;display:block;
  text-align:center;font-size:12.5px;color:var(--ink-3)}
.tl-card .tl-empty b{color:var(--ink-2);font-weight:750}

/* ══ TASK PAGE v2 (2026-07-17, second pass) ═══════════════════════════════
   "It should be tasks and task number, that's it" — the crumb is navigation,
   not a second copy of the task's own fields. "In the right side should the
   timeline… and show the activity too there as when it was actually done."
   "Remove the horizontal lines and remove the add someone — just assigned to,
   and the dropdown with the ability to select multiple persons."
   ══════════════════════════════════════════════════════════════════════════ */
.taskpage{grid-template-columns:1fr minmax(300px,360px)}

/* WHEN — now in the rail. The lane is % based (pxm), so it is responsive by
   construction; only the chrome around it needed to shrink. */
.tw-card{padding:14px 15px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  box-shadow:var(--sh);margin-bottom:12px}
.tw-t{font-size:10.5px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.tw-t-x{font-weight:600;letter-spacing:.2px;text-transform:none;color:#c2cad6;margin-left:5px}
.tw-none{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.tw-p+.tw-p{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.tw-p-h{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.tw-p-n{flex:1;min-width:0;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-h{width:44px;flex:none;font:inherit;font-size:12px;font-weight:700;text-align:right;border:1px solid var(--line-2);
  border-radius:6px;padding:3px 4px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.tw-h:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-sf)}
.tw-hu{font-size:10.5px;color:var(--ink-3);font-weight:600}
.tw-line{display:flex;align-items:center;gap:7px;font-size:11.5px;margin:6px 0}
.tw-k{flex:0 0 46px;font-weight:700;color:var(--ink-3);font-size:10px;letter-spacing:.4px;text-transform:uppercase}
.tw-v{flex:1;min-width:0;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-v.na{color:var(--ink-3);font-style:italic}
.tw-un{width:20px;height:20px;flex:none;border:0;border-radius:5px;background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.tw-un:hover{background:var(--reopen-bg);color:var(--reopen)}
.tw-un svg{width:10px;height:10px}
.tw-lane{position:relative;height:46px;border-radius:7px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.tw-lane .act-ch{height:36%}
.tw-lane:has(.act-ch) .blk{bottom:42%}
.tw-lane:has(.act-ch) .free{bottom:42%}
.tw-lane .bl,.tw-lane .free-lab{display:none}   /* no room for labels at rail width — the tip carries them */
.tw-find{width:100%;justify-content:center;margin-top:8px}

/* THE RAIL — no rules between rows. The founder asked for the lines out; the
   label/value pairing is enough structure without drawing it. */
.rl-row{border-bottom:0;padding:9px 0;align-items:center}
.rl-row .rl-k{flex:0 0 84px}
.rl-asg{display:flex;align-items:center;gap:7px;width:100%;padding:5px 7px;border:1px solid transparent;
  border-radius:7px;background:transparent;font:inherit;cursor:pointer;text-align:left}
.rl-asg:hover{background:var(--paper);border-color:var(--line-2)}
.rl-avs{display:flex;flex:none}
.rl-avs .av{margin-right:-6px;box-shadow:0 0 0 2px var(--surface)}
.rl-who{flex:1;min-width:0;font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:7px}
.rl-who.na{color:var(--ink-3);font-weight:600;margin-left:0}
.rl-cv{display:grid;place-items:center;color:var(--ink-3);flex:none}
.rl-cv svg{width:13px;height:13px}
.asg-m{padding:5px;min-width:240px}
.asg-h{font-size:10px;font-weight:750;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);padding:5px 8px 7px}
.asg-i{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;text-align:left}
.asg-i:hover{background:var(--paper)}
.asg-i.on{color:var(--ink);font-weight:700}
.asg-n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asg-i i{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.asg-bx{width:16px;height:16px;flex:none;border:1.5px solid var(--line-2);border-radius:5px;display:grid;place-items:center;
  color:transparent;transition:background .12s,border-color .12s,color .12s}
.asg-bx svg{width:10px;height:10px}
.asg-i.on .asg-bx{background:var(--accent);border-color:var(--accent);color:#fff}
.asg-i:hover .asg-bx{border-color:var(--accent)}

/* BLOCKED — the state of the work, said on the work */
.ta-blk{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;margin-bottom:8px;border-radius:10px;
  border:1px solid #FDE68A;background:#FFFBEB;font:inherit;text-align:left;cursor:pointer;transition:border-color .12s}
.ta-blk:hover{border-color:#F59E0B}
.ta-blk-t{flex:none;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:#F59E0B;border-radius:4px;padding:2px 6px}
.ta-blk-x{flex:1;min-width:0;font-size:12.5px;color:#92400E;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-blk-w{flex:none;font-size:11px;color:#B45309;opacity:.8}

/* THE CONVERSATION */
.cv-top{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.cv-f{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);font:inherit;font-size:11.5px;font-weight:650;color:var(--ink-3);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.cv-f:hover{border-color:var(--ink-3);color:var(--ink-2)}
.cv-f.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cv-f i{font-style:normal;font-size:10px;font-weight:700;opacity:.6;font-variant-numeric:tabular-nums}
.cv-scroll{max-height:460px;overflow-y:auto;padding:4px 2px;display:flex;flex-direction:column;gap:3px}
.cv-empty{padding:26px 14px;text-align:center;font-size:12.5px;color:var(--ink-3)}
.cv-empty b{color:var(--ink-2)}
.cv-m{display:flex;gap:9px;padding:8px 8px;border-radius:10px;transition:background .2s}
.cv-m .av{margin-top:2px;flex:none}
.cv-b{flex:1;min-width:0}
.cv-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.cv-h b{font-size:12.5px;font-weight:700}
.cv-t{font-size:11px;color:var(--ink-3)}
.cv-kind{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-d);
  background:var(--accent-sf);border-radius:4px;padding:1px 5px}
.cv-x{font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.cv-re{margin-left:auto;display:inline-flex;align-items:center;gap:3px;border:0;background:none;padding:2px 4px;border-radius:5px;
  font:inherit;font-size:10.5px;font-weight:650;color:var(--ink-3);cursor:pointer;opacity:0;transition:opacity .12s,color .12s}
.cv-re svg{width:10px;height:10px}
.cv-m:hover .cv-re,.cv-re:focus-visible{opacity:1}
.cv-re:hover{color:var(--accent-d);background:var(--accent-sf)}
.cv-m.is-up .cv-b{background:var(--accent-sf);border-radius:9px;padding:7px 9px;margin:-3px 0}
.cv-q{font-size:11.5px;color:var(--ink-3);border-left:2px solid var(--line-2);padding:1px 0 1px 7px;margin-bottom:4px}
.cv-q b{color:var(--ink-2);margin-right:5px;font-weight:700}
.cv-kids{margin-top:7px;padding-left:11px;border-left:2px solid var(--line)}
.cv-kids .cv-m{padding:5px 0}
.cv-att{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cv-hi{background:#FFFBEB;box-shadow:0 0 0 2px #FDE68A}
/* the tag says what the message DOES to the work */
.cv-tag{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:1px 5px}
.tg-blocked   .cv-tag,.cv-tag.tg-blocked   {background:#FEF3C7;color:#B45309}
.tg-continuing .cv-tag,.cv-tag.tg-continuing{background:#D1FAE5;color:#047857}
.tg-decision  .cv-tag,.cv-tag.tg-decision  {background:#EDE9FE;color:#6D28D9}
.tg-query     .cv-tag,.cv-tag.tg-query     {background:#E0F2FE;color:#0369A1}
.tg-issued    .cv-tag,.cv-tag.tg-issued    {background:#F1F5F9;color:#475569}
.cv-m.tg-blocked{background:#FFFCF3}
/* composer */
.cv-comp{border-top:1px solid var(--line);padding:10px 2px 2px;margin-top:8px}
.cv-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cv-row2{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cv-tags{display:flex;gap:4px;flex-wrap:wrap}
.cv-tg{padding:4px 9px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font:inherit;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--ink-3);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.cv-tg:hover{border-color:var(--ink-3);color:var(--ink-2)}
.cv-tg.on.tg-blocked   {background:#FEF3C7;border-color:#F59E0B;color:#B45309}
.cv-tg.on.tg-continuing{background:#D1FAE5;border-color:#10B981;color:#047857}
.cv-tg.on.tg-decision  {background:#EDE9FE;border-color:#8B5CF6;color:#6D28D9}
.cv-tg.on.tg-query     {background:#E0F2FE;border-color:#0EA5E9;color:#0369A1}
.cv-tg.on.tg-issued    {background:#E2E8F0;border-color:#94A3B8;color:#334155}
.cv-clip{width:32px;height:32px;flex:none;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);
  color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:color .12s,border-color .12s}
.cv-clip:hover{color:var(--accent-d);border-color:var(--accent)}
.cv-clip svg{width:14px;height:14px}
.cv-reto{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);background:var(--paper);
  border:1px solid var(--line-2);border-radius:8px;padding:5px 8px;margin-bottom:8px}
.cv-reto svg{width:11px;height:11px;flex:none}
.cv-reto b{color:var(--ink-2)}
.cv-reto button{margin-left:auto;border:0;background:none;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;padding:2px}
.cv-reto button svg{width:10px;height:10px}
.cv-pend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@media (prefers-reduced-motion:reduce){.cv-m,.cv-re,.cv-f,.cv-tg{transition:none}}
@media(max-width:900px){
  .taskpage{grid-template-columns:1fr}
  .tw-lane{height:52px}
}

/* `.tl-ev` (a system event line) was only ever styled under `.tl-card`, and the
   conversation's container is now `.cv-scroll` — so the events lost their flex
   gap and rendered as "added Diyajust now". Same scoping family as the
   `.tl-scroll` / `.tl-empty` collisions the gate already guards. */
.cv-scroll .tl-ev{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);padding:4px 8px}
.cv-scroll .tl-ev b{font-weight:700;color:var(--ink-2)}
.cv-scroll .tl-evic{display:grid;place-items:center;width:15px;height:15px;flex:none;color:var(--ink-3);font-size:10px}
.cv-scroll .tl-evic svg{width:11px;height:11px}
.cv-scroll .tl-evtx{flex:1;min-width:0}
.cv-scroll .tl-evt{flex:none;font-size:10.5px;color:var(--ink-3);opacity:.75}

/* ══ TASK PAGE v3 (2026-07-17, third pass) ════════════════════════════════ */

/* TOP BAR: link · edit · delete, then Create another task hard right. The ⋯ is
   gone — three things do not need a menu, and "no one could find it" was the
   original complaint about hiding a real action. */
.tp-iconbtn.danger:hover{color:var(--reopen);border-color:var(--reopen);background:var(--reopen-bg)}
.tp-page .tp-top{gap:6px}
.tp-page .tp-top .spacer{flex:1}

/* meta ABOVE the work — the frame you read it inside */
.tp-meta{margin:0 0 8px;font-size:11.5px;color:var(--ink-3)}
.tp-title{margin-bottom:2px}
.tp-title.flash{background:var(--accent-sf);box-shadow:inset 0 0 0 1.5px var(--accent)}

/* THE ACTION BAR: play · clock · status. Nothing else. */
.ta-bar{gap:12px}
.ta-play{width:42px;height:42px;flex:none;border:0;border-radius:11px;background:var(--accent);color:#fff;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px rgba(0,127,255,.28);
  transition:background .12s,transform .1s}
.ta-play:hover{background:var(--accent-d)} .ta-play:active{transform:scale(.94)}
.ta-play svg{width:17px;height:17px;margin-left:1px}
.ta-play.on{background:var(--ink);box-shadow:0 6px 16px rgba(15,23,43,.24)}
.ta-play.on svg{margin-left:0}
.ta-tick{width:42px;height:42px;flex:none;border-radius:11px;background:#10B981;color:#fff;display:grid;place-items:center}
.ta-tick svg{width:18px;height:18px}
.ta-mid{min-width:0}
.ta-clock{display:block;font-size:22px;font-weight:750;letter-spacing:-.6px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;line-height:1.1}
.ta-clock.live{color:var(--accent-d)}
.ta-sub{display:block;font-size:11px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-bar.is-done .ta-clock{color:#047857}
.ta-pill{padding:9px 12px 9px 13px;font-size:13.5px}

/* BLOCKED / QUESTION — the state of the work, with the way out on it */
.ta-blk{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px 8px 12px;margin-bottom:8px;border-radius:10px;border:1px solid}
.ta-blk.b{border-color:#FDE68A;background:#FFFBEB}
.ta-blk.q{border-color:#BAE6FD;background:#F0F9FF}
.ta-blk-x{flex:1;min-width:0;border:0;background:none;padding:0;text-align:left;font:inherit;font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.ta-blk.b .ta-blk-x{color:#92400E} .ta-blk.q .ta-blk-x{color:#075985}
.ta-blk-x:hover{text-decoration:underline}
.ta-blk.b .ta-blk-t{background:#F59E0B} .ta-blk.q .ta-blk-t{background:#0EA5E9}
.ta-blk.b .ta-blk-w{color:#B45309} .ta-blk.q .ta-blk-w{color:#0369A1}
.ta-blk-r{display:inline-flex;align-items:center;gap:4px;flex:none;border:1px solid;border-radius:7px;padding:4px 9px;
  background:var(--surface);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.ta-blk.b .ta-blk-r{border-color:#F59E0B;color:#B45309} .ta-blk.q .ta-blk-r{border-color:#0EA5E9;color:#0369A1}
.ta-blk-r:hover{background:#fff}
.ta-blk-r svg{width:11px;height:11px}

/* attachments, inside the divider */
.tp-att{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:22px 0}

/* THE COMPOSER IS A TAB RING, NOT A BADGE RING */
.tl-modes{padding:0;gap:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.tl-modes button{border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:7px 13px;font-size:13px}
.tl-modes button.on{background:none;box-shadow:none;color:var(--ink);border-bottom-color:var(--accent);font-weight:700}
.cv-row1{gap:12px;margin-bottom:10px;align-items:flex-end}

/* the event line — a person did a thing, said quietly but legibly */
.cv-scroll .tl-ev{gap:8px;padding:7px 8px;font-size:12.5px;color:var(--ink-3)}
.cv-scroll .tl-ev .av{flex:none;opacity:.75}
.cv-scroll .tl-evi2{display:grid;place-items:center;width:13px;height:13px;flex:none;color:var(--ink-3);opacity:.6;font-size:9px}
.cv-scroll .tl-evi2 svg{width:10px;height:10px}
.cv-scroll .tl-evt{font-variant-numeric:tabular-nums}

/* messages: the actions are always there. Hover-to-reveal is how you hide a
   feature — "where should I reply?" */
.cv-m{padding:9px 10px}
.cv-act{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:3px 6px;border-radius:6px;
  font:inherit;font-size:10.5px;font-weight:650;color:var(--ink-3);cursor:pointer;opacity:.75;
  transition:opacity .12s,color .12s,background .12s}
.cv-act svg{width:11px;height:11px}
.cv-m:hover .cv-act{opacity:1}
.cv-act:hover{color:var(--accent-d);background:var(--accent-sf);opacity:1}
.cv-act.done{color:#047857}
.cv-h .spacer{flex:1}
.cv-t{font-variant-numeric:tabular-nums}
/* reactions */
.cv-rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cv-rxb{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border:1px solid var(--line-2);border-radius:999px;
  background:var(--surface);font:inherit;font-size:12px;cursor:pointer;transition:border-color .12s,background .12s}
.cv-rxb:hover{border-color:var(--ink-3)}
.cv-rxb.on{background:var(--accent-sf);border-color:var(--accent)}
.cv-rxb i{font-style:normal;font-size:10px;font-weight:700;color:var(--ink-3)}
.cv-rxb.on i{color:var(--accent-d)}
.rx-pop{display:flex;gap:2px;padding:5px}
.rx-b{width:32px;height:32px;border:0;border-radius:8px;background:none;font-size:17px;line-height:1;cursor:pointer;transition:background .12s,transform .1s}
.rx-b:hover{background:var(--paper);transform:scale(1.18)}
/* resolved */
.cv-res{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:11px;font-weight:650;color:#047857}
.cv-res svg{width:11px;height:11px}
.cv-m.is-res{opacity:.72}
.cv-m.is-res .cv-tag{opacity:.55}
.cv-m.tg-question{background:#F7FCFF}
.cv-m.is-res.tg-blocked,.cv-m.is-res.tg-question{background:transparent}
.cv-tag.tg-question{background:#E0F2FE;color:#0369A1}
.cv-tg.on.tg-question{background:#E0F2FE;border-color:#0EA5E9;color:#0369A1}

/* the composer, given room to be a composer */
.cv-comp{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px 11px;margin-top:12px;box-shadow:var(--sh)}
.cv-row2{gap:8px}
.tl-inwrap input{padding:10px 12px;font-size:13.5px;border-radius:10px}
.cv-clip{width:34px;height:34px;border-radius:9px}
.cv-comp .btn.primary{padding:9px 16px}
@media (prefers-reduced-motion:reduce){.ta-play,.rx-b,.cv-act,.cv-rxb{transition:none}}
@media(max-width:640px){
  .ta-clock{font-size:19px}
  .tp-page .tp-top .btn{padding:7px 10px;font-size:12px}
}

/* ══ TASK PAGE v4 (2026-07-17) ════════════════════════════════════════════
   "Move this to the right side section. It's so small — why do we need to give
   it this much space? And I hate the circle around it, like the containering it."
   Three small controls had a full-width row and a card of their own. They live
   at the top of the When card now: the clock, the status and the plan are all
   the same subject, so they are one card, and the bar has no box of its own.

   NB this also lands back on Jira's validated placement — they moved status out
   of the rail in Sept 2025 and reverted within a month (JRACLOUD-96247).
   ══════════════════════════════════════════════════════════════════════════ */
.tw-card .ta-bar{padding:0 0 12px;margin:0 0 12px;border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:none;box-shadow:none;gap:10px;flex-wrap:wrap}
.tw-card .ta-bar.is-run,.tw-card .ta-bar.is-done{background:none;box-shadow:none;border-color:var(--line)}
.tw-card .ta-play,.tw-card .ta-tick{width:34px;height:34px;border-radius:9px;box-shadow:none}
.tw-card .ta-play svg,.tw-card .ta-tick svg{width:14px;height:14px}
.tw-card .ta-play:hover{box-shadow:0 4px 10px rgba(0,127,255,.28)}
.tw-card .ta-clock{font-size:17px;letter-spacing:-.4px}
.tw-card .ta-sub{display:none}                 /* the state is on the pill; the caption was noise at this size */
.tw-card .ta-bar .spacer{flex:1}
.tw-card .ta-pill{padding:6px 9px 6px 10px;font-size:12px}
.tw-card .ta-pill .sdot{width:7px;height:7px}

/* ATTACHMENTS: no rules. `.att` already draws its own top border, and `.tp-att`
   was adding two more — hence the doubled line above the heading. */
.tp-att{border:0;padding:0;margin:20px 0}
.tp-att .att{margin-top:0;border-top:0;padding-top:0}

/* THE BADGES ARE THE ONLY CONTROL. Update sits with the rest — it was a tab ring
   above a badge ring: two languages for one row of choices. */
.cv-row1{margin-bottom:9px;align-items:center}
.cv-tags{gap:5px}
.cv-tg{padding:5px 11px;font-size:11px}
.cv-tg.on.tg-update{background:var(--accent-sf);border-color:var(--accent);color:var(--accent-d)}
.cv-tag.tg-update{background:var(--accent-sf);color:var(--accent-d)}
.cv-m.tg-update{background:#F7FBFF}

/* ══ TASK PAGE v5 (2026-07-17) ════════════════════════════════════════════
   "The drop-down needs to be designed better — make the height a bit more
   substantial, it doesn't feel like a distinct button. Instead of the circle to
   the left, use the colour of the circle as the background, and the text should
   be white. The dropdown arrow will also be white."

   The status is the loudest fact on this page. It now looks like it: the pill
   IS its status colour, at a size you can hit.
   ══════════════════════════════════════════════════════════════════════════ */
.ta-pill,.tw-card .ta-pill{
  background:var(--sc);border:0;border-radius:10px;padding:11px 11px 11px 14px;
  color:#fff;font-size:13px;font-weight:700;letter-spacing:-.1px;
  box-shadow:0 2px 6px color-mix(in srgb, var(--sc) 40%, transparent);
  transition:filter .12s, transform .1s}
.ta-pill:hover,.tw-card .ta-pill:hover{background:var(--sc);filter:brightness(1.08)}
.ta-pill:active{transform:scale(.97)}
.ta-pill .ta-cv,.tw-card .ta-pill .ta-cv{color:#fff;opacity:.85;margin-left:2px}
.ta-pill .ta-cv svg,.tw-card .ta-pill .ta-cv svg{width:14px;height:14px}
.ta-pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* To do is the one light status — white on #94A3B8 is legible, but the border
   keeps it from dissolving into the card behind it. */
.ta-pill.s-todo{box-shadow:0 2px 6px rgba(148,163,184,.35)}

/* the bar sits IN the card, not on top of it: same left edge as everything
   below, and a rule that reads as a divider rather than a lid */
.tw-card .ta-bar{padding:2px 0 13px;margin:0 0 13px;align-items:center}
/* the play matches the status button's height, so the row reads as one thing */
.tw-card .ta-play,.tw-card .ta-tick{width:38px;height:38px;border-radius:10px}
.tw-card .ta-play svg,.tw-card .ta-tick svg{width:15px;height:15px}
.tw-card .ta-play{box-shadow:none}
.tw-card .ta-play.on{background:#F59E0B}          /* pause → On hold, and it says so in advance */
.tw-card .ta-play.on:hover{background:#D97706}
.tw-card .ta-tick.run{background:var(--doing);color:#fff}
.tw-card .ta-clock{font-size:18px;letter-spacing:-.4px;cursor:default}

/* ══ TASK PAGE v6 (2026-07-17) ════════════════════════════════════════════
   "Put this outside the container and remove the pause button… the arrow is a
   right-side arrow, it was supposed to be a drop-down arrow. Create Another Task
   should be moved near the delete button — just show it as a plus icon after
   the delete icon."

   The bar is now the state of the work, sitting on the page above the plan
   rather than inside it: the clock plus the one control that moves the task.
   ══════════════════════════════════════════════════════════════════════════ */
.tp-side>.ta-bar{padding:0 2px 12px;margin:0 0 12px;border:0;border-bottom:0;border-radius:0;
  background:none;box-shadow:none;gap:10px;align-items:center}
.tp-side>.ta-bar.is-run,.tp-side>.ta-bar.is-done{background:none;box-shadow:none;border:0}
.tp-side>.ta-bar .ta-clock{font-size:21px;letter-spacing:-.5px;cursor:default}
.tp-side>.ta-bar .spacer{flex:1}

/* ══ WHEN: the lane is the picker ═════════════════════════════════════════
   Unscheduled, the lane used to be an empty strip that did nothing and said
   nothing. It is now how you say "Thursday morning" — the same click-the-bar,
   see-the-time interaction the create dialog already uses. */
.tw-nav{display:flex;align-items:center;gap:4px;margin:8px 0 6px}
.tw-nav button{width:22px;height:22px;flex:none;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);
  color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:border-color .12s,color .12s}
.tw-nav button:hover{border-color:var(--accent);color:var(--accent-d)}
.tw-nav button svg{width:11px;height:11px}
.tw-nav b{font-size:12px;font-weight:700;color:var(--ink);min-width:74px;text-align:center}
.tw-hint{margin-left:auto;font-size:10.5px;color:var(--ink-3)}
.tw-lane.place{cursor:crosshair}
.tw-lane.place .free.open{background:repeating-linear-gradient(45deg,var(--accent-sf),var(--accent-sf) 5px,#dcebff 5px,#dcebff 10px);
  border:1px dashed #9fc6ff;pointer-events:none}
.tw-lane.place .free.open .free-lab{color:var(--accent-d);font-size:9px;font-weight:700}
.tw-lane.place .blk{pointer-events:none;opacity:.62}      /* what's already there is context, not a target */
.tw-lane.nofit{cursor:not-allowed}
.tw-ghost{position:absolute;top:2px;bottom:2px;z-index:8;border-radius:4px;background:rgba(0,127,255,.2);
  border:1.5px dashed var(--accent);display:grid;place-items:center;pointer-events:none}
.tw-ghost b{font-size:9.5px;font-weight:800;color:var(--accent-d);white-space:nowrap}
.tw-find{width:100%;justify-content:center;margin-top:9px}

/* ══ TASK PAGE v7 + create dialog + confirm-your-day (2026-07-17) ═════════ */

/* BACK, not "Tasks". You came from somewhere; go back there. */
.tp-back{width:30px;height:30px;flex:none;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);
  color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.tp-back:hover{border-color:var(--ink-3);color:var(--ink);background:var(--paper)}
.tp-back svg{width:15px;height:15px}
.tp-id{font-size:13px;font-weight:750;color:var(--ink);letter-spacing:-.1px;font-variant-numeric:tabular-nums;margin-right:2px}

/* THE ESTIMATE IS A CONTROL, NOT A DECORATION. It was a bare number box at the
   end of the name row — "the hr selection feels hidden, users cannot find that
   usable". Now it is labelled, on its own line, with buttons you can hit. */
.tw-est{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);overflow:hidden}
.tw-est button{width:26px;height:26px;flex:none;border:0;background:none;color:var(--ink-2);font:inherit;
  font-size:15px;font-weight:700;line-height:1;cursor:pointer;transition:background .12s,color .12s}
.tw-est button:hover{background:var(--accent-sf);color:var(--accent-d)}
.tw-est .tw-h{width:40px;border:0;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);
  border-radius:0;text-align:center;padding:4px 2px;font-size:12.5px;font-weight:700}
.tw-est .tw-h:focus{outline:none;background:var(--accent-sf)}
.tw-est i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink-3);padding:0 5px}
.tw-est .tw-h::-webkit-outer-spin-button,.tw-est .tw-h::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tw-est .tw-h{-moz-appearance:textfield}

/* CLOSE the create dialog. Escape works; nothing said so. */
.ctabs-x{margin-left:auto;align-self:center;width:26px;height:26px;flex:none;border:0;border-radius:7px;
  background:none;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;margin-bottom:6px;
  transition:background .12s,color .12s}
.ctabs-x:hover{background:rgba(15,23,43,.07);color:var(--ink)}
.ctabs-x svg{width:12px;height:12px}

/* CREATE A PROJECT WITHOUT LEAVING. */
.ct-pf{display:flex;gap:7px;align-items:center}
.ct-pf select{flex:1;min-width:0}
.ct-np-add{display:inline-flex;align-items:center;gap:4px;flex:none;padding:9px 11px;border:1px dashed var(--line-2);
  border-radius:9px;background:transparent;font:inherit;font-size:12.5px;font-weight:650;color:var(--accent-d);
  cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s}
.ct-np-add:hover{border-color:var(--accent);background:var(--accent-sf)}
.ct-np-add svg{width:12px;height:12px}
.ct-np{display:flex;gap:7px;align-items:center}
.ct-np input{flex:1;min-width:0;font:inherit;font-size:14px;border:1px solid var(--accent);border-radius:9px;
  padding:9px 12px;background:#fff;color:var(--ink)}
.ct-np input:focus{outline:none;box-shadow:0 0 0 3px var(--accent-sf)}
.ct-np-x{width:30px;height:30px;flex:none;border:0;border-radius:8px;background:none;color:var(--ink-3);
  display:grid;place-items:center;cursor:pointer}
.ct-np-x:hover{background:var(--paper);color:var(--ink)}
.ct-np-x svg{width:11px;height:11px}

/* AN X ON THE PICKED TIME — a mis-click is undone where you made it. */
.cdb-sel{gap:4px}
.cdb-x{width:15px;height:15px;flex:none;border:0;border-radius:4px;background:rgba(255,255,255,.28);color:#fff;
  display:grid;place-items:center;cursor:pointer;pointer-events:auto;transition:background .12s}
.cdb-x:hover{background:rgba(255,255,255,.5)}
.cdb-x svg{width:8px;height:8px}
.cdb-sel{pointer-events:auto}
.cdb-pick.on{display:flex;align-items:center;gap:6px;color:var(--ink)}
.cdb-pick.on svg{width:13px;height:13px;color:#10B981}

/* DRAW WHAT YOU DID. Drag across the bar; the rectangle is the entry. */
.cdb-lane[data-cddraw]{cursor:crosshair;touch-action:none}
.cdb-draw{position:absolute;top:3px;bottom:3px;z-index:5;border-radius:5px;background:rgba(0,127,255,.22);
  border:1.5px dashed var(--accent);display:grid;place-items:center;pointer-events:none}
.cdb-draw b{font-size:9.5px;font-weight:800;color:var(--accent-d);white-space:nowrap}

/* ══ MY DAY: one ruler, one red line, one label ═══════════════════════════
   Every marker was drawn per-lane: two rulers, two "Now" pills, and a red line
   broken into two segments by each lane's own overflow — the same instant said
   four times. The line now lives on the stack and runs through both lanes; the
   time is written once, at the top.

   And the empty note was centred INSIDE the activity lane, so the Lunch hatch
   drew through the middle of the sentence. It is on the label now, where it
   cannot collide with anything and costs no space. */
.figd-top{position:relative;height:16px;margin-bottom:2px}
.figd-top .figd-ruler{position:static}
.figd-stack{position:relative}
.figd-nowpill{position:absolute;top:-1px;transform:translateX(-50%);z-index:6;
  background:var(--reopen);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.02em;
  border-radius:4px;padding:2px 6px;white-space:nowrap;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(239,68,68,.34)}
/* the single line, over both lanes and the label between them */
/* height:auto is LOAD-BEARING. The older .figd-now sets height:64px — one lane
   — and with top, bottom AND height all set the box is over-constrained, so CSS
   keeps height and drops bottom. The line silently stayed one lane tall. */
.figd-stack>.figd-now{position:absolute;top:0;bottom:0;height:auto;width:2px;margin-left:-1px;
  transform:none;background:var(--reopen);z-index:5;pointer-events:none;opacity:.9}
.figd-nowt{display:none}
.figd-lbl2{margin-top:16px}
.figd-lane{position:relative;z-index:1}

/* ══ THE DEADLINE FIELD ═══════════════════════════════════════════════════
   Was <input type="datetime-local">: day/month/year/hour/minute/AM-PM — six tap
   targets a few pixels apart. Aiming for "hour" and landing on "year" wrote
   202611 silently; auto-advance spilled digits into the wrong segment; and
   select-all inside it selected the whole page. Nearly every misclick in a real
   run came from this one control.

   A studio deadline is a DAY. One calendar, no segments, and the four answers
   people actually give sitting beside it. */
.dl-f{display:flex;align-items:center;gap:6px}
.dl-f input[type="date"]{flex:1;min-width:0}
.dl-x{width:30px;height:30px;flex:none;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);
  color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:color .12s,border-color .12s}
.dl-x:hover{color:var(--reopen);border-color:var(--reopen)}
.dl-x svg{width:10px;height:10px}
.dl-q{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.dl-c{padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);
  font:inherit;font-size:11.5px;font-weight:650;color:var(--ink-3);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.dl-c:hover{border-color:var(--accent);color:var(--accent-d)}
.dl-c.on{background:var(--accent);border-color:var(--accent);color:#fff}