/* ============================================================
   MATTHEW HOUSE - ENROLL STUDENT WIZARD
   Verbatim port of _handoff/Student Enrollment Wizard (Enroll Student
   Wizard.html, wz2 stepped-wizard-with-summary variant). Every rule is
   scoped under #enrollWiz so the mock's generic class names (.field,
   .icf, .modal, .ui-btn, .kid-*, .rvw ...) never leak into the app.
   The demo canvas cream body is dropped (de-cream standing rule: ONE
   cool-gray background). Accent = the same left-rail teal the New Program
   and New Client wizards use, so all three read as one system. Dark is
   driven by the app's OWN switch (body.dark), NOT a per-wizard toggle.
   Plain hyphens only.
   ============================================================ */
#enrollWiz{
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* Brand accent = the left-rail / sidebar teal, matching #pgWiz and #clWiz. */
  --brand:#2E4A43; --brand-600:#375A50; --brand-700:#213A33;
  --brand-tint:rgba(46,74,67,.12); --brand-tint-2:rgba(46,74,67,.18);
  --brand-glow:rgba(33,58,51,.35);

  --ink-1:#1C2733; --ink-2:#3B474B; --ink-3:#677579; --ink-4:#9AA7B3;
  --danger:#C0473F; --danger-bg:#F7E3E1; --danger-ink:#8C312B;

  --bg-canvas:#E8EBF0;
  /* inset cool field tokens (tuned against the #E8EBF0 cool canvas) */
  --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);

  --line:rgba(40,60,80,.08);
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.25,1); --t:.2s var(--ease);

  --en-cta:linear-gradient(135deg,#2E4A43,#213A33);
}
#enrollWiz *{box-sizing:border-box}

/* =========================================================
   MODAL OVERLAY (replaces the demo canvas frame)
   ========================================================= */
#enrollWiz{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:24px;
  background:rgba(28,39,51,.5);backdrop-filter:blur(3px);overflow:auto;
  font-family:var(--font-sans);color:var(--ink-1);-webkit-font-smoothing:antialiased}
#enrollWiz.show{display:grid;animation:enFade .22s var(--ease)}
@keyframes enFade{from{opacity:0}to{opacity:1}}

/* =========================================================
   MODAL SHELL
   ========================================================= */
#enrollWiz .modal{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border-radius:24px;border:1px solid var(--line);
  box-shadow:0 40px 90px -20px rgba(28,39,51,.35),0 4px 14px rgba(28,39,51,.08)}
#enrollWiz .modal.wz2{flex-direction:row;width:min(1240px,100%);height:min(calc(92 * var(--mh-vh)),940px);animation:enRise .42s var(--ease)}
@keyframes enRise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}

/* =========================================================
   FIELDS
   ========================================================= */
#enrollWiz .step{display:none;animation:enStepIn .32s var(--ease)}
#enrollWiz .step.active{display:block}
@keyframes enStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#enrollWiz .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
#enrollWiz .fgrid .full{grid-column:1/-1}
#enrollWiz .field{display:flex;flex-direction:column;gap:8px;min-width:0}
#enrollWiz .field>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}
#enrollWiz .field .req{color:var(--danger)}
#enrollWiz .fsec{display:flex;align-items:center;gap:12px;margin:2px 0 16px}
#enrollWiz .fsec h3{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink-1);margin:0;text-transform:uppercase}
#enrollWiz .divider{height:1px;background:var(--line);margin:22px 0}

#enrollWiz .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)}
#enrollWiz .icf:hover:not(:focus-within){background:var(--f-hover-bg)}
#enrollWiz .icf:focus-within{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)}

/* KILL the app-global .mh-app :is(input,textarea,select) look (fill + border + box-shadow +
   green focus ring) that otherwise renders a "field inside the field" ghost. The visible
   field is the .icf shell ONLY; the raw control is fully transparent in every state. */
#enrollWiz .icf :is(input,select,textarea),
#enrollWiz .icf :is(input,select,textarea):hover,
#enrollWiz .icf :is(input,select,textarea):focus,
#enrollWiz .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;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink-1)}
#enrollWiz .icf input::placeholder,#enrollWiz .icf textarea::placeholder{color:var(--ink-4);font-weight:400}
#enrollWiz .icf select{appearance:none;-webkit-appearance:none;cursor:pointer}
#enrollWiz .icf.area{align-items:stretch;padding:13px 15px;min-height:104px}
#enrollWiz .icf.area textarea{resize:none;min-height:78px;line-height:1.55}
#enrollWiz .ic{width:19px;height:19px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
#enrollWiz .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
#enrollWiz .ic.mh svg{width:19px;height:20px;fill:var(--ink-3);stroke:none}
#enrollWiz .icf:focus-within .ic.mh svg,#enrollWiz .icf.open .ic.mh svg{fill:var(--brand-600)}
#enrollWiz .chev{transition:transform var(--t)}

/* custom dropdown popup (native <select> mirrored) - matches inset-field kit */
#enrollWiz .icf.has-sel{cursor:pointer}
#enrollWiz .sel-face{flex:1;min-width:0;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
#enrollWiz .sel-face.ph{color:var(--ink-4);font-weight:400}
/* Type-to-search box that replaces the face while the dropdown is open. Same metrics as
   .sel-face so the field does not shift when it turns into a search field; the placeholder
   keeps showing the current selection (ink-4, like an unset field). */
#enrollWiz .icf .sel-search{flex:1;min-width:0;font-family:var(--font-sans);font-size:15px;font-weight:500;
  color:var(--ink-1);cursor:text}
