*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--g:#003366;--g2:#0a4a8f;--bg:#f5f7fa;--card:#fff;--ink:#131c26;
 --mut:#6b7684;--line:#e2e7ee;--hot:#b91c1c;--deep:#00224a;
 --acc:#5b85b8;--acc-d:#4a74a8;--acc-t:#2f5d8a;--acc-lt:#8fb4dd;
 --tint:#f2f7fd;--tint-line:#cfe0f2;
 --safe:env(safe-area-inset-bottom,0px)}
html,body{height:100%}
/* the hidden attribute must beat author display rules (#gate is display:flex) */
[hidden]{display:none !important}
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
a{color:var(--g)}

/* ---------- auth ---------- */
#gate{position:fixed;inset:0;background:
  radial-gradient(1100px 620px at 50% -8%,#0a4a8f 0%,transparent 62%),
  linear-gradient(165deg,#003a73,var(--deep) 62%,#001730);
 color:#fff;display:flex;align-items:center;justify-content:center;padding:24px;z-index:200}
#gate .box{width:100%;max-width:380px;text-align:center}
#gate .lg{width:186px;max-width:64%;height:auto;margin:0 auto 24px;display:block;
 filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
#gate h1{font-size:21px;font-weight:650;letter-spacing:3px}
#gate p{color:#9db8d6;font-size:13px;margin:5px 0 24px}
/* Only the typed value and the config warning want left alignment. An earlier
   blanket rule here caught the buttons too and pushed their labels off-centre. */
#gate input{text-align:left}
#gate .cfg{text-align:left}
#gate .rule{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
 margin:26px 0 0}
#gate input{width:100%;padding:13px 14px;border:1px solid rgba(255,255,255,.25);border-radius:10px;
 background:rgba(255,255,255,.08);color:#fff;font-size:16px}
#gate input::placeholder{color:#7e9dc0}
#gate button{width:100%;margin-top:10px;padding:13px;border:0;border-radius:10px;background:var(--acc-d);
 color:#fff;font-weight:650;font-size:15px;cursor:pointer}
#gate button:disabled{opacity:.6}
#gate .msg{margin-top:14px;font-size:13px;color:#cfe0f2;min-height:20px}
#gate .cfg{margin-top:26px;font-size:12px;color:#7e9dc0;line-height:1.6}

/* ---------- chrome ---------- */
header{background:linear-gradient(135deg,var(--g),var(--deep));color:#fff;padding:12px 18px;
 display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.brand .mk{width:30px;height:30px;flex:none;object-fit:contain}
.brand h1{font-size:17px;letter-spacing:1.9px;font-weight:700}
.brand span{color:#9db8d6;font-size:12.5px}
.stats{display:flex;gap:18px;margin-top:13px;overflow-x:auto;scrollbar-width:none}
.stats::-webkit-scrollbar{display:none}
.stat{flex:none}
.stat b{display:block;font-size:19px;font-weight:650;letter-spacing:-.4px}
.stat i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#9db8d6;white-space:nowrap}
/* ---------- navigation ---------- */
/* overflow-x:auto here would force overflow-y to compute to auto as well,
   which clips the dropdowns to nothing. The menu wraps instead of scrolling. */
nav{display:flex;flex-wrap:wrap;background:var(--deep);position:relative;z-index:30;
 padding:0 6px}
.menu{position:relative}
.menu>.top{background:none;border:0;color:#fff;padding:14px 18px;font-size:15px;font-weight:700;
 letter-spacing:.2px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;
 display:flex;align-items:center;gap:7px;transition:color .12s}
.menu>.top i{font-style:normal;font-size:10px;opacity:.55;font-weight:400}
.menu>.top:hover{color:var(--acc)}
.menu>.top:hover i{opacity:1}
.menu.on>.top{border-bottom-color:var(--acc)}
.menu.open>.top{color:var(--acc);background:rgba(255,255,255,.07)}
.drop{display:none;position:absolute;top:100%;left:0;min-width:250px;background:var(--card);
 border:1px solid var(--line);border-radius:0 0 11px 11px;box-shadow:0 14px 36px rgba(0,20,45,.3);
 padding:6px;z-index:40}
.menu.open .drop{display:block}
.ditem{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;
 background:none;border:0;padding:9px 12px;border-radius:7px;cursor:pointer;font-size:14px;
 font-weight:500;color:var(--ink)}
.ditem:hover:not(.soon){background:#eef4fb;color:var(--g)}
.ditem em{font-style:normal;font-size:11.5px;color:var(--mut);font-weight:400}
.ditem.cur{background:#eef4fb;color:var(--g);font-weight:700}
.ditem.soon{opacity:.4;cursor:default}
.dsep{height:1px;background:var(--line);margin:5px 8px}
@media(max-width:700px){
  .menu>.top{padding:12px 13px;font-size:14px}
  .drop{position:fixed;left:8px;right:8px;top:auto;min-width:0;border-radius:11px}
}

/* ---------- home ---------- */
.hgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
 margin-bottom:22px}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 17px}
.hcard b{display:block;font-size:30px;font-weight:650;letter-spacing:-.8px;color:var(--g);
 line-height:1.05}
.hcard i{display:block;font-style:normal;font-size:11px;text-transform:uppercase;
 letter-spacing:.9px;color:var(--mut);margin-top:7px}
.hcard em{display:block;font-style:normal;font-size:12px;color:var(--mut);margin-top:5px}
.hcard.tap{cursor:pointer;transition:border-color .12s,transform .12s}
.hcard.tap:hover{border-color:var(--acc);transform:translateY(-1px)}
.hcard.hot b{color:var(--hot)}
.hquick{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
.hquick button{text-align:left;background:var(--card);border:1px solid var(--line);
 border-radius:10px;padding:13px 14px;cursor:pointer}
.hquick button:hover{border-color:var(--acc);background:#f7fafe}
.hquick b{display:block;font-size:14px;color:var(--g)}
.hquick em{font-style:normal;font-size:11.5px;color:var(--mut)}

/* ---------- header right ---------- */
.hright{display:flex;align-items:center;gap:12px;margin-left:auto}
.ver{font-size:11px;color:#7e9dc0;letter-spacing:.3px;white-space:nowrap}
.hright button{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:12px;
 padding:6px 12px;border-radius:7px;cursor:pointer}
.hright button:hover{background:rgba(255,255,255,.22)}

/* ---------- toast ---------- */
#toast{position:fixed;right:16px;bottom:calc(16px + var(--safe));z-index:150;
 background:var(--ink);color:#fff;font-size:13px;padding:11px 15px;border-radius:9px;
 box-shadow:0 8px 26px rgba(0,20,45,.3);max-width:min(420px,88vw)}
#toast.err{background:var(--hot)}
#toast.ok{background:var(--g)}
#toast.busy{background:var(--g2)}
#bar{display:flex;align-items:center;gap:8px;padding:8px 18px;background:#eef2f8;
 border-bottom:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
#bar .dot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex:none}
#bar.busy .dot{background:var(--acc)}#bar.err .dot{background:var(--hot)}
#bar .sp{flex:1}
#bar button{font-size:12px;padding:5px 11px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer}
main{padding:16px 18px calc(60px + var(--safe))}
@media(min-width:900px){main{max-width:1500px}}

/* ---------- controls ---------- */
.bar2{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar2 input,.bar2 select{font-size:16px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff}
@media(min-width:700px){.bar2 input,.bar2 select{font-size:13.5px;padding:7px 10px}}
.bar2 input[type=search]{flex:1;min-width:180px}
.btn{font-size:13px;padding:8px 13px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer}
.btn.p{background:var(--g);color:#fff;border-color:var(--g)}
.note{background:var(--tint);border:1px solid var(--tint-line);border-left:3px solid var(--acc);
 padding:11px 13px;border-radius:8px;margin-bottom:14px;font-size:13px}

/* ---------- list: cards on mobile, table on desktop ---------- */
.list{display:flex;flex-direction:column;gap:8px}
.item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 13px;cursor:pointer}
.item:active{background:#eef4fb}
.item .l1{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.item .nm{font-weight:600;font-size:14.5px;line-height:1.3}
.item .sub{color:var(--mut);font-size:11.5px;margin-top:2px}
.item .l2{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.sc{flex:none;min-width:36px;text-align:center;font-weight:650;font-size:12.5px;padding:4px 8px;border-radius:7px;color:#fff}
.pill{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line);
 background:#fafbfd;color:var(--mut);white-space:nowrap}
.pill.hot{background:#fef2f2;border-color:#f5c6c6;color:var(--hot)}
.pill.ok{background:#eaf4ff;border-color:#b9d6f2;color:#0a4a8f}
.pill.st{background:#fff;color:var(--ink)}
table{display:none}
.tw{display:none}
@media(min-width:900px){
  .list{display:none}
  /* wrapper scrolls sideways so extra columns never squash the table */
  .tw{display:block;overflow-x:auto;background:var(--card);
   border:1px solid var(--line);border-radius:10px}
  /* every rule below is scoped to .tw on purpose. Unscoped `table`/`th`/`td`
     rules also hit the .mini tables in the model cards and the quote sheet,
     and min-width would drag those to 1080px and out of their boxes. */
  .tw table{display:table;width:100%;min-width:1080px;border-collapse:collapse}
  .tw th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut);
   padding:9px 12px;background:#fafbfd;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap}
  .tw th:hover{color:var(--g)}
  .tw td{padding:10px 12px;border-bottom:1px solid #e9edf4;font-size:13.5px;vertical-align:top}
  .tw td.nowrap{white-space:nowrap}
  .tw tbody tr{cursor:pointer}.tw tbody tr:hover{background:#eef4fb}
  /* keep the community name anchored while the rest scrolls under it */
  .tw th.stick,.tw td.stick{position:sticky;left:0;z-index:1;background:#fafbfd;
   box-shadow:1px 0 0 var(--line)}
  .tw tbody td.stick{background:var(--card)}
  .tw tbody tr:hover td.stick{background:#eef4fb}
  .tw td.stick .rk{color:var(--mut);font-variant-numeric:tabular-nums;margin-right:5px}
}
.empty{padding:36px;text-align:center;color:var(--mut);font-size:13.5px}

/* ---------- detail panel ---------- */
/* ---------- record page ----------
   Was a right-hand drawer. It worked while the panel held six fields; with
   gate intel, contacts, pricing, quotes, the call log and history it spent
   its life fighting a 480px column. Now a full record page, laid out in two
   columns on anything wide enough to hold them. */
#scrim{display:none}
#panel{position:fixed;inset:0;background:var(--bg);transform:translateY(100%);
 transition:transform .22s;overflow-y:auto;z-index:50;-webkit-overflow-scrolling:touch}
#panel.on{transform:none}

.ph{background:linear-gradient(135deg,var(--g),var(--deep));color:#fff;padding:14px 20px;
 position:sticky;top:0;z-index:3}
.ph .back{background:rgba(255,255,255,.14);border:0;color:#fff;font-size:12.5px;padding:6px 13px;
 border-radius:7px;cursor:pointer;margin-bottom:11px;display:inline-flex;align-items:center;gap:6px}
.ph .back:hover{background:rgba(255,255,255,.26)}
.ph .t{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ph h2{font-size:22px;font-weight:650;letter-spacing:-.4px}
.ph p{color:#9db8d6;font-size:12.5px;margin-top:3px}
/* key figures, the way a record header reads */
.phstats{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.phstats div{white-space:nowrap}
.phstats b{display:block;font-size:17px;font-weight:650;letter-spacing:-.3px}
.phstats i{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;color:#9db8d6}
.phstats .hot{color:#ffb4b4}
.x{position:absolute;top:12px;right:14px;width:34px;height:34px;background:rgba(255,255,255,.12);
 border:0;border-radius:8px;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.secall{background:rgba(255,255,255,.12);border:0;color:#fff;font-size:11px;padding:4px 9px;
 border-radius:6px;cursor:pointer;margin-left:8px;vertical-align:1px}
.secall:hover{background:rgba(255,255,255,.22)}

/* Two columns once there is room — but ONLY for a pane of many small
   sections (Overview). Panes that are one wide table each (Relationships,
   Communication, Transactions) must stay full width, or the table gets
   sliced down the middle. Scoped to .stpane, never .pb: .pb now holds the
   panes themselves, and columnising those splits the record in half. */
@media(min-width:1000px){
  .pb{max-width:1500px;margin:0 auto}
  /* Every pane is now one section, so columnising the PANE would leave a
     half-empty screen. The profile's field list goes two-up instead —
     same use of the width, without splitting a card down the middle. */
  .stpane[data-st="overview"] .kv{grid-template-columns:150px minmax(0,1fr) 150px minmax(0,1fr);
   gap:9px 14px;column-gap:34px}
  .stpane[data-st="overview"] .kv dd{min-width:0;overflow-wrap:anywhere}
}
.sec{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.sec.col>h3{border-bottom:1px solid var(--line)}
.pb{padding:18px 20px calc(30px + var(--safe))}
.sec{margin-bottom:20px}
.sec h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--mut);margin-bottom:8px}
/* ---------- collapsible panel sections ---------- */
.sec.col>h3{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;
 -webkit-user-select:none;user-select:none;padding:7px 0;margin:0 0 9px;
 border-bottom:1px solid var(--line)}
.sec.col>h3:hover{color:var(--g)}
.sec.col>h3 .chev{font-size:11px;color:var(--mut);transition:transform .16s;flex:none}
.sec.col>h3 .cnt{font-size:10px;color:var(--mut);letter-spacing:.4px;text-transform:none;
 margin-left:auto;margin-right:2px}
.sec.col.shut>h3{margin-bottom:0}
.sec.col.shut>h3 .chev{transform:rotate(-90deg)}
.sec.col.shut .secbody{display:none}
.peek{display:none}
.sec.col.shut .peek{display:block;font-size:12.5px;color:#37414f;padding:9px 0 0}
.peek a{display:inline-block;padding:5px 10px;background:#fff;border:1px solid var(--line);
 border-radius:7px;font-size:12px;text-decoration:none;margin:6px 6px 0 0}
.peek .mut{color:var(--mut)}
.kv{display:grid;grid-template-columns:112px 1fr;gap:5px 10px;font-size:13.5px}
.kv dt{color:var(--mut)}
.why{list-style:none;font-size:13px}
.why li{padding:4px 0 4px 17px;position:relative;color:#37414f}
.why li:before{content:"";position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.brk div{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12px}
.brk span:first-child{width:96px;color:var(--mut);flex:none}
.brk .track{flex:1;height:6px;background:#e9edf4;border-radius:4px;overflow:hidden}
/* display:block is load-bearing: a <span> is inline, an inline element ignores
   height, and the fill silently rendered at zero height — every one of these
   bars has been an empty grey track. */
.brk .fill{display:block;height:100%;background:var(--acc);border-radius:4px}
.brk .fill.full{background:var(--g)}
.brk .fill.weak{background:var(--hot)}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);margin:11px 0 4px}
select,textarea,input[type=date],input[type=text],input[type=email]{width:100%;font-size:16px;padding:11px;
 border:1px solid var(--line);border-radius:9px;background:#fff}
@media(min-width:700px){select,textarea,input[type=date],input[type=text],input[type=email]{font-size:13.5px;padding:9px 10px}}
textarea{min-height:76px;resize:vertical}
.save{width:100%;margin-top:12px;padding:13px;background:var(--g);color:#fff;border:0;border-radius:10px;
 font-weight:600;cursor:pointer}
.save.alt{background:#fff;color:var(--g);border:1px solid var(--line)}
.save.mut{background:#fff;color:var(--mut);border:1px solid var(--line)}

/* ---------- contacts ---------- */
.ct{border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px;background:#fbfcfb}
.ct.bad{opacity:.55}.ct.bad .who{text-decoration:line-through}
.ct .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.ct .who{font-weight:600;font-size:14px}
.ct .role{color:var(--mut);font-size:12px;margin-top:1px}
.seq{flex:none;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
 padding:3px 7px;border-radius:5px;background:var(--g);color:#fff;white-space:nowrap}
.seq.s2{background:#2f6aa8}.seq.s3{background:#6b8fb5}.seq.s4{background:#93a1b2}
.ct .cn{font-size:12.5px;color:#37414f;margin-top:7px}
.ct .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.ct .meta a{display:inline-block;padding:7px 12px;background:#fff;border:1px solid var(--line);
 border-radius:8px;font-size:12.5px;text-decoration:none;font-weight:500}
.ct .acts{display:flex;gap:6px;margin-top:8px}
.ct .acts button{font-size:11.5px;padding:6px 11px;border:1px solid var(--line);background:#fff;
 border-radius:7px;cursor:pointer}
.flag{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
 padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:1px}
.flag.v{background:#eaf4ff;color:#0a4a8f;border:1px solid #b9d6f2}
.flag.n{background:var(--tint);color:var(--acc-t);border:1px solid var(--tint-line)}
.flag.g{background:#f4f4f5;color:#6b7280;border:1px solid #e4e4e7}
.flag.y{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.flag.x{background:#fef2f2;color:#991b1b;border:1px solid #f5c6c6}
.addbtn{width:100%;padding:11px;border:1px dashed var(--line);background:#fafbfd;border-radius:9px;
 font-size:12.5px;color:var(--mut);cursor:pointer}
.efrm{border:1px solid var(--g);border-radius:10px;padding:12px;margin-bottom:10px}
.efrm .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:520px){.efrm .g2{grid-template-columns:1fr}}

/* ---------- gate intel ---------- */
.intel{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:10px}
.intel .row{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid #e9edf4}
.intel .row:last-child{border-bottom:0}
.intel .ico{flex:none;width:26px;height:26px;border-radius:7px;display:flex;align-items:center;
 justify-content:center;font-size:12px;font-weight:800;color:#fff}
.intel .k{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut)}
.intel .v{font-weight:600;font-size:13.5px}
.intel .d{font-size:12px;color:#37414f;margin-top:4px}
.sw-incumbent{background:var(--hot)}.sw-likely{background:#d97706}.sw-unknown{background:#93a1b2}
.str-yes-heavy{background:var(--g)}.str-yes{background:#2f6aa8}.str-restricted{background:#d97706}
.str-no{background:#93a1b2}.str-unknown{background:#93a1b2}

/* ---------- model + clusters ---------- */
.mgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.mgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 16px}
.mcard h3{font-size:14px;margin-bottom:3px}
.mcard .hint{color:var(--mut);font-size:12px;margin-bottom:12px}
.sl{margin-bottom:15px}
.sl .lab{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.sl .lab b{font-variant-numeric:tabular-nums}
.sl input[type=range]{width:100%;accent-color:var(--g);height:26px}
.sl .bm{font-size:11px;color:var(--mut);margin-top:3px}
.presets{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.presets button{font-size:12px;padding:7px 13px;border:1px solid var(--line);background:#fff;
 border-radius:20px;cursor:pointer}
.presets button.on{background:var(--g);color:#fff;border-color:var(--g)}
.big{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:600px){.big{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
.big div b{display:block;font-size:21px;font-weight:650;letter-spacing:-.5px;color:var(--g)}
.big div i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut)}
.mini{width:100%;font-size:12.5px;border-collapse:collapse;margin-top:6px;display:table}
.mini td{padding:5px 0;border:0}
.mini td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.cluster{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 16px;margin-bottom:12px}
.cluster h3{font-size:15px;margin-bottom:3px}
.cluster p{color:var(--mut);font-size:12.5px;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:6px 11px;background:#eef4fb;border:1px solid var(--line);border-radius:20px;cursor:pointer}
.tiny{font-size:11.5px;color:var(--mut);margin-top:6px}
.err-msg{background:#fef2f2;border:1px solid #f5c6c6;color:#991b1b;padding:10px 12px;border-radius:8px;
 font-size:12.5px;margin-top:9px}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);
 border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.gen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.gen select{flex:1;min-width:140px}
.genbtn{padding:11px 15px;background:var(--acc-d);color:#fff;border:0;border-radius:9px;
 font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.genbtn:disabled{opacity:.55}
.draft{border:1px solid var(--line);border-radius:9px;background:#fbfcfb;padding:12px;margin-top:9px}
.draft .subj{font-weight:600;font-size:13.5px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.draft textarea{border:0;background:none;padding:0;min-height:190px;font-size:14px}
.draft textarea:focus{outline:0}
.dacts{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.dacts button{font-size:12px;padding:8px 12px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer}
#modal,#rmodal,#pmodal,#omodal,#emodal{position:fixed;inset:0;background:rgba(0,20,45,.5);display:none;
 align-items:center;justify-content:center;padding:20px;z-index:80}
#modal.on,#rmodal.on,#pmodal.on,#omodal.on,#emodal.on{display:flex}
.mbox{background:#fff;border-radius:14px;max-width:560px;width:100%;padding:24px 26px;
 max-height:90vh;overflow-y:auto;box-shadow:0 24px 70px rgba(0,20,45,.35)}
.mbox h2{font-size:17px;margin-bottom:5px}
.mbox p.lead{color:var(--mut);font-size:13px;margin-bottom:14px}
.mbox ol{margin:8px 0 14px 18px;font-size:13px;color:#37414f}
.mbox ol li{margin-bottom:5px}
.mbox.wide{max-width:760px}
.mbox.xwide{max-width:880px}
/* the quick-entry modal scrolls its body, not the whole box, so the title
   and the save buttons stay put on a long form */
#emodal .mbox{display:flex;flex-direction:column;padding-bottom:18px}
#em_body{overflow-y:auto;margin:-4px -4px 0;padding:4px}
#em_body .efrm{border:0;padding:0;margin:0}
#em_body .efrm .frmh{display:none}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
@media(max-width:520px){.g2{grid-template-columns:1fr}}

/* ---------- follow-ups ---------- */
.due{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line);
 border-radius:10px;padding:12px 13px;margin-bottom:8px;cursor:pointer}
.due:hover{background:#eef4fb}
.due.late{border-left-color:var(--hot)}
.due.today{border-left-color:var(--acc)}
.due .t{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.due .nm{font-weight:600;font-size:14.5px}
.due .when{font-size:11.5px;font-weight:650;white-space:nowrap}
.due .when.late{color:var(--hot)}.due .when.today{color:var(--acc-t)}
.due .sub{color:var(--mut);font-size:11.5px;margin-top:2px}
.due .last{font-size:12.5px;color:#37414f;margin-top:7px;padding-left:9px;border-left:2px solid var(--line)}
.stat.tap{cursor:pointer}.stat.tap:hover b{color:var(--acc-lt)}
.hgroup{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--mut);
 margin:16px 0 8px}.hgroup:first-child{margin-top:0}

/* ---------- quote sheet ---------- */
#qwrap{position:fixed;inset:0;background:#5b6b60;z-index:120;overflow-y:auto;padding:0 0 40px}
#qbar{position:sticky;top:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
 padding:10px 16px;background:var(--deep);color:#fff;z-index:2}
#qbar .sp{flex:1}
#qbar button{font-size:13px;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.25);
 background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
#qbar button.p{background:var(--acc-d);border-color:var(--acc-d);font-weight:600}
#qbar .lbl{font-size:12.5px;color:#9db8d6}
#qsheet{width:8.5in;min-height:11in;margin:22px auto;background:#fff;color:#16201a;
 padding:0.62in 0.68in;box-shadow:0 8px 40px rgba(0,0,0,.3);font-size:11pt;line-height:1.45}
@media(max-width:9in){#qsheet{width:auto;margin:16px 10px;min-height:0;padding:26px 22px}}
#qsheet .qh{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
 border-bottom:2.5px solid var(--g);padding-bottom:12px;margin-bottom:18px}
#qsheet .qh .lg{width:132px;height:auto;display:block}
#qsheet .qh h1{font-size:20pt;font-weight:650;letter-spacing:-.5px;color:var(--g);line-height:1.1}
#qsheet .qh .tag{font-size:8.5pt;text-transform:uppercase;letter-spacing:1.4px;color:var(--acc-t);
 font-weight:700;margin-top:7px}
#qsheet .qh .meta{text-align:right;font-size:9.5pt;color:var(--mut);white-space:nowrap;line-height:1.7}
#qsheet .qh .meta b{color:var(--ink);font-variant-numeric:tabular-nums}
#qsheet h2{font-size:8.5pt;text-transform:uppercase;letter-spacing:1.1px;color:var(--mut);
 margin:20px 0 7px;padding-bottom:4px;border-bottom:1px solid var(--line)}
#qsheet .to{display:flex;justify-content:space-between;gap:24px;font-size:10pt}
#qsheet .to .who b{display:block;font-size:11.5pt;font-weight:650}
#qsheet .to .who span{color:var(--mut)}
/* display:table is required — the global `table{display:none}` that hides the
   pipeline table on mobile would otherwise blank out the whole price list */
#qsheet table.q{display:table;width:100%;border-collapse:collapse;font-size:10pt;margin-top:2px}
#qsheet table.q th{text-align:left;font-size:8pt;text-transform:uppercase;letter-spacing:.9px;
 color:var(--mut);padding:5px 0;border-bottom:1px solid var(--line);font-weight:600}
#qsheet table.q th.n,#qsheet table.q td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#qsheet table.q td{padding:8px 0;border-bottom:1px solid #e9edf4;vertical-align:top}
#qsheet table.q td .d{color:var(--mut);font-size:8.5pt;margin-top:1px}
#qsheet table.q tr.disc td{color:var(--g)}
#qsheet table.q tr.tot td{border-bottom:0;border-top:2px solid var(--g);padding-top:9px;
 font-weight:650;font-size:11.5pt}
#qsheet table.q tr.sub td{font-weight:600}
#qsheet .ann{font-size:9pt;color:var(--mut);margin-top:6px}
#qsheet .cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px;font-size:9.5pt}
#qsheet .cols div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;
 border-bottom:1px dotted #e3e7e2}
#qsheet .cols div span:last-child{font-weight:600;text-align:right;white-space:nowrap}
#qsheet ul.scope{list-style:none;columns:2;column-gap:26px;font-size:9.5pt}
#qsheet ul.scope li{padding:3px 0 3px 14px;position:relative;break-inside:avoid}
#qsheet ul.scope li:before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
 border-radius:50%;background:var(--acc)}
#qsheet .sig{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:14px;font-size:9.5pt}
#qsheet .sig .who{font-size:8pt;text-transform:uppercase;letter-spacing:.9px;color:var(--mut);margin-bottom:26px}
#qsheet .sig .ln{border-top:1px solid var(--ink);padding-top:4px;color:var(--mut);font-size:8.5pt}
#qsheet .sig .ln+.ln{margin-top:22px}
#qsheet .qf{margin-top:22px;padding-top:10px;border-top:1px solid var(--line);
 font-size:8.5pt;color:var(--mut);display:flex;justify-content:space-between;gap:16px}
#qsheet .avoid{break-inside:avoid;page-break-inside:avoid}

@media print{
  /* only the sheet survives; specificity beats the body>* blanket rule */
  body > *{display:none !important}
  body > #qwrap{display:block !important;position:static;background:none;padding:0;overflow:visible}
  #qbar{display:none !important}
  #qsheet{width:auto;min-height:0;margin:0;padding:0;box-shadow:none}
  @page{size:letter;margin:0.6in}
}

/* ---------- list screens (accounts, items, transactions) ---------- */
.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);
 text-transform:none;letter-spacing:0;margin:0;white-space:nowrap}
.chk input{width:auto;margin:0}
.btn.p{background:var(--g);color:#fff;border-color:var(--g)}
.mini-btn{font-size:11.5px;padding:4px 10px;border:1px solid var(--line);background:#fff;
 border-radius:6px;cursor:pointer;color:var(--g)}
.mini-btn:hover{background:#eef4fb;border-color:var(--acc)}
.frmh{font-size:13px;font-weight:650;color:var(--g);margin:0 0 10px;padding-bottom:8px;
 border-bottom:1px solid var(--line)}
.efrm code{background:#eef2f8;padding:1px 5px;border-radius:4px;font-size:12px}
.note code{background:#fff;padding:1px 5px;border-radius:4px;font-size:12px;
 border:1px solid var(--tint-line)}
.menu>.top.ico{padding:14px 15px}
.menu>.top.ico svg{display:block}
.hgrid.tight{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:16px}
.hgrid.tight .hcard{padding:12px 14px}
.hgrid.tight .hcard b{font-size:22px}
.tw tbody tr.dim{opacity:.5}
.tw tbody tr.dim .nm{text-decoration:line-through}
.linkrow{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:8px 10px;margin-bottom:6px;
 background:#fafbfd;border:1px solid var(--line);border-radius:8px}
.linkrow .lc{flex:1;min-width:150px;font-weight:600;font-size:13.5px;padding-bottom:9px}
.linkrow label{margin:0;font-size:10px}
.linkrow input{width:110px;font-size:13px;padding:6px 8px}
.linkrow .rk{width:56px;text-align:center}
.linkadd{display:flex;gap:8px;margin-top:8px}
.linkadd select{flex:1}
.tw td.acts2{white-space:nowrap}
.tw td.acts2 .mini-btn{margin-right:5px}

/* ---------- list cards (mobile) ----------
   .tw tables are desktop-only. Every list screen needs a card fallback or it
   simply disappears on a phone, which is where the call list actually gets
   worked. */
.rcard{background:var(--card);border:1px solid var(--line);border-radius:11px;
 padding:12px 13px;margin-bottom:8px}
.rcard.dim{opacity:.55}
.rcard.dim .nm{text-decoration:line-through}
.rcard .l1{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.rcard .nm{font-weight:600;font-size:14.5px;line-height:1.3}
.rcard .sub{color:var(--mut);font-size:11.5px;margin-top:2px}
.rcard .kv2{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px}
.rcard .kv2 span b{display:block;font-size:10px;text-transform:uppercase;
 letter-spacing:.7px;color:var(--mut);font-weight:600}
.rcard .meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.rcard .meta a{padding:6px 11px;background:#f7fafe;border:1px solid var(--line);
 border-radius:7px;font-size:12.5px;text-decoration:none}
.rcard .acts{display:flex;gap:6px;margin-top:9px}
/* record-page tables must survive on a phone — they are the content, not a grid */
.tw.always{display:block;overflow-x:auto;background:var(--card);
 border:1px solid var(--line);border-radius:10px}
.tw.always table{display:table;width:100%;min-width:0;border-collapse:collapse}
.tw.always th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;
 color:var(--mut);padding:9px 11px;background:#fafbfd;border-bottom:1px solid var(--line);white-space:nowrap}
.tw.always td{padding:9px 11px;border-bottom:1px solid #e9edf4;font-size:13px;vertical-align:top}

/* ---------- estimate form ---------- */
.ebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ebar .sp{flex:1}
.ebar b{font-size:16px}
.egrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.egrid{grid-template-columns:1.4fr 1fr;align-items:start}}
#view-estimate .sec{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
#view-estimate .tw.always th.n,#view-estimate .tw.always td.n{text-align:right}
#view-estimate .tw.always td{padding:7px 8px}
#view-estimate .tw.always input,#view-estimate .tw.always select{font-size:13px;padding:6px 8px;width:100%}
#view-estimate .tw.always input.qn{width:88px;text-align:right}
#view-estimate .tw.always td:first-child{width:28px}
#qsheet .qh .qtitle{font-size:11pt;font-weight:600;color:var(--ink);margin-top:5px}
.tw tbody tr.tot td{border-top:2px solid var(--g);border-bottom:0;background:#fafbfd}

/* ---------- why it ranks ---------- */
.why2{display:flex;flex-direction:column;gap:7px}
.wrow{display:grid;grid-template-columns:104px 1fr auto;gap:9px;align-items:center;font-size:12.5px}
.wrow .wk{color:var(--mut)}
.wrow .track{height:7px;background:#e9edf4;border-radius:4px;overflow:hidden}
.wrow .fill{display:block;height:100%;background:var(--acc);border-radius:4px;
 transition:width .2s}
.wrow .fill.full{background:var(--g)}
.wrow .fill.weak{background:var(--hot)}
.wrow .fill.none{background:var(--hot);opacity:.35;min-width:3px}
.wrow .wv{font-variant-numeric:tabular-nums;white-space:nowrap}
.wrow .wv b{font-weight:650}
.wrow .wv i{font-style:normal;color:var(--mut);font-size:11px;margin-left:2px}
.wrow .wr{grid-column:2/-1;color:var(--mut);font-size:11.5px;margin-top:-4px}
.wsum{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
#view-estimate .tw.always textarea.sd{font-size:12px;padding:5px 8px;min-height:38px;
 resize:vertical;margin-top:4px;color:var(--mut)}
#qsheet table.q td .d.sd{color:#37414f;font-size:9pt;margin:2px 0 3px;max-width:5.4in}
#qsheet table.q.i3 td.it{width:26%;vertical-align:top}
#qsheet table.q.i3 td.ds{width:53%;vertical-align:top;color:#37414f;font-size:9.5pt;
 padding-right:14px}
#qsheet table.q.i3 th:nth-child(2){width:53%}

/* ---------- chart of accounts ---------- */
.tw .n,.tw.always .n{text-align:right}
.tw tr.sechead td,.tw.always tr.sechead td{background:#f2f5fa;color:var(--mut);
 font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;font-weight:600;
 padding:7px 11px;border-bottom:1px solid var(--line)}
.tw tbody tr.sechead{cursor:default}
.tw tbody tr.sechead:hover td{background:#f2f5fa}
.tw td.num,.tw.always td.num{font-variant-numeric:tabular-nums;font-weight:650;
 white-space:nowrap;color:var(--g)}
.tw td.bal,.tw.always td.bal{font-variant-numeric:tabular-nums;white-space:nowrap}
.tw.always.coa tbody tr{cursor:pointer}
.tw.always.coa tbody tr:hover td{background:#eef4fb}
.tw.always.coa tbody tr.sechead:hover td{background:#f2f5fa}
.tw.always.coa .sub{line-height:1.45}

/* ---------- record action buttons ---------- */
.actbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.abtn{padding:9px 16px;border-radius:8px;font-size:13px;cursor:pointer;
 border:1px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap}
.abtn:hover{background:#eef4fb;border-color:var(--acc)}
.abtn.p{background:var(--g);border-color:var(--g);color:#fff;font-weight:600}
.abtn.p:hover{background:var(--g2);border-color:var(--g2)}
.abtn.danger{border-color:#f0c4c4;color:var(--hot)}
.abtn.danger:hover{background:#fef2f2;border-color:var(--hot)}

/* ---------- inline journal links ---------- */
.jlink{border:0;background:none;padding:0;cursor:pointer;
 color:var(--g);font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
.jlink:hover{color:var(--g2);text-decoration:underline}

/* ---------- record subtabs (NetSuite-style) ---------- */
.subtabs{display:flex;gap:2px;padding:0 18px;background:var(--card);
 border-bottom:1px solid var(--line);overflow-x:auto;flex-wrap:nowrap}
.subtabs button{flex:0 0 auto;border:0;background:none;cursor:pointer;
 padding:11px 15px;font-size:13px;color:var(--mut);white-space:nowrap;
 border-bottom:2.5px solid transparent;font-weight:500}
.subtabs button:hover{color:var(--g);background:#f6f9fd}
.subtabs button.on{color:var(--g);border-bottom-color:var(--g);font-weight:650}
.subtabs .cnt{display:inline-block;margin-left:6px;background:#eef2f7;color:var(--mut);
 border-radius:9px;padding:1px 7px;font-size:11px;font-weight:600;vertical-align:1px}
.subtabs button.on .cnt{background:var(--tint);color:var(--g)}
.stpane .sec:first-child{margin-top:0}

/* subtabs ride under the sticky header rather than scrolling away */
.subtabs{position:sticky;z-index:2}
/* the panel is the only thing that scrolls while it is open */
body.panelon{overflow:hidden}

/* ---------- sublists on a phone ----------
   The record sublists are tables because that is right on a desktop, and
   wrong on a 390px screen: fixed column widths there mean sideways
   scrolling to reach a phone number. Below 700px each row becomes a
   stacked card, labelled from data-l, which is how the rest of the app
   already behaves (cards on mobile, table above 900px). */
@media(max-width:700px){
  .stpane .tw.always{overflow-x:visible}
  .stpane .tw.always table,.stpane .tw.always tbody,
  .stpane .tw.always tr,.stpane .tw.always td{display:block;width:auto}
  .stpane .tw.always thead{display:none}
  .stpane .tw.always tr{border-bottom:1px solid var(--line);padding:12px 13px}
  .stpane .tw.always tr:last-child{border-bottom:0}
  .stpane .tw.always td{border:0;padding:3px 0;font-size:13.5px}
  .stpane .tw.always td[data-l]:before{content:attr(data-l);display:block;font-size:9.5px;
   text-transform:uppercase;letter-spacing:.7px;color:var(--mut);margin-bottom:1px}
  .stpane .tw.always td.n{text-align:left}
  .stpane .tw.always td.acts3{margin-top:9px;display:flex;gap:7px;flex-wrap:wrap}
  .stpane .tw.always td.acts3 .mini-btn{flex:1;padding:8px 10px;font-size:12.5px}
  /* totals rows keep their inline shape */
  .stpane .tw.always tr.tot td{display:inline-block;width:auto}
  /* tap targets: phone and email links are the point of the contacts list */
  .stpane .tw.always a{display:inline-block;padding:2px 0}
  .subtabs{padding:0 8px}
  .subtabs button{padding:11px 11px;font-size:12.5px}
  .stpane .actbar .abtn{flex:1 0 auto;text-align:center}
}

/* profile rows that carry a note under the value need breathing room */
.stpane[data-st="overview"] .kv dd .sub{margin-top:2px;line-height:1.4}
.stpane[data-st="overview"] .kv dt{padding-top:1px}

/* provider help block in the AI settings modal */
.mhelp{background:var(--tint);border:1px solid var(--tint-line);border-radius:8px;
 padding:10px 12px;font-size:12.5px;color:#37414f;margin:4px 0 12px;line-height:1.55}
.mhelp ol{margin:6px 0 0 18px}
.mhelp li{margin-bottom:3px}

/* quote status actions: accept reads green, decline reads red */
#qbar button#q_acc{background:#15803d;border-color:#15803d;font-weight:600}
#qbar button#q_acc:hover{background:#166534}
#qbar button#q_dec{background:rgba(255,255,255,.08);border-color:#f0a0a0;color:#ffd5d5}
#qbar button#q_dec:hover{background:#7f1d1d;border-color:#7f1d1d;color:#fff}

/* destructive toolbar buttons read red, same language as .abtn.danger */
.btn.danger{border-color:#f0c4c4;color:var(--hot)}
.btn.danger:hover{background:#fef2f2;border-color:var(--hot);color:var(--hot)}