:root{
  /* Salesforce Lightning Design System palette */
  --bg:#f3f2f2;--surface:#ffffff;--surface2:#f3f2f2;--surface3:#ecebea;
  --border:#dddbda;--border2:#c9c7c5;
  --accent:#0070d2;--accent-lt:#e8f4ff;--accent-dk:#005fb2;
  --blue:#0070d2;--orange:#e8830a;--green:#2e844a;--red:#ba0517;--warn:#a96404;
  --text:#080707;--text2:#3e3e3c;--text3:#706e6b;
  --mono:'DM Mono',monospace;--sans:'Salesforce Sans','DM Sans',sans-serif;--serif:'Playfair Display',serif;
  --nav-w:240px;--shadow:0 2px 4px rgba(0,0,0,.08),0 6px 16px rgba(0,0,0,.06);
  --qb-cols:28px 98px 0.5fr 84px 84px 46px 80px 70px 222px 222px 178px 90px 30px;
  /* AI "Spark" marker — one monochrome glyph for every AI touchpoint. The glyph
     inherits text color, so it is this accent on light surfaces and white inside
     colored/dark buttons. Change --ai-accent to restyle every AI marker at once. */
  --ai-accent:#7c3aed;
  --ai-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.5 4.6 2.9 7 7.5 7.5C14.9 10 12.5 12.4 12 17c-.5-4.6-2.9-7-7.5-7.5C9.1 9 11.5 6.6 12 2Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;}