#enrollWiz .icf .sel-search::placeholder{color:var(--ink-4);font-weight:400}
#enrollWiz .icf.open{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)}
#enrollWiz .icf.open .chev{transform:rotate(180deg)}
#enrollWiz .field:has(.icf.open),#enrollWiz .field.combo-open{position:relative;z-index:60}
#enrollWiz .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;animation:enSelpop .16s var(--ease)}
@keyframes enSelpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#enrollWiz .selpop.up{top:auto;bottom:calc(100% + 8px)}
#enrollWiz .selpop::-webkit-scrollbar{width:0;height:0;display:none}
#enrollWiz .sel-opt{text-align:left !important;justify-content:flex-start !important;border:none;background:none;font-family:var(--font-sans);font-size:14.5px;font-weight:600;color:var(--ink-1);padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background var(--t),color var(--t)}
/* Kill the app-global flex-centering so EVERY field/option text is LEFT aligned. */
#enrollWiz .icf :is(input,textarea,select),#enrollWiz .sel-face{text-align:left !important}
#enrollWiz .sel-opt>span:first-child{text-align:left !important}
#enrollWiz .sel-opt:hover{background:var(--f-rest-bg)}
#enrollWiz .sel-opt.on{background:var(--brand-tint);color:var(--brand-600);font-weight:700}
#enrollWiz .sel-opt.cb{justify-content:space-between;gap:14px}
#enrollWiz .sel-opt.cb .cb-cd{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);flex:none}
#enrollWiz .sel-opt.cb.cur{background:var(--f-rest-bg)}
#enrollWiz .sel-opt.cb mark{background:var(--brand-tint);color:var(--brand-700);border-radius:3px;padding:0 1px}
#enrollWiz .selpop .cb-empty{padding:13px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3)}

/* checkbox / radio */
#enrollWiz .opt{display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none;padding:3px 0}
#enrollWiz .opt input{position:absolute;opacity:0;width:0;height:0}
#enrollWiz .box{width:22px;height:22px;flex:none;border-radius:7px;margin-top:1px;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);display:grid;place-items:center;transition:background var(--t),border-color var(--t)}
#enrollWiz .box.round{border-radius:999px}
#enrollWiz .box svg{width:13px;height:13px;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.6);transition:opacity var(--t),transform var(--t)}
#enrollWiz .box .dot{width:10px;height:10px;border-radius:999px;background:#fff;opacity:0;transform:scale(.4);transition:opacity var(--t),transform var(--t)}
#enrollWiz .opt input:checked+.box{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
#enrollWiz .opt input:checked+.box.round .dot{box-shadow:0 1px 2px rgba(40,60,80,.4)}
#enrollWiz .opt input:checked+.box svg,#enrollWiz .opt input:checked+.box .dot{opacity:1;transform:scale(1)}
#enrollWiz .opt .opt-txt{font-size:14.5px;font-weight:500;color:var(--ink-1);line-height:1.35}
#enrollWiz .opt.brand .opt-txt{color:var(--brand-600);font-weight:700}

/* mode switch: existing client / walk-in */
#enrollWiz .mode-seg{display:inline-grid;grid-template-columns:auto auto;gap:4px;padding:5px;border-radius:var(--r-pill);background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);margin:0 0 24px}
#enrollWiz .mode-seg button{border:none;background:none;cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:700;color:var(--ink-3);padding:12px 26px;border-radius:var(--r-pill);transition:background var(--t),color var(--t),box-shadow var(--t)}
#enrollWiz .mode-seg button:hover{color:var(--ink-1)}
#enrollWiz .mode-seg button.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px -2px var(--brand-glow)}

/* enrolment status chip */
#enrollWiz .enr-status{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
#enrollWiz .enr-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 17px;border-radius:var(--r-pill);background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);font-size:14px;font-weight:700;color:var(--brand-600)}
#enrollWiz .enr-chip i{width:8px;height:8px;flex:none;border-radius:999px;background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
#enrollWiz .enr-chip.warn{color:var(--danger-ink)}
#enrollWiz .enr-chip.warn i{background:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
#enrollWiz .enr-hint{font-size:13.5px;font-weight:500;color:var(--ink-3)}

/* attachments dropzone */
#enrollWiz .dropz{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;min-height:136px;padding:20px;border:1.5px dashed var(--f-rest-bd);border-radius:var(--r-md);background:rgba(255,255,255,.24);font-size:14px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:border-color var(--t),background var(--t),color var(--t)}
#enrollWiz .dropz:hover{border-color:var(--brand);background:var(--f-hover-bg);color:var(--ink-2)}
#enrollWiz .dropz svg{width:24px;height:24px;stroke:var(--brand-600);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .dropz b{color:var(--brand-600);font-weight:800}

/* validation error state */
/* AN ERROR OUTRANKS HOVER AND FOCUS - it holds its red until the VALUE is fixed. `.field.err
   .icf` is (1,2,0) and lost to `.icf:hover:not(:focus-within)` (1,3,0) and to the later
   `.icf:focus-within`, so hovering a red field repainted it as if nothing were wrong. */
