/* ==========================================================
   Momentum — ClickUp-grade UI
   ========================================================== */
:root{
  --brand:#7b68ee; --brand2:#a855f7; --pink:#ec4899; --blue:#4f8cff;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --cyan:#06b6d4;
  --grad:linear-gradient(135deg,#7b68ee,#a855f7 55%,#ec4899);
  --rail-w:56px; --side-w:248px; --r:8px; --r-lg:12px;
  --font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* dark (default, like the ClickUp app) */
:root,:root[data-theme="dark"]{
  --bg:#101013; --bg2:#17171c; --panel:#1b1b21; --panel2:#212129; --hover:#26262f;
  --rail:#0c0c0f; --side:#141418; --line:#2a2a33; --line2:#232329;
  --tx:#e8e8ee; --tx2:#b4b4c4; --mut:#7c7c8f;
  --shadow:0 2px 8px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
  --sh-sm:0 1px 3px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#ffffff; --bg2:#f7f8fa; --panel:#ffffff; --panel2:#f7f8fa; --hover:#f0f1f5;
  --rail:#1b1b21; --side:#fbfbfd; --line:#e6e7ee; --line2:#eef0f5;
  --tx:#16161d; --tx2:#4a4a5a; --mut:#8b8b9e;
  --shadow:0 2px 8px rgba(20,20,40,.06),0 12px 32px rgba(20,20,40,.08);
  --sh-sm:0 1px 3px rgba(20,20,40,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--tx);font-size:13.5px;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:var(--tx)}
a{color:var(--blue);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--mut);background-clip:padding-box}
.hide{display:none!important}

/* ================= LOGIN ================= */
/* ---------- show/hide password ---------- */
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:42px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:none;background:none;cursor:pointer;
  display:grid;place-items:center;border-radius:7px;
  /* a mid grey reads on both the dark input and the near-white one that
     Chrome paints over autofilled fields */
  color:#6f6f85}
.pw-eye svg{width:18px;height:18px;display:block}
.pw-eye:hover{color:var(--brand);background:rgba(127,127,127,.16)}
.pw-eye:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* the login card's inputs carry their own margin — keep the wrapper in step */
.lg-card .pw-wrap{margin-bottom:0}
.lg-card .pw-wrap input{margin-bottom:0}
#lgRsBtn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- bulk selection ---------- */
.bulkbar{display:flex;align-items:center;gap:8px;padding:9px 16px;
  background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.bulkbar #bulkN{font-weight:700;font-size:12.5px}
.tbl th.selc,.tbl td.selc{width:34px;text-align:center;padding-left:10px}
.tbl input.rsel,.tbl input.gsel{width:15px;height:15px;cursor:pointer;accent-color:var(--brand)}
.tbl tr.selected td{background:color-mix(in srgb, var(--brand) 12%, transparent)}

/* ---------- permission matrix ---------- */
.pmx{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.pmx thead th{position:sticky;top:0;z-index:3;background:var(--panel);
  border-bottom:1px solid var(--line);padding:9px 8px;white-space:nowrap}
/* the permission name column stays put while you scroll sideways */
.pmx .pmx-h{position:sticky;left:0;z-index:2;background:var(--panel);
  text-align:left;min-width:250px;padding:7px 12px;border-right:1px solid var(--line)}
.pmx thead .pmx-h{z-index:4}
.pmx .pmx-h code{opacity:.55;font-size:10.5px}
.pmx .pmx-r{text-align:center;min-width:96px}
.pmx .pmx-c{text-align:center;padding:6px 8px;border-bottom:1px solid var(--line)}
.pmx tbody tr:hover td{background:var(--hover)}
.pmx .pmx-g td{position:sticky;left:0;background:var(--bg);color:var(--mut);
  font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  padding:9px 12px;border-bottom:1px solid var(--line)}
.pmx input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand)}
.pmx input[type=checkbox]:disabled{cursor:not-allowed;opacity:.45}

/* accent swatches in Setup → Workspace */
.acc-dot{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line) inset}
.acc-dot.on{border-color:var(--tx);transform:scale(1.12)}

/* ---------- splash / loader ---------- */
#boot{position:fixed;inset:0;z-index:900;display:none;align-items:center;justify-content:center;
  background:radial-gradient(900px 500px at 15% -5%,rgba(123,104,238,.35),transparent),
             radial-gradient(800px 500px at 95% 100%,rgba(236,72,153,.28),transparent),#0c0c0f}
body.booting #boot,#boot.on{display:flex}
#boot.fade{opacity:0;transition:opacity .28s ease;pointer-events:none}
.boot-in{text-align:center;animation:bootRise .45s cubic-bezier(.22,1,.36,1)}
@keyframes bootRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.boot-mark{width:74px;height:74px;margin:0 auto 20px;border-radius:20px;background:var(--grad);
  display:grid;place-items:center;position:relative;
  box-shadow:0 14px 46px rgba(123,104,238,.5);
  animation:bootBreathe 2.6s ease-in-out infinite}
@keyframes bootBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.boot-mark svg{width:44px;height:44px;position:relative;z-index:1;overflow:visible}

/* The M is one continuous stroke, so dash-offset animation makes it look like
   it is being written. 90 is a little over the real path length. */
.boot-m{stroke-dasharray:76;stroke-dashoffset:76;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28));
  animation:bootDraw 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bootDraw{
  0%   {stroke-dashoffset:76; opacity:.35}
  45%  {stroke-dashoffset:0;  opacity:1}    /* finished writing */
  70%  {stroke-dashoffset:0;  opacity:1}    /* hold so it reads as a letter */
  100% {stroke-dashoffset:-76;opacity:.35}  /* sweep away, ready to redraw */
}

/* a soft halo that pulses out from behind the tile */
.boot-mark::before{content:"";position:absolute;inset:0;border-radius:20px;
  background:var(--grad);opacity:.55;animation:bootHalo 2.6s ease-out infinite}
@keyframes bootHalo{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.55);opacity:0}}

/* the ring that sweeps around the logo */
.boot-mark::after{content:"";position:absolute;inset:-8px;border-radius:26px;
  border:2px solid transparent;border-top-color:rgba(255,255,255,.9);
  border-right-color:rgba(255,255,255,.3);animation:bootSpin 1.1s linear infinite}
@keyframes bootSpin{to{transform:rotate(360deg)}}
.boot-name{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff}
.boot-msg{margin-top:6px;font-size:13px;color:rgba(255,255,255,.62)}
/* indeterminate bar — we can't know how long Supabase will take */
.boot-bar{width:180px;height:3px;margin:20px auto 0;border-radius:3px;
  background:rgba(255,255,255,.13);overflow:hidden}
.boot-bar i{display:block;width:40%;height:100%;border-radius:3px;background:var(--grad);
  animation:bootSlide 1.15s ease-in-out infinite}
