/* ═══════════════════════════════════════════════════════════════════════════
   NEW DESIGN, EVERY PAGE (UX3, 2026-10-18) — owner request, sandbox account
   ───────────────────────────────────────────────────────────────────────────
   The record windows were redesigned in UX2 (ux2.css): sans-serif type, white
   rounded cards on the lilac workspace, pill buttons, quiet row separators,
   figure tiles. This file carries that look to every other page, popup and
   settings card — the same markup, restyled. Nothing is moved or rebuilt.

   EVERY RULE STARTS WITH `html.ux3`. js/ux2.js sets that class only on top of
   `ux2`, and only for an account the server-side `ux_redesign_all` flag is on for
   (FLAG-1). Without it this file matches nothing. test/ux3.test.js fails on a
   selector here that is not scoped.

   THE ONE BROAD MOVE: `--mono` is pointed at the sans family. Most renderers set
   their type inline as `font-family:var(--mono)` (hundreds of sites), so this is
   what reaches them without touching a renderer. Code, keys and kbd keep a
   real monospace below.
   ═══════════════════════════════════════════════════════════════════════════ */

html.ux3{--mono:var(--sans);--serif:var(--sans);--ux3-code:'DM Mono',ui-monospace,monospace;}
html.ux3 :is(code,pre,kbd,samp,.ux3-code){font-family:var(--ux3-code);}
html.ux3 body{font-feature-settings:"tnum" 1;}

/* ── the page heading: the title strip reads like a record's name ───────── */
html.ux3 .content > div:first-child:has(#ttl){background:transparent!important;border-bottom:0!important;padding:16px 22px 0!important;}
html.ux3 #ttl,html.ux3 #ttl strong{font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--text)!important;}
html.ux3 .page{padding:14px 22px 22px;}

/* ── cards: white, rounded, no grey band, a bold sentence-case title ─────── */
html.ux3 .card,html.ux3 .us-card{
  border:1px solid var(--border);border-radius:var(--ux2-radius);box-shadow:none;background:var(--surface);}
html.ux3 .card-header{background:var(--surface);border-bottom:1px solid var(--surface3);padding:11px 16px;}
html.ux3 .card-title{font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text);gap:8px;}
html.ux3 :is(.card-title,.us-hdr) .dot{display:none;}
html.ux3 .card-body{padding:14px 16px;}

/* settings cards: the same card, the header reads like a card title */
html.ux3 .us-hdr{background:var(--surface);padding:12px 16px;}
html.ux3 .us-hdr-left > span[style*="uppercase"]{font-size:14px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important;}
html.ux3 .us-hdr:hover{background:var(--surface2);}
html.ux3 .us-body{border-top:1px solid var(--surface3);}
html.ux3 .us-group-hdr{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--text3);}

/* figure tiles (the record window's facts row) */
html.ux3 .sc{border-radius:var(--ux2-radius);box-shadow:none;padding:10px 14px;}
html.ux3 .sc::after{display:none;}
html.ux3 .sc-lbl{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text2);margin-bottom:3px;}
html.ux3 .sc-val{font-family:var(--sans);font-size:24px;font-weight:700;color:var(--accent-dk);font-variant-numeric:tabular-nums;}
html.ux3 .sc-val.r{color:var(--orange);}html.ux3 .sc-val.c{color:var(--green);}html.ux3 .sc-val.k{color:var(--warn);}
html.ux3 .sc-sub{font-size:11px;color:var(--text3);}

/* ── buttons: primary is solid purple, every secondary button is a pill ──── */
html.ux3 .btn{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0;border-radius:8px;padding:7px 14px;}
html.ux3 .btn-sm{font-size:12px;padding:5px 12px;}
html.ux3 .btn-xs{font-size:11.5px;padding:3px 10px;}
html.ux3 :is(.btn-ghost,.btn-undo){border-radius:999px;border-color:var(--border);background:var(--surface2);color:var(--accent-dk);}
html.ux3 :is(.btn-ghost,.btn-undo):hover:not(:disabled){border-color:var(--accent);background:var(--accent-lt);color:var(--accent-dk);}
html.ux3 .btn-danger{border-radius:999px;}
html.ux3 .btn-primary{border-radius:8px;}
/* the top bar keeps its own light-on-plum buttons (Sign Out) */
html.ux3 .topnav-bar :is(.btn-ghost,.btn-ghost:hover){background:transparent;color:rgba(255,255,255,.85)!important;border-color:rgba(255,255,255,.25)!important;}
html.ux3 .topnav-bar .btn-ghost:hover{background:rgba(255,255,255,.1);}
html.ux3 .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ── fields: the record window's inputs ──────────────────────────────────── */
html.ux3 .field label,html.ux3 .cl{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text2);}
html.ux3 :is(.fi,.page select,.page input[type="text"],.page input[type="search"],.page input[type="email"],.page input[type="number"],.page input[type="date"],.page textarea){
  border-radius:8px;border-color:var(--border2);font-family:var(--sans);font-size:13px;}
