/* ──────────────────────────────────────────────────────────────────────────
   tools.yushki — platform theme. Dark only. Warm-dark palette.
   Shell: RAIL | CONTEXT (conditional) | MAIN. No bundler — plain CSS.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* tools.yushki palette — neutral dark grey + tan accent */
  --bg-base:#1a1a1a; --bg-panel:#202020; --bg-surface:#262626; --bg-elevated:#2f2f2f;
  --bg-hover:#383838; --bg-selected:#2e2e2e; --border:#363636; --border-light:#484848;
  --text:#d2d2d2; --text-dim:#909090; --text-faint:#666666; --text-bright:#eeeeee;
  --accent:#d4a27a; --accent-2:#e0b894; --accent-dark:#a07850; --accent-glow:rgba(212,162,122,.12);
  --accent-gradient:linear-gradient(135deg,#a87a4e,#d4a27a);
  --teal:#6cb3c9; --teal-glow:rgba(108,179,201,.12); --violet:#a487d8;
  --danger:#d9645f; --success:#5bb98c; --warning:#d9a23a; --urgent:#d9637f;
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Cascadia Code','Fira Code','Consolas',monospace;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.38); --shadow-lg:0 24px 64px rgba(0,0,0,.58);
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --rail-w:78px; --col-w:256px;
  --safe-top:env(safe-area-inset-top,0px); --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px); --safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%;min-height:100dvh}
body{background:var(--bg-base);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit}
a{color:var(--teal);text-decoration:none} a:hover{text-decoration:underline}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}
.muted{color:var(--text-faint)} .hidden{display:none!important}

/* buttons / inputs */
.btn{border:1px solid var(--border);cursor:pointer;border-radius:var(--radius-sm);font-size:13px;font-weight:600;padding:8px 14px;color:var(--text);background:var(--bg-elevated);display:inline-flex;align-items:center;gap:7px;transition:background .14s,border-color .14s,transform .08s,filter .14s;white-space:nowrap}
.btn:hover{background:var(--bg-hover);border-color:var(--border-light)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent-gradient);color:#1c1611;border-color:transparent;box-shadow:0 2px 12px rgba(216,168,127,.22)} .btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-dim)} .btn-ghost:hover{background:var(--bg-hover);color:var(--text-bright)}
.btn-danger{color:var(--danger);border-color:rgba(223,107,107,.32);background:transparent} .btn-danger:hover{background:rgba(223,107,107,.12);border-color:rgba(223,107,107,.5)}
.btn-block{width:100%;justify-content:center} .btn-sm{padding:5px 10px;font-size:12px}
input,textarea,select{background:var(--bg-base);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:var(--radius-sm);font-size:14px;outline:none;width:100%;transition:border-color .15s}
input:focus,textarea:focus,select:focus{border-color:var(--accent)} input:disabled{color:var(--text-faint)}
/* checkboxes/radios must not inherit the full-width text-input styling above */
input[type=checkbox],input[type=radio]{width:16px;height:16px;flex:none;padding:0;margin:0;border:0;border-radius:0;background:none;accent-color:var(--accent);cursor:pointer}
textarea{resize:vertical} label.field{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--text-dim);text-transform:uppercase;margin-bottom:6px}
.divider{height:1px;background:var(--border);margin:2px 0}

