/* ============================================================
   TaskFlow — Plan it. Track it. Deliver it.
   Brand system: teal #098894 · emerald #024D55 · omni #3DC3D6
   coral #F37666 · dandelion #FBC931 · Futura-style typography
   Signature motif: asymmetric corner radius
   ============================================================ */
:root{
  --teal:#098894;
  --teal-soft:#0988941A;
  --emerald:#024D55;
  --omni:#3DC3D6;
  --coral:#F37666;
  --dandelion:#FBC931;

  --done:#098894;
  --ontrack:#3DC3D6;
  --duesoon:#FBC931;
  --overdue:#F37666;

  --bg:#F2F7F7;
  --surface:#FFFFFF;
  --surface-2:#EAF3F3;
  --ink:#0E2E33;
  --muted:#5B7075;
  --line:#DCE6E7;
  --line-soft:#E7EFEF;
  --shadow:0 10px 30px rgba(2,77,85,.08);
  --shadow-lg:0 24px 60px rgba(2,77,85,.16);
  --today:#F37666;
  --weekend:rgba(2,77,85,.035);
  --bar-label:#fff;

  --r:14px 14px 14px 4px;        /* card motif */
  --r-sm:9px 9px 9px 3px;        /* controls */
  --r-bar:8px 8px 8px 3px;       /* gantt bars */

  --font:'Jost','Century Gothic','Futura','Avenir Next',system-ui,sans-serif;
  --rowh:46px;
  --w-name:250px; --w-owner:70px; --w-progress:104px; --w-status:112px;
  --leftw:calc(var(--w-name) + var(--w-owner) + var(--w-progress) + var(--w-status));
  --headh:58px;
}
html[data-theme="dark"]{
  --bg:#071A1D;
  --surface:#0C2429;
  --surface-2:#0F2E33;
  --ink:#E7F3F3;
  --muted:#8FA8AC;
  --line:#1D3B41;
  --line-soft:#16333A;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --weekend:rgba(61,195,214,.045);
  --teal-soft:#3DC3D61F;
  --duesoon:#F5C534;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
  overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--omni);outline-offset:2px;border-radius:6px}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;
  padding:12px 22px;
  background:var(--emerald);
  color:#fff;flex-shrink:0;
  border-bottom:4px solid var(--dandelion);
}
html[data-theme="dark"] .topbar{background:#03343B}
.logo{display:flex;align-items:center;gap:13px;min-width:0}
.logo-mark{
  width:42px;height:42px;background:#fff;flex-shrink:0;
  border-radius:14px 14px 14px 4px;
  display:flex;align-items:center;justify-content:center;
}
.logo-mark span{color:var(--teal);font-weight:700;font-size:14px;letter-spacing:.5px}
.brand-text{line-height:1.12;white-space:nowrap}
.brand-text .h{font-size:17px;font-weight:600;letter-spacing:2.6px}
.brand-text .h em{font-style:normal;color:var(--dandelion);font-weight:700;letter-spacing:1px;margin-left:8px}
.brand-text .s{font-size:10.5px;font-style:italic;color:#BFE4E2;letter-spacing:.4px}
.topbar .spacer{flex:1}
.search{position:relative}
.search input{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);padding:8px 12px 8px 34px;color:#fff;width:230px;
  transition:width .2s ease, background .2s;
}
.search input::placeholder{color:#A9CFCE}
.search input:focus{width:290px;background:rgba(255,255,255,.18);outline:none;border-color:var(--omni)}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.75}
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r-sm);
  font-weight:500;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .15s;
  white-space:nowrap;
}
.btn:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-primary:hover{background:#0A97A4}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);box-shadow:none}
.icon-btn{padding:8px;border-radius:var(--r-sm)}

/* ---------- Toolbar ---------- */
.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 22px;background:var(--surface);
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--surface);
  font-weight:500;font-size:13px;color:var(--muted);
  transition:all .15s;
}
.chip .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.chip .n{font-weight:600;color:var(--ink);font-size:12.5px}
.chip:hover{border-color:var(--teal)}
.chip.active{border-color:var(--teal);background:var(--teal-soft);color:var(--ink)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-sm);padding:3px;border:1px solid var(--line-soft)}
.seg button{padding:6px 14px;border-radius:7px 7px 7px 3px;font-weight:500;font-size:13px;color:var(--muted)}
.seg button.active{background:var(--surface);color:var(--teal);box-shadow:0 2px 8px rgba(2,77,85,.12);font-weight:600}
.toolbar .grow{flex:1}
.toolbar select{
  padding:7px 10px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
}

/* ---------- Board (tree + gantt) ---------- */
.board{flex:1;overflow:auto;position:relative;background:var(--bg)}
.g-inner{display:inline-block;min-width:100%}

