/* ============================================================
   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.
   ============================================================ */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete){
  --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);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) *{box-sizing:border-box}

/* =========================================================
   MODAL OVERLAY (replaces the demo canvas frame)
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete){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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete).show{display:grid;animation:enFade .22s var(--ease)}
@keyframes enFade{from{opacity:0}to{opacity:1}}

/* =========================================================
   MODAL SHELL
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .modal{position:relative;display:flex;flex-direction:column;overflow:hidden;background:rgb(var(--tg-rgb,255,255,255));
  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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .modal.wz2{flex-direction:row;width:min(1240px,100%);height:min(calc(92 * var(--mh-vh)),940px);animation:enRise .42s var(--ease)}

/* CASENOTES-04: .wz1 - the SINGLE-PANE variant, for a dialog that asks one question.
   The transfer sheet (#cnXfer) has no steps, so it has no stepper and no live summary
   to put in a rail, and .wz2's 1240px two-column shell would have been mostly empty
   space with a decorative strip down the left. A rail with nothing in it reads as a
   screen that failed to load - that exact defect was caught by eye on 19 Aug. Same
   chrome, same field kit, same buttons; one column, sized to its content. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .modal.wz1{flex-direction:column;width:min(620px,100%);
  /* height:auto is NOT redundant. MEASURED: without it the modal renders at exactly its
     max-height (820px) and the .m-body grows to 594px around 451px of content - 24% of the
     dialog is empty. Something upstream in the cascade resolves .modal height to stretch,
     and a grid item with place-items:center still filled its 1222px row. Stating auto here
     shrink-wraps it: 699px tall, body 473px, content 473px, no dead space. */
  height:auto;max-height:min(calc(90 * var(--mh-vh)),820px);animation:enRise .42s var(--ease)}