@keyframes bootSlide{0%{transform:translateX(-105%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){
  .boot-mark,.boot-mark::before,.boot-mark::after,.boot-bar i,.boot-in{animation:none}
  .boot-mark::before{opacity:0}
  .boot-m{stroke-dashoffset:0;animation:none}
}

/* While the session is being checked, show the backdrop but not the card —
   otherwise every refresh flashes "Log in" before landing back in the app. */
body.booting .lg-card{visibility:hidden}
#login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 500px at 15% -5%,rgba(123,104,238,.35),transparent),radial-gradient(800px 500px at 95% 100%,rgba(236,72,153,.28),transparent),#0c0c0f}
.lg-card{background:var(--panel);width:400px;max-width:92vw;border-radius:16px;padding:32px;box-shadow:var(--shadow);border:1px solid var(--line)}
.lg-logo{width:46px;height:46px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;margin-bottom:16px}
.lg-card h1{font-size:22px;letter-spacing:-.02em}
.lg-card .sub{color:var(--mut);margin-bottom:20px;font-size:13px}
.lg-card label{display:block;font-size:11px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.05em;margin:14px 0 6px}
.lg-card input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);outline:none}
.lg-card input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(123,104,238,.18)}
.lg-btn{width:100%;padding:12px;background:var(--grad);color:#fff;border-radius:var(--r);font-weight:700;margin-top:18px}
.lg-btn:hover{filter:brightness(1.08)}
.lg-err{color:var(--red);font-size:12.5px;min-height:16px;margin-top:10px;font-weight:600}
.lg-demo{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.lg-demo .t{font-size:11.5px;color:var(--mut);margin-bottom:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.lg-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r);cursor:pointer;border:1px solid transparent}
.lg-row:hover{background:var(--hover);border-color:var(--line)}
.lg-row .nm{font-weight:600;font-size:13px}
.lg-row .rl{font-size:11px;color:var(--mut)}
.lg-row .pill{margin-left:auto;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px;text-transform:uppercase}

/* ================= SHELL ================= */
#app{display:none;height:100vh;grid-template-columns:var(--rail-w) var(--side-w) 1fr}
#app.on{display:grid}
#app.side-collapsed{grid-template-columns:var(--rail-w) 0 1fr}
#app.side-collapsed .side{display:none}

/* --- icon rail --- */
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;border-right:1px solid rgba(255,255,255,.05)}
.rail .ws{width:34px;height:34px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:10px;cursor:pointer;font-size:15px}
.rail-btn{width:42px;height:42px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#8e8ea6;position:relative}
.rail-btn svg{width:19px;height:19px;stroke-width:1.9}
.rail-btn span{font-size:8.5px;font-weight:600;letter-spacing:.01em}
.rail-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.rail-btn.on{background:rgba(123,104,238,.22);color:#fff}
.rail-btn .dot{position:absolute;top:5px;right:7px;min-width:15px;height:15px;background:var(--red);color:#fff;border-radius:9px;font-size:9px;font-weight:800;display:grid;place-items:center;padding:0 3px;border:2px solid var(--rail)}
.rail .sp{flex:1}

/* --- sidebar --- */
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.side-top{padding:12px 14px 8px;display:flex;align-items:center;gap:8px}
.side-top h3{font-size:15px;font-weight:700;flex:1}
.ico-sm{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--mut)}
.ico-sm:hover{background:var(--hover);color:var(--tx)}
.side-scroll{flex:1;overflow-y:auto;padding:0 8px 12px}
.s-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r);color:var(--tx2);cursor:pointer;font-weight:500;font-size:13px}
.s-item:hover{background:var(--hover);color:var(--tx)}
.s-item.on{background:rgba(123,104,238,.18);color:var(--tx);font-weight:600}
.s-item .ic{width:17px;display:grid;place-items:center;flex:none}
.s-item .ct{margin-left:auto;font-size:11px;color:var(--mut);font-weight:600}
.s-sec{display:flex;align-items:center;gap:6px;padding:14px 10px 5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--mut);font-weight:800}
.s-sec button{margin-left:auto;color:var(--mut);width:20px;height:20px;border-radius:5px;font-size:15px;line-height:1}
.s-sec button:hover{background:var(--hover);color:var(--tx)}
.tree-row{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:var(--r);cursor:pointer;color:var(--tx2);font-size:13px}
.tree-row:hover{background:var(--hover);color:var(--tx)}
.tree-row.on{background:rgba(123,104,238,.18);color:var(--tx);font-weight:600}
.tree-row .caret{width:13px;color:var(--mut);font-size:9px;transition:transform .15s;flex:none}
.tree-row .caret.open{transform:rotate(90deg)}
.tree-row .sq{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;font-size:9px;color:#fff;flex:none}
.tree-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree-row .ct{margin-left:auto;font-size:10.5px;color:var(--mut)}
.tree-row .add{margin-left:auto;color:var(--mut);opacity:0;font-size:14px;padding:0 4px}
.tree-row:hover .add{opacity:1}
.tree-row:hover .add + .ct{display:none}
.tree-kids{margin-left:11px;border-left:1px solid var(--line2);padding-left:5px}
.side-foot{border-top:1px solid var(--line);padding:9px}
.me-row{display:flex;align-items:center;gap:9px;padding:7px;border-radius:var(--r);cursor:pointer}
.me-row:hover{background:var(--hover)}
.me-row .nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-row .rl{font-size:10.5px;color:var(--mut)}

/* --- main --- */
.main{display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.topbar{height:48px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.crumb{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--tx2)}
.crumb b{color:var(--tx);font-weight:700;font-size:14.5px}
.crumb .sep{color:var(--mut)}
.tb-sp{flex:1}
.search{display:flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px;width:220px}
.search input{background:none;border:none;outline:none;width:100%;font-size:13px}
.search:focus-within{border-color:var(--brand)}
.tb-btn{height:31px;padding:0 11px;border-radius:var(--r);color:var(--tx2);font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent}
.tb-btn:hover{background:var(--hover);color:var(--tx)}
.tb-btn.out{border-color:var(--line);background:var(--panel)}
.btn{padding:8px 14px;border-radius:var(--r);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;border:1px solid transparent}
.btn.pri{background:var(--brand);color:#fff}
.btn.pri:hover{background:#6a58e0}
.btn.gho{border-color:var(--line);background:var(--panel);color:var(--tx2)}
.btn.gho:hover{background:var(--hover);color:var(--tx)}
.btn.dan{background:var(--red);color:#fff}
.btn.sm{padding:5px 10px;font-size:12px}

/* view tabs */
.vtabs{display:flex;align-items:center;gap:2px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--bg);height:40px}
.vtab{padding:0 12px;height:30px;display:inline-flex;align-items:center;gap:6px;border-radius:6px;color:var(--mut);font-size:12.5px;font-weight:600}
.vtab:hover{background:var(--hover);color:var(--tx2)}
.vtab.on{background:var(--panel2);color:var(--tx)}
.vtab .em{font-size:13px}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:7px;padding:9px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer}
.chip:hover{border-color:var(--brand);color:var(--tx)}
.chip.on{background:rgba(123,104,238,.16);border-color:var(--brand);color:var(--tx)}
.chip select{background:none;border:none;outline:none;font-weight:600;font-size:12px;cursor:pointer}
.content{flex:1;overflow:auto}
.pad{padding:16px}

/* ================= LIST VIEW ================= */
.grp{margin-bottom:18px}
.grp-head{display:flex;align-items:center;gap:9px;padding:6px 16px;position:sticky;top:0;background:var(--bg);z-index:5}
.grp-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#fff}
.grp-head .n{color:var(--mut);font-size:12px;font-weight:700}
.grp-head .caret{color:var(--mut);font-size:10px;cursor:pointer;transition:transform .15s}
.grp-head .caret.closed{transform:rotate(-90deg)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:7px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:0 10px;height:38px;border-bottom:1px solid var(--line2);font-size:13px;vertical-align:middle}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--panel2)}
.tbl td.nm{font-weight:500}
.tbl .tnm{display:flex;align-items:center;gap:8px}
.tbl .tnm .ttype{font-size:11px;flex:none}
.tbl .tnm .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-add{display:flex;align-items:center;gap:8px;padding:8px 20px;color:var(--mut);font-size:12.5px;font-weight:600;cursor:pointer}
.row-add:hover{color:var(--brand)}
.row-add input{background:none;border:none;outline:none;flex:1;font-size:13px}

.stat-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap}
.pri-flag{font-size:12px;font-weight:700}
.av{width:23px;height:23px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:800;flex:none}
.av.lg{width:34px;height:34px;font-size:12px}
.av.xl{width:44px;height:44px;font-size:15px}
.avs{display:flex}
.avs .av{margin-left:-6px;border:2px solid var(--bg)}
.avs .av:first-child{margin-left:0}
.due-chip{font-size:11.5px;color:var(--tx2);white-space:nowrap}
.due-chip.over{color:var(--red);font-weight:700}
.due-chip.today{color:var(--amber);font-weight:700}
.tagx{font-size:10.5px;padding:1px 7px;border-radius:20px;background:var(--panel2);border:1px solid var(--line);color:var(--tx2);margin-right:3px}
.mini{font-size:11px;color:var(--mut);display:inline-flex;align-items:center;gap:3px}
.bar-mini{width:52px;height:5px;background:var(--line);border-radius:5px;overflow:hidden;display:inline-block;vertical-align:middle}
.bar-mini>div{height:100%;background:var(--green);border-radius:5px}