html.ux3 .fi{padding:7px 11px;}
html.ux3 :is(.fi,.page select,.page input,.page textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-lt);outline:0;}
html.ux3 .ct-head,html.ux3 .pt-head{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--text3);}

/* ── text set for a wide monospace face, sized up so it reads in sans ─────
   Renderers size their own type inline, picked for DM Mono, which runs wide.
   The same pixel size in a proportional face reads a size smaller, so the tiny
   steps are lifted. Layout widths are not touched. */
html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:7px"],html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:7.5px"]{font-size:9.5px!important;}
html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:8px"],html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:8.5px"]{font-size:10.5px!important;}
html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:9px"],html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:9.5px"]{font-size:11px!important;}
html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:10px"],html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:10.5px"]{font-size:12px!important;}
html.ux3 :is(.page,.rmod,.us-card) [style*="font-size:11px"]{font-size:12.5px!important;}
html.ux3 :is(.page,.rmod,.us-card) [style*="letter-spacing:1"]{letter-spacing:.04em!important;}

/* ── links in lists: the record window's quiet links, underlined on hover ── */
html.ux3 :is(.page,.rmod) [style*="text-decoration:underline"]{text-decoration:none!important;}
html.ux3 :is(.page,.rmod) [style*="text-decoration:underline"]:hover{text-decoration:underline!important;text-underline-offset:2px;}
html.ux3 .page a{text-underline-offset:2px;}