/* ── Login ── */
.login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:max(20px,var(--safe-top)) max(20px,var(--safe-right)) max(20px,var(--safe-bottom)) max(20px,var(--safe-left));background:radial-gradient(120% 80% at 50% -10%,#241d16 0%,#151311 55%,#0f0d0b 100%)}
.login-card{width:380px;max-width:100%;background:linear-gradient(180deg,rgba(34,30,25,.9),rgba(22,20,17,.92));border:1px solid var(--border-light);border-radius:20px;padding:38px 34px 30px;box-shadow:var(--shadow-lg)}
.login-logo{font-size:22px;font-weight:800;color:var(--text-bright);text-align:center;letter-spacing:.3px;margin-bottom:4px}
.login-logo span{color:var(--accent)}
.login-sub{text-align:center;color:var(--text-faint);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:26px}
.login-card .field-row{margin-bottom:13px}
.login-err{color:var(--danger);font-size:12.5px;min-height:17px;margin:2px 0 12px;text-align:center}
.login-hint{text-align:center;color:var(--text-faint);font-size:11.5px;margin-top:16px}

/* ── Shell ── */
.shell{display:flex;height:100%}
.rail{width:var(--rail-w);flex-shrink:0;background:linear-gradient(180deg,var(--bg-panel),var(--bg-base));border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:3px;overflow-y:auto;z-index:30}
.rail::-webkit-scrollbar{width:0}
.rail-prof{background:none;border:none;cursor:pointer;padding:0;margin-bottom:12px;border-radius:50%;transition:transform .12s,box-shadow .12s;flex-shrink:0}
.rail-prof:hover{transform:scale(1.07);box-shadow:0 0 0 2px var(--accent-glow)}
.rail-item{width:60px;padding:8px 0 6px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-dim);cursor:pointer;background:none;border:none;position:relative;transition:background .14s,color .14s;flex-shrink:0}
.rail-item:hover{background:var(--bg-hover);color:var(--text-bright)}
.rail-item.active{background:var(--accent-glow);color:var(--accent)}
.rail-item.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:26px;background:var(--accent);border-radius:0 4px 4px 0;box-shadow:0 0 10px rgba(216,168,127,.5)}
.rail-item .ri-ico{font-size:19px;line-height:1} .rail-item .ri-lbl{font-size:9px;font-weight:600}
.rail-badge{position:absolute;top:4px;right:9px;min-width:16px;height:16px;background:var(--urgent);color:#fff;border-radius:8px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--bg-panel)}
.rail-div{width:34px;height:1px;background:var(--border-light);margin:7px 0;flex-shrink:0} .rail-spacer{flex:1;min-height:8px}

.context{width:var(--col-w);flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ctx-head{height:60px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint)}
.ctx-head .ch-ico{font-size:14px} .ctx-head .add{margin-left:auto;cursor:pointer;color:var(--text-faint);font-size:18px} .ctx-head .add:hover{color:var(--accent)}
.ctx-body{flex:1;overflow-y:auto;padding:10px 10px 16px}

.workspace{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} .below{flex:1;display:flex;overflow:hidden;min-width:0} #ctxslot{display:flex}
.topbar{height:60px;flex-shrink:0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--bg-surface)}
.menu-btn{display:none}
.page-title{flex:0 0 210px;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--text-bright);white-space:nowrap;overflow:hidden}
.page-title .pt-ico{font-size:16px;flex-shrink:0} .page-title .pt-name{overflow:hidden;text-overflow:ellipsis}
.search{flex:0 0 300px;margin-left:90px;display:flex;align-items:center;gap:9px;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);padding:8px 12px;color:var(--text-faint);font-size:13px;cursor:text;transition:background .15s,border-color .15s}
.search:hover{background:var(--bg-base);border-color:var(--border)} .search .kbd{margin-left:auto;font-size:10.5px;font-family:var(--font-mono);color:var(--text-faint);opacity:.5;border:1px solid var(--border);border-radius:5px;padding:1px 6px}
.topbar .spacer{flex:1}
.topbar-action{display:flex;align-items:center;gap:8px}
.clock-weather{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:12.5px;white-space:nowrap;cursor:default}
.clock-weather .cw-time{color:var(--text);font-variant-numeric:tabular-nums} .clock-weather .cw-w{color:var(--text-dim)}
.live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--text-dim);border:1px solid var(--border);border-radius:100px;padding:4px 11px 4px 9px}
.live .ldot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.8s infinite}
.live.off{color:var(--text-faint)} .live.off .ldot{background:var(--text-faint);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(92,189,152,.5)}70%{box-shadow:0 0 0 6px rgba(92,189,152,0)}100%{box-shadow:0 0 0 0 rgba(92,189,152,0)}}
.icon-btn{width:38px;height:38px;border-radius:var(--radius-sm);background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:16px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,color .12s,transform .08s}
.icon-btn:hover{background:var(--bg-hover);color:var(--text-bright)}
.icon-btn:active{transform:scale(.92)}
.icon-btn .badge-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;background:var(--urgent);border-radius:50%;border:2px solid var(--bg-surface)}