/* ================= BOARD ================= */
.board{display:flex;gap:12px;padding:16px;align-items:flex-start;min-height:100%}
.bcol{background:var(--panel2);border-radius:var(--r-lg);width:288px;flex:none;display:flex;flex-direction:column;max-height:calc(100vh - 190px);border:1px solid var(--line2)}
.bcol-h{display:flex;align-items:center;gap:8px;padding:11px 12px 9px}
.bcol-h .n{color:var(--mut);font-size:11.5px;font-weight:700}
.bcol-h .plus{margin-left:auto;color:var(--mut);width:22px;height:22px;border-radius:5px;font-size:15px}
.bcol-h .plus:hover{background:var(--hover);color:var(--tx)}
.bcol-b{padding:0 9px 9px;overflow-y:auto;flex:1;min-height:24px}
.bcol-b.drop{background:rgba(123,104,238,.1);outline:2px dashed var(--brand);outline-offset:-4px;border-radius:var(--r)}
.kcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-bottom:8px;cursor:pointer;box-shadow:var(--sh-sm)}
.kcard:hover{border-color:var(--brand)}
.kcard.drag{opacity:.4}
.kcard .kt{font-size:13px;font-weight:500;line-height:1.4;margin-bottom:8px}
.kcard .kmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kcard .ktags{margin-bottom:7px}

/* ================= PANELS / CARDS ================= */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px}
.card .lb{font-size:11.5px;color:var(--mut);font-weight:600}
.card .big{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.card .sub{font-size:11.5px;margin-top:5px;font-weight:600}
.pnl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:14px}
.pnl h3{font-size:13.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.pnl h3 .r{margin-left:auto;font-size:11.5px;color:var(--mut);font-weight:600}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1150px){.g2,.g3{grid-template-columns:1fr}}
.brow{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.brow .l{width:150px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;overflow:hidden}
.btrack{flex:1;height:20px;background:var(--bg2);border-radius:20px;overflow:hidden;display:flex}
.bfill{height:100%;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:10.5px;font-weight:800;white-space:nowrap}
.brow .v{width:78px;text-align:right;font-size:12px;color:var(--mut);font-weight:600}
.sparks{display:flex;align-items:flex-end;gap:7px;height:120px;padding-top:16px}
.sparks .b{flex:1;background:var(--grad);border-radius:5px 5px 0 0;position:relative;min-height:3px}
.sparks .b em{position:absolute;top:-17px;width:100%;text-align:center;font-size:10.5px;font-weight:800;color:var(--tx2);font-style:normal}
.sparks .b i{position:absolute;bottom:-19px;width:100%;text-align:center;font-size:10px;color:var(--mut);font-style:normal}
.legend div{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:7px}
.legend .d{width:10px;height:10px;border-radius:3px}
.rec{display:flex;gap:11px;padding:12px;border-radius:var(--r);background:var(--panel2);border-left:3px solid var(--brand);margin-bottom:9px;align-items:flex-start}
.rec.critical{border-color:var(--red);background:rgba(239,68,68,.08)}
.rec.warn{border-color:var(--amber);background:rgba(245,158,11,.07)}
.rec.good{border-color:var(--green);background:rgba(34,197,94,.07)}
.rec .ttl{font-weight:700;font-size:13px;margin-bottom:2px}
.rec .dt{font-size:12px;color:var(--tx2);line-height:1.5}
.rec .go{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand);white-space:nowrap;cursor:pointer}
.empty{text-align:center;color:var(--mut);padding:50px 20px}
.empty .e{font-size:34px;margin-bottom:8px}

