/* ============================================================================
   CLIENT DETAIL OVERLAY (Phase 3) - ported faithfully from _handoff/mh-dashboard.html
   (#clDetail block). All selectors scoped under .mh-app; the mock's global input
   rules and helper classes are scoped to the overlay so nothing leaks app-wide.
   ========================================================================== */
.mh-app #clDetail{position:fixed; inset:0; background:rgba(33,42,38,.55); backdrop-filter:blur(4px); display:none; z-index:120;}
.mh-app #clDetail.show{display:grid; place-items:center; padding:20px;}
.mh-app #clDetail .cdbox{width:min(1520px,calc(97 * var(--mh-vw))); height:min(calc(93 * var(--mh-vh)),920px); background:var(--mh-cream); border-radius:20px; overflow:hidden; display:flex; box-shadow:0 40px 110px rgba(20,34,30,.5); animation:dzfade .25s ease;}
@keyframes dzfade{from{opacity:0;} to{opacity:1;}}
/* left vitals rail (pine) */
.mh-app #clDetail .c-side{width:316px; flex:none; position:relative; color:#E7EEEA; overflow-y:auto; padding:26px 24px 24px; scrollbar-width:thin; background:radial-gradient(420px 260px at 110% -6%,rgba(110,156,144,.3),transparent 60%),linear-gradient(165deg,var(--mh-sidebar),var(--mh-sidebar-2) 55%,#16261F);}
.mh-app #clDetail .c-side::-webkit-scrollbar{width:8px;} .mh-app #clDetail .c-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:6px;}
.mh-app #clDetail .mh-photo{position:relative; width:112px; height:112px; border-radius:50%; margin:0 auto 14px; cursor:pointer; background:linear-gradient(150deg,#5E8C81,#2F4640); border:2.5px solid rgba(234,241,237,.5); box-shadow:inset 0 0 0 3px rgba(255,255,255,.16), 0 6px 18px rgba(0,0,0,.26); display:grid; place-items:center;}
.mh-app #clDetail .mh-ini{width:100%; height:100%; font-family:var(--mh-font-head); font-weight:600; font-size:30px; color:#F4F0E6; display:grid; place-items:center;}
.mh-app #clDetail .mh-ini svg{width:46%; height:46%;}
.mh-app #clDetail .mh-photo img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; display:none;}
.mh-app #clDetail .mh-photo.has img{display:block;} .mh-app #clDetail .mh-photo.has .mh-ini{display:none;}
.mh-app #clDetail .mh-ov{position:absolute; inset:0; border-radius:50%; background:rgba(20,32,28,.55); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; opacity:0; transition:.18s;}
.mh-app #clDetail .mh-ov svg{width:16px; height:16px;}
.mh-app #clDetail .mh-photo:hover .mh-ov{opacity:1;}
.mh-app #clDetail .mh-btn{position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%; background:var(--mh-clay); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 2.5px var(--mh-sidebar);}
.mh-app #clDetail .mh-btn svg{width:13px; height:13px;}
/* One-time "change profile photo" arrival hint: a clay callout below the photo with an
   up-arrow toward the camera, plus a pulsing clay glow on the camera button itself.
   Clay matches the .mh-btn camera. Brand tokens only. */
.mh-app #clDetail .mh-photo .cd-hint{position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); z-index:6; background:var(--mh-clay); color:#fff; font-size:12px; font-weight:700; line-height:1.2; white-space:nowrap; padding:8px 12px; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.3); cursor:pointer; animation:cdHintIn .2s ease both;}
.mh-app #clDetail .mh-photo .cd-hint::before{content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(45deg); width:10px; height:10px; background:var(--mh-clay); border-radius:2px;}
.mh-app #clDetail .mh-photo.hinting .mh-btn{animation:cdCamPulse 1.3s ease-in-out infinite;}
@keyframes cdHintIn{from{opacity:0; transform:translateX(-50%) translateY(-4px);} to{opacity:1; transform:translateX(-50%) translateY(0);}}
@keyframes cdCamPulse{0%,100%{box-shadow:0 0 0 2.5px var(--mh-sidebar), 0 0 0 4px rgba(201,123,90,0);} 50%{box-shadow:0 0 0 2.5px var(--mh-sidebar), 0 0 0 10px rgba(201,123,90,.45);}}
@media (prefers-reduced-motion: reduce){
  .mh-app #clDetail .mh-photo .cd-hint{animation:none;}
  .mh-app #clDetail .mh-photo.hinting .mh-btn{animation:none; box-shadow:0 0 0 2.5px var(--mh-sidebar), 0 0 0 7px rgba(201,123,90,.45);}
}

/* ===== Profile photo options popover (anchored under the rail photo) =====
   SINGLE SOURCE: this shared PhotoStudio popover renders on BOTH Client Detail
   (#clDetail) and My Profile (#ppProfOv), so the rule is GLOBAL (.mh-app .cd-*),
   not per-surface. The earlier #ppProfOv copy in mh-profile.css was deleted; this
   is the one source. Brand tokens only. Click-away + Esc are bound in
   photocapture.js; each item also closes the menu via its own handler. */