/* AND THE PANE MUST BE ABLE TO SHRINK. MEASURED: with height:auto + max-height, a
   flex column sizes its children against the AUTO height, so .m-body{flex:1} never
   gives any height back - the content ran to ~900px inside an 820px cap and the
   footer was pushed to y=1272 while the modal ended at y=1045. The buttons were
   painted, but elementFromPoint over "Unlock now" returned the BACKDROP: the one
   control that submits the form could not be clicked at all.

   .wz2 never hit this because it sets an explicit height. min-height:0 is what lets
   the flex chain shrink, so the body scrolls and the footer stays inside the card.
   A structural check passes either way - this was only found by measuring where the
   footer actually landed. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .modal.wz1 .pane{min-height:0}
@keyframes enRise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}

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

:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf:hover:not(:focus-within){background:var(--f-hover-bg)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf :is(input,select,textarea),
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf :is(input,select,textarea):hover,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf :is(input,select,textarea):focus,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf input::placeholder,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf textarea::placeholder{color:var(--ink-4);font-weight:400}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf select{appearance:none;-webkit-appearance:none;cursor:pointer}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf.area{align-items:stretch;padding:13px 15px;min-height:104px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf.area textarea{resize:none;min-height:78px;line-height:1.55}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ic{width:19px;height:19px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ic.mh svg{width:19px;height:20px;fill:var(--ink-3);stroke:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf:focus-within .ic.mh svg,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf.open .ic.mh svg{fill:var(--brand-600)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .chev{transition:transform var(--t)}

/* custom dropdown popup (native <select> mirrored) - matches inset-field kit */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf.has-sel{cursor:pointer}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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). */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf .sel-search::placeholder{color:var(--ink-4);font-weight:400}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf.open{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf.open .chev{transform:rotate(180deg)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:has(.icf.open),:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.combo-open{position:relative;z-index:60}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .selpop.up{top:auto;bottom:calc(100% + 8px)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .selpop::-webkit-scrollbar{width:0;height:0;display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .icf :is(input,textarea,select),:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-face{text-align:left !important}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt>span:first-child{text-align:left !important}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt:hover{background:var(--f-rest-bg)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.on{background:var(--brand-tint);color:var(--brand-600);font-weight:700}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.cb{justify-content:space-between;gap:14px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.cb.cur{background:var(--f-rest-bg)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.cb mark{background:var(--brand-tint);color:var(--brand-700);border-radius:3px;padding:0 1px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .selpop .cb-empty{padding:13px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3)}

/* checkbox / radio */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt{display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none;padding:3px 0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt input{position:absolute;opacity:0;width:0;height:0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .box.round{border-radius:999px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .box .dot{width:10px;height:10px;border-radius:999px;background:rgb(var(--tg-rgb,255,255,255));opacity:0;transform:scale(.4);transition:opacity var(--t),transform var(--t)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt input:checked+.box{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt input:checked+.box.round .dot{box-shadow:0 1px 2px rgba(40,60,80,.4)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt input:checked+.box svg,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt input:checked+.box .dot{opacity:1;transform:scale(1)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt .opt-txt{font-size:14.5px;font-weight:500;color:var(--ink-1);line-height:1.35}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .opt.brand .opt-txt{color:var(--brand-600);font-weight:700}

/* =========================================================================
   PER-TICK COLOUR (CEO, 24 Aug 2026). Confidential and Safeguarding are not
   two generic checkboxes - they are the two facts that decide who may ever
   read the note, and the module ALREADY draws them in two fixed colours on
   the note card and in the file (.cn-chip.conf danger red, .cn-chip.safe
   purple #6B4E9B). Carrying the same two here means the tick you set is the
   colour the note will wear afterwards, instead of a green tick that turns
   red somewhere else.

   Colour is never the ONLY signal: the label still says which is which, and
   the ticked state is still a filled box. This is reinforcement, not meaning.
   ========================================================================= */
:is(#cnWiz) .opt.tone-conf input:checked+.box{background:var(--danger);border-color:var(--danger)}
:is(#cnWiz) .opt.tone-conf input:checked~.opt-txt{color:var(--danger-ink);font-weight:700}
:is(#cnWiz) .opt.tone-conf:hover .box{border-color:var(--danger)}

:is(#cnWiz) .opt.tone-safe input:checked+.box{background:#6B4E9B;border-color:#6B4E9B}
:is(#cnWiz) .opt.tone-safe input:checked~.opt-txt{color:#5A3F86;font-weight:700}
:is(#cnWiz) .opt.tone-safe:hover .box{border-color:#6B4E9B}

body.dark :is(#cnWiz) .opt.tone-safe input:checked~.opt-txt{color:#C9B3E4}
body.dark :is(#cnWiz) .opt.tone-safe input:checked+.box{background:#8A6BBF;border-color:#8A6BBF}

/* mode switch: existing client / walk-in */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button:hover{color:var(--ink-1)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px -2px var(--brand-glow)}

/* THREE-WAY SEGMENT (Case Notes, Aug 19 2026). .mode-seg is `auto auto` - built for the
   enroll wizard's two modes - so a third button WRAPPED to a second line inside the pill.
   Additive variant only; the two-button control above is untouched. A case note is about
   a client, a household OR a program, and those three are peers, so they must sit on one
   row and share the width rather than being ranked by however long their words are. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg.three{grid-template-columns:repeat(3,1fr);width:100%}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg.three button{padding:12px 10px;text-align:center;white-space:nowrap}

/* THE RAIL'S IDENTITY DISC (Case Notes). The enroll wizard fills this slot with a 100px
   profile photo; a case note has no photo, and leaving the slot empty is what made the
   rail read as unfinished - a tall green column with two lines of text at the top. The
   disc carries the SUBJECT KIND's own glyph, so the rail says what kind of note this is
   before a single field is filled in. Same 100px circle, same centring, so the two
   wizards line up when placed side by side. */
#cnWiz .sum-disc{
  width:100px;height:100px;border-radius:50%;align-self:center;margin:0 auto 14px;
  display:grid;place-items:center;flex:none;
  background:rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1)));
  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));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
  transition:background var(--t), border-color var(--t);
}
#cnWiz .sum-disc svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* Chosen = the disc lights up, so the rail confirms the pick without a second label. */
#cnWiz .sum-disc.has{background:rgba(var(--tg-rgb,255,255,255),calc(.17*var(--tg-k,1)));border-color:rgba(255,255,255,.28)}
/* A REAL PHOTO fills the circle edge to edge (CEO, 24 Aug 2026). The tint and the inner
   highlight are for the EMPTY disc; over a photograph they read as a haze, so .photo drops
   the fill and keeps only the ring and the drop shadow. object-fit:cover, never contain -
   a letterboxed face in a 100px circle looks like a broken image. */
#cnWiz .sum-disc.photo{background:transparent;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.18)}
#cnWiz .sum-disc img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* The confidential note gets a red rail badge. This is the one flag that changes who may
   read the note, so it is stated on the rail for the whole of the rest of the wizard and
   not only on the step where it was ticked. */
#cnWiz .sum-conf{
  display:inline-flex;align-items:center;gap:7px;align-self:center;margin-top:12px;
  padding:6px 12px;border-radius:999px;
  background:rgba(192,71,63,.22);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.03em;
}
#cnWiz .sum-conf svg{width:13px;height:13px}

/* enrolment status chip */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .enr-status{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .enr-chip i{width:8px;height:8px;flex:none;border-radius:999px;background:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .enr-chip.warn{color:var(--danger-ink)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .enr-chip.warn i{background:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .enr-hint{font-size:13.5px;font-weight:500;color:var(--ink-3)}

/* =========================================================================
   THE RECORD STEP - #cnWiz step 2 (CEO, 24 Aug 2026).

   A read-only briefing on the subject before the note is written. It reuses the
   review kit's anatomy (.rvw-g / .r / .k / .v) rather than inventing a second
   table look, because "a list of facts about a record" is the same object here
   as it is on the review - and two near-identical looks is how they drift.
   ========================================================================= */
#cnWiz .rec-hero{
  display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:15px;
  border-radius:16px; background:linear-gradient(150deg,var(--brand),var(--brand-700)); color:#fff;
}
#cnWiz .rec-ava{
  width:52px; height:52px; flex:none; border-radius:50%; overflow:hidden;
  background:rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))); display:grid; place-items:center;
}
#cnWiz .rec-ava img{width:100%;height:100%;object-fit:cover;display:block}
#cnWiz .rec-ava svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#cnWiz .rec-id{flex:1;min-width:0}
#cnWiz .rec-id b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}
#cnWiz .rec-id span{display:block;margin-top:2px;font-size:12.5px;color:rgba(255,255,255,.84)}
#cnWiz .rec-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:44%}
/* The pill on the hero sits on a dark gradient, so it carries its own light chip
   rather than the lookup colour - a #3E6B57 pill on a green hero is invisible.
   The lookup colour returns on the groups below, where the ground is white. */
#cnWiz .rec-hero .rec-pill{
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; white-space:nowrap;
  background:rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.28) !important;
}

#cnWiz .rec-g{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px}
#cnWiz .rec-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);
}
#cnWiz .rec-g .r{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;font-size:14px}
#cnWiz .rec-g .r+.r{border-top:1px solid var(--line)}
#cnWiz .rec-g .r .k{color:var(--ink-3);font-weight:600}
#cnWiz .rec-g .r .v{color:var(--ink-1);font-weight:700;text-align:right}
#cnWiz .rec-none{padding:14px 16px;font-size:13.5px;color:var(--ink-3);font-weight:500}

/* MEMBERS. A row per person: name, what they are to the family, age, code. The head
   is stated in words, not implied by being first, because a list re-sorted later
   would silently lose that fact. */
#cnWiz .rec-mem{
  display:flex;align-items:center;gap:12px;padding:10px 16px;font-size:13.5px;
}
#cnWiz .rec-mem+.rec-mem{border-top:1px solid var(--line)}
#cnWiz .rec-mname{flex:1;min-width:0;font-weight:700;color:var(--ink-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cnWiz .rec-mname em{
  font-style:normal;margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-600);
  background:color-mix(in srgb,var(--brand) 13%,transparent);padding:2px 7px;border-radius:999px;
}
#cnWiz .rec-mrel{flex:none;font-weight:600;color:var(--ink-2)}
#cnWiz .rec-mage{flex:none;width:62px;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums}
#cnWiz .rec-mcode{flex:none;width:112px;text-align:right;color:var(--ink-3);
  font-size:12px;font-variant-numeric:tabular-nums}
/* The member this note is actually about is tinted, so a family of six does not make
   the subject hunt for themselves in their own household list. */
#cnWiz .rec-mem.is-subject{background:color-mix(in srgb,var(--brand) 7%,transparent)}

#cnWiz .rec-pill{
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
  background:var(--f-rest-bg);color:var(--ink-2);border:1px solid var(--line);
}

@media (max-width:820px){
  #cnWiz .rec-pills{max-width:none;justify-content:flex-start}
  #cnWiz .rec-mcode{display:none}
}

/* =========================================================================
   .wz-hint - THE STEP-LEVEL NOTE. 24 Aug 2026.

   Five of these are rendered by #cnWiz and NOT ONE had a rule anywhere in the
   app, so each one painted as a bare div: no size, no colour, and - the reported
   fault - NO MARGIN, sitting hard against the bottom of the field above it.
   Same defect as .rvw-row: markup written to a class that was never authored.

   Plain = an aside about how the app behaves ("filed against the household too").
   .warn = a RESTRICTION on who may ever read the note. That is not a footnote,
   so it gets the danger panel: the person ticking confidential is deciding what
   a colleague can see, and must not be able to skim past it.
   ========================================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-hint{
  margin-top:14px; font-size:13px; font-weight:500; line-height:1.6;
  color:var(--ink-3);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-hint.warn{
  margin-top:16px; padding:12px 14px; border-radius:var(--r-md);
  font-weight:600; color:var(--danger-ink);
  background:var(--danger-bg); border:1px solid color-mix(in srgb,var(--danger) 26%,transparent);
}
/* A hint that follows the grid must clear the grid's own row gap, not add to it. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .fgrid + .wz-hint{margin-top:16px}

/* =========================================================================
   THE AUTOMATIC CLOCK FIELD (CEO, 24 Aug 2026). Time spent is no longer typed,
   so the control is a READ-ONLY face, not an input - but it keeps the exact
   .icf shell, height and icon slot so the step does not suddenly show a field
   of a different species next to the ones that are still editable.
   ========================================================================= */
:is(#enrollWiz,#cnWiz) .icf.is-auto{cursor:default;background:var(--f-rest-bg)}
:is(#enrollWiz,#cnWiz) .icf.is-auto .auto-val{
  flex:1; min-width:0; font-size:14.5px; font-weight:700; color:var(--ink-1);
}
:is(#enrollWiz,#cnWiz) .icf.is-auto.running .auto-val{color:var(--brand-600);font-weight:800}

/* THE DIGITAL FACE. Tabular figures and a fixed min-width so the seconds column does
   not shuffle the layout every time an 8 becomes a 9 - a counter that jitters once a
   second is the one thing worse than no counter. Monospace-ish by numerals only, so
   it still reads as the app's own type rather than a terminal. */
:is(#enrollWiz,#cnWiz) .icf.is-auto .clock-val{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  letter-spacing:.02em; min-width:5.2ch;
}
:is(#enrollWiz,#cnWiz) .icf.is-auto.running .clock-val{font-size:16px}
/* The live dot - the one thing that says "this is moving" if you glance without
   watching the seconds. Pulses; never animates the number itself. */
:is(#enrollWiz,#cnWiz) .icf.is-auto .clock-live{
  flex:none; width:8px; height:8px; border-radius:50%; background:var(--brand-600);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--brand-600) 55%,transparent);
  animation:cnPulse 1.6s ease-out infinite;
}
@keyframes cnPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand-600) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  :is(#enrollWiz,#cnWiz) .icf.is-auto .clock-live{animation:none}
}
:is(#enrollWiz,#cnWiz) .icf.is-auto svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
:is(#enrollWiz,#cnWiz) .icf.is-auto.running svg{color:var(--brand-600)}

/* attachments dropzone */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));font-size:14px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:border-color var(--t),background var(--t),color var(--t)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dropz:hover{border-color:var(--brand);background:var(--f-hover-bg);color:var(--ink-2)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dropz svg{width:24px;height:24px;stroke:var(--brand-600);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf:hover,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf:hover:not(:focus-within),
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf:focus-within{border-color:var(--danger);background:var(--danger-bg)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf:focus-within{box-shadow:0 0 0 3px rgba(192,71,63,.24)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err>label,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err>label .req{color:var(--danger-ink)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .dp .dp-field{border-color:var(--danger) !important;background:var(--danger-bg) !important;box-shadow:none !important}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .msg{display:flex;align-items:center;gap:6px;margin:7px 0 0;font-size:12.5px;font-weight:650;line-height:1.35}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .msg.err{color:var(--danger-ink)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .msg svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:not(.err) .msg.err{display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn.primary{background:var(--en-cta);color:#fff;box-shadow:0 8px 18px -4px var(--brand-glow)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn.primary:hover{box-shadow:0 10px 22px -4px var(--brand-glow)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn.primary:active{transform:translateY(1px)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn.secondary:hover{background:var(--tg-cream,rgb(238,242,244))}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn.is-cancel{background:transparent;color:var(--ink-2);border-color:transparent;box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn.is-cancel:hover{background:rgba(40,60,80,.07);color:var(--ink-1)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn.is-cancel .bk-ic{display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ui-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* =========================================================
   LEFT RAIL - live summary + student QR
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rail-ic{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(var(--tg-rgb,255,255,255),calc(.15*var(--tg-k,1)));color:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rail-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rail-title{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-align:left;text-transform:uppercase}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rail-scroll{flex:1;min-height:0;overflow:auto;padding:24px 26px 26px;display:flex;flex-direction:column;scrollbar-width:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rail-scroll::-webkit-scrollbar{width:0;height:0;display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum{display:flex;flex-direction:column}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-av{width:92px;height:92px;border-radius:999px;align-self:center;margin-bottom:14px;overflow:hidden;background:rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)));box-shadow:0 0 0 3px rgba(255,255,255,.28),0 10px 24px -10px rgba(0,0,0,.45)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .sum-mh-photo,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .sum-mh-photo{width:100px;height:100px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .kid-mh-photo{width:116px;height:116px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo .mh-ini{width:100%;height:100%;display:grid;place-items:center;color:#F4F0E6}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo .mh-ini svg{width:46%;height:46%;stroke:currentColor;fill:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo.has img{display:block}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo.has .mh-ini{display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo .mh-ov svg{width:16px;height:16px;stroke:currentColor;fill:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo:hover .mh-ov{opacity:1}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo.is-locked{cursor:default;opacity:.9}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo.is-locked .mh-ov,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo.is-locked .mh-btn{display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,#volWiz) .mh-photo .cd-photomenu{z-index:1200}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rail .mh-photo .mh-btn{box-shadow:0 0 0 2.5px #223A33}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-av .sum-av-ph{width:100%;height:100%;display:grid;place-items:center;color:rgba(255,255,255,.85)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-av .sum-av-ph svg{width:42px;height:42px;fill:currentColor}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-name{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.14;margin-top:2px;text-align:center}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-name.empty{color:rgba(255,255,255,.55);font-weight:700}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-type{align-self:center;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.01em;color:#fff;background:rgba(var(--tg-rgb,255,255,255),calc(.17*var(--tg-k,1)));border-radius:999px;padding:5px 13px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-ctx{margin-top:14px;display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-md);background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-ctx svg{width:24px;height:26px;flex:none;fill:rgba(255,255,255,.85);stroke:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-ctx-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-ctx-v{font-size:14.5px;font-weight:700;color:#fff;margin-top:2px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr{margin-top:18px;display:flex;align-items:center;gap:14px;padding:13px;border-radius:var(--r-md);background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);cursor:pointer;transition:background var(--t)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1)))}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr .qr-frame{width:78px;height:78px;flex:none;position:relative;border-radius:8px;overflow:hidden;background:#fff;display:grid;place-items:center}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr .qr-frame svg{width:100%;height:100%;display:block}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr .qr-logo img{width:22px;height:22px;display:block;object-fit:contain}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr-v{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr.noprog{cursor:default;opacity:.72}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr.noprog .qr-frame{display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-qr.noprog .sum-qr-v{font-family:var(--font-sans);font-size:13.5px;letter-spacing:0;color:rgba(255,255,255,.82)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-list{margin-top:20px;padding-top:6px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-row{display:flex;align-items:center;gap:13px;padding:11px 0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-rc{min-width:0;display:flex;flex-direction:column;gap:3px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-v{font-size:15px;font-weight:600;color:#fff;line-height:1.35}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-v small{display:block;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.72);margin-top:3px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sum-empty{margin-top:20px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.55}

/* =========================================================
   RIGHT PANE - stepped form
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-canvas)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-top{flex:none;padding:28px 36px 0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-top-row{display:flex;align-items:center;gap:16px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .prog-count{font-size:12.5px;font-weight:700;color:var(--brand-600);letter-spacing:.01em}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .prog-bar{flex:1;min-width:0;height:7px;border-radius:99px;background:var(--f-rest-bg);overflow:hidden}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-draftbar .ico{flex:none;width:15px;height:15px;color:inherit;display:inline-flex}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-draftbar .ico svg{width:100%;height:100%}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-drafttx{flex:1;min-width:0;line-height:1.35}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-discard:hover{background:rgba(176,70,60,.10);text-decoration:underline}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-draftbar{border-color:rgba(120,170,158,.30);background:rgba(78,124,114,.16);color:#9fc3b8}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-discard{color:#e0a892}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-discard:hover{background:rgba(201,123,90,.16)}

:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-head{flex:none;padding:22px 36px 20px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-title{font-size:27px;font-weight:800;letter-spacing:-.025em;color:var(--ink-1);margin:0;line-height:1.08;text-transform:uppercase}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-sub{font-size:15px;color:var(--ink-3);margin:9px 0 0;font-weight:500;line-height:1.45}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-body{flex:1;min-height:0;overflow:auto;padding:0 36px 22px;scrollbar-width:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-body::-webkit-scrollbar{width:0;height:0;display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-foot{flex:none;display:flex;align-items:center;gap:12px;padding:18px 36px;border-top:1px solid var(--line);background:var(--bg-canvas)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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: */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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 */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp:not(.open) .dp-field:hover{background:var(--f-hover-bg)}
/* mock: .icf:focus-within - the open date field is the "active" field */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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 */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp .dpf-ico{width:19px;height:19px;color:var(--ink-3)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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 */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp .dpf-mask,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp .dpf-mask:hover,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp .dpf-mask:focus,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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 */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp .dpf-mask.partial{letter-spacing:.01em}
/* the field wrapper is click-to-open, but the mask area must read as typeable */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp .dp-field{user-select:auto}
/* The mock date field is icon + masked value with NO dropdown chevron - hide it. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp .dp-pop{transition:none !important;transform:none !important}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp.open .dp-pop{visibility:hidden}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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). */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:has(.dp.open){position:relative;z-index:80}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dp.open .dp-pop{z-index:1200}

/* =========================================================
   HOUSEHOLD + CHILDREN (grids)
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-ic{width:48px;height:48px;flex:none;border-radius:13px;background:var(--brand);color:#fff;display:grid;place-items:center}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-main{flex:1;min-width:0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-v{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink-1);margin-top:3px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kids-head{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin:2px 0 12px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-grid,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kids-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card.static{position:relative !important;cursor:default}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card.static:hover{border-color:var(--line);box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card.added{padding-top:16px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-av img{width:100%;height:100%;object-fit:cover;display:block}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-av .kc-av-ph{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-4)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-av .kc-av-ph svg{width:30px;height:30px;fill:currentColor}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-nm{font-size:14.5px;font-weight:800;color:var(--ink-1);letter-spacing:-.01em}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-meta{font-size:12px;color:var(--ink-3);font-weight:600}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tick svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tick:hover{border-color:var(--brand);color:var(--brand-600)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tick.on{background:var(--brand);border-color:var(--brand);color:#fff}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-x2 svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-x2:hover{background:var(--danger-bg);color:var(--danger-ink);border-color:transparent}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-edit-b svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-edit-b:hover{color:var(--brand-600);border-color:var(--brand)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));color:var(--ink-3);cursor:pointer;font-family:var(--font-sans);transition:border-color var(--t),background var(--t),color var(--t)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add:hover{border-color:var(--brand);background:var(--f-hover-bg);color:var(--brand-600)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add:hover .kid-plus{background:var(--brand);color:#fff;box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add-l{font-size:13.5px;font-weight:700}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-empty{grid-column:1/-1;padding:22px;border:1.5px dashed var(--f-rest-bd);border-radius:14px;background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));font-size:13.5px;color:var(--ink-3);line-height:1.5;text-align:center}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-empty b{color:var(--brand-600);font-weight:700}

/* =========================================================
   CHILD MINI-MODAL (2-step: details -> review)
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-shell{display:flex;width:100%;height:100%;background:var(--f-focus-bg);overflow:hidden}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1))),transparent 42%),linear-gradient(162deg,var(--brand),var(--brand-700))}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-photo{position:relative;width:116px;height:116px;border-radius:99px;border:none;cursor:pointer;overflow:hidden;background:rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)));box-shadow:0 0 0 3px rgba(255,255,255,.28);display:grid;place-items:center;color:#fff}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-photo-ph svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-photo-edit svg{width:15px;height:15px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-photo.has-photo .kid-photo-ph{display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-photo.has-photo .kid-photo-edit{display:grid}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rnm{margin-top:14px;font-size:19px;font-weight:800;letter-spacing:-.01em;color:#fff}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rnm.empty{color:rgba(255,255,255,.55)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rsub{margin-top:4px;font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rfacts{margin-top:18px;width:100%;border-top:1px solid rgba(255,255,255,.16);padding-top:6px;display:flex;flex-direction:column}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rfact{display:flex;align-items:center;gap:11px;padding:9px 0;text-align:left}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rfact .ic{width:30px;height:30px;flex:none;border-radius:9px;background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);display:grid;place-items:center}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rfact .k{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rfact .v{font-size:13.5px;font-weight:700;color:#fff;margin-top:2px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-canvas)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-head h3{font-size:20px;font-weight:800;letter-spacing:.02em;margin:6px 0 0;color:var(--ink-1);
  text-transform:uppercase}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-head p{font-size:13px;color:var(--ink-3);margin:6px 0 0;line-height:1.45}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-top{display:flex;align-items:center;gap:16px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-body{flex:1;min-height:0;overflow:auto;padding:22px 34px 26px;scrollbar-width:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-body::-webkit-scrollbar{width:0;display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot{flex:none;display:flex;align-items:center;gap:12px;padding:18px 34px;border-top:1px solid var(--line);background:var(--bg-canvas)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .spacer{flex:1}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-same{margin:0 0 14px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-body .field.locked .icf{pointer-events:none;background:var(--f-rest-bg);opacity:.62}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-body .field.locked .dp{pointer-events:none;opacity:.62}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-body .field.locked>label{opacity:.62}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev{margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;font-size:13.5px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r+.r{border-top:1px solid var(--line)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r .k{color:var(--ink-3);font-weight:600}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r .v{color:var(--ink-1);font-weight:700}

/* =========================================================
   REVIEW
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw{display:flex;flex-direction:column;gap:15px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-hero .rvw-ic{width:46px;height:46px;flex:none;border-radius:12px;background:rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1)));display:grid;place-items:center}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-hero .rvw-ic svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-hero b{font-size:18px;font-weight:800;letter-spacing:-.01em;display:block}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-hero span{font-size:12.5px;color:rgba(255,255,255,.82);display:block;margin-top:2px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-g{border:1px solid var(--line);border-radius:14px;overflow:hidden}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-g .r{display:flex;justify-content:space-between;gap:16px;padding:10px 16px;font-size:14px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-g .r+.r{border-top:1px solid var(--line)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-g .r .k{color:var(--ink-3);font-weight:600}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw-g .r .v{color:var(--ink-1);font-weight:700;text-align:right}

/* =========================================================
   SUCCESS OVERLAY
   ========================================================= */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-ok{position:absolute;inset:0;z-index:40;background:rgb(var(--tg-rgb,255,255,255));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:44px;animation:enStepIn .32s var(--ease)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-ok h3{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:6px 0 0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-ok p{font-size:14.5px;color:var(--ink-3);margin:0 0 18px;max-width:340px;line-height:1.5}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-ok p b{color:var(--ink-1)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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 :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-ov,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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 :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-ok,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-shell,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-top-row .wz-x:hover{background:var(--f-focus-bg);border-color:var(--f-focus-bd);color:var(--ink-1)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-top-row .wz-x:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.two{flex-direction:column;align-items:flex-start;gap:2px;padding:9px 14px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.two .sel-l1{font-size:14.5px;font-weight:700;line-height:1.25}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.two .sel-sub{font-size:12px;font-weight:600;color:var(--ink-3);line-height:1.3}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .sel-opt.two.on .sel-sub{color:var(--brand-600)}

/* The rail's second line - the picked term's schedule, under its name. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-confirm{background:#fff8e6;border:1px solid #f0d9a0;border-radius:10px;
  padding:12px 14px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-confirm-msg{font-size:13.5px;font-weight:600;color:#7a5510;line-height:1.45}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-confirm-acts{display:flex;gap:9px;flex-wrap:wrap}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-no{background:rgb(var(--tg-rgb,255,255,255));border:1px solid #e2d3ae;color:#7a5510}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-no:hover{background:#fdf3df}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-yes{background:var(--brand);border:1px solid var(--brand);color:#fff}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-yes:hover{background:var(--brand-600);border-color:var(--brand-600)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dup-card{width:min(520px,100%);background:rgb(var(--tg-rgb,255,255,255));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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dup-ic svg{width:26px;height:26px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dup-card h3{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--ink)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dup-who{margin:0;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dup-dob{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .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. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dup-acts{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}


/* =============================================================================
   CASENOTES-09 - #cnAccess ALONE MUST CLEAR THE DETAIL STAGE.

   The five wizards share z-index:200 (line 42) and that was right while every one
   of them was opened from a PAGE. CASENOTES-09 gave #cnAccess a second and third
   host: the Client Notes tab and the Student Notes tab, which live inside the
   DetailShell overlay - `.dv-stage.ovr`, `position:fixed; z-index:1200`, a SIBLING
   of this backdrop under the same parent.

   1200 beats 200, so "Request access" opened the sheet UNDERNEATH the client's own
   record: fully rendered, correctly worded, and completely unreachable. The sheet's
   inner `.modal.wz1{z-index:1055}` cannot save it - that 1055 is scoped INSIDE this
   backdrop's stacking context and never competes with the stage at all.

   Measured, not reasoned: elementsFromPoint at the Cancel button returned
   [m-body, pane, modal wz2 dv-narrow, dv-behind, dv-stage ovr, BUTTON.is-cancel] -
   the button last, under five layers of the record it was opened from.

   ONLY THE CASE-NOTE SHEETS ARE RAISED - see the sweep note below. #enrollWiz and
   #cnWiz keep the shared 200: raising the shared selector would have moved four
   other wizards above every detail overlay in the app to fix one.
   ============================================================================= */
#cnAccess,
#cnAccess.show{z-index:1300}

/* =============================================================================
   Z-INDEX SWEEP, 24 Aug 2026 - #cnXfer AND #cnUnlock JOIN #cnAccess BY DESIGN.

   The 22 Aug fix raised #cnAccess alone and recorded that #cnXfer and #cnUnlock
   were "still opened from pages". That was true, but it was not WHY they worked.

   Measured on 24 Aug, both are reachable at z-index 200 for one reason only:
   TransferOne (CaseNotes.razor:762), AskUnlock (:947) and AskAccessFromFile (:989)
   each set _open = null FIRST, so the case-note file - #mhDetail.dv-stage.ovr,
   position:fixed, z-index:1200 - UNMOUNTS before the sheet is shown. Nothing in
   those three handlers says so. The day someone keeps the file open behind the
   sheet (a natural "return to the note afterwards" change) the 22 Aug bug returns
   in two more places, silently, with a clean build.

   elementsFromPoint at each sheet's Cancel button, 24 Aug, note 15 and note 14:
     #cnXfer   200 -> [BUTTON.ui-btn.is-cancel, m-foot, pane, modal.wz1, #cnXfer]
     #cnUnlock 200 -> all three controls reachable, record unmounted
     #cnAccess 1300 over a LIVE 1200 record -> all three controls reachable
   So this raise changes nothing that works today. It removes the dependency on
   an undocumented unmount.

   #cnWiz is deliberately NOT raised: it has exactly one host, the Case Notes page
   (CaseNotes.razor:517), and the file now carries its own composer, so it is never
   opened from inside a detail stage.
   ============================================================================= */
#cnXfer,#cnXfer.show,
#cnUnlock,#cnUnlock.show,#cnDelete,#cnDelete.show{z-index:1300}


/* CNSTD01 (1 Oct 2026, owner: "start landing our new interface and fields and roles standards to the CASE NOTE
   wizards and detail mocks all in one go"). EVERY `#enrollWiz` SELECTOR FROM HERE TO THE END OF THE FILE NOW READS
   :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) - the five Case Note windows were built on this sheet and this markup
   (.field / .icf / .fsec / .m-foot), so the standard is WIDENED to them (rule 15f), never copied. Same specificity
   as before (an id inside :is()), so no rule changed rank. Comments below still say #enrollWiz - they are history. */
/* ####################################################################################################
   EWIZ18 - THE ENROLL STUDENT WIZARD JOINS THE WIZARD STANDARD.  24 September 2026.
   Owner: "start the + Enroll Student Mock and Student Detail mock deployment of our standard new
   interface ... everything you have learned do it here now".

   THE NEXT FOUR BLOCKS ARE A PORT, NOT A DESIGN: PGWIZ18, PGWIZ18b, PGREV18 and PGBG18 from
   program-wizards.css, copied rule for rule with `#pgWiz` -> `#enrollWiz`, `.pgsec` -> `.ewsec`,
   `pgw-empty` -> `ew-empty` and `.pgr-` -> `.ewr-` (all grepped app-wide first - unused), and the
   Program wizard's own note / switch rules left out. Their comments still speak of #pgWiz because
   they are that block's measured record; every value was read off the live Client wizard there.
   `#enrollWiz` ONLY and at the END of this sheet: it is shared with the five Case Note sheets, and
   the base rules are :is(...) at (1,1,0)-(1,5,0), so these win on ORDER - move them up and they stop.
   #################################################################################################### */
/* ============================================================
   PGWIZ18 - THE + NEW PROGRAM WIZARD JOINS THE FIELD STANDARD.  22 September 2026.

   His instruction: land the standard interface fields and the backgrounds on the Add New Program
   wizard, the way they were landed on the client side.

   SCOPED TO `#enrollWiz` ALONE, AND THAT IS NOT TIDINESS. Every rule above this block is written
   `:is(#enrollWiz,#schWiz,#latePts)` - THREE wizards share this stylesheet (New Program, New Term and
   Late Points). He named the Program wizard, so the Term and Late-Points wizards must come out of
   this pass untouched. `:is()` takes the specificity of its most specific argument, so
   `:is(#enrollWiz,#schWiz,#latePts) .field` and `#enrollWiz .field` are BOTH (1,1,0) - equal. These rules
   therefore win on ORDER alone, which is why this block must stay at the END of the file. Move it
   up and it silently stops applying.

   WHY NOT WIDEN THE CLIENT WIZARD'S SELECTOR INSTEAD. The documented way to add a host to the
   wizard standard is to widen `:is(#clWiz,#clMbr)` - that is how Add Family Member was brought on
   - and it appears 701 times in mh-clientwizard.css. It CANNOT be widened to `#enrollWiz`: the two
   sheets share 36 class names, including `.step`, `.stepper`, `.icf`, `.selpop`, `.sel-opt`,
   `.dp-field`, `.full`, `.open`, `.on` and `.err`. Both sheets would then paint the same elements
   with load order picking the winner for each, in a flow that creates real programs. Measured
   before deciding, not guessed. So this is a PORT: the kit's structure and its measured values,
   re-scoped - never a second design.

   EVERY NUMBER BELOW WAS READ OFF THE LIVE CLIENT WIZARD with getComputedStyle, not re-picked.
   That is the rule that keeps the two wizards one object, and the trap it avoids is the one that
   shrank every tile on the client record by 2px when a line-height was re-derived instead of
   copied.
   ============================================================ */

/* ---- 1. THE SECTION CARD. Measured: `#clWiz .fsec` is rgba(255,255,255,.4) on a .72 white rim,
        22px radius, 0 22px 54px -26px rgba(30,55,48,.42). That is the SAME recipe as
        `.pd-card.mint` on the detail record - the wizard and the record are cut from one
        material, which is the whole point of the standard. ---- */

/* The capsule head. 56px tall, 13px/18px padding - measured off `.fsec-h`. */
/* The icon bubble: 30px, 10px radius, WHITE on the glass with a pine hairline drawn INSIDE so it
   cannot grow the box. Measured off `.fsec-h .bub`. */
/* The rule between the title and the meter. It is what stops the two reading as one clump. */
/* DONE IS A STATE, NOT A COLOUR CHANGE FOR ITS OWN SAKE - it is the one moment the step tells you
   it is finished, so it goes solid the way a selected segment does. */

/* ---- 2. THE FIELD IS THE TILE. Measured on `#clWiz .fld`: padding 12px 16px 14px 30px,
        radius 16px - character-identical to `.mint-w` on the detail record. An EMPTY field is
        rgba(255,255,255,.4) with a 1px DASHED rgba(30,55,48,.18) rim; a filled one goes solid.
        The 30px of left padding is the dot's lane. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field{
  position:relative;
  display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:12px 16px 14px 30px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
/* THE DOT. 7px, at 14px/15px - measured off `.fld::before`. Hollow while the field is empty,
   solid pine once it holds something: the same two states the record's tiles use, so "filled"
   looks the same everywhere in the app. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field::before{
  content:"";position:absolute;left:14px;top:15px;
  width:7px;height:7px;border-radius:50%;
  background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.14);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-empty{
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  border:1px dashed rgba(30,55,48,.18);
  box-shadow:none;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-empty::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:focus-within{
  background:rgb(var(--tg-rgb,255,255,255));
  border:1px solid rgba(47,107,87,.55);
  box-shadow:0 0 0 3px rgba(47,107,87,.13), 0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.3);
}
/* The label is the tile's label: 10px/800/1px tracking, uppercase, muted. Measured. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field>label{
  font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:#7A8A84;display:flex;align-items:center;gap:6px;
  /* 12.5px is the kit's OWN declared line-height, read off `#clWiz .fld label`, not 1.25
     re-derived from it. Without it the label box came out 15px and every tile measured 71px
     against the kit's 69 - a 2px drift from exactly the mistake the field standard warns about
     under "copy the computed value; do not re-derive it". */
  line-height:12.5px;
}

/* ---- 3. THE WELL INSIDE THE TILE IS REMOVED. A well inside a tile is the "double border"
        defect the field standard names explicitly - `.icf` must never sit inside a Mint tile.
        So `.icf` keeps its JOB (it is the flex row that lays out icon + control + chevron and it
        is what the dropdown positions against) and loses its SURFACE entirely. Nothing about the
        wizard's behaviour moves; only the box it drew disappears. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf{
  min-height:24px;padding:0;gap:9px;
  background:none;border:none;box-shadow:none;border-radius:0;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf:hover:not(:focus-within),
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf:focus-within{background:none;border:none;box-shadow:none}
/* The value line takes the tile's own typography - 16px/650, the figure the record's read span
   computes to. COPIED, never re-derived: writing a line-height here instead of taking the one
   the tile already uses is exactly what shrank every tile on the client record by 2px. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf input,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf textarea,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-face{
  font-size:16px;font-weight:650;color:#1C2A25;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf textarea{min-height:92px;line-height:22px;resize:vertical}
/* The leading icon was the well's furniture. Inside a tile the LABEL already says what the field
   is, so a second glyph beside the value is noise - the record's tiles carry none. The chevron
   stays: it is the control's affordance, not decoration. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf > .ic:not(.chev){display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .chev{color:#2F6B57;opacity:.75}

/* ---- 4. THE ERROR STATE follows the tile, not the well. Same danger ink and wash the wizard
        already used; it just paints the tile now that the well has no surface. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err{
  background:var(--danger-bg);
  border:1px solid var(--danger);
  box-shadow:none;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err::before{background:var(--danger);box-shadow:0 0 0 3px rgba(192,71,63,.16)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err:focus-within{box-shadow:0 0 0 3px rgba(192,71,63,.24)}

/* ---- 5. THE GRID. 11px gap, measured off `.dzgrid` - tighter than the well-based 18/20px,
        because tiles carry their own padding and do not need to be held apart. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .fgrid{gap:11px}

/* The switch row and the "next: add a term" note are NOT fields - they are a control and a
   caption - so they stay off the tile and simply get the room the tighter grid took away. */

/* ---- 6. THE PANE IS THE CANVAS THE CARDS SIT ON. It was a flat panel holding flat wells; with
        the fields on glass cards it has to stop being a surface of its own, exactly as the client
        wizard's `.dzpane` is transparent and lets its sections read as the only objects. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-head .pane-title{font-size:21px;font-weight:800;letter-spacing:.42px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .pane-head .pane-sub{font-size:13.5px}

/* ---- DARK ---- */
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field{
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));
  border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field::before{background:#5FCFA4;box-shadow:0 0 0 3px rgba(95,207,164,.18)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-empty{
  background:rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1)));
  border:1px dashed rgba(180,210,235,.2);
  box-shadow:none;
}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-empty::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:focus-within{
  background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)));
  border-color:rgba(95,207,164,.5);
  box-shadow:0 0 0 3px rgba(95,207,164,.14);
}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field>label{color:#93A79D}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf input,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf textarea,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-face{color:#EAF0F4}


/* ============================================================
   PGWIZ18b - THE DROPDOWN, THE TILE HOVER AND THE FOOTER, AS THE CLIENT WIZARD HAS THEM.
   23 September 2026.

   Owner, on PGWIZ18: "check the drop down fields - the list when appearing it's not matching with
   the size of the field, and check the list when it's appearing it must be adjusted below the
   fields, and look what you have done - the menu is in the back ... look back to the Client Wizard
   how you did it."

   MEASURED BEFORE (Type, 1440px): tile 389px wide at 496-885, list 341px at 527-868; list top 368
   against the tile's bottom 388, i.e. it opened ON the tile; and `.ewsec{overflow:hidden}` cut it
   off at the card's edge - only 4 of 17 options were hit-testable, the rest landed on the pane, the
   footer or nothing. THREE causes, and the client wizard had already fixed all three on 18 Sep:
     1. `.icf` was the list's containing block, so "full width" meant the value line;
     2. the section card clipped its own children;
     3. no JS placer, so nothing flipped or clamped the list inside the scrolling body.

   REFERENCE, READ OFF THE LIVE CLIENT WIZARD (Status, #clWiz .dzpane.mf) WITH getComputedStyle:
     tile 389 at 493-882  ->  list 387 at 494-881 (left:0/right:0 inside the tile's 1px border),
     list top = tile bottom + 9 (10px from the padding edge); list #fff, 1px rgba(40,60,80,.16),
     radius 16, padding 8, gap 3, max-height 288, shadow 0 26px 52px -20px rgba(16,40,34,.42),
     0 2px 6px rgba(16,40,34,.06), scrollbar hidden; option 650 15px/22.5px, padding 11px 13px,
     radius 11, #1C2733; the open tile z-index 60; search 650 16px/24px #1C2A25, placeholder
     #98A5AE / 500. Copied - never re-picked.

   STILL `#enrollWiz` ONLY, AND STILL AT THE END OF THE FILE - see PGWIZ18 for why both matter.
   ============================================================ */

/* ---- 1. NOTHING CLIPS THE LIST. The card has no child that needs clipping - the head carries its
        own radius - and a clipping card cuts every dropdown in half (the client wizard's rule:
        "NO overflow:hidden ON THE PANEL"). ---- */

/* ---- 2. THE LIST BELONGS TO THE TILE, NOT TO THE VALUE LINE. The row stops being positioned, so
        the TILE (.field, already position:relative) is the containing block and left:0 / right:0 /
        top:100% + gap mean the tile's own width and a real gap below its edge. The face is then
        stretched back over the tile's padding on three sides (never the top - it must not ride up
        over its label), so a click ANYWHERE on the tile opens the list. Values = the client's. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf.open{position:static}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf.has-sel{margin:0 -16px -14px -30px;padding:0 16px 14px 30px;cursor:pointer}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf.has-sel:focus{outline:none}

/* ---- 3. THE OPEN TILE PAINTS ABOVE EVERY SIBLING (the next row, the switch, the note) - the
        client's z-index 60. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:has(.icf.open){z-index:60}

/* ---- 4. THE LIST - the client wizard's page-1 list, value for value. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .selpop{
  left:0;right:0;top:calc(100% + 10px);z-index:1000;
  background:rgb(var(--tg-rgb,255,255,255));border:1px solid rgba(40,60,80,.16);border-radius:16px;
  padding:8px;gap:3px;max-height:288px;
  box-shadow:0 26px 52px -20px rgba(16,40,34,.42), 0 2px 6px rgba(16,40,34,.06);
  scrollbar-width:none;-ms-overflow-style:none;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .selpop::-webkit-scrollbar{width:0;height:0;display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .selpop.up{top:auto;bottom:calc(100% + 10px)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt{
  font-size:15px;font-weight:650;line-height:1.5;padding:11px 13px;border-radius:11px;color:#1C2733;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt:hover{background:var(--tg-well,rgb(223,228,234))}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt.on{background:rgba(46,74,67,.12);color:#375A50;font-weight:700}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt.on::after{color:#375A50}
/* THE KEYBOARD RING (ARROWSEL18) - where the arrows are, never confused with the saved value,
   which keeps its tint and tick. Declared after .on so a ringed selected row shows both. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt.hi{background:var(--tg-well,rgb(223,228,234));box-shadow:inset 0 0 0 2px #2F6B57}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .selpop .cb-empty{padding:13px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3)}

/* ---- 5. THE SEARCH BOX takes the tile's value line exactly, so opening the list does not move a
        pixel of the tile (16px/650/24px - the value line's own figures). ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-search{
  flex:1;min-width:0;padding:0;border:none;background:none;outline:none;
  font-family:var(--font-sans);font-size:16px;font-weight:650;line-height:24px;color:#1C2A25;cursor:text;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-search::placeholder{color:#98A5AE;font-weight:500}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-face{line-height:24px}

/* ---- 6. THE TILE HOVER - the household lift the client wizard wears (HHGLASS18): 3px up, the
        tile's two-layer shadow, the fill firms to .85 and a dashed empty rim goes solid. Focus
        lifts the same way and keeps its ring. NEVER a refused tile (it shakes in place). The
        transition sits on the BASE rule so it rises AND settles smoothly. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field{
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:not(.err):hover{
  background:rgba(var(--tg-rgb,255,255,255),.85);border-style:solid;border-color:rgba(255,255,255,.85);
  transform:translateY(-3px);
  box-shadow:0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:not(.err):focus-within{
  background:rgb(var(--tg-rgb,255,255,255));border-style:solid;border-color:rgba(47,107,87,.55);
  transform:translateY(-3px);
  box-shadow:0 0 0 3px rgba(47,107,87,.13), 0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30);
}

/* ---- 7. THE FOOTER PAIR - THE FOOTER BUTTON STANDARD (HANDOFF 3o-b, FOOTBTN18). Primary = the
        mint gradient (Edit Record / Continue / Create Program); secondary = the glass Close -
        Cancel, Back and Clear Draft ALL wear it (Clear Draft keeps its red ink, .wz-clear).
        Cancel was bare text on the canvas - the one control on the screen with no surface. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-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, and THE BUTTON HOVER STANDARD (3o): transition on the base rule, never `all` */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn{
  position:relative;height:48px;padding:0 22px;border-radius:12px;gap:9px;
  font-size:14.5px;font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease,
             border-color .18s ease, color .18s ease;
}
/* (3o rule 1) the hover region that does not move with the button - no flicker on its bottom edge */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:inherit}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn svg{width:18px;height:18px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn.primary{
  background:var(--fb-grad);color:#fff;border:1px solid transparent;box-shadow:var(--fb-glow);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn.primary:hover:not(:disabled){background:var(--fb-grad);box-shadow:var(--fb-glow-hi)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn.secondary{
  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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn.secondary: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);
}
/* the lift, one rule for both, so they cannot disagree - and (3o rule 3) never on a disabled one */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn:hover:not(:disabled){transform:translateY(-2px)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn.primary:active:not(:disabled),
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn.secondary:active:not(:disabled){
  transform:translateY(0);
  box-shadow:0 2px 5px -3px rgba(30,55,48,.22), inset 0 0 0 1px rgba(255,255,255,.7);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn:disabled,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn:disabled:hover,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete,:is(#subWiz,#volWiz),#subWizAsk,#mvWiz) .m-foot .ui-btn:disabled:active{transform:none;cursor:default}
@media (prefers-reduced-motion: reduce){
  :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:not(.err):hover,
  :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:not(.err):focus-within,
  :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-foot .ui-btn:hover:not(:disabled){transform:none}
}

/* ---- DARK - the client wizard's own dark tokens (mh-clientwizard.css, body.dark :is(#clWiz,#clMbr)),
        copied value for value: list = --f-focus-bg #222E38 on --f-focus-bd; hover and ring ground =
        --f-rest-bg #121A20; selected = --brand-tint / --brand-600; ink = --ink-1; placeholder
        = --mt-un. ---- */
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .selpop{
  background:#222E38;border-color:rgba(150,190,225,.28);
  box-shadow:0 26px 52px -20px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4);
}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt{color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt:hover{background:#121A20}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt.on{background:rgba(143,187,165,.18);color:#8FBBA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt.on::after{color:#8FBBA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .sel-opt.hi{background:#121A20;box-shadow:inset 0 0 0 2px #8FBBA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-search{color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-search::placeholder{color:#6E7E88}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:not(.err):hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1)));border-color:rgba(180,210,235,.14);
  box-shadow:0 4px 10px -6px rgba(0,0,0,.4), 0 18px 38px -18px rgba(0,0,0,.55);
}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:not(.err):focus-within{
  background:rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1)));border-color:rgba(143,187,165,.55);
  box-shadow:0 0 0 3px rgba(143,187,165,.16), 0 4px 10px -6px rgba(0,0,0,.4), 0 18px 38px -18px rgba(0,0,0,.55);
}


/* ============================================================
   PGREV18 - STEP 3 (REVIEW & CONFIRM) WEARS THE CLIENT WIZARD'S STEP 4.  23 September 2026.

   Owner: "change the step 3 too same as our new standard interface designs, find it how we are
   doing it." How we do it = NewClientWizard step 4 (STD18 + P4ORDER18, mh-clientwizard.css): each
   group is a GLASS PANEL, its head the household's WHITE CAPSULE with a mini glass "Edit", and every
   value a TILE - solid with a pine dot when filled, dashed with a hollow dot when "Not set" - lifting
   3px on hover. One column, the panel's full width, 16px apart.

   Before: flat bordered boxes, a grey #DFE4EA header strip, label-left / value-right rows, a hyphen
   for an empty value, and the note on the recessed #DFE4EA field ground - the same flat-fill-on-glass
   defect the toolbar sweep chased across twelve pages.

   Every value is COPIED from mh-clientwizard.css (the .rev-card / .rh / .re / .rb / .rev-item rules,
   the --mt-* tile tokens and the HHGLASS18 panel + lift), light and dark - not re-picked. Class
   names are pgr-* (grepped app-wide: unused), `#enrollWiz` only, END of file.
   ============================================================ */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .rvw{gap:16px}

/* the card - the household glass panel */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-card{
  padding:12px;border-radius:22px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.40*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 22px 54px -26px rgba(30,55,48,.42);
}
/* the head - the white capsule */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 10px 16px;border-radius:14px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-t{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1C2A25}
/* "Edit" is a secondary action - the standard's glass button in miniature, with the 3o hit area */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e{
  position:relative;padding:5px 12px;border-radius:10px;font-family:var(--font-sans);
  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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:inherit}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e: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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e:focus-visible{outline:2px solid #2F6B57;outline-offset:3px}

/* the tiles - two columns, a wide value (the description) spans */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-b{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:11px 0 0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i{
  position:relative;min-width:0;padding:12px 16px 13px 30px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.wide{grid-column:1 / -1}
/* The step 1-2 field tiles (PGWIZ18) carried the SAME 1.0px: dot centre below the label's text middle on
   all four tiles of step 1, measured with a Range rect as DOTLINE18 does. 14px reads 0.0 on all four. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field::before{top:14px}
/* DOTLINE: top 14px, MEASURED here - at the client's 15px every dot sat 1.0px below its title's middle
   (Range rect of the label text: middle 18.5px from the tile top; 15px put the dot's at 19.5). At 14px all
   seven measure 0.0. Same rule as DOTLINE18, measured on this host rather than copied blind. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i::before{
  content:"";position:absolute;left:14px;top:14px;width:7px;height:7px;border-radius:50%;
  background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.16);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.none{background:rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1)));border-style:dashed;border-color:rgba(30,55,48,.18);box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.none::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i:hover{
  background:rgba(var(--tg-rgb,255,255,255),.85);border-style:solid;border-color:rgba(255,255,255,.85);transform:translateY(-3px);
  box-shadow:0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-l{font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1.25;text-transform:uppercase;color:#7A8A84;margin-bottom:4px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-v{font-size:15px;font-weight:650;line-height:1.35;color:#1C2A25;overflow-wrap:anywhere}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.wide .ewr-v{white-space:pre-wrap}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.none .ewr-v{color:#9CA8A3;font-weight:500}

/* the note ("This program will have no sessions yet", and step 2's "Next: add ... first term") is a
   TILE on the glass, not the recessed #DFE4EA field ground - no dot: it is information, not a value */

@media (prefers-reduced-motion: reduce){
  :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i:hover, :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e:hover{transform:none}
}

/* ---- DARK - the client wizard's own dark values (--acc-* / --mt-* dark blocks, .re dark) ---- */
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-card{background:rgba(var(--tg-rgb,255,255,255),calc(.035*var(--tg-k,1)));border-color:rgba(180,210,235,.12);box-shadow:0 10px 24px -20px rgba(0,0,0,.7)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-h{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 6px 16px -12px rgba(0,0,0,.55)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-t{color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e{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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 6px 16px -12px rgba(0,0,0,.55)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i::before{background:#5FCFA4;box-shadow:0 0 0 3px rgba(95,207,164,.18)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.none{background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));border-color:rgba(180,210,235,.16);box-shadow:none}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.none::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.30)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 4px 10px -6px rgba(0,0,0,.4),0 18px 38px -18px rgba(0,0,0,.55)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-l{color:#8C9AA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-v{color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-i.none .ewr-v{color:#6E7E88}

/* ============================================================
   PGBG18 - THE WINDOW AND ITS BACKGROUNDS MATCH THE CLIENT WIZARD.  23 September 2026.

   Owner: "check the background of the Client Wizard - they are matching or not?"
   Measured both live with getComputedStyle (1440x900, light + dark):
     MATCHED ALREADY  body canvas + footer fill (rgb 225,230,235 light / 26,35,43 dark - the theme
                      token), and the rail gradient (identical, 165deg pine + sheen).
     DID NOT MATCH    backdrop  client rgba(33,42,38,.5) green-grey | program rgba(28,39,51,.5) blue-grey
                      frame     client radius 26, 1px rgba(255,255,255,.6), 0 30px 80px rgba(33,58,51,.26),
                                max height 900 | program radius 24, grey hairline, two blue-grey shadows, 884
                      footer    client rule #D9DFE7 (dark rgb 51,64,58), 18/34/24 = 91px tall |
                                program rgba(40,60,80,.08), 18/36 = 85px
                      rail edge client rgba(255,255,255,.08) | program the grey --line
   Every value below is the client's, copied. The footer keeps its 36px SIDES on purpose: they line
   the buttons up with this wizard's own 36px content inset - only the bottom (24px) is the client's.
   `#enrollWiz` only (New Term and Late Points share this file and keep their own window). END of file.
   ============================================================ */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete){background:rgba(33,42,38,.5)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .modal.wz2{
  height:min(calc(92 * var(--mh-vh)),900px);
  border-radius:26px;border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 80px rgba(33,58,51,.26);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz2 .rail{border-right-color:rgba(255,255,255,.08)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz2 .m-foot{padding:18px 36px 24px;border-top-color:#D9DFE7}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .modal.wz2{background:rgb(34,43,39)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz2 .m-foot{border-top-color:rgb(51,64,58)}

/* ============================================================
   EWIZ18 - WHAT THE ENROLL WIZARD HAS THAT THE PROGRAM WIZARD DOES NOT.  24 September 2026.

   The blocks above are PGWIZ18 / PGWIZ18b / PGREV18 / PGBG18 from program-wizards.css, ported
   value for value onto `#enrollWiz` (class names ewsec / ew-empty / ewr-*, grepped unused). What
   follows is only this wizard's own furniture, each piece put on an object the standard has:
     date field      = the tile's value line (the client wizard's .mf .dp rules)
     tick box        = the toggle tile (TICK18 ring + gradient tick, TICKDOT18 hollow dot)
     mode switch     = the record's tab row one size down (the Program Schedule filter, PGLIST18)
     child card      = the household member card; the + tile = Add Family Member
     child sub-form  = the same tiles; its review = tiles; its footer = the footer pair
     status          = the database-contract pill (.st--glass, in the markup)
   `#enrollWiz` ONLY - this sheet is shared with the five Case Note sheets (#cnWiz, #cnXfer,
   #cnUnlock, #cnAccess, #cnDelete), which must come out of this pass untouched. END of file.
   ============================================================ */

/* ---- 1. THE REFUSAL ON A TILE outranks the old well's error paint: `.field.err .icf:hover:not(...)`
        is (1,5,0) in the base sheet, so the surfaceless row is re-asserted at the same weight. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf:hover,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf:hover:not(:focus-within),
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .icf:focus-within{background:none;border:none;box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .msg.err{margin:6px 0 0}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field:has(.icf.open),
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.combo-open{z-index:60}

/* ---- 2. THE DATE FIELD IS THE TILE'S VALUE LINE (the client wizard's .mf .dp rules) - the well,
        its icon and its 50px floor go; the masked value takes 16px/650/24px. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp .dp-field,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp:not(.open) .dp-field:hover,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp.open .dp-field{
  min-height:0;height:auto;padding:0;gap:8px;background:none;border:0;box-shadow:none;border-radius:0;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp .dpf-ico{display:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp .dpf-val{font-size:16px;font-weight:650;line-height:24px;color:#1C2A25}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp .dpf-val.empty{color:#9CA8A3;font-weight:500}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp :is(.dpf-mask,.dpf-mask:hover,.dpf-mask:focus,.dpf-mask:focus-visible){
  font-size:16px !important;font-weight:650 !important;line-height:24px;height:24px !important;color:#1C2A25 !important;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.err .dp .dp-field{background:none;border:0;box-shadow:none}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp .dpf-val,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp :is(.dpf-mask,.dpf-mask:hover,.dpf-mask:focus,.dpf-mask:focus-visible){color:#EAF0F4 !important}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .dp .dpf-val.empty{color:#6E7E88}

/* ---- 3. THE TICK TILE (Chk / .wchk). The question is the tile's label (10px/800/.1em, the
        client's), the tick is the ring + gradient mark, the dot is hollow until ticked. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-chk{justify-content:center;padding-top:13px;padding-bottom:13px;cursor:pointer}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-chk::before{top:calc(50% - 3.5px)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-chk.tkoff::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;min-height:24px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk span{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1C2A25;line-height:12.5px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk input,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk input:checked{
  -webkit-appearance:none;appearance:none;margin:0;flex:none;cursor:pointer;
  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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk 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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk 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>");
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk input:focus-visible{outline:2px solid #2F6B57;outline-offset:2px}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk span{color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-chk.tkoff::before{box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk 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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .wchk 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>");
}
/* the "Same as parent address" tile sits in its own one-row grid above the address */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .fgrid.ew-same{margin:0 0 11px}
/* the city / state / county / zip row keeps its four columns */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .fgrid.ew-4{grid-template-columns:repeat(4,1fr)}

/* ---- 4. THE MODE SWITCH IS THE RECORD'S TAB ROW, ONE SIZE DOWN (PGLIST18's Schedule filter): the
        glass holder, the mint gradient on the chosen mode with its glow, the others firming and
        lifting 2px on hover. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg{
  gap:4px;padding:5px;border-radius:15px;margin:0 0 18px;
  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);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button{
  padding:11px 18px;border-radius:10px;font-size:12.5px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;color:#677579;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button:not(.on):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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button.on{
  background:radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))), rgba(255,255,255,0) 42%),
             linear-gradient(162deg,#42856E 0%,#2F6B57 60%,#2A5749 100%);
  color:#fff;box-shadow:0 4px 12px -2px rgba(47,107,87,.42);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button:focus-visible{outline:2px solid #2F6B57;outline-offset:2px}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 3px 8px -5px rgba(0,0,0,.45),0 16px 34px -18px rgba(0,0,0,.6)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button{color:#8C9AA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button:not(.on):hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .mode-seg button.on{
  background:radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))), rgba(255,255,255,0) 42%),
             linear-gradient(162deg,#3E7A66 0%,#2E5F4E 60%,#274F42 100%);
}

/* ---- 5. THE CHILD CARD IS A MEMBER CARD (#hhDetail .mcard): glass .4 / .72 rim / 17 / the -22px
        float; a clickable card lifts 3px. The + tile = Add Family Member. The corner controls and
        Edit are the mini glass button. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-grid,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kids-grid{gap:14px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kids-grid.ew-kids{margin-top:11px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card{
  gap:8px;border-radius:17px;
  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 14px 34px -22px rgba(30,55,48,.38);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card:not(.static):hover{
  transform:translateY(-3px);background:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));border-color:rgba(255,255,255,.9);
  box-shadow:0 4px 10px -6px rgba(30,55,48,.16),0 18px 38px -18px rgba(30,55,48,.30);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card.static:hover{border-color:rgba(255,255,255,.72);box-shadow:0 14px 34px -22px rgba(30,55,48,.38)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-av{
  border:2px solid rgba(234,241,237,.5);background:linear-gradient(150deg,#5E8C81,#2F4640);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 6px 16px -6px rgba(0,0,0,.28);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-nm{font-size:15px;font-weight:750;color:#1C2A25}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-meta{color:#7A8A84}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tag{background:rgba(47,107,87,.13);color:#2A5F4D;box-shadow:inset 0 0 0 1px rgba(47,107,87,.22)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tick,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-x2,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-edit-b{
  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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-edit-b{height:auto;padding:6px 12px;border-radius:10px;font-size:12px;gap:6px;margin-top:6px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tick:hover,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-edit-b: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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-x2:hover{background:var(--danger-bg);color:var(--danger-ink);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add{
  min-height:178px;gap:13px;border-radius:17px;
  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 14px 34px -22px rgba(30,55,48,.38);color:#375A50;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add:hover{
  transform:translateY(-3px);background:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));border-color:rgba(255,255,255,.9);color:#375A50;
  box-shadow:0 4px 10px -6px rgba(30,55,48,.16),0 18px 38px -18px rgba(30,55,48,.30);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-plus{
  width:46px;height:46px;font-size:24px;color:#375A50;background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 6px 16px -12px rgba(30,55,48,.35);
  transition:background .2s,color .2s,transform .25s,box-shadow .2s;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add:hover .kid-plus{background:#2F6B57;color:#fff;transform:rotate(90deg);box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add-l{font-size:14px;font-weight:700;color:#375A50}
/* the empty notes are a dashed "Not set" tile, not the flat well ground */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-empty{border:1px dashed rgba(30,55,48,.18);border-radius:16px;background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));color:#7A8A84}
/* the household count is a TILE; its bubble is the section head's white bubble */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi{
  margin:0 0 14px;padding:14px 16px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-ic{
  width:40px;height:40px;border-radius:12px;background:rgb(var(--tg-rgb,255,255,255));color:#2F6B57;
  box-shadow:0 4px 10px -4px rgba(30,55,48,.45), inset 0 0 0 1px rgba(47,107,87,.28);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-ic svg{width:20px;height:20px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-k{font-size:10px;font-weight:800;letter-spacing:.1em;color:#7A8A84}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-v{color:#1C2A25}
/* the attachments drop zone = the dashed empty tile */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dropz{border:1px dashed rgba(30,55,48,.18);border-radius:16px;background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dropz:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border-color:rgba(47,107,87,.45)}
@media (prefers-reduced-motion: reduce){
  :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card:hover,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add:hover,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-edit-b:hover,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tick:hover,:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-x2:hover{transform:none}
  :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add:hover .kid-plus{transform:none}
}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 14px 34px -22px rgba(0,0,0,.65)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-card:not(.static):hover,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)));border-color:rgba(180,210,235,.16);box-shadow:0 4px 10px -6px rgba(0,0,0,.4),0 18px 38px -18px rgba(0,0,0,.55)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-nm,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-v{color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-meta,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-k{color:#8C9AA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-tick,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-x2,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kc-edit-b{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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-plus{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));color:#8FBBA5;box-shadow:inset 0 0 0 1px rgba(180,210,235,.14)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-add-l{color:#8FBBA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 6px 16px -12px rgba(0,0,0,.55)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-kpi-ic{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)));color:#B7D6C8}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .hh-empty,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .dropz{background:rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1)));border-color:rgba(180,210,235,.2);color:#8C9AA5}

/* ---- 6. THE CHILD SUB-FORM: the same tiles (its fields are .field), its review rows are tiles,
        and its footer is the footer pair. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev{
  margin-top:0;border:0;border-radius:0;overflow:visible;
  display:grid;grid-template-columns:1fr 1fr;gap:11px;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r+.r{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;
  padding:12px 16px 13px 30px;border-radius:16px;font-size:inherit;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));border-top:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r.wide{grid-column:1 / -1}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r::before{
  content:"";position:absolute;left:14px;top:14px;width:7px;height:7px;border-radius:50%;
  background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.16);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r.none{background:rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1)));border-style:dashed;border-color:rgba(30,55,48,.18);box-shadow:none}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r.none::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r .k{font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1.25;text-transform:uppercase;color:#7A8A84}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r .v{font-size:15px;font-weight:650;line-height:1.35;color:#1C2A25;text-align:left}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r.none .v{color:#9CA8A3;font-weight:500}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot{padding:18px 34px 24px;border-top-color:#D9DFE7}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-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%);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn{
  position:relative;height:48px;padding:0 22px;border-radius:12px;gap:9px;font-size:14.5px;font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;border-radius:inherit}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn.primary{background:var(--fb-grad);color:#fff;border:1px solid transparent;box-shadow:0 4px 12px -2px rgba(47,107,87,.42)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn.primary:hover{background:var(--fb-grad);box-shadow:0 8px 20px -4px rgba(47,107,87,.5)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn.secondary{
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));color:#375A50;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);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn.secondary:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733;
  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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn:hover{transform:translateY(-2px)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r,
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r+.r{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 6px 16px -12px rgba(0,0,0,.55)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r::before{background:#5FCFA4;box-shadow:0 0 0 3px rgba(95,207,164,.18)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r.none{background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));border-color:rgba(180,210,235,.16);box-shadow:none}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r.none::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r .k{color:#8C9AA5}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-rev .r .v{color:#EAF0F4}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot{border-top-color:rgb(51,64,58);--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%)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn.secondary{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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn.secondary:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4}

/* ---- 7. THE BANNERS. The form refusal and the second-term question keep their meaning (danger /
        amber) on the glass, at the tile radius; the question's two answers are the mini buttons. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ew-err{
  margin:0 0 16px;padding:12px 16px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.5;
  background:var(--danger-bg);color:var(--danger-ink);border:1px solid rgba(192,71,63,.35);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-confirm{border-radius:16px;background:rgba(255,248,230,.78);border:1px solid rgba(240,217,160,.9);box-shadow:0 6px 16px -12px rgba(30,55,48,.35)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-no,
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-yes{
  position:relative;padding:6px 12px;border-radius:10px;font-size:12px;font-weight:700;
  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(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-yes{
  background:radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))), rgba(255,255,255,0) 42%),
             linear-gradient(162deg,#42856E 0%,#2F6B57 60%,#2A5749 100%);
  color:#fff;border-color:transparent;box-shadow:0 4px 12px -2px rgba(47,107,87,.42);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-no:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733;transform:translateY(-2px)}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-yes:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px -4px rgba(47,107,87,.5)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-confirm{background:rgba(154,110,18,.16);border-color:rgba(240,217,160,.28)}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .wz-cf-no{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);color:#8FBBA5}

/* ---- 8. THE ENROLLMENT STATUS row sits in a tile; the pill carries the state (markup), the hint
        the reason in the tile's label grey. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-status .enr-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:24px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-status .enr-hint{font-size:12.5px;font-weight:600;color:#7A8A84}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-status .enr-hint{color:#8C9AA5}

/* ---- 9. the review's Edit carries its pencil, like the record's mini buttons ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e{display:inline-flex;align-items:center;gap:6px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .ewr-e svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- 10. AN UNANSWERED FIELD READS UNANSWERED (the client wizard's .sel-face.ph / .dpf-val.empty):
        the placeholder face and an empty date's MM/DD/YYYY mask take the "Not set" grey at 500, so a
        dashed empty tile never carries dark, bold text that looks like a value. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-face.ph{color:#9CA8A3;font-weight:500}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-empty .dp :is(.dpf-mask,.dpf-mask:hover,.dpf-mask:focus,.dpf-mask:focus-visible){color:#9CA8A3 !important;font-weight:500 !important}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field .icf .sel-face.ph{color:#6E7E88}
body.dark :is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-empty .dp :is(.dpf-mask,.dpf-mask:hover,.dpf-mask:focus,.dpf-mask:focus-visible){color:#6E7E88 !important}

/* ---- 11. THE TICK TILE IS AS TALL AS ITS NEIGHBOURS. In the client wizard a toggle sits beside a
        field and the grid stretches it; here "Interpreter needed" / "Consent signed" sit alone in
        their row and measured 52px against 68.5px tiles. The floor is the tiles' own measured height.
        The dot rides the text line: centred on the tile it measured 0.8px below the label's middle
        (Range rect), so it lifts that 0.8px - 0.0 measured after. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-chk{min-height:68.5px}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .field.ew-chk::before{top:calc(50% - 4.3px)}

/* ---- 12. THE CHILD FORM'S SECTIONS sit on its pane the way the main steps sit on theirs; the
        footer glyphs take the footer pair's 18px. ---- */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-foot .ui-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .kid-body .field.locked .icf{background:none;opacity:1}

/* CNSTD01 - DELETE STAYS RED. Widening the footer pair onto #cnDelete gave its Delete the MINT gradient
   (measured: green, the old `#cnDelete .ui-btn.cn-danger` lost on specificity), so the one irreversible
   action read like Continue. Same shape, same sheen, same lift - a DANGER base, the module's own red
   (#B5412F, mh-casenotes.css). Like Create Household keeping its clay: the make-or-break action keeps its colour. */
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-foot .ui-btn.primary.cn-danger{
  background:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
             linear-gradient(162deg, #C9573F 0%, #B5412F 60%, #9C3526 100%);
  box-shadow:0 4px 12px -2px rgba(181,65,47,.42);
}
:is(#enrollWiz,#cnWiz,#cnXfer,#cnUnlock,#cnAccess,#cnDelete) .m-foot .ui-btn.primary.cn-danger:hover:not(:disabled){
  background:radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
             linear-gradient(162deg, #C9573F 0%, #B5412F 60%, #9C3526 100%);
  box-shadow:0 8px 20px -4px rgba(181,65,47,.5);
}