/* rows (members, automations, goals, docs) */
.lrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--panel)}
.lrow:hover{border-color:var(--brand)}
.lrow .gr{flex:1;min-width:0}
.lrow .t1{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px}
.lrow .t2{font-size:11.5px;color:var(--mut);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:10px;font-weight:800;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
.sw{position:relative;width:38px;height:21px;border-radius:20px;background:var(--line);cursor:pointer;flex:none;transition:background .18s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:transform .18s}
.sw.on{background:var(--green)}
.sw.on::after{transform:translateX(17px)}

/* ================= MODAL ================= */
.mbg{position:fixed;inset:0;background:rgba(6,6,10,.62);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:150;padding:22px}
.mbg.on{display:flex}
.mod{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:900px;max-width:97vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}
.mod.sm{width:520px}
.mod-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mod-h .ti{font-size:15px;font-weight:700;flex:1}
.mod-b{padding:18px;overflow-y:auto;flex:1}
.mod-f{display:flex;gap:9px;padding:13px 18px;border-top:1px solid var(--line);align-items:center}
.mod-f .del{color:var(--red);margin-right:auto;font-weight:600;cursor:pointer;font-size:12.5px}
.x{font-size:20px;color:var(--mut);cursor:pointer;line-height:1;padding:2px 6px;border-radius:5px}
.x:hover{background:var(--hover);color:var(--tx)}
.tsplit{display:grid;grid-template-columns:1fr 292px;overflow:hidden;flex:1}
@media(max-width:820px){.tsplit{grid-template-columns:1fr}}
.tmain{padding:16px 18px;overflow-y:auto}
.tside{padding:14px;overflow-y:auto;background:var(--panel2);border-left:1px solid var(--line)}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:800;margin-bottom:5px}
.inp,.fld input,.fld select,.fld textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);outline:none;font-size:13px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.inp:focus{border-color:var(--brand)}
.fld textarea{min-height:80px;resize:vertical;line-height:1.6}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:18px 0 9px;display:flex;align-items:center;gap:8px}
.sec .c{background:var(--panel2);padding:0 6px;border-radius:5px;color:var(--tx2)}
.tname{font-size:19px;font-weight:700;border:none;background:none;outline:none;width:100%;letter-spacing:-.01em}
.chk{display:flex;align-items:center;gap:9px;padding:5px 0}
.chk input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex:none}
.chk .t{flex:1;font-size:13px}
.chk .t.dn{text-decoration:line-through;color:var(--mut)}
.chk .rm{color:var(--mut);opacity:0;cursor:pointer;font-size:13px}
.chk:hover .rm{opacity:1}
.addl{display:flex;gap:7px;margin-top:5px}
.addl input{flex:1;padding:7px 10px;border:1px dashed var(--line);border-radius:var(--r);background:none;outline:none;font-size:12.5px}
.prog{height:5px;background:var(--bg2);border-radius:5px;overflow:hidden;margin-bottom:9px}
.prog>div{height:100%;background:var(--green)}
.pick{display:flex;flex-wrap:wrap;gap:5px}
.pk{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:20px;border:1px solid var(--line);cursor:pointer;font-size:12px;font-weight:600}
.pk.on{border-color:var(--brand);background:rgba(123,104,238,.16)}
.cmt{display:flex;gap:9px;margin-bottom:12px}
.cmt .bd{flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);padding:9px 11px}
.cmt .who{font-weight:700;font-size:12.5px}
.cmt .when{font-size:10.5px;color:var(--mut);margin-left:6px}
.cmt .tx{font-size:13px;line-height:1.55;margin-top:3px}
.mention{color:var(--brand);font-weight:700}
.dep{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:5px;font-size:12.5px}
.dep.blk{border-color:var(--red)}
.dep .rm{margin-left:auto;color:var(--mut);cursor:pointer}
.tmr{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:11px;margin-bottom:13px}
.tmr .rw{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.tmr .big{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}

/* ================= AI PANEL ================= */
.aip{position:fixed;top:0;right:0;width:410px;max-width:95vw;height:100vh;background:var(--panel);border-left:1px solid var(--line);z-index:160;display:flex;flex-direction:column;transform:translateX(101%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow)}
.aip.on{transform:none}
.aip-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.aip-h .lg{width:30px;height:30px;border-radius:8px;background:var(--grad);display:grid;place-items:center;color:#fff}
.aip-b{flex:1;overflow-y:auto;padding:14px 16px}
.aip-f{padding:12px;border-top:1px solid var(--line);display:flex;gap:7px}
.aip-f input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);outline:none;font-size:13px}
.aip-f button{width:40px;border-radius:var(--r);background:var(--brand);color:#fff}
.sug{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sug div{padding:6px 11px;border-radius:20px;border:1px solid var(--line);font-size:11.5px;font-weight:600;cursor:pointer;color:var(--tx2)}
.sug div:hover{border-color:var(--brand);color:var(--tx)}
.msg{margin-bottom:13px;font-size:13px}
.msg .bb{padding:10px 13px;border-radius:12px;line-height:1.6;white-space:pre-wrap}
.msg.u{text-align:right}
.msg.u .bb{background:var(--brand);color:#fff;display:inline-block;text-align:left;border-bottom-right-radius:4px}
.msg.a .bb{background:var(--panel2);border:1px solid var(--line2);border-bottom-left-radius:4px}
.prop{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r);margin-bottom:5px;font-size:12.5px}

/* dropdown */
.dd{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);z-index:170;min-width:210px;padding:5px;display:none;max-height:400px;overflow-y:auto}
.dd.on{display:block}
.dd-i{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:13px}
.dd-i:hover{background:var(--hover)}
.dd-sec{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:800;padding:8px 10px 4px}
.ovl{position:fixed;inset:0;z-index:140;display:none}
.ovl.on{display:block}

/* notifications */
.ntf{display:flex;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line2);cursor:pointer}
.ntf:hover{background:var(--hover)}
.ntf.un{background:rgba(123,104,238,.09)}
.ntf .ni{width:30px;height:30px;border-radius:8px;background:var(--panel2);display:grid;place-items:center;flex:none}
.ntf .nw{font-size:10.5px;color:var(--mut);margin-top:2px}

/* toast */
#toasts{position:fixed;bottom:18px;right:18px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r);padding:11px 14px;box-shadow:var(--shadow);font-size:12.5px;min-width:250px;animation:slidein .25s}
.toast.err{border-left-color:var(--red)}
.toast.info{border-left-color:var(--blue)}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}

/* timeline / gantt */
.gantt{overflow-x:auto;padding-bottom:8px}
.gt-head{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}
.gt-lbl{width:210px;flex:none;padding:7px 10px;font-size:10.5px;text-transform:uppercase;color:var(--mut);font-weight:700}
.gt-day{width:34px;flex:none;text-align:center;font-size:10px;color:var(--mut);padding:7px 0;border-left:1px solid var(--line2)}
.gt-day.we{background:var(--panel2)}
.gt-day.td{background:rgba(123,104,238,.18);color:var(--tx);font-weight:800}
.gt-row{display:flex;align-items:center;border-bottom:1px solid var(--line2);height:34px}
.gt-row:hover{background:var(--panel2)}
.gt-name{width:210px;flex:none;padding:0 10px;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:7px}
.gt-track{display:flex;position:relative;flex:1}
.gt-cell{width:34px;flex:none;height:34px;border-left:1px solid var(--line2)}
.gt-cell.we{background:var(--panel2)}
.gt-bar{position:absolute;height:18px;top:8px;border-radius:5px;display:flex;align-items:center;padding:0 7px;font-size:10.5px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;cursor:pointer}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .hd{font-size:10.5px;text-transform:uppercase;color:var(--mut);font-weight:700;text-align:center;padding:5px}
.cal .cell{min-height:96px;border:1px solid var(--line2);border-radius:var(--r);padding:6px;background:var(--panel)}
.cal .cell.today{border-color:var(--brand);background:rgba(123,104,238,.07)}
.cal .cell .dn{font-size:11px;font-weight:700;color:var(--mut);margin-bottom:4px}
.cal .ev{font-size:10.5px;padding:2px 6px;border-radius:4px;margin-bottom:3px;background:var(--panel2);border-left:3px solid var(--blue);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* permission matrix */
.pm{width:100%;border-collapse:collapse;font-size:12.5px}
.pm th{text-align:left;padding:8px;border-bottom:1px solid var(--line);font-size:10.5px;text-transform:uppercase;color:var(--mut);font-weight:800}
.pm td{padding:7px 8px;border-bottom:1px solid var(--line2)}
.pm td.c{text-align:center}
.pm input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
.pm tr.grp td{background:var(--panel2);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2)}

/* ============================================================
   RESPONSIVE — one layout that survives any screen
   The app is a three-column grid (rail · sidebar · work area).
   As the screen narrows we give up columns in order of least
   value, rather than letting everything squash.
   ============================================================ */

/* Anything that can overflow horizontally scrolls inside itself,
   so the page body never gets a sideways scrollbar. */
html,body{max-width:100%;overflow-x:hidden}
.tbl-scroll,.pad>table,.pnl>table{max-width:100%;overflow-x:auto}
img,video,canvas,svg{max-width:100%}

/* ---------- laptops / small desktops ---------- */
@media(max-width:1280px){
  :root{--side-w:220px}
  .search{width:170px}
}