#enrollWiz .field.err .icf,
#enrollWiz .field.err .icf:hover,
#enrollWiz .field.err .icf:hover:not(:focus-within),
#enrollWiz .field.err .icf:focus-within{border-color:var(--danger);background:var(--danger-bg)}
#enrollWiz .field.err .icf:focus-within{box-shadow:0 0 0 3px rgba(192,71,63,.24)}
#enrollWiz .field.err>label,#enrollWiz .field.err>label .req{color:var(--danger-ink)}
#enrollWiz .field.err .dp .dp-field{border-color:var(--danger) !important;background:var(--danger-bg) !important;box-shadow:none !important}
#enrollWiz .msg{display:flex;align-items:center;gap:6px;margin:7px 0 0;font-size:12.5px;font-weight:650;line-height:1.35}
#enrollWiz .msg.err{color:var(--danger-ink)}
#enrollWiz .msg svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
#enrollWiz .field:not(.err) .msg.err{display:none}
#enrollWiz .shake{animation:enShk .34s cubic-bezier(.36,.07,.19,.97) both}
@keyframes enShk{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}

/* =========================================================
   BUTTONS
   ========================================================= */
#enrollWiz .ui-btn{height:48px;padding:0 22px;border-radius:var(--r-md);font-family:var(--font-sans);font-size:14.5px;font-weight:700;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;transition:background var(--t),border-color var(--t),box-shadow var(--t),color var(--t),transform var(--t)}
#enrollWiz .ui-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .ui-btn.primary{background:var(--en-cta);color:#fff;box-shadow:0 8px 18px -4px var(--brand-glow)}
#enrollWiz .ui-btn.primary:hover{box-shadow:0 10px 22px -4px var(--brand-glow)}
#enrollWiz .ui-btn.primary:active{transform:translateY(1px)}
#enrollWiz .ui-btn.secondary{background:var(--f-focus-bg);color:var(--brand-600);border-color:var(--f-focus-bd);box-shadow:0 1px 2px rgba(40,60,80,.06)}
#enrollWiz .ui-btn.secondary:hover{background:#EEF2F4}
#enrollWiz .ui-btn.is-cancel{background:transparent;color:var(--ink-2);border-color:transparent;box-shadow:none}
#enrollWiz .ui-btn.is-cancel:hover{background:rgba(40,60,80,.07);color:var(--ink-1)}
#enrollWiz .ui-btn.is-cancel .bk-ic{display:none}
#enrollWiz .ui-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* =========================================================
   LEFT RAIL - live summary + student QR
   ========================================================= */
#enrollWiz .rail{width:340px;flex:none;position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(420px 260px at 110% -6%,rgba(110,156,144,.30),transparent 60%),linear-gradient(165deg,#2E4A43,#213A33 55%,#16261F);
  border-right:1px solid var(--line);display:flex;flex-direction:column}
#enrollWiz .rail-head{flex:none;position:relative;padding:26px 26px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,.15)}
#enrollWiz .rail-ic{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
#enrollWiz .rail-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .rail-title{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-align:left;text-transform:uppercase}
#enrollWiz .rail-scroll{flex:1;min-height:0;overflow:auto;padding:24px 26px 26px;display:flex;flex-direction:column;scrollbar-width:none}
#enrollWiz .rail-scroll::-webkit-scrollbar{width:0;height:0;display:none}
#enrollWiz .sum{display:flex;flex-direction:column}
#enrollWiz .sum-av{width:92px;height:92px;border-radius:999px;align-self:center;margin-bottom:14px;overflow:hidden;background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(255,255,255,.28),0 10px 24px -10px rgba(0,0,0,.45)}
#enrollWiz .sum-av img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Shared photo studio avatar (mirrors Client Detail .mh-photo, sized for the rail) ---- */
/* Structural styles apply to BOTH avatars (rail + child mock). Without them on the child
   avatar, its absolute .mh-ov / .mh-btn escape and fill the whole modal. */