.mh-app .cd-photomenu{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); z-index:8; width:max-content; max-width:260px; background:var(--mh-cream); border:1px solid var(--mh-line); border-radius:12px; box-shadow:0 16px 42px rgba(20,34,30,.34); padding:6px; display:flex; flex-direction:column; gap:2px; animation:cdPmIn .16s ease both;}
.mh-app .cd-photomenu::before{content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:11px; height:11px; background:var(--mh-cream); border-left:1px solid var(--mh-line); border-top:1px solid var(--mh-line); border-radius:2px;}
.mh-app .cd-pmi{display:flex; align-items:center; justify-content:flex-start; gap:11px; width:100%; box-sizing:border-box; margin:0; padding:9px 14px; border:none; border-radius:8px; background:transparent; color:var(--mh-ink); font-family:var(--mh-font-head); font-size:13.5px; font-weight:600; text-align:left; cursor:pointer; transition:background .12s ease, color .12s ease;}
.mh-app .cd-pmi:hover, .mh-app .cd-pmi:focus-visible{background:var(--mh-cream-2); color:var(--mh-green-d); outline:none;}
.mh-app .cd-pmi svg{width:17px; height:17px; flex:none; color:var(--mh-green);}
.mh-app .cd-pmi.cd-pmi-danger{color:var(--mh-danger,#B0463C);}
.mh-app .cd-pmi.cd-pmi-danger svg{color:var(--mh-danger,#B0463C);}
.mh-app .cd-pmi.cd-pmi-danger:hover, .mh-app .cd-pmi.cd-pmi-danger:focus-visible{background:rgba(176,70,60,.1); color:var(--mh-danger,#B0463C);}
@keyframes cdPmIn{from{opacity:0; transform:translateX(-50%) translateY(-5px);} to{opacity:1; transform:translateX(-50%) translateY(0);}}
@media (prefers-reduced-motion: reduce){ .mh-app .cd-photomenu{animation:none;} }

/* Inline upload rejection (wrong type / oversize). Danger callout below the photo,
   click to dismiss. Global (shared by both surfaces), same as the popover above. */
.mh-app .cd-photoerr{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%); z-index:9; width:230px; background:var(--mh-danger,#B0463C); color:#fff; font-size:11.5px; font-weight:700; line-height:1.35; text-align:center; padding:9px 12px; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.32); cursor:pointer;}
.mh-app .cd-photoerr::before{content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(45deg); width:10px; height:10px; background:var(--mh-danger,#B0463C); border-radius:2px;}

/* ===== Shared crop studio (used by Upload now, Camera in Phase B) =====
   Rendered OUTSIDE #clDetail (which has backdrop-filter + overflow:hidden) so
   nothing clips it. z-index 100045 sits above the photo lightbox (.plb 100040)
   and below the QR pass. Hand-rolled canvas cropper; circular guide via a ring
   overlay that dims the square corners. Brand tokens; light + dark via tokens. */
.mh-app .cd-cropmodal{position:fixed; inset:0; z-index:100045; background:rgba(20,32,28,.62); display:grid; place-items:center; padding:20px; animation:cdCmFade .2s ease both;}
.mh-app .cd-cropbox{width:min(420px,calc(94 * var(--mh-vw))); background:var(--mh-cream); border-radius:18px; overflow:hidden; box-shadow:0 30px 90px rgba(20,34,30,.5); display:flex; flex-direction:column; animation:cdCmPop .24s cubic-bezier(.2,.7,.3,1.2) both;}
.mh-app .cd-crophead{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px;}
.mh-app .cd-crophead h3{margin:0; font-family:var(--mh-font-head); font-weight:600; font-size:17px; color:var(--mh-ink);}
.mh-app .cd-crophead .x{border:none; background:transparent; color:var(--mh-muted); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; border-radius:8px;}
.mh-app .cd-crophead .x:hover{color:var(--mh-ink); background:var(--mh-cream-2);}
.mh-app .cd-cropbody{padding:0 18px 4px; display:flex; flex-direction:column; gap:14px;}
.mh-app .cd-croperr{font-size:12px; font-weight:700; color:var(--mh-danger,#B0463C); background:rgba(176,70,60,.1); border:1px solid rgba(176,70,60,.3); border-radius:10px; padding:8px 11px;}
.mh-app .cd-cropstage-wrap{position:relative; width:min(320px,calc(78 * var(--mh-vw))); height:min(320px,calc(78 * var(--mh-vw))); margin:2px auto 0; border-radius:14px; overflow:hidden; background:#1b2b25;}
.mh-app .cd-cropstage{position:absolute; inset:0;}
.mh-app .cd-cropstage canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab;}
.mh-app .cd-cropstage canvas:active{cursor:grabbing;}
.mh-app .cd-cropring{position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow:0 0 0 9999px rgba(20,32,28,.55);}
.mh-app .cd-cropring::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.92);}
.mh-app .cd-cropctrls{display:flex; align-items:center; gap:12px;}
.mh-app .cd-cropzoom{flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:999px; background:var(--mh-line); outline:none; cursor:pointer;}
.mh-app .cd-cropzoom::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--mh-green); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer;}
.mh-app .cd-cropzoom::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--mh-green); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer;}
.mh-app .cd-cropreset{flex:none; border:1px solid var(--mh-line); background:var(--mh-cream-2); color:var(--mh-green-d); font-family:var(--mh-font-head); font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:9px; cursor:pointer; transition:background .12s ease;}
.mh-app .cd-cropreset:hover{background:var(--mh-cream);}
.mh-app .cd-crophint{margin:0 0 2px; font-size:11.5px; color:var(--mh-muted); text-align:center;}
.mh-app .cd-cropfoot{display:flex; justify-content:flex-end; gap:10px; padding:14px 18px 18px;}
.mh-app .cd-cropfoot .cd-btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--mh-font-head); font-size:13px; font-weight:800; border-radius:999px; padding:10px 20px; cursor:pointer; border:1.5px solid var(--mh-line); background:var(--mh-surface); color:var(--mh-ink); transition:.16s;}
.mh-app .cd-cropfoot .cd-btn:hover{border-color:var(--mh-green); color:var(--mh-green-d);}
.mh-app .cd-cropfoot .cd-btn-primary{background:var(--mh-green); border-color:var(--mh-green); color:#fff; box-shadow:0 8px 18px rgba(78,124,114,.28);}
.mh-app .cd-cropfoot .cd-btn-primary:hover{background:var(--mh-green-d); border-color:var(--mh-green-d); color:#fff; transform:translateY(-1px);}
.mh-app .cd-cropfoot .cd-btn:disabled{opacity:.6; cursor:default; transform:none;}
@keyframes cdCmFade{from{opacity:0;} to{opacity:1;}}
@keyframes cdCmPop{from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);}}
@media (prefers-reduced-motion: reduce){ .mh-app .cd-cropmodal, .mh-app .cd-cropbox{animation:none;} }

/* ===== Camera capture studio (Phase B) =====
   Sibling of #clDetail (escapes its backdrop-filter containing block + .cdbox clip),
   same z-discipline as the crop studio. Live <video> with a circular face-guide; the
   capture is baked (filter + mirror) then handed to the crop studio. Brand tokens only;
   light + dark via tokens; reduced-motion respected. */
.mh-app .cd-cammodal{position:fixed; inset:0; z-index:100045; background:rgba(20,32,28,.62); display:grid; place-items:center; padding:20px; animation:cdCmFade .2s ease both;}
.mh-app .cd-cambox{width:min(440px,calc(94 * var(--mh-vw))); background:var(--mh-cream); border-radius:18px; overflow:hidden; box-shadow:0 30px 90px rgba(20,34,30,.5); display:flex; flex-direction:column; animation:cdCmPop .24s cubic-bezier(.2,.7,.3,1.2) both;}
.mh-app .cd-camhead{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px;}
.mh-app .cd-camhead h3{margin:0; font-family:var(--mh-font-head); font-weight:600; font-size:17px; color:var(--mh-ink);}
.mh-app .cd-camhead .x{border:none; background:transparent; color:var(--mh-muted); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; border-radius:8px;}
.mh-app .cd-camhead .x:hover{color:var(--mh-ink); background:var(--mh-cream-2);}
.mh-app .cd-cambody{padding:0 18px 4px; display:flex; flex-direction:column; gap:13px;}
.mh-app .cd-camstage{position:relative; width:min(100%,calc(56 * var(--mh-vh))); aspect-ratio:1/1; margin:2px auto 0; border-radius:14px; overflow:hidden; background:#1b2b25;}
.mh-app .cd-camstage video, .mh-app .cd-camstage .cd-camstill{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#1b2b25;}
.mh-app .cd-camstage video.hide{display:none;}
.mh-app .cd-camstage .cd-camstill{display:none;}
.mh-app .cd-camstage.reviewing .cd-camstill{display:block;}
.mh-app .cd-camguide{position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow:0 0 0 9999px rgba(20,32,28,.4);}
.mh-app .cd-camguide::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,255,255,.85);}
.mh-app .cd-camstage.reviewing .cd-camguide{display:none;}
.mh-app .cd-camdev{width:100%; box-sizing:border-box; height:38px; padding:0 11px; border:1px solid var(--mh-line); border-radius:10px; background:var(--mh-surface); color:var(--mh-ink); font-family:var(--mh-font-head); font-size:13px; font-weight:600; cursor:pointer;}
.mh-app .cd-camadj{display:flex; flex-direction:column; gap:8px;}
.mh-app .cd-camadj label{display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700; color:var(--mh-muted); text-transform:uppercase; letter-spacing:.03em;}
.mh-app .cd-camadj label span{flex:none; width:74px;}
.mh-app .cd-camadj input[type=range]{flex:1; -webkit-appearance:none; appearance:none; height:5px; border-radius:999px; background:var(--mh-line); outline:none; cursor:pointer;}
.mh-app .cd-camadj input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:17px; height:17px; border-radius:50%; background:var(--mh-green); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer;}
.mh-app .cd-camadj input[type=range]::-moz-range-thumb{width:17px; height:17px; border-radius:50%; background:var(--mh-green); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer;}
.mh-app .cd-camrow{display:flex; gap:9px;}
.mh-app .cd-camtoggle{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--mh-line); background:var(--mh-cream-2); color:var(--mh-green-d); font-family:var(--mh-font-head); font-size:12.5px; font-weight:700; padding:8px 12px; border-radius:10px; cursor:pointer; transition:.12s;}
.mh-app .cd-camtoggle:hover{background:var(--mh-cream); border-color:var(--mh-green);}
.mh-app .cd-camtoggle.on{background:var(--mh-green); border-color:var(--mh-green); color:#fff;}
.mh-app .cd-camerr{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:18px 6px 8px;}
.mh-app .cd-camerr svg{width:42px; height:42px; color:var(--mh-clay);}
.mh-app .cd-camerr p{margin:0; font-size:13.5px; font-weight:600; color:var(--mh-ink); line-height:1.45; max-width:300px;}
.mh-app .cd-camerr-acts{display:flex; gap:9px; margin-top:4px;}
.mh-app .cd-camhint{margin:0 0 2px; font-size:11.5px; color:var(--mh-muted); text-align:center;}
.mh-app .cd-camfoot{display:flex; justify-content:flex-end; gap:10px; padding:14px 18px 18px;}
.mh-app .cd-cambox .cd-btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--mh-font-head); font-size:13px; font-weight:800; border-radius:999px; padding:10px 20px; cursor:pointer; border:1.5px solid var(--mh-line); background:var(--mh-surface); color:var(--mh-ink); transition:.16s;}
.mh-app .cd-cambox .cd-btn:hover{border-color:var(--mh-green); color:var(--mh-green-d);}
.mh-app .cd-cambox .cd-btn-primary{background:var(--mh-green); border-color:var(--mh-green); color:#fff; box-shadow:0 8px 18px rgba(78,124,114,.28);}
.mh-app .cd-cambox .cd-btn-primary:hover{background:var(--mh-green-d); border-color:var(--mh-green-d); color:#fff; transform:translateY(-1px);}
.mh-app .cd-cambox .cd-btn:disabled{opacity:.6; cursor:default; transform:none;}
@media (prefers-reduced-motion: reduce){ .mh-app .cd-cammodal, .mh-app .cd-cambox{animation:none;} }

/* ===== Delete photo confirm (Phase C) =====
   Sibling of #clDetail; compact brand dialog. Danger action uses the semantic token. */
.mh-app .cd-confirm{position:fixed; inset:0; z-index:100046; background:rgba(20,32,28,.62); display:grid; place-items:center; padding:20px; animation:cdCmFade .2s ease both;}
.mh-app .cd-confirmbox{width:min(360px,calc(94 * var(--mh-vw))); background:var(--mh-cream); border-radius:18px; padding:24px 22px 20px; text-align:center; box-shadow:0 30px 90px rgba(20,34,30,.5); animation:cdCmPop .24s cubic-bezier(.2,.7,.3,1.2) both;}
.mh-app .cd-confirm-ic{width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center; background:rgba(176,70,60,.12); color:var(--mh-danger,#B0463C);}
.mh-app .cd-confirm-ic svg{width:26px; height:26px;}
.mh-app .cd-confirmbox h3{margin:0 0 6px; font-family:var(--mh-font-head); font-weight:600; font-size:18px; color:var(--mh-ink);}
.mh-app .cd-confirmbox p{margin:0 0 18px; font-size:12.5px; line-height:1.5; color:var(--mh-muted);}
.mh-app .cd-confirm-acts{display:flex; justify-content:center; gap:10px;}
.mh-app .cd-confirm-acts .cd-btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--mh-font-head); font-size:13px; font-weight:800; border-radius:999px; padding:10px 20px; cursor:pointer; border:1.5px solid var(--mh-line); background:var(--mh-surface); color:var(--mh-ink); transition:.16s;}
.mh-app .cd-confirm-acts .cd-btn:hover{border-color:var(--mh-green); color:var(--mh-green-d);}
.mh-app .cd-confirm-acts .cd-btn-danger{background:var(--mh-danger,#B0463C); border-color:var(--mh-danger,#B0463C); color:#fff; box-shadow:0 8px 18px rgba(176,70,60,.3);}
.mh-app .cd-confirm-acts .cd-btn-danger:hover{background:#9c3c33; border-color:#9c3c33; color:#fff; transform:translateY(-1px);}
.mh-app .cd-confirm-acts .cd-btn:disabled{opacity:.6; cursor:default; transform:none;}
@media (prefers-reduced-motion: reduce){ .mh-app .cd-confirm, .mh-app .cd-confirmbox{animation:none;} }

.mh-app #clDetail .c-eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(234,241,237,.6); margin:0 0 6px; text-align:left;}
/* Flag inline before the name; hanging indent (padding-left + equal negative text-indent)
   keeps a wrapped surname aligned under the first name, not under the flag. */
.mh-app #clDetail .c-name{font-family:var(--mh-font-head); font-weight:600; font-size:25px; line-height:1.12; margin:0 0 12px; color:#FCFAF4; text-align:left; padding-left:34px; text-indent:-34px;}
.mh-app #clDetail .c-name-flag{width:26px; height:19px; border-radius:3px; margin-right:8px; vertical-align:-3px; object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,.2);}
.mh-app #clDetail .c-badges{display:flex; flex-wrap:wrap; gap:7px; justify-content:center;}
.mh-app #clDetail .hchip{display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 11px; border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); color:#E7EEEA; font-size:12px; font-weight:600; white-space:nowrap;}
.mh-app #clDetail .hchip.mono{font-family:var(--mono); font-weight:500; font-size:11.5px;}
.mh-app #clDetail .hchip svg{width:13px; height:13px; opacity:.8;}
/* the status chip is now the global glass pill (.st.st--glass.st--hero); see status.css */
/* rail Move To + Status pill pair */
.mh-app #clDetail .cd-railrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px auto 10px;width:100%;max-width:300px;}
.mh-app #clDetail .cd-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;}
.mh-app #clDetail .cd-railbtn .rb-ico{width:17px;height:17px;flex:0 0 auto;color:#E7B873;transition:color .16s ease;}
.mh-app #clDetail .cd-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);}
.mh-app #clDetail .cd-railbtn:hover .rb-ico{color:#fff;}
.mh-app #clDetail .cd-railbtn:active{transform:translateY(0);}
.mh-app #clDetail .cd-railrow .cd-statuswrap{display:flex;width:100%;}
.mh-app #clDetail .cd-railrow .cd-statuswrap .cd-railbtn{width:100%;max-width:none;}
/* kiosk QR card */
.mh-app #clDetail .c-kiosk{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:10px 14px 10px 10px; margin:16px 0 0; cursor:pointer; transition:.16s;}
.mh-app #clDetail .c-kiosk:hover{background:rgba(255,255,255,.12); transform:translateY(-1px);}
.mh-app #clDetail .qr-frame{position:relative; width:54px; height:54px; background:#fff; border-radius:10px; padding:4px; flex:none;}
.mh-app #clDetail .qr-frame .cd-qr{position:absolute; inset:4px;}
.mh-app #clDetail .qr-frame .cd-qr svg{width:100%; height:100%; display:block;}
.mh-app #clDetail .qr-logo{position:absolute; inset:0; margin:auto; width:17px; height:17px; background:linear-gradient(135deg,#2E4A43,#213A33); border-radius:5px; padding:2px; display:grid; place-items:center; box-shadow:0 0 0 1.8px #fff;}
.mh-app #clDetail .qr-logo img{width:100%; height:100%; object-fit:contain;}
.mh-app #clDetail .c-kiosk-tx{display:flex; flex-direction:column; gap:2px; min-width:0;}
.mh-app #clDetail .c-kiosk-lab{font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(234,241,237,.6);}
.mh-app #clDetail .c-kiosk-code{font-family:var(--mono); font-size:13px; font-weight:500; color:#FCFAF4;}
.mh-app #clDetail .c-kiosk-act{display:flex; align-items:center; gap:5px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(234,241,237,.5);}
.mh-app #clDetail .c-kiosk-act svg{width:11px; height:11px;}
.mh-app #clDetail .c-sec-lab{font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(234,241,237,.5); margin:20px 0 8px;}
.mh-app #clDetail .c-vital{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px;}
.mh-app #clDetail .c-vital:last-child{border-bottom:none;}
.mh-app #clDetail .c-vital .k{color:rgba(234,241,237,.62); font-weight:500;}
.mh-app #clDetail .c-vital .v{color:#F2F6F3; font-weight:700; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mh-app #clDetail .c-health{display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:13px; padding:12px 14px; margin-top:6px;}
.mh-app #clDetail .c-health .ring2{position:relative; width:54px; height:54px; flex:none;}
.mh-app #clDetail .c-health .ring2 svg{width:54px; height:54px;}
.mh-app #clDetail .c-health .ring2 b{position:absolute; inset:0; display:grid; place-content:center; font-size:13px; font-weight:800; color:#F2F6F3;}
.mh-app #clDetail .c-health .tx{min-width:0;}
.mh-app #clDetail .c-health .tx .t{font-size:12.5px; font-weight:700; color:#F2F6F3;}
.mh-app #clDetail .c-health .tx .s{font-size:11px; color:rgba(234,241,237,.6); font-weight:500; margin-top:2px;}
.mh-app #clDetail .c-health .tx .s b{color:#F2F6F3;}
.mh-app #clDetail .c-alert{display:flex; gap:11px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.mh-app #clDetail .c-alert:last-child{border-bottom:none;}
.mh-app #clDetail .c-alert .ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none;}
.mh-app #clDetail .c-alert .ic svg{width:15px; height:15px;}
.mh-app #clDetail .c-alert.d .ic{background:rgba(224,140,128,.22); color:#F0C2BA;}
.mh-app #clDetail .c-alert.w .ic{background:rgba(216,155,61,.22); color:#F2D29A;}
.mh-app #clDetail .c-alert.ok .ic{background:rgba(143,211,180,.18); color:#A9DEC2;}
.mh-app #clDetail .c-alert .tx .t{font-size:12.5px; font-weight:700; color:#F2F6F3;}
.mh-app #clDetail .c-alert .tx .s{font-size:11px; color:rgba(234,241,237,.6); font-weight:500; margin-top:1px;}
/* Phase 8 - relocated Document Status pill (under the ring) + clickable affordances */
.mh-app #clDetail .c-sec-lab.c-sec-clk{display:flex; align-items:center; gap:7px; cursor:pointer; transition:color .15s ease;}
.mh-app #clDetail .c-sec-lab.c-sec-clk:hover{color:rgba(234,241,237,.85);}
.mh-app #clDetail .c-sec-lab.c-sec-clk:focus-visible{outline:2px solid rgba(143,211,180,.55); outline-offset:2px; border-radius:5px;}
.mh-app #clDetail .c-sec-lab .c-sec-arr{width:12px; height:12px; opacity:.7; margin-left:auto; transition:transform .2s ease;}
.mh-app #clDetail .c-sec-lab .c-sec-arr.open{transform:rotate(90deg);}
/* Phase 9B: aggregate header word (Healthy / Need Attention!) - shares state with the item icons. */
.mh-app #clDetail .c-sec-word{font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:none;}
.mh-app #clDetail .c-sec-word.ok{color:#A9DEC2;}
.mh-app #clDetail .c-sec-word.attn{color:#F2D29A;}
/* Phase 9B: collapsible list reveal (entrance only; conditional render handles collapse). */
.mh-app #clDetail .c-ds-list{animation:cdDsReveal .18s ease both;}
@keyframes cdDsReveal{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.mh-app #clDetail .c-alert.clk{cursor:pointer; margin:0 -7px; padding-left:7px; padding-right:7px; border-radius:9px; transition:background .15s ease;}
.mh-app #clDetail .c-alert.clk:hover{background:rgba(255,255,255,.06);}
.mh-app #clDetail .c-alert.clk:focus-visible{outline:2px solid rgba(143,211,180,.5); outline-offset:1px;}
/* right main */
.mh-app #clDetail .c-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.mh-app #clDetail .c-top{flex:none; position:relative; display:flex; align-items:flex-start; gap:10px; padding:13px 18px; background:var(--mh-surface); border-bottom:1px solid var(--mh-line);}
/* FS Style 5 Tinted Lozenge (pre-approved): centered tab row, brand-token tints
   sharing the FS1 --mh-sage-* scale so the strip reads as one system with the
   controls beneath. Active class is .on (the live Blazor toggle). */
.mh-app #clDetail .c-tabs{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-content:flex-start; padding:0 48px;}
.mh-app #clDetail .dtab{appearance:none; background:transparent; border:1px solid transparent; font-family:inherit; font-weight:600; font-size:12.5px; color:var(--mh-muted); padding:9px 15px; border-radius:999px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:.15s;}
.mh-app #clDetail .dtab svg{width:14px; height:14px;}
.mh-app #clDetail .dtab:hover{background:var(--mh-sage-50); color:var(--mh-sage-700);}
.mh-app #clDetail .dtab.on{background:var(--mh-sage-100); color:var(--mh-sage-700); font-weight:700; box-shadow:inset 0 0 0 1px var(--mh-sage-200);}
.mh-app #clDetail .c-x{position:absolute; top:13px; right:18px; z-index:2; width:38px; height:38px; flex:none; border-radius:11px; border:1.5px solid var(--mh-line); background:var(--mh-surface); color:var(--mh-ink); cursor:pointer; display:grid; place-items:center; transition:.15s;}
.mh-app #clDetail .c-x:hover{background:rgba(176,70,60,.92); border-color:transparent; color:#fff;}
.mh-app #clDetail .c-x svg{width:17px; height:17px;}
.mh-app #clDetail .c-content{flex:1; overflow-y:auto; padding:20px 22px 26px; scrollbar-width:thin;}
.mh-app #clDetail .c-content::-webkit-scrollbar{width:10px;}
.mh-app #clDetail .c-content::-webkit-scrollbar-thumb{background:#D8D2C4; border-radius:8px; border:3px solid var(--mh-cream);}
.mh-app #clDetail .dpane{display:none;} .mh-app #clDetail .dpane.on{display:block; animation:dzfade .22s ease;}
.mh-app #clDetail .c-foot{flex:none; display:flex; align-items:center; padding:12px 22px; background:var(--mh-surface); border-top:1px solid var(--mh-line);}
.mh-app #clDetail .c-foot .upd{font-size:12.5px; color:var(--mh-muted); font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap;}
.mh-app #clDetail .c-foot .upd svg{width:14px; height:14px;}
.mh-app #clDetail .c-foot .acts{margin-left:auto; display:flex; gap:10px;}
.mh-app #clDetail .btn{display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13px; font-weight:800; border-radius:999px; padding:10px 18px; cursor:pointer; transition:.16s; border:1.5px solid var(--mh-line);}
.mh-app #clDetail .btn svg{width:14px; height:14px;}
.mh-app #clDetail .btn-ghost{background:var(--mh-surface); color:var(--mh-ink);}
.mh-app #clDetail .btn-ghost:hover{border-color:var(--mh-green); color:var(--mh-green-d);}
.mh-app #clDetail .btn-primary{background:linear-gradient(135deg,var(--mh-sidebar),var(--mh-sidebar-2)); border-color:transparent; color:#fff; box-shadow:0 8px 18px rgba(46,74,67,.3);}
.mh-app #clDetail .btn-primary:hover{transform:translateY(-1px);}
.mh-app #clDetail .btn-primary.editing{background:var(--mh-clay); box-shadow:0 8px 18px rgba(201,123,90,.35);}
/* A2 (KICKOFF 32): Edit Record on a non-editable tab - grayed/muted but still clickable
   (it shows a "not editable" toast). Token-driven; works light + dark. */
.mh-app #clDetail .btn-primary.is-locked{background:var(--mh-line); color:var(--mh-muted); box-shadow:none; cursor:pointer;}
.mh-app #clDetail .btn-primary.is-locked:hover{transform:none;}
.mh-app #clDetail .btn.hide{display:none;}
/* content patterns */
.mh-app #clDetail .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.mh-app #clDetail .grid-2.start{align-items:start;}
.mh-app #clDetail .card{background:var(--mh-surface); border:none; border-radius:16px; box-shadow:var(--mh-shadow-sm); overflow:hidden; min-width:0; display:flex; flex-direction:column; color:var(--mh-ink);}
.mh-app #clDetail .card-h{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--mh-line);}
.mh-app #clDetail .card-h svg{width:16px; height:16px; color:var(--mh-green);}
.mh-app #clDetail .card-h h3{margin:0; font-size:14px; font-weight:800; color:var(--mh-ink);}
.mh-app #clDetail .card-h .h-right{margin-left:auto; font-size:11.5px; font-weight:700; color:var(--mh-muted);}
.mh-app #clDetail .card-b{padding:14px 16px; flex:1;}
/* ---- Phase 9: dynamic document-expiry KPI cards (overview headline). Lifted from the
   contract mock (cd-exprow / cd-exp); theme-aware via the shared tokens. ---- */
.mh-app #clDetail .cd-exprow{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:14px;}
.mh-app #clDetail .cd-exp{position:relative; cursor:pointer; background:var(--mh-surface); border:1px solid var(--mh-line); border-radius:16px; padding:17px 13px 15px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; min-width:0; box-shadow:0 2px 10px rgba(33,58,51,.05); transition:.16s;}
.mh-app #clDetail .cd-exp:hover{transform:translateY(-3px); border-color:var(--mh-green); box-shadow:0 14px 30px rgba(46,74,67,.16);
  background:linear-gradient(180deg,var(--mh-surface),rgba(78,124,114,.05));}
.mh-app #clDetail .cd-exp .cd-exp-arrow{position:absolute; top:11px; right:11px; width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--mh-line); background:var(--mh-surface); color:var(--mh-ink); display:grid; place-items:center; transition:.16s;}
.mh-app #clDetail .cd-exp .cd-exp-arrow svg{width:14px; height:14px;}
.mh-app #clDetail .cd-exp:hover .cd-exp-arrow{background:linear-gradient(135deg,var(--mh-sidebar),var(--mh-sidebar-2)); border-color:transparent; color:#fff; transform:translate(1px,-1px);}
.mh-app #clDetail .cd-exp .ring{position:relative; width:70px; height:70px; flex:none;}
.mh-app #clDetail .cd-exp .ring svg{width:100%; height:100%;}
.mh-app #clDetail .cd-exp .ring .rv{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1; text-align:center;}
.mh-app #clDetail .cd-exp .ring .rv b{font-size:14.5px; font-weight:800; color:var(--mh-ink); line-height:1; letter-spacing:.2px; font-variant-numeric:tabular-nums;}
.mh-app #clDetail .cd-exp .ring .rv span{font-size:6.8px; font-weight:800; letter-spacing:.7px; color:var(--mh-muted); text-transform:uppercase; line-height:1;}
.mh-app #clDetail .cd-exp.x-expired .ring .rv b, .mh-app #clDetail .cd-exp.x-danger .ring .rv b{color:var(--mh-danger);}
.mh-app #clDetail .cd-exp.x-warn .ring .rv b{color:#A9761F;}
.mh-app #clDetail .cd-exp.x-none .ring .rv b{color:var(--mh-muted); font-size:10.5px;}
.mh-app #clDetail .cd-exp .xm{display:flex; flex-direction:column; align-items:center; min-width:0;}
.mh-app #clDetail .cd-exp .xm .xt{display:flex; align-items:center; justify-content:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--mh-muted);}
.mh-app #clDetail .cd-exp .xm .xt svg{width:13px; height:13px; flex:none;}
.mh-app #clDetail .cd-exp:hover .xm .xt{color:var(--mh-green-d);}
.mh-app #clDetail .cd-exp .xm .xd{font-size:13.5px; font-weight:800; color:var(--mh-ink); margin-top:7px; font-variant-numeric:tabular-nums;}
.mh-app #clDetail .cd-exp .xm .xs{font-size:10.5px; font-weight:700; margin-top:4px;}
.mh-app #clDetail .cd-exp .xm .xs.ok{color:var(--mh-green-d);} .mh-app #clDetail .cd-exp .xm .xs.warn{color:#A9761F;}
.mh-app #clDetail .cd-exp .xm .xs.bad{color:var(--mh-danger);} .mh-app #clDetail .cd-exp .xm .xs.none{color:var(--mh-muted);}
body.dark .mh-app #clDetail .cd-exp:hover{background:linear-gradient(180deg,var(--mh-surface),rgba(78,124,114,.12));}
@media (max-width:1100px){ .mh-app #clDetail .cd-exprow{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .mh-app #clDetail .cd-exprow{grid-template-columns:1fr;} }
/* Phase 9B Part B: KPI empty-state placeholder (shown only when zero expiry cards). Glass/FS
   aesthetic, dashed soft border to read as a waiting/placeholder slot; theme-aware via tokens. */
.mh-app #clDetail .cd-exp-empty{display:flex; align-items:center; gap:14px; margin-bottom:14px; padding:18px 20px;
  background:var(--mh-surface); border:1px dashed var(--mh-line); border-radius:16px; box-shadow:0 2px 10px rgba(33,58,51,.04);}
.mh-app #clDetail .cd-exp-empty .ic{width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(78,124,114,.12); color:var(--mh-green-d);}
.mh-app #clDetail .cd-exp-empty .ic svg{width:22px; height:22px;}
.mh-app #clDetail .cd-exp-empty .tx .t{font-size:13.5px; font-weight:800; color:var(--mh-ink); line-height:1.3;}
.mh-app #clDetail .cd-exp-empty .tx .s{font-size:11.5px; font-weight:600; color:var(--mh-muted); margin-top:3px; line-height:1.4;}
.mh-app #clDetail .fields{display:grid; grid-template-columns:1fr 1fr; gap:13px 16px;}
.mh-app #clDetail .fields.f3{grid-template-columns:repeat(3,1fr);}
.mh-app #clDetail .fields.one{grid-template-columns:1fr;}
.mh-app #clDetail .field .k{font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--mh-muted); margin-bottom:4px; display:flex; align-items:center;}
.mh-app #clDetail .field .v{font-size:13.5px; font-weight:700; color:var(--mh-ink); line-height:1.4;}
.mh-app #clDetail .field .v.mono{font-family:var(--mono); font-weight:600; font-size:12.5px;}
.mh-app #clDetail .field .v.muted{color:var(--mh-muted);}
/* FILLED SOFT (PROMPT FS1 Phase 2). Checkbox/radio excluded so the shared global FS
   pill/circle applies; text/select/textarea get the sage fill + focus ring. */
.mh-app #clDetail .field input:not([type=checkbox]):not([type=radio]), .mh-app #clDetail textarea.cd-inp{width:100%; border:1px solid transparent; background:var(--mh-ctrl-fill); border-radius:var(--mh-ctrl-r); padding:10px 12px; font-family:inherit; font-size:13px; font-weight:600; color:var(--mh-ink); outline:none; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;}
.mh-app #clDetail .field input:not([type=checkbox]):not([type=radio]):focus, .mh-app #clDetail textarea.cd-inp:focus{border-color:var(--mh-ctrl-focus-border); background:var(--mh-surface); box-shadow:var(--mh-ctrl-focus-ring);}
.mh-app #clDetail .field select.cd-sel{width:100%; border:1px solid transparent; background-color:var(--mh-ctrl-fill); border-radius:var(--mh-ctrl-r); padding:10px 34px 10px 12px; font-family:inherit; font-size:13px; color:var(--mh-ink); appearance:none; -webkit-appearance:none; cursor:pointer; background-image:var(--mh-ctrl-caret); background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;}
.mh-app #clDetail .field select.cd-sel:open{background-image:var(--mh-ctrl-caret-up);}
.mh-app #clDetail .field select.cd-sel:focus{border-color:var(--mh-ctrl-focus-border); background-color:var(--mh-surface); box-shadow:var(--mh-ctrl-focus-ring); outline:none;}
.mh-app #clDetail .cd-copybtn{font-family:inherit;font-size:11px;font-weight:600;color:var(--mh-green-d);background:var(--mh-cream-2);border:1px solid var(--mh-line);border-radius:4px;padding:6px 13px;cursor:pointer;}
.mh-app #clDetail .cd-copybtn:hover{background:var(--mh-surface);border-color:var(--mh-green);}
.mh-app #clDetail .cd-link{display:inline-flex;vertical-align:middle;margin-left:5px;color:var(--mh-green);cursor:help;}
.mh-app #clDetail .cd-link svg{width:11px;height:11px;}
.mh-app #clDetail .cd-bool{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;}
.mh-app #clDetail .cd-bool.on{background:#E6EFEC;color:var(--mh-green-d);}
.mh-app #clDetail .cd-bool.off{background:var(--mh-cream-2);color:var(--mh-muted);}
.mh-app #clDetail .cd-switch{position:relative;display:inline-block;width:44px;height:26px;cursor:pointer;}
.mh-app #clDetail .cd-switch input{opacity:0;width:0;height:0;}
.mh-app #clDetail .cd-sl{position:absolute;inset:0;background:var(--mh-ctrl-fill-2);border-radius:999px;transition:background .2s ease,box-shadow .16s ease;}
.mh-app #clDetail .cd-sl:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(30,38,42,.3);transition:left .22s cubic-bezier(.34,1.4,.5,1);}
.mh-app #clDetail .cd-switch input:checked + .cd-sl{background:var(--mh-ctrl-accent);}
.mh-app #clDetail .cd-switch input:checked + .cd-sl:before{left:21px;transform:none;}
.mh-app #clDetail .cd-switch input:focus-visible + .cd-sl{box-shadow:var(--mh-ctrl-focus-ring);}
/* timeline */
.mh-app #clDetail .timeline{display:grid; gap:0;}
.mh-app #clDetail .tl-item{position:relative; padding:0 0 16px 22px;}
.mh-app #clDetail .tl-item:last-child{padding-bottom:2px;}
.mh-app #clDetail .tl-item::before{content:""; position:absolute; left:5px; top:8px; bottom:-2px; width:2px; background:var(--mh-line);}
.mh-app #clDetail .tl-item:last-child::before{display:none;}
.mh-app #clDetail .tl-dot{position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%; background:var(--mh-green); box-shadow:0 0 0 3px var(--mh-surface), 0 0 0 4.3px var(--mh-line);}
.mh-app #clDetail .tl-dot.clay{background:var(--mh-clay);}
.mh-app #clDetail .tl-dot.muted{background:#C9C2B2;}
.mh-app #clDetail .tl-when{font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--mh-muted);}
.mh-app #clDetail .tl-ttl{font-size:13.5px; font-weight:800; color:var(--mh-ink); margin:3px 0 2px;}
.mh-app #clDetail .tl-sub{font-size:12px; font-weight:600; color:var(--mh-muted);}
/* program rows + pills */
.mh-app #clDetail .prow{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--mh-line);}
.mh-app #clDetail .prow:first-child{padding-top:0;} .mh-app #clDetail .prow:last-child{border-bottom:none; padding-bottom:0;}
.mh-app #clDetail .prow .av{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:#fff; font-size:11px; font-weight:800; flex:none;}
.mh-app #clDetail .prow .pi{flex:1; min-width:0;}
.mh-app #clDetail .prow .nm{font-size:13px; font-weight:800; color:var(--mh-ink);}
.mh-app #clDetail .prow .sub{font-size:11px; font-weight:600; color:var(--mh-muted); margin-top:2px;}
.mh-app #clDetail .pill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap;}
.mh-app #clDetail .pill .dot{width:6px; height:6px; border-radius:50%;}
.mh-app #clDetail .pill.success{background:rgba(78,124,114,.12); color:var(--mh-green-d);} .mh-app #clDetail .pill.success .dot{background:var(--mh-green);}
.mh-app #clDetail .pill.warning{background:rgba(216,155,61,.14); color:#A9761F;} .mh-app #clDetail .pill.warning .dot{background:#D89B3D;}
.mh-app #clDetail .pill.neutral{background:rgba(138,139,131,.13); color:var(--mh-muted);} .mh-app #clDetail .pill.neutral .dot{background:#A8A99F;}
/* consent */
.mh-app #clDetail .consent-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--mh-line);}
.mh-app #clDetail .consent-row:last-child{border-bottom:none;}
.mh-app #clDetail .consent-ic{width:30px; height:30px; border-radius:10px; display:grid; place-items:center; flex:none;}
.mh-app #clDetail .consent-ic svg{width:15px; height:15px;}
.mh-app #clDetail .consent-ic.on{background:rgba(78,124,114,.12); color:var(--mh-green-d);}
.mh-app #clDetail .consent-ic.off{background:rgba(138,139,131,.14); color:var(--mh-muted);}
.mh-app #clDetail .consent-tx{flex:1; min-width:0;}
.mh-app #clDetail .consent-tx .nm{font-size:13px; font-weight:800; color:var(--mh-ink);}
.mh-app #clDetail .consent-tx .sub{font-size:11px; font-weight:600; color:var(--mh-muted); margin-top:2px;}
/* notes */
.mh-app #clDetail .note{position:relative; padding:13px 0 14px; border-bottom:1px solid var(--mh-line);}
.mh-app #clDetail .note:last-child{border-bottom:none; padding-bottom:4px;}
.mh-app #clDetail .note-h{display:flex; align-items:center; gap:9px; margin-bottom:7px;}
.mh-app #clDetail .note-h .av{width:27px; height:27px; border-radius:50%; display:grid; place-items:center; font-size:9.5px; font-weight:800; color:#fff; flex:none;}
/* Staff-note AUTHOR avatar = person-icon (own class so program/.av tiles are untouched). */
.mh-app #clDetail .note-h .av-person svg{width:58%; height:58%;}
.mh-app #clDetail .note-h .who{font-size:12.5px; font-weight:800; color:var(--mh-ink);}
.mh-app #clDetail .note-h .when{font-size:11px; font-weight:600; color:var(--mh-muted); margin-left:auto;}
.mh-app #clDetail .note-b{font-size:13px; font-weight:600; color:var(--mh-ink); line-height:1.55;}
/* Inline alert/info note inside a pane card body - shown only in EDIT mode on the
   Personal "Contact & US address" and Immigration "Work authorization" cards. It
   reuses the generic .note class but is NOT a staff-note card (.note-h/.note-b)
   and NOT inside a modal, so its inline alert SVG (viewBox only, no width/height)
   had no size rule and ballooned to fill the card. Target ONLY notes with a direct
   icon child via :has(> svg) so the Notes tab's staff cards (no direct svg) stay
   untouched; render the established inline alert look. The svg size rule below is
   safe on its own (staff cards carry no svg) and acts as the defensive guard.
   Tokens only -> dark flips automatically; scoped to .card-b .note so the sidebar
   QR (#cdQr), the rings (.ring2 svg) and the photo (.mh-photo) are never hit. */
.mh-app #clDetail .card-b .note:has(> svg){display:flex; align-items:flex-start; gap:8px; padding:9px 11px; border:1px solid var(--mh-line); border-radius:10px; background:var(--mh-cream-2); font-size:11.5px; font-weight:600; color:var(--mh-muted); line-height:1.5;}
.mh-app #clDetail .card-b .note svg{width:14px; height:14px; flex:none; color:var(--mh-green); margin-top:1px;}
.mh-app #clDetail .cd-noteadd{position:relative; display:flex; gap:10px; align-items:center; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--mh-line);}
.mh-app #clDetail .cd-noteadd textarea{flex:1; min-height:52px; resize:vertical;}

/* Phase 5 fast-follow: page-agnostic @mention pill (NOT .tm-page-scoped, so it styles on the
   case-note surface too). The chat bubble overrides (.tm-page .tm-msg.me/.them .mh-mention)
   are higher-specificity, so chat is unaffected. Light + dark. */
.mh-mention{color:var(--mh-green-d); background:rgba(78,124,114,.14); font-weight:700; border-radius:5px; padding:0 4px; white-space:nowrap;}
body.dark .mh-mention{color:#A9D6C9; background:rgba(78,124,114,.26);}

/* Phase 5 fast-follow: the @mention picker floated above the Add-Note field (absolute -> out
   of the flex row). Mouse-down is prevented in markup so a click never blurs the textarea. */
/* Width fits the WIDEST name (max-content up to a cap), left-anchored to the Add-Note field.
   The Add-Note field sits near the TOP of the overlay, so the DEFAULT here is BELOW; JS
   (MHmentions.place) flips to .mh-pop-above only when there is room. Tail is outside the box,
   so the pop is overflow:visible and the scroll lives on an inner wrapper (.cd-mentionscroll). */
.mh-app #clDetail .cd-mentionpop{position:absolute; left:0; width:max-content; min-width:168px; max-width:min(320px,calc(70 * var(--mh-vw))); top:calc(100% + 11px); bottom:auto; z-index:40; background:var(--mh-surface); border:1px solid var(--mh-line-cool,var(--mh-line)); border-radius:13px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(52,69,77,.16)); overflow:visible;}
.mh-app #clDetail .cd-mentionpop.mh-pop-above{top:auto; bottom:calc(100% + 11px);}
.mh-app #clDetail .cd-mentionpop.mh-pop-below{bottom:auto; top:calc(100% + 11px);}
.mh-app #clDetail .cd-mentionscroll{max-height:226px; overflow-y:auto; padding:6px;}
.mh-app #clDetail .cd-mentionopt{display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; padding:7px 9px; border:none; border-radius:10px; background:none; cursor:pointer; text-align:left; color:var(--mh-ink); font:inherit;}
.mh-app #clDetail .cd-mentionopt:hover, .mh-app #clDetail .cd-mentionopt.on{background:rgba(78,124,114,.12);}
.mh-app #clDetail .cd-mentionav{width:28px; height:28px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:11px;}
.mh-app #clDetail .cd-mentionnm{font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* Tail: points DOWN when above the field, UP when below. */
.mh-app #clDetail .cd-mentionpop.mh-pop-above::before, .mh-app #clDetail .cd-mentionpop.mh-pop-below::before{content:""; position:absolute; left:21px; width:0; height:0; border:9px solid transparent;}
.mh-app #clDetail .cd-mentionpop.mh-pop-above::after, .mh-app #clDetail .cd-mentionpop.mh-pop-below::after{content:""; position:absolute; left:22px; width:0; height:0; border:8px solid transparent;}
.mh-app #clDetail .cd-mentionpop.mh-pop-above::before{top:100%; border-bottom:0; border-top-color:var(--mh-line-cool,var(--mh-line));}
.mh-app #clDetail .cd-mentionpop.mh-pop-above::after{top:100%; border-bottom:0; border-top-color:var(--mh-surface);}
.mh-app #clDetail .cd-mentionpop.mh-pop-below::before{bottom:100%; border-top:0; border-bottom-color:var(--mh-line-cool,var(--mh-line));}
.mh-app #clDetail .cd-mentionpop.mh-pop-below::after{bottom:100%; border-top:0; border-bottom-color:var(--mh-surface);}
/* documents */
.mh-app #clDetail .docgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:13px;}
.mh-app #clDetail .doc{background:var(--mh-surface);border-left:4px solid var(--mh-line);border-radius:var(--mh-r-card);padding:15px;box-shadow:var(--mh-shadow-sm);transition:.16s;}
.mh-app #clDetail .doc:hover{box-shadow:var(--mh-shadow);}
.mh-app #clDetail .doc.s-ok{border-left-color:var(--mh-green);}
.mh-app #clDetail .doc.s-expiring{border-left-color:var(--mh-warning);}
.mh-app #clDetail .doc.s-expired{border-left-color:var(--mh-danger);}
.mh-app #clDetail .doc.s-missing{border-left-color:#cfc7b6;}
.mh-app #clDetail .doc .dt{display:flex;align-items:center;gap:9px;margin-bottom:4px;}
.mh-app #clDetail .doc .dt .ic{width:30px;height:30px;border-radius:9px;background:var(--mh-cream);display:grid;place-items:center;color:var(--mh-green-d);flex:none;}
.mh-app #clDetail .doc .dt .ic svg{width:17px;height:17px;}
.mh-app #clDetail .doc .dt .nm{font-weight:800;font-size:13.5px;color:var(--mh-ink);}
.mh-app #clDetail .doc .req{font-size:10px;font-weight:800;color:var(--mh-clay-d);background:rgba(201,123,90,.13);padding:1px 7px;border-radius:999px;margin-left:auto;}
.mh-app #clDetail .doc .pill-st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;margin:8px 0 10px;}
.mh-app #clDetail .doc .pill-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.mh-app #clDetail .ps-ok{color:var(--mh-green-d);background:rgba(78,124,114,.14);}
.mh-app #clDetail .ps-expiring{color:var(--mh-warning-d);background:rgba(216,155,61,.16);}
.mh-app #clDetail .ps-expired{color:var(--mh-danger);background:rgba(176,70,60,.13);}
.mh-app #clDetail .ps-missing{color:var(--mh-muted);background:rgba(138,139,131,.13);}
.mh-app #clDetail .doc .dates{display:flex;gap:10px;margin-bottom:11px;}
.mh-app #clDetail .doc .dates div{flex:1;background:var(--mh-cream-2);border:1px solid var(--mh-line);border-radius:10px;padding:7px 9px;}
.mh-app #clDetail .doc .dates label{font-size:9.5px;font-weight:800;letter-spacing:.4px;color:var(--mh-muted);text-transform:uppercase;display:block;}
.mh-app #clDetail .doc .dates b{font-size:12.5px;font-weight:700;color:var(--mh-ink);}
.mh-app #clDetail .doc .dates b.none{color:var(--mh-muted);font-weight:600;}
.mh-app #clDetail .doc .file{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mh-info);font-weight:600;overflow:hidden;}
.mh-app #clDetail .doc .file svg{width:14px;height:14px;flex:none;}
.mh-app #clDetail .doc .file.none{color:var(--mh-muted);font-style:italic;}
/* Phase 4: the file name as a VIEW link (anchor) - clickable cue, opens in a new tab */
.mh-app #clDetail .doc a.file{text-decoration:none;cursor:pointer;transition:.13s;}
.mh-app #clDetail .doc a.file:hover{color:var(--mh-info-d,var(--mh-info));text-decoration:underline;}
/* doc card action row (Phase 6) */
.mh-app #clDetail .doc .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
.mh-app #clDetail .doc .acts .file{flex:1;min-width:90px;}
.mh-app #clDetail .doc .acts .btn{padding:6px 11px;font-size:11.5px;border-radius:9px;border:1px solid var(--mh-line);background:var(--mh-surface);color:var(--mh-ink);font-family:inherit;font-weight:700;cursor:pointer;transition:.13s;}
.mh-app #clDetail .doc .acts .btn:hover{border-color:var(--mh-green);color:var(--mh-green-d);background:var(--mh-cream-2);}
.mh-app #clDetail .doc .acts .btn.cd-remove:hover{color:var(--mh-danger,#B0463C);border-color:var(--mh-danger,#B0463C);}
/* in-grid Add document card (mock #clDetail .cd-docadd-card) */
.mh-app #clDetail .cd-docadd-card{border:2px dashed var(--mh-line);border-radius:var(--mh-r-card,14px);background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:150px;color:var(--mh-muted);cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;transition:.16s;}
.mh-app #clDetail .cd-docadd-card:hover{border-color:var(--mh-green);color:var(--mh-green-d);background:var(--mh-cream-2);}
.mh-app #clDetail .cd-docadd-card .plus{width:42px;height:42px;border-radius:50%;background:var(--mh-cream-2);display:grid;place-items:center;color:var(--mh-green-d);}
/* upload / add-document modal (shares the status-modal shell) */
.mh-app #clDetail .cd-docmodal{position:fixed;inset:0;background:rgba(33,42,38,.55);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:160;}
.mh-app #clDetail .cd-docmodal .mbox{background:var(--mh-surface);border-radius:18px;width:min(520px,calc(94 * var(--mh-vw)));max-height:calc(92 * var(--mh-vh));display:flex;flex-direction:column;box-shadow:var(--mh-shadow-lg);overflow:hidden;animation:clpop .22s ease;color:var(--mh-ink);}
.mh-app #clDetail .cd-docmodal .mhead{padding:18px 22px;border-bottom:1px solid var(--mh-line);display:flex;align-items:center;gap:10px;}
.mh-app #clDetail .cd-docmodal .mhead h3{font-size:16px;font-weight:800;color:var(--mh-ink);margin:0;}
.mh-app #clDetail .cd-docmodal .mhead .x{margin-left:auto;cursor:pointer;color:var(--mh-muted);background:none;border:none;font-size:22px;line-height:1;}
.mh-app #clDetail .cd-docmodal .mbody{padding:18px 22px;overflow-y:auto;}
.mh-app #clDetail .cd-docmodal .mfld{margin-bottom:13px;}
.mh-app #clDetail .cd-docmodal .mfld label{display:block;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--mh-muted);margin-bottom:6px;}
.mh-app #clDetail .cd-docmodal .mfld label .star{color:var(--mh-clay-d,#B5663F);}
.mh-app #clDetail .cd-docmodal .mfld input,.mh-app #clDetail .cd-docmodal .mfld select,.mh-app #clDetail .cd-docmodal .mfld textarea{width:100%;height:42px;border:1px solid var(--mh-line);border-radius:10px;background-color:var(--mh-surface);padding:0 12px;font:inherit;font-size:14px;color:var(--mh-ink);outline:none;}
/* native select in the document modal: shared caret + open flip (fill above is
   background-COLOR so it can't wipe the caret; appearance:none from the global rule) */
.mh-app #clDetail .cd-docmodal .mfld select{padding-right:36px;background-image:var(--mh-ctrl-caret);background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;}
.mh-app #clDetail .cd-docmodal .mfld select:open{background-image:var(--mh-ctrl-caret-up);}
.mh-app #clDetail .cd-docmodal .mfld textarea{height:auto;min-height:58px;padding:9px 12px;resize:vertical;}
.mh-app #clDetail .cd-docmodal .mfld input:focus,.mh-app #clDetail .cd-docmodal .mfld select:focus,.mh-app #clDetail .cd-docmodal .mfld textarea:focus{border-color:var(--mh-green);}
.mh-app #clDetail .cd-docmodal .mfld input.bad,.mh-app #clDetail .cd-docmodal .mfld select.bad{border-color:var(--mh-danger,#B0463C);background-color:rgba(176,70,60,.05);}
/* Issue/Expiry now use the shared MhDatePicker; preserve the field's invalid (.bad) state on its field shell. */
.mh-app #clDetail .cd-docmodal .mfld .dp.bad .dp-field{border-color:var(--mh-danger,#B0463C);background:rgba(176,70,60,.05);}
.mh-app #clDetail .cd-docmodal .drop{display:flex;align-items:center;justify-content:center;gap:9px;flex-direction:column;text-align:center;border:2px dashed var(--mh-line);border-radius:12px;padding:20px 14px;color:var(--mh-muted);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s;margin-bottom:6px;position:relative;}
.mh-app #clDetail .cd-docmodal .drop:hover{border-color:var(--mh-green);color:var(--mh-green-d);background:var(--mh-cream-2);}
.mh-app #clDetail .cd-docmodal .drop.has{border-color:var(--mh-green);color:var(--mh-green-d);border-style:solid;}
.mh-app #clDetail .cd-docmodal .drop svg{width:24px;height:24px;}
.mh-app #clDetail .cd-docmodal .drop .cd-hidden-file{position:absolute;inset:0;opacity:0;cursor:pointer;}
.mh-app #clDetail .cd-docmodal .err{font-size:11.5px;font-weight:700;color:var(--mh-danger,#B0463C);margin:-2px 0 8px;}
.mh-app #clDetail .cd-docmodal .note{font-size:11.5px;color:var(--mh-green-d);background:#E6EFEC;border:1px solid #cfe0da;border-radius:10px;padding:9px 11px;display:flex;gap:8px;font-weight:600;margin-top:4px;}
.mh-app #clDetail .cd-docmodal .note svg{width:15px;height:15px;flex:none;margin-top:1px;}
.mh-app #clDetail .cd-docmodal .mfoot{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--mh-line);}
.mh-app #clDetail .cd-docmodal .mfoot .btn{padding:10px 16px;font-size:13px;border-radius:10px;border:1px solid var(--mh-line);background:var(--mh-surface);color:var(--mh-ink);font-family:inherit;font-weight:700;cursor:pointer;}
.mh-app #clDetail .cd-docmodal .mfoot .btn.btn-primary{background:var(--mh-green);color:#fff;border-color:var(--mh-green);}
.mh-app #clDetail .cd-docmodal .mfoot .btn.btn-primary:hover{background:var(--mh-green-d);}
.mh-app #clDetail .cd-docmodal .mfoot .btn:disabled{opacity:.5;cursor:not-allowed;}
body.dark #clDetail .cd-docmodal .mbox{background:#242c28;}
body.dark #clDetail .cd-docmodal .mfld input,body.dark #clDetail .cd-docmodal .mfld select,body.dark #clDetail .cd-docmodal .mfld textarea{background-color:#1d2421;color:#eef1ee;border-color:#33403a;}
body.dark #clDetail .cd-docmodal .note{background:#1d3029;border-color:#2f4a40;}
/* audit + history (History tab) */
.mh-app #clDetail .cd-audit{margin-top:14px;}
.mh-app #clDetail .audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;width:100%;align-items:start;}
.mh-app #clDetail .audit-col{display:grid;grid-template-columns:minmax(128px,max-content) 1fr;gap:14px 22px;align-content:start;}
.mh-app #clDetail .audit-grid .adk{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mh-muted);white-space:nowrap;align-self:center;}
.mh-app #clDetail .audit-grid .adv{font-size:13.5px;font-weight:600;color:var(--mh-ink);align-self:center;line-height:1.35;}
.mh-app #clDetail .hist-wrap{margin-top:18px;border-radius:12px;overflow:hidden;box-shadow:var(--mh-shadow-sm);}
.mh-app #clDetail .hist-tbl{width:100%;border-collapse:collapse;}
.mh-app #clDetail .hist-tbl th{background:linear-gradient(118deg,#2E4A43,#213A33);color:#fff;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:10px 14px;}
.mh-app #clDetail .hist-tbl td{padding:11px 14px;border-bottom:1px solid var(--mh-line);font-size:12.5px;color:var(--mh-ink);}
.mh-app #clDetail .hist-tbl tr:last-child td{border-bottom:none;}
.mh-app #clDetail .hist-tbl td.empty{color:var(--mh-muted);}
/* The rail Status button now opens the global glass modal (.cs-modal.cs--glass),
   rendered as a sibling of #clDetail; see statusmenu.css. */
@keyframes clpop{from{transform:scale(.96);opacity:.5;}to{transform:none;opacity:1;}}
.mh-app #clDetail .cd-empty{color:var(--mh-muted);font-size:13px;padding:14px 2px;}
/* printable QR pass (print stylesheet hides everything else) */
.mh-app #clDetail .cd-pass{position:fixed; inset:0; background:rgba(33,42,38,.55); backdrop-filter:blur(3px); display:grid; place-items:center; z-index:150;}
/* Phase 12 - wraps the canonical PassCard + its action buttons in the client pass overlay. */
.mh-app #clDetail .cd-passwrap{display:flex; flex-direction:column; align-items:center;}
.cd-passcard{background:#fff;color:#1b1b1b;border-radius:18px;width:min(360px,calc(92 * var(--mh-vw)));padding:26px 26px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4);}
.cd-passcard .pass-org{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#3D655D;}
.cd-passcard .pass-name{font-family:var(--mh-font-head);font-size:22px;font-weight:600;margin:6px 0 2px;color:#1b1b1b;}
.cd-passcard .pass-code{font-family:var(--mono);font-size:14px;color:#555;margin-bottom:16px;}
.cd-passcard .pass-qr{position:relative;width:230px;height:230px;margin:0 auto 14px;}
.cd-passcard .pass-qr svg{width:100%;height:100%;display:block;}
.cd-passcard .pass-qr .qrp-logo{position:absolute;inset:0;margin:auto;width:46px;height:46px;background:linear-gradient(135deg,#2E4A43,#213A33);border-radius:12px;padding:7px;display:grid;place-items:center;box-shadow:0 0 0 5px #fff;}
.cd-passcard .pass-qr .qrp-logo img{width:100%;height:100%;object-fit:contain;}
/* QR consolidation - shared scan-pass popover (Clients list QR click). Reuses the
   .cd-passcard look; snug-fits its centered content. */
.qrp-overlay{position:fixed;inset:0;background:rgba(33,42,38,.55);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:300;}
.qrp-acts{display:flex;justify-content:center;margin-top:14px;}
.cd-passcard .pass-hint{font-size:11.5px;color:#777;}
.mh-app #clDetail .cd-pass .pass-acts{display:flex;gap:10px;justify-content:center;margin-top:16px;}
/* dark overlay tweaks */
/* FS Style 5: the tinted lozenge derives dark from the shared brand tokens (the
   fixed --mh-sage-* tint reads as a light brand pill on the dark surface, with
   --mh-muted rest text flipping via body.dark) - no bespoke dark .dtab override. */
body.dark .mh-app #clDetail .audit-grid .adv{color:#eef1ee;}
body.dark .mh-app #clDetail .hist-wrap{border-color:#33403a;}
body.dark .mh-app #clDetail .hist-tbl td{color:#eef1ee;border-color:#33403a;}
/* responsive */
@media (max-width:1100px){ .mh-app #clDetail .grid-2{grid-template-columns:1fr;} }
@media (max-width:920px){ .mh-app #clDetail .cdbox{flex-direction:column;} .mh-app #clDetail .c-side{width:100%; max-height:42vh;} }
@media (max-width:900px){ .mh-app #clDetail .fields.f3{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .mh-app #clDetail .fields{grid-template-columns:1fr;} .mh-app #clDetail.show{padding:8px;} }
@media print {
  body.cd-printing > *:not(.cd-print-host){ display:none !important; }
  body.cd-printing .cd-print-host, body.cd-printing .cd-print-host *{ visibility:visible; }
  body.cd-printing .cd-pass{ position:static; background:none; backdrop-filter:none; display:block; }
  body.cd-printing .cd-passcard{ box-shadow:none; margin:0 auto; }
  body.cd-printing .cd-pass .pass-acts{ display:none !important; }
}

/* Global so the shared PhotoStudio InputFile stays hidden on both surfaces (the
   #ppProfOv copy was removed). The .cd-docmodal .drop override above is unrelated. */
.mh-app .cd-hidden-file{display:none;}