/* =============================================================================
   mh-household.css  -  PHASE 5: Household Detail overlay (#hhDetail) +
   Client Movement Wizard (#mvWiz). Ported verbatim from _handoff/mh-dashboard.html
   (the binding mock). ID-scoped selectors preserved exactly as the mock authored
   them so the components are pixel-faithful (rule 11). Plain hyphens only (rule 10).
   ============================================================================= */

/* ----------------------------- #hhDetail (v3 redesign) ---------------------
   Layout/structure/animation ported from HH_Panel_MH_Theory_v3; colors + fonts
   from the locked app system (pine #4E7C72, Hanken Grotesk, IBM Plex Mono).
   Everything scoped under #hhDetail so global classes (.pill/.field/.note/.btn)
   are never touched. Data colors (status pills, KPI dots) come from lookups via
   inline style; only neutral chrome tints are set here. --------------------- */
#hhDetail{position:fixed;inset:0;background:rgba(33,40,38,.45);z-index:99990;display:none;align-items:flex-start;justify-content:center;padding:28px 20px;overflow:auto;}
#hhDetail.show{display:flex;}
/* HEIGHT: the cap must be the space the OVERLAY actually leaves, not a bare vh.
   The overlay pads 28px top AND bottom (56px), so usable height is calc(100vh - 56px)
   - but the box was capped at 94vh, which is TALLER than that on any normal viewport
   (at 720px: 676.8px of box into 664px of space). It ate through the bottom padding
   and the footer ended up welded to the screen edge / taskbar: 28px of air above,
   15px below. Measured, both mocks (Student Detail and Household Detail share this id).
   margin:auto 0 centres it when there is room to spare, and collapses to 0 when the box
   is at its cap - so it stays symmetric AND the overlay can still scroll a tall record. */
/* THE CANVAS (Jul 28 2026): the record's body sits on the app's ONE cool-gray canvas,
   exactly like #pgWiz .wz2 .pane and the New Client wizard's form column. The HERO
   stays pine - it is this overlay's rail, and a rail never flips. Every card that used
   to sit on white is re-measured against the canvas further down; a card tuned against
   white does not survive the move. */
#hhDetail .hhbox{background:var(--bg-canvas);border-radius:24px;width:min(1380px,calc(97 * var(--mh-vw)));max-height:calc(calc(100 * var(--mh-vh)) - 56px);margin:auto 0;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(20,28,25,.34),0 8px 22px rgba(20,28,25,.12);overflow:hidden;}
/* =============================================================================
   THE MH DEFAULT FIELD TOKENS (Jul 28 2026) - copied verbatim from detail-view.css
   so this overlay draws from the SAME numbers as every other surface on the
   standard. Nothing here is Household-specific; it is the app's one palette.

   --mh-line is re-pointed at --line so every EXISTING border rule in this file
   (.stat / .col / .mcard / .mc-stats / .foot / .btn / .hhbtn / .field .fi ...)
   picks up the cool hairline without being rewritten one by one. It replaces the
   Jul 6 pine tint, which was warm-cream's cool replacement before the app had a
   single canonical hairline.
   ============================================================================= */