#enrollWiz .sum-mh-photo,#enrollWiz .kid-mh-photo{position:relative;border-radius:50%;align-self:center;margin:0 auto 14px;cursor:pointer;
  background:linear-gradient(150deg,#5E8C81,#2F4640);border:2.5px solid rgba(234,241,237,.5);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.16),0 6px 18px rgba(0,0,0,.26);display:grid;place-items:center}
#enrollWiz .sum-mh-photo{width:100px;height:100px}
#enrollWiz .kid-mh-photo{width:116px;height:116px}
#enrollWiz .mh-photo .mh-ini{width:100%;height:100%;display:grid;place-items:center;color:#F4F0E6}
#enrollWiz .mh-photo .mh-ini svg{width:46%;height:46%;stroke:currentColor;fill:none}
#enrollWiz .mh-photo img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:none}
#enrollWiz .mh-photo.has img{display:block}
#enrollWiz .mh-photo.has .mh-ini{display:none}
#enrollWiz .mh-photo .mh-ov{position:absolute;inset:0;border-radius:50%;background:rgba(20,32,28,.55);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:0;transition:.18s}
#enrollWiz .mh-photo .mh-ov svg{width:16px;height:16px;stroke:currentColor;fill:none}
#enrollWiz .mh-photo:hover .mh-ov{opacity:1}
#enrollWiz .mh-photo.is-locked{cursor:default;opacity:.9}
#enrollWiz .mh-photo.is-locked .mh-ov,#enrollWiz .mh-photo.is-locked .mh-btn{display:none}
#enrollWiz .mh-photo .mh-btn{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--mh-clay,#C97B5A);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 2.5px #2F4640}
#enrollWiz .mh-photo .mh-btn svg{width:13px;height:13px;stroke:currentColor;fill:none}
/* The shared options popover renders inside the avatar; keep it above the rail content. */
#enrollWiz .mh-photo .cd-photomenu{z-index:1200}
#enrollWiz .kid-rail .mh-photo .mh-btn{box-shadow:0 0 0 2.5px #223A33}
#enrollWiz .sum-av .sum-av-ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(255,255,255,.85)}
#enrollWiz .sum-av .sum-av-ph svg{width:42px;height:42px;fill:currentColor}
#enrollWiz .sum-name{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.14;margin-top:2px;text-align:center}
#enrollWiz .sum-name.empty{color:rgba(255,255,255,.55);font-weight:700}
#enrollWiz .sum-type{align-self:center;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.01em;color:#fff;background:rgba(255,255,255,.17);border-radius:999px;padding:5px 13px}
#enrollWiz .sum-ctx{margin-top:14px;display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-md);background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
#enrollWiz .sum-ctx svg{width:24px;height:26px;flex:none;fill:rgba(255,255,255,.85);stroke:none}
#enrollWiz .sum-ctx-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#enrollWiz .sum-ctx-v{font-size:14.5px;font-weight:700;color:#fff;margin-top:2px}
#enrollWiz .sum-qr{margin-top:18px;display:flex;align-items:center;gap:14px;padding:13px;border-radius:var(--r-md);background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);cursor:pointer;transition:background var(--t)}
#enrollWiz .sum-qr:hover{background:rgba(255,255,255,.16)}
#enrollWiz .sum-qr .qr-frame{width:78px;height:78px;flex:none;position:relative;border-radius:8px;overflow:hidden;background:#fff;display:grid;place-items:center}
#enrollWiz .sum-qr .qr-frame svg{width:100%;height:100%;display:block}
#enrollWiz .sum-qr .qr-logo{position:absolute;inset:0;margin:auto;width:24px;height:24px;display:grid;place-items:center;background:#fff;border-radius:6px;box-shadow:0 0 0 2px #fff}
#enrollWiz .sum-qr .qr-logo img{width:22px;height:22px;display:block;object-fit:contain}
#enrollWiz .sum-qr-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
#enrollWiz .sum-qr-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#enrollWiz .sum-qr-v{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff}
#enrollWiz .sum-qr.noprog{cursor:default;opacity:.72}
#enrollWiz .sum-qr.noprog .qr-frame{display:none}
#enrollWiz .sum-qr.noprog .sum-qr-v{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:rgba(255,255,255,.82)}
#enrollWiz .sum-list{margin-top:20px;padding-top:6px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column}
#enrollWiz .sum-row{display:flex;align-items:center;gap:13px;padding:11px 0}
#enrollWiz .sum-ic{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);display:grid;place-items:center;color:rgba(255,255,255,.85)}
#enrollWiz .sum-ic svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .sum-rc{min-width:0;display:flex;flex-direction:column;gap:3px}
#enrollWiz .sum-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#enrollWiz .sum-v{font-size:15px;font-weight:600;color:#fff;line-height:1.35}
#enrollWiz .sum-v small{display:block;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.72);margin-top:3px}
#enrollWiz .sum-empty{margin-top:20px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.55}

/* =========================================================
   RIGHT PANE - stepped form
   ========================================================= */
#enrollWiz .pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-canvas)}
#enrollWiz .pane-top{flex:none;padding:28px 36px 0}
#enrollWiz .pane-top-row{display:flex;align-items:center;gap:16px}
#enrollWiz .prog-count{font-size:12.5px;font-weight:700;color:var(--brand-600);letter-spacing:.01em}
#enrollWiz .prog-bar{flex:1;min-width:0;height:7px;border-radius:99px;background:var(--f-rest-bg);overflow:hidden}
#enrollWiz .prog-bar i{display:block;height:100%;border-radius:99px;background:var(--en-cta);transition:width .35s var(--ease)}
/* DRAFTS (Jul 28 2026) - the resume banner + Discard, matching #pgWiz and the Client
   intake's #clWiz bar on this wizard's own gutter. */
#enrollWiz .wz-draftbar{display:flex;align-items:center;gap:9px;margin:0 36px 4px;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(--brand-600,#375A50)}
#enrollWiz .wz-draftbar .ico{flex:none;width:15px;height:15px;color:inherit;display:inline-flex}
#enrollWiz .wz-draftbar .ico svg{width:100%;height:100%}
#enrollWiz .wz-drafttx{flex:1;min-width:0;line-height:1.35}
#enrollWiz .wz-discard{flex:none;border:0;background:none;padding:4px 6px;font:inherit;font-weight:800;font-size:12px;color:var(--danger,#C0473F);cursor:pointer;border-radius:8px}
#enrollWiz .wz-discard:hover{background:rgba(176,70,60,.10);text-decoration:underline}
body.dark #enrollWiz .wz-draftbar{border-color:rgba(120,170,158,.30);background:rgba(78,124,114,.16);color:#9fc3b8}
body.dark #enrollWiz .wz-discard{color:#e0a892}
body.dark #enrollWiz .wz-discard:hover{background:rgba(201,123,90,.16)}

#enrollWiz .pane-head{flex:none;padding:22px 36px 20px}
#enrollWiz .pane-title{font-size:27px;font-weight:800;letter-spacing:-.025em;color:var(--ink-1);margin:0;line-height:1.08;text-transform:uppercase}
#enrollWiz .pane-sub{font-size:15px;color:var(--ink-3);margin:9px 0 0;font-weight:500;line-height:1.45}
#enrollWiz .m-body{flex:1;min-height:0;overflow:auto;padding:0 36px 22px;scrollbar-width:none}
#enrollWiz .m-body::-webkit-scrollbar{width:0;height:0;display:none}
#enrollWiz .m-foot{flex:none;display:flex;align-items:center;gap:12px;padding:18px 36px;border-top:1px solid var(--line);background:var(--bg-canvas)}
#enrollWiz .m-foot .spacer{flex:1}

/* Date field = the shared MhDatePicker for the CALENDAR, but its TRIGGER is reskinned to
   the wizard's inset-cool-field look so it reads identically to every other field on the
   step (same height / fill / recessed shadow / hover + open states). The popover (.dp-pop)
   is left untouched structurally - only its open/close animation is smoothed below. Tokens
   are the same --f-* set the .icf shell uses, so dark mode follows the pane automatically. */
#enrollWiz .mh-dp-c{width:100%}
/* Copied VALUE-FOR-VALUE from the mock's .icf (program-wizards.css line 83) + .ic + the
   input rules, so the date trigger is the same object as every other field: */
#enrollWiz .dp .dp-field{
  height:auto;min-height:50px;gap:11px;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)}
