/* mh-clientwizard.css - Phase 4 New Client Wizard (#clWiz) + Add Family Member (#clMbr). Ported verbatim from _handoff/mh-dashboard.html lines 936-1381 plus auxiliary overlay selectors. Plain hyphens only - no em/en-dashes. */ /* ===================== DESIGN WIZARD TRANSPLANT (New Client Wizard + Add Family Member) ===================== */ #clWiz, #clMbr, #clDetail {--cream:#E8EBF0; --cream2:#F1F4F7; --surface:#fff; --slate:#34454D; --sidebar:#2E4A43; --sidebar2:#213A33; --green:#4E7C72; --green-d:#3D655D; --green-l:#6B9A8F; --clay:#C97B5A; --clay-d:#B5663F; --ink:#2A2F31; --muted:#8A8B83; --line:#D9DFE7; --line2:#E7ECEA; --gold:#D89B3D; --gold-d:#A9761F; --danger:#B0463C; --r-card:18px; --r-fld:12px; --r-pill:999px; --sh-sm:0 1px 3px rgba(52,69,77,.07), 0 1px 2px rgba(52,69,77,.04); --sh:0 10px 30px rgba(52,69,77,.10), 0 3px 8px rgba(52,69,77,.05); --sh-lg:0 30px 80px rgba(33,58,51,.26); --font:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;} @keyframes dzrise{from{opacity:0;transform:translateY(18px) scale(.99);}to{opacity:1;transform:none;}} @keyframes dzfade{from{opacity:0; transform:translateY(8px);}to{opacity:1;transform:none;}} @keyframes mmFade{from{opacity:0;}to{opacity:1;}} :is(#clWiz,#clMbr) .dzwiz{width:min(1240px,100%); height:min(calc(92 * var(--mh-vh)),900px); background:var(--surface); border-radius:26px; overflow:hidden; box-shadow:var(--sh-lg); display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.6); animation:dzrise .5s cubic-bezier(.2,.7,.25,1);} :is(#clWiz,#clMbr) .hdr{position:relative; flex:none; color:#fff; padding:24px 30px 22px; background: radial-gradient(420px 260px at 88% -40%, rgba(201,123,90,.55), transparent 60%), radial-gradient(560px 320px at 12% 130%, rgba(107,154,143,.55), transparent 60%), linear-gradient(118deg, #2E4A43 0%, #3D655D 52%, #4E7C72 100%); overflow:hidden;} :is(#clWiz,#clMbr) .hdr::after{/* faint topo rings */ content:""; position:absolute; right:-120px; top:-160px; width:420px; height:420px; border-radius:50%; border:1.5px solid rgba(255,255,255,.07); box-shadow:0 0 0 38px rgba(255,255,255,.04), 0 0 0 86px rgba(255,255,255,.025); pointer-events:none;} :is(#clWiz,#clMbr) .hdr-row{position:relative; z-index:2; display:flex; align-items:flex-start; gap:20px;} :is(#clWiz,#clMbr) .hdr-brand{display:flex; align-items:center; gap:15px; flex:1; min-width:0;} :is(#clWiz,#clMbr) .hdr-mark{width:64px; height:64px; border-radius:17px; flex:none; display:grid; place-items:center; background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.3);} :is(#clWiz,#clMbr) .hdr-mark img{width:40px; height:40px; display:block;} :is(#clWiz,#clMbr) .hdr-mark svg{width:38px; height:38px; display:block; color:#fff;} :is(#clWiz,#clMbr) .hdr-eyebrow{font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,.7);} :is(#clWiz,#clMbr) .hdr h1{font-size:27px; font-weight:800; letter-spacing:-.5px; margin:2px 0 3px; color:#fff;} :is(#clWiz,#clMbr) .hdr-sub{font-size:13px; color:rgba(255,255,255,.78); font-weight:500; max-width:440px;} :is(#clWiz,#clMbr) .hdr-tools{display:flex; align-items:stretch; gap:12px; flex:none;} :is(#clWiz,#clMbr) .id-badge{display:flex; flex-direction:column; justify-content:center; gap:3px; padding:11px 16px; border-radius:14px; background:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.22); min-width:130px;} :is(#clWiz,#clMbr) .id-badge .k{font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.62); display:flex; align-items:center; gap:5px;} :is(#clWiz,#clMbr) .id-badge .k .dot{width:6px;height:6px;border-radius:50%;background:#8FE3B0;box-shadow:0 0 0 3px rgba(143,227,176,.25);} :is(#clWiz,#clMbr) .id-badge .code{font-family:var(--mono); font-size:21px; font-weight:600; letter-spacing:1px; color:#fff;} :is(#clWiz,#clMbr) .qr-card{display:flex; align-items:center; gap:13px; padding:11px 14px 11px 12px; border-radius:14px; background:rgba(255,255,255,.97); color:var(--ink); box-shadow:0 12px 30px rgba(20,40,35,.32); cursor:pointer; transition:transform .16s ease, box-shadow .16s ease;} :is(#clWiz,#clMbr) .qr-card:hover{transform:translateY(-2px); box-shadow:0 18px 38px rgba(20,40,35,.4);} :is(#clWiz,#clMbr) .qr-frame{position:relative; width:94px; height:94px; flex:none; background:#fff; border-radius:12px; padding:6px; border:1px solid var(--line);} :is(#clWiz,#clMbr) .qr-frame svg{width:100%; height:100%; display:block;} :is(#clWiz,#clMbr) .qr-frame #qrHdr, #clMbr .qr-frame #mQr{position:absolute; inset:6px;} :is(#clWiz,#clMbr) .qr-logo{position:absolute; inset:0; margin:auto; width:24px; height:24px; background:var(--sidebar); border-radius:7px; display:grid; place-items:center; box-shadow:0 0 0 3.5px #fff;} :is(#clWiz,#clMbr) .qr-logo img{width:15px; height:15px; display:block;} :is(#clWiz,#clMbr) .qr-meta .t{font-size:13px; font-weight:800; color:var(--ink); letter-spacing:-.1px;} :is(#clWiz,#clMbr) .qr-meta .code{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:1px; color:var(--green-d); margin-top:3px;} :is(#clWiz,#clMbr) .qr-meta .scan{display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted);} :is(#clWiz,#clMbr) .qr-meta .scan svg{width:12px;height:12px;} :is(#clWiz,#clMbr) .hdr-x{align-self:flex-start; flex:none; margin-left:6px; width:36px; height:36px; border-radius:11px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .15s;} :is(#clWiz,#clMbr) .hdr-x:hover{background:rgba(255,255,255,.24);} :is(#clWiz,#clMbr) .hdr-x svg{width:17px;height:17px;} :is(#clWiz,#clMbr) .stepper{flex:none; display:flex; align-items:center; gap:0; padding:0 30px; height:64px; background:var(--cream2); border-bottom:1px solid var(--line);} :is(#clWiz,#clMbr) .step{display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none;} /* Idle step marker + connectors carry a soft Matthew House pine tint (was the creamy paper line var(--line)); active/done fill solid brand green below. */ :is(#clWiz,#clMbr) .step .num{width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:13px; font-weight:800; background:#fff; color:var(--muted); border:1.5px solid rgba(78,124,114,.32); transition:.2s;} :is(#clWiz,#clMbr) .step .num svg{width:15px;height:15px;} :is(#clWiz,#clMbr) .step .meta .lbl{font-size:13.5px; font-weight:700; color:var(--muted); transition:.2s; letter-spacing:-.1px;} :is(#clWiz,#clMbr) .step .meta .hint{font-size:10.5px; font-weight:600; color:#b5b1a3;} :is(#clWiz,#clMbr) .step.active .num{background:var(--green); color:#fff; border-color:var(--green); box-shadow:0 6px 14px rgba(78,124,114,.34);} :is(#clWiz,#clMbr) .step.active .meta .lbl{color:var(--green-d);} :is(#clWiz,#clMbr) .step.done .num{background:var(--green-d); color:#fff; border-color:var(--green-d);} :is(#clWiz,#clMbr) .step.done .meta .lbl{color:var(--ink);} :is(#clWiz,#clMbr) .step-line{flex:1; height:2px; background:rgba(78,124,114,.22); margin:0 16px; border-radius:2px; position:relative; overflow:hidden; min-width:20px;} :is(#clWiz,#clMbr) .step-line i{position:absolute; inset:0; width:0; background:linear-gradient(90deg,var(--green-d),var(--green)); transition:width .4s ease;} :is(#clWiz,#clMbr) .step-line.fill i{width:100%;} :is(#clWiz,#clMbr) .dzbody{flex:1; display:flex; min-height:0;} /* Shaker-directed deviation from the mock (logged): the wizard / member aside is the Matthew House pine ID-card surface (same gradient as #clDetail .c-side and the profile rail), not the mock's light cream-to-white. Text reads cream/white on pine. Applies to both #clWiz and #clMbr so the two forms share one surface language (W6). */ :is(#clWiz,#clMbr) .dzaside{width:330px; flex:none; border-right:1px solid rgba(255,255,255,.08); color:#E7EEEA; background:radial-gradient(420px 260px at 110% -6%,rgba(110,156,144,.30),transparent 60%),linear-gradient(165deg,var(--sidebar),var(--sidebar2) 55%,#16261F); padding:26px 24px; overflow-y:auto;} :is(#clWiz,#clMbr) .pv-photo-wrap{display:flex; flex-direction:column; align-items:center; text-align:center;} :is(#clWiz,#clMbr) .pv-photo{position:relative; width:130px; height:130px; cursor:pointer; flex:none; transition:transform .18s;} :is(#clWiz,#clMbr) .pv-photo-inner{position:absolute; inset:0; border-radius:50%; overflow:hidden; display:grid; place-items:center; color:var(--muted); background:repeating-linear-gradient(45deg, #f0ebdf 0 9px, #f7f3ea 9px 18px); border:2px dashed #cfc7b4; transition:.18s;} :is(#clWiz,#clMbr) .pv-photo:hover{transform:translateY(-1px);} :is(#clWiz,#clMbr) .pv-photo:hover .pv-photo-inner{border-color:var(--green); color:var(--green-d);} :is(#clWiz,#clMbr) .pv-photo.drag .pv-photo-inner{border-color:var(--green); background:rgba(78,124,114,.08); color:var(--green-d);} :is(#clWiz,#clMbr) .pv-photo .ph-ico{display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; padding:0 12px;} :is(#clWiz,#clMbr) .pv-photo .ph-ico svg{width:26px;height:26px;} :is(#clWiz,#clMbr) .pv-photo .ph-ico span{font-size:10.5px; font-weight:700; line-height:1.25;} :is(#clWiz,#clMbr) .pv-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;} :is(#clWiz,#clMbr) .pv-photo.has img{display:block;} :is(#clWiz,#clMbr) .pv-photo.has .ph-ico{display:none;} /* P2 - canonical camera badge: the Client Detail .mh-btn style (clay badge + pine ring + white camera). */ :is(#clWiz,#clMbr) .pv-photo .cam{position:absolute; right:6px; bottom:6px; z-index:4; width:30px; height:30px; border-radius:50%; background:var(--clay); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 2.5px var(--sidebar);} :is(#clWiz,#clMbr) .pv-photo .cam svg{width:14px;height:14px;color:#fff;} :is(#clWiz,#clMbr) .pv-name{font-size:19px; font-weight:800; letter-spacing:-.3px; margin-top:15px; color:#F1F5F3;} :is(#clWiz,#clMbr) .pv-name.empty{color:rgba(231,238,234,.5);} :is(#clWiz,#clMbr) .pv-id{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.5px; margin-top:3px;} :is(#clWiz,#clMbr) .pv-id-badge{display:inline-flex; align-items:center; gap:9px; margin-top:12px; padding:5px 16px 5px 6px; border-radius:999px; background:linear-gradient(135deg,#fff,var(--cream2)); border:1px solid var(--line); box-shadow:var(--sh-sm);} :is(#clWiz,#clMbr) .pv-id-badge .ic{width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(150deg,var(--green),var(--sidebar)); box-shadow:0 2px 7px rgba(46,74,67,.34);} :is(#clWiz,#clMbr) .pv-id-badge .ic img{width:16px; height:16px; display:block;} :is(#clWiz,#clMbr) .pv-id-meta{display:flex; flex-direction:column; line-height:1.15; text-align:center;} :is(#clWiz,#clMbr) .pv-id-meta .k{font-size:8px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted);} :is(#clWiz,#clMbr) .pv-id-meta .code{font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.9px; color:var(--green-d);} :is(#clWiz,#clMbr) .pv-status{margin-top:11px;} :is(#clWiz,#clMbr) .pill{display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill); padding:5px 13px; font-size:12px; font-weight:700;} :is(#clWiz,#clMbr) .pill .dot{width:7px;height:7px;border-radius:50%;} :is(#clWiz,#clMbr) .pill.intake{background:#E5EDF6; color:#2A5482;} :is(#clWiz,#clMbr) .pill.intake .dot{background:#3A6EA5;} :is(#clWiz,#clMbr) .pill.active{background:rgba(78,124,114,.14); color:var(--green-d);} :is(#clWiz,#clMbr) .pill.active .dot{background:var(--green);} :is(#clWiz,#clMbr) .pill.pending{background:#F7EDD8; color:var(--gold-d);} :is(#clWiz,#clMbr) .pill.pending .dot{background:var(--gold);} :is(#clWiz,#clMbr) .pill.none{background:#EEEBE2; color:var(--muted);} :is(#clWiz,#clMbr) .pill.none .dot{background:#bdb9ac;} :is(#clWiz,#clMbr) .pv-divider{height:1px; background:rgba(255,255,255,.12); margin:20px 0;} :is(#clWiz,#clMbr) .pv-stats{display:flex; flex-direction:column; gap:2px;} :is(#clWiz,#clMbr) .pv-stat{display:flex; align-items:center; gap:12px; padding:9px 6px; border-radius:10px;} :is(#clWiz,#clMbr) .pv-stat .si{width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; background:rgba(255,255,255,.10); color:#E7EEEA; border:1px solid rgba(255,255,255,.16);} :is(#clWiz,#clMbr) .pv-stat .si svg{width:16px;height:16px;} :is(#clWiz,#clMbr) .pv-stat .sv{display:flex; flex-direction:column;} :is(#clWiz,#clMbr) .pv-stat .sv .l{font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:rgba(231,238,234,.62);} :is(#clWiz,#clMbr) .pv-stat .sv .v{font-size:13.5px; font-weight:700; color:#F1F5F3;} :is(#clWiz,#clMbr) .pv-stat .sv .v.dim{color:rgba(231,238,234,.45); font-weight:600;} :is(#clWiz,#clMbr) .pv-meter{margin-top:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px;} :is(#clWiz,#clMbr) .pv-meter .mtop{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px;} :is(#clWiz,#clMbr) .pv-meter .mtop .ml{font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:rgba(231,238,234,.66);} :is(#clWiz,#clMbr) .pv-meter .mtop .mp{font-size:14px; font-weight:800; color:#fff; font-family:var(--mono);} :is(#clWiz,#clMbr) .pv-bar{height:8px; background:rgba(255,255,255,.14); border-radius:6px; overflow:hidden;} :is(#clWiz,#clMbr) .pv-bar i{display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,var(--green),var(--clay)); transition:width .5s cubic-bezier(.2,.8,.3,1);} :is(#clWiz,#clMbr) .dzmain{flex:1; min-width:0; overflow-y:auto; padding:28px 34px 32px; background:var(--surface);} :is(#clWiz,#clMbr) .dzpane{display:none; animation:dzfade .35s ease;} :is(#clWiz,#clMbr) .dzpane.show{display:block;} :is(#clWiz,#clMbr) .dzpane-head{margin-bottom:22px;} /* Wizard titles are uppercase app-wide - see the note in detail-view.css. These were the only Title Case ones left ("Household Basics", "Head of Household", "Family Members", "Review & Create", plus the dynamic member-step titles). Tracking flips from -.4px to positive: negative tracking on capitals runs the letters together. */ :is(#clWiz,#clMbr) .dzpane-head h2{font-size:21px; font-weight:800; letter-spacing:.02em; color:var(--ink); margin:0; text-transform:uppercase;} :is(#clWiz,#clMbr) .dzpane-head p{font-size:13.5px; color:var(--ink); margin:5px 0 0; max-width:560px;} :is(#clWiz,#clMbr) .fsec{margin-bottom:24px;} :is(#clWiz,#clMbr) .fsec-h{display:flex; align-items:center; gap:10px; margin-bottom:15px;} :is(#clWiz,#clMbr) .fsec-h .bub{width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center; background:rgba(78,124,114,.12); color:var(--green-d);} :is(#clWiz,#clMbr) .fsec-h .bub svg{width:15px;height:15px;} /* Standardized to black (was pine green): all wizard text/labels/headers read one uniform ink so nothing looks like a green accent. */ :is(#clWiz,#clMbr) .fsec-h .tt{font-size:12px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ink);} :is(#clWiz,#clMbr) .fsec-h .ln{flex:1; height:1px; background:var(--line2);} :is(#clWiz,#clMbr) .dzgrid{display:grid; grid-template-columns:1fr 1fr; gap:15px 18px;} :is(#clWiz,#clMbr) .fld{display:flex; flex-direction:column; gap:6px;} :is(#clWiz,#clMbr) .fld.full{grid-column:1 / -1;} :is(#clWiz,#clMbr) .fld--bottom{justify-content:flex-end;} :is(#clWiz,#clMbr) .fld label{font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:5px;} :is(#clWiz,#clMbr) .fld label .star{color:var(--clay-d);} /* FILLED SOFT controls (PROMPT FS1). This modal is hardcoded light (local --surface:#fff), so reference the non-flipping raw --mh-sage-* / --mh-ctrl-r seeds rather than the dark-flipping --mh-ctrl-* tokens, keeping the modal consistently light. Class names + bindings unchanged. */ /* Use background-COLOR (not the `background` shorthand) on the field + its focus state: the shorthand resets background-image to none, which wiped the select.inp chevron the instant the box was focused/opened ("the arrow is gone" on click). background-color leaves the chevron image intact through rest + focus + open. */ :is(#clWiz,#clMbr) .inp{width:100%; font-family:inherit; font-size:14px; font-weight:500; color:var(--ink); background-color:var(--mh-sage-50); border:1px solid transparent; border-radius:var(--mh-ctrl-r); padding:12px 14px; transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;} /* Placeholder / sample text = neutral GRAY (was sage green --mh-sage-600), matching the select's "- select -" so every field's hint text reads the same gray, not green. */ :is(#clWiz,#clMbr) .inp::placeholder{color:var(--muted); opacity:.75; font-weight:500;} :is(#clWiz,#clMbr) .inp:focus{outline:none; border-color:var(--mh-sage-300); background-color:#fff; box-shadow:var(--mh-ctrl-focus-ring);} :is(#clWiz,#clMbr) textarea.inp{resize:vertical; min-height:76px; line-height:1.55;} /* -webkit/-moz appearance MUST accompany the standard `appearance` so Windows Chromium/Edge (WebView2) never renders its own native arrow on top of our custom chevron - the "two arrows side by side" bug. Covers every select in both wizards. */ :is(#clWiz,#clMbr) select.inp{-webkit-appearance:none; -moz-appearance:none; appearance:none; background-image:var(--mh-ctrl-caret); background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px; padding-right:40px; cursor:pointer;} /* Open state: swap to the up-chevron so the wizard combos flip exactly like every other dropdown (Country of Origin / Primary Language / Referral Source, etc.). */ :is(#clWiz,#clMbr) select.inp:open{background-image:var(--mh-ctrl-caret-up);} /* Hide the legacy IE/Edge select arrow too (belt-and-braces for the double chevron). */ :is(#clWiz,#clMbr) select.inp::-ms-expand{display:none;} /* Checkbox row: container reads as a soft sage field; the box itself is the FS pill */ :is(#clWiz,#clMbr) .chkrow{display:flex; align-items:center; gap:11px; background:var(--mh-sage-50); border:1px solid transparent; border-radius:var(--mh-ctrl-r); padding:11px 13px;} :is(#clWiz,#clMbr) .chkrow input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;flex:none;cursor:pointer;border-radius:var(--mh-r-pill);border:1px solid transparent;background-color:var(--mh-sage-100);background-repeat:no-repeat;background-position:center;transition:background-color .16s ease, box-shadow .16s ease;} :is(#clWiz,#clMbr) .chkrow input:checked{background-color:var(--mh-sage-500);background-image:var(--mh-ctrl-check);} :is(#clWiz,#clMbr) .chkrow input:focus-visible{outline:none;box-shadow:var(--mh-ctrl-focus-ring);} :is(#clWiz,#clMbr) .chkrow label{font-size:13px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; cursor:pointer;} :is(#clWiz,#clMbr) .seg{display:inline-flex; background:var(--mh-sage-50); border:1px solid transparent; border-radius:var(--mh-ctrl-r); padding:4px; gap:3px;} :is(#clWiz,#clMbr) .seg button{border:none; background:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; color:var(--mh-sage-600); padding:7px 16px; border-radius:9px; transition:.15s;} :is(#clWiz,#clMbr) .seg button.on{background:#fff; color:var(--green-d); box-shadow:var(--sh-sm);} :is(#clWiz,#clMbr) .seg.risk button.on[data-v="Medium"]{color:var(--gold-d);} :is(#clWiz,#clMbr) .seg.risk button.on[data-v="High"]{color:var(--danger);} :is(#clWiz,#clMbr) .tip{display:flex; align-items:flex-start; gap:10px; background:rgba(78,124,114,.07); border:1px solid rgba(78,124,114,.18); border-radius:12px; padding:12px 14px; font-size:12.5px; font-weight:600; color:var(--green-d); margin-top:22px;} :is(#clWiz,#clMbr) .tip svg{width:17px;height:17px;flex:none;margin-top:1px;} :is(#clWiz,#clMbr) .roster{display:grid; grid-template-columns:1fr 1fr; gap:14px;} :is(#clWiz,#clMbr) .mcard{background:var(--cream2); border-radius:14px; padding:15px; display:flex; align-items:center; gap:13px; box-shadow:var(--sh-sm); transition:.16s;} :is(#clWiz,#clMbr) .mcard:hover{border-color:#C3CCC9; box-shadow:var(--sh-sm);} :is(#clWiz,#clMbr) .mcard .mav{width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px;} :is(#clWiz,#clMbr) .mcard .mn{font-size:15px; font-weight:800; color:var(--ink);} :is(#clWiz,#clMbr) .mcard .ms{font-size:12px; color:var(--muted); font-weight:600; margin-top:2px;} :is(#clWiz,#clMbr) .mcard .medit{margin-left:auto; width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;display:grid;place-items:center;} :is(#clWiz,#clMbr) .mcard .medit:hover{color:var(--green-d);border-color:var(--green);} :is(#clWiz,#clMbr) .mcard .medit svg{width:15px;height:15px;} :is(#clWiz,#clMbr) .madd{border:2px dashed var(--line); border-radius:14px; padding:15px; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; color:var(--muted); font-weight:800; font-size:14px; background:#fff; transition:.16s;} :is(#clWiz,#clMbr) .madd:hover{border-color:var(--green); color:var(--green-d); background:var(--cream2);} :is(#clWiz,#clMbr) .madd svg{width:18px;height:18px;} :is(#clWiz,#clMbr) .rev-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:20px; align-items:start;} :is(#clWiz,#clMbr) .rev-card{background:var(--cream2); border-radius:16px; overflow:hidden; box-shadow:var(--sh-sm);} :is(#clWiz,#clMbr) .rev-card .rh{display:flex; align-items:center; justify-content:space-between; padding:13px 17px; border-bottom:1px solid var(--line); background:#fff;} /* Review step (step 4) section headers standardized to black, same as the .fsec-h .tt headers on steps 1-3, so every section title across all four steps reads one ink. */ :is(#clWiz,#clMbr) .rev-card .rh .rt{font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--ink);} :is(#clWiz,#clMbr) .rev-card .rh .re{font-size:11.5px; font-weight:800; color:var(--clay-d); background:rgba(201,123,90,.12); border:1px solid rgba(201,123,90,.3); border-radius:8px; padding:4px 11px; cursor:pointer;} :is(#clWiz,#clMbr) .rev-card .rb{padding:14px 17px; display:grid; grid-template-columns:1fr 1fr; gap:13px 16px;} :is(#clWiz,#clMbr) .rev-item .l{font-size:10px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink); margin-bottom:2px;} :is(#clWiz,#clMbr) .rev-item .v{font-size:13.5px; font-weight:700; color:var(--ink);} :is(#clWiz,#clMbr) .rev-item .v.dim{color:#bdb9ac;font-weight:600;} :is(#clWiz,#clMbr) .pass{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--sh);} :is(#clWiz,#clMbr) :is(.pass,.rev-hohqr) .pt{background:linear-gradient(135deg,var(--sidebar),var(--green)); color:#fff; padding:14px 18px; display:flex; align-items:center; gap:10px;} :is(#clWiz,#clMbr) :is(.pass,.rev-hohqr) .pt img{width:24px;height:24px;} :is(#clWiz,#clMbr) :is(.pass,.rev-hohqr) .pt .o{font-size:15px;font-weight:800;} :is(#clWiz,#clMbr) .pass .pq{position:relative; width:172px; height:172px; margin:20px auto 12px; padding:11px; border:1.5px solid var(--line); border-radius:14px;} :is(#clWiz,#clMbr) .pass .pq svg{width:100%;height:100%;display:block;} :is(#clWiz,#clMbr) .pass .pq #qrPass{position:absolute; inset:11px;} :is(#clWiz,#clMbr) .pass .pq .plogo{position:absolute; inset:0; margin:auto; width:36px; height:36px; background:var(--sidebar); border-radius:9px; display:grid; place-items:center; box-shadow:0 0 0 4px #fff;} :is(#clWiz,#clMbr) .pass .pq .plogo img{width:23px;height:23px;} :is(#clWiz,#clMbr) .pass .pname{text-align:center; font-size:18px; font-weight:800; color:var(--ink);} :is(#clWiz,#clMbr) .pass .pcode{text-align:center; font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.5px; color:var(--muted); margin:2px 0 16px;} :is(#clWiz,#clMbr) .pass .pf{background:var(--cream2); border-top:1px solid var(--line); text-align:center; padding:11px; font-size:11.5px; font-weight:700; color:var(--muted);} :is(#clWiz,#clMbr) .confirm{display:flex; align-items:flex-start; gap:12px; background:rgba(216,155,61,.10); border:1px solid rgba(216,155,61,.4); border-radius:13px; padding:14px 16px; margin-top:18px;} :is(#clWiz,#clMbr) .confirm input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin-top:1px;cursor:pointer;border-radius:var(--mh-r-pill);border:1px solid transparent;background-color:var(--mh-sage-100);background-repeat:no-repeat;background-position:center;transition:background-color .16s ease, box-shadow .16s ease;} :is(#clWiz,#clMbr) .confirm input:checked{background-color:var(--mh-sage-500);background-image:var(--mh-ctrl-check);} :is(#clWiz,#clMbr) .confirm input:focus-visible{outline:none;box-shadow:var(--mh-ctrl-focus-ring);} :is(#clWiz,#clMbr) .confirm label{font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;} :is(#clWiz,#clMbr) .confirm label b{font-weight:800;} :is(#clWiz,#clMbr) .foot{flex:none; display:flex; align-items:center; gap:16px; padding:16px 30px; border-top:1px solid var(--line); background:var(--cream2);} :is(#clWiz,#clMbr) .foot .dots{display:flex; gap:7px;} :is(#clWiz,#clMbr) .foot .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:.3s;} :is(#clWiz,#clMbr) .foot .dots i.on{background:var(--green); width:22px; border-radius:5px;} :is(#clWiz,#clMbr) .foot .spacer{flex:1;} :is(#clWiz,#clMbr) .btn{font-family:inherit; font-weight:800; font-size:14px; border:none; cursor:pointer; border-radius:12px; padding:0 20px; height:46px; display:inline-flex; align-items:center; gap:8px; transition:.15s; white-space:nowrap;} :is(#clWiz,#clMbr) .btn svg{width:17px;height:17px;} :is(#clWiz,#clMbr) .btn--p{background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(78,124,114,.3);} :is(#clWiz,#clMbr) .btn--p:hover{background:var(--green-d); box-shadow:0 11px 24px rgba(78,124,114,.38); transform:translateY(-1px);} /* Ghost button (Cancel / Back): soft Matthew House pine outline instead of the creamy paper edge; hover deepens to solid brand green. */ :is(#clWiz,#clMbr) .btn--g{background:#fff; color:var(--ink); border:1.5px solid rgba(78,124,114,.32);} :is(#clWiz,#clMbr) .btn--g:hover{background:#fff; border-color:var(--green); color:var(--green-d);} :is(#clWiz,#clMbr) .btn--create{background:linear-gradient(120deg,var(--clay),var(--clay-d)); color:#fff; box-shadow:0 8px 20px rgba(201,123,90,.34);} :is(#clWiz,#clMbr) .btn--create:hover{transform:translateY(-1px); box-shadow:0 11px 26px rgba(201,123,90,.44);} :is(#clWiz,#clMbr) .btn:active{transform:translateY(1px);} /* ACCENT UNIFICATION (matches the Add New Program wizard): primary buttons, the step progress bar + step numbers, the footer dots and the toggle checkboxes all use the SAME sidebar teal (#2E4A43 -> #213A33). The profile-completeness bar (it lives inside the teal sidebar and needs contrast) and the clay "Create" button (a distinct final action) are intentionally left as-is. */ :is(#clWiz,#clMbr) .btn--p{background:linear-gradient(135deg,#2E4A43,#213A33); box-shadow:0 8px 20px rgba(33,58,51,.30);} :is(#clWiz,#clMbr) .btn--p:hover{background:linear-gradient(135deg,#375A50,#274A40); box-shadow:0 11px 24px rgba(33,58,51,.40);} :is(#clWiz,#clMbr) .step.active .num{background:#2E4A43; border-color:#2E4A43; box-shadow:0 6px 14px rgba(33,58,51,.34);} :is(#clWiz,#clMbr) .step.done .num{background:#213A33; border-color:#213A33;} :is(#clWiz,#clMbr) .step-line i{background:linear-gradient(90deg,#213A33,#2E4A43);} :is(#clWiz,#clMbr) .foot .dots i.on{background:#2E4A43;} /* !important: several same-specificity `.wchk/.chkrow input:checked` rules appear LATER in this file (lines ~193/240/288) and would otherwise win on source order. */ :is(#clWiz,#clMbr) :is(.chkrow,.wchk,.confirm) input:checked{background-color:#2E4A43 !important;} body.dark :is(#clWiz,#clMbr) :is(.chkrow,.wchk,.confirm) input:checked{background-color:#375A50 !important;} :is(#clWiz,#clMbr) .hide{display:none !important;} #clMbr{position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:24px; background:rgba(33,50,58,.5); backdrop-filter:blur(4px); animation:mmFade .25s ease;} #clMbr.show{display:grid;} /* The .mm-box / .mm-body / .mm-foot / .mm-tabs shell was RETIRED Jul 30 2026: Add Family Member is now the same `.dzwiz` box as the household wizard (see the ONE-WIZARD LOOK block below), so nothing emits these class names any more and a second shell size can no longer exist. */ @media (max-width:1080px){ :is(#clWiz,#clMbr) .dzaside{display:none;} :is(#clWiz,#clMbr) .step .meta{display:none;} } /* ===== transplant integration layer ===== */ #clWiz.show{display:grid;place-items:center;padding:24px;} :is(#clWiz,#clMbr) .dzwiz{margin:0 auto;} :is(#clWiz,#clMbr) *{box-sizing:border-box;} :is(#clWiz,#clMbr) .dzmain::-webkit-scrollbar{width:10px;} :is(#clWiz,#clMbr) .dzmain::-webkit-scrollbar-thumb{background:#D8D2C4;border-radius:8px;border:3px solid var(--surface);} :is(#clWiz,#clMbr) .inp.bad{border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(176,70,60,.15) !important;} /* Date fields now use the shared MhDatePicker; preserve the wizard's invalid (.bad) state on its field shell. */ :is(#clWiz,#clMbr) .dp.bad .dp-field{border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(176,70,60,.15) !important;} /* W6: scope the validation block to BOTH forms so the member popup's "Please fix the following" card is the same soft clay/red card as the wizard - not a raw unstyled list. */ :is(#clWiz,#clMbr) .werr{display:none;background:rgba(176,70,60,.08);border:1px solid rgba(176,70,60,.35);color:var(--danger);border-radius:12px;padding:12px 16px;font-size:13px;font-weight:600;line-height:1.55;margin:0 0 18px;} :is(#clWiz,#clMbr) .werr.show{display:block;} :is(#clWiz,#clMbr) .wchk{display:flex;align-items:center;gap:11px;background:var(--mh-sage-50);border:1px solid transparent;border-radius:var(--mh-ctrl-r);padding:11px 14px;min-height:46px;} :is(#clWiz,#clMbr) .wchk input{appearance:none;-webkit-appearance:none;margin:0;width:20px;height:20px;flex:none;cursor:pointer;border-radius:var(--mh-r-pill);border:1px solid transparent;background-color:var(--mh-sage-100);background-repeat:no-repeat;background-position:center;transition:background-color .16s ease, box-shadow .16s ease;} :is(#clWiz,#clMbr) .wchk input:checked{background-color:var(--mh-sage-500);background-image:var(--mh-ctrl-check);} :is(#clWiz,#clMbr) .wchk input:focus-visible{outline:none;box-shadow:var(--mh-ctrl-focus-ring);} :is(#clWiz,#clMbr) .wchk label{font-size:13px;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;} :is(#clWiz,#clMbr) .drop{border:1.6px dashed var(--line);border-radius:var(--r-fld);background:var(--cream2);color:var(--muted);font-size:12.5px;font-weight:600;padding:18px;text-align:center;cursor:pointer;} :is(#clWiz,#clMbr) .drop:hover{border-color:var(--green);color:var(--green-d);} :is(#clWiz,#clMbr) .qrblock{display:flex;flex-direction:column;align-items:center;gap:9px;background:var(--cream2);border-radius:14px;padding:14px;box-shadow:var(--sh-sm);} :is(#clWiz,#clMbr) .qrblock svg{width:118px;height:118px;border-radius:8px;background:#fff;padding:6px;} :is(#clWiz,#clMbr) .qrblock .qlbl{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:.3px;font-family:var(--mono);} /* W2c - stack the Client Identity Number: code prominent on top (mono), label small/muted beneath. */ #clWiz .idchip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;background:linear-gradient(135deg,var(--sidebar),var(--sidebar2));color:#fff;border-radius:12px;padding:10px 16px;margin:0 0 14px;} #clWiz .idchip .c{font-family:var(--mono);font-weight:600;font-size:16px;letter-spacing:1px;} #clWiz .idchip .l{font-size:10px;color:rgba(255,255,255,.7);font-weight:700;letter-spacing:.4px;text-transform:uppercase;} #clWiz .mcard .mrm{margin-left:6px;width:30px;height:30px;border-radius:9px;border:1px solid rgba(176,70,60,.35);background:rgba(176,70,60,.08);color:var(--danger);display:grid;place-items:center;cursor:pointer;flex:none;} #clWiz .mcard .mrm svg{width:14px;height:14px;} #clWiz .mcard .mrm:hover{background:rgba(176,70,60,.16);} /* member form: LEFT-aligned fields. W7 = Shaker-directed DEVIATION from the mock (the mock centers .inp text); left-align is standard form UX and keeps every input app-wide reading left. Retargeted .mm-body -> .dzmain Jul 30 with the shell change; the pill .mm-tabs rules went with the tab row the step meter replaced. */ #clMbr .dzmain .fld{display:flex;flex-direction:column;align-items:stretch;} #clMbr .dzmain .fld label{text-align:left;} #clMbr .dzmain .inp{text-align:left;} #clMbr .dzmain .fsec-h{flex-direction:column;gap:8px;align-items:flex-start;} #clMbr .dzmain .fsec-h .ln{display:none;} #clMbr .dzmain .fsec-h::after{content:"";width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--clay),var(--gold));} #clMbr .dzmain .wchk{justify-content:flex-start;} /* ===== polish layer (Jun 6 review) ===== */ /* centered header brand; tools + close pinned right */ :is(#clWiz,#clMbr) .hdr-row{justify-content:center; align-items:center; min-height:96px;} :is(#clWiz,#clMbr) .hdr-brand{text-align:left;} /* Right-pin the QR pass card flush to the header row's right edge, which mirrors the brand's left edge - both are inset by .hdr's 30px padding, so right:0 makes the two sides symmetric. Was 64px: a gap reserved for the old corner close (.hdr-x), which has since been removed, leaving the card floating too far from the right edge. (.hdr-tools is positioned relative to the position:relative .hdr-row, NOT .hdr, so the offset is measured from inside that 30px padding already.) */ :is(#clWiz,#clMbr) .hdr-tools{position:absolute; right:0; top:50%; transform:translateY(-50%);} :is(#clWiz,#clMbr) .hdr-x{position:absolute; right:14px; top:50%; transform:translateY(-50%);} /* QR fills its white frame */ :is(#clWiz,#clMbr) .qr-frame{padding:3px;} :is(#clWiz,#clMbr) .qr-frame #qrHdr, #clMbr .qr-frame #mQr{position:absolute; inset:3px;} /* header pass card states */ :is(#clWiz,#clMbr) .qr-card{cursor:pointer; transition:.18s;} :is(#clWiz,#clMbr) .qr-card.inactive{opacity:.45; pointer-events:none; filter:grayscale(.35);} :is(#clWiz,#clMbr) .qr-card:not(.inactive):hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.18);} /* city / state / zip / county on one row */ #clWiz .row4{grid-column:1/-1; display:grid; grid-template-columns:1.6fr .7fr .9fr 1.3fr; gap:15px 18px;} /* The member shell's own size override is GONE (Jul 30): it used to re-state 1240px / 92vh / 900px here to catch up with the household wizard, which is exactly the kind of duplicate that drifts. #clMbr now IS a `.dzwiz`, so it takes those numbers from the one rule at the top of this file. */ /* MH date picker (Phase W5: branded calendar for EVERY app date field, light + dark). The popup (#mhDp) is body-level and driven by js/datepicker.js. Tokens map onto the live theme variables so the calendar follows light/dark with no extra rules. The pine selected-day gradient is held as fixed brand greens (white text reads on both themes). */ .mh-app input[type="date"]::-webkit-calendar-picker-indicator{display:none;} #mhDp{position:fixed; z-index:500; width:288px; background:var(--mh-surface); border:1px solid var(--mh-line); border-radius:16px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(33,58,51,.28)); padding:12px; display:none; font-family:var(--mh-font-body); --dp-pine:#2E4A43; --dp-pine2:#213A33; --dp-green:var(--mh-green); --dp-cream:var(--mh-cream-2); --dp-line:var(--mh-line); --dp-ink:var(--mh-ink); --dp-muted:var(--mh-muted); --dp-clay:var(--mh-clay);} #mhDp.show{display:block; animation:dzfade .18s ease;} #mhDp .dp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;} #mhDp .dp-nav{width:30px; height:30px; border-radius:9px; border:1px solid var(--dp-line); background:var(--dp-cream); color:var(--dp-ink); cursor:pointer; display:grid; place-items:center; font-size:14px; font-weight:800;} #mhDp .dp-nav:hover{border-color:var(--dp-green); color:var(--dp-green);} #mhDp .dp-title{font-size:13.5px; font-weight:800; color:var(--dp-ink); letter-spacing:.2px; padding:6px 12px; border-radius:9px; cursor:pointer;} #mhDp .dp-title:hover{background:var(--dp-cream); color:var(--dp-green);} #mhDp .dp-dow{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:2px;} #mhDp .dp-dow span{text-align:center; font-size:10px; font-weight:800; letter-spacing:.4px; color:var(--dp-muted); padding:4px 0;} #mhDp .dp-days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;} #mhDp .dp-days button{height:32px; border:none; background:transparent; border-radius:9px; font-size:12.5px; font-weight:700; color:var(--dp-ink); cursor:pointer; font-family:inherit;} #mhDp .dp-days button:hover{background:var(--dp-cream); color:var(--dp-green);} #mhDp .dp-days button.off{color:var(--dp-muted); opacity:.55;} #mhDp .dp-days button.today{box-shadow:inset 0 0 0 1.5px var(--dp-clay);} #mhDp .dp-days button.sel{background:linear-gradient(135deg,var(--dp-pine),var(--dp-pine2)); color:#fff;} #mhDp .dp-months{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;} #mhDp .dp-months button{height:38px; border:1px solid var(--dp-line); background:var(--dp-cream); border-radius:10px; font-size:12px; font-weight:800; color:var(--dp-ink); cursor:pointer; font-family:inherit;} #mhDp .dp-months button:hover{border-color:var(--dp-green); color:var(--dp-green);} #mhDp .dp-months button.sel{background:linear-gradient(135deg,var(--dp-pine),var(--dp-pine2)); border-color:var(--dp-pine); color:#fff;} #mhDp .dp-yrow{display:flex; align-items:center; justify-content:center; gap:14px; margin:4px 0 10px;} #mhDp .dp-yrow .y{font-size:15px; font-weight:800; color:var(--dp-ink); font-family:var(--mono);} #mhDp .dp-foot{display:flex; justify-content:space-between; margin-top:10px; padding-top:9px; border-top:1px solid var(--dp-line);} #mhDp .dp-foot button{border:none; background:transparent; font-size:11.5px; font-weight:800; letter-spacing:.3px; cursor:pointer; font-family:inherit; padding:5px 9px; border-radius:8px;} #mhDp .dp-today{color:var(--dp-green);} #mhDp .dp-today:hover{background:var(--dp-cream);} #mhDp .dp-clear{color:var(--dp-muted);} #mhDp .dp-clear:hover{background:var(--dp-cream); color:var(--dp-clay);} /* ===================== AUXILIARY OVERLAY SELECTORS (defined elsewhere in mock, collected for the wizard) ===================== */ /* Printable client pass overlay (#clBadge is a .qr-modal whose card is built from the .qr-card-* family). Source: mh-dashboard.html lines 796-813. The wizard header QR cards (#hdrQrCard / #mQrCard) call CL.openBadge() which renders this. */ /* z-index sits ABOVE #hhDetail (99990) and #mvWiz (100000) so a QR pass opened from inside an overlay renders in front, not behind it. */ .qr-modal{position:fixed;inset:0;background:rgba(33,50,58,.5);z-index:100050;display:none;align-items:center;justify-content:center;padding:24px;} /* POLISH: the Program report modal added a broader .mh-app .qr-modal{z-index:420} to mh-theme.css, whose specificity (0,2,0) outranks the .qr-modal rule above and dragged the QrPassModal (#qrpBadge) BEHIND the student/household detail overlay (#hhDetail 99990). An id rule (specificity 1,0,0) wins everywhere, so the QR pass always opens in front. */ #qrpBadge{z-index:100060;} .qr-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;animation:wdPop .18s ease;} .qr-card{width:342px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(33,50,58,.4);} .qr-card-top{background:linear-gradient(135deg,#2E4A43,#4E7C72);color:#fff;display:flex;align-items:center;gap:11px;padding:15px 20px;} .qr-card-mark img{width:30px;height:30px;display:block;} .qr-card-org{font-family:var(--mh-font-head);font-weight:700;font-size:18px;} .qr-card-qr{position:relative;width:208px;height:208px;margin:24px auto 16px;padding:12px;background:#fff;border:1.5px solid var(--mh-line);border-radius:16px;box-sizing:border-box;} .qr-card-qr svg{width:100%;height:100%;display:block;} .qr-card-logo{position:absolute;inset:0;margin:auto;width:40px;height:40px;background:#2E4A43;border-radius:10px;display:grid;place-items:center;box-shadow:0 0 0 4px #fff;} .qr-card-logo img{width:26px;height:26px;display:block;} .qr-card-name{text-align:center;font-family:var(--mh-font-head);font-size:22px;font-weight:700;color:var(--mh-ink);} .qr-card-code{text-align:center;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--mh-muted);margin-bottom:16px;} .qr-card-fields{padding:0 24px 18px;display:flex;flex-direction:column;gap:11px;} .qr-card-fields .l{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--mh-muted);font-weight:700;margin-bottom:2px;} .qr-card-fields .v{font-size:14px;color:var(--mh-ink);font-weight:600;} .qr-card-foot{background:var(--mh-cream-2);text-align:center;padding:11px;font-size:11.5px;color:var(--mh-muted);font-weight:600;border-top:1px solid var(--mh-line);} .qr-actions{display:flex;gap:10px;} /* #clBadge and the member pass #clMbrBadge live outside #clWiz/#clMbr, so the wizard's scoped .btn rules don't reach them - re-declare for both (W6). */ :is(#clBadge,#clMbrBadge,#qrpBadge) .btn{font-family:inherit; font-weight:800; font-size:14px; border:none; cursor:pointer; border-radius:12px; padding:0 20px; height:46px; display:inline-flex; align-items:center; gap:8px; transition:.15s;} :is(#clBadge,#clMbrBadge,#qrpBadge) .btn--p{background:#2E4A43; color:#fff; box-shadow:0 8px 20px rgba(46,74,67,.3);} :is(#clBadge,#clMbrBadge,#qrpBadge) .btn--p:hover{background:#213A33; transform:translateY(-1px);} :is(#clBadge,#clMbrBadge,#qrpBadge) .btn--g{background:#fff; color:var(--mh-ink,#23302B); border:1.5px solid var(--mh-line,#e5e0d4);} :is(#clBadge,#clMbrBadge,#qrpBadge) .btn--g:hover{border-color:#cfcabc;} @media print{ body *{visibility:hidden!important;} #printCard, #printCard *, #printMbrCard, #printMbrCard *, #qrpBadgeCard, #qrpBadgeCard *{visibility:visible!important;} #printCard, #printMbrCard, #qrpBadgeCard{position:fixed;top:24px;left:50%;transform:translateX(-50%);box-shadow:none;border:1px solid #999;} } /* The Clients-list badge (#qrpBadge) renders inside .mh-app, which flips dark - keep the pass card a fixed light printable badge (dark text on white) in both themes. */ #qrpBadgeCard{background:#fff;} #qrpBadgeCard .qr-card-name{color:#23302B;} #qrpBadgeCard .qr-card-code{color:#8A8B83;} #qrpBadgeCard .qr-card-fields .l{color:#8A8B83;} #qrpBadgeCard .qr-card-fields .v{color:#2A2F31;} #qrpBadgeCard .qr-card-qr{border-color:#D9DFE7;} #qrpBadgeCard .qr-card-foot{background:#F1F4F7;color:#8A8B83;border-top-color:#D9DFE7;} /* #clBadge id-specificity guards so scoped resets can never strip the Program-card layout. Source: mh-dashboard.html lines 1659-1663. */ #clBadge .qr-card-qr{margin:24px auto 16px; padding:12px;} #clBadge .qr-card-logo{position:absolute; inset:0; margin:auto;} #clBadge .qr-card-fields{padding:0 24px 18px;} #clBadge .qr-card-name{margin-top:0;} /* Photo cropper (Facebook-style) - opened from the wizard photo drop (pv-photo). Source: mh-dashboard.html lines 1757-1775. */ #cdCrop{position:fixed; inset:0; background:rgba(20,28,26,.66); backdrop-filter:blur(5px); display:none; z-index:800;} #cdCrop.show{display:grid; place-items:center; padding:20px;} #cdCrop .cr-box{width:min(420px,calc(94 * var(--mh-vw))); background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.45); animation:dzfade .2s ease;} #cdCrop .cr-head{padding:18px 22px 14px;} #cdCrop .cr-ttl{font-family:var(--mh-font-head); font-size:17px; font-weight:700; color:#2A2F31;} #cdCrop .cr-sub{font-size:11.5px; font-weight:600; color:#8A8B83; margin-top:3px;} #cdCrop .cr-stage{position:relative; width:320px; height:320px; margin:0 auto; overflow:hidden; background:#111816; cursor:grab; border-radius:14px; touch-action:none;} #cdCrop .cr-stage:active{cursor:grabbing;} #cdCrop .cr-stage img{position:absolute; left:0; top:0; transform-origin:0 0; max-width:none; user-select:none; pointer-events:none;} #cdCrop .cr-mask{position:absolute; inset:0; pointer-events:none;} #cdCrop .cr-mask::before{content:""; position:absolute; left:50%; top:50%; width:284px; height:284px; transform:translate(-50%,-50%); border-radius:50%; box-shadow:0 0 0 9999px rgba(17,24,22,.62); border:2.5px solid rgba(255,255,255,.92);} #cdCrop .cr-zoom{display:flex; align-items:center; gap:12px; padding:16px 26px 6px;} #cdCrop .cr-zbtn{width:30px; height:30px; border-radius:9px; border:1px solid #D9DFE7; background:#F1F4F7; color:#2A2F31; cursor:pointer; display:grid; place-items:center; flex:none;} #cdCrop .cr-zbtn svg{width:14px; height:14px;} #cdCrop .cr-zbtn:hover{border-color:#4E7C72; color:#3D655D;} #cdCrop #crZoom{flex:1; accent-color:#2E4A43; height:4px; cursor:pointer;} #cdCrop .cr-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px 20px;} /* Dark-mode override for the cropper (the wizard token scope dark rules live in the dashboard sheet). Source: mh-dashboard.html lines 1325-1328. */ body.dark #cdCrop .cr-box{background:#222B27;} body.dark #cdCrop .cr-ttl{color:#EBE7DB;} body.dark #cdCrop .cr-sub{color:#9AA49C;} body.dark #cdCrop .cr-zbtn{background:#1C2421; border-color:#33403A; color:#EBE7DB;} /* Phase 4 component glue (Blazor). The new .dzwiz design reuses the .wiz container whose fixed-overlay backdrop lived in a rule scoped to #view-clients in the mock (a container this app does not have). Re-establish the #clWiz overlay base here so it behaves as a modal. #clWiz.show (display:grid; centered) is in the ported block. z-index sits above the client detail overlay (#clDetail, 120) and below the member popup (#clMbr, 300) which opens on top of the wizard. */ #clWiz{position:fixed; inset:0; z-index:200; display:none; background:rgba(33,42,38,.5); backdrop-filter:blur(3px); overflow:auto;} /* hidden InputFile inside the photo label, and the lightweight toast used for member add/update confirmations. */ .pv-file-hidden{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;} .pv-photo{cursor:pointer;} .wiz-toast{position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:1000; background:#2E4A43; color:#fff; padding:12px 20px; border-radius:12px; font-size:13.5px; font-weight:700; box-shadow:0 18px 40px rgba(20,40,35,.4);} /* ============================================================================ DARK MODE for the wizards (#clWiz New Household / Add Family + #clMbr Add Member). Both were landed fixed-light: the LOCAL --surface/--ink/--muted/--line tokens do not flip, and .inp uses the non-flipping --mh-sage-* seeds. This scoped body.dark override (1) redefines those LOCAL tokens to the app's REAL dark values - which flips every token-driven surface/text/line - and (2) brings the hardcoded #fff / sage field+control fills under the shared dark FILLED-SOFT control treatment. UNCHANGED (intentional brand surfaces, dark in both modes): the pine .hdr header and the pine .dzaside panel and everything inside it. QR code frames stay white for scannability. One block covers BOTH wizards. Light mode is untouched. ============================================================================ */ body.dark :is(#clWiz,#clMbr){ --surface:#222B27; --cream:#151C1A; --cream2:#1C2421; --ink:#EBE7DB; --muted:#9AA49C; --line:#33403A; --line2:#2A352F; } /* fields / selects / textareas -> the app's dark FILLED-SOFT control treatment. NOTE: use background-COLOR (longhand), never the background shorthand - the shorthand would reset the select caret's repeat/position and tile the chevron across the field. */ body.dark :is(#clWiz,#clMbr) .inp{ background-color:var(--mh-ctrl-fill); color:var(--mh-ink); } body.dark :is(#clWiz,#clMbr) .inp::placeholder{ color:var(--muted); opacity:.75; } body.dark :is(#clWiz,#clMbr) .inp:focus{ background-color:var(--mh-surface); border-color:var(--mh-ctrl-focus-border); box-shadow:var(--mh-ctrl-focus-ring); } body.dark :is(#clWiz,#clMbr) select.inp{ background-image:var(--mh-ctrl-caret); background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px; } /* dark open state must out-specify the dark rest rule above so the flip still happens */ body.dark :is(#clWiz,#clMbr) select.inp:open{ background-image:var(--mh-ctrl-caret-up); } /* checkbox + segmented control fills */ body.dark :is(#clWiz,#clMbr) :is(.chkrow,.wchk){ background:var(--mh-ctrl-fill); } body.dark :is(#clWiz,#clMbr) :is(.chkrow,.wchk,.confirm) input{ background-color:var(--mh-ctrl-fill-2); } body.dark :is(#clWiz,#clMbr) :is(.chkrow,.wchk,.confirm) input:checked{ background-color:var(--mh-ctrl-accent); } body.dark :is(#clWiz,#clMbr) .seg{ background:var(--mh-ctrl-fill); } body.dark :is(#clWiz,#clMbr) .seg button{ color:var(--mh-ctrl-ico); } body.dark :is(#clWiz,#clMbr) .seg button.on{ background:var(--mh-surface); color:var(--mh-sage-300); } /* stepper / chips / buttons / cards that hardcoded #fff in the LIGHT form area */ body.dark :is(#clWiz,#clMbr) .step .num{ background:var(--mh-ctrl-fill); border-color:var(--line); color:var(--muted); } body.dark :is(#clWiz,#clMbr) .step .meta .hint{ color:var(--muted); } body.dark :is(#clWiz,#clMbr) .step.active .meta .lbl{ color:var(--mh-sage-300); } body.dark :is(#clWiz,#clMbr) .btn--g{ background:var(--mh-ctrl-fill); color:var(--ink); border-color:rgba(78,124,114,.38); } body.dark :is(#clWiz,#clMbr) .btn--g:hover{ background:var(--mh-ctrl-fill-2); border-color:var(--green); color:var(--green-d); } body.dark :is(#clWiz,#clMbr) .mcard .medit{ background:var(--mh-ctrl-fill); border-color:var(--line); color:var(--muted); } body.dark :is(#clWiz,#clMbr) .madd{ background:var(--mh-ctrl-fill); } body.dark :is(#clWiz,#clMbr) .rev-card .rh{ background:var(--surface); } body.dark :is(#clWiz,#clMbr) .rev-item .v.dim{ color:var(--muted); } /* section headers + tinted callouts: lighten the pine foregrounds for AA on dark */ body.dark :is(#clWiz,#clMbr) :is(.tip, .qr-meta .code){ color:var(--mh-sage-300); } body.dark :is(#clWiz,#clMbr) .fsec-h .bub{ color:var(--mh-sage-300); } /* review-step pass preview: dark card, but the QR keeps a white backing to scan */ body.dark :is(#clWiz,#clMbr) :is(.pass,.rev-hohqr){ background:var(--surface); } body.dark :is(#clWiz,#clMbr) :is(.pass,.rev-hohqr) .pq{ background:#fff; } /* W2a - the MH-code pill on the pine aside. Light = white->cream gradient; in dark that read as a smudgy metallic gradient. Give it the app's recessed frosted-chip treatment (matches the completeness meter beside it), light --mh-ink code, MH icon untouched. */ body.dark :is(#clWiz,#clMbr) .pv-id-badge{ background:var(--mh-ctrl-fill); border-color:var(--mh-ctrl-border); box-shadow:none; } body.dark :is(#clWiz,#clMbr) .pv-id-meta .code{ color:var(--mh-ink); } /* scrollbar thumb on the dark form */ body.dark :is(#clWiz,#clMbr) .dzmain::-webkit-scrollbar-thumb{ background:#3A4742; border-color:var(--surface); } /* ---------------------------------------------------------------------------- Item 4 - the header "Household Pass" QR card. TRIM: the global printable-pass rule (.qr-card{width:342px}) was leaking onto this header card and making an oversized white slab; hug the QR + text instead. DARK: give the card the dark surface (the QR frame stays white) so the light --ink text stays legible - a near-white card with light text was invisible in dark. ---------------------------------------------------------------------------- */ :is(#clWiz,#clMbr) .qr-card{ width:fit-content; } body.dark :is(#clWiz,#clMbr) .qr-card{ background:var(--surface); box-shadow:0 12px 30px rgba(0,0,0,.45); } /* ============================================================================ Phase 8 - wizard photo: DEFAULT-AVATAR resting state (replaces the paper "Add ... photo" placeholder) + the options menu that opens the REUSED photocapture.js crop/camera studio. The pine ID-card gradient circle reads on the pine aside in both modes; the menu uses the wizard's (now dark-aware) local tokens. ============================================================================ */ :is(#clWiz,#clMbr) .pv-photo.pv-avatar .pv-photo-inner{ background:linear-gradient(150deg,var(--green),var(--sidebar)); border:2px solid rgba(255,255,255,.18); color:#fff; } :is(#clWiz,#clMbr) .pv-photo.pv-avatar:hover .pv-photo-inner{ border-color:rgba(255,255,255,.34); } :is(#clWiz,#clMbr) .pv-defav{ width:54%; height:54%; display:grid; place-items:center; color:#fff; opacity:.92; } :is(#clWiz,#clMbr) .pv-defav svg{ width:100%; height:100%; } /* THE PHOTO MENU HID BEHIND THE STATUS PILL (CEO, Aug 4 2026). Reported as "the menu glitches and sends itself backside, and the status pill appears" - and it did, but ONLY while the avatar was hovered, which is always, because you have just clicked it. .pv-photo:hover sets transform:translateY(-1px). ANY transform other than none creates a STACKING CONTEXT, so the menu's z-index:61 stopped competing with the rail and started competing only with the avatar's own children. The status pill below it carries backdrop-filter:blur(12px) - also a stacking context - and it comes LATER in the DOM, so it painted over the whole trapped menu. Move the mouse off and the transform goes, the context goes, and the menu jumps back in front: the flicker. PROVEN before fixing, in the running app: at rest, elementFromPoint over the overlap returned "Take photo"; with translateY(-1px) applied exactly as :hover applies it, the same point returned "No status yet". FIX: raise the AVATAR while its menu is open, not the menu - the avatar is what traps it - and stop it lifting under an open menu so nothing shifts underfoot. Both selectors already cover #clMbr (Add Family Member), which shares this rail and therefore shared the bug. */ :is(#clWiz,#clMbr) .pv-photo.menu-open{ z-index:70; } :is(#clWiz,#clMbr) .pv-photo.menu-open:hover{ transform:none; } /* options menu (Upload / Take photo / Remove) */ :is(#clWiz,#clMbr) .pv-menu{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); z-index:61; width:max-content; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 42px rgba(20,34,30,.34); padding:6px; display:flex; flex-direction:column; gap:2px; } :is(#clWiz,#clMbr) .pv-menu::before{ content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:11px; height:11px; background:var(--surface); border-left:1px solid var(--line); border-top:1px solid var(--line); border-radius:2px; } :is(#clWiz,#clMbr) .pv-mi{ 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(--ink); font-family:var(--font); font-size:13.5px; font-weight:600; text-align:left; cursor:pointer; white-space:nowrap; transition:background .12s ease, color .12s ease; } :is(#clWiz,#clMbr) .pv-mi:hover{ background:var(--cream2); color:var(--green-d); } :is(#clWiz,#clMbr) .pv-mi svg{ width:17px; height:17px; flex:none; color:var(--green); } :is(#clWiz,#clMbr) .pv-mi.pv-mi-danger{ color:var(--danger); } :is(#clWiz,#clMbr) .pv-mi.pv-mi-danger svg{ color:var(--danger); } :is(#clWiz,#clMbr) .pv-mi.pv-mi-danger:hover{ background:rgba(176,70,60,.1); } /* dark: keep the menu hover/icon legible (green-d is too dark on the dark surface) */ body.dark :is(#clWiz,#clMbr) .pv-mi:hover{ color:var(--mh-sage-300); } body.dark :is(#clWiz,#clMbr) .pv-mi svg{ color:var(--mh-sage-300); } .wiz-toast.wiz-toast-warn{ background:#A9761F; cursor:pointer; } /* ============================================================================ W4 - QR pass cards. W4a: the two wizard header pass cards (Household Pass / Kiosk Check-In) put the QR on the RIGHT and the text on the LEFT (matches the household card pattern). W4b: the Review step gets a clickable canonical Household pass plus a SECOND canonical QR for the Head of Household (its client code), clearly labelled. ============================================================================ */ #hdrQrCard, #mQrCard{ flex-direction:row-reverse; } :is(#clWiz,#clMbr) .rev-passcol{ display:flex; flex-direction:column; gap:14px; align-items:stretch; } /* P1 - the HoH QR card matches the household pass: same 172px QR, same card width, stacked and aligned with it in the right column (one tidy QR-card family). */ :is(#clWiz,#clMbr) .rev-hohqr{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--sh); } :is(#clWiz,#clMbr) .rev-hohqr .pq{ position:relative; width:172px; height:172px; margin:20px auto 12px; padding:11px; border:1.5px solid var(--line); border-radius:14px; background:#fff; box-sizing:border-box; } :is(#clWiz,#clMbr) .rev-hohqr .pq svg{ width:100%; height:100%; display:block; } :is(#clWiz,#clMbr) .rev-hohqr .pq .plogo{ position:absolute; inset:0; margin:auto; width:36px; height:36px; background:var(--sidebar); border-radius:9px; display:grid; place-items:center; box-shadow:0 0 0 4px #fff; } :is(#clWiz,#clMbr) .rev-hohqr .pq .plogo img{ width:23px; height:23px; } :is(#clWiz,#clMbr) .rev-hohqr-meta{ text-align:center; padding:0 14px 18px; } :is(#clWiz,#clMbr) .rev-hohqr-meta .t{ font-size:13px; font-weight:800; color:var(--ink); letter-spacing:-.1px; } :is(#clWiz,#clMbr) .rev-hohqr-meta .code{ font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:.5px; color:var(--green-d); margin-top:3px; } :is(#clWiz,#clMbr) .rev-clickqr{ cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; } :is(#clWiz,#clMbr) .rev-clickqr:hover{ transform:translateY(-1px); box-shadow:var(--sh); } /* dark: lighten the HoH code (green-d reads too dark on the dark card) */ body.dark :is(#clWiz,#clMbr) .rev-hohqr-meta .code{ color:var(--mh-sage-300); } /* STEP 1c: draft resume banner + the visible Discard affordance (sits between the header and the stepper). Uses the wizard's own tokens so it inherits light + dark. */ #clWiz .wz-draftbar{ display:flex; align-items:center; gap:9px; margin:0 26px; padding:9px 14px; border-radius:12px; border:1px solid rgba(78,124,114,.30); background:rgba(78,124,114,.08); font-size:12.5px; color:var(--green-d); } #clWiz .wz-draftbar .ico{ flex:none; width:15px; height:15px; color:var(--green-d); } #clWiz .wz-draftbar .ico svg{ width:100%; height:100%; } #clWiz .wz-drafttx{ flex:1; min-width:0; line-height:1.35; } #clWiz .wz-discard{ flex:none; border:0; background:none; padding:4px 6px; font:inherit; font-weight:800; font-size:12px; color:var(--danger); cursor:pointer; border-radius:8px; } #clWiz .wz-discard:hover{ background:rgba(176,70,60,.10); text-decoration:underline; } body.dark #clWiz .wz-draftbar{ border-color:rgba(120,170,158,.30); background:rgba(78,124,114,.16); color:var(--mh-sage-300); } body.dark #clWiz .wz-draftbar .ico{ color:var(--mh-sage-300); } body.dark #clWiz .wz-discard{ color:#e0a892; } body.dark #clWiz .wz-discard:hover{ background:rgba(201,123,90,.16); } /* ============================================================ ONE-WIZARD LOOK (parity with Housing Subsidy wizard). Wizard chrome = full-height left rail (identity summary + QR pass) + top progress bar (fills per step) + subsidy-style footer. NO vertical step list: the step title in the form header carries it. Reuses the wizard's own green tokens - NO colour change - dark via the existing body.dark remap. SCOPE, Jul 30 2026 (CEO): this block was `#clWiz` ONLY, and the note here said that was "so the shared #clMbr chrome is untouched". That is exactly what left Add Family Member on the old pine-banner + pill-tabs shell while the household wizard moved on - two looks for what the CEO calls one wizard. Every rule below is now `:is(#clWiz,#clMbr)`, so the two shells are the SAME declarations and cannot drift. Sizes come from the shared `.dzwiz` rule at the top of this file, which both now use as their box - there is no second size to keep in step. ============================================================ */ :is(#clWiz,#clMbr) .dzwiz{ flex-direction:row; } /* was column (header/stepper/body/foot) */ :is(#clWiz,#clMbr) .dzaside{ width:344px; display:flex; flex-direction:column; padding:26px 26px 28px; } /* left-panel header: Clients TAB icon + title + full-width line (New Program parity) */ :is(#clWiz,#clMbr) .pv-hdr{ display:flex; align-items:center; gap:10px; margin:0 -26px 20px; padding:0 26px 18px; border-bottom:1px solid rgba(255,255,255,.13); } :is(#clWiz,#clMbr) .pv-hdr-mark{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; color:#fff; background:linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.26); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); } :is(#clWiz,#clMbr) .pv-hdr-mark svg{ width:21px; height:21px; display:block; } :is(#clWiz,#clMbr) .pv-hdr-ttl{ font-size:22px; font-weight:800; letter-spacing:0; text-transform:uppercase; color:#fff; line-height:1.15; } /* identity summary: photo -> name -> Active -> QR pass */ /* photo a touch bigger; camera badge centred on the circle's bottom edge; the badge shows ONLY when there's no photo - once a photo is uploaded it hides (the whole circle stays clickable to change it). */ :is(#clWiz,#clMbr) .pv-photo{ width:120px; height:120px; } /* camera badge stays at its original bottom-right, nudged so its centre sits ON the circle's outline (4:30 position) instead of inside/covering the picture. */ :is(#clWiz,#clMbr) .pv-photo .cam{ right:3px; bottom:3px; } :is(#clWiz,#clMbr) .pv-photo.has .cam{ display:none; } :is(#clWiz,#clMbr) .pv-name{ margin-top:14px; font-size:19px; } :is(#clWiz,#clMbr) .pv-status{ margin-top:10px; } /* QR pass moved INTO the rail (below Active), replacing the old MH-ID text badge. Kept a light card in both themes so the QR always reads on the pine rail. */ /* QR on the LEFT, its details on the RIGHT (override the old #hdrQrCard row-reverse). */ :is(#clWiz,#clMbr) .pv-qr{ margin-top:16px; flex-direction:row; padding:10px 13px 10px 10px; background:#fff; border:1px solid rgba(20,40,35,.10); box-shadow:0 10px 24px rgba(20,40,35,.28); } :is(#clWiz,#clMbr) .pv-qr .qr-frame{ width:76px; height:76px; padding:5px; } :is(#clWiz,#clMbr) .pv-qr .qr-meta{ text-align:left; } body.dark :is(#clWiz,#clMbr) .pv-qr{ background:#F4F7F5; } body.dark :is(#clWiz,#clMbr) .pv-qr .qr-meta .code{ color:var(--green-d); } /* line BELOW the QR; completeness + stats flow together beneath it (no awkward gap) */ :is(#clWiz,#clMbr) .pv-divider{ margin:18px 0; } :is(#clWiz,#clMbr) .pv-meter{ margin-top:0; } :is(#clWiz,#clMbr) .pv-stats{ margin-top:16px; } /* right column: full-width progress on top, form, footer */ :is(#clWiz,#clMbr) .dzright{ flex:1; min-width:0; display:flex; flex-direction:column; background:var(--surface); } :is(#clWiz,#clMbr) .dzright-top{ flex:none; padding:24px 34px 6px; } :is(#clWiz,#clMbr) .pv-prog{ display:flex; align-items:center; gap:14px; } :is(#clWiz,#clMbr) .pv-prog .lab{ font-size:12.5px; font-weight:800; color:var(--green-d); white-space:nowrap; } :is(#clWiz,#clMbr) .pv-progbar{ flex:1; height:6px; border-radius:6px; background:var(--cream2); overflow:hidden; } :is(#clWiz,#clMbr) .pv-progbar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--green),var(--green-d)); transition:width .4s ease; } /* form body + footer live inside the right column */ :is(#clWiz,#clMbr) .dzmain{ min-height:0; } :is(#clWiz,#clMbr) .foot{ padding:18px 34px 24px; } /* ============================================================================ THE MH DEFAULT FIELD STANDARD, landed on the New Client wizard (#clWiz) and the Add Family Member popup (#clMbr). RESTYLE ONLY - not one field, step, section or label changes here. What changes is the SHELL each field is drawn in: the .icf inset cool field, the typeable masked MM/DD/YYYY date, the type-to-search dropdown, dark + locked parity, and the required / error design. SCOPED TO BOTH HOSTS ON PURPOSE. #clWiz and #clMbr share one field generator (ClientSections -> Section), so a rule aimed at one necessarily reaches the other. Rather than fight that, both get the standard - which is also the only way the two forms can read as one app. Values are the canonical ones from detail-view.css (the shell Client Detail was rebuilt on), so a field here measures identical to a field there. ============================================================================ */ /* ---- tokens (light) ---- */ :is(#clWiz,#clMbr){ --ink-1:#1C2733; --ink-2:#3B474B; --ink-3:#677579; --ink-4:#9AA7B3; --danger-bg:#F7E3E1; --danger-ink:#8C312B; --f-rest-bg:#DFE4EA; --f-rest-bd:rgba(40,60,80,.10); --f-rest-sh:inset 0 1px 2px rgba(40,60,80,.10); --f-hover-bg:#E4E8ED; --f-focus-bg:#FFFFFF; --f-focus-bd:rgba(40,60,80,.16); --f-focus-sh:0 10px 28px rgba(40,60,80,.14); --brand-600:#375A50; --brand-tint:rgba(46,74,67,.12); --r-sm:9px; --r-md:12px; --ease:cubic-bezier(.2,.7,.25,1); --t:.2s var(--ease); } /* ---- tokens (dark). Same token NAMES, so every rule below is written once. ---- */ body.dark :is(#clWiz,#clMbr){ --ink-1:#EAF0F4; --ink-2:#C2CDD5; --ink-3:#8C9AA5; --ink-4:#5E6E7A; --danger-bg:rgba(192,71,63,.18); --danger-ink:#F0A9A3; --f-rest-bg:#121A20; --f-rest-bd:rgba(180,210,235,.10); --f-rest-sh:inset 0 1px 2px rgba(0,0,0,.4); --f-hover-bg:#16202A; --f-focus-bg:#222E38; --f-focus-bd:rgba(150,190,225,.28); --f-focus-sh:0 12px 30px rgba(0,0,0,.5); --brand-600:#8FBBA5; --brand-tint:rgba(143,187,165,.18); } /* ---- grid + field frame. Gaps opened to the standard's 18/20 because a 50px field needs more air than the old 40px one. ---- */ :is(#clWiz,#clMbr) .dzgrid{gap:18px 20px} #clWiz .row4{gap:18px 20px} /* min-width:0 is load-bearing, exactly as it is on the shell's own .field: a grid item defaults to min-width:auto, so it refuses to shrink below its CONTENT. The .icf is wider than the old flat input (icon + 15px padding either side + chevron), which made the 4-column City / State / Zip / County row push ~27px past the pane and give the whole form a horizontal scrollbar. With min-width:0 the fr columns shrink as intended. */ :is(#clWiz,#clMbr) .fld{gap:8px;min-width:0} :is(#clWiz,#clMbr) .fld label{font-size:11.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px} :is(#clWiz,#clMbr) .fld label .star{color:var(--danger)} /* ---- SECTION HEADING: the standard's icon bubble + uppercase title + rule. The wizard already had .fsec-h/.bub/.tt/.ln in the right ORDER and already drew an icon bubble - only the LOOK is brought onto the standard. ---- */ :is(#clWiz,#clMbr) .fsec-h{gap:12px;margin:0 0 15px} :is(#clWiz,#clMbr) .fsec-h .bub{width:34px;height:34px;border-radius:11px; background:var(--brand-tint);color:var(--brand-600)} :is(#clWiz,#clMbr) .fsec-h .bub svg{width:18px;height:18px} :is(#clWiz,#clMbr) .fsec-h .tt{font-size:15px;font-weight:800;text-transform:uppercase; letter-spacing:.06em;color:var(--ink-1);white-space:nowrap} :is(#clWiz,#clMbr) .fsec-h .ln{background:var(--line)} /* The member popup used to stack its heading and swap the rule for a clay bar. Both forms draw the same kit now, so both draw the same heading. */ #clMbr .dzmain .fsec-h{flex-direction:row;align-items:center;gap:12px} #clMbr .dzmain .fsec-h .ln{display:block} #clMbr .dzmain .fsec-h::after{content:none} /* ---- THE INSET COOL FIELD ---- */ :is(#clWiz,#clMbr) .icf{position:relative;display:flex;align-items:center;gap:11px;min-height:50px; padding:0 15px;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd); box-shadow:var(--f-rest-sh);border-radius:var(--r-md); transition:background var(--t),border-color var(--t),box-shadow var(--t)} :is(#clWiz,#clMbr) .icf:hover:not(:focus-within){background:var(--f-hover-bg)} :is(#clWiz,#clMbr) .icf:focus-within, :is(#clWiz,#clMbr) .icf.open{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)} /* KILL the app-global control skin so the VISIBLE field is the .icf shell ONLY - no "field inside the field" ghost, no green focus ring. */ :is(#clWiz,#clMbr) .icf :is(input,select,textarea), :is(#clWiz,#clMbr) .icf :is(input,select,textarea):hover, :is(#clWiz,#clMbr) .icf :is(input,select,textarea):focus, :is(#clWiz,#clMbr) .icf :is(input,select,textarea):focus-visible{ flex:1;min-width:0;background:transparent !important;border:0 !important;box-shadow:none !important; border-radius:0 !important;padding:0 !important;min-height:0 !important;height:auto !important; outline:none !important;text-align:left !important; font-family:var(--font);font-size:15px;font-weight:500;color:var(--ink-1)} :is(#clWiz,#clMbr) .icf input::placeholder, :is(#clWiz,#clMbr) .icf textarea::placeholder{color:var(--ink-4);font-weight:400;opacity:1} /* CATCH-ALL for a control that is NOT inside an .icf, so the app-global sage placeholder (mh-theme.css --mh-ctrl-ico = #6E948B) can never leak in here. */ :is(#clWiz,#clMbr) :is(input,textarea)::placeholder{color:var(--ink-4);font-weight:400;opacity:1} :is(#clWiz,#clMbr) .icf.area{align-items:stretch;padding:13px 15px;min-height:104px} :is(#clWiz,#clMbr) .icf.area textarea{resize:none;min-height:78px;line-height:1.55} :is(#clWiz,#clMbr) .icf .ic{width:19px;height:19px;flex:none;display:grid;place-items:center;color:var(--ink-3)} :is(#clWiz,#clMbr) .icf .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;fill:none} :is(#clWiz,#clMbr) .icf:focus-within .ic, :is(#clWiz,#clMbr) .icf.open .ic{color:var(--brand-600)} :is(#clWiz,#clMbr) .icf .chev{transition:transform var(--t)} :is(#clWiz,#clMbr) .icf.open .chev{transform:rotate(180deg)} /* a value the form SHOWS but does not own (Age, Citizenship Eligibility) */ :is(#clWiz,#clMbr) .icf.locked-face{cursor:default;background:var(--f-rest-bg);opacity:.75} :is(#clWiz,#clMbr) .icf.locked-face:hover{background:var(--f-rest-bg)} /* ---- LOCKED: dimmed and inert, NEVER hidden. A field that vanishes reads as "we hold no value", which would be a lie. ---- */ :is(#clWiz,#clMbr) .fld.locked .icf{pointer-events:none;background:var(--f-rest-bg);opacity:.62;box-shadow:none} :is(#clWiz,#clMbr) .fld.locked>label{opacity:.62} :is(#clWiz,#clMbr) .fld.locked .dp{pointer-events:none;opacity:.62} :is(#clWiz,#clMbr) .fld-note{margin:6px 0 0;font-size:11.5px;font-weight:600;color:var(--ink-4);line-height:1.4} :is(#clWiz,#clMbr) .fld.locked .fld-note{color:var(--ink-3)} /* ---- THE REQUIRED / ERROR DESIGN. AN ERROR OUTRANKS HOVER, FOCUS AND OPEN - it holds its red until the VALUE is fixed. `.fld.err .icf` is (1,2,0) and would lose to `.icf:hover:not(:focus-within)` (1,3,0), so hovering a rejected field would repaint it as if nothing were wrong. Carry every competing state. ---- */ :is(#clWiz,#clMbr) .fld.err .icf, :is(#clWiz,#clMbr) .fld.err .icf:hover, :is(#clWiz,#clMbr) .fld.err .icf:hover:not(:focus-within), :is(#clWiz,#clMbr) .fld.err .icf:focus-within, :is(#clWiz,#clMbr) .fld.err .icf.open{border-color:var(--danger);background:var(--danger-bg)} :is(#clWiz,#clMbr) .fld.err .icf:focus-within{box-shadow:0 0 0 3px rgba(176,70,60,.24)} :is(#clWiz,#clMbr) .fld.err>label, :is(#clWiz,#clMbr) .fld.err>label .star{color:var(--danger-ink)} :is(#clWiz,#clMbr) .fld-msg{display:flex;align-items:center;gap:6px;margin:7px 0 0;font-size:12.5px; font-weight:650;line-height:1.35;color:var(--danger-ink)} :is(#clWiz,#clMbr) .fld-msg svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2.2; fill:none;stroke-linecap:round} :is(#clWiz,#clMbr) .fld:not(.err) .fld-msg{display:none} /* An error SNAPS in - the field's own transition would otherwise fade the wash in. */ :is(#clWiz,#clMbr) .fld.err .icf{transition:none;animation:mhClwShk .34s cubic-bezier(.36,.07,.19,.97)} /* NO `both`: a retained fill-mode transform stays a STACKING CONTEXT for good, which traps an open dropdown inside its own field and lets the next field paint over it. */ @keyframes mhClwShk{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}} :is(#clWiz,#clMbr) .fld.err .dp .dp-field{border-color:var(--danger) !important; background:var(--danger-bg) !important;box-shadow:none !important} :is(#clWiz,#clMbr) .fld.err .wchk{border-color:var(--danger);background:var(--danger-bg)} /* ---- TYPE-TO-SEARCH DROPDOWN ---- */ :is(#clWiz,#clMbr) .icf.has-sel{cursor:pointer} :is(#clWiz,#clMbr) .sel-face{flex:1;min-width:0;font-family:var(--font);font-size:15px;font-weight:500; color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer; text-align:left !important} :is(#clWiz,#clMbr) .sel-face.ph{color:var(--ink-4);font-weight:400} :is(#clWiz,#clMbr) .icf .sel-search{flex:1;min-width:0;font-family:var(--font);font-size:15px; font-weight:500;color:var(--ink-1);cursor:text} :is(#clWiz,#clMbr) .icf .sel-search::placeholder{color:var(--ink-4);font-weight:400} /* the open field and its popup must paint above every sibling field */ :is(#clWiz,#clMbr) .fld:has(.icf.open){position:relative;z-index:60} :is(#clWiz,#clMbr) .selpop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:1000; background:var(--f-focus-bg);border:1px solid var(--f-focus-bd);border-radius:var(--r-md); box-shadow:var(--f-focus-sh),0 22px 48px -18px rgba(28,39,51,.34);padding:7px;display:flex; flex-direction:column;gap:3px;max-height:288px;overflow:auto;scrollbar-width:none; -ms-overflow-style:none;animation:mhClwPop .16s var(--ease)} @keyframes mhClwPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @keyframes mhClwUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} :is(#clWiz,#clMbr) .selpop.up{top:auto;bottom:calc(100% + 8px);animation-name:mhClwUp} :is(#clWiz,#clMbr) .selpop::-webkit-scrollbar{width:0;height:0;display:none} :is(#clWiz,#clMbr) .sel-opt{text-align:left !important;justify-content:flex-start !important;border:none; background:none;font-family:var(--font);font-size:14.5px;font-weight:600;color:var(--ink-1); padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;display:flex !important;align-items:center; gap:10px;width:100%;transition:background var(--t),color var(--t)} :is(#clWiz,#clMbr) .sel-opt:hover{background:var(--f-rest-bg)} :is(#clWiz,#clMbr) .sel-opt.on{background:var(--brand-tint);color:var(--brand-600);font-weight:700} :is(#clWiz,#clMbr) .sel-opt.on::after{content:"\2713";margin-left:auto;color:var(--brand-600);font-weight:800} :is(#clWiz,#clMbr) .selpop .cb-empty{padding:13px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3)} /* ---- DATE FIELD: the frozen shared MhDatePicker, reskinned to .icf metrics so a date measures IDENTICAL to a plain text field. Masked MM/DD/YYYY, and per the standard a date field carries NO chevron (only a select does). The calendar POPOVER itself is untouched. ---- */ :is(#clWiz,#clMbr) .mh-dp-w{width:100%} :is(#clWiz,#clMbr) .dp .dp-field{height:auto;min-height:50px;gap:11px;padding:0 15px;cursor:text; background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh); border-radius:var(--r-md);user-select:auto; transition:background var(--t),border-color var(--t),box-shadow var(--t)} :is(#clWiz,#clMbr) .dp:not(.open) .dp-field:hover{background:var(--f-hover-bg)} :is(#clWiz,#clMbr) .dp.open .dp-field{background:var(--f-focus-bg);border-color:var(--f-focus-bd); box-shadow:var(--f-focus-sh)} :is(#clWiz,#clMbr) .dp .dpf-ico{width:19px;height:19px;color:var(--ink-3)} :is(#clWiz,#clMbr) .dp.open .dpf-ico{color:var(--brand-600)} :is(#clWiz,#clMbr) .dp .dpf-chev{display:none} :is(#clWiz,#clMbr) .dp .dpf-val{font-size:15px;font-weight:500;color:var(--ink-1);font-variant-numeric:tabular-nums} :is(#clWiz,#clMbr) .dp .dpf-val.empty{color:var(--ink-4);font-weight:400} /* the masked input: the mask string IS the value, so ::placeholder never renders */ :is(#clWiz,#clMbr) .dp .dpf-mask, :is(#clWiz,#clMbr) .dp .dpf-mask:hover, :is(#clWiz,#clMbr) .dp .dpf-mask:focus, :is(#clWiz,#clMbr) .dp .dpf-mask:focus-visible{ flex:1;min-width:0;width:100%;background:transparent !important;border:0 !important; box-shadow:none !important;border-radius:0 !important;padding:0 !important;min-height:0 !important; height:auto !important;outline:none !important;text-align:left !important; font-family:var(--font);font-size:15px;font-weight:500;color:var(--ink-1); font-variant-numeric:tabular-nums;cursor:text;user-select:text} /* no animation, and reveal the popover only once JS has PLACED it (the placed one carries an inline position:fixed) - otherwise Blazor paints it at its stylesheet default first and it visibly jumps. The SPACE in "position: fixed" matters. */ :is(#clWiz,#clMbr) .dp .dp-pop{transition:none !important;transform:none !important} :is(#clWiz,#clMbr) .dp.open .dp-pop{transform:none !important;visibility:hidden;z-index:1200} :is(#clWiz,#clMbr) .dp.open .dp-pop[style*="position: fixed"]{visibility:visible} :is(#clWiz,#clMbr) .fld:has(.dp.open){position:relative;z-index:80} /* ---- TOGGLES: uppercase label, matching every other heading and toggle in the app. The WORDS are unchanged - only their case is. ---- */ :is(#clWiz,#clMbr) .wchk{background:var(--f-rest-bg);border:1px solid var(--f-rest-bd); box-shadow:var(--f-rest-sh);border-radius:var(--r-md);min-height:50px;padding:0 15px;gap:11px; transition:background var(--t),border-color var(--t),box-shadow var(--t)} :is(#clWiz,#clMbr) .wchk:hover{background:var(--f-hover-bg)} :is(#clWiz,#clMbr) .wchk label{font-size:11.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-1);cursor:pointer} :is(#clWiz,#clMbr) .fld.locked .wchk{pointer-events:none;opacity:.62;box-shadow:none} /* ---- the form-level banner, brought onto the danger tokens so it reads as one warning design with the per-field messages beneath ---- */ :is(#clWiz,#clMbr) .werr{background:var(--danger-bg);border-color:var(--danger);color:var(--danger-ink)} /* ============================================================================ THE WIZARD BACKGROUND + THE RAIL QR CHIP (CEO, Jul 27 2026). Two things the field pass left behind: 1) THE FORM PANE WAS STILL WHITE. Every other wizard paints its form column on the app's ONE cool-gray canvas and lets the rail stay pine - see `#pgWiz .wz2 .pane{background:var(--bg-canvas)}` and `#pgWiz .wz2 .m-foot{background:var(--bg-canvas)}` (program-wizards.css). White made the inset fields look like they sat in a hole rather than recessed into the surface, which is the whole point of the kit. Canvas #E8EBF0 light / #1A232B dark - the same two values pgWiz uses. 2) THE RAIL QR WAS A WHITE CARD stuck on the pine rail. The canonical rail QR is the Enroll Student wizard's `.sum-qr`: a FROSTED chip (`rgba(255,255,255,.11)` + a 1px inset white hairline) with the QR itself kept white so it still scans, and its label/code in white on the pine. Same treatment as `#mhDetail .sum-qr`, so all three surfaces now agree. Appended last so these win on source order over the older white rules. ============================================================================ */ :is(#clWiz,#clMbr){ --bg-canvas:#E8EBF0; } body.dark :is(#clWiz,#clMbr){ --bg-canvas:#1A232B; } /* ---- 1. the form column is the canvas, the rail stays pine ---- */ /* Jul 30: #clMbr's .mm-body / .mm-foot / .mm-tabs rules are gone with those elements - it now paints the same .dzright / .dzmain / .foot the household wizard does. */ :is(#clWiz,#clMbr) .dzright{ background:var(--bg-canvas); } :is(#clWiz,#clMbr) .dzmain{ background:var(--bg-canvas); } :is(#clWiz,#clMbr) .foot{ background:var(--bg-canvas); border-top-color:var(--line); } /* the scrollbar gutter blended into the old white pane */ :is(#clWiz,#clMbr) .dzmain::-webkit-scrollbar-thumb{ background:rgba(40,60,80,.16); border:3px solid var(--bg-canvas); } body.dark :is(#clWiz,#clMbr) .dzmain::-webkit-scrollbar-thumb{ background:rgba(180,210,235,.18); border-color:var(--bg-canvas); } /* the progress track has to READ as recessed on the canvas, exactly like `#pgWiz .prog-bar{background:var(--f-rest-bg)}` - the old near-white track disappeared into the pane. */ :is(#clWiz,#clMbr) .pv-progbar{ background:var(--f-rest-bg); box-shadow:var(--f-rest-sh); } /* ---- 2. the rail QR: frosted chip, not a white card ---- */ :is(#clWiz,#clMbr) .pv-qr{ background:rgba(255,255,255,.11); border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); transition:background var(--t); } /* No LIFT on a rail element: the rail is an overflow:auto column, and a hover lift against a scroll edge is exactly what clips a card's corners. The frosted chip brightens instead - the same hover the Enroll rail QR uses. */ :is(#clWiz,#clMbr) .pv-qr:hover{ background:rgba(255,255,255,.16); transform:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); } body.dark :is(#clWiz,#clMbr) .pv-qr{ background:rgba(255,255,255,.11); } body.dark :is(#clWiz,#clMbr) .pv-qr:hover{ background:rgba(255,255,255,.16); } /* the QR itself STAYS WHITE - it has to scan */ :is(#clWiz,#clMbr) .pv-qr .qr-frame{ background:#fff; border:0; border-radius:8px; overflow:hidden; } /* label + code now read on pine, not on white */ :is(#clWiz,#clMbr) .pv-qr .qr-meta .t{ color:#fff; } :is(#clWiz,#clMbr) .pv-qr .qr-meta .code{ color:#fff; } :is(#clWiz,#clMbr) .pv-qr .qr-meta .scan{ color:rgba(255,255,255,.6); } body.dark :is(#clWiz,#clMbr) .pv-qr .qr-meta .code{ color:#fff; } /* ---- 3. the cards that SIT ON the canvas must still read as cards. Knock-on from moving the pane off white: the roster card and the review card were --cream2 (#F1F4F7), which read fine on a white pane but is only ~25/765 away from the #E8EBF0 canvas - they all but vanished, and worse, their headers are #fff, so a review card read as a floating white strip over nothing. Same story in dark (#1C2421 card on a #1A232B canvas). Fixed the way the rest of the app does it: a card on the canvas is --f-focus-bg with a hairline, exactly like `#mhDetail .pd-card`. Now the card body and its header agree and the card is legible in both themes. ---- */ #clWiz .mcard, #clWiz .rev-card{ background:var(--f-focus-bg); border:1px solid var(--line); } #clWiz .rev-card .rh{ background:var(--f-focus-bg); } /* ---- 4. the rail QR spans the rail, like PROFILE COMPLETENESS (CEO, Jul 27 2026). The card was `width:fit-content` (from the shared .qr-card rule) inside a `align-items:center` column, so it hugged its content and floated centred while the completeness meter beside it spanned the full 292px rail. `align-self:stretch` + `width:auto` overrides the fit-content and makes it fill the same column box. Horizontal padding lifted 10 -> 14px so the QR's inner edge lines up with the meter's label; vertical padding is left alone so the rail's rhythm does not shift. ---- */ :is(#clWiz,#clMbr) .pv-qr{ align-self:stretch; width:auto; padding:10px 14px; } /* ---- 5. STATUS PILLS ARE THE APP'S ONE GLASS PILL (CEO, Jul 27 2026). The household rail pill now renders `.st.st--hero` from status.css, coloured only by lkp_HouseholdStatus.ColorHex - so the SAME status draws the SAME pill here, on the Clients list, on the household cards and on both detail heroes. The wizard's old hardcoded `.pill.active/.intake/.pending/.none` set is no longer used for status. What is left on `.pill` is the member rail's RELATIONSHIP chip, which is NOT a status and must stop borrowing the status palette - it was rendering `.pill.active`, the green that means "Active", for every relationship from Spouse to Grandchild. Neutral frosted chip on the pine rail; the status pill above is the only coloured pill in the wizard. ---- */ :is(#clWiz,#clMbr) .pv-status .pill{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#EAF2EE; box-shadow:inset 0 1px 0 rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px) saturate(1.5); backdrop-filter:blur(8px) saturate(1.5); padding:7px 13px; font-size:13px; font-weight:600; line-height:1; } :is(#clWiz,#clMbr) .pv-status .pill .dot{ background:rgba(255,255,255,.75); } /* the rail sits on pine in BOTH themes, so the chip does not flip */ body.dark :is(#clWiz,#clMbr) .pv-status .pill{ background:rgba(255,255,255,.12); color:#EAF2EE; }