/* ============================================================================= 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);} /* 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(255,255,255,.14),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(255,255,255,.18),transparent);} #hhDetail .hero-x{position:absolute;top:18px;right:18px;width:34px;height:34px;border:none;border-radius:10px;background:rgba(255,255,255,.13);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.16s;} #hhDetail .hero-x:hover{background:rgba(255,255,255,.24);} #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(255,255,255,.13);border:1px solid 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(255,255,255,.4);} #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(255,255,255,.07);border:1px solid 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: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: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(255,255,255,.72),rgba(255,255,255,.3)),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(255,255,255,.1),rgba(255,255,255,.03)),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:0 6px 16px var(--brand-glow);} #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 IN-PANE EDIT ENGINE + THE MH DEFAULT FIELD KIT (Jul 28 2026) Replaces the old `.hhedit` FILLED-SOFT form (a flat sage input, a native