/* mock: .icf:hover:not(:focus-within) - hover fill only while NOT the active/open field */
#enrollWiz .dp:not(.open) .dp-field:hover{background:var(--f-hover-bg)}
/* mock: .icf:focus-within - the open date field is the "active" field */
#enrollWiz .dp.open .dp-field{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)}
/* mock .ic: 19px, ink-3 */
#enrollWiz .dp .dpf-ico{width:19px;height:19px;color:var(--ink-3)}
#enrollWiz .dp.open .dpf-ico{color:var(--brand-600)}
/* mock .icf input: 15px / 500 / ink-1, and .icf input.dmask: tabular-nums so the
   MM/DD/YYYY digits line up exactly like the mock's masked date input. */
#enrollWiz .dp .dpf-val{font-size:15px;font-weight:500;color:var(--ink-1);font-variant-numeric:tabular-nums}
/* mock .icf input::placeholder: ink-4 / 400 */
#enrollWiz .dp .dpf-val.empty{color:var(--ink-4);font-weight:400}

/* THE MASKED INPUT (mock: .icf input.dmask). The mask string is the VALUE, not a placeholder, so
   it is the normal field text colour and never uses ::placeholder. The app-global input skin is
   killed the same way the .icf rule kills it, so the visible field stays the shell only. */
#enrollWiz .dp .dpf-mask,
#enrollWiz .dp .dpf-mask:hover,
#enrollWiz .dp .dpf-mask:focus,
#enrollWiz .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-sans);font-size:15px;font-weight:500;color:var(--ink-1);
  font-variant-numeric:tabular-nums;cursor:text;user-select:text}
/* mock: .icf input.dmask.partial - while the date is incomplete */
#enrollWiz .dp .dpf-mask.partial{letter-spacing:.01em}
/* the field wrapper is click-to-open, but the mask area must read as typeable */
#enrollWiz .dp .dp-field{user-select:auto}
/* The mock date field is icon + masked value with NO dropdown chevron - hide it. */
#enrollWiz .dp .dpf-chev{display:none}

/* NO animation / transition on the calendar popover (per request) - it appears and closes
   instantly. Overrides the shared fade+scale so there is no motion and nothing to jump. */
#enrollWiz .dp .dp-pop{transition:none !important;transform:none !important}
#enrollWiz .dp.open .dp-pop{transform:none !important}

/* THE OPEN "GLITCH" (measured, not guessed): MhDatePicker.Open() sets _open + StateHasChanged()
   and THEN awaits the JS placement. On Blazor Server that await is a round trip, so the browser
   PAINTS the .open state first - and at that moment the popover is still at its stylesheet
   default (position:absolute, top:calc(100% + 9px) = BELOW the field, measured top 614px) before
   the JS moves it to its real spot (position:fixed, flipped ABOVE the field, measured top 209px).
   That ~405px jump is the glitch; the shared fade used to hide it, and removing the animation
   exposed it. Fix WITHOUT touching the shared picker: keep the popover invisible until the JS has
   placed it. The placed popover is the one carrying the inline position:fixed the JS writes, so
   the "is placed" test is a plain attribute selector. No motion, no flash, no jump. */
#enrollWiz .dp.open .dp-pop{visibility:hidden}
#enrollWiz .dp.open .dp-pop[style*="position: fixed"]{visibility:visible}

/* Z-INDEX: keep the open date field and its popover ABOVE every sibling field so the calendar
   is never overlapped (the fields below - Country, City ... - were painting over it). Applies
   to every date field in the wizard (Step 1 DOB, Step 2 dates, the child modal DOB). */
#enrollWiz .field:has(.dp.open){position:relative;z-index:80}
#enrollWiz .dp.open .dp-pop{z-index:1200}

/* =========================================================
   HOUSEHOLD + CHILDREN (grids)
   ========================================================= */
#enrollWiz .hh-kpi{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--f-focus-bg)}
#enrollWiz .hh-kpi-ic{width:48px;height:48px;flex:none;border-radius:13px;background:var(--brand);color:#fff;display:grid;place-items:center}
#enrollWiz .hh-kpi-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .hh-kpi-main{flex:1;min-width:0}
#enrollWiz .hh-kpi-k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
#enrollWiz .hh-kpi-v{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink-1);margin-top:3px}
#enrollWiz .kids-head{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin:2px 0 12px}
#enrollWiz .hh-grid,#enrollWiz .kids-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#enrollWiz .kid-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:18px 14px;border:1px solid var(--line);border-radius:16px;background:var(--f-focus-bg);cursor:pointer;transition:box-shadow var(--t),border-color var(--t)}
#enrollWiz .kid-card:hover{border-color:var(--f-focus-bd);box-shadow:0 12px 26px -16px rgba(28,39,51,.4)}
/* !important: MudBlazor ships .static{position:static!important}, which would steal the
   card's positioning context and fling the kc-tick to the modal corner. */