.topnav-bar{background:#16325c;display:flex;align-items:stretch;z-index:200;flex-shrink:0;position:sticky;top:0;}
.tn-logo{display:flex;align-items:center;padding:0 14px;border-right:1px solid rgba(255,255,255,.12);flex-shrink:0;}
.tn-logo img{height:26px;display:block;background:#fff;border-radius:6px;padding:4px 8px;}
.tn-items{display:flex;flex:1;}
.tn-item{position:relative;display:flex;align-items:stretch;flex-shrink:0;}
.tn-btn{display:flex;align-items:center;gap:5px;padding:0 13px;height:46px;color:rgba(255,255,255,.8);font-family:var(--mono);font-size:11px;font-weight:500;cursor:pointer;border:none;background:transparent;white-space:nowrap;}
.tn-btn:hover,.tn-item.open .tn-btn{color:#fff;background:rgba(255,255,255,.1);}
.tn-item.tn-active .tn-btn{color:#fff;background:#0070d2;}
.tn-arrow{font-size:8px;opacity:.6;margin-top:1px;transition:transform .15s;}
.tn-item.open .tn-arrow{transform:rotate(180deg);}
.tn-drop{display:none;position:absolute;top:100%;left:0;min-width:200px;background:var(--surface);border:0.5px solid var(--border);border-radius:0 0 var(--border-radius-md) var(--border-radius-md);box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:300;}
.tn-item.open .tn-drop{display:block;}
.tn-drop-item{display:flex;align-items:center;gap:7px;padding:8px 14px;font-family:var(--mono);font-size:10px;color:var(--text);cursor:pointer;white-space:nowrap;border-left:3px solid transparent;}
.tn-drop-item:hover{background:var(--surface2);border-left-color:#0070d2;color:#0070d2;}
.tn-drop-item.tn-active{background:#e8f0fb;border-left-color:#0070d2;color:#0070d2;font-weight:600;}
.tn-sep{height:1px;background:var(--border);margin:3px 0;}
/* SET-1: nested flyout submenus in the Setup (gear) dropdown. The gear menu is
   right-aligned, so submenus open to the LEFT of the parent item on hover. */
.tn-drop-parent{position:relative;}
.tn-sub-drop{display:none;position:absolute;top:0;right:100%;min-width:230px;max-height:76vh;overflow-y:auto;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--border-radius-md);box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:310;}
.tn-drop-parent:hover>.tn-sub-drop{display:block;}
.tn-drop-parent>.tn-drop-item .tn-sub-arrow{margin-left:auto;padding-left:12px;}
.tn-group-hdr{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;font-family:var(--mono);font-size:10px;font-weight:600;color:var(--text2);cursor:pointer;user-select:none;background:var(--surface2);}
.tn-group-hdr:hover{color:var(--text);}
.tn-sub-arrow{font-size:7px;opacity:.5;transition:transform .15s;}
.tn-sub-items{display:none;}
.tn-sub-items.open{display:block;}
.tn-drop-item.tn-sub{padding-left:22px;}
/* Flat dropdown section label — subtle caption, matches the mono/minimal topnav aesthetic */
.tn-drop-label{padding:8px 14px 3px;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);user-select:none;pointer-events:none;}
.tn-drop-hint{margin-left:auto;padding-left:14px;font-size:9px;font-weight:400;color:var(--text3);}
.tn-drop-item:hover .tn-drop-hint{color:inherit;opacity:.7;}
.tn-user{display:flex;align-items:center;gap:8px;padding:0 14px;margin-left:auto;flex-shrink:0;}
.content{flex:1;display:flex;flex-direction:column;min-height:0;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 22px;background:var(--surface);border-bottom:1px solid var(--border);}
.page-ttl{font-size:13px;color:var(--text2);}
.page-ttl strong{color:var(--text);font-weight:600;}
.tb-actions{display:flex;gap:6px;align-items:center;}

.page{display:none;padding:20px 22px;}
.page.active{display:block;animation:pgIn .14s ease;overflow-y:auto;}
/* Performance: when a full-screen AI modal is open, take the heavy page DOM
   (large task tables, contact lists) out of the layout/paint path so typing
   in the modal input is not slowed by per-keystroke reflow of thousands of
   nodes behind it. Modals are not .page elements, so they stay visible. */
body.ai-perf-hide .content > .page,
body.ai-perf-hide .content > .topbar,
body.ai-perf-hide .topnav-bar{display:none !important;}
#page-sap.active{overflow-y:auto;}
@keyframes pgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.btn{padding:6px 13px;border-radius:5px;border:none;font-family:var(--mono);font-size:11px;font-weight:500;cursor:pointer;letter-spacing:.2px;transition:all .11s;}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--text2);}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-lt);}
.btn-primary{background:var(--accent);color:#fff;font-weight:600;}
.btn-primary:hover{background:var(--accent-dk);}
.btn-sm{padding:4px 10px;font-size:10px;}
.btn-xs{padding:2px 7px;font-size:9px;}
.btn-danger{background:transparent;border:1px solid rgba(204,34,34,.28);color:var(--red);}
.btn-danger:hover{background:var(--red);color:#fff;border-color:var(--red);}
.btn-undo{background:transparent;border:1px solid var(--border2);color:var(--text3);padding:6px 11px;display:flex;align-items:center;gap:4px;}
.btn-undo:hover:not(:disabled){border-color:var(--text2);color:var(--text2);}
.btn-undo:disabled{opacity:.32;cursor:not-allowed;}
.btn-success{background:var(--green);color:#fff;}
.btn-success:hover{background:#085f3b;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:7px;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow);contain:layout style;}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:#f3f2f2;}
.card-title{font-family:var(--mono);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--text2);display:flex;align-items:center;gap:6px;}
.dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.dot-b{background:var(--blue);}.dot-g{background:var(--green);}.dot-o{background:var(--orange);}.dot-w{background:var(--warn);}
.card-body{padding:14px;}
/* POC Planning — collapsible section headers with bold, 20%-larger titles */
.poc-shead-title{cursor:pointer;font-size:10.8px;font-weight:700;user-select:none;}
.poc-shead-chev{display:inline-block;font-size:11px;line-height:1;color:var(--text3);transition:transform .15s ease;flex-shrink:0;}

.sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px;}
.sc{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:13px 15px;position:relative;overflow:hidden;box-shadow:var(--shadow);}
.sc::after{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;}
.sc.d::after{background:var(--blue);}.sc.r::after{background:var(--orange);}.sc.c::after{background:var(--green);}.sc.k::after{background:var(--warn);}
.sc-lbl{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:5px;}
.sc-val{font-family:var(--serif);font-size:22px;line-height:1;}
.sc-val.d{color:var(--blue);}.sc-val.r{color:var(--orange);}.sc-val.c{color:var(--green);}.sc-val.k{color:var(--warn);}
.sc-sub{font-family:var(--mono);font-size:8px;color:var(--text3);margin-top:4px;}

.field{margin-bottom:10px;}
.field label{display:block;font-size:10px;font-family:var(--mono);color:var(--text2);margin-bottom:3px;letter-spacing:.2px;}
.fi{width:100%;background:var(--surface);border:1px solid var(--border2);border-radius:5px;padding:6px 9px;color:var(--text);font-family:var(--sans);font-size:12px;outline:none;transition:border-color .11s;}
.fi:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(26,86,219,.09);}
.fi option{background:var(--surface);}
/* contenteditable notes — same appearance as textarea, supports inline images */
.notes-editable{overflow-y:auto;white-space:pre-wrap;word-break:break-word;cursor:text;line-height:1.6;box-sizing:border-box;font-size:var(--notes-fs,15px) !important;font-family:Arial,sans-serif !important;}
.notes-editable:empty::before{content:attr(data-placeholder);color:var(--text3);pointer-events:none;}
.notes-editable:focus{outline:none;}
.notes-editable img{max-width:100%;border-radius:4px;margin:4px 0;display:block;cursor:pointer;transition:outline .1s;}
.notes-editable img._notes-img-selected{outline:2px solid var(--blue);outline-offset:2px;}
.notes-editable br{display:block;content:"";}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

.ct-head,.ct-row{display:grid;gap:7px;align-items:center;padding:6px 3px;}
.ct-head{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:7px;}
.ct-row{border-bottom:1px solid var(--border);}
.ct-row:last-child{border-bottom:none;}
.ct-row input{background:var(--surface2);border:1px solid transparent;border-radius:4px;padding:5px 7px;color:var(--text);font-family:var(--sans);font-size:11px;outline:none;width:100%;}
.ct-row input:focus{border-color:var(--accent);background:var(--surface);}
.ct-5{grid-template-columns:1fr 1fr 1fr 130px 30px;}

.pt-head,.pt-row{display:grid;grid-template-columns:108px 1fr 98px 98px 65px 32px;gap:7px;align-items:center;padding:6px 3px;}
.pt-head{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:7px;}
.pt-row{border-bottom:1px solid var(--border);}
.pt-row:last-child{border-bottom:none;}
.pt-row input{background:var(--surface2);border:1px solid transparent;border-radius:4px;padding:5px 7px;color:var(--text);font-family:var(--sans);font-size:11px;outline:none;width:100%;}
.pt-row input:focus{border-color:var(--accent);background:var(--surface);}

/* QUOTE BUILDER */
.qb-g{display:grid;grid-template-columns:var(--qb-cols);gap:4px;padding:0 12px;}
.qb-hdr{padding-top:4px;padding-bottom:4px;background:var(--surface2);border-bottom:1px solid var(--border);align-items:center;}
.qb-lbl{padding-top:5px;padding-bottom:5px;background:var(--surface3);border-bottom:1px solid var(--border);align-items:center;}
.tgl{font-size:8px;font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;text-align:center;padding:3px 0;border-radius:3px;}
.tgl-d{background:rgba(26,86,219,.07);color:var(--blue);}
.tgl-r{background:rgba(212,82,10,.07);color:var(--orange);}
.tgl-c{background:rgba(10,124,78,.07);color:var(--green);}
.cl{font-size:8px;font-family:var(--mono);color:var(--text3);letter-spacing:.6px;text-transform:uppercase;}

.li-wrap{border-bottom:1px solid var(--border);}
.li-wrap:last-child{border-bottom:none;}
.li-dr{padding:7px 12px;display:grid;grid-template-columns:var(--qb-cols);gap:4px;align-items:start;transition:background .1s;}
.li-dr:hover{background:var(--bg);}
.li-n{font-family:var(--mono);font-size:10px;color:var(--text3);text-align:center;padding-top:6px;}
.li{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:5px 7px;color:var(--text);font-family:var(--sans);font-size:11px;outline:none;width:100%;transition:border-color .11s;}
.li:focus{border-color:var(--accent);background:var(--surface);}
.li.sku{color:var(--blue);font-family:var(--mono);}
.li.desc{color:var(--text2);}

.tc{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:5px 7px;}
.tc.td{border-left:2px solid var(--blue);}.tc.tr{border-left:2px solid var(--orange);}.tc.tk{border-left:2px solid var(--green);}
.tc-top{display:flex;align-items:center;gap:3px;margin-bottom:3px;}
.pct-i{background:transparent;border:none;border-bottom:1px solid;width:36px;font-family:var(--mono);font-size:10px;outline:none;text-align:center;padding:1px 0;}
.pct-i.d{color:var(--blue);border-color:rgba(26,86,219,.28);}
.pct-i.r{color:var(--orange);border-color:rgba(212,82,10,.28);}
.pct-i.k{color:var(--green);border-color:rgba(10,124,78,.28);}
.suf{font-family:var(--mono);font-size:10px;color:var(--text3);}
.ext{font-family:var(--mono);font-size:10px;font-weight:500;}
.ext.d{color:var(--blue);}.ext.r{color:var(--orange);}.ext.k{color:var(--green);}
.tsub{font-family:var(--mono);font-size:10px;color:var(--text3);margin-top:2px;}
.uyr{font-family:var(--mono);font-size:10px;color:var(--text2);text-align:center;line-height:1.5;padding-top:6px;}

.gs-btn{background:transparent;border:1px solid rgba(180,83,9,.2);color:rgba(180,83,9,.38);font-family:var(--mono);font-size:8px;padding:2px 5px;border-radius:3px;cursor:pointer;transition:all .11s;width:100%;margin-top:4px;}
.gs-btn:hover,.gs-btn.open{border-color:var(--warn);color:var(--warn);background:rgba(180,83,9,.04);}

.gs-panel{display:none;border-top:1px solid rgba(180,83,9,.12);background:#fffcf5;}
.gs-panel.open{display:block;}
.gs-inner{padding:9px 12px;display:grid;grid-template-columns:var(--qb-cols);gap:4px;align-items:start;}
.gs-hdr-cell{grid-column:1/7;display:flex;align-items:center;gap:7px;padding-bottom:2px;}
.gs-hdr-lbl{font-family:var(--mono);font-size:8px;color:var(--warn);letter-spacing:1px;text-transform:uppercase;}
.gs-col-d{grid-column:9;}.gs-col-r{grid-column:10;}.gs-col-c{grid-column:11;}.gs-col-e{grid-column:10;}
.gs-tier-lbl{font-family:var(--mono);font-size:7px;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid;}
.gs-tier-lbl.d{color:rgba(26,86,219,.55);border-color:rgba(26,86,219,.18);}
.gs-tier-lbl.r{color:rgba(212,82,10,.55);border-color:rgba(212,82,10,.18);}
.gs-tier-lbl.k{color:rgba(10,124,78,.55);border-color:rgba(10,124,78,.18);}
.gs-grp{display:flex;flex-direction:column;gap:2px;margin-bottom:6px;}
.gs-grp:last-child{margin-bottom:0;}
.gs-grp-lbl{font-family:var(--mono);font-size:7px;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;}
.gs-inp{width:100%;background:#fff;border:1px solid rgba(180,83,9,.18);border-radius:4px;padding:4px 6px;color:var(--warn);font-family:var(--mono);font-size:10px;outline:none;transition:all .11s;}
.gs-inp:focus{border-color:var(--warn);box-shadow:0 0 0 2px rgba(180,83,9,.08);}
.gs-inp::placeholder{color:rgba(180,83,9,.18);}
.gs-res{font-size:8px;font-family:var(--mono);color:var(--warn);min-height:11px;line-height:1.4;}
.gs-apl{font-size:8px;font-family:var(--mono);color:rgba(26,86,219,.45);cursor:pointer;text-decoration:underline;display:none;}
.gs-apl:hover{color:var(--accent);}
@keyframes pls{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
.pls{animation:pls .32s ease;}

.add-lr{padding:8px 12px;display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--text3);font-family:var(--mono);font-size:10px;border-bottom:1px solid var(--border);transition:color .11s;}
.add-lr:hover{color:var(--accent);background:var(--accent-lt);}
.tot-row{display:grid;grid-template-columns:var(--qb-cols);gap:4px;padding:9px 12px;background:var(--surface2);border-top:1px solid var(--border);align-items:center;}
.t-lbl{grid-column:1/7;font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;}
.tv{font-family:var(--mono);font-size:12px;font-weight:500;text-align:right;padding-right:2px;}
.tv.d{color:var(--blue);}.tv.r{color:var(--orange);}.tv.k{color:var(--green);}

/* ── QUOTE PREVIEW ── */
.qp-wrap{max-width:820px;margin:0 auto;font-family:var(--sans);}
.qp-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--border);}
.qp-co{font-family:var(--serif);font-size:20px;color:var(--text);}
.qp-tl{font-size:11px;color:var(--text3);margin-top:2px;}
.qp-addr{font-size:10px;color:var(--text3);margin-top:1px;}
.qp-badge{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:3px;display:inline-block;margin-bottom:6px;}
.qp-badge.dist{background:rgba(26,86,219,.09);color:var(--blue);}
.qp-badge.res{background:rgba(212,82,10,.09);color:var(--orange);}
.qp-badge.cust{background:rgba(10,124,78,.09);color:var(--green);}
.qp-meta{text-align:right;font-family:var(--mono);font-size:10px;color:var(--text2);line-height:1.9;}
.qp-meta .qnum{font-family:var(--serif);font-size:15px;color:var(--text);display:block;margin-bottom:3px;}

/* Chain section — shows who receives / who end customer is */
.chain-section{display:grid;gap:10px;margin-bottom:14px;}
.chain-section.dist-chain{grid-template-columns:1fr 1fr 1fr;}
.chain-section.res-chain{grid-template-columns:1fr 1fr;}
.chain-box{border:1px solid var(--border);border-radius:6px;padding:10px 12px;background:var(--surface2);}
.chain-box.from-box{border-left:3px solid var(--blue);}
.chain-box.to-box  {border-left:3px solid var(--orange);}
.chain-box.end-box {border-left:3px solid var(--green);}
.chain-lbl{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;}
.chain-name{font-size:13px;font-weight:600;color:var(--text);}
.chain-detail{font-family:var(--mono);font-size:9px;color:var(--text2);line-height:1.8;margin-top:2px;}

.qp-tbl-head,.qp-tbl-row{display:grid;gap:7px;padding:6px 0;font-family:var(--mono);font-size:10px;}
.qp-tbl-head{color:var(--text3);letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid var(--border);font-size:8px;}
.qp-tbl-row{border-bottom:1px solid var(--border);color:var(--text2);}
.qp-tbl-row:last-child{border-bottom:none;}
.qp-c7{grid-template-columns:20px 62px 1fr 65px 72px 72px 30px 74px 80px 70px;}
.qp-totals{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);max-width:260px;margin-left:auto;}
.qp-tl-row{display:flex;justify-content:space-between;padding:3px 0;font-family:var(--mono);font-size:10px;color:var(--text2);}
.qp-tl-row.final{font-size:13px;color:var(--text);font-weight:700;border-top:2px solid var(--text);padding-top:7px;margin-top:3px;}
.qp-sig{margin-top:24px;padding-top:14px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.sig-ln{border-bottom:1px solid var(--border2);height:26px;margin-bottom:3px;}
.sig-lbl{font-family:var(--mono);font-size:8px;color:var(--text3);}
.qp-tos{margin-top:14px;font-size:9px;color:var(--text3);line-height:1.6;font-family:var(--mono);}

/* SAVED QUOTES */
.sq-head,.sq-row{display:grid;grid-template-columns:100px 130px 1fr 80px 100px 140px;gap:9px;align-items:center;padding:8px 14px;font-family:var(--mono);font-size:11px;}
.sq-head{font-size:8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;background:var(--surface2);border-bottom:1px solid var(--border);}
.sq-row{border-bottom:1px solid var(--border);transition:background .1s;}
.sq-row:hover{background:var(--surface2);}
.sq-row:last-child{border-bottom:none;}
.sq-num{color:var(--accent);font-weight:500;}
.sq-badge{padding:2px 7px;border-radius:3px;font-size:8px;letter-spacing:.4px;display:inline-block;}
.sq-empty{font-family:var(--mono);font-size:11px;color:var(--text3);padding:24px;text-align:center;}

/* INLINE VIEWER MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface);border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.18);width:90%;max-width:860px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
.modal-ttl{font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:.5px;}
.modal-body{padding:24px 28px;overflow-y:auto;flex:1;}
.modal-close{background:transparent;border:1px solid var(--border2);border-radius:4px;color:var(--text2);font-family:var(--mono);font-size:11px;padding:4px 11px;cursor:pointer;}
.modal-close:hover{border-color:var(--red);color:var(--red);}

/* COMMISSIONS */
.c3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.cr{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:11px;}
.cr:last-child{border-bottom:none;}
.cr-sku{color:var(--blue);}
.rb{padding:2px 6px;border-radius:3px;font-size:8px;letter-spacing:.4px;}
.rb-base{background:var(--surface2);color:var(--text3);}
.rb-acc1{background:rgba(26,86,219,.08);color:var(--blue);}
.rb-acc2{background:rgba(10,124,78,.08);color:var(--green);}
.cr-amt{color:var(--warn);font-weight:500;}
.divider{height:1px;background:var(--border);margin:12px 0;}
.toast{position:fixed;bottom:18px;right:18px;background:var(--text);color:#fff;font-family:var(--mono);font-size:11px;padding:8px 15px;border-radius:5px;z-index:1000;display:none;box-shadow:0 4px 14px rgba(0,0,0,.18);}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;}
input[type="date"]{color-scheme:light;}
select.fi{cursor:pointer;}

/* ── Action button tooltips ── */
.tt-wrap{ position:relative;display:inline-block; }
.tt-wrap .tt-bubble{
  display:none;position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  background:#1e293b;color:#fff;font-family:var(--mono);font-size:9px;white-space:nowrap;
  padding:3px 8px;border-radius:4px;pointer-events:none;z-index:9999;
}
.tt-wrap .tt-bubble::before{
  content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-bottom-color:#1e293b;
}
.tt-wrap:hover .tt-bubble{ display:block; }

/* ── Card name — reads as a heading, reveals it's clickable on hover ── */
.cardname{ color:var(--text);cursor:pointer;text-decoration:none; }
.cardname:hover{ text-decoration:underline;text-underline-offset:2px; }
/* ── Card "⋯" overflow menu ── */
.cardmenu{ position:absolute;z-index:9998;min-width:160px;background:var(--surface);
  border:1px solid var(--border);border-radius:7px;box-shadow:0 6px 20px rgba(0,0,0,.18);overflow:hidden; }
.cardmenu div{ font-family:var(--mono);font-size:11px;padding:8px 13px;cursor:pointer;color:var(--text);white-space:nowrap; }
.cardmenu div:hover{ background:var(--bg); }

/* ── Dashboard Print Styles ──────────────────────────────────────────── */
@media print {
  @page { size: A4 landscape; margin: 19mm 12mm; }  /* 19mm = .75in top/bottom */

  /* Hide everything at body level except the main content div */
  body > *:not(.content) { display: none !important; }

  /* Show the content wrapper but reset its flex/scroll */
  body > .content {
    display: block !important;
    overflow: visible !important;
    flex: none !important;
    height: auto !important;
  }

  /* Hide the title bar and all pages except dashboard */
  .content > *:not(#page-dashboard) { display: none !important; }

  /* Show only the dashboard page */
  #page-dashboard { display: block !important; padding: 0 !important; margin: 0 !important; }

  /* Reset layout for print */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff !important; font-size: 11px; }

  /* Cards */
  .card { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; margin-bottom: 12px; }
  .card-header { background: #f8f8f8 !important; }

  /* Print header */
  #dash-print-header { display: block !important; }

  /* Hide nav buttons and print button inside dashboard */
  .btn, .no-print { display: none !important; }

  /* Canvas (charts) need explicit size */
  canvas { max-width: 180px !important; max-height: 180px !important; }
}

    .hover-bg:hover{background:var(--bg)!important;}

/* ── Calendar ── */
.cal-month-grid{display:grid;gap:0;}
.cal-day-cell{min-height:90px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:4px;vertical-align:top;cursor:pointer;}
.cal-day-cell:hover{background:var(--surface2);}
.cal-day-num{font-family:var(--mono);font-size:10px;color:var(--text3);margin-bottom:3px;}
.cal-day-num.today{background:var(--blue);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.cal-day-num.other-month{color:var(--border2);}
.cal-event-chip{font-family:var(--mono);font-size:9px;padding:2px 5px;border-radius:3px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;cursor:pointer;display:block;}
.cal-event-chip.is-task{opacity:.85;border-left:3px solid rgba(0,0,0,.2);}
.cal-week-grid{display:grid;}
.cal-time-label{font-family:var(--mono);font-size:9px;color:var(--text3);text-align:right;padding-right:6px;line-height:1;}
.cal-slot{border-bottom:1px solid var(--border);position:relative;min-height:40px;}
.cal-slot:hover{background:var(--surface2);}

/* ── Help page ── */
.help-card{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden;}
.help-card-hdr{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;background:var(--surface2);user-select:none;}
.help-card-hdr:hover{background:var(--border);}
.help-card-icon{font-size:16px;flex-shrink:0;}
.help-card-title{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--text);flex:1;}
.help-card-arrow{font-size:10px;color:var(--text3);flex-shrink:0;}
.help-card-body{display:none;border-top:1px solid var(--border);}
.help-card-body--open{display:block;}
.help-row{padding:12px 16px;border-bottom:1px solid var(--border);}
.help-row:last-child{border-bottom:none;}
.help-row-h{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:4px;font-weight:600;}
.help-row-t{font-size:12px;color:var(--text);line-height:1.6;}

/* ── Import spinner ── */
@keyframes spig-spin{to{transform:rotate(360deg)}}
.spig-spinner{display:inline-block;width:13px;height:13px;border:2px solid #bfdbfe;border-top-color:#1e40af;border-radius:50%;animation:spig-spin .7s linear infinite;flex-shrink:0;}

/* ── User Settings accordion ── */
.us-card{border:1px solid var(--border);border-radius:7px;overflow:hidden;margin-bottom:12px;background:var(--surface);box-shadow:var(--shadow);}
.us-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;cursor:pointer;background:#f3f2f2;user-select:none;}
.us-hdr:hover{background:var(--border);}
.us-hdr-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.us-hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.us-arrow{font-size:10px;color:var(--text3);transition:transform .2s;width:14px;text-align:center;}
.us-body{padding:14px;border-top:1px solid var(--border);}
.us-body.us-collapsed{display:none;}

/* Voice AI */
@keyframes vaipulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.6);}50%{box-shadow:0 0 0 8px rgba(220,38,38,0);}}
.vai-btn-pulse{animation:vaipulse 1.2s infinite!important;}
#vai-dialog{position:fixed;bottom:70px;right:24px;width:380px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.28);z-index:8500;padding:0;overflow:hidden;}
#vai-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 10px;border-bottom:1px solid var(--border);}
#vai-dialog-body{padding:14px 18px 18px;max-height:320px;overflow-y:auto;}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE STYLES
   Drawer + hamburger base styles are GLOBAL (needed for JS class toggles).
   Layout overrides are inside max-width:768px media queries only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile hamburger — hidden on desktop */
#mob-menu-btn{display:none;}

/* Drawer — always in DOM, off-screen by default (transform, not display:none) */
#mob-drawer{
  position:fixed;top:0;left:0;
  width:280px;max-width:85vw;height:100%;
  background:#16325c;
  z-index:9500;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding-bottom:env(safe-area-inset-bottom,20px);
}
#mob-drawer.mob-open{transform:translateX(0);}

