/* ═══════════════════════════════════════════════════════════════════════════
   NEW DESIGN EXPERIMENT (UX2, 2026-10-14) — owner request, one account only
   ───────────────────────────────────────────────────────────────────────────
   EVERY RULE IN THIS FILE STARTS WITH `html.ux2`. That class is set only by
   js/ux2.js, only when the server-side `ux_redesign` flag is on for the signed-in
   account (FLAG-1) and that browser has not chosen Classic. Without the class this
   file matches nothing, which is how every other user keeps the current UI.
   test/ux2.test.js fails on a selector here that is not scoped.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── palette: plum chrome, purple accent, light workspace ──────────────── */
html.ux2{
  --bg:#f5f3f9;--surface:#ffffff;--surface2:#f8f6fc;--surface3:#efebf6;
  --border:#e4ddef;--border2:#d2c8e3;
  --accent:#7c3aed;--accent-lt:#f1eafe;--accent-dk:#6d28d9;--blue:#6d28d9;
  --text:#1c1330;--text2:#463d5c;--text3:#6f6687;
  --ux2-plum:#22113d;--ux2-plum2:#2f1952;--ux2-plum3:#3d2266;--ux2-lilac:#c4b5fd;
  --ux2-radius:10px;--ux2-ease:cubic-bezier(.2,.8,.2,1);
}

/* ═══ TOP NAVIGATION — plum bar, expanding menus ══════════════════════════
   The menus are the same markup and the same rows. js/ux2.js adds hover intent,
   keyboard support and aria state; this file supplies the look and the motion. */
html.ux2 .topnav-bar{background:var(--ux2-plum);box-shadow:0 1px 0 rgba(255,255,255,.06);}
html.ux2 .tn-logo{background:var(--accent);border-right:0;}
html.ux2 .tn-logo img{background:transparent;padding:4px 2px;filter:brightness(0) invert(1);}
html.ux2 .tn-btn{color:#ddd3ef;}
/* Bigger labels only where they fit: below 1581px the classic nav's own steps
   (tighter padding, icon-only, then the menu button) must stay in charge, or the
   bar overflows and every page scrolls sideways (test/render-sweep.test.js). */
@media (min-width:1581px){ html.ux2 .tn-btn{font-family:var(--sans);font-size:13px;font-weight:500;padding:0 14px;height:48px;} }
html.ux2 .tn-btn:hover,html.ux2 .tn-item.open .tn-btn{color:#fff;background:rgba(255,255,255,.07);}
html.ux2 .tn-item.tn-active .tn-btn{color:#fff;background:transparent;box-shadow:inset 0 -3px 0 var(--ux2-lilac);}
html.ux2 .tn-btn:focus-visible{outline:2px solid var(--ux2-lilac);outline-offset:-3px;}
html.ux2 .tn-arrow{font-size:9px;transition:transform .2s var(--ux2-ease);}
html.ux2 .tn-item.open .tn-arrow{transform:rotate(180deg);}

/* The panel is always laid out; closed = invisible, unclickable, out of the tab
   order. It animates OPEN with a keyframe that ends with no clip at all — a
   lasting clip-path cut off the gear menu's side flyouts (owner report). */
html.ux2 .tn-drop{
  display:block;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .14s ease,visibility 0s linear .14s;transform-origin:top left;
  background:var(--surface);border:0;border-top:2px solid var(--accent);border-radius:0 0 12px 12px;
  box-shadow:0 18px 40px rgba(34,17,61,.22),0 2px 6px rgba(34,17,61,.08);
  padding:8px;min-width:240px;
}
html.ux2 .tn-item.open > .tn-drop{
  visibility:visible;opacity:1;pointer-events:auto;
  transition:opacity .14s ease,visibility 0s;
  animation:ux2DropIn .26s var(--ux2-ease);
}
@keyframes ux2DropIn{
  from{opacity:0;transform:translateY(-6px) scale(.985);clip-path:inset(0 0 100% 0 round 0 0 12px 12px);}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 0 0 12px 12px);}
}
html.ux2 .tn-item.open > .tn-drop.ux2-drop-r{transform-origin:top right;}
html.ux2 .tn-drop-item{font-family:var(--sans);font-size:13px;border-left:0;border-radius:8px;padding:7px 10px;
  display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:0;color:var(--text);}
html.ux2 .tn-drop-item:hover,html.ux2 .tn-drop-item:focus-visible{background:var(--accent-lt);color:var(--accent-dk);outline:0;}
html.ux2 .tn-drop-item.tn-active{background:var(--accent-lt);color:var(--accent-dk);font-weight:600;}
html.ux2 .tn-drop-item .ux2-desc{flex-basis:100%;padding-left:24px;font-size:11px;font-weight:400;color:var(--text3);line-height:1.3;white-space:normal;}
html.ux2 .tn-drop-item:hover .ux2-desc{color:var(--accent-dk);opacity:.8;}
html.ux2 .tn-drop-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:8px 10px 4px;}
html.ux2 .tn-sep{background:var(--surface3);margin:5px 6px;}
html.ux2 .tn-drop-hint{color:var(--text3);font-size:11px;}
/* the banded Quotes/Orders menu becomes a three-column panel, one band each */
html.ux2 #tn-quote > .tn-drop{columns:3 190px;column-gap:6px;width:640px;}
html.ux2 #tn-quote > .tn-drop .tn-drop-label{break-before:column;break-after:avoid;}
html.ux2 #tn-quote > .tn-drop .tn-drop-label:first-child{break-before:auto;}
html.ux2 #tn-quote > .tn-drop .tn-drop-item{break-inside:avoid;}
@media (prefers-reduced-motion:reduce){
  html.ux2 .tn-drop,html.ux2 .tn-item.open > .tn-drop{transition:none;animation:none;}
}

