: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;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;}

@media (max-width:768px){

  /* ── 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;}
  /* 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;}

  /* ── 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;}

  /* ── 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 ── */
  .sq-head,.sq-row{grid-template-columns:80px 1fr 70px 80px!important;gap:6px;}

  /* ── 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;border-radius:0!important;overflow-y:auto;}

  /* Prospect modal */
  #prospect-modal>div{width:100%!important;max-width:100%!important;height:100%!important;border-radius:0!important;}

  /* 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;border-radius:0!important;
  }
  [id^="ct-modal-"]>div{width:100%!important;max-width:100%!important;height:100%!important;border-radius:0!important;}
  #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 ── */
  .btn{min-height:40px;padding:8px 14px;}
  .btn-sm{min-height:34px;padding:6px 10px;}
  .btn-xs{min-height:30px;}

  /* ── TRACKER TASKS TABLE — horizontal scroll ── */
  #page-tracker-tasks .card,#tracker-tasks-wrap{overflow-x:auto;}

  /* ── PROSPECTING TABLE ── */
  #prospect-accounts-body{overflow-x:auto;}
  #prospect-accounts-body>div{min-width:720px;}

  /* ── 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;}