/* Overlay — invisible until active */
#mob-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.52);
  z-index:9400;
  opacity:0;pointer-events:none;
  transition:opacity .28s;
}
#mob-overlay.mob-open{opacity:1;pointer-events:auto;}

/* Drawer nav item styles */
.mob-sec-hdr{padding:10px 18px 3px;font-family:var(--mono);font-size:8px;color:rgba(255,255,255,.38);letter-spacing:1.4px;text-transform:uppercase;margin-top:6px;}
.mob-nav-item{padding:12px 22px;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.82);cursor:pointer;border-left:3px solid transparent;transition:background .1s,border-color .1s,color .1s;-webkit-tap-highlight-color:transparent;}
.mob-nav-item:active,.mob-nav-item:hover{background:rgba(255,255,255,.1);border-left-color:#0070d2;color:#fff;}
.mob-nav-active{background:rgba(0,112,210,.22)!important;border-left-color:#0070d2!important;color:#fff!important;}

/* Phone breakpoint: portrait phones (≤768px wide) AND landscape phones
   (short viewports up to 1024px wide — e.g. 844×390, 932×430). Landscape
   phones need the same treatment (stacked forms, full-screen modals, drawer
   nav): at 844px wide the desktop layout "fits" but modals and dense forms
   overflow the 390px height with desktop-scaled chrome. Tablets in landscape
   (height > 500px) keep the desktop layout. */
@media (max-width:768px), ((max-width:1024px) and (max-height:500px)){

  /* ── PREVENT iOS INPUT AUTO-ZOOM (font-size must be ≥ 16px on inputs) ── */
  input,select,textarea,.fi{font-size:16px!important;}
  input[type=number]{font-size:16px!important;}

  /* ── NAVIGATION — hamburger visible, horizontal nav hidden ── */
  #mob-menu-btn{
    display:flex!important;align-items:center;justify-content:center;
    width:46px;height:46px;min-width:46px;
    background:none;border:none;cursor:pointer;
    color:rgba(255,255,255,.9);font-size:24px;flex-shrink:0;padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  .tn-items{display:none!important;}

  /* Topnav — prevent overflow, keep logo + hamburger + minimal actions */
  .topnav-bar{overflow:hidden;flex-wrap:nowrap;height:48px;}
  .tn-logo{padding:0 8px;flex-shrink:0;}

  /* Right user area — hide email label, shrink aggressively */
  .tn-user{
    padding:0 6px;gap:4px;flex-shrink:0;
    overflow:hidden;max-width:calc(100vw - 160px);
  }
  /* Hide email text on mobile */
  #user-email-lbl{display:none!important;}
  /* Tighten every right-side control so nothing gets clipped off the bar */
  #vai-btn{padding:0 9px!important;margin:0 2px!important;}
  #tn-help-btn,#tn-chat-btn{padding:0 9px!important;}
  #tn-ai-btn{padding:0 10px!important;}
  /* Save button: icon-only on mobile */
  #save-cloud-btn{font-size:10px;padding:4px 7px;white-space:nowrap;max-width:68px;overflow:hidden;}
  /* Save status label — hide on mobile */
  #save-status{display:none!important;}

  /* ── ⚙ SETUP MENU (SET-1) ──
     .topnav-bar carries overflow:hidden above (keeps the control strip from
     spilling off the 48px bar), which CLIPPED the absolutely-positioned
     .tn-drop dead: tapping ⚙ toggled .open and nothing ever appeared.
     position:fixed escapes an ancestor's overflow clip (the bar is sticky —
     sticky is NOT a containing block for fixed), so the menu drops below the
     bar as a real sheet. It stays a DOM child of .tn-item, so tnToggle and the
     click-outside handler (js/dashboard.js) keep working unchanged. */
  #tn-setup .tn-drop{
    position:fixed;
    top:48px;right:0;left:auto;
    width:288px;max-width:94vw;
    max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    border-radius:0 0 0 var(--border-radius-md);
  }
  /* The Administrator / User Settings flyouts open on :hover, which touch
     never fires — render them inline (always expanded, indented) instead. */
  #tn-setup .tn-sub-drop{
    position:static;display:block;
    min-width:0;max-height:none;overflow:visible;
    border:none;box-shadow:none;border-radius:0;
    background:var(--surface2);
  }
  #tn-setup .tn-sub-drop .tn-drop-item{padding-left:28px;}
  #tn-setup .tn-sub-arrow{display:none;}
  /* Finger-sized rows */
  #tn-setup .tn-drop-item{padding-top:11px;padding-bottom:11px;font-size:11px;}

  /* ── PAGE LAYOUT ── */
  .page{padding:12px 10px 20px;}
  .topbar{padding:6px 10px;flex-wrap:wrap;gap:6px;}
  .page-ttl{font-size:12px;}
  .tb-actions{flex-wrap:wrap;gap:4px;}

  /* ── DASHBOARD — override the inline 3-column grid ── */
  #dash-main-grid{display:flex!important;flex-direction:column!important;gap:12px!important;}
  /* Opportunities sub-grids (charts, top-prospects) → stack full width */
  .dash-sub-grid{display:flex!important;flex-direction:column!important;gap:12px!important;}
  /* Charts/canvases inside dashboard cards: fill width, keep square */
  #dash-opp-chart,#dash-closed-chart{width:100%!important;max-width:260px!important;height:auto!important;}
  /* Summary cards: 2-per-row is still fine */
  .sum-grid{grid-template-columns:1fr 1fr!important;gap:8px;}

  /* ── DASHBOARD QUARTER BANNER — stack the 3 panels vertically ──
     Desktop lays it out as a rigid flex row (min-widths + flex-shrink:0 inline);
     on a phone that clips the quota cards off the right edge and stretches the
     side panels to absurd heights. Stack instead; dividers keep the banner's
     on-track/behind accent via the --dqb-border custom property. */
  .dqb-row{flex-direction:column!important;}
  .dqb-days,.dqb-status,.dqb-quota{min-width:0!important;width:100%;box-sizing:border-box;border-right:none!important;}
  /* Days panel: one compact horizontal strip instead of a tall centered column */
  .dqb-days{flex-direction:row!important;justify-content:flex-start!important;align-items:baseline!important;gap:10px;padding:12px 16px!important;border-bottom:2px solid var(--dqb-border,var(--border));}
  .dqb-days>div{margin-top:0!important;}
  .dqb-days>div:first-child{font-size:26px!important;}
  .dqb-status{padding:12px 16px!important;border-bottom:2px solid var(--dqb-border,var(--border));}
  .dqb-quota{padding:12px 16px 14px!important;}
  /* Production / Forecast groups: stacked, divider flips from left to top */
  .dqb-groups{flex-direction:column!important;gap:16px!important;width:100%;}
  .dqb-group{width:100%;}
  .dqb-group-f{border-left:none!important;padding-left:0!important;border-top:1px solid var(--border);padding-top:14px;}
  /* Quarter boxes: even grid that always fits the viewport */
  .dqb-boxes{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))!important;}
  .dqb-boxes-f{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;}
  .dqb-qcol,.dqb-fcol{min-width:0!important;}

  /* ── TOP BAR — collapse button labels to icons to save room ── */
  .tn-btn-txt{display:none!important;}
  /* Tracker metrics row inside dashboard */
  #dash-tracker-metrics .two-col,
  .two-col{grid-template-columns:1fr!important;gap:10px;}

  /* ── OTHER GRIDS → STACK ── */
  .c3{grid-template-columns:1fr!important;}
  .chain-section.dist-chain,.chain-section.res-chain{grid-template-columns:1fr!important;}
  .qp-sig{grid-template-columns:1fr!important;}

  /* ── CARDS ── */
  .card{margin-bottom:10px;overflow-x:auto;}

  /* ── QUOTE BUILDER — card scrolls horizontally; rows keep their width ── */
  .qb-g,.tot-row,.gs-inner,.add-lr{min-width:860px;}

  /* ── QUOTE PREVIEW ── */
  .qp-wrap{max-width:100%;}
  .qp-top{flex-direction:column;gap:10px;}
  .qp-meta{text-align:left;}
  .qp-tbl-head,.qp-tbl-row{min-width:580px;}

  /* ── SAVED QUOTES — stacked card rows: [Q# · type · total] / party+opp /
     [date · actions]. The 6-column desktop grid clipped the party column. ── */
  .sq-head{display:none!important;}
  .sq-row{
    grid-template-columns:auto auto 1fr!important;
    grid-template-areas:"num type total" "party party party" "date actions actions"!important;
    gap:4px 8px!important;padding:10px 12px!important;
  }
  .sq-row>*:nth-child(1){grid-area:num;}
  .sq-row>*:nth-child(2){grid-area:type;}
  .sq-row>*:nth-child(3){grid-area:party;}
  .sq-row>*:nth-child(4){grid-area:date;align-self:center;}
  .sq-row>*:nth-child(5){grid-area:total;justify-self:end;}
  .sq-row>*:nth-child(6){grid-area:actions;justify-self:end;flex-wrap:wrap;justify-content:flex-end;}

  /* ── MODALS — full screen ── */
  .modal-box{width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;border-radius:0!important;}

  /* Task modal grid → single column */
  #task-modal>div{width:100%!important;max-width:100%!important;height:100%!important;max-height:100vh!important;max-height:100dvh!important;border-radius:0!important;overflow-y:auto;padding:16px 12px!important;box-sizing:border-box;}

  /* ── GENERIC FORM-MODAL PHONE RULES (task / calendar event / MEDDPICC) ──
     Same recipe as the prospect + ct modals above: every inline multi-column
     grid stacks to one shrinkable column, spans are neutralized, and no-wrap
     flex rows wrap instead of forcing the box wider than the screen. */
  #task-modal div[style*="grid-template-columns"],
  #cal-event-modal div[style*="grid-template-columns"],
  #meddpicc-modal div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}
  #task-modal div[style*="grid-template-columns"]>*,
  #cal-event-modal div[style*="grid-template-columns"]>*,
  #meddpicc-modal div[style*="grid-template-columns"]>*{grid-column:auto!important;min-width:0;}
  #task-modal>div [style*="display:flex"],
  #cal-event-modal>div [style*="display:flex"],
  #meddpicc-modal>div [style*="display:flex"]{flex-wrap:wrap;max-width:100%;min-width:0;}
  #cal-event-modal>div{width:100%!important;max-width:100%!important;border-radius:0!important;padding:16px 12px!important;box-sizing:border-box;max-height:100dvh!important;}
  #meddpicc-modal{padding:0!important;}
  #meddpicc-modal>div{width:100%!important;max-width:100%!important;margin:0!important;border-radius:0!important;min-height:100%;}

  /* Notes-expand editor: full-screen on phones (its inline min-width:400px
     otherwise exceeds a 320px viewport; resize handles are pointless on touch). */
  #notes-expand-modal>div{min-width:0!important;width:100%!important;max-width:100%!important;height:100vh!important;height:100dvh!important;border-radius:0!important;resize:none!important;}

  /* ── OPPORTUNITY (PROSPECT) MODAL ──
     height:100% was the spill bug: content taller than one screen overflowed
     past the box's white background, letting the dimmed page behind bleed
     through the Linked Tasks/Quotes sections. The box now GROWS with its
     content (height:auto + min-height) while the overlay keeps scrolling. */
  #prospect-modal>div{
    width:100%!important;max-width:100%!important;
    height:auto!important;min-height:100%;
    margin:0!important;border-radius:0!important;
    padding:16px 12px calc(30px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box;
  }
  /* Header (title · 🔗 ⬡ AI MEDDPICC · Cancel · Save): wrap instead of pushing
     Save off the right edge. */
  #prospect-modal>div>div:first-child{flex-wrap:wrap;row-gap:8px;}
  #prospect-modal>div>div:first-child>div{flex-wrap:wrap;justify-content:flex-end;}
  /* Field grid: single column on phones (labels + selects get full width).
     minmax(0,1fr) lets the track shrink below its widest child's min-content;
     children need grid-column:auto too — three fields carry an inline
     grid-column:1/3 span that would otherwise force a phantom 2nd track. */
  #prospect-modal div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important;}
  #prospect-modal div[style*="grid-template-columns:1fr 1fr"]>div{grid-column:auto!important;min-width:0;}
  /* No-wrap inline-flex rows (the NOTES action strip, linked-quote rows) are
     what force the min-content past the phone's width — let them wrap.
     max-width beats any inline flex-shrink:0 holding an intrinsic width. */
  #prospect-modal>div [style*="display:flex"]{flex-wrap:wrap;max-width:100%;min-width:0;}

  /* Other large modals */
  #org-modal>div,#notes-ai-modal>div,#notes-expand-modal>div,#global-ai-modal>div{
    width:100%!important;max-width:100%!important;height:100%!important;max-height:100vh!important;max-height:100dvh!important;border-radius:0!important;
  }
  /* ── ACCOUNT / CONTACT MODALS (ct-modal-cust/res/dist/sp) ──
     Same treatment as #prospect-modal above: the box GROWS with content
     (height:100% was clipping the white background one screen down, letting
     the dimmed page bleed through Documents/10-K), every inline multi-column
     grid stacks to one column, and no-wrap flex rows (notes toolbar, section
     headers) wrap instead of forcing horizontal overflow. */
  [id^="ct-modal-"]>div{
    width:100%!important;max-width:100%!important;
    height:auto!important;min-height:100%;
    margin:0!important;border-radius:0!important;
    padding:16px 12px calc(30px + env(safe-area-inset-bottom,0px))!important;box-sizing:border-box;
  }
  [id^="ct-modal-"] div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}
  [id^="ct-modal-"] div[style*="grid-template-columns"]>div{grid-column:auto!important;min-width:0;}
  /* max-width beats the header action row's inline flex-shrink:0, which would
     otherwise hold its intrinsic width and never let its buttons wrap. */
  [id^="ct-modal-"]>div [style*="display:flex"]{flex-wrap:wrap;max-width:100%;min-width:0;}
  [id^="ct-modal-"]{padding:0!important;}

  /* ── ADD/EDIT PERSON MODAL ── same generic treatment; its fields|notes
     1fr 360px grid otherwise crushes the fields column to nothing on phones
     (the box keeps its own internal scroll, so no height change needed). */
  #add-person-modal{padding:0!important;}
  #add-person-modal>div{
    width:100%!important;max-width:100%!important;max-height:100%!important;
    border-radius:0!important;padding:16px 12px 30px!important;box-sizing:border-box;
  }
  #add-person-modal div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}
  #add-person-modal div[style*="grid-template-columns"]>div{grid-column:auto!important;min-width:0;}
  #add-person-modal>div [style*="display:flex"]{flex-wrap:wrap;max-width:100%;min-width:0;}
  #tenk-view-modal>div,#tenk-db-modal>div,#tenk-bulk-modal>div,#tenk-seed-modal>div{
    width:100%!important;max-width:100%!important;border-radius:0!important;
  }

  /* ── TOUCH TARGETS (≈44px primary, ≥38px secondary) ── */
  .btn{min-height:44px;padding:9px 14px;}
  .btn-sm{min-height:38px;padding:7px 10px;}
  .btn-xs{min-height:34px;}

  /* Long words / URLs / emails / IDs must never widen a layout */
  body{overflow-wrap:break-word;}

  /* Phones ≤560px: the full control strip is ~515px of chrome, so on every
     portrait phone the TRAILING buttons were silently clipped off-screen.
     Drop the non-essential controls so the essentials — menu, AI, chat, VOICE,
     Sign Out, ⚙ settings — always stay reachable. Help/Scratchpad remain on
     tablets and desktop (Help is still in the ⚙ menu). */
  @media (max-width:560px){
    #user-chip{display:none!important;}
    /* Hide the WRAPPER divs (they carry padding + a divider border that would
       otherwise linger as a stray sliver next to the hidden button). */
    .topnav-bar div:has(>#tn-help-btn){display:none!important;}
    .topnav-bar div:has(>[onclick="openScratchpad()"]){display:none!important;}
    .tn-logo{padding:0 5px;}
    #mob-menu-btn{width:42px;min-width:42px;}
    .tn-user{padding:0 3px;}
    .tn-user .btn{padding:3px 6px!important;}
    #tn-ai-btn{padding:0 9px!important;}
    #tn-chat-btn,#tn-dchat-btn{padding:0 9px!important;}
    #vai-btn{padding:0 7px!important;margin:0!important;}
    #tn-setup>.tn-btn{padding:0 10px!important;}
  }
  /* Very small phones (≤380px): tighten further so the essentials fit 320px
     (chat gives way to keep the voice assistant reachable). */
  @media (max-width:380px){
    .tn-logo{padding:0 3px;}
    .tn-logo img{height:22px;padding:3px 6px;}
    #mob-menu-btn{width:38px;min-width:38px;}
    #tn-chat-wrap,#tn-dchat-wrap{display:none!important;}
    #tn-ai-btn{padding:0 8px!important;}
    #vai-btn{padding:0 6px!important;margin:0!important;font-size:16px!important;}
    #tn-setup>.tn-btn{padding:0 9px!important;}
    .tn-user{padding:0 2px;}
    .tn-user .btn{padding:3px 5px!important;}
  }

  /* ── PHONE LANDSCAPE (short viewports): reclaim vertical space ── */
  @media (max-height:500px){
    .topbar{padding:4px 10px;}
    .page{padding:8px 10px 16px;}
    .card{margin-bottom:8px;}
  }

  /* ── PRESENTATION BUILDER — editor panes stack; export toolbar wraps ── */
  #page-presentation-builder div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}
  #page-presentation-builder div[style*="grid-template-columns"]>*{grid-column:auto!important;min-width:0;}
  #page-presentation-builder [style*="display:flex"]{flex-wrap:wrap;max-width:100%;min-width:0;}
  #page-presentation-builder [style*="min-width:400px"],
  #page-presentation-builder [style*="min-width:240px"]{min-width:0!important;}

  /* COLUMN-flex correction for every wrap blanket above: flex-wrap:wrap on a
     COLUMN container with a constrained height wraps children sideways into a
     phantom second column (that pushed the presentation-builder composer off
     the card). Column containers must never wrap. */
  #prospect-modal>div [style*="flex-direction:column"],
  [id^="ct-modal-"]>div [style*="flex-direction:column"],
  #add-person-modal>div [style*="flex-direction:column"],
  #task-modal>div [style*="flex-direction:column"],
  #cal-event-modal>div [style*="flex-direction:column"],
  #meddpicc-modal>div [style*="flex-direction:column"],
  #page-presentation-builder [style*="flex-direction:column"]{flex-wrap:nowrap!important;}

  /* ── TRACKER TASKS TABLE — horizontal scroll ── */
  #page-tracker-tasks .card,#tracker-tasks-wrap{overflow-x:auto;}
  /* Filter row: the 5-across grid gave each select ~59px ("A…"). Two per row. */
  #page-tracker-tasks div[style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;}

  /* ── OPPORTUNITY PLANNER ──
     Table view renders stacked cards on phones (renderProspectAccounts checks
     the same 768px breakpoint), so rows no longer need a forced min-width.
     overflow-x stays for the Board (kanban) view's horizontal columns. */
  #prospect-accounts-body{overflow-x:auto;}
  /* Toolbar (Report · search · status filter · + Add Opportunity): wrap instead
     of overflowing off the right edge; the search box stretches to fill. */
  #page-prospect-accounts .card-header{flex-wrap:wrap;gap:8px;}
  #page-prospect-accounts .card-header>div{flex-wrap:wrap;width:100%;}
  #prospect-search{flex:1 1 150px;width:auto!important;min-width:120px;}

  /* ── CONTACTS CARDS ── */
  #contacts-people-body>div,
  #tracker-contacts-body>div{grid-template-columns:1fr!important;}

  /* ── CALENDAR ── */
  .cal-day-cell{min-height:52px;}
  .cal-event-chip{font-size:8px;padding:1px 3px;}

  /* ── VOICE AI DIALOG ── */
  #vai-dialog{
    width:calc(100vw - 20px)!important;
    left:10px!important;right:10px!important;
    bottom:56px!important;border-radius:10px!important;
  }

  /* ── SAP BACKGROUND INDICATOR ── */
  #sap-bg-indicator{
    width:calc(100vw - 30px)!important;
    left:15px!important;right:15px!important;bottom:56px!important;
  }

  /* ── FONT SIZES ── */
  .sc-lbl{font-size:9px;}
  .sc-val{font-size:18px;}
  .field label{font-size:11px;}

  /* ── iOS SAFE AREA ── */
  .topnav-bar{padding-top:env(safe-area-inset-top,0px);}
  body{padding-bottom:env(safe-area-inset-bottom,0px);}
}

