/* ===== AdvisersOS platform: the CRM in AdvisersOS's design =====
   14 Oct 2026, "AdvisersOS look, same flows"; restyled 28 Oct 2026 (Ethan: "Especially for CRM … the overall layout and look
   and feel is really far from ideal … The design language should match with the rest of the modules within Invest or
   Advisory … so polished … just like any Apple product"). The look of the AdvisersOS Today home (platform/assets/home.html):
   the page grey, white cards with hairlines, Montserrat titles, Inter text, rows with a dot / name / what / action, iOS
   segmented controls, one primary button per window at the bottom right, light and dark (aos-theme). The CRM keeps its own
   accent, amber (Invest is blue, Advisory green). Every screen, tab and flow of the CRM is unchanged: this file restyles,
   platform/assets/crm-shell.js adds the header pieces, the ✕ on windows and /crm/#today.
   Phone first (390 px); an iPad upright (820 px) and across (1180 px) get the side rail; from 900 px a record docks beside
   its list. Added to the CRM's page by platform/build.mjs; the CRM's own site is untouched. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/platform/fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/platform/fonts/montserrat-latin-wght-normal.woff2) format("woff2")}

/* ---------- 1. palette: the CRM's own variable names, re-pointed to AdvisersOS's ---------- */
:root{
  --cream:#F6F8FA;--card:#FFFFFF;--card2:#FFFFFF;--tint:#F1F5F9;--tint2:#EAF2F8;--field:#FFFFFF;
  --navy:#163E5C;--navy-deep:#0F2F47;--navy-mid:#1F5F8B;
  --gold:#D9822B;--gold-dark:#A95E17;--gold-t:#FBF1E6;--review:#2E78AD;
  --ink:#1D2B36;--muted:#5B6B78;--line:#DDE6EE;--lineblue:#C9D5DF;
  --ok:#1E8F59;--danger:#C0392B;--amber:#B8691A;
  --shadow:0 1px 3px rgba(22,62,92,.10);
  --r:14px;
  --serif:"Montserrat","Inter",system-ui,-apple-system,"PingFang SC",sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI","PingFang SC",sans-serif;
  --aos-accent:#D9822B;--aos-ink:#163E5C;--aos-green:#2BB673;
  --crm-pri:#B8641A;--crm-pri-h:#9E5414;--on-pri:#FFFFFF;--crm-ring:#1F5F8B;--seg:rgba(127,140,160,.14);--seg-on:#FFFFFF;
  color-scheme:light
}
:root[data-theme="dark"]{
  --cream:#0D151D;--card:#15202B;--card2:#15202B;--tint:#1A2530;--tint2:#1A2C3D;--field:#101A24;
  --navy:#24557D;--navy-deep:#0F2F47;--navy-mid:#7DB7E2;
  --gold:#E8A04E;--gold-dark:#F0B36A;--gold-t:#33261A;--review:#7DB7E2;
  --ink:#D8E2EA;--muted:#9AAAB8;--line:#263646;--lineblue:#34495C;
  --ok:#5ADB9F;--danger:#EF7C6E;--amber:#E8A04E;
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --aos-accent:#E8A04E;--aos-ink:#EAF2F8;--aos-green:#34C785;
  --crm-pri:#E8A04E;--crm-pri-h:#F0B36A;--on-pri:#1B1206;--crm-ring:#5AA2D8;--seg:rgba(127,140,160,.18);--seg-on:#26384A;
  color-scheme:dark
}
html{-webkit-text-size-adjust:100%}
body{background:var(--cream)!important;color:var(--ink);font:400 15px/1.45 var(--sans)!important}
h1,h2,h3,.hero-name{font-family:var(--serif)!important;font-weight:700!important;color:var(--aos-ink);letter-spacing:0}
h4{font-family:var(--sans)}
.eyebrow{font:600 12px/1.25 var(--sans)!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--muted)!important}
input,select,textarea,button{font-family:var(--sans)!important}
:focus-visible{outline:2.5px solid var(--gold)!important;outline-offset:2px}
a{color:var(--navy-mid)}
/* in dark, a figure the CRM writes in navy reads as ink, not as navy on navy */
:root[data-theme="dark"] [style*="color:var(--navy)"]{color:var(--aos-ink)!important}
:root[data-theme="dark"] [style*="background:#fff"],:root[data-theme="dark"] [style*="background: #fff"],:root[data-theme="dark"] [style*="background:#FFF"]{background:var(--card)!important}

