/* ============================================================================
   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: #eef2f1; 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: #f1f5f4; }
.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: #fff;
    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(255,255,255,.14), 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(255,255,255,.10);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)}

/* ============================================================================
   EDIT-ENGINE CONTROLS that the shared field kit does not carry: the coverage
   toggles, the plan schedule editor, the requirement chips and the file-picker
   face. Every one of them is built ON the kit's own tokens so it measures and
   colours like the .icf beside it - the standard's rule that every field type
   must measure identical to a plain text field.
   ============================================================================ */

/* the file-picker wears the .icf shell: same 50px, same fill, same radius */
#mhDetail .icf.sb-up{position:relative;cursor:pointer;overflow:hidden}
#mhDetail .icf.sb-up input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
#mhDetail .sb-upt{flex:1;min-width:0;font-size:15px;font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* coverage toggles - a pair of tick pills, not a full-width row each */
#mhDetail .sb-toggles{display:flex;gap:10px;flex-wrap:wrap}
#mhDetail .sb-toggle{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 17px;border-radius:var(--r-md);cursor:pointer;
  background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);
  font-size:15px;font-weight:600;color:var(--ink-2);transition:background var(--t),border-color var(--t),color var(--t)}
#mhDetail .sb-toggle input{position:absolute;opacity:0;width:0;height:0}
#mhDetail .sb-toggle:hover{background:var(--f-hover-bg)}
#mhDetail .sb-toggle.on{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-600);font-weight:700}

/* required-program chips */
#mhDetail .sb-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
#mhDetail .sb-chip{display:inline-flex;align-items:center;gap:11px;min-height:50px;padding:0 15px;border-radius:var(--r-md);cursor:pointer;
  background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);
  font-size:14.5px;font-weight:600;color:var(--ink-1);transition:background var(--t),border-color var(--t)}
#mhDetail .sb-chip input{position:absolute;opacity:0;width:0;height:0}
#mhDetail .sb-chip:hover{background:var(--f-hover-bg)}
/* The unticked box carries NO fill - a white square inside a soft grey chip read as a
   second, brighter control sitting on the first. It is an outline until it is ticked. */
#mhDetail .sb-tick{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--ink-4);background:none;
  display:inline-flex;align-items:center;justify-content:center;color:transparent;transition:background var(--t),border-color var(--t),color var(--t)}
#mhDetail .sb-tick svg{stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sb-chip.on{border-color:var(--brand);background:var(--brand-tint)}
#mhDetail .sb-chip.on .sb-tick{background:var(--brand);border-color:var(--brand);color:#fff}

/* the plan step-down SCHEDULE EDITOR - same de-whited treatment as its read-view twin, so
   the table you edit and the table you read are the same object in two modes. */
#mhDetail .sb-eps{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:none}
#mhDetail .sb-eps-head,
#mhDetail .sb-eps-row{display:grid;grid-template-columns:minmax(150px,1.4fr) 1fr 1fr minmax(120px,1fr) 40px;gap:12px;align-items:center;padding:11px 14px}
#mhDetail .sb-eps-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 .sb-eps-row{border-bottom:1px solid var(--line)}
#mhDetail .sb-eps-row.ss{background:var(--brand-tint)}
#mhDetail .sb-eps-mn{min-width:0}
#mhDetail .sb-eps-mn .dp{width:100%}
/* The money cells are plain .icf shells - NO height override. A first pass shortened
   them to 42px to keep the row compact and it measured 50px date against 42px money
   in the same row: visibly out of line, and a breach of the standard's rule that every
   field type measures identical to a plain text field. */
#mhDetail .icf.sb-eps-money{padding:0 12px}
#mhDetail .sb-eps-mh{display:flex;flex-direction:column;gap:2px;min-width:0}
#mhDetail .sb-eps-amt{font-family:var(--font-mono);font-size:14px;font-weight:800;color:var(--ink-1);font-variant-numeric:tabular-nums}
#mhDetail .sb-eps-ss{font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--brand-600)}
#mhDetail .sb-eps-rm{width:34px;height:34px;border:none;background:none;border-radius:9px;color:var(--ink-4);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background var(--t),color var(--t)}
#mhDetail .sb-eps-rm:hover{color:var(--danger);background:var(--danger-bg)}
#mhDetail .sb-eps-rm svg{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sb-eps-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 14px;
  border:none;border-top:1px solid var(--line);background:none;color:var(--brand-600);
  font-family:var(--font-sans);font-size:13.5px;font-weight:700;cursor:pointer;transition:background var(--t)}
#mhDetail .sb-eps-add:hover{background:var(--f-rest-bg)}
#mhDetail .sb-eps-add svg{stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sb-eps-empty{padding:17px 14px;text-align:center;font-size:13px;font-weight:600;color:var(--ink-4);border-bottom:1px solid var(--line)}
#mhDetail .sb-eps-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)}

/* the staff approval gate, in the Overview step */
#mhDetail .sb-gate{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-md);
  background:rgba(216,155,61,.12);border:1px solid rgba(216,155,61,.40);color:#7A5A1F;
  font-size:13px;font-weight:600;line-height:1.5}
#mhDetail .sb-gate svg{width:18px;height:18px;flex:none;margin-top:1px;color:#C98A2E}
body.dark #mhDetail .sb-gate{background:rgba(216,155,61,.14);border-color:rgba(216,155,61,.34);color:#E7C79A}

/* ============================================================================
   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;}