/* ═══ DASHBOARD — overview, queue, activity ═════════════════════════════ */
html.ux2 #ux2-dash{display:grid;gap:12px;margin-bottom:16px;}
html.ux2 #ux2-dash-kpis,html.ux2 #ux2-dash-queue{margin-bottom:16px;}
html.ux2 .ux2-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
html.ux2 .ux2-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--ux2-radius);padding:10px 14px;display:grid;gap:2px;
  text-align:left;font-family:var(--sans);cursor:pointer;}
html.ux2 .ux2-kpi:hover{border-color:var(--accent);}
html.ux2 .ux2-kpi:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
html.ux2 .ux2-kpi span{font-size:12px;color:var(--text2);font-weight:600;}
html.ux2 .ux2-kpi small{font-size:11px;color:var(--text3);}
html.ux2 .ux2-kpi b{font-size:24px;font-weight:700;color:var(--accent-dk);font-variant-numeric:tabular-nums;line-height:1.2;}
html.ux2 .ux2-kpi.bad b{color:var(--red);}
html.ux2 .ux2-dash-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;align-items:start;}
html.ux2 .ux2-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--ux2-radius);padding:12px 14px;min-width:0;}
html.ux2 .ux2-panel h3{font-family:var(--sans);font-size:14px;font-weight:700;margin:0 0 6px;display:flex;justify-content:space-between;align-items:center;}
html.ux2 .ux2-panel h3 button{border:0;background:transparent;color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);}
html.ux2 .ux2-qrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--surface3);font-size:13px;cursor:pointer;width:100%;
  background:transparent;border-left:0;border-right:0;border-top:0;text-align:left;font-family:var(--sans);color:var(--text);}