/* ── Recording dot indicator ────────────────────────────────────────────────── */
@keyframes recDotPulse {
  0%, 100% { transform:scale(1);    box-shadow:0 2px 8px  rgba(200,0,0,.55),inset 0 -2px 4px rgba(0,0,0,.3); }
  50%       { transform:scale(0.82); box-shadow:0 4px 18px rgba(200,0,0,.9), inset 0 -2px 4px rgba(0,0,0,.3); }
}
.rec-dot-live {
  display:inline-block;
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #ff8080 10%, #e00000 55%, #8a0000 100%);
  box-shadow:0 2px 8px rgba(200,0,0,.55),inset 0 -2px 4px rgba(0,0,0,.3);
  animation:recDotPulse 1s ease-in-out infinite;
  vertical-align:middle; flex-shrink:0;
}

/* ── POC Planning (js/poc.js) ── */
.poc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.poc-fld-lbl{font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:4px;}
.poc-sub-hdr{font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);margin-bottom:6px;}
.poc-table{width:100%;border-collapse:collapse;font-size:11px;}
.poc-table th{font-family:var(--mono);font-size:8px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);text-align:left;padding:6px;border-bottom:1px solid var(--border);white-space:nowrap;}
.poc-table td{padding:3px 4px;border-bottom:1px solid var(--border);vertical-align:top;}
.poc-table .fi{font-size:11px;padding:4px 6px;width:100%;box-sizing:border-box;min-width:80px;}
.poc-table textarea.fi{resize:vertical;min-height:30px;}
.poc-table textarea.poc-grow{resize:none;overflow:hidden;}