/* panes: every opened view stays mounted; we toggle visibility to keep state */
.panes{flex:1;position:relative;overflow:hidden}
.pane{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.pane[hidden]{display:none} .context[hidden]{display:none}
.scroll{flex:1;overflow-y:auto} .wrap{max-width:1280px;margin:0 auto;padding:24px 26px 64px}

/* ── Greeting / tiles ── */
.greet{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.greet h1{font-size:25px;font-weight:800;color:var(--text-bright)} .greet .sub{color:var(--text-faint);font-size:13.5px;margin-top:3px} .greet .sub b{color:var(--text-dim);font-weight:600}
.home-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start} .col{display:flex;flex-direction:column;gap:18px;min-width:0}
.tile{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.tile-head{display:flex;align-items:center;gap:10px;padding:15px 18px 12px}
.tile-head h2{font-size:15px;font-weight:700;color:var(--text-bright);display:flex;align-items:center;gap:9px}
.tile-head .count{font-size:12px;color:var(--text-faint);background:var(--bg-base);border-radius:20px;padding:1px 9px;font-weight:600}
.tile-head .link{margin-left:auto;font-size:12.5px;color:var(--text-dim);cursor:pointer} .tile-head .link:hover{color:var(--accent)}
.tile-body{padding:4px 10px 12px} .tile-body.pad{padding:14px 18px 18px}
.empty{color:var(--text-faint);text-align:center;padding:26px 16px;font-size:13px}

/* ── Tasks (rows + board) ── */
.task{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius);cursor:pointer;border:1px solid transparent;transition:background .1s,border-color .1s}
.task:hover{background:var(--bg-surface);border-color:var(--border)}
.task .stripe{width:3px;align-self:stretch;border-radius:3px;background:var(--border-light);flex-shrink:0}
.task.p-URGENT .stripe{background:var(--urgent)} .task.p-HIGH .stripe{background:var(--warning)} .task.p-NORMAL .stripe{background:var(--teal)} .task.p-LOW .stripe{background:var(--text-faint)}
.task .check{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--border-light);flex-shrink:0;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;font-size:11px;color:#1a140d}
.task .check:hover{border-color:var(--accent)} .task .check.done{background:var(--success);border-color:var(--success)}
.task .t-main{flex:1;min-width:0} .task .t-title{color:var(--text);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task.done .t-title{color:var(--text-faint);text-decoration:line-through}
.task .t-meta{display:flex;align-items:center;gap:8px;margin-top:4px}
.task .t-due{font-size:11.5px;color:var(--text-faint)} .task .t-due.soon{color:var(--warning);font-weight:600} .task .t-due.over{color:var(--urgent);font-weight:700}
.pill{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:100px;white-space:nowrap}
.pill.proj{background:var(--accent-glow);color:var(--accent)} .pill.URGENT{background:rgba(224,113,137,.2);color:var(--urgent)} .pill.HIGH{background:rgba(227,176,78,.18);color:var(--warning)} .pill.NORMAL{background:var(--teal-glow);color:var(--teal)} .pill.LOW{background:rgba(160,152,137,.16);color:var(--text-dim)}

.board{display:flex;gap:14px;padding:20px 24px 40px;align-items:flex-start;overflow-x:auto;height:100%}
.bcol{width:320px;flex-shrink:0;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-direction:column;max-height:100%}
.bcol.drop{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow)}
.bcol-head{padding:13px 16px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border)}
.bcol-head .count{margin-left:auto;color:var(--text-faint)}
.bcol-body{padding:11px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;min-height:40px;flex:1}
.bcard{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:13px 14px 13px 16px;cursor:grab;transition:border-color .14s,transform .1s,box-shadow .14s;box-shadow:var(--shadow-sm)}
.bcard:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow-md)} .bcard.dragging{opacity:.4}
.bcard::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--border-light)}
.bcard.p-URGENT::before{background:var(--urgent)} .bcard.p-HIGH::before{background:var(--warning)} .bcard.p-NORMAL::before{background:var(--teal)}
.bcard .bc-title{font-size:14px;color:var(--text-bright);margin-bottom:9px;line-height:1.4}
.bcard .bc-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ── App launcher ── */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.app-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 15px;cursor:pointer;transition:border-color .14s,transform .1s,box-shadow .14s}
.app-card:hover{border-color:var(--border-light);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.app-ico{width:44px;height:44px;border-radius:11px;background:var(--accent-glow);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.app-card .a-name{font-size:14px;font-weight:700;color:var(--text-bright);margin-bottom:3px}
.app-card .a-desc{font-size:11.5px;color:var(--text-faint);line-height:1.4;min-height:32px}
.app-card .a-kind{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-faint);margin-top:10px}
.app-card.add{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-faint);border-style:dashed;text-align:center;gap:6px;min-height:128px}
.app-card.add:hover{color:var(--accent);border-color:var(--accent)}
.pager{display:flex;justify-content:center;gap:6px;padding:8px 0 12px}
.pager .dot{width:6px;height:6px;border-radius:50%;background:var(--border-light);opacity:.5;cursor:pointer;transition:opacity .15s,background .15s}
.pager .dot.on{background:var(--accent);opacity:1} .pager .dot:hover{opacity:.85}
.pagedbody{min-height:384px}
/* top-bar info: weather High/Low + Local & California clocks (subtle) */
.tbinfo{display:flex;align-items:center;gap:14px;white-space:nowrap}
.tbinfo .tb-wx{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--text-dim);cursor:default}
.tbinfo .tb-wx b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.tbinfo .tb-wx .lo{color:var(--text-faint);font-variant-numeric:tabular-nums}
.tbinfo .tb-rain{font-size:11.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;cursor:default}
.tbinfo .tb-clk{display:inline-flex;align-items:baseline;gap:3px;font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}
.tbinfo .tb-clk i{font-style:normal;font-size:8.5px;letter-spacing:.4px;color:var(--text-faint);text-transform:uppercase}

