/* ATiQ build: build-124054 */
:root{ --atiq-build:'build-125040'; }
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cardh:132px;--maxw:1680px;--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --page:#141414;--card:#1e1e1e;--card-bd:rgba(255,255,255,.15);--card-hover:#d4fc00;
  --tprimary:#f2f2f2;--tsec:#9a9a9a;--tmut:#6a6a6a;--place:#5f5f5f;
  --value:#d4fc00;--divider:rgba(255,255,255,.08);--nav:#1a1a1a;--nav-bd:rgba(255,255,255,.07);--strip:#111;
  --pill-com:#6f9fd8;--pill-dom:#b28fd6;
  --chip-ok-bg:#242424;--chip-ok-tx:#9a9a9a;--chip-urg-bg:rgba(224,82,82,.16);--chip-urg-tx:#e0736f;--stale:#e0736f;
  --countpill-bg:#242424;--countpill-tx:#c9c9c9;--flag-off:#666;--well:#242424;--well-bd:rgba(255,255,255,.1);
  --compact:#191919;--compact-bd:rgba(255,255,255,.1);--teal:#4bb3a8;--ring:#ffffff;--sb:rgba(255,255,255,.16);--sb-hover:rgba(255,255,255,.28);
}
body.light{
  --page:#f0efed;--card:#ffffff;--card-bd:rgba(0,0,0,.13);--card-hover:#8FB800;
  --tprimary:#1a1a18;--tsec:#6b6860;--tmut:#9a9895;--place:#a8a5a0;
  --value:#8FB800;--divider:rgba(0,0,0,.07);--nav:#ffffff;--nav-bd:rgba(0,0,0,.08);--strip:#e6e4df;
  --pill-com:#3f6fa8;--pill-dom:#8a5fb0;
  --chip-ok-bg:#eeece7;--chip-ok-tx:#6b6860;--chip-urg-bg:#f7dedd;--chip-urg-tx:#b82020;--stale:#b82020;
  --countpill-bg:#e2e0dc;--countpill-tx:#5a5855;--flag-off:#b5b2ac;--well:#f5f5f3;--well-bd:rgba(0,0,0,.1);
  --compact:#e9e7e2;--compact-bd:rgba(0,0,0,.1);--teal:#2f8f85;--ring:#1a1a18;--sb:rgba(0,0,0,.16);--sb-hover:rgba(0,0,0,.30);
}
html{height:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;color:var(--tprimary);background:var(--page);height:100vh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* In quote mode, release the fixed viewport so the whole page scrolls naturally (fixes drag + stray scrollbar) */
body.quoting{height:auto;min-height:100vh;overflow:visible}
body.dragging-active{user-select:none;cursor:grabbing;overflow-x:hidden;overflow-y:hidden}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.app-header{background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.06)}
.app-header .inner{height:66px;display:flex;align-items:center;justify-content:space-between}
.brand img{height:38px;display:block}
.brand-name{font-size:30px;font-weight:800;color:#f0f0f0;letter-spacing:-.04em;line-height:1;display:flex;align-items:baseline;gap:9px}
.brand-name .iq{color:#d4fc00}.brand-name .sub{font-weight:300;font-size:25px;opacity:.68}
.login-email{font-size:11px;color:var(--tmut)}
.signout{font-size:11px;color:var(--tsec);background:none;border:1px solid var(--card-bd);border-radius:5px;padding:3px 10px;cursor:pointer;font-family:inherit}
.nav{background:var(--strip);border-bottom:1px solid var(--nav-bd);box-shadow:0 1px 0 rgba(0,0,0,.2)}
.nav .inner{display:flex;align-items:center;gap:2px}
.nav-sp{flex:1}
.nav-user{display:flex;align-items:center;gap:10px;margin-left:14px}
.nav-user .login-email{font-size:11px;color:var(--tmut)}
.nav .signout{font-size:11px;color:var(--tsec);background:none;border:1px solid var(--card-bd);border-radius:5px;padding:3px 10px;cursor:pointer;font-family:inherit}
.nav .signout:hover{color:var(--tprimary)}
.nav-tab{position:relative;padding:11px 20px;font-size:13px;font-weight:500;cursor:pointer;border:none;background:none;color:var(--tmut);font-family:var(--font);margin-bottom:-1px;transition:color 0.15s}
.nav-tab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--value);transform:scaleX(0);transform-origin:left center;transition:transform 0.25s ease}
.nav-tab:hover{color:var(--tprimary)}
.nav-tab:hover::after{transform:scaleX(1)}
.nav-tab.active{color:var(--value);font-weight:600}
.nav-tab.active::after{transform:scaleX(1)}
body.light .nav-tab.active{color:var(--tprimary)}
.nav .sp{flex:1}
.sync{font-size:11px;color:var(--tmut);margin-left:16px;transition:opacity .5s;opacity:1}
.sync.fade{opacity:0}
.sync.err{color:#e05252;opacity:1!important;font-weight:600}
.sync.syncing{color:var(--tmut)}
.sync.syncing{color:#f5a623}.sync.synced{color:#4caf50}.sync.err{color:#e05252;font-weight:600}
.err-banner{display:none;max-width:var(--maxw);margin:12px auto 0;padding:12px 24px;background:rgba(224,82,82,.12);border:1px solid rgba(224,82,82,.35);border-radius:8px;color:#e0736f;font-size:12px}
.err-banner.show{display:block}
.control-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 14px 13px}
.control-row .pipe-strip{margin-left:auto}
.controls-left{display:flex;align-items:center;gap:12px}
.pipe-strip{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;flex-shrink:0}
.pipe-stat{display:flex;align-items:baseline;gap:6px}
.pipe-label{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--tmut)}
.pipe-val{font-size:14px;font-weight:700;letter-spacing:-.01em;font-family:'SFMono-Regular',monospace;color:var(--tprimary)}
.pipe-val.lime{color:var(--value)}
.controls-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.search{display:flex;align-items:center;gap:8px;padding:7px 4px;background:none;border:none;border-radius:0;max-width:280px}
.search svg{width:14px;height:14px;color:var(--tmut);flex-shrink:0}
.search input{background:none;border:none;outline:none;color:var(--tprimary);font-size:13px;font-family:var(--font);flex:1;padding:2px 0;width:230px}
.search input::placeholder{color:var(--tmut)}
.new-job{display:inline-flex;align-items:center;gap:4px;background:var(--value);color:#000;border:1px solid var(--value);border-radius:7px;padding:6px 11px;font-size:11px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s}
.new-job:hover{color:#fff;background:#3a3a38;border-color:#3a3a38}
.board-wrap{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .2s}
.board-wrap:hover{scrollbar-color:var(--sb) transparent}
.board-wrap::-webkit-scrollbar{height:8px}
.board-wrap::-webkit-scrollbar-track{background:transparent}
.board-wrap::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:padding-box;transition:background .2s}
.board-wrap:hover::-webkit-scrollbar-thumb{background:var(--sb);background-clip:padding-box}
.board-wrap::-webkit-scrollbar-thumb:hover{background:var(--sb-hover);background-clip:padding-box}
.board{display:flex;gap:9px;align-items:stretch;justify-content:flex-start;min-width:min-content;height:100%}
.col{flex:1 1 215px;min-width:200px;max-width:260px;display:flex;flex-direction:column;min-height:0}

.col-head{display:flex;align-items:center;gap:7px;padding:2px 3px 12px 13px;white-space:nowrap;position:relative}
.col-name{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--col);overflow:hidden;text-overflow:ellipsis}
.col-count{font-size:10px;font-weight:700;padding:1px 8px;border-radius:20px;background:var(--countpill-bg);color:var(--countpill-tx);flex-shrink:0}
.col-sum{font-size:11px;font-weight:600;color:var(--tmut)}
.hd-ctrl{margin-left:auto;flex-shrink:0;position:relative}
.hd-btn{background:none;border:1px solid transparent;color:var(--tmut);cursor:pointer;font-size:14px;padding:3px 5px;display:flex;border-radius:6px;transition:all .15s}
.hd-btn:hover{color:var(--tprimary);background:var(--well)}
.hd-btn.active{color:var(--value);border-color:var(--value)}
.hd-btn.onwhite{background:none;border-color:transparent;color:var(--tmut)}
.hd-btn.onwhite:hover{background:var(--well);color:var(--tprimary)}
.sort-menu{position:absolute;top:26px;right:0;background:var(--card);border:1px solid var(--card-bd);border-radius:8px;padding:4px;min-width:150px;z-index:30;display:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sort-menu.open{display:block}
.sort-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--tsec);font-family:inherit;font-size:12px;padding:7px 9px;border-radius:5px;cursor:pointer;text-align:left}
.sort-menu button:hover{background:var(--well);color:var(--tprimary)}
.sort-menu button.sel{color:var(--value)}
.sort-menu i{font-size:13px}
.lane{position:relative;padding-left:13px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .2s}
.lane:hover{scrollbar-color:var(--sb) transparent}
.lane::-webkit-scrollbar{width:8px}
.lane::-webkit-scrollbar-track{background:transparent}
.lane::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:2px solid transparent;background-clip:padding-box;transition:background .2s}
.lane:hover::-webkit-scrollbar-thumb{background:var(--sb);background-clip:padding-box}
.lane::-webkit-scrollbar-thumb:hover{background:var(--sb-hover);background-clip:padding-box}
.spine{position:absolute;left:0;top:0;width:3px;height:var(--cardh);border-radius:2px;background:var(--col);transition:box-shadow .2s,height .3s cubic-bezier(.2,.85,.3,1)}
.col.drag-over .spine{box-shadow:0 0 10px 1px var(--col)}
.drop-zone{display:flex;flex-direction:column;gap:9px;min-height:60px;border-radius:8px;transition:background .2s;padding-bottom:8px}
.col.drag-over:not(.compact) .drop-zone{background:rgba(212,252,0,.04)}
body.light .col.drag-over:not(.compact) .drop-zone{background:rgba(143,184,0,.08)}
.drop-empty{border:1px dashed var(--card-bd);border-radius:10px;padding:18px 8px;text-align:center;font-size:10px;color:var(--tmut);font-style:italic}
.card{position:relative;height:var(--cardh);background:var(--card);border:1px solid color-mix(in srgb,var(--col) 40%,transparent);border-radius:11px;padding:11px 12px;cursor:grab;display:flex;flex-direction:column;overflow:hidden;touch-action:none;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:var(--col);box-shadow:0 0 0 1px var(--col), 0 0 16px 1px color-mix(in srgb,var(--col) 45%,transparent)}
.card:has(.c-val.hasquote:hover){border-color:var(--card-bd);box-shadow:none}
/* flagged cards: no border — the beer icon marks it */

