/* ═══════════════ BRASH OS — design tokens & components ═══════════════
   Visual language from the BRASH OS hi-fi statics: ink surfaces, brand red
   reserved, letterspaced caps for system metadata, pills for actions.
   Single typeface throughout: Neue Haas Grotesk (--mono is an alias so
   metadata styling keeps working). */

:root{
  --bg:#0d0d0d; --card:#131313; --card2:#151515; --cell:#1c1c1c; --drawer:#141414; --modal:#161616;
  --red:#F40000; --amber:#E8A13C; --green:#5c9e70; --court:#7fb5c9;
  --ink:#fff; --ink2:#c9c9c9; --ink3:#9b9b9b; --ink4:#8d8d8d; --ink5:#6f6f6f; --ink6:#5c5c5c;
  --line8:rgba(255,255,255,.08); --line9:rgba(255,255,255,.09); --line55:rgba(255,255,255,.055);
  --line45:rgba(255,255,255,.045); --line12:rgba(255,255,255,.12); --line14:rgba(255,255,255,.14);
  --sans:"Neue Haas Grotesk Display Pro","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:var(--sans);
  --acc-zerzura:oklch(72% .09 200); --acc-miraj:oklch(72% .09 280);
  --acc-oryx:oklch(72% .09 80); --acc-kavkasia:oklch(72% .09 20);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;overflow:hidden}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;text-align:left}