/* ── Activity / avatars / health ── */
.act{display:flex;gap:12px;padding:10px 12px;border-radius:var(--radius-sm)} .act:hover{background:var(--bg-surface)}
.act .a-line{flex:1;min-width:0} .act .a-text{font-size:13px;color:var(--text-dim);line-height:1.45} .act .a-text b{color:var(--text-bright);font-weight:600} .act .a-text .what{color:var(--text)}
.act .a-time{font-size:11px;color:var(--text-faint);margin-top:2px} .act .a-src{font-family:var(--font-mono);font-size:10.5px}
.act .a-glyph{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--bg-elevated);color:var(--text-dim)}
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1a140d;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center}
.avatar.sm{width:30px;height:30px;font-size:12px} .avatar.md{width:38px;height:38px;font-size:14px} .avatar.xl{width:66px;height:66px;font-size:25px}
.health{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm)} .health:hover{background:var(--bg-surface)}
.status{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.status.up{background:var(--success);box-shadow:0 0 8px rgba(92,189,152,.5)} .status.degraded{background:var(--warning)} .status.down{background:var(--danger)} .status.off{background:var(--text-faint)}
.health .h-name{font-size:13.5px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.health .h-state{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.h-state.up{color:var(--success)} .h-state.degraded{color:var(--warning)} .h-state.down{color:var(--danger)} .h-state.off{color:var(--text-faint)}
.health .h-up{font-size:12px;color:var(--text-faint);font-family:var(--font-mono);width:56px;text-align:right}

/* qs banner / section head */
.qs{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,var(--accent-glow),transparent);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:18px}
.qs .qs-ico{font-size:26px} .qs .qs-main{flex:1} .qs .qs-title{font-weight:700;color:var(--text-bright)} .qs .qs-sub{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.qs .x{cursor:pointer;color:var(--text-faint);font-size:18px;padding:4px} .qs .x:hover{color:var(--text-bright)}
.sec-head{margin-bottom:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.sec-head h1{font-size:22px;font-weight:800;color:var(--text-bright)} .sec-head p{color:var(--text-faint);font-size:13px;margin-top:4px}

/* ── Calendar ── */
.cal-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cal-title{font-size:18px;font-weight:700;color:var(--text-bright);min-width:190px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);padding-bottom:4px}
.cal-cell{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:96px;padding:6px 7px;cursor:pointer;transition:border-color .12s}
.cal-cell:hover{border-color:var(--border-light)} .cal-cell.dim{opacity:.4} .cal-cell.today{border-color:var(--accent)}
.cal-date{font-size:12px;color:var(--text-dim);font-weight:600;margin-bottom:3px} .cal-cell.today .cal-date{color:var(--accent)}
.cal-chip{font-size:11px;background:var(--bg-elevated);border-left:2px solid var(--accent);border-radius:4px;padding:2px 6px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-chip.done{opacity:.5;text-decoration:line-through} .cal-chip.event{border-left-color:var(--teal)}
.agenda{max-width:680px} .agenda-day{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.agenda-date{width:120px;flex-shrink:0;text-align:right} .agenda-date .ad-num{font-size:24px;font-weight:700;color:var(--text-dim)} .agenda-date.today .ad-num{color:var(--accent)} .agenda-date .ad-lbl{font-size:11px;color:var(--text-faint)}
.agenda-items{flex:1;display:flex;flex-direction:column;gap:6px}
.agenda-item{display:flex;align-items:center;gap:10px;background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:9px 12px}
.agenda-item.event{border-left-color:var(--teal)} .agenda-item .ai-time{font-size:12px;color:var(--text-faint);font-family:var(--font-mono);width:52px} .agenda-item .ai-title{flex:1} .agenda-item.done .ai-title{text-decoration:line-through;color:var(--text-faint)}

/* ── Docs ── */
.tproj{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);padding:14px 8px 5px}
.tdoc{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-dim);font-size:13.5px}
.tdoc:hover{background:var(--bg-hover);color:var(--text)} .tdoc.active{background:var(--bg-selected);color:var(--text-bright);box-shadow:inset 0 0 0 1px var(--border)}
.tdoc .sdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--text-faint)}
.sdot.draft{background:var(--teal)} .sdot.complete{background:var(--success)} .sdot.in-progress{background:var(--warning)} .sdot.concept{background:var(--violet)}
.tdoc .t-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc{max-width:820px;margin:0 auto;padding:26px 32px 60px;line-height:1.7}
.doc h1{font-size:28px;color:var(--text-bright);margin:0 0 14px} .doc h2{font-size:20px;color:var(--text-bright);margin:26px 0 12px;border-bottom:1px solid var(--border);padding-bottom:6px} .doc h3{font-size:16px;color:var(--text-bright);margin:18px 0 8px}
.doc p{margin:0 0 12px} .doc ul,.doc ol{margin:0 0 12px 22px} .doc li{margin:4px 0}
.doc code{background:var(--bg-elevated);padding:1px 6px;border-radius:4px;font-family:var(--font-mono);font-size:13px;color:var(--accent)}
.doc pre{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:14px;overflow-x:auto;margin:0 0 12px} .doc pre code{background:none;padding:0;color:var(--text)}
.doc blockquote{border-left:3px solid var(--accent);padding:8px 14px;color:var(--text-dim);margin:0 0 12px;background:var(--bg-panel);border-radius:0 8px 8px 0}
.doc table{border-collapse:collapse;margin:0 0 12px;width:100%} .doc th,.doc td{border:1px solid var(--border);padding:6px 12px;text-align:left} .doc a{color:var(--teal)}

/* ── Chat ── */
.chan{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text-dim);cursor:pointer;font-size:14px;margin:1px 0}
.chan:hover{background:var(--bg-hover);color:var(--text)} .chan.active{background:var(--bg-selected);color:var(--text-bright);box-shadow:inset 0 0 0 1px var(--border)}
.chan .hash{color:var(--text-faint)} .chan .cname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chan .udot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.chat{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-msgs{flex:1;overflow-y:auto;padding:16px 18px 24px;display:flex;flex-direction:column;gap:13px}
.cm{display:flex;gap:12px} .cm .cm-h{display:flex;align-items:baseline;gap:8px} .cm .cm-name{font-weight:600;color:var(--text-bright);font-size:14px} .cm .cm-time{font-size:11px;color:var(--text-faint)} .cm .cm-text{color:var(--text);margin-top:1px;white-space:pre-wrap;word-break:break-word}
.composer{border-top:1px solid var(--border);padding:14px 18px}
.composer .ci{display:flex;gap:8px} .composer textarea{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;max-height:160px;min-height:44px}

/* ── App host (embedded tools) ── */
.app-host{flex:1;position:relative;min-width:0}
.app-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:var(--bg-base)} .app-frame[hidden]{display:none}
.app-actions{display:flex;align-items:center;gap:8px}
.task-proj{width:auto;background:var(--bg-base);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);padding:5px 8px;font-size:12px}

