@scope (.pp-scope) {
/* THE CARD ALONE, OVER ANOTHER PAGE (Jacob 9/25: "open the deal without taking me out of the dialer ... I can just close it,
   and I'm still in the dialer"): /deals?embed=1#key inside the Dialer shows only the deal card and its scrim, see-through
   around it; closing it tells the Dialer, and Go to Deals opens the whole Deals page. */
html.embed,html.embed body{background:transparent !important}
html.embed body{visibility:hidden}
html.embed #box,html.embed #scrim,html.embed #toast,html.embed #fv,html.embed #ae,html.embed #stagePick,html.embed #ff,html.embed #cellPick,html.embed #pop,html.embed .jf-dlg{visibility:visible}   /* + the stage picker, the funded form and the pickers (10/7: the stage could not be changed on a card opened from the Deal Board) */   /* + the application editor and the question box (10/5: Edit opened unseen on a card opened from another page) */
html.embed #jfgChat,html.embed .bx-nav,html.embed #bxDialer{display:none !important}
html.embed .box,html.embed .scrim{top:0 !important}
/* ── /deals: the pipeline the way Streak draws it, so nobody has to learn a new screen ── */
.pp{--line:#E3E6EA; --line2:#EDEFF2; --ink:#1F2328; --mut:#5F6368; --p:#0B7A5A; --psoft:#EAF6F1; --bad:#B42318; --badsoft:#FDECEC; --sel:#E8F0FE; font:13px/1.35 Inter,system-ui,sans-serif; color:var(--ink); display:flex; flex-direction:column; height:100vh; min-height:0; padding:8px 14px 0; position:relative}
.pp *{box-sizing:border-box}
.pp [hidden]{display:none !important}
.pp-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 0 8px}
.pp-crumb{display:flex; align-items:center; gap:6px; font-size:15px; color:var(--mut); white-space:nowrap}
.pp-crumb b{color:var(--ink); font-weight:600}
.pp-crumb .vn{color:var(--ink); font-weight:500}
.pp-crumb .vn.dirty::after{content:" •"; color:var(--p)}
.pp-tools{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pp-btn{height:32px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font:500 13px Inter,sans-serif; color:var(--ink); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.pp-btn:hover{background:#F6F7F8}
.pp-btn.pri{background:var(--p); border-color:var(--p); color:#fff}
.pp-btn.pri:hover{background:#0F8F69}
.pp-btn.lite{border-color:transparent; color:var(--p); background:var(--psoft)}
.pp-btn.ib{width:32px; padding:0; justify-content:center; font-size:15px; color:var(--mut)}
.pp-fsg{font-size:12px; color:var(--mut); white-space:nowrap}
.pp-fsg b{color:var(--ink); font-weight:600}
.pp-search{display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--mut)}
.pp-search input{border:0; outline:0; font:500 13px Inter,sans-serif; width:100%; min-width:0; color:var(--ink); background:transparent}
.pp-tools .pp-search{flex:0 1 460px; min-width:280px}   /* wide enough that a pasted merchant name is not cut off (Jacob, 9/23) */
.pp-sel{height:32px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:#fff; font:500 13px Inter,sans-serif; color:var(--ink)}
.fun-wrap{display:flex; align-items:center; gap:4px; margin:0 0 8px}
.fun{display:flex; gap:0; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0}
.fun::-webkit-scrollbar{display:none}
.fa{width:26px; height:56px; border:0; background:#F1F3F4; border-radius:6px; cursor:pointer; color:var(--mut); font-size:16px; flex:none}
.fa[disabled]{opacity:.4; cursor:default}
.fc{flex:none; min-width:152px; height:56px; padding:6px 18px 6px 22px; border:0; cursor:pointer; text-align:left; display:flex; flex-direction:column; justify-content:center; gap:1px; font-family:inherit; clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%); opacity:.96}
.fc:first-child{clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); border-radius:6px 0 0 6px; padding-left:16px}
.fc:hover{opacity:1; filter:brightness(1.04)}
.fc.dim{opacity:.35}
.fc b{font-size:20px; font-weight:700; line-height:1.1; letter-spacing:-.3px}
.fc span{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; opacity:.92}
.bulk{display:flex; align-items:center; gap:10px; padding:6px 10px; margin:0 0 6px; background:var(--sel); border:1px solid #C6DAFC; border-radius:8px; font-weight:500}
.bulk select{height:30px; border:1px solid var(--line); border-radius:6px; background:#fff; font:500 13px Inter,sans-serif; padding:0 6px}
.bulk .bulk-st{display:inline-flex; align-items:center; gap:8px; height:30px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); font:500 13px Inter,sans-serif; padding:0 10px; cursor:pointer; white-space:nowrap}
.bulk .bulk-st:hover{background:#F6F7F8} .bulk .bulk-st:focus-visible{outline:2px solid #9AA1A8; outline-offset:1px}
.bulk .n{color:var(--mut); font-weight:400}
.sheet{flex:1; min-height:0; overflow:auto; border:1px solid var(--line); border-radius:8px 8px 0 0; background:#fff; position:relative; overflow-anchor:none}   /* the sheet keeps the reader's place itself (vsAnchor) */
.grid tr.vsp td{padding:0; border:0; background:transparent}   /* the space standing for rows not drawn (10/22) */
.grid{border-collapse:separate; border-spacing:0; table-layout:fixed; width:1000px; font-size:13px}
.grid th,.grid td{height:30px; padding:0 8px; border-right:1px solid var(--line2); border-bottom:1px solid var(--line2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; vertical-align:middle}
.grid th{position:sticky; top:0; z-index:5; background:#fff; font-weight:600; color:var(--ink); height:34px; border-bottom:1px solid var(--line); user-select:none; overflow:visible}
.grid th .hl{cursor:pointer; display:inline-flex; align-items:center; gap:4px; max-width:calc(100% - 26px); overflow:hidden; text-overflow:ellipsis}
.grid th .hl:hover{color:var(--p)}
.grid th .sd{font-size:10px; color:var(--p)}
.grid th .hm{position:absolute; right:8px; top:8px; width:18px; height:18px; border:1px solid var(--line); border-radius:4px; background:#fff; font-size:9px; color:var(--mut); cursor:pointer; padding:0; line-height:1}
.grid th .hm:hover{background:#F1F3F4; color:var(--ink)}
.grid th .rs{position:absolute; right:-3px; top:0; width:7px; height:100%; cursor:col-resize; z-index:6}
.grid th .rs::after{content:""; position:absolute; left:3px; top:0; width:1px; height:100%; background:transparent}
.grid th .rs:hover::after{background:var(--p)}
.grid th .rs:hover{background:var(--p); opacity:.4}
.grid th.first,.grid td.first{position:sticky; left:0; z-index:4; background:#fff; width:56px; min-width:56px; padding:0 4px 0 8px; text-align:center}
.grid th.first{z-index:7}
.grid td.first .op{visibility:hidden; margin-left:4px; color:var(--mut); text-decoration:none; font-size:12px; cursor:pointer}
.grid tr.r:hover td.first .op{visibility:visible}
.grid tr.r:hover td{background:#F8F9FA}
.grid tr.r.sel td{background:var(--sel)}
.grid tr.r.on td{background:var(--psoft)}
.grid td.ed{cursor:text}
.grid td.ed:hover{box-shadow:inset 0 0 0 1px #B8C4CE}
.grid td.editing{padding:0; overflow:visible}
.grid td.editing input,.grid td.editing select{width:100%; height:30px; border:2px solid #5F666D; border-radius:0; padding:0 6px; font:13px Inter,sans-serif; outline:0; background:#fff}
.grid td.saving{opacity:.5}
.grid td.money{font-variant-numeric:tabular-nums}
.grid tr.grp td{height:42px; background:#fff; border-right:0; position:sticky; left:0; overflow:visible}
.grid tr.grp td .gi{display:inline-flex; align-items:center; gap:8px; position:sticky; left:8px}
.grid .caret{width:18px; height:18px; border:0; background:transparent; cursor:pointer; color:var(--mut); font-size:11px; padding:0}
.grid .caret.closed{transform:rotate(-90deg)}
.chip{display:inline-block; padding:3px 9px; border-radius:3px; font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; line-height:1.2}
.grid .gn{color:var(--mut); font-size:12px}
.grid .gadd{width:22px; height:22px; border:0; background:transparent; color:var(--mut); font-size:18px; line-height:1; cursor:pointer; border-radius:4px; padding:0}
.grid .gadd:hover{background:#F1F3F4; color:var(--ink)}
.grid tr.more td{color:rgba(0,0,0,.54); cursor:default; font-weight:400; background:#fff; height:32px}   /* a quiet row at the end of a group: the rest loads as you scroll, as Streak does (Jacob, 9/23 10:03 PM) */
.grid tr.more td:hover{text-decoration:underline}
.grid tr.info td{color:var(--mut); background:#FAFBFC}
.av{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:#5F6368; color:#fff; font-size:11px; font-weight:600; margin-right:6px; vertical-align:middle; flex:none}
.sdot{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; clip-path:polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%)}
.stx{text-transform:uppercase; font-size:12px; font-weight:500}
.grid td.nm{font-weight:500}
.menu{position:fixed; z-index:40; min-width:190px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 30px rgba(20,27,31,.12); padding:4px}
.menu button{display:block; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; font:13px Inter,sans-serif; color:var(--ink); cursor:pointer; border-radius:6px}
.menu button:hover{background:#F1F3F4}
.menu button.bad{color:var(--bad)}
.menu .m-cap{padding:6px 10px 2px; font:600 11px Inter,sans-serif; letter-spacing:.04em; text-transform:uppercase; color:var(--mut)}
.menu .m-who{max-height:300px; overflow:auto}
.menu .m-who button{display:flex; align-items:center; gap:6px}
.menu .m-who button.on{font-weight:600}
.menu .m-who .tick{width:14px; flex:none; color:#0B7A5A; font-weight:700}
.menu .m-who .av{margin-right:2px}
.menu .m-who .av.all{background:#E8EAED; color:#5F6368}
.grid th .who-on{font-weight:600; color:#0B7A5A}
/* on a computer the choice lives in the Assigned To column (10/11); a phone, with no column titles, keeps the box */
@media (min-width:761px){ #agentSel{display:none !important} }
.menu hr{border:0; border-top:1px solid var(--line2); margin:4px 0}
.pop{position:fixed; z-index:40; width:min(300px, calc(100vw - 8px)); max-height:70vh; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 30px rgba(20,27,31,.12); padding:8px}
.pop h4{margin:4px 6px 8px; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut); font-weight:600}
.pop .it{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; font-size:13px}
.pop .it:hover{background:#F6F7F8}
.pop .it label{flex:1; display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop .it .mv{width:22px; height:22px; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; font-size:10px; color:var(--mut); padding:0}
.pop .it .mv:hover{background:#F1F3F4; color:var(--ink)}
.pop .it.cur{background:var(--psoft)}
.pop .row{display:flex; gap:6px; padding:6px}
/* THE STAGES WINDOW (Jacob 9/28): the owner adds, renames, recolours, orders and deletes stages; a deleted stage's deals move */
.stg{position:fixed; inset:0; z-index:60; background:rgba(20,27,31,.28); display:flex; align-items:flex-start; justify-content:center; padding:56px 16px}
.stg[hidden]{display:none}
.stg-card{width:min(660px,100%); max-height:calc(100vh - 112px); display:flex; flex-direction:column; background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden}
.stg-h{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; padding:16px 12px 12px 18px; border-bottom:1px solid var(--line2)}
.stg-h b{font-size:16px; color:var(--ink)} .stg-sub{font-size:12.5px; color:var(--mut); flex:1 1 220px}
.stg-x{border:0; background:transparent; font-size:22px; line-height:1; color:var(--mut); cursor:pointer; padding:2px 8px; border-radius:6px} .stg-x:hover{background:#F1F3F4}
.stg-list{overflow:auto; padding:6px 10px; flex:1; min-height:0}
.stg-row{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:8px; min-height:40px}
.stg-row:hover{background:#F6F7F8}
.stg-sw{width:22px; height:22px; flex:none; padding:0; border:1px solid rgba(0,0,0,.08); border-radius:6px; cursor:pointer}
.stg-nm{flex:1; min-width:0; text-align:left; border:0; background:transparent; padding:5px 6px; border-radius:6px; font:600 13px Inter,sans-serif; color:var(--ink); cursor:text; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.stg-nm:hover{background:#EEF0F2}
.stg-in{flex:1; min-width:0; height:30px; border:1px solid #9AA1A7; border-radius:6px; padding:0 8px; font:600 13px Inter,sans-serif; color:var(--ink); text-transform:uppercase; outline:0}
.stg-n{flex:none; width:86px; text-align:right; font-size:12px; color:var(--mut); white-space:nowrap}
.stg-lock{flex:none; width:118px; box-sizing:border-box; text-align:center; font-size:11px; font-weight:600; color:#5F6368; background:#F1F3F4; border-radius:999px; padding:4px 8px; white-space:nowrap; cursor:help}
.stg-row .mv{flex:none; width:26px; height:26px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--mut); font-size:10px; cursor:pointer; padding:0}
.stg-row .mv:hover{background:#F1F3F4; color:var(--ink)} .stg-row .mv:disabled{opacity:.35; cursor:default}
.stg-del{flex:none; width:118px; height:28px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--bad); font:500 12px Inter,sans-serif; cursor:pointer}
.stg-del:hover{background:var(--badsoft)}
.stg-lock .lk-s{display:none}
html.stg-open #jfgChat .jc-launch{display:none}   /* the team chat button never covers Add stage (a class, 10/22: html:has() made Chrome look through the whole page at every change of anything hidden) */
.stg-pal{display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 0}
.stg-pick{margin:2px 6px 12px 58px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; display:flex; flex-direction:column; gap:10px}
#stgNewPick .stg-pick{margin:0 16px 12px}
.pk-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pk-prev{width:56px; height:40px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center; font:700 15px Inter,sans-serif; border:1px solid rgba(0,0,0,.08)}
.pk-sl{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:8px}
.pk-sl label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:var(--mut)}
.pk-sl input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:14px; border-radius:999px; outline:0; margin:0; cursor:pointer}
#pkHue{background:linear-gradient(90deg,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00)}
.pk-sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.3)}
.pk-sl input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25),0 1px 4px rgba(0,0,0,.3)}
.stg-grip{flex:none; width:18px; display:flex; justify-content:center; color:#A3AAB0; cursor:grab}
.stg-row:hover .stg-grip{color:#5F6368}
.stg-row.dragging{opacity:.45}
.stg-row.drop-a{box-shadow:inset 0 2px 0 #0B7A5A}
.stg-row.drop-b{box-shadow:inset 0 -2px 0 #0B7A5A}
.stg-newsw{align-self:center}
.stg-pal button{width:26px; height:26px; padding:0; border:1px solid rgba(0,0,0,.1); border-radius:6px; cursor:pointer}
.stg-dc{margin:0 6px 10px 36px; padding:10px 12px; background:#FFF4F4; border-radius:8px; font-size:13px; color:var(--ink); line-height:1.55}
.stg-dc select{height:30px; margin:0 4px; border:1px solid var(--line); border-radius:6px; font:13px Inter,sans-serif; max-width:100%}
.stg-dc .stg-dn{display:block; color:var(--mut); font-size:12px; margin-top:4px}
.stg-dc .stg-da{display:flex; gap:8px; margin-top:8px}
.stg-dc .stg-go{height:30px; padding:0 12px; border:0; border-radius:6px; background:var(--bad); color:#fff; font:600 12.5px Inter,sans-serif; cursor:pointer}
.stg-gone{padding:8px 18px; font-size:12.5px; color:var(--mut); border-top:1px solid var(--line2)} .stg-gone:empty{display:none}
.stg-add{display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; border-top:1px solid var(--line2)}
.stg-add input{flex:1 1 200px; min-width:0; height:34px; border:1px solid var(--line); border-radius:8px; padding:0 10px; font:13px Inter,sans-serif; text-transform:uppercase; outline:0}
.stg-add input:focus{border-color:#9AA1A7}
.stg-add select{height:34px; max-width:240px; border:1px solid var(--line); border-radius:8px; font:13px Inter,sans-serif; background:#fff}
.stg-note{padding:0 16px 12px; font-size:12.5px; color:var(--mut)} .stg-note:empty{display:none} .stg-note.bad{color:var(--bad); font-weight:600}
.stg-msg{padding:24px; text-align:center; color:var(--mut)}
@media (max-width:760px){
  .stg{padding:0} .stg-card{width:100%; height:100%; max-height:none; border-radius:0}
  .stg-n{width:auto} .stg-lock,.stg-del{width:78px; padding:4px 6px} .stg-lock .lk-l{display:none} .stg-lock .lk-s{display:inline} .stg-row{gap:6px} .stg-list{padding:6px 6px} .stg-add input,.stg-add select{font-size:16px}
}
.pop .row input{flex:1; height:30px; border:1px solid var(--line); border-radius:6px; padding:0 8px; font:13px Inter,sans-serif}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60; background:#1F2328; color:#fff; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:500; box-shadow:0 8px 30px rgba(0,0,0,.2); max-width:min(90vw,560px)}
.toast.bad{background:var(--bad)}
.toast .toast-act{margin-left:12px; padding:0; background:transparent; border:0; color:#8FD6B8; font:600 13px Inter,sans-serif; cursor:pointer; text-decoration:underline}
/* the picked cell, outlined the way Streak and Sheets do it */
.grid td.act{box-shadow:inset 0 0 0 2px #1A73E8 !important; background:#fff}
.keys{position:fixed; inset:0; z-index:400; background:rgba(23,26,29,.45); display:flex; align-items:center; justify-content:center; padding:16px}
.keys-card{background:#fff; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.25); width:min(620px,100%); max-height:84vh; overflow:auto; padding:18px 22px 20px; font:400 13px Inter,system-ui,sans-serif; color:#25292E}
.keys-card h3{margin:0 0 4px; font-size:16px; font-weight:600} .keys-card .sub{color:#687078; margin:0 0 12px}
.keys-card h4{margin:14px 0 6px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#687078}
.keys-card .kr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:5px 0; border-top:1px solid #EEF0F2}
.keys-card kbd{display:inline-block; min-width:22px; padding:2px 7px; margin-left:3px; border:1px solid #DDE1E5; border-bottom-width:2px; border-radius:6px; background:#F6F7F8; font:600 12px Inter,system-ui,sans-serif; text-align:center; white-space:nowrap}
.scrim{position:fixed; inset:0; background:rgba(20,27,31,.28); z-index:45}
.box{position:fixed; top:0; right:0; bottom:0; width:min(980px,100vw); background:#fff; z-index:50; box-shadow:-8px 0 30px rgba(20,27,31,.14); display:flex; flex-direction:column; font-size:13px}
.box-h{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.box-h h2{font-size:18px; font-weight:600; margin:0; flex:1; min-width:200px; cursor:text; padding:2px 6px; border-radius:6px; border:1px solid transparent}
.box-h h2:hover{border-color:var(--line)}
.box-h h2 input{width:100%; font:600 18px Inter,sans-serif; border:1px solid #5F666D; border-radius:6px; padding:2px 6px; outline:0}
.box-h select{height:32px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:#fff; font:500 13px Inter,sans-serif}
.box-h .x{width:32px; height:32px; border:0; background:transparent; font-size:20px; cursor:pointer; color:var(--mut); border-radius:8px}
.box-h .nav{width:28px; font-size:18px} .box-h .nav[disabled]{opacity:.3; cursor:default}
.box-h .pos{font-size:12px; color:var(--mut); white-space:nowrap}
.fu-wrap{position:relative}
.fu-menu{position:absolute; right:0; top:36px; width:290px}
.fu-menu input[type=text]{width:100%; height:32px; border:1px solid var(--line); border-radius:6px; padding:0 8px; font:13px Inter,sans-serif; margin:2px 0 6px}
.fu-custom{display:flex; gap:6px; padding:6px 4px 2px}
.fu-custom input{flex:1; min-width:0; height:32px; border:1px solid var(--line); border-radius:6px; padding:0 6px; font:13px Inter,sans-serif}
.addrow{display:flex; align-items:center; gap:6px; margin:8px 0 2px; font-size:12px; color:var(--mut); flex-wrap:wrap}
.chipb{height:28px; padding:0 10px; border:1px solid var(--line); border-radius:999px; background:#fff; font:500 12px Inter,sans-serif; cursor:pointer; color:var(--ink)}
.chipb:hover{background:#F6F7F8}
.fu{display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line2); border-radius:8px; margin-top:6px}
.fu.late{border-color:#F3C6C6; background:#FFF7F7}
.fu .when{font-weight:600; white-space:nowrap} .fu.late .when{color:var(--bad)}
.fu .tx{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fu .by{font-size:11px; color:var(--mut); white-space:nowrap}
.fu button{height:26px; padding:0 8px; border:1px solid var(--line); border-radius:6px; background:#fff; font:500 12px Inter,sans-serif; cursor:pointer; flex:none}
.fu button:hover{background:#F6F7F8}
.fu.finished{opacity:.65} .fu.finished .tx{text-decoration:line-through}
.tl{border-left:2px solid var(--line2); margin:6px 0 0 6px; padding-left:14px}
.tli{position:relative; padding:4px 0 10px}
.tli::before{content:""; position:absolute; left:-20px; top:10px; width:9px; height:9px; border-radius:50%; background:#C4CAD0; border:2px solid #fff}
.tli .who{font-weight:600} .tli .t{font-size:11px; color:var(--mut); margin-left:6px}
.tli .body{white-space:pre-wrap; margin-top:2px; word-break:break-word}
.tli .chipx{display:inline-block; padding:1px 7px; border-radius:3px; font-size:11px; font-weight:700; text-transform:uppercase; margin-left:4px; vertical-align:1px}
.due-badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--p); color:#fff; font-size:11px; font-weight:700; margin-left:2px}
.due-badge.late{background:var(--bad)}
.pop .it.due{display:block; cursor:pointer} .pop .it.due b{display:block} .pop .it.due .m{font-size:11px; color:var(--mut)} .pop .it.due.late .m{color:var(--bad)}
.box-h .x:hover{background:#F1F3F4}
.box-h a.dl{height:32px; display:inline-flex; align-items:center; padding:0 12px; border-radius:999px; background:var(--p); color:#fff; font:600 13px Inter,sans-serif; text-decoration:none}
.box-b{flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0}
.box-b > div{padding:12px 16px; min-width:0}
.box-b > div + div{border-left:1px solid var(--line2)}
.cap{font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--mut); margin:14px 0 6px}
.cap:first-child{margin-top:0}
.det{display:grid; grid-template-columns:130px 1fr 130px 1fr; gap:0; border:1px solid var(--line2); border-radius:8px; overflow:hidden}
.det .k{padding:6px 10px; color:var(--mut); border-bottom:1px solid var(--line2); background:#FAFBFC; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.det .v{padding:6px 10px; border-bottom:1px solid var(--line2); min-height:30px; white-space:pre-wrap; word-break:break-word}
.det .v.ed{cursor:text} .det .v.ed:hover{background:#F8F9FA}
.det .v.empty{color:#B0B6BC}
.det .v.editing{grid-column:2 / -1; background:#FFFDF2; padding:8px 10px 10px}
.edbox{display:flex; flex-direction:column; gap:6px}
.edbox .edlab{font-size:12px; color:var(--mut)} .edbox .edlab b{color:var(--ink)}
.edbox textarea{width:100%; min-height:46px; font:15px/1.4 Inter,sans-serif; border:2px solid #5F666D; border-radius:8px; padding:8px 10px; outline:0; resize:vertical; background:#fff}
.edbox .edact{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--mut)}
.det .k:last-of-type,.det .v:last-of-type{border-bottom:0}
.num{display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--line2); border-radius:8px; margin-top:6px}
.num .d{font-weight:600; font-variant-numeric:tabular-nums}
.tag{font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:#EEF0F2; color:var(--mut)}
.tag.good{background:var(--psoft); color:var(--p)} .tag.bad{background:var(--badsoft); color:var(--bad)}
.months{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px}
.mo{font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:#fff; white-space:nowrap}
.mo.have{background:var(--psoft); color:var(--p); border-color:#CDEAE0} .mo.miss{background:var(--badsoft); color:var(--bad); border-color:transparent}
.file{display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line2); border-radius:8px; margin-top:4px; text-decoration:none; color:var(--ink)}
.file .fl{font-size:11px; color:var(--mut); width:66px; flex:none} .file .fn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .file .fs{font-size:11px; color:var(--mut)}
.fgh{font-size:11px; font-weight:600; color:var(--mut); margin:8px 0 2px}
.fcard{border:1px solid var(--line2); border-radius:10px; padding:8px 10px 10px; margin-top:6px}
.fcard .fgh{margin:0 0 6px}
.fchips{display:flex; flex-wrap:wrap; gap:6px}
.fchip{display:inline-flex; align-items:center; gap:7px; max-width:100%; height:32px; padding:0 12px 0 6px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); text-decoration:none; font-weight:500}
.fchip:hover{background:#F6F7F8; border-color:#B8C4CE; text-decoration:none; color:var(--ink)}
.fchip .fn{white-space:normal; overflow-wrap:anywhere; word-break:normal; line-height:1.25; min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
/* a chip never grows past its card: it may shrink and wrap its name (two lines, the whole name on hover) */
.fchip{min-width:0} .fchip .fk{flex:none} .frow2 > :not(.fchip){flex:none}
.fchip{height:auto; min-height:32px; padding:5px 12px 5px 6px}
.fchip .fp{display:inline-block; margin-left:6px; font-size:11px; color:var(--mut); font-weight:500; white-space:nowrap}
.mrows{display:flex; flex-direction:column; gap:4px}
.mrow{display:grid; grid-template-columns:92px 1fr; gap:4px 10px; align-items:start; padding:6px 0; border-top:1px solid var(--line2)}
.mrow:first-child{border-top:0}
.mrow .ml{font-weight:600; padding-top:7px; white-space:nowrap}
.mrow.miss .ml{color:var(--bad)}
.mrow .mf{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.mrow .mnone{color:var(--mut); padding-top:7px; font-size:12px} .mrow.miss .mnone{color:var(--bad); font-weight:600}
.mrow .mnote{grid-column:2; font-size:12px; color:#8A580F; background:#FFF6DF; border-radius:6px; padding:3px 8px; justify-self:start}
.mrow.multi .fchip{border-color:#EBD9AE}
.fk{display:inline-flex; align-items:center; justify-content:center; height:20px; padding:0 5px; border-radius:4px; font-size:9px; font-weight:800; letter-spacing:.3px; color:#fff; background:#5F6368}
.fk.pdf{background:#D93025} .fk.img{background:#1A73E8} .fk.xls{background:#188038} .fk.doc{background:#4285F4}
.months.mini{margin:0 0 8px} .months.mini .mo{font-size:11px; padding:2px 7px}
.fcard.unread{border-style:dashed}

.notes{width:100%; min-height:90px; resize:vertical; font:13px/1.4 Inter,sans-serif; color:var(--ink); background:#FAFBFC; border:1px solid var(--line2); border-radius:8px; padding:8px 10px}
.cmt{padding:8px 10px; border-left:3px solid #CDEAE0; margin-top:6px; white-space:pre-wrap}
.cmt .m{font-size:11px; color:var(--mut); margin-top:2px}
.addnote{display:flex; gap:8px; margin-top:8px}
.addnote textarea{flex:1; min-height:34px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; font:500 13px Inter,sans-serif}
.addnote > button{height:34px; padding:0 14px; border:0; border-radius:999px; background:var(--p); color:#fff; font:600 13px Inter,sans-serif; cursor:pointer}
.numsec{margin:6px 0 16px}
.numhead{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 10px; background:#F1F3F5; border-radius:8px; font-weight:600}
.numhead .d{font-variant-numeric:tabular-nums; font-size:14px}
.numhead .slot{font-size:11px; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.3px}
.numhead .cnt{margin-left:auto; font-size:11px; font-weight:500; color:var(--mut)}
.ent{margin:8px 0}
.ent .lab{font-size:12px; color:#3C4043; margin:0 0 3px; font-weight:500}
.ent.out .lab{text-align:right}
.ent .lab b{color:var(--bad)}
.ent.call .lab{padding:4px 0; color:var(--mut)}
.bub{max-width:88%; padding:8px 12px; border-radius:14px; line-height:1.4; margin:0; white-space:pre-wrap; word-break:break-word}
.bub.failed{background:var(--badsoft); border:2px solid var(--bad); color:var(--bad)}
.sheet.ranging{user-select:none}
.bub.in{background:#F1F3F5; margin-right:auto} .bub.out{background:var(--psoft); margin-left:auto}
.bub.auto{background:#fff; border:1px dashed var(--line)}
.bub .m{display:block; font-size:11px; color:var(--mut); margin-top:4px}
.call{font-size:12px; color:var(--mut); padding:4px 0}
.note{font-size:12px; color:var(--mut); margin-top:6px} .note.ok{color:var(--p)} .note.bad{color:var(--bad); font-weight:700}
.pp-empty{padding:40px 16px; color:var(--mut); text-align:center; font-size:14px}
/* ── Streak skin (measured from Streak's own pipeline and box, 2026-09-23) ──
   Grid: Arial 13px, 24px rows, 4px cell inset, grey gridlines both ways, bold 24px header.
   Group: a grey 40px bar, a 16px bold stage chip, the stage colour down the left of its rows.
   Funnel: 56px chevrons, 20px bold count over a 13px plain label.
   Box: the deal fills the page (back arrow and breadcrumb, Follow Up pill, "2 of N"), Roboto,
   13px grey labels over 13px values with no rules between them, a coloured stage bar on top. */
.pp{--gl:#E2E2E2; --gh:#D0D0D0; --hov:#E8F7FA}
.fc{width:156px; min-width:156px; margin-right:-10px; padding:8px 20px 8px 26px; gap:0}
.fc:first-child{padding-left:18px}
.fc b{font:700 20px/24px Roboto,Arial,sans-serif; letter-spacing:0}
.fc span{font:400 13px/16px Arial,Helvetica,sans-serif; text-transform:none; letter-spacing:0; max-width:112px; opacity:1}
.fun{padding-right:12px}
.sheet{border-radius:0; border-color:var(--gh)}
.grid{font:13px Arial,Helvetica,sans-serif; color:rgba(0,0,0,.87)}
.grid th,.grid td{height:24px; padding:0 4px 0 5px; border-right:1px solid var(--gl); border-bottom:1px solid var(--gl)}
.grid th{height:25px; font-weight:700; color:rgba(0,0,0,.87); border-right-color:var(--gh); border-bottom:1px solid var(--gh)}
.grid th .hm{top:5px; right:5px; width:14px; height:14px; border:1px solid #A0A0A0; border-radius:2px; font-size:8px; color:#444}
.grid th.first,.grid td.first{width:56px; min-width:56px; padding:0 4px 0 8px}
.grid td.first .op{color:#1A73E8; font-size:13px}
.grid tr.r:hover td{background:var(--hov)}
.grid tr.r.on td{background:var(--hov)}
.grid td.nm{font-weight:400}
.grid td.editing input,.grid td.editing select{height:24px; font:13px Arial,Helvetica,sans-serif}
.grid tr.grp td{height:40px; background:#F1F1F1; border-bottom:1px solid var(--gl)}
.grid tr.grp .chip{font:700 16px/24px Roboto,Arial,sans-serif; letter-spacing:.25px; text-transform:none; padding:0 8px; border-radius:4px}
.grid .gn{font:13px Arial,sans-serif; color:rgba(0,0,0,.54)}
.grid .gadd{font-size:22px; color:rgba(0,0,0,.54)}
.sdot{width:14px; height:12px; border-radius:0; margin-right:6px; vertical-align:-2px; clip-path:polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 36% 50%)}
.stx{text-transform:none; font-size:13px; font-weight:400}
.av{font:500 11px/20px Roboto,Arial,sans-serif; margin-right:6px}
/* the card is never so narrow that its files column is crushed (9/24, 1024 wide: chips down to one letter): at least
   900 px (or the whole screen) so the files column keeps about 380 px beside the 432 px right column */
.box{position:fixed; top:0; right:0; bottom:0; width:max(min(900px,100vw),calc(100vw - 380px)); box-shadow:-2px 0 6px rgba(60,64,67,.15),-8px 0 24px rgba(60,64,67,.12); z-index:50; font:13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.scrim{background:rgba(32,33,36,.16)}
.box-h{gap:6px; padding:10px 12px 10px 4px; border-bottom:0}
.box-h .back{width:40px; height:40px; border:0; background:transparent; border-radius:50%; cursor:pointer; color:#5F6368; font-size:26px; line-height:1; flex:none}
.box-h .back:hover{background:#F1F3F4}
.box-h{height:64px; padding:0 16px 0 12px; flex-wrap:nowrap}
.box-h .bc{display:flex; align-items:center; gap:10px; min-width:0; flex:1; font:400 16px Roboto,Arial,sans-serif}
.box-h .bc .pl{color:#5F6368; cursor:pointer; white-space:nowrap}
.box-h .bc .pl:hover{text-decoration:underline}
.box-h .bc .sep{color:#5F6368; font-size:18px}
.box-h h2{font:400 20px Roboto,Arial,sans-serif; color:#202124; flex:0 1 auto; min-width:0; padding:2px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:default}
.box-h .copyname{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 auto; margin-left:-2px; border:1px solid rgba(0,0,0,.14); border-radius:8px; background:#fff; color:rgba(0,0,0,.54); cursor:pointer; padding:0}
.box-h .copyname:hover{color:#0B7A5A; border-color:#0B7A5A}
.box-h .copyname.done{color:#0B7A5A; border-color:#0B7A5A; background:#e6f3ee}
/* SHARE THE DEAL (10/20): the forward arrow beside the copy button, and the team under it, owners first; a tap sends it */
.sh-wrap{position:relative; flex:0 0 auto; display:inline-flex}
.box-h .sh-wrap .copyname{margin-left:4px}
.box-h .sh-wrap .copyname[aria-expanded=true]{color:#0B7A5A; border-color:#0B7A5A}
.sh-menu{position:absolute; right:0; left:auto; top:36px; width:290px; max-width:calc(100vw - 24px); padding:0 0 6px; border:0; border-radius:4px; box-shadow:0 2px 6px rgba(60,64,67,.2),0 6px 20px rgba(60,64,67,.18); font:14px Roboto,Arial,sans-serif}
.sh-h{padding:10px 12px 6px; font:500 12px Roboto,Arial,sans-serif; letter-spacing:.3px; color:rgba(0,0,0,.6)}
.sh-q{display:block; width:calc(100% - 24px); margin:0 12px 6px; height:30px; border:0; border-bottom:1px solid #E0E0E0; padding:0; font:400 14px Roboto,Arial,sans-serif; outline:0; background:transparent}
.sh-list{max-height:300px; overflow:auto; overscroll-behavior:contain}
.sh-menu .sh-it{display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:4px 12px; border:0; background:transparent; text-align:left; cursor:pointer; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.sh-menu .sh-it:hover{background:#F1F3F4}
.sh-menu .sh-it:focus-visible{outline:2px solid #9AA1A8; outline-offset:-2px}
.sh-menu .sh-it:disabled{cursor:default; background:transparent}
.sh-av{flex:none; width:26px; height:26px; border-radius:50%; color:#fff; font:500 12px/26px Roboto,Arial,sans-serif; text-align:center}
.sh-nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sh-role{flex:none; font:400 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54)}
.sh-st{flex:none; font:500 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); white-space:nowrap}
.sh-menu .sh-it.sent .sh-st{color:#0B7A5A}
.sh-menu .sh-it.sh-bad .sh-st{color:#B42318; white-space:normal; max-width:130px; text-align:right}
.sh-msg{padding:8px 12px; color:rgba(0,0,0,.6); font:400 13px Roboto,Arial,sans-serif}
.sh-foot{padding:6px 12px 2px; color:rgba(0,0,0,.5); font:400 12px Roboto,Arial,sans-serif}
.sh-menu .sh-it.on .sh-av{background:#0B7A5A !important; font-size:14px}
.sh-send{display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:6px 12px 0; padding-top:8px; border-top:1px solid #EEEEEE}
.sh-send textarea{width:100%; box-sizing:border-box; min-height:56px; max-height:120px; resize:none; border:1px solid #DADCE0; border-radius:8px; padding:8px 10px; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); outline:0}
.sh-send textarea:focus{border-color:#9AA1A8}
.sh-menu .sh-go{align-self:flex-end; width:auto; min-width:178px; height:36px; padding:0 16px; border:0; border-radius:18px; background:#0B7A5A; color:#fff; font:500 13px Roboto,Arial,sans-serif; cursor:pointer; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.sh-menu .sh-go:disabled{background:#E8EBED; color:rgba(0,0,0,.38); cursor:default}
@media (pointer: coarse){ .sh-send textarea{font-size:16px} }
@media (pointer: coarse){ .sh-menu .sh-it{min-height:48px} .sh-q{font-size:16px; height:34px} }
.box-h h2:has(input){flex:1}
.box-h h2:not(:has(input)):hover{border-color:transparent; background:#F1F3F4}
.box-h h2 input{font:400 20px Roboto,Arial,sans-serif}
.box-h #fuBtn{height:36px; padding:0 16px 0 12px; border:0; border-radius:100px; background:#fff; box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15); font:500 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.box-h #fuBtn::before{content:"+"; color:#F4511E; font-size:20px; font-weight:400; margin-right:6px; line-height:1}
.box-h #fuBtn:hover{background:#F8F9FA}
.box-h #bxShop{height:36px; padding:0 16px; border:0; border-radius:100px; background:#fff; box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15); font:500 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.box-h #bxShop:hover{background:#F8F9FA}
.box-h #bxShop[disabled]{opacity:.6}
.box-h .pos{font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); min-width:64px; text-align:center}
.box-h .nav{width:32px; height:32px; border-radius:50%; color:#5F6368; font-size:20px}
.box-h a.dl{border-radius:100px; font:500 14px Roboto,Arial,sans-serif; height:36px; padding:0 16px}
.box-b{grid-template-columns:minmax(0,1fr) minmax(432px,40%); gap:28px; padding:4px 28px 24px 32px; align-items:start}
.box-grip{position:absolute; left:-4px; top:0; bottom:0; width:9px; cursor:col-resize; z-index:6}
.box-grip:hover,.box-grip.on{background:rgba(0,0,0,.08)}
.box-b > div{padding:0}
.box-b > div + div{border-left:0}
.bx-top{display:flex; align-items:center; justify-content:flex-start; gap:20px; margin:0 0 12px}
.bx-top #bxStage{flex:none; width:232px; height:30px; border:0; border-radius:4px; padding:0 8px 0 10px; font:500 14px Roboto,Arial,sans-serif; letter-spacing:.25px; cursor:pointer}
.bx-who{display:inline-flex; align-items:center; gap:8px; min-width:0}
.bx-who .bx-av{width:24px; height:24px; border-radius:50%; flex:none; color:#fff; font:500 12px/24px Roboto,Arial,sans-serif; text-align:center}
.bx-who .bx-av:empty{display:none}
.bx-top #bxAgent{height:30px; border:0; background:transparent; padding:0 2px; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); max-width:200px; cursor:pointer}
.cap{font:500 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); text-transform:none; letter-spacing:0; margin:18px 0 8px}
.det{grid-template-columns:130px minmax(0,1fr) 130px minmax(0,1fr); border:1px solid rgba(0,0,0,.12); border-radius:4px; padding:10px 8px}
.det .k{background:transparent; border-bottom:0; color:rgba(0,0,0,.54); padding:9px 8px; font-size:13px}
.det .v{border-bottom:0; color:rgba(0,0,0,.87); padding:9px 8px; min-height:34px; font-size:13px}
.det .v.empty{color:rgba(0,0,0,.38)}
.det .v.ed:hover{background:#F1F3F4; border-radius:4px}
.addnote{flex-direction:column; gap:10px; margin-top:0; padding:12px 12px 12px 10px; border:1px solid #E0E0E0; border-radius:4px; background:#fff; position:relative}
/* the text starts 2 px inside the box so the blinking cursor is never half cut at its edge (Jacob 9/24) */
.addnote textarea{border:0; height:auto; min-height:22px; max-height:160px; padding:0 36px 0 2px; margin:0; font:400 15px/22px Roboto,Arial,sans-serif; outline:0; box-shadow:none; background:transparent; resize:none; overflow:auto; color:#202124; width:100%; box-sizing:border-box}
.addnote textarea:focus, .addnote textarea:focus-visible{outline:0; box-shadow:none; border:0; background:transparent}
/* THE SEND BUTTON ONLY: ".addnote button" also caught every name in the @ list inside the box, pinned them all into this
   28 px corner and left the list a thin empty bar (Jacob 9/24: "there's no menu bar that drops down") */
.addnote > button{position:absolute; right:10px; bottom:10px; width:28px; height:28px; padding:0; border-radius:50%; background:#E8EAED; color:#5F6368; font:700 15px Roboto,Arial,sans-serif}
.addnote > button:hover{background:var(--p); color:#fff}
.addrow{margin:14px 0 6px; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); gap:8px}
.chipb{height:24px; padding:0 10px; border:0; border-radius:100px; background:rgba(0,0,0,.04); font:500 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.chipb:hover{background:rgba(0,0,0,.08)}
.fcard{border:1px solid #E0E0E0; border-radius:4px; padding:12px}
.fgh{font:500 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.fchip{min-height:30px; border:0; border-radius:15px; box-shadow:inset 0 0 0 1px rgba(100,121,143,.3); color:#5F6368; font:400 13px Roboto,Arial,sans-serif; padding:5px 12px 5px 6px}
.fchip:hover{background:#F1F3F4; box-shadow:inset 0 0 0 1px rgba(100,121,143,.5)}
.tli .t{font-size:11px; color:rgba(0,0,0,.54)}
.fu,.num{border-color:#E0E0E0; border-radius:4px}
/* ── the deal card, calm the way Streak's box is (studied in Jacob's Chrome, 9/23 afternoon) ── */
.fu-menu{width:300px; padding:0 0 8px; border:0; border-radius:4px; box-shadow:0 2px 6px rgba(60,64,67,.2),0 6px 20px rgba(60,64,67,.18); font:14px Roboto,Arial,sans-serif; top:44px}
.fu-top{display:flex; align-items:center; gap:8px; padding:8px 12px; box-shadow:inset 0 -2px 0 var(--p)}
.fu-top input{flex:1; min-width:0; height:28px; border:0; outline:0; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); background:transparent}
.fu-menu button.fu-set{width:auto; display:inline-block; padding:4px 8px; border-radius:4px; font:500 13px Roboto,Arial,sans-serif; color:var(--p)}
.fu-h{padding:10px 12px 4px; font:500 12px Roboto,Arial,sans-serif; letter-spacing:.25px; color:rgba(0,0,0,.54); text-transform:uppercase}
.fu-menu button[data-fu]:not(.fu-set){height:32px; padding:0 12px; border-radius:0; font:400 14px Roboto,Arial,sans-serif; letter-spacing:.25px; color:rgba(0,0,0,.87); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fu-menu button[data-fu]:not(.fu-set):hover{background:#F1F3F4}
.fu-t{color:rgba(0,0,0,.38)}
.fu-menu hr{margin:6px 0; border-top-color:#EEEEEE}
.fu-l{display:block; padding:4px 12px 2px; font:400 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54)}
.fu-mv{display:flex; align-items:center; gap:8px; padding:10px 12px 2px; font:400 13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); cursor:pointer}
.fu-mv[hidden]{display:none} .fu-mv input{width:16px; height:16px; margin:0; accent-color:#5F6368}
.fu-menu input[type=text]{display:block; width:calc(100% - 24px); margin:0 12px; height:30px; border:0; border-bottom:1px solid #E0E0E0; border-radius:0; padding:0; font:400 14px Roboto,Arial,sans-serif; outline:0}
.fu-menu input[type=text]:focus{border-bottom:2px solid #9AA1A7}
.ftl{position:relative; display:flex; flex-direction:column; gap:16px}
.ftl::before{content:""; position:absolute; left:11px; top:28px; bottom:28px; width:1px; background:#E0E0E0}
.fcard{display:flex; gap:10px; align-items:flex-start; border:0; border-radius:0; padding:0; margin:0}
.fcard .fclip{position:relative; width:24px; flex:none; display:flex; justify-content:center; padding:12px 0 4px; color:#757575; background:#fff}
.fcard .fbody{flex:1; min-width:0; border:1px solid rgba(0,0,0,.12); border-radius:4px; padding:12px; display:flex; flex-direction:column; gap:10px; background:#fff}
.fcard.unread .fbody{border-style:dashed}
.fcard .fgh{display:flex; align-items:baseline; gap:8px; margin:0; font:400 11px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54)}
.fcard .fgh b{flex:1; min-width:0; font:700 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.fcard .fmiss{color:#C5221F}
.mrows{gap:6px}
.mrow{grid-template-columns:96px minmax(0,1fr); gap:6px 8px; padding:0; border-top:0; align-items:start}
.mrow .ml{font:400 13px/30px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); padding-top:0}
.mrow.miss .ml,.mrow.miss .mnone{color:#C5221F; font-weight:400}
.mrow .mf{gap:6px; align-items:center}
.mrow .mnone{font-size:13px; padding-top:0; line-height:30px}
.mrow .mnote{grid-column:2; background:none; padding:0; border-radius:0; font-size:12px; color:rgba(0,0,0,.38)}
.fchips{gap:6px}
.flist{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
.flist .fchip{max-width:100%}
.fchip,.mrow.multi .fchip{display:inline-flex; align-items:center; gap:0; max-width:160px; height:30px; min-height:30px; padding:0 12px; border:0; border-radius:15px; box-shadow:inset 0 0 0 1px rgba(100,121,143,.3); background:#fff; color:#5F6368; font:400 14px Roboto,Arial,sans-serif; text-decoration:none}
.fchip:hover{background:#F1F3F4; color:#3C4043; box-shadow:inset 0 0 0 1px rgba(100,121,143,.5)}
.fchip .fn{display:block; -webkit-line-clamp:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:normal; overflow-wrap:normal; min-width:0}   /* one line, ending in ...; the whole name on hover (Jacob 9/25: the two-line names looked crowded and spilled out of their pills) */
.fk{flex:none; width:16px; height:16px; padding:0; margin-right:8px; border-radius:2px; font:700 6px/16px Arial,sans-serif; letter-spacing:0; text-align:center}
.fk.pdf{background:#E94235}
.tl{position:relative; border-left:0; margin:4px 0 0; padding-left:34px}
.tl::before{content:""; position:absolute; left:11px; top:10px; bottom:10px; width:1px; background:#E0E0E0}
.tli{position:relative; padding:0; margin:0 0 12px}
.tli::before{display:none}
.tli .mk{position:absolute; background:#fff}
.tli.c .mk{left:-34px; top:8px; width:24px; height:24px; border-radius:50%; color:#fff; font:500 12px/24px Roboto,Arial,sans-serif; text-align:center}
.tli.l .mk{left:-27px; top:6px; width:9px; height:9px; border-radius:50%; background:#BDBDBD; box-shadow:0 0 0 3px #fff}
.tli .cc{border:1px solid #E0E0E0; border-radius:4px; box-shadow:inset 3px 0 0 #F9AB00; padding:10px 12px 10px 14px; background:#fff}
.tli .ch{display:flex; align-items:baseline; gap:8px; margin-bottom:2px}
.tli .ch b{flex:1; min-width:0; font:700 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.tli .t{margin-left:auto; font-size:11px; color:rgba(0,0,0,.54); white-space:nowrap}
.tli .body{margin:0; font:400 14px/20px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); white-space:pre-wrap; word-break:break-word}
.tli.l{display:flex; align-items:baseline; gap:8px; font:400 14px/20px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54)}
.tli.l .lt{flex:1; min-width:0}
.tli.l b{font-weight:700}
.tli.c.hl .cc{background:#FFF8E1; transition:background .6s}
.tli.l .t{visibility:hidden}          /* as Streak has it (Jacob, 9/23 9:55 PM): the time shows when you hover the line */
.tli.l:hover .t{visibility:visible}
.tli .at{color:#3F51B5}
.tli .body.clamp{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tli .more{display:block; margin:2px 0 0 auto; border:0; background:none; padding:0; font:400 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); cursor:pointer}
.tli .more:hover{text-decoration:underline}
.tli.f .mk{left:-34px; top:10px; width:24px; height:20px; display:flex; justify-content:center; color:#757575}
.tli.f .cc{box-shadow:none; padding:12px}
.tli.f .ch{margin-bottom:10px}
.tli.f .fchip{max-width:160px}
.fchip.gone{opacity:.6}
.tli .chipx{margin-left:2px; padding:0 6px; border-radius:3px; font:500 11px/18px Roboto,Arial,sans-serif; vertical-align:1px; text-transform:none}
.bx-top{position:sticky; top:0; z-index:3; background:#fff; margin:0; padding:0 0 12px}
.box-b > div:last-child{position:sticky; top:0; max-height:calc(100vh - 92px); overflow:auto; scrollbar-width:thin}
.pan{border:1px solid rgba(0,0,0,.12); border-radius:4px; padding:12px 8px 8px; margin:0 0 16px; background:#fff}
.pan > .cap{margin:0 8px 6px}
.pan > .note{margin:4px 8px}
.det{grid-template-columns:138px minmax(0,1fr); border:0; border-radius:0; padding:0}
.det .k,.det .v{padding:7px 8px; min-height:0}
.det.short .e{display:none}
.det-more{display:block; border:0; background:none; padding:6px 8px 2px; font:500 13px Roboto,Arial,sans-serif; color:var(--p); cursor:pointer}
.fnd-h{margin:10px 8px 2px; font:500 12px Roboto,Arial,sans-serif; letter-spacing:.3px; color:rgba(0,0,0,.6)} .fnd-h:first-child{margin-top:2px}
.det-more:hover{text-decoration:underline}
.pan-link{display:block; padding:6px 8px 2px; font:500 13px Roboto,Arial,sans-serif; color:var(--p); text-decoration:none}
.pan-link:hover{text-decoration:underline}
.addnote:focus-within{border-color:#BDBDBD}
/* THE @ LIST LOOKS LIKE THE AGENT PICKER (Jacob 9/24: "it shows up one way ... and a different way. I think it should be
   similar"): the same box, the same rows (.pk-it), the same coloured initials, "Name · email" */
.atpick{position:absolute; left:12px; top:calc(100% + 4px); z-index:30; width:min(380px,calc(100% - 24px)); background:#fff; border-radius:4px; box-shadow:0 2px 6px rgba(60,64,67,.2),0 6px 20px rgba(60,64,67,.18); padding:6px 0; max-height:260px; overflow:auto}
.atpick[hidden]{display:none}
.frow2{display:flex; align-items:center; gap:8px; max-width:100%}
.fitem{display:flex; flex-direction:column; align-items:flex-start; gap:2px; max-width:100%; min-width:0}
.fitem > .fcame{display:block; max-width:100%; padding-left:12px; font:400 12px/1.35 Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); overflow-wrap:anywhere}   /* wraps on a narrow screen: the time is never cut off */
.fitem > .fcame.new{color:#188038; font-weight:500}
.offers .osum{font:400 13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); margin:0 8px 8px}
/* an offer: the amount, the funder and the day on the first line; the terms under it, never squeezed out by a long name */
.offr{display:grid; grid-template-columns:84px minmax(0,1fr) auto; column-gap:10px; row-gap:2px; align-items:baseline; padding:7px 8px; border-top:1px solid rgba(0,0,0,.06); font:400 13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.offr b{grid-column:1; grid-row:1; font-weight:500; color:#188038} .offr .on{grid-column:2; grid-row:1; font-weight:500; min-width:0; overflow-wrap:anywhere} .offr .ow{grid-column:3; grid-row:1; color:rgba(0,0,0,.54); white-space:nowrap}
.offr .ot{grid-column:2 / 4; grid-row:2; min-width:0; color:rgba(0,0,0,.6); font-size:12px; line-height:1.35; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
.odec{font:400 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54); margin:8px 8px 0}
.frow2 .frm{color:#C5221F}
.frow2 > .fact{display:none; margin-left:auto; align-items:center; gap:4px}
.frow2:hover > .fact, .frow2:focus-within > .fact{display:inline-flex}
/* TOUCH HAS NO HOVER (10/14 sweep): on a phone or iPad Move and Remove never showed, and the only way to take a file off was to
   open it and find Remove in the viewer. They stay in view here, at the right end of the row; a long row wraps so the name is
   never squeezed out or pushed off the screen */
@media (hover:none){ .frow2{flex-wrap:wrap} .frow2 > .fact{display:inline-flex} .fact .chipb{min-height:32px} }
.fmvrow{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:4px 0 6px 4px; font:400 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6)}
.chipb.fmvto{color:#1A73E8; background:#E8F0FE}
.chipb.fedit{color:#1A73E8; background:#E8F0FE; box-shadow:inset 0 0 0 1px #1A73E8}
.fmvrow .chipb:focus-visible, .fact .chipb:focus-visible{outline:2px solid #9AA1A8; outline-offset:2px}
.fcard .fgh{display:flex; align-items:center; gap:8px}
.chipb.fview{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#1A73E8; background:#E8F0FE}
/* THE TITLE IS NEVER SQUEEZED (Jacob's phone, 10/15: "Statem" written over "files" while Name the statements was at work): the
   buttons sit in their own group at the right, and when the title and the buttons do not fit on one line the group goes to
   its own line under the title; on a phone always, starting at the left edge */
.fcard .fgh{flex-wrap:wrap; row-gap:8px}
.fcard .fgh > b{flex:1 0 auto}
.fcard .fgh > .fmeta{flex:0 1 auto; min-width:0}
.fgh-acts{margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; max-width:100%}
.fgh-acts .chipb.fview{margin-left:0; white-space:nowrap}
@media (max-width:760px){ .fgh-acts{flex-basis:100%; margin-left:0; justify-content:flex-start} .fgh-acts .chipb{height:32px} }
.chipb.fdate{color:#fff; background:#1A73E8}
.chipb.fback{color:#1A73E8; background:#E8F0FE}
.fdated{font:400 12px Roboto,Arial,sans-serif; color:#188038}
.fremoved .fbody{border-style:dashed; background:#FAFAFA}
.fchip.fgone{opacity:.55; text-decoration:line-through}
.newbuild{position:fixed; right:18px; bottom:96px; z-index:60;   /* above the Messages button (lib/chatwidget.js: 28px up, 52px tall), never under it (Jacob 10/7) */ background:#fff; border:1px solid #DADCE0; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.12); padding:10px 12px 10px 14px; font:400 13px Roboto,Arial,sans-serif; color:#202124; display:flex; align-items:center; gap:10px}
.newbuild[hidden]{display:none}
.newbuild button{border:0; background:#0B7A5A; color:#fff; border-radius:999px; padding:6px 12px; font:600 12.5px Roboto,Arial,sans-serif; cursor:pointer}
.pan .num{border:0; border-bottom:1px solid #F1F1F1; border-radius:0; margin:0 8px; padding:8px 0}
.pan .num:last-child{border-bottom:0}
.num .d{font-weight:400; font-size:14px}
.num.mail .d{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; text-decoration:none} .num.mail .d:hover{color:var(--p); text-decoration:underline} .num.mail .tag{flex:none}
.tag{background:none; padding:0; border-radius:0; font:500 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.54)}
.tag.good{background:none; color:var(--p)} .tag.bad{background:none; color:#C5221F}
.tag.good::before,.tag.bad::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:1px}
.pan .notes{display:block; width:100%; min-height:72px; border:0; border-radius:4px; background:transparent; padding:6px 8px; font:400 14px/20px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); resize:vertical; outline:0}
.pan .notes:hover{background:#F8F9FA}
.pan .notes:focus{background:#fff; box-shadow:inset 0 -2px 0 #9AA1A7}
.pan .notes-full{padding:2px 8px 6px; font:400 12px/16px Roboto,Arial,sans-serif; color:#687078}
.numhead{background:none; border-radius:0; padding:6px 0; border-bottom:1px solid #EEEEEE; font:500 14px Roboto,Arial,sans-serif}
.fu{border-color:#E0E0E0; border-radius:4px; font-size:13px}
/* Streak's stage and assignee menus (clicked open in Streak on Utility Power Construction, 9/23) */
.bx-top{position:sticky}
.bx-top select{display:none !important}
.stbtn{flex:none; width:232px; height:30px; display:flex; align-items:center; gap:10px; border:0; border-radius:4px; padding:0 10px; font:500 14px Roboto,Arial,sans-serif; letter-spacing:.25px; cursor:pointer; text-align:left}
.stbtn span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stbtn[disabled]{cursor:default}
/* THE NEW-DEAL CARD (Jacob 10/14: "It should open up a new deal card, and then you put in the details"; 10/14 evening: "This
   almost looks like a glitch"): a centred 640px form on the card's white surface. A header, labels above real bordered 40px
   boxes in two short groups, Notes, then Cancel and Add the deal on the right under a hairline. It fades and rises in like the
   shell's question box. Focus is a darker grey border (no green ring); nothing is boxed inside a box. */
.nd:not([hidden]){animation:jf-fade .18s ease-out}
.nd:not([hidden]) .nd-panel{animation:jf-rise .18s cubic-bezier(.2,.8,.2,1)}
.nd-b{flex:1; min-height:0; overflow:auto; padding:0 32px 40px}
.nd-panel{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:28px; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.nd-head{display:flex; flex-direction:column; gap:6px; padding-top:4px}
.nd-head h2{margin:0; font:400 22px/28px Roboto,Arial,sans-serif; color:#202124}
.nd-sub{margin:0; font:400 14px/20px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6)}
.nd-sec{display:flex; flex-direction:column; gap:14px; margin:0; min-width:0}
.nd-cap{margin:0; font:500 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.nd-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px}
.nd-f{display:flex; flex-direction:column; gap:6px; min-width:0}
.nd-l{font:500 13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6)}
.nd-f input,.nd-f textarea,.nd-who{box-sizing:border-box; width:100%; min-width:0; height:40px; margin:0; border:1px solid #DDE1E5; border-radius:8px; background:#fff; padding:0 12px; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); outline:0; box-shadow:none; transition:border-color .12s ease}
.nd-f input:hover,.nd-f textarea:hover,.nd-who:not(.ro):hover{border-color:#C4C9CE}
.nd-f input:focus,.nd-f textarea:focus,.nd-who:not(.ro):focus-within{border-color:#5F6368}
.nd-f input.miss,.nd-f input.miss:focus{border-color:#B42318}
.nd-err{font:400 13px Roboto,Arial,sans-serif; color:#B42318} .nd-err[hidden]{display:none}
.nd-f textarea{height:auto; min-height:104px; padding:10px 12px; line-height:20px; resize:vertical}
.nd-f input[disabled],.nd-f textarea[disabled]{background:#F6F7F8; color:rgba(0,0,0,.6)}
.nd-f .stbtn{width:100%; height:40px; border-radius:8px; padding:0 12px; transition:box-shadow .12s ease}
.nd-f .stbtn:focus-visible{outline:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}
.nd-who{display:flex; align-items:center; gap:8px; padding:0 4px 0 10px}
.nd-who.ro{background:#F6F7F8; padding-right:12px}
.nd-who .bx-av{width:24px; height:24px; border-radius:50%; flex:none; color:#fff; font:500 12px/24px Roboto,Arial,sans-serif; text-align:center}
.nd-who .bx-av:empty{display:none}
.nd-who select{flex:1; min-width:0; height:100%; border:0; background:transparent; padding:0 4px; font:inherit; color:inherit; outline:0; cursor:pointer}
.nd-who select[hidden]{display:none}
.nd-me{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nd-me:empty{display:none}
#ndNote{margin:-14px 0 0} #ndNote:empty{display:none}
.nd-act{display:flex; justify-content:flex-end; gap:10px; padding-top:20px; border-top:1px solid #EEF0F2}
.nd-act .pp-btn{height:40px; padding:0 20px; border-radius:8px; font:500 14px Roboto,Arial,sans-serif; justify-content:center}
.nd-act .pp-btn[disabled]{opacity:.6; cursor:default}
.nd-act .pp-btn:focus-visible{outline:2px solid #9AA1A8; outline-offset:2px}
/* THE NEW-DEAL CARD'S FILES (Jacob 10/14: "it should be able to upload statements and upload an application"): a dashed drop
   zone with Choose files (a plain Add files button on a phone); one row per picked file with its kind, its size, Statement or
   Application, and an x; an application being read, or a file going onto the deal, has the moving bar along its foot. What
   the application gave is one line under the rows, with See them for the list, each one removable. Grey focus, never green. */
.nd-drop{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; box-sizing:border-box; padding:12px 12px 12px 16px; border:1px dashed #C4C9CE; border-radius:8px; background:#FAFBFB; transition:border-color .12s ease, background .12s ease}
.nd-drop.over{border-color:#5F6368; background:#F1F3F4}
.nd-drop-t{min-width:0; font:400 14px/20px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6)}
.nd-drop .pp-btn{flex:none; height:36px; padding:0 16px; border:1px solid #DDE1E5; border-radius:8px; font:500 14px Roboto,Arial,sans-serif; color:#202124; justify-content:center}
.nd-drop .pp-btn:hover{background:#F6F7F8}
.nd-drop .pp-btn[disabled]{opacity:.6; cursor:default}
.nd-drop .pp-btn .sm{display:none}
.nd-drop .pp-btn:focus-visible,.ndf button:focus-visible,.nd-see:focus-visible,.nd-rl button:focus-visible{outline:2px solid #9AA1A8; outline-offset:2px}
.nd-files{display:flex; flex-direction:column; gap:8px} .nd-files:empty{display:none}
.ndf{position:relative; display:grid; grid-template-columns:32px minmax(0,1fr) auto 28px; grid-template-areas:"ic nm k x" "ic say say say"; align-items:center; column-gap:12px; row-gap:2px; padding:8px 6px 8px 10px; border:1px solid #DDE1E5; border-radius:8px; background:#fff; overflow:hidden}
.ndf-ic{grid-area:ic; align-self:center; width:32px; height:32px; border-radius:6px; background:#F1F3F4; color:#5F6368; font:500 10px/32px Roboto,Arial,sans-serif; letter-spacing:.3px; text-align:center; overflow:hidden}
.ndf-nm{grid-area:nm; display:flex; flex-direction:column; min-width:0}
.ndf-n{font:400 14px/20px Roboto,Arial,sans-serif; color:#202124; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ndf-s{font:400 12px/16px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6)}
.ndf-k{grid-area:k; display:inline-flex; gap:2px; padding:2px; border-radius:6px; background:#F1F3F4}
.ndf-k button{height:26px; padding:0 10px; border:0; border-radius:4px; background:transparent; font:500 12px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6); cursor:pointer; white-space:nowrap}
.ndf-k button[aria-pressed="true"]{background:#fff; color:#202124; box-shadow:0 0 0 1px #DDE1E5}
.ndf-x{grid-area:x; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:rgba(0,0,0,.6); font:400 18px/28px Roboto,Arial,sans-serif; cursor:pointer; padding:0}
.ndf-x:hover{background:#F1F3F4; color:#202124}
.ndf button[disabled]{cursor:default; opacity:.5} .ndf-x[disabled]:hover{background:transparent}
.ndf-say{grid-area:say; font:400 13px/18px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6); min-width:0} .ndf-say:empty{display:none}
.ndf.bad{border-color:#F3C9C5} .ndf.bad .ndf-say{color:#B42318}
.ndf-bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:#E8EAF6; overflow:hidden; pointer-events:none}
.ndf-bar span{display:block; width:35%; height:100%; background:#5F78DA; animation:uwslide 1.4s ease-in-out infinite}
.nd-rd{font:400 13px/20px Roboto,Arial,sans-serif; color:rgba(0,0,0,.6)} .nd-rd[hidden]{display:none}
.nd-rd-t{margin:0}
.nd-see{border:0; background:none; padding:0; margin-left:4px; font:500 13px/20px Roboto,Arial,sans-serif; color:#202124; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.nd-rl{list-style:none; margin:8px 0 0; padding:0; border:1px solid #EEF0F2; border-radius:8px}
.nd-rl li{display:grid; grid-template-columns:120px minmax(0,1fr) 28px; align-items:center; gap:12px; padding:4px 6px 4px 12px; min-height:32px}
.nd-rl li+li{border-top:1px solid #EEF0F2}
.nd-rl-l{color:rgba(0,0,0,.6)}
.nd-rl-v{color:#202124; overflow-wrap:anywhere; min-width:0}
.nd-rl button{width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:rgba(0,0,0,.6); font:400 18px/28px Roboto,Arial,sans-serif; cursor:pointer; padding:0}
.nd-rl button:hover{background:#F1F3F4; color:#202124} .nd-rl button[disabled]{opacity:.5; cursor:default}
@media (prefers-reduced-motion:reduce){ .ndf-bar span{animation-duration:2.8s} }
@media (max-width:760px){ .nd-drop{display:block; min-height:0; padding:0; border:0; background:none} .nd-drop-t{display:none} .nd-drop .pp-btn{width:100%; height:44px} .nd-drop .pp-btn .lg{display:none} .nd-drop .pp-btn .sm{display:inline} .ndf{grid-template-columns:32px minmax(0,1fr) 36px; grid-template-areas:"ic nm x" "ic k k" "ic say say"; row-gap:8px} .ndf-k{justify-self:start} .ndf-k button{height:32px; padding:0 14px; font-size:13px} .ndf-x{width:36px; height:36px; line-height:36px} .nd-rl li{grid-template-columns:minmax(0,1fr) 36px; grid-template-areas:"l x" "v x"; gap:0 8px; padding:6px 4px 6px 12px} .nd-rl-l{grid-area:l} .nd-rl-v{grid-area:v} .nd-rl button{grid-area:x; width:36px; height:36px} }
/* DELETE THIS DEAL (Jacob 10/14), owners only: the stages list's Delete look, alone at the very end of the card */
.bx-end{margin:28px 0 8px; padding-top:16px; border-top:1px solid #EEEEEE}
.bx-end .stg-del{width:auto; height:32px; padding:0 14px; font:500 13px Roboto,Arial,sans-serif}
.bx-end .stg-del[disabled]{opacity:.6; cursor:default}
/* A BUTTON AT WORK (Jacob 10/14 evening, Shop it: "I don't see any animation"; the underwriting bar is the one he likes): its
   own words, and the underwriting's thin moving bar along its foot (.uw-bar's colours and uwslide), until the answer comes */
/* 10/15: the look itself is the shell's .jf-busy (window.jfBusy), one for every page; btnRun below calls it. Shop it is wide
   enough for "Shopping…" so the words fit without the button growing while it works */
.box-h #bxShop{min-width:112px}
.box-h #bxShop.done[disabled]{opacity:1}
/* ONE CLEAR CALLOUT AT THE TOP OF THE CARD (Jacob 10/14 evening): what Shop it or Send for shopping did, in place of the thin
   note line and a toast at the bottom. Amber: on Shop a Deal with one thing to fix; red: it did not go; green: sent. */
.shco{display:flex; gap:12px; align-items:flex-start; margin:4px 28px 16px 32px; padding:14px 8px 14px 16px; border-radius:8px; font:400 14px/20px Roboto,Arial,sans-serif; animation:jf-rise .18s cubic-bezier(.2,.8,.2,1)}
.shco[hidden]{display:none}
.shco.warn{background:#FFF5DF; color:#5C3B0B}
.shco.bad{background:#FCEDED; color:#7A2626}
.shco.ok{background:#E7F5EE; color:#0E5C41}
.shco .co-i{flex:none; margin-top:1px}
.shco .co-m{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.shco .co-t{font-weight:500}
.shco .co-x{overflow-wrap:anywhere}
.shco .co-a{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.shco .co-a .pp-btn,.shco .co-tick .pp-btn{height:34px; padding:0 14px; border-radius:8px; font:500 13px Roboto,Arial,sans-serif; background:#fff; color:inherit; border-color:rgba(0,0,0,.14)}
.shco .co-a .pp-btn:hover,.shco .co-tick .pp-btn:not(:disabled):hover{background:rgba(255,255,255,.7)}
.shco .co-close{flex:none; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:inherit; font-size:18px; line-height:28px; padding:0; cursor:pointer; opacity:.75}
.shco .co-close:hover{background:rgba(0,0,0,.06); opacity:1}
.shco .co-l{margin:4px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:3px}
.shco .co-l li{overflow-wrap:anywhere}
.shco .co-tick{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px}
.shco .co-tick label{display:flex; align-items:center; gap:8px; cursor:pointer}
.shco .co-tick input{width:16px; height:16px; margin:0; accent-color:#1A73E8}
.shco .co-tick .pp-btn:disabled{opacity:.5; cursor:default}
/* "I asked the merchant: no new funding in October", under the Statements (David 10/14): quiet, with who ticked it and when */
.nofund{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:10px 0 0 34px; font:400 13px/18px Roboto,Arial,sans-serif; color:rgba(0,0,0,.62)}
.nofund label{display:flex; align-items:center; gap:8px; cursor:pointer}
.nofund input{width:16px; height:16px; margin:0; accent-color:#1A73E8}
.nofund input:disabled{cursor:default}
.nofund.on label{color:#0E5C41}
.nofund .nfby{font-size:12px; color:rgba(0,0,0,.54)}
@media (max-width:760px){ .nofund{margin-left:0} }
@media (prefers-reduced-motion:reduce){ .nd:not([hidden]) .nd-panel,.shco{animation:jf-fade .12s linear} .uw-bar span{animation-duration:2.8s} }
@media (max-width:760px){ .nd-b{padding:0 16px 88px} .nd-panel{gap:24px} .nd-row{grid-template-columns:minmax(0,1fr)} .nd-f input,.nd-f textarea,.nd-who select,.nd-me{font-size:16px} .nd-f input,.nd-who,.nd-f .stbtn{height:44px} .nd-act{flex-direction:column-reverse} .nd-act .pp-btn{width:100%; height:44px} .shco{margin:4px 12px 12px} .bx-end{margin-bottom:76px} .bx-end .stg-del{width:100%; height:44px} }   /* scrolls clear of the Messages button */
.whobtn{display:inline-flex; align-items:center; gap:8px; height:30px; border:0; background:transparent; padding:0 6px 0 0; border-radius:15px; font:400 14px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); cursor:pointer}
.whobtn:hover:not([disabled]){background:#F1F3F4}
.whobtn[disabled]{cursor:default}
.pick{position:absolute; top:36px; z-index:20; background:#fff; border-radius:4px; box-shadow:0 2px 6px rgba(60,64,67,.2),0 6px 20px rgba(60,64,67,.18); padding:0 0 6px; font:13px Roboto,Arial,sans-serif}
.pick.st{left:0; width:232px}
.pick.ag{width:min(380px,100%); right:0; left:auto}
.pk-in{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 8px; box-shadow:inset 0 -2px 0 var(--p)}
.pk-in input{flex:1; min-width:80px; height:24px; border:0; outline:0; font:400 13px Roboto,Arial,sans-serif; background:transparent}
.pk-in .chipx{padding:2px 6px; border-radius:3px; font:500 12px Roboto,Arial,sans-serif}
.pk-chip{display:inline-flex; align-items:center; gap:4px; background:#F1F3F4; border-radius:100px; padding:2px 8px 2px 2px; font-size:13px}
.pk-chip .bx-av,.pk-it .bx-av{width:20px; height:20px; font-size:10px; line-height:20px; border-radius:50%; color:#fff; text-align:center; flex:none}
.pk-list{max-height:420px; overflow:auto; padding-top:6px}
#cellPick{position:fixed; width:280px; z-index:45} #cellPick .pk-list{max-height:280px}
.pk-it{display:flex; align-items:center; gap:12px; width:100%; height:29px; padding:0 12px; border:0; background:transparent; font:400 13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87); text-align:left; cursor:pointer}
.pk-it:hover,.pk-it.hi{background:#F1F3F4}
.pk-it.cur{color:#3F51B5}
.pk-it .nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pk-it .em{color:rgba(0,0,0,.38)}
.pk-it .ck{color:#3F51B5}
.bx-nav{display:inline-flex; align-items:center; gap:0; color:rgba(0,0,0,.54); margin-right:6px}
.bx-nav .pos{font:400 13px Roboto,Arial,sans-serif; min-width:0; padding:0 2px; white-space:nowrap}
/* Underwrite with AI: laid out like Streak's Summary panel (sparkle, blue edge, one button) */
.pan.uw{border-color:#5F78DA; padding:12px 16px}
.uw-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.grok .grok-d{display:flex; align-items:baseline; gap:10px; margin:10px 0 4px; font:500 15px/22px Roboto,Arial,sans-serif}
.grok .grok-d.ok{color:#0D652D} .grok .grok-d.warn{color:#8A5300} .grok .grok-d.bad{color:#A50E0E}
.grok .grok-d span{font-weight:400; color:rgba(0,0,0,.72); font-size:14px}
.grok .grok-k{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:10px 0}
.grok .grok-k div{display:flex; flex-direction:column; gap:2px; min-width:0} .grok .grok-k i{font-style:normal; font-size:12px; color:rgba(0,0,0,.54)} .grok .grok-k b{font-weight:500; font-variant-numeric:tabular-nums}
.grok .grok-f{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2fr); gap:8px; padding:4px 0; font-size:13px; line-height:19px; border-top:1px solid #F1F1F1}
.grok .grok-f b{font-weight:500; overflow-wrap:anywhere} .grok .grok-f span{min-width:0; overflow-wrap:anywhere; color:rgba(0,0,0,.72)}
.grok .grok-best{font-style:normal; font-size:11px; font-weight:500; color:#0B7A5A; margin-left:4px}
.grok .grok-risk{margin:6px 0; padding:6px 10px; border-radius:6px; background:#FFF6E5; color:#7A4B00; font-size:13px; line-height:18px}
.uw2 .uw-new{font:500 11px/18px Roboto,Arial,sans-serif; padding:0 7px; border-radius:9px; background:#E6F4EA; color:#0D652D}
.uw2-row{display:grid; gap:8px; padding:5px 0; border-top:1px solid #F1F1F1; font-size:13px; align-items:baseline}
.uw2-row.m{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.8fr)}
.uw2-row.p{grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr)}
.uw2-row.f{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.7fr) minmax(0,.9fr)}
.uw2-row.u{grid-template-columns:minmax(0,.6fr) minmax(0,.9fr) minmax(0,2.5fr)}
.uw2-row.hd{color:rgba(0,0,0,.54); font-size:12px; border-top:0}
.uw2-row span{min-width:0; overflow-wrap:anywhere} .uw2-row .n{text-align:right; font-variant-numeric:tabular-nums}
.uw2-row .bad{color:#A50E0E} .uw2-row .ok{color:#0D652D} .uw2-row i{font-style:normal; color:rgba(0,0,0,.54)}
.uw2-fund{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.uw2-fund .line{font-size:13px; line-height:19px} .uw2-fund .line b{font-weight:500}
.uw2-chip{display:inline-block; margin:2px 4px 2px 0; padding:1px 8px; border-radius:10px; font-size:12.5px; background:#E6F4EA; color:#0D652D}
.uw2-chip.rev{background:#FEF7E0; color:#7A4F01}
@media (max-width:700px){ .uw2-row.m{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} .uw2-row.m > :nth-child(n+4){display:none} }
.uw-h b{font:500 14px Roboto,Arial,sans-serif}
.uw-sub{flex:1; min-width:0; color:rgba(0,0,0,.54); font-size:13px}
.uw-go{border:0; background:transparent; color:#3F51B5; font:500 14px Roboto,Arial,sans-serif; cursor:pointer; padding:4px 6px; border-radius:4px}
.uw-go:hover{background:#EEF1FB}
.uw-go[disabled]{color:rgba(0,0,0,.38); cursor:default; background:none}
.uw-bar{height:3px; background:#E8EAF6; border-radius:2px; overflow:hidden; margin-top:10px}
.uw-bar span{display:block; width:35%; height:100%; background:#5F78DA; animation:uwslide 1.4s ease-in-out infinite}
@keyframes uwslide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.uw-verdict{margin-top:10px; font:400 16px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.uw-verdict b{font-weight:700; color:#0D652D}
.uw-verdict .uw-no{color:#A50E0E}
.uw-risk{display:inline-block; font:500 12px/20px Roboto,Arial,sans-serif; padding:0 8px; border-radius:10px; margin-right:6px; vertical-align:2px; background:#E8EAED; color:#3C4043}
.uw-risk.ok,.uw-lev.ok{background:#E6F4EA; color:#0D652D} .uw-risk.mid,.uw-lev.mid{background:#FEF7E0; color:#7A4F01} .uw-risk.hi,.uw-lev.hi{background:#FCE8E6; color:#A50E0E} .uw-risk.vhi,.uw-lev.vhi{background:#A50E0E; color:#fff}
.uw-lev{padding:0 6px; border-radius:4px}
.uw-sum{margin-top:10px; line-height:19px}
.uw-why{margin-top:4px; color:rgba(0,0,0,.6); font-size:13px; line-height:19px}
.uw-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:10px 8px; margin-top:12px}
.uw-unc{color:#8A5A00}
.uw-if{margin-top:2px; font-size:13px; color:#8A5A00}
.uw-warn{margin-top:10px; padding:8px 10px; border-radius:6px; background:#FDECEC; color:#A50E0E; font-size:13px}
.uw-warn.soft{background:#FFF6DF; color:#7A4F01}
.uw-row.m{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.7fr)}
.uw-row.hd{color:rgba(0,0,0,.54); font-size:12px; border-top:0}
.uw-row.off{background:#FDECEC}
.uw-row.u{grid-template-columns:minmax(0,.6fr) minmax(0,.9fr) minmax(0,2.5fr)}
.uw-kpis div{display:flex; flex-direction:column; gap:2px}
.uw-kpis span{font-size:12px; color:rgba(0,0,0,.54)}
.uw-kpis b{font:500 15px Roboto,Arial,sans-serif}
.uw-toggle{margin-top:10px; border:0; background:none; padding:0; color:#3F51B5; font:500 13px Roboto,Arial,sans-serif; cursor:pointer}
.uw-toggle:hover{text-decoration:underline}
.uw-cap{margin:14px 0 6px; font:500 13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.uw-row{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.7fr); gap:8px; padding:5px 0; border-top:1px solid #F1F1F1; font-size:13px}
.uw-row.l{grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr)}
.uw-row i{font-style:normal; color:rgba(0,0,0,.54)}
.uw-row .bad{color:#A50E0E}
.uw-t{font-size:13px; color:rgba(0,0,0,.7)}
.uw-list{margin:0; padding-left:18px; font-size:13px; line-height:20px}
.uw-list.bad li::marker{color:#D93025} .uw-list.good li::marker{color:#0B7A5A}
.uw-ask{display:flex; gap:8px; margin-top:14px; padding:6px 6px 6px 12px; border:1px solid #E0E0E0; border-radius:20px}
.uw-ask input{flex:1; min-width:0; border:0; outline:0; font:400 14px Roboto,Arial,sans-serif; background:transparent}
.uw-ask button{border:0; border-radius:14px; background:#EEF1FB; color:#3F51B5; font:500 13px Roboto,Arial,sans-serif; padding:4px 12px; cursor:pointer}
.uw-ask button[disabled]{opacity:.5; cursor:default}
.uw-q{margin-top:10px; font:500 13px Roboto,Arial,sans-serif; color:rgba(0,0,0,.87)}
.uw-a{margin-top:4px; padding:8px 12px; background:#F4F6FC; border-radius:8px; font-size:13px; line-height:19px; white-space:pre-wrap}
.uw-a.bad{background:#FDECEC; color:#A50E0E}
.uw-by{margin-left:8px; font:400 11px Roboto,Arial,sans-serif; color:rgba(0,0,0,.45)}
.uw-confirm{display:flex; flex-basis:100%; justify-content:flex-end; align-items:center; gap:2px; font-size:13px; color:rgba(0,0,0,.7); padding-top:4px}
.uw-note{margin-top:12px; font-size:11px; color:rgba(0,0,0,.45)}
/* Search: Gmail's bar with Streak's results (measured in Streak, 9/23): a 48px pill up to 720px wide,
   16px text; on typing it turns white with a soft shadow and the results hang from it as one card */
.pp-srow{display:flex; align-items:center; justify-content:center; padding:2px 0 10px}   /* the search sits centred over the sheet, as Streak has it (Jacob, 9/23 8:33 PM) */
.sbar{position:relative; flex:1 1 720px; max-width:720px; min-width:0; z-index:25}
.sbox{display:flex; align-items:center; gap:14px; height:48px; padding:0 8px 0 16px; border-radius:24px; background:#E9EEF6; color:#444746; box-sizing:border-box; cursor:text}
.sbox input{flex:1; min-width:0; border:0; outline:0; background:transparent; font:400 16px Roboto,Arial,sans-serif; color:#1F1F1F}
.sbox input::placeholder{color:#5E5E5E}
.sbar:focus-within .sbox,.sbar.open .sbox{background:#fff; box-shadow:0 1px 1px rgba(65,69,73,.3),0 1px 3px 1px rgba(65,69,73,.15)}
.sbar.open .sbox{border-radius:24px 24px 0 0; box-shadow:0 1px 1px rgba(65,69,73,.3),0 1px 3px 1px rgba(65,69,73,.15)}
.sclear{width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:#444746; font-size:18px; cursor:pointer; flex:none}
.sclear:hover{background:rgba(68,71,70,.08)}
.sq{position:absolute; left:0; right:0; top:48px; background:#fff; border-radius:0 0 24px 24px; box-shadow:0 4px 6px rgba(65,69,73,.2),0 1px 3px 1px rgba(65,69,73,.15); padding:4px 0 10px; border-top:1px solid #E8EAED}
.sq-it{display:flex; align-items:center; gap:16px; width:100%; min-height:36px; padding:4px 16px; border:0; background:transparent; text-align:left; font:400 14px Roboto,Arial,sans-serif; color:#000; cursor:pointer}
.sq-it:hover,.sq-it.hi{background:#F1F3F4}
.sq-ic{width:20px; height:20px; color:#5F6368; flex:none; display:flex}
.sq-nm{flex:1; min-width:0; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden}
.sq-nm b{font-weight:700}
.sq-n{min-width:0; overflow:hidden; text-overflow:ellipsis}
.sq-st{font:500 11px/18px Roboto,Arial,sans-serif; padding:0 6px; border-radius:3px; flex:none}
.sq-ag{font-size:13px; color:rgba(0,0,0,.54); flex:none}
.sq-t{font-size:12px; color:rgba(0,0,0,.54); flex:none}
.sq-sep{height:1px; background:#E8EAED; margin:6px 0}
.sq-none{padding:10px 16px 6px 52px; font-size:13px; color:rgba(0,0,0,.54)}
@media (max-width:900px){ .pp{height:calc(100vh - 56px)} .box-b{grid-template-columns:1fr; padding:0 12px 16px; gap:16px} .box-b > div + div{border-left:0; border-top:0} .box-h{padding:8px 8px 8px 12px; height:auto; flex-wrap:wrap; row-gap:6px} .box-h .back{order:-2; flex:none} .box-h .bc{order:-1; flex:1 1 calc(100% - 64px); min-width:0} .box-b > div:last-child{order:-1} .box,.scrim{top:56px} .box{width:100vw !important} .box-grip{display:none} .box-b{padding:0 12px 16px} .bx-top{position:static} .box-b > div:last-child{position:static; max-height:none; overflow:visible} .pp{padding:8px 8px 0} .pp-search input{width:120px} .det{grid-template-columns:110px 1fr} .fu-menu{position:fixed; left:12px; right:12px; width:auto; max-height:calc(100vh - 130px); overflow:auto} }   /* the Follow Up menu (290px) hung off the right edge of a phone with its Set button and the quick-pick times out of reach (10/14 sweep): now it spans the screen under its button, top set when it opens */
/* ── A PHONE (Jacob 9/27: "every page very usable on mobile"): the spreadsheet becomes a list of deals. Each deal is a
   row to tap: its name and when it last moved, its stage and its agent; a tap opens the deal card. The controls are one
   row that scrolls sideways, the columns and the stages with nothing in them are left out. The computer is unchanged. ── */
@media (max-width:760px){
  .pp{padding:8px 0 0}
  .pp-srow{padding:0 12px}
  .pp-top{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:6px 12px 8px; gap:8px}
  .pp-top::-webkit-scrollbar{display:none}
  .pp-top > *,.pp-tools > *{flex:none}
  .pp-tools{flex-wrap:nowrap; margin-left:0}
  #fsg,#colsBtn,#groupBtn{display:none}
  /* + New deal first in the row (10/14 sweep): it sat last in a row that scrolls sideways with no scrollbar, off the right edge
     of every phone. The same rule the shell has for a page's one primary button. */
  #newBtn{order:-1}
  /* the new deal's row, which is a table row on a computer: one full-width box a thumb can hit, the blank first cell left out */
  .fun-wrap{margin:0 0 6px; padding:0 12px} .fa{display:none}
  .fc{min-width:128px}
  .sheet{border-left:0; border-right:0; border-radius:0}
  .grid{display:block; width:auto !important; table-layout:auto}
  .grid colgroup,.grid thead{display:none}
  .grid tbody{display:block}
  .grid tr.grp{display:block; position:sticky; top:0; z-index:3}
  .grid tr.grp td{display:flex; align-items:center; height:44px; padding:0 12px; border-right:0}
  .grid tr.grp .gsel,.grid tr.grp .gadd{display:none}
  .grid tr.grp.empty,.grid tr.grp.empty + tr.info{display:none}   /* a stage with nothing in it takes no room on a phone */
  .grid tr.info,.grid tr.more{display:block} .grid tr.info td,.grid tr.more td{display:block; height:auto; padding:12px 16px; border-right:0}
  .grid tr.vsp,.grid tr.vsp td{display:block}
  .grid tr.r{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name upd" "agent stage"; gap:4px 12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line2); background:#fff; cursor:pointer}
  .grid tr.r:active{background:#F5F6F7}
  .grid tr.r td{display:block; height:auto; padding:0; border:0; background:transparent !important; box-shadow:none !important; min-width:0}
  .grid tr.r td.first,.grid tr.r td:not([data-c="name"]):not([data-c="stage"]):not([data-c="assignee"]):not([data-c="updated"]){display:none}
  .grid tr.r td[data-c="name"]{grid-area:name; font-size:16px; font-weight:600; color:var(--ink)}
  .grid tr.r td[data-c="updated"]{grid-area:upd; font-size:12px; color:var(--mut); text-align:right}
  .grid tr.r td[data-c="stage"]{grid-area:stage; font-size:13px; color:var(--mut); text-align:right}
  .grid tr.r td[data-c="assignee"]{grid-area:agent; font-size:13px; color:var(--mut)}
  .grid:has(tr.grp) tr.r td[data-c="stage"]{display:none}   /* grouped by stage, the heading already names it */
  .uw-sub{flex:1 1 100%; order:3} .uw-go{margin-left:auto}   /* the card's AI line: its words under the title, not in a thin column */
}

}