/* Unified AI marker — the "Spark". One monochrome glyph used everywhere an AI
   feature appears, drawn with a CSS mask so it takes its color from the text.
   Result: white inside colored/dark buttons and the navy topnav (via currentColor),
   and the AI accent (purple) on light surfaces via the overrides below. Sized to
   ~1em so it scales with the surrounding text and never dominates. */
.ai-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-0.22em;flex:0 0 auto;background-color:currentColor;-webkit-mask:var(--ai-spark) center/contain no-repeat;mask:var(--ai-spark) center/contain no-repeat;}
/* Light surfaces: render the spark in the AI accent instead of the (dark) body
   text color. Colored/dark buttons keep their white label color via currentColor. */
.btn-ghost .ai-ico,.tn-drop-item .ai-ico,.card-title .ai-ico,.us-card .ai-ico,.sap-menu .ai-ico{color:var(--ai-accent);}

/* Ergentor "Spark" kit — add class="ai" to any text element to get a spark before
   it (inherits text color; add on-light to force the accent, plated for busy bg). */
.ai::before{content:"";display:inline-block;width:1em;height:1em;margin-right:.4em;vertical-align:-.12em;background-color:currentColor;-webkit-mask:var(--ai-spark) center/contain no-repeat;mask:var(--ai-spark) center/contain no-repeat;}
.ai.on-light::before{background-color:var(--ai-accent);}
.ai.plated::before{background-color:#fff;box-shadow:0 0 0 .28em rgba(255,255,255,.22);border-radius:50%;margin-right:.55em;}
.ai-included{display:inline-flex;align-items:center;gap:.5em;font-size:13px;font-weight:600;color:var(--ai-accent);background:color-mix(in srgb,var(--ai-accent) 10%,#fff);border:1px solid color-mix(in srgb,var(--ai-accent) 28%,#fff);padding:5px 12px;border-radius:30px;}
.poc-row-btns{display:flex;gap:2px;white-space:nowrap;}
.poc-sec-title{font-weight:600;font-size:12px;max-width:420px;}
.poc-status-dot{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;}

/* ── Tablet (769–1024px) ── */
@media (min-width:769px) and (max-width:1024px){
  .sum-grid{grid-template-columns:1fr 1fr!important;}
  .c3{grid-template-columns:1fr 1fr!important;}
  .page{padding:16px 18px;}
  .card{overflow-x:auto;}
  .qb-g,.tot-row{min-width:860px;}
}

/* ── Topnav compaction (769–1450px) ─────────────────────────────────────────
   Every nav item is flex-shrink:0 + nowrap, so the bar's natural width
   (~1415px at default spacing) forced a horizontal scrollbar on the WHOLE
   page on laptop screens. Tighten spacing in two steps; the bar itself never
   scrolls or clips, so the .tn-drop dropdowns stay fully visible. The
   !important overrides exist because those buttons carry inline padding. */
@media (min-width:769px) and (max-width:1450px){
  .tn-btn{padding:0 8px;gap:4px;}
  .tn-logo{padding:0 8px;}
  .tn-user{padding:0 8px;gap:6px;}
  #user-email-lbl{display:none;}
  #user-chip{max-width:150px;overflow:hidden;}
  #vai-btn{padding:0 10px!important;margin:0 4px!important;}
  #tn-ai-btn,#tn-help-btn,#tn-scratch-btn,#tn-chat-btn,#tn-setup .tn-btn{padding:0 10px!important;}
}
/* Below 1200px the labeled action buttons go icon-only (their title
   tooltips still explain them — same treatment mobile already uses). */
@media (min-width:769px) and (max-width:1200px){
  .tn-btn{padding:0 7px;font-size:10px;}
  .tn-btn-txt{display:none;}
  #vai-btn,#tn-ai-btn,#tn-help-btn,#tn-scratch-btn,#tn-chat-btn,#tn-setup .tn-btn{padding:0 8px!important;}
}
/* 769–960px: the horizontal nav can't fit even icon-only, so page navigation
   moves into the existing mobile hamburger drawer; the right-side action
   icons (AI, voice, help, scratchpad, setup) stay. mobile.js's drawer
   auto-close threshold matches this breakpoint (960). */
@media (min-width:769px) and (max-width:960px){
  .tn-items{display:none!important;}
  #mob-menu-btn{
    display:flex!important;align-items:center;justify-content:center;
    width:46px;height:46px;min-width:46px;
    background:none;border:none;cursor:pointer;
    color:rgba(255,255,255,.9);font-size:24px;flex-shrink:0;padding:0;
  }
  #user-chip{display:none;}
}

/* Org People roster (ORG-1/TERR-2): one grid per row so the territory chips,
   role select, reports-to/pod select and Remove button line up in columns
   across every member. */
.org-roster-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(230px,1.4fr) 140px minmax(210px,240px) 76px;
  gap:6px 12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.org-roster-wire{display:flex;align-items:center;gap:6px;min-width:0;}
@media (max-width:1100px){
  .org-roster-row{grid-template-columns:minmax(160px,1fr) 140px minmax(200px,260px) 76px;}
  /* territory chips drop to a full-width second line, placed last */
  .org-roster-row > span[id^="org-terr-cell-"]{grid-column:1 / -1;order:10;}
}
@media (max-width:640px){
  .org-roster-row{grid-template-columns:1fr;}
  .org-roster-row > span[id^="org-terr-cell-"]{order:0;}
}

/* Org backup sets (ORG-7): each set row is an expandable <details> hiding the
   per-member Restore buttons. The native disclosure triangle is suppressed
   (list-style:none), so the caret below is the expand affordance — it points
   right when closed and rotates down when the set is open. */
.org-bkp-set > summary::-webkit-details-marker{display:none;}
.org-bkp-set .obk-caret{
  display:inline-block;font-size:9px;color:var(--text3);
  transition:transform .12s ease;flex-shrink:0;
}
.org-bkp-set[open] .obk-caret{transform:rotate(90deg);}
/* The whole Org Backups block is itself a <details>, collapsed by default
   (the auto-backup schedule makes the set list long). Own class + direct-child
   selectors so the outer state never rotates the inner set carets. */
.org-bkp-wrap > summary::-webkit-details-marker{display:none;}
.org-bkp-wrap > summary .obk-caret-hd{
  display:inline-block;font-size:9px;color:var(--text3);
  transition:transform .12s ease;flex-shrink:0;
}
.org-bkp-wrap[open] > summary .obk-caret-hd{transform:rotate(90deg);}

/* ── Notes Find (in-notes keyword search bar, js/notes-find.js) ────────────── */
.nf-bar{display:flex;align-items:center;gap:4px;margin:0 0 5px;padding:2px 7px;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;}
.nf-bar .nf-ic{font-size:11px;opacity:.55;line-height:1;flex-shrink:0;}
.nf-bar .nf-input{flex:1;min-width:50px;border:none;background:transparent;outline:none;
  font-family:var(--mono);font-size:11px;color:var(--text);padding:2px 0;}
.nf-bar .nf-count{font-family:var(--mono);font-size:9px;color:var(--text3);
  min-width:34px;text-align:right;flex-shrink:0;}
.nf-bar .nf-count.nf-none{color:var(--red);}
.nf-bar .nf-btn{display:none;background:none;border:none;cursor:pointer;color:var(--text2);
  font-size:10px;line-height:1;padding:2px 5px;border-radius:4px;flex-shrink:0;}
.nf-bar.nf-has .nf-btn{display:inline-block;}
.nf-bar .nf-btn:hover{background:var(--surface);color:var(--text);}
::highlight(nf-all){background:#ffe08a;color:#111;}
::highlight(nf-cur){background:#ff9f1c;color:#111;border-radius:2px;}

/* ── Voice Assistant big-red-button launcher (phones) ────────────────────────
   Full-screen overlay opened by the 🎤 topnav button on phones (js/voice-ai.js
   _vaiRedOpen). The arcade button is pure CSS: black bezel ring + glossy red
   dome. Pressing it shows ACTIVE and starts the listening session. */
#vai-red-overlay{
  position:fixed;inset:0;z-index:9990;display:none;
  background:radial-gradient(circle at 50% 28%,#1b2434 0%,#0a0f18 60%,#04070d 100%);
  flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:24px 20px calc(28px + env(safe-area-inset-bottom,0px));
  /* Dome diameter lives on the overlay so the small record button can size
     itself as a fraction of the big one at every viewport. */
  --vai-d:min(78vw,44vh,320px);
}
#vai-red-logo{
  width:min(170px,42vw);height:auto;flex-shrink:0;opacity:.92;
  user-select:none;-webkit-user-drag:none;
}
#vai-red-overlay.open{display:flex;}
/* "Record a Meeting" control, top-right: label + dot, with a status sign under
   it. The dot is ~15% of the big dome, floored at 38px so it stays a usable tap
   target. (Replaces the old ✕ close button, removed 2026-07-25.) */
#vai-rec-wrap{
  position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:12px;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
}
#vai-rec-wrap .vai-rec-row{display:flex;align-items:center;gap:9px;}
#vai-rec-label{
  font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.62);
  white-space:nowrap;user-select:none;
}
#vai-red-rec{
  width:calc(var(--vai-d)*.15);height:calc(var(--vai-d)*.15);
  min-width:38px;min-height:38px;flex-shrink:0;
  border:none;border-radius:50%;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 30%,#ff6b6b 0%,#e11d2e 55%,#8f0f1c 100%);
  box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 -2px 6px rgba(0,0,0,.35);
  transition:box-shadow .12s ease,transform .12s ease,background .12s ease;
  -webkit-tap-highlight-color:transparent;
}
#vai-red-rec:active{transform:translateY(1px);}
#vai-red-rec .vai-rec-dot{
  width:34%;height:34%;border-radius:50%;background:rgba(255,255,255,.92);
  transition:border-radius .15s ease,width .15s ease,height .15s ease;
}
/* Recording: the button reads as pressed IN — the specular highlight flips to
   the lower half, the drop shadow becomes an inset, and it sinks 2px. */
