/* ============================================================ CLIENT DETAIL - the Client-only surfaces inside the app-wide DetailShell. Everything the shell already owns (rail, tab pill, footer, overflow menu, cards, the .field / .icf kit, dropdowns, dates, the required / error design) lives in detail-view.css and is NOT repeated here. This sheet is only what is genuinely Client's: the rail furniture the shell hands back through RailExtras, the expiry KPI cards, the document grid and its modal, the case notes, the movement table. EVERY selector is scoped `#mhDetail` AND prefixed `.cl-`, so it can neither leak out of the shell nor collide with Student Detail's `.sd-` vocabulary inside it. The two hosts share one id. Tokens are the shell's (--ink-*, --brand*, --line, --f-*, --danger*, --r-*, --t). Nothing hard-codes a colour that dark mode needs to change. ============================================================ */ /* ============================================================ THE MINT GLASS TOKENS, AND THE HOST CLASS THAT GATES THEM. 7 Sep 2026. `.mint-host` is passed by ClientDetailOverlay through DetailShell's StageClass hook - the same hook ProfileOverlay uses for `.mp-host`. It exists because `#mhDetail` is the SHARED shell id: all six DetailShell hosts render inside it, so a rule written on `#mhDetail .pd-tabs` would restyle Student, Program, Subsidy, ChildCare and My Profile at the same moment, unannounced. That is the shared-component blast radius, and it is exactly the trap the whole Mint pass avoided by never redefining `--brand-tint`. The tab row is chrome the shell owns, so it needs a gate of its own; these three lines are that gate. ONE VALUE, ONE HOME. The glass recipe was about to be written out twice - once on the tab row, once on the expiry banner - which is the same trap that made the orange severity silent on 5 Sep and cost nine edits for one hover. Named here, used in both places, and `.pd-card.mint` keeps its own literals only because those are the mock's approved colours and are deliberately frozen. ============================================================ */ #mhDetail.mint-host, #hhDetail.mint-host, #view-settings.mint-host, #cnPop.mint-host, #view-help.mint-host { --mint-glass:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1))); --mint-rim:rgba(255,255,255,.72); --mint-blur:blur(24px) saturate(150%); /* TWO LAYERS, NOT ONE. A tab row is ~1050px wide and ~56px tall, and the 5 Sep lesson was learned on exactly that geometry: a single wide, shallow shadow has no room to fade and draws a straight-edged BAR under the element. Tight contact layer + wide soft layer, both at low opacity because they stack. Same shape as --mint-lift, softer, because this one is at rest and never lifts. */ --mint-float:0 3px 8px -5px rgba(30,55,48,.14), 0 16px 34px -18px rgba(30,55,48,.26); /* THE SAME LIFT AS A FIELD TILE, RE-PITCHED FOR A SHALLOW BOX. 7 Sep 2026. His words: "apply the effect of the fields of the details KPI cards on the TABS too ... the mouse hover effect when mouse hovering the fields and not set it's coming up so I need same mouse hover effect style there." `--mint-lift` itself could not be reused verbatim, and the reason is the 5 Sep lesson, not taste: its wide layer is `0 18px 38px -18px`, which reaches ~19px BELOW the element. The tab row is an `overflow:auto` box, AN OVERFLOW CONTAINER CLIPS ITS OWN CHILDREN, and clearing 19px + the lift would have meant ~21px of bottom padding - a 72px tab row where a 53px one used to be. Growing his header by 19px to fit a shadow is the tail wagging the dog. So the SHAPE is kept exactly - two layers, tight contact plus wide soft, which is the fix for the "shadow looks rectengle" geometry - and the reach is halved. The row is padded to clear it: measured, the widest layer now falls ~10px below and the -2px lift needs 2px above, so 7px top / 13px bottom. The bar goes 53 -> 63px. That is the honest cost of the effect and it is the smallest one that does not clip. */ --mint-lift-sm:0 3px 7px -4px rgba(30,55,48,.18), 0 10px 20px -10px rgba(30,55,48,.26); /* THE MATTHEW HOUSE GRADIENT, ONE HOME. 7 Sep 2026. The selected tab and the primary button are the same statement - "this is the live one" - so they are the same paint. Written out twice it would drift the first time either is tuned, which is the trap that made the orange silent on 5 Sep and cost nine edits for one hover. A custom property holds the whole multi-layer background list, sheen included, so both sites read one line. */ --mint-grad: radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.18), rgba(255,255,255,0) 42%), linear-gradient(162deg, #42856E 0%, #2F6B57 60%, #2A5749 100%); --mint-grad-glow:0 4px 12px -2px rgba(47,107,87,.42); --mint-grad-glow-hi:0 8px 20px -4px rgba(47,107,87,.5); } body.dark #mhDetail.mint-host, body.dark #hhDetail.mint-host, body.dark #view-settings.mint-host, body.dark #view-help.mint-host { --mint-glass:rgba(255,255,255,.05); --mint-rim:rgba(180,210,235,.14); --mint-float:0 3px 8px -5px rgba(0,0,0,.45), 0 16px 34px -18px rgba(0,0,0,.6); --mint-lift-sm:0 3px 7px -4px rgba(0,0,0,.5), 0 10px 20px -10px rgba(0,0,0,.6); --mint-grad: radial-gradient(120% 55% at 90% 3%, rgba(255,255,255,.14), rgba(255,255,255,0) 42%), linear-gradient(162deg, #3E7A66 0%, #2E5F4E 60%, #274F42 100%); --mint-grad-glow:0 4px 12px -2px rgba(0,0,0,.5); --mint-grad-glow-hi:0 8px 20px -4px rgba(0,0,0,.6); } /* ============================================================ THE TAB ROW ON THE MINT MATERIAL. 7 September 2026. His words: "change the menu taps background same as the KPI detail KPI cards background glassy look but keep the effects that will looks great". IT WAS THE SAME FLAT #DFE4EA as the expiry banner - `--f-rest-bg`, the recessed field ground. Correct for an input well; wrong for a floating control bar sitting on the canvas beside eight frosted cards. Now glass with the white rim, so the row reads as the same pane of material the cards are cut from. "KEEP THE EFFECTS" IS THE OPERATIVE HALF, so nothing about the behaviour moved: the active tab is still solid `--brand` pine with its glow, the count pill still sits inside it, the hover still fills, the scroll variant still scrolls. Only the two greys underneath them changed - and they had to, for the reason below. THE SLATE WASHES WOULD HAVE GONE GREY ON GLASS. `rgba(40,60,80,.05)` on hover and `rgba(40,60,80,.1)` on the count pill are the same dark-slate-at-low-alpha shape as `--brand-tint`: over an opaque panel they read as a soft shade, over frosted glass they have no chroma and render as a smudge. Hover is now a WHITE lift (glass gets more solid as you approach it, which is what every other Mint surface does) and the count pill takes the pine tint the small chrome was standardised on 6 Sep. NOT A DROP SHADOW ON THE INACTIVE TABS. `.pd-tabs` carries `overflow-x:auto`, and an overflow container clips its own children - the same thing that made the Key Dates hover "look broken" on 5 Sep. The active tab's glow lives inside that box, so the row's own float is on the ROW, where nothing clips it. ============================================================ */ #mhDetail.mint-host .pd-tabs{ background:var(--mint-glass); backdrop-filter:var(--mint-blur);-webkit-backdrop-filter:var(--mint-blur); border:1px solid var(--mint-rim); border-radius:18px; box-shadow:var(--mint-float); /* ROOM FOR THE LIFT. See --mint-lift-sm above: this box clips its own children, so the hover shadow only exists if the padding pays for it. */ padding:7px 6px 13px; } /* ============================================================ ⭐ THE MINT BUTTON STANDARD. 7 September 2026. HIS INSTRUCTION: "note this button behavior and effects in any mock that we will go we will apply same thing, and make and call it standard roles for button behavior." SO THIS BLOCK IS THE RULE, NOT AN IMPLEMENTATION. Every button on a Mint surface obeys it, and every host we deploy to next copies it from here. The prose lives in `_handoff/MATTHEW_HOUSE_FIELD_STANDARD.md` under THE MINT BUTTON STANDARD. THE FIVE STATES: REST the surface's own material - glass for chrome, --mint-grad for primary HOVER IT COMES UP. -2px + --mint-lift-sm + the material FIRMS + white hairline PRESS it 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 WHY THE HOVER IS A LIFT AND NOT A COLOUR CHANGE: it is the same sentence the field tiles speak, and he asked for exactly that - "the mouse hover effect when mouse hovering the fields and not set it's coming up so I need same mouse hover effect style there". One vocabulary across tiles, rows, tabs and buttons. TWO RULES THAT ARE NOT OPTIONAL, both learned the hard way: 1. THE TRANSITION GOES ON THE BASE RULE, NEVER ONLY ON :hover - otherwise the control rises smoothly and SNAPS back, which reads as a stutter, not a lift. 2. A LIFT NEEDS ROOM. An overflow container clips its own children, so before adding this to any new host, MEASURE the space between the control and its clipping ancestor. The tab row needed 7px/13px of padding; the footer already had 18px and needed nothing. Do not assume either way. ============================================================ */ #mhDetail.mint-host .pd-tabs button, #mhDetail.mint-host .dv-more-btn, #mhDetail.mint-host .dv-close-btn, #mhDetail.mint-host .dv-mi, #mhDetail.mint-host .ui-btn.primary, #cnPop.mint-host .ui-btn.primary{ transition:transform .18s ease,box-shadow .18s ease,background var(--t), border-color var(--t),color var(--t); } /* HOVER - the glass firms up and the control comes up. */ #mhDetail.mint-host .pd-tabs button:not([aria-selected="true"]):hover, #mhDetail.mint-host .dv-more-btn:hover, #mhDetail.mint-host .dv-close-btn:hover{ background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));color:var(--ink-1); transform:translateY(-2px); box-shadow:var(--mint-lift-sm),inset 0 0 0 1px rgba(255,255,255,.85); } /* A MENU ROW IS A BUTTON, SO IT OBEYS THE SAME STANDARD - his ask: "each of them must comes up". It firms to .95 rather than .72 because the MENU is already .78: a row that only went to .82 would lift with almost no change of material, and the rise would read as a wobble rather than a lift. The state has to be legible against ITS OWN ground, not against the canvas - that is the general rule when this reaches a new host. */ #mhDetail.mint-host .dv-mi:not(:disabled):hover{ background:rgba(var(--tg-rgb,255,255,255),.95);color:var(--ink-1); transform:translateY(-2px); box-shadow:var(--mint-lift-sm),inset 0 0 0 1px rgba(255,255,255,.9); } #mhDetail.mint-host .dv-mi.danger:not(:disabled):hover{ background:var(--danger-bg);color:var(--danger-ink); box-shadow:var(--mint-lift-sm),inset 0 0 0 1px rgba(255,255,255,.5); } #mhDetail.mint-host .pd-tabs button:hover .n{background:rgba(47,107,87,.14);color:var(--brand-600)} /* AN OPTION IN A TILE'S DROPDOWN IS A MENU ROW, SO IT TAKES THE SAME LIFT. 7 September 2026. His words: "apply the mouse hover effect too that you did it on (...) menu on the client detail mock". He is asking for the rule this block already states - "A MENU ROW IS A BUTTON, SO IT OBEYS THE SAME STANDARD" - to reach the one menu that had been left out of it. An option row in a `.selpop` is exactly the same thing as a row in the overflow menu: a list of choices you point at and press. BOTH HOSTS, ONE RULE. Applying it only to the household would make the same picker behave differently on the client record, which is the confusion he called out on the subsidy card. SCOPED TO `.mint-pop`, NOT TO `.selpop`. The plain `.selpop` is the app-wide list used by the New Client wizard, enrolment, the case-note wizards, the programme wizards and the event sheet - six surfaces that are NOT Mint and must keep the flat wash they already have. THE SHADOW IS TIGHTER THAN --mint-lift-sm AND THAT IS MEASURED, NOT TASTE. `.selpop.mint-pop` is `overflow-y:auto` with 8px of padding, and AN OVERFLOW CONTAINER CLIPS ITS OWN CHILDREN - the same law that cost the tab row 12px of header on the client record. --mint-lift-sm reaches ~10px below the element and would have been sliced off at the popup's edge. This pair reaches ~6px, which fits inside the 8px that is already there, so the effect costs the list no geometry at all. AND THE HOVERED ROW IS RAISED. The rows are stacked with no gap, so the row BELOW paints after the lifted one and would cover the shadow it just grew. `z-index` on hover only - nothing is left raised once the pointer leaves. */ #mhDetail .selpop.mint-pop .sel-opt, #hhDetail .selpop.mint-pop .sel-opt, #view-settings .selpop.mint-pop .sel-opt, #cnPop .selpop.mint-pop .sel-opt{ transition:transform .18s ease,box-shadow .18s ease,background var(--t),color var(--t); } #mhDetail .selpop.mint-pop .sel-opt:hover, #hhDetail .selpop.mint-pop .sel-opt:hover, #view-settings .selpop.mint-pop .sel-opt:hover, #cnPop .selpop.mint-pop .sel-opt:hover{ position:relative;z-index:1; background:rgba(var(--tg-rgb,255,255,255),.95);color:var(--ink-1); transform:translateY(-2px); box-shadow:0 2px 6px -3px rgba(30,55,48,.20),0 6px 12px -6px rgba(30,55,48,.28), inset 0 0 0 1px rgba(255,255,255,.9); } /* THE SELECTED ROW STILL LIFTS, but it keeps its pine identity rather than washing to white - the same reasoning as the current tab, which keeps the gradient. You can still point at it; it just does not stop being the answer while you do. */ #mhDetail .selpop.mint-pop .sel-opt.on:hover, #hhDetail .selpop.mint-pop .sel-opt.on:hover, #view-settings .selpop.mint-pop .sel-opt.on:hover, #cnPop .selpop.mint-pop .sel-opt.on:hover{ background:rgba(47,107,87,.16);color:var(--brand-600); } #mhDetail .selpop.mint-pop .sel-opt:active, #hhDetail .selpop.mint-pop .sel-opt:active, #view-settings .selpop.mint-pop .sel-opt:active, #cnPop .selpop.mint-pop .sel-opt:active{ transform:translateY(0); box-shadow:0 1px 3px -2px rgba(30,55,48,.22),inset 0 0 0 1px rgba(255,255,255,.7); } /* THE + ADD ROW. It is a sel-opt so it inherits the list's hover, lift and press unchanged - it moves like the rows around it because it is one of them. Only two things separate it: pine text, because it CREATES something rather than choosing something that exists, and a hairline above it, because the rows above are the answers and this one is the escape hatch when none of them is. Twinned to #hhDetail in the same rule, per the standard - the household record gets it the day a lookup there needs the same behaviour. */ #mhDetail .selpop.mint-pop .sel-opt.sel-add, #hhDetail .selpop.mint-pop .sel-opt.sel-add, #view-settings .selpop.mint-pop .sel-opt.sel-add, #cnPop .selpop.mint-pop .sel-opt.sel-add{ color:var(--brand-600);font-weight:700; border-top:1px solid rgba(47,107,87,.14);margin-top:2px;padding-top:9px; } body.dark #mhDetail .selpop.mint-pop .sel-opt.sel-add, body.dark #hhDetail .selpop.mint-pop .sel-opt.sel-add, body.dark #view-settings .selpop.mint-pop .sel-opt.sel-add{ border-top-color:rgba(255,255,255,.10); } body.dark #mhDetail .selpop.mint-pop .sel-opt:hover, body.dark #hhDetail .selpop.mint-pop .sel-opt:hover, body.dark #view-settings .selpop.mint-pop .sel-opt:hover{ background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));color:#EAF0F4; box-shadow:0 2px 6px -3px rgba(0,0,0,.5),0 6px 12px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(180,210,235,.16); } /* PRESS - settles to 0 and keeps only the contact layer. The click LANDS. */ #mhDetail.mint-host .pd-tabs button:active, #mhDetail.mint-host .dv-more-btn:active, #mhDetail.mint-host .dv-close-btn:active, #mhDetail.mint-host .dv-mi:active, #mhDetail.mint-host .ui-btn.primary:active, #cnPop.mint-host .ui-btn.primary: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); } /* CURRENT - the selected tab carries the gradient and must NOT rise. Declared AFTER :hover because equal specificity means the later rule wins, and a tab that lifts while it is the one you are already on is a lie about what a lift means. */ #mhDetail.mint-host .pd-tabs button[aria-selected="true"]:hover, #mhDetail.mint-host .pd-tabs button[aria-selected="true"]:active{ transform:none;box-shadow:var(--mint-grad-glow); } /* DISABLED - a dead control never answers a hover. */ #mhDetail.mint-host .ui-btn:disabled:hover, #cnPop.mint-host .ui-btn:disabled:hover, #mhDetail.mint-host .dv-more-btn:disabled:hover, #mhDetail.mint-host .dv-close-btn:disabled:hover, #mhDetail.mint-host .dv-mi:disabled:hover{ transform:none;box-shadow:none;background:none; } body.dark #mhDetail.mint-host .pd-tabs button:not([aria-selected="true"]):hover, body.dark #mhDetail.mint-host .dv-more-btn:hover, body.dark #mhDetail.mint-host .dv-close-btn:hover, body.dark #mhDetail.mint-host .dv-mi:not(:disabled):hover{ background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1))); box-shadow:var(--mint-lift-sm),inset 0 0 0 1px rgba(180,210,235,.16); } /* ============================================================ THE FOOTER PAIR JOIN THE STANDARD. His words: "apply the same effect to the Edit Record and Close and ... buttons to the mouse hover and also you can change the color of the Edit Record button to that too." EDIT RECORD takes --mint-grad - the SAME token as the selected tab, because they are the same statement: this is the live one. It was flat `--brand` #2E4A43 with a #2E4A43 glow; both move together, or a pine glow sits under a mint face. MEASURED BEFORE TOUCHING IT: `.m-foot` has 18px of padding and every ancestor up to `.modal` is overflow:visible, so a -2px lift plus --mint-lift-sm (~10px reach) has 18px to live in and needs NO geometry change. That check is part of the standard, not a nicety - the tab row failed it and cost 12px of header. ============================================================ */ #mhDetail.mint-host .ui-btn.primary, #cnPop.mint-host .ui-btn.primary{ background:var(--mint-grad);color:#fff;box-shadow:var(--mint-grad-glow); } #mhDetail.mint-host .ui-btn.primary:hover, #cnPop.mint-host .ui-btn.primary:hover{ background:var(--mint-grad); transform:translateY(-2px); box-shadow:var(--mint-grad-glow-hi); } #mhDetail.mint-host .dv-close-btn{ 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 SCROLL FADES HAD TO FOLLOW THE BAR. They were `--f-rest-bg` - flat #DFE4EA again - drawn ON TOP of the row to fake "the tabs continue past this edge". Over an opaque grey bar that was invisible; over glass it would have been two solid grey blocks sitting on the frosted material at either end. They are only visible when the row actually scrolls (`data-l`/`data-r`), which is why nothing showed on his screenshots - it would have surfaced on a narrower pane, i.e. on someone else's screen. #F1F3F6 is the composite the glass renders as over --bg-canvas. */ #mhDetail.mint-host .dv-fade.l{background:linear-gradient(90deg,color-mix(in srgb, var(--tg-cream2,rgb(241,243,246)) 97%, transparent) 30%,rgba(241,243,246,0))} #mhDetail.mint-host .dv-fade.r{background:linear-gradient(270deg,color-mix(in srgb, var(--tg-cream2,rgb(241,243,246)) 97%, transparent) 30%,rgba(241,243,246,0))} body.dark #mhDetail.mint-host .dv-fade.l{background:linear-gradient(90deg,rgba(28,38,46,.97) 30%,rgba(28,38,46,0))} body.dark #mhDetail.mint-host .dv-fade.r{background:linear-gradient(270deg,rgba(28,38,46,.97) 30%,rgba(28,38,46,0))} /* The count pill takes the pine tint every other piece of small chrome took on 6 Sep. */ #mhDetail.mint-host .pd-tabs button .n{background:rgba(47,107,87,.13);color:var(--brand-600)} /* ============================================================ THE SELECTED TAB TAKES THE RAIL'S GRADIENT. 7 September 2026. His words: "when you click on that TAB it's changing the Matthew House branding color but that is too dark change that clicked color when land to current TAB to Matthew House Gradient color like we do have it on the left side panel." IT WAS FLAT `--brand` #2E4A43 - a single dead-flat block of the darkest pine in the palette, dropped on a frosted row. The left rail is the same family and does not read heavy, and MEASURING IT SAYS WHY: it is not one colour but three moves - `linear-gradient(162deg,#2E4A43,#213A33)` for depth, plus a radial white sheen at the top-right that catches a light source. The gradient is what gives it life. SO THE RAIL'S TREATMENT IS COPIED AND ITS PITCH IS RAISED. Same 162deg axis, same sheen geometry, but keyed to the MOCK'S pine #2F6B57 rather than the shell's #2E4A43, because "too dark" is the other half of the instruction and copying the rail's exact stops would have made the tab DARKER, not lighter - the rail runs #2E4A43 -> #213A33, which is beneath where it already was. Lightest stop #42856E, so white 12.5px caps still clear 4.2:1; deepest #2A5749, so it is unmistakably Matthew House and not mint candy. THE GLOW IS RE-KEYED TOO - a #2E4A43 glow under a #2F6B57 tab is a dirty edge. NO LIFT ON THE SELECTED TAB. It is where you already are, not somewhere to go - the same reason a finished row does not pretend to be clickable. ============================================================ */ #mhDetail.mint-host .pd-tabs button[aria-selected="true"]{ background:var(--mint-grad);color:#fff;box-shadow:var(--mint-grad-glow); } #mhDetail.mint-host .pd-tabs button[aria-selected="true"] .n{background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));color:#fff} /* ============================================================ THE OVERFLOW BUTTON AND ITS MENU JOIN THE ROW. 7 September 2026. His words: "turn the ... button to background same is the TAB background too and the menu appearing change that too to that background." The button is `ui-btn secondary`, which is an APP-WIDE class - so this is scoped `.mint-host` like everything else, or every secondary button in all six hosts moves. ITS OPEN STATE WAS `--brand-tint` AGAIN. Third instance of the same token in one day: dark slate at 12%, grey the moment it sits on glass. Pine tint. THE MENU IS THE ONE PLACE I DID NOT TAKE THE RECIPE LITERALLY. `--mint-glass` is .4 white, and a dropdown at .4 is drawn over arbitrary record content rather than over the canvas - the text behind it shows through the labels. It is the same frosted material and the same rim, firmed to .78 so it stays readable. An unreadable menu is a defect, not a style. Say so rather than shipping it quietly. ============================================================ */ #mhDetail.mint-host .dv-more-btn{ 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); } /* hover lives in THE MINT BUTTON STANDARD above - not repeated here. */ #mhDetail.mint-host .dv-more-btn[aria-expanded="true"]{ background:rgba(47,107,87,.14);border-color:rgba(47,107,87,.22);color:var(--brand-600); } #mhDetail.mint-host .dv-menu{ /* ROOM FOR THE LIFT - standard rule 2. The menu is overflow:VISIBLE, so nothing is clipped; the failure here is the opposite one. Measured before changing anything: 8px below the last row, against a shadow that reaches 8px below the resting edge. The lift would have thrown its shadow PAST the menu's own rounded corner and onto the page - a shadow escaping its container reads as a rendering fault. THE REACH IS ARITHMETIC, NOT A GUESS, and the formula belongs in the standard: below = offsetY + spread + blur/2 - lift For --mint-lift-sm's widest layer (0 10px 20px -10px) at a -2px lift that is 10 + (-10) + 10 - 2 = 8px. 12px padding clears it with 4px to spare; the gap goes 2 -> 5px so a raised row is not touching its neighbour while it is up. */ padding:12px;gap:5px; background:rgba(var(--tg-rgb,255,255,255),calc(.78*var(--tg-k,1))); backdrop-filter:var(--mint-blur);-webkit-backdrop-filter:var(--mint-blur); border:1px solid var(--mint-rim); border-radius:18px; box-shadow:0 22px 54px -26px rgba(30,55,48,.42),0 4px 10px -6px rgba(30,55,48,.16); } /* Row hover lives in THE MINT BUTTON STANDARD above - not repeated here. */ body.dark #mhDetail.mint-host .dv-more-btn[aria-expanded="true"]{ background:rgba(143,187,165,.18);border-color:rgba(143,187,165,.26)} body.dark #mhDetail.mint-host .dv-menu{ background:rgba(28,38,46,.86);border-color:rgba(180,210,235,.16); box-shadow:0 22px 54px -26px rgba(0,0,0,.75),0 4px 10px -6px rgba(0,0,0,.5)} body.dark #mhDetail.mint-host .pd-tabs button:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)))} body.dark #mhDetail.mint-host .pd-tabs button .n, body.dark #mhDetail.mint-host .pd-tabs button:hover .n{ background:rgba(143,187,165,.18);color:#B7D6C8} body.dark #mhDetail.mint-host .pd-tabs button[aria-selected="true"] .n{ background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));color:#fff} /* ============================================================ THE IN-PLACE EDIT ENGINE. 7 September 2026. His rule, and it is the whole specification: "you never change this interface only you'll turn it to editing one", and "the fields that you turning to editable shouldn't get another interface must match with our interface design and smooth and looks good for staff". SO THERE IS NO EDIT SKIN. The tile keeps its size, its radius, its dot, its label, its two states and its hover lift. The ONLY thing that changes is that the value line stops being a and becomes a control wearing that span's exact typography - 16px/650, #1C2A25, the same 'un' grey when empty. Measured equal, not eyeballed: see the change log. WHY NOT THE .icf FIELD KIT, WHICH IS THE APP'S FIELD. Because `.icf` is a RECESSED WELL with its own background, border, radius and 44px height - dropping it inside a tile is a box drawn inside a box, the exact "double border" defect the field standard already records for `.dpf-mask`. And `.icf` appears 258 times across 10 CSS files, so touching it to fit here would silently restyle eight other screens. The tile IS the field on this record. AFFORDANCE COMES FROM THE TILE, NOT FROM A BORDER. At rest an editable tile looks exactly like a read one. Hover firms it to white (the lift the whole record already teaches), and FOCUS is where it commits - white, a pine ring, and the caret. That is the same rest -> hover -> focus escalation `.icf` performs; it is just performed by the tile. ============================================================ */ /* The control, dressed as the value line it replaced. Every one of these declarations exists to REMOVE browser chrome or to restate a .mint-vl value - there is nothing here that is new design, which is the point. */ #mhDetail .mint-w.ed .mint-in, #hhDetail .mint-w.ed .mint-in, #mhDetail .mint-w.ed .mint-sel, #hhDetail .mint-w.ed .mint-sel, #view-settings .mint-w.ed .mint-in, #cnPop .mint-w.ed .mint-in, #view-settings .mint-w.ed .mint-sel, #cnPop .mint-w.ed .mint-sel{ display:block;width:100%;min-width:0; margin:0;padding:0;border:0;background:none;box-shadow:none;outline:none;border-radius:0; font-family:var(--font-sans);font-size:16px;font-weight:650;line-height:24px; color:#1C2A25;letter-spacing:normal; -webkit-appearance:none;appearance:none; } /* 24px, NOT 1.35. The read span computes to 650 16px/24px; a 1.35 line-height computes to 21.6px and the tile measured 69px instead of 71 - a 2px shrink on every tile the moment the card flipped. Invisible to the eye, and exactly the kind of drift that makes "the interface does not change" a claim rather than a fact. Copy the computed value, do not re-derive it. */ #mhDetail .mint-w.ed .mint-in, #hhDetail .mint-w.ed .mint-in, #view-settings .mint-w.ed .mint-in, #cnPop .mint-w.ed .mint-in{height:24px} #mhDetail .mint-w.ed .mint-in::placeholder, #hhDetail .mint-w.ed .mint-in::placeholder, #view-settings .mint-w.ed .mint-in::placeholder, #cnPop .mint-w.ed .mint-in::placeholder{color:#8A9A94;font-weight:650;opacity:1} /* NOT SET, WHILE EDITING. Declared BEFORE :hover and :focus-within on purpose - all three are the same specificity (1 id, 3 classes), so the later rule wins, and reaching for the field must always beat resting on it. Values copied from `.mint-w:has(.un)` rather than re-picked, so the two states are literally the same paint in both modes. */ #mhDetail .mint-w.ed.empty, #hhDetail .mint-w.ed.empty, #view-settings .mint-w.ed.empty, #cnPop .mint-w.ed.empty{ background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border-style:dashed;border-color:rgba(30,55,48,.18);box-shadow:none; } #mhDetail .mint-w.ed.empty::before, #hhDetail .mint-w.ed.empty::before, #view-settings .mint-w.ed.empty::before, #cnPop .mint-w.ed.empty::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)} body.dark #mhDetail .mint-w.ed.empty, body.dark #hhDetail .mint-w.ed.empty, body.dark #view-settings .mint-w.ed.empty{background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));border-color:rgba(180,210,235,.16)} body.dark #mhDetail .mint-w.ed.empty::before, body.dark #hhDetail .mint-w.ed.empty::before, body.dark #view-settings .mint-w.ed.empty::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)} /* THE TILE IS THE FIELD, so the tile carries the focus state. `:focus-within` rather than `:focus`, because the thing that takes focus is the input INSIDE the tile and the ring has to appear on the tile around it. The dot and label do not move. */ #mhDetail .mint-w.ed:hover, #hhDetail .mint-w.ed:hover, #view-settings .mint-w.ed:hover, #cnPop .mint-w.ed:hover{background:rgba(var(--tg-rgb,255,255,255),.85)} #mhDetail .mint-w.ed:focus-within, #hhDetail .mint-w.ed:focus-within, #view-settings .mint-w.ed:focus-within, #cnPop .mint-w.ed:focus-within{ background:rgb(var(--tg-rgb,255,255,255));border-style:solid;border-color:rgba(47,107,87,.55); box-shadow:0 0 0 3px rgba(47,107,87,.13), var(--mint-lift-sm); transform:translateY(-2px); } /* A REQUIRED FIELD SAYS SO ONLY WHILE IT CAN BE EDITED - a red star on a read-only record is noise, because there is nothing the reader can do about it. */ #mhDetail .mint-w .mint-req, #hhDetail .mint-w .mint-req, #view-settings .mint-w .mint-req, #cnPop .mint-w .mint-req{color:#C0473F;font-weight:800;margin-left:3px} /* THE REFUSAL LANDS ON THE TILE. This is the advantage the old stepper could not give: it validated a step you might not be looking at. Red border + ring, and the dot goes red too so the row reads wrong at a glance, not only where the caret is. */ #mhDetail .mint-w.ed.bad, #hhDetail .mint-w.ed.bad, #view-settings .mint-w.ed.bad, #cnPop .mint-w.ed.bad{ border-style:solid;border-color:rgba(192,71,63,.6); box-shadow:0 0 0 3px rgba(192,71,63,.12); } #mhDetail .mint-w.ed.bad::before, #hhDetail .mint-w.ed.bad::before, #view-settings .mint-w.ed.bad::before, #cnPop .mint-w.ed.bad::before{background:#C0473F;box-shadow:0 0 0 3px rgba(192,71,63,.18)} #mhDetail .mint-err, #hhDetail .mint-err, #view-settings .mint-err, #cnPop .mint-err{ margin:12px 4px 2px;padding:10px 14px;border-radius:12px; background:rgba(192,71,63,.1);box-shadow:inset 0 0 0 1px rgba(192,71,63,.28); color:#8E332D;font-size:12.5px;font-weight:700; } /* THE DROPDOWN, RE-DRESSED NOT REBUILT. The face is the value line; the chevron is the only thing added, and it is muted so the tile does not read as a control at rest. `position` is static-turned-relative here purely so .selpop anchors to the tile. */ /* STATIC ON PURPOSE - the popup must anchor to the TILE, not to this value line. Anchored here it measured 326px against a 346px tile (20px narrow) and opened at -5px, i.e. OVERLAPPING the tile's own bottom edge with no gap at all. He caught both. */ #mhDetail .mint-w.ed .mint-sel, #hhDetail .mint-w.ed .mint-sel, #view-settings .mint-w.ed .mint-sel, #cnPop .mint-w.ed .mint-sel{position:static;display:flex;align-items:center;gap:8px;cursor:pointer} #mhDetail .mint-w.ed .mint-sel .mint-vl, #hhDetail .mint-w.ed .mint-sel .mint-vl, #view-settings .mint-w.ed .mint-sel .mint-vl, #cnPop .mint-w.ed .mint-sel .mint-vl{flex:1;min-width:0} #mhDetail .mint-w.ed .mint-chev, #hhDetail .mint-w.ed .mint-chev, #view-settings .mint-w.ed .mint-chev, #cnPop .mint-w.ed .mint-chev{ flex:none;width:15px;height:15px;display:grid;place-items:center;color:#8A9A94; transition:transform var(--t),color var(--t); } #mhDetail .mint-w.ed .mint-chev svg, #hhDetail .mint-w.ed .mint-chev svg, #view-settings .mint-w.ed .mint-chev svg, #cnPop .mint-w.ed .mint-chev svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none} #mhDetail .mint-w.ed:hover .mint-chev, #hhDetail .mint-w.ed:hover .mint-chev, #mhDetail .mint-w.ed:focus-within .mint-chev, #hhDetail .mint-w.ed:focus-within .mint-chev, #view-settings .mint-w.ed:hover .mint-chev, #cnPop .mint-w.ed:hover .mint-chev, #view-settings .mint-w.ed:focus-within .mint-chev, #cnPop .mint-w.ed:focus-within .mint-chev{color:var(--brand-600)} #mhDetail .mint-w.ed .mint-sel.open .mint-chev, #hhDetail .mint-w.ed .mint-sel.open .mint-chev, #view-settings .mint-w.ed .mint-sel.open .mint-chev, #cnPop .mint-w.ed .mint-sel.open .mint-chev{transform:rotate(180deg);color:var(--brand-600)} /* THE POPUP HAS TO ESCAPE THE TILE, and the tile is inside a card that scrolls. z-index alone is not enough - see the transform-traps-dropdowns law - so this is the same treatment every other .selpop on this record already gets, just anchored to a tile. */ /* FLUSH TO THE TILE, WITH AIR UNDER IT. left/right 0 against .mint-w means the list is exactly as wide as the field it belongs to - his ask - and 100% now measures from the TILE's bottom, so the 8px is a real gap instead of a 5px overlap. */ #mhDetail .mint-w.ed .selpop.mint-pop, #hhDetail .mint-w.ed .selpop.mint-pop, #view-settings .mint-w.ed .selpop.mint-pop, #cnPop .mint-w.ed .selpop.mint-pop{ /* -1px, NOT 0. An absolutely-positioned child anchors to its container's PADDING box, so left:0 sits INSIDE the tile's 1px border and the list measured 344 against a 346 tile. Two pixels, and it is the difference between "matches the field" and "nearly matches". The +9 pays back the same 1px so the gap below the tile is a true 8. */ position:absolute;top:calc(100% + 9px);left:-1px;right:-1px;z-index:120; max-height:260px;overflow-y:auto;padding:8px;border-radius:16px; background:rgba(var(--tg-rgb,255,255,255),.94); backdrop-filter:var(--mint-blur);-webkit-backdrop-filter:var(--mint-blur); border:1px solid var(--mint-rim); box-shadow:0 22px 54px -26px rgba(30,55,48,.5),0 4px 10px -6px rgba(30,55,48,.2); } /* ============================================================ THE POPUP WAS PAINTING UNDER THE NEXT CARD. 7 September 2026. His report, with a screenshot: "the drop down menu is on the back of the other fields make sure all drop down menus during the editing mode must be in front." AND z-index ON THE POPUP WAS NEVER GOING TO FIX IT. `z-index:120` only competes inside the nearest stacking context, and the popup's context is its own CARD. The Contact and US address card is a LATER SIBLING in the grid, so it paints after the whole Personal card - popup included - no matter how high the popup's own number goes. THE TRAPPING ELEMENT IS THE CARD, so the card is what has to be raised. Same law as the transform-traps-dropdowns case: raise the ancestor, not the thing you can see. `:has()` keeps it self-clearing - the card is only lifted while one of its tiles is open, so nothing is left sitting above its neighbours after the list closes. */ #mhDetail .mint-grid, #hhDetail .mint-grid, #view-settings .mint-grid, #cnPop .mint-grid, #view-help .mint-grid {position:relative} #mhDetail .mint-w.selopen, #hhDetail .mint-w.selopen, #view-settings .mint-w.selopen, #cnPop .mint-w.selopen{z-index:121} #mhDetail .pd-card.mint:has(.mint-w.selopen), #hhDetail .pd-card.mint:has(.mint-w.selopen), #view-settings .pd-card.mint:has(.mint-w.selopen), #cnPop .pd-card.mint:has(.mint-w.selopen){position:relative;z-index:400} #mhDetail .pd-grid:has(.mint-w.selopen){position:relative;z-index:400} /* FLIPPED UP. placeSel measures the room below inside the scrolling pane and adds `.up` when the list would run off the end - his second point: "if the screen is in the end they must open on top or bottom". The engine is the app's existing one; only this rule, which turns the measurement into a position, had to be written for the tile. */ #mhDetail .mint-w.ed .selpop.mint-pop.up, #hhDetail .mint-w.ed .selpop.mint-pop.up, #view-settings .mint-w.ed .selpop.mint-pop.up, #cnPop .mint-w.ed .selpop.mint-pop.up{ top:auto;bottom:calc(100% + 9px); box-shadow:0 -22px 54px -26px rgba(30,55,48,.5),0 -4px 10px -6px rgba(30,55,48,.2); } /* KEYBOARD. The picker is a div with tabindex, so it needs the ring drawn explicitly - a real input gets it from :focus-within, this does not. Same ring, so a staff member tabbing through sees ONE highlight travelling across the card rather than two different ideas of "focused". */ #mhDetail .mint-w.ed .mint-sel:focus, #hhDetail .mint-w.ed .mint-sel:focus, #view-settings .mint-w.ed .mint-sel:focus, #cnPop .mint-w.ed .mint-sel:focus{outline:none} #mhDetail .mint-w.ed:has(.mint-sel:focus-visible), #hhDetail .mint-w.ed:has(.mint-sel:focus-visible), /* AND ON A PLAIN :focus, ON THE HOUSEHOLD RECORD ONLY. 7 Sep 2026. "Where do I start" is answered by focusing the FIRST tile, and on the household record the first tile is a PICKER, not a text input. A div takes focus programmatically but never :focus-visible - that flag is the browser's judgement about whether a human used the keyboard - so the ring simply did not appear and the answer to his question was drawn on the second field instead. Added as a SELECTOR on the existing rule rather than as a second copy of it, so there is still one definition of what a focused tile looks like. Not added to #mhDetail: its first tile is a text input, which already rings on :focus-within whatever put the caret there, so nothing there is broken to fix. */ #hhDetail .mint-w.ed:has(.mint-sel:focus), #view-settings .mint-w.ed:has(.mint-sel:focus), #cnPop .mint-w.ed:has(.mint-sel:focus){ background:rgb(var(--tg-rgb,255,255,255));border-style:solid;border-color:rgba(47,107,87,.55); box-shadow:0 0 0 3px rgba(47,107,87,.13), var(--mint-lift-sm); transform:translateY(-2px); } /* DARK - the same recipe re-keyed, never ported. */ body.dark #mhDetail .mint-w.ed .mint-in, body.dark #hhDetail .mint-w.ed .mint-in, body.dark #mhDetail .mint-w.ed .mint-sel, body.dark #hhDetail .mint-w.ed .mint-sel, body.dark #view-settings .mint-w.ed .mint-in, body.dark #view-settings .mint-w.ed .mint-sel{color:#EAF0F4} body.dark #mhDetail .mint-w.ed .mint-in::placeholder, body.dark #hhDetail .mint-w.ed .mint-in::placeholder, body.dark #view-settings .mint-w.ed .mint-in::placeholder{color:#6E7E88} body.dark #mhDetail .mint-w.ed:hover, body.dark #hhDetail .mint-w.ed:hover, body.dark #view-settings .mint-w.ed:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)))} body.dark #mhDetail .mint-w.ed:focus-within, body.dark #hhDetail .mint-w.ed:focus-within, body.dark #view-settings .mint-w.ed:focus-within{ background:rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)));border-color:rgba(143,187,165,.6); box-shadow:0 0 0 3px rgba(143,187,165,.16), var(--mint-lift-sm); } body.dark #mhDetail .mint-w.ed .selpop.mint-pop, body.dark #hhDetail .mint-w.ed .selpop.mint-pop, body.dark #view-settings .mint-w.ed .selpop.mint-pop{ background:rgba(28,38,46,.96);border-color:rgba(180,210,235,.16); } /* ============================================================ NOT EDITABLE - THE THREE SHAPES OF IT. 7 September 2026. His rules: "the OVERVIEW TAB the SERVICE & ENROLLMENTS and HISTORY TABS is not editable staff can go there but they should get a message not editable fields", and "some of our Detail KPI cards like KEY DATES and DEADLINES is not editable show them for staff but never allow them to click on them gray them out". THE GREY IS A STATEMENT, AND IT IS THE THIRD STATE THIS RECORD SPEAKS. The card already has two: something is there (white, pine hairline, filled dot) and nothing yet (dashed, hollow dot). "Not editable" cannot borrow either - a locked tile usually HAS a value, so the dashed empty look would lie about it. It is the value drawn at rest with the colour taken out: the data still readable, the affordance gone. AND IT ONLY EXISTS WHILE EDITING. Outside edit mode nothing on the record is interactive, so greying a tile there would read as "this data is unavailable" rather than "you cannot change this here" - a different and wrong message. `.lockt` is only ever set when _inline is true. ============================================================ */ /* 1. THE LOCKED TILE. No lift, no pointer, no caret - and it keeps its value legible. */ #mhDetail .mint-w.ed.lockt, #hhDetail .mint-w.ed.lockt, #view-settings .mint-w.ed.lockt, #cnPop .mint-w.ed.lockt{ background:rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1))); border-style:solid;border-color:rgba(30,55,48,.1); box-shadow:none;cursor:default; } #mhDetail .mint-w.ed.lockt:hover, #hhDetail .mint-w.ed.lockt:hover, #view-settings .mint-w.ed.lockt:hover, #cnPop .mint-w.ed.lockt:hover{transform:none;box-shadow:none;background:rgba(var(--tg-rgb,255,255,255),calc(.28*var(--tg-k,1)))} #mhDetail .mint-w.ed.lockt .mint-vl, #hhDetail .mint-w.ed.lockt .mint-vl, #view-settings .mint-w.ed.lockt .mint-vl, #cnPop .mint-w.ed.lockt .mint-vl{color:#7E8D88} #mhDetail .mint-w.ed.lockt .mint-lb, #hhDetail .mint-w.ed.lockt .mint-lb, #view-settings .mint-w.ed.lockt .mint-lb, #cnPop .mint-w.ed.lockt .mint-lb{color:#96A29D} /* The dot goes hollow-grey: it must not read as the pine "this is filled" dot, because the question a locked tile answers is not whether it has a value. */ #mhDetail .mint-w.ed.lockt::before, #hhDetail .mint-w.ed.lockt::before, #view-settings .mint-w.ed.lockt::before, #cnPop .mint-w.ed.lockt::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.16)} #mhDetail .mint-w .mint-lock, #hhDetail .mint-w .mint-lock, #view-settings .mint-w .mint-lock, #cnPop .mint-w .mint-lock{ display:inline-flex;align-items:center;margin-left:6px;vertical-align:-1px;color:#A0ACA7; } #mhDetail .mint-w .mint-lock svg, #hhDetail .mint-w .mint-lock svg, #view-settings .mint-w .mint-lock svg, #cnPop .mint-w .mint-lock svg{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none} /* THE REASON, NOT JUST THE GREY. A locked field with no explanation is a dead end; one line turns it into an instruction - "Edit on the Documents tab." */ #mhDetail .mint-w.ed.lockt .mint-note, #hhDetail .mint-w.ed.lockt .mint-note, #view-settings .mint-w.ed.lockt .mint-note, #cnPop .mint-w.ed.lockt .mint-note{ display:block;margin-top:5px;font-size:10.5px;font-weight:600;color:#98A4A0;line-height:1.35; } /* 2. THE WHOLE CARD, when nothing on it can be edited. Key dates and deadlines is his named example. The card is NOT hidden and NOT dimmed to unreadability - staff still need the deadlines while they work - it simply stops offering anything. */ #mhDetail .pd-card.mint.noedit .mint-w, #hhDetail .pd-card.mint.noedit .mint-w, #mhDetail .pd-card.mint.noedit .cl-tl, #mhDetail .pd-card.mint.noedit .mint-prow, #hhDetail .pd-card.mint.noedit .mint-prow, #view-settings .pd-card.mint.noedit .mint-w, #cnPop .pd-card.mint.noedit .mint-w, #view-settings .pd-card.mint.noedit .mint-prow, #cnPop .pd-card.mint.noedit .mint-prow{pointer-events:none} #mhDetail .pd-card.mint.noedit .mint-w:hover, #hhDetail .pd-card.mint.noedit .mint-w:hover, #mhDetail .pd-card.mint.noedit .cl-tl:hover, #view-settings .pd-card.mint.noedit .mint-w:hover, #cnPop .pd-card.mint.noedit .mint-w:hover{transform:none;box-shadow:none} /* KEY DATES draws TIMELINE ROWS, not tiles, so the grey has to reach them too - otherwise the one card he named by name would be the only thing on the record still looking live. Muted, NOT faded away: he was explicit that staff must still see these while they work, and a deadline you cannot read is worse than one you cannot edit. */ #mhDetail .pd-card.mint.noedit .cl-tl{filter:grayscale(1);opacity:.72} #mhDetail .pd-card.mint.noedit .mint-ph .mint-tag, #hhDetail .pd-card.mint.noedit .mint-ph .mint-tag, #view-settings .pd-card.mint.noedit .mint-ph .mint-tag, #cnPop .pd-card.mint.noedit .mint-ph .mint-tag{ background:rgba(30,55,48,.08);box-shadow:inset 0 0 0 1px rgba(30,55,48,.12);color:#7E8D88; } body.dark #mhDetail .pd-card.mint.noedit .cl-tl{opacity:.62} /* 3. THE TAB BANNER. Same material and same shape as the expiry banner at the top of Overview, so it reads as part of the record rather than an alert bolted on. */ #mhDetail .mint-noedit, #hhDetail .mint-noedit, #view-settings .mint-noedit, #cnPop .mint-noedit{ display:flex;align-items:center;gap:14px;padding:16px 20px;margin-bottom:16px; border:1px solid rgba(30,55,48,.1);border-radius:22px; background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1))); backdrop-filter:var(--mint-blur);-webkit-backdrop-filter:var(--mint-blur); } #mhDetail .mint-noedit .ic, #hhDetail .mint-noedit .ic, #view-settings .mint-noedit .ic, #cnPop .mint-noedit .ic{ width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:var(--r-md); background:rgba(30,55,48,.07);box-shadow:inset 0 0 0 1px rgba(30,55,48,.1);color:#7E8D88; } #mhDetail .mint-noedit .ic svg, #hhDetail .mint-noedit .ic svg, #view-settings .mint-noedit .ic svg, #cnPop .mint-noedit .ic svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none} #mhDetail .mint-noedit .t, #hhDetail .mint-noedit .t, #view-settings .mint-noedit .t, #cnPop .mint-noedit .t{font-size:13px;font-weight:800;color:#55635E} #mhDetail .mint-noedit .s, #hhDetail .mint-noedit .s, #view-settings .mint-noedit .s, #cnPop .mint-noedit .s{margin-top:3px;font-size:11.5px;font-weight:600;color:#8A9891;line-height:1.45} /* THE PERSON SUB-HEADING inside a grouped card. 7 September 2026. Emergency contacts stopped being one card each while editing and became sections of a single card - his words: "all must be in the same KPI card and it must be like this person 1 person 2". IT IS DELIBERATELY QUIETER THAN THE CARD CAPSULE. A second full capsule inside a card would compete with the one above it and the eye would read two cards again, which is the exact thing this change removes. A hairline, a small label and that person's own count - enough to separate two people, not enough to look like a new card. ============================================================ */ /* IT IS A BUTTON NOW, so the browser's own defaults have to be undone before anything else - MudBlazor centres every bare