/* ============================================================
   THE MINT STANDARD ON THE HOUSEHOLD RECORD (#hhDetail).  7 September 2026.

   HIS INSTRUCTION: "anything you leaned from the deployment and our roles and standard
   and editing engine you'll do it on HOUSEHOLD mock ... Now Deploy our standard fields
   there and editing engine and some section dosn't have KPI cards style like HOUSING
   Subsidy and STATUS HISTORY."

   ---------------------------------------------------------------------------
   WHAT THIS FILE IS NOT: A COPY OF THE CLIENT RECORD'S CSS.
   ---------------------------------------------------------------------------
   Not one Mint declaration is duplicated here. The card, the capsule, the meter, the
   tiles, the two states, the edit controls, the pickers, the calendar anchoring, the
   locked grey and the "N left" chip all still live in exactly one place each -
   detail-view.css and client-detail-view.css - and every one of those rules was given a
   SECOND SELECTOR (`#hhDetail ...` beside `#mhDetail ...`) rather than a second copy.
   129 selectors, 0 declarations moved, and it was verified rule-by-rule: every original
   selector set and every declaration body is byte-identical to what it was before.

   That matters more here than anywhere. Two homes for one value is the trap that made the
   orange severity silent on 5 Sep and cost nine edits for one hover; doing it across two
   whole records would have guaranteed the two drift the first time either is tuned.

   SO WHAT IS IN THIS FILE is only what is genuinely the HOUSEHOLD'S, and there are four
   kinds of it:
     1. the base `.pd-card` box the household never had (it is not a DetailShell host)
     2. its own grid, and the two `:has()` raises the popups need inside that grid
     3. its own buttons on the Mint button standard - it has .btn / .hhbtn, not .ui-btn
     4. the surfaces that had to follow the cards onto glass, or be left as the only
        opaque white things on a frosted record

   ---------------------------------------------------------------------------
   WHY A NEW FILE AND NOT mh-household.css
   ---------------------------------------------------------------------------
   LOAD ORDER, MEASURED BEFORE DECIDING. mh-household.css loads at position 22, and both
   Mint sheets load at 46 and 48 - so anything written there would sit BEFORE the rules it
   needs to refine and would lose every equal-specificity contest. Moving that link was the
   other option and was rejected: it would have re-ordered the household sheet against
   nineteen unrelated stylesheets to solve one problem. A new sheet, linked directly after
   client-detail-view.css, changes the order of nothing.

   Every selector is `#hhDetail`. The client record cannot see this file.
   ============================================================ */


/* ============================================================
   1. THE CARD BOX ITSELF.

   `.pd-card` is DetailShell's, and the household is NOT a DetailShell host - so the
   twinning gave it `.pd-card.mint` (the glass, the radius, the padding, the container
   query context) while the plain `.pd-card` underneath it was never twinned, deliberately:
   that rule paints the OLD opaque card, which is the thing this pass exists to remove.

   What was still needed from it is the box behaviour, and only that. `min-width:0` is the
   grid law this app has been bitten by before - without it a long value line makes the
   column refuse to shrink and the two cards stop matching widths.
   ============================================================ */
#hhDetail .pd-card{display:flex;flex-direction:column;min-width:0}
#hhDetail .pd-card.full{grid-column:1/-1}


/* ============================================================
   2. THE GRID, AND THE TWO RAISES THE POPUPS CANNOT LIVE WITHOUT.

   `.body` was already a two-column grid; the only thing it needed was `align-items:start`.
   Under the old read cards both columns were stretched to match, which is right when the
   cards are plain panels of unequal length. A Mint card has a container query keyed to its
   OWN width and a hover lift of its own, and stretching the shorter one leaves a tall empty
   pane of glass under its last tile.

   AND THEN THE PART THAT IS NOT COSMETIC. A picker inside a tile paints UNDER the next
   card, and z-index on the popup can never fix it: the popup's stacking context is its own
   card, and the second card is a LATER SIBLING in this grid, so it paints after the whole
   first card - popup included - however high the popup's own number goes. THE TRAPPING
   ELEMENT IS THE CARD, so the CARD is what has to be raised. `:has()` keeps it
   self-clearing: nothing is left sitting above its neighbours once the list closes.

   The card-level raise is already twinned from client-detail-view.css. What is missing is
   the GRID's, because the client's grid is `.pd-grid` and the household's is `.body`.
   ============================================================ */
/* THE TWO CARDS ARE THE SAME HEIGHT. His call: "the HOUSHOLD DETAILS and CONTACT INFRMATION
   Height must be same size please." I had set `align-items:start` on the reasoning that
   stretching the shorter card leaves a pane of empty glass under its last tile. He is looking at
   two cards side by side, and two cards of different heights read as unfinished before they read
   as efficient. Stretch - which is what the grid did before this pass touched it.

   IT COSTS NO TILE A PIXEL, and that is not a hope: `.pd-card.mint` is `flex-direction:column`,
   so a taller CARD does not grow its `.mint-grid` - no flex-grow anywhere - and the rows keep
   their natural height. Re-measured after: 26 tiles, 0 moved. */