/* ---------- tablets ---------- */
@media(max-width:1024px){
  :root{--rail-w:52px; --side-w:200px}
  .pad{padding:12px}
  .f2{grid-template-columns:1fr}          /* paired fields stack */
  .tsplit{grid-template-columns:1fr}      /* task modal: one column */
  .mod{width:100%}
  /* tables get wide — let them scroll rather than crush the columns */
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .tbl thead,.tbl tbody{display:table;width:100%;min-width:720px}
}

/* ---------- phones & narrow windows ---------- */
@media(max-width:760px){
  /* The sidebar becomes a drawer that slides over the work area,
     so the actual content keeps the full width. */
  #app{grid-template-columns:var(--rail-w) 1fr}
  .side{position:fixed;left:var(--rail-w);top:0;bottom:0;width:262px;z-index:120;
    transform:translateX(-105%);transition:transform .22s ease;box-shadow:var(--shadow)}
  #app.side-open .side{transform:none}
  #app.side-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:110}
  #app.side-collapsed{grid-template-columns:var(--rail-w) 1fr}

  .topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
  .search{width:100%;order:3}
  .crumb{font-size:12.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .vtabs{overflow-x:auto;height:auto;padding:4px 10px}
  .vtabs::-webkit-scrollbar{display:none}

  .rail span{display:none}               /* icon-only rail */
  .rail{--rail-w:52px}

  .mbg{padding:0}
  .mod{width:100%;max-width:100%;max-height:100vh;border-radius:0;border:none}
  .bulkbar{flex-wrap:wrap;gap:6px}
  .pnl{padding:14px}
  .lg-card{padding:24px 20px}
}

/* ---------- very small phones ---------- */
@media(max-width:420px){
  :root{--rail-w:46px}
  .pad{padding:10px}
  .boot-mark{width:62px;height:62px}
  .bulkbar button{flex:1 1 auto}
}

/* ---------- very large screens ---------- */
/* Don't let a single column of text stretch to 3000px — it becomes
   unreadable. The work area itself still fills the screen. */
@media(min-width:1900px){
  :root{--side-w:290px}
  .pad{padding:20px 26px}
  .pnl{max-width:1500px}
}

/* ---------- short screens (laptops with the browser bar) ---------- */
@media(max-height:680px){
  .mod{max-height:96vh}
  .boot-mark{width:58px;height:58px;margin-bottom:14px}
}

/* Touch screens: make the tap targets big enough to actually hit. */
@media(hover:none){
  .tree-row,.s-item,.lrow{min-height:40px}
  .pw-eye{width:36px;height:36px}
  .tbl td{height:44px}
}

/* the drawer toggle only exists where the sidebar is a drawer */
.menu-btn{display:none;font-size:17px;padding:4px 9px;line-height:1}
@media(max-width:760px){ .menu-btn{display:inline-block} }

/* ============================================================
   NATIVE CONTROLS — make the browser's own widgets follow the theme
   Dropdown popups, autofilled inputs, date pickers and scrollbars are
   painted by the browser, not by us. Without this they stay light and
   look broken on the dark theme.
   ============================================================ */
:root,:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* The open <select> list. color-scheme handles most browsers; these two
   rules cover the ones that don't. */
select{background:var(--bg2);color:var(--tx)}
select option,select optgroup{background:var(--panel);color:var(--tx)}

/* Chrome paints autofilled fields with its own near-white background and
   ignores background-color. A large inset shadow is the only way to override
   it, and -webkit-text-fill-color is the only way to set the text colour. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--tx);
  -webkit-box-shadow:0 0 0 1000px var(--bg2) inset;
  box-shadow:0 0 0 1000px var(--bg2) inset;
  caret-color:var(--tx);
  transition:background-color 9999s ease-out 0s;   /* stop the yellow flash */
}
.lg-card input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--bg2) inset}

/* Date and time fields hide their picker icon on dark backgrounds */
:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.65)
}

/* ---------- @mention picker ---------- */
.mention-box{position:absolute;bottom:calc(100% + 8px);left:0;right:96px;
  max-height:262px;overflow:auto;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:5px}
.mn-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer}
.mn-row .gr{min-width:0;flex:1}
.mn-row .t1{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-row .t2{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-row:hover,.mn-row.on{background:var(--hover)}
.mn-row.on{box-shadow:inset 2px 0 0 var(--brand)}
.mn-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel2);font-size:13px;flex:none}
@media(max-width:760px){ .mention-box{right:0} }

/* ---------- inbox tabs ---------- */
.ib-tabs{display:flex;align-items:center;gap:6px;margin-bottom:14px;
  border-bottom:1px solid var(--line);padding-bottom:8px;overflow-x:auto}
.ib-tab{padding:6px 11px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--tx2);white-space:nowrap}
.ib-tab:hover{background:var(--hover)}
.ib-tab.on{background:var(--panel2);color:var(--tx);box-shadow:inset 0 -2px 0 var(--brand)}
.ib-n{display:inline-block;min-width:17px;padding:0 5px;border-radius:9px;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;text-align:center}

/* ---------- quoted reply ---------- */
.msg-quote{display:flex;gap:7px;align-items:baseline;margin:2px 0 4px;padding:4px 9px;
  border-left:2px solid var(--brand);background:var(--panel2);border-radius:0 7px 7px 0;
  cursor:pointer;max-width:640px}
.msg-quote:hover{background:var(--hover)}
.msg-quote .qa{font-size:11.5px;font-weight:700;color:var(--brand);flex:none}
.msg-quote .qt{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the composer's "replying to" bar */
.reply-bar{display:flex;gap:9px;align-items:center;margin-bottom:8px;padding:7px 11px;
  background:var(--panel2);border-left:2px solid var(--brand);border-radius:0 8px 8px 0}
.reply-bar .rb-i{color:var(--brand);font-size:14px}
.reply-bar .rb-who{font-size:11.5px;font-weight:700;color:var(--brand)}
.reply-bar .rb-tx{font-size:12px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* jumping to a quoted message flashes it so the eye finds it */
.msg-flash{animation:msgFlash 1.4s ease-out}
@keyframes msgFlash{
  0%,40%{background:color-mix(in srgb, var(--brand) 22%, transparent)}
  100%{background:transparent}
}

/* ---------- channel header ---------- */
.ch-head{border-bottom:1px solid var(--line)}
.ch-top{display:flex;align-items:center;gap:7px;padding:10px 18px 6px}
.ch-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.ch-ico{width:28px;height:28px;border-radius:7px;color:var(--mut);font-size:14px;
  display:inline-grid;place-items:center;flex:none}
.ch-ico:hover{background:var(--hover);color:var(--tx)}
.ch-ico.on{color:var(--amber)}
.ch-act{padding:5px 10px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--tx2)}
.ch-act:hover{background:var(--hover);color:var(--tx)}
.ch-sub{display:flex;align-items:center;gap:9px;padding:0 18px 8px}
.ch-tab{font-size:12.5px;font-weight:700;padding:4px 2px;color:var(--tx);
  box-shadow:inset 0 -2px 0 var(--brand)}

/* ---------- composer ---------- */
.cmp{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:9px 11px;transition:border-color .15s}
.cmp:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(123,104,238,.14)}
.cmp-in{width:100%;border:none;background:none;outline:none;font-size:13.5px;
  padding:5px 2px 8px;color:var(--tx)}