#enrollWiz .kid-card.static{position:relative !important;cursor:default}
#enrollWiz .kid-card.static:hover{border-color:var(--line);box-shadow:none}
#enrollWiz .kid-card.added{padding-top:16px}
#enrollWiz .kc-av{width:64px;height:64px;border-radius:99px;overflow:hidden;background:var(--f-rest-bg);box-shadow:inset 0 0 0 1px var(--f-rest-bd)}
#enrollWiz .kc-av img{width:100%;height:100%;object-fit:cover;display:block}
#enrollWiz .kc-av .kc-av-ph{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-4)}
#enrollWiz .kc-av .kc-av-ph svg{width:30px;height:30px;fill:currentColor}
#enrollWiz .kc-nm{font-size:14.5px;font-weight:800;color:var(--ink-1);letter-spacing:-.01em}
#enrollWiz .kc-meta{font-size:12px;color:var(--ink-3);font-weight:600}
#enrollWiz .kc-tag{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600);background:var(--brand-tint);border-radius:99px;padding:3px 9px}
#enrollWiz .kc-tick{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:99px;border:1.5px solid var(--f-rest-bd);background:var(--f-focus-bg);color:var(--ink-4);display:grid;place-items:center;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
#enrollWiz .kc-tick svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .kc-tick:hover{border-color:var(--brand);color:var(--brand-600)}
#enrollWiz .kc-tick.on{background:var(--brand);border-color:var(--brand);color:#fff}
#enrollWiz .kc-x2{position:absolute;top:10px;right:10px;width:26px;height:26px;flex:none;border-radius:8px;border:1px solid var(--f-rest-bd);background:var(--f-focus-bg);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t)}
#enrollWiz .kc-x2 svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
#enrollWiz .kc-x2:hover{background:var(--danger-bg);color:var(--danger-ink);border-color:transparent}
#enrollWiz .kc-edit-b{margin-top:4px;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:8px;border:1px solid var(--f-rest-bd);background:var(--f-focus-bg);color:var(--ink-2);font-size:11.5px;font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:color var(--t),border-color var(--t)}
#enrollWiz .kc-edit-b svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .kc-edit-b:hover{color:var(--brand-600);border-color:var(--brand)}
#enrollWiz .kid-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;min-height:158px;padding:18px;border:1.6px dashed var(--f-rest-bd);border-radius:16px;background:rgba(255,255,255,.24);color:var(--ink-3);cursor:pointer;font-family:var(--font-sans);transition:border-color var(--t),background var(--t),color var(--t)}
#enrollWiz .kid-add:hover{border-color:var(--brand);background:var(--f-hover-bg);color:var(--brand-600)}
#enrollWiz .kid-plus{width:46px;height:46px;border-radius:99px;background:var(--f-rest-bg);display:grid;place-items:center;font-size:26px;line-height:1;color:var(--brand-600);box-shadow:inset 0 0 0 1px var(--f-rest-bd)}
#enrollWiz .kid-add:hover .kid-plus{background:var(--brand);color:#fff;box-shadow:none}
#enrollWiz .kid-add-l{font-size:13.5px;font-weight:700}
#enrollWiz .hh-empty{grid-column:1/-1;padding:22px;border:1.5px dashed var(--f-rest-bd);border-radius:14px;background:rgba(255,255,255,.24);font-size:13.5px;color:var(--ink-3);line-height:1.5;text-align:center}
#enrollWiz .hh-empty b{color:var(--brand-600);font-weight:700}

/* =========================================================
   CHILD MINI-MODAL (2-step: details -> review)
   ========================================================= */
#enrollWiz .kid-ov{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:0;background:var(--bg-canvas);animation:enFade .2s var(--ease)}
#enrollWiz .kid-shell{display:flex;width:100%;height:100%;background:var(--f-focus-bg);overflow:hidden}
#enrollWiz .kid-rail{width:340px;flex:none;color:#fff;padding:34px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:radial-gradient(120% 55% at 90% 3%,rgba(255,255,255,.16),transparent 42%),linear-gradient(162deg,var(--brand),var(--brand-700))}
#enrollWiz .kid-photo{position:relative;width:116px;height:116px;border-radius:99px;border:none;cursor:pointer;overflow:hidden;background:rgba(255,255,255,.14);box-shadow:0 0 0 3px rgba(255,255,255,.28);display:grid;place-items:center;color:#fff}
#enrollWiz .kid-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#enrollWiz .kid-photo-ph{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;font-weight:700;color:rgba(255,255,255,.85)}
#enrollWiz .kid-photo-ph svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .kid-photo-edit{position:absolute;right:5px;bottom:5px;width:28px;height:28px;border-radius:99px;background:var(--brand);display:none;place-items:center;box-shadow:0 0 0 2px #fff}
#enrollWiz .kid-photo-edit svg{width:15px;height:15px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .kid-photo.has-photo .kid-photo-ph{display:none}
#enrollWiz .kid-photo.has-photo .kid-photo-edit{display:grid}
#enrollWiz .kid-rnm{margin-top:14px;font-size:19px;font-weight:800;letter-spacing:-.01em;color:#fff}
#enrollWiz .kid-rnm.empty{color:rgba(255,255,255,.55)}
#enrollWiz .kid-rsub{margin-top:4px;font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
#enrollWiz .kid-rfacts{margin-top:18px;width:100%;border-top:1px solid rgba(255,255,255,.16);padding-top:6px;display:flex;flex-direction:column}
#enrollWiz .kid-rfact{display:flex;align-items:center;gap:11px;padding:9px 0;text-align:left}
#enrollWiz .kid-rfact .ic{width:30px;height:30px;flex:none;border-radius:9px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);display:grid;place-items:center}
#enrollWiz .kid-rfact .ic svg{width:15px;height:15px;stroke:rgba(255,255,255,.85);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .kid-rfact .k{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#enrollWiz .kid-rfact .v{font-size:13.5px;font-weight:700;color:#fff;margin-top:2px}
#enrollWiz .kid-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-canvas)}
#enrollWiz .kid-head{padding:28px 34px 4px}
/* Wizard titles are uppercase app-wide - see the note in detail-view.css. The child
   wizard's strings here happen to be typed in capitals already; the transform means the
   NEXT person can type them normally and still get the right result. */
