/* =============================================================================
   mh-profile.css  -  HOME LANDING Phase H2: My Profile overlay (#ppProfOv).
   -----------------------------------------------------------------------------
   Ported pixel-faithfully from the mock (_handoff/mh-dashboard.html #ppProfOv
   block). Class names keep the mock's pp- namespace (rule 12: scoped names; the
   overlay is a single shared container, id #ppProfOv). Dark mode rides body.dark
   exactly like the rest of the shell. Plain hyphens only (rule 4).
   Colours resolve from the global design tokens in mh-theme.css.
   ========================================================================== */

@keyframes mhppfade { from { opacity: 0; } to { opacity: 1; } }

#ppProfOv{--pp-cream:#E8EBF0;--pp-cream2:#F1F4F7;--pp-surface:#fff;--pp-ink:#2A2F31;--pp-slate:#34454D;--pp-muted:#8A8B83;--pp-line:#D9DFE7;--pp-line2:#E7ECEA;--pp-green:#4E7C72;--pp-greend:#3D655D;--pp-clay:#C97B5A;--pp-clayd:#B5663F;--pp-gold:#D89B3D;--pp-danger:#B0463C;--pp-shsm:0 1px 3px rgba(52,69,77,.07);}
body.dark #ppProfOv{--pp-cream:#151C1A;--pp-cream2:#1C2421;--pp-surface:#222B27;--pp-ink:#EBE7DB;--pp-slate:#C9D2CC;--pp-muted:#9AA49C;--pp-line:#33403A;--pp-line2:#2A352F;--pp-shsm:0 2px 10px rgba(0,0,0,.3);}
#ppProfOv{position:fixed; inset:0; z-index:742; display:none; align-items:center; justify-content:center; background:rgba(26,46,41,.6); backdrop-filter:blur(3px); padding:24px;}
#ppProfOv.on{display:flex; animation:mhppfade .18s ease;}
#ppProfOv .pp-box{width:min(1000px,calc(97 * var(--mh-vw))); height:min(720px,calc(92 * var(--mh-vh))); background:var(--pp-cream); border-radius:22px; box-shadow:0 40px 90px rgba(20,32,28,.5); overflow:hidden; display:flex;}
#ppProfOv .pp-rail{width:312px; flex:none; position:relative; color:#E7EEEA; display:flex; flex-direction:column; overflow:hidden; background:radial-gradient(440px 300px at 110% -6%,rgba(110,156,144,.34),transparent 60%),linear-gradient(168deg,var(--mh-sidebar),var(--mh-sidebar-2) 56%,#1A2E29);}
#ppProfOv .pp-rtop{padding:30px 26px 14px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:6;}
#ppProfOv .pp-ph{width:112px; height:112px; border-radius:50%; position:relative; flex:none; background:linear-gradient(145deg,#4E7C72,#2E4A43); border:3px solid rgba(245,242,234,.35); display:grid; place-items:center;}
#ppProfOv .pp-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; display:none;}
#ppProfOv .pp-ph.has img{display:block;}
#ppProfOv .pp-ph .pp-ini{width:100%; height:100%; font-weight:800; font-size:34px; color:#fff; display:grid; place-items:center;}
#ppProfOv .pp-ph .pp-ini svg{width:56%; height:56%;}
#ppProfOv .pp-ph .pp-ov{position:absolute; inset:0; border-radius:50%; background:rgba(26,46,41,.58); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; opacity:0; transition:.16s; cursor:pointer; z-index:3; color:#fff;}
#ppProfOv .pp-ph:hover .pp-ov{opacity:1;}
#ppProfOv .pp-ph .pp-ov svg{width:23px; height:23px;} #ppProfOv .pp-ph .pp-ov span{font-size:9.5px; font-weight:800; letter-spacing:.06em;}
#ppProfOv .pp-cam{position:absolute; right:3px; bottom:3px; width:34px; height:34px; border-radius:50%; background:var(--mh-clay); border:2.5px solid var(--mh-sidebar); display:grid; place-items:center; color:#fff; cursor:pointer; z-index:4; box-shadow:0 4px 12px rgba(0,0,0,.25);}
#ppProfOv .pp-cam:hover{background:#B5663F;} #ppProfOv .pp-cam svg{width:16px; height:16px;}
#ppProfOv .pp-nm{font-family:var(--mh-font-head); font-weight:600; font-size:25px; color:#FCFAF4; margin-top:14px; white-space:nowrap;}
#ppProfOv .pp-rl{display:inline-flex; align-items:center; gap:7px; height:27px; padding:0 13px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-top:11px;}
#ppProfOv .pp-ti{font-size:14px; font-weight:600; color:rgba(234,241,237,.85); margin-top:11px;}
#ppProfOv .pp-preswrap{position:relative; margin-top:13px;}
#ppProfOv .pp-pres{display:inline-flex; align-items:center; gap:8px; height:33px; padding:0 15px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); font-size:12.5px; font-weight:700; cursor:pointer; color:#EAF1ED; font-family:inherit;}
#ppProfOv .pp-pres .pp-d{width:8px; height:8px; border-radius:50%; background:#7FD2A0; box-shadow:0 0 0 3px rgba(127,210,160,.25);}
#ppProfOv .pp-pres .pp-d.busy{background:var(--mh-clay); box-shadow:0 0 0 3px rgba(201,123,90,.25);} #ppProfOv .pp-pres .pp-d.away{background:#D89B3D; box-shadow:0 0 0 3px rgba(216,155,61,.28);} #ppProfOv .pp-pres .pp-d.na{background:#8A8B83; box-shadow:0 0 0 3px rgba(138,139,131,.25);}
#ppProfOv .pp-pres.open .pp-chev{transform:rotate(180deg);}
#ppProfOv .pp-presmenu{position:absolute; top:calc(100% + 8px); left:0; transform:translateY(-4px); width:max-content; background:var(--pp-surface); border-radius:12px; box-shadow:0 18px 50px rgba(20,32,28,.4); padding:5px; display:none; opacity:0; transition:.14s; z-index:9;}
#ppProfOv .pp-presmenu.on{display:block; opacity:1; transform:translateY(0);}
#ppProfOv .pp-presmenu button{display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; border:none; background:none; padding:8px 12px 8px 10px; border-radius:9px; font-family:inherit; font-size:13px; font-weight:600; color:var(--pp-ink); cursor:pointer; text-align:left; white-space:nowrap;}
#ppProfOv .pp-presmenu button:hover{background:var(--pp-cream2);}
#ppProfOv .pp-presmenu button.sel{background:rgba(78,124,114,.1); color:var(--pp-greend);}
#ppProfOv .pp-presmenu .pp-mdot{width:10px; height:10px; border-radius:50%; flex:none;}
#ppProfOv .pp-presmenu .pp-mdot.av{background:#4E7C72;} #ppProfOv .pp-presmenu .pp-mdot.busy{background:var(--mh-clay);} #ppProfOv .pp-presmenu .pp-mdot.away{background:#D89B3D;} #ppProfOv .pp-presmenu .pp-mdot.na{background:#8A8B83;}
#ppProfOv .pp-rstats{padding:6px 26px 12px; position:relative; z-index:1;}
#ppProfOv .pp-rstat{display:flex; align-items:center; justify-content:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1);}
#ppProfOv .pp-rstat:last-child{border-bottom:none;}
/* Fixed label column so the values line up in a clean left-aligned column (was right-pushed by space-between). */
#ppProfOv .pp-rstat .k{flex:0 0 128px; font-size:12.5px; color:rgba(234,241,237,.66); font-weight:500; display:flex; align-items:center; gap:9px;} #ppProfOv .pp-rstat .k svg{width:15px; height:15px; opacity:.8;}
#ppProfOv .pp-rstat .v{font-size:12.5px; font-weight:700; color:#F2F6F3; white-space:nowrap;} #ppProfOv .pp-rstat .v.ok{color:#9BE0BB;} #ppProfOv .pp-rstat .v.warn{color:#F0C475;}
#ppProfOv .pp-rfoot{margin-top:auto; padding:16px 22px; position:relative; z-index:1; display:flex; flex-direction:column; gap:9px;}
/* Rail-foot buttons (H3-0): reconciled to the Client Detail rail's Move-To glass-pill
   pattern. Values lifted VERBATIM from the mock's .cd-railbtn / .rb-ico, re-scoped here
   under .pp-railbtn (component scopes do not share cd- classes). Standby = glass pill;
   hover = clay gradient with the icon turning white. Single-line, full-width, no overflow.
   Shaker-directed upgrade BEYOND the mock (the mock's own #ppProfOv has only a flat
   .pp-signout and no Print badge); logged deviation. No new colors - all from the mock. */