#hhDetail{
  --ink-1:#1C2733; --ink-2:#3B474B; --ink-3:#677579; --ink-4:#9AA7B3;
  --danger:#C0473F; --danger-bg:#F7E3E1; --danger-ink:#8C312B;
  /* THE STANDARD WARNING COLOUR = the database contract's `pending_intake` amber. It is the
     app's only amber: status-unify.css maps `.pill.warning` to this exact hue, lkp rows that
     mean "waiting" carry it, and the read view's ACTION NEEDED block already uses it. The two
     inks are the contract's published light / dark inks for that value. */
  --warn:#A67820; --warn-bg:#F6EBD3; --warn-ink:#7A5612;
  --brand:#2E4A43; --brand-600:#375A50; --brand-700:#213A33;
  --brand-tint:rgba(46,74,67,.12); --brand-tint-2:rgba(46,74,67,.20);
  --brand-glow:rgba(46,74,67,.35);

  --bg-canvas:#E8EBF0;
  --f-rest-bg:#DFE4EA; --f-rest-bd:rgba(40,60,80,.10); --f-rest-sh:inset 0 1px 2px rgba(40,60,80,.10);
  --f-hover-bg:#E4E8ED;
  --f-focus-bg:#FFFFFF; --f-focus-bd:rgba(40,60,80,.16); --f-focus-sh:0 10px 28px rgba(40,60,80,.14);

  --line:#D9DFE7;
  --mh-line:var(--line);
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.25,1); --t:.2s var(--ease);
}
body.dark #hhDetail{
  --bg-canvas:#1A232B;
  --ink-1:#EAF0F4; --ink-2:#C2CDD5; --ink-3:#8C9AA5; --ink-4:#5E6E7A;
  --brand:#3A5D51; --brand-600:#8FBBA5;
  --brand-tint:rgba(143,187,165,.18); --brand-tint-2:rgba(143,187,165,.26);
  --brand-glow:rgba(20,40,32,.6);
  --danger-bg:rgba(192,71,63,.18); --danger-ink:#F0A9A3;
  --warn-bg:rgba(166,120,32,.20); --warn-ink:#E3C071;
  --f-rest-bg:#121A20; --f-rest-bd:rgba(180,210,235,.10); --f-rest-sh:inset 0 1px 2px rgba(0,0,0,.4);
  --f-hover-bg:#16202A;
  --f-focus-bg:#222E38; --f-focus-bd:rgba(150,190,225,.28); --f-focus-sh:0 12px 30px rgba(0,0,0,.5);
  --line:rgba(180,210,235,.12);
}
#hhDetail .hh-loading{padding:60px;text-align:center;color:var(--mh-muted);}
/* HHNOTFOUND (2 Oct 2026): a family that cannot be found says so and closes */
#hhDetail .hh-notfound{padding:56px 28px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
#hhDetail .hh-notfound-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:var(--mh-muted);
  background:color-mix(in srgb,var(--mh-ink,#1f2b27) 6%,transparent);}
#hhDetail .hh-notfound-ic svg{width:28px;height:28px;}
#hhDetail .hh-notfound h3{margin:6px 0 0;font-size:17px;color:var(--mh-ink);}
#hhDetail .hh-notfound p{margin:0 0 8px;max-width:420px;font-size:13px;line-height:1.5;color:var(--mh-muted);}
/* B7/B8: scrollable body + sticky footer action bar. Scrollbar hidden (scroll
   still fully works) so the bar never runs up beside the frozen hero. */
#hhDetail .hh-scroll{flex:1 1 auto;overflow-y:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;background:var(--bg-canvas);}
#hhDetail .hh-scroll::-webkit-scrollbar{width:0;height:0;display:none;}

/* ===== HERO (FROZEN: sticky to the top of the scroll body; B7) ===== */
#hhDetail .hero{position:sticky;top:0;z-index:3;padding:36px 44px 40px;color:#fff;
  background:radial-gradient(680px 320px at 12% -30%,rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))),transparent 70%),linear-gradient(157deg,var(--mh-sidebar,#2E4A43) 0%,var(--mh-sidebar-2,#213A33) 52%,var(--mh-slate-2,#2A383F) 125%);}
#hhDetail .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))),transparent);}
#hhDetail .hero-x{position:absolute;top:18px;right:18px;width:34px;height:34px;border:none;border-radius:10px;background:rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1)));color:#fff;cursor:pointer;display:grid;place-items:center;transition:.16s;}
#hhDetail .hero-x:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));}
#hhDetail .hero-x svg{width:17px;height:17px;}
#hhDetail .hero-top{display:flex;align-items:center;gap:20px;}
#hhDetail .hero-av{position:relative;flex:none;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1)));border:1px solid rgba(255,255,255,.26);border-right-color:var(--tg-edge-r,rgba(255,255,255,.26));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.26));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px rgba(0,0,0,.18);color:rgba(255,255,255,.7);}
#hhDetail .hero-av svg{width:56px;height:56px;}
#hhDetail .hero-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
/* Phase 10 - clickable hero photo (head of household). Same lift/brighten affordance the
   Clients card avatars use, scaled for the larger hero circle. */
#hhDetail .hero-av.plb-trigger{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;}
#hhDetail .hero-av.plb-trigger:hover{transform:scale(1.05);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.28);}
#hhDetail .hero-av.plb-trigger:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px;}
#hhDetail .kicker{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.7);}
#hhDetail .hh-name{font-size:32px;font-weight:800;letter-spacing:-.015em;line-height:1.08;margin:3px 0 9px;color:#fff;}
#hhDetail .hh-meta{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.76);flex-wrap:wrap;}
#hhDetail .hh-meta b{color:#fff;font-weight:700;}
#hhDetail .hh-meta .sep{width:3px;height:3px;border-radius:50%;background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));}
#hhDetail .hh-meta .hflag{width:20px;height:14px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 .5px rgba(255,255,255,.4);}
/* A4: ID cluster = centered stacked column (pill / label / code) inside a subtle
   translucent panel, QR beside it. */
#hhDetail .hero-id-wrap{margin-left:auto;display:flex;align-items:center;gap:18px;padding:13px 16px 13px 20px;background:rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1)));border:1px solid rgba(255,255,255,.14);border-right-color:var(--tg-edge-r,rgba(255,255,255,.14));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.14));border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
#hhDetail .hero-idblock{display:flex;flex-direction:column;align-items:center;gap:7px;}
#hhDetail .id-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);}
#hhDetail .id-code{font-family:var(--mono);font-size:17px;font-weight:600;color:#fff;margin:0;}
/* The hero status pill is the DATABASE CONTRACT's `strong` variant - filled hue, white
   ink, white dot - defined once in status-unify.css as `.st--hero`. "One per screen: the
   record's own status in the detail header", which is exactly this pill.

   REMOVED Jul 28 2026: a local `#hhDetail .hero .st--hero` override that repainted it as
   the pre-contract 40%-glass approximation. It was already inert (every property it set
   is !important in status-unify.css) but it contradicted the contract in source, so the
   moment those !importants were tidied away this one screen would have silently gone back
   to the old look. Colour still comes only from --c = the lkp ColorHex. */
#hhDetail .hero .st--hero{cursor:pointer;}
#hhDetail .qr-tile{position:relative;width:80px;height:80px;flex:none;background:#fff;border-radius:16px;padding:5px;/* QRFILL29: was 9px */box-shadow:0 8px 22px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.04);cursor:pointer;transition:.18s;}
#hhDetail .qr-tile:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 28px rgba(0,0,0,.3);}
#hhDetail .qr-tile svg{width:100%;height:100%;color:var(--mh-green-d,#3D655D);display:block;}
/* Center MH mark = the DEFAULT app lockup (same as .idc-qr): white logo_mark on a
   pine gradient chip with a white ring. White-on-pine reads as the branded mark;
   ECC-H recovers the covered modules. */
#hhDetail .qr-tile .qr-logo,#hhDetail .mc-qr .qr-logo{position:absolute;inset:0;margin:auto;display:grid;place-items:center;background:linear-gradient(135deg,#2E4A43,#213A33);pointer-events:none;}
#hhDetail .qr-tile .qr-logo{width:20px;height:20px;border-radius:6px;padding:3px;box-shadow:0 0 0 2.5px #fff;}
#hhDetail .mc-qr .qr-logo{width:13px;height:13px;border-radius:4px;padding:2px;box-shadow:0 0 0 1.8px #fff;}
#hhDetail .qr-tile .qr-logo img,#hhDetail .mc-qr .qr-logo img{width:100%;height:100%;object-fit:contain;display:block;}

/* ===== KPI TILES ===== */
#hhDetail .stats{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;padding:18px 24px 4px;margin-top:-14px;}
/* ON THE CANVAS: --f-focus-bg (#FFF light / #222E38 dark) + a --line hairline, the same
   recipe #mhDetail .pd-card uses. The old var(--mh-surface) was tuned against a white
   pane; in dark it was #242c28, a warm green that reads as a smudge on the cool #1A232B
   canvas. Measured delta after the move: 58 light, 32 dark. */
#hhDetail .stat{position:relative;background:var(--f-focus-bg);border:1px solid var(--line);border-radius:13px;padding:15px 15px 16px;box-shadow:0 1px 3px rgba(40,60,80,.06);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden;}
#hhDetail .stat:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(40,60,80,.14),0 4px 10px rgba(40,60,80,.07);border-color:var(--f-focus-bd);}
#hhDetail .stat::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--accent) 12%,transparent);transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.42,0,.18,1);z-index:0;}
#hhDetail .stat:hover::before{transform:scaleX(1);}
#hhDetail .stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.95;z-index:2;}
#hhDetail .stat .si,#hhDetail .stat .sk,#hhDetail .stat .sv{position:relative;z-index:1;}
#hhDetail .stat .si{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:11px;}
#hhDetail .stat .si svg{width:18px;height:18px;}
#hhDetail .stat .sk{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);}
#hhDetail .stat .sv{font-size:19px;font-weight:800;color:var(--ink-1);margin-top:5px;display:flex;align-items:center;gap:6px;letter-spacing:-.01em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#hhDetail .stat .sv .unit{font-size:12px;font-weight:600;color:var(--ink-3);}
#hhDetail .stat .vdot{width:9px;height:9px;border-radius:50%;flex:none;}
/* KPI icon tints. Decoration, not state - so they take contract HUES at a low mix
   rather than the status glass, and the clay/cream one (#F6E7DD) is gone with the rest
   of the warm palette. */
#hhDetail .tint-sage{background:var(--brand-tint);color:var(--brand-600);}
#hhDetail .tint-info{background:color-mix(in srgb,#4C5F86 14%,transparent);color:#3C4E71;}
#hhDetail .tint-clay{background:color-mix(in srgb,#A67820 16%,transparent);color:#7A5612;}
#hhDetail .tint-green{background:var(--brand-tint);color:var(--brand-600);}
body.dark #hhDetail .tint-info{color:#A3B4D6;}
body.dark #hhDetail .tint-clay{color:#E3C071;}

/* ===== BODY 2-COL ===== */
#hhDetail .body{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px 24px 4px;align-items:stretch;}
/* The status-history section sits OUTSIDE .body, so it has to re-state that grid's 24px side
   gutters or it runs edge to edge - which is exactly what it did once the timeline lost its
   white card. Same left/right as every card above it; the bottom padding keeps the last entry
   off the frozen footer. */
#hhDetail .hh-history{padding:0 24px 22px;margin-top:18px;}
#hhDetail .col{background:var(--f-focus-bg);border:1px solid var(--line);border-radius:17px;padding:18px 20px 20px;box-shadow:0 1px 3px rgba(40,60,80,.06);display:flex;flex-direction:column;min-width:0;}
/* ===== READ CARDS - the SAME interface as the other detail mock (CEO, Jul 28 2026) =====
   Ported from `#mhDetail .pd-ch` (the card heading) and `#mhDetail .kv` (the field cell):

   SECTION TITLE  small, UPPERCASE, letter-spaced, --ink-3 - a card heading is a LABEL for the
     block, not a headline competing with the values inside it. It was 16.5px sentence-case
     brand-green, which read as the loudest thing on the card.
   FIELD CELL     label OVER value, and NO ICON. A glyph repeated beside all fourteen rows is
     decoration that competes with the value it sits next to; the other mock has none.
   The section icon STAYS (the CEO asked for that explicitly) but its bubble comes down from
   31px to 26px so it pairs with the smaller uppercase title instead of towering over it. */
#hhDetail .col-h{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
#hhDetail .col-h .hi{width:26px;height:26px;border-radius:8px;background:var(--brand-tint);color:var(--brand-600);display:grid;place-items:center;flex:none;}
#hhDetail .col-h .hi svg{width:15px;height:15px;}
#hhDetail .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
#hhDetail .field{display:flex;flex-direction:column;min-width:0;}
#hhDetail .field .fk{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);}
#hhDetail .field .fv{font-size:14.5px;font-weight:700;color:var(--ink-1);margin-top:5px;line-height:1.35;overflow-wrap:anywhere;}
#hhDetail .field .fv.mono{font-family:var(--mono);}
#hhDetail .note{margin-top:auto;padding-top:15px;}
/* THE NOTE IS A FIELD, NOT A PANEL (CEO, Jul 28 2026). It used to be a recessed box with its
   label INSIDE it - the field kit's INPUT surface, which made a read value look like something
   you could type into, and it was the only thing on the card wearing a fill. It is now the
   SAME label-over-value cell as every other field here: `.nk` is byte-identical to `.field .fk`
   and `.nv` to `.field .fv`. The min-height moves onto the value so the two cards still
   floor-match (the note is pinned to the card bottom by margin-top:auto). */
#hhDetail .note .nk{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);display:flex;align-items:center;gap:7px;}
#hhDetail .note .nv{font-size:14.5px;font-weight:700;color:var(--ink-1);margin-top:5px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap;min-height:58px;}
/* ACTION NEEDED is an ALERT on a note, not a record status - so it deliberately keeps
   its solid tag rather than taking the glass status pill (a tag that looked like a status
   would read as "this household is in the Pending state"). Only the HUE moves onto the
   contract (pending_intake #A67820) so it stops being the last off-palette amber here. */
/* ACTION NEEDED with no panel to wash: the amber now lands on the LABEL, the warning glyph and
   the tag - which is where a flag belongs anyway. The VALUE keeps normal ink; tinting the note
   text itself would say the words are the problem. */
#hhDetail .note.action .nk{color:var(--warn-ink);}
#hhDetail .note.action .nk svg{width:15px;height:15px;color:var(--warn);}
#hhDetail .note .tag{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:var(--warn);color:#fff;}

/* ---- Housing subsidy empty state: the useful action when there is no subsidy is to CREATE
        one, so the link takes the empty line's place and names the family it will add. It is
        an ACTION, so it reads as one - it is not dressed as a status pill. ---- */
#hhDetail .hh-housing-empty{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  color:var(--ink-3);font-size:13.5px;padding:2px 2px 6px;}
#hhDetail .hh-housing-add{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  color:var(--brand-600);background:var(--brand-tint);border:1px solid transparent;border-radius:999px;
  padding:8px 15px;text-decoration:none;cursor:pointer;transition:background var(--t),border-color var(--t);}
#hhDetail .hh-housing-add:hover{background:var(--brand-tint-2);border-color:var(--brand-600);text-decoration:none;}
#hhDetail .hh-housing-add svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
#hhDetail .hh-housing-link{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--brand-600);text-decoration:none;}
#hhDetail .hh-housing-link:hover{text-decoration:underline;}

/* ===== FAMILY MEMBERS ===== */
#hhDetail .members{padding:22px 24px 6px;}
/* the two SECTION headers on the canvas (Housing subsidy / Family members) take the same
   treatment as the card headings, so every heading in this overlay reads as one system. */
#hhDetail .members-h{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:15px;}
#hhDetail .members-h .hi{width:26px;height:26px;border-radius:8px;background:var(--brand-tint);color:var(--brand-600);display:grid;place-items:center;flex:none;}
#hhDetail .members-h .hi svg{width:15px;height:15px;}
/* "2 people" is a COUNT, not a status - it stays a plain neutral chip and must never
   take the glass status pill. On the canvas its old cream fill had almost no delta, so
   it is now the white card surface plus a hairline. */
#hhDetail .members-h .count{margin-left:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--f-focus-bg);border:1px solid var(--line);color:var(--ink-3);}
#hhDetail .mcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#hhDetail .mcard{background:var(--f-focus-bg);border:1px solid var(--line);border-radius:17px;padding:16px 18px;box-shadow:0 1px 3px rgba(40,60,80,.06);transition:transform .18s,box-shadow .18s,border-color .18s;display:flex;flex-direction:column;min-height:178px;min-width:0;}
#hhDetail .mcard:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(40,60,80,.12);border-color:var(--f-focus-bd);}
#hhDetail .mc-head{display:flex;align-items:flex-start;gap:13px;}
#hhDetail .mc-av{flex:none;width:48px;height:48px;border-radius:50%;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);color:var(--brand-600);display:grid;place-items:center;box-shadow:0 2px 7px rgba(40,60,80,.12);overflow:hidden;}
#hhDetail .mc-av svg{width:24px;height:24px;opacity:.75;}
#hhDetail .mc-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
/* The member photo opens the shared .plb lightbox, so it says so the same way the household
   KPI card's photo does - the .idc-ph.plb-trigger recipe, transform + brightness, verbatim
   (mh-theme.css). The focus ring is this surface's own: .idc-ph has none because a card-level
   click owns that card, while here the photo is its own tab stop. */
#hhDetail .mc-av.plb-trigger{cursor:pointer;transition:transform .15s ease,filter .15s ease;}
#hhDetail .mc-av.plb-trigger:hover{transform:scale(1.06);filter:brightness(1.07);}
#hhDetail .mc-av.plb-trigger:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
#hhDetail .mc-hmain{flex:1;min-width:0;}
/* CEO Jul 30 - the status pill sits INLINE beside the name, exactly like .idc-nrow on the
   household KPI card. It was space-between, which flung it to the far edge of the card and
   read as a second column rather than part of the name line. */
#hhDetail .mc-nameline{display:flex;align-items:center;gap:9px;min-width:0;}
#hhDetail .mc-nameline .mc-name{flex:0 1 auto;}
/* overflow:hidden so a long name SHRINKS instead of shoving the inline pill past the card
   edge - the job .idc-name does with nowrap+ellipsis. It cannot use text-overflow here: the
   name is an anonymous flex item beside the crown, and ellipsis does not apply to those. */
#hhDetail .mc-name{font-size:15px;font-weight:700;color:var(--ink-1);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;}
#hhDetail .mc-name .crown{color:#C79A2E;display:inline-flex;flex:none;}
#hhDetail .mc-name .crown svg{width:15px;height:15px;}
/* member status pill is now the global glass pill (.st.st--glass); see status.css */
#hhDetail .st{flex:none;}
#hhDetail .mc-meta{margin-top:6px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap;}
#hhDetail .mc-meta .flag{flex:none;width:18px;height:12px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 .5px var(--line);}
#hhDetail .mc-meta .code{font-family:var(--mono);font-size:11.5px;}
#hhDetail .mc-meta .sep{opacity:.5;}
/* the QR chip stays WHITE in both themes - it has to scan. */
#hhDetail .mc-qr{position:relative;flex:none;width:50px;height:50px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px;/* QRFILL29: was 5px */cursor:pointer;transition:.16s;}
#hhDetail .mc-qr:hover{border-color:var(--f-focus-bd);box-shadow:0 1px 3px rgba(40,60,80,.12);}
#hhDetail .mc-qr svg{width:100%;height:100%;color:var(--mh-green-d,#3D655D);display:block;}

/* ---- Document Status chip: a STATUS, so it draws the DATABASE CONTRACT pill ----
   This was the household's own third chip family, still flat and still on the pre-contract
   greens/ambers - the same blind spot as `.status`+`.st-*` (see status-unify.css). It has no
   lkp row of its own, so it takes the contract hue that MEANS what the state means:
   current -> active, expiring -> pending_intake, expired -> on_hold (the contract has no
   danger red; flagged in Migration_StatusPills_Contract.sql). Recipe is the contract's
   glass, character-identical to .st.

   CEO Jul 30: it now lives INSIDE .mc-hmain under the meta line, which is where the household
   KPI card puts its own document-health chip (.idc-doc, margin-top:8px) - so the two cards
   read as the same component. It used to be a direct child of the card on a row of its own. */
/* THE 14px UNDER THE CHIP IS LOAD-BEARING (CEO, Jul 31 2026 - "Document Status is attached to
   that line and it's not looking good"). Measured: the gap between the chip and the divider was
   EXACTLY 0 on all three cards, so the rule read as an underline on the chip rather than the
   card's own separator. The cause is that `.mc-stats` positions itself with `margin-top:auto`,
   and on a card whose content already fills the height auto resolves to nothing - there is no
   slack left to space it. A minimum gap therefore has to come from BELOW the chip, which is
   what this margin is. 14px is not a new number: it is the top margin the household KPI card
   gives its own `.idc-line`, so both cards separate their header from their stats by the same
   distance. It is a fixed value, so every member card gets it identically no matter how much
   content is above. */
#hhDetail .mc-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;margin-top:8px;margin-bottom:14px;
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1))),rgba(var(--tg-rgb,255,255,255),calc(.3*var(--tg-k,1)))),color-mix(in srgb,var(--c) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
  color:color-mix(in srgb,var(--c) 75%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px rgba(40,60,80,.05),0 8px 18px -12px color-mix(in srgb,var(--c) 70%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(165%);backdrop-filter:blur(12px) saturate(165%);}
#hhDetail .mc-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent);}
#hhDetail .chip-green{--c:#3E6B57;}
#hhDetail .chip-amber{--c:#A67820;}
#hhDetail .chip-red{--c:#B8623A;}
body.dark #hhDetail .mc-chip{
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1))),rgba(var(--tg-rgb,255,255,255),calc(.03*var(--tg-k,1)))),color-mix(in srgb,var(--c) 24%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
  color:color-mix(in srgb,var(--c) 50%,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px -12px rgba(0,0,0,.7);}
body.dark #hhDetail .mc-chip .dot{background:color-mix(in srgb,var(--c) 50%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent);}
/* H-3: margin-top:auto pins the footer block (stats + the actions row below it) to
   the card bottom, so cards floor-match given the per-member actions row. */
#hhDetail .mc-stats{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:auto;padding-top:13px;}
#hhDetail .mc-stat .k{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;}
#hhDetail .mc-stat .v{font-size:12.5px;font-weight:600;color:var(--ink-1);}
#hhDetail .mc-stat:nth-child(2){text-align:center;}
#hhDetail .mc-stat:nth-child(3){text-align:right;}
/* CEO Jul 30 - the actions sit on the RIGHT, the slot .idc-hhrow gives the household KPI
   card's action. margin-top:auto is already carried by .mc-stats above, so this row does not
   claim it a second time (two auto margins would split the slack between them). */
#hhDetail .mc-acts{display:flex;justify-content:flex-end;gap:7px;margin-top:12px;}
/* a control on a white card needs to READ as a control - the field kit's rest fill,
   the same as #mhDetail .m-x. It was #fff on #fff, i.e. only its hairline showed. */
#hhDetail .hhbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--f-rest-bd);background:var(--f-rest-bg);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:.15s;}
#hhDetail .hhbtn svg{width:16px;height:16px;}
#hhDetail .hhbtn:hover{background:var(--brand);color:#fff;border-color:var(--brand);}
#hhDetail .hhbtn.move:hover{background:#B8623A;border-color:#B8623A;}
/* .hhbtn.del deleted with the Remove button it dressed (CEO, Jul 30) - no .razor emits it. */

/* Add Family Member */
/* Solid pine hairline (matches the bell / the recoloured cards) - no longer dashed. */
#hhDetail .add-fam{border:1.6px solid var(--line);border-radius:17px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;cursor:pointer;min-height:178px;transition:border-color .2s,background .2s;}
#hhDetail .add-fam:hover{background:var(--f-hover-bg);border-color:var(--brand);}
#hhDetail .add-fam .plus{width:46px;height:46px;border-radius:50%;background:var(--f-rest-bg);color:var(--brand-600);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--f-rest-bd);transition:background .2s,color .2s,transform .25s,box-shadow .2s;}
#hhDetail .add-fam:hover .plus{background:var(--brand);color:#fff;transform:rotate(90deg);box-shadow:none;}
#hhDetail .add-fam .plus svg{width:22px;height:22px;}
#hhDetail .add-fam .lbl{font-size:14px;font-weight:700;color:var(--brand-600);}

/* ===== FOOTER + toast/err ===== */
#hhDetail .foot{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:15px 24px;border-top:1px solid var(--line);background:var(--bg-canvas);}
#hhDetail .btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13.5px;font-weight:700;padding:11px 20px;border-radius:13px;border:1px solid var(--line);cursor:pointer;transition:.16s;background:var(--f-focus-bg);color:var(--ink-1);}
#hhDetail .btn svg{width:16px;height:16px;}
#hhDetail .btn[disabled]{opacity:.55;cursor:not-allowed;}
#hhDetail .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);}
#hhDetail .btn-primary:hover{background:var(--brand-700);transform:translateY(-1px);}
body.dark #hhDetail .btn-primary{color:#EAF0F4;}
#hhDetail .btn-ghost:hover{border-color:var(--brand);color:var(--brand-600);}
#hhDetail .btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);}
#hhDetail .btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
#hhDetail .hh-errbar{margin:16px 24px 0;font-size:12.5px;font-weight:600;color:var(--danger-ink);background:var(--danger-bg);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent);border-radius:10px;padding:9px 12px;}
#hhDetail .hh-toast{margin:14px 24px 0;font-size:12.5px;color:var(--brand-600);background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:10px;padding:10px 13px;font-weight:600;}

/* DARK: everything now flips through the field, ink and line tokens declared above, so the
   old hardcoded warm-green block (#1d2421 / #242c28 / #33403a) is gone. What is left here
   is only what the tokens cannot express. */
body.dark #hhDetail .mc-qr{background:#fff;}
@media(max-width:980px){#hhDetail .stats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:860px){#hhDetail .body,#hhDetail .mcards{grid-template-columns:1fr;}}
@media(max-width:620px){#hhDetail .stats{grid-template-columns:repeat(2,1fr);}#hhDetail .hero-top{flex-wrap:wrap;}#hhDetail .hero-id-wrap{margin-left:0;}}

/* =============================================================================
   THE RETIRED STEPPER'S SKIN WAS HERE.  Deleted 7 September 2026.

   `.hh-form` / `.hh-steps` / `.hh-edit` were the in-pane stepper's canvas, and the stepper was
   retired by name when the in-place engine landed. That left **100 rules scoped to a class the
   markup no longer emits** - and dead rules are not neutral. `#hhDetail .hh-form .sel-opt` still
   contains the string "sel-opt" inside an "#hhDetail" selector, so an audit that asks "is this
   class covered?" answers YES while nothing whatsoever reaches the element. That is exactly how
   an unstyled dropdown - "Not setYesNo" run together in a bare box - shipped past a check that
   was supposed to catch it. **Ask whether a rule MATCHES, never whether a name appears.**

   What replaced them: the Mint kit, given `#hhDetail` as a second selector in detail-view.css and
   client-detail-view.css. One definition, two records.

   ONE RULE FROM THAT BLOCK IS KEPT BELOW, because it was never stepper-scoped and is still load
   bearing: without it the app-global sage placeholder in mh-theme.css leaks into this overlay.
   ============================================================================= */
/* CATCH-ALL: a control here must not inherit the app-global sage placeholder
   (mh-theme.css `.mh-app :is(input,textarea)::placeholder` = #6E948B). Lower specificity than
   the tile's own placeholder rule, which is what dresses the Mint fields. */
#hhDetail :is(input,textarea)::placeholder{color:var(--ink-4);font-weight:400;opacity:1;}


/* =============================================================================
   STUDENT DETAIL (POLISH) - the Program student detail reuses the #hhDetail chrome.
   The marker class .stu-detail scopes the few student-only tweaks so the real
   Household overlay is untouched. New .stu-* classes are student-only (the Household
   overlay never emits them) so they can be scoped to #hhDetail directly.
   ============================================================================= */
/* KPI tiles here are display-only (no navigation), so drop the pointer cursor + lift. */
#hhDetail.stu-detail .stat{cursor:default;}
#hhDetail.stu-detail .stat:hover{transform:none;}
/* Hero initials when the student has no photo (matches the roster card fallback). */
#hhDetail .hero-ini{font-size:38px;font-weight:800;color:#fff;letter-spacing:1px;line-height:1;}
/* Per-section white card (same surface as .col) that sits under each .members header. */
#hhDetail .stu-card{background:var(--mh-surface,rgb(var(--tg-rgb,255,255,255)));border:1px solid var(--mh-line);border-radius:17px;padding:18px 20px;box-shadow:0 1px 3px rgba(34,48,42,.07);}
/* Points header block inside the gift-card section. */
#hhDetail .stu-pts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
#hhDetail .stu-pts-big{font-family:var(--mh-font-head);font-size:30px;font-weight:800;color:var(--mh-green-d);line-height:1;display:flex;align-items:baseline;gap:8px;}
#hhDetail .stu-pts-big span{font-size:12px;font-weight:600;color:var(--mh-muted);letter-spacing:.02em;}
#hhDetail .stu-muted{font-size:12.5px;color:var(--mh-muted);font-weight:600;flex:none;}
#hhDetail .stu-empty{font-size:13.5px;color:var(--mh-muted);}
/* Divider-separated rows inside a .stu-card (programs / children / gift cards). */
#hhDetail .stu-rows{display:flex;flex-direction:column;}
#hhDetail .stu-pts + .stu-rows,#hhDetail .stu-pts + .stu-empty{margin-top:14px;border-top:1px solid var(--mh-line);padding-top:6px;}
#hhDetail .stu-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--mh-line);}
#hhDetail .stu-row:last-child{border-bottom:none;padding-bottom:0;}
#hhDetail .stu-row:first-child{padding-top:0;}
#hhDetail .stu-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;}
#hhDetail .stu-rmain{flex:1;min-width:0;}
#hhDetail .stu-rn{font-weight:700;font-size:14px;color:var(--mh-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#hhDetail .stu-rs{font-size:12px;color:var(--mh-muted);margin-top:2px;}
/* Programs-row completion select: the global .mh-selwrap forces width:100% (which squished
   the row text); pin it to a fixed pill so the name/meta keep their space. */
#hhDetail .stu-setsel{flex:none;width:158px;display:inline-block;position:relative;}
#hhDetail .stu-setsel > select{width:100%;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--mh-ink);appearance:none;-webkit-appearance:none;cursor:pointer;background:var(--mh-ctrl-fill);border:1px solid transparent;border-radius:999px;padding:8px 34px 8px 14px;}
/* POLISH: no field icons (removed in SF); clean label-over-value. Section titles read a
   step bigger than the field labels for a clear hierarchy. */
#hhDetail.stu-detail .col-h,#hhDetail.stu-detail .members-h{font-size:18px;}
#hhDetail.stu-detail .field.stu-field{gap:0;}
#hhDetail.stu-detail .field .fk{font-size:11px;letter-spacing:.04em;}
#hhDetail.stu-detail .field .fv{font-size:14px;margin-top:3px;}
#hhDetail .stu-notes{font-size:14px;color:var(--mh-ink);line-height:1.6;white-space:pre-wrap;}
body.dark #hhDetail .stu-card{background:#242c28;border-color:#33403a;}
body.dark #hhDetail .stu-rn,body.dark #hhDetail .stu-notes{color:#eef1ee;}
/* Children as modern, compact Family-Member-style cards (they carry little data, so the
   full 178px member card would be mostly empty). Clickable -> child detail popup. */
#hhDetail .stu-childcard{min-height:auto;padding:15px 17px;gap:12px;cursor:pointer;}
#hhDetail .stu-childcard .mc-av{width:44px;height:44px;}
#hhDetail .stu-childcard .mc-name{font-size:14.5px;}
#hhDetail .stu-childstats{display:flex;gap:18px;border-top:1px solid var(--mh-line);padding-top:11px;margin-top:auto;}
#hhDetail .stu-childstats>div{flex:1;min-width:0;}
#hhDetail .stu-childstats .k{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mh-muted);margin-bottom:3px;}
#hhDetail .stu-childstats .v{font-size:13px;font-weight:600;color:var(--mh-ink);}
#hhDetail .stu-addchild{min-height:auto;padding:22px 16px;}
#hhDetail .stu-editnote{font-size:12.5px;color:var(--mh-muted);background:var(--mh-cream-2);border:1px solid var(--mh-line);border-radius:12px;padding:11px 14px;}
body.dark #hhDetail .stu-childstats .v{color:#eef1ee;}
body.dark #hhDetail .stu-editnote{background:#1d2421;}

/* ------------------------------ #mvWiz ------------------------------------- */
#mvWiz{position:fixed;inset:0;background:rgba(33,40,38,.5);backdrop-filter:blur(3px);z-index:100000;display:none;align-items:center;justify-content:center;padding:20px;}#mvWiz.on{display:flex;}#mvWiz.on .mvbox{animation:mvPop .26s cubic-bezier(.2,.9,.3,1.15);}@keyframes mvPop{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}.mvbox{background:var(--mh-surface);border-radius:20px;width:min(660px,96vw);max-height:92vh;display:flex;flex-direction:column;box-shadow:0 28px 80px rgba(0,0,0,.35);overflow:hidden;}.mvhead{position:relative;display:flex;align-items:center;gap:14px;padding:22px 24px 20px;color:#fff;overflow:hidden;background:radial-gradient(360px 200px at 108% -30%,rgba(201,123,90,.28),transparent 60%),radial-gradient(300px 190px at -8% 120%,rgba(110,156,144,.32),transparent 60%),linear-gradient(118deg,#2E4A43,#3D655D 55%,#4E7C72);}.mvhead::after{content:'';position:absolute;right:-46px;top:-58px;width:190px;height:190px;border-radius:50%;border:1.5px solid rgba(255,255,255,.13);box-shadow:0 0 0 26px rgba(255,255,255,.05),0 0 0 54px rgba(255,255,255,.03);pointer-events:none;}.mvhead .mvico{width:44px;height:44px;border-radius:13px;background:rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1)));border:1px solid rgba(255,255,255,.22);border-right-color:var(--tg-edge-r,rgba(255,255,255,.22));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.22));display:flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}.mvhead .mvico svg{width:22px;height:22px;color:#F2D8A7;}.mvhead .mvtt{flex:1;min-width:0;}.mvhead .mv-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);margin-bottom:3px;}.mvhead h3{margin:0;font-size:17.5px;font-weight:800;letter-spacing:.2px;}.mvhead .x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;background:rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)));border:none;color:#fff;font-size:18px;cursor:pointer;line-height:1;transition:.15s;z-index:2;}.mvhead .x:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1)));}.mvsteps{position:relative;display:flex;gap:0;padding:18px 26px 14px;border-bottom:1px solid var(--mh-line);background:var(--mh-cream-2);}.mvsteps .mvline{position:absolute;left:60px;right:60px;top:33px;height:2.5px;background:var(--mh-line);border-radius:2px;overflow:hidden;}.mvsteps .mvline i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mh-green),#3D655D);transition:width .35s ease;}.mvstep{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:none;font-family:inherit;cursor:default;padding:0;}.mvstep .num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:var(--mh-muted);background:var(--mh-surface);border:2px solid var(--mh-line);transition:.25s;}.mvstep .lbl{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--mh-muted);transition:.25s;}.mvstep.on .num{background:var(--mh-green);border-color:var(--mh-green);color:#fff;box-shadow:0 6px 14px rgba(78,124,114,.34);transform:scale(1.08);}.mvstep.on .lbl{color:var(--mh-green-d);}.mvstep.done .num{background:var(--mh-green-d);border-color:var(--mh-green-d);color:transparent;position:relative;}.mvstep.done .num::after{content:'';position:absolute;inset:0;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}.mvstep.done .lbl{color:var(--mh-ink);}.mvbody{padding:22px 26px;overflow-y:auto;}.mvpane{animation:mvIn .3s ease;}@keyframes mvIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:none;}}.mvpane .mfld{margin-bottom:16px;}.mvpane label.flbl{display:block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mh-muted);margin-bottom:7px;}.mvpane input[type=text],.mvpane select,.mvpane textarea,.mvpane input[type=date]{width:100%;font-family:inherit;font-size:14px;border:1px solid transparent;border-radius:var(--mh-ctrl-r);padding:12px 14px;color:var(--mh-ink);background:var(--mh-ctrl-fill);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;}.mvpane select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;background-image:var(--mh-ctrl-caret);background-repeat:no-repeat;background-position:right 14px center;background-size:14px 14px;}.mvpane select:open{background-image:var(--mh-ctrl-caret-up);}.mvpane input[type=text]:focus,.mvpane input[type=date]:focus,.mvpane select:focus,.mvpane textarea:focus{outline:none;border-color:var(--mh-ctrl-focus-border);background-color:var(--mh-surface);box-shadow:var(--mh-ctrl-focus-ring);}.mvpane textarea{min-height:70px;resize:vertical;}.mvwho{display:flex;gap:18px;align-items:center;background:var(--mh-cream-2);border-radius:16px;padding:18px;box-shadow:var(--mh-shadow-sm);}.mvwho .av{width:62px;height:62px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;background:linear-gradient(145deg,#4E7C72,#2E4A43);box-shadow:0 6px 16px rgba(46,74,67,.3);overflow:hidden;}.mvwho .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}.mvwho .rows{flex:1;}.mvwho .r{display:flex;gap:10px;font-size:13.5px;padding:4px 0;}.mvwho .r b{min-width:140px;color:var(--mh-muted);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;align-self:center;}.mvwho .r span{color:var(--mh-ink);font-weight:600;}.mvradio,.mvchk{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--mh-ink);font-weight:600;padding:11px 13px;cursor:pointer;border:1px solid var(--mh-line);border-radius:12px;margin-bottom:8px;background:var(--mh-surface);transition:border-color .15s,background .15s;}.mvradio:hover,.mvchk:hover{border-color:var(--mh-green);}.mvradio:has(input:checked){border-color:var(--mh-green);background:#EAF1EE;box-shadow:0 0 0 1px var(--mh-green) inset;}.mvchk:has(input:checked){border-color:var(--mh-green);background:#EAF1EE;}.mvradio input,.mvchk input{margin-top:2px;accent-color:var(--mh-green);width:16px;height:16px;flex:none;}.mvnote{font-size:12.5px;color:var(--mh-green-d);background:#E6EFEC;border:1px solid #cfe0da;border-radius:10px;padding:10px 13px;margin-top:8px;font-weight:600;}.mvsum{background:var(--mh-cream-2);border-radius:14px;padding:18px;font-size:13.5px;box-shadow:var(--mh-shadow-sm);}.mvsum .sr{display:flex;gap:10px;padding:5px 0;}.mvsum .sr b{min-width:84px;color:var(--mh-muted);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;align-self:center;}.mvsum .sr span{color:var(--mh-ink);font-weight:600;}.mvfoot{display:flex;align-items:center;gap:10px;padding:16px 24px;border-top:1px solid var(--mh-line);background:var(--mh-cream-2);}.mvfoot button{padding:11px 22px;border-radius:999px;border:1px solid var(--mh-line);background:var(--mh-surface);color:var(--mh-ink);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;}.mvfoot button:hover{border-color:var(--mh-green);color:var(--mh-green-d);}.mvfoot #mvNext{background:var(--mh-green);color:#fff;border-color:var(--mh-green);}.mvfoot #mvNext:hover{background:var(--mh-green-d);color:#fff;}.mvfoot #mvDo{background:#C97B5A;color:#fff;border-color:#C97B5A;box-shadow:0 8px 18px rgba(201,123,90,.3);}.mvfoot #mvDo:hover{background:#B96A4A;color:#fff;border-color:#B96A4A;}.mvfoot #mvDo[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;}@media(max-width:560px){.mvstep .lbl{display:none;}.mvsteps .mvline{left:40px;right:40px;}}body.dark .mvbox{background:#242c28;}body.dark .mvsteps,body.dark .mvfoot{background:#1d2421;border-color:#33403a;}body.dark .mvwho,body.dark .mvsum,body.dark .mvradio,body.dark .mvchk{background:#1d2421;border-color:#33403a;}body.dark .mvwho .r span,body.dark .mvsum .sr span,body.dark .mvradio,body.dark .mvchk{color:#eef1ee;}

/* WIZARD TITLES ARE UPPERCASE, APP-WIDE (CEO, Jul 31 2026) - see the note in detail-view.css.
   Appended as an override rather than edited into the minified block above: that block is one
   4000-character line, and a surgical edit inside it is how a stray brace takes out every rule
   after it. The eyebrow above this title is ALREADY uppercase, so the two now read as a set. */
.mvhead h3{ text-transform:uppercase; letter-spacing:.03em; }

/* SUBSIDY-AUTOCOMPLETE-01 (Aug 10 2026): the "this subsidy has finished" banner.
   Amber, NOT red - a completed subsidy is a normal end of a term, not a fault. It
   sits ABOVE the summary figures so the numbers below are read as a final record
   rather than as money still going out. */
#hhDetail .hh-housing-ended{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  margin-bottom:14px;padding:12px 16px;border-radius:12px;font-size:13.5px;line-height:1.5;
  color:#7A5312;background:rgba(216,155,61,.12);border:1px solid rgba(216,155,61,.30);}
#hhDetail .hh-housing-ended .hhe-ic{flex:none;width:18px;height:18px;color:#9A6B1E;}
#hhDetail .hh-housing-ended .hhe-ic svg{width:100%;height:100%;}
#hhDetail .hh-housing-ended span{min-width:0;}
#hhDetail .hh-housing-ended .hh-housing-add{margin-left:auto;}

/* E5 - SCHOOLS & AREAS (14 Sep 2026). Two ranked heat lists on the Clients section. The bar's width
   is the count against the busiest row; its shade steps up by quarter, pine family only. */
.mh-app .ar-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
@media (max-width: 980px) { .mh-app .ar-grid { grid-template-columns:1fr; } }
.mh-app .ar-card { background:var(--mh-card, rgb(var(--tg-rgb,255,255,255))); border:1px solid var(--mh-line); border-radius:16px; padding:16px 18px 10px; }
.mh-app .ar-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.mh-app .ar-head h3 { margin:0; font-size:14px; font-weight:800; letter-spacing:.02em; color:var(--mh-ink); }
.mh-app .ar-sum { font-size:12px; font-weight:600; color:var(--mh-muted); }
.mh-app .ar-empty { margin:6px 0 10px; font-size:12.5px; color:var(--mh-muted); }
.mh-app .ar-row { display:grid; grid-template-columns:minmax(120px, 34%) 1fr 36px; align-items:center; gap:12px; padding:8px 0; }
.mh-app .ar-row + .ar-row { border-top:1px solid color-mix(in srgb, var(--mh-line) 70%, transparent); }
.mh-app .ar-lbl { min-width:0; display:flex; flex-direction:column; }
.mh-app .ar-lbl b { font-size:13px; font-weight:700; color:var(--mh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-app .ar-lbl small { font-size:11.5px; color:var(--mh-muted); }
.mh-app .ar-bar { height:12px; border-radius:999px; background:color-mix(in srgb, var(--mh-line) 55%, transparent); overflow:hidden; }
.mh-app .ar-bar i { display:block; height:100%; border-radius:999px; min-width:6px; }
.mh-app .ar-bar i.h1 { background:#B9D3CB; }
.mh-app .ar-bar i.h2 { background:#7FAE9F; }
.mh-app .ar-bar i.h3 { background:#4E7C72; }
.mh-app .ar-bar i.h4 { background:#2F5A50; }
.mh-app .ar-n { text-align:right; font-size:13px; font-weight:800; color:var(--mh-ink); font-variant-numeric:tabular-nums; }
body.dark .mh-app .ar-card { background:rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))); }

/* =============================================================================
   CHILDREN & SCHOOLS (15 Sep 2026). Household cards (the standard .idcard) with their children
   listed inside; each child carries ONE readiness chip from SchoolStage:
     .ok  enrolled (pine)   .due eligible, not enrolled (amber)   .req required by law, no school (clay)
   The KPI strip counts the five stages and filters the cards; the segment picks Needs a school /
   Enrolled / All children / Schools & Areas.
   ============================================================================= */
.mh-app .ct-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:14px; }
.mh-app .ct-bar .cl-srchbar { margin-left:auto; }
.mh-app .ct-year { font-size:12px; font-weight:700; color:var(--mh-muted); }
/* Five stages on ONE row down to a ~560px pane (104px each), then they wrap evenly - measured: a 150px
   minimum put four on a row and left the fifth alone. */
.mh-app .ct-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 104px), 1fr)); gap:10px; margin-bottom:16px; }
.mh-app .ct-kpi { display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; text-align:left; cursor:pointer;
    background:var(--mh-surface); border:1px solid var(--mh-line); border-radius:14px; padding:11px 14px; font:inherit; color:var(--mh-ink);
    transition:border-color .15s, box-shadow .15s, transform .15s; }
.mh-app .ct-kpi:hover { border-color:var(--mh-green); transform:translateY(-1px); box-shadow:var(--mh-shadow-sm); }
.mh-app .ct-kpi.on { border-color:var(--mh-green); box-shadow:0 0 0 2px color-mix(in srgb, var(--mh-green) 35%, transparent); }
.mh-app .ct-kpi .k { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mh-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mh-app .ct-kpi .n { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.15; }
.mh-app .ct-kpi .s { font-size:11.5px; font-weight:600; color:var(--mh-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mh-app .ct-kpi .s b { color:#9A5B12; font-weight:800; }
.mh-app .ct-kids { display:flex; flex-direction:column; margin-top:12px; border-top:1px solid var(--mh-line); }
.mh-app .ct-kid { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; row-gap:6px; align-items:center;
    padding:10px 6px; border-radius:12px; cursor:pointer; transition:background .15s; }
.mh-app .ct-kid + .ct-kid { border-top:1px solid color-mix(in srgb, var(--mh-line) 70%, transparent); }
.mh-app .ct-kid:hover { background:color-mix(in srgb, var(--mh-green) 7%, transparent); }
.mh-app .ct-kid:focus-visible { outline:2px solid var(--mh-green); outline-offset:1px; }
.mh-app .ct-av { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:800; overflow:hidden; flex:none; }
.mh-app .ct-av img { width:100%; height:100%; object-fit:cover; }
.mh-app .ct-who { min-width:0; }
.mh-app .ct-nm { font-size:13.5px; font-weight:700; color:var(--mh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mh-app .ct-sub { font-size:11.5px; font-weight:600; color:var(--mh-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* One stack for every child (18 Sep 2026, owner: the Add school buttons must sit in the same place on the
   left and right cards). Chip, then the detail line, then Next, then the button - each on its own line, so a
   short chip never pulls the button up beside it while a longer one pushes it down. */
.mh-app .ct-state { grid-column:2; display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.mh-app .ct-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 10px; border-radius:999px;
    font-size:11.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid transparent; }
.mh-app .ct-chip i { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.mh-app .ct-chip.ok  { color:#2F6B57; background:rgba(78,124,114,.13); border-color:rgba(78,124,114,.30); }
.mh-app .ct-chip.due { color:#9A5B12; background:rgba(216,155,61,.15); border-color:rgba(216,155,61,.38); }
.mh-app .ct-chip.req { color:#A2482A; background:rgba(201,123,90,.15); border-color:rgba(201,123,90,.40); }
.mh-app .ct-detail { font-size:11.5px; font-weight:600; color:var(--mh-muted); min-width:0; }
.mh-app .ct-next { font-size:11px; font-weight:700; color:var(--mh-green-d, #3D655D); white-space:nowrap; }
/* The reason line sits ABOVE the Eligible chip (owner, 18 Sep 2026): line, chip, then Add school. */
/* An enrolled child whose class for the new school year nobody has confirmed (18 Sep 2026). */
.mh-app .ct-state .ct-line.ask { color:#9A5B12; font-weight:700; }
.mh-app .ct-segn { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:999px;
    font-size:10.5px; font-weight:800; color:#fff; background:#C98A2E; vertical-align:1px; }
.mh-app .ct-state .ct-line { order:-1; display:block; max-width:100%; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Add school (18 Sep 2026) - the row's one action, in the brand outline so it reads as a button, not a chip. */
.mh-app .ct-add { display:inline-flex; align-items:center; gap:5px; padding:3px 11px 3px 8px; border-radius:999px; cursor:pointer;
    font:inherit; font-size:11.5px; font-weight:800; white-space:nowrap; color:var(--mh-green-d, #3D655D);
    background:var(--mh-surface); border:1.5px solid color-mix(in srgb, var(--mh-green) 45%, transparent);
    transition:background .15s, border-color .15s, color .15s; }
.mh-app .ct-add svg { width:12px; height:12px; flex:none; }
.mh-app .ct-add:hover { background:var(--mh-green); border-color:var(--mh-green); color:#fff; }
.mh-app .ct-add:focus-visible { outline:2px solid var(--mh-green); outline-offset:2px; }
body.dark .mh-app .ct-add { background:transparent; color:#9fc3b8; }
@container mhcard (min-width: 520px) {
    .mh-app .ct-kid { grid-template-columns:auto minmax(0,1fr) auto; }
    .mh-app .ct-state { grid-column:3; align-items:flex-end; max-width:260px; }
    .mh-app .ct-state .ct-detail, .mh-app .ct-state .ct-next { text-align:right; }
}
body.dark .mh-app .ct-kpi { background:rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))); }
body.dark .mh-app .ct-chip.ok  { color:#9fc3b8; }
body.dark .mh-app .ct-chip.due { color:#E8B96A; }
body.dark .mh-app .ct-chip.req { color:#E59A7B; }
body.dark .mh-app .ct-kpi .s b { color:#E8B96A; }

/* WIZGRP01 (1 Oct 2026): the mover with no photo shows the studio person glyph (NO PHOTO = STUDIO DEFAULT), sized as on the records */
#mvWiz .mvwho .av .mh-noph{width:46%;height:46%}

/* HUNT02 (1 Oct 2026): the Movement footer wears the wizard footer pair (enroll-wizard.css FOOTBTN18, widened to #mvWiz).
   The old .mvfoot pill rules and #mvNext / #mvDo colours are outranked there; the commit keeps the clay of an
   irreversible action (Create Household's btn--create values). */
#mvWiz .mvfoot.m-foot{gap:10px;padding:16px 24px}
#mvWiz .m-foot .ui-btn.primary.mv-commit{background:linear-gradient(120deg,#C97B5A,#B5663F);box-shadow:0 8px 20px rgba(201,123,90,.34)}
#mvWiz .m-foot .ui-btn.primary.mv-commit:hover:not(:disabled){background:linear-gradient(120deg,#C97B5A,#B5663F);box-shadow:0 11px 26px rgba(201,123,90,.44)}
#mvWiz .m-foot .ui-btn.primary.mv-commit:disabled{opacity:.45;box-shadow:none}