/* ── Task multi-project picker (chips in the new/edit-task modal) ── */
.proj-pick{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.proj-chip{background:var(--bg-base);border:1px solid var(--border);color:var(--text-dim);border-radius:100px;padding:5px 12px;font-size:12px;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.proj-chip:hover{border-color:var(--border-light);color:var(--text)}
.proj-chip.on{background:var(--accent-glow);border-color:var(--accent-dark);color:var(--accent);font-weight:600}
.proj-empty{color:var(--text-faint);font-size:12.5px;padding:4px 0}
.proj-add{display:flex;gap:8px} .proj-add input{flex:1} .proj-add .btn{flex:none}
.app-fallback{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--text-faint);text-align:center;padding:40px}
.app-fallback .big{font-size:44px;opacity:.5}

/* ── Admin ── */
.admin-table{width:100%;border-collapse:collapse;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.admin-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);padding:13px 16px;border-bottom:1px solid var(--border);background:var(--bg-base)}
.admin-table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle} .admin-table tr:last-child td{border-bottom:none} .admin-table tr:hover td{background:var(--bg-surface)}
.u-cell{display:flex;align-items:center;gap:11px} .u-cell .u-n{font-weight:600;color:var(--text-bright)} .u-cell .u-h{font-size:11.5px;color:var(--text-faint)}
.role{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.role.owner{background:var(--accent-glow);color:var(--accent)} .role.admin{background:var(--teal-glow);color:var(--teal)} .role.member{background:rgba(160,152,137,.16);color:var(--text-dim)}
.grants{display:flex;flex-wrap:wrap;gap:5px} .grant{font-size:10.5px;padding:2px 8px;border-radius:6px;border:1px solid var(--border);color:var(--text-dim)} .grant.edit{border-color:var(--accent-dark);color:var(--accent)} .grant.use{color:var(--text)} .grant.none{opacity:.4;text-decoration:line-through}
.grant-edit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--border)} .grant-edit:last-child{border-bottom:none}
.seg{display:inline-flex;background:var(--bg-base);border:1px solid var(--border);border-radius:8px;padding:2px}
.seg button{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600} .seg button.on{background:var(--bg-elevated);color:var(--accent)}