#ppProfOv .pp-railbtn{width:100%; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 12px; border-radius:999px; cursor:pointer; border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.08)); color:#F6F2E8; font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.2px; line-height:1; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18); transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;}
#ppProfOv .pp-railbtn .rb-ico{width:17px; height:17px; flex:0 0 auto; color:#E7B873; transition:color .16s ease;}
#ppProfOv .pp-railbtn:hover{background:linear-gradient(180deg,#D08A63,#C97B5A); border-color:#C97B5A; color:#fff; box-shadow:0 10px 22px rgba(201,123,90,.38); transform:translateY(-1px);}
#ppProfOv .pp-railbtn:hover .rb-ico{color:#fff;}
#ppProfOv .pp-railbtn:active{transform:translateY(0);}
#ppProfOv .pp-main{flex:1; display:flex; flex-direction:column; min-width:0;}
#ppProfOv .pp-mh{flex:none; display:flex; align-items:center; gap:16px; padding:20px 26px 14px; border-bottom:1px solid var(--pp-line);}
#ppProfOv .pp-mh h3{font-family:var(--mh-font-head); font-weight:600; font-size:23px; color:var(--pp-ink); white-space:nowrap;}
#ppProfOv .pp-seg{margin-left:auto; display:inline-flex; background:var(--pp-cream2); border:1px solid var(--pp-line); border-radius:12px; padding:4px; gap:2px;}
#ppProfOv .pp-seg button{border:none; background:none; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:9px; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--pp-slate); cursor:pointer;}
#ppProfOv .pp-seg button.on{background:var(--mh-green); color:#fff;}
#ppProfOv .pp-body{flex:1; overflow-y:auto; padding:20px 26px 24px;}
#ppProfOv .pp-pane{display:none;} #ppProfOv .pp-pane.on{display:block; animation:mhppfade .18s ease;}
#ppProfOv .pp-grp{margin-bottom:22px;} #ppProfOv .pp-grp:last-child{margin-bottom:0;}
#ppProfOv .pp-grpt{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--pp-greend); margin-bottom:12px; display:flex; align-items:center; gap:8px;}
#ppProfOv .pp-grpt svg{width:16px; height:16px;}
#ppProfOv .pp-f2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
#ppProfOv .pp-ef .k{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--pp-muted); margin-bottom:5px;}
/* FILLED SOFT (PROMPT FS1 Phase 2): pp-ctrl is a field wrapper -> sage fill + transparent
   border, white surface + single ring on focus-within (inner input ring leak killed below). */
