/* ============================================================================
   mh-subsidy.css  -  Housing Subsidy section (build Step 2).
   Designed against the locked system: Pine #4E7C72 (var --mh-green), Hanken
   Grotesk body, IBM Plex Mono (var --mono) for identifiers. Light + dark via
   body.dark overrides. Reuses the global .st status pills (status.css) for the
   lookup-colored chips. Plain hyphens only.
   ============================================================================ */

.mh-app .hs-wrap { padding: 26px 30px 60px; max-width: 1180px; margin: 0 auto; }

.mh-app .hs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.mh-app .hs-kicker { font-size: 11px; letter-spacing: 2px; font-weight: 700; color: var(--mh-green, #4E7C72); opacity: .85; }
.mh-app .hs-title { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin: 2px 0 0; }

.mh-app .hs-btn {
    display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid transparent;
    border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
    background: var(--tg-cream,rgb(238,242,241)); color: #2e3b38; transition: background .15s, transform .05s, box-shadow .15s;
}
.mh-app .hs-btn svg { width: 16px; height: 16px; }
.mh-app .hs-btn.prim { background: var(--mh-green, #4E7C72); color: #fff; box-shadow: 0 6px 16px rgba(78,124,114,.28); }
.mh-app .hs-btn.prim:hover { background: #3d655d; }
.mh-app .hs-btn.ghost { background: transparent; border-color: #d7dddb; color: #3a4744; }
.mh-app .hs-btn.ghost:hover { background: var(--tg-cream2,rgb(241,245,244)); }
.mh-app .hs-btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.mh-app .hs-btn:active { transform: translateY(1px); }
.mh-app .hs-btn:disabled { opacity: .6; cursor: default; }

/* ---- filters ---- */
.mh-app .hs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.mh-app .hs-chip {
    display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #dde3e1; background: rgb(var(--tg-rgb,255,255,255));
    color: #4a5754; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.mh-app .hs-chip:hover { border-color: var(--mh-green, #4E7C72); }
.mh-app .hs-chip.on { background: var(--mh-green, #4E7C72); border-color: var(--mh-green, #4E7C72); color: #fff; }
.mh-app .hs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mh-app .hs-active { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #5a6764; cursor: pointer; }
.mh-app .hs-active input { accent-color: var(--mh-green, #4E7C72); width: 15px; height: 15px; }

/* ---- empty ---- */
.mh-app .hs-empty { text-align: center; padding: 60px 20px; color: #768683; }
.mh-app .hs-empty-ic { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--mh-green, #4E7C72); opacity: .55; }
.mh-app .hs-empty-ic svg { width: 100%; height: 100%; }
.mh-app .hs-empty p { margin: 0 0 16px; font-size: 15px; }

/* ---- list grid + upgraded KPI card (KICKOFF 29) -------------------------------
   Brand-true to _handoff/Houseing Subsidy KPI Card but BOUND to the app tokens
   (pine var(--mh-green), cool surface/hairline, IBM Plex Mono) + the app dark theme,
   NOT the handoff's literal grass-green/Bricolage. Per-record; identical on all tabs. */
/* .hs-grid columns/gap come from the CARD-GRID LAW in mh-theme.css (single source
   of truth: 3 cols desktop -> 2 -> 1, never 4+, identical across engines). */
.mh-app .hs-card {
    display: flex; flex-direction: column;  /* footer (.hs-foot) pins to bottom via margin-top:auto */
    background: var(--mh-surface); border: 1px solid var(--mh-line-cool); border-radius: 18px; padding: 18px 20px 16px; cursor: pointer;
    box-shadow: 0 1px 0 rgba(33,50,58,.03), 0 14px 30px -20px rgba(33,50,58,.22);
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
.mh-app .hs-card:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(33,50,58,.04), 0 18px 36px -18px rgba(33,50,58,.30); border-color: var(--mh-green); }
.mh-app .hs-card.is-off { opacity: .82; }
.mh-app .mono { font-family: var(--mono, "IBM Plex Mono", monospace); }

/* topline: gradient-circle initials avatar (Household KPI card design, no real photo)
   + family name + country flag chip + REAL-status pill */
.mh-app .hs-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mh-app .hs-av {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 16px; letter-spacing: .02em; overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 4px 12px -4px rgba(33,50,58,.4);
}
/* When a head-of-household photo is present it fills the circle (no gradient behind). */
.mh-app .hs-av.has-photo { background: var(--mh-surface); }
.mh-app .hs-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mh-app .hs-who { flex: 1; min-width: 0; }
.mh-app .hs-hhname { font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: var(--mh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .hs-ctry {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; max-width: 100%;
    padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    color: var(--mh-green-d); background: color-mix(in srgb, var(--mh-green) 12%, transparent);
}
.mh-app .hs-ctry-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .hs-ctry .mono { color: inherit; }
.mh-app .hs-flag { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--mh-surface); }
.mh-app .hs-pill { align-self: flex-start; flex: 0 0 auto; }

/* money metrics + right-aligned term */
/* Money row: wrap + shrink so the big monospace figures NEVER overflow the card, even on
   narrow widths / high app zoom. gap is responsive; the term chip drops to its own line if
   space is tight instead of pushing the numbers past the card edge. */
.mh-app .hs-money { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 16px; }
.mh-app .hs-money > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mh-app .hs-ml { font-size: 12px; font-weight: 600; color: var(--mh-muted); letter-spacing: .01em; }
.mh-app .hs-mv { font-family: var(--mono, "IBM Plex Mono", monospace); font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: var(--mh-ink); letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.mh-app .hs-mv.dim { color: var(--mh-green); }
.mh-app .hs-term-top { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mh-muted); letter-spacing: .01em; white-space: nowrap; }

/* committed-vs-cap bar */
.mh-app .hs-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--mh-muted) 22%, transparent); overflow: hidden; margin-bottom: 11px; }
.mh-app .hs-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--mh-green), var(--mh-green-d)); transition: width .3s; }

/* committed + Last paid row */
.mh-app .hs-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--mh-muted); margin-bottom: 14px; }
.mh-app .hs-committed b { color: var(--mh-ink); font-weight: 700; }
.mh-app .hs-lastpaid { flex: 0 0 auto; font-weight: 600; color: var(--mh-green-d); }

/* footer: ONE clean horizontal line - home . landlord (italic placeholder when none)
   . Matthew House . Renews/Ends date (matches the demo; not a stacked right-rail) */
.mh-app .hs-foot { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--mh-line-cool); font-size: 13px; font-weight: 500; color: var(--mh-ink); min-width: 0; }
.mh-app .hs-foot > svg { flex: 0 0 auto; width: 15px; height: 15px; stroke: var(--mh-muted); }
.mh-app .hs-foot-ll { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 42%; }
.mh-app .hs-foot-ll.none { font-style: italic; color: var(--mh-muted); }
.mh-app .hs-sep { flex: 0 0 auto; color: var(--mh-muted); }
.mh-app .hs-renew { flex: 0 0 auto; font-weight: 600; color: var(--mh-green); white-space: nowrap; }
.mh-app .hs-tag-off { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mh-muted); padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--mh-muted) 16%, transparent); }
.mh-app .hs-foot-off { flex: 0 0 auto; margin-left: auto; }

/* ---- list view (reuses the global .cl-list / .cl-row idiom; only the subsidy-specific
       avatar fill + the Inactive tag tint are added here) ---- */
.mh-app .cl-row-av.hs-row-av { background: linear-gradient(145deg, #4E7C72, #2E4A43); }
.mh-app .cl-row-tag.hs-tag-off { color: #6b7a76; background: rgba(120,134,130,.16); }
body.dark .mh-app .cl-row-tag.hs-tag-off { color: #aeb9b5; background: rgba(150,165,160,.16); }

/* ============================ DARK ============================ */
body.dark .mh-app .hs-title { color: #eef2f1; }
body.dark .mh-app .hs-btn { background: #283330; color: #d8e0de; }
body.dark .mh-app .hs-btn.prim { background: var(--mh-green, #4E7C72); color: #fff; }
body.dark .mh-app .hs-btn.ghost { border-color: #3a4744; color: #c3ccc9; }
body.dark .mh-app .hs-btn.ghost:hover { background: #232d2b; }
body.dark .mh-app .hs-chip { background: #1f2725; border-color: #3a4744; color: #b6c0bd; }
body.dark .mh-app .hs-chip.on { background: var(--mh-green, #4E7C72); border-color: var(--mh-green, #4E7C72); color: #fff; }
/* Upgraded KPI card: most styling flips via tokens (surface/ink/line-cool); only the pieces
   keyed to the CONSTANT brand pine (--mh-green-d stays dark in both themes) need lightening. */
body.dark .mh-app .hs-card { box-shadow: 0 14px 30px -20px rgba(0,0,0,.5); }
body.dark .mh-app .hs-card:hover { box-shadow: 0 18px 36px -18px rgba(0,0,0,.6); }
body.dark .mh-app .hs-ctry { color: color-mix(in srgb, var(--mh-green) 55%, #fff); background: color-mix(in srgb, var(--mh-green) 22%, transparent); }
body.dark .mh-app .hs-mv.dim,
body.dark .mh-app .hs-lastpaid,
body.dark .mh-app .hs-renew { color: color-mix(in srgb, var(--mh-green) 52%, #fff); }
body.dark .mh-app .hs-hhname { color: #eef2f1; }
body.dark .mh-app .hs-mv { color: #eef2f1; }
body.dark .mh-app .hs-bar { background: #2a3431; }
body.dark .mh-app .hs-meta { border-color: #2e3a37; color: #9aa6a2; }

/* ---- household-detail Housing section (read) ---- */
.mh-app .hh-housing .members-h { display: flex; align-items: center; gap: 8px; }
.mh-app .hh-housing-link { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--mh-green, #4E7C72); text-decoration: none; }
.mh-app .hh-housing-link:hover { text-decoration: underline; }
.mh-app .hh-housing-empty { color: #97a3a0; font-size: 13px; padding: 6px 2px; }
.mh-app .hh-housing-sum { display: flex; flex-wrap: wrap; gap: 26px; padding: 8px 2px 12px; }
.mh-app .hh-housing-sum > div { display: flex; flex-direction: column; gap: 3px; }
.mh-app .hh-housing-sum span { font-size: 11px; color: #97a3a0; }
.mh-app .hh-housing-sum b { font-size: 15px; font-weight: 700; }
.mh-app .hh-housing-pays { display: flex; flex-direction: column; gap: 2px; border-top: 1px dashed #e7ecea; padding-top: 8px; }
.mh-app .hh-pay { display: grid; grid-template-columns: 1.1fr .9fr auto; align-items: center; gap: 10px; padding: 6px 2px; font-size: 13px; }
.mh-app .hh-pay span.mono { color: #97a3a0; font-size: 11.5px; }
.mh-app .hh-pay-amt { text-align: right; font-weight: 700; font-family: var(--mono, "IBM Plex Mono", monospace); }
body.dark .mh-app .hh-housing-sum b { color: #e7ecea; }
body.dark .mh-app .hh-housing-pays { border-color: #2e3a37; }

/* ============================================================================
   HOUSING SUBSIDY WIZARD (Phase B) - ported from Mockups/wizard.css (skin-solid).
   Own class namespace (.wzx ...), so no collision with the app shell. Structure
   reproduced faithfully; exact font/color is a later polish pass. Light + dark.
   ============================================================================ */
.subwiz-host { position: fixed; inset: 0; z-index: 100045; }

.wzx {
  --teal:#7D939B; --teal-deep:#5E7A83; --teal-700:#496670;
  --ink:#2E2E2E; --ink-soft:#62625C; --ink-faint:#8C8C84;
  /* De-creamed to Matthew House brand sage/pine (was #F6F4EF/#EFEAE1 cream + #E7E2D9/#F0ECE3 tan).
     One token swap re-tones every surface + border in the wizard; the body.dark .wzx block below
     already remaps these four for dark, so dark stays correct. */
  --paper:var(--mh-sage-50); --paper-2:var(--mh-sage-100); --card:#FFFFFF;
  --line:rgba(78,124,114,.20); --line-soft:rgba(78,124,114,.11);
  --clay:#C6824F; --green:#5C8A6A;
  --teal-tint:rgba(125,147,155,.14); --green-tint:rgba(92,138,106,.15);
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px;
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; color: var(--ink);
  width: 100%; height: 100%; position: relative; overflow: hidden; display: grid; place-items: center;
  -webkit-font-smoothing: antialiased; letter-spacing: -.01em;
}
.wzx * { box-sizing: border-box; }
.wzx h2, .wzx h4 { font-weight: 800; margin: 0; letter-spacing: -.02em; line-height: 1.05; }
.wzx p { margin: 0; }
.wzx button { font-family: inherit; cursor: pointer; border: none; background: transparent; }
.wzx .ico { display: inline-flex; flex: 0 0 auto; }
.wzx .ico svg { display: block; }
.skin-solid { background: radial-gradient(70% 50% at 88% -8%, rgba(125,147,155,.18) 0%, transparent 55%), rgba(28,42,48,.5); }

/* Centered modal sized to match the New Client Wizard (.dzwiz: min(1240px,100%) x
   min(92vh,900px)); .wzx already centers via place-items:center. Was full-bleed
   (position:absolute; inset:34px), which made the panel span the whole screen. */
.wcard { position: relative; width: min(1240px, 100%); height: min(calc(92 * var(--mh-vh)), 900px); border-radius: var(--r-xl); background: var(--card); display: flex; overflow: hidden;
  box-shadow: 0 30px 70px rgba(33,50,58,.28), 0 4px 12px rgba(33,50,58,.10); border: 1px solid var(--line); }

/* ---- LEFT ---- */
/* Left identity panel = the Client Detail rail pine (#clDetail .c-side), adopted via
   the SAME app-global tokens so the two surfaces stay one source of truth. Only the
   background + text color change here; layout, photo frame, avatars and step rail are
   untouched. The --mh-sidebar tokens are fixed pine (do not flip), so the panel reads
   the same in light and dark, exactly like the Client Detail rail. */
.wleft { width: 368px; flex: 0 0 auto; position: relative; overflow: hidden; color: #E7EEEA; padding: 40px 34px 34px; display: flex; flex-direction: column;
  /* THE STANDARD RAIL (CEO, Jul 29 2026): byte-identical to `#mhDetail .rail` in
     detail-view.css - the canonical --dv-rail-a -> --dv-rail-b pine with the same white
     top-right sheen. This panel used to carry its own clay + sage glows over a pine that
     brightened to #4E7C72 at the bottom, which is why it read as a different green from
     every other mock. There is ONE rail colour in this app and this is it. */
  background: radial-gradient(120% 55% at 90% 3%, rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))), transparent 42%),
    linear-gradient(162deg, #2E4A43 0%, #213A33 100%); }
/* country flag before the head's name, sized to match #clDetail .c-name-flag */
.wl-flag { width: 26px; height: 19px; border-radius: 3px; margin-right: 8px; vertical-align: -3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
/* The two decorative outlined circles (.arc.a1 / .arc.a2) were deleted with their markup
   (CEO, Jul 29 2026) - no other rail in the app carries decoration over the pine. */
.wl-eyebrow { position: relative; z-index: 2; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.66); }
.wl-photo { position: relative; z-index: 2; margin-top: 22px; display: flex; align-items: center; gap: 18px; }
.wl-pframe { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; position: relative; overflow: hidden;
  border: 3px solid rgba(255,255,255,.6); box-shadow: 0 12px 28px rgba(0,0,0,.26); display: grid; place-items: center; }
.wl-pframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Higher specificity (+.mh-app .wzx) so it beats the later .mh-app .mono utility
   (mh-admin.css) that was forcing the avatar "?" to 12px grey. White + larger. */
.mh-app .wzx .wl-pframe .mono { font-weight: 800; color: #fff; font-size: 44px; text-shadow: 0 2px 10px rgba(0,0,0,.22); }
.wl-id { min-width: 0; }
.wl-id .nm { font-size: 19px; font-weight: 800; line-height: 1.12; padding-left: 34px; text-indent: -34px; }
.wl-id .role { font-size: 12.5px; opacity: .82; margin-top: 4px; }
.wl-id .meta { font-size: 12px; opacity: .72; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.wl-id .pending { opacity: .6; font-style: italic; font-weight: 500; }
.wl-members { position: relative; z-index: 2; margin-top: 22px; }
.wl-mlabel { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 11px; }
.wl-mrow { display: flex; gap: 9px; flex-wrap: wrap; }
.wl-mav { width: 40px; height: 40px; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff;
  font-weight: 700; font-size: 12.5px; border: 2px solid rgba(255,255,255,.55); cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.wl-mav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-mav:hover { transform: translateY(-3px); }
.wl-mav.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 4px 10px rgba(0,0,0,.25); transform: translateY(-3px); }
.wl-mhint { margin-top: 12px; font-size: 11.5px; color: rgba(255,255,255,.62); display: flex; align-items: center; gap: 7px; }
/* The rail's step list (.wl-steps / .wl-step / .wl-bub / .wl-dot / .wl-st-t / .wl-st-s) and
   the divider above it were deleted with the markup (CEO, Jul 29 2026) - the rail now carries
   the family's identity only, and the form column owns all progress reporting. */

/* ---- the subsidy facts (CEO, Jul 31 2026) --------------------------------------
   Under the household, a hairline apart from it: the rail answers WHO first and WHAT
   second, in that order of importance. Deliberately NOT a card - it belongs to the
   rail's surface, so it is separated by a rule rather than boxed, and it reuses
   .wl-mlabel for its heading so it reads as a sibling of Household Members.
   The dot is coloured from lkp_SubsidyPlanType so Standard and Self-Sufficiency Plan
   are told apart by the SAME colour the rest of the app uses for them.
   Everything is rgba white: the rail is the pine gradient in BOTH themes, so these
   need no body.dark counterpart. */
.wl-facts { position: relative; z-index: 2; margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16); }
.wl-frow { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.wl-frow .k { flex: 0 0 66px; color: rgba(255,255,255,.58); font-weight: 600; }
.wl-frow .v { flex: 1 1 auto; min-width: 0; color: rgba(255,255,255,.94); font-weight: 600;
  display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
/* An unanswered fact is dimmed, never hidden - a blank row is what tells the user the
   subsidy still needs it. */
.wl-frow .v.none { color: rgba(255,255,255,.42); font-weight: 500; font-style: italic; }
.wl-fdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.22); }
.wl-foot { position: relative; z-index: 2; margin-top: auto; padding-top: 22px; font-size: 11.5px; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: 8px; }

/* ---- RIGHT ---- */
.wright { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; background: var(--card); }
.wr-top { flex: 0 0 auto; padding: 30px 40px 0; }
.wr-prog { display: flex; align-items: center; gap: 14px; }
.wr-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.wr-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,var(--teal),var(--teal-deep)); transition: width .4s ease; }
.wr-prog .lab { font-size: 12.5px; font-weight: 700; color: var(--teal-700); white-space: nowrap; }
.wr-prog .x { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); flex: 0 0 auto; background: var(--card); }
.wr-prog .x:hover { color: var(--ink); border-color: var(--teal); }
.wr-head { padding: 24px 40px 4px; }
/* Wizard titles are uppercase app-wide - see the note in detail-view.css. Titles here come
   from CurrentStep.Title, so they are dynamic and could never have been fixed in markup. */
.wr-head h2 { font-size: 26px; color: var(--ink); text-transform: uppercase; letter-spacing: .02em; }
.wr-head p { font-size: 14px; color: var(--ink-soft); margin-top: 8px; }

/* ---- STEP 1b: draft resume banner + the visible Discard affordance ---- */
.wz-draftbar { display: flex; align-items: center; gap: 9px; margin: 14px 40px 0; padding: 9px 14px; border-radius: 11px; border: 1px solid rgba(78,124,114,.28); background: rgba(78,124,114,.08); font-size: 12.5px; color: var(--teal-700); }
.wz-draftbar .ico { flex: 0 0 auto; color: var(--teal-700); }
.wz-drafttx { flex: 1; min-width: 0; line-height: 1.35; }
.wz-discard { flex: 0 0 auto; border: 0; background: none; padding: 4px 6px; font: inherit; font-weight: 700; font-size: 12px; color: var(--mh-danger, #B0463C); cursor: pointer; border-radius: 8px; }
.wz-discard:hover { background: rgba(176,70,60,.10); text-decoration: underline; }
body.dark .wz-draftbar { border-color: rgba(120,170,158,.30); background: rgba(78,124,114,.16); color: #9fc3b8; }
body.dark .wz-draftbar .ico { color: #9fc3b8; }
body.dark .wz-discard { color: #e0a892; }
body.dark .wz-discard:hover { background: rgba(201,123,90,.16); }
.wr-body { flex: 1; padding: 22px 40px 0; overflow-y: auto; }
.wr-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 20px 40px 26px; }
.wr-foot .sp { flex: 1; }

/* ---- form controls ---- */
.f-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Aligned to the New Client wizard's .fld label (the gold standard): uppercase, weight 800,
   letter-spaced, ink-black. Hints stay gray (.f-hint), values stay black. */
.f-label { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.f-label .req { color: var(--clay); font-weight: 700; }
.f-hint { font-size: 12px; color: var(--ink-faint); }
.f-rows { display: flex; flex-direction: column; gap: 20px; }
.f-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Filled-sage soft control (matches the client wizard .inp): sage fill + transparent border at
   rest, lifting to white with a sage focus border + ring. --mh-ctrl-fill flips for dark. */
.f-input { height: 48px; border: 1.5px solid transparent; border-radius: var(--r-md); background: var(--mh-ctrl-fill); padding: 0 15px; font-size: 15px;
  color: var(--ink); display: flex; align-items: center; gap: 11px; width: 100%; font-weight: 500; transition: border-color .15s, box-shadow .15s, background .15s; }
.f-input:focus-within { border-color: var(--mh-ctrl-focus-border); background: var(--card); box-shadow: var(--mh-ctrl-focus-ring); }
.f-input input { border: none; outline: none; flex: 1; font-size: 15px; background: transparent; color: var(--ink); min-width: 0; font-family: inherit; font-weight: 500; }
.f-input input::placeholder { color: var(--ink-faint); font-weight: 400; }
.f-input .lead { color: var(--ink-faint); display: inline-flex; }
.f-input.sel { cursor: pointer; justify-content: space-between; padding-right: 14px; }
.f-input.sel .val { flex: 1; display: flex; align-items: center; gap: 9px; }
/* chevron unified to the native-select caret: 14px glyph, sage --mh-ctrl-ico, 14px right
   inset, 180deg rotate on open with the shared combo easing (matches Case Manager / All Countries) */
.f-input.sel .tail { color: var(--mh-ctrl-ico); margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s cubic-bezier(.2,.7,.25,1); }
.f-input.sel .tail svg { display: block; }
.f-input.sel.open { border-color: var(--mh-ctrl-focus-border); background: var(--card); box-shadow: var(--mh-ctrl-focus-ring); }
.f-input.sel.open .tail { transform: rotate(180deg); }
.f-area { min-height: 96px; border: 1.5px solid transparent; border-radius: var(--r-md); background: var(--mh-ctrl-fill); padding: 13px 15px; font-size: 15px;
  line-height: 1.55; color: var(--ink); width: 100%; resize: vertical; font-family: inherit; font-weight: 500; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
.f-area:focus { border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-ctrl-focus-ring); }
/* MoneyInput rides the .f-input white wrapper now (see the .wzx control reset below);
   .f-money only needs to fill the wrapper. The $ lead is the value MoneyInput renders. */
.f-money { width: 100%; }
.f-dd { position: relative; }
.f-dd-back { position: fixed; inset: 0; z-index: 20; }
.f-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 6px; box-shadow: 0 18px 40px rgba(33,50,58,.16), 0 3px 8px rgba(33,50,58,.06); max-height: 288px; overflow: auto; }
.f-mitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14.5px;
  font-weight: 500; color: var(--ink); cursor: pointer; transition: background .12s; }
.f-mitem:hover { background: var(--paper-2); }
.f-mitem.on { color: #3f6b4d; font-weight: 600; background: var(--green-tint); }
.f-mi-l { display: flex; align-items: center; gap: 9px; }
.hs-dot, .f-mitem .hs-dot, .f-input .hs-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* ----------------------------------------------------------------------------
   PHASE B - single-border fix. The app-global control layer
   (.mh-app :is(input[type=...], select, textarea) in mh-theme.css) outspecifies
   the wizard's borderless-inner-input rules and paints a filled-sage control
   INSIDE each white wrapper, doubling the border + ring on focus. Re-scope the
   wizard's native inner controls ABOVE that layer (.mh-app .wzx ... = higher
   specificity) and strip their border / background / padding so the white
   wrapper owns the SINGLE border and the SINGLE focus ring. The .f-area textarea
   IS the control (no wrapper), so it keeps its own white border + pine ring, just
   re-asserted here to win over the global layer. No global CSS is modified.
   ---------------------------------------------------------------------------- */
.mh-app .wzx .f-input input,
.mh-app .wzx .hh-search input {
  height: auto; padding: 0; border: none; border-radius: 0;
  background: transparent; box-shadow: none;
  font-size: 15px; color: var(--ink);
}
.mh-app .wzx .f-input input:focus,
.mh-app .wzx .hh-search input:focus {
  border: none; background: transparent; box-shadow: none;
}
.mh-app .wzx .f-area {
  background: var(--mh-ctrl-fill); border: 1.5px solid transparent; box-shadow: none;
}
.mh-app .wzx .f-area:focus {
  background: var(--card); border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-ctrl-focus-ring);
}

/* household picker */
.hh-pick { display: flex; flex-direction: column; }
.hh-search { display: flex; align-items: center; gap: 11px; height: 48px; padding: 0 15px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--card); margin-bottom: 12px; transition: border-color .15s, box-shadow .15s; }
.hh-search:focus-within { border-color: var(--mh-ctrl-focus-border); box-shadow: var(--mh-ctrl-focus-ring); }
.hh-search .ico { color: var(--ink-faint); flex: 0 0 auto; }
.hh-search input { border: none; outline: none; flex: 1; font-size: 15px; font-family: inherit; font-weight: 500; color: var(--ink); background: transparent; min-width: 0; }
.hh-search input::placeholder { color: var(--ink-faint); font-weight: 400; }
.hh-list { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }
/* NO WHITE ROWS (CEO, Jul 29 2026). Each family is a CHOICE, so it wears the same inset cool
   field shell as the Subsidy Type control right below it - same fill, same 1px cool border,
   same inset shadow, same 12px radius. A white card on the cool canvas read as a different
   kind of thing entirely. Hover and selected reuse the field kit's own hover / focus tokens. */
.hh-opt { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 12px; cursor: pointer;
  background: var(--f-rest-bg); border: 1px solid var(--f-rest-bd); box-shadow: var(--f-rest-sh);
  transition: background var(--t), border-color var(--t), box-shadow var(--t); }
.hh-opt:hover { background: var(--f-hover-bg); }
.hh-opt.on { background: var(--f-focus-bg); border-color: var(--teal-deep); box-shadow: var(--f-focus-sh), 0 0 0 3px rgba(125,147,155,.20); }
.hh-opt.static { cursor: default; }
.hh-av { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; position: relative; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; }
.hh-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-tx { min-width: 0; }
.hh-opt .nm { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.hh-opt .meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.hh-opt .tick { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.hh-opt.on .tick { background: var(--teal-deep); border-color: var(--teal-deep); }
.hh-change { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--teal-700); background: transparent; padding: 8px 12px; border-radius: 9px; flex: 0 0 auto; }
.hh-change:hover { background: rgba(125,147,155,.14); color: var(--teal-deep); }
.hh-empty { padding: 20px 4px; font-size: 13.5px; color: var(--ink-faint); text-align: center; }

/* buttons */
.wzx .b { height: 48px; padding: 0 22px; border-radius: var(--r-md); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; transition: transform .12s, background .15s, border-color .15s; }
.wzx .b:active { transform: translateY(1px); }
.wzx .b:disabled { opacity: .6; cursor: default; }
.wzx .b-primary { background: var(--teal-deep); color: #fff; box-shadow: 0 8px 18px rgba(73,102,112,.26); }
.wzx .b-primary:hover { background: var(--teal-700); }
.wzx .b-create { background: var(--green); color: #fff; box-shadow: 0 8px 18px rgba(92,138,106,.3); }
.wzx .b-create:hover { background: #4f7a5d; }
.wzx .b-ghost { background: var(--card); border: 1.5px solid var(--line); color: var(--ink-soft); }
.wzx .b-ghost:hover { border-color: var(--teal); color: var(--teal-700); }

/* ---- ASK THE PROGRAM TEAM (Aug 11 2026) --------------------------------------
   The way out of the enrollment gate. Everything is scoped inside .wzx so it
   inherits the wizard's own tokens - and therefore flips with body.dark .wzx for
   free, the same way the plan steps do.

   The trigger sits directly under the gate's red sentence, so it reads as the
   answer to it rather than as another field. Clay, not green: it is the remedy for
   a problem, not a confirmation. */
.wzx .er-ask { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 9px 14px; border-radius: var(--r-md); border: 1.5px solid var(--clay);
  background: rgba(198,130,79,.08); color: var(--clay);
  font-size: 13px; font-weight: 700; }
.wzx .er-ask:hover { background: rgba(198,130,79,.16); }

/* Its own overlay ABOVE the wizard. Unlike the wizard beneath it this one DOES close
   on a backdrop click: it is a small ask, not a step, and nothing in it is work worth
   protecting. */
.wzx .er-overlay { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(23,32,38,.44); padding: 24px; }
.wzx .er-card { width: min(520px, 100%); max-height: calc(88 * var(--mh-vh)); overflow: auto;
  background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line);
  box-shadow: 0 40px 90px rgba(13,22,26,.42); }
.wzx .er-head { padding: 22px 24px 6px; }
.wzx .er-head h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.wzx .er-head p { margin: 6px 0 0; font-size: 13px; color: var(--ink-faint); line-height: 1.5; }
.wzx .er-body { padding: 16px 24px 4px; display: flex; flex-direction: column; gap: 4px; }
.wzx .er-err { margin: 4px 0 10px; padding: 10px 13px; border-radius: var(--r-md);
  background: rgba(176,49,47,.10); border: 1px solid rgba(176,49,47,.28);
  color: #B0312F; font-size: 12.5px; font-weight: 600; }
.wzx .er-foot { display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 24px 20px; border-top: 1px solid var(--line-soft); margin-top: 12px; }
.wzx .b-text { background: transparent; color: var(--ink-soft); padding: 0 8px; }
.wzx .b-text:hover { color: var(--teal-700); }

/* review summary */
.sumgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sumcard { border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.sumcard .sh { display: flex; align-items: center; gap: 9px; padding: 11px 15px; background: var(--paper); border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.sumcard .sh .edit { margin-left: auto; color: var(--ink-faint); font-size: 11px; cursor: pointer; }
.sumcard .sh .edit:hover { color: var(--teal-700); }
.srow { display: flex; justify-content: space-between; gap: 14px; padding: 10px 15px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.srow:last-child { border-bottom: none; }
.srow .k { color: var(--ink-faint); }
.srow .v { color: var(--ink); font-weight: 600; text-align: right; }

/* member zoom name (reuses global .plb lightbox) */
.plb-name { margin-top: 16px; text-align: center; color: #fff; font-size: 18px; font-weight: 700; }
.plb-ini { color: #fff; font-size: 96px; font-weight: 800; }

/* ============================================================================
   STEP 2b - Self-Sufficiency Plan steps (coverage, schedule, requirements,
   agreement). Built entirely on the wizard's own tokens (--card/--ink/--line/
   --teal-*/--green*), so the body.dark .wzx token remap flips them for free.
   ============================================================================ */
.plan-banner { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--r-md); background: var(--teal-tint); color: var(--teal-700); font-size: 13px; font-weight: 700; }
.plan-banner .pb-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* coverage toggles (details step) */
.cov-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cov { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink-soft); cursor: pointer; user-select: none; transition: border-color .14s, background .14s, color .14s; }
.cov input { position: absolute; opacity: 0; pointer-events: none; }
.cov .cov-bx { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .14s, border-color .14s; }
.cov.on { border-color: var(--teal-deep); background: var(--teal-tint); color: var(--ink); }
.cov.on .cov-bx { background: var(--teal-deep); border-color: var(--teal-deep); }
.cov.on .cov-bx::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }

/* monthly schedule grid */
.wsched { border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.ws-head, .ws-row { display: grid; grid-template-columns: minmax(160px, 1.5fr) 1fr 1fr minmax(130px, 1fr) 40px; gap: 12px; align-items: center; padding: 10px 14px; }
.ws-head { background: var(--paper); border-bottom: 1px solid var(--line-soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.ws-row { border-bottom: 1px solid var(--line-soft); }
.ws-row.ss { background: var(--green-tint); }
.ws-mn { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ws-mn .ws-idx { width: 24px; height: 24px; border-radius: 7px; background: var(--paper-2); color: var(--ink-soft); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ws-mn .dp { flex: 1; min-width: 0; }
.mh-app .wzx .ws-money { height: 42px; width: 100%; border: 1.5px solid transparent; border-radius: var(--r-sm); background: var(--mh-ctrl-fill); padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--ink); font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s; }
.mh-app .wzx .ws-money:focus { outline: none; border-color: var(--mh-ctrl-focus-border); background: var(--card); box-shadow: var(--mh-ctrl-focus-ring); }
.ws-mh { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-mh .ws-mh-amt { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ws-mh .ws-ss { font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--green); }
.ws-rm { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); }
.ws-rm:hover { color: var(--clay); background: var(--paper); }
.ws-add { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; width: 100%; justify-content: center; color: var(--teal-700); font-size: 13.5px; font-weight: 700; border-bottom: 1px solid var(--line-soft); }
.ws-add:hover { background: var(--paper); }
.ws-empty { padding: 18px 14px; text-align: center; color: var(--ink-faint); font-size: 13px; border-bottom: 1px solid var(--line-soft); }
.ws-foot { display: flex; justify-content: space-between; gap: 14px; padding: 11px 15px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); background: var(--paper); }

/* program requirements */
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.req-chip { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); cursor: pointer; user-select: none; transition: border-color .14s, background .14s; }
.req-chip input { position: absolute; opacity: 0; pointer-events: none; }
.req-chip .req-tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: transparent; transition: background .14s, border-color .14s, color .14s; }
.req-chip .req-nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.req-chip.on { border-color: var(--teal-deep); background: var(--teal-tint); }
.req-chip.on .req-tick { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; }
.req-rule { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: var(--r-md); background: var(--paper); color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.req-rule .ico { color: var(--clay); flex: 0 0 auto; margin-top: 1px; }

/* PROGRAMCOUNT-01: a requirement whose program type has no PROGRAM behind it can never
   be graded by the attendance engine, so it is marked on the chip itself and named again
   in a banner if it is actually chosen. Deliberately NOT the error red - nothing is wrong
   yet and it does not block; it is the amber the app already uses for "you should know
   this" (the same clay the rule note above uses for its icon). */
.req-chip .req-warn { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--clay);
  background: rgba(201, 123, 90, .12); border-radius: 999px; padding: 3px 8px; }
.req-chip.noprog { border-style: dashed; }
.req-chip.noprog.on { border-style: solid; }
.req-untracked { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px;
  border-radius: var(--r-md); background: rgba(201, 123, 90, .10);
  border: 1px solid rgba(201, 123, 90, .30); color: var(--ink-soft);
  font-size: 12.5px; line-height: 1.5; }
.req-untracked .ico { color: var(--clay); flex: 0 0 auto; margin-top: 1px; }
.req-untracked strong { color: var(--ink); }

/* agreement upload */
.ag-up { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink-soft); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .14s, color .14s; }
.ag-btn:hover { border-color: var(--teal-deep); color: var(--teal-700); }
.ag-btn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ag-file { font-size: 13px; color: var(--ink-soft); font-weight: 600; word-break: break-all; }

/* ---- DARK ---- */
body.dark .wzx { --ink:#e7ecea; --ink-soft:#aeb9b5; --ink-faint:#8a948f; --paper:#19211f; --paper-2:#222b28; --card:#1d2421; --line:#2e3a37; --line-soft:#27302d; --teal-700:#9fc0b8; }
body.dark .skin-solid { background: radial-gradient(70% 50% at 88% -8%, rgba(125,147,155,.14) 0%, transparent 55%), rgba(8,12,11,.62); }
body.dark .wcard { box-shadow: 0 30px 70px rgba(0,0,0,.5); }
body.dark .f-mitem.on { color: #9fe6b4; }
/* .sumcard .sh now uses --ink, which flips to light in dark automatically (no override needed). */
/* The selected row now takes --f-focus-bg, which body.dark .wzx .wright already remaps - so
   the old hardcoded dark tint is not just redundant, it would OUTRANK the token and repaint
   the row a different colour from every other lifted field around it. */


/* ============================================================================
   PHASE D - maker-checker EDIT additions that live OUTSIDE the subsidy surface
   (the change-history summary line and the subsidy rows in the shared approval
   inbox). The pieces that used to sit on #subDetail / #subForm moved into the
   DetailShell block below when the Detail was rebuilt on the shell.
   ============================================================================ */
/* change-history summary line (the global .sh-* card, shared with the status trail) */
.sh-change .sh-summary { font-size:13px; font-weight:600; color:#33403c; line-height:1.4; flex:1; min-width:0; }
body.dark .sh-change .sh-summary { color:#dbe3e0; }

/* subsidy rows in the shared approval inbox (reuses the .sai-* surface) */
.sai-row .sai-sub-summary { font-size:13px; font-weight:600; color:#33403c; line-height:1.45; margin-top:2px; }
body.dark .sai-row .sai-sub-summary { color:#dbe3e0; }
.sai-row .sai-sub-ref { font-family:var(--mono,"IBM Plex Mono",monospace); font-size:11.5px; color:#8a9794; }


/* ============================================================================
   SUBSIDY DETAIL ON THE APP-WIDE DETAIL SHELL (Jul 28 2026)
   ============================================================================
   REPLACES the whole #subDetail centered-modal block AND the .em-overlay edit
   modal. The Subsidy detail is now a DetailShell host like Program, Student,
   Client and Household, so everything the shell already owns - the pine rail,
   the tab pill, the cards (.pd-card / .pd-ch / .kv), the list rows (.dv-row),
   the footer, dark mode, AND the whole MH default field kit (.field / .icf /
   masked dates / type-to-search .selpop with its JS placer) - comes from
   detail-view.css for free. Nothing in that kit is duplicated here.

   What IS here is only what is genuinely Housing-Subsidy-shaped: the four money
   cards, the month stepper, the milestone schedule, the plan step-down table,
   the participation panel, the payment rows and the plan edit controls.

   TWO RULES THIS BLOCK OBEYS
   1. Everything is scoped #mhDetail, and every GENERIC class name the old block
      used (.panel, .metric, .metrics, .row2, .timeline, .note-txt) was renamed to
      a .sb- prefix or folded into the shell's own .pd-card / .pd-ch. Inside
      #mhDetail a name like .panel would collide with the shell's own vocabulary -
      the same trap that ate the Program roster rows (Bootstrap's .row).
   2. Colours are the SHELL's tokens, not hardcoded hex, so dark mode is free.
      The old block carried ~40 lines of body.dark overrides; they are gone.
      The only literal colours left are the SEMANTIC state accents (amber for the
      current month, clay/red for a paused plan) which must not flip with theme.
   ============================================================================ */

/* ---- the four money cards (was .metrics.metrics-4) ---- */
#mhDetail .sb-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
#mhDetail .sb-metric{background:var(--f-focus-bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 17px;min-width:0}
#mhDetail .sb-metric .k{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
#mhDetail .sb-metric .k svg{width:15px;height:15px;flex:none;stroke:var(--brand-600);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sb-metric .v{font-family:var(--font-mono);font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1);margin-top:9px;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#mhDetail .sb-metric .h{font-size:12px;font-weight:500;color:var(--ink-3);margin-top:5px}
/* Remaining is the DARK card - the one number that says what is still owed. */
#mhDetail .sb-metric.dark{background:linear-gradient(140deg,#2E444B,#21323A);border-color:transparent}
#mhDetail .sb-metric.dark .k{color:rgba(255,255,255,.66)}
#mhDetail .sb-metric.dark .k svg{stroke:rgba(255,255,255,.8)}
#mhDetail .sb-metric.dark .v{color:#fff}
#mhDetail .sb-metric.dark .h{color:rgba(255,255,255,.62)}
body.dark #mhDetail .sb-metric.dark{background:linear-gradient(140deg,#0f1714,#0a110e)}
@container (max-width: 900px){
  #mhDetail .sb-metrics{grid-template-columns:repeat(2,1fr)}
}

/* ---- the card grid the tabs lay out in ---- */
#mhDetail .sb-grid{align-items:start}

/* ---- THE EDIT FORM: centred, and wide enough for the schedule table ----
   The shell's default 920px column suits a two-column personal record. This form carries a
   five-column month-by-month table, so at 920px it was both cramped AND stranded against the
   left edge of a much wider pane. Opted into per-host via DetailShell.EditFormClass - the
   other four hosts keep the default exactly. */
#mhDetail .dv-form.sb-form{max-width:1120px;margin-inline:auto;width:100%}

/* ---- a GROUP heading inside the form (Monthly Schedule / Program Requirements /
   Agreement). Deliberately the same size, weight, letter-spacing and glyph treatment as the
   read view's `.pd-ch`, because it names the same thing. An 11.5px field label above a whole
   table read as a caption. ---- */
#mhDetail .sb-fhead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
#mhDetail .sb-fhead h4{margin:0;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
#mhDetail .sb-fhead svg{width:18px;height:18px;flex:none;stroke:var(--brand-600);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sb-fhead .tag{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand-600);background:var(--brand-tint);border-radius:999px;padding:4px 11px;white-space:nowrap}
/* The heading owns the gap to what follows, so the field wrapper must not add its own. */
#mhDetail .field:has(> .sb-fhead){gap:10px}

/* A right-aligned control in a card heading (Record Payment). The shell's .pd-ch
   already pushes .tag to the right; a BUTTON needs the same treatment. */
#mhDetail .pd-ch .sb-chact{margin-left:auto}

/* ---- key/value rows (Property, Household, Agreement) ---- */
#mhDetail .pl-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
#mhDetail .pl-row:last-child{border-bottom:none}
#mhDetail .pl-row .k{font-size:12.5px;font-weight:600;color:var(--ink-3);flex:none}
#mhDetail .pl-row .v{font-weight:700;color:var(--ink-1);text-align:right;min-width:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
#mhDetail .pl-row .v.off{color:var(--ink-4);font-weight:600}
#mhDetail .sb-flag{width:20px;height:14px;border-radius:2px;object-fit:cover;flex:none;box-shadow:0 0 0 1px var(--f-rest-bd)}

/* ---- free text (case note, empty states) ---- */
#mhDetail .sb-note{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;white-space:pre-wrap;text-wrap:pretty}

/* ---- RAIL notes: the two hero badges that are STATE, not identity ---- */
#mhDetail .sb-rnote{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:var(--r-md);
  background:rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);margin-bottom:9px}
#mhDetail .sb-rnote:last-child{margin-bottom:0}
#mhDetail .sb-rnote .ic{width:17px;height:17px;flex:none;margin-top:1px;color:#F0C879}
#mhDetail .sb-rnote .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sb-rnote .t{font-size:12.5px;font-weight:800;color:#fff;line-height:1.25}
#mhDetail .sb-rnote .s{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.68);margin-top:3px;line-height:1.35}
#mhDetail .sb-rnote.part .ic{color:var(--c,#D89B3D)}

/* ---- TERM: the month stepper (one node per term month) ---- */
#mhDetail .ms-wrap{padding:0 24px}
#mhDetail .ms-track{position:relative;height:8px;border-radius:8px;background:var(--f-rest-bg);box-shadow:var(--f-rest-sh);margin:34px 0 48px}
#mhDetail .ms-fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,var(--brand-600),var(--brand))}
#mhDetail .ms-node{position:absolute;top:50%;transform:translate(-50%,-50%)}
#mhDetail .ms-dot{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;box-sizing:border-box;
  background:var(--f-focus-bg);border:3px solid var(--f-rest-bd);color:#fff;transition:.15s}
#mhDetail .ms-node.done .ms-dot{background:var(--brand);border-color:var(--brand)}
#mhDetail .ms-node.done .ms-dot svg{width:11px;height:11px;stroke:#fff;fill:none}
#mhDetail .ms-node.current .ms-dot{width:20px;height:20px;background:#D89B3D;border-color:#D89B3D;box-shadow:0 0 0 5px rgba(216,155,61,.22)}
#mhDetail .ms-lab{position:absolute;left:50%;transform:translateX(-50%);top:26px;white-space:nowrap;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
#mhDetail .ms-node.current .ms-lab{color:#B07C22}
body.dark #mhDetail .ms-node.current .ms-lab{color:#E7B65C}
#mhDetail .ms-node.first .ms-lab{left:0;transform:none;text-align:left}
#mhDetail .ms-node.last .ms-lab{left:auto;right:0;transform:none;text-align:right}
#mhDetail .ms-end{display:block;font-size:10.5px;font-weight:600;color:var(--ink-4);margin-top:2px}

/* Entrance travel + the current-month pulse (Polish 4, carried across verbatim).
   Each keyframe defines only the START; the implied 100% uses the element's own
   inline width / left, so the marker lands exactly on its computed position with
   zero position maths in CSS. */
@keyframes msFillIn{from{width:0}}
@keyframes msTravel{from{left:0}}
@keyframes msPulse{
  0%{box-shadow:0 0 0 4px rgba(216,155,61,.30)}
  50%{box-shadow:0 0 0 11px rgba(216,155,61,0)}
  100%{box-shadow:0 0 0 4px rgba(216,155,61,.30)}
}
#mhDetail .ms-fill{animation:msFillIn .75s ease-out}
#mhDetail .ms-node.current{animation:msTravel .75s ease-out}
#mhDetail .ms-node.current .ms-dot{animation:msPulse 1.9s ease-in-out .75s infinite}
@media (prefers-reduced-motion: reduce){
  #mhDetail .ms-fill,
  #mhDetail .ms-node.current,
  #mhDetail .ms-node.current .ms-dot{animation:none}
}

/* ---- SCHEDULE: the vertical milestone stepper ---- */
#mhDetail .sched-track{display:flex;flex-direction:column}
#mhDetail .sched-step{position:relative;display:flex;align-items:center;gap:14px;padding:11px 0}
#mhDetail .sched-step::before{content:"";position:absolute;left:18px;top:36px;bottom:-11px;width:2px;background:var(--line)}
#mhDetail .sched-step:last-child::before{display:none}
#mhDetail .sched-step.done::before{background:var(--brand);opacity:.45}
#mhDetail .sched-dot{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--f-rest-bg);color:var(--ink-4);border:1px solid var(--f-rest-bd);position:relative;z-index:1}
#mhDetail .sched-dot svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sched-step.done .sched-dot{background:var(--brand);color:#fff;border-color:var(--brand)}
#mhDetail .sched-step.next .sched-dot{background:var(--f-focus-bg);color:var(--brand-600);border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
#mhDetail .sched-t{flex:1;min-width:0}
#mhDetail .sched-t .k{font-size:14px;font-weight:700;color:var(--ink-1)}
#mhDetail .sched-t .d{font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:2px}
#mhDetail .sched-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;color:var(--ink-4);background:var(--f-rest-bg)}
#mhDetail .sched-step.done .sched-tag,
#mhDetail .sched-step.next .sched-tag{color:var(--brand-600);background:var(--brand-tint)}

/* ---- PAYMENTS ---- */
#mhDetail .sb-payform{background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);border-radius:var(--r-lg);padding:18px 19px;margin-bottom:16px}
#mhDetail .sb-payacts{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
#mhDetail .sb-paylist .dv-row{gap:14px}
#mhDetail .sb-paylist .dv-row.void{opacity:.5}
#mhDetail .pr-date{flex:none;min-width:120px}
#mhDetail .pr-date b{display:block;font-size:13.5px;font-weight:700;color:var(--ink-1)}
#mhDetail .pr-date span{display:block;font-family:var(--font-mono);font-size:11px;color:var(--ink-4);margin-top:2px}
#mhDetail .pr-amt{flex:none;font-family:var(--font-mono);font-size:16px;font-weight:800;color:var(--ink-1);font-variant-numeric:tabular-nums}
#mhDetail .pr-mid{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3);justify-content:flex-end}
#mhDetail .pr-ref{font-family:var(--font-mono);font-size:11px;color:var(--ink-4)}
#mhDetail .pr-end{display:flex;align-items:center;gap:8px;flex:none}
#mhDetail .pr-link{width:32px;height:32px;flex:none;border:none;border-radius:9px;background:var(--f-rest-bg);color:var(--brand-600);display:grid;place-items:center;cursor:pointer;transition:background var(--t),color var(--t)}
#mhDetail .pr-link:hover{background:var(--brand);color:#fff}
#mhDetail .pr-link svg{width:15px;height:15px}
#mhDetail .pr-void{border:1px solid var(--danger);background:none;color:var(--danger);border-radius:9px;padding:6px 11px;
  font-family:var(--font-sans);font-size:12px;font-weight:700;cursor:pointer;transition:background var(--t),color var(--t)}
#mhDetail .pr-void:hover{background:var(--danger);color:#fff}
#mhDetail .pr-voidtag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--danger)}

/* ---- HISTORY ----
   The per-host bare-card override that used to live here is GONE: `.sh-card` is flat for
   everyone now (statusmenu.css), so Household, Client and Subsidy show the same component the
   same way instead of one of them carrying a local exception. */

/* ============================================================================
   SELF-SUFFICIENCY PLAN (PlanTypeID == 2 only). Standard subsidies never render
   any of this. Same rule as above: shell tokens, so dark mode is free.
   ============================================================================ */

/* coverage chips in the Property card */
#mhDetail .plan-cov{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:var(--brand-600);background:var(--brand-tint)}

/* monthly step-down schedule (read-only, from the PERSISTED computed columns).
   NO white surface: the card behind it is `.pd-card.bare` and the rows are transparent, so
   the whole block sits on the ONE cool canvas the app uses everywhere. Only the head and
   foot take the soft field fill, which is what separates them from the data. */
#mhDetail .plan-sched{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:none}
#mhDetail .pms-head,
#mhDetail .pms-row{display:grid;grid-template-columns:minmax(150px,1.4fr) 1fr 1fr minmax(130px,1.2fr);gap:12px;align-items:center;padding:11px 14px}
#mhDetail .pms-head{background:var(--f-rest-bg);border-bottom:1px solid var(--line);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
#mhDetail .pms-row{border-bottom:1px solid var(--line);font-size:14px}
#mhDetail .pms-row:last-of-type{border-bottom:none}
#mhDetail .pms-row.ss{background:var(--brand-tint)}
#mhDetail .pms-mn{display:flex;align-items:center;gap:9px;min-width:0}
#mhDetail .pms-idx{width:24px;height:24px;flex:none;border-radius:7px;background:var(--f-rest-bg);color:var(--ink-2);
  font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
#mhDetail .pms-dt{font-weight:700;color:var(--ink-1)}
#mhDetail .pms-amt{font-family:var(--font-mono);font-weight:700;color:var(--ink-1);font-variant-numeric:tabular-nums}
#mhDetail .pms-mh{display:flex;flex-direction:column;gap:2px;min-width:0}
#mhDetail .pms-mh-amt{font-family:var(--font-mono);font-size:15px;font-weight:800;color:var(--brand-600);font-variant-numeric:tabular-nums}
#mhDetail .pms-ss{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--brand-600)}
#mhDetail .pms-foot{display:flex;justify-content:space-between;gap:14px;padding:11px 15px;font-size:12.5px;font-weight:700;
  color:var(--ink-2);background:var(--f-rest-bg);border-top:1px solid var(--line)}

/* program requirement chips (read) */
#mhDetail .plan-chips{display:flex;flex-wrap:wrap;gap:8px}
#mhDetail .plan-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--brand-600);background:var(--brand-tint);border:1px solid var(--brand-tint-2)}
#mhDetail .plan-chip svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* agreement signed dates + the view-form button */
#mhDetail .plan-sd{display:inline-block;font-size:12px;font-weight:600;color:var(--ink-4)}
#mhDetail .plan-doc{display:inline-flex;align-items:center;gap:7px;border:none;background:var(--f-rest-bg);color:var(--brand-600);
  border-radius:9px;padding:7px 12px;font-family:var(--font-sans);font-size:13px;font-weight:700;cursor:pointer;transition:background var(--t),color var(--t)}
#mhDetail .plan-doc:hover{background:var(--brand);color:#fff}
#mhDetail .plan-doc svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* participation panel - an accent bar keyed to the state */
#mhDetail .plan-part{border-left:4px solid var(--line)}
#mhDetail .plan-part.warn{border-left-color:#D89B3D}
#mhDetail .plan-part.risk{border-left-color:#C97B5A}
#mhDetail .plan-part.paused{border-left-color:#B0463C}
#mhDetail .plan-part.reinstate{border-left-color:#6E8CA0}
#mhDetail .plan-part .pp-pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:800;color:var(--c,#8A8B83);background:color-mix(in srgb, var(--c,#8A8B83) 14%, transparent)}
#mhDetail .plan-part .pp-dot{width:7px;height:7px;border-radius:50%;background:var(--c,#8A8B83)}
#mhDetail .pp-msg{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
#mhDetail .pp-meta{display:flex;flex-wrap:wrap;gap:8px}
#mhDetail .pp-tag{font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--f-rest-bg);border-radius:999px;padding:4px 11px}
#mhDetail .pp-tag.miss{color:#9A4A34;background:rgba(201,123,90,.15)}
#mhDetail .pp-tag.good{color:var(--brand-600);background:var(--brand-tint)}
body.dark #mhDetail .pp-tag.miss{color:#E0A892;background:rgba(201,123,90,.20)}
#mhDetail .pp-acts{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
#mhDetail .pp-note{font-size:12.5px;font-weight:500;color:var(--ink-3)}

/* SUBSTD02 (1 Oct 2026): the old EDIT-ENGINE CONTROLS block (the .icf file picker, the coverage toggle pills, the
   requirement chips with their .sb-tick box, the .sb-eps schedule table, the .sb-gate note) was deleted with the in-pane
   stepper it styled - the record edits in place on Mint tiles now (SUBSTD02 at the end of this file). Its .sb-tick rule
   would also have shrunk the new tick TILE to 20px. */

/* ============================================================================
   HOUSING SUBSIDY WIZARD - THE MH DEFAULT FIELD STANDARD (Jul 28 2026)
   ============================================================================
   The wizard kept its own "filled-sage soft control" (48px, --mh-ctrl-fill,
   1.5px transparent border) from Phase B. Every other wizard has since moved to
   the inset cool field - see #pgWiz / #enrollWiz / #clWiz - so this file was the
   last place in the app where a form still measured and coloured differently.

   What lands here, all four parts of the standard:
     1. SHELL    - .icf geometry: 50px, #DFE4EA, 12px radius, 1px cool border,
                   inset shadow, 11px gap, 0 15px padding, 19px leading icon,
                   lift-to-white on hover/focus/open.
     2. DATES    - MhDatePicker in Masked MM/DD/YYYY mode, themed to the shell,
                   no chevron.
     3. DROPDOWN - WizardSelect's closed face IS the shell; opening turns the face
                   into a search input over the full list (see WizardSelect.razor).
     4. PARITY   - dark tokens, and the required/error design that OUTRANKS
                   hover, focus and open.

   Everything is scoped under .wzx (the wizard root), so nothing outside the
   wizard can be reached. The rules deliberately sit at the END of this file so
   they win over the Phase B .f-input block above at equal specificity.
   ========================================================================== */

.wzx {
  /* the cool canvas + inset-field tokens, copied verbatim from #pgWiz so the two
     wizards are one design rather than two that resemble each other */
  --bg-canvas:#E8EBF0;
  --ink-1:#1C2733; --ink-2:#3B474B; --ink-3:#677579; --ink-4:#9AA7B3;
  --brand-600:#375A50; --brand-tint:rgba(46,74,67,.12);
  --danger:#C0473F; --danger-bg:#F7E3E1; --danger-ink:#8C312B;
  --f-rest-bg:#DFE4EA; --f-rest-bd:rgba(40,60,80,.10); --f-rest-sh:inset 0 1px 2px rgba(40,60,80,.10);
  --f-hover-bg:#E4E8ED;
  --f-focus-bg:#FFFFFF; --f-focus-bd:rgba(40,60,80,.16); --f-focus-sh:0 10px 28px rgba(40,60,80,.14);
  --t:.2s cubic-bezier(.2,.7,.25,1);
}

/* ---- the form column moves onto the ONE cool canvas (the rail stays pine) ---- */
.wzx .wright { background: var(--bg-canvas); }
.wzx .wr-bar { background: var(--f-rest-bg); }

/* ---- 1. THE SHELL ---------------------------------------------------------- */
/* min-width:0 is LOAD-BEARING on a grid child: the shell is wider than the old flat
   input, so without it a 2-up row refuses to shrink and pushes a horizontal
   scrollbar onto the whole pane. */
.wzx .f-field { min-width: 0; }
.wzx .f-label { color: var(--ink-3); font-size: 11.5px; letter-spacing: .05em; font-weight: 700; }
.wzx .f-label .req { color: var(--danger); }
.wzx .f-hint { color: var(--ink-3); }

.wzx .f-input {
  position: relative; display: flex; align-items: center; gap: 11px;
  min-height: 50px; height: auto; padding: 0 15px;
  background: var(--f-rest-bg); border: 1px solid var(--f-rest-bd);
  box-shadow: var(--f-rest-sh); border-radius: 12px;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.wzx .f-input:hover:not(:focus-within):not(.open) { background: var(--f-hover-bg); }
.wzx .f-input:focus-within,
.wzx .f-input.sel.open { background: var(--f-focus-bg); border-color: var(--f-focus-bd); box-shadow: var(--f-focus-sh); }
.wzx .f-input input { font-size: 15px; font-weight: 500; color: var(--ink-1); }
.wzx .f-input input::placeholder { color: var(--ink-4); font-weight: 400; }
/* the leading glyph is the standard's 19px, not the old 17px inline sizes */
.wzx .f-input .lead { width: 19px; height: 19px; color: var(--ink-3); display: grid; place-items: center; }
.wzx .f-input .lead .ico,
.wzx .f-input .lead svg { width: 100% !important; height: 100% !important; }
.wzx .f-input:focus-within .lead,
.wzx .f-input.sel.open .lead { color: var(--brand-600); }
.wzx .f-input.sel .tail { color: var(--ink-3); }

.wzx .f-area {
  min-height: 104px; padding: 13px 15px; border-radius: 12px;
  background: var(--f-rest-bg); border: 1px solid var(--f-rest-bd);
  box-shadow: var(--f-rest-sh); color: var(--ink-1); font-size: 15px; font-weight: 500;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.wzx .f-area:hover:not(:focus) { background: var(--f-hover-bg); }
.wzx .f-area:focus { background: var(--f-focus-bg); border-color: var(--f-focus-bd); box-shadow: var(--f-focus-sh); }
.wzx .f-area::placeholder { color: var(--ink-4); font-weight: 400; }

/* the app-global control layer paints a filled control INSIDE the shell; kill it in
   every state so the .f-input shell owns the single border and the single ring */
.mh-app .wzx .f-input :is(input, select, textarea),
.mh-app .wzx .f-input :is(input, select, textarea):hover,
.mh-app .wzx .f-input :is(input, select, textarea):focus,
.mh-app .wzx .f-input :is(input, select, textarea):focus-visible {
  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; color: var(--ink-1);
}

/* ---- 2. DATES : MhDatePicker themed to the same shell ---------------------- */
.wzx .dp { width: 100%; }
.wzx .dp .dp-field {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 50px; height: 50px; padding: 0 15px !important;
  background: var(--f-rest-bg) !important; border: 1px solid var(--f-rest-bd) !important;
  box-shadow: var(--f-rest-sh) !important; border-radius: 12px !important;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.wzx .dp .dp-field:hover { background: var(--f-hover-bg) !important; }
.wzx .dp.open .dp-field,
.wzx .dp .dp-field:focus,
.wzx .dp .dp-field:focus-within { background: var(--f-focus-bg) !important; border-color: var(--f-focus-bd) !important; box-shadow: var(--f-focus-sh) !important; }
.wzx .dp .dpf-ico { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.wzx .dp .dpf-val { flex: 1; min-width: 0; text-align: left; font-size: 15px; font-weight: 500; color: var(--ink-1); }
.wzx .dp .dpf-val.empty { color: var(--ink-4); font-weight: 400; }
.mh-app .wzx .dp .dpf-mask,
.mh-app .wzx .dp .dpf-mask:hover,
.mh-app .wzx .dp .dpf-mask:focus {
  flex: 1; min-width: 0; text-align: left; font-size: 15px; font-weight: 500;
  color: var(--ink-1); font-variant-numeric: tabular-nums;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; height: auto !important; min-height: 0 !important; outline: none !important;
}
/* NO chevron on a date field - the standard is explicit about this */
.wzx .dp .dpf-chev { display: none; }

/* ---- 4. REQUIRED / ERROR - and it OUTRANKS hover, focus and open ----------- */
/* Specificity is the whole story: .f-input:hover:not(:focus-within) and
   .f-input.sel.open both beat a plain .f-field.err .f-input, so the error selectors
   carry the same pseudo-classes and win outright. transition:none makes the wash
   SNAP in - a transitioned longhand keeps its old value when Blazor re-renders the
   field with .err in the same frame, and the red never lands. */
.wzx .f-field.err .f-input,
.wzx .f-field.err .f-input:hover,
.wzx .f-field.err .f-input:hover:not(:focus-within),
.wzx .f-field.err .f-input:focus-within,
.wzx .f-field.err .f-input.sel.open,
.wzx .f-field.err .f-area,
.wzx .f-field.err .f-area:hover,
.wzx .f-field.err .f-area:focus {
  border-color: var(--danger); background: var(--danger-bg); transition: none;
}
.wzx .f-field.err .f-input:focus-within,
.wzx .f-field.err .f-area:focus { box-shadow: 0 0 0 3px rgba(192,71,63,.24); }
.wzx .f-field.err .f-label,
.wzx .f-field.err .f-label .req { color: var(--danger-ink); }
/* transition:none is LOAD-BEARING here too, exactly as it is on the .f-input above.
   .wzx .dp .dp-field transitions background and border-color; when Blazor re-renders the
   field with .err in the SAME frame the transitioned longhands keep their OLD computed
   values and the red wash never lands - measured: the label and the message went red
   while the date box stayed #DFE4EA, and even the !important background could not move
   it until the transition was removed. */
.wzx .f-field.err .dp .dp-field { border-color: var(--danger) !important; background: var(--danger-bg) !important; box-shadow: none !important; transition: none !important; }
/* a checkbox row / picker list is not a shell - give it the same wash so
   "choose at least one" reads as the same kind of error as an empty box */
.wzx .f-field.err .cov-row,
.wzx .f-field.err .hh-pick { border-radius: 12px; outline: 1px solid var(--danger); outline-offset: 4px; background: var(--danger-bg); }
.wzx .f-msg { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; font-size: 12.5px; font-weight: 650; line-height: 1.35; color: var(--danger-ink); }
.wzx .f-msg svg { width: 14px; height: 14px; flex: none; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.wzx .f-field:not(.err) .f-msg { display: none; }
/* NO `both` fill-mode: a retained transform makes .f-field a permanent stacking
   context and the open dropdown inside it would rank only within that field, so the
   NEXT field paints straight over the option list. Same trap as #pgWiz. */
.wzx .shake { animation: subShk .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes subShk { 10%,90%{transform:translateX(-1.5px)} 20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} }

/* the field holding an OPEN list must out-rank the fields after it */
.wzx .f-field:has(.f-input.sel.open) { position: relative; z-index: 5; }

/* ---- 3. the type-to-search menu, on the shell's own tokens ----------------- */
.wzx .f-menu { background: var(--f-focus-bg); border: 1px solid var(--f-focus-bd); border-radius: 12px;
  box-shadow: var(--f-focus-sh), 0 22px 48px -18px rgba(28,39,51,.34); padding: 7px; }
.wzx .f-mitem { font-size: 14.5px; font-weight: 600; color: var(--ink-1); padding: 11px 14px; border-radius: 9px; }
.wzx .f-mitem:hover { background: var(--f-rest-bg); }
.wzx .f-mitem.on { background: var(--brand-tint); color: var(--brand-600); font-weight: 700; }
.wzx .f-mempty { padding: 14px; font-size: 13.5px; color: var(--ink-3); }
/* the closed face becomes a real input when the list opens */
.mh-app .wzx .f-input.sel .f-search,
.mh-app .wzx .f-input.sel .f-search:hover,
.mh-app .wzx .f-input.sel .f-search:focus {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--ink-1);
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; height: auto !important; min-height: 0 !important; outline: none !important;
}
.wzx .f-input.sel .f-search::placeholder { color: var(--ink-4); font-weight: 400; }

/* ---- cards sitting on the new canvas -------------------------------------- */
/* LAW: moving a pane off white breaks every card tuned against white. These were
   var(--card) #FFF on a #FFF pane; on #E8EBF0 they need the hairline to read. */
.wzx .sumcard,
.wzx .wsched,
.wzx .req-grid { background: var(--f-focus-bg); border: 1px solid var(--f-rest-bd); border-radius: 12px; }
/* .hh-list is NOT in that list any more. Each family row is now its own inset field, so the
   list is just a scroll area holding them - a white panel behind them showed through every
   10px gap, which is the white still visible after the rows themselves were de-whited.
   De-whiting a set of items means de-whiting whatever they sit ON as well. */
.wzx .hh-list { background: none; border: none; }
.wzx .hh-search { display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 0 15px;
  border-radius: 12px; border: 1px solid var(--f-rest-bd); box-shadow: var(--f-rest-sh); background: var(--f-rest-bg); }
.wzx .hh-search:focus-within { background: var(--f-focus-bg); border-color: var(--f-focus-bd); box-shadow: var(--f-focus-sh); }
.wzx .hh-search .ico { width: 19px; height: 19px; color: var(--ink-3); }
.wzx .req-grid { padding: 12px; }

/* ---- DARK : tokens on the FORM COLUMN only, so the pine rail is untouched --- */
body.dark .wzx .wright {
  --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);
  --danger:#C0473F; --danger-bg:rgba(192,71,63,.18); --danger-ink:#F0A9A3;
  --f-rest-bg:#121A20; --f-rest-bd:rgba(180,210,235,.10); --f-rest-sh:inset 0 1px 2px rgba(0,0,0,.4);
  --f-hover-bg:#16202A;
  --f-focus-bg:#222E38; --f-focus-bd:rgba(150,190,225,.28); --f-focus-sh:0 12px 30px rgba(0,0,0,.5);
}

/* THE 50 KB RULE, reported where it happened (CEO, Jul 30 2026). The subsidy uploads were
   compressing silently - the same helper as the client documents, but with nothing on screen
   to show for it, so the feature was invisible on this screen. */
.mh-app .sb-shrunk,.mh-app .ag-shrunk{display:block;margin-top:6px;font-size:11.5px;font-weight:700;
  color:#3D655D;background:rgba(78,124,114,.10);border-radius:8px;padding:6px 9px;line-height:1.35;}

/* =====================================================================================================================
   SUBSTD01 - THE HOUSING SUBSIDY WIZARD ON THE STANDARD.  1 October 2026.
   Owner: "deploy all our new standard there and wizard must be grouped like the Client Wizard".
   WHAT IS SHARED, NOT COPIED (each block widened to :is(#subWiz,#volWiz) in its own file):
     section cards + heads + meters   PLANSHEET02 (mh-eventsheet.css) = the New Client wizard's page-1 accordion
     every field                      the Mint tile (.mint-kit, mh-mintkit.css); search = the global search bar
     review cards                     PGREV18 (program-wizards.css) = the client wizard's step-4 cards
     footer pair                      FOOTBTN18 (enroll-wizard.css) - also the "Ask the Program team" card (#subWizAsk)
   WHAT IS HERE is only what this wizard has and the others do not, each put on an object the standard has:
     the window               PGBG18's client values: radius 26, the white rim, the pine-tinted float, the green-grey backdrop
     the household list       a row = a field tile; the chosen family = the focused tile (pine ring)
     a tick choice            a tile carrying THE STANDARD TICK (TICK18); unticked = hollow dot (TICKDOT18)
     a schedule month         one row of tiles: Month / Total rent / Household pays / Matthew House (read)
     the signed form          a tile whose value line is a mini glass Upload button + the file name
     notes / warnings         a tile on the glass (PGREV18's note), amber when careful
   Everything is :is(#subWiz,#volWiz); the old .f-* / .wsched / .req-chip / .cov rules above are no longer rendered.
   ===================================================================================================================== */
.subwiz-host .wzx.skin-solid{background:rgba(33,42,38,.5)}
:is(#subWiz,#volWiz).wcard{border-radius:26px;border:1px solid rgba(255,255,255,.6);box-shadow:0 30px 80px rgba(33,58,51,.26)}
:is(#subWiz,#volWiz) .wr-body{padding:18px 40px 10px;overflow-x:hidden}
:is(#subWiz,#volWiz) .wr-foot{padding:18px 40px 24px;border-top:1px solid #D9DFE7}
body.dark :is(#subWiz,#volWiz) .wr-foot{border-top-color:rgb(51,64,58)}
:is(#subWiz,#volWiz) .wr-foot .sp{flex:1}
:is(#subWiz,#volWiz) .wr-body > .ecs-sec{margin:0 0 12px}

/* the section body is a column of rows, 12px apart (the client wizard's tile gap) */
:is(#subWiz,#volWiz).wcard .wr-body .ecs-secg{display:flex;flex-direction:column;gap:12px}
:is(#subWiz,#volWiz).wcard .wr-body .ecs-secg > *{margin:0}
:is(#subWiz,#volWiz) .sw-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
:is(#subWiz,#volWiz) .sw-cell{display:flex;flex-direction:column;min-width:0}
:is(#subWiz,#volWiz) .sw-cap{padding:0 4px;font-size:12px;font-weight:600;line-height:1.45;color:#7A8A84}
body.dark :is(#subWiz,#volWiz) .sw-cap{color:#8C9AA5}
:is(#subWiz,#volWiz) .f-msg{margin:7px 4px 0}
:is(#subWiz,#volWiz) .sw-err{
  margin:2px 0 12px;padding:11px 14px;border-radius:14px;font-size:13px;font-weight:650;line-height:1.4;
  background:rgba(192,71,63,.08);border:1px solid rgba(192,71,63,.32);color:#A5433A;
}
body.dark :is(#subWiz,#volWiz) .sw-err{background:rgba(192,71,63,.14);border-color:rgba(240,169,163,.35);color:#F0A9A3}

/* ---- the date tile: the old .wzx shell paints .dp-field as a 50px well with !important, so the strip is too ---- */
:is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dp-field,
:is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dp-field:hover,
:is(#subWiz,#volWiz) .mint-w .mh-dp-tile.open .dp-field,
:is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dp-field:focus,
:is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dp-field:focus-within{
  min-height:24px !important;height:auto !important;padding:0 !important;gap:8px;
  background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;transition:none !important;
}
:is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dpf-ico{display:none}
.mh-app :is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dpf-mask,
.mh-app :is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dpf-mask:focus{
  font-family:var(--font-sans,inherit);font-size:16px !important;font-weight:650 !important;line-height:24px;height:24px !important;color:#1C2A25;
}
body.dark .mh-app :is(#subWiz,#volWiz) .mint-w .mh-dp-tile .dpf-mask{color:#EAF0F4}
/* A FOCUSED TILE LIFTS (a transform) AND A TRANSFORM IS A CONTAINING BLOCK FOR position:fixed. The calendar is fixed and
   placed once, on open, in viewport coordinates (mhdatepicker.js -> MHpop.place); when the lift lands a beat AFTER the
   placement (the calendar opened without focus, then focus moved inside) the calendar resolves against the TILE and
   lands one tile-offset away - measured 2703px left on a 2286px window. A tile holding an open calendar does not lift,
   so the calendar always resolves against the window. */
:is(#subWiz,#volWiz) .mint-w.ed:has(.dp.open){z-index:131;transform:none}

/* ---- a locked tile (MH Identity Number) reads as information, not a broken field ---- */
:is(#subWiz,#volWiz) .mint-w.ed.is-disabled{cursor:not-allowed}
:is(#subWiz,#volWiz) .mint-w.ed.is-disabled .mint-in{cursor:not-allowed;-webkit-text-fill-color:currentColor}

/* ---- the household search = the global search bar; the list rows = field tiles ---- */
:is(#subWiz,#volWiz) .sw-search{margin:0}
:is(#subWiz,#volWiz) .sw-hhlist{display:flex;flex-direction:column;gap:10px;max-height:308px;overflow-y:auto;padding:4px 6px 8px 2px;margin:0 -6px 0 -2px}
:is(#subWiz,#volWiz) .sw-hhlist .hh-opt{
  position:relative;gap:13px;padding:11px 14px;border-radius:16px;cursor:pointer;
  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 .15s ease,border-color .15s ease;
}
:is(#subWiz,#volWiz) .sw-hhlist .hh-opt:not(.static):hover{
  background:rgba(var(--tg-rgb,255,255,255),.85);transform:translateY(-2px);
  box-shadow:0 4px 10px -6px rgba(30,55,48,.16),0 18px 38px -18px rgba(30,55,48,.30);
}
:is(#subWiz,#volWiz) .sw-hhlist .hh-opt:focus-visible{outline:none;border-color:rgba(47,107,87,.55);box-shadow:0 0 0 3px rgba(47,107,87,.13),0 6px 16px -12px rgba(30,55,48,.35)}
:is(#subWiz,#volWiz) .sw-hhlist .hh-opt.on{
  background:rgb(var(--tg-rgb,255,255,255));border-color:rgba(47,107,87,.55);
  box-shadow:0 0 0 3px rgba(47,107,87,.13),0 6px 16px -12px rgba(30,55,48,.35);
}
:is(#subWiz,#volWiz) .sw-hhlist .hh-opt .nm{font-size:15px;font-weight:700;color:#1C2A25}
:is(#subWiz,#volWiz) .sw-hhlist .hh-opt .meta{font-size:12.5px;font-weight:600;color:#7A8A84}
:is(#subWiz,#volWiz) .sw-hhlist .hh-opt .tick{
  width:22px;height:22px;border:0;border-radius:50%;
  background:no-repeat center/22px 22px 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(#subWiz,#volWiz) .sw-hhlist .hh-opt:hover .tick{
  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(#subWiz,#volWiz) .sw-hhlist .hh-change{
  margin-left:auto;padding:6px 13px;border-radius:10px;font-size:12.5px;font-weight:700;color:#375A50;
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);
  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(#subWiz,#volWiz) .sw-hhlist .hh-change:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:#1C2733;transform:translateY(-2px)}
:is(#subWiz,#volWiz) .sw-hhlist.bad .hh-opt.on{border-color:rgba(192,71,63,.6);box-shadow:0 0 0 3px rgba(192,71,63,.12)}
:is(#subWiz,#volWiz) .sw-hhlist .hh-empty{padding:18px 4px;font-size:13px;font-weight:600;color:#7A8A84;text-align:center}
body.dark :is(#subWiz,#volWiz) .sw-hhlist .hh-opt{background:rgba(255,255,255,.06);border-color:rgba(180,210,235,.14);box-shadow:0 6px 16px -12px rgba(0,0,0,.55)}
body.dark :is(#subWiz,#volWiz) .sw-hhlist .hh-opt:not(.static):hover{background:rgba(255,255,255,.1)}
body.dark :is(#subWiz,#volWiz) .sw-hhlist .hh-opt.on{background:rgba(255,255,255,.12);border-color:rgba(143,187,165,.6)}
body.dark :is(#subWiz,#volWiz) .sw-hhlist .hh-opt .nm{color:#EAF0F4}
body.dark :is(#subWiz,#volWiz) .sw-hhlist .hh-change{background:rgba(255,255,255,.05);border-color:rgba(180,210,235,.14);color:#8FBBA5}
:is(#subWiz,#volWiz) .er-ask{margin:0;align-self:flex-start}

/* ---- a tick choice = a tile with THE STANDARD TICK ---- */
:is(#subWiz,#volWiz) .mint-w.sw-tick{cursor:pointer}
:is(#subWiz,#volWiz) .mint-w.sw-tick.tkoff::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
:is(#subWiz,#volWiz) .mint-w.sw-tick .sw-tickrow{display:flex;align-items:center;gap:10px;min-width:0;height:24px}
:is(#subWiz,#volWiz) .mint-w.sw-tick .sw-tickt{font-size:16px;font-weight:650;line-height:24px;color:#1C2A25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#subWiz,#volWiz) .mint-w.sw-tick.tkoff .sw-tickt{color:#5E6E68}
:is(#subWiz,#volWiz) .mint-w.sw-tick.warn .mint-lb{color:#B07A2A}
:is(#subWiz,#volWiz) .mint-w.sw-tick input.sw-tk,
:is(#subWiz,#volWiz) .mint-w.sw-tick input.sw-tk:checked{
  -webkit-appearance:none;appearance:none;flex:none;margin:0;cursor:pointer;
  width:22px;height:22px;border:0;border-radius:50%;outline:0;box-shadow:none;
  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(#subWiz,#volWiz) .mint-w.sw-tick input.sw-tk: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(#subWiz,#volWiz) .mint-w.sw-tick:hover input.sw-tk: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(#subWiz,#volWiz) .mint-w.sw-tick input.sw-tk:focus-visible{box-shadow:0 0 0 3px rgba(47,107,87,.18)}
:is(#subWiz,#volWiz) .sw-g2.bad > .mint-w.sw-tick{border-style:solid;border-color:rgba(192,71,63,.6);box-shadow:0 0 0 3px rgba(192,71,63,.12)}
body.dark :is(#subWiz,#volWiz) .mint-w.sw-tick .sw-tickt{color:#EAF0F4}
body.dark :is(#subWiz,#volWiz) .mint-w.sw-tick.tkoff .sw-tickt{color:#AEB9B5}
body.dark :is(#subWiz,#volWiz) .mint-w.sw-tick.tkoff::before{box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)}
body.dark :is(#subWiz,#volWiz) .mint-w.sw-tick input.sw-tk: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(#subWiz,#volWiz) .mint-w.sw-tick input.sw-tk: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>");
}

/* ---- a schedule month = one row of tiles ---- */
:is(#subWiz,#volWiz) .sw-sched{display:flex;flex-direction:column;gap:10px}
:is(#subWiz,#volWiz) .sw-mrow{display:grid;grid-template-columns:24px minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) 40px;gap:10px;align-items:center}
:is(#subWiz,#volWiz) .sw-idx{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#2F6B57;background:rgba(47,107,87,.10)}
:is(#subWiz,#volWiz) .sw-mrow > .mint-w{padding-right:12px}
:is(#subWiz,#volWiz) .mint-w.sw-mh{cursor:default}
:is(#subWiz,#volWiz) .sw-mhv{display:flex;align-items:center;gap:8px;min-width:0;height:24px;font-size:16px;font-weight:650;color:#1C2A25;font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#subWiz,#volWiz) .sw-mhv .ws-ss{font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:99px;background:rgba(47,107,87,.12);color:#2F6B57}
:is(#subWiz,#volWiz) .sw-mrow.ss .mint-w.sw-mh{border-color:rgba(47,107,87,.45)}
:is(#subWiz,#volWiz) :is(.sw-rm,.sw-add){
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  border-radius:12px;font-family:var(--font-sans,inherit);font-size:13px;font-weight:700;color:#375A50;
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);
  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(#subWiz,#volWiz) .sw-rm{width:40px;height:40px;color:#A5433A}
:is(#subWiz,#volWiz) .sw-add{height:40px;padding:0 16px}
:is(#subWiz,#volWiz) :is(.sw-rm,.sw-add) svg{width:16px;height:16px}
:is(#subWiz,#volWiz) :is(.sw-rm,.sw-add):hover{background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));transform:translateY(-2px);box-shadow:0 3px 7px -4px rgba(30,55,48,.18),0 10px 20px -10px rgba(30,55,48,.26)}
:is(#subWiz,#volWiz) .sw-add:hover{color:#1C2733}
:is(#subWiz,#volWiz) .sw-rm:hover{border-color:rgba(176,70,60,.45)}
:is(#subWiz,#volWiz) .sw-schedfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:2px}
:is(#subWiz,#volWiz) .sw-tot{font-size:12.5px;font-weight:600;color:#7A8A84}
:is(#subWiz,#volWiz) .sw-tot b{color:#1C2A25;font-weight:800}
:is(#subWiz,#volWiz) .sw-empty{padding:6px 4px}
:is(#subWiz,#volWiz) .sw-sched.bad .sw-mrow .mint-w.ed.empty{border-color:rgba(192,71,63,.5)}
body.dark :is(#subWiz,#volWiz) :is(.sw-rm,.sw-add){background:rgba(255,255,255,.05);border-color:rgba(180,210,235,.14);color:#8FBBA5}
body.dark :is(#subWiz,#volWiz) .sw-rm{color:#F0A9A3}
body.dark :is(#subWiz,#volWiz) .sw-mhv,
body.dark :is(#subWiz,#volWiz) .sw-tot b{color:#EAF0F4}

/* ---- the signed form: a tile whose value line is the upload ---- */
:is(#subWiz,#volWiz) .mint-w.sw-up{cursor:default}
:is(#subWiz,#volWiz) .sw-uprow{display:flex;align-items:center;gap:10px;min-width:0;height:24px}
:is(#subWiz,#volWiz) .sw-upbtn{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:9px;cursor:pointer;
  font-size:12px;font-weight:700;color:#375A50;
  background:rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1)));border:1px solid rgba(47,107,87,.22);
  transition:background .15s ease,color .15s ease;
}
:is(#subWiz,#volWiz) .sw-upbtn:hover{background:rgb(var(--tg-rgb,255,255,255));color:#1C2733}
:is(#subWiz,#volWiz) .sw-upbtn svg{width:14px;height:14px}
:is(#subWiz,#volWiz) .sw-upbtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
:is(#subWiz,#volWiz) .sw-upname{min-width:0;font-size:14px;font-weight:650;color:#1C2A25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#subWiz,#volWiz) .sw-upname.un{color:#8A9A94}
body.dark :is(#subWiz,#volWiz) .sw-upname{color:#EAF0F4}

/* ---- notes on the glass (PGREV18's note tile), amber when careful ---- */
:is(#subWiz,#volWiz) .sw-note{
  display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:16px;
  font-size:12.5px;font-weight:550;line-height:1.5;color:#5E6E68;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
:is(#subWiz,#volWiz) .sw-note .ico{flex:none;width:16px;height:16px;margin-top:1px;color:#2F6B57}
:is(#subWiz,#volWiz) .sw-note .ico svg{width:16px;height:16px}
:is(#subWiz,#volWiz) .sw-note strong{color:#1C2A25}
:is(#subWiz,#volWiz) .sw-note.warn{background:rgba(255,247,232,.85);border-color:rgba(214,160,72,.45);color:#7A5A22}
:is(#subWiz,#volWiz) .sw-note.warn .ico{color:#B07A2A}
body.dark :is(#subWiz,#volWiz) .sw-note{background:rgba(255,255,255,.06);border-color:rgba(180,210,235,.14);color:#AEB9B5;box-shadow:none}
body.dark :is(#subWiz,#volWiz) .sw-note strong{color:#EAF0F4}
body.dark :is(#subWiz,#volWiz) .sw-note.warn{background:rgba(214,160,72,.12);border-color:rgba(214,160,72,.35);color:#E8C88A}

/* ---- the review ---- */
:is(#subWiz,#volWiz) .sw-rvw{display:flex;flex-direction:column;gap:16px;padding-bottom:6px}
:is(#subWiz,#volWiz) .sw-plannote .gcd-h{display:flex;align-items:center;gap:8px}
:is(#subWiz,#volWiz) .sw-plannote .pb-dot{width:9px;height:9px;border-radius:50%;flex:none}

/* ---- the "Ask the Program team" card: tiles on the wizard's own window ---- */
.wzx .er-card.mint-kit{
  border-radius:22px;border:1px solid rgba(255,255,255,.72);
  background-color:var(--mh-canvas,#E1E6EB);background-image:var(--mh-canvas-img,none);
  box-shadow:0 30px 80px -24px rgba(20,40,34,.45),0 8px 22px -12px rgba(20,40,34,.25);
}
body.dark .wzx .er-card.mint-kit{background:#1d2421;border-color:rgba(180,210,235,.14)}
.wzx .er-card.mint-kit .er-body{gap:12px;padding:14px 24px 6px}
.wzx .er-card.mint-kit .er-body .sw-cap{padding:0 4px;margin-top:-4px;font-size:12px;font-weight:600;line-height:1.45;color:#7A8A84}
.wzx .er-card.mint-kit .er-foot{padding:16px 24px 22px;gap:12px;border-top:1px solid #D9DFE7}
body.dark .wzx .er-card.mint-kit .er-foot{border-top-color:rgb(51,64,58)}

@media (max-width:900px){
  :is(#subWiz,#volWiz) .sw-g2{grid-template-columns:minmax(0,1fr)}
  :is(#subWiz,#volWiz) .sw-mrow{grid-template-columns:24px repeat(2,minmax(0,1fr)) 40px}
}
@media (prefers-reduced-motion: reduce){
  :is(#subWiz,#volWiz) .sw-hhlist .hh-opt:hover, :is(#subWiz,#volWiz) :is(.sw-rm,.sw-add):hover{transform:none}
}

/* =====================================================================================================================
   SUBSTD02 - THE HOUSING SUBSIDY RECORD ON THE MINT STANDARD.  1 October 2026.
   HousingSubsidy.razor passes StageClass="mint-host sb-host": .mint-host turns on the Mint tokens, the glass tab row and
   the gradient buttons; .pd-card.mint / .mint-ph / .mint-w / .mint-sel are keyed on the CLASS, so the cards and tiles
   arrive dressed; PGMINT18 + PGLIST18 (client-detail-view.css) were WIDENED to :is(.sb-host,.vl-host) - the wide/prose tiles, the card
   note, the refusal bar spanning the grid, the list card and its glass rows. What follows is only what this record has
   and the others do not, each put on an object the standard already has (copied, not re-picked):
     the four figures       stat tiles = the field tile's material; Remaining keeps its weight on the mint gradient
     a plan month           one row of tiles (Month / Total rent / Household pays / Matthew House), as the wizard
     a required program     a tile with THE STANDARD TICK (TICK18 / TICKDOT18)
     a signed form/receipt  a tile whose value line is a mini glass button + the file name
     the term stepper       the groove = the meter track; the dots and milestone chips = glass
   Every rule is #mhDetail:is(.sb-host,.vl-host) - the shell id is shared by five records.
   ===================================================================================================================== */

/* ---- the four figures ---- */
#mhDetail:is(.sb-host,.vl-host) .sb-metric{
  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);
}
#mhDetail:is(.sb-host,.vl-host) .sb-metric .k{color:#7A8A84;font-weight:800;letter-spacing:.1em;font-size:10px}
#mhDetail:is(.sb-host,.vl-host) .sb-metric .k svg{stroke:#2F6B57}
#mhDetail:is(.sb-host,.vl-host) .sb-metric .v{color:#1C2A25}
#mhDetail:is(.sb-host,.vl-host) .sb-metric .h{color:#7A8A84;font-weight:600}
#mhDetail:is(.sb-host,.vl-host) .sb-metric.dark{
  background:var(--mint-grad,linear-gradient(162deg,#42856E 0%,#2F6B57 60%,#2A5749 100%));border-color:transparent;
  box-shadow:0 4px 12px -2px rgba(47,107,87,.42);
}
#mhDetail:is(.sb-host,.vl-host) .sb-metric.dark .k{color:rgba(255,255,255,.72)}
#mhDetail:is(.sb-host,.vl-host) .sb-metric.dark .k svg{stroke:rgba(255,255,255,.85)}
#mhDetail:is(.sb-host,.vl-host) .sb-metric.dark .v{color:#fff}
#mhDetail:is(.sb-host,.vl-host) .sb-metric.dark .h{color:rgba(255,255,255,.7)}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-metric{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 #mhDetail:is(.sb-host,.vl-host) .sb-metric .v{color:#EAF0F4}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-metric .k,
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-metric .h{color:#8C9AA5}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-metric .k svg{stroke:#8FBBA5}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-metric.dark{background:linear-gradient(162deg,#3E7A66 0%,#2E5F4E 60%,#274F42 100%);border-color:transparent}

/* ---- the capsule's own action (Record Payment) sits after the count ---- */
#mhDetail:is(.sb-host,.vl-host) .mint-ph .sb-chact{margin-left:10px;height:34px;padding:0 13px;font-size:12.5px}
#mhDetail:is(.sb-host,.vl-host) .mint-ph .sb-chact svg{width:15px;height:15px}
#mhDetail:is(.sb-host,.vl-host) .mint-ph:has(.sb-chact) .mint-tag{margin-left:auto}
#mhDetail:is(.sb-host,.vl-host) .plan-part .mint-ph .pp-pill{margin-left:auto}

/* ---- notes inside a card ---- */
#mhDetail:is(.sb-host,.vl-host) .sb-empty{margin:4px 2px 2px;text-align:center}
#mhDetail:is(.sb-host,.vl-host) .sb-reason{margin-top:12px}
#mhDetail:is(.sb-host,.vl-host) .sb-gatenote{margin:10px 2px 0}
#mhDetail:is(.sb-host,.vl-host) .sb-errbar{margin:0 0 2px}

/* ---- a plan month = one row of tiles ---- */
#mhDetail:is(.sb-host,.vl-host) .sb-sched{display:flex;flex-direction:column;gap:10px}
#mhDetail:is(.sb-host,.vl-host) .sb-mrow{display:grid;grid-template-columns:24px minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) 40px;gap:10px;align-items:center}
#mhDetail:is(.sb-host,.vl-host) .sb-mrow.ro{grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr)}
#mhDetail:is(.sb-host,.vl-host) .sb-idx{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#2F6B57;background:rgba(47,107,87,.10)}
#mhDetail:is(.sb-host,.vl-host) .sb-mrow > .mint-w{min-width:0}
#mhDetail:is(.sb-host,.vl-host) .sb-mh .mint-vl{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
#mhDetail:is(.sb-host,.vl-host) .sb-ss{flex:none;font-size:10px;font-weight:800;letter-spacing:.04em;padding:2px 7px;border-radius:99px;background:rgba(47,107,87,.12);color:#2F6B57}
#mhDetail:is(.sb-host,.vl-host) .sb-mrow.ss .sb-mh{border-color:rgba(47,107,87,.45)}
#mhDetail:is(.sb-host,.vl-host) .sb-rm{
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:12px;color:#A5433A;
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);
  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,border-color .18s ease;
}
#mhDetail:is(.sb-host,.vl-host) .sb-rm svg{width:16px;height:16px}
#mhDetail:is(.sb-host,.vl-host) .sb-rm:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border-color:rgba(176,70,60,.45);transform:translateY(-2px)}
#mhDetail:is(.sb-host,.vl-host) .sb-schedfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;padding:2px 2px 0;font-size:12.5px;font-weight:600;color:#7A8A84}
#mhDetail:is(.sb-host,.vl-host) .sb-schedfoot b{color:#1C2A25;font-weight:800}
#mhDetail:is(.sb-host,.vl-host) .sb-schedfoot .sb-add{height:38px;padding:0 15px;font-size:13px}
#mhDetail:is(.sb-host,.vl-host) .sb-sched.bad .sb-mrow .mint-w.ed.bad{border-style:solid}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-rm{background:rgba(255,255,255,.05);border-color:rgba(180,210,235,.14);color:#F0A9A3}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-schedfoot b{color:#EAF0F4}

/* ---- a required program = a tile with THE STANDARD TICK ---- */
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick{cursor:pointer}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick.tkoff::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick .sb-tickrow{display:flex;align-items:center;gap:10px;min-width:0;height:24px}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick .sb-tickt{font-size:16px;font-weight:650;line-height:24px;color:#1C2A25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick.tkoff .sb-tickt{color:#5E6E68}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick input.sb-tk,
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick input.sb-tk:checked{
  -webkit-appearance:none;appearance:none;flex:none;margin:0;cursor:pointer;
  width:22px;height:22px;border:0;border-radius:50%;outline:0;box-shadow:none;
  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>");
}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick input.sb-tk: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>");
}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick:hover input.sb-tk:not(:checked){
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><circle cx='11' cy='11' r='9.75' fill='none' stroke='%232F6B57' stroke-opacity='.6' stroke-width='2'/></svg>");
}
body.dark #mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick .sb-tickt{color:#EAF0F4}
body.dark #mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick.tkoff .sb-tickt{color:#AEB9B5}
body.dark #mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick input.sb-tk: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 #mhDetail:is(.sb-host,.vl-host) .mint-w.sb-tick input.sb-tk: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>");
}

/* ---- a file on the record (signed agreement, payment receipt) ---- */
#mhDetail:is(.sb-host,.vl-host) .sb-agrrow{margin-top:12px}
#mhDetail:is(.sb-host,.vl-host) .mint-w.sb-uptile{cursor:default}
#mhDetail:is(.sb-host,.vl-host) .sb-uprow{display:flex;align-items:center;gap:10px;min-width:0;height:24px}
#mhDetail:is(.sb-host,.vl-host) .sb-upbtn{
  position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:9px;cursor:pointer;
  font-family:var(--font-sans,inherit);font-size:12px;font-weight:700;color:#375A50;
  background:rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1)));border:1px solid rgba(47,107,87,.22);
  transition:background .15s ease,color .15s ease;
}
#mhDetail:is(.sb-host,.vl-host) .sb-upbtn:hover{background:rgb(var(--tg-rgb,255,255,255));color:#1C2733}
#mhDetail:is(.sb-host,.vl-host) .sb-upbtn svg{width:14px;height:14px}
#mhDetail:is(.sb-host,.vl-host) .sb-upbtn input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
#mhDetail:is(.sb-host,.vl-host) .sb-upname{min-width:0;font-size:14px;font-weight:650;color:#1C2A25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mhDetail:is(.sb-host,.vl-host) .sb-upname.un{color:#8A9A94}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-upname{color:#EAF0F4}
body.dark #mhDetail:is(.sb-host,.vl-host) .sb-upbtn{background:rgba(255,255,255,.06);border-color:rgba(143,187,165,.3);color:#8FBBA5}

/* ---- the record-payment form: tiles on the card, the footer pair under them ---- */
#mhDetail:is(.sb-host,.vl-host) .sb-payform{background:none;border:0;padding:0;margin:2px 0 16px;display:flex;flex-direction:column;gap:12px}
#mhDetail:is(.sb-host,.vl-host) .sb-payacts{margin-top:2px}

/* ---- the term stepper and the milestones on glass (they painted the recessed field ground) ---- */
#mhDetail:is(.sb-host,.vl-host) .ms-track{background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));box-shadow:inset 0 1px 2px rgba(30,55,48,.12)}
#mhDetail:is(.sb-host,.vl-host) .ms-node:not(.done):not(.current) .ms-dot{background:rgb(var(--tg-rgb,255,255,255));border-color:rgba(30,55,48,.18)}
#mhDetail:is(.sb-host,.vl-host) .sched-step:not(.done):not(.next) .sched-dot{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border-color:rgba(255,255,255,.85);box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
#mhDetail:is(.sb-host,.vl-host) .sched-step:not(.done):not(.next) .sched-tag{background:rgba(var(--tg-rgb,255,255,255),calc(.6*var(--tg-k,1)))}
body.dark #mhDetail:is(.sb-host,.vl-host) .ms-track{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
body.dark #mhDetail:is(.sb-host,.vl-host) .ms-node:not(.done):not(.current) .ms-dot{background:#26302c;border-color:rgba(180,210,235,.2)}
body.dark #mhDetail:is(.sb-host,.vl-host) .sched-step:not(.done):not(.next) .sched-dot{background:rgba(255,255,255,.06);border-color:rgba(180,210,235,.14);box-shadow:none}
body.dark #mhDetail:is(.sb-host,.vl-host) .sched-step:not(.done):not(.next) .sched-tag{background:rgba(255,255,255,.06)}

@container (max-width: 760px){
  #mhDetail:is(.sb-host,.vl-host) .sb-mrow,
  #mhDetail:is(.sb-host,.vl-host) .sb-mrow.ro{grid-template-columns:24px repeat(2,minmax(0,1fr)) 40px}
}

/* ---- SUBSTD01 - THE RAIL = THE NEW CLIENT WIZARD'S RAIL. Owner: "double check the Housing Subsidy wizard left side bar
        panel it does not contain any icon and double check the size with other wizards it must be look same and same
        background color". MEASURED on #clWiz .dzaside (getComputedStyle, 1 Oct 2026) and copied: 344px wide, 26/26/28
        padding, the radial sheen at 110% -6% over the 165deg pine #2E4A43 -> #213A33 55% -> #16261F, a .08 white hairline
        on its right edge. The old .wleft was 368 wide on the 162deg detail-rail pine. The header (.pv-hdr), the fact rows
        (.pv-stat) and the icon chips (PACK18b) are the client rail's own rules, widened to :is(#subWiz,#volWiz). ---- */
:is(#subWiz,#volWiz) .wleft{
  width:344px;padding:26px 26px 28px;overflow-y:auto;overflow-x:hidden;
  border-right:1px solid rgba(255,255,255,.08);
  background:radial-gradient(420px 260px at 110% -6%,rgba(110,156,144,.30),transparent 60%),linear-gradient(165deg,#2E4A43,#213A33 55%,#16261F);
}
/* a plan carries six facts (the client rail four), so the rail can run 130px past the window: it scrolls as the record's
   own rail does (.rail-scroll, detail-view.css) - with the wheel, and with no scrollbar drawn on the pine */
:is(#subWiz,#volWiz) .wleft{scrollbar-width:none;-ms-overflow-style:none}
:is(#subWiz,#volWiz) .wleft::-webkit-scrollbar{width:0;height:0;display:none}
:is(#subWiz,#volWiz) .wleft .pv-hdr{position:relative;z-index:2}
/* the identity, centred under its photo as the client rail is */
:is(#subWiz,#volWiz) .wl-photo{margin-top:0;flex-direction:column;align-items:center;gap:14px;text-align:center}
:is(#subWiz,#volWiz) .wl-pframe{width:120px;height:120px}
:is(#subWiz,#volWiz) .wl-id{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%}
:is(#subWiz,#volWiz) .wl-id .nm{padding-left:0;text-indent:0;font-size:19px}
:is(#subWiz,#volWiz) .wl-id .meta{justify-content:center}
:is(#subWiz,#volWiz) .wl-members{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13)}
:is(#subWiz,#volWiz) .wl-mrow{justify-content:flex-start}
:is(#subWiz,#volWiz) .wl-facts{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.13)}
:is(#subWiz,#volWiz) .wl-facts .wl-mlabel{margin-bottom:6px}
:is(#subWiz,#volWiz) .wl-facts .pv-stats{margin-top:0}
:is(#subWiz,#volWiz) .wl-facts .pv-stat .v{display:flex;align-items:center;gap:7px;overflow-wrap:anywhere}
:is(#subWiz,#volWiz) .wl-facts .pv-stat .sv{min-width:0}

/* VOLBUILD01 (2 Oct 2026) - THE CLOSED CALENDAR NO LONGER MAKES A SCROLLBAR (both wizards on this shell).
   MEASURED on #volWiz step 1: .wr-body content 581px in a 581px box, yet scrollHeight 615 - the 34px came from
   MhDatePicker's CLOSED .dp-pop (opacity 0, still laid out, position:absolute) hanging below the Birthdate tile.
   A scroller counts that as content, and the owner rejects a ruler nobody needs. When OPEN the calendar is already
   portalled to position:fixed (inline style from the placer), so the closed one is made fixed too: still invisible,
   still measurable for the placer, but no longer inside .wr-body's scrollable overflow. */
:is(#subWiz,#volWiz) .wr-body .dp:not(.open) .dp-pop{position:fixed}