/* ── Modal / toasts ── */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:200;display:none;align-items:center;justify-content:center}
.modal-back.open{display:flex}
.modal{width:440px;max-width:calc(100vw - 32px);max-height:88vh;overflow-y:auto;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);font-weight:700;font-size:16px;color:var(--text-bright)}
.modal-head .x{cursor:pointer;color:var(--text-faint);font-size:16px} .modal-head .x:hover{color:var(--text-bright)}
.modal-body{padding:20px;display:flex;flex-direction:column;gap:14px} .modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.prof-top{display:flex;align-items:center;gap:16px} .prof-role{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-dim)}
/* name-color picker */
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;background:var(--bg-elevated);color:var(--sw,var(--text-bright));font-weight:800;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s,border-color .12s}
.swatch:hover{transform:scale(1.08)}
.swatch.sel{border-color:var(--sw,var(--text-bright))}
.swatch.swatch-none{color:var(--text-dim)} .swatch.swatch-none.sel{border-color:var(--text-dim)}
/* subtle, low-traffic refresh action at the foot of the profile */
.prof-refresh{display:block;margin:8px auto 0;background:none;border:0;color:var(--text-faint);font-size:12px;cursor:pointer;padding:5px 10px;border-radius:6px;transition:background .12s,color .12s}
.prof-refresh:hover{color:var(--text);background:var(--bg-hover)}
.form-row{display:flex;gap:10px} .form-row>*{flex:1}
.toasts{position:fixed;bottom:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius);padding:11px 15px;min-width:240px;max-width:340px;box-shadow:var(--shadow-md);animation:toastIn .22s ease}
.toast .tt{font-size:13px;color:var(--text-bright);font-weight:600} .toast .ts{font-size:12px;color:var(--text-dim);margin-top:1px}
.toast.clickable{cursor:pointer;pointer-events:auto} .toast.clickable:hover{filter:brightness(1.12)}
.toast.err{border-color:rgba(217,100,95,.55)} .toast.err .tt{color:var(--danger)}
@keyframes toastIn{from{transform:translateX(24px);opacity:0}}
.flash{animation:flash 1.1s ease} @keyframes flash{0%{background:var(--accent-glow)}100%{background:transparent}}
/* Detached chat window: always a normal inline sidebar (never the mobile drawer), at any width. */
body.is-popout .context{position:static;transform:none;width:var(--col-w);max-width:none;box-shadow:none;top:auto;bottom:auto}
body.is-popout .workspace{padding-bottom:0}