#ppProfOv .pp-ctrl{display:flex; align-items:center; gap:9px; min-height:44px; padding:0 14px; border:1px solid transparent; border-radius:var(--mh-ctrl-r); background:var(--mh-ctrl-fill); font-size:13.5px; font-weight:600; color:var(--pp-ink); transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;}
#ppProfOv .pp-ctrl:focus-within{background:var(--mh-surface); border-color:var(--mh-ctrl-focus-border); box-shadow:var(--mh-ctrl-focus-ring);}
#ppProfOv .pp-ctrl svg{width:15px; height:15px; color:var(--pp-muted);}
#ppProfOv .pp-ctrl .val{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#ppProfOv .pp-ctrl .val.empty{color:var(--pp-muted); font-style:italic;}
#ppProfOv .pp-ctrl .ed{font-size:12px; font-weight:800; color:var(--pp-greend); cursor:pointer;} #ppProfOv .pp-ctrl .ed:hover{text-decoration:underline;}
#ppProfOv .pp-ctrl.mono .val{font-family:var(--mono); font-weight:500; font-size:12.5px;}
#ppProfOv .pp-ctrl.locked{background:var(--mh-ctrl-fill-2); color:var(--pp-slate);}
#ppProfOv .pp-ctrl input{flex:1; min-width:0; border:none; outline:none; background:none; font:inherit; color:var(--pp-ink);}
#ppProfOv .pp-ctrl input:focus{background:none; border:none; box-shadow:none;}
#ppProfOv .pp-card{background:var(--pp-surface); border-radius:14px; padding:6px 18px; box-shadow:var(--pp-shsm);}
#ppProfOv .pp-tog{display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--pp-line2);} #ppProfOv .pp-tog:last-child{border-bottom:none;}
#ppProfOv .pp-tog .ic{width:36px; height:36px; border-radius:11px; background:var(--pp-cream); border:1px solid var(--pp-line); display:grid; place-items:center; color:var(--pp-greend); flex:none;} #ppProfOv .pp-tog .ic svg{width:16px; height:16px;}
#ppProfOv .pp-tog .tx{flex:1; min-width:0;} #ppProfOv .pp-tog .t{font-size:13.5px; font-weight:700; color:var(--pp-ink);} #ppProfOv .pp-tog .s{font-size:12px; color:var(--pp-muted); font-weight:500; margin-top:1px;}
#ppProfOv .pp-sw{width:44px; height:26px; border-radius:999px; border:none; background:var(--mh-ctrl-fill-2); position:relative; cursor:pointer; transition:background .2s ease,box-shadow .16s ease; flex:none;}
#ppProfOv .pp-sw::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(30,38,42,.3); transition:left .22s cubic-bezier(.34,1.4,.5,1);}
#ppProfOv .pp-sw[aria-checked="true"]{background:var(--mh-ctrl-accent);} #ppProfOv .pp-sw[aria-checked="true"]::after{left:21px;}
#ppProfOv .pp-sw.clay[aria-checked="true"]{background:var(--mh-clay);}
#ppProfOv .pp-sw:focus-visible{outline:none; box-shadow:var(--mh-ctrl-focus-ring);}
#ppProfOv .pp-lbtn{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:9px; border:1px solid var(--pp-line); background:var(--pp-cream2); font-family:inherit; font-size:12px; font-weight:800; color:var(--pp-greend); cursor:pointer;}
#ppProfOv .pp-lbtn:hover{background:var(--pp-cream);} #ppProfOv .pp-lbtn svg{width:13px; height:13px;} #ppProfOv .pp-lbtn.danger{color:var(--pp-danger);}
#ppProfOv .pp-lbtn:disabled{opacity:.5; cursor:not-allowed;}
#ppProfOv .pp-pill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 11px; border-radius:999px; font-size:11.5px; font-weight:800; background:rgba(78,124,114,.12); color:var(--pp-greend);}
#ppProfOv .pp-pill .pp-pd{width:6px; height:6px; border-radius:50%; background:var(--mh-green);}
#ppProfOv .pp-pill.warn{background:rgba(216,155,61,.15); color:var(--pp-clayd);} #ppProfOv .pp-pill.warn .pp-pd{background:var(--pp-gold);}
#ppProfOv .pp-note{font-size:12px; color:var(--pp-muted); font-weight:500; margin-top:11px; line-height:1.5;}
#ppProfOv .pp-act{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--pp-line2);} #ppProfOv .pp-act:last-child{border-bottom:none;}
#ppProfOv .pp-act .pp-d2{width:8px; height:8px; border-radius:50%; background:var(--mh-green); flex:none; box-shadow:0 0 0 3px rgba(78,124,114,.14);}
#ppProfOv .pp-act .tx{flex:1; min-width:0;} #ppProfOv .pp-act .t{font-size:13px; font-weight:700; color:var(--pp-ink);} #ppProfOv .pp-act .s{font-size:11.5px; color:var(--pp-muted); font-weight:500; margin-top:1px;} #ppProfOv .pp-act .when{font-size:11.5px; color:var(--pp-muted); font-weight:600; white-space:nowrap;}
#ppProfOv .pp-empty{padding:26px 8px; text-align:center; font-size:13px; color:var(--pp-muted); font-weight:600;}
#ppProfOv .pp-sechero{display:flex; align-items:center; gap:18px; padding:15px 18px; background:var(--pp-surface); border-radius:14px; box-shadow:var(--pp-shsm); margin-bottom:14px;}
#ppProfOv .pp-ring{width:88px; height:88px; position:relative; flex:none;}
#ppProfOv .pp-ring svg{width:88px; height:88px; transform:rotate(-90deg);}
#ppProfOv .pp-ring .trk{fill:none; stroke:var(--pp-line2); stroke-width:9;} #ppProfOv .pp-ring .mtr{fill:none; stroke:var(--mh-green); stroke-width:9; stroke-linecap:round;}
#ppProfOv .pp-ring .c{position:absolute; inset:0; display:grid; place-items:center; text-align:center;}
#ppProfOv .pp-ring .c b{font-size:22px; font-weight:800; color:var(--pp-greend); display:block; line-height:1;} #ppProfOv .pp-ring .c span{font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--pp-muted);}
#ppProfOv .pp-checks{flex:1;} #ppProfOv .pp-checks .ck{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--pp-ink); padding:4px 0;} #ppProfOv .pp-checks .ck svg{width:16px; height:16px; color:var(--mh-green);}
#ppProfOv .pp-curpill{margin-left:auto;}
#ppProfOv .pp-foot{flex:none; display:flex; align-items:center; padding:14px 26px; background:var(--pp-surface); border-top:1px solid var(--pp-line);}
#ppProfOv .pp-foot .note{font-size:12.5px; color:var(--pp-muted); font-weight:500; display:flex; align-items:center; gap:7px;} #ppProfOv .pp-foot .note svg{width:14px; height:14px; color:var(--pp-greend);}
#ppProfOv .pp-foot .acts{margin-left:auto; display:flex; gap:10px;}
#ppProfOv .pp-btn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:12px; font-family:inherit; font-size:13.5px; font-weight:700; cursor:pointer; border:none;} #ppProfOv .pp-btn svg{width:15px; height:15px;}
#ppProfOv .pp-btn.ghost{background:transparent; border:1px solid var(--pp-line); color:var(--pp-ink);} #ppProfOv .pp-btn.ghost:hover{background:var(--pp-cream2);}
#ppProfOv .pp-btn.prim{background:linear-gradient(135deg,var(--mh-sidebar),var(--mh-sidebar-2)); color:#F5F2EA;} #ppProfOv .pp-btn.prim.editing{background:var(--mh-clay);}
#ppProfOv .pp-btn.sm{height:36px; padding:0 14px; font-size:12.5px;}
@media(max-width:820px){ #ppProfOv .pp-box{flex-direction:column; height:92vh;} #ppProfOv .pp-rail{width:100%; flex:none;} #ppProfOv .pp-f2{grid-template-columns:1fr;} }

/* ---- My Requests pane: MOVED OUT Aug 8 2026. ----
   This block styled the My Requests list while it was a TAB inside this overlay, so
   every rule was scoped to #ppProfOv - the overlay's own id. The list is now its own
   page at /requests and that id is nowhere on it, so these rules could only ever have
   stopped applying silently. They moved WITH the component, re-scoped to .mrq-root, and
   now live in mh-usermenu.css. Deleted here rather than left behind: a stylesheet that
   still describes a surface it no longer reaches is the next person's wrong lead. ---- */

/* ---- Shared PhotoStudio options popover ----
   The popover (.cd-photomenu / .cd-pmi / .cd-photoerr / .cd-hidden-file) is now a
   SINGLE GLOBAL .mh-app .cd-* rule in mh-clientdetail.css, shared by #clDetail and
   #ppProfOv alike; the former #ppProfOv copy here was removed (de-dup). Only the
   avatar trigger cursor stays scoped. The crop/camera/lightbox/delete modals reuse
   the GLOBAL .mh-app .cd-* modal styles too. ---- */
#ppProfOv .pp-ph{cursor:pointer;}

/* ---- Print badge: a clean staff ID card, screen-hidden, print-only ----------
   Gated on body.pp-badge-printing so it NEVER interferes with the existing
   client QR pass print (mhPrintPass / body.cd-printing). MHprintBadge adds the
   class, prints, then removes it. */
#ppBadgePrint{display:none;}
@media print{
  body.pp-badge-printing * { visibility:hidden !important; }
  body.pp-badge-printing #ppBadgePrint, body.pp-badge-printing #ppBadgePrint *{ visibility:visible !important; }
  body.pp-badge-printing #ppBadgePrint{display:block !important; position:fixed; inset:0; margin:0; padding:0; background:#fff; z-index:99999;}
  #ppBadgePrint .bdg{width:320px; margin:48px auto; border:1px solid #C9CFCB; border-radius:18px; overflow:hidden; font-family:var(--mh-font-body); color:#1b1b1b; box-shadow:none;}
  #ppBadgePrint .bdg-top{background:linear-gradient(168deg,#2E4A43,#213A33); color:#F5F2EA; padding:22px 20px 18px; text-align:center;}
  #ppBadgePrint .bdg-org{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; opacity:.85;}
  #ppBadgePrint .bdg-av{width:96px; height:96px; border-radius:50%; margin:14px auto 0; background:linear-gradient(145deg,#4E7C72,#2E4A43); display:grid; place-items:center; font-size:34px; font-weight:800; color:#fff; border:3px solid rgba(245,242,234,.4); overflow:hidden;}
  #ppBadgePrint .bdg-av img{width:100%; height:100%; object-fit:cover;}
  #ppBadgePrint .bdg-av svg{width:46%; height:46%;}
  #ppBadgePrint .bdg-nm{font-family:var(--mh-font-head); font-size:22px; font-weight:700; margin-top:12px;}
  #ppBadgePrint .bdg-rl{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; opacity:.9; margin-top:3px;}
  #ppBadgePrint .bdg-body{padding:16px 20px 20px;}
  #ppBadgePrint .bdg-row{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #ECE7DC; font-size:12.5px;}
  #ppBadgePrint .bdg-row:last-child{border-bottom:none;}
  #ppBadgePrint .bdg-row .k{color:#8A8B83; font-weight:600;} #ppBadgePrint .bdg-row .v{font-weight:700;}
  #ppBadgePrint .bdg-foot{text-align:center; font-size:10.5px; color:#8A8B83; padding:0 20px 18px; line-height:1.5;}
}

/* =============================================================================
   MY PROFILE as DetailShell HOST #6 (Aug 2 2026)
   -----------------------------------------------------------------------------
   Scoped #mhDetail, prefixed .mp-* . Every GENERIC name was avoided deliberately:
   inside #mhDetail a name like .row or .card collides with the shell's own
   vocabulary (the Bootstrap .row lesson). Everything binds to the shell's --f-*,
   --ink-* and --brand-* tokens, so DARK MODE IS FREE - there is not one light
   literal below except the SEMANTIC presence dots, which are deliberately fixed.
   The old #ppProfOv block above is now dead for the overlay but is LEFT because
   #ppBadgePrint (the print-only badge) still lives inside it.
   ============================================================================= */
#mhDetail .mp-rows{display:flex; flex-direction:column;}
#mhDetail .mp-row{display:flex; align-items:baseline; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--f-rest-bd); font-size:14px;}
#mhDetail .mp-row:last-child{border-bottom:none;}
#mhDetail .mp-row .k{flex:0 0 168px; color:var(--ink-3); font-weight:600; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.04em;}
#mhDetail .mp-row .v{flex:1 1 auto; color:var(--ink-1); font-weight:500; min-width:0;
  overflow-wrap:anywhere; display:flex; align-items:center; gap:8px;}