.cmp-bar{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.cmp-b{width:29px;height:29px;border-radius:7px;font-size:14px;color:var(--mut);
  display:inline-grid;place-items:center;flex:none}
.cmp-b:hover{background:var(--hover);color:var(--tx)}
.cmp-sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.cmp-type{height:28px;border:1px solid var(--line);border-radius:7px;background:var(--bg2);
  font-size:12px;padding:0 6px;color:var(--tx2);cursor:pointer}
.mn-head{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--mut);padding:6px 9px 3px}

/* emoji picker */
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:5px}
.eg{font-size:22px;padding:7px;text-align:center;border-radius:8px;cursor:pointer}
.eg:hover{background:var(--hover)}

@media(max-width:760px){
  .ch-act span,.ch-act{font-size:11.5px;padding:5px 7px}
  .cmp-bar{gap:1px}
}

/* ---------- per-person view settings ---------- */
.vs-list{display:flex;flex-wrap:wrap;gap:6px;min-height:38px;padding:7px;
  border:1px dashed var(--line);border-radius:9px}
.vs-off{opacity:.85}
.vs-c{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:7px;
  background:var(--panel2);border:1px solid var(--line);font-size:12.5px;cursor:grab;user-select:none}
.vs-off .vs-c{cursor:pointer;background:transparent;border-style:dashed;color:var(--mut)}
.vs-off .vs-c:hover{color:var(--tx);border-color:var(--brand)}
.vs-c.dragging{opacity:.45}
.vs-c .vs-h{color:var(--mut);font-size:11px;letter-spacing:-1px}
.vs-c .vs-x{color:var(--mut);font-size:12px;cursor:pointer;padding:0 1px}
.vs-c .vs-x:hover{color:var(--red)}
.vs-d.on{border-color:var(--brand);color:var(--brand)}

/* row density — the person's own choice, per screen */
.dens-compact .tbl td{height:30px;padding:0 8px}
.dens-compact .tbl th{padding:5px 8px}
.dens-normal  .tbl td{height:38px}
.dens-roomy   .tbl td{height:50px;padding:0 12px}
.dens-roomy   .tbl th{padding:9px 12px}

/* ---------- dependencies / blocked ---------- */
.dep-banner{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:9px;margin-bottom:8px}
.dep-banner.blocked{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35)}
.dep-banner.clear{background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.3)}
.dep-banner .db-i{font-size:15px}
.dep-banner .db-t{font-size:12.5px;font-weight:700}
.dep-banner .db-s{font-size:11.5px;color:var(--mut);margin-top:1px}
.dep-row{display:flex;gap:9px;align-items:center;padding:6px 9px;border-radius:8px;
  border:1px solid var(--line);margin-bottom:5px;background:var(--panel2)}
.dep-row.blk{border-color:rgba(239,68,68,.35)}
.dep-row .dr-i{font-size:13px;flex:none}
.dep-row .gr{flex:1;min-width:0}
.dep-row .t1{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dep-row .t2{font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dep-row .dr-go,.dep-row .rm{color:var(--mut);cursor:pointer;font-size:12px;padding:0 3px;flex:none}
.dep-row .dr-go:hover{color:var(--brand)} .dep-row .rm:hover{color:var(--red)}
.dep-sub{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--mut);margin:12px 0 6px}
.blk-pill{font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;
  background:rgba(239,68,68,.16);color:#ef4444;flex:none}

/* ---------- all channels table ---------- */
.ch-tbl td{height:auto;padding:9px 10px;vertical-align:top}
.ch-tbl .c{text-align:center}
.ch-tbl .foll{white-space:nowrap}

/* ============================================================
   Home group, settings shell and the new pages
   ============================================================ */

/* ---- sidebar header extras ---- */
.side-top .ico-sm.new{background:var(--brand);color:#fff;font-weight:800;font-size:15px}
.side-find{padding:0 10px 8px}
.side-find input{width:100%;background:var(--bg2);border:1px solid var(--bd);color:var(--tx);
  border-radius:8px;padding:7px 10px;font-size:13px;outline:none}
.side-find input:focus{border-color:var(--brand)}
.side-chips{display:flex;gap:6px;padding:0 10px 8px;flex-wrap:wrap}
.s-item.cust{justify-content:center;background:var(--bg2);border:1px solid var(--bd);border-radius:9px}

/* ---- sub-tabs (Replies, Assigned Comments, Drafts) ---- */
.sub-tabs{display:flex;gap:20px;border-bottom:1px solid var(--bd);margin-bottom:16px}
.sub-tab{background:none;border:none;color:var(--mut);font:inherit;font-size:13.5px;font-weight:600;
  padding:9px 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
  display:flex;align-items:center;gap:6px}
.sub-tab:hover{color:var(--tx)}
.sub-tab.on{color:var(--tx);border-bottom-color:var(--tx)}

/* ---- chip row (filters) ---- */
.chip-row{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.chip{background:var(--bg2);border:1px solid var(--bd);color:var(--tx2);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:600;cursor:pointer;outline:none;
  font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--brand);color:var(--tx)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.sm{padding:3px 10px;font-size:11.5px}
select.chip{appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
input.chip{cursor:text;min-width:120px}
.chip-in{background:var(--bg2);border:1px solid var(--bd);color:var(--tx);border-radius:999px;
  padding:6px 14px;font-size:12.5px;outline:none;min-width:200px;font-family:inherit}
.chip-in:focus{border-color:var(--brand)}
.big-search{width:100%;background:var(--bg2);border:1px solid var(--bd);color:var(--tx);
  border-radius:10px;padding:12px 16px;font-size:14px;outline:none;margin-bottom:18px;font-family:inherit}
.big-search:focus{border-color:var(--brand)}

/* ---- big centred empty state ---- */
.big-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:70px 20px;gap:10px}
.be-ic{width:56px;height:56px;border-radius:14px;background:var(--bg2);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:6px}
.be-t{font-size:17px;font-weight:700}
.be-s{font-size:13px;color:var(--mut);max-width:420px;line-height:1.6}
.big-empty .btn{margin-top:8px}

/* ---- two-column pages (All Spaces, Settings) ---- */
.two-col{display:flex;height:100%;overflow:hidden}
.tc-main{flex:1;min-width:0;overflow:auto}
.tc-side{width:290px;border-left:1px solid var(--bd);padding:18px;overflow:auto;flex-shrink:0}
.tc-sh{font-size:15px;font-weight:700;margin-bottom:2px}
.tc-bar{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--bd)}
.tc-ttl{font-size:13.5px;font-weight:600;color:var(--tx2)}
.tc-nav{width:250px;border-right:1px solid var(--bd);padding:14px 10px;overflow:auto;flex-shrink:0;
  display:flex;flex-direction:column}
.tc-nav-h{font-size:15px;font-weight:700;padding:0 8px 12px}
.tc-nav-g{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.06em;
  text-transform:uppercase;padding:14px 8px 6px}
.tc-nav .s-item.logout{margin-top:auto;border-top:1px solid var(--bd);padding-top:12px;border-radius:0}
.vs-row{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13px}

/* ---- All Channels table ---- */
.ch-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ch-tbl th{text-align:left;font-size:11.5px;font-weight:600;color:var(--mut);
  padding:8px 10px;border-bottom:1px solid var(--bd)}
.ch-tbl td{padding:12px 10px;border-bottom:1px solid var(--bd);vertical-align:middle}
.ch-tbl tr:hover td{background:var(--bg2)}
.ch-tbl tbody tr{cursor:pointer}
.ch-sq{width:30px;height:30px;border-radius:8px;background:var(--bg2);border:1px solid var(--bd);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}

/* ---- Inbox ---- */
.ib{display:flex;flex-direction:column;height:100%;overflow:hidden}
.ib-top{display:flex;border-bottom:1px solid var(--bd);flex-shrink:0}
.ib-top-t{flex:1;background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  color:var(--mut);font:inherit;font-size:13.5px;font-weight:600;padding:16px 20px;cursor:pointer;
  display:flex;align-items:center;gap:9px;text-align:left}
.ib-top-t .ic{opacity:.8}
.ib-top-t:hover{color:var(--tx);background:var(--bg2)}
.ib-top-t.on{color:var(--tx);border-bottom-color:var(--tx)}
.ib-bar{display:flex;align-items:center;gap:8px;padding:10px 20px;flex-shrink:0}
.ib-body{flex:1;overflow:auto;padding:0 20px 20px}
.ib-day{font-size:11.5px;font-weight:700;color:var(--mut);text-transform:uppercase;
  letter-spacing:.05em;padding:16px 0 6px}
.ib-acts{display:flex;gap:4px;opacity:0;transition:opacity .12s}
.ntf:hover .ib-acts{opacity:1}

/* ---- Imports / Exports ---- */
.ie-h{font-size:12.5px;font-weight:600;color:var(--mut);margin:6px 0 10px}
.ie-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--bd);
  border-radius:10px;margin-bottom:8px;cursor:pointer;background:var(--bg2)}
.ie-row:hover{border-color:var(--brand)}
.ie-ic{width:26px;text-align:center;font-size:16px;flex-shrink:0}
.ie-tag{font-size:11.5px;color:var(--mut);white-space:nowrap}

/* ---- preference rows and switches ---- */
.pref-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--bd);font-size:13.5px}
.pref-row:last-child{border-bottom:none}
.pref-row select{background:var(--bg2);border:1px solid var(--bd);color:var(--tx);
  border-radius:7px;padding:5px 9px;font-size:12.5px;outline:none;font-family:inherit}