/* ── Mobile ── */
.scrim{display:none}
@media(max-width:860px){.home-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  :root{--rail-w:0px}
  /* Nav rail → left slide-in drawer; ☰ in the topbar opens it. */
  .rail{position:fixed;top:0;bottom:0;left:0;right:auto;width:248px;max-width:85vw;height:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:calc(14px + var(--safe-top)) 10px calc(14px + var(--safe-bottom));border-right:1px solid var(--border);border-top:none;gap:4px;z-index:130;transform:translateX(-110%);transition:transform .2s ease;box-shadow:8px 0 28px rgba(0,0,0,.55);overflow-y:auto;-webkit-overflow-scrolling:touch}
  html[data-display="standalone"] .rail{top:var(--safe-top);padding-top:14px;padding-bottom:14px}
  .rail.open{transform:translateX(0)}
  .rail-prof{margin:2px 0 10px 8px;align-self:flex-start}
  .rail-div{display:block;width:auto;margin:6px 8px} .rail-spacer{display:none}
  .rail-item{width:100%;max-width:none;flex-direction:row;justify-content:flex-start;gap:13px;padding:11px 12px;border-radius:10px}
  .rail-item .ri-ico{font-size:20px} .rail-item .ri-lbl{font-size:13.5px;font-weight:600}
  .rail-item.active::before{display:none}
  .rail-badge{position:static;margin-left:auto;border:none}
  .topbar{padding:var(--safe-top) 10px 0;min-height:calc(60px + var(--safe-top));gap:8px;min-width:0;box-sizing:border-box}
  .context{position:fixed;z-index:120;top:calc(60px + var(--safe-top));bottom:var(--safe-bottom);left:0;width:84vw;max-width:320px;transform:translateX(-110%);transition:transform .2s ease;box-shadow:8px 0 24px rgba(0,0,0,.5)}
  .context.open{transform:translateX(0)}
  /* :not([hidden]) is the fix — the old `.scrim{display:block}` overrode the hidden attribute,
     leaving the dark overlay on permanently and dimming every mobile screen. */
  .scrim:not([hidden]){display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110}
  /* iOS Safari auto-zooms when a focused field is under 16px (the viewport has no
     maximum-scale, by design, so pinch-zoom still works). Bump fields to 16px on phones
     to kill the jarring zoom-on-tap; desktop keeps the denser 14px. */
  input,textarea,select,.composer textarea{font-size:16px}
  .menu-btn{display:inline-flex;flex-shrink:0;margin-right:2px}
  .topbar .spacer{display:none}
  .topbar-action{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .topbar-action::-webkit-scrollbar{height:0}
  .app-actions{min-width:0}
  .app-actions .btn{display:none}
  .seg button{padding:4px 8px;font-size:11px}
  #live{display:none}
  .search .kbd{display:none} .search span:not(.kbd){font-size:13px}
  .page-title{display:none} .tbinfo{display:none}
  .wrap{padding:18px 16px 28px} .board{padding:16px}
  .toasts{bottom:max(16px,calc(16px + var(--safe-bottom)));left:max(12px,calc(12px + var(--safe-left)));right:max(12px,calc(12px + var(--safe-right)))} .toast{max-width:none}
  /* Chat: one header bar — shell topbar hidden, channel picker lives in chat-head */
  body[data-view="chat"]:not(.is-popout) .topbar{display:none}
  body[data-view="chat"] .context{top:calc(52px + var(--safe-top))}
}

/* Home-screen app only — browser keeps env()-based insets from :root. */
@media (max-width:720px){
  html[data-display="standalone"] body,html[data-display="standalone"] #root{height:100%;min-height:100%;max-height:100%}
  html[data-display="standalone"] .context{bottom:0}
}

/* "A new version shipped" banner — appears when /api/version reports a newer build */
.update-banner{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,140%);
  z-index:300; display:flex; align-items:center; gap:11px;
  padding:10px 12px 10px 15px; border-radius:12px;
  background:var(--bg-elevated); border:1px solid var(--border-light);
  box-shadow:0 10px 30px rgba(0,0,0,.45); color:var(--text);
  font-size:13.5px; max-width:min(440px,calc(100vw - 24px));
  opacity:0; transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .26s;
}
.update-banner.in{transform:translate(-50%,0); opacity:1}
.update-banner-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); flex:0 0 auto}
.update-banner-text{flex:1 1 auto; min-width:0; color:var(--text-bright); line-height:1.35}
.update-banner-refresh{
  flex:0 0 auto; border:0; cursor:pointer; font:inherit; font-weight:600;
  padding:6px 13px; border-radius:8px; color:#1a1a1a; background:var(--accent-gradient);
}
.update-banner-refresh:hover{filter:brightness(1.06)}
.update-banner-x{
  flex:0 0 auto; border:0; background:transparent; cursor:pointer;
  color:var(--text-faint); font-size:18px; line-height:1; padding:2px 4px; border-radius:6px;
}
.update-banner-x:hover{color:var(--text); background:var(--bg-hover)}

/* Mobile: full-width bottom card — base rules above use left:50% and come later in the
   cascade than the shell media block, so overrides must live here after them. */
@media (max-width:720px){
  .update-banner{
    left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom));
    max-width:none; transform:translateY(calc(100% + 24px));
    flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 14px;
  }
  .update-banner.in{transform:translateY(0); opacity:1}
  .update-banner-dot{margin-top:4px; align-self:flex-start}
  .update-banner-text{flex:1 1 0; min-width:0}
  .update-banner-refresh{flex:1 0 100%; padding:10px 16px; text-align:center}
}