html.ux2 .ux2-qrow:last-child{border-bottom:0;}
html.ux2 .ux2-qrow:hover b{color:var(--accent-dk);}
html.ux2 .ux2-qrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
html.ux2 .ux2-qrow .ux2-qmain{flex:1;min-width:0;display:grid;}
html.ux2 .ux2-qrow .ux2-qmain b{font-weight:600;overflow-wrap:anywhere;}
html.ux2 .ux2-qrow .ux2-qmain small{color:var(--text3);font-size:11.5px;}
html.ux2 .ux2-qrow .ux2-qamt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
html.ux2 .ux2-tag{font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap;background:var(--accent-lt);color:var(--accent-dk);}
html.ux2 .ux2-tag.bad{background:#fde8ea;color:#a3121f;}
html.ux2 .ux2-tag.warn{background:#fff1dc;color:#8a5000;}
html.ux2 .ux2-tag.ok{background:#e3f4ea;color:#17703d;}
html.ux2 .ux2-empty-msg{color:var(--text3);font-size:12.5px;padding:8px 0;}
html.ux2 .ux2-greet{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;}
html.ux2 .ux2-greet h2{font-family:var(--sans);font-size:20px;font-weight:700;margin:0;}
html.ux2 .ux2-greet p{color:var(--text3);font-size:12.5px;margin:2px 0 0;}
html.ux2 #page-dashboard > .page-title,html.ux2 #page-dashboard h1{font-family:var(--sans);}
@media (max-width:1100px){
  html.ux2 .ux2-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  html.ux2 .ux2-dash-row{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){ html.ux2 .ux2-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* general card polish across pages */
html.ux2 .page{background:var(--bg);}
html.ux2 .btn-primary{background:var(--accent);border-color:var(--accent);}
html.ux2 .btn-primary:hover{background:var(--accent-dk);border-color:var(--accent-dk);}

/* ═══ RECORD WORKSPACES — account, contact, deal ═════════════════════════
   The tab bar goes; every section is drawn at once. Sections with content are
   cards in two flowing columns; empty ones fold into ONE "Nothing yet" strip whose
   chips open that section in place (js/ux2.js, _ux2SyncRecord). */
html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp){
  padding:10px!important;align-items:stretch!important;background:rgba(34,17,61,.55)!important;
}
html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod{
  width:100%;max-width:1680px;height:calc(100vh - 20px);height:calc(100dvh - 20px);max-height:none;
  border-radius:12px;background:var(--bg);
}
html.ux2 .rmod-hdr{background:var(--surface);border-bottom:1px solid var(--border);}
html.ux2 .rmod-name{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;}
html.ux2 .rmod-avatar{border-radius:10px;}
html.ux2 .rmod-facts{background:transparent;border-bottom:0;gap:8px;padding:10px 14px 0;}
html.ux2 .rmod-fact{background:var(--surface);border:1px solid var(--border);border-radius:var(--ux2-radius);padding:8px 12px;}
html.ux2 .rmod-fact:last-child{border-right:1px solid var(--border);}
html.ux2 .rmod-fact-v{font-family:var(--sans);}
html.ux2 .rmod-foot{background:var(--surface);}
html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body{
  grid-template-columns:minmax(300px,1fr) minmax(0,1.85fr) 330px;gap:10px;padding:10px 14px 12px;
}
html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col{
  background:var(--surface);border:1px solid var(--border)!important;border-radius:var(--ux2-radius);
}

/* contact, account AND opportunity windows: details on the left, notes in the middle, related records on
   the right (owner, 2026-10-19). Visual order only — the markup keeps notes first,
   so every first-child rule and the one-column reflow below are unchanged. */
@media (min-width:1101px){
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body{grid-template-columns:330px minmax(300px,2.17fr) minmax(0,1fr);}
  /* the right column is narrow now: its summary cards stack in one column */
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .ux2-cols{grid-template-columns:minmax(0,1fr);}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col{grid-row:1;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col.rail{grid-column:1;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col:first-child{grid-column:2;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col:nth-child(2){grid-column:3;}
}

/* the related-records column: no tabs, and MINIMAL — one short summary card per
   section (js/ux2.js). The section's own pane is hidden here and shown in full in
   a popup when its card is opened. */
html.ux2 .rmod-col.ux2-secs{background:transparent!important;border:0!important;padding:0 2px 0 0;
  display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
/* two independent columns: cards stack with no gaps (js/ux2.js, _ux2Columns) */
html.ux2 .ux2-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;}
html.ux2 .ux2-colL,html.ux2 .ux2-colR{display:flex;flex-direction:column;gap:10px;min-width:0;}
html.ux2 .rmod-col.ux2-secs > .rmod-tabs,
html.ux2 .rmod-col.ux2-secs > .rmod-pane{display:none!important;}
html.ux2 .rmod > .rmod-foot{flex:0 0 auto;}
html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod > .rmod-foot{flex:0 0 auto;overflow:visible;}
html.ux2 .ux2-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--ux2-radius);padding:9px 12px 10px;min-width:0;}
html.ux2 .ux2-chd{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
html.ux2 .ux2-chd b{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--text);}
html.ux2 .ux2-chd i{font-style:normal;font-size:11px;font-weight:600;color:var(--accent-dk);background:var(--accent-lt);border-radius:999px;padding:0 7px;}
html.ux2 .ux2-copen{margin-left:auto;border:1px solid var(--border);background:var(--surface2);border-radius:999px;padding:2px 10px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--accent-dk);cursor:pointer;white-space:nowrap;}
html.ux2 .ux2-copen:hover{border-color:var(--accent);background:var(--accent-lt);}
html.ux2 .ux2-copen:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
html.ux2 .ux2-crow{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--surface3);font-family:var(--sans);}
html.ux2 .ux2-crow:first-child{border-top:0;}
html.ux2 .ux2-cmain{flex:1;min-width:0;display:grid;}
html.ux2 .ux2-cmain b{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.ux2 .ux2-cmain small{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html.ux2 .ux2-camt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
html.ux2 .ux2-cmore{font-family:var(--sans);font-size:11.5px;color:var(--text3);padding-top:3px;}
html.ux2 .ux2-card .ux2-tag{font-family:var(--sans);}
/* move and hide (js/ux2.js, _ux2WireMove) */
html.ux2 .ux2-cdrag{cursor:grab;color:var(--text3);font-size:13px;line-height:1;margin-left:-4px;padding:2px 1px;opacity:.45;user-select:none;}
html.ux2 .ux2-card:hover .ux2-cdrag{opacity:1;}
html.ux2 .ux2-cdrag:active{cursor:grabbing;}
html.ux2 .ux2-cmenu{border:0;background:transparent;color:var(--text3);font-size:15px;line-height:1;padding:2px 6px;border-radius:6px;cursor:pointer;}
html.ux2 .ux2-cmenu:hover{background:var(--surface2);color:var(--text);}
html.ux2 .ux2-cmenu:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
html.ux2 .ux2-card.ux2-dragging{opacity:.45;outline:2px dashed var(--accent);outline-offset:-2px;}
html.ux2 .ux2-cols.ux2-drop .ux2-colL,html.ux2 .ux2-cols.ux2-drop .ux2-colR{min-height:60px;border-radius:var(--ux2-radius);outline:1px dashed var(--border2);outline-offset:3px;}
html.ux2 .ux2-hiddenbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 2px 8px;}
html.ux2 .ux2-hiddenbar > span{font-size:11.5px;color:var(--text3);margin-right:2px;}
html.ux2 .ux2-hiddenbar button{border:1px solid var(--border);background:var(--surface2);border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--text2);cursor:pointer;font-family:var(--sans);}
html.ux2 .ux2-hiddenbar button:hover{border-color:var(--accent);color:var(--accent);}
html.ux2 .ux2-hiddenbar .ux2-hreset{border:0;background:transparent;color:var(--accent-dk);text-decoration:underline;margin-left:auto;}

/* the popup: the section's own pane over the record */
html.ux2 .ux2-pop{position:absolute;inset:0;z-index:50;background:rgba(34,17,61,.42);display:flex;align-items:flex-start;justify-content:center;
  padding:56px 24px 24px;animation:ux2Fade .16s ease;}
html.ux2 .ux2-pop-box{background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(34,17,61,.35);width:min(760px,100%);max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;animation:ux2Rise .22s var(--ux2-ease);}
html.ux2 .ux2-pop-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);}
html.ux2 .ux2-pop-hd b{font-family:var(--sans);font-size:15px;font-weight:700;}
html.ux2 .ux2-pop-x{margin-left:auto;border:0;background:var(--accent);color:#fff;border-radius:8px;padding:6px 14px;font-family:var(--sans);font-weight:600;font-size:12.5px;cursor:pointer;}
html.ux2 .ux2-pop-x:focus-visible{outline:2px solid var(--accent-dk);outline-offset:2px;}
html.ux2 .ux2-pop-body{padding:14px 16px;overflow-y:auto;}
html.ux2 .ux2-pop-body > .rmod-pane{display:block!important;}
html.ux2 .ux2-pop-wide .ux2-pop-box{width:min(1000px,100%);}
html.ux2 .ux2-pop-body > #pm-method{display:block!important;margin:0;}
@keyframes ux2Fade{from{opacity:0}to{opacity:1}}
@keyframes ux2Rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ html.ux2 .ux2-pop,html.ux2 .ux2-pop-box{animation:none;} }
html.ux2 .ux2-nothing{display:flex;align-self:stretch;flex-wrap:wrap;align-items:center;gap:6px;
  background:var(--surface);border:1px dashed var(--border2);border-radius:var(--ux2-radius);padding:8px 11px;margin-bottom:10px;}
html.ux2 .ux2-nothing > span{font-size:11.5px;color:var(--text3);margin-right:4px;}
html.ux2 .ux2-nothing button{border:1px solid var(--border);background:var(--surface2);border-radius:999px;padding:3px 10px;
  font-size:11.5px;color:var(--text2);cursor:pointer;font-family:var(--sans);}
html.ux2 .ux2-nothing button:hover{border-color:var(--accent);color:var(--accent);}
html.ux2 .ux2-nothing button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

/* the task window: a wider workspace card, same fields */
html.ux2 #task-modal > div{border-radius:12px;}
html.ux2 #task-modal #task-modal-title{font-family:var(--sans);font-weight:700;}

/* below laptop width: one column, one page, sections in reading order */
@media (max-width:1100px){
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod{display:block;height:auto;min-height:calc(100vh - 20px);overflow:visible;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod > *{min-height:0;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body{height:auto;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body{grid-template-columns:minmax(0,1fr);}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col{grid-column:auto;grid-row:auto;overflow:visible;}
  html.ux2 .rmod-col.ux2-secs{overflow:visible;}
  html.ux2 .ux2-cols{grid-template-columns:minmax(0,1fr);}
  html.ux2 .ux2-pop{position:fixed;padding:12px;}
}
@media (max-width:768px){
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp){padding:0!important;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod{border-radius:0;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body{padding:8px;}
}

/* the greeting in the overview replaces the old "Dashboard" heading (Arrange and Print stay) */
/* keyed on the print header, which stays put: the sections below it (dash-pcrm
   among them) became movable (DASH-1), and a rule keyed on them stopped matching */
html.ux2 #page-dashboard > #dash-print-header + .no-print{margin-bottom:6px!important;justify-content:flex-end!important;}
html.ux2 #page-dashboard > #dash-print-header + .no-print > div:first-child{display:none;}

/* right-hand strip: JOAN as the one purple pill; Help and Scratchpad quiet.
   The red voice button stays red on purpose — it is the Big Red Button. */
html.ux2 #tn-ai-btn{background:var(--accent)!important;border-radius:999px!important;}
html.ux2 #tn-ai-btn:hover{background:#8b5cf6!important;}
html.ux2 #tn-help-btn,html.ux2 #tn-scratch-btn{background:rgba(255,255,255,.08)!important;border-radius:999px!important;color:#e9e2f7!important;}
html.ux2 #tn-help-btn:hover,html.ux2 #tn-scratch-btn:hover{background:rgba(255,255,255,.16)!important;}
html.ux2 .topnav-bar > div[style*="border-left"]{border-left-color:rgba(255,255,255,.07)!important;}
@media (min-width:1581px){
  html.ux2 #tn-ai-btn{font-family:var(--sans);font-size:12.5px!important;}
  html.ux2 #tn-help-btn,html.ux2 #tn-scratch-btn{font-family:var(--sans);font-size:12px!important;}
  html.ux2 #user-chip,html.ux2 #user-bar{font-family:var(--sans)!important;font-size:11px!important;}
}
html.ux2 #tn-quote .tn-drop-item{flex-wrap:wrap;}
html.ux2 #tn-quote .tn-drop-hint{flex-basis:100%;padding-left:18px;margin-left:0;font-size:11px;}



/* clickable rows: a contact, task, deal or listing opens on top of this record */
html.ux2 .ux2-click{width:100%;background:transparent;border-left:0;border-right:0;border-bottom:0;text-align:left;cursor:pointer;color:inherit;
  border-radius:6px;margin:0 -6px;padding-left:6px;padding-right:6px;width:calc(100% + 12px);}
html.ux2 .ux2-crow.ux2-click:first-child{border-top-color:transparent;}
html.ux2 .ux2-click:hover{background:var(--accent-lt);}
html.ux2 .ux2-click:hover .ux2-cmain b{color:var(--accent-dk);text-decoration:underline;text-underline-offset:2px;}
html.ux2 .ux2-click:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
html.ux2 .ux2-plist{border:1px solid var(--border);border-radius:var(--ux2-radius);padding:4px 12px;margin-bottom:12px;max-height:50vh;overflow-y:auto;}
html.ux2 .ux2-pop .ux2-hide-in-pop{display:none!important;}

/* sections moved from the notes column into middle cards: hidden in place, shown in their popup */
html.ux2 .ux2-moved{display:none!important;}
html.ux2 .ux2-pop .ux2-moved{display:block!important;}

/* the notes take the room the moved sections left, so the left column does not scroll */
@media (min-width:1101px){
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col:first-child{display:flex;flex-direction:column;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-body > .rmod-col:first-child > .rmod-sec:has(.notes-editable){
    flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}
  html.ux2 :is(#prospect-modal,#add-person-modal,#ct-modal-cust,#ct-modal-res,#ct-modal-dist,#ct-modal-sp) .rmod-sec:has(.notes-editable) .notes-editable{
    flex:1 1 auto;height:auto!important;max-height:none!important;min-height:140px!important;}
}