#enrollWiz .kid-head h3{font-size:20px;font-weight:800;letter-spacing:.02em;margin:6px 0 0;color:var(--ink-1);
  text-transform:uppercase}
#enrollWiz .kid-head p{font-size:13px;color:var(--ink-3);margin:6px 0 0;line-height:1.45}
#enrollWiz .kid-top{display:flex;align-items:center;gap:16px}
#enrollWiz .kid-body{flex:1;min-height:0;overflow:auto;padding:22px 34px 26px;scrollbar-width:none}
#enrollWiz .kid-body::-webkit-scrollbar{width:0;display:none}
#enrollWiz .kid-foot{flex:none;display:flex;align-items:center;gap:12px;padding:18px 34px;border-top:1px solid var(--line);background:var(--bg-canvas)}
#enrollWiz .kid-foot .spacer{flex:1}
#enrollWiz .kid-same{margin:0 0 14px}
#enrollWiz .kid-body .field.locked .icf{pointer-events:none;background:var(--f-rest-bg);opacity:.62}
#enrollWiz .kid-body .field.locked .dp{pointer-events:none;opacity:.62}
#enrollWiz .kid-body .field.locked>label{opacity:.62}
#enrollWiz .kid-rev{margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
#enrollWiz .kid-rev .h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);padding:10px 14px;background:var(--f-rest-bg);border-bottom:1px solid var(--line)}
#enrollWiz .kid-rev .r{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;font-size:13.5px}
#enrollWiz .kid-rev .r+.r{border-top:1px solid var(--line)}
#enrollWiz .kid-rev .r .k{color:var(--ink-3);font-weight:600}
#enrollWiz .kid-rev .r .v{color:var(--ink-1);font-weight:700}

/* =========================================================
   REVIEW
   ========================================================= */
#enrollWiz .rvw{display:flex;flex-direction:column;gap:15px}
#enrollWiz .rvw-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:linear-gradient(150deg,var(--brand),var(--brand-700));color:#fff}
#enrollWiz .rvw-hero .rvw-ic{width:46px;height:46px;flex:none;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center}
#enrollWiz .rvw-hero .rvw-ic svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#enrollWiz .rvw-hero b{font-size:18px;font-weight:800;letter-spacing:-.01em;display:block}
#enrollWiz .rvw-hero span{font-size:12.5px;color:rgba(255,255,255,.82);display:block;margin-top:2px}
#enrollWiz .rvw-g{border:1px solid var(--line);border-radius:14px;overflow:hidden}
#enrollWiz .rvw-g .h{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);padding:11px 16px;background:var(--f-rest-bg);border-bottom:1px solid var(--line)}
#enrollWiz .rvw-g .r{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;font-size:14px}
#enrollWiz .rvw-g .r+.r{border-top:1px solid var(--line)}
#enrollWiz .rvw-g .r .k{color:var(--ink-3);font-weight:600}
#enrollWiz .rvw-g .r .v{color:var(--ink-1);font-weight:700;text-align:right}

/* =========================================================
   SUCCESS OVERLAY
   ========================================================= */
#enrollWiz .m-ok{position:absolute;inset:0;z-index:40;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:44px;animation:enStepIn .32s var(--ease)}
#enrollWiz .m-ok h3{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:6px 0 0}
#enrollWiz .m-ok p{font-size:14.5px;color:var(--ink-3);margin:0 0 18px;max-width:340px;line-height:1.5}
#enrollWiz .m-ok p b{color:var(--ink-1)}
#enrollWiz .ok-ic{width:76px;height:76px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -8px var(--brand-glow)}
#enrollWiz .ok-ic svg{width:36px;height:36px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   DARK MODE - driven by the app's OWN switch (body.dark). Dark tokens are
   scoped to the RIGHT PANE, the success overlay and the child mini-modal so
   the left rail (and the child-modal rail) keep their pine/teal gradient.
   ========================================================= */
body.dark #enrollWiz .pane,
body.dark #enrollWiz .kid-ov,
body.dark #enrollWiz .m-ok{
  --bg-canvas:#1A232B;
  --ink-1:#EAF0F4; --ink-2:#C2CDD5; --ink-3:#8C9AA5; --ink-4:#5E6E7A;
  --brand-600:#8FBBA5;
  --brand-tint:rgba(126,180,150,.18); --brand-tint-2:rgba(126,180,150,.26);
  --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);
  --line:rgba(180,210,235,.12);
}
body.dark #enrollWiz .m-ok,
body.dark #enrollWiz .kid-shell,
body.dark #enrollWiz .kid-pane{background:var(--bg-canvas)}