.card.drag-source{background:transparent;border:1.5px dashed var(--card-hover);box-shadow:none}
.card.drag-source>*{opacity:0}
.drag-clone{position:fixed;left:0;top:0;z-index:200;pointer-events:none;margin:0;cursor:grabbing;box-shadow:0 3px 10px rgba(0,0,0,.3);transition:box-shadow .28s ease;will-change:transform}
.drag-clone.lifted{box-shadow:0 24px 54px rgba(0,0,0,.55)}
body.light .drag-clone.lifted{box-shadow:0 24px 54px rgba(0,0,0,.22)}
.c-title{font-size:14px;font-weight:700;line-height:1.3;color:var(--tprimary);white-space:nowrap;overflow:hidden;position:relative}
.c-title .c-title-inner{display:inline-block;white-space:nowrap;transition:transform .15s}
.c-title::after{content:'';position:absolute;right:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,transparent,var(--card));pointer-events:none}
.card:hover .c-title::after{opacity:0;transition:opacity .1s}
.c-cpill{align-self:flex-start;font-size:10px;font-weight:600;padding:3px 11px;border-radius:20px;margin-top:8px;background:transparent;border:1px solid var(--teal);color:var(--teal);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-valrow{display:flex;align-items:center;margin-top:auto;padding-top:6px}
.c-valrow-inbox{margin-top:auto;justify-content:flex-end}
.c-val{font-size:17px;font-weight:800;font-family:'SFMono-Regular',monospace;letter-spacing:-.02em;color:var(--value);display:inline-flex;align-items:center;gap:6px}
.c-val.hasquote{cursor:pointer;border-radius:6px;padding:2px 6px;margin:-2px -6px;transition:background .15s,box-shadow .15s}
.c-val.hasquote:hover{background:color-mix(in srgb,var(--value) 12%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--value) 45%,transparent), 0 0 12px 1px color-mix(in srgb,var(--value) 30%,transparent)}
.c-valquote{font-size:17px;opacity:0;transition:opacity .15s,transform .15s;color:var(--value);transform:translateX(-2px)}
.c-val.hasquote:hover .c-valquote{opacity:1;transform:translateX(0)}
.c-place{font-size:11px;font-style:italic;color:var(--place)}
.c-foot{display:flex;align-items:center;gap:8px;margin-top:6px;padding-top:8px;border-top:1px solid var(--divider)}
.duechip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:3px 7px;border-radius:6px;background:var(--chip-ok-bg);color:var(--chip-ok-tx)}
.duechip.urg,.duechip.red{background:var(--chip-urg-bg);color:var(--chip-urg-tx)}
.duechip.muted{background:transparent;color:var(--tmut);padding-left:0}
.duechip i{font-size:10px}
.c-age{margin-left:auto;font-size:10px;font-weight:600;color:var(--tmut);display:flex;align-items:center;gap:4px}
.c-age.stale{color:var(--stale)}
.c-age .d{width:5px;height:5px;border-radius:50%;background:currentColor}
.c-flag{margin-left:auto;font-size:16px;line-height:1;cursor:pointer;color:var(--flag-off);opacity:.55;z-index:2;flex-shrink:0}
.c-beer{margin-left:auto;font-size:20px;line-height:1;cursor:pointer;color:var(--flag-off);opacity:.5;z-index:2;flex-shrink:0;display:inline-flex;align-items:center;transition:color .15s,opacity .15s}
.c-beer:hover{opacity:.9;color:#e0a854}
.c-beer.on{color:#e0a854;opacity:1}
.c-thumbs{display:inline-flex;gap:8px;margin-left:auto;opacity:0;transition:opacity .15s;z-index:2}
.card:hover .c-thumbs{opacity:1}
.c-thumbs + .c-flag,.c-thumbs + .c-beer{margin-left:10px}
.c-thumb{font-size:17px;font-weight:700;line-height:1;cursor:pointer;color:var(--flag-off);transition:color .15s}
.c-thumb.up:hover{color:#4caf50}
.c-thumb.down:hover{color:#e05252}
.c-flag.on{color:#e05252;opacity:1}
.triage{display:flex;gap:6px;margin-top:auto;padding-top:9px;border-top:1px solid var(--divider)}
.triage button{flex:1;font-size:10px;font-weight:700;font-family:inherit;padding:6px;border-radius:6px;cursor:pointer;border:1px solid var(--well-bd);background:var(--well);color:var(--tsec);display:flex;align-items:center;justify-content:center;gap:4px;z-index:2}
.triage .accept:hover{border-color:var(--value);color:var(--value)}
.triage .dismiss:hover{border-color:#e05252;color:#e05252}
.theme-fab{position:fixed;bottom:20px;right:20px;width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--card-bd);color:var(--tsec);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:60;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.theme-fab:hover{color:var(--tprimary);border-color:var(--card-hover)}
.newjob-fab{position:fixed;bottom:120px;right:20px;width:46px;height:46px;border-radius:50%;background:var(--value);border:none;color:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:400;line-height:1;z-index:61;box-shadow:0 4px 20px rgba(212,252,0,.35);transition:all .15s}
.newjob-fab:hover{filter:brightness(1.06);box-shadow:0 6px 24px rgba(212,252,0,.5)}
.focus-fab{position:fixed;bottom:70px;right:20px;width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--card-bd);color:var(--tsec);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;z-index:60;box-shadow:0 4px 16px rgba(0,0,0,.3);transition:all .15s}
.focus-fab:hover{color:#e0a854;border-color:#e0a854}
.focus-fab.on{background:#e0a854;border-color:#e0a854;color:#111}
.focus-fab.on:hover{color:#111;filter:brightness(1.06)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:80}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:94vw;background:var(--card);border-left:1px solid var(--card-bd);transform:translateX(100%);transition:transform .24s cubic-bezier(.3,.9,.3,1);z-index:81;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:18px 20px;border-bottom:1px solid var(--divider);display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.drawer-title{font-size:17px;font-weight:700;color:var(--tprimary);line-height:1.3}
.drawer-close{background:none;border:none;color:var(--tmut);font-size:20px;cursor:pointer}
.drawer-body{padding:18px 20px;overflow-y:auto}
.d-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--divider);font-size:12.5px}
.d-row .k{color:var(--tmut)}.d-row .v{color:var(--tprimary);font-weight:600;text-align:right}
.d-soon{margin-top:20px;padding:14px;border:1px dashed var(--card-bd);border-radius:8px;font-size:11.5px;color:var(--tmut);line-height:1.5;text-align:center}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tmut);margin-bottom:5px}
.fld input,.fld select{width:100%;background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:9px 10px;font-size:13px;color:var(--tprimary);font-family:inherit}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--value)}
.fld .two{display:flex;gap:10px}
.drawer-foot{padding:14px 20px;border-top:1px solid var(--divider);display:flex;gap:10px}
.drawer-foot button{flex:1;padding:10px;border-radius:8px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
.btn-cancel{background:var(--well);border:1px solid var(--well-bd);color:var(--tsec)}
.btn-create{background:var(--value);border:none;color:#141414}

/* ===== unsaved confirm ===== */
.jp-confirm{display:none;position:fixed;inset:0;z-index:300;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
.jp-confirm.open{display:flex}
.jp-confirm-box{background:var(--card);border:1px solid var(--card-bd);border-radius:12px;padding:20px 22px;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.jp-confirm-t{font-size:15px;font-weight:800;color:var(--tprimary);margin-bottom:8px}
.jp-confirm-d{font-size:12.5px;color:var(--tsec);line-height:1.5;margin-bottom:18px}
.jp-confirm-btns{display:flex;gap:8px;justify-content:flex-end}
.jp-confirm-btns button{font-size:12px;font-weight:700;font-family:inherit;padding:8px 14px;border-radius:7px;cursor:pointer;border:1px solid var(--well-bd)}
.jp-cf-cancel{background:var(--well);color:var(--tsec)}
.jp-cf-discard{background:none;color:#e0736f;border-color:rgba(224,82,82,.4)}
.jp-cf-save{background:var(--value);color:#000;border-color:var(--value)}
/* ===== JOB PAGE (focus mode) ===== */
.jobpage{display:none;position:fixed;inset:0;z-index:120;align-items:center;justify-content:center;padding:32px;opacity:0;transition:opacity .24s ease}
.jobpage.open{display:flex}
.jobpage.shown{opacity:1}
.jobpage.opening .jp-page{animation:jpIn .32s cubic-bezier(.2,.9,.3,1.05) both}
@keyframes jpIn{from{transform:scale(.965) translateY(10px);opacity:.3}to{transform:none;opacity:1}}
.jobpage-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
body.light .jobpage-scrim{background:rgba(40,40,38,.4)}
body.jobview .board-wrap,body.jobview .control-row{filter:none}
.jp-page{position:relative;width:78vw;min-width:900px;max-width:1400px;height:auto;min-height:848px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;background:var(--page);border:1px solid var(--card-bd);border-radius:16px;box-shadow:0 40px 100px rgba(0,0,0,.65);padding:24px 30px 0 40px}
.jp-page.tab-overview,.jp-page.tab-history{height:848px;max-height:848px}
.jp-mainspine{position:absolute;left:24px;top:24px;bottom:24px;width:4px;border-radius:2px;background:var(--col)}
.jp-page::-webkit-scrollbar{width:8px}.jp-page::-webkit-scrollbar-thumb{background:var(--sb);border-radius:8px;border:2px solid transparent;background-clip:padding-box}.jp-page::-webkit-scrollbar-track{background:transparent}
.jp-head{position:relative;flex-shrink:0;background:#181818;border:1px solid var(--card-bd);border-radius:12px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.jp-headcol{flex:1;min-width:0}
.jp-headactions{display:flex;align-items:center;gap:10px;flex-shrink:0}
body.light .jp-head{background:#fff}
.jp-hrow{display:flex;align-items:center;gap:16px}
.jp-back{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tsec);background:none;border:1px solid var(--well-bd);border-radius:7px;padding:6px 12px;cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .15s;margin-bottom:4px}
.jp-back:hover{color:var(--tprimary);border-color:var(--ring);box-shadow:0 0 0 1px var(--ring)}
.jp-back.savemode{background:var(--value);color:#000;border-color:var(--value);font-weight:800;box-shadow:0 0 0 1px var(--value),0 0 16px 1px color-mix(in srgb,var(--value) 45%,transparent)}
.jp-back.savemode:hover{background:#3a3a38;color:#fff;border-color:#3a3a38;box-shadow:0 0 0 1px #3a3a38}
.jp-title{font-size:21px;font-weight:800;color:var(--tprimary);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;padding:2px 4px 2px 0}
.jp-client{font-size:13px;color:var(--teal);border:1px solid var(--teal);border-radius:20px;padding:6px 16px;font-weight:600;flex-shrink:0}
.jp-sp{flex:1}
.jp-statusdd{position:relative;flex-shrink:0;display:inline-flex;align-items:center}
.jp-statusbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--col);border:1px solid var(--col);border-radius:8px;padding:7px 11px;cursor:pointer;background:color-mix(in srgb,var(--col) 8%,transparent);font-family:inherit}
.jp-statusbtn .chev{font-size:8px;opacity:.7}
.jp-statusmenu{position:fixed;background:var(--card);border:1px solid var(--card-bd);border-radius:9px;padding:4px;min-width:180px;z-index:400;display:none;box-shadow:0 12px 34px rgba(0,0,0,.6);max-height:340px;overflow-y:auto}
.jp-statusmenu.open{display:block}
.jp-statusmenu button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;color:var(--tsec);font-family:inherit;font-size:12px;font-weight:600;padding:8px 9px;border-radius:6px;cursor:pointer;text-align:left}
.jp-statusmenu button:hover{background:var(--well);color:var(--tprimary)}
.jp-statusmenu .dot{width:8px;height:8px;border-radius:3px;flex-shrink:0}
.jp-val{font-size:19px;font-weight:800;font-family:'SFMono-Regular',monospace;color:var(--value);flex-shrink:0;letter-spacing:-.02em}
.jp-flag{font-size:16px;color:var(--flag-off);cursor:pointer;flex-shrink:0}
.jp-flag.on{color:#e05252}
.jp-meta{display:flex;gap:18px;margin-top:11px;padding-left:2px;flex-wrap:wrap}
.jp-meta span{font-size:11px;color:var(--tmut);font-weight:600}
.jp-meta b{color:var(--tsec);font-family:'SFMono-Regular',monospace;font-weight:700}
.jp-sub{display:flex;align-items:center;gap:2px;margin-top:16px;flex-shrink:0;border-bottom:1px solid var(--nav-bd)}
.jp-sub-sp{flex:1}
.jp-tab{position:relative;padding:11px 18px;font-size:13px;font-weight:500;color:var(--tmut);cursor:pointer;background:none;border:none;font-family:var(--font);margin-bottom:-1px;transition:color .15s}
.jp-tab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--value);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease}
.jp-tab:hover{color:var(--tprimary)}
.jp-tab:hover::after{transform:scaleX(1)}
.jp-tab.active{color:var(--value);font-weight:600}
.jp-tab.active::after{transform:scaleX(1)}
.jp-body{margin-top:18px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:30px;scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
.jp-body::-webkit-scrollbar{width:8px}.jp-body::-webkit-scrollbar-thumb{background:var(--sb);border-radius:8px;border:2px solid transparent;background-clip:padding-box}.jp-body::-webkit-scrollbar-track{background:transparent}
.jp-grid{display:grid;grid-template-columns:38fr 62fr;gap:16px;align-items:stretch}
.jp-lcol{display:flex;flex-direction:column;gap:14px}
.jc{background:var(--card);border:1px solid var(--card-bd);border-radius:11px;padding:15px 17px}
.jc-h{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tmut);margin:0 0 13px;padding-bottom:11px;border-bottom:1px solid var(--divider);display:flex;align-items:center;justify-content:space-between}
.jc-h .lnk{font-size:11px;color:#5b8fd6;cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0}
.jc-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px}
.jc-k{color:var(--tmut)}.jc-v{color:var(--tprimary);font-weight:600;text-align:right}.jc-v.mono{font-family:'SFMono-Regular',monospace}
/* pricing card */
.jp-qtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.jp-qval{font-size:22px;font-weight:800;font-family:'SFMono-Regular',monospace;color:var(--value);letter-spacing:-.02em}
.jp-qsrc{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:20px;border:1px solid;flex-shrink:0}
.jp-qsrc.quote{color:var(--teal);border-color:var(--teal)}
.jp-qsrc.manual{color:#f5a623;border-color:#f5a623}
.jp-qsub{font-size:11px;color:var(--tmut);margin-top:4px}
.jp-qbtn{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;font-weight:700;border-radius:7px;padding:8px 13px;cursor:pointer;border:none;font-family:inherit;transition:all .15s}
.jp-qbtn.primary{color:#000;background:var(--value)}
.jp-qbtn.primary:hover{color:#fff;background:#3a3a38}
.jp-qbtn.ghost{color:var(--tsec);background:var(--well);border:1px solid var(--well-bd)}
.jp-qbtn.ghost:hover{color:var(--tprimary);border-color:var(--tmut)}
/* notes preview + timeline */
.jp-note{padding:10px 0;border-bottom:1px solid var(--divider)}
.jp-note:last-of-type{border-bottom:none}
.jp-ntop{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.jp-nt{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:20px;border:1px solid}
.jp-nt.note{color:var(--tsec);border-color:#5a5a5a}
.jp-nt.call{color:#5b8fd6;border-color:#5b8fd6}
.jp-nt.email{color:#b28fd6;border-color:#b28fd6}
.jp-nt.system{color:var(--teal);border-color:var(--teal)}
.jp-nt.variation{color:#f5a623;border-color:#f5a623}
.jp-nwho{font-size:11px;color:var(--tsec);font-weight:600}
.jp-nwhen{font-size:10px;color:var(--place);margin-left:auto;font-family:'SFMono-Regular',monospace}
.jp-nbody{font-size:12.5px;color:var(--tprimary);line-height:1.5;opacity:.85}
.jp-viewall{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:13px;padding-top:11px;border-top:1px solid var(--divider);font-size:11px;color:#5b8fd6;cursor:pointer;font-weight:600}
/* details form */
.jp-fld{margin-bottom:14px}
.jp-fld label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tmut);margin-bottom:5px}
.jp-fld input,.jp-fld select,.jp-fld textarea{width:100%;background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:9px 10px;font-size:13px;color:var(--tprimary);font-family:inherit}
.jp-fld input:focus,.jp-fld select:focus,.jp-fld textarea:focus{outline:none;border-color:var(--value)}
.jp-two{display:flex;gap:12px}.jp-two>div{flex:1}
.jp-save{margin-top:6px;background:var(--value);color:#000;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .15s}
.jp-save:hover{color:#fff;background:#3a3a38}
/* history tab */
.jph-list{display:flex;flex-direction:column}
.jph-row{padding:11px 0;border-bottom:1px solid var(--divider)}
.jph-row:last-child{border-bottom:none}
.jph-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px}
.jph-field{font-weight:700;color:var(--tprimary)}
.jph-old{color:var(--tmut);text-decoration:line-through;font-family:'SFMono-Regular',monospace;font-size:12px}
.jph-arr{color:var(--tmut);font-size:11px}
.jph-new{color:var(--value);font-weight:600;font-family:'SFMono-Regular',monospace;font-size:12px}
.jph-meta{font-size:10px;color:var(--tmut);margin-top:4px;font-family:'SFMono-Regular',monospace}
/* notes tab */
.jp-notes-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.jp-filter{display:flex;gap:6px;flex-wrap:wrap}
.jp-fchip{font-size:11px;font-weight:600;padding:5px 12px;border-radius:20px;border:1px solid var(--well-bd);background:var(--well);color:var(--tsec);cursor:pointer;font-family:inherit;transition:all .15s}
.jp-fchip:hover{color:var(--tprimary)}
.jp-fchip.active{background:var(--value);color:#000;border-color:var(--value)}
.jp-addnote{display:flex;gap:8px;margin-bottom:16px;align-items:flex-start}
.jp-addnote select{background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:9px;font-size:12px;color:var(--tprimary);font-family:inherit;flex-shrink:0}
.jp-addnote input{flex:1;background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:9px 11px;font-size:13px;color:var(--tprimary);font-family:inherit}
.jp-addnote input:focus{outline:none;border-color:var(--value)}
.jp-addnote button{background:var(--value);color:#000;border:none;border-radius:7px;padding:9px 15px;font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;flex-shrink:0}
.jp-timeline .jp-note{padding:13px 0}
.jp-empty{text-align:center;padding:40px 20px;color:var(--tmut);font-size:12px;font-style:italic}

/* ===== AUTH OVERLAY (B1) ===== */
#auth-overlay{position:fixed;inset:0;z-index:10000;background:var(--page);display:flex;align-items:center;justify-content:center;padding:20px}
#auth-overlay.hidden{display:none}
.auth-card{background:var(--card);border:1px solid var(--card-bd);border-radius:16px;padding:36px 32px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.auth-brand{font-size:28px;font-weight:800;letter-spacing:-.04em;color:var(--tprimary);text-align:center;margin-bottom:4px}
.auth-brand .iq{color:var(--value)}
.auth-brand .sub{font-weight:300;opacity:.7;letter-spacing:0}
.auth-sub{text-align:center;font-size:12px;color:var(--tmut);margin-bottom:24px}
.auth-input{width:100%;box-sizing:border-box;padding:12px 14px;margin-bottom:10px;background:var(--well);border:1px solid var(--well-bd);border-radius:8px;color:var(--tprimary);font-size:14px;font-family:var(--font);outline:none}
.auth-input:focus{border-color:var(--value)}
.auth-btn{width:100%;padding:12px;margin-top:6px;background:var(--value);color:#1a1a18;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font);transition:opacity .15s}
.auth-btn:hover{opacity:.9}
.auth-btn:disabled{opacity:.5;cursor:default}
.auth-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#ef4444;font-size:12px;padding:9px 12px;border-radius:7px;margin-bottom:12px;display:none}
.auth-error.show{display:block}

/* ===== QUOTE LOGIC (B3b) ===== */
.logic-view{padding:22px 0 60px}
.logic-title{font-size:22px;font-weight:800;margin:0 0 4px;color:var(--tprimary)}
.logic-sub{font-size:12px;color:var(--tmut);margin-bottom:18px}
.logic-subnav{display:flex;gap:2px;border-bottom:1px solid var(--nav-bd);margin-bottom:20px;flex-wrap:wrap}
.logic-navbtn{position:relative;padding:10px 15px;font-size:12.5px;font-weight:500;color:var(--tmut);background:none;border:none;font-family:inherit;cursor:pointer;margin-bottom:-1px}
.logic-navbtn.active{color:var(--value);font-weight:600}
.logic-navbtn.active::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--value)}
.logic-navbtn:hover{color:var(--tprimary)}
.logic-section{display:none}.logic-section.active{display:block}
.logic-view .msg{background:rgba(75,179,168,.1);border:1px solid rgba(75,179,168,.28);color:#7fd0c6;font-size:12px;padding:9px 12px;border-radius:8px;margin-bottom:14px}
.logic-view .io-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.logic-view .btn{font-size:11px;font-weight:600;padding:7px 12px;border-radius:7px;border:1px solid var(--well-bd);background:var(--well);color:var(--tsec);cursor:pointer;font-family:inherit}
.logic-view .btn:hover{color:var(--tprimary);border-color:var(--tmut)}
.logic-view .btn.primary,.logic-view .btn.btn-primary{background:var(--value);color:#000;border-color:var(--value)}
.logic-view .btn.btn-danger{color:#e0736f;border-color:rgba(224,82,82,.4);background:none}
.logic-view .btn.btn-sm{padding:2px 8px;font-size:10px}
.logic-view table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:8px}
.logic-view .tbl th{text-align:left;font-size:10px;font-weight:600;color:var(--tmut);text-transform:uppercase;letter-spacing:.05em;padding:7px 8px;border-bottom:1px solid var(--card-bd)}
.logic-view .tbl th.num{text-align:right}
.logic-view .tbl td{padding:3px 6px;border-bottom:1px solid var(--divider)}
.logic-view .tbl input,.logic-view .tbl select,.logic-field{background:var(--well);border:1px solid var(--well-bd);border-radius:6px;padding:6px 8px;font-size:12.5px;color:var(--tprimary);font-family:inherit;box-sizing:border-box;width:100%}
.logic-view .tbl input.num{text-align:right;font-family:'SFMono-Regular',monospace}
.logic-view .tbl input:focus,.logic-view .tbl select:focus,.logic-field:focus{outline:none;border-color:var(--value)}
.pricing-group-title{font-size:11px;font-weight:700;color:var(--tmut);text-transform:uppercase;letter-spacing:.08em;margin:16px 0 6px}
.lab-group-header td{background:var(--well);font-size:11px;font-weight:700;color:var(--tprimary);padding:8px}
.incexc-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.incexc-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tsec);margin:0 0 10px}
.incexc-chip{display:flex;align-items:center;gap:9px;background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:8px 11px;margin-bottom:6px;font-size:12.5px}
.incexc-handle{color:#555;cursor:grab;font-size:11px}
.incexc-label{flex:1}
.incexc-x{color:#7a5a5a;cursor:pointer}
.incexc-chip.drop-above{border-top:2px solid var(--value)}
.incexc-chip.drop-below{border-bottom:2px solid var(--value)}
.incexc-add{display:flex;gap:7px;margin-top:8px}
.incexc-add input{flex:1}

/* Pricing/long-section scroll (B3b fix v2) */
#tmpl-pricing, #tmpl-labour{max-height:calc(100vh - 220px);overflow-y:auto;padding-right:8px;padding-bottom:80px;scroll-padding-bottom:80px}
#tmpl-pricing::-webkit-scrollbar,#tmpl-labour::-webkit-scrollbar{width:10px}
#tmpl-pricing::-webkit-scrollbar-thumb,#tmpl-labour::-webkit-scrollbar-thumb{background:var(--sb);border-radius:5px}
#tmpl-pricing::-webkit-scrollbar-thumb:hover,#tmpl-labour::-webkit-scrollbar-thumb:hover{background:var(--sb-hover)}
/* keep group headers visible while scrolling */
#tmpl-pricing .pricing-group-title{position:sticky;top:0;background:var(--page);z-index:2;padding-top:8px}
/* ensure the whole logic view leaves room at the bottom of the page */
.logic-view{padding-bottom:100px}
.pg-grip{color:#555;cursor:grab;text-align:center;user-select:none;font-size:12px;letter-spacing:-2px}
.pg-grip:active{cursor:grabbing}
.logic-view .tbl tr:hover .pg-grip{color:var(--tsec)}

/* Pricing drag — clean preview (B3b v2) */
.logic-view .tbl tr.pg-dragging{opacity:.45}
.logic-view .tbl tr.pg-drop-above td{box-shadow:inset 0 2px 0 0 var(--value)}
.logic-view .tbl tr.pg-drop-below td{box-shadow:inset 0 -2px 0 0 var(--value)}
.logic-view .tbl tr td{transition:box-shadow .08s}
.pg-grip{color:#555;cursor:grab;text-align:center;user-select:none;font-size:12px;letter-spacing:-2px}
.pg-grip:active{cursor:grabbing}
.logic-view .tbl tr:hover .pg-grip{color:var(--tsec)}



/* ===== Job popup — Files tab ===== */
.jp-file-upload{border:2px dashed var(--well-bd);border-radius:10px;padding:22px 18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:14px;position:relative}
.jp-file-upload:hover{border-color:rgba(255,255,255,.28)}
.jp-file-upload.drag-over{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.03)}
.jp-file-uploadicon{font-size:22px;color:var(--tsec);margin-bottom:5px}
.jp-file-uploadlabel{font-size:13px;font-weight:600;color:var(--tprimary);margin-bottom:10px}
.jp-file-upload select{background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:6px 10px;font-size:12px;color:var(--tprimary);font-family:inherit;cursor:pointer}
.jp-file-list{display:flex;flex-direction:column;gap:8px}












/* ===== NOTES (job popup) ===== */
.nt-wrap{display:flex;flex-direction:column;gap:16px}
.nt-composer{background:var(--card);border:1px solid var(--card-bd);border-radius:12px;padding:13px 15px}
.nt-composer .nt-editable{min-height:150px}
.nt-composer textarea{width:100%;background:var(--well);border:1px solid var(--well-bd);border-radius:8px;padding:10px 12px;font-size:13px;color:var(--tprimary);font-family:inherit;resize:none;height:52px;box-sizing:border-box;margin-bottom:10px}
.nt-composer textarea:focus{outline:none;border-color:var(--value)}
.nt-composer-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nt-typebtns{display:flex;gap:6px}
.nt-typebtn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--tsec);background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:6px 11px;cursor:pointer;font-family:inherit}
.nt-typebtn i{font-size:14px}
.nt-typebtn.active{color:var(--c,#fff);border-color:var(--c,var(--value));background:color-mix(in srgb,var(--c,var(--value)) 12%,transparent)}
.nt-remindbtn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--tsec);background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:6px 11px;cursor:pointer;font-family:inherit}
.nt-remindbtn i{font-size:14px}
.nt-remindbtn.active{color:#e5a94f;border-color:rgba(229,169,79,.4);background:rgba(229,169,79,.1)}
.nt-sp{flex:1}
.nt-addbtn{font-size:12px;font-weight:700;color:#111;background:var(--value);border:none;border-radius:7px;padding:7px 16px;cursor:pointer;font-family:inherit}
.nt-addbtn:hover{filter:brightness(1.05)}
.nt-pinned{display:flex;flex-direction:column;gap:8px}
.nt-section-label{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--tmut);text-transform:uppercase;display:flex;align-items:center;gap:5px;margin-bottom:2px}
.nt-filterbar{display:flex;gap:8px;flex-wrap:wrap}
.nt-fchip{font-size:12px;font-weight:600;color:var(--tsec);background:none;border:1px solid var(--card-bd);border-radius:20px;padding:6px 15px;cursor:pointer;font-family:inherit;transition:all .12s}
.nt-fchip:hover{color:var(--tprimary);border-color:var(--card-hover)}
.nt-fchip.active{color:#fff;border-color:var(--value);background:none}
.nt-timeline{display:flex;flex-direction:column;gap:8px}

.nt-item{padding:11px 14px;border-radius:9px;transition:background .12s}
.nt-item.accented{background:var(--card);border-top:1px solid var(--card-bd);border-right:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd);border-left:3px solid #555;border-radius:0 9px 9px 0;padding:12px 15px}
.nt-item.accented:hover{background:var(--well)}
.nt-item:hover{background:var(--well)}
.nt-item.pinned{border-left-color:var(--value);background:color-mix(in srgb,var(--value) 5%,var(--card))}
.nt-top{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.nt-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;border-radius:4px;padding:2px 7px;text-transform:uppercase;letter-spacing:.03em}
.nt-badge i{font-size:11px}
.nt-who{font-size:11px;color:var(--tsec)}
.nt-when{font-size:10px;color:var(--tmut)}
.nt-actions{display:flex;gap:9px;opacity:0;transition:opacity .12s}
.nt-item:hover .nt-actions{opacity:1}
.nt-actions i{font-size:14px;color:var(--tmut);cursor:pointer}
.nt-actions i:hover{color:var(--tprimary)}
.nt-body{font-size:14px;color:var(--tprimary);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.nt-body.sys{font-size:12px;color:var(--tsec);font-style:italic}
.nt-edited{font-size:10px;color:var(--tmut);font-style:italic}
.nt-remind{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#e5a94f;background:rgba(229,169,79,.1);border:1px solid rgba(229,169,79,.25);border-radius:6px;padding:4px 9px;margin-top:8px;cursor:pointer}
.nt-remind i{font-size:12px}
.nt-remind.overdue{color:#e88;background:rgba(224,82,82,.1);border-color:rgba(224,82,82,.3)}
.nt-remind:hover{filter:brightness(1.1)}

/* ===== OVERVIEW (job popup) ===== */
.jp-rcol{position:relative;min-height:0}

.ov-fields{display:flex;flex-direction:column}
.ov-frow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--divider)}
.ov-frow:last-child{border-bottom:none}
.ov-frow i{font-size:15px;color:var(--tmut);width:16px;text-align:center}
.ov-fl{font-size:12px;color:var(--tsec);flex:1}
.ov-fv{font-size:13px;font-weight:600;color:var(--tprimary)}
.ov-fv.none{font-weight:400;color:var(--tmut);font-style:italic;font-size:12px}
.ov-editpencil{font-size:14px;color:var(--tmut);cursor:pointer}
.ov-editpencil:hover{color:var(--tprimary)}
.ov-editactions{display:flex;gap:8px}
.ov-cancel,.ov-save{font-size:11px;font-weight:600;border-radius:6px;padding:5px 12px;cursor:pointer;font-family:inherit;border:1px solid var(--well-bd)}
.ov-cancel{background:var(--well);color:var(--tsec)}
.ov-save{background:var(--value);color:#111;border-color:var(--value)}
/* pricing */
.ov-pricing .ov-psrc{font-size:10px;font-weight:600;display:inline-flex;align-items:center;gap:5px;text-transform:none;letter-spacing:0;border-radius:20px;padding:4px 11px}
.ov-pricing .ov-psrc.quote{color:#8fd14f;background:rgba(143,209,79,.12);border:1px solid rgba(143,209,79,.3)}
.ov-pricing .ov-psrc.manual{color:#e5a94f;background:rgba(229,169,79,.12);border:1px solid rgba(229,169,79,.35)}
.ov-pricing .ov-psrc i{font-size:12px}
.ov-pval{font-size:27px;font-weight:700;letter-spacing:-.01em;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.ov-pval.quote{color:var(--value)}
.ov-pval.manual{color:#e5a94f}
.ov-pvicon{font-size:15px}
.ov-pval.quote .ov-pvicon{color:#8fd14f}
.ov-pvicon.revert{color:#8fd14f;cursor:pointer;font-size:17px}
.ov-pvicon.revert:hover{color:#a5e86a}
.ov-pstrike{color:#999;text-decoration:line-through}
.ov-psub{font-size:11px;color:var(--tmut);margin-bottom:14px}
.ov-pbtns{display:flex;gap:8px}
.ov-pbtn{flex:1;font-size:12px;font-weight:600;color:var(--tsec);background:var(--well);border:1px solid var(--well-bd);border-radius:8px;padding:9px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px}
.ov-pbtn:hover{color:var(--tprimary);border-color:var(--card-hover)}
.ov-pbtn i{font-size:14px}
.ov-pbtn.wide{flex:1;letter-spacing:.03em}
.ov-pbtn.icon{flex:0 0 auto;padding:9px 13px}
/* pinned + activity */
.ov-pinned{display:flex;flex-direction:column;gap:6px}
.ov-activity{display:flex;flex-direction:column;gap:2px}
.ov-addnote{width:100%;margin-top:12px;font-size:11px;font-weight:600;color:var(--tsec);background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:8px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:5px}
.ov-addnote:hover{color:var(--tprimary)}
.ov-addnote i{font-size:13px}

/* ===== Files tab refresh ===== */
.jp-file-uploadicon{font-size:24px;color:var(--tsec);display:block;margin-bottom:6px}
.jp-file-uploadsub{font-size:11px;color:var(--tmut);margin-bottom:12px}

.jp-file.uploading{border-color:rgba(77,166,255,.25)}
.jp-file-bar{height:3px;background:var(--well-bd);border-radius:2px;margin-top:6px;overflow:hidden}
.jp-file-bar-fill{height:100%;background:#5dccff;border-radius:2px;width:40%;animation:fileBar 1.1s ease-in-out infinite}
@keyframes fileBar{0%{width:10%}50%{width:80%}100%{width:10%}}
.jp-file-status{font-size:11px;color:#5dccff;font-weight:600;flex-shrink:0}
.spin{animation:spin360 .9s linear infinite;display:inline-block}
@keyframes spin360{to{transform:rotate(360deg)}}
.jp-file-btn i{font-size:15px}

/* ===== ⋯ actions menu ===== */
.jp-moredd{position:relative;margin-left:8px;z-index:50}
.jp-morebtn{width:36px;height:36px;border-radius:8px;border:1px solid var(--card-bd);background:var(--card);color:var(--tsec);cursor:pointer;display:flex;align-items:center;justify-content:center}
.jp-morebtn i{font-size:18px}
.jp-morebtn:hover{color:var(--tprimary)}
.jp-moremenu{position:absolute;right:0;top:42px;width:174px;background:var(--card);border:1px solid var(--card-bd);border-radius:9px;padding:5px;box-shadow:0 12px 30px rgba(0,0,0,.5);z-index:200;display:none}
.jp-moremenu.open{display:block}
.jp-moremenu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;font-size:13px;color:var(--tprimary);background:none;border:none;border-radius:6px;cursor:pointer;font-family:inherit;text-align:left}
.jp-moremenu button i{font-size:16px;color:var(--tmut)}
.jp-moremenu button:hover{background:var(--well)}
.jp-moremenu button.danger{color:#e88}
.jp-moremenu button.danger i{color:#e88}

/* ===== dialled-back save & close ===== */
.jp-back{font-size:12px;font-weight:500;color:var(--tsec);background:none;border:1px solid var(--card-bd);border-radius:7px;padding:7px 14px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.jp-back i{font-size:14px}
.jp-back:hover{color:var(--tprimary);border-color:var(--card-hover)}

/* ===== note inline edit ===== */
.nt-item.editing{background:var(--well);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:12px 14px}
.nt-editbox{width:100%;background:var(--card);border:1px solid var(--well-bd);border-radius:7px;padding:9px 11px;font-size:14px;color:var(--tprimary);font-family:inherit;resize:none;min-height:48px;box-sizing:border-box;margin:8px 0 9px}
.nt-editrow{display:flex;gap:8px;justify-content:flex-end}
.nt-ecancel{font-size:11px;font-weight:600;color:var(--tsec);background:var(--card);border:1px solid var(--well-bd);border-radius:6px;padding:6px 13px;cursor:pointer;font-family:inherit}
.nt-esave{font-size:11px;font-weight:700;color:#111;background:var(--value);border:none;border-radius:6px;padding:6px 15px;cursor:pointer;font-family:inherit}
/* larger always-visible note actions */
.nt-actions{display:flex;gap:11px;opacity:1}
.nt-actions i{font-size:16px;color:var(--tmut);cursor:pointer}
.nt-actions i:hover{color:var(--tprimary)}

/* ===== history timeline ===== */
.jph-timeline{display:flex;flex-direction:column;gap:20px}
.jc-sub{font-weight:400;text-transform:none;letter-spacing:0;color:var(--tmut);font-size:10px}
.jph-day{display:flex;flex-direction:column}
.jph-dayhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.jph-daylabel{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--tsec)}
.jph-dayline{flex:1;height:1px;background:var(--divider)}
.jph-daycount{font-size:10px;color:var(--tmut)}
.jph-daybody{display:flex;flex-direction:column}
.jph-item{display:flex;align-items:flex-start;gap:12px;padding:8px 0}
.jph-old{color:var(--tmut)}
.jph-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0}
.jph-body{flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.jph-text{font-size:14px;color:var(--tsec)}
.jph-text b{color:var(--tprimary);font-weight:600}
.jph-arr{color:var(--tmut);margin:0 2px}
.jph-meta{font-size:11px;color:var(--tmut);white-space:nowrap}

/* ===== inline price edit ===== */
.ov-pedit{display:flex;align-items:center;gap:4px;margin-bottom:2px}
.ov-pcur{font-size:24px;font-weight:700;color:var(--value)}
#ov-pinput{flex:1;font-size:24px;font-weight:700;color:var(--value);background:var(--well);border:1px solid var(--well-bd);border-radius:8px;padding:6px 10px;font-family:inherit;width:100%;box-sizing:border-box}
#ov-pinput:focus{outline:none;border-color:var(--value)}
.ov-pbtn.save{color:#111;background:var(--value);border-color:var(--value);font-weight:700}

/* ===== Rich-text note composer ===== */
.nt-fmtbar{display:flex;gap:4px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--well-bd)}
.nt-fmtbtn{width:30px;height:28px;border-radius:6px;border:1px solid transparent;background:none;color:var(--tsec);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nt-fmtbtn i{font-size:16px}
.nt-fmtbtn:hover{background:var(--well);color:var(--tprimary)}
.nt-editable{min-height:48px;max-height:none;background:var(--well);border:1px solid var(--well-bd);border-radius:8px;padding:11px 13px;font-size:14px;color:var(--tprimary);font-family:inherit;line-height:1.55;outline:none;overflow:visible;word-break:break-word}
.nt-editable:focus{border-color:rgba(255,255,255,.28)}
.nt-editable:empty:before{content:attr(data-placeholder);color:var(--place)}
.nt-editable ul,.nt-editable ol{margin:4px 0;padding-left:22px}
.nt-editable b,.nt-editable strong{font-weight:700}
.nt-attachrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nt-staged{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--tsec);background:var(--well);border:1px solid var(--well-bd);border-radius:6px;padding:4px 8px}
.nt-staged i:first-child{font-size:13px}
.nt-staged-x{font-size:13px;cursor:pointer;color:var(--tmut)}
.nt-staged-x:hover{color:var(--danger,#e05252)}
.nt-attachbtn{width:34px;height:34px;border-radius:7px;border:1px solid var(--well-bd);background:var(--well);color:var(--tsec);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nt-attachbtn i{font-size:16px}
.nt-attachbtn:hover{color:var(--tprimary);border-color:var(--card-hover)}
/* note body rich formatting */
.nt-body ul,.nt-body ol{margin:5px 0;padding-left:22px}
.nt-body b,.nt-body strong{font-weight:700}
.nt-body li{margin:2px 0}
/* attachments shown on a note */
.nt-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.nt-att{display:inline-flex;align-items:center;gap:6px;max-width:220px;font-size:11px;color:var(--tsec);background:var(--well);border:1px solid var(--well-bd);border-radius:7px;padding:5px 9px;cursor:pointer;font-family:inherit}
.nt-att i{font-size:14px;flex-shrink:0}
.nt-att span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-att:hover{border-color:rgba(255,255,255,.3);color:var(--tprimary)}


/* ===== X close button (replaces Save & close) ===== */
.jp-closebtn{width:36px;height:36px;border-radius:8px;border:1px solid var(--value);background:var(--value);color:#111;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:2px;transition:all .15s}
.jp-closebtn i{font-size:19px}
.jp-closebtn:hover{color:#111;filter:brightness(1.08)}

/* ===== Overview read-only notes (Option A) ===== */
.ov-noteshead{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--tmut);text-transform:uppercase;margin-bottom:18px}
.ov-noteshead .lnk{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#5b8fd6;cursor:pointer}
.ov-notelist{display:flex;flex-direction:column;gap:22px}
.ovn{border-left:3px solid #7d8fa8;padding-left:16px}
.ovn.pinned{border-left-color:var(--value)}
.ovn-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ovn-type{font-size:10px;font-weight:700;letter-spacing:.05em}
.ovn-pinlead{font-size:13px;color:var(--value);cursor:pointer}
.ovn-pin{font-size:14px;color:var(--tmut);cursor:pointer;opacity:0;transition:opacity .12s}
.ovn:hover .ovn-pin{opacity:1}
.ovn-pin:hover{color:var(--tsec)}
.ovn-pin.on{color:var(--value);opacity:1}
.ovn-body{font-size:13.5px;color:var(--tprimary);line-height:1.55;white-space:pre-wrap;word-break:break-word}
.ovn-body ul,.ovn-body ol{margin:4px 0;padding-left:20px}
.ovn-body b,.ovn-body strong{font-weight:700}


/* ===== Overview notes Option C (card back, pinned grouped) ===== */
.ov-pinlabel{font-size:9px;font-weight:700;color:var(--value);letter-spacing:.06em;margin:2px 0 14px;display:flex;align-items:center;gap:5px}
.ov-pinlabel i{font-size:12px}
.ov-notescard{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.ov-notescard .ov-notelist{gap:22px}
.jp-grid{position:relative}
/* the right column matches the left column's height; notes fade out if they overflow */
.jp-rcol{min-height:0}
.ov-notescard .ov-notes-scroll{overflow:hidden;position:relative;flex:1 1 0;min-height:0}
.ov-notescard:after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom,transparent,var(--card));pointer-events:none;opacity:0;transition:opacity .2s}
.ov-notescard.overflowing:after{opacity:1}
.ov-notescard .ov-recentgroup{margin-top:18px;padding-top:18px;border-top:1px solid var(--divider)}

/* ===== Quote page: manual override warning ===== */
.quote-override-warn{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:10px 14px 10px 16px;background:rgba(229,169,79,0.08);border-left:3px solid #e0a854;border-radius:0 7px 7px 0;font-size:12px;line-height:1.4;color:#c9a878}
.quote-override-warn i{flex-shrink:0;font-size:15px}
.quote-override-warn i{font-size:15px;color:#e0a854;flex-shrink:0}
.quote-override-warn b{color:#e5b878;font-weight:700}
.qow-revert{color:#5b8fd6;cursor:pointer}
.qow-revert:hover{text-decoration:underline}

/* ===== Quote Project Details: read-only + edit controls ===== */
.pd-title-row{display:flex;align-items:center;justify-content:space-between}
.pd-editctl{display:flex;gap:6px}
.pd-editbtn,.pd-savebtn,.pd-cancelbtn{font-size:11px;font-weight:600;border-radius:6px;padding:5px 11px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--card-bd,rgba(255,255,255,.12));background:var(--card,#1e1e1e);color:var(--tsec,#aaa)}
.pd-editbtn i,.pd-savebtn i{font-size:13px}
.pd-editbtn:hover,.pd-cancelbtn:hover{color:var(--tprimary,#fff)}
.pd-savebtn{background:var(--value,#d4fc00);border-color:var(--value,#d4fc00);color:#111;font-weight:700}
.field-input:disabled{opacity:.75;cursor:default;background:transparent;border-color:transparent;padding-left:0}

/* ===== Toast (undo) ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);display:flex;align-items:center;gap:14px;background:var(--card,#1e1e1e);border:1px solid var(--card-bd,rgba(255,255,255,.12));border-radius:10px;padding:11px 16px;box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:400;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s cubic-bezier(.2,.85,.3,1);font-size:13px;color:var(--tprimary,#f0f0f0)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.toast-action{font-size:12px;font-weight:700;color:var(--value,#d4fc00);background:none;border:none;cursor:pointer;font-family:inherit;padding:2px 4px}
.toast-action:hover{text-decoration:underline}

/* ===== File description ===== */











/* ===== Notes composer: collapsed bar ===== */
.nt-composer-collapsed{display:flex;align-items:center;gap:10px;padding:11px 15px;cursor:text}
.nt-composer-collapsed i{font-size:15px;color:var(--tmut)}
.nt-collapsed-ph{flex:1;font-size:13px;color:var(--place)}
.nt-collapsed-clip{color:var(--tmut)}
.nt-composer:not(.open){padding:0}
.nt-cancelbtn{font-size:12px;color:var(--tsec);background:none;border:none;cursor:pointer;font-family:inherit;padding:8px 6px}
.nt-cancelbtn:hover{color:var(--tprimary)}


/* ===== Pricing: not-yet-priced / create quote ===== */
.ov-psrc.none{color:var(--tmut);font-weight:600}
.ov-pval.none{color:var(--tmut)}
.ov-pbtn.create{color:#111;background:var(--value);border-color:var(--value);font-weight:700}
.ov-pbtn.create:hover{filter:brightness(1.05)}


/* ===== Email-sourced job badge ===== */
.c-emailbadge{font-size:12px;color:#5dccff;margin-right:5px;flex-shrink:0;vertical-align:middle}


/* ===== File category chip (editable) + replace ===== */






/* ================= FILES v2 (shared: popup Files tab + quote panel) ================= */
.fx-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding-bottom:13px;border-bottom:1px solid var(--well-bd,rgba(255,255,255,.09))}
.fx-headlabel{font-size:11px;color:var(--tmut,#888);letter-spacing:.1em;font-weight:600;text-transform:uppercase}

/* groups */
.fx-groups{display:grid;grid-template-columns:1fr;gap:14px 22px}
.fx-groups.two{grid-template-columns:1fr 1fr}
.fx-group{border-radius:8px;transition:background .12s,box-shadow .12s}
.fx-group.drop{background:rgba(93,204,255,.07);box-shadow:0 0 0 1.5px rgba(93,204,255,.45)}
.fx-ghead{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--tmut,#888);letter-spacing:.09em;font-weight:600;margin-bottom:6px;padding:0 2px}
.fx-ghead i{font-size:12px}
.fx-group.notes{opacity:.75}

/* row */
.fx-row{position:relative;margin-bottom:4px}
.fx-line{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:7px;background:var(--well,rgba(255,255,255,.04));border:1px solid transparent;cursor:pointer;transition:background .12s,border-color .12s}
.fx-line:hover{background:var(--card,rgba(255,255,255,.07));border-color:var(--well-bd,rgba(255,255,255,.12))}
.fx-row.menuopen .fx-line{background:var(--card,rgba(255,255,255,.08));border-color:var(--well-bd,rgba(255,255,255,.16))}
.fx-icon{font-size:19px;flex-shrink:0}
.fx-name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--tprimary,#f0f0f0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-from{font-size:11px;color:var(--tmut,#777);flex-shrink:0}
.fx-row.uploading .fx-line{cursor:default;opacity:.8}

/* description marker + hover tooltip */
.fx-note{position:relative;display:flex;align-items:center;flex-shrink:0;color:#5dccff;cursor:default;outline:none}
.fx-note i{font-size:14px}
.fx-tip{display:none;position:absolute;bottom:calc(100% + 7px);right:-6px;z-index:30;width:max-content;max-width:230px;background:var(--card,#2b2b2b);border:1px solid var(--card-bd,rgba(255,255,255,.16));border-radius:7px;padding:8px 11px;font-size:11.5px;font-weight:500;line-height:1.45;color:var(--tsec,#ccc);box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:normal;text-align:left}
.fx-note:hover .fx-tip,.fx-note:focus .fx-tip{display:block}

/* ... menu button + menu */
.fx-menubtn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;border-radius:6px;color:var(--tmut,#777);cursor:pointer;transition:background .12s,color .12s}
.fx-menubtn i{font-size:17px}
.fx-line:hover .fx-menubtn{color:var(--tprimary,#f0f0f0)}
.fx-menubtn:hover{background:rgba(255,255,255,.1)}
.fx-menu{position:absolute;top:calc(100% + 3px);right:0;z-index:40;width:186px;background:var(--card,#2b2b2b);border:1px solid var(--card-bd,rgba(255,255,255,.16));border-radius:9px;padding:5px;box-shadow:0 12px 34px rgba(0,0,0,.5);cursor:default}
.fx-menu-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--tsec,#aaa);padding:6px 9px 7px;border-bottom:1px solid var(--well-bd,rgba(255,255,255,.08));margin-bottom:4px}
.fx-menu-head i{font-size:14px;cursor:pointer}
.fx-menu-head.plain{border:none;margin-bottom:2px;color:var(--tmut,#777);letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.fx-menu-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:6px;font-size:12px;font-weight:500;color:var(--tprimary,#f0f0f0);cursor:pointer;transition:background .1s}
.fx-menu-item i{font-size:15px;color:var(--tmut,#999);width:15px;flex-shrink:0}
.fx-menu-item:hover{background:rgba(255,255,255,.08)}
.fx-menu-item.on{background:rgba(255,255,255,.05)}
.fx-menu-item.on i{color:#5dccff}
.fx-menu-item.danger{color:#e05252}
.fx-menu-item.danger i{color:#e05252}
.fx-menu-item.danger:hover{background:rgba(224,82,82,.14)}
.fx-menu-more{margin-left:auto;font-size:13px!important}

/* description editor */
.fx-descedit{display:flex;gap:6px;margin:5px 0 0 30px}
.fx-descinput{flex:1;background:var(--well,#272727);border:1px solid var(--well-bd,rgba(255,255,255,.14));border-radius:6px;padding:6px 9px;font-size:12px;color:var(--tprimary,#f0f0f0);font-family:inherit}
.fx-descinput:focus{outline:none;border-color:rgba(255,255,255,.35)}
.fx-descsave,.fx-desccancel{font-size:11px;font-weight:600;border-radius:6px;padding:5px 11px;cursor:pointer;font-family:inherit;border:1px solid var(--well-bd,rgba(255,255,255,.14));background:var(--well,#272727);color:var(--tsec,#ccc)}
.fx-descsave:hover,.fx-desccancel:hover{border-color:rgba(255,255,255,.35);color:var(--tprimary,#fff)}

/* Add files button + menu */
.fx-addwrap{position:relative;display:inline-flex;flex:0 0 auto;margin-left:auto}
.fx-addbtn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tprimary,#f0f0f0);background:none;border:1px solid var(--well-bd,rgba(255,255,255,.18));border-radius:7px;padding:6px 13px;cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s}
.fx-addbtn:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.05)}
.fx-addbtn i{font-size:14px}
.fx-addcv{font-size:13px!important;color:var(--tmut,#888)}
.fx-addmenu{position:absolute;top:calc(100% + 5px);left:0;right:auto;z-index:40;width:172px;background:var(--card,#2b2b2b);border:1px solid var(--card-bd,rgba(255,255,255,.16));border-radius:9px;padding:5px;box-shadow:0 12px 34px rgba(0,0,0,.5)}

/* quote panel footer (drive link + add) */
.fx-foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--well-bd,rgba(255,255,255,.09))}
.fx-drive{flex:1;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#5dccff;text-decoration:none;min-width:0}
.fx-drive i{font-size:16px;flex-shrink:0}
.fx-drive span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-drive:hover{color:#8adcff}
.fx-drive.none{color:var(--tdim,#666);cursor:default}
.fx-empty{padding:20px 6px;text-align:center;color:var(--tdim,#666);font-size:12px}

body.light .fx-tip,body.light .fx-menu,body.light .fx-addmenu{background:#fff}


/* ===== Files: drag-and-drop overlay (exists only while dragging) ===== */
.fx-droproot{position:relative}
.fx-drop{position:absolute;inset:6px;z-index:60;background:rgba(20,20,20,.94);border:2px dashed rgba(93,204,255,.5);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px}
.fx-drop-head{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--tprimary,#f0f0f0)}
.fx-drop-head i{font-size:18px;color:#5dccff}
.fx-dropzones{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;width:100%;max-width:520px}
.fx-dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border:1.5px dashed rgba(255,255,255,.18);border-radius:9px;transition:border-color .12s,background .12s}
.fx-dropzone i{font-size:20px;color:var(--tmut,#888);pointer-events:none}
.fx-dropzone span{font-size:12px;font-weight:500;color:var(--tsec,#aaa);pointer-events:none}
.fx-dropzone.over{border-style:solid;border-color:rgba(93,204,255,.75);background:rgba(93,204,255,.13)}
.fx-dropzone.over i{color:#5dccff}
.fx-dropzone.over span{color:var(--tprimary,#f0f0f0)}
body.light .fx-drop{background:rgba(250,250,248,.95)}


/* drag hint strip */
.fx-draghint{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;margin-bottom:16px;border:1px dashed var(--well-bd,rgba(255,255,255,.12));border-radius:8px;font-size:11.5px;color:var(--tdim,#666)}
.fx-draghint i{font-size:14px}

/* download-all on a group heading */
.fx-gdl{display:inline-flex;align-items:center;gap:4px;margin-left:auto;background:none;border:none;font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--tdim,#666);cursor:pointer;padding:2px 4px;border-radius:5px;transition:color .12s,background .12s}
.fx-gdl i{font-size:13px}
.fx-gdl:hover{color:var(--tprimary,#f0f0f0);background:rgba(255,255,255,.07)}

/* header drive link (quote modal) */
.fx-head .fx-drive{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#5dccff;text-decoration:none}
.fx-head .fx-drive i{font-size:15px}
.fx-head .fx-drive:hover{color:#8adcff}

/* ===== Quote "Project Files" modal — 1:1 with the job card ===== */
#qv-files-modal{z-index:300}
.fxm-page{padding:0!important;overflow:hidden}
.fxm-head{display:flex;align-items:center;justify-content:space-between;padding:24px 30px 16px 40px;flex-shrink:0}
.fxm-title{font-size:20px;font-weight:700;color:var(--tprimary,#f0f0f0);display:flex;align-items:baseline;gap:12px}
.fxm-sub{font-size:13px;font-weight:500;color:var(--tmut,#888)}
.fxm-body{flex:1;min-height:0;overflow-y:auto;padding:0 30px 24px 40px}


/* ===== Project Pricing modal ===== */
#qv-pricing-modal{z-index:300}
.pp-intro{font-size:12px;color:var(--tmut,#888);line-height:1.55;margin-bottom:14px}
.pp-intro strong{color:var(--tprimary,#f0f0f0);font-weight:600}
.pp-banner{display:flex;align-items:center;gap:10px;background:rgba(232,168,56,.1);border:1px solid rgba(232,168,56,.35);border-radius:9px;padding:11px 13px;margin-bottom:14px;font-size:12px;color:#e8a838}
.pp-banner i{font-size:16px;flex-shrink:0}
.pp-banner span{flex:1;line-height:1.45}
.pp-update{flex-shrink:0;background:rgba(232,168,56,.16);border:1px solid rgba(232,168,56,.5);border-radius:7px;padding:6px 12px;font-size:11.5px;font-weight:600;color:#e8a838;cursor:pointer;font-family:inherit;transition:background .12s}
.pp-update:hover{background:rgba(232,168,56,.26)}

/* this job's calculation rules table */
.pp-rules{width:100%;border-collapse:collapse;font-size:12px}
.pp-rules th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tmut,#888);font-weight:600;padding:0 8px 7px}
.pp-rules td{padding:3px 6px}
.pp-in{width:100%;background:var(--well,#272727);border:1px solid var(--well-bd,rgba(255,255,255,.1));border-radius:6px;padding:6px 9px;font-size:12px;color:var(--tprimary,#f0f0f0);font-family:inherit}
.pp-in:focus{outline:none;border-color:rgba(255,255,255,.32)}
.pp-del{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:6px;color:var(--tmut,#777);cursor:pointer}
.pp-del:hover{background:rgba(224,82,82,.14);color:#e05252}
.pp-add{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:none;border:1px solid var(--well-bd,rgba(255,255,255,.16));border-radius:7px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--tsec,#ccc);cursor:pointer;font-family:inherit}
.pp-add:hover{border-color:rgba(255,255,255,.35);color:var(--tprimary,#fff)}


/* toast anchored to the card it relates to (instead of bottom-centre) */
.toast.anchored{bottom:auto;left:0;transform:translateY(8px)}
.toast.anchored.show{transform:translateY(0)}

/* upload progress row */
.fx-main{flex:1;min-width:0}
.fx-bar{height:3px;margin-top:6px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.fx-bar-fill{height:100%;width:35%;background:#5dccff;border-radius:2px;animation:fxbar 1.1s ease-in-out infinite}
@keyframes fxbar{0%{margin-left:-35%}100%{margin-left:100%}}


/* download-all: busy while the zip is being built */
.fx-gdl.busy{opacity:.55;pointer-events:none}
.fx-gdl.busy i{animation:fxspin .8s linear infinite}
@keyframes fxspin{to{transform:rotate(360deg)}}

/* Project Pricing body reuses .logic-view styling — trim its page padding inside the modal */
.pp-body.logic-view{padding:0 0 24px}

/* ============================================================
   LIGHT / PRINT MODE AUDIT
   Every control added during this build used white text on a transparent or dark
   fill, with NO light-mode rule — so in light mode they were white-on-white and
   effectively invisible. These are their light counterparts.
   Lime (#d4fc00) is unreadable on white, so icons/accents shift to a dark olive.
   ============================================================ */

/* --- files UI (popup + quote modal) --- */
body.light .fx-addbtn,
body.light .fx-menubtn,
body.light .fx-menu-item,
body.light .fx-descsave,
body.light .fx-desccancel{ color:#1a1a18; }
body.light .fx-addbtn{ border-color:rgba(0,0,0,.2); }
body.light .fx-addbtn i{ color:#6b8000; }
body.light .fx-addbtn:hover{ border-color:rgba(0,0,0,.4); background:rgba(0,0,0,.04); }
body.light .fx-menubtn{ color:#666; }
body.light .fx-menubtn:hover{ background:rgba(0,0,0,.07); color:#1a1a18; }
body.light .fx-menu,
body.light .fx-addmenu{ background:#fff; border-color:rgba(0,0,0,.15); box-shadow:0 12px 34px rgba(0,0,0,.18); }
body.light .fx-menu-item i{ color:#777; }
body.light .fx-menu-item:hover{ background:rgba(0,0,0,.06); }
body.light .fx-line{ background:#f5f5f3; }
body.light .fx-line:hover{ background:#ededea; border-color:rgba(0,0,0,.12); }
body.light .fx-name{ color:#1a1a18; }
body.light .fx-tip{ background:#fff; border-color:rgba(0,0,0,.15); color:#333; }
body.light .fx-descinput{ background:#fff; border-color:rgba(0,0,0,.15); color:#1a1a18; }
body.light .fx-descsave,
body.light .fx-desccancel{ background:#f5f5f3; border-color:rgba(0,0,0,.15); }
body.light .fx-drop{ background:rgba(250,250,248,.95); }
body.light .fx-dropzone span{ color:#555; }
body.light .fx-gdl{ color:#777; }
body.light .fx-gdl:hover{ color:#1a1a18; background:rgba(0,0,0,.06); }

/* --- Project Pricing modal --- */
body.light .pp-in{ background:#fff; border-color:rgba(0,0,0,.15); color:#1a1a18; }
body.light .pp-add{ color:#1a1a18; border-color:rgba(0,0,0,.2); }
body.light .pp-add:hover{ border-color:rgba(0,0,0,.4); }
body.light .pp-del{ color:#777; }
body.light .pp-intro{ color:#666; }
body.light .pp-intro strong{ color:#1a1a18; }

/* --- CSV list (Project Details) --- */
body.light .csv-row{ background:#f5f5f3; border-color:rgba(0,0,0,.1); }
body.light .csv-name{ color:#1a1a18; }
body.light .csv-meta{ color:#777; }
body.light .csv-btn{ color:#333; border-color:rgba(0,0,0,.18); }
body.light .csv-btn:hover{ color:#1a1a18; border-color:rgba(0,0,0,.4); }
body.light .csv-addbtn{ color:#1a1a18; border-color:rgba(0,0,0,.2); }
body.light .csv-addbtn i{ color:#6b8000; }
body.light .csv-addbtn:hover{ border-color:rgba(0,0,0,.4); background:rgba(0,0,0,.04); }

/* the sender's domain, shown next to their name in an email note header */
.nt-dom{ font-size:11px; color:var(--tdim,#666); }


/* ===== BIG RED BRAIN =====
   Its own card, above the notes. Built from EVERY note on the job — 'requests' is what
   the client wants; the unlabelled section below is what WE'VE decided (calls, site
   notes). The internal half is omitted entirely when there's nothing to say. */
.jc.brb{
  background:rgba(224,82,82,.07);
  border:1px solid rgba(224,82,82,.28);
  margin-bottom:10px;
  padding:12px 14px;
}
.brb-h{
  display:flex; align-items:center; gap:7px;
  font-size:10px; font-weight:700; letter-spacing:.09em;
  color:#e05252; margin-bottom:9px;
}
.brb-h i{ font-size:16px; }
.brb-lbl{
  font-size:9px; font-weight:700; letter-spacing:.08em;
  color:var(--tmut,#888); margin-bottom:3px;
}
.brb-body{ font-size:12px; line-height:1.5; color:var(--tprimary,#f0f0f0); }
/* no heading on our side — a hairline and muted text is enough to say "this is us" */
.brb-int{
  margin-top:8px; padding-top:8px;
  border-top:1px solid rgba(224,82,82,.2);
  font-size:12px; line-height:1.5; color:var(--tsec,#aaa);
}
body.light .jc.brb{ background:rgba(224,82,82,.06); border-color:rgba(224,82,82,.3); }
body.light .brb-body{ color:#1a1a18; }
body.light .brb-int{ color:#555; }

/* the brain throbs while it's thinking */
@keyframes brbThrob{
  0%,100%{ transform:scale(1);    opacity:.85; }
  50%    { transform:scale(1.18); opacity:1;   }
}
.brb-h i.thinking{
  animation:brbThrob 1.1s ease-in-out infinite;
  transform-origin:center;
}

/* the sender's domain, shown next to their name in an email note header */


/* ===== NOTES on the Overview — tightened =====
   THE GAP: .ov-notelist{gap:22px} — 22px between EVERY note, declared twice, plus an
   18px margin on the recent group. That's what made them so far apart.
   Now: no gap, a hairline divider between rows, and tighter text. The coloured left
   spine (set inline per note type) still identifies the note at a glance.
   NOTE: the overview uses .ovn (via ovNoteRow) — NOT .nt-item. Style the right one. */
/* 4px of air ABOVE the divider and 4px BELOW it — the gap and the padding were
   fighting each other, which is why it looked lopsided. The divider now sits exactly
   in the middle: 4px padding-bottom on the row, 4px of list gap under the line. */
.ov-notescard .ov-notelist{ gap:4px!important; }

.ov-notescard .ovn{
  padding:0 10px 4px 12px;
  border-left-width:2px;
  border-bottom:1px solid var(--well-bd,rgba(255,255,255,.07));
}
.ov-notescard .ovn + .ovn{ padding-top:0; }
.ov-notescard .ovn:last-child{ border-bottom:none; }
.ov-notescard .ovn:hover{ background:rgba(255,255,255,.03); }
.ov-notescard .ovn-body{ font-size:13.5px; line-height:1.45; }
.ov-notescard .ovn-top{ margin-bottom:3px; gap:6px; }
.ov-notescard .ovn-type{ font-size:9px; }

/* the pinned / recent divider doesn't need 18px of air either */
.ov-notescard .ov-recentgroup{ margin-top:8px!important; padding-top:8px!important; }
.ov-notescard .ov-pinlabel{ margin:2px 0 6px!important; }

body.light .ov-notescard .ovn{ border-bottom-color:rgba(0,0,0,.07); }
body.light .ov-notescard .ovn:hover{ background:rgba(0,0,0,.03); }

/* the sender's domain, shown next to their name in an email note header */

/* the exclude-from-brain toggle on a note.
   ⚠ NEVER swap the icon NAME to show state — 'ti-brain-off' doesn't exist in the Tabler
   set, so it rendered as nothing and the icon vanished on click. Same icon, different
   colour: crossed out and red when excluded. */
.nt-brainoff{ cursor:pointer; opacity:.45; transition:opacity .12s, color .12s; position:relative; }
.nt-brainoff:hover{ opacity:1; }
.nt-brainoff.off{ opacity:1; color:#e05252; }
.nt-brainoff.off::after{
  content:''; position:absolute; left:-1px; top:50%; width:calc(100% + 2px); height:1.5px;
  background:#e05252; transform:rotate(-45deg); transform-origin:center;
}

/* the composer's "don't feed the brain" toggle */
.nt-brainbtn.off{ color:#e05252!important; position:relative; }
.nt-brainbtn.off::after{
  content:''; position:absolute; left:50%; top:50%; width:18px; height:1.5px;
  background:#e05252; transform:translate(-50%,-50%) rotate(-45deg);
}

/* ===== OVERVIEW RIGHT COLUMN =====
   ⚠ WHY THE ABSOLUTE POSITIONING MATTERS (I broke this and the notes card ran long):
   The right column must contribute NO height to the grid. The grid's height comes from
   the LEFT column (Job Summary + Pricing + Key Dates), and the right side fills whatever
   that turns out to be. That's why .ov-notescard was position:absolute;inset:0 in the
   first place — I replaced it with a flex stack and the notes card started driving the
   height, stretching past the bottom of the left column.
   Fix: keep the absolute fill, but on a WRAPPER that stacks brain + notes inside it. */
.jp-rcol{ position:relative; min-height:0; }
.ov-rstack{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  min-height:0;
}
/* THE BRAIN MUST NOT EAT THE NOTES.
   It was flex:0 0 auto — natural height, no cap. A long brief (requests list + the
   internal section can run to ~1,500 chars) would push the notes down to nothing on an
   848px card. So: it may take at most 40% of the column, and if the brief is longer than
   that it clips with a fade. The notes always keep at least 60%. */
.ov-rstack > .jc.brb{
  flex:0 1 auto;
  max-height:40%;
  min-height:0;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}
.ov-rstack > .jc.brb .brb-h{ flex:0 0 auto; }
.brb-scroll{
  /* ⚠ WAS flex:1 1 0 — and that COLLAPSED THE BRIEF TO ZERO HEIGHT.
     The brain card is flex:0 1 auto (height from its content), so a child with
     flex-basis:0 starts at zero and has nothing to grow into. The card rendered — red
     background, header, 53px tall — but the text inside had no height at all.
     That's why the brain always looked "empty": the card was there, the brief wasn't.
     flex:0 1 auto = take your natural height, shrink only if you must. */
  flex:0 1 auto;
  min-height:0;
  overflow:hidden;
  position:relative;
  padding-bottom:6px;
}
/* fade the brief out if it doesn't fit, so it never looks arbitrarily chopped */
.jc.brb.overflowing .brb-scroll::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:38px;
  background:linear-gradient(180deg, transparent 0%, #241a1a 92%);
  pointer-events:none;
}
body.light .jc.brb.overflowing .brb-scroll::after{
  background:linear-gradient(180deg, transparent 0%, #f7eded 92%);
}
.ov-rstack > .ov-notescard{
  position:relative!important;
  inset:auto!important;
  flex:1 1 0;
  min-height:0;
}

/* ===== OVERVIEW: no page scrollbar — the NOTES scroll instead =====
   The card is locked to 848px, .jp-body was overflow-y:auto, and .ov-notes-scroll was
   overflow:hidden. So the notes got CLIPPED and the whole page scrolled instead —
   which is that scrollbar that appeared to scroll to nothing.
   Backwards. The page should never scroll; the notes list should. */
.jp-page.tab-overview .jp-body{ overflow:hidden!important; padding-bottom:0; }
.jp-page.tab-overview .jp-grid{ min-height:0; }
.jp-page.tab-overview .jp-lcol,
.jp-page.tab-overview .jp-rcol{ min-height:0; }
/* No scrollbar. Render EVERY note and let the fixed-height card decide where they stop
   — a clean cutoff with a fade, and breathing room before the card edge. "Go to notes"
   has the full list. */
.ov-notescard .ov-notes-scroll{
  overflow:hidden!important;
  position:relative;
  flex:1 1 0;
  min-height:0;
  padding-bottom:18px;          /* air before the cutoff, so a note never touches the edge */
}
/* the fade — only when there's actually more below */
.ov-notescard.overflowing .ov-notes-scroll::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(180deg, transparent 0%, var(--card) 88%);
  pointer-events:none;
}
body.light .ov-notescard.overflowing .ov-notes-scroll::after{
  background:linear-gradient(180deg, transparent 0%, #fff 88%);
}

/* the brain's structured output: tight lists, no bullet-point sprawl */
.brb-body p, .brb-int p{ margin:0 0 6px; }
.brb-body p:last-child, .brb-int p:last-child{ margin-bottom:0; }
.brb-body ul, .brb-int ul{ margin:0; padding-left:16px; list-style:disc; }
.brb-body li, .brb-int li{ margin:2px 0; }
.brb-body b, .brb-int b{ color:#fff; font-weight:600; }
body.light .brb-body b, body.light .brb-int b{ color:#1a1a18; }