input,select,textarea{font-family:inherit;background:rgba(255,255,255,.06);border:1px solid var(--line14);border-radius:8px;color:var(--ink);padding:8px 11px;font-size:12.5px;outline:none}
input:focus,select:focus,textarea:focus{border-color:rgba(255,255,255,.35)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9b9b9b 50%),linear-gradient(135deg,#9b9b9b 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
select option{background:#1c1c1c;color:#fff}
::placeholder{color:var(--ink5)}
a{color:inherit;text-decoration:none}
@keyframes osPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes toastIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes drawerIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes modalIn{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ── mono metadata / labels ── */
.mono{font-family:var(--mono)}
.klabel{font:600 9px var(--mono);letter-spacing:.14em;color:var(--ink5)}
.klabel2{font:600 10px var(--mono);letter-spacing:.16em;color:var(--ink3)}
.meta{font:500 9.5px var(--mono);color:var(--ink5)}
.meta2{font:500 10.5px var(--mono);color:var(--ink3)}

/* ═══ Shell ═══ */
#app{display:flex;height:100vh;min-width:1100px}
.rail{width:76px;flex:none;display:flex;flex-direction:column;align-items:center;padding:20px 0 14px;border-right:1px solid var(--line8)}
.rail-logo{margin-bottom:28px;cursor:pointer}
.rail-logo img{width:54px;display:block}
.rail-verbs{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}
.rail-verb{width:60px;text-align:center;padding:9px 0;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--ink5);border-radius:7px;cursor:pointer}
.rail-verb:hover{color:var(--ink2)}
.rail-verb.active{color:#fff;background:rgba(244,0,0,.14)}
.rail-admin{width:52px;border-top:1px solid rgba(255,255,255,.1);margin-top:12px;text-align:center;font:600 8.5px var(--mono);letter-spacing:.14em;color:var(--ink6);padding:8px 0;cursor:pointer;border-radius:7px}
.rail-admin:hover{color:var(--ink2)}
.rail-admin.active{color:#fff;background:rgba(244,0,0,.14)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* topbar */
.topbar{height:56px;flex:none;display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid var(--line8)}
.topbar-title{font-weight:800;font-size:15px;letter-spacing:-.3px;white-space:nowrap}
.topbar-crumbs{font-size:12px;color:var(--ink5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-crumbs .sep{color:var(--ink6);padding:0 4px}
.topbar-crumbs .here{color:var(--ink2);font-weight:700}
.topbar-crumbs a:hover{color:var(--ink2)}
.searchbox{width:340px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:8px 16px;font-size:12.5px;color:var(--ink5);margin-left:18px;cursor:pointer}
.searchbox:hover{border-color:rgba(255,255,255,.22)}
.searchbox .kbd{font:600 10px var(--mono);color:var(--ink6)}
.savetick{font:500 10px var(--mono);letter-spacing:.08em;color:var(--green);white-space:nowrap}
.savetick.saving{color:var(--ink3)}
.inbox-btn{position:relative;padding:8px 14px;border:1px solid var(--line12);border-radius:999px;font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer}
.inbox-btn:hover{border-color:rgba(255,255,255,.3)}
.inbox-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:999px;background:var(--red);font:700 9.5px var(--mono);display:flex;align-items:center;justify-content:center;color:#fff;padding:0 4px}
.timer-chip{display:flex;align-items:center;gap:9px;padding:8px 16px;border:1px solid rgba(244,0,0,.55);border-radius:999px;background:rgba(244,0,0,.08);cursor:pointer;white-space:nowrap}
.timer-chip.idle{border-color:var(--line12);background:none;color:var(--ink3);font-size:11.5px;font-weight:700}
.timer-chip.idle:hover{border-color:rgba(255,255,255,.3)}
.timer-dot{width:7px;height:7px;border-radius:999px;background:var(--red);animation:osPulse 1.4s ease-in-out infinite}
.timer-time{font:700 11.5px var(--mono);letter-spacing:.02em}
.timer-job{font-size:11.5px;color:var(--ink3);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.avatar{width:30px;height:30px;border-radius:999px;background:#232323;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--ink2);flex:none;cursor:pointer}
.avatar:hover{background:#2e2e2e}
.av{width:20px;height:20px;border-radius:999px;background:#2a2a2a;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--ink2);flex:none}
.av.md{width:24px;height:24px;font-size:8.5px}
.av-stack{display:flex}
.av-stack .av{border:1.5px solid var(--card)}
.av-stack .av+.av{margin-left:-6px}

/* L2 tabs */
/* Scrolls rather than clips: Bill carries six tabs, the currency chip and five
   entity chips, which runs past the 1100px minimum window. */
.tabs{height:46px;flex:none;display:flex;align-items:center;gap:24px;padding:0 24px;border-bottom:1px solid var(--line8);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{font-size:12.5px;font-weight:600;color:var(--ink5);padding:14px 0;cursor:pointer;white-space:nowrap}
.tab:hover{color:var(--ink3)}
.tab.active{font-weight:700;color:#fff;border-bottom:2px solid #fff;padding-bottom:12px}
.tab .count{font:600 10px var(--mono);color:var(--ink5)}
.tab.active .count{color:var(--ink3)}
.tab .count.warn{color:var(--amber)}
.tab .count.court{color:var(--court)}
.tabs-note{font:500 10px var(--mono);letter-spacing:.1em;color:var(--ink5);white-space:nowrap}
.spacer{flex:1}
.content{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}

/* ═══ primitives ═══ */
.card{background:var(--card);border:1px solid var(--line9);border-radius:12px}
.bcard{background:var(--card2);border:1px solid var(--line9);border-radius:10px;padding:14px 15px;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.bcard:hover{border-color:rgba(255,255,255,.22)}
.dashed{border:1px dashed var(--line14);border-radius:12px}
.btn{padding:7px 16px;border-radius:999px;background:#fff;color:#0b0b0b;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;text-align:center;border:1px solid #fff}
.btn:hover{background:#e6e6e6;border-color:#e6e6e6}
.btn.big{padding:11px 20px;font-size:12.5px}
.btn.sm{padding:5px 13px;font-size:11px}
.btn.xs{padding:4px 11px;font-size:10.5px}
.gbtn{padding:7px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap;text-align:center;background:none}
.gbtn:hover{border-color:rgba(255,255,255,.4)}
.gbtn.big{padding:11px 20px;font-size:12.5px}
.gbtn.sm{padding:5px 13px;font-size:11px}
.gbtn.xs{padding:4px 11px;font-size:10.5px}
.gbtn.dim{color:var(--ink3)}
.pill{font:600 9px var(--mono);letter-spacing:.06em;border-radius:4px;padding:2px 7px;border:1px solid var(--line14);color:var(--ink3);white-space:nowrap;display:inline-block}
.pill.rounded{border-radius:999px;padding:3px 9px}
.pill.green{color:var(--green);border-color:rgba(92,158,112,.4)}
.pill.amber{color:var(--amber);border-color:rgba(232,161,60,.4)}
.pill.red{color:var(--red);border-color:rgba(244,0,0,.4)}
.pill.court{color:var(--court);border-color:rgba(127,181,201,.35)}
.pill.white{color:var(--ink2);border-color:rgba(255,255,255,.2)}
.pill.dashed{border-style:dashed;border-color:rgba(255,255,255,.3);color:var(--ink3)}
.chip{font:600 10px var(--mono);color:var(--ink5);border:1px solid var(--line12);border-radius:999px;padding:6px 13px;cursor:pointer;white-space:nowrap;background:none}
.chip:hover{color:var(--ink3);border-color:rgba(255,255,255,.25)}
.chip.active{color:#fff;background:var(--line12);border-color:transparent}
.accent{width:3px;border-radius:2px;flex:none}
.bar{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.bar>div{height:100%;background:rgba(255,255,255,.35)}
.bar>div.green{background:var(--green)}
.bar>div.amber{background:var(--amber)}
.bar>div.red{background:var(--red)}
.row-flex{display:flex;align-items:center;gap:8px}
.grow{flex:1;min-width:0}
.num{font:600 11px var(--mono)}
.right{text-align:right}
.ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* stat cards */
.stat{background:var(--card);border:1px solid var(--line9);border-radius:12px;padding:16px 18px}
.stat .v{font-weight:800;font-size:30px;letter-spacing:-1.4px;margin-top:4px}
.stat .s{font-size:11px;color:var(--ink4);margin-top:2px}

/* tables */
.thead{display:grid;padding:11px 22px;border-bottom:1px solid var(--line8);font:600 9.5px var(--mono);letter-spacing:.12em;color:var(--ink5)}
.trow{display:grid;padding:11px 22px;border-bottom:1px solid var(--line45);align-items:center}
.trow.click{cursor:pointer}
.trow.click:hover{background:rgba(255,255,255,.03)}
.tgroup{padding:7px 22px;font:600 9px var(--mono);letter-spacing:.14em;color:var(--ink3);border-bottom:1px solid var(--line55);background:rgba(255,255,255,.02);display:flex;justify-content:space-between}
.tfoot{padding:12px 22px;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:var(--ink5)}

/* ── scrolling tables ──
   Rows that outnumber the viewport need the card itself to be the scroller,
   with the header pinned to its top and any computed total pinned to its
   bottom. It has to be the card and not an inner wrapper: header, rows and
   footer are separate `fr` grids, so they only line up while they share one
   scroll box — a nested scroller takes the scrollbar's width off the rows and
   the columns drift out of true.

   Without this the card grew past the viewport and its own overflow:hidden
   clipped the rows out of reach — which is what happened to Bill and Plan once
   real data arrived: 54 people, 429 invoices, 241 jobs rather than the seed's
   handful.
   A flex column so a short table can push its footer to the bottom with a
   .scrollfill spacer instead of leaving it stranded mid-card; rows never shrink.
   Use: card.scrollcard > .stickyhead + rows… + .scrollfill + .stickyfoot */
.scrollcard{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.scrollcard>*{flex:none}
.scrollcard>.scrollfill{flex:1 1 auto;min-height:0}
.stickyhead{position:sticky;top:0;z-index:5;background:var(--card)}
.stickyfoot{position:sticky;bottom:0;z-index:4;background:#181818;border-top:1px solid var(--line8)}
/* the count that tells you how much is below the fold */
.rowcount{font:500 10px var(--mono);letter-spacing:.1em;color:var(--ink5);white-space:nowrap}
/* compact filter field for tab bars */
.tabfilter{width:180px;padding:5px 11px;border-radius:999px;font-size:11.5px}
/* the row action that only appears on hover — archive, unpin */
.rowact{opacity:0;transition:opacity .12s}
.trow:hover .rowact,.hm-row:hover .rowact,.ts-row:hover .rowact{opacity:1}
.rowact:focus{opacity:1}

/* board */
.board{flex:1;min-height:0;display:grid;padding:20px 24px;overflow:auto}
.board-col{display:flex;flex-direction:column;gap:10px;padding:0 14px;min-height:80px;min-width:0}
.board-col:first-child{padding-left:0}
.board-col:last-child{padding-right:0}
.board-col+.board-col{border-left:1px solid rgba(255,255,255,.06)}
.board-col.dragover{background:rgba(255,255,255,.025);border-radius:10px}
.col-head{display:flex;align-items:baseline;gap:8px}
.col-head .name{font-size:12px;font-weight:800;letter-spacing:.02em}
.col-head .pct{font:600 9.5px var(--mono);color:var(--ink5)}
.col-head .sum{margin-left:auto;font:600 9.5px var(--mono);color:var(--ink5);white-space:nowrap}
.dragging{opacity:.45}

/* drawer / modal / palette */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}
.overlay.darker{background:rgba(0,0,0,.72)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;background:var(--drawer);border-left:1px solid var(--line12);z-index:51;display:flex;flex-direction:column;box-shadow:-30px 0 60px rgba(0,0,0,.5);animation:drawerIn .16s ease-out}
.drawer-head{padding:22px 26px 16px;border-bottom:1px solid var(--line8);display:flex;flex-direction:column;gap:10px}
.drawer-title{font-weight:800;font-size:28px;letter-spacing:-1.2px}
.drawer-body{flex:1;overflow:auto;padding:18px 26px;display:flex;flex-direction:column;gap:16px}
.drawer-foot{padding:14px 26px;border-top:1px solid var(--line8);display:flex;align-items:center;gap:10px}
.xclose{color:var(--ink4);font-size:20px;cursor:pointer;line-height:1;background:none;border:none;padding:0 2px}
.xclose:hover{color:#fff}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-box{border:1px solid var(--line9);border-radius:10px;padding:12px 14px}
.kv{display:flex;justify-content:space-between;font-size:12px;gap:12px}
.kv .k{color:var(--ink4)}
.kv .v{font-weight:700;text-align:right}
.activity{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.1);padding-left:14px}
.activity .item{padding:7px 0;font-size:12px}
.composer{border:1px solid var(--line12);border-radius:10px;padding:11px 14px;font-size:12px;color:var(--ink5);width:100%;background:none;resize:none}
.composer:focus{color:var(--ink)}

.modal-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}
.modal{width:460px;max-width:92vw;max-height:88vh;overflow:auto;background:var(--modal);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:32px 34px;display:flex;flex-direction:column;gap:18px;box-shadow:0 40px 120px rgba(0,0,0,.8);animation:modalIn .15s ease-out}
.modal.wide{width:640px}
.modal-title{font-weight:800;font-size:26px;letter-spacing:-1.1px;line-height:1.1}
.modal .box{border:1px solid var(--line12);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.02)}
.form-row{display:flex;flex-direction:column;gap:6px}
.form-row label{font:600 9px var(--mono);letter-spacing:.12em;color:var(--ink5)}

/* palette */
.palette{position:fixed;top:110px;left:50%;transform:translateX(-50%);width:620px;max-height:60vh;background:var(--modal);border:1px solid rgba(255,255,255,.16);border-radius:14px;z-index:70;display:flex;flex-direction:column;box-shadow:0 40px 120px rgba(0,0,0,.8);overflow:hidden}
.palette input{background:none;border:none;border-bottom:1px solid var(--line12);border-radius:0;padding:16px 20px;font-size:14px}
.palette-list{overflow:auto;padding:8px}
.pal-group{padding:8px 14px 4px;font:600 9px var(--mono);letter-spacing:.14em;color:var(--ink5)}
.pal-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.pal-item .kind{font:600 9px var(--mono);color:var(--ink5);letter-spacing:.08em;width:64px;flex:none}
.pal-item .sub{margin-left:auto;font:500 10px var(--mono);color:var(--ink5)}
.pal-item.sel{background:rgba(255,255,255,.08)}

/* popovers */
.popover{position:fixed;background:var(--modal);border:1px solid rgba(255,255,255,.16);border-radius:12px;z-index:65;box-shadow:0 24px 80px rgba(0,0,0,.7);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:280px;animation:modalIn .12s ease-out}
.pop-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12.5px}
.pop-item:hover{background:rgba(255,255,255,.06)}

/* toast */
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#1d1d1d;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 20px;font-size:12.5px;font-weight:600;color:var(--ink2);box-shadow:0 16px 48px rgba(0,0,0,.6);animation:toastIn .18s ease-out;display:flex;gap:10px;align-items:center;max-width:640px}
.toast .undo{color:#fff;font-weight:800;cursor:pointer}
.toast.good::before{content:"✓";color:var(--green);font-weight:800}

/* inbox popover */
.inbox-pop{position:fixed;top:52px;right:120px;width:420px;max-height:70vh;background:var(--modal);border:1px solid rgba(255,255,255,.16);border-radius:14px;z-index:65;box-shadow:0 24px 80px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;animation:modalIn .12s ease-out}
.inbox-item{padding:13px 18px;border-bottom:1px solid var(--line55);display:flex;gap:11px;cursor:pointer}
.inbox-item:hover{background:rgba(255,255,255,.03)}
.inbox-item .dot{width:7px;height:7px;border-radius:999px;background:var(--red);margin-top:5px;flex:none}
.inbox-item.read .dot{background:rgba(255,255,255,.15)}

/* timesheet */
.ts-grid{display:grid;grid-template-columns:250px repeat(7,1fr)}
.ts-cell{border-left:1px solid var(--line55);padding:8px;display:flex;align-items:center;justify-content:center;min-height:64px;cursor:pointer}
.ts-cell:hover .plus{color:rgba(255,255,255,.5)}
.ts-cell .plus{font-size:16px;color:rgba(255,255,255,.22)}
.ts-cell.warnday{border-left:1px solid rgba(232,161,60,.35);background:rgba(232,161,60,.05)}
.ts-cell.weekend{background:rgba(255,255,255,.015);cursor:default}
.ts-entry{width:100%;background:var(--cell);border-radius:7px;padding:8px 10px;border-left:3px solid rgba(255,255,255,.3);cursor:grab}
.ts-entry .h{font:700 12.5px var(--mono)}
.ts-entry .n{font-size:10px;color:var(--ink4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* heatmap */
.hm-cell{border-left:1px solid var(--line55);border-top:1px solid var(--line45);min-height:44px;display:flex;align-items:center;justify-content:center;font:600 10px var(--mono);cursor:pointer;position:relative;user-select:none}
.hm-cell:hover{outline:1px solid rgba(255,255,255,.3);outline-offset:-1px}
.hm-cell.sel{outline:2px solid #fff;outline-offset:-2px}
.hm-ok{background:rgba(92,158,112,.4)}
.hm-warn{background:rgba(232,161,60,.45)}
.hm-over{background:rgba(244,0,0,.55)}
.hm-abs{background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 6px)}

/* doc editor */
.doc-nav-item{padding:7px 22px;font-size:12.5px;font-weight:600;color:var(--ink3);cursor:pointer}
.doc-nav-item:hover{color:#fff}
.doc-nav-item.active{font-weight:700;color:#fff;background:rgba(255,255,255,.05)}
.doc-nav-child{padding:5px 22px 5px 12px;font-size:12px;color:var(--ink3);cursor:pointer;margin-left:22px}
.doc-nav-child:hover{color:#fff}
.doc-nav-child.active{font-weight:700;color:#fff;border-left:2px solid var(--red)}
.doc-sec-label{font:600 10px var(--mono);letter-spacing:.14em;margin-bottom:6px;color:var(--ink3)}
.doc-sec-body{font-size:14px;color:var(--ink2);line-height:1.6;outline:none;border-radius:6px}
.doc-sec-body:focus{background:rgba(255,255,255,.03);box-shadow:0 0 0 6px rgba(255,255,255,.03)}

/* admin */
.console-nav{width:230px;flex:none;border-right:1px solid var(--line8);padding:20px 0;overflow:auto}
.console-item{padding:8px 24px;font-size:12.5px;font-weight:600;color:var(--ink3);cursor:pointer;display:block;width:100%}
.console-item:hover{color:#fff}
.console-item.active{font-weight:700;color:#fff;background:rgba(255,255,255,.06);border-left:2px solid var(--red);padding-left:22px}
.toggle{width:26px;height:15px;border-radius:999px;background:rgba(255,255,255,.15);position:relative;cursor:pointer;flex:none;transition:background .15s}
.toggle::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:999px;background:#0b0b0b;transition:left .15s}
.toggle.on{background:var(--green)}
.toggle.on::after{left:13px}
.matrix-cell{text-align:center;cursor:pointer;font-size:13px;border-radius:6px;padding:2px 0;user-select:none}
.matrix-cell:hover{background:rgba(255,255,255,.06)}
.matrix-cell .full{color:var(--green)}
.matrix-cell .scoped{font-size:11px;color:var(--amber)}
.matrix-cell .none{color:var(--ink6)}

/* automations */
.step-card{background:var(--card);border:1px solid var(--line9);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:12px;font-size:14px;flex-wrap:wrap}
.step-card.trigger{border-color:var(--line14)}
.step-tag{font:700 8.5px var(--mono);letter-spacing:.12em;border-radius:4px;padding:3px 7px;flex:none}
.step-tag.trigger{color:#0b0b0b;background:#fff}
.step-tag.if{color:var(--ink3);border:1px solid rgba(255,255,255,.2)}
.step-tag.then{color:#0b0b0b;background:var(--amber)}
.step-join{width:1px;height:18px;background:rgba(255,255,255,.2);margin-left:40px}
.tok{font:600 12.5px var(--mono);background:rgba(255,255,255,.08);border-radius:5px;padding:2px 7px}

/* paper (proposal / invoice pdf) */
.paper{width:640px;background:#f4f2ee;color:#111;border-radius:4px;box-shadow:0 24px 80px rgba(0,0,0,.6);padding:44px 48px;display:flex;flex-direction:column;gap:22px;flex:none}
.paper .brand img{height:20px;display:block}
.paper .hairline{height:1px;background:rgba(0,0,0,.14)}
.paper .pmeta{font:500 8.5px var(--mono);letter-spacing:.14em;color:#8a8a8a}

/* ═══ v3.1 — timeline / portfolio ═══ */
.tl-head{display:grid;grid-template-columns:280px 1fr;padding:12px 22px 4px 22px;border-bottom:1px solid var(--line8)}
.tl-rule{position:relative;height:16px;margin-right:22px}
.tl-month{position:absolute;top:0;font:600 9px var(--mono);letter-spacing:.12em;color:var(--ink5);transform:translateX(2px)}
.tl-row{display:grid;grid-template-columns:280px 1fr;border-bottom:1px solid var(--line45);padding:14px 22px 14px 22px;align-items:center;gap:0}
.tl-row.click{cursor:pointer}
.tl-row.click:hover{background:rgba(255,255,255,.03)}
.tl-info{padding-right:18px;min-width:0}
.tl-track{position:relative;height:40px;margin-right:22px}
.tl-track.tall{height:52px}
.tl-gridline{position:absolute;top:0;bottom:0;width:1px;background:var(--line55)}
.tl-today{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--red);opacity:.75;border-radius:2px}
.phasebar{position:absolute;top:8px;height:24px;border-radius:6px;display:flex;align-items:center;padding:0 8px;overflow:hidden;cursor:pointer}
.tl-track.tall .phasebar{top:12px;height:28px}
.phasebar-label{font:600 9.5px var(--mono);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phasebar.done{background:rgba(255,255,255,.08);color:var(--ink5)}
.phasebar.current{background:rgba(255,255,255,.22);color:#fff;border:1px solid rgba(255,255,255,.35)}
.phasebar.next{background:none;border:1px dashed rgba(255,255,255,.25);color:var(--ink4)}
.phasebar.retainer{background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 26px,rgba(255,255,255,.06) 26px 52px);border:1px solid var(--line14);color:var(--ink3)}
.tl-gate{position:absolute;top:-3px;transform:translateX(-50%);font-size:11px;color:var(--court);cursor:help}

/* ═══ v3.2 — week-by-day board ═══ */
.dv-cell{border-left:1px solid var(--line55);border-top:1px solid var(--line45);min-height:64px;padding:7px 8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;position:relative}
.dv-cell:hover{outline:1px solid rgba(255,255,255,.3);outline-offset:-1px}
.dv-cell.dv-ok{background:rgba(92,158,112,.12)}
.dv-cell.dv-warn{background:rgba(232,161,60,.14)}
.dv-cell.dv-over{background:rgba(244,0,0,.16)}
.dv-cell.dv-hol{background:rgba(255,255,255,.03);cursor:help;align-items:center;justify-content:center}
.dv-cell.dv-hol span:first-child{font:700 10px var(--mono);letter-spacing:.1em;color:var(--ink4)}
.dv-total{font:700 12px var(--mono)}
.dv-chip{display:flex;align-items:center;gap:6px;font:600 9.5px var(--mono);color:var(--ink3);background:rgba(255,255,255,.05);border-radius:5px;padding:2px 6px;max-width:100%}
.dv-chip.soft{background:repeating-linear-gradient(90deg,rgba(127,181,201,.18) 0 3px,transparent 3px 6px);border:1px dashed rgba(127,181,201,.4);color:var(--court)}
.hm-soft{position:absolute;top:3px;right:4px;font:700 8px var(--mono);color:var(--court);background:repeating-linear-gradient(90deg,rgba(127,181,201,.15) 0 2px,transparent 2px 4px);border:1px dashed rgba(127,181,201,.35);border-radius:4px;padding:1px 4px;cursor:help}

/* client record stat strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ss-item{border:1px solid var(--line9);border-radius:10px;padding:12px 16px;cursor:pointer;background:var(--card)}
.ss-item:hover{border-color:rgba(255,255,255,.22)}
.ss-v{font-weight:800;font-size:22px;letter-spacing:-.8px;margin-top:3px}
.ss-s{font-size:10.5px;color:var(--ink4);margin-top:1px}

/* ═══ v3.1 — copilot ═══ */
body.copilot-open #app{margin-right:380px}
.copilot{position:fixed;top:0;right:0;bottom:0;width:380px;background:var(--drawer);border-left:1px solid var(--line12);z-index:40;display:flex;flex-direction:column;animation:drawerIn .16s ease-out}
.cp-btn{display:flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line12);border-radius:999px;font-size:11.5px;font-weight:700;color:var(--ink2);cursor:pointer;white-space:nowrap}
.cp-btn:hover{border-color:rgba(255,255,255,.3)}
.cp-btn .mark,.cp-mark{color:#fff;font-size:13px}
.cp-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line8)}
.cp-context{padding:10px 18px 0}
.cp-ctx-chip{font:600 9px var(--mono);letter-spacing:.1em;color:var(--ink4);border:1px solid var(--line12);border-radius:999px;padding:4px 10px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-msgs{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.cp-msg{font-size:12.5px;line-height:1.55;border-radius:12px;padding:10px 14px;max-width:100%}
.cp-msg.you{align-self:flex-end;background:rgba(255,255,255,.1);font-weight:600;max-width:85%}
.cp-msg.cp{align-self:stretch;background:var(--card);border:1px solid var(--line9);color:var(--ink2);display:flex;flex-direction:column;gap:10px}
.cp-recs{display:flex;flex-wrap:wrap;gap:6px}
.cp-rec{display:flex;align-items:center;gap:6px;border:1px solid var(--line14);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:700;color:var(--ink2);cursor:pointer;background:none}
.cp-rec:hover{border-color:rgba(255,255,255,.35)}
.cp-rec .kind{font:600 8.5px var(--mono);letter-spacing:.08em;color:var(--ink5)}
.cp-action{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px 12px;background:rgba(255,255,255,.03)}
.cp-action.done{opacity:.75;border-color:rgba(92,158,112,.4)}
.cp-action.dismissed{opacity:.45}
.cp-action>div:first-child{flex:1;min-width:0}
.cp-chips{padding:8px 18px;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line55)}
.cp-foot{padding:10px 18px 16px}
.cp-input{width:100%}

/* misc */
.empty{padding:60px 20px;text-align:center;color:var(--ink5);font-size:13px;display:flex;flex-direction:column;gap:8px;align-items:center}
.empty b{color:var(--ink3);font-size:15px}
.lock{font-size:12px}
h1.page{font-weight:800;font-size:24px;letter-spacing:-1px}
.section-pad{padding:22px 28px;display:flex;flex-direction:column;gap:16px;flex:1;min-height:0}
.hoverable:hover{background:rgba(255,255,255,.03)}