.g-head{
  display:flex;position:sticky;top:0;z-index:30;height:var(--headh);
  background:var(--surface);
  border-bottom:2px solid var(--line);
}
.g-corner{
  position:sticky;left:0;z-index:31;width:var(--leftw);flex-shrink:0;
  background:var(--surface);border-right:2px solid var(--line);
  display:flex;align-items:flex-end;
}
.cols{display:flex;width:100%;padding:0 0 7px 14px;gap:0;align-items:center;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600}
.cols .c-name{flex:none;width:var(--w-name);border-right:1px solid var(--line-soft);position:relative}
.cols .c-a{width:var(--w-owner);border-right:1px solid var(--line-soft);position:relative}
.cols .c-p{width:var(--w-progress);border-right:1px solid var(--line-soft);position:relative}
.cols .c-s{width:var(--w-status)}
.g-scale{position:relative;flex-shrink:0}
.tier{position:absolute;left:0;right:0;display:flex}
.tier-top{top:6px;height:20px}
.tier-bot{bottom:5px;height:22px}
.t-cell{
  flex-shrink:0;font-size:11px;color:var(--muted);
  display:flex;align-items:center;justify-content:flex-start;
  padding-left:7px;border-left:1px solid var(--line-soft);
  white-space:nowrap;overflow:hidden;
}
.tier-top .t-cell{font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal)}
.tier-bot .t-cell{justify-content:center;padding-left:0}
.tier-bot .t-cell.today-cell{color:#fff;font-weight:700}
.tier-bot .t-cell.today-cell::before{
  content:'';position:absolute;width:24px;height:24px;border-radius:8px 8px 8px 3px;
  background:var(--today);z-index:-1;
}
.tier-bot .t-cell{position:relative;z-index:0}
.tier-bot .t-cell .wd{font-size:8.5px;opacity:.65;margin-right:3px;text-transform:uppercase}

.g-body{position:relative}
.grid-bg{position:absolute;top:0;bottom:0;z-index:0;pointer-events:none}
.day-col{position:absolute;top:0;bottom:0;border-left:1px solid var(--line-soft)}
.day-col.weekend{background:var(--weekend)}
/* .today-line retired in v3.1 — superseded by .today-mark (per-row, above bars)
   and .today-pill (single header label). Rule kept out to avoid stale duplicates. */


.g-row{display:flex;height:var(--rowh);position:relative;z-index:1}
.g-row:hover .g-left{background:var(--surface-2)}
.g-row:hover .g-lane{background:rgba(61,195,214,.05)}
.g-left{
  position:sticky;left:0;z-index:10;width:var(--leftw);flex-shrink:0;
  background:var(--surface);border-right:2px solid var(--line);
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;padding-left:14px;
  transition:background .12s;
}
.g-lane{
  position:relative;flex-shrink:0;border-bottom:1px solid var(--line-soft);
}
.row-name{flex:none;width:var(--w-name);display:flex;align-items:center;gap:4px;min-width:0;padding-right:8px;border-right:1px solid var(--line-soft)}
.tree-pad{flex-shrink:0}
.tw{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--muted);transition:transform .15s}
.tw:hover{background:var(--surface-2);color:var(--teal)}
.tw.open{transform:rotate(90deg)}
.tw.leafdot{pointer-events:none}
.tw.leafdot::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--line)}
.nm{
  font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
}
.nm:hover{color:var(--teal)}
.g-row.is-parent .nm{font-weight:600}
.g-row.lvl0 .nm{font-weight:700;letter-spacing:.2px}
.add-sub{
  opacity:0;width:22px;height:22px;flex-shrink:0;border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--teal);
  transition:opacity .12s;font-size:16px;font-weight:600;
}
.g-row:hover .add-sub{opacity:1}
.add-sub:hover{background:var(--teal-soft)}
.cell-a{width:var(--w-owner);flex-shrink:0;border-right:1px solid var(--line-soft)}
.avatar{
  width:27px;height:27px;border-radius:9px 9px 9px 3px;
  background:var(--emerald);color:#fff;font-size:10.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;letter-spacing:.5px;
}
html[data-theme="dark"] .avatar{background:var(--teal)}
.cell-p{width:var(--w-progress);flex-shrink:0;font-size:12.5px;color:var(--muted);border-right:1px solid var(--line-soft)}
.cell-p b{color:var(--ink);font-weight:600}
.pbar{height:4px;background:var(--line-soft);border-radius:3px;margin-top:3px;width:46px;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:3px}
.cell-s{width:var(--w-status);flex-shrink:0}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;
}
.pill i{width:7px;height:7px;border-radius:50%}
.p-done{background:#09889418;color:var(--teal)}
.p-ontrack{background:#3DC3D622;color:#1591A3}
.p-duesoon{background:#FBC93130;color:#9A7400}
.p-overdue{background:#F3766622;color:#D14A38}
html[data-theme="dark"] .p-done{color:#4FD3DE}
html[data-theme="dark"] .p-ontrack{color:#7BDCE8}
html[data-theme="dark"] .p-duesoon{color:#F5C534}
html[data-theme="dark"] .p-overdue{color:#FF9A8B}
.p-done i{background:var(--done)}.p-ontrack i{background:var(--ontrack)}
.p-duesoon i{background:var(--duesoon)}.p-overdue i{background:var(--overdue)}

/* ---------- Bars ---------- */
.bar{
  position:absolute;top:50%;transform:translateY(-50%);
  height:24px;border-radius:var(--r-bar);
  display:flex;align-items:center;
  cursor:grab;user-select:none;touch-action:none;
  box-shadow:0 3px 10px rgba(2,77,85,.18);
  transition:box-shadow .15s, filter .15s;
  z-index:3;
}
.bar:hover{box-shadow:0 6px 18px rgba(2,77,85,.3);filter:brightness(1.04);z-index:4}
.bar.dragging{cursor:grabbing;box-shadow:0 10px 26px rgba(2,77,85,.35);z-index:5}
.bar .fill{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.bar .fill i{display:block;height:100%;background:rgba(255,255,255,.32)}
html[data-theme="dark"] .bar .fill i{background:rgba(255,255,255,.25)}
.bar .lbl{
  position:relative;z-index:1;font-size:11px;font-weight:600;color:var(--bar-label);
  padding:0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.bar .lbl.outside{position:absolute;left:100%;margin-left:8px;color:var(--muted);text-shadow:none;font-weight:500;overflow:visible}
.bar .hnd{
  position:absolute;top:0;bottom:0;width:9px;z-index:2;cursor:ew-resize;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;
}
.bar:hover .hnd{opacity:1}
.bar .hnd::before{content:'';width:3px;height:12px;border-radius:2px;background:rgba(255,255,255,.85)}
.bar .hnd.l{left:0}.bar .hnd.r{right:0}
.b-done{background:linear-gradient(180deg,#0BA0AD,var(--done))}
.b-ontrack{background:linear-gradient(180deg,#5ED1E1,var(--ontrack))}
.b-duesoon{background:linear-gradient(180deg,#FFD75B,var(--duesoon))}
.b-duesoon .lbl{color:#5C4500;text-shadow:none}
.b-overdue{background:linear-gradient(180deg,#FF8D7D,var(--overdue))}
.bar.parent{
  height:11px;border-radius:6px 6px 6px 2px;cursor:pointer;
}
.bar.parent::before,.bar.parent::after{
  content:'';position:absolute;bottom:-5px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid;
  border-top-color:inherit;
}
.bar.parent.b-done::before,.bar.parent.b-done::after{border-top-color:var(--done)}
.bar.parent.b-ontrack::before,.bar.parent.b-ontrack::after{border-top-color:#2BAABB}
.bar.parent.b-duesoon::before,.bar.parent.b-duesoon::after{border-top-color:#D8A800}
.bar.parent.b-overdue::before,.bar.parent.b-overdue::after{border-top-color:var(--overdue)}
.bar.parent::before{left:0}
.bar.parent::after{right:0}
.bar.parent .lbl{display:none}
.bar.parent .lbl.outside{display:block}
.bar.parent .hnd{display:none}
.milestone-flag{font-size:10px}

/* ---------- Empty state ---------- */
.empty{
  padding:70px 30px;text-align:center;color:var(--muted);
}
.empty .big{font-size:42px;margin-bottom:10px}
.empty h3{font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:.3px}

/* ---------- Modals ---------- */
.backdrop{
  position:fixed;inset:0;background:rgba(2,45,50,.45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;
  opacity:0;pointer-events:none;transition:opacity .18s;
  padding:20px;
}
.backdrop.show{opacity:1;pointer-events:auto}
.modal{
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lg);
  width:1120px;max-width:94vw;max-height:92vh;overflow:auto;
  transform:translateY(12px) scale(.98);transition:transform .18s;
  border-top:5px solid var(--teal);
}
.backdrop.show .modal{transform:none}
.modal-h{display:flex;align-items:center;gap:12px;padding:20px 24px 4px}
.modal-h h2{font-size:19px;font-weight:600;letter-spacing:.3px;flex:1}
.modal-h .x{color:var(--muted);font-size:20px;padding:4px 8px;border-radius:8px}
.modal-h .x:hover{background:var(--surface-2);color:var(--ink)}
.modal-b{padding:14px 24px 24px}
.f-row{display:flex;gap:14px}
.f-row > *{flex:1}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.fld input,.fld select,.fld textarea{
  width:100%;padding:9px 11px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--bg);
  transition:border-color .15s;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--teal);outline:none}
.fld textarea{resize:vertical;min-height:64px}
.fld .hint{font-size:12px;color:var(--muted);margin-top:4px;font-style:italic}
.range-wrap{display:flex;align-items:center;gap:12px}
.range-wrap input[type=range]{flex:1;accent-color:var(--teal);padding:0;border:none;background:transparent}
.range-val{font-weight:700;color:var(--teal);width:48px;text-align:right;font-size:16px}
.modal-f{display:flex;gap:10px;padding:0 24px 22px;align-items:center}
.modal-f .grow{flex:1}
.btn-danger{color:#D14A38;border-color:#F3766655}
.btn-danger:hover{background:#F3766614}
.locked-note{
  background:var(--teal-soft);border:1px solid #09889433;border-radius:var(--r-sm);
  padding:10px 13px;font-size:13px;color:var(--muted);margin-bottom:14px;
}
.locked-note b{color:var(--teal)}

/* Settings */
.set-sec{margin-bottom:22px}
.set-sec h3{
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal);
  font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.set-sec h3::after{content:'';flex:1;height:1px;background:var(--line)}
.set-item{display:flex;align-items:center;gap:14px;padding:8px 0}
.set-item .txt{flex:1}
.set-item .txt b{display:block;font-weight:600}
.set-item .txt span{font-size:12.5px;color:var(--muted)}
.switch{position:relative;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2;margin:0}
.switch .tr{
  position:absolute;inset:0;background:var(--line);border-radius:999px;transition:background .2s;
}
.switch .tr::after{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.switch input:checked + .tr{background:var(--teal)}
.switch input:checked + .tr::after{transform:translateX(20px)}
.code{
  background:var(--emerald);color:#CFF0EE;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;border-radius:var(--r-sm);padding:13px 15px;overflow:auto;
  white-space:pre;line-height:1.55;
}
html[data-theme="dark"] .code{background:#03343B}
.badge-soon{
  font-size:9.5px;font-weight:700;letter-spacing:1px;background:var(--dandelion);color:#5C4500;
  padding:3px 8px;border-radius:999px;text-transform:uppercase;
}

/* Toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);
  background:var(--emerald);color:#fff;padding:11px 20px;border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);font-weight:500;z-index:200;opacity:0;
  transition:all .25s;pointer-events:none;font-size:13.5px;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Scrollbars */
.board::-webkit-scrollbar,.modal::-webkit-scrollbar,.code::-webkit-scrollbar{width:11px;height:11px}
.board::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb,.code::-webkit-scrollbar-thumb{
  background:var(--line);border-radius:8px;border:3px solid var(--bg);
}
.board::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.board::-webkit-scrollbar-corner{background:transparent}

@media (max-width:1100px){
  :root{--leftw:330px}
  .cell-a,.cols .c-a{display:none}
  .cell-p,.cols .c-p{display:none}
}
@media (max-width:760px){
  :root{--leftw:220px}
  .cell-s,.cols .c-s{display:none}
  .search input{width:130px}
  .brand-text .s{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ============================================================
   PHASE 2 — Auth, workspaces, projects, sharing, admin
   ============================================================ */

/* ---------- Auth screen ---------- */
.auth-screen{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 600px at 85% -10%, #0A97A455 0%, transparent 60%),
    radial-gradient(700px 500px at -10% 110%, #3DC3D62E 0%, transparent 60%),
    var(--emerald);
  padding:24px;overflow:auto;
}
.auth-card{
  width:430px;max-width:100%;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--shadow-lg);
  border-top:5px solid var(--dandelion);overflow:hidden;
}
.auth-brand{
  display:flex;align-items:center;gap:14px;padding:26px 30px 18px;
}
.auth-brand .logo-mark{width:52px;height:52px;background:var(--teal)}
.auth-brand .logo-mark span{color:#fff;font-size:16px}
.auth-brand .h{font-size:20px;font-weight:600;letter-spacing:2.4px;color:var(--ink)}
.auth-brand .h em{font-style:normal;color:var(--teal);font-weight:700;margin-left:7px;letter-spacing:1px}
.auth-brand .s{font-size:11px;font-style:italic;color:var(--muted);letter-spacing:.4px}
.auth-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 30px;gap:22px}
.auth-tabs button{
  padding:10px 2px 12px;font-weight:600;font-size:14px;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-1px;letter-spacing:.3px;
}
.auth-tabs button.active{color:var(--teal);border-bottom-color:var(--teal)}
.auth-body{padding:22px 30px 28px}
.auth-body .fld input{background:var(--bg)}
.auth-err{
  display:none;background:#F3766618;border:1px solid #F3766655;color:#D14A38;
  border-radius:var(--r-sm);padding:9px 13px;font-size:13px;margin-bottom:14px;font-weight:500;
}
.auth-err.show{display:block}
.auth-body .btn-primary{width:100%;justify-content:center;padding:11px;font-size:15px;margin-top:4px}
.auth-foot{
  padding:14px 30px;background:var(--surface-2);font-size:12px;color:var(--muted);
  text-align:center;font-style:italic;
}
.uname-hint{font-size:12px;margin-top:4px}
.uname-hint.ok{color:var(--teal)}
.uname-hint.bad{color:#D14A38}

/* ---------- Context bar (workspace / projects) ---------- */
.contextbar{
  display:flex;align-items:center;gap:10px;
  padding:8px 22px;background:var(--surface);
  border-bottom:1px solid var(--line);flex-shrink:0;flex-wrap:wrap;
}
.ws-btn{
  display:inline-flex;align-items:center;gap:9px;max-width:280px;
  padding:7px 12px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--surface);font-weight:600;
}
.ws-btn:hover{border-color:var(--teal)}
.ws-btn .wsi{
  width:24px;height:24px;border-radius:8px 8px 8px 3px;background:var(--teal);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;flex-shrink:0;
}
.ws-btn .wsn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-btn svg{flex-shrink:0;color:var(--muted)}
.acc-badge{
  font-size:9px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  padding:2.5px 7px;border-radius:999px;flex-shrink:0;
}
.acc-owner{background:var(--teal-soft);color:var(--teal)}
.acc-edit{background:#3DC3D625;color:#158FA0}
.acc-view{background:#FBC93133;color:#9A7400}
.acc-master{background:#024D5522;color:var(--emerald)}
html[data-theme="dark"] .acc-master{background:#3DC3D62A;color:#7BDCE8}
html[data-theme="dark"] .acc-edit{color:#7BDCE8}
html[data-theme="dark"] .acc-view{color:#F5C534}
.vdiv{width:1px;height:24px;background:var(--line);flex-shrink:0}
.proj-tabs{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:120px;scrollbar-width:none;padding:2px 0}
.proj-tabs::-webkit-scrollbar{display:none}
.ptab{
  padding:6px 13px;border-radius:var(--r-sm);font-weight:500;font-size:13.5px;
  color:var(--muted);border:1.5px solid transparent;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px;
}
.ptab:hover{background:var(--surface-2);color:var(--ink)}
.ptab.active{background:var(--teal-soft);color:var(--teal);font-weight:600;border-color:#09889433}
.ptab .pm{opacity:0;font-size:11px;padding:0 2px;border-radius:4px}
.ptab:hover .pm{opacity:.7}
.ptab .pm:hover{opacity:1;background:rgba(0,0,0,.08)}
.add-proj{color:var(--teal);font-weight:600;font-size:13px;padding:6px 11px;border-radius:var(--r-sm);white-space:nowrap}
.add-proj:hover{background:var(--teal-soft)}

/* ---------- Menus / dropdowns ---------- */
.menu{
  position:fixed;z-index:120;min-width:250px;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--shadow-lg);border:1px solid var(--line);
  padding:7px;display:none;
}
.menu.show{display:block}
.menu .m-head{padding:9px 12px 7px;font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.menu .m-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 12px;border-radius:var(--r-sm);font-weight:500;font-size:13.5px;
}
.menu .m-item:hover{background:var(--surface-2)}
.menu .m-item.sel{background:var(--teal-soft);color:var(--teal);font-weight:600}
.menu .m-item .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu .m-div{height:1px;background:var(--line);margin:6px 4px}
.menu .m-item.accent{color:var(--teal);font-weight:600}
.menu .m-item.danger{color:#D14A38}
.menu .m-user{padding:11px 12px;display:flex;gap:11px;align-items:center}
.menu .m-user .avatar{width:36px;height:36px;font-size:13px}
.menu .m-user b{display:block;line-height:1.2}
.menu .m-user span{font-size:12px;color:var(--muted);display:block}

.user-chip{display:flex;align-items:center;gap:8px;padding:4px;border-radius:var(--r-sm)}
.user-chip:hover{background:rgba(255,255,255,.12)}
.user-chip .avatar{width:32px;height:32px;background:var(--dandelion);color:#5C4500;font-size:12px}

/* ---------- Share modal ---------- */
.mem-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.mem-row:last-child{border-bottom:none}
.mem-row .avatar{width:32px;height:32px;font-size:12px}
.mem-row .who{flex:1;min-width:0}
.mem-row .who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-row .who span{font-size:12px;color:var(--muted)}
.mem-row select{padding:5px 8px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);font-size:12.5px}
.mem-row .rm{color:#D14A38;font-size:16px;padding:3px 8px;border-radius:7px}
.mem-row .rm:hover{background:#F3766618}
.invite-row{display:flex;gap:8px;margin-bottom:6px}
.invite-row input{flex:1}
.invite-row select{width:96px}
.dir-results{border:1.5px solid var(--line);border-radius:var(--r-sm);margin-top:6px;overflow:hidden;display:none}
.dir-results.show{display:block}
.dir-hit{display:flex;align-items:center;gap:10px;padding:8px 12px;width:100%;text-align:left}
.dir-hit:hover{background:var(--surface-2)}
.dir-hit .avatar{width:28px;height:28px;font-size:11px}
.dir-hit b{font-weight:600}
.dir-hit span{color:var(--muted);font-size:12.5px}
.pending-tag{font-size:10px;font-weight:700;letter-spacing:.6px;color:#9A7400;background:#FBC93133;padding:2px 8px;border-radius:999px;text-transform:uppercase}

/* ---------- Admin console ---------- */
.modal.wide{width:760px}
.adm-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:18px}
.adm-tabs button{padding:8px 2px 11px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}
.adm-tabs button.active{color:var(--teal);border-bottom-color:var(--teal)}
.adm-pane{display:none}
.adm-pane.show{display:block}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{
  text-align:left;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:2px solid var(--line);
}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:hover td{background:var(--surface-2)}
.tbl .avatar{width:28px;height:28px;font-size:11px}
.tbl .mini{font-size:12px;color:var(--muted)}
.tbl .act{display:flex;gap:6px;justify-content:flex-end}
.tbl .act .btn{padding:5px 10px;font-size:12.5px}
.adm-create{
  background:var(--surface-2);border-radius:var(--r);padding:16px;margin-top:16px;
  border:1px solid var(--line-soft);
}
.adm-create h4{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:12px}
.adm-search{margin-bottom:14px}

/* ---------- Onboarding ---------- */
.onb-steps{display:flex;gap:8px;margin-bottom:18px}
.onb-steps i{height:5px;flex:1;border-radius:3px;background:var(--line)}
.onb-steps i.on{background:var(--teal)}
.onb-hello{font-size:15px;color:var(--muted);margin-bottom:16px}
.onb-hello b{color:var(--teal)}

/* ---------- Read-only banner ---------- */
.ro-note{
  display:none;align-items:center;gap:9px;padding:7px 22px;font-size:13px;
  background:#FBC93122;color:#8A6800;border-bottom:1px solid #FBC93144;font-weight:500;
}
html[data-theme="dark"] .ro-note{color:#F5C534}
.ro-note.show{display:flex}

.board-empty{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--muted);text-align:center;padding:40px;gap:6px;
}
.board-empty .big{font-size:46px}
.board-empty h3{color:var(--ink);font-weight:600;font-size:18px;letter-spacing:.3px}

@media (max-width:760px){
  .contextbar{padding:8px 12px}
  .ws-btn{max-width:170px}
  .modal.wide{width:100%}
}

/* v2.1 additions */
.auth-ok{
  display:none;background:#09889415;border:1px solid #09889455;color:var(--teal);
  border-radius:var(--r-sm);padding:10px 13px;font-size:13px;margin-bottom:14px;font-weight:500;line-height:1.45;
}
.auth-ok.show{display:block}
.load-veil{
  position:fixed;inset:0;z-index:200;background:var(--bg);display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;color:var(--muted);
}
.load-veil.show{display:flex}
.load-veil .logo-mark{width:54px;height:54px;background:var(--teal);animation:pulse 1.1s ease-in-out infinite}
.load-veil .logo-mark span{color:#fff;font-size:16px}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.75}}

/* ============================================================
   v3 — Custom dropdowns, notifications, in-app dialogs
   ============================================================ */

/* ---------- Custom select ---------- */
.csel{position:relative;width:100%}
.csel-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 12px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--surface);font-family:inherit;font-size:14px;color:var(--ink);
  cursor:pointer;text-align:left;transition:border-color .15s;
}
.csel-sm .csel-btn{padding:7px 11px;font-size:13px}
.csel-btn:hover{border-color:var(--teal)}
.csel.open .csel-btn{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.csel-btn .cl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csel-btn .cl.ph{color:var(--muted);font-style:italic}
.csel-btn svg{flex-shrink:0;color:var(--muted);transition:transform .15s}
.csel.open .csel-btn svg{transform:rotate(180deg)}
.csel-btn:disabled{opacity:.55;cursor:not-allowed}
/* NOTE: no `display` here. `.menu{display:none}` is what hides every menu,
   and `.csel-menu` is declared later in this file with equal specificity, so
   putting `display:flex` here silently defeated that and left the dropdown
   permanently on screen. The flex layout belongs on the SHOWN state only. */
.csel-menu{padding:6px;max-height:320px;overflow:hidden;min-width:170px}
.csel-menu.show{display:flex;flex-direction:column}
/* The list scrolls, the search box does not: it must stay reachable while
   scrolling a long option list. */
.csel-menu .csel-items{overflow-y:auto;min-height:0}
.csel-search{position:sticky;top:0;padding:2px 2px 7px;background:var(--surface);flex-shrink:0}
.csel-search input{
  width:100%;padding:7px 10px;border-radius:8px;font-size:13px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);
}
.csel-search input:focus{outline:none;border-color:var(--teal);background:var(--surface)}
.csel-menu .ci{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 11px;border-radius:8px;font-size:13.5px;font-weight:500;color:var(--ink);
  white-space:pre;
}
.csel-menu .ci:hover{background:var(--surface-2)}
.csel-menu .ci.sel{background:var(--teal-soft);color:var(--teal);font-weight:600}
.csel-menu .ci .chk{width:14px;flex-shrink:0;color:var(--teal)}
.csel-menu .empty-ci{padding:10px 12px;color:var(--muted);font-size:13px;font-style:italic}

/* ---------- Label row with gear ---------- */
.lbl-row{display:flex;align-items:center;gap:7px}
.opt-gear,.grp-gear{
  font-size:12px;line-height:1;padding:2px 6px;border-radius:6px;color:var(--muted);
  border:1px solid transparent;
}
.opt-gear:hover,.grp-gear:hover{color:var(--teal);background:var(--teal-soft)}
.opt-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line-soft)}
.opt-row:last-child{border-bottom:none}
.opt-row .on{flex:1;font-weight:500}
.opt-row .rm{color:#D14A38;font-size:16px;padding:3px 9px;border-radius:7px}
.opt-row .rm:hover{background:#F3766618}

/* ---------- Progress number ---------- */
.prog-num{
  width:76px !important;flex-shrink:0;text-align:right;font-weight:600;color:var(--teal);
  padding:7px 9px !important;
}
.prog-num::-webkit-inner-spin-button{opacity:1}

/* ---------- Small modal ---------- */
.modal-sm{width:430px}

/* ---------- Notification bell ---------- */
.bell-dot{
  position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--emerald);
}

/* ---------- Notification panel ---------- */
.notif-panel{
  position:fixed;top:64px;right:14px;z-index:130;width:400px;max-width:calc(100vw - 24px);
  background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lg);
  border:1px solid var(--line);display:none;flex-direction:column;max-height:min(560px, calc(100vh - 90px));
}
.notif-panel.show{display:flex}
.np-head{display:flex;align-items:center;padding:14px 18px 10px}
.np-head h3{font-size:15px;font-weight:600;letter-spacing:.4px;flex:1}
.np-head .x{font-size:20px;color:var(--muted);padding:2px 8px;border-radius:7px}
.np-head .x:hover{background:var(--surface-2);color:var(--ink)}
.np-tabs{display:flex;gap:16px;padding:0 18px;border-bottom:1px solid var(--line)}
.np-tabs button{padding:6px 2px 10px;font-weight:600;font-size:12.5px;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;letter-spacing:.2px}
.np-tabs button.active{color:var(--teal);border-bottom-color:var(--teal)}
.np-list{overflow-y:auto;padding:6px}
.np-item{
  display:flex;gap:11px;padding:11px 12px;border-radius:var(--r-sm);align-items:flex-start;
  border-bottom:1px solid var(--line-soft);
}
.np-item:last-child{border-bottom:none}
.np-item.clickable{cursor:pointer}
.np-item.clickable:hover{background:var(--surface-2)}
.np-ic{
  width:32px;height:32px;border-radius:10px 10px 10px 3px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.np-ic.done{background:#0988941A;color:var(--done)}
.np-ic.duesoon{background:#FBC93126;color:#9A7400}
.np-ic.change{background:#3DC3D620;color:#158FA0}
.np-ic.invite{background:#F376661C;color:var(--coral)}
.np-body{flex:1;min-width:0}
.np-msg{font-size:13.5px;line-height:1.4;color:var(--ink)}
.np-meta{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.np-meta .where{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.np-meta .when{font-size:11.5px;color:var(--muted)}
.np-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;
}
.np-tag.auto{background:var(--line);color:var(--muted)}
.np-tag.person{background:var(--teal-soft);color:var(--teal)}
.np-empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:13.5px;font-style:italic}
html[data-theme="dark"] .bell-dot{border-color:#0E3A40}
html[data-theme="dark"] .np-ic.duesoon{color:#F5C534}

@media (max-width:760px){
  .notif-panel{right:8px;left:8px;width:auto}
  .modal-sm{width:100%}
}

/* ============================================================
   v2.2 — Layering, drag & drop, inline add, export, drag tips
   ============================================================ */

/* ---------- Explicit stacking order (fixes dialogs opening behind) ----------
   base modal 100 · menus 320 · secondary dialogs 400 · dropdown list 520
   · notif panel 300 · veil 600 · toast 700                              */
.backdrop{z-index:100}
.menu{z-index:320}
.notif-panel{z-index:300}
#confirmBackdrop,#optBackdrop{z-index:400}
.csel-menu{z-index:520}
.load-veil{z-index:600}
.toast{z-index:700}
.drag-tip{z-index:640}

/* ---------- Row drag handle ---------- */
.drag-h{
  width:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:var(--line);cursor:grab;font-size:12px;line-height:1;opacity:0;
  transition:opacity .12s,color .12s;touch-action:none;user-select:none;
}
.g-row:hover .drag-h{opacity:1}
.drag-h:hover{color:var(--teal)}
.drag-h:active{cursor:grabbing}
body.row-dragging{cursor:grabbing;user-select:none}
body.row-dragging .drag-h{opacity:1}

.g-row.drag-src{opacity:.4}
.g-row.drop-before .g-left{box-shadow:inset 0 3px 0 0 var(--teal)}
.g-row.drop-after  .g-left{box-shadow:inset 0 -3px 0 0 var(--teal)}
.g-row.drop-child  .g-left{background:var(--teal-soft);box-shadow:inset 4px 0 0 0 var(--teal)}

/* ---------- Hover nesting controls ("gradient box") ---------- */
.row-tools{
  display:inline-flex;align-items:center;gap:1px;margin-left:7px;flex-shrink:0;
  padding:2px;border-radius:9px;opacity:0;transition:opacity .13s;
  background:linear-gradient(135deg,var(--teal-soft) 0%,rgba(61,195,214,.22) 100%);
  border:1px solid rgba(9,136,148,.22);
}
.g-row:hover .row-tools{opacity:1}
.row-tools:hover{opacity:1}
.row-tools .rt{
  width:20px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;color:var(--teal);font-weight:700;
}
.row-tools .rt:hover:not(:disabled){background:#fff;box-shadow:0 1px 3px rgba(2,77,85,.18)}
html[data-theme="dark"] .row-tools .rt:hover:not(:disabled){background:rgba(255,255,255,.14)}
.row-tools .rt:disabled{opacity:.28;cursor:not-allowed}
.row-tools .rt.plus{color:var(--emerald)}
html[data-theme="dark"] .row-tools .rt.plus{color:var(--omni)}

/* ---------- Inline "Add a task" row ---------- */
.g-row.add-row{height:38px}
.g-row.add-row .g-left{
  display:flex;align-items:center;padding-left:12px;
  background:var(--surface);border-bottom:1px solid var(--line-soft);
}
.add-task-btn{
  display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;
  border-radius:999px;color:var(--muted);font-weight:500;font-size:13px;
}
.add-task-btn:hover{color:var(--teal);background:var(--teal-soft)}
.add-task-btn .plus{
  width:19px;height:19px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;line-height:1;
}
.empty .add-task-btn{margin-top:14px;border:1.5px solid var(--line)}

/* ---------- Export menu ---------- */
.exp-ic{
  width:26px;height:26px;border-radius:8px 8px 8px 3px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#fff;letter-spacing:-.3px;
}
.exp-ic.xls{background:#1D7044}
.exp-ic.pdf{background:#C0392B}
.exp-ic.json{background:var(--muted)}
.m-check{
  display:flex;gap:9px;align-items:flex-start;padding:9px 12px 10px;
  cursor:pointer;border-radius:var(--r-sm);
}
.m-check:hover{background:var(--surface-2)}
.m-check input{width:auto;margin-top:2px;flex-shrink:0;accent-color:var(--teal)}
.m-check span{font-size:12.5px;color:var(--ink);line-height:1.35}
.m-check span i{display:block;font-size:11.5px;color:var(--muted);font-style:normal;margin-top:2px}

/* ---------- Live drag tooltip on the Gantt ---------- */
.drag-tip{
  position:fixed;display:none;padding:5px 11px;border-radius:999px;
  background:var(--emerald);color:#fff;font-size:12px;font-weight:600;
  letter-spacing:.2px;white-space:nowrap;transform:translateX(-50%);
  box-shadow:0 6px 18px rgba(2,77,85,.35);pointer-events:none;
}
.drag-tip.show{display:block}
.drag-tip b{color:var(--dandelion);font-weight:700}

/* ---------- v2.2b — Toolbar rows: filter sits alone at the left of the actions row ---------- */
.toolbar{flex-direction:column;align-items:stretch;gap:8px}
.tb-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.tb-row .chips{flex:1 1 auto;min-width:0}
.tb-filter{width:210px;flex:0 0 210px}
.tb-filter .csel-btn{padding:7px 11px}
@media (max-width:760px){
  .tb-filter{width:100%;flex:1 1 100%}
  .tb-row{gap:8px}
}

/* ============================================================
   v2.2c — Brand logo + Today marker above task bars
   ============================================================ */

/* ---------- Logo lockups ---------- */
.logo-img{
  height:30px;width:auto;display:block;flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.auth-brand{flex-direction:column;align-items:flex-start;gap:6px;padding:30px 30px 20px}
.auth-logo{height:44px;width:auto;display:block}
.auth-brand .s{font-size:12px;font-style:italic;color:var(--muted);letter-spacing:.3px}
.veil-logo{height:52px;width:auto;animation:pulse 1.1s ease-in-out infinite}
@media (max-width:760px){
  .logo-img{height:26px}
  .auth-logo{height:38px}
}

/* ---------- Today marker: drawn inside each lane, above the bars ---------- */
.g-lane .today-mark{
  position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;
  background:var(--today);z-index:9;pointer-events:none;
}
.g-lane .today-mark::before{
  content:'';position:absolute;inset:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.45);
}
html[data-theme="dark"] .g-lane .today-mark::before{box-shadow:0 0 0 1px rgba(0,0,0,.35)}

/* ---------- v2.4 — Dependency arrows & critical path ---------- */
.dep-layer{position:absolute;top:0;left:0;pointer-events:none;z-index:5;overflow:visible}
.dep-path{fill:none;stroke:var(--muted);stroke-width:1.4;opacity:.62}
.dep-path.crit{stroke:var(--coral);stroke-width:1.8;opacity:.9}
.dep-head{fill:var(--muted);opacity:.62}
.dep-head.crit{fill:var(--coral);opacity:.9}
html[data-theme="dark"] .dep-path{stroke:#8FA3AD}
html[data-theme="dark"] .dep-head{fill:#8FA3AD}

.bar.critical{box-shadow:0 0 0 1.5px var(--coral), 0 1px 3px rgba(0,0,0,.14)}
.bar.critical.parent{box-shadow:0 0 0 1.5px var(--coral)}

/* dependency editor rows in the task modal */
.dep-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.dep-row{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:var(--r-sm);
  background:var(--surface-2);font-size:12.5px}
.dep-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dep-row .tag{font-weight:700;color:var(--teal);font-size:11px;letter-spacing:.4px}
.dep-row .lag{color:var(--muted);font-size:11.5px}
.dep-row .rm{color:var(--muted);font-size:15px;line-height:1;padding:0 3px}
.dep-row .rm:hover{color:var(--coral)}
.dep-empty{color:var(--muted);font-size:12.5px;font-style:italic;margin-top:4px}

/* ============================================================
   v2.5 — List and Board views
   ============================================================ */
.viewpane{width:100%;overflow:auto;padding:0 0 26px}

/* ---------- Workflow status chips ---------- */
.wf{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.wf-not_started{background:var(--surface-2);color:var(--muted)}
.wf-in_progress{background:var(--teal-soft);color:var(--teal)}
.wf-blocked{background:#FBE3DF;color:#B33D2B}
.wf-on_hold{background:#FBF0D4;color:#8A6A00}
.wf-canceled{background:var(--surface-2);color:var(--muted);text-decoration:line-through}
.wf-done{background:#D8EFE4;color:#1D7044}
html[data-theme="dark"] .wf-blocked{background:rgba(225,84,63,.22);color:#F4A092}
html[data-theme="dark"] .wf-on_hold{background:rgba(199,148,0,.22);color:#E8C86A}
html[data-theme="dark"] .wf-done{background:rgba(9,136,148,.26);color:#7FD8C6}

/* ---------- List view ---------- */
.lv{min-width:860px}
.lv-row{display:grid;grid-template-columns:minmax(240px,2.4fr) 118px 140px 104px 104px 132px 118px;
  align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line-soft);
  font-size:13px;cursor:pointer}
.lv-row:hover{background:var(--surface-2)}
.lv-row:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.lv-head{position:sticky;top:0;z-index:2;background:var(--surface);cursor:default;
  font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.lv-head:hover{background:var(--surface)}
.lv-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-c{color:var(--ink);display:flex;align-items:center;gap:7px;font-size:12.5px}
.lv-crit{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--coral);margin-left:7px}
.lv-bar{display:inline-block;width:54px;height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.lv-bar i{display:block;height:100%;background:var(--teal)}

/* ---------- Board (Kanban) view ---------- */
.kb{display:flex;gap:13px;padding:16px;align-items:flex-start;min-height:200px}
.kb-col{flex:0 0 250px;background:var(--surface-2);border-radius:var(--r-md);padding:10px;
  display:flex;flex-direction:column;gap:9px;max-height:calc(100vh - 230px)}
.kb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:1px 3px}
.kb-head b{font-size:12px;color:var(--muted)}
.kb-items{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.kb-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:10px 11px;cursor:pointer;display:flex;flex-direction:column;gap:7px;
  box-shadow:0 1px 2px rgba(2,77,85,.05)}
.kb-card:hover{border-color:var(--teal);box-shadow:0 2px 8px rgba(2,77,85,.10)}
.kb-card:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.kb-name{font-size:13px;font-weight:600;line-height:1.35;color:var(--ink)}
.kb-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kb-who{font-size:11.5px;color:var(--muted)}
.kb-foot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--line-soft);padding-top:6px}
.kb-empty{font-size:12px;color:var(--muted);font-style:italic;padding:9px 4px}
@media (max-width:760px){ .kb-col{flex:0 0 78vw} .lv{min-width:720px} }

/* ============================================================
   v2.6 — Board drag, Calendar, My Work
   ============================================================ */
/* ---- Board drag-to-restatus ---- */
.kb-card{touch-action:none}
.kb-card.dragging{opacity:.45}
.kb-col.drop-target{outline:2px dashed var(--teal);outline-offset:-3px;background:var(--teal-soft)}
.kb-col.drop-blocked{outline:2px dashed var(--coral);outline-offset:-3px}

/* ---- Calendar ---- */
.cal-top{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}
.cal-top h3{font-size:15px;font-weight:700;color:var(--ink);margin:0;min-width:190px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line-soft);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.cal-dow{background:var(--surface);padding:7px 9px;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--muted);text-align:center}
.cal-cell{background:var(--surface);min-height:104px;padding:6px 7px;display:flex;
  flex-direction:column;gap:4px}
.cal-cell.other{background:var(--surface-2)}
.cal-cell.today .cal-num{background:var(--coral);color:#fff}
.cal-cell.nonwork{background:var(--surface-2)}
.cal-num{align-self:flex-start;font-size:11.5px;font-weight:600;color:var(--muted);
  min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.cal-ev{font-size:11.5px;padding:2px 7px;border-radius:5px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid transparent}
.cal-ev.s-done{background:#D8EFE4;border-left-color:#1D7044;color:#14532d}
.cal-ev.s-ontrack{background:var(--teal-soft);border-left-color:var(--teal);color:var(--emerald)}
.cal-ev.s-duesoon{background:#FBF0D4;border-left-color:#C79400;color:#7a5c00}
.cal-ev.s-overdue{background:#FBE3DF;border-left-color:var(--coral);color:#8f2f1f}
.cal-ev.milestone{font-weight:700}
.cal-more{font-size:11px;color:var(--muted);cursor:pointer;padding-left:3px}
html[data-theme="dark"] .cal-ev.s-done{background:rgba(9,136,148,.24);color:#9BE3D3}
html[data-theme="dark"] .cal-ev.s-duesoon{background:rgba(199,148,0,.24);color:#E8C86A}
html[data-theme="dark"] .cal-ev.s-overdue{background:rgba(225,84,63,.24);color:#F4A092}

/* ---- My Work ---- */
.mw{padding:16px;display:flex;flex-direction:column;gap:18px;max-width:940px}
.mw-group h4{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.mw-group h4 b{background:var(--surface-2);border-radius:999px;padding:1px 8px;
  font-size:11px;color:var(--muted)}
.mw-group.urgent h4{color:var(--coral)}
.mw-item{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);margin-bottom:7px}
.mw-item:hover{border-color:var(--teal)}
.mw-main{flex:1;min-width:0;cursor:pointer}
.mw-name{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mw-sub{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:9px;flex-wrap:wrap}
.mw-act{display:flex;gap:6px;flex-shrink:0}
.mw-act button{font-size:11.5px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);background:var(--surface)}
.mw-act button:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.mw-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:13.5px}
.mw-empty .big{font-size:34px;margin-bottom:8px}

/* ============================================================
   v2.7 — Baselines, custom fields, comments, prompts, milestones
   ============================================================ */
/* Milestone bars render as a diamond */
.bar.type-milestone{background:transparent!important;box-shadow:none!important;overflow:visible}
.bar.type-milestone::before{content:'';position:absolute;left:0;top:50%;width:13px;height:13px;
  transform:translate(-2px,-50%) rotate(45deg);background:var(--emerald);
  box-shadow:0 1px 3px rgba(2,77,85,.28)}
.bar.type-milestone.critical::before{background:var(--coral)}
.bar.type-milestone .fill,.bar.type-milestone .lbl{display:none}

/* Baseline variance chips */
.base-var{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px}
.bv-name{font-weight:600;color:var(--muted);margin-right:2px}
.bv{padding:2px 9px;border-radius:999px;font-weight:600;font-size:11.5px}
.bv.flat{background:var(--surface-2);color:var(--muted)}
.bv.late{background:#FBE3DF;color:#B33D2B}
.bv.early{background:#D8EFE4;color:#1D7044}
html[data-theme="dark"] .bv.late{background:rgba(225,84,63,.22);color:#F4A092}
html[data-theme="dark"] .bv.early{background:rgba(9,136,148,.26);color:#7FD8C6}

/* Custom fields */
.cf-list{display:flex;flex-direction:column;gap:8px}
.cf-row{display:flex;align-items:center;gap:10px;font-size:13px}
.cf-row>span{flex:0 0 34%;color:var(--muted);font-size:12.5px}
.cf-row input[type=checkbox]{width:auto;accent-color:var(--teal)}

/* Comments */
.cmt-list{display:flex;flex-direction:column;gap:9px;max-height:230px;overflow-y:auto;
  padding-right:3px;margin-bottom:9px}
.cmt{background:var(--surface-2);border-radius:var(--r-sm);padding:8px 11px}
.cmt-h{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.cmt-h b{color:var(--ink);font-size:12.5px}
.cmt-h .cmt-x{margin-left:auto;color:var(--muted);font-size:15px;line-height:1;padding:0 3px}
.cmt-h .cmt-x:hover{color:var(--coral)}
.cmt-b{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.cmt-b .mention{font-style:normal;font-weight:600;color:var(--teal);background:var(--teal-soft);
  padding:0 4px;border-radius:4px}
.cmt-empty{font-size:12.5px;color:var(--muted);font-style:italic}
.cmt-new{display:flex;gap:8px;align-items:flex-end}
.cmt-new textarea{flex:1;resize:vertical;min-height:38px}

/* Prompt / picker modal */
.modal-sm{max-width:430px}
.prompt-opts{display:flex;flex-direction:column;gap:7px;max-height:280px;overflow-y:auto}
.prompt-opt{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.prompt-opt:hover{border-color:var(--teal);background:var(--teal-soft)}
.prompt-opt b{font-size:13.5px;color:var(--ink)}
.prompt-opt span{font-size:11.5px;color:var(--muted)}
#promptBackdrop{z-index:420}

/* Menu extras */
.m-tag{font-size:10.5px;color:var(--muted);background:var(--surface-2);
  padding:1px 7px;border-radius:999px;margin-left:6px}
.m-empty{font-size:12px;color:var(--muted);font-style:italic;padding:6px 12px}

/* ============================================================
   v3.0 — Project Control Center
   ============================================================ */
.cc{padding:16px;display:flex;flex-direction:column;gap:14px}
.cc-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.cc-tab{padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);
  border:1px solid transparent}
.cc-tab:hover{background:var(--surface-2);color:var(--ink)}
.cc-tab.active{background:var(--teal-soft);color:var(--teal);border-color:rgba(9,136,148,.25)}
.cc-tab b{margin-left:6px;font-size:11px;opacity:.8}

/* Health strip */
.cc-health{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.hc{flex:1 1 140px;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.hc-l{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.hc-v{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px}
.hc-v::before{content:'';width:11px;height:11px;border-radius:50%;background:var(--muted)}
.hc.green .hc-v::before{background:#1D7044}   .hc.green .hc-v{color:#1D7044}
.hc.amber .hc-v::before{background:#C79400}   .hc.amber .hc-v{color:#8A6A00}
.hc.red   .hc-v::before{background:var(--coral)} .hc.red .hc-v{color:#B33D2B}
.hc-e{font-size:11.5px;color:var(--muted);line-height:1.4}
html[data-theme="dark"] .hc.green .hc-v{color:#7FD8C6}
html[data-theme="dark"] .hc.amber .hc-v{color:#E8C86A}
html[data-theme="dark"] .hc.red .hc-v{color:#F4A092}

/* Register table */
.cc-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cc-bar .grow{flex:1}
.reg{width:100%;border-collapse:collapse;font-size:13px}
.reg th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.reg td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.reg tr:hover td{background:var(--surface-2)}
.reg tbody tr{cursor:pointer}
.reg .ref{font-weight:700;color:var(--teal);white-space:nowrap}
.reg .ttl{font-weight:600}
.reg .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;
  max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc{display:inline-flex;align-items:center;justify-content:center;min-width:26px;padding:2px 7px;
  border-radius:6px;font-weight:700;font-size:12px}
.sc.lo{background:#D8EFE4;color:#1D7044}
.sc.md{background:#FBF0D4;color:#8A6A00}
.sc.hi{background:#FBE3DF;color:#B33D2B}
html[data-theme="dark"] .sc.lo{background:rgba(9,136,148,.26);color:#7FD8C6}
html[data-theme="dark"] .sc.md{background:rgba(199,148,0,.24);color:#E8C86A}
html[data-theme="dark"] .sc.hi{background:rgba(225,84,63,.24);color:#F4A092}
.cs-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--surface-2);color:var(--muted)}
.cs-chip.open{background:var(--teal-soft);color:var(--teal)}
.cs-chip.closed,.cs-chip.resolved{background:#D8EFE4;color:#1D7044}
.cs-chip.rejected{background:#FBE3DF;color:#B33D2B}
.cc-empty{padding:30px 12px;text-align:center;color:var(--muted);font-size:13px}
.cc-empty .big{font-size:30px;margin-bottom:6px}

/* Charter & report layout */
.cc-form{display:flex;flex-direction:column;gap:12px;max-width:820px}
.cc-form .fld label{font-size:12px}
.cc-form textarea{min-height:70px}
.cc-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){ .cc-two{grid-template-columns:1fr} }
.rep-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:13px 15px;margin-bottom:9px}
.rep-h{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.rep-h b{color:var(--ink);font-size:14px}
.rep-ev{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.rep-ev span{font-size:11px;background:var(--surface-2);color:var(--muted);
  padding:2px 8px;border-radius:999px}
#ctrlBackdrop{z-index:410}
/* The group manager is reachable FROM the task modal, so it must stack above
   it (and above the confirm dialog it can raise from within itself). */
#grpBackdrop{z-index:430}
#grpBackdrop ~ #confirmBackdrop,#confirmBackdrop{z-index:440}


/* ---------- v3.1 — Draggable column resizers (header) ---------- */
/* Sits exactly over the column's right-hand border. The parent header cell is
   position:relative, so right:0 lands on the divider line itself rather than
   floating next to the label text. */
.col-resizer{
  position:absolute;top:0;bottom:0;right:0;width:11px;margin-right:-6px;
  cursor:col-resize;z-index:14;touch-action:none;
}
.col-resizer::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  top:5px;bottom:5px;width:2px;border-radius:2px;
  background:transparent;transition:background .12s;
}
.col-resizer:hover::after,.col-resizer.active::after{background:var(--teal)}
body.col-resizing{cursor:col-resize;user-select:none}


/* ---------- v3.1 — Single Today label in the scale header ---------- */
.today-pill{
  position:absolute;top:6px;transform:translateX(-50%);z-index:15;
  background:var(--today);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  padding:2px 8px;border-radius:999px;white-space:nowrap;pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
}

/* ============================================================
   v4.0 — Executive layer: cockpit, portfolio, objectives, intake
   ============================================================ */
.ex{padding:16px;display:flex;flex-direction:column;gap:16px;max-width:1400px}
.ex-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);padding-bottom:10px}
.ex-tab{padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);
  border:1px solid transparent}
.ex-tab:hover{background:var(--surface-2);color:var(--ink)}
.ex-tab.active{background:var(--teal-soft);color:var(--teal);border-color:rgba(9,136,148,.25)}
.ex-tab b{margin-left:6px;font-size:11px;opacity:.8}
.ex-sec{display:flex;flex-direction:column;gap:10px}
.ex-sec h3{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin:0}

/* Portfolio health tiles */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.pf-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:12px 14px;display:flex;flex-direction:column;gap:7px;cursor:pointer}
.pf-card:hover{border-color:var(--teal);box-shadow:0 2px 10px rgba(2,77,85,.08)}
.pf-card .nm{font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-card .rag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}
.pf-card .rag::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--muted)}
.pf-card.green .rag::before{background:#1D7044} .pf-card.green .rag{color:#1D7044}
.pf-card.amber .rag::before{background:#C79400} .pf-card.amber .rag{color:#8A6A00}
.pf-card.red   .rag::before{background:var(--coral)} .pf-card.red .rag{color:#B33D2B}
.pf-card .ev{font-size:11.5px;color:var(--muted);line-height:1.45}
html[data-theme="dark"] .pf-card.green .rag{color:#7FD8C6}
html[data-theme="dark"] .pf-card.amber .rag{color:#E8C86A}
html[data-theme="dark"] .pf-card.red .rag{color:#F4A092}

/* Counts banner */
.rag-bar{display:flex;gap:9px;flex-wrap:wrap}
.rag-pill{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-soft);font-size:13px}
.rag-pill b{font-size:19px;font-weight:700}
.rag-pill.green b{color:#1D7044} .rag-pill.amber b{color:#C79400}
.rag-pill.red b{color:var(--coral)} .rag-pill.total b{color:var(--teal)}

/* Decision inbox */
.di-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-md);margin-bottom:8px}
.di-item.overdue{border-left:3px solid var(--coral)}
.di-main{flex:1;min-width:0;cursor:pointer}
.di-t{font-size:13.5px;font-weight:600;color:var(--ink)}
.di-s{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.di-s .late{color:var(--coral);font-weight:600}
.di-act{display:flex;gap:6px;flex-shrink:0}
.di-act button{font-size:11.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted)}
.di-act button:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}

/* Objectives */
.obj{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:13px 15px;margin-bottom:9px}
.obj-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.obj-h .nm{font-size:14px;font-weight:600;flex:1;min-width:180px}
.obj-lv{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--teal);background:var(--teal-soft);padding:2px 8px;border-radius:999px}
.obj-two{display:flex;gap:22px;margin-top:10px;flex-wrap:wrap}
.obj-m{flex:1;min-width:170px}
.obj-m .lab{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.obj-m .val{font-size:17px;font-weight:700;color:var(--ink)}
.obj-m .hint{font-size:11px;color:var(--muted);margin-top:2px}
.obj-bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden;margin-top:5px}
.obj-bar i{display:block;height:100%;background:var(--teal)}
.obj-bar.delivery i{background:var(--omni)}
.kr-row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:6px 0;
  border-top:1px solid var(--line-soft)}
.kr-row .knm{flex:1;min-width:0}
.kr-row .kv{color:var(--muted);font-size:11.5px}

/* Intake */
.ik-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-md);margin-bottom:8px}
.ik-main{flex:1;min-width:0;cursor:pointer}
.ik-t{font-size:13.5px;font-weight:600}
.ik-s{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.ik-score{flex-shrink:0;text-align:right;min-width:76px}
.ik-score b{font-size:19px;font-weight:700;color:var(--teal)}
.ik-score span{display:block;font-size:10.5px;color:var(--muted)}
.ik-score.partial b{color:var(--dandelion)}

/* ============================================================
   v5.0 — Resources, financials, benefits, scenarios
   ============================================================ */
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.fin-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.fin-card .lab{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.fin-card .val{font-size:19px;font-weight:700;color:var(--ink)}
.fin-card .sub{font-size:11.5px;color:var(--muted)}
.fin-card.good .val{color:#1D7044}
.fin-card.warn .val{color:#C79400}
.fin-card.bad  .val{color:var(--coral)}
html[data-theme="dark"] .fin-card.good .val{color:#7FD8C6}
html[data-theme="dark"] .fin-card.warn .val{color:#E8C86A}
html[data-theme="dark"] .fin-card.bad  .val{color:#F4A092}
.fin-note{font-size:12.5px;color:var(--muted);font-style:italic;padding:10px 13px;
  background:var(--surface-2);border-radius:var(--r-sm);border-left:3px solid var(--line)}

/* Capacity bars */
.cap-row{display:flex;align-items:center;gap:12px;padding:9px 13px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-md);margin-bottom:7px}
.cap-nm{flex:0 0 190px;font-size:13px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cap-nm i{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:500;
  display:block;margin-top:1px}
.cap-track{flex:1;height:16px;border-radius:8px;background:var(--surface-2);position:relative;overflow:hidden}
.cap-fill{position:absolute;left:0;top:0;bottom:0;background:var(--teal);border-radius:8px}
.cap-fill.over{background:var(--coral)}
.cap-limit{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.45}
.cap-val{flex:0 0 86px;text-align:right;font-size:12.5px;font-weight:600}
.cap-val.over{color:var(--coral)}

/* Benefits */
.ben{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:8px}
.ben.dis{border-left:3px solid var(--coral)}
.ben-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ben-h .nm{font-size:13.5px;font-weight:600;flex:1;min-width:150px}
.ben-m{display:flex;gap:20px;margin-top:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ben-m b{color:var(--ink);font-size:13px;display:block}

/* Scenarios */
.scn{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:13px 15px;margin-bottom:9px}
.scn-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.scn-h .nm{font-size:14px;font-weight:600;flex:1;min-width:160px}
.scn-tot{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted);
  padding-top:9px;border-top:1px solid var(--line-soft);margin-top:8px}
.scn-tot b{display:block;color:var(--ink);font-size:14px}
.scn-ch{font-size:12.5px;padding:6px 0;border-top:1px solid var(--line-soft);
  display:flex;gap:10px;align-items:center}
.scn-ch .ct{font-weight:600;color:var(--teal);min-width:74px}
.scn-warn{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:7px}

/* ============================================================
   v5.1 — Group colours, strict view isolation, drag ghost
   ============================================================ */

/* ---------- 2. Absolute tab isolation ----------
   Layout rules (.g-inner is inline-block, .viewpane is block) were winning
   over the `hidden` attribute, so two views could paint at once. This makes
   `hidden` authoritative everywhere, no exceptions. */
[hidden]{display:none !important}

/* Header labels are clipped to their own column, so even a hand-shrunk column
   truncates cleanly instead of bleeding into the next heading. */
.cols span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 1. Group colour system ---------- */
.task-color-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  margin-right:7px;display:inline-block;
  box-shadow:0 0 0 1px rgba(0,0,0,.10) inset;
}
/* Bars paint with their group colour. Status is still carried as a class so
   overdue/due-soon can add emphasis without losing the grouping signal. */
.bar{background:var(--task-color, var(--teal))}
.bar .fill i{background:rgba(255,255,255,.42)}
.bar.parent{
  background:var(--task-color, var(--emerald));
  opacity:.92;
}
/* Status keeps a readable accent: a coloured edge rather than a full repaint,
   so a task never loses its group identity just because it slipped. */
.bar.b-overdue{box-shadow:inset 0 0 0 2px var(--coral)}
.bar.b-duesoon{box-shadow:inset 0 0 0 2px var(--dandelion)}
.bar.b-done{opacity:.55}
.bar.critical{box-shadow:0 0 0 1.5px var(--coral), 0 1px 3px rgba(0,0,0,.14)}
.bar.type-milestone::before{background:var(--task-color, var(--emerald))}

/* ---------- 3a. Row drag ghost (Y-axis locked) ---------- */
.drag-ghost{
  position:fixed;z-index:660;pointer-events:none;
  background:var(--surface);
  border:1px solid var(--teal);
  border-radius:var(--r-sm);
  box-shadow:0 10px 26px rgba(2,77,85,.28);
  opacity:.96;overflow:hidden;
  display:flex;align-items:stretch;
}
.drag-ghost .g-lane{display:none}          /* carry the row header, not the timeline */
.drag-ghost .g-left{position:static;width:100%;background:var(--surface)}
.drag-ghost .row-tools,.drag-ghost .drag-h{opacity:0}
.g-row.drag-src{opacity:.28}

/* ============================================================
   v6.0 — Automation, integrations, suggestions
   ============================================================ */
.au-rule{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:13px 15px;margin-bottom:9px}
.au-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.au-h .nm{font-size:14px;font-weight:600;flex:1;min-width:170px}
.au-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;
  font-size:12.5px;color:var(--muted)}
.au-tok{background:var(--surface-2);border-radius:6px;padding:3px 9px;font-weight:600;color:var(--ink)}
.au-tok.trig{color:var(--teal);background:var(--teal-soft)}
.au-tok.act{color:var(--omni)}
.au-arrow{color:var(--line)}
.au-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted)}
.au-meta b{display:block;color:var(--ink);font-size:13px}
.au-match{margin-top:9px;font-size:12px}
.au-match .mi{padding:4px 0;border-top:1px solid var(--line-soft);
  display:flex;gap:9px;align-items:center}
.au-match .mi span{color:var(--muted)}
.badge-test{background:#FBF0D4;color:#8A6A00;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;letter-spacing:.3px}
.badge-off{background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:999px}
html[data-theme="dark"] .badge-test{background:rgba(199,148,0,.24);color:#E8C86A}

/* Suggestions */
.sug{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:8px;border-left:3px solid var(--line)}
.sug.sev3{border-left-color:var(--coral)}
.sug.sev2{border-left-color:var(--dandelion)}
.sug.sev1{border-left-color:var(--teal)}
.sug-t{font-size:13.5px;font-weight:600;color:var(--ink)}
.sug-d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.sug-cites{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px}
.cite{font-size:11px;background:var(--surface-2);color:var(--muted);
  padding:2px 9px;border-radius:999px;cursor:pointer;border:1px solid var(--line-soft)}
.cite:hover{border-color:var(--teal);color:var(--teal)}
.sug-act{display:flex;gap:7px;margin-top:11px}
.sug-act button{font-size:11.5px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.sug-act button:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}
.sug-done{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:8px}

/* Integrations */
.int-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-md);margin-bottom:8px}
.int-main{flex:1;min-width:0}
.int-t{font-size:13.5px;font-weight:600}
.int-s{font-size:11.5px;color:var(--muted);margin-top:3px;word-break:break-all}
.int-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--surface-2);padding:2px 8px;border-radius:5px;color:var(--muted)}

/* ---------- v6.1 — Generic record editor ---------- */
.rec-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.rec-form .fld{min-width:0}
.rec-form .fld textarea{min-height:64px}
.rec-form .rec-bool{display:flex;align-items:center}
.rec-form .rec-bool label{display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500}
.rec-form .rec-bool input{width:auto;accent-color:var(--teal)}
.rec-form .hint{grid-column:auto}
@media (max-width:720px){ .rec-form{grid-template-columns:1fr} }
.cc-bar h3{margin:0}
.rt[data-recedit],.rt[data-recnew]{font-size:11.5px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.rt[data-recedit]:hover,.rt[data-recnew]:hover{border-color:var(--teal);color:var(--teal);
  background:var(--teal-soft)}
.reg tbody tr[data-recedit]{cursor:pointer}

/* ============================================================
   v6.2 — Task Groups: soft band, sticky cue, badge
   Each grouped row paints its OWN slice of the tint on .g-lane;
   consecutive rows of the same group read as one continuous soft
   band because only the first/last row of a run fades at its own
   outer edge. Below bars (z3), dependency arrows (z5), and the
   today marker (z9); never intercepts pointer events.
   ============================================================ */
.g-lane::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(var(--grp-rgb,9,136,148), var(--grp-alpha, .26));
  opacity:0;transition:opacity .12s;
}
.g-row.grp .g-lane::before{ opacity:1; }
/* four cases: solo row (both edges feather), top of a run, bottom of a run,
   and a middle row (fully solid, no fade — it is flanked by its own group). */
.g-row.grp.grp-start.grp-end .g-lane::before{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.g-row.grp.grp-start:not(.grp-end) .g-lane::before{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 100%);
}
.g-row.grp.grp-end:not(.grp-start) .g-lane::before{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 14px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 14px), transparent 100%);
}
/* Hover preserves and slightly deepens the tint instead of the generic hover
   rule (which paints .g-lane's own background) ever competing with it — they
   are different paint layers, but this makes the intent explicit and gives a
   small legible lift rather than leaving hover feeling inert on grouped rows. */
.g-row.grp:hover .g-lane::before{ background:rgba(var(--grp-rgb,9,136,148), var(--grp-alpha-hover, .34)); }
html[data-theme="dark"]{ --grp-alpha:.30; --grp-alpha-hover:.42; }

/* Sticky task-area cue: a restrained left-edge bar so the relationship still
   reads while horizontally scrolled. The timeline tint remains the main signal. */
.g-left{ position:sticky; } /* (already sticky; explicit for the ::before below) */
.g-row.grp .g-left::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--grp-color);
}
/* Tint the frozen task area too, at a lower strength than the lane so task
   text, avatars, progress bars and status chips all stay fully legible. */
.g-row.grp .g-left{
  background:linear-gradient(rgba(var(--grp-rgb,9,136,148), .13),
                             rgba(var(--grp-rgb,9,136,148), .13)), var(--surface);
}
.g-row.grp:hover .g-left{
  background:linear-gradient(rgba(var(--grp-rgb,9,136,148), .19),
                             rgba(var(--grp-rgb,9,136,148), .19)), var(--surface-2);
}

/* Compact, non-colour group-name cue (accessibility: colour is never the only signal) */
.grp-badge{
  flex-shrink:0;font-size:9.5px;font-weight:700;letter-spacing:.3px;
  padding:1px 7px;border-radius:999px;color:#fff;
  background:var(--grp-color);
  max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:.92;
}
html[data-theme="dark"] .grp-badge{opacity:.85}

/* Task-group manager + task-modal group field */
.grp-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.grp-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid transparent}
.grp-item:hover{border-color:var(--line)}
.grp-swatch{width:20px;height:20px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
.grp-item .nm{flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-item .cnt{font-size:11.5px;color:var(--muted)}
.grp-item .acts{display:flex;gap:5px}
.grp-item .acts button{font-size:11.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted)}
.grp-item .acts button:hover{border-color:var(--teal);color:var(--teal)}
.grp-editor{border-top:1px solid var(--line-soft);padding-top:14px;margin-top:6px}
.grp-color-row{display:flex;align-items:center;gap:9px}
.grp-color-row input[type=color]{width:38px;height:34px;padding:2px;border-radius:8px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer}
.grp-color-row input[type=text]{width:100px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.grp-members{max-height:220px;overflow-y:auto;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:6px}
.grp-member-row{display:flex;align-items:center;gap:9px;padding:6px 7px;border-radius:6px;font-size:13px}
.grp-member-row:hover{background:var(--surface-2)}
.grp-member-row input{width:auto;accent-color:var(--teal)}
.grp-member-row .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.grp-inherit{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;
  padding:8px 11px;background:var(--surface-2);border-radius:var(--r-sm)}
.grp-inherit .grp-swatch{width:14px;height:14px}