/* THE ALWAYS-VISIBLE EXIT (CEO, Jul 29 2026). The backdrop stopped closing this wizard, so
   there has to be a real button - and it has to be reachable on EVERY step, not only step 1
   where Back doubles as Cancel. Sits at the end of the progress row, on the shared cool
   field shell so it reads as chrome rather than an action. */
#enrollWiz .pane-top-row .wz-x{margin-left:auto;flex:none;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;cursor:pointer;padding:0;
  background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);
  color:var(--ink-3);transition:background .2s,color .2s,border-color .2s}
#enrollWiz .pane-top-row .wz-x:hover{background:var(--f-focus-bg);border-color:var(--f-focus-bd);color:var(--ink-1)}
#enrollWiz .pane-top-row .wz-x:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
#enrollWiz .pane-top-row .wz-x svg{width:18px;height:18px;display:block}


/* =============================================================================
   ENROLL-02 - the TERM picker and the second-term question.
   ============================================================================= */

/* A grouped option list. The header names the PROGRAM; the options under it are
   its terms. Sticky so the program name stays visible while a long list of terms
   scrolls under it - otherwise, three scrolls down, every row is an unattributed
   "Summer Term" again, which is the exact confusion this build exists to remove. */
#enrollWiz .selpop .sel-group{position:sticky;top:-7px;z-index:1;background:var(--f-focus-bg);
  padding:9px 14px 5px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
#enrollWiz .selpop .sel-group:first-child{padding-top:4px}

/* Two-line option: term name over its days and times. align-items:flex-start
   because .sel-opt centres by default and a two-line child would sit its tick
   against the middle of the block. */
#enrollWiz .sel-opt.two{flex-direction:column;align-items:flex-start;gap:2px;padding:9px 14px}
#enrollWiz .sel-opt.two .sel-l1{font-size:14.5px;font-weight:700;line-height:1.25}
#enrollWiz .sel-opt.two .sel-sub{font-size:12px;font-weight:600;color:var(--ink-3);line-height:1.3}
#enrollWiz .sel-opt.two.on .sel-sub{color:var(--brand-600)}

/* The rail's second line - the picked term's schedule, under its name. */
#enrollWiz .sum-ctx-s{font-size:12px;font-weight:600;color:rgba(255,255,255,.72);margin-top:2px}

/* THE SECOND-TERM QUESTION (50707). Amber, not red: this is the database asking
   whether to admit someone to a second class, and it is answered, not dismissed.
   Deliberately NOT styled like the red error box above it, so a staff member can
   tell at a glance which one is a problem and which one is a choice. */
#enrollWiz .wz-confirm{background:#fff8e6;border:1px solid #f0d9a0;border-radius:10px;
  padding:12px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
#enrollWiz .wz-confirm-msg{font-size:13.5px;font-weight:600;color:#7a5510;line-height:1.45}
#enrollWiz .wz-confirm-acts{display:flex;gap:9px;flex-wrap:wrap}
#enrollWiz .wz-confirm-acts button{font-family:var(--font-sans);font-size:13px;font-weight:700;
  border-radius:var(--r-sm);padding:8px 14px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
#enrollWiz .wz-cf-no{background:#fff;border:1px solid #e2d3ae;color:#7a5510}
#enrollWiz .wz-cf-no:hover{background:#fdf3df}
#enrollWiz .wz-cf-yes{background:var(--brand);border:1px solid var(--brand);color:#fff}
#enrollWiz .wz-cf-yes:hover{background:var(--brand-600);border-color:var(--brand-600)}
#enrollWiz .wz-cf-yes:disabled{opacity:.6;cursor:default}

/* =========================================================
   WALK-IN DUPLICATE PROMPT  (CEO + Program Director, Aug 9 2026)
   =========================================================
   Raised when the name typed on the walk-in step already belongs to a client.
   Modelled on .kid-ov (absolute, inside the modal, covering the step) rather than
   a fixed page overlay: the question is about THIS step, and the wizard's own
   backdrop must stay the only full-screen layer.
   z-index 35 - above the step and the child mini-modal's 30, below the success
   screen's 40, which must always be able to cover everything. */
#enrollWiz .dup-ov{position:absolute;inset:0;z-index:35;display:grid;place-items:center;padding:28px;
  background:color-mix(in srgb,var(--bg-canvas) 88%,transparent);backdrop-filter:blur(3px);animation:enFade .2s var(--ease)}
#enrollWiz .dup-card{width:min(520px,100%);background:#fff;border:1px solid var(--f-bd);border-radius:var(--r-lg,18px);
  padding:30px 30px 24px;text-align:center;box-shadow:0 26px 60px -26px rgba(28,39,51,.42);animation:enStepIn .28s var(--ease)}
#enrollWiz .dup-ic{width:52px;height:52px;margin:0 auto 14px;border-radius:99px;display:grid;place-items:center;
  color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
#enrollWiz .dup-ic svg{width:26px;height:26px}
#enrollWiz .dup-card h3{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--ink)}
#enrollWiz .dup-who{margin:0;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
#enrollWiz .dup-code{font-family:var(--mono,monospace);font-size:12px;padding:2px 8px;border-radius:99px;
  color:var(--brand-700);background:color-mix(in srgb,var(--brand) 12%,transparent)}
#enrollWiz .dup-dob{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
#enrollWiz .dup-q{margin:16px 0 0;font-size:14.5px;font-weight:700;color:var(--ink)}
/* The two answers are deliberately EQUAL in weight apart from the brand fill: "different
   person" is a real and correct answer, not a cancel, so it is not demoted to a text link. */
#enrollWiz .dup-acts{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}