#vai-red-rec.rec-on{
  background:radial-gradient(circle at 45% 68%,#ff6b6b 0%,#c2101f 58%,#6b0a15 100%);
  box-shadow:inset 0 4px 9px rgba(0,0,0,.65),inset 0 -1px 2px rgba(255,255,255,.10),
             0 1px 2px rgba(0,0,0,.4);
  transform:translateY(2px);
}
#vai-red-rec.rec-on .vai-rec-dot{border-radius:3px;width:30%;height:30%;background:rgba(255,255,255,.95);}
/* Status sign directly under the dot. */
#vai-rec-sign{
  display:none;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  white-space:nowrap;user-select:none;
}
#vai-rec-sign.rec{color:#ff5a5a;animation:vaiRecBlink 1s steps(1,end) infinite;}
#vai-rec-sign.proc{color:#e3b341;}
@keyframes vaiRecBlink{0%,49%{opacity:1;}50%,100%{opacity:.15;}}
#vai-red-btn{
  /* Explicit equal width AND height — iOS Safari rendered the aspect-ratio
     version as an oval, so the diameter is pinned with a custom property
     (--vai-d, declared on #vai-red-overlay and inherited here). */
  width:var(--vai-d);height:var(--vai-d);
  box-sizing:border-box;border-radius:50%;border:none;
  cursor:pointer;position:relative;padding:calc(var(--vai-d)*.085);flex-shrink:0;
  background:radial-gradient(circle at 50% 34%,#43434a 0%,#232327 45%,#0c0c0e 78%,#000 100%);
  box-shadow:0 22px 60px rgba(0,0,0,.75),0 6px 14px rgba(0,0,0,.6),inset 0 2px 3px rgba(255,255,255,.14);
  -webkit-tap-highlight-color:transparent;
}
.vai-red-dome{
  width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 120%,#8a0512 0%,#c00716 42%,#e60f28 72%,#fb2440 100%);
  box-shadow:inset 0 -12px 30px rgba(0,0,0,.5),inset 0 10px 22px rgba(255,255,255,.22),0 3px 8px rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease;
}
.vai-red-dome::before{ /* arcade gloss highlight */
  content:'';position:absolute;left:11%;right:11%;top:5%;height:44%;
  border-radius:50%;filter:blur(2px);
  background:linear-gradient(rgba(255,255,255,.48),rgba(255,255,255,.04));
}
#vai-red-btn:active .vai-red-dome{transform:scale(.955);}
.vai-red-lbl{
  font-family:var(--mono);font-weight:800;letter-spacing:4px;color:#fff;
  font-size:clamp(20px,7vw,34px);text-shadow:0 2px 10px rgba(0,0,0,.6);
  opacity:0;transition:opacity .15s;position:relative;z-index:1;user-select:none;
}
#vai-red-btn.on .vai-red-lbl{opacity:1;}
#vai-red-btn.on{animation:vaiRedGlow 1.15s ease-in-out infinite;}
@keyframes vaiRedGlow{
  0%,100%{box-shadow:0 22px 60px rgba(0,0,0,.75),0 0 0 0 rgba(239,19,48,.55),inset 0 2px 3px rgba(255,255,255,.14);}
  50%    {box-shadow:0 22px 60px rgba(0,0,0,.75),0 0 0 26px rgba(239,19,48,0),inset 0 2px 3px rgba(255,255,255,.14);}
}
#vai-red-hint{font-family:var(--mono);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:center;}
#vai-red-said{font-family:var(--mono);font-size:12px;color:#93c5fd;text-align:center;max-width:560px;display:none;}
#vai-red-resp{
  font-family:var(--mono);font-size:14px;line-height:1.6;color:#e8edf5;text-align:center;
  max-width:560px;max-height:26vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Answers arrive as numbered lists separated by newlines. Without pre-wrap
     they collapse into one run-on paragraph ("…breakdown. 1. Send… 2. Sched…").
     The classic #vai-response has always had this; the overlay was missing it. */
  white-space:pre-wrap;
}
#vai-red-type{background:none;border:none;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px;}

