/* 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(var(--tg-rgb,255,255,255),calc(.22*var(--tg-k,1))), rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))));
    border:1px solid rgba(255,255,255,.28);border-right-color:var(--tg-edge-r,rgba(255,255,255,.28));border-bottom-color:var(--tg-edge-b,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(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1))), rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))));
    border:1px solid rgba(255,255,255,.22);border-right-color:var(--tg-edge-r,rgba(255,255,255,.22));border-bottom-color:var(--tg-edge-b,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);border-right-color:var(--tg-edge-r,rgba(255,255,255,.25));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.25));
    background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))); color:#fff; cursor:pointer; display:grid; place-items:center; transition:background .15s;}
  :is(#clWiz,#clMbr) .hdr-x:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));}
  :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:rgb(var(--tg-rgb,255,255,255)); 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,:is(#subWiz,#volWiz)) .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(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))); margin:20px 0;}
  :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-stats{display:flex; flex-direction:column; gap:2px;}
  :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-stat{display:flex; align-items:center; gap:12px; padding:9px 6px; border-radius:10px;}
  :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-stat .si{width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center; background:rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))); color:#E7EEEA; border:1px solid rgba(255,255,255,.16);border-right-color:var(--tg-edge-r,rgba(255,255,255,.16));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.16));}
  :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-stat .si svg{width:16px;height:16px;}
  :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-stat .sv{display:flex; flex-direction:column;}
  :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .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,:is(#subWiz,#volWiz)) .pv-stat .sv .v{font-size:13.5px; font-weight:700; color:#F1F5F3;}
  :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-stat .sv .v.dim{color:rgba(231,238,234,.45); font-weight:600;}
  :is(#clWiz,#clMbr) .pv-meter{margin-top:12px; background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); border:1px solid rgba(255,255,255,.12);border-right-color:var(--tg-edge-r,rgba(255,255,255,.12));border-bottom-color:var(--tg-edge-b,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(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))); 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:rgb(var(--tg-rgb,255,255,255)); 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:rgb(var(--tg-rgb,255,255,255)); 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:rgb(var(--tg-rgb,255,255,255));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:rgb(var(--tg-rgb,255,255,255)); 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:rgb(var(--tg-rgb,255,255,255));}
  /* 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:5px;/* QRFILL29: was 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:5px;}/* QRFILL29: was 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:rgb(var(--tg-rgb,255,255,255)); color:var(--ink); border:1.5px solid rgba(78,124,114,.32);}
  :is(#clWiz,#clMbr) .btn--g:hover{background:rgb(var(--tg-rgb,255,255,255)); 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:5px;/* QRFILL29: was 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,:is(#subWiz,#volWiz)) .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,:is(#subWiz,#volWiz)) .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(var(--tg-rgb,255,255,255),calc(.22*var(--tg-k,1))), rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))));
  border:1px solid rgba(255,255,255,.26);border-right-color:var(--tg-edge-r,rgba(255,255,255,.26));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.26)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
:is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-hdr-mark svg{ width:21px; height:21px; display:block; }
:is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .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,:is(#subWiz,#volWiz)) .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,:is(#subWiz,#volWiz)) .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(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)));
  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(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1))); transform:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
body.dark :is(#clWiz,#clMbr) .pv-qr{ background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1))); }
body.dark :is(#clWiz,#clMbr) .pv-qr:hover{ background:rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1))); }
/* 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,:is(#subWiz,#volWiz)) .pv-status .pill{
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.18);border-right-color:var(--tg-edge-r,rgba(255,255,255,.18));border-bottom-color:var(--tg-edge-b,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,:is(#subWiz,#volWiz)) .pv-status .pill .dot{ background:rgba(var(--tg-rgb,255,255,255),calc(.75*var(--tg-k,1))); }
/* the rail sits on pine in BOTH themes, so the chip does not flip */
body.dark :is(#clWiz,#clMbr,:is(#subWiz,#volWiz)) .pv-status .pill{ background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))); color:#EAF2EE; }


/* =============================================================================
   DUPLICATE GUARD LINK (Aug 24 2026) - "(Please click here)".

   A BUTTON, NOT AN ANCHOR, and styled to read as a link. It must DISCARD the
   half-entered household before it navigates; a real <a href> would leave the
   wizard - and its saved draft - behind, which is the exact half-made record this
   whole change exists to prevent.

   The class name is namespaced to the wizard. `.wz-duplink` was checked against
   every stylesheet before it was claimed - the newcomer yields, and this one had
   no incumbent.
   ============================================================================= */
.mh-app .werr .wz-duplink {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 800;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mh-app .werr .wz-duplink:hover,
.mh-app .werr .wz-duplink:focus-visible { text-decoration-thickness: 2px; }
.mh-app .werr .wz-duplink:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }


/* ============================================================================
   PAGE 1 (HOUSEHOLD BASICS) - THE FIELD IS A TILE.   18 September 2026.

   Owner: "change the Household Basics Detail section, no all the 4 section only the
   first one - I would like to check how our standard new fields looks, so make each of
   them like KPI cards like you did before ... only change the first page 1."

   So this is the MINT tile from the client / household record (field standard 4a), in
   its .ed (editable) form, brought into the wizard - NOT a new look invented here.
   Every number below is copied from `#mhDetail .mint-w` / `.mint-w.ed`
   (detail-view.css ~1572, client-detail-view.css ~466), not re-picked by eye:
   16px radius, 12/16/14/30 padding, the 7px dot at left:14px/top:17px, the
   10px/800/.1em label, the 16px/650/24px value, the dashed + hollow-dot empty state,
   the white hover and the pine focus ring.

   THE WELL IS NOT DELETED, IT IS SWITCHED OFF HERE. `.icf` is still the wizard's
   standard field and still draws pages 2, 3 and 4 and the whole Add Member popup
   (#clMbr) - 258 uses app-wide. Every rule in this block starts `#clWiz .dzpane.mf`,
   so no field outside page 1 can be reached by any of it. And nothing is NESTED: the
   well inside the tile is flattened to nothing (background, border, shadow, padding,
   min-height all removed), because a well inside a tile is the "double border" defect
   the field standard already records.

   AFFORDANCE COMES FROM THE TILE, NOT FROM A BORDER: rest -> hover (white + lift) ->
   focus (white + pine ring). That is the same escalation `.icf` performs; the tile
   just performs it instead.
   ============================================================================ */

:is(#clWiz,#clMbr) .dzpane.mf{
  --mt-bg:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  --mt-bd:rgba(255,255,255,.85);
  --mt-sh:0 6px 16px -12px rgba(30,55,48,.35);
  --mt-lift:0 4px 10px -6px rgba(16,40,34,.28), 0 18px 38px -18px rgba(16,40,34,.32);
  --mt-dot:#2F6B57;          --mt-dot-rim:rgba(47,107,87,.16);
  --mt-lb:#7A8A84;           --mt-vl:#1C2A25;          --mt-un:#9CA8A3;
  --mt-empty-bg:rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1)));
  --mt-empty-bd:rgba(30,55,48,.18);
  --mt-empty-dot:rgba(30,55,48,.22);
  --mt-hover-bg:rgba(var(--tg-rgb,255,255,255),.85);
  --mt-focus-bg:rgb(var(--tg-rgb,255,255,255));        --mt-focus-bd:rgba(47,107,87,.55);
  --mt-focus-ring:0 0 0 3px rgba(47,107,87,.13);
  --mt-bad:#C0473F;          --mt-bad-bd:rgba(192,71,63,.60);
  --mt-bad-ring:0 0 0 3px rgba(192,71,63,.12);
  --mt-chev:#8A9A94;
}
/* DARK is re-keyed, not ported - the mock is light-only. Same recipe: a lighter
   translucent tile on the canvas, and the filled/hollow dot pair keeping its meaning. */
body.dark :is(#clWiz,#clMbr) .dzpane.mf{
  --mt-bg:rgba(255,255,255,.06);
  --mt-bd:rgba(180,210,235,.14);
  --mt-sh:0 6px 16px -12px rgba(0,0,0,.55);
  --mt-lift:0 4px 10px -6px rgba(0,0,0,.4), 0 18px 38px -18px rgba(0,0,0,.55);
  --mt-dot:#5FCFA4;          --mt-dot-rim:rgba(95,207,164,.18);
  --mt-lb:#8C9AA5;           --mt-vl:#EAF0F4;          --mt-un:#6E7E88;
  --mt-empty-bg:rgba(255,255,255,.025);
  --mt-empty-bd:rgba(180,210,235,.16);
  --mt-empty-dot:rgba(180,210,235,.30);
  --mt-hover-bg:rgba(255,255,255,.10);
  --mt-focus-bg:rgba(255,255,255,.13);
  --mt-focus-bd:rgba(143,187,165,.55);
  --mt-focus-ring:0 0 0 3px rgba(143,187,165,.16);
  --mt-bad:#F0A9A3;          --mt-bad-bd:rgba(192,71,63,.75);
  --mt-bad-ring:0 0 0 3px rgba(192,71,63,.22);
  --mt-chev:#8C9AA5;
}