#mhDetail .mp-row .v.ph{color:var(--ink-4); font-weight:400; font-style:italic;}
/* A locked row is DIMMED, never hidden - hiding it would read as "no value held". */
#mhDetail .mp-row.locked .v{color:var(--ink-3);}
#mhDetail .mp-row .mp-lock{display:inline-flex; width:14px; height:14px; color:var(--ink-4); flex:none;}
#mhDetail .mp-row .mp-lock svg{width:100%; height:100%;}

/* ---- toggle / status rows (settings, sessions, activity) ---- */
#mhDetail .mp-togs{display:flex; flex-direction:column;}
#mhDetail .mp-tog{display:flex; align-items:center; gap:13px; padding:12px 0;
  border-bottom:1px solid var(--f-rest-bd);}
#mhDetail .mp-tog:last-child{border-bottom:none;}
#mhDetail .mp-tog .ic{display:inline-flex; width:19px; height:19px; color:var(--ink-3); flex:none;}
#mhDetail .mp-tog .ic svg{width:100%; height:100%;}
#mhDetail .mp-tog .tx{flex:1 1 auto; min-width:0;}
#mhDetail .mp-tog .tx .t{font-size:14px; font-weight:600; color:var(--ink-1);}
#mhDetail .mp-tog .tx .s{font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.45;}