/* ── "Attach these notes to…" picker (voice-launched recording) ─────────────── */
/* 9994: above the voice overlay (9990), below the REC-8 consent gate (9995)
   and #login-overlay (9999). */
#vai-rec-picker{
  position:fixed;inset:0;z-index:9994;display:none;
  background:rgba(4,7,13,.82);align-items:flex-end;justify-content:center;
}
#vai-rec-picker.open{display:flex;}
#vai-rec-picker .vrp-card{
  width:100%;max-width:560px;box-sizing:border-box;
  background:#121a27;border:1px solid rgba(255,255,255,.10);
  border-radius:16px 16px 0 0;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:10px;max-height:88vh;
}
#vai-rec-picker .vrp-h{font-family:var(--mono);font-size:13px;color:#e8edf5;text-align:center;}
#vai-rec-q{
  width:100%;box-sizing:border-box;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:#0a0f18;color:#e8edf5;
  font-family:var(--mono);
  /* 16px: anything smaller makes iOS Safari zoom the page on focus. */
  font-size:16px;
}
#vai-rec-list{
  flex:1 1 auto;min-height:70px;max-height:52vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:4px;
}
#vai-rec-picker .vrp-row{
  width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:10px;padding:11px 13px;
  display:flex;flex-direction:column;gap:2px;font-family:var(--mono);
}
#vai-rec-picker .vrp-row:active{background:rgba(255,255,255,.10);}
#vai-rec-picker .vrp-l{color:#e8edf5;font-size:14px;}
#vai-rec-picker .vrp-s{color:rgba(255,255,255,.45);font-size:11px;}
#vai-rec-picker .vrp-empty{
  color:rgba(255,255,255,.45);font-family:var(--mono);font-size:12px;
  text-align:center;padding:14px;
}
#vai-rec-cancel{
  background:none;border:none;color:rgba(255,255,255,.5);font-family:var(--mono);
  font-size:12px;text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;padding:6px;
}

/* ── Reduced motion: honor the OS preference everywhere ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}