:root{
  --bg:#FFFFFF; --sb:#F7F7F5;
  --hover:rgba(55,53,47,.055); --hover-2:rgba(55,53,47,.09);
  --line:rgba(55,53,47,.09); --line-2:rgba(55,53,47,.16);
  --t1:#37352F; --t2:rgba(55,53,47,.65); --t3:rgba(55,53,47,.45);
  --blue:#2383E2; --alert:#E03E3E;
  --blue-bg:#E7F3F8; --blue-fg:#183347;
  --red-bg:#FBE4E4;  --red-fg:#5D1715;
  --yel-bg:#FBF3DB;  --yel-fg:#402C1B;
  --grn-bg:#EDF3EC;  --grn-fg:#1C3829;
  --pur-bg:#F6F3F9;  --pur-fg:#412454;
  --gry-bg:#F1F1EF;  --gry-fg:#4A4740;
  --org-bg:#FAEBDD;  --org-fg:#49290E;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--t1);font-family:var(--ui);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(55,53,47,.16);border:2px solid transparent;background-clip:padding-box;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(55,53,47,.28);background-clip:padding-box}
:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-radius:3px}
[hidden]{display:none !important}

.tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:3px;
  font-size:12px;font-weight:500;line-height:1;white-space:nowrap}
.t-blue{background:var(--blue-bg);color:var(--blue-fg)}
.t-red{background:var(--red-bg);color:var(--red-fg)}
.t-yel{background:var(--yel-bg);color:var(--yel-fg)}
.t-grn{background:var(--grn-bg);color:var(--grn-fg)}
.t-pur{background:var(--pur-bg);color:var(--pur-fg)}
.t-gry{background:var(--gry-bg);color:var(--gry-fg)}
.t-org{background:var(--org-bg);color:var(--org-fg)}
.dot{width:6px;height:6px;border-radius:50%;flex:none}
.av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:600;flex:none;color:#fff;background:#8C8579}
.av-km{background:#5B6FBF} .av-cb{background:#9A6BAE}
.av.sm{width:18px;height:18px;font-size:8.5px}
.newdot{width:7px;height:7px;border-radius:50%;background:var(--alert);flex:none;display:inline-block}

/* ═══════ login ═══════ */
.login-wrap{height:100vh;display:grid;place-items:center;background:var(--sb)}
.login{width:340px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px 26px 24px;
  box-shadow:0 4px 24px rgba(15,15,15,.06)}
.login .brand{display:flex;align-items:center;gap:9px;margin-bottom:20px}
.login .brand .sq{width:26px;height:26px;border-radius:6px;background:var(--t1);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700}
.login .brand b{font-size:17px;font-weight:600;letter-spacing:-.015em}
.login label{display:block;font-size:12.5px;font-weight:500;color:var(--t2);margin:12px 0 5px}
.login input{width:100%;height:36px;border:1px solid var(--line-2);border-radius:6px;padding:0 11px;font-size:14px}
.login input:focus{border-color:var(--blue)}
.login .go{width:100%;height:36px;margin-top:18px;border-radius:6px;background:var(--blue);color:#fff;
  font-size:14px;font-weight:500;text-align:center}
.login .go:hover{background:#0B72CF}
.login .go:disabled{opacity:.6;cursor:default}
.login .err{margin-top:12px;font-size:13px;color:var(--red-fg);background:var(--red-bg);
  padding:8px 10px;border-radius:5px}

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

/* ═══════ sidebar ═══════ */
.sidebar{width:248px;flex:none;background:var(--sb);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.sb-top{padding:10px 12px 6px;display:flex;align-items:center;gap:8px}
.ws{flex:1;display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;min-width:0}
.ws .sq{width:20px;height:20px;border-radius:4px;background:var(--t1);color:#fff;display:grid;
  place-items:center;font-size:11px;font-weight:700;flex:none}
.ws .nm{font-size:14px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-scroll{flex:1;overflow-y:auto;padding:6px 8px 10px}
.sb-item{width:100%;display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:4px;
  color:var(--t2);font-size:14px;font-weight:450}
.sb-item:hover{background:var(--hover)}
.sb-item.on{background:var(--hover-2);color:var(--t1);font-weight:500}
.sb-item .ic{width:16px;text-align:center;font-size:13px;color:var(--t3);flex:none}
.sb-item .lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-sec{display:flex;align-items:center;height:26px;padding:0 8px;margin-top:14px;
  font-size:11.5px;font-weight:600;color:var(--t3)}
.sb-sec .add{margin-left:auto;width:20px;height:20px;border-radius:4px;display:grid;place-items:center;
  font-size:14px;color:var(--t3)}
.sb-sec .add:hover{background:var(--hover-2);color:var(--t1)}
.sb-foot{padding:8px;border-top:1px solid var(--line)}
.sb-user{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:4px;width:100%}
.sb-user:hover{background:var(--hover)}
.sb-user .nm{font-size:13px;font-weight:500}
.sb-user .rl{font-size:11px;color:var(--t3)}

.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{height:45px;flex:none;display:flex;align-items:center;gap:10px;padding:0 16px;
  border-bottom:1px solid var(--line);position:relative}
.crumb{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--t2);min-width:0}
.crumb b{font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .sep{color:var(--t3)}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:4px}
.tbtn{height:28px;padding:0 9px;border-radius:4px;font-size:13.5px;color:var(--t2);
  display:flex;align-items:center;gap:6px;font-weight:450}
.tbtn:hover{background:var(--hover)}
.tbtn.pri{background:var(--blue);color:#fff;font-weight:500}
.tbtn.pri:hover{background:#0B72CF}
.bell{width:30px;height:28px;border-radius:4px;display:grid;place-items:center;color:var(--t2);
  font-size:15px;position:relative}
.bell:hover{background:var(--hover)}
.bell .pip{position:absolute;top:3px;right:4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  background:var(--alert);color:#fff;font-size:9.5px;font-weight:700;display:none;place-items:center;
  box-shadow:0 0 0 2px #fff}
.bell.has .pip{display:grid}

.npanel{position:fixed;top:46px;right:16px;width:392px;max-height:520px;background:#fff;z-index:25;
  border:1px solid var(--line-2);border-radius:8px;box-shadow:0 12px 34px rgba(15,15,15,.13);
  display:none;flex-direction:column;overflow:hidden}
.npanel.on{display:flex}
.np-h{height:40px;flex:none;display:flex;align-items:center;gap:8px;padding:0 13px;border-bottom:1px solid var(--line)}
.np-h b{font-size:13.5px;font-weight:600}
.np-h .all{margin-left:auto;font-size:12.5px;color:var(--blue);font-weight:500}
.np-b{flex:1;overflow-y:auto;padding:5px}
.ngrp{padding:8px 9px 3px;font-size:11.5px;font-weight:600;color:var(--t3);display:flex;align-items:center;gap:6px}
.nrow{width:100%;display:flex;gap:9px;padding:8px 9px;border-radius:5px;align-items:flex-start}
.nrow:hover{background:var(--hover)}
.nrow .bd{flex:1;min-width:0}
.nrow .l1{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.nrow .l1 .tm{margin-left:auto;font-size:11px;color:var(--t3);white-space:nowrap}
.nrow .l2{font-size:13px;color:var(--t2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-f{flex:none;border-top:1px solid var(--line);padding:8px 12px;font-size:12px;color:var(--t3)}

.page{flex:1;overflow-y:auto}

/* ═══════ overview ═══════ */
.ov{padding:34px 56px 60px;max-width:1560px}
.ov h1{font-size:33px;font-weight:700;letter-spacing:-.025em;margin-bottom:5px}
.ov .lede{font-size:14.5px;color:var(--t2);margin-bottom:22px}
.ov-bar{display:flex;align-items:center;gap:9px;padding:9px 0 16px;border-bottom:1px solid var(--line);margin-bottom:22px}
.fbtn{height:27px;padding:0 10px;border-radius:4px;font-size:13px;color:var(--t2);font-weight:450;
  display:flex;align-items:center;gap:6px}
.fbtn:hover{background:var(--hover)}
.fbtn.on{background:var(--hover-2);color:var(--t1);font-weight:500}
.ov-stat{margin-left:auto;font-size:13px;color:var(--t3);display:flex;gap:16px}
.ov-stat b{color:var(--t1);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(404px,1fr));gap:14px}
.pcard{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;width:100%;transition:box-shadow .12s,border-color .12s;cursor:pointer}
.pcard:hover{border-color:var(--line-2);box-shadow:0 2px 8px rgba(15,15,15,.06)}
.pc-head{padding:14px 16px 0;display:flex;align-items:flex-start;gap:10px}
.pc-title{flex:1;min-width:0}
.pc-title .n{font-size:15.5px;font-weight:600;letter-spacing:-.012em;display:flex;align-items:center;gap:7px}
.pc-title .c{font-size:12.5px;color:var(--t3);margin-top:2px}
.pc-sec{padding:12px 16px 0}
.pc-lb{font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.pc-status{font-size:13.5px;line-height:1.55;color:var(--t1)}
.pc-week{margin:12px 16px 0;padding:9px 12px;border-radius:6px;border:1px solid var(--line);background:#FCFCFB}
.pc-week .wh{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pc-week .wh .lb{font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;color:var(--t3)}
.pc-week .wh .n{margin-left:auto;font-size:11.5px;color:var(--t3)}
.mtg{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px}
.mtg .d{font-weight:600;color:var(--t2);width:58px;flex:none}
.mtg .t{color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.mtg .hh{color:var(--t3);font-size:11.5px;flex:none}
.pc-upd{margin:12px 16px 0;padding:10px 12px;border-radius:6px;background:#FAFAF9;border:1px solid var(--line)}
.pc-upd .uh{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.pc-upd .ub{font-size:13px;line-height:1.5;color:var(--t2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-upd .tm{margin-left:auto;font-size:11.5px;color:var(--t3)}
.pc-sup{margin:10px 16px 0;padding:9px 12px;border-radius:6px;background:var(--red-bg);display:flex;gap:9px;align-items:flex-start}
.pc-sup .ic{color:var(--red-fg);font-size:13px;line-height:1.35;flex:none}
.pc-sup .tx{font-size:13px;line-height:1.5;color:var(--red-fg)}
.pc-sup .tx b{font-weight:600;display:block;margin-bottom:1px;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase}
.pc-foot{margin-top:auto;padding:12px 16px 13px;display:flex;align-items:center;gap:12px}
.prog{display:flex;align-items:center;gap:9px;min-width:0}
.bar{height:5px;border-radius:3px;background:var(--gry-bg);overflow:hidden;width:96px}
.bar i{display:block;height:100%;background:var(--t2);border-radius:3px}
.prog .lb{font-size:12px;color:var(--t3);white-space:nowrap}
.openbtn{margin-left:auto;height:26px;padding:0 10px;border-radius:5px;border:1px solid var(--line-2);
  font-size:12.5px;font-weight:500;color:var(--t2);display:flex;align-items:center;gap:5px}
.openbtn:hover{background:var(--hover);color:var(--t1)}

/* ═══════ project ═══════ */
.proj{display:flex;height:100%;min-height:0}
.doc{flex:1;overflow-y:auto;min-width:0}
.doc-in{padding:36px 60px 80px;max-width:980px}
.doc h1{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:4px}
.doc .client{font-size:14.5px;color:var(--t3);margin-bottom:20px}
.props{margin-bottom:22px}
.prow{display:flex;align-items:flex-start;gap:8px;padding:4px 0;min-height:29px}
.prow .k{width:168px;flex:none;display:flex;align-items:center;gap:7px;height:22px;padding:0 6px;
  border-radius:4px;font-size:13.5px;color:var(--t3)}
.prow .k .i{font-size:13px;width:15px;text-align:center}
.prow .v{flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:1px 6px;border-radius:4px;
  min-height:22px;font-size:13.5px}
.prow .v.edit:hover{background:var(--hover);cursor:text}
.person{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px 0 3px;border-radius:10px;
  background:var(--gry-bg);font-size:12.5px;font-weight:450}
.desc{font-size:15px;line-height:1.72;color:var(--t1);padding-bottom:22px;border-bottom:1px solid var(--line)}
.desc.edit:hover{background:var(--hover);cursor:text;border-radius:4px}

.ctxbox{margin:18px 0 0;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.ctx-h{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#FCFCFB;cursor:pointer}
.ctx-h b{font-size:13px;font-weight:600}
.ctx-h .sub{font-size:12px;color:var(--t3)}
.ctx-h .cv{margin-left:auto;color:var(--t3);font-size:11px}
.ctx-b{padding:12px 14px;border-top:1px solid var(--line)}
.ctx-b textarea{width:100%;min-height:190px;font-size:13.5px;line-height:1.65;resize:vertical;
  border:1px solid var(--line-2);border-radius:6px;padding:10px 12px;font-family:var(--ui)}
.ctx-b textarea:focus{border-color:var(--blue)}
.ctx-b .note{font-size:12px;color:var(--t3);margin-top:8px;line-height:1.5}

.h2{font-size:21px;font-weight:600;letter-spacing:-.018em;margin:34px 0 3px;display:flex;align-items:center;gap:9px}
.h2 .cnt{font-size:12.5px;font-weight:450;color:var(--t3)}
.h2 .act{margin-left:auto;font-size:13px;color:var(--t3);font-weight:450;padding:3px 8px;border-radius:4px}
.h2 .act:hover{background:var(--hover);color:var(--t1)}
.h2-sub{font-size:13.5px;color:var(--t3);margin-bottom:14px}
.callout{display:flex;gap:11px;padding:15px 16px;border-radius:6px;background:#F7F7F5;margin:14px 0 0;
  border:1px solid var(--line)}
.callout .em{font-size:17px;line-height:1.35;flex:none}
.callout .bd{flex:1}
.callout .bd .lb{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.callout .bd p{font-size:14.5px;line-height:1.62}
.callout .bd .up{font-size:12px;color:var(--t3);margin-top:8px}

.week{margin-top:16px;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.wk-h{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line);background:#FCFCFB}
.wk-h b{font-size:13px;font-weight:600}
.wk-h .rg{font-size:12px;color:var(--t3)}
.wk-h .nv{margin-left:auto;display:flex;gap:2px}
.wk-h .nv button{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;color:var(--t3);font-size:12px}
.wk-h .nv button:hover{background:var(--hover);color:var(--t1)}
.days{display:grid;grid-template-columns:repeat(7,1fr)}
.day{border-right:1px solid var(--line);padding:8px 8px 10px;min-height:92px;display:flex;flex-direction:column;gap:5px}
.day:last-child{border-right:0}
.day.off{background:#FAFAF9}
.day .dh{display:flex;align-items:baseline;gap:5px;margin-bottom:2px}
.day .dn{font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.03em;text-transform:uppercase}
.day .dd{font-size:13px;font-weight:600;color:var(--t2)}
.day.today .dd{background:var(--blue);color:#fff;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px}
.day.today .dn{color:var(--blue)}
.ev{font-size:11.5px;line-height:1.35;padding:4px 6px;border-radius:4px;text-align:left;width:100%}
.ev b{display:block;font-weight:600;font-size:10.5px;opacity:.75;margin-bottom:1px}
.ev.m{background:var(--pur-bg);color:var(--pur-fg)}
.ev.d{background:var(--org-bg);color:var(--org-fg)}

.tbl{width:100%;border-collapse:collapse;margin-top:6px}
.tbl th{text-align:left;font-size:12px;font-weight:500;color:var(--t3);padding:6px 8px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th:first-child{padding-left:4px}
.tbl td{padding:8px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.tbl td:first-child{padding-left:4px}
.tbl tr:hover td{background:#FAFAF9}
.tsk{display:flex;align-items:center;gap:7px}
.tsk .nm{font-weight:450}
.tsk .sp{margin-left:auto;display:flex;gap:5px}
.mini{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--t3);
  padding:1px 6px;border-radius:10px;border:1px solid var(--line);flex:none;white-space:nowrap}
.mini:hover{background:var(--hover);color:var(--t1)}
.mini.hot{border-color:var(--alert);color:var(--alert);font-weight:500}
.dt{font-size:12.5px;color:var(--t2);white-space:nowrap}
.note{font-size:12.5px;color:var(--t3);line-height:1.45}
.addrow{width:100%;padding:7px 4px;font-size:13.5px;color:var(--t3);border-radius:4px;margin-top:2px}
.addrow:hover{background:var(--hover);color:var(--t2)}

/* ═══════ thread rail ═══════ */
.rail{width:400px;flex:none;border-left:1px solid var(--line);background:#FCFCFB;
  display:flex;flex-direction:column;min-height:0}
.rail-h{height:45px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line)}
.rail-h b{font-size:14px;font-weight:600}
.rail-h .cnt{font-size:12.5px;color:var(--t3)}
.feed{flex:1;overflow-y:auto;padding:12px 14px 16px}
.upd{padding:12px 0;border-bottom:1px solid var(--line)}
.upd:last-child{border-bottom:0}
.u-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.u-head .tm{margin-left:auto;font-size:11.5px;color:var(--t3);white-space:nowrap}
.u-who{font-size:12.5px;color:var(--t3);display:flex;align-items:center;gap:5px}
.u-who b{color:var(--t2);font-weight:550}
.u-card{border-radius:6px;padding:10px 12px;border:1px solid transparent}
.u-card .subj{font-size:13px;font-weight:600;margin-bottom:4px}
.u-card .meta{font-size:11.5px;margin-bottom:6px;opacity:.8}
.u-card p{font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.k-email{background:var(--blue-bg);border-color:rgba(24,51,71,.09);color:var(--blue-fg)}
.k-meeting{background:var(--pur-bg);border-color:rgba(65,36,84,.1);color:var(--pur-fg)}
.k-upcoming{background:var(--yel-bg);border-color:rgba(64,44,27,.1);color:var(--yel-fg)}
.k-support{background:var(--red-bg);border-color:rgba(93,23,21,.11);color:var(--red-fg)}
.k-question{background:var(--org-bg);border-color:rgba(73,41,14,.11);color:var(--org-fg)}
.k-update{background:transparent;border-color:transparent;padding:0}
.k-update p{color:var(--t1)}
.u-reply{margin-top:8px;margin-left:2px;padding-left:11px;border-left:2px solid var(--line-2)}
.rep{padding:6px 0}
.rep .rh{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.rep .rh .nm{font-size:12px;font-weight:600;color:var(--t2)}
.rep .rh .tm{font-size:11px;color:var(--t3);margin-left:auto}
.rep p{font-size:13px;line-height:1.55;color:var(--t2);padding-left:24px;white-space:pre-wrap}
.rep.new .rh .nm{color:var(--alert)}
.u-act{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lnk{font-size:12px;color:var(--t3);font-weight:450;padding:3px 0}
.lnk:hover{color:var(--blue)}
.ackbtn{height:24px;padding:0 9px;border-radius:4px;border:1px solid var(--line-2);
  font-size:12px;font-weight:500;color:var(--t2);display:inline-flex;align-items:center;gap:5px}
.ackbtn:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.ackbtn.need{border-color:var(--alert);color:var(--alert)}
.ackbtn.need:hover{background:var(--alert);color:#fff}
.acked{font-size:12px;color:var(--grn-fg);display:inline-flex;align-items:center;gap:5px;font-weight:500}
.pending{font-size:12px;color:var(--t3);display:inline-flex;align-items:center;gap:5px}
.replybox{margin-top:8px;display:none;gap:7px}
.replybox.on{display:flex}
.replybox input{flex:1;height:30px;border:1px solid var(--line-2);border-radius:6px;padding:0 10px;font-size:13px;background:#fff}
.replybox input:focus{border-color:var(--blue)}
.newmark{display:flex;align-items:center;gap:9px;padding:6px 0 12px}
.newmark::before,.newmark::after{content:"";height:1px;flex:1;background:var(--alert);opacity:.3}
.newmark span{font-size:11px;font-weight:600;color:var(--alert);letter-spacing:.03em;flex:none}
.comp{flex:none;border-top:1px solid var(--line);padding:10px 14px 12px;background:#fff}
.kinds{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.kind{height:24px;padding:0 8px;border-radius:4px;font-size:12px;font-weight:500;
  display:flex;align-items:center;gap:5px;color:var(--t3);border:1px solid var(--line)}
.kind:hover{background:var(--hover)}
.kind.on{border-color:transparent}
.comp textarea{width:100%;min-height:56px;max-height:160px;resize:none;font-size:13.5px;line-height:1.6;
  border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;background:#fff;font-family:var(--ui)}
.comp textarea:focus{border-color:var(--blue)}
.comp .bar2{display:flex;align-items:center;gap:8px;margin-top:8px}
.comp .hint{font-size:11.5px;color:var(--t3);margin-right:auto}
.post{height:28px;padding:0 12px;border-radius:5px;background:var(--blue);color:#fff;font-size:13px;font-weight:500}
.post:hover{background:#0B72CF}
.post:disabled{opacity:.55;cursor:default}
.statusask{margin-top:8px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:#FCFCFB;display:none}
.statusask.on{display:block}
.statusask label{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:7px;cursor:pointer}
.statusask textarea{min-height:44px;margin-top:7px}

/* ═══════ activity ═══════ */
.actv{padding:34px 56px 60px;max-width:940px}
.actv h1{font-size:33px;font-weight:700;letter-spacing:-.025em;margin-bottom:5px}
.arow{display:flex;gap:12px;padding:13px 10px;border-radius:6px;border-bottom:1px solid var(--line);
  width:100%;align-items:flex-start}
.arow:hover{background:#FAFAF9}
.arow .lt{width:150px;flex:none}
.arow .lt .pj{font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:3px}
.arow .lt .tm{font-size:11.5px;color:var(--t3)}
.arow .rt{flex:1;min-width:0}
.arow .rt .l1{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.arow .rt .l2{font-size:13.5px;line-height:1.55;color:var(--t2)}
.arow .rt .l2 b{color:var(--t1);font-weight:600}

/* ═══════ chat ═══════ */
.chat{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-body{flex:1;overflow-y:auto;padding:26px 0 20px}
.chat-in{max-width:760px;margin:0 auto;padding:0 24px}
.msg{margin-bottom:24px}
.msg .who{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.msg .who b{font-size:13px;font-weight:600}
.msg .txt{font-size:15px;line-height:1.68;color:var(--t1);padding-left:31px;white-space:pre-wrap}
.msg .txt strong{font-weight:600}
.resetline{display:flex;align-items:center;gap:12px;margin:26px 0}
.resetline::before,.resetline::after{content:"";height:1px;flex:1;background:var(--line-2)}
.resetline span{font-size:11.5px;color:var(--t3);font-weight:500;flex:none}
.prop{margin:12px 0 0 31px;padding:12px 14px;border:1px solid var(--line-2);border-radius:7px;background:#FCFCFB}
.prop .lb{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.prop .q{font-size:14px;line-height:1.55;margin-bottom:10px}
.prop .row{display:flex;gap:8px;align-items:center}
.chat-empty{max-width:760px;margin:40px auto 0;padding:0 24px;color:var(--t3)}
.chat-empty h2{font-size:20px;font-weight:600;color:var(--t1);margin-bottom:8px}
.suggs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sg{padding:8px 13px;border:1px solid var(--line-2);border-radius:16px;font-size:13px;color:var(--t2)}
.sg:hover{border-color:var(--blue);color:var(--blue)}
.askbar{flex:none;border-top:1px solid var(--line);padding:12px 0 16px;background:#fff}
.askbar-in{max-width:760px;margin:0 auto;padding:0 24px;display:flex;gap:9px;align-items:flex-end}
.askbar textarea{flex:1;min-height:42px;max-height:170px;resize:none;font-size:14.5px;line-height:1.6;
  border:1px solid var(--line-2);border-radius:10px;padding:10px 13px;font-family:var(--ui)}
.askbar textarea:focus{border-color:var(--blue)}
.askbar .send{width:38px;height:38px;border-radius:9px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:16px;flex:none}
.askbar .send:disabled{opacity:.5;cursor:default}
.thinking{display:inline-flex;gap:4px;padding-left:31px}
.thinking i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:bl 1.1s infinite}
.thinking i:nth-child(2){animation-delay:.16s} .thinking i:nth-child(3){animation-delay:.32s}
@keyframes bl{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ═══════ drawers ═══════ */
.scrim{position:fixed;inset:0;background:rgba(15,15,15,.3);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:30}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;background:#fff;z-index:31;
  border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(15,15,15,.09);
  transform:translateX(100%);transition:transform .22s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column}
.drawer.on{transform:none}
#drawer{width:470px} #pdrawer{width:560px}
.dr-h{height:45px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line)}
.dr-h .x{width:26px;height:26px;border-radius:4px;display:grid;place-items:center;color:var(--t3);font-size:15px}
.dr-h .x:hover{background:var(--hover)}
.dr-h .lb{font-size:12.5px;color:var(--t3)}
.dr-h .go{margin-left:auto;height:26px;padding:0 10px;border-radius:5px;background:var(--blue);color:#fff;
  font-size:12.5px;font-weight:500}
.dr-b{flex:1;overflow-y:auto;padding:20px 20px 24px}
.dr-b h3{font-size:21px;font-weight:600;letter-spacing:-.018em;line-height:1.25;margin-bottom:14px}
.dr-props{margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.dr-th{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);
  margin:22px 0 10px;display:flex;align-items:center;gap:7px}
.dr-th:first-child{margin-top:0}
.dr-th .n{margin-left:auto;font-weight:450;text-transform:none;letter-spacing:0}
.mini-sec{margin-bottom:18px}
.mini-sec .mh{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--t3);
  margin-bottom:8px;display:flex;align-items:center;gap:7px}
.mini-sec .mh .n{margin-left:auto;font-size:11.5px;font-weight:450;color:var(--t3);text-transform:none;letter-spacing:0}

.files{display:flex;flex-direction:column;gap:6px}
.file{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:6px}
.file:hover{border-color:var(--line-2);background:#FCFCFB}
.file .ft{width:30px;height:30px;border-radius:5px;display:grid;place-items:center;font-size:9.5px;
  font-weight:700;flex:none;background:var(--gry-bg);color:var(--gry-fg)}
.file .fi{flex:1;min-width:0}
.file .fi .fn{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file .fi .fm{font-size:11.5px;color:var(--t3);margin-top:1px}
.file .dl{width:28px;height:28px;border-radius:5px;display:grid;place-items:center;color:var(--t3);
  font-size:14px;flex:none}
.file .dl:hover{background:var(--hover-2);color:var(--t1)}
.drop{border:1.5px dashed var(--line-2);border-radius:7px;padding:16px;text-align:center;
  font-size:13px;color:var(--t3);margin-top:8px;width:100%;display:block}
.drop:hover{border-color:var(--blue);color:var(--blue);background:#F8FBFE}
.drop.over{border-color:var(--blue);background:#F0F7FE;color:var(--blue)}
.ro{font-size:12.5px;color:var(--t3);margin-top:8px;font-style:italic}

/* ═══════ modal ═══════ */
.modal{position:fixed;inset:0;z-index:40;display:none;place-items:center;background:rgba(15,15,15,.32)}
.modal.on{display:grid}
.mbox{width:min(520px,92vw);background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.24);
  max-height:86vh;display:flex;flex-direction:column;overflow:hidden}
.mbox .mh2{padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600}
.mbox .mb{padding:16px 20px;overflow-y:auto}
.mbox .mf{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.mbox .mf .sp{flex:1}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12.5px;font-weight:500;color:var(--t2);margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;border:1px solid var(--line-2);border-radius:6px;
  padding:8px 11px;font-size:13.5px;font-family:var(--ui);background:#fff}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--blue)}
.fld textarea{min-height:80px;resize:vertical;line-height:1.6}
.fld.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ghost{height:30px;padding:0 12px;border-radius:6px;border:1px solid var(--line-2);font-size:13px;color:var(--t2)}
.ghost:hover{background:var(--hover)}
.danger{color:var(--red-fg)}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--t1);color:#fff;border-radius:7px;padding:9px 16px;font-size:13px;z-index:60;
  transition:transform .22s cubic-bezier(.3,1.2,.5,1);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.toast.on{transform:translateX(-50%) translateY(0)}
.empty{padding:40px 20px;text-align:center;color:var(--t3);font-size:13.5px;line-height:1.7}
.view{display:none;height:100%}
.view.on{display:flex;flex-direction:column;min-height:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══════ next steps ═══════ */
.steps{margin-top:6px}
.step{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .tick{
  width:17px;height:17px;border-radius:4px;border:1.5px solid var(--line-2);flex:none;margin-top:2px;
  display:grid;place-items:center;font-size:11px;color:#fff;background:#fff;line-height:1;
}
.step .tick:hover:not(:disabled){border-color:var(--blue)}
.step .tick:disabled{cursor:default}
.step.done .tick{background:var(--grn-fg);border-color:var(--grn-fg)}
.step .sb{flex:1;min-width:0}
.step .txt{font-size:14.5px;line-height:1.55}
.step.done .txt{color:var(--t3);text-decoration:line-through}
.step .meta{font-size:11.5px;color:var(--t3);margin-top:3px}
.step.stale .meta{color:var(--yel-fg)}
.step.stale .meta::before{content:"◷ ";}
.stepadd{display:flex;gap:8px;margin-top:10px}
.stepadd input{
  flex:1;height:32px;border:1px solid var(--line-2);border-radius:6px;padding:0 11px;font-size:13.5px;background:#fff;
}
.stepadd input:focus{border-color:var(--blue)}
.pc-next{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.5}
.pc-next .ar{color:var(--blue);font-weight:600;flex:none}
.pc-next .ent{display:block;font-style:normal;font-size:11.5px;color:var(--t3);margin-top:2px}

/* ═══════ split: status | next steps ═══════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;align-items:start}
.callout.half{margin:0}
.callout.next{background:#FEF7F0;border-color:rgba(180,95,30,.16)}
.callout.next .em{color:#B4601E}
.callout.next .lb{color:#8A5423}
.cnt2{font-weight:450;text-transform:none;letter-spacing:0;color:var(--t3);margin-left:5px}
.callout.next .steps{margin-top:2px}
.callout.next .step{border-bottom-color:rgba(180,95,30,.12)}
.callout.next .stepadd input{border-color:rgba(180,95,30,.22);background:#fff}
@media (max-width:1180px){.split{grid-template-columns:1fr}}

/* ═══════ week strip ═══════ */
.wk-h .nv button{width:auto;min-width:22px;padding:0 6px;font-size:11.5px}
.wk-h .nv .addm{background:var(--blue);color:#fff;font-size:13px;margin-left:4px}
.wk-h .nv .addm:hover{background:#0B72CF;color:#fff}
.ev{cursor:pointer;border:1px solid transparent}
.ev .who2{display:block;font-style:normal;font-size:10px;opacity:.7;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .st{display:inline-block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;margin-top:3px;opacity:.75}
.ev.m-complete{background:var(--grn-bg);color:var(--grn-fg)}
.ev.m-cancelled{background:var(--gry-bg);color:var(--t3);text-decoration:line-through}
.ev.m-cancelled .who2,.ev.m-cancelled .st{text-decoration:none}
.ev.m-pending{background:var(--pur-bg);color:var(--pur-fg)}
.ev:hover{border-color:var(--line-2)}

/* ═══════ plan tabs + filters ═══════ */
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:10px 0 0}
.tab2{padding:7px 12px;font-size:13.5px;color:var(--t3);border-bottom:2px solid transparent;
  display:flex;align-items:center;gap:7px;margin-bottom:-1px}
.tab2:hover{color:var(--t1)}
.tab2.on{color:var(--t1);font-weight:500;border-bottom-color:var(--t1)}
.tab2 .n{font-size:11px;background:var(--gry-bg);border-radius:9px;padding:1px 6px;color:var(--t3)}
.tab2.on .n{background:var(--hover-2);color:var(--t2)}
.filters2{display:flex;gap:6px;margin:12px 0 4px;flex-wrap:wrap}
.fchip2{height:26px;padding:0 10px;border-radius:13px;font-size:12.5px;color:var(--t2);
  border:1px solid var(--line);display:flex;align-items:center;gap:6px}
.fchip2:hover{background:var(--hover)}
.fchip2.on{background:var(--t1);color:#fff;border-color:var(--t1)}
.fchip2 .n{font-size:11px;opacity:.65}

/* ═══════ task table ═══════ */
.tbl tr[data-taskrow]{cursor:pointer}
.upcell{min-width:0}
.lastup{font-size:12.5px;line-height:1.45;color:var(--t2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.upcount{font-size:11px;color:var(--t3);margin-top:2px}
.addup{font-size:11.5px;color:var(--blue);margin-top:4px;padding:2px 0}
.addup:hover{text-decoration:underline}

/* ═══════ deliverables ═══════ */
.dfiles{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.dfile{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--t2);
  font-size:12px;max-width:190px}
.dfile:hover{color:var(--blue)}
.ft2{font-size:8.5px;font-weight:700;background:var(--gry-bg);color:var(--gry-fg);
  padding:2px 4px;border-radius:3px;flex:none}
.fn2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upfile{font-size:11.5px;color:var(--blue);cursor:pointer;padding:2px 0}
.upfile:hover{text-decoration:underline}

/* ═══════ note cards (meeting + task updates) ═══════ */
.notes{display:flex;flex-direction:column;gap:8px}
.ncard{border:1px solid var(--line);border-radius:7px;padding:10px 12px;background:#FCFCFB}
.ncard.new{border-color:var(--t1);background:#fff}
.ncard .nb{font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.ncard .nm2{font-size:11px;color:var(--t3);margin-top:7px;display:flex;align-items:center;gap:8px}
.ncard .nm2 .lnk{margin-left:auto;padding:0 2px}
.noteadd{margin-top:10px}
.noteadd textarea{width:100%;min-height:62px;resize:vertical;font-size:13.5px;line-height:1.6;
  border:1px solid var(--line-2);border-radius:6px;padding:9px 11px;font-family:var(--ui);background:#fff}
.noteadd textarea:focus{border-color:var(--blue)}
.noteadd .post{margin-top:8px}
.statsel{border:1px solid var(--line-2);border-radius:5px;padding:3px 8px;font-size:12.5px;background:#fff}

/* ═══════ three boxes across ═══════ */
.split3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px;align-items:start}
.callout.third{margin:0;flex-direction:row}
.callout.third .bd .lb{margin-bottom:7px}
.callout.sup{background:#FDF3F3;border-color:rgba(150,40,35,.15)}
.callout.sup .em{color:#A63A30}
.callout.sup .lb{color:#7E2C24}
.callout.sup .step{border-bottom-color:rgba(150,40,35,.12)}
.callout.sup .stepadd input{border-color:rgba(150,40,35,.22);background:#fff}
.callout.third .none{font-size:12.5px;color:var(--t3);padding:3px 0}
@media (max-width:1400px){.split3{grid-template-columns:1fr 1fr}}
@media (max-width:1000px){.split3{grid-template-columns:1fr}}

/* ═══════ overview boxes ═══════ */
.pc-box{margin:11px 16px 0;padding:9px 12px;border-radius:6px;border:1px solid var(--line);background:#FCFCFB}
.pc-box.next{background:#FEF7F0;border-color:rgba(180,95,30,.16)}
.pc-box.sup{background:#FDF3F3;border-color:rgba(150,40,35,.15)}
.pc-box .bh{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.pc-box .bh .lb{font-size:10.5px;font-weight:600;letter-spacing:.045em;text-transform:uppercase;color:var(--t3)}
.pc-box.next .bh .lb{color:#8A5423}
.pc-box.sup .bh .lb{color:#7E2C24}
.pc-box .bh .n{margin-left:auto;font-size:11.5px;color:var(--t3)}
.pc-box .brow{display:flex;gap:7px;align-items:flex-start;padding:3px 0;font-size:12.5px;line-height:1.45}
.pc-box .brow .ar{flex:none;font-weight:600;opacity:.6}
.pc-box .brow .tx{flex:1;min-width:0}
.pc-box .brow .ent{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:1px}
.pc-box .none{font-size:12.5px;color:var(--t3)}
.pc-box .more{font-size:11.5px;color:var(--t3);margin-top:4px}

/* ═══════ closed thread items ═══════ */
.upd.closed{opacity:.62}
.closedbar{width:100%;text-align:left;padding:9px 2px;font-size:12.5px;color:var(--t3);
  border-top:1px solid var(--line);margin-top:6px}
.closedbar:hover{color:var(--t1)}
.closedwrap{border-left:2px solid var(--line);padding-left:10px;margin-top:4px}

/* ═══════ task scope toggle ═══════ */
.scope{display:flex;gap:1px;margin-left:auto;background:var(--gry-bg);border-radius:13px;padding:2px}
.scope .sc{height:22px;padding:0 11px;border-radius:11px;font-size:12.5px;color:var(--t3);
  display:flex;align-items:center;gap:6px}
.scope .sc.on{background:#fff;color:var(--t1);font-weight:500;box-shadow:0 1px 2px rgba(15,15,15,.08)}
.scope .sc .n{font-size:11px;opacity:.6}
.filters2{align-items:center}

/* ═══════ plan tab ═══════ */
.planbox{margin-top:16px}
.pl-lb{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);
  margin-bottom:8px;display:flex;align-items:center;gap:8px}
.pl-lb .n2{font-weight:450;text-transform:none;letter-spacing:0}
.pl-sum{font-size:15px;line-height:1.72;max-width:820px;padding:14px 16px;
  border:1px solid var(--line);border-radius:7px;background:#FCFCFB;white-space:pre-wrap}
.pl-sum.edit:hover{background:var(--hover);cursor:text}
.plsteps{list-style:none;counter-reset:pl;max-width:820px}
.plstep{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);counter-increment:pl}
.plstep::before{content:counter(pl);font-size:11.5px;font-weight:600;color:var(--t3);
  min-width:18px;padding-top:2px;font-variant-numeric:tabular-nums}
.plstep .pb{flex:1;min-width:0}
.plstep .txt{font-size:14.5px;line-height:1.55}
.plstep .det{font-size:12.5px;color:var(--t3);margin-top:3px;line-height:1.5}
.plstep.done .txt{color:var(--t3);text-decoration:line-through}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   The failure mode was the doc column and the fixed 400px thread
   rail competing for the same space: the title wrapped to three
   lines and the property rows collapsed on top of each other.
   Below 1080px the rail stops being a column and stacks underneath.
   ═══════════════════════════════════════════════════════════════ */
.doc h1{font-size:clamp(24px,2.6vw,38px)}
.doc-in{padding:clamp(20px,3vw,36px) clamp(18px,4vw,60px) 80px}
.ov{padding:clamp(20px,3vw,34px) clamp(18px,4vw,56px) 60px}
.ov h1,.actv h1{font-size:clamp(24px,2.4vw,33px)}
.actv{padding:clamp(20px,3vw,34px) clamp(18px,4vw,56px) 60px}

/* property rows: the label was a hard 168px and the value had nowhere to go */
.prow .k{width:clamp(112px,13vw,168px)}
.prow .v{flex-wrap:wrap;row-gap:4px}
.person{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1400px){
  .rail{width:352px}
  .doc-in{padding-right:clamp(18px,3vw,36px)}
}
@media (max-width:1180px){
  .rail{width:312px}
  .stack{max-width:none}
}
@media (max-width:1080px){
  /* stack: document first, thread underneath at full width */
  .proj{flex-direction:column;overflow-y:auto}
  .doc{overflow:visible;flex:none}
  .doc-in{max-width:none}
  .rail{width:auto;border-left:0;border-top:1px solid var(--line);
    flex:none;max-height:none}
  .rail-h{position:sticky;top:0;background:#FCFCFB;z-index:2}
  .feed{overflow:visible;max-width:900px}
  .comp{position:sticky;bottom:0;z-index:2}
  .days{grid-template-columns:repeat(4,1fr)}
  .day:nth-child(4n){border-right:0}
  .day{border-bottom:1px solid var(--line)}
}
@media (max-width:980px){
  .grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .days{grid-template-columns:repeat(2,1fr)}
  .day:nth-child(4n){border-right:1px solid var(--line)}
  .day:nth-child(2n){border-right:0}
  .prow{flex-direction:column;gap:2px}
  .prow .k{width:auto}
  #drawer,#pdrawer{width:100vw}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .tbl td,.tbl th{white-space:normal;min-width:96px}
  .tbl td:first-child{min-width:180px}
}

/* comment kind in the thread */
.k-comment{background:#EFF4FB;border-color:rgba(24,51,71,.1);color:var(--blue-fg)}

/* overview: next step as plain text */
.pc-box .btext{font-size:12.5px;line-height:1.5;color:var(--t1)}

/* ═══════ sidebar: wrap long project names to two lines ═══════
   Shrinking the font would degrade every row to fix two. Wrapping costs
   height only on the names that actually need it. */
.sidebar{width:264px}
.sb-item{height:auto;min-height:28px;padding-top:5px;padding-bottom:5px;align-items:flex-start}
.sb-item .ic{padding-top:3px}
.sb-item .lb{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-item .newdot{margin-top:6px}

/* ═══════ stacked boxes: status, next step, support ═══════ */
.stack{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:900px}
.callout.wide{margin:0}
.callout.wide .bd p{max-width:76ch}
.callout.sup{background:#FDF3F3;border-color:rgba(150,40,35,.15)}
.callout.sup .em{color:#A63A30}
.callout.sup .lb{color:#7E2C24}
.callout.sup.live{border-color:rgba(150,40,35,.4);box-shadow:0 0 0 3px rgba(224,62,62,.07)}
.cnt2.open{color:#A63A30;font-weight:600}

/* ═══════ support archive ═══════ */
.archtoggle{margin-top:10px;font-size:12px;color:var(--t3);padding:3px 0}
.archtoggle:hover{color:#7E2C24}
.archlist{margin-top:8px;border-top:1px solid rgba(150,40,35,.14);padding-top:8px}
.archrow{padding:8px 0;border-bottom:1px solid rgba(150,40,35,.1)}
.archrow:last-child{border-bottom:0}
.archrow .at{font-size:13px;line-height:1.55;color:var(--t2);white-space:pre-wrap}
.archrow .am{font-size:11px;color:var(--t3);margin-top:4px}

/* ═══════ three identical boxes ═══════ */
.stack{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px;max-width:920px}
.box3{border:1px solid var(--line);border-radius:7px;background:#F7F7F5;padding:13px 15px;
  min-height:128px;display:flex;flex-direction:column}
.box3.edit{cursor:pointer}
.box3.edit:hover{border-color:var(--line-2);background:#F2F2EF}
.box3 .b3h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.box3 .b3h .em{font-size:14px;line-height:1;color:var(--t3)}
.box3 .b3h .lb{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.box3 .b3h .meta{margin-left:auto;font-size:11.5px;color:var(--t3)}
.box3 .b3h .meta.open{color:#A63A30;font-weight:600}
.box3 .b3h .meta.ok{color:var(--grn-fg)}
.box3 .b3b{font-size:14.5px;line-height:1.62;white-space:pre-wrap;flex:1;max-width:76ch}
.box3 .b3b .ph{color:var(--t3)}
.box3 .b3f{display:flex;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}
.box3.next{background:#FEF7F0;border-color:rgba(180,95,30,.16)}
.box3.next:hover{background:#FDF1E7}
.box3.next .em,.box3.next .lb{color:#B4601E}
.box3.sup{background:#FDF3F3;border-color:rgba(150,40,35,.15)}
.box3.sup:hover{background:#FBEBEB}
.box3.sup .em,.box3.sup .lb{color:#A63A30}
.box3.sup.live{border-color:rgba(150,40,35,.4);box-shadow:0 0 0 3px rgba(224,62,62,.07)}

/* ═══════ sidebar as an off-canvas drawer on narrow screens ═══════ */
.burger{display:none;width:30px;height:28px;border-radius:5px;margin-right:2px;
  color:var(--t2);font-size:15px;align-items:center;justify-content:center}
.burger:hover{background:var(--hover)}
.sbscrim{position:fixed;inset:0;background:rgba(15,15,15,.3);opacity:0;pointer-events:none;
  transition:opacity .18s;z-index:34}
.sbscrim.on{opacity:1;pointer-events:auto}
@media (max-width:980px){
  .sidebar{display:flex;position:fixed;top:0;left:0;bottom:0;z-index:35;
    transform:translateX(-100%);transition:transform .2s cubic-bezier(.32,.72,0,1);
    box-shadow:4px 0 24px rgba(15,15,15,.12)}
  body.sb-open .sidebar{transform:none}
  .burger{display:flex}
}

/* ═══════ plan step editing ═══════ */
.plstep.edit{cursor:pointer;border-radius:5px;padding-left:6px;margin-left:-6px}
.plstep.edit:hover{background:var(--hover)}

/* ═══════ overview: filter dots, quick comment ═══════ */
.fbtn{position:relative}
.fbtn .fdot{margin-left:6px}
.pc-box .bh .newdot{flex:none}
.qcbtn{height:26px;padding:0 10px;border-radius:5px;background:var(--blue);color:#fff;
  font-size:12.5px;font-weight:500;margin-left:auto}
.qcbtn:hover{background:#0B72CF}
.pc-foot .openbtn{margin-left:0}

/* ═══════ row delete ═══════ */
.rowdel{width:24px;height:24px;border-radius:5px;display:inline-grid;place-items:center;
  color:var(--t3);font-size:12px;opacity:0;transition:opacity .12s}
.tbl tr:hover .rowdel{opacity:1}
.rowdel:hover{background:var(--red-bg);color:var(--red-fg);opacity:1}
.rowdel:focus-visible{opacity:1}
.lnk.danger{color:var(--red-fg)}
.lnk.danger:hover{color:#8C1F1A}

/* strategic objective sits under the summary, same shape, quieter ground */
.pl-sum.obj{background:#FCFBF7;border-color:rgba(120,95,30,.14)}
.pl-sum.obj.edit:hover{background:#F8F6EF}

/* organisations own actions too; initialising "Dallah" to "D" loses meaning */
.orgchip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;
  background:var(--gry-bg);font-size:12px;font-weight:500;color:var(--gry-fg);white-space:nowrap}