/* ── list pages ───────────────────────────────────────────────────────────── */
/* account / contact cards (Customers, Search) */
html.ux3 .cardname{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.005em;}
/* saved quotes / invoices rows */
html.ux3 .sq-head{font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text3);background:transparent;}
html.ux3 .sq-row{border-bottom:1px solid var(--surface3);}
html.ux3 .sq-row:hover{background:#faf7ff;}
html.ux3 .sq-num{font-family:var(--sans);font-weight:700;}
/* product catalog */
html.ux3 .prod-card{border-radius:var(--ux2-radius);border-color:var(--border);box-shadow:none;}
/* calendar */
html.ux3 .cal-month-grid{border-radius:var(--ux2-radius);overflow:hidden;border-color:var(--border);}
html.ux3 .cal-day-num{font-family:var(--sans);font-weight:600;}
html.ux3 .cal-event-chip{border-radius:6px;font-family:var(--sans);}
/* hover rows used across the list renderers */
html.ux3 .hover-bg:hover{background:#faf7ff!important;}

/* ── dashboard sections: the same cards, sentence-case titles ────────────── */
html.ux3 .dash-sub-grid > *{border-radius:var(--ux2-radius);}

/* ── popups that are not record windows ───────────────────────────────────
   A known list rather than every id ending "-modal": some of those are not
   overlays at all. The box takes the record window's corners and backdrop. */
html.ux3 :is(#task-modal,#cal-event-modal,#session-modal,#notes-ai-modal,#ai-tasks-modal,#fue-modal,#help-ai-modal,#meddpicc-modal,#global-ai-modal,#notes-expand-modal,#sim-modal,#wizard-modal){
  background:rgba(34,17,61,.55)!important;}
html.ux3 :is(#task-modal,#cal-event-modal,#session-modal,#notes-ai-modal,#ai-tasks-modal,#fue-modal,#help-ai-modal,#meddpicc-modal,#global-ai-modal,#notes-expand-modal,#sim-modal,#wizard-modal) > div:first-child{
  border-radius:14px!important;border:1px solid var(--border)!important;box-shadow:0 24px 60px rgba(34,17,61,.35)!important;}

/* ── chips and pills that renderers draw for status ───────────────────────── */
html.ux3 .cpq-chip{border-radius:999px;font-family:var(--sans);font-weight:700;}

/* ── the shared dropdown (DROP-1) keeps its native look, in the new type ─── */
html.ux3 .sd-menu{border-radius:10px;border-color:var(--border);box-shadow:0 12px 30px rgba(34,17,61,.18);}
html.ux3 .sd-opt{font-family:var(--sans);font-size:13px;}

/* ── phones: header actions wrap onto their own line instead of running off ── */
@media (max-width:600px){
  html.ux3 :is(.card-header,.page div:has(> .card-title)){flex-wrap:wrap;gap:8px;}
  html.ux3 :is(.card-header,.page div:has(> .card-title)) > div:has(> .btn){flex-wrap:wrap;gap:6px;}
  html.ux3 :is(.card-header,.page div:has(> .card-title)) .btn{white-space:nowrap;}
  html.ux3 .card-header .btn br{display:none;}
  html.ux3 .btn{padding:6px 11px;}
  html.ux3 .page{padding:12px 12px 18px;}
  html.ux3 .content > div:first-child:has(#ttl){padding:12px 12px 0!important;}
}
html.ux3 .topnav-bar .btn{white-space:nowrap;}

/* ═══ TASK LISTS (All Tasks, Today, Overdue, by person) ═══════════════════
   One renderer, renderTaskTable (js/tasks-crud.js), tags its parts tt-*. The
   classic look is its inline styles, so most rules here need !important.
   Overdue is said by the date (red, "12d late") and a slim marker, not by
   tinting the whole row; priority is a small dot instead of an emoji. */
html.ux3 .tt-head{font-family:var(--sans)!important;font-size:12px!important;font-weight:600;text-transform:none!important;letter-spacing:0!important;
  border-bottom:1px solid var(--border)!important;padding:8px 10px!important;color:var(--text3);}
html.ux3 .tt-head .tt-hcell.on{color:var(--accent-dk)!important;}
html.ux3 .tt-row{background:var(--surface)!important;box-shadow:none!important;border-bottom:1px solid var(--surface3)!important;
  padding:11px 10px!important;font-family:var(--sans)!important;font-size:13px!important;align-items:center!important;position:relative;transition:background .12s;}
html.ux3 .tt-row:hover{background:#faf7ff!important;}
html.ux3 .tt-row[data-late]::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:#f59e0b;}
html.ux3 .tt-row[data-late="week"]::before{background:var(--red);}
/* priority: a small dot, colour by level; the emoji stays for screen readers' title */
html.ux3 .tt-pri{font-size:0!important;padding:0!important;display:flex;align-items:center;justify-content:center;}
html.ux3 .tt-pri::before{content:'';width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #e3f4ea;}
html.ux3 .tt-pri[data-pri="high"]::before{background:#e11d48;box-shadow:0 0 0 3px #fde4ea;}
html.ux3 .tt-pri[data-pri="med"]::before{background:#f59e0b;box-shadow:0 0 0 3px #fff1dc;}
html.ux3 .tt-title{color:var(--text)!important;font-weight:600;text-decoration:none!important;font-size:13px;line-height:1.35;}
html.ux3 .tt-title:hover{color:var(--accent-dk)!important;text-decoration:underline!important;text-underline-offset:2px;}
html.ux3 .tt-acct{color:var(--text2)!important;font-size:12.5px!important;}
html.ux3 .tt-row [onclick] > .tt-opp,html.ux3 .tt-opp{color:var(--accent-dk)!important;text-decoration:none!important;font-size:12.5px;}
html.ux3 .tt-row div:has(> .tt-opp){font-size:12.5px!important;}
html.ux3 .tt-opp:hover{text-decoration:underline!important;text-underline-offset:2px;}
html.ux3 .tt-contact{background:var(--accent-lt)!important;border:0!important;color:var(--accent-dk)!important;text-decoration:none!important;
  border-radius:999px!important;padding:2px 9px!important;font-size:11.5px!important;font-weight:600;}
html.ux3 .tt-contact:hover{background:#e6dafd!important;}
html.ux3 .tt-status{font-family:var(--sans)!important;font-size:12px!important;font-weight:600;border:1px solid var(--border)!important;
  border-radius:999px!important;padding:4px 8px!important;background:var(--surface2)!important;}
html.ux3 .tt-due{font-size:12.5px!important;font-variant-numeric:tabular-nums;white-space:nowrap;}
html.ux3 .tt-due[data-late]{color:var(--red)!important;}
html.ux3 .tt-due[data-late]::after{content:attr(data-late);display:block;font-size:11px;font-weight:600;color:#a3121f;}
html.ux3 .tt-asg{font-size:12.5px!important;color:var(--text2)!important;}
/* delete: quiet until the row is pointed at */
html.ux3 .tt-del{background:transparent!important;border:1px solid transparent!important;color:var(--text3)!important;
  border-radius:8px!important;font-size:13px!important;padding:4px 8px!important;opacity:.55;}
html.ux3 .tt-row:hover .tt-del,html.ux3 .tt-del:focus-visible{opacity:1;}
html.ux3 .tt-del:hover{background:#fde8ea!important;color:var(--red)!important;border-color:#f7c8cf!important;}
/* phone card */
html.ux3 .tt-card{padding:12px 14px!important;}

/* ═══ OPPORTUNITIES LIST (renderProspectAccounts, js/prospecting.js) ══════
   Tagged pm-*; the classic look is the inline styles. The totals become the
   record window's figure tiles; rows go white with quiet links and pills. */
html.ux3 .pm-totals{background:transparent!important;border:0!important;padding:0!important;gap:10px!important;margin-bottom:14px!important;font-family:var(--sans)!important;}
html.ux3 .pm-tot-count{font-size:12.5px!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;color:var(--text2)!important;align-self:center;margin-right:4px;}
html.ux3 .pm-tot{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:var(--ux2-radius);
  padding:8px 14px;min-width:150px;font-size:12px!important;font-weight:600;color:var(--text2)!important;}
html.ux3 .pm-tot strong{font-size:20px!important;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;}
html.ux3 .pm-totals > span:not(.pm-tot):not(.pm-tot-count):not(:last-child){font-size:12px!important;align-self:center;}
html.ux3 .pm-view{font-family:var(--sans)!important;font-size:12px!important;font-weight:600!important;border-radius:999px!important;padding:5px 13px!important;
  background:var(--surface2)!important;border-color:var(--border)!important;color:var(--accent-dk)!important;}
html.ux3 .pm-view.on{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;}

html.ux3 .pm-head{background:transparent!important;border-bottom:1px solid var(--border)!important;font-family:var(--sans)!important;font-size:12px!important;
  font-weight:600;text-transform:none!important;letter-spacing:0!important;color:var(--text3)!important;padding:8px 10px!important;}
html.ux3 .pm-rowwrap{border-bottom:1px solid var(--surface3)!important;}
html.ux3 .pm-row{padding:11px 10px!important;transition:background .12s;}
html.ux3 .pm-row:hover{background:#faf7ff!important;}
html.ux3 .pm-row .pm-task-tog{font-family:var(--sans)!important;border-radius:999px!important;padding:0 6px!important;}
html.ux3 .pm-opp{font-family:var(--sans)!important;font-size:13.5px!important;font-weight:700!important;color:var(--text)!important;}
html.ux3 .pm-opp:hover{color:var(--accent-dk)!important;text-decoration:underline;text-underline-offset:2px;}
html.ux3 .pm-link{font-size:11.5px!important;color:var(--accent-dk)!important;}
html.ux3 .pm-acct{font-family:var(--sans)!important;font-size:12.5px!important;font-weight:600!important;color:var(--accent-dk)!important;}
html.ux3 .pm-acct span{text-decoration:none!important;}
html.ux3 .pm-acct:hover span{text-decoration:underline!important;text-underline-offset:2px;}
html.ux3 .pm-sub{font-size:11.5px!important;color:var(--text3)!important;}
html.ux3 .pm-contacts{font-size:12.5px!important;color:var(--text2)!important;}
html.ux3 .pm-fc{font-size:16px!important;font-variant-numeric:tabular-nums;}
html.ux3 .pm-tier{border-radius:999px!important;padding:1px 8px!important;font-size:10.5px!important;}
html.ux3 .pm-status{border-radius:999px!important;padding:3px 10px!important;font-size:11.5px!important;font-weight:700!important;}
html.ux3 :is(.pm-val,.pm-amt,.pm-date){font-family:var(--sans)!important;font-size:13px!important;font-variant-numeric:tabular-nums;white-space:nowrap;}
html.ux3 .pm-val{color:var(--text)!important;font-weight:600;}
html.ux3 .pm-amt{font-weight:700!important;}
html.ux3 .pm-date{color:var(--text2)!important;}
html.ux3 .pm-del{background:transparent!important;border:1px solid transparent!important;color:var(--text3)!important;border-radius:8px!important;opacity:.55;padding:4px 8px!important;}
html.ux3 .pm-row:hover .pm-del,html.ux3 .pm-del:focus-visible{opacity:1;}
html.ux3 .pm-del:hover{background:#fde8ea!important;color:var(--red)!important;border-color:#f7c8cf!important;}
/* the open-tasks drawer under a row */
html.ux3 .pm-subhd{background:var(--surface2)!important;border-color:var(--surface3)!important;}
html.ux3 .pm-subhd > span{font-size:11.5px!important;letter-spacing:0!important;text-transform:none!important;}
html.ux3 .pm-subrow{font-family:var(--sans)!important;font-size:12.5px!important;border-bottom-color:var(--surface3)!important;}
/* names get two lines rather than one cut short (the larger type needs it) */
html.ux3 .pm-opp,html.ux3 .pm-acct > span{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;}
html.ux3 .pm-acct{align-items:flex-start!important;}
html.ux3 .pm-contacts{white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
@media (max-width:600px){
  html.ux3 .pm-tot{min-width:0;flex:1 1 40%;padding:7px 11px;}
  html.ux3 .pm-tot strong{font-size:17px!important;}
  html.ux3 .pm-tot-count{flex-basis:100%;}
}
/* RPT-2: JOAN expanded to the whole screen keeps square corners. */
html.ux3 #global-ai-modal.gai-max > div:first-child{border-radius:0!important;}