#mhDetail .mp-sw{width:42px; height:24px; border-radius:999px; border:1px solid var(--f-rest-bd);
  background:var(--f-rest-bg); position:relative; cursor:pointer; flex:none; padding:0;
  transition:background .16s ease, border-color .16s ease;}
#mhDetail .mp-sw::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:left .16s ease;}
#mhDetail .mp-sw.on{background:var(--brand-600); border-color:var(--brand-600);}
#mhDetail .mp-sw.on::after{left:20px;}
#mhDetail .mp-sw.clay.on{background:#C97B5A; border-color:#C97B5A;}

#mhDetail .mp-pill{display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700;
  background:var(--f-rest-bg); color:var(--ink-2); border:1px solid var(--f-rest-bd);}
#mhDetail .mp-pill .mp-pd{width:6px; height:6px; border-radius:50%; background:var(--brand-600);}
#mhDetail .mp-pill.warn .mp-pd{background:#D89B3D;}

#mhDetail .mp-act{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--f-rest-bd);}
#mhDetail .mp-act:last-child{border-bottom:none;}
#mhDetail .mp-act .mp-d2{width:7px; height:7px; border-radius:50%; background:var(--brand-600); flex:none;}
#mhDetail .mp-act .tx{flex:1 1 auto; min-width:0;}
#mhDetail .mp-act .tx .t{font-size:13.5px; font-weight:600; color:var(--ink-1);}
#mhDetail .mp-act .tx .s{font-size:12px; color:var(--ink-3); margin-top:2px;}
#mhDetail .mp-act .when{font-size:11.5px; color:var(--ink-4); flex:none;}