.sw{position:relative;display:inline-block;width:38px;height:21px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw span{position:absolute;inset:0;background:var(--bd);border-radius:999px;
  cursor:pointer;transition:background .15s}
.sw span:before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform .15s}
.sw input:checked + span{background:var(--brand)}
.sw input:checked + span:before{transform:translateX(17px)}
.sw-row{display:inline-flex;align-items:center;font-size:13px}

/* ---- Customize dialog ---- */
.seg{display:flex;background:var(--bg2);border-radius:9px;padding:3px;gap:2px}
.seg-b{flex:1;background:none;border:none;color:var(--mut);font:inherit;font-size:12.5px;
  font-weight:600;padding:7px 10px;border-radius:7px;cursor:pointer}
.seg-b:hover{color:var(--tx)}
.seg-b.on{background:var(--bg);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.drag-list{display:flex;flex-direction:column;gap:8px}
.drag-row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg2);
  border:1px solid var(--bd);border-radius:9px;font-size:13.5px;font-weight:600;cursor:grab}
.drag-row.dragging{opacity:.4}
.drag-row.over{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset}
.drag-row.off{cursor:default;background:none}
.drag-row .grip{color:var(--mut);cursor:grab;font-size:14px}
.drag-row button{opacity:0}
.drag-row:hover button{opacity:1}
.appr{border:2px solid var(--bd);border-radius:10px;padding:10px;cursor:pointer;text-align:center;width:120px}
.appr.on{border-color:var(--tx)}
.appr-p{background:var(--bg2);border-radius:6px;padding:9px;display:flex;flex-direction:column;
  gap:5px;margin-bottom:7px;min-height:56px}
.appr-p i{height:7px;background:var(--bd);border-radius:3px;width:22px}
.appr-p.wide i{width:100%}
.appr-p.light{background:#f1f1f5}
.appr-p.light i{background:#c9c9d4}
.acc-dot{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.acc-dot:hover{border-color:var(--tx)}

/* ---- pin marks in menus ---- */
.pin{opacity:0;font-size:12px;cursor:pointer;filter:grayscale(1);flex-shrink:0}
.dd-i:hover .pin{opacity:.55}
.pin:hover{opacity:1 !important}
.pin.on{opacity:1;filter:none}
.dd-sep{height:1px;background:var(--bd);margin:6px 0}
.acc-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px;border-bottom:1px solid var(--bd)}

/* ---- quick create ---- */
.qc-tabs{display:flex;gap:20px;border-bottom:1px solid var(--bd);margin:-4px 0 0}
.qc-tab{background:none;border:none;color:var(--mut);font:inherit;font-size:13.5px;font-weight:600;
  padding:10px 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.qc-tab:hover{color:var(--tx)}
.qc-tab.on{color:var(--tx);border-bottom-color:var(--brand)}
.qc-name{width:100%;background:none;border:none;border-bottom:1px solid var(--bd);color:var(--tx);
  font-size:17px;font-weight:600;padding:8px 0;outline:none;margin-bottom:12px;font-family:inherit}
.qc-name:focus{border-bottom-color:var(--brand)}
.qc-desc{width:100%;background:none;border:none;color:var(--tx2);font-size:13.5px;
  padding:4px 0;outline:none;min-height:54px;resize:vertical;margin-bottom:12px;font-family:inherit}
.qc-foot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--bd);
  padding-top:14px;margin-top:14px}
.qc-opts{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.qc-opt{padding:7px 10px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--tx2)}
.qc-opt:hover{background:var(--bg2);color:var(--tx)}
.qc-opt.on{background:var(--bg2);color:var(--tx);font-weight:600}

/* ---- resolved comments ---- */
.cmt.done .bd{opacity:.7}

/* ---- narrow screens ---- */
@media (max-width:900px){
  .tc-side{display:none}
  .tc-nav{width:190px}
  .ib-top-t{padding:13px 10px;font-size:12.5px}
  .ib-top-t .ic{display:none}
  .ch-tbl th:nth-child(2),.ch-tbl td:nth-child(2){display:none}
}
@media (max-width:640px){
  .two-col{flex-direction:column}
  .tc-nav{width:100%;border-right:none;border-bottom:1px solid var(--bd);max-height:190px}
  .ch-tbl th:nth-child(3),.ch-tbl td:nth-child(3){display:none}
  .big-empty{padding:44px 16px}
}

/* ---- project heading on All Tasks ---- */
.prj-head{padding:18px 4px 2px}
.prj-sp{font-size:11.5px;color:var(--mut);margin-bottom:2px}
.prj-n{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:700}
.prj-n .caret{color:var(--mut);font-size:11px}
.prj-more{background:none;border:none;color:var(--mut);cursor:pointer;font-size:15px;padding:0 4px;opacity:0}
.prj-head:hover .prj-more{opacity:1}

/* ---- top bar: centred search, avatar ---- */
.topbar .search .kbd{font-size:10.5px;color:var(--mut);border:1px solid var(--bd);
  border-radius:5px;padding:1px 5px;margin-left:8px;white-space:nowrap}
.tb-av{width:30px;height:30px;border-radius:50%;overflow:hidden;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.tb-av .av{width:30px;height:30px;font-size:11px}
.tree-row.new-msg{color:var(--mut)}

/* ---- command palette ---- */
.pal{margin:-8px -4px 0}
.pal-top{display:flex;align-items:center;gap:10px;padding:4px 4px 12px;border-bottom:1px solid var(--bd)}
.pal-top input{flex:1;background:none;border:none;color:var(--tx);font-size:15px;outline:none;font-family:inherit}
.pal-chips{display:flex;gap:6px;padding:10px 4px;flex-wrap:wrap;border-bottom:1px solid var(--bd)}
.pal-res{max-height:52vh;overflow:auto;padding:6px 0}
.pal-sec{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;
  letter-spacing:.05em;padding:8px 6px 4px}
.pal-row{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:8px;
  cursor:pointer;font-size:13.5px}
.pal-row:hover{background:var(--bg2)}
.pal-ic{width:18px;text-align:center;color:var(--mut);flex-shrink:0}
.pal-foot{border-top:1px solid var(--bd);padding:9px 6px 0;font-size:11.5px;color:var(--mut)}

/* ---- Skills ---- */
.sk-row{display:flex;gap:12px;overflow-x:auto;padding:16px 20px 6px}
.sk-card{min-width:212px;max-width:212px;border:1px solid var(--bd);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:7px;background:var(--bg2)}
.sk-card.tinted{background:linear-gradient(160deg,color-mix(in srgb,var(--tint) 22%,var(--bg2)),var(--bg2));
  border-color:color-mix(in srgb,var(--tint) 40%,var(--bd))}
.sk-top{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:6px;min-height:22px}
.sk-badge{width:30px;height:30px;border-radius:8px;background:var(--tint);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px}
.sk-h{font-size:14px;font-weight:700;margin-top:16px}
.sk-d{font-size:12px;color:var(--mut);line-height:1.5;flex:1}
.sk-card .btn{width:100%;justify-content:center}

/* ---- right-hand slide-in panel (Customize Inbox) ---- */
.side-panel{position:fixed;top:0;right:0;width:320px;height:100vh;background:var(--bg);
  border-left:1px solid var(--bd);z-index:70;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .18s ease;box-shadow:-8px 0 28px rgba(0,0,0,.28)}
.side-panel.on{transform:none}
.sp-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--bd)}
.sp-t{font-size:15px;font-weight:700;flex:1}
.sp-body{flex:1;overflow:auto;padding:10px 8px 20px}
.sp-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:13.5px}
.sp-row.link{cursor:pointer}
.sp-row.link:hover{background:var(--bg2)}
.sp-ic{width:18px;text-align:center;color:var(--mut);flex-shrink:0}
.sp-l{flex:1}
.sp-go{color:var(--mut)}
.sp-sec{font-size:11.5px;font-weight:600;color:var(--mut);padding:16px 10px 6px}
.sp-div{height:1px;background:var(--bd);margin:12px 6px}
.sp-modes{display:flex;gap:12px;padding:4px 10px}
.sp-mode{flex:1;cursor:pointer}
.sp-prev{border:2px solid var(--bd);border-radius:9px;background:var(--bg2);padding:12px 10px;
  display:flex;flex-direction:column;gap:5px;min-height:82px;position:relative}