/* ---------- 2. the header: AdvisersOS's white bar; the second row only when it says where you are ---------- */
header.top{background:var(--card)!important;border-bottom:1px solid var(--line)!important;box-shadow:none;z-index:35}
.top-in{padding:10px 20px!important;padding-left:max(20px,env(safe-area-inset-left))!important;padding-right:max(20px,env(safe-area-inset-right))!important;max-width:none!important;box-sizing:border-box}
.top-row{gap:12px!important;align-items:center!important;min-height:40px}
.brand{display:flex;align-items:center;gap:10px}
.crm-logo{flex:none;width:38px;height:38px;border-radius:11px;overflow:hidden;display:block}
.crm-logo img{width:100%;height:100%;display:block}
.brand .mark{color:var(--aos-ink)!important;font:700 19px var(--serif)!important;white-space:nowrap}
.brand .mark b{color:var(--aos-green)!important}
.brand .sub{display:none}
/* the brand and the switcher: platform/assets/switcher.css, the same in every product */
.hdrbtn{min-height:44px;border-radius:12px!important;border:1px solid var(--lineblue)!important;background:var(--card)!important;color:var(--aos-ink)!important;font:600 14px var(--sans)!important;padding:0 14px!important;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hdrbtn:hover{background:var(--tint)!important}
.crm-theme{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--aos-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.crm-theme .i-sun{display:none}:root[data-theme="dark"] .crm-theme .i-sun{display:block}:root[data-theme="dark"] .crm-theme .i-moon{display:none}
/* the second row: "‹ All advisers  Wei Lin", or the All advisers page's own buttons */
.hero-extra{margin:8px 0 0!important;padding-top:8px;border-top:1px solid var(--line);gap:8px 10px!important;min-height:0!important}
.hero-extra:empty{display:none!important}
.hero-extra .line{color:var(--muted)!important}
.backlink{display:inline-flex!important;align-items:center;gap:2px;min-height:44px;padding:0 14px 0 10px!important;border-radius:999px!important;background:var(--tint)!important;color:var(--navy-mid)!important;font:600 14.5px var(--sans)!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap}
.backlink:hover{background:var(--tint2)!important}
.hero-name{font-size:19px!important;color:var(--aos-ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:699px){
  .top-in{padding:8px 12px!important}
  .top-row{gap:8px!important;flex-wrap:wrap}
  .brand .mark{font-size:17px!important}
  .crm-logo{width:32px;height:32px;border-radius:9px}
  .hero-extra .hdrbtn{flex:1 1 auto;padding:0 10px!important}
}

/* ---------- 3. the page ---------- */
main{max-width:1180px!important;padding:20px 24px 48px!important;box-sizing:border-box}
@media (max-width:699px){main{padding:16px 16px 40px!important}.pad{padding:16px}body.navpad main{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}}
#content{min-width:0}
.pad{padding:18px 20px}

/* ---------- 4. cards, one look ---------- */
.card,.today-card,.stat,.advcard,.empty,.daycard,.today-rings,.hist-summary,.cc-kpi,.nb-count,.momc,.mxh,.pcardx,.pickpanel,.csv-sec,.matrixwrap,.readbox,.cover-login{
  background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--shadow)!important}
.today-card{padding:14px 18px!important;margin-bottom:16px!important}
.today-card .tc-h,.chart-h h3,.card h2,.card h3,.board h2{font:700 16px/1.3 var(--serif)!important;color:var(--aos-ink)!important;margin:0 0 6px}
.card h2[style*="font-size:20px"],.card h2[style*="font-size:18px"]{font-size:18px!important}
.tc-h .tc-hs{float:right;color:var(--muted);font:400 12.5px var(--sans);margin-top:2px}
.tc-h .tc-n{display:inline-block;min-width:22px;text-align:center;background:var(--gold-t);color:var(--gold-dark);border-radius:99px;font:700 12px/1 var(--sans);padding:4px 7px;margin-left:6px;vertical-align:2px}
.empty{padding:36px 22px!important;color:var(--muted)}
.empty h2{font-size:18px!important;color:var(--aos-ink)!important}

/* rows in a card (Today's lists): a dot for how urgent, the name, what it is, the action (home.html's .row) */
.tc-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 0!important;margin:0;border:0;border-top:1px solid var(--line)!important;background:none;text-align:left;font:inherit;cursor:pointer;color:var(--ink)}
.tc-row:hover{background:linear-gradient(90deg,transparent,var(--tint) 12%,var(--tint) 88%,transparent)}
.tc-row .tc-dot{width:10px;height:10px;border-radius:99px;flex:none;background:var(--crm-ring)}
.tc-dot.red{background:var(--danger)}.tc-dot.amber{background:var(--gold)}.tc-dot.green{background:var(--ok)}.tc-dot.blue{background:var(--crm-ring)}.tc-dot.grey{background:var(--lineblue)}
.tc-row .tc-tx{flex:1;min-width:0}
.tc-row .tc-tx b{display:block;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-row .tc-tx small{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-row .tc-act{flex:none;color:var(--gold-dark)!important;font:600 13px var(--sans)!important}
.tc-row .tc-sub{color:var(--muted);font-size:13px}
.tc-empty{color:var(--muted);font-size:14px;padding:10px 0 4px;border-top:1px solid var(--line)}
.tc-more{width:100%;min-height:44px;border:0;border-top:1px solid var(--line);background:none;color:var(--gold-dark);font:600 14px var(--sans);cursor:pointer}

/* ---------- 5. buttons ---------- */
.save{background:var(--crm-pri)!important;color:var(--on-pri)!important;border:0!important;border-radius:12px!important;font:600 15px var(--sans)!important;min-height:44px;padding:0 20px!important;box-shadow:none;white-space:nowrap}
.save:hover{background:var(--crm-pri-h)!important}
.ghost{background:var(--card)!important;border:1px solid var(--lineblue)!important;color:var(--aos-ink)!important;border-radius:12px!important;font:600 15px var(--sans)!important;min-height:44px;padding:0 18px!important;white-space:nowrap}
.ghost:hover{background:var(--tint)!important}
.ghost[style*="color:var(--danger)"],.ghost[style*="color: var(--danger)"]{color:var(--danger)!important}
.rowbtn{min-height:44px;min-width:44px;border-radius:10px!important;color:var(--navy-mid)!important;font:600 14px var(--sans)!important;padding:0 10px!important}
.rowbtn.del{color:var(--danger)!important}
.rowbtn:hover{background:var(--tint)!important}
.iconbtn{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:12px!important;width:44px!important;height:44px!important;color:var(--aos-ink)!important;font:700 12px var(--sans)!important}
.iconbtn.wa{border-color:#25A366!important;color:#1F8C57!important}
:root[data-theme="dark"] .iconbtn.wa{color:#5ADB9F!important;border-color:#2E7D5B!important}
.promote{height:44px;min-width:44px;border-radius:12px!important;background:var(--navy)!important;font-size:15px!important}
.arrow{width:44px!important;height:44px!important;border-radius:12px!important;border:1px solid var(--line)!important;background:var(--card)!important;color:var(--aos-ink)!important}
.addline{min-height:44px;border-radius:12px!important;border:1px dashed var(--gold)!important;color:var(--gold-dark)!important;font:600 14px var(--sans)!important;padding:0 14px!important}
.calbtn{min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--lineblue)!important;border-radius:12px!important;color:var(--aos-ink)!important;font:600 13.5px var(--sans)!important}
.col-add{width:32px!important;height:32px!important;border:1px solid var(--lineblue)!important;background:var(--card)!important;color:var(--aos-ink)!important}
.lf-edit{min-height:44px;border:1px solid var(--lineblue)!important;background:var(--card)!important;border-radius:12px!important;color:var(--aos-ink)!important;font:600 14px var(--sans)!important}
.lf-save{min-height:44px;background:var(--crm-pri)!important;color:var(--on-pri)!important;border-radius:12px!important;font:600 14px var(--sans)!important}
.rev-btns button,.selbtn,.selbtn2,.mxsort{min-height:44px;border:1px solid var(--lineblue)!important;background:var(--card)!important;border-radius:12px!important;color:var(--aos-ink)!important;font:600 14px var(--sans)!important}
.cc-h4b{min-height:44px;min-width:44px;margin:-12px 0!important;color:var(--gold-dark)!important;font:600 13px var(--sans)!important;padding:0 4px!important}
.today-link{min-height:44px;color:var(--navy-mid)!important;font:600 14px var(--sans)!important;text-decoration:none!important;padding:0 4px!important}
.today-link:hover{text-decoration:underline!important}
.sbtn{min-height:44px;border-radius:12px!important;background:var(--card)!important;font:600 14px var(--sans)!important;padding:0 14px!important}
:root[data-theme="dark"] .sbtn.nurt{color:var(--gold)!important;border-color:var(--gold)!important}
.micbtn{background:var(--card)!important;border:1px solid var(--lineblue)!important;color:var(--aos-ink)!important;width:44px!important;height:44px!important;top:2px!important;right:2px!important;border-radius:10px!important}
.micwrap textarea,.micwrap input[type=text]{padding-right:52px!important}
.micbtn.on{background:var(--gold)!important;border-color:var(--gold)!important;color:#fff!important}
.gap-row .rm{width:44px!important;height:44px!important;border-radius:12px!important;background:var(--tint)!important;color:var(--muted)!important}

/* ---------- 6. segmented controls: the iOS look the switcher has (track, white thumb) ---------- */
.segctl,.tabs,.lbtabs{display:inline-flex!important;flex-wrap:nowrap;gap:2px!important;padding:3px!important;border-radius:12px!important;background:var(--seg)!important;box-shadow:none!important;width:auto;max-width:100%}
.segctl button,.tab,.lbtab{min-height:44px;padding:0 16px!important;border-radius:9px!important;background:transparent!important;color:var(--muted)!important;font:600 14px var(--sans)!important;box-shadow:none!important;white-space:nowrap}
.segctl button.on,.tab.active,.lbtab.on{background:var(--seg-on)!important;color:var(--aos-ink)!important;box-shadow:0 1px 3px rgba(20,33,61,.18)!important}
.tabs{margin-bottom:18px}
/* the scope bar (Me · Unit · Branch) at the top of every screen of a supervisor */
.segctl{flex:none}
#main > div:first-child > div[style*="flex-wrap:wrap"]:has(.segctl){margin:0 0 16px!important;gap:8px 10px!important}
#main .chip.soft,#drillBack{background:var(--tint)!important;border:0!important;color:var(--navy-mid)!important}

/* ---------- 7. chips and period pills: one row that scrolls inside itself where it must, fitting on an iPad ---------- */
.chips,.tf-pills,.rpt-chips{gap:6px!important;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:20px}
.chips::-webkit-scrollbar,.tf-pills::-webkit-scrollbar,.rpt-chips::-webkit-scrollbar{display:none}
.chip,.tf-pill,.grpseg,.rchip,.tf-qh{min-height:44px;border:1px solid var(--line);background:var(--card);border-radius:999px!important;padding:0 13px!important;font:600 13.5px var(--sans)!important;color:var(--muted)!important;display:inline-flex!important;align-items:center;gap:7px;white-space:nowrap;box-shadow:none}
/* (a chosen chip keeps the colour the CRM gives it: its stage's, or navy) */
.chip.active,.chip[style*="background:var(--navy)"],.tf-pill.on,.grpseg.on{color:#fff!important;border-color:transparent}
.chip.active:not([style*="background"]),.tf-pill.on,.grpseg.on{background:var(--navy)}
.chip .cnt{background:var(--tint);color:var(--ink)}
/* on an iPad the filter chips wrap onto a second line rather than hide past the edge (a phone scrolls them) */
@media (min-width:700px){#nbStatusChips,#pipeChips,#ccChips{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-right:0;padding-bottom:4px}}
/* on an iPad across, the ten periods fit on one line */
@media (min-width:1000px){.tf-pill{padding:0 11px!important}.tf-pills{gap:4px!important}}
.rchip b{color:var(--aos-ink)}
.tf-range{color:var(--muted)!important;font-style:normal!important;font-size:13px!important}
.nb-period,.selmetric,#teamPeriod,.wk-meta select,#wscopeUnit{min-height:44px;background:var(--field)!important;border:1px solid var(--lineblue)!important;border-radius:12px!important;color:var(--ink)!important;font:600 14px var(--sans)!important;padding:0 12px!important}

/* ---------- 8. fields ---------- */
.field label,.modal .mlbl{font:600 13.5px var(--sans)!important;text-transform:none!important;letter-spacing:0!important;color:var(--muted)!important}
.field input[type=text],.field input[type=number],.field input[type=date],.field input[type=email],.field input[type=tel],.field select,.field textarea,.modal input:not([type=checkbox]):not([type=radio]),.modal select,.modal textarea,
.appt input,.appt select,.gap-row input[type=text],.gap-row select.igasel,.nb-search,#saSearch,#saPhone,.wk-f textarea,.as-bg .as-in{
  background:var(--field)!important;border:1px solid var(--lineblue)!important;border-radius:12px!important;min-height:48px;font-size:16px!important;color:var(--ink)!important;box-shadow:none;padding-left:14px;padding-right:14px}
.field textarea,.wk-f textarea,.modal textarea{min-height:76px;padding-top:12px;padding-bottom:12px}
.field select,.modal select{padding-right:30px}
.nb-search{max-width:none!important}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
:root[data-theme="dark"] select,:root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]),:root[data-theme="dark"] textarea{background:var(--field)!important;color:var(--ink)!important;border-color:var(--lineblue)!important}
input[type=checkbox]{accent-color:var(--crm-pri);width:20px;height:20px}
.lf-val{background:var(--tint)!important;border:1px solid var(--line)!important;border-radius:12px!important;color:var(--ink)}
.lf-val:after{background:linear-gradient(transparent,var(--tint))!important}

/* ---------- 9. windows: modals, the bottom sheet, the action sheet ---------- */
.veil,.sheet-veil,.cc-veil,.pveil,#readVeil{background:rgba(10,20,30,.45)!important}
.modal{border-radius:20px!important;padding:22px!important;box-shadow:0 24px 60px rgba(0,0,0,.3)!important;background:var(--card)!important;color:var(--ink);max-width:460px!important}
.modal h3{font-size:20px!important;margin-bottom:6px!important;padding-right:44px}
.modal p{color:var(--muted)!important;font-size:14px}
.modal .field input,.modal .field select,.modal .field textarea{margin-bottom:0!important}
.modal .field{margin-bottom:14px}
/* two fields side by side carry their own gap below; stacked on a phone they must not get a second one */
.twocol{gap:0 16px!important}
/* a booking in the Log: its date, with whom, and its remove button in one row */
#bookedList > div{gap:8px!important}
#bookedList input{min-height:48px;background:var(--field)!important;border:1px solid var(--lineblue)!important;border-radius:12px!important;padding:0 12px;font-size:16px!important;color:var(--ink)!important;min-width:0}
#bookedList input[type=date]{flex:0 0 150px!important}
#bookedList .rmadv{position:static!important;flex:none;width:44px!important;height:44px!important;border-radius:12px!important;background:var(--tint)!important;color:var(--danger)!important;box-shadow:none!important;font-size:20px!important}
@media (max-width:420px){#bookedList input[type=date]{flex-basis:142px!important;padding:0 8px}}
/* one primary action, at the bottom right; Cancel / Close at the left (Apple) */
.modal-row{display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap;margin-top:6px}
.modal-row > .ghost:first-child{margin-right:auto}
.toast{background:var(--navy-deep)!important;border-radius:12px!important;font:600 14px var(--sans)!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;max-width:calc(100vw - 32px)}
:root[data-theme="dark"] .toast{background:#26384A!important}
.sheet{position:relative;background:var(--card)!important;border-radius:20px 20px 0 0!important;padding-top:12px!important}
.sheet h3{padding-right:48px}
.sheet h3{font-size:17px!important}
.sheet .st{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:12px!important;min-height:52px;color:var(--ink);font:600 15px var(--sans)!important}
.sheet .st.on{border-color:var(--gold)!important;background:var(--gold-t)!important}
.readbox{color:var(--ink)}
.readh b{font:700 17px var(--serif)!important;color:var(--aos-ink)}
.as-bg .as{border-radius:20px!important}
.as-bg .as b{font:700 17px var(--sans);color:var(--aos-ink)}
.as-bg .as-b{background:var(--card)!important;border-color:var(--line)!important;color:var(--navy-mid)!important;font:600 17px var(--sans)!important}
.as-bg .as-b.danger{color:#D93025!important;border-color:#F3C2BE!important;background:#FFF6F5!important}
:root[data-theme="dark"] .as-bg .as-b.danger{background:#3A1F1F!important;border-color:#6B2C2C!important;color:#FF8A80!important}
.as-bg .as-b.cancel{font-weight:700!important;color:var(--aos-ink)!important}
/* the ✕ on every window, at the top right (platform/assets/crm-shell.js) */
.crm-x{position:absolute;top:8px;right:8px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:var(--tint);color:var(--aos-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.crm-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.crm-x::after{content:"";position:absolute;inset:-4px}
.modal{position:relative}

/* ---------- 10. a person's record (the drawer) and a client's ---------- */
.pdrawer,.cc-drawer{background:var(--card)!important;color:var(--ink)}
.pdrawer:not(.show),.cc-drawer:not(.show){box-shadow:none!important;visibility:hidden;transition:transform .25s,visibility 0s .25s}
.pd-h,.cc-dh{position:relative;background:var(--card)!important;color:var(--ink)!important;border-bottom:1px solid var(--line);padding:16px 64px 14px 20px!important}
.pd-h .nm,.cc-dh .nm{font:700 21px/1.25 var(--serif)!important;color:var(--aos-ink)!important}
.pd-h .meta,.cc-dh .meta{color:var(--muted)!important;font-size:13px!important}
.pd-h .quick{margin-right:-44px}
.pd-h .quick a{min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px!important;font:600 14px var(--sans)!important;padding:0 10px!important}
.qwa{background:#1F8C57!important;color:#fff!important;border:0!important}
.qcall{background:var(--card)!important;color:var(--aos-ink)!important;border:1px solid var(--lineblue)!important}
.pehero{margin-right:-44px}
.pehero>button{min-height:44px;border:1px solid var(--gold)!important;background:var(--gold-t)!important;color:var(--gold-dark)!important;border-radius:12px!important;font:600 14px var(--sans)!important}
.pehero>button .cv{color:var(--muted)!important}
.pehero .peopts button{background:var(--tint)!important;border:1px solid var(--line)!important;color:var(--ink)!important;border-radius:12px!important}
.pehero .peopts i{color:var(--muted)!important}
.pd-body,.cc-db{padding:16px 20px!important}
.pd-body h4,.cc-db h4{font:600 12px var(--sans)!important;letter-spacing:.04em!important;color:var(--muted)!important;margin:20px 0 8px!important}
.pd-body h4:first-child,.cc-db h4:first-child{margin-top:0!important}
.pd-body .kv,.cc-dl{min-height:40px;align-items:center;font-size:14.5px!important}
.pd-share.in,.pd-share.out{background:var(--tint)!important;border:1px solid var(--line)!important;border-radius:12px!important}
.pd-share button{min-height:44px}
.pd-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;gap:8px!important;flex-wrap:nowrap;background:var(--card)}
/* the footer as Apple has it: what removes on the left, the primary action (Save) at the bottom right */
.pd-foot #pdDel{order:1;padding:0 10px!important;border:0!important;color:var(--danger)!important;background:transparent!important}
.pd-foot #pdArch{order:2;margin-left:0!important;margin-right:auto;color:var(--aos-ink)!important}
.pd-foot #pdEdit{order:3}
.pd-foot #pdSave{order:4}
.pd-foot #shBack{order:1;margin-right:auto}.pd-foot #shGo{order:2}
.cc-rev{border:1px solid var(--line)!important;background:var(--tint)!important;border-radius:12px!important}
.cc-rev div[style*="#3B5B5D"]{color:var(--muted)!important}
.cc-pol,.cc-gap,.cc-rel{border:1px solid var(--line)!important;border-radius:12px!important;background:var(--card)}
.cc-pol .pt{color:var(--aos-ink)!important}
.cc-rel a{color:var(--navy-mid)!important}
.cc-gap .gx,.cc-rel .rx{min-width:44px;min-height:44px}
.cc-tag{font-size:12px!important}
.cc-tp button{width:44px!important;height:44px!important;border-radius:12px!important;background:var(--card)!important}
.cc-tp button.on{background:var(--tc)!important}
/* the client's footer: Delete and Archive at the left, the tier at the right; Close is the ✕ at the top */
.cc-drawer > div:last-child{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;gap:8px!important;background:var(--card)}
html.crm-x-on .cc-drawer #ccClose{display:none}
.cc-drawer #ccDelC{order:-2;border:0!important;background:transparent!important;padding:0 10px!important}
.cc-drawer #ccArch{order:-1;color:var(--aos-ink)!important}
.review-std{background:var(--tint)!important;border:1px solid var(--line)!important;border-radius:12px!important;color:var(--muted)!important}
@media (max-width:699px){.pdrawer,.cc-drawer{width:100vw!important;max-width:100vw!important}}

/* ---------- 11. Today ---------- */
.today-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 4px}
.today-hello .th-greet{font:700 24px/1.2 var(--serif)!important;color:var(--aos-ink)!important;margin:0}
.today-hello .th-date{color:var(--muted)!important;font-size:14px!important;margin-top:4px}
.today-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0!important}
.today-actions .qa{flex:0 0 auto!important;min-width:0!important;min-height:44px;padding:0 16px!important;border-radius:12px!important;border:1px solid var(--lineblue)!important;background:var(--card)!important;color:var(--aos-ink)!important;font:600 14.5px var(--sans)!important;box-shadow:none!important;white-space:nowrap}
.today-actions .qa:hover{background:var(--tint)!important}
.today-actions .qa.pri{background:var(--crm-pri)!important;border-color:var(--crm-pri)!important;color:var(--on-pri)!important}
.today-actions .qa.pri:hover{background:var(--crm-pri-h)!important}
.today-hello+.th-quote{margin:2px 0 18px!important;padding:0!important;border:0!important;font:italic 400 14px/1.45 var(--sans)!important;color:var(--muted)!important}
.today-hello+.th-quote span{display:inline!important;margin:0 0 0 8px!important;font:600 11px var(--sans)!important;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-dark)!important;font-style:normal!important}
.today-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 16px;align-items:start}
@media (min-width:700px){.today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){
  .today-hello .today-actions{width:100%}
  .today-hello .today-actions .qa{flex:1 1 0!important;padding:0 8px!important}
  .today-hello+.th-quote{font-size:13.5px!important;margin-bottom:14px!important}
}
/* the rings: today against 3, the week against 10, the streak */
.today-rings,.hist-summary{padding:14px 10px!important;margin-bottom:16px!important;gap:6px!important}
.ring .ring-l{font:600 12px var(--sans)!important;letter-spacing:.02em!important;color:var(--muted)!important}
.ring svg text,.dc-ring svg text{font-family:var(--sans)!important;font-weight:700;fill:var(--aos-ink)!important}
.ring .streaknum,.bignum{font:700 26px var(--sans)!important;color:var(--aos-ink)!important}
.ring .streaknum{color:var(--gold-dark)!important}
#main svg [stroke="#1C3454"]{stroke:var(--crm-ring)}
#main svg [stroke="#C6A24A"]{stroke:var(--gold)}
#main svg [stroke="#2E7D5B"]{stroke:var(--ok)}
#main svg [stroke="var(--tint)"]{stroke:var(--line)}
/* your week's book, seven days */
.bk-strip{display:flex;gap:6px;margin-top:10px}
.bk-day{flex:1;text-align:center;min-width:0}
.bk-l{font:700 11px var(--sans);color:var(--muted)}.bk-day.we .bk-l{color:var(--lineblue)}
.bk-c{height:34px;border-radius:9px;margin-top:4px;display:flex;align-items:center;justify-content:center;font:700 13px var(--sans);background:var(--tint)!important;border:1px dashed var(--lineblue)!important;color:var(--ink)}
.bk-c.n1,.bk-c.n2,.bk-c.n3,.bk-c.n4{border:0!important}
.bk-c.n1{background:#F8E2C8!important}.bk-c.n2{background:#F0BF85!important}.bk-c.n3{background:#D9822B!important;color:#fff}.bk-c.n4{background:#A95E17!important;color:#fff}
:root[data-theme="dark"] .bk-c.n1{background:#4A3418!important}:root[data-theme="dark"] .bk-c.n2{background:#7A521F!important}:root[data-theme="dark"] .bk-c.n3{background:#C77724!important;color:#fff}:root[data-theme="dark"] .bk-c.n4{background:#E8A04E!important;color:#1B1206}
.bk-c.today{outline:2px solid var(--gold);outline-offset:2px}
.bk-flag{margin-top:10px;font-size:13px}.bk-flag.bad{color:var(--danger)}.bk-flag.ok{color:var(--ok)}
/* a supervisor's rollup: figures in tiles, the leader board as a card */
.stats{gap:10px!important}
.stat{padding:12px 14px!important;min-width:0}
.stat .eyebrow{font-size:11.5px!important}
.stat .n,.wk-num input,.cc-kpi .n,.nb-count .n,.momval,.mxh .n,.mxmet .mn,.bignum{font-family:var(--sans)!important;font-weight:700!important;color:var(--aos-ink)}
.stat .n{font-size:26px!important;margin-top:6px}
.stat .sub{color:var(--muted)!important;font-size:12.5px!important}
.stat.accent{background:var(--gold-t)!important;border-color:transparent!important}
.stat.accent .eyebrow{color:var(--gold-dark)!important}
.stat.accent .n{color:var(--gold-dark)!important}.stat.accent .sub{color:var(--muted)!important}
.board{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:var(--r)!important;box-shadow:var(--shadow)!important;padding:16px 18px!important}
.board .sub{color:var(--muted)!important}
.board .rank{min-height:40px;margin-top:6px!important;border-radius:10px}
.board .rank[style*="cursor"]:hover{background:var(--tint)}
.board .badge,.board .name{color:var(--ink)!important}
.board .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .track{background:var(--tint)!important;height:12px!important}
.board .track i{background:var(--gold)!important}
.board .val{color:var(--gold-dark)!important;width:auto!important;min-width:42px;white-space:nowrap}
.board .track{min-width:40px}
.board .callouts{border-top-color:var(--line)!important;color:var(--muted)!important}
.advgrid{gap:14px!important}
.advcard{padding:16px!important}
.advcard .nm{font:600 17px var(--sans)!important;color:var(--ink)!important}
.advcard .wk b{color:var(--aos-ink)!important}
.advcard .streak{color:var(--gold-dark)!important}
.avatar{font-family:var(--sans)!important;font-weight:700}

/* ---------- 12. the Log ---------- */
.formhead h2{font-size:21px!important}
.appt{border:1px solid var(--line)!important;border-radius:var(--r)!important;background:var(--card)}
.appt-num{font-family:var(--sans)!important;color:var(--aos-ink)!important}
.appt-top .eyebrow{color:var(--gold-dark)!important}
.metrics{gap:10px!important}
.mood button{min-height:48px;background:var(--card)!important;border:1px solid var(--lineblue)!important;border-radius:12px!important}
.mood button.on{border-color:var(--gold)!important;background:var(--gold-t)!important}
.tmr{background:var(--gold-t)!important;color:var(--ink)!important;border-radius:var(--r)!important;border:1px solid transparent}
.tmr label{color:var(--gold-dark)!important;font:700 12px var(--sans)!important;letter-spacing:.04em!important}
.tmr input{background:var(--field)!important;border:1px solid var(--lineblue)!important;color:var(--ink)!important;border-radius:12px!important;min-height:48px;font-size:16px!important}
.tmr input::placeholder{color:var(--muted)!important}

/* ---------- 13. Names bank and Client care: one card of rows with A–Z bands, as Contacts ---------- */
.nb-counts{gap:10px!important}
.nb-count{min-height:56px;padding:10px 14px!important;cursor:pointer}
.nb-count .n{font-size:22px!important;color:var(--aos-ink)!important}
.nb-count .l{font:600 12px var(--sans)!important;color:var(--muted)!important;letter-spacing:.02em!important}
.nb-count.on{border-color:var(--gold)!important;background:var(--gold-t)!important}.nb-count.on .n{color:var(--gold-dark)!important}
.nb-list,.cc-list{padding-right:0!important;margin-right:26px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.nb-list:empty,.cc-list:empty{display:none}
.nb-list > .empty,.cc-list > .empty{border:0!important;box-shadow:none!important;border-radius:0!important}
.cc-list > div[style*="text-align:center"]{padding:30px!important}
.nb-sec,.cc-sec{margin:0!important;padding:5px 16px!important;background:var(--tint);border-top:1px solid var(--line);font:700 12.5px var(--sans)!important;color:var(--muted)!important;letter-spacing:.04em}
.nb-list > .nb-sec:first-child,.cc-list > .cc-sec:first-child{border-top:0}
.nb-shsec{color:var(--navy-mid)!important}
.rowcard,.cc-row{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;margin:0!important;padding:8px 12px 8px 16px!important;min-height:60px}
.nb-sec + .rowcard,.cc-sec + .cc-row,.nb-list > .rowcard:first-child,.cc-list > .cc-row:first-child{border-top:0!important}
.rowcard:hover,.cc-row:hover{background:var(--tint)!important}
.rowcard.shared{background:var(--tint)!important}
.rc-name,.cc-rname{font:600 15.5px/1.3 var(--sans)!important;color:var(--ink)!important}
.rc-sub,.cc-rsub{font-size:13px!important;color:var(--muted)!important}
.statuschip,.pill,.cc-mtag,.chip-dorm{font:700 11px/1.5 var(--sans)!important;padding:1px 8px!important}
.src{font-size:11.5px!important}
.cc-gap .src{font-size:11px!important}
.rc-actions{gap:8px!important}
.cc-badge{font-family:var(--sans)!important;border-radius:12px!important}
.cc-rrev{font:700 12.5px var(--sans)!important}.cc-rprem{font-size:12.5px!important;color:var(--muted)!important}
.az-index{right:-4px!important;top:0!important}
.azl{font:700 11px/1.25 var(--sans)!important;color:var(--navy-mid)!important;min-width:22px}
.azl.off,.cc-azl.off{color:var(--lineblue)!important}
.cc-az{right:-4px!important;width:26px!important}
.cc-azl{font:700 11.5px/1 var(--sans)!important;color:var(--navy-mid)!important}
.cc-sum{gap:10px!important}
.cc-kpi{min-width:0!important;flex:1 1 118px!important;padding:12px 14px!important}
.cc-kpi .n{font-size:21px!important;color:var(--aos-ink)!important}
.cc-kpi.due .n{color:var(--danger)!important}
.cc-kpi .l{font:600 12px var(--sans)!important;letter-spacing:.02em!important;color:var(--muted)!important}
.cc-bookn .usd{color:var(--gold-dark)!important;font-size:14px!important}
.csv-sec{background:var(--card)!important}
.sa-row{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:12px!important;min-height:52px}
.sa-row .tc-act{color:var(--gold-dark)!important}
@media (max-width:699px){.cc-kpi{flex:1 1 calc(50% - 5px)!important}.cc-kpi .n{font-size:19px!important}}

/* ---------- 14. Pipeline ---------- */
.swipe-nav .lab{font:700 18px var(--serif)!important;color:var(--aos-ink)}
.swipe-nav .of{font-size:13px!important}
.swipe{scrollbar-width:none}.swipe::-webkit-scrollbar{display:none}
.swipe .col{background:var(--tint)!important;border-radius:var(--r)!important;padding:10px!important}
/* an iPad shows whole columns, two upright and three across, never one cut at the edge */
@media (min-width:700px){.swipe .col{flex:0 0 calc((100% - 12px) / 2)!important;max-width:none!important;scroll-snap-align:start!important}}
@media (min-width:1000px){.swipe .col{flex-basis:calc((100% - 24px) / 3)!important}}
.col-h .t{font:700 14.5px var(--sans)!important;color:var(--aos-ink)}
.pcard{background:var(--card)!important;border:1px solid var(--line)!important;border-left:4px solid var(--c)!important;border-radius:12px!important;box-shadow:var(--shadow)!important}
.pc-name{font:600 16px var(--sans)!important;color:var(--ink)}
.pc-next{color:var(--gold-dark)!important;font-size:13px!important}.pc-next b{color:var(--muted)!important}
.pc-actions .hold{font-size:12px!important}

/* ---------- 15. History, Report, the matrix, reviews ---------- */
.hist-week{font:700 15px var(--serif)!important;color:var(--aos-ink)!important;margin:18px 2px 8px!important}
.hist-week .hw-sum{font:600 12.5px var(--sans)!important;color:var(--muted)!important}
.daycard{border-left:4px solid var(--line)!important;padding:8px 8px 8px 12px!important;margin-bottom:8px!important}
.daycard.hit{border-left-color:var(--ok)!important}
.dc-date{font:600 15px var(--sans)!important;color:var(--ink)!important}
.dc-chips{font-size:13px!important}
.dc-actions{flex-direction:row!important;gap:2px!important}
.chart-h{gap:10px;flex-wrap:wrap}
.pacebar{background:var(--tint)!important}
.pacebar i{background:var(--gold)!important}
.legend span{font-size:13.5px!important}
.momc{background:var(--card)!important}
.momlab{font:600 11.5px var(--sans)!important;letter-spacing:.03em!important}
.mombars .mb span{font:600 11px var(--sans)!important;text-transform:none!important}
.momval small{color:var(--muted)!important}
.wins .wh{font-size:12px!important}
.matrixwrap{background:var(--card)!important}
.mx-h,.mxdaylab .d{font:700 11px var(--sans)!important}
.mxh .l{font:600 11px var(--sans)!important;letter-spacing:.02em!important}
.mxcap{font:600 11.5px var(--sans)!important;letter-spacing:.02em!important}
.mxmet{background:var(--tint)!important;border-color:transparent!important;border-radius:10px!important}
.mxmet .ml{font:600 11px var(--sans)!important;letter-spacing:0!important}
.mxbar{flex-wrap:wrap;gap:8px!important}
.mxhealth{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.mxh{min-width:0;overflow:hidden}
@media (max-width:699px){.mxhealth{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.mxsort{margin-left:auto}
.pxname{font:600 15px var(--sans)!important;color:var(--ink)}
.pxflames{color:var(--ink)!important}
.grplab{font:600 11.5px var(--sans)!important}
:root[data-theme="dark"] .mxcellbox[style*="#FBF6EA"]{background:var(--tint)!important;border-color:var(--lineblue)!important}
:root[data-theme="dark"] .mxcellbox[style*="#F6E3AE"]{background:#4A3418!important;color:#F0D9B5!important}
:root[data-theme="dark"] .mxcellbox[style*="#EBC067"]{background:#7A521F!important;color:#FBE8CF!important}
#content > .card + .card,#content > div > .card + .card,#content > .card + .today-card{margin-top:16px!important}
.dash2{gap:16px!important;margin-bottom:16px!important}
/* the appointments trend: its words at least 11 px on a phone (the chart is drawn 520 wide and scaled), never huge on an
   iPad, and with many bars only every second, third … date, so none overlap */
#bar svg{display:block;max-width:600px;margin:0 auto}
#bar svg text{font-size:18px;font-family:var(--sans)}
#bar svg > text{font-size:15px}
#bar svg:has(> g:nth-of-type(8)) > g:not(:nth-of-type(3n+1)) > text:last-child{display:none}
#bar svg:has(> g:nth-of-type(15)) > g > text:not(:last-child){font-size:15px}
#bar svg:has(> g:nth-of-type(22)) > g > text:not(:last-child){display:none}
#bar svg:has(> g:nth-of-type(22)) > g:not(:nth-of-type(5n+1)) > text:last-child{display:none}
#bar svg:has(> g:nth-of-type(22)) > g:nth-of-type(5n+1) > text:last-child{display:inline}
#bar svg [fill="var(--navy)"]{fill:var(--crm-ring)}
/* a team's figures by day or week (Report, Unit / Branch): its labels at least 11 px, the chart never blown up on an iPad */
svg[viewBox="0 0 320 118"]{max-width:480px;margin-left:auto!important;margin-right:auto!important}
svg[viewBox="0 0 320 118"] > text{font-size:11px;font-family:var(--sans);fill:var(--muted)}
svg[viewBox="0 0 320 118"]:has(> text:nth-of-type(12)) > text:not(:nth-of-type(2n+1)){display:none}
svg[viewBox="0 0 320 118"]:has(> text:nth-of-type(20)) > text:not(:nth-of-type(4n+1)){display:none}
svg[viewBox="0 0 320 118"] [fill="#3B5D82"]{fill:var(--crm-ring)}
svg[viewBox="0 0 320 118"] [fill="#C6A24A"]{fill:var(--gold)}
.mombars i[style*="#CFC6AE"]{background:var(--lineblue)!important}
.mombars i[style*="var(--navy)"]{background:var(--crm-ring)!important}
.rank .name span[style*="font-size:10px"]{font-size:11px!important}
/* the five kinds of appointment, apart at a glance (AGENTS.md: at least 15 apart; Recommend and Closing were two golds) */
.card:has(svg[aria-label="Appointments by type"]) [fill="#1C3454"]{fill:#1F5F8B}
.card:has(svg[aria-label="Appointments by type"]) [fill="#4A6488"]{fill:#7FA7C9}
.card:has(svg[aria-label="Appointments by type"]) [fill="#C6A24A"]{fill:#D9822B}
.card:has(svg[aria-label="Appointments by type"]) [fill="#9C7B2E"]{fill:#1E8F59}
.card:has(svg[aria-label="Appointments by type"]) [fill="#5E8385"]{fill:#8E6BBF}
.card:has(svg[aria-label="Appointments by type"]) [style*="background:#1C3454"]{background:#1F5F8B!important}
.card:has(svg[aria-label="Appointments by type"]) [style*="background:#4A6488"]{background:#7FA7C9!important}
.card:has(svg[aria-label="Appointments by type"]) [style*="background:#C6A24A"]{background:#D9822B!important}
.card:has(svg[aria-label="Appointments by type"]) [style*="background:#9C7B2E"]{background:#1E8F59!important}
.card:has(svg[aria-label="Appointments by type"]) [style*="background:#5E8385"]{background:#8E6BBF!important}
:root[data-theme="dark"] .card:has(svg[aria-label="Appointments by type"]) [fill="#1C3454"]{fill:#5AA2D8}
:root[data-theme="dark"] .card:has(svg[aria-label="Appointments by type"]) [style*="background:#1C3454"]{background:#5AA2D8!important}
svg[aria-label="Appointments by type"] text{font-family:var(--sans)!important;font-weight:700}
svg[aria-label="Appointments by type"] text[font-size="26"]{fill:var(--aos-ink)}
/* the weekly review, the monthly reflection, the manager's 1:1 */
.wk-head h2{font-size:22px!important}
.wk-sub{color:var(--muted)!important;font-size:14px!important}
.wk-nums{gap:10px!important}
.wk-num{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:12px!important;padding:8px 12px!important}
.wk-num label{font:600 11.5px var(--sans)!important;letter-spacing:.02em!important;color:var(--muted)!important}
.wk-num input{font-size:19px!important;color:var(--aos-ink)!important;min-height:30px}
.wk-num.hi{background:var(--gold-t)!important;border-color:transparent!important}
.wk-num.hi label,.wk-num.hi input{color:var(--gold-dark)!important}
.wk-num input:not([type=checkbox]):not([type=radio]):not([type=range]),:root[data-theme="dark"] .wk-num input:not([type=checkbox]):not([type=radio]):not([type=range]){background:transparent!important;border:0!important;padding:0!important}
.wk-sech{background:transparent!important;color:var(--aos-ink)!important;font:700 16px var(--serif)!important;letter-spacing:0!important;text-transform:none!important;padding:8px 0 2px!important;border-radius:0!important}
.wk-f label{background:transparent!important;color:var(--muted)!important;font:600 13.5px var(--sans)!important;letter-spacing:0!important;text-transform:none!important;padding:0 0 6px!important}
.wk-f textarea{border-top:1px solid var(--lineblue)!important}
.wk-commit{background:var(--gold-t)!important;border-radius:var(--r)!important}
.wk-commit label{color:var(--gold-dark)!important;font:700 12px var(--sans)!important}
.wk-commit input{background:var(--field)!important;border:1px solid var(--lineblue)!important;border-radius:12px!important;color:var(--ink)!important;min-height:48px;padding:0 12px!important;font-size:16px!important}
.wk-sign{background:var(--tint)!important;border-radius:12px!important}
.wk-sign .done{color:var(--ok)!important}
.wk-actions{flex-wrap:wrap;gap:10px!important}
/* the login cover (when the CRM's own sign-in is still needed) */
.cover{border-radius:20px!important;box-shadow:var(--shadow)!important;border:1px solid var(--line)}
.cover-hero{background:#163E5C!important}
.cover-hero .brand2,.cover-quote .src{font-family:var(--sans)!important}
.cover-hero .mantra{font-family:var(--serif)!important;font-weight:700}
.cover-quote .q{font-family:var(--sans)!important;font-size:18px!important}
.cover-hero .mantra b,.cover-hero .brand2,.cover-quote .src{color:#F0B36A!important}
.cover-quote .src{border:0!important;padding:0!important;border-radius:0!important;font-size:11.5px!important}
.cover-login{border:0!important;box-shadow:none!important;border-radius:0!important}
/* the admin roster */
table{font-size:14px}
th{font:600 12px var(--sans)!important;letter-spacing:.04em!important;color:var(--muted)!important}
tbody tr:hover{background:var(--tint)!important}
.orgsel{min-height:44px;border:1px solid var(--lineblue);border-radius:10px;background:var(--field);color:var(--ink);padding:0 8px}

/* ---------- 16. the tab bar (phone) and the rail (iPad) ---------- */
.bottomnav{background:var(--card)!important;border-top:1px solid var(--line)!important;box-shadow:none!important;padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px))!important}
.bottomnav button{color:var(--muted)!important;font:600 11.5px var(--sans)!important;min-height:56px!important;border-radius:12px;gap:3px!important}
.bottomnav button.on{color:var(--gold-dark)!important}
.bottomnav button.on .ic{color:var(--gold-dark)!important}
.bottomnav button.on::before{inset:2px 4px!important;border-radius:12px;background:var(--gold-t)!important}
.bottomnav button.on::after{display:none!important}
@media (min-width:700px){
  body.navpad main{padding-bottom:40px!important;margin-left:88px!important;margin-right:auto!important}
  body:not(.navpad) main{margin-left:auto!important;margin-right:auto!important}
  /* the header runs the full width, as in Invest and Advisory, so the brand and switcher line up; the rail starts below it */
  header.top .top-in{min-height:61px}
  .bottomnav{top:var(--crm-hdr,61px);bottom:0;right:auto;left:0;width:80px;flex-direction:column;justify-content:flex-start;gap:4px;padding:12px 6px!important;border-top:0!important;border-right:1px solid var(--line)!important;z-index:30}
  .bottomnav button{flex:0 0 auto;min-height:60px!important;margin:0}
  .bottomnav button.on::before{inset:0!important}
  .toast{bottom:28px!important}
}
@media (min-width:1300px){body.navpad main{margin-left:max(88px,calc((100vw - 1180px) / 2))!important}}

/* ---------- 17. iPad across: a person's record docks on the right, the list stays usable ---------- */
@media (min-width:900px){
  .pdrawer,.cc-drawer{top:var(--crm-hdr,61px)!important;height:calc(100% - var(--crm-hdr,61px))!important;width:min(460px,42vw)!important;max-width:none!important;border-left:1px solid var(--line);box-shadow:none!important;z-index:34!important}
  .pveil.show,.cc-veil.show{background:transparent!important;pointer-events:none}
  body.crm-two main{margin-right:min(460px,42vw)!important;max-width:none!important}
  /* the CRM locks the page while a record is open; docked beside the list, the list must still scroll */
  body.crm-two.locked{overflow:auto!important}
}

/* ---------- 18. Sales | Recruitment (platform/assets/crm-review.js) ---------- */
html.aos-acct #btnSignout{display:none!important}
.crm-mode{display:inline-flex;background:var(--seg);border-radius:12px;padding:3px;gap:2px;margin-left:12px;flex:none}
.crm-mode span,.crm-mode a{display:inline-flex;align-items:center;min-height:34px;border-radius:9px;padding:0 14px;font:600 13.5px var(--sans);color:var(--muted);text-decoration:none;white-space:nowrap}
.crm-mode span{background:var(--seg-on);color:var(--gold-dark);box-shadow:0 1px 3px rgba(22,62,92,.15)}
.crm-mode small{font-weight:600;opacity:.75;margin-left:4px}
/* a phone: the switch gets a row of its own under the bar, the width of the screen (as a segmented control under an iOS
   navigation bar), instead of pushing the light/dark and account buttons onto a second line */
@media (max-width:699px){.crm-mode{order:100;flex:1 0 100%;margin:2px 0 0}.crm-mode span,.crm-mode a{flex:1;justify-content:center;min-height:36px}}

/* ---------- 19. the weekly review board under Today on an iPad across (platform/assets/crm-review.js) ---------- */
@media (min-width:900px){
  /* a supervisor's Today (Unit, Branch): its cards in a grid, every figure inside its card */
  #content:has(> .today-card):not(:has(> .today-hello)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  #content:has(> .today-card):not(:has(> .today-hello)) > :not(.today-card){grid-column:1 / -1}
  #content:has(> .today-card):not(:has(> .today-hello)) > .today-card,#content:has(> .today-card):not(:has(> .today-hello)) > .card{margin-top:0!important;margin-bottom:0!important}
  #content:has(> .today-card):not(:has(> .today-hello)) > :not(.today-card){margin-bottom:0}
  .today-card .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-bottom:0!important}
  #content:has(> .today-card):not(:has(> .today-hello)) > .today-card.rv-span2{grid-column:span 2}
  #content:has(> .today-card):not(:has(> .today-hello)) > .today-card.rv-span3{grid-column:1 / -1}
  .rv-board{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
  .rv-head{grid-column:1 / -1;display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:18px}
  .rv-head h2{font:700 20px var(--serif);color:var(--aos-ink);margin:0}
  .rv-head span{color:var(--muted);font-size:13px}
  .rv-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;min-width:0}
  .rv-card.rv-wide{grid-column:1 / -1}
  .rv-card h3{font:700 15px var(--serif);color:var(--aos-ink);margin:0 0 10px;display:flex;align-items:baseline}
  .rv-card h3 span{margin-left:auto;font:600 12px var(--sans);color:var(--muted)}
  .rv-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
  .rv-st{border:1px solid var(--line);border-top:4px solid var(--c);border-radius:12px;padding:8px 10px;min-width:0}
  .rv-st b{display:block;font:700 22px var(--sans);color:var(--aos-ink)}
  .rv-st span{display:block;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rv-st small{display:block;font:700 11.5px var(--sans);color:var(--danger)}
  .rv-note,.rv-empty{font-size:12.5px;color:var(--muted);margin:8px 0 0}
  .rv-list{list-style:none;margin:0;padding:0}
  .rv-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
  .rv-list li:first-child{border-top:0}
  .rv-list b{color:var(--ink);font-weight:600}
  .rv-list span{color:var(--muted);font-size:12.5px;margin-left:auto}
  .rv-list .rv-who{margin-left:0;font:700 11px var(--sans);background:var(--tint);border-radius:999px;padding:1px 8px;color:var(--muted)}
  .rv-scroll{overflow-x:auto}
  .rv-week{border-collapse:collapse;width:100%;font-size:13px}
  .rv-week th,.rv-week td{padding:6px 8px;text-align:center;border-top:1px solid var(--line)}
  .rv-week thead th{font:700 11px var(--sans);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-top:0}
  .rv-week tbody th{text-align:left;font-weight:600;color:var(--ink);white-space:nowrap;text-transform:none;letter-spacing:0;font-size:13px}
  .rv-week td.n1{background:#FBF1E6}.rv-week td.n2{background:#F6DDBF}.rv-week td.n3{background:#EDB97C;color:#fff}.rv-week td.n4{background:#D9822B;color:#fff}
  .rv-week td.zero{color:var(--danger)}.rv-week td.fut{color:var(--line)}.rv-week td.tot{font-weight:800;color:var(--aos-ink)}
}
@media (min-width:900px) and (max-width:1199px){.rv-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){#content:has(> .today-card):not(:has(> .today-hello)){grid-template-columns:repeat(3,minmax(0,1fr))}}
:root[data-theme="dark"] .rv-week td.n1{background:#3A2A14}:root[data-theme="dark"] .rv-week td.n2{background:#5A3C17}