/* ---- availability picker (rail extra) ----
   Lives in .sum-extra, so it sits on the RAIL's pine gradient, not the pane. Its
   colours are therefore rail-local on purpose and do not read app tokens. */
#mhDetail .mp-preswrap{position:relative;}
#mhDetail .mp-pres{display:flex; align-items:center; gap:8px; width:100%; cursor:pointer;
  padding:8px 12px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); color:#EAF1EE;}
#mhDetail .mp-pres:hover{background:rgba(255,255,255,.16);}
#mhDetail .mp-pres .mp-pl{flex:1 1 auto; text-align:left;}
#mhDetail .mp-pres .mp-chev{display:inline-flex; width:14px; height:14px; opacity:.8;}
#mhDetail .mp-pres .mp-chev svg{width:100%; height:100%;}
#mhDetail .mp-pres.open .mp-chev{transform:rotate(180deg);}
#mhDetail .mp-d{width:8px; height:8px; border-radius:50%; background:#5FBF8F; flex:none;}
#mhDetail .mp-d.busy{background:#C9564B;} #mhDetail .mp-d.away{background:#D89B3D;}
#mhDetail .mp-d.na{background:#8A8B83;}
#mhDetail .mp-presmenu{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:var(--f-focus-bg,#fff); border:1px solid var(--f-rest-bd); border-radius:12px;
  box-shadow:0 12px 30px rgba(20,35,32,.22); padding:5px; display:flex; flex-direction:column;}
#mhDetail .mp-presmenu button{display:flex; align-items:center; gap:9px; padding:8px 10px;
  border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-1); background:none;
  border:none; cursor:pointer; text-align:left;}
#mhDetail .mp-presmenu button:hover{background:var(--f-rest-bg);}
#mhDetail .mp-presmenu button.sel{background:var(--f-rest-bg); color:var(--brand-600);}
#mhDetail .mp-mdot{width:8px; height:8px; border-radius:50%; flex:none; background:#5FBF8F;}
#mhDetail .mp-mdot.busy{background:#C9564B;} #mhDetail .mp-mdot.away{background:#D89B3D;}
#mhDetail .mp-mdot.na{background:#8A8B83;}

@media (max-width:720px){
  #mhDetail .mp-row{flex-direction:column; gap:3px;}
  #mhDetail .mp-row .k{flex:none;}
}