.sp-mode.on .sp-prev{border-color:var(--brand)}
.sp-mode.on .sp-prev:after{content:"\2713";position:absolute;top:-8px;right:-8px;width:19px;height:19px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:11px;display:flex;
  align-items:center;justify-content:center}
.sp-prev i{height:6px;border-radius:3px;background:var(--bd)}
.sp-prev.full i:first-child{width:70%;height:9px}
.sp-prev.inline i{width:100%}
.sp-ml{font-size:12px;margin-top:7px;text-align:left}
.sp-mode.on .sp-ml{font-weight:600}

/* the inline detail that opens under an inbox row */
.ib-inline{margin:2px 0 10px 44px;padding:12px 14px;background:var(--bg2);
  border:1px solid var(--bd);border-radius:10px;font-size:13px}

@media (max-width:760px){
  .side-panel{width:100%}
}

/* ---- sidebar header: title never wraps, buttons never spill ---- */
.side-top{flex-wrap:nowrap}
.side-top h3{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:14.5px;line-height:1.3}
.side-top .ico-sm{flex:none;width:24px;height:24px;font-size:13px}
.side-top .ico-sm.new{width:26px;height:26px}

/* When the sidebar is closed, a small handle brings it back — otherwise the
   only way back is a reload. */
#sideOpen{position:fixed;left:calc(var(--rail-w) + 6px);top:12px;z-index:40;
  width:26px;height:26px;border-radius:7px;display:none;place-items:center;
  background:var(--bg2);border:1px solid var(--bd);color:var(--tx2);cursor:pointer;font-size:13px}
#sideOpen:hover{color:var(--tx);border-color:var(--brand)}
#app.side-collapsed #sideOpen{display:grid}

/* ---- a modal with nothing to save shows no footer ---- */
#gmBg.no-foot .gm-foot,
#gmBg.no-foot .modal-foot,
#gmBg.no-foot #gmOk,
#gmBg.no-foot #gmDel{display:none}
#gmBg .gm.wide,
#gmBg > div.wide{max-width:640px;width:min(640px,94vw)}

/* ---- the people picker ---- */
.dm-box{margin:-4px -2px 0}
.dm-find{display:flex;align-items:center;gap:10px;background:var(--bg2);
  border:1.5px solid var(--bd);border-radius:11px;padding:12px 14px;transition:border-color .12s}
.dm-find:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(123,104,238,.14)}
.dm-mag{opacity:.55;font-size:15px}
.dm-find input{flex:1;background:none;border:none;outline:none;color:var(--tx);
  font-size:15px;font-family:inherit}
.dm-find input::placeholder{color:var(--mut)}
.dm-hint{font-size:11.5px;color:var(--mut);white-space:nowrap}

.dm-list{margin-top:12px;max-height:min(460px,52vh);overflow-y:auto;padding-right:2px}
.dm-sec{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;
  letter-spacing:.06em;padding:12px 4px 6px}
.dm-sec:first-child{padding-top:2px}

.dm-row{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;
  cursor:pointer;border:1px solid transparent}
.dm-row:hover{background:var(--bg2)}
.dm-row.on{background:var(--bg2);border-color:var(--brand)}
.dm-who{flex:1;min-width:0}
.dm-n{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-s{font-size:12px;color:var(--mut);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-n .hl,.dm-s .hl{color:var(--brand);font-weight:800}
.dm-go{font-size:12px;color:var(--mut);white-space:nowrap;opacity:0;transition:opacity .12s}
.dm-row:hover .dm-go,.dm-row.on .dm-go{opacity:1;color:var(--brand);font-weight:600}
.dm-none{padding:40px 16px;text-align:center;color:var(--mut);font-size:13.5px;line-height:1.7}

@media (max-width:560px){
  .dm-row{padding:10px 8px;gap:10px}
  .dm-go{display:none}
}

/* ---- the alternative route on the sign-in card ---- */
.lg-alt{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--mut);font-size:11.5px}
.lg-alt:before,.lg-alt:after{content:"";flex:1;height:1px;background:var(--bd)}
.lg-btn.ghost{background:none;border:1.5px solid var(--bd);color:var(--tx)}
.lg-btn.ghost:hover{border-color:var(--brand);color:var(--tx)}
.lg-btn.ghost:disabled{opacity:.6;cursor:default}