/* ---- the grid. 11px, the tile gap, because a tile is a card with its own edge and no
       longer needs the 18/20 air a 50px well between two bare labels needed. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .dzgrid{gap:11px}
:is(#clWiz,#clMbr) .dzpane.mf .row4{gap:11px}

/* ---- THE TILE ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fld{
  position:relative;gap:4px;min-width:0;
  padding:12px 16px 14px 30px;border-radius:16px;
  background:var(--mt-bg);border:1px solid var(--mt-bd);box-shadow:var(--mt-sh);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
:is(#clWiz,#clMbr) .dzpane.mf .fld::before{
  content:"";position:absolute;left:14px;top:17px;width:7px;height:7px;border-radius:50%;
  background:var(--mt-dot);box-shadow:0 0 0 3px var(--mt-dot-rim);
}
/* NOT SET. Declared BEFORE :hover and :focus-within on purpose - all three are the same
   specificity, so the later rule wins, and reaching for a field must always beat resting
   on it. `.mtE` is written by the component off the bound value (see Mt() in the razor). */
:is(#clWiz,#clMbr) .dzpane.mf .fld.mtE{
  background:var(--mt-empty-bg);border-style:dashed;border-color:var(--mt-empty-bd);box-shadow:none;
}
:is(#clWiz,#clMbr) .dzpane.mf .fld.mtE::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mt-empty-dot)}
:is(#clWiz,#clMbr) .dzpane.mf .fld:hover{
  background:var(--mt-hover-bg);border-style:solid;border-color:var(--mt-bd);
  transform:translateY(-2px);box-shadow:var(--mt-lift);
}
/* THE TILE IS THE FIELD, so the TILE carries focus - :focus-within, because the thing that
   takes focus is the control inside it and the ring has to appear around the tile. */
:is(#clWiz,#clMbr) .dzpane.mf .fld:focus-within{
  background:var(--mt-focus-bg);border-style:solid;border-color:var(--mt-focus-bd);
  box-shadow:var(--mt-focus-ring),var(--mt-lift);transform:translateY(-2px);
}
/* A TRANSFORMED ANCESTOR IS THE CONTAINING BLOCK FOR position:fixed (the dropdown-transform
   law). The calendar popover is placed by JS as position:fixed, so a date tile must never
   lift - the lift would drag the popover off the field. The type-to-search .selpop is
   ABSOLUTE inside the .icf, so a select tile is safe and keeps its lift. Last, so it wins
   on source order over :hover and :focus-within, which are the same specificity. */
:is(#clWiz,#clMbr) .dzpane.mf .fld:has(.dp){transform:none}

/* ---- the label + the required star ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fld>label{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mt-lb);line-height:1.25;gap:4px;
}
:is(#clWiz,#clMbr) .dzpane.mf .fld>label .star{color:var(--mt-bad);font-weight:800;margin-left:1px}

/* ---- FLATTEN THE WELL. Everything here REMOVES chrome; nothing here is new design. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .icf,
:is(#clWiz,#clMbr) .dzpane.mf .icf:hover,
:is(#clWiz,#clMbr) .dzpane.mf .icf:hover:not(:focus-within),
:is(#clWiz,#clMbr) .dzpane.mf .icf:focus-within,
:is(#clWiz,#clMbr) .dzpane.mf .icf.open{
  min-height:0;gap:8px;background:none;border:0;box-shadow:none;border-radius:0;
}
/* PADDING IS DECLARED ONCE, OUTSIDE THE STATE LIST, AND THIS IS THE WHOLE REASON WHY.
   It used to sit in the list above, where the `:hover:not(:focus-within)` arm is (1,5,0) -
   MORE specific than the `.icf.has-sel` rule further down that stretches the field back over
   the tile's gutter (1,4,0). So the moment the mouse touched a dropdown tile the hover arm
   reset padding-left to 0 while the -30px margin stayed, and the value jumped 30px to the
   left, out of line with its own label. Owner caught it: "when I am mouse hovering the text
   moving to left". A state list must never carry a property that a later, less specific rule
   needs to override - the mouse then changes the LAYOUT, and a field must look identical at
   rest and under the cursor. */
:is(#clWiz,#clMbr) .dzpane.mf .icf{padding:0}
/* the well's own leading icon goes - the DOT is the tile's marker, and two markers on one
   field is noise. The chevron stays: it is the only thing that says "this one opens". */
:is(#clWiz,#clMbr) .dzpane.mf .icf>.ic:not(.chev){display:none}
:is(#clWiz,#clMbr) .dzpane.mf .icf .chev{width:15px;height:15px;color:var(--mt-chev)}
:is(#clWiz,#clMbr) .dzpane.mf .icf:hover .chev,
:is(#clWiz,#clMbr) .dzpane.mf .icf.open .chev,
:is(#clWiz,#clMbr) .dzpane.mf .icf:focus-within .chev{color:var(--brand-600)}

/* ---- the control, dressed as the value line. 24px line-height, NOT 1.35 - the standard's
       own note: 1.35 computes to 21.6 and quietly shortens every tile by 2px. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .icf :is(input,textarea),
:is(#clWiz,#clMbr) .dzpane.mf .icf :is(input,textarea):hover,
:is(#clWiz,#clMbr) .dzpane.mf .icf :is(input,textarea):focus,
:is(#clWiz,#clMbr) .dzpane.mf .icf :is(input,textarea):focus-visible{
  font-size:16px;font-weight:650;line-height:24px;color:var(--mt-vl);
}
:is(#clWiz,#clMbr) .dzpane.mf .icf input{height:24px}
:is(#clWiz,#clMbr) .dzpane.mf .icf :is(input,textarea)::placeholder{color:var(--mt-un);font-weight:500;opacity:1}

/* the dropdown face and its search box are the same value line */
:is(#clWiz,#clMbr) .dzpane.mf .sel-face,
:is(#clWiz,#clMbr) .dzpane.mf .icf .sel-search{
  font-size:16px;font-weight:650;line-height:24px;color:var(--mt-vl);
}
:is(#clWiz,#clMbr) .dzpane.mf .icf .sel-search{height:24px}
:is(#clWiz,#clMbr) .dzpane.mf .sel-face.ph,
:is(#clWiz,#clMbr) .dzpane.mf .icf .sel-search::placeholder{color:var(--mt-un);font-weight:500}

/* A PROSE TILE MUST NOT COLLAPSE. 72px = three value lines, so a note tile reads as a place
   to write rather than as a one-line field that happens to be taller. */
:is(#clWiz,#clMbr) .dzpane.mf .icf.area{min-height:0;padding:0;align-items:stretch}
/* !important is not decoration here: the well's own neutralizer sets
   `min-height:0 !important` on every control it holds, so the floor loses to it on
   cascade origin no matter how specific this selector is. Measured before the fix: the
   note tile stood at 93px with a 50px box, not 117 with 72. */
:is(#clWiz,#clMbr) .dzpane.mf .icf.area textarea{min-height:72px !important;line-height:24px;resize:none}

/* ---- the date field: the frozen MhDatePicker, flattened to the same value line. It carries
       no chevron (only a select does) and now no icon either. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .dp .dp-field,
:is(#clWiz,#clMbr) .dzpane.mf .dp:not(.open) .dp-field:hover,
:is(#clWiz,#clMbr) .dzpane.mf .dp.open .dp-field{
  min-height:0;height:auto;gap:8px;background:none;border:0;box-shadow:none;border-radius:0;
}
/* and once, outside the state list, for the same reason - see the note on .icf above */
:is(#clWiz,#clMbr) .dzpane.mf .dp .dp-field{padding:0}
:is(#clWiz,#clMbr) .dzpane.mf .dp .dpf-ico{display:none}
:is(#clWiz,#clMbr) .dzpane.mf .dp .dpf-val{font-size:16px;font-weight:650;line-height:24px;color:var(--mt-vl)}
:is(#clWiz,#clMbr) .dzpane.mf .dp .dpf-val.empty{color:var(--mt-un);font-weight:500}
:is(#clWiz,#clMbr) .dzpane.mf .dp :is(.dpf-mask,.dpf-mask:hover,.dpf-mask:focus,.dpf-mask:focus-visible){
  font-size:16px;font-weight:650;line-height:24px;height:24px;color:var(--mt-vl);
}

/* ---- the toggle tile. Its own label IS the field name, so the placeholder &nbsp; label
       above it is dropped and the tick is centred; the grid still stretches the tile to its
       row-mate's height, so nothing in the row goes ragged. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fld:has(.wchk){justify-content:center}
:is(#clWiz,#clMbr) .dzpane.mf .fld:has(.wchk)>label{display:none}
:is(#clWiz,#clMbr) .dzpane.mf .wchk,
:is(#clWiz,#clMbr) .dzpane.mf .wchk:hover{
  min-height:0;padding:0;gap:10px;background:none;border:0;box-shadow:none;border-radius:0;
}
:is(#clWiz,#clMbr) .dzpane.mf .wchk label{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--mt-vl)}

/* ---- LOCKED: dimmed and inert, never hidden. Dimmed ONCE, on the tile - the well's own
       .62 and the label's own .62 would otherwise compound to .38. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fld.locked{opacity:.62;box-shadow:none}
:is(#clWiz,#clMbr) .dzpane.mf .fld.locked>label{opacity:1}
:is(#clWiz,#clMbr) .dzpane.mf .fld.locked .icf{background:none;box-shadow:none;opacity:1}

/* ---- THE REFUSAL LANDS ON THE TILE, not in the well - red border, red ring, and the dot
       goes red too, so the row reads wrong at a glance and not only where the caret is.
       An error outranks hover, focus and open: it holds its red until the VALUE is fixed. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fld.err .icf,
:is(#clWiz,#clMbr) .dzpane.mf .fld.err .icf:hover,
:is(#clWiz,#clMbr) .dzpane.mf .fld.err .icf:hover:not(:focus-within),
:is(#clWiz,#clMbr) .dzpane.mf .fld.err .icf:focus-within,
:is(#clWiz,#clMbr) .dzpane.mf .fld.err .icf.open{
  background:none;border:0;box-shadow:none;animation:none;
}
:is(#clWiz,#clMbr) .dzpane.mf .fld.err .dp .dp-field,
:is(#clWiz,#clMbr) .dzpane.mf .fld.err .wchk{background:none !important;border:0 !important;box-shadow:none !important}
:is(#clWiz,#clMbr) .dzpane.mf .fld.err,
:is(#clWiz,#clMbr) .dzpane.mf .fld.err:hover,
:is(#clWiz,#clMbr) .dzpane.mf .fld.err:focus-within{
  background:var(--mt-focus-bg);border-style:solid;border-color:var(--mt-bad-bd);
  box-shadow:var(--mt-bad-ring);transform:none;
  animation:mhClwShk .34s cubic-bezier(.36,.07,.19,.97);
}
:is(#clWiz,#clMbr) .dzpane.mf .fld.err::before{background:var(--mt-bad);box-shadow:0 0 0 3px rgba(192,71,63,.18)}
:is(#clWiz,#clMbr) .dzpane.mf .fld.err>label,
:is(#clWiz,#clMbr) .dzpane.mf .fld.err>label .star{color:var(--mt-bad)}

/* ---- the two lines a tile can carry under its value ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fld-msg{margin:6px 0 0;font-size:11.5px}
:is(#clWiz,#clMbr) .dzpane.mf .fld-note{margin:5px 0 0;font-size:11px}


/* ============================================================================
   PAGE 1 - THE COLLAPSE LIST.   18 September 2026.

   Owner: "each part like A. Identity & Status and so on, it must be like collapse list,
   each of them, when one collapse the open one close. Very professional."

   So each lettered part is one panel, and ONE is open at a time - the component holds a
   single index (_hb), so opening B is the same act as closing A and no state exists in
   which two are open. The head keeps the kit it already had (bubble, uppercase title,
   hairline rule) and gains two things a shut panel needs: how many of its fields are
   filled, and a chevron.

   NO `overflow:hidden` ON THE PANEL. The dropdowns on this page (Status, Case Manager,
   Country, Language, State, County) hang BELOW their field as an absolutely positioned
   .selpop, and a clipping panel would cut every one of them in half. The clip lives on
   the inner wrapper and ONLY while the panel is moving - the component adds `.settled`
   one animation after `.open`, and that is what releases it.

   The growth itself is `grid-template-rows: 0fr -> 1fr`, not max-height: it animates to
   the content's REAL height, so a 4-field panel and an 8-field panel both open at the
   same speed and neither one hangs at the end on slack max-height.
   ============================================================================ */

:is(#clWiz,#clMbr) .dzpane.mf{
  --acc-bg:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));
  --acc-bd:rgba(255,255,255,.80);
  --acc-sh:0 10px 24px -20px rgba(30,55,48,.55);
  --acc-open-bg:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));
  --acc-head-hover:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));
  --acc-n-bg:rgba(47,107,87,.10);
  --acc-n-ink:#2F6B57;
  --acc-n-done-bg:rgba(47,107,87,.92);
  --acc-n-done-ink:#EDF7F2;
}
body.dark :is(#clWiz,#clMbr) .dzpane.mf{
  --acc-bg:rgba(255,255,255,.035);
  --acc-bd:rgba(180,210,235,.12);
  --acc-sh:0 10px 24px -20px rgba(0,0,0,.7);
  --acc-open-bg:rgba(255,255,255,.05);
  --acc-head-hover:rgba(255,255,255,.06);
  --acc-n-bg:rgba(143,187,165,.16);
  --acc-n-ink:#8FBBA5;
  --acc-n-done-bg:rgba(143,187,165,.85);
  --acc-n-done-ink:#10201A;
}

/* ---- the panel ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc{
  margin:0 0 10px;border-radius:18px;
  background:var(--acc-bg);border:1px solid var(--acc-bd);box-shadow:var(--acc-sh);
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc:last-of-type{margin-bottom:0}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.open{background:var(--acc-open-bg)}

/* ---- the head. It is the whole hit area, so it is padded like a row and not like a
       caption; role=button + tabindex on the div it already was, so nothing in the
       existing .fsec-h/.bub/.tt/.ln kit had to be re-laid-out for a <button>. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h{
  margin:0;padding:13px 18px;gap:12px;cursor:pointer;border-radius:18px;
  -webkit-user-select:none;user-select:none;
  transition:background .18s var(--ease);
}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h:hover{background:var(--acc-head-hover)}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h:focus-visible{outline:2px solid var(--brand-600);outline-offset:-3px}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h .bub{width:30px;height:30px;border-radius:10px}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h .bub svg{width:16px;height:16px}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h .tt{font-size:13px;letter-spacing:.07em}

/* ---- WHAT A SHUT PANEL STILL SAYS. Counted off the same model the tiles read, so the
       pill and the dots inside can never disagree; it turns solid at complete. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .acc-n{
  flex:none;display:inline-flex;align-items:baseline;gap:1px;
  padding:4px 10px;border-radius:99px;
  background:var(--acc-n-bg);color:var(--acc-n-ink);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  transition:background .18s var(--ease),color .18s var(--ease);
}
:is(#clWiz,#clMbr) .dzpane.mf .acc-n i{font-style:normal;font-weight:700;opacity:.6}
:is(#clWiz,#clMbr) .dzpane.mf .acc-n.done{background:var(--acc-n-done-bg);color:var(--acc-n-done-ink)}
:is(#clWiz,#clMbr) .dzpane.mf .acc-n.done i{opacity:.75}

/* ---- the chevron ---- */
:is(#clWiz,#clMbr) .dzpane.mf .acc-c{
  flex:none;width:20px;height:20px;display:grid;place-items:center;color:var(--mt-lb);
  transition:transform .3s var(--ease),color .18s var(--ease);
}
:is(#clWiz,#clMbr) .dzpane.mf .acc-c svg{width:18px;height:18px}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h:hover .acc-c{color:var(--brand-600)}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.open .acc-c{transform:rotate(180deg);color:var(--brand-600)}

/* ---- the body ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fsec-b{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .32s var(--ease);
}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.open .fsec-b{grid-template-rows:1fr}
/* min-height:0 is load-bearing: a grid item refuses to shrink below its content without
   it, so the row would sit at full height and 0fr would animate nothing. */
:is(#clWiz,#clMbr) .dzpane.mf .fsec-bi{overflow:hidden;min-height:0}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.settled .fsec-bi{overflow:visible}
:is(#clWiz,#clMbr) .dzpane.mf .fsec-bi>.dzgrid{
  padding:2px 18px 18px;
  opacity:0;transition:opacity .22s var(--ease);
}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.open .fsec-bi>.dzgrid{opacity:1;transition-delay:.06s}

/* ---- A PANEL HOLDING A REFUSAL SAYS SO FROM THE OUTSIDE, so a rejected field is
       findable even in the instant before its section is opened for the user. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.bad{
  border-color:var(--mt-bad-bd);box-shadow:0 0 0 3px rgba(192,71,63,.10),var(--acc-sh);
}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.bad .acc-n,
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.bad .acc-n.done{background:rgba(192,71,63,.14);color:var(--mt-bad)}


/* ============================================================================
   PAGE 1 - THE POPUP BELONGS TO THE TILE, NOT TO THE VALUE LINE.  18 September 2026.

   Owner: "fix the drop down menu size with the field, also spacing between field and
   drop down when opening."

   Measured before the fix: the Status tile was 385px wide and its list 330px, and the
   list started 8px below the VALUE LINE - which is 14px above the tile's own bottom
   edge, so it opened on top of the tile with no gap at all. Both numbers come from one
   cause: `.selpop` is absolute and `.icf` was its positioned ancestor, so "full width"
   meant the width of the text line, not of the field.

   This is the same defect, with the same two symptoms and the same cause, that the
   client record already recorded when the Mint tile was built: "STATIC ON PURPOSE - the
   popup must anchor to the TILE, not to this value line. Anchored here it measured 326px
   against a 346px tile and opened at -5px." Same cure: the well stops being positioned,
   the TILE becomes the containing block, and `left:0 / right:0 / top:100% + gap` then
   mean what they say - the tile's own width, and a real gap below the tile's edge.

   `.dp-field` and `.icf.has-sel` are stretched back out over the tile's padding for the
   same reason the tile is the field: the calendar popover is placed from the field's
   rect, so a field that stops at the text line opens a calendar that is inset and
   overlapping. Stretching it also means a click anywhere on the tile opens the list,
   which is the behaviour the record already teaches.
   ============================================================================ */

/* the well stops being the containing block - the TILE is */
:is(#clWiz,#clMbr) .dzpane.mf .icf,
:is(#clWiz,#clMbr) .dzpane.mf .icf.open{position:static}

/* the hit area and the measured rect are the TILE, not the text line. The negative
   margins exactly undo the tile's padding on three sides; the top is left alone so the
   field never rides up over its own label. */
:is(#clWiz,#clMbr) .dzpane.mf .icf.has-sel,
:is(#clWiz,#clMbr) .dzpane.mf .icf.has-sel:hover,
:is(#clWiz,#clMbr) .dzpane.mf .icf.has-sel:hover:not(:focus-within),
:is(#clWiz,#clMbr) .dzpane.mf .icf.has-sel:focus-within,
:is(#clWiz,#clMbr) .dzpane.mf .icf.has-sel.open,
:is(#clWiz,#clMbr) .dzpane.mf .dp .dp-field,
:is(#clWiz,#clMbr) .dzpane.mf .dp:not(.open) .dp-field:hover,
:is(#clWiz,#clMbr) .dzpane.mf .dp.open .dp-field{
  margin:0 -16px -14px -30px;padding:0 16px 14px 30px;
}

/* the list: the tile's radius and a gap you can see, and it now spans the tile */
:is(#clWiz,#clMbr) .dzpane.mf .selpop{
  top:calc(100% + 10px);border-radius:16px;padding:8px;
  box-shadow:0 26px 52px -20px rgba(16,40,34,.42), 0 2px 6px rgba(16,40,34,.06);
}
:is(#clWiz,#clMbr) .dzpane.mf .selpop.up{top:auto;bottom:calc(100% + 10px)}
:is(#clWiz,#clMbr) .dzpane.mf .sel-opt{font-size:15px;font-weight:650;padding:11px 13px;border-radius:11px}
body.dark :is(#clWiz,#clMbr) .dzpane.mf .selpop{
  box-shadow:0 26px 52px -20px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4);
}


/* ---- THE SECTION METER (owner: "add the bar too there"). The same 88x5 track and the
       same pine-to-mint gradient the record's COMPLETE bar uses, cut to 76px so the
       hairline rule beside the title still has room to read as a rule. It is driven by
       HbPct(), which divides the SAME two numbers the pill prints - one call, one truth,
       so the bar and the count can never disagree. ---- */
:is(#clWiz,#clMbr) .dzpane.mf{ --acc-track:rgba(30,55,48,.14); }
body.dark :is(#clWiz,#clMbr) .dzpane.mf{ --acc-track:rgba(255,255,255,.14); }
:is(#clWiz,#clMbr) .dzpane.mf .acc-bar{
  flex:none;width:76px;height:5px;border-radius:99px;
  background:var(--acc-track);overflow:hidden;
}
:is(#clWiz,#clMbr) .dzpane.mf .acc-bar i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#2F6B57,#5FCFA4);
  transition:width .45s var(--ease);
}
body.dark :is(#clWiz,#clMbr) .dzpane.mf .acc-bar i{background:linear-gradient(90deg,#5FCFA4,#8FD9BC)}
/* a section holding a refusal reads red end to end - track, fill and count */
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.bad .acc-bar{background:rgba(192,71,63,.16)}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc.bad .acc-bar i{background:linear-gradient(90deg,#B0463C,#C0473F)}
/* the meter sits tight to the number it explains, not floating in the middle of the head */
:is(#clWiz,#clMbr) .dzpane.mf .fsec.acc .fsec-h .ln{margin-right:2px}


/* ---- THE CITY / STATE / ZIP / COUNTY ROW. The old 1.6/.7/.9/1.3 split was balanced for a
       flat well; a tile spends 46px of its width on the dot gutter and the right padding, so
       at 1366 the State column had 54px left for its value and read "- sel...". Re-split
       against what each value actually needs (Arizona, a 5-digit zip, Maricopa), measured at
       the narrowest width the wizard is used at. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .row4{grid-template-columns:1.45fr 1.15fr .9fr 1.5fr}

/* At 1024 the Zip tile is ~105px and "ZIP CODE" wrapped to two lines, which pushed its
   value line below its row-mates' - the one thing a row of tiles must never do. So the
   narrow tiles in that row buy their label back out of the gutter: 24/12 instead of
   30/16, with the dot moved in to match. The value keeps its single-line ellipsis. */
:is(#clWiz,#clMbr) .dzpane.mf .row4 .fld{padding-left:24px;padding-right:12px}
:is(#clWiz,#clMbr) .dzpane.mf .row4 .fld::before{left:10px}
:is(#clWiz,#clMbr) .dzpane.mf .row4 .fld>label{white-space:nowrap}
:is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel,
:is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel:hover,
:is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel:hover:not(:focus-within),
:is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel:focus-within,
:is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel.open{margin:0 -12px -14px -24px;padding:0 12px 14px 24px}

/* FOUR TILES NEED 633px OF ROW, AND THE ROW IS NOT THE VIEWPORT. Measured: the row is
   745px at a 1366 viewport and 471px at 1024 (the pine rail keeps its width), so four
   tiles fall under 150px each at about 1186 and City/State/Zip/County stops being
   readable - "Arizona" was clipping at 1024. Below that it lays 2 x 2 and the tiles get
   their full gutter back. A media query, not a container query, deliberately: a
   container-type establishes a containing block for position:fixed, and the calendar
   popover on this very page is placed as position:fixed. This matches the breakpoint
   the wizard already uses for its rail. */
@media (max-width:1200px){
  :is(#clWiz,#clMbr) .dzpane.mf .row4{grid-template-columns:1fr 1fr}
  :is(#clWiz,#clMbr) .dzpane.mf .row4 .fld{padding-left:30px;padding-right:16px}
  :is(#clWiz,#clMbr) .dzpane.mf .row4 .fld::before{left:14px}
  :is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel,
  :is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel:hover,
  :is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel:hover:not(:focus-within),
  :is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel:focus-within,
  :is(#clWiz,#clMbr) .dzpane.mf .row4 .icf.has-sel.open{margin:0 -16px -14px -30px;padding:0 16px 14px 30px}
}


/* ============================================================================
   PAGE 1 - THE WHITE GLASS CANVAS.   18 September 2026.

   Owner: "the background color of the wizard is like screenshot, so change it to white
   glassy and let's see how it's looking - only the step 1 for now."

   The pane is ONE scroller holding all four steps, so this cannot hang off `.dzpane.mf`;
   it hangs off `.dzright.w1`, which the component adds only while `_step == 0`. Steps
   2-4 drop back onto `--bg-canvas` (#E8EBF0) the moment you press Continue.

   LIGHT ONLY, ON PURPOSE. Every rule is prefixed `body:not(.dark)`: "white glassy" is a
   light-mode instruction, and forcing a white pane in dark mode would be a white slab in
   the middle of a dark app. Dark keeps the canvas it has.

   AND THE CARDS HAD TO BE RE-KEYED, NOT JUST THE BACKGROUND. The tiles were
   `rgba(255,255,255,.72)` and the panels `rgba(255,255,255,.55)` - white-on-grey, which
   is what made them read. On a white canvas that is white-on-white and every card
   dissolves. So the stack is INVERTED here: the panel becomes the faint tinted surface
   and the tile becomes the pure white card sitting on it, with the hairline and the
   shadow doing the separating. Same design, opposite direction, because what a surface
   should be is decided by what it sits NEXT TO - the rule the household tiles already
   taught (see the mint standard, "the two frostings are NOT interchangeable").
   ============================================================================ */

body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1{ --bg-canvas:#FFFFFF; }
/* PLAIN WHITE. The first cut put two faint pine washes and a white-to-mist gradient on the
   pane to make it read as "glass" - the owner looked at it and said "you added the gradient
   color, that is not white". He is right: he asked for white, and a tint you have to argue
   is not a tint is still a tint. One flat colour. */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzmain{ background:rgb(var(--tg-rgb,255,255,255)); }
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .foot{ background:rgb(var(--tg-rgb,255,255,255)); border-top-color:rgba(30,55,48,.09); }
/* the scrollbar gutter is painted with the canvas, so it has to follow it */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzmain::-webkit-scrollbar-thumb{
  background:rgba(40,60,80,.14); border:3px solid #FFFFFF;
}

/* THE CARDS ARE NOT RE-COLOURED. The first cut also inverted the stack for the white pane -
   panel tinted, tile pure white, empty tile more transparent - on the reasoning that white
   cards dissolve on a white canvas. The owner stopped that too: "don't change the color of
   the KPI cards too please." So every --mt-* and --acc-* token stays exactly as it is on the
   grey canvas, and the tiles are separated by their hairline and their shadow alone. If they
   read too faint for him, the fix is his call, not mine to make quietly. */
/* ---- THE SECTION ICON IS A WHITE CHIP, NOT A TINTED PATCH (owner: "the icons also getting
       that background color, change them too to white, like A. IDENTITY & STATUS icon and so
       on"). The sage `--brand-tint` wash was reading as a grey square against the new white,
       which is the same white-on-white problem the tiles had, one size down. So it takes the
       tile's own recipe: white fill, hairline rim, a soft drop, and the icon itself in pine -
       the colour now lives in the GLYPH rather than behind it. ---- */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc .fsec-h .bub{
  background:rgb(var(--tg-rgb,255,255,255));
  color:#2F6B57;
  box-shadow:0 3px 8px -4px rgba(30,55,48,.40), inset 0 0 0 1px rgba(30,55,48,.09);
}
/* it brightens with the head it sits in, so the whole row reads as one hover target */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc .fsec-h:hover .bub,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.open .fsec-h .bub{
  box-shadow:0 4px 10px -4px rgba(30,55,48,.45), inset 0 0 0 1px rgba(47,107,87,.28);
}


/* ============================================================================
   THE COLLAPSED ROWS HAVE TO READ AS ROWS.   18 September 2026.

   Owner: "can you adjust the shadows on collapsed lists, cause it's not recognizable -
   work practically please."

   He is right, and the number says why: the panel shadow was
   `0 10px 24px -20px` - a 24px blur with TWENTY pixels of negative spread, which shrinks
   the shadow to almost nothing before it is ever drawn. On the old grey canvas that did
   not matter, because the panel was white ON GREY and the FILL did the separating. On the
   white pane the fill separates nothing, so the near-invisible shadow was the only thing
   left holding the row together - and it was not holding it.

   So the edge is rebuilt as a proper elevation stack, and it is all SHADOW, which is what
   he asked me to adjust: a 1px ring (a zero-blur shadow, not a border - the border stays
   the white rim it already was), a tight contact shadow, and a soft lift. Three layers is
   what makes a white card on white read as lifted rather than as a grey smudge.

   AND ONLY THE PANELS. The tiles inside keep every value they have - "don't change the
   color of the KPI cards", and a shadow is not a colour but the instruction was plain.
   ============================================================================ */

body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf{
  --acc-sh:
    0 0 0 1px rgba(30,55,48,.075),
    0 1px 2px rgba(30,55,48,.05),
    0 8px 18px -10px rgba(30,55,48,.20);
}
/* the head is the hit area, so the row lifts under the cursor - the same rest -> hover
   escalation every other surface in the app performs */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc:hover{
  box-shadow:
    0 0 0 1px rgba(47,107,87,.20),
    0 2px 4px rgba(30,55,48,.06),
    0 12px 26px -12px rgba(30,55,48,.28);
}
/* the open one is the one being worked in, so it sits highest */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.open,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.open:hover{
  box-shadow:
    0 0 0 1px rgba(30,55,48,.09),
    0 2px 6px rgba(30,55,48,.06),
    0 20px 40px -20px rgba(30,55,48,.32);
}
/* a refusal still outranks all three - it keeps its red ring and takes the lift with it */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.bad,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.bad:hover,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.bad.open{
  box-shadow:
    0 0 0 1px rgba(192,71,63,.45),
    0 0 0 4px rgba(192,71,63,.10),
    0 12px 26px -12px rgba(192,71,63,.22);
}


/* ============================================================================
   THE BUTTON HOVER STANDARD.   18 September 2026.

   Owner: "turn the Cancel / Continue buttons effect same as our new standard fields
   effect - when mouse hover it's coming up. And when you do that, write it on your
   handoff, this will be our buttons standard effect on mouse hover. Work practically, it
   must work well, no break or glitch."

   So a button lifts exactly the way a tile lifts: 2px up, the shadow opens out, .18s ease,
   and it presses back down on click. The numbers are COPIED from `--mt-sh` / `--mt-lift`,
   not re-picked, so a button and a field cannot drift apart.

   THREE THINGS MAKE IT "NO GLITCH", and all three are the reason this is written out as a
   standard rather than left as one line of transform:

   1) THE HIT AREA MUST NOT MOVE WITH THE BUTTON. A button that rises 2px stops being under
      a cursor resting in its bottom 2px - which un-hovers it, which drops it, which
      re-hovers it: a flicker loop, on the exact pixel row people approach a footer button
      from. The `::after` is an invisible box 4px taller than the button that holds the
      hover region still while the button moves inside it.

   2) NEVER TRANSITION `all`. `.btn` had `transition:.15s`, which is `all` - so every
      property animates, including the disabled state's opacity and the border width. The
      list is explicit now: transform, box-shadow, background-color, border-color, color.

   3) A DISABLED BUTTON MUST NOT LIFT. "Create Household" is disabled until the tick box is
      ticked and while it is saving. A dead control that animates under the cursor is a
      promise the app cannot keep, so every rule carries `:not(:disabled)`.

   Plus `prefers-reduced-motion`, which drops the movement and keeps the shadow - the state
   still reads, it just does not travel.
   ============================================================================ */

:is(#clWiz,#clMbr) .btn{
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease,
             border-color .18s ease, color .18s ease;
}
/* (1) the hover region that does not move - see the note above */
:is(#clWiz,#clMbr) .btn::after{
  content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:inherit;
}

/* the lift itself - one rule for every button, so they cannot disagree */
:is(#clWiz,#clMbr) .btn:hover:not(:disabled){transform:translateY(-2px)}

/* the shadow, per button, keeping each one's own colour but the tile's geometry */
:is(#clWiz,#clMbr) .btn--g{box-shadow:0 6px 16px -12px rgba(30,55,48,.35)}
:is(#clWiz,#clMbr) .btn--g:hover:not(:disabled){
  box-shadow:0 4px 10px -6px rgba(16,40,34,.28), 0 18px 38px -18px rgba(16,40,34,.32);
}
:is(#clWiz,#clMbr) .btn--p:hover:not(:disabled){
  box-shadow:0 4px 10px -6px rgba(33,58,51,.34), 0 18px 38px -18px rgba(33,58,51,.42);
}
:is(#clWiz,#clMbr) .btn--create:hover:not(:disabled){
  box-shadow:0 4px 10px -6px rgba(201,123,90,.38), 0 18px 38px -18px rgba(201,123,90,.46);
}

/* the press. It lands back on the surface rather than below it, and fast - a slow press
   reads as lag. Overrides the older `.btn:active{translateY(1px)}` on specificity. */
:is(#clWiz,#clMbr) .btn:active:not(:disabled){
  transform:translateY(0);
  box-shadow:0 2px 6px -4px rgba(16,40,34,.32);
  transition-duration:.06s;
}

/* (3) dead controls do not move */
:is(#clWiz,#clMbr) .btn:disabled,
:is(#clWiz,#clMbr) .btn:disabled:hover,
:is(#clWiz,#clMbr) .btn:disabled:active{transform:none;cursor:default}

/* the keyboard has to see the same button the mouse does */
:is(#clWiz,#clMbr) .btn:focus-visible{
  outline:2px solid var(--brand-600);outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  :is(#clWiz,#clMbr) .btn,
  :is(#clWiz,#clMbr) .btn:hover:not(:disabled),
  :is(#clWiz,#clMbr) .btn:active:not(:disabled){
    transform:none;
    transition:box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  }
}

/* =============================================================================
   DOTLINE18 (18 Sep 2026) - PAGE 1 ONLY: the status dot sits ON the title's line.
   Owner: "align the green and non green dot in one line with its field title ... move up a
   little bit". Measured on every page-1 tile: the dot's centre sat exactly 2.0px BELOW the
   middle of the title text (top:17px), so it read as one line lower. 15px puts the centres on
   the same line. The tick-box tile (Interpreter Needed) has no title at the top - its words sit
   beside the box - so its dot follows that row instead (its dot was 12.8px above the words).
   Same selector weight as the rule it corrects and declared after it; .row4 / .err only change
   left and colour, so they inherit this. Pages 2-4 (no .mf) are untouched.
   ============================================================================= */
:is(#clWiz,#clMbr) .dzpane.mf .fld::before{top:15px}
:is(#clWiz,#clMbr) .dzpane.mf .fld:has(.wchk)::before{top:calc(50% - 3.5px)}

/* =============================================================================
   HHGLASS18 (18 Sep 2026) - HOUSEHOLD BASICS WEARS THE HOUSEHOLD RECORD'S INTERFACE.
   Owner: "change the Client Wizard background with the Household background, and check the
   Fields KPI cards - if they are glassy, do it like that ... on HOUSEHOLD BASICS only."
   (This replaces the white-canvas experiment above: that answered "white glassy", this is his
   answer to it - the household look.)

   EVERY NUMBER BELOW WAS READ OFF THE LIVE HOUSEHOLD MOCK (#hhDetail) WITH getComputedStyle,
   not chosen:
     canvas  .hh-scroll / .hhbox            #E8EBF0
     footer  .foot                          #E8EBF0, 1px #D9DFE7 top rule
     panel   .pd-card.mint                  rgba(255,255,255,.40), 1px rgba(255,255,255,.72),
                                            0 22px 54px -26px rgba(30,55,48,.42), radius 22px
     tile    .mint-w  (filled / empty)      .72 white + .85 rim / .40 white + dashed .18 -
                                            ALREADY the --mt-* values, so the tile colours are
                                            untouched: they were never the problem. A 72%-white
                                            tile on a WHITE pane is simply white; the glass only
                                            shows against the household's grey-blue.
     tile hover                             translateY(-3px),
                                            0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30)

   NO backdrop-filter on the panels, deliberately: the household panel blurs a flat colour
   (so it shows nothing), and on an ancestor it would make a containing block for the
   position:fixed calendar and dropdown on this page - the same trap container-type set.
   Light mode only, step 1 only (.dzright.w1) - pages 2-4 and dark mode are untouched.
   ============================================================================= */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1{ --bg-canvas:#E8EBF0; }
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzmain{ background:var(--tg-cream,rgb(232,235,240)); }
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .foot{ background:var(--tg-cream,rgb(232,235,240)); border-top-color:#D9DFE7; }
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzmain::-webkit-scrollbar-thumb{
  background:rgba(40,60,80,.16); border:3px solid #E8EBF0;
}
/* the four sections are the household's glass panels */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf{
  --acc-bg:rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1)));
  --acc-open-bg:rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1)));
  --acc-bd:rgba(255,255,255,.72);
  --acc-sh:0 22px 54px -26px rgba(30,55,48,.42);
  --acc-head-hover:rgba(var(--tg-rgb,255,255,255),calc(.45*var(--tg-k,1)));
  /* the tile lift, as the household tiles lift */
  --mt-lift:0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30);
}
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc{ border-radius:22px; }
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc .fsec-h{ border-radius:22px; }
/* the white-canvas stacks above are retired for step 1: rest, hover and open all wear the
   household panel's own shadow; hover only brightens the rim so the row still answers */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.open,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.open:hover{
  box-shadow:0 22px 54px -26px rgba(30,55,48,.42);
}
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc:hover{
  box-shadow:0 0 0 1px rgba(47,107,87,.16), 0 22px 54px -26px rgba(30,55,48,.46);
}
/* a refusal still outranks everything */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.bad,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.bad:hover,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.acc.bad.open{
  box-shadow:0 0 0 1px rgba(192,71,63,.45), 0 0 0 4px rgba(192,71,63,.10), 0 22px 54px -26px rgba(192,71,63,.30);
}
/* tiles: the household hover distance (3px, was 2px) - colours untouched. NEVER a date tile
   (a lifted ancestor drags the position:fixed calendar off its field - see :has(.dp) above)
   and never a refused tile (it shakes in place) - both excluded here, not re-fought later. */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fld:not(:has(.dp)):not(.err):hover,
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fld:not(:has(.dp)):not(.err):focus-within{ transform:translateY(-3px); }


/* =============================================================================
   FOOTBTN18 (18 Sep 2026) - THE WIZARD FOOTER WEARS THE CLIENT RECORD'S FOOTER PAIR.
   Owner: "change the Continue button background colour same as the Client Detail mock ...
   copy both Close and Edit Record background colour to the wizard Close and Continue and
   make that the buttons standard, so next time we use that everywhere."
   (THE FOOTER BUTTON STANDARD - HANDOFF_LIVE 3o-b.)

   EVERY VALUE READ OFF THE LIVE #mhDetail.mint-host FOOTER with getComputedStyle / its tokens:
     PRIMARY  (Edit Record  -> Continue)   --mint-grad, white, --mint-grad-glow;
                                           hover -2px + --mint-grad-glow-hi
     SECONDARY(Close        -> Cancel/Close/Back/Clear Draft)
                                           --mint-glass + blur, 1px --mint-rim, --mint-float,
                                           ink --brand-600; hover glass .72 + ink-1, -2px,
                                           --mint-lift-sm + inset white rim
     BOTH     48px tall, 12px radius, 0 22px, 14.5px/700, gap 9px, 18px icons
     PRESS    back to 0, contact shadow only
   The lift, the fixed hit area (::after) and disabled-never-lifts come from the button hover
   standard above and are NOT restated. Create Household keeps its clay - it is the one
   irreversible "make it" action and was not part of the ask. Clear Draft keeps its red ink
   (.wz-clear, !important) on the same glass.
   ============================================================================= */
:is(#clWiz,#clMbr) .foot{
  --fb-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
            linear-gradient(162deg, #42856E 0%, #2F6B57 60%, #2A5749 100%);
  --fb-glow:0 4px 12px -2px rgba(47,107,87,.42);
  --fb-glow-hi:0 8px 20px -4px rgba(47,107,87,.5);
  --fb-glass:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  --fb-glass-hi:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  --fb-rim:rgba(255,255,255,.72);
  --fb-rim-hi:rgba(255,255,255,.85);
  --fb-float:0 3px 8px -5px rgba(30,55,48,.14), 0 16px 34px -18px rgba(30,55,48,.26);
  --fb-lift:0 3px 7px -4px rgba(30,55,48,.18), 0 10px 20px -10px rgba(30,55,48,.26);
  --fb-ink:#375A50;
  --fb-ink-hi:#1C2733;
}
body.dark :is(#clWiz,#clMbr) .foot{
  --fb-grad:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.14), rgba(255,255,255,0) 42%),
            linear-gradient(162deg, #3E7A66 0%, #2E5F4E 60%, #274F42 100%);
  --fb-glow:0 4px 12px -2px rgba(0,0,0,.5);
  --fb-glow-hi:0 8px 20px -4px rgba(0,0,0,.6);
  --fb-glass:rgba(255,255,255,.05);
  --fb-glass-hi:rgba(255,255,255,.12);
  --fb-rim:rgba(180,210,235,.14);
  --fb-rim-hi:rgba(180,210,235,.16);
  --fb-float:0 3px 8px -5px rgba(0,0,0,.45), 0 16px 34px -18px rgba(0,0,0,.6);
  --fb-lift:0 3px 7px -4px rgba(0,0,0,.5), 0 10px 20px -10px rgba(0,0,0,.6);
  --fb-ink:#8FBBA5;
  --fb-ink-hi:#EAF0F4;
}
/* the shape - both buttons */
:is(#clWiz,#clMbr) .foot .btn{
  height:48px;padding:0 22px;border-radius:12px;gap:9px;
  font-size:14.5px;font-weight:700;
}
:is(#clWiz,#clMbr) .foot .btn svg{width:18px;height:18px}
/* PRIMARY - Continue */
:is(#clWiz,#clMbr) .foot .btn.btn--p{
  background:var(--fb-grad);color:#fff;border:1px solid transparent;box-shadow:var(--fb-glow);
}
:is(#clWiz,#clMbr) .foot .btn.btn--p:hover:not(:disabled){
  background:var(--fb-grad);box-shadow:var(--fb-glow-hi);
}
/* SECONDARY - Cancel / Close / Back / Clear Draft */
:is(#clWiz,#clMbr) .foot .btn.btn--g{
  background:var(--fb-glass);color:var(--fb-ink);
  border:1px solid var(--fb-rim);box-shadow:var(--fb-float);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
}
:is(#clWiz,#clMbr) .foot .btn.btn--g:hover:not(:disabled){
  background:var(--fb-glass-hi);color:var(--fb-ink-hi);border-color:var(--fb-rim);
  box-shadow:var(--fb-lift), inset 0 0 0 1px var(--fb-rim-hi);
}
/* PRESS - the click lands */
:is(#clWiz,#clMbr) .foot .btn.btn--p:active:not(:disabled),
:is(#clWiz,#clMbr) .foot .btn.btn--g:active:not(:disabled){
  box-shadow:0 2px 5px -3px rgba(30,55,48,.22), inset 0 0 0 1px rgba(255,255,255,.7);
}

/* =============================================================================
   STD18 (18 Sep 2026) - THE STANDARD ON STEPS 2-4 OF ADD HOUSEHOLD.
   Owner: "land our new interface design to the client wizard mock and complete the 3 more steps,
   don't break anything, must be so clean and follow the standard rules."
   The switch is the same one page 1 uses - `.dzpane.mf` on the step - so every tile, dot, meter
   and collapse-list rule above now reaches steps 2-4 with NO second copy. This block only covers
   the pieces page 1 never had. Every colour is a --mt-* / --acc-* token, so light and dark both
   follow the page-1 tokens (and the HHGLASS18 light values) with nothing re-picked here.
   The Add Family Member popup (#clMbr) has no `.mf` and is untouched.
   ============================================================================= */

/* ---- STEP 2: read-only tiles (Relationship on the HoH, Age, Citizenship Eligibility).
       A value the form works out is still a tile - same face as a typed one, no grey well. ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fld.ro .icf.locked-face{opacity:1;background:none;cursor:default}
:is(#clWiz,#clMbr) .dzpane.mf .fld.ro .icf.locked-face .ic{display:none}
:is(#clWiz,#clMbr) .dzpane.mf .fld.ro .sel-face{font-size:16px;font-weight:650;line-height:24px;color:var(--mt-vl)}
:is(#clWiz,#clMbr) .dzpane.mf .fld.ro .sel-face.ph{color:var(--mt-un);font-weight:500}

/* ---- STEP 3: the roster is one glass panel; a member is a filled tile, "Add" the empty one ---- */
:is(#clWiz,#clMbr) .dzpane.mf .fsec.mpanel{
  margin:0;padding:14px 16px 16px;border-radius:22px;
  background:var(--acc-bg);border:1px solid var(--acc-bd);box-shadow:var(--acc-sh);
}
:is(#clWiz,#clMbr) .dzpane.mf .fsec.mpanel>.fsec-h{margin:0 2px 14px}
:is(#clWiz,#clMbr) .dzpane.mf .roster{gap:11px}
:is(#clWiz,#clMbr) .dzpane.mf .mcard{
  border-radius:16px;padding:14px 16px;
  background:var(--mt-bg);border:1px solid var(--mt-bd);box-shadow:var(--mt-sh);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
:is(#clWiz,#clMbr) .dzpane.mf .mcard:hover{background:var(--mt-hover-bg);border-color:var(--mt-bd);transform:translateY(-3px);box-shadow:var(--mt-lift)}
:is(#clWiz,#clMbr) .dzpane.mf .mcard .mn{color:var(--mt-vl)}
:is(#clWiz,#clMbr) .dzpane.mf .mcard .ms{color:var(--mt-lb)}
:is(#clWiz,#clMbr) .dzpane.mf .madd{
  min-height:76px;border-radius:16px;font-weight:750;color:var(--mt-lb);
  background:var(--mt-empty-bg);border:1px dashed var(--mt-empty-bd);box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
:is(#clWiz,#clMbr) .dzpane.mf .madd:hover{
  background:var(--mt-hover-bg);border-style:solid;border-color:var(--mt-bd);color:var(--brand-600);
  transform:translateY(-3px);box-shadow:var(--mt-lift);
}
/* the edit / remove chips on a member tile: the secondary glass in miniature */
:is(#clWiz,#clMbr) .dzpane.mf .mcard .medit{
  background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));border:1px solid var(--mt-bd);color:var(--brand-600);
  box-shadow:0 3px 8px -5px rgba(30,55,48,.18);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
:is(#clWiz,#clMbr) .dzpane.mf .mcard .medit:hover{background:rgba(var(--tg-rgb,255,255,255),.9);color:var(--mt-vl);transform:translateY(-2px);box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26)}
:is(#clWiz,#clMbr) .dzpane.mf .mcard .mrm{transition:transform .18s ease,background .18s ease}
:is(#clWiz,#clMbr) .dzpane.mf .mcard .mrm:hover{transform:translateY(-2px)}
body.dark :is(#clWiz,#clMbr) .dzpane.mf .mcard .medit{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));color:#8FBBA5}
/* the tip under the roster: glass, not a green wash */
:is(#clWiz,#clMbr) .dzpane.mf .tip{background:var(--acc-bg);border:1px solid var(--acc-bd);border-radius:14px;color:var(--brand-600)}

/* ---- STEP 4: each review card is a glass panel, its head the household's white pill, and each
       line a tile (filled, or dashed "Not set") - the record as it will look once created ---- */
:is(#clWiz,#clMbr) .dzpane.mf .rev-grid{gap:16px}
:is(#clWiz,#clMbr) .dzpane.mf .rev-card{
  overflow:visible;padding:12px;border-radius:22px;
  background:var(--acc-bg);border:1px solid var(--acc-bd);box-shadow:var(--acc-sh);
}
:is(#clWiz,#clMbr) .dzpane.mf .rev-card .rh{
  padding:10px 12px 10px 16px;border-radius:14px;
  background:var(--mt-bg);border:1px solid var(--mt-bd);box-shadow:var(--mt-sh);
}
:is(#clWiz,#clMbr) .dzpane.mf .rev-card .rh .rt{font-size:11.5px;letter-spacing:.1em;color:var(--mt-vl)}
/* "Edit" is a secondary action - the standard's glass button, in miniature */
:is(#clWiz,#clMbr) .dzpane.mf .rev-card .rh .re{
  position:relative;padding:5px 12px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72));color:#375A50;
  box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 10px 20px -14px rgba(30,55,48,.22);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
:is(#clWiz,#clMbr) .dzpane.mf .rev-card .rh .re::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:inherit}
:is(#clWiz,#clMbr) .dzpane.mf .rev-card .rh .re:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733;transform:translateY(-2px);
  box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26),inset 0 0 0 1px rgba(255,255,255,.85);
}
body.dark :is(#clWiz,#clMbr) .dzpane.mf .rev-card .rh .re{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);color:#8FBBA5}
body.dark :is(#clWiz,#clMbr) .dzpane.mf .rev-card .rh .re:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4}
:is(#clWiz,#clMbr) .dzpane.mf .rev-card .rb{padding:11px 0 0;gap:11px}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item{
  position:relative;min-width:0;padding:12px 16px 13px 30px;border-radius:16px;
  background:var(--mt-bg);border:1px solid var(--mt-bd);box-shadow:var(--mt-sh);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item::before{
  /* 15px, measured: at 14px the dot sat 1.0px above the title's middle */
  content:"";position:absolute;left:14px;top:15px;width:7px;height:7px;border-radius:50%;
  background:var(--mt-dot);box-shadow:0 0 0 3px var(--mt-dot-rim);
}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item:has(.v.dim){background:var(--mt-empty-bg);border-style:dashed;border-color:var(--mt-empty-bd);box-shadow:none}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item:has(.v.dim)::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mt-empty-dot)}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item:hover{background:var(--mt-hover-bg);border-style:solid;border-color:var(--mt-bd);transform:translateY(-3px);box-shadow:var(--mt-lift)}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item .l{font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1.25;color:var(--mt-lb);margin-bottom:4px}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item .v{font-size:15px;font-weight:650;line-height:1.35;color:var(--mt-vl);overflow-wrap:anywhere}
:is(#clWiz,#clMbr) .dzpane.mf .rev-item .v.dim{color:var(--mt-un);font-weight:500}
/* the confirmation is a tile too; it takes a pine edge once it is ticked */
:is(#clWiz,#clMbr) .dzpane.mf .confirm{
  border-radius:16px;padding:14px 16px;
  background:var(--mt-bg);border:1px solid var(--mt-bd);box-shadow:var(--mt-sh);
  transition:border-color .18s ease,box-shadow .18s ease;
}
:is(#clWiz,#clMbr) .dzpane.mf .confirm:has(input:checked){border-color:rgba(47,107,87,.45);box-shadow:0 0 0 3px rgba(47,107,87,.10),var(--mt-sh)}
:is(#clWiz,#clMbr) .dzpane.mf .confirm label{color:var(--mt-vl)}

/* ---- the section icon: the white chip page 1 settled on, now also on the roster head ---- */
body:not(.dark) :is(#clWiz,#clMbr) .dzright.w1 .dzpane.mf .fsec.mpanel .fsec-h .bub{
  background:rgb(var(--tg-rgb,255,255,255));color:#2F6B57;
  box-shadow:0 3px 8px -4px rgba(30,55,48,.40), inset 0 0 0 1px rgba(30,55,48,.09);
}

/* TABSEL18 (18 Sep 2026) - a dropdown is a tab stop now. On the standard steps the TILE shows
   focus (its :focus-within ring), so the inner box draws no second outline. The member popup has
   no tiles, so its well takes the pine focus ring instead. */
:is(#clWiz,#clMbr) .icf.has-sel:focus{outline:none}
#clMbr .icf.has-sel:focus-visible{box-shadow:0 0 0 3px rgba(47,107,87,.22)}

/* CLEARDRAFT18b (18 Sep 2026) - the Add Household close X, top right: "close and save".
   The standard SECONDARY button (HANDOFF 3o-b) at icon size: glass, white rim, float shadow, pine
   glyph; hover firms the glass and lifts 2px; the hit area does not move with it. */
:is(#clWiz,#clMbr) .dzright-top{display:flex;align-items:center;gap:16px}
:is(#clWiz,#clMbr) .dzright-top .pv-prog{flex:1;min-width:0}
:is(#clWiz,#clMbr) .dzright-top .wz-x{
  position:relative;flex:none;width:40px;height:40px;border-radius:12px;padding:0;cursor:pointer;
  display:grid;place-items:center;color:#375A50;
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);border-right-color:var(--tg-edge-r,rgba(255,255,255,.72));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.72));
  box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
}
:is(#clWiz,#clMbr) .dzright-top .wz-x::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:inherit}
:is(#clWiz,#clMbr) .dzright-top .wz-x svg{width:18px;height:18px}
:is(#clWiz,#clMbr) .dzright-top .wz-x:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733;transform:translateY(-2px);
  box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26),inset 0 0 0 1px rgba(255,255,255,.85);
}
:is(#clWiz,#clMbr) .dzright-top .wz-x:active{transform:translateY(0);transition-duration:.06s}
:is(#clWiz,#clMbr) .dzright-top .wz-x:focus-visible{outline:2px solid #375A50;outline-offset:3px}
body.dark :is(#clWiz,#clMbr) .dzright-top .wz-x{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);color:#8FBBA5}
body.dark :is(#clWiz,#clMbr) .dzright-top .wz-x:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4}
@media (prefers-reduced-motion:reduce){:is(#clWiz,#clMbr) .dzright-top .wz-x,:is(#clWiz,#clMbr) .dzright-top .wz-x:hover{transform:none}}

/* ===== ARROWSEL18 (18 Sep 2026) - the keyboard highlight in an open dropdown =====
   Down / Up move a pine ring through the list; Enter or Space picks the ringed option.
   A ring (not a fill) so it never reads as the SELECTED value (.on keeps its tint + tick). */
:is(#clWiz,#clMbr) .sel-opt.hi{background:var(--f-rest-bg);box-shadow:inset 0 0 0 2px #2F6B57}
:is(#clWiz,#clMbr) .sel-opt.on.hi{background:var(--brand-tint)}
body.dark :is(#clWiz,#clMbr) .sel-opt.hi{box-shadow:inset 0 0 0 2px #8FBBA5}

/* ===== IDCAP18 (18 Sep 2026) - the Client Identity Number on step 2 takes the Client Detail
   INFO head: the .mint-ph glass capsule (detail-view.css ~1501), values copied, not re-picked.
   Full width, so it lines up edge to edge with the Identity section below it. ===== */
:is(#clWiz,#clMbr) .dzpane .idchip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-direction:row;
  width:100%;box-sizing:border-box;margin:0 0 12px;padding:11px 20px;border-radius:999px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.6*var(--tg-k,1)));border:1px solid rgba(255,255,255,.8);border-right-color:var(--tg-edge-r,rgba(255,255,255,.8));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.8));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.3);color:#2A4C41;
}
:is(#clWiz,#clMbr) .dzpane .idchip .l{
  display:flex;align-items:center;gap:10px;min-width:0;
  font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#2A4C41;
}
:is(#clWiz,#clMbr) .dzpane .idchip .l svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#clWiz,#clMbr) .dzpane .idchip .c{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;color:#2F6B57;white-space:nowrap}
body.dark :is(#clWiz,#clMbr) .dzpane .idchip{background:rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1)));border-color:rgba(180,210,235,.16);box-shadow:0 6px 16px -12px rgba(0,0,0,.6)}
body.dark :is(#clWiz,#clMbr) .dzpane .idchip .l{color:#B7D6C8}
body.dark :is(#clWiz,#clMbr) .dzpane .idchip .c{color:#8FBBA5}

/* IDCAP18b - owner: "add another background only on the MH CODE, like the bar colour, and the code white."
   The code sits in its own pill painted with the completion bar's gradient (detail-view.css .mint-bar i:
   #2F6B57 -> #5FCFA4). The gradient is stretched so the pill ends mid-way along it (~#4AA985), because
   white text on the bar's palest end (#5FCFA4) would not be readable. */
:is(#clWiz,#clMbr) .dzpane .idchip .c{
  color:#fff;padding:6px 14px;border-radius:999px;
  background:linear-gradient(90deg,#2F6B57 0%,#3E8F72 55%,#5FCFA4 140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 10px -6px rgba(30,85,65,.55);
  text-shadow:0 1px 1px rgba(20,50,40,.35);margin-right:-10px;
}
body.dark :is(#clWiz,#clMbr) .dzpane .idchip .c{color:#fff}
/* IDCAP18b - the capsule keeps its 46.5px height: the code pill fills it with a 6px inset instead of adding to it. */
:is(#clWiz,#clMbr) .dzpane .idchip{padding:6px 6px 6px 20px}
:is(#clWiz,#clMbr) .dzpane .idchip .c{padding:6px 16px;margin-right:0;line-height:20.5px}

/* ===== TICK18 (18 Sep 2026) - the tick box on the new standard (Add Household + Add Family Member).
   Owner: "some of them are centred, some not ... remove the background of the tick and turn the tick to
   the bar colour, and the round too." MEASURED first: every toggle tile sat 1.0px ABOVE its centre
   (the tile's 12px top / 14px bottom padding) - the tick, its words and the dot all rode that 1px.
   Equal padding puts all three on the tile's exact middle line.
   The box itself: no fill. The ring and the tick are ONE svg painted with the section bar's own
   gradient (.acc-bar i: #2F6B57 -> #5FCFA4, left to right); empty = the same ring at 35%.
   !important only to beat the older app-wide `input:checked{background-color:... !important}`. ===== */
:is(#clWiz,#clMbr) .dzpane.mf .fld:has(.wchk){padding-top:13px;padding-bottom:13px}
:is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input,
:is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input:checked{
  width:22px;height:22px;border:0;border-radius:50%;
  background-color:transparent !important;background-repeat:no-repeat;background-position:center;background-size:22px 22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='9.75' fill='none' stroke='%232F6B57' stroke-opacity='.35' stroke-width='2'/></svg>");
}
:is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input:checked{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><defs><linearGradient id='g' gradientUnits='userSpaceOnUse' x1='1' y1='11' x2='21' y2='11'><stop offset='0' stop-color='%232F6B57'/><stop offset='1' stop-color='%235FCFA4'/></linearGradient></defs><circle cx='11' cy='11' r='9.75' fill='none' stroke='url(%23g)' stroke-width='2'/><path d='M6.9 11.3l2.8 2.8 5.5-5.8' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
:is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input:hover:not(:checked){
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='9.75' fill='none' stroke='%232F6B57' stroke-opacity='.6' stroke-width='2'/></svg>");
}
body.dark :is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input,
body.dark :is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input:checked{background-color:transparent !important}
body.dark :is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input:not(:checked){
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='9.75' fill='none' stroke='%238FD9BC' stroke-opacity='.4' stroke-width='2'/></svg>");
}
body.dark :is(#clWiz,#clMbr) :is(.wchk,.confirm,.chkrow) input:checked{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><defs><linearGradient id='g' gradientUnits='userSpaceOnUse' x1='1' y1='11' x2='21' y2='11'><stop offset='0' stop-color='%235FCFA4'/><stop offset='1' stop-color='%238FD9BC'/></linearGradient></defs><circle cx='11' cy='11' r='9.75' fill='none' stroke='url(%23g)' stroke-width='2'/><path d='M6.9 11.3l2.8 2.8 5.5-5.8' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* TICK18b - THE STANDARD TICK covers every tick box in the wizard: the toggle tiles (.wchk), the
   step-4 "I confirm" row (.confirm) and any .chkrow. The confirm row centres its tick on the text line. */
:is(#clWiz,#clMbr) .confirm{align-items:center}
:is(#clWiz,#clMbr) .confirm input{margin-top:0}

/* TICKDOT18 (18 Sep 2026) - owner: "if it's not ticked turn the green dot to un-green like the others, and when
   users tick it turn it green - make this standard." A tick tile's dot follows its tick: hollow (the empty-field
   dot, exactly .mtE's) while unticked, green once ticked. Only the DOT - the tile stays solid, because an
   unticked box is still an answer ("no"), not a missing field, and the section counts never included it. */
:is(#clWiz,#clMbr) .dzpane.mf .fld.tkoff::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mt-empty-dot)}

/* ===== P4ORDER18 (19 Sep 2026) - STEP 4 READS TOP TO BOTTOM =====
   Owner: "follow the order - below Review & Create move the Head of Household card, below it
   Household, below it Family Members, and fit them to the detail panel; move the QR codes to the
   bottom of the screen and change the QR code white background like the field KPI cards."
   So the review is ONE column the full width of the panel (the passes no longer steal a third of
   it), and the two passes sit side by side at the foot, wearing the same glass tile every field
   wears - no white slabs left on the step. */
:is(#clWiz,#clMbr) .dzpane.mf .rev-grid{display:flex;flex-direction:column;gap:16px;align-items:stretch}
:is(#clWiz,#clMbr) .dzpane.mf .rev-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
:is(#clWiz,#clMbr) .dzpane.mf .rev-passcol{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
/* the passes: the field tile, not a white card. Equal heights, so the two bottom out together. */
:is(#clWiz,#clMbr) .dzpane.mf :is(.pass,.rev-hohqr){
  display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:22px;
  background:var(--mt-bg);border:1px solid var(--mt-bd);box-shadow:var(--mt-sh);
}
/* the Matthew House bar stays - it is what says whose pass this is */
:is(#clWiz,#clMbr) .dzpane.mf :is(.pass,.rev-hohqr) .pt{padding:12px 18px}
/* the QR's own frame is a tile too (a shade brighter, so the code still scans clean) */
:is(#clWiz,#clMbr) .dzpane.mf :is(.pass,.rev-hohqr) .pq{
  background:var(--mt-hover-bg);border:1px solid var(--mt-bd);box-shadow:var(--mt-sh);
  box-sizing:border-box;width:190px;height:190px;padding:12px;margin:18px auto 12px;border-radius:16px;
}
:is(#clWiz,#clMbr) .dzpane.mf .pass .pname{font-size:17px}
:is(#clWiz,#clMbr) .dzpane.mf .pass .pcode{margin:2px 0 14px}
/* the footers push to the bottom of the tile and lose the cream slab */
:is(#clWiz,#clMbr) .dzpane.mf .pass .pf{
  margin-top:auto;background:transparent;border-top:1px solid var(--mt-bd);color:var(--mt-lb);
}
:is(#clWiz,#clMbr) .dzpane.mf .rev-hohqr .pq{margin-top:auto}
:is(#clWiz,#clMbr) .dzpane.mf .rev-hohqr-meta{margin-bottom:auto;padding:0 14px 18px}
:is(#clWiz,#clMbr) .dzpane.mf .rev-clickqr:hover{background:var(--mt-hover-bg);box-shadow:var(--mt-lift)}
body.dark :is(#clWiz,#clMbr) .dzpane.mf :is(.pass,.rev-hohqr) .pq{background:#fff;border-color:rgba(255,255,255,.7)}
/* a narrow panel stacks them rather than squeezing two 168px codes side by side */
@media (max-width:860px){:is(#clWiz,#clMbr) .dzpane.mf .rev-passcol{grid-template-columns:1fr}}