#hhDetail .body.mint-body{gap:16px}

/* THE RAISE WAS 400 AND IT BEAT THE HEADER.  Fixed 7 Sep, on his report: "when I am clicking on
   the drop down fields check the whole section coming front of the Header which that looks very
   bad."

   HE IS RIGHT AND THE NUMBER WAS LAZY. A picker's popup has to escape its own card, and the
   trapping element is the CARD - so the CARD gets raised, which means the GRID around it must be
   raised too or the next section paints over it. I reached for 400 because that is what the
   client record uses. But the client's grid is not a sibling of a STICKY HEADER; this one is.
   `.hero` is `position:sticky; z-index:3`, so 400 put the entire record in front of the family's
   own name and QR code.

   THE RAISE ONLY HAS TO BEAT WHAT IS BELOW IT. z-index:2 clears every following section - they
   are static, and a positioned element with a z-index beats static content whatever the source
   order - and it LOSES to the header, which is the correct outcome for a sticky header: content
   scrolls under it, it does not scroll under content.

   THE `z-index:1` I HAD PUT ON THE SECTIONS IS GONE TOO. It did nothing: later siblings already
   paint above earlier ones, so raising them changed no order and only created three stacking
   contexts that a popup would then have had to fight. Raising the grid is the whole fix. */
#hhDetail .body:has(.mint-w.selopen),
#hhDetail .body:has(.dp.open){position:relative;z-index:2}


/* ============================================================
   3. THE MINT BUTTON STANDARD, ON THE HOUSEHOLD'S OWN BUTTONS.

   The rule lives in client-detail-view.css under THE MINT BUTTON STANDARD and in section 4b
   of the field standard. It could not simply be twinned because it names the DetailShell's
   controls - `.ui-btn`, `.dv-close-btn`, `.dv-more-btn`, `.pd-tabs button` - and the
   household has none of them. It has `.btn`, `.hhbtn` and two link-shaped actions.

   SO THE TOKENS ARE REUSED AND ONLY THE SELECTORS ARE NEW. --mint-grad, --mint-grad-glow,
   --mint-lift-sm, --mint-glass, --mint-rim, --mint-float and --mint-blur are all inherited
   from `#hhDetail.mint-host`, which the twinning already declared. Nothing here invents a
   colour, a shadow or a curve.

   THE FIVE STATES, unchanged from 4b:
     REST      the surface's own material - glass for chrome, --mint-grad for primary
     HOVER     IT COMES UP. -2px + --mint-lift-sm + the material FIRMS + a white hairline
     PRESS     settles back to 0 and drops to the contact layer. Press = arrival
     CURRENT   --mint-grad and NO lift - you are already there, so it cannot rise
     DISABLED  no lift, no shadow, no hairline. A dead control must not answer a hover

   A LIFT NEEDS ROOM, AND THAT IS MEASURED, NEVER ASSUMED - the tab row failed this check on
   the client record and cost 12px of header. MEASURED HERE: `.foot` carries 15px of padding
   and --mint-lift-sm reaches ~10px below the control, so a -2px lift has 15px to live in
   and needs no geometry change. `.mc-acts` sits 16px above the card's bottom padding, which
   clears the same 10px. Neither needed a pixel.
   ============================================================ */
#hhDetail .btn,
#hhDetail .hhbtn,
#hhDetail .hh-housing-add{
  transition:transform .18s ease,box-shadow .18s ease,background var(--t),
             border-color var(--t),color var(--t);
}

/* REST - the ghost pair are chrome, so they wear the record's own glass. */
#hhDetail .btn-ghost{
  background:var(--mint-glass);
  backdrop-filter:var(--mint-blur);-webkit-backdrop-filter:var(--mint-blur);
  border:1px solid var(--mint-rim);
  box-shadow:var(--mint-float);
  color:var(--brand-600);
}
/* THE PRIMARY TAKES THE MATTHEW HOUSE GRADIENT. It was flat `--brand` #2E4A43 - the same
   single dead-flat block of the darkest pine he called "too dark" on the client record's
   tabs. Same statement, same paint, one home for it. */
#hhDetail .btn-primary{
  background:var(--mint-grad);border-color:transparent;color:#fff;
  box-shadow:var(--mint-grad-glow);
}

/* HOVER - the glass firms up and the control comes up. */
#hhDetail .btn-ghost:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:var(--ink-1);border-color:rgba(255,255,255,.85);
  transform:translateY(-2px);
  box-shadow:var(--mint-lift-sm),inset 0 0 0 1px rgba(255,255,255,.85);
}
#hhDetail .btn-primary:hover{
  background:var(--mint-grad);
  transform:translateY(-2px);
  box-shadow:var(--mint-grad-glow-hi);
}

/* PRESS - settles to 0 and keeps only the contact layer. The click LANDS. */
#hhDetail .btn:active,
#hhDetail .hhbtn:active,
#hhDetail .hh-housing-add:active{
  transform:translateY(0);
  box-shadow:0 2px 5px -3px rgba(30,55,48,.22),inset 0 0 0 1px rgba(255,255,255,.7);
}

/* DISABLED - a dead control never answers a hover. */
#hhDetail .btn[disabled]:hover,
#hhDetail .hhbtn[disabled]:hover{transform:none;box-shadow:var(--mint-float)}

/* THE MEMBER-CARD ACTIONS are row-level buttons, not decisions about the record, so they
   take the same standard at a smaller pitch - the same relationship the client record's
   in-panel actions have to its footer pair. */
#hhDetail .hhbtn:hover{
  transform:translateY(-2px);
  box-shadow:var(--mint-lift-sm),inset 0 0 0 1px rgba(255,255,255,.85);
}

/* The two subsidy actions are links wearing a button's shape, so they answer a hover the
   same way everything else on the record does. */
#hhDetail .hh-housing-add:hover{
  transform:translateY(-2px);
  box-shadow:var(--mint-lift-sm);
}

body.dark #hhDetail .btn-ghost{color:#B7D6C8}
body.dark #hhDetail .btn-ghost:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4;border-color:rgba(180,210,235,.16);
  box-shadow:var(--mint-lift-sm),inset 0 0 0 1px rgba(180,210,235,.16);
}


/* ============================================================
   4. THE SURFACES THAT HAD TO FOLLOW THE CARDS ONTO GLASS.

   THIS IS A JUDGEMENT CALL AND IT IS FLAGGED AS ONE. He asked for two named sections; he
   did not ask for these. But the two detail cards ARE the middle of this record, and once
   they are frosted the six KPI tiles above them and the member cards below them become the
   only opaque white boxes on a glass record - three materials on one screen, which is worse
   than the state it started in. Changing them is a consequence of the change he asked for,
   not an addition to it. Reversing it is one block, and it is this one.

   WHICH FROSTING - and the two are NOT interchangeable, which is the whole reason this is
   written down. The app has exactly two:
     the Mint CARD    rgba(255,255,255,.40) + blur(24px) saturate(150%)
     the dashboard    rgba(255,255,255,.62) + blur(22px) saturate(1.4)
   Neither is right for these. A KPI tile and a member card are TILES - small boxes sitting
   ON the canvas, not panels containing other things - so they take THE TILE'S recipe,
   `.mint-w`: rgba(255,255,255,.72) with the white rim and the tile's own shadow. Copied
   from `.mint-w`, not re-picked, so the record has one material at each depth.

   AND NOTHING ELSE ABOUT THEM MOVES. The accent sweep, the left accent bar, the icon tints,
   the doc chip, the status pills, the QR tiles and every existing hover are untouched -
   only the ground under them.
   ============================================================ */
/* CORRECTED 7 Sep, on his call: "change the above KPI cards ... same as the other detail KPI
   cards style all of them must match".

   I HAD PICKED THE WRONG ONE OF THE TWO. My reasoning was that a KPI tile and a member card are
   small boxes, so they should take the TILE's recipe (`.72` white, no blur). He is looking at the
   whole record at once, and the thing his eye compares them against is the big frosted card
   directly below them - so at `.72` and unblurred they read as a paler, flatter material sitting
   above the real one. **They take the CARD's recipe now**: the same `--mint-glass`, the same
   `--mint-blur`, the same `--mint-rim`. One material on the record, top to bottom.

   THE TOKENS, NOT THE LITERALS. `.pd-card.mint` freezes its own values because they are the
   mock's approved colours; everything here reads the variables the host declares, so if that card
   is ever re-tuned these follow it instead of drifting away from it.

   THE MEMBER CARDS COME TOO. He named the six at the top, but leaving the roster on a third
   material would recreate exactly the problem he is pointing at, one section lower.

   GEOMETRY IS UNTOUCHED - he said background, and the radii are load-bearing: 13px on a 15px-padded
   stat is not the same shape decision as 22px on a 22px-padded card. Say so and let him call it. */
#hhDetail .stat,
#hhDetail .mcard,
#hhDetail .add-fam{
  background:var(--mint-glass);
  backdrop-filter:var(--mint-blur);-webkit-backdrop-filter:var(--mint-blur);
  border-color:var(--mint-rim);
  box-shadow:0 14px 34px -22px rgba(30,55,48,.38);
}
/* The hover keeps each card's own movement and only re-keys the shadow onto the card family's
   two-layer lift - a single wide shallow layer draws a straight-edged BAR under a wide box
   rather than a glow, which is the 5 Sep lesson. */
#hhDetail .stat:hover,
#hhDetail .mcard:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));
  border-color:rgba(255,255,255,.9);
  box-shadow:0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30);
}
/* The count pill beside "Family members" was the white card surface plus a hairline, which
   was correct when the cards were white. On glass it takes the pine tint every other piece
   of small chrome on this record was standardised onto. */
#hhDetail .members-h .count{
  background:rgba(47,107,87,.13);border-color:transparent;color:var(--brand-600);
}
body.dark #hhDetail .stat,
body.dark #hhDetail .mcard,
body.dark #hhDetail .add-fam{
  background:var(--mint-glass);border-color:var(--mint-rim);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.65);
}
body.dark #hhDetail .stat:hover,
body.dark #hhDetail .mcard:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)))}


/* ============================================================
   5. NOT EDITABLE - the household's three shapes of it.

   His rule, given on the client record and inherited here word for word: "show all fields
   and those fields are not editable gray them out", and "show them for staff but never
   allow them to click on them".

   THE TILE-LEVEL GREY IS ALREADY TWINNED - `.mint-w.ed.lockt` and its hollow dot, its muted
   label and its `.mint-note` reason all arrive from client-detail-view.css untouched. What
   is missing is the reach into the two things the household has that the client does not:
   the status TIMELINE and the member ROSTER.

   MUTED, NOT FADED AWAY. He was explicit about this on Key dates: staff must still be able
   to READ these while they work. A timeline you cannot read is worse than one you cannot
   edit, so the colour comes out and the contrast stays.

   AND `pointer-events` RATHER THAN A BACKDROP, the same choice the picker guard makes: a
   backdrop would swallow the click that ends the edit.
   ============================================================ */
/* EVERYTHING BUT THE CAPSULE, rather than a list of the pieces. The first version of this
   named .sh-timeline, .hh-housing-sum and .hh-housing-pays one by one - and it MISSED the
   "Add this family to Housing Subsidy" action, which sat in full brand green in the middle of
   a card that had gone grey, looking like the one live thing left on it. A list of children
   is a list that goes stale the next time a child is added; the card knows what it contains,
   so let it say so. The capsule is exempt because it is the thing that explains the grey. */
#hhDetail .pd-card.mint.noedit > *:not(.mint-ph){
  filter:grayscale(1);opacity:.72;pointer-events:none;
}

/* THE ROSTER. It is not a Mint card - the member cards are their own design and he has not
   asked for them to change - so the greying is written for it directly rather than borrowed.
   Same two moves, same reasoning. */
#hhDetail .members.hh-mem.noedit .mcards{filter:grayscale(1);opacity:.72;pointer-events:none}
#hhDetail .members.hh-mem.noedit .mcard:hover,
#hhDetail .members.hh-mem.noedit .add-fam:hover{transform:none;box-shadow:0 6px 16px -12px rgba(30,55,48,.35)}
/* THE REASON, NOT JUST THE GREY - the same rule a locked tile obeys. A whole section going
   quiet with no explanation is the largest dead end on the record. */
#hhDetail .members-h .mint-tag{margin-left:auto;text-align:right}
body.dark #hhDetail .pd-card.mint.noedit .sh-timeline{opacity:.62}


/* ============================================================
   6. THE DEEP LINK FROM A KPI TILE TO A FIELD TILE.

   The six KPI tiles at the top have always been shortcuts into the editor. They used to
   name a DOM id that the old form rendered; that form is gone, so they now name the field's
   DESCRIPTOR KEY - the same key the meter, the validator and the error state already use,
   so there is no second naming scheme that can rot.

   The flash is what tells the staff member which field they were sent to. It is drawn on
   the tile's own ring so it says the same thing focus says, one beat louder.
   ============================================================ */
@keyframes hhTileFlash{
  0%  {box-shadow:0 0 0 0 rgba(47,107,87,.34)}
  35% {box-shadow:0 0 0 5px rgba(47,107,87,.26)}
  100%{box-shadow:0 0 0 0 rgba(47,107,87,0)}
}
#hhDetail .mint-w.hh-flash{animation:hhTileFlash 1.3s var(--ease)}
@media (prefers-reduced-motion:reduce){
  #hhDetail .mint-w.hh-flash{animation:none;box-shadow:0 0 0 4px rgba(47,107,87,.26)}
}


/* ============================================================
   7. THE TWO CARDS' OWN SECTION WRAPPERS.

   `.hh-housing` and `.hh-history` were sections drawn straight on the canvas with their own
   heading rows. The heading is now the Mint capsule INSIDE the card, so the wrapper's only
   remaining job is the 24px side gutter that lines these up with the grid above them.
   ============================================================ */
#hhDetail .hh-housing .mint-ph{margin-bottom:12px}
#hhDetail .hh-history{padding:0 24px 22px;margin-top:16px}
/* THE "start a new subsidy" LINK LIVES IN THE CAPSULE now, where the client record puts its
   caption. It is an action, so it keeps its pill shape, but it must not shout louder than the
   card title it sits opposite. */
#hhDetail .hh-housing .mint-tag .hh-housing-link{
  display:inline-flex;align-items:center;gap:6px;color:var(--brand-600);text-decoration:none;
}
#hhDetail .hh-housing .mint-tag .hh-housing-link svg{width:13px;height:13px;stroke-width:2.4}
#hhDetail .hh-housing .mint-tag .hh-housing-link:hover{text-decoration:underline}
#hhDetail .hh-housing .dv-empty.inline .hh-housing-add{margin-top:14px}
/* The single-subsidy summary, the four-payment strip and the ended-subsidy banner
   (.hh-housing-sum / .hh-housing-pays / .hh-pay / .hh-housing-ended) are no longer rendered -
   the card lists every subsidy as a row instead. Their rules still sit in mh-household.css,
   unreferenced; left there rather than swept in the same pass so this change stays reviewable. */


/* ============================================================
   8. THE PROSE TILE IS WIDE IN BOTH MODES.

   `.mint-w.ed.wide` is twinned from the engine and spans the grid - but only with `.ed` on
   it, so a note tile was a full row while being edited and a THIRD of a row while being
   read. The reason the rule exists at all is that a paragraph in a third of a row is
   unusable, and that is just as true of a paragraph you are only reading. Language notes and
   Family note are the two.
   ============================================================ */
#hhDetail .mint-w.wide{grid-column:1 / -1}

/* AND THE PROSE TILE READS AS PROSE, WHICH IS TWO SEPARATE FIXES.

   1. IT WRAPS. `.mint-vl` is `white-space:nowrap` + ellipsis, which is exactly right for a
      value that must never push a tile wider than its column - a name, a date, a status. On a
      NOTE it means the record shows you the first line of what somebody wrote and hides the
      rest behind an ellipsis, with no way to reach it. A one-line summary of a case note is
      not a case note.

   2. IT DOES NOT CHANGE HEIGHT WHEN THE CARD FLIPS. MEASURED: the read tile was 71px and the
      textarea tile 139px, so both prose tiles jumped 68px the moment Edit was pressed - a
      straight breach of 4a rule 1, and one the client record never caught because Personal
      Information has no textarea on it. The floor is set to the SAME 92px min-height and 22px
      line-height the textarea already declares, copied rather than re-derived (that is the
      trap that shrank every tile by 2px on the client record), so the two modes measure equal.
      The old read card did exactly this too - `.note .nv` carried a 58px min-height for the
      same reason - so this is a floor being restored, not invented. */
/* KEYED TO `.prose`, NOT `.wide` - CORRECTED 8 Sep, and it is worth saying why.

   `.wide` means "spans the grid". `.prose` means "holds a paragraph". They were the same thing on
   the day this was written, so this floor was hung on `.wide` - and the moment a PICKER was made
   full width it inherited a 92px body for a one-word answer. He saw it as the tile changing size
   when he clicked it, and he was describing a real defect.

   A RULE MUST BE KEYED TO WHAT IT IS ABOUT. This one is about prose, so it says prose; the class
   is emitted from the descriptor's own kind ("ta"), which cannot drift from what the tile actually
   renders. Nothing else needs to remember not to be wide. */
#hhDetail .mint-w.prose .mint-vl{
  white-space:pre-wrap;overflow:visible;text-overflow:clip;
  min-height:92px;line-height:22px;
}


/* ============================================================
   9. THE WARNING STATE - a flagged family note.

   His ask: "when family not changed to the YES it must turn to warning color". The retired form
   did exactly this and the retired read card did too; both went with the stepper and the `.note`
   panel, so this is the behaviour restored on the tile rather than a new idea.

   AMBER IS THE CONTRACT'S `--warn` (#A67820, pending_intake), reused - not a fresh orange. The
   record already speaks it on the household status pill and the old ACTION NEEDED tag.

   THE NOTE TAKES THE FILL; THE FLAG TAKES ONLY ITS LABEL AND DOT. Two full amber slabs stacked on
   each other would read as two separate warnings rather than as one control and its switch. The
   thing being flagged is the note, so the note is what changes colour.

   `:not(.bad)` IS THE ORDERING DISCIPLINE, WRITTEN OUT RATHER THAN LEFT TO LOAD ORDER. A field can
   be both flagged AND invalid, and "this is wrong" outranks "this needs attention". The retired
   block relied on declaring warning before error in the same file; this sheet loads after the one
   that owns `.bad`, so relying on order would have silently inverted it. State the rule instead.
   ============================================================ */
#hhDetail .mint-w.warn:not(.bad){
  background:var(--warn-bg);
  border-style:solid;border-color:var(--warn);
}
#hhDetail .mint-w.warn:not(.bad)::before{
  background:var(--warn);box-shadow:0 0 0 3px rgba(166,120,32,.18);
}
#hhDetail .mint-w.warn:not(.bad) .mint-lb{color:var(--warn-ink)}
#hhDetail .mint-w.warn:not(.bad) .mint-vl,
#hhDetail .mint-w.warn:not(.bad) .mint-in{color:var(--warn-ink)}
#hhDetail .mint-w.warn:not(.bad) .mint-in::placeholder{color:rgba(122,86,18,.55)}
/* HOVER AND FOCUS ARE NAMED, or reaching for a flagged field repaints it as if nothing were
   flagged - the same discipline the retired rules carried, for the same reason. */
#hhDetail .mint-w.ed.warn:not(.bad):hover{background:var(--warn-bg)}
#hhDetail .mint-w.ed.warn:not(.bad):focus-within{
  background:var(--warn-bg);border-color:var(--warn);
  box-shadow:0 0 0 3px rgba(166,120,32,.24),var(--mint-lift-sm);
}
/* THE SWITCH BELOW IT: label and dot only. It is connected to the block above, not a second one. */
#hhDetail .mint-w[data-fk="noteflag"].warn:not(.bad){
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));border-color:rgba(166,120,32,.42);
}
#hhDetail .mint-w[data-fk="noteflag"].warn:not(.bad):hover{background:rgba(var(--tg-rgb,255,255,255),.85)}

/* THE TAG. An ALERT on a field, not a record status - so it keeps the solid amber the read card
   gave it and must never take the glass status pill, which would read as "this household is in
   the Pending state". */
#hhDetail .mint-w .mint-flag{
  margin-left:8px;padding:2px 7px;border-radius:999px;
  background:var(--warn);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.06em;vertical-align:1px;
}
body.dark #hhDetail .mint-w.warn:not(.bad){background:var(--warn-bg);border-color:rgba(227,192,113,.5)}
body.dark #hhDetail .mint-w.warn:not(.bad) .mint-lb,
body.dark #hhDetail .mint-w.warn:not(.bad) .mint-vl,
body.dark #hhDetail .mint-w.warn:not(.bad) .mint-in{color:var(--warn-ink)}


/* ============================================================
   10. THE HEAD-OF-HOUSEHOLD MOCK - two standard fields in a glass modal.

   His ask: "add two fields and those drop down fields must contain the values ... remember
   deploy our standard fields, and add a note".

   THE FIELDS ARE THE RECORD'S OWN TILES, not a copy of them - the modal renders through the
   SAME PTiles fragment the cards use, forced into edit because a decision form is always
   being filled in. That is only possible because the mock lives INSIDE `#hhDetail`, which is
   what every Mint rule and the picker's JS are scoped to.

   ONE COLUMN, not the card's grid. The tiles are a short QUESTIONNAIRE here, not a record's
   field set: two full-width rows read top-to-bottom the way the question is asked, where two
   narrow columns would make the eye choose which to answer first.
   ============================================================ */
#hhDetail .cs-modal.hh-swap{max-width:520px}
#hhDetail .hh-swap .mint-grid{grid-template-columns:1fr;gap:10px;margin:4px 0 2px}
/* The tile keeps its own material; it just sits on the modal's glass rather than a card's,
   so it firms slightly to stay legible against the lighter ground - the same reasoning the
   overflow MENU rows use (a state has to be legible against ITS OWN ground). */
#hhDetail .hh-swap .mint-w.ed{background:rgba(var(--tg-rgb,255,255,255),calc(.78*var(--tg-k,1)))}
#hhDetail .hh-swap .mint-w.ed:hover{background:rgba(var(--tg-rgb,255,255,255),.9)}
#hhDetail .hh-swap .mint-w.ed:focus-within{background:rgb(var(--tg-rgb,255,255,255))}
/* THE PICKER MUST ESCAPE THE MODAL, and the modal is the trapping element - the same law as
   the card on the record behind it. Raised only while a list is open, so nothing is left
   sitting above the scrim afterwards. */
#hhDetail .cs-modal.hh-swap:has(.mint-w.selopen){z-index:5}
#hhDetail .hh-swap .selpop.mint-pop{z-index:140}
body.dark #hhDetail .hh-swap .mint-w.ed{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)))}


/* ============================================================
   11. THE "MAKE HEAD OF HOUSEHOLD" BUTTON HAS TO LOOK LIKE THE CROWN.

   HE COULD NOT FIND IT: "how you changing the head of household ... I couldn't found it in
   the Household Mock please locate me there." It WAS there - the first of four small buttons
   on a member card - and that is exactly the problem. Four identical grey squares with no
   labels, and a 14px crown among a pencil, a house and an archive box reads as one more glyph.
   An action that changes who a family's record belongs to cannot be the least distinguishable
   control on the card.

   THE RECORD ALREADY HAS A WORD FOR "HEAD OF HOUSEHOLD" AND IT IS GOLD. The crown badge beside
   the head's name is `linear-gradient(145deg,#F9E9B4,#E5B647,#C68D1E)`. Reusing that colour on
   the button makes it say what it does without a label - it is the same idea in the same
   currency, which is cheaper for the eye than a fifth word on a crowded card.

   THE OTHER THREE ARE UNTOUCHED. Edit, Move and Archive stay neutral, which is what lets ONE
   coloured control read as "this one is different" rather than as decoration.
   ============================================================ */
#hhDetail .hhbtn.mkhead{
  background:linear-gradient(145deg,#FBF1D2 0%,#F3DFA4 55%,#E8CB78 100%);
  border-color:rgba(150,105,20,.34);
  color:#6A4708;
  box-shadow:0 2px 6px -3px rgba(150,105,20,.4), inset 0 1px 0 rgba(255,255,255,.7);
}
#hhDetail .hhbtn.mkhead svg{fill:#6A4708}
#hhDetail .hhbtn.mkhead:hover{
  background:linear-gradient(145deg,#F9E9B4 0%,#E5B647 52%,#C68D1E 100%);
  border-color:rgba(150,105,20,.5);
  box-shadow:0 6px 14px -6px rgba(150,105,20,.55), inset 0 1px 0 rgba(255,255,255,.75);
}
body.dark #hhDetail .hhbtn.mkhead{
  background:linear-gradient(145deg,rgba(233,203,120,.22),rgba(200,141,30,.28));
  border-color:rgba(233,203,120,.35);color:#F1DFAE;
}
body.dark #hhDetail .hhbtn.mkhead svg{fill:#F1DFAE}


/* ============================================================
   MEMBH18 - "FAMILY MEMBERS  1 PERSON" gets the capsule, 22 September 2026.

   CEO: "the family members 1 person text is on the background ... check the Housing Support
   KPI, the title has a background then the rest - so make it like that."

   HE IS RIGHT AND THE OLD COMMENT WAS WRONG. mh-household.css says of `.members-h` that "the
   two SECTION headers on the canvas (Housing subsidy / Family members) take the same treatment
   as the card headings" - but Housing subsidy's head is a real `.mint-ph` capsule (it lives
   inside a `.pd-card.mint`), and this one was only bare uppercase text lying on the canvas.
   Once the cards around it went to glass (CARDWX18 / the mint glass above) a bare heading on a
   glass field is the one thing on the section with no surface at all - the same defect class as
   `.pl-month`: off-standard by having NO surface where one belongs.

   VALUES ARE COPIED FROM `.mint-ph` (detail-view.css ~1501), NOT RE-PICKED, so the two section
   heads are the same object and a future change to the capsule moves both.

   THE ICON CHIP GOES. `.hi` was a 26px brand-tint rounded square; `.mint-tab` carries a bare
   18px stroke glyph in the title's own ink. Kept as-is, the chip would have made this capsule
   ~48px tall against Housing support's ~41px - two section heads on one screen at two
   different heights, which is the thing he notices first. Same reason the translate is copied
   too: the 5 Sep optical correction for uppercase titles applies to any glyph beside one.

   WHAT DOES NOT CHANGE: the count keeps its pine tint and stays BESIDE the title - it reads as
   part of the phrase ("Family members - 1 person"), it is a COUNT not a status, and the capsule
   is deliberately NOT space-between so it cannot be flung to the far edge. The edit-mode
   `.mint-tag` still takes `margin-left:auto` from section 5 above and lands right, exactly as
   "Not enrolled" does on Housing support.
   ============================================================ */
#hhDetail .members-h{
  padding:11px 20px;border-radius:999px;flex-wrap:wrap;row-gap:8px;
  font-size:12.5px;letter-spacing:.11em;color:#2A4C41;
  background:rgba(var(--tg-rgb,255,255,255),calc(.6*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.8);border-right-color:var(--tg-edge-r,rgba(255,255,255,.8));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.8));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.3);
}
/* the tint chip is unwrapped back to a plain glyph slot - .mint-tab's recipe verbatim */
#hhDetail .members-h .hi{
  width:auto;height:auto;border-radius:0;background:none;color:inherit;
  display:inline-flex;align-items:center;
}
#hhDetail .members-h .hi svg{
  width:18px;height:18px;
  stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transform:translateY(-.9px);
}
body.dark #hhDetail .members-h{
  color:#B7D6C8;
  background:rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1)));
  border-color:rgba(180,210,235,.16);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.6);
}
/* AND THE COUNT PILL SETS THE CAPSULE'S HEIGHT, so it has to be measured, not eyeballed.
   Measured on landing: this head came out 49.3px against Housing support's 42.8px. Neither
   the padding nor the glyph was the cause - both capsules pad 11px and both glyphs are 18px.
   It was `.count`, whose 3px vertical padding plus its 1px rim made a 25.3px box inside a row
   whose title line is only 18.8px, and a flex row is as tall as its tallest child. The pill
   therefore takes the title line's own height exactly: 16.8px of line + the 1px rim top and
   bottom = 18.8px, which is `.mint-tab`'s measured height to the pixel. Horizontal padding is
   untouched, so the pill keeps its shape; only the slack that was pushing the capsule open is
   removed. Re-measured after: 42.8px, identical to Housing support. */
#hhDetail .members-h .count{padding:0 10px;line-height:16.8px;}

/* ---- MEMBH18, part 2: THE ROSTER'S OWN CARD (22 Sep) ----
   "Housing Support ... has another background which cover everything, so you must add another
   background like Housing support to cover the Family members KPI cards too."

   THE LAYER CAME FROM THE MARKUP, NOT FROM HERE. `.members-h` + `.mcards` are now wrapped in a
   `.pd-card.mint.full`, the same three classes `.members.hh-housing` has always used, so this
   section is the SAME OBJECT as the one beside it rather than a second thing that resembles it.
   No new surface was written and no measurement had to change: both blocks already rendered at
   409..1741, which is that card's outer box exactly.

   WHAT DOES BELONG IN CSS IS THE BLUR, AND IT IS A REMOVAL. `.pd-card.mint` carries
   `backdrop-filter`, which makes it a BACKDROP ROOT - a descendant's own backdrop-filter has
   nothing left behind it to sample, so the copy on `.mcard` and `.add-fam` is now inert. That is
   the RAILGLASS18 finding (21 Sep), and leaving a dead blur on a per-row element is exactly the
   shape of the cost the blur cull went hunting for: a family of eight used to pay for nine blurs
   where one does the work. The FILL and the RIM stay - they are what makes the card read - so
   nothing about the material changes; only the sampling that no longer reaches anything goes.

   SCOPED TO THE ROSTER. `.stat` shares the rule these three lines override and it is NOT inside a
   mint card - the six KPI tiles sit straight on the record - so its blur is real work and is left
   alone. Naming `.mcard`/`.add-fam` under `.hh-mem` rather than editing the shared rule is what
   keeps that true. */
#hhDetail .members.hh-mem .mcard,
#hhDetail .members.hh-mem .add-fam{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ---- MEMBH18, part 3: THE COUNT GOES RIGHT (22 Sep) ----
   "move the 2 people or 1 people on the right like Not enrolled got it"

   HIS CALL, AND IT OVERRIDES MINE. Part 1 deliberately kept the count beside the title on the
   reasoning that it reads as part of the phrase ("Family members - 1 person") and that a COUNT is
   not a status. He is looking at two capsules side by side and wants the right-hand slot filled
   the same way on both, which is the stronger argument: the shape of the head is what makes them
   one system, not what the right-hand item happens to mean.

   `margin-left:auto` RATHER THAN `space-between` ON THE ROW. The capsule has FOUR children - the
   glyph, the title text node, the count, and the edit-mode caption - so space-between would spread
   the glyph away from the words it belongs to. One auto margin on the count pushes it, and only
   it, to the far edge.

   AND THE CAPTION KEEPS THE EDGE IN EDIT MODE. `.mint-tag` already carried `margin-left:auto`
   (section 5). Two auto margins in one flex row SPLIT the free space between them, which would
   have parked the count in the middle of the capsule the moment Edit was pressed - so the caption
   drops to a fixed gap and sits immediately after the count, both hard right. */
#hhDetail .members-h .count{margin-left:auto;}
#hhDetail .members-h .mint-tag{margin-left:12px;}

/* =============================================================================
   GCTYPE29 (29 Sep 2026) - THE FAMILY GIFT CARD WINDOW GETS THE CARD TYPE.
   The Program window's own parts (.gc-card preview, .gc-thumb types - mh-theme.css), laid out in
   a left column beside the four Mint tiles so the window stays short on a laptop screen. The
   types wrap in a 3 x 3 grid instead of the Program window's sideways scroll: nine cards fit, and
   a row that scrolls hides the very choices it offers.
   ============================================================================= */
#hhDetail .cs-modal.hh-swap.hh-gc{max-width:780px}
#hhDetail .hh-gc-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start;margin-top:4px}
@media (max-width:860px){#hhDetail .hh-gc-body{grid-template-columns:minmax(0,1fr)}}
#hhDetail .hh-gc-left .gc-card{padding:14px 16px;border-radius:14px}
#hhDetail .hh-gc-left .gc-card-name{font-size:17px}
#hhDetail .hh-gc-left .gc-card-val{font-size:26px}
#hhDetail .hh-gc-lb{display:block;margin:14px 2px 8px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7A8A84}
#hhDetail .hh-gc-cat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;overflow:visible;margin:0;padding:0}
#hhDetail .hh-gc-cat .gc-thumb{width:auto;height:50px;font-size:11px;line-height:1.15;padding:7px 8px;border-radius:10px}
#hhDetail .hh-gc-right .mint-grid{margin:0}
body.dark #hhDetail .hh-gc-lb{color:#8C9AA5}