/* ============================================================
   MATTHEW HOUSE - DETAIL VIEW STANDARD
   Verbatim port of _handoff/Program Detail Mock (Program Detail.html
   inline block + the program-wizards.css kit rules it uses).

   EVERY rule is scoped under #mhDetail so the mock's generic class names
   (.modal .row .chip .tile .day .field .icf .term .kv .flag .meter ...)
   cannot leak into the app - and, just as important, so the id-level
   specificity beats any single-class app/MudBlazor rule that would
   otherwise leak IN (the .static/MudBlazor collision lesson).

   This is the APP-WIDE detail shell: Program is the first host, Client /
   Household / Subsidy are next, so nothing here is Program-specific.

   Dropped from the mock on purpose: the canvas chrome (.frame/.fr-label/
   .dv-vbar variant switcher/.dv-sheet spec sheet) and the cream demo body -
   the standing rule is ONE cool-gray background app-wide.
   Dark mode is re-keyed from the mock's [data-theme="dark"] to the app's
   body.dark. Plain hyphens and plain quotes only.
   ============================================================ */

/* TERM-DATES-01 (Aug 15 2026): the weekday picker on the Term settings SCHEDULE step.
   The same seven-button row the term wizard uses, rebuilt on THIS surface's tokens
   rather than borrowing the wizard's scoped copy - #pgWiz's version cannot reach here
   and duplicating its literals would drift the moment either palette moved. */
/* THE SCHEDULE TAB'S STATE FILTER (CEO, Aug 15 2026). Active / Complete / Cancelled / All.
   Built on THIS surface's tokens rather than borrowing .mh-app .seg: that lives outside
   #mhDetail's scope and would inherit the app palette instead of the detail one, so the
   pill would not match the record it sits in. Same counted-toggle shape as the Program
   Terms buckets so the app has one idiom, not two. */
#mhDetail .dv-seg{
  display:inline-flex;gap:4px;padding:4px;margin:0 0 16px;
  background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);border-radius:var(--r-pill);
}

/* `.dv-schedbar` / `.dv-addterm` WERE DELETED (CEO, Aug 17 2026). They wrapped the
   Schedule filter so an Add Term button could sit beside it - but Add Term is in the
   record's (...) menu too, and two doors into one room on one screen is one too many.
   The menu kept it because it works from Overview and Roster as well as Schedule.
   Nothing else used either class; the filter is back to a bare .dv-seg above. */
#mhDetail .dv-seg button{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border:0;background:none;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-sans);font-size:12.5px;font-weight:650;color:var(--ink-3);
  transition:background var(--t),color var(--t);
}
#mhDetail .dv-seg button:hover{color:var(--ink-1)}
#mhDetail .dv-seg button.on{background:var(--brand);color:#fff}
#mhDetail .dv-seg button span{
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--r-pill);
  background:rgba(40,60,80,.10);
}
#mhDetail .dv-seg button.on span{background:rgba(var(--tg-rgb,255,255,255),calc(.22*var(--tg-k,1)))}

/* THE TERM SETTINGS FORM USES THE FULL PANE (CEO, Aug 15 2026). `.dv-form` caps at 920px,
   which is right for a two-column personal record and wrong here: the pane is 1178px, so
   the form left 258px of empty column on its right while the read view beside it filled
   the width. This is what EditFormClass exists for - Subsidy opts out the same way.

   WRITTEN AS `.dv-form.tm-form`, AND THAT IS THE WHOLE FIX. The first attempt was
   `#mhDetail .tm-form`, which has the SAME specificity as `#mhDetail .dv-form` (one id,
   one class) - so the cap simply won on source order, being later in this file. Measured:
   the class was on the element and the computed max-width was still 920px. Two classes
   out-rank one, so this now wins wherever either rule sits. */
#mhDetail .dv-form.tm-form{max-width:none}

/* PROGRAM DETAIL'S EDIT FORM DOES THE SAME (CEO, Aug 17 2026). Term Settings was fixed on
   Aug 15 and Program Detail - the shell's FIRST host, and the screen Term Settings was
   built to match - was left behind. Measured before changing anything: computed max-width
   920px, form 920px, pane 1106px, so every edit step carried a 186px dead gutter on its
   right while the read view beside it filled the width.

   TWO CLASSES, for the reason written above: `#mhDetail .pg-form` alone ties with
   `#mhDetail .dv-form` on specificity and loses on source order, because the cap sits at
   line ~721 of this file - later than here. That exact mistake cost a round on Aug 15.
   Measure the computed value; do not re-read the rule. */
#mhDetail .dv-form.pg-form{max-width:none}

/* THE SEVEN DAYS FILL THEIR ROW, like every other field on the form. As content-width
   buttons they clustered at the left of a full-width label and read as a stray toolbar
   rather than as one control. Equal columns also make the row scannable - Wednesday is
   always in the middle, wherever the pane is sized. */
#mhDetail .tm-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
#mhDetail .tm-dow button{
  min-width:0;padding:12px 6px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--f-rest-bd);background:var(--f-rest-bg);box-shadow:var(--f-rest-sh);
  font-family:var(--font-sans);font-size:13.5px;font-weight:650;color:var(--ink-2);
  transition:background var(--t),color var(--t),border-color var(--t);
}
#mhDetail .tm-dow button:hover{background:var(--f-hover-bg)}
#mhDetail .tm-dow button.on{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}

#mhDetail{
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* LOCKED detail-view tokens (brief section 1): rail #2E4A43 -> #213A33 */
  --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);
  --dv-rail-a:#2E4A43; --dv-rail-b:#213A33;

  --ink-1:#1C2733; --ink-2:#3B474B; --ink-3:#677579; --ink-4:#9AA7B3;
  --danger:#C0473F; --danger-bg:#F7E3E1; --danger-ink:#8C312B;

  --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;
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.25,1); --t:.2s var(--ease);

  font-family:var(--font-sans);
  color:var(--ink-1);
}
body.dark #mhDetail{
  --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;
  --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);
}
#mhDetail *{box-sizing:border-box}

/* =========================================================
   CONTAINER - full page OR centered overlay (brief 2.3)
   ========================================================= */
#mhDetail.dv-stage{position:relative;display:flex;flex:1;min-height:0}
#mhDetail.dv-stage>.modal{flex:1;min-width:0;min-height:0}
/* page mode inside the app content area: give the shell a workable height */
#mhDetail.dv-stage.page{height:calc(calc(100 * var(--mh-vh)) - 190px);min-height:660px}
#mhDetail.dv-stage.ovr{position:fixed;inset:0;z-index:1200;padding:20px;
  align-items:center;justify-content:center;overflow:hidden}
/* the overlay box matches CLIENT DETAIL (.cdbox in mh-clientdetail.css) exactly -
   width:min(1520px,calc(97 * var(--mh-vw))) / height:min(calc(93 * var(--mh-vh)),920px). Only the PANE grows: the rail
   keeps its fixed 340px, so the extra width all goes to the detail section. */
#mhDetail.dv-stage.ovr>.modal{flex:none;width:min(1520px,calc(97 * var(--mh-vw)));max-width:none;
  height:min(calc(93 * var(--mh-vh)),920px);max-height:none;position:relative;z-index:2;border-radius:20px;
  box-shadow:0 50px 110px -22px rgba(8,18,14,.62)}
/* NO MAGNIFIER ON THE BACKDROP (CEO, Jul 29 2026). This carried cursor:zoom-out, so hovering
   anywhere outside the mock turned the pointer into a zoom-out glass - promising a
   click-to-dismiss that the INERT BACKDROP LAW forbids (a backdrop click never closes a detail
   or a wizard). The cursor was the last trace of the behaviour that law removed. Plain default:
   the area is not interactive, so it must not look interactive. */
#mhDetail .dv-behind{position:absolute;inset:0;z-index:1;background:rgba(12,24,20,.55);
  cursor:default;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
/* The tab-row slot the mock gave to the close X now holds the OVERFLOW (...) button,
   in both containers; closing moved to a plain Close button in the footer. */

/* =========================================================
   MODAL SHELL (kit)
   ========================================================= */
#mhDetail .modal{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:rgb(var(--tg-rgb,255,255,255));border-radius:24px;border:1px solid var(--line);
  box-shadow:0 40px 90px -20px rgba(28,39,51,.35),0 4px 14px rgba(28,39,51,.08)}
#mhDetail .modal.wz2{flex-direction:row;background:var(--bg-canvas)}
#mhDetail .m-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px 20px;flex:none}
#mhDetail .m-ey{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
#mhDetail .m-title{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1);margin:0;line-height:1.05}
#mhDetail .m-x{width:40px;height:40px;flex:none;border-radius:12px;border:none;background:var(--f-rest-bg);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:background var(--t),color var(--t)}
#mhDetail .m-x:hover{background:var(--tg-well,rgb(225,230,234));color:var(--ink-1)}
body.dark #mhDetail .m-x:hover{background:#2C3A46}
#mhDetail .m-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
#mhDetail .m-body{flex:1;min-height:0;overflow:auto;padding:8px 26px 26px;
  scrollbar-width:none;-ms-overflow-style:none}
#mhDetail .m-body::-webkit-scrollbar{width:0;height:0;display:none}
#mhDetail .m-foot{flex:none;display:flex;align-items:center;gap:12px;padding:18px 36px;
  border-top:1px solid var(--line);background:var(--bg-canvas)}
#mhDetail .m-foot .spacer{flex:1}
#mhDetail .m-foot .foot-hint{flex:none;white-space:nowrap;font-size:12.5px;color:var(--ink-3);font-weight:500}
#mhDetail .m-foot .foot-hint svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px;stroke:var(--brand-600);stroke-width:2;fill:none}

/* THE TWO-LINE VARIANT (Aug 15 2026). Only when a host supplies FooterHintSub - the
   single-line footer every other record uses is untouched.

   BOTH LINES LEFT-ALIGNED, AND THE ICON ON THE FIRST ONE (CEO). The first pass centred
   the pair and used `align-items:center` on the row - which centres the clock against
   the whole two-line BLOCK, dropping it into the gap between the lines. It read as a
   sinking icon, and it was: with one line the block IS the line, with two it is twice
   as tall and the middle moves down.
   `flex-start` pins the icon to the top, and the 2px nudge centres it on the first
   line's own 18px line box ((18 - 14) / 2) rather than on its top edge. */
#mhDetail .m-foot .foot-hint.two{display:inline-flex;align-items:flex-start;gap:0}
#mhDetail .m-foot .foot-hint.two svg{flex:none;margin-right:8px;margin-top:2px;vertical-align:baseline}
#mhDetail .m-foot .foot-hint.two .fh-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.45}
#mhDetail .m-foot .foot-hint.two .fh-sub{font-size:11.5px;color:var(--ink-4);font-weight:500}

/* text selection: chrome is not selectable, real content is */
#mhDetail{-webkit-user-select:none;user-select:none}
#mhDetail input,#mhDetail textarea,#mhDetail .pd-desc,#mhDetail .sum-qr-v{-webkit-user-select:text;user-select:text}

/* =========================================================
   RAIL (wz2) - identity + fact list
   ========================================================= */
#mhDetail .rail{width:340px;flex:none;position:relative;overflow:hidden;color:#fff;padding:0;
  display:flex;flex-direction:column;border-right:1px solid var(--line);
  background:radial-gradient(120% 55% at 90% 3%,rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))),transparent 42%),
             linear-gradient(162deg,var(--dv-rail-a) 0%,var(--dv-rail-b) 100%)}
#mhDetail .rail-head{flex:none;position:relative;padding:26px 26px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(255,255,255,.15)}
#mhDetail .rail-ic{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(var(--tg-rgb,255,255,255),calc(.15*var(--tg-k,1)));color:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* THE SECTION GLYPH. THIS RULE MUST SIZE IT AND NOTHING ELSE.

   It used to say `fill:currentColor;stroke:none` for every glyph in the slot. That was
   right when DetailIcons.Mark - a solid shape - was the only thing here, and wrong from
   the moment NavData.IconFor(Section) started supplying the real section icons.
   MEASURED on the Case Notes file: the header glyph computed to fill:#fff / stroke:none,
   so the bookmark rendered as a solid white silhouette with the two lines inside it
   swallowed. It was never the wrong ICON - the path is byte-identical to the nav rail's -
   it was the right icon painted the wrong way.

   AND THE NAV GLYPHS ARE MIXED, which is why no blanket rule can be right:
       fill="currentColor"                  dashboard, clients, program, planner, reports
       fill="none" stroke="currentColor"    casenotes, teams, services, admin
   Four of the six DetailShell hosts carry a FILLED one (clients, program x3), so forcing
   a stroke here would have broken them exactly as forcing a fill broke Case Notes.

   EVERY GLYPH ALREADY DECLARES HOW IT IS DRAWN. The nav rail overrides neither property
   and gets both kinds right; this now does the same. `.is-line` is deliberately left
   unstyled - DetailShell still emits it so the two cases are visible in the DOM.
   Only the legacy fallback needs help: Mark declares no fill at all, so without the rule
   below it would paint black. */
#mhDetail .rail-ic svg{width:41px;height:45px}
#mhDetail .rail-ic.is-mark svg{fill:currentColor;stroke:none}
#mhDetail .rail-title{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1;text-align:left;text-transform:uppercase}
#mhDetail .rail-scroll{flex:1;min-height:0;overflow:auto;padding:24px 26px 26px;display:flex;flex-direction:column;
  scrollbar-width:none;-ms-overflow-style:none}
#mhDetail .rail-scroll::-webkit-scrollbar{width:0;height:0;display:none}
#mhDetail .sum{display:flex;flex-direction:column}
/* the rail portrait - leads the panel, directly under the section title. Separate from
   the code tile below it: a face and a barcode are two different things. */
/* ============================================================
   RAIL PROFILE PHOTO - the app's ONE photo control, ported from Client Detail
   (.mh-app #clDetail .mh-photo ...). Same geometry, same pine gradient, same
   person glyph empty state, same clay camera button. Not a lookalike.
   The circle is NOT the popover's parent boundary problem: .cd-photomenu is
   absolutely positioned and the circle does not clip (no overflow:hidden here).
   ============================================================ */
#mhDetail .mh-photo{position:relative;align-self:center;width:112px;height:112px;border-radius:50%;
  margin:2px 0 16px;cursor:pointer;background:linear-gradient(150deg,#5E8C81,#2F4640);
  border:2.5px solid rgba(234,241,237,.5);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.16),0 6px 18px rgba(0,0,0,.26);
  display:grid;place-items:center}
#mhDetail .mh-ini{width:100%;height:100%;font-family:var(--mh-font-head);font-weight:600;font-size:30px;
  color:#F4F0E6;display:grid;place-items:center}
#mhDetail .mh-ini svg{width:46%;height:46%}
#mhDetail .mh-photo img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:none}
#mhDetail .mh-photo.has img{display:block}
#mhDetail .mh-photo.has .mh-ini{display:none}
#mhDetail .mh-ov{position:absolute;inset:0;border-radius:50%;background:rgba(20,32,28,.55);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;
  font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:0;transition:opacity .18s}
#mhDetail .mh-ov svg{width:16px;height:16px}
#mhDetail .mh-photo:hover .mh-ov{opacity:1}
#mhDetail .mh-photo:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.16),0 0 0 4px rgba(255,255,255,.6)}
#mhDetail .mh-btn{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;
  background:var(--mh-clay,#C97B5A);color:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 2.5px var(--dv-rail-a);transition:opacity .18s}
#mhDetail .mh-btn svg{width:13px;height:13px}
/* CAMERA BUTTON VISIBILITY (CEO, Jul 27 2026): it is a PROMPT, not decoration.
   No photo  -> always visible, because "add one" is the thing to do next.
   Photo set -> hidden, so the portrait is just the person; it comes back on hover, on
                keyboard focus, and while the options popover is open, then hides again
                when the staff member moves on.
   The empty state keeps it permanently, so `.has` is the only case that hides. */
#mhDetail .mh-photo.has .mh-btn{opacity:0}
#mhDetail .mh-photo.has:hover .mh-btn,
#mhDetail .mh-photo.has:focus-within .mh-btn,
#mhDetail .mh-photo.has:has(.cd-photomenu) .mh-btn{opacity:1}
/* the studio popover must clear the rail */
#mhDetail .mh-photo .cd-photomenu{z-index:60}
#mhDetail .sum-name{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.14;margin-top:2px;
  text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* Type chip sits directly under the name, status under the chip (CEO order, Jul 27 2026). */
#mhDetail .sum-type+.pd-state{margin-top:10px}
/* a rail fact that leads somewhere behaves like a control, not a label */
/* PACK18c (19 Sep 2026) - GEOMETRY REMOVED. This rule gave a clickable fact its own
   box back when a rail row had none: -8px margin, 8px padding, its own radius and hover.
   Every row now carries the design pack's padding, radius and hover, so all this did was
   pull the clickable rows' chips 6px out of line with the rest - the stagger the owner
   photographed. The cursor and the focus ring stay: a fact that leads somewhere still
   has to say so, and a keyboard user still needs to see where they are. */
#mhDetail .sum-row.act{cursor:pointer}
#mhDetail .sum-row.act:focus-visible{outline:none;background:rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)));box-shadow:0 0 0 2px rgba(255,255,255,.45)}
#mhDetail .sum-type{align-self:center;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.01em;color:#fff;background:rgba(var(--tg-rgb,255,255,255),calc(.17*var(--tg-k,1)));border-radius:999px;padding:5px 13px}
#mhDetail .pd-state{align-self:center;margin-top:10px;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:12.5px;font-weight:700;color:#fff}
#mhDetail .pd-state i{width:8px;height:8px;border-radius:999px;background:#A8D5C9;box-shadow:0 0 0 3px rgba(168,213,201,.25)}
#mhDetail .pd-state.is-off{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)))}
#mhDetail .pd-state.is-off i{background:rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1)));box-shadow:none}
#mhDetail .pd-state.is-arch{background:rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1)));color:rgba(255,255,255,.76)}
#mhDetail .pd-state.is-arch i{background:#D9B26A;box-shadow:0 0 0 3px rgba(217,178,106,.2)}
/* Record-level rail buttons, directly under the identity block (DetailShell.RailActions).
   The shell owns only the gap - the buttons themselves are the host's. */
#mhDetail .sum-actions{margin-top:16px;display:flex;flex-direction:column;gap:10px}
#mhDetail .sum-ctx{margin-top:16px;display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-md);background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
#mhDetail .sum-ctx svg{width:24px;height:26px;flex:none;fill:rgba(255,255,255,.85);stroke:none}
#mhDetail .sum-ctx-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#mhDetail .sum-ctx-v{font-size:14.5px;font-weight:700;color:#fff;margin-top:2px}

/* identity slot - QR + code, or round photo + code (brief 3.3) */
#mhDetail .sum-qr{margin-top:18px;display:flex;align-items:center;gap:14px;padding:13px;border-radius:var(--r-md);
  background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)));border:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  cursor:pointer;transition:background var(--t)}
#mhDetail .sum-qr:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1)))}
/* THE canonical MH QR tile - identical to #pgWiz .sum-qr .qr-frame (New Program
   wizard), Client Detail and Household: SvgPine in a white frame with the pine
   MH mark centred on top. ECC-H is why the logo never breaks the scan. */
#mhDetail .sum-qr .qr-frame{width:78px;height:78px;flex:none;position:relative;border-radius:8px;background:#fff;padding:3px;/* QRFILL29: was 5px */display:block;line-height:0}
#mhDetail .sum-qr .qr-frame svg{width:100%;height:100%;display:block}
#mhDetail .qr-logo{position:absolute;inset:0;margin:auto;display:grid;place-items:center;background:var(--brand-700);pointer-events:none}
#mhDetail .sum-qr .qr-logo{width:20px;height:20px;border-radius:6px;box-shadow:0 0 0 3px #fff}
#mhDetail .sum-qr .qr-logo img{width:13px;height:13px;display:block;object-fit:contain}
/* a host with no QR yet: the code still reads, but the tile is not a button */
#mhDetail .sum-qr.is-static{cursor:default}
#mhDetail .sum-qr.is-static:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)))}
#mhDetail .sum-qr-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
#mhDetail .sum-qr-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#mhDetail .sum-qr-v{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff;overflow-wrap:anywhere}
/* The optional second pair (CodeLabel2) - a new label, so it gets the air of a new line of thought. */
#mhDetail .sum-qr-k.k2{margin-top:10px}
#mhDetail .sum-qr .qr-mini{margin-left:auto;background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));border-color:rgba(255,255,255,.22);color:#fff}
#mhDetail .sum-qr .qr-mini:hover{background:#fff;border-color:#fff;color:var(--dv-rail-a);box-shadow:none}

/* fact list - max 6 rows, rest goes to the More details card (brief 2.1) */
#mhDetail .sum-list{margin-top:18px;padding-top:6px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column}
#mhDetail .sum-row{display:flex;align-items:center;gap:13px;padding:11px 0}
#mhDetail .sum-rc{min-width:0;display:flex;flex-direction:column;gap:3px}
#mhDetail .sum-k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
#mhDetail .sum-v{font-size:15px;font-weight:600;color:#fff;line-height:1.35;overflow-wrap:anywhere}
#mhDetail .sum-v small{display:block;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.72);margin-top:3px}
/* fact-row variant (c): the chip value reads as PLAIN TEXT in the rail - same
   type as .sum-v, no pill background - so Attendance sits level with every other
   fact. (The same fact still renders as a tinted .flag in the More details card.) */
#mhDetail .sum-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:0;border-radius:0;background:none;box-shadow:none;font-size:15px;font-weight:600;color:#fff;line-height:1.35}
#mhDetail .sum-more{position:sticky;bottom:-26px;z-index:2;margin:4px 0 -26px;display:flex;align-items:center;gap:13px;width:100%;padding:12px 0 26px;border:none;
  background:linear-gradient(180deg,rgba(33,58,51,0),rgba(33,58,51,.94) 42%);cursor:pointer;
  font-family:var(--font-sans);font-size:13.5px;font-weight:700;color:rgba(255,255,255,.72);text-align:left;transition:color var(--t)}
#mhDetail .sum-more:hover{color:#fff}

/* Host-owned rail furniture between the code tile and the facts (DetailShell.RailExtras).
   The shell owns only the gap and the rules around it - everything inside is the host's,
   styled by the host's own sheet, so this can never dictate what a future host puts here. */
#mhDetail .sum-extra{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:14px}
/* A host whose rail extras are CONDITIONAL (Subsidy's pending-change and participation
   notes) still hands the shell a fragment, so the slot exists even when it draws nothing -
   which left a rule and 34px of dead space under the code tile. */
#mhDetail .sum-extra:empty{display:none}
/* It sits directly above the facts list, which draws its own top rule - drop the second
   line so the two blocks are not separated by a double divider. */
#mhDetail .sum-extra+.sum-list{margin-top:16px;padding-top:0;border-top:none}

/* rail collapses to a top summary strip under ~1100px (brief 5) */
#mhDetail .modal.dv-narrow{flex-direction:column}
#mhDetail .modal.dv-narrow>.rail{width:auto;flex:none;padding:0;border-right:none;border-bottom:1px solid rgba(255,255,255,.16)}
/* AND THE PANE MUST BE ABLE TO SHRINK (owner, 18 Sep 2026 - short laptop screens).
   MEASURED on 1024x576: the rail sits ON TOP in this layout, so the pane is a COLUMN flex item, and a
   flex item will not go below its content height unless it is told to. The pane stood 1283px tall inside
   a 534px box with overflow:hidden, .m-body therefore never scrolled, and everything below the fold -
   the Schools card included - could not be reached with the wheel at all. One line gives the scroll back
   to .m-body, where the rest of the record already has it. */
#mhDetail .modal.dv-narrow>.pane{min-height:0}
#mhDetail .rail-strip{display:flex;align-items:center;gap:16px;padding:15px 22px}
#mhDetail .rail-strip .rail-ic{width:44px;height:44px;border-radius:13px}
#mhDetail .rail-strip .rail-ic svg{width:30px;height:33px}
#mhDetail .rail-strip .sp{flex:1}
#mhDetail .rs-id{min-width:0;display:flex;flex-direction:column;gap:7px}
#mhDetail .rs-name{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mhDetail .rs-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#mhDetail .rs-meta .sum-type,#mhDetail .rs-meta .pd-state{margin:0;align-self:auto;padding:4px 11px;font-size:11.5px}
#mhDetail .rs-dot{font-size:12px;font-weight:600;color:rgba(255,255,255,.6)}
#mhDetail .rs-facts{flex:none;display:flex;align-items:center;gap:9px;padding:9px 14px;border:none;border-radius:999px;background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;font-family:var(--font-sans);font-size:12.5px;font-weight:700;cursor:pointer;transition:background var(--t)}
#mhDetail .rs-facts:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.2*var(--tg-k,1)))}
#mhDetail .rs-facts svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .rs-code{flex:none;display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:var(--r-md);background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
#mhDetail .rs-code .qr-frame{width:38px;height:38px;position:relative;border-radius:8px;background:#fff;padding:2px;line-height:0;display:block}
#mhDetail .rs-code .qr-frame svg{width:100%;height:100%;display:block}
#mhDetail .rs-code .qr-logo{width:11px;height:11px;border-radius:3.5px;box-shadow:0 0 0 1.6px #fff}
#mhDetail .rs-code .qr-logo img{width:7px;height:7px;display:block;object-fit:contain}
/* narrow strip: the portrait keeps its place ahead of the name, same as the wide rail */
#mhDetail .rs-face{flex:none;width:44px;height:44px;padding:0;border:none;border-radius:999px;overflow:hidden;
  cursor:pointer;line-height:0;background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));box-shadow:0 0 0 2px rgba(255,255,255,.3);
  transition:transform var(--t),box-shadow var(--t)}
#mhDetail .rs-face img{width:100%;height:100%;object-fit:cover;display:block}
#mhDetail .rs-face .mh-ini{width:100%;height:100%;display:grid;place-items:center;color:#F4F0E6}
#mhDetail .rs-face .mh-ini svg{width:52%;height:52%}
#mhDetail .rs-face{background:linear-gradient(150deg,#5E8C81,#2F4640)}
#mhDetail .rs-face:hover{transform:scale(1.06);box-shadow:0 0 0 2px #fff}
#mhDetail .rs-face:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.75)}
#mhDetail .rs-code{cursor:pointer;transition:background var(--t)}
#mhDetail .rs-code:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.16*var(--tg-k,1)))}
#mhDetail .rs-code.is-static{cursor:default}
#mhDetail .rs-code.is-static:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.11*var(--tg-k,1)))}
#mhDetail .rs-code .sum-qr-k{color:rgba(255,255,255,.6)}
#mhDetail .rs-code .sum-qr-v{color:#fff}

/* =========================================================
   PANE
   ========================================================= */
#mhDetail .pane{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-canvas);container-type:inline-size}
/* The tab pill and the (...) travel TOGETHER, centred in the pane (CEO, Jul 27 2026).
   `safe` again: when the row is too wide to centre, this falls back to flex-start so the
   first tab stays reachable instead of being pushed off the left edge.
   Edit mode is unaffected - `.dv-steps{flex:1}` fills the row, so there is nothing to centre. */
#mhDetail .pane-top{flex:none;padding:28px 36px 0;display:flex;align-items:center;justify-content:safe center;gap:14px}
/* THE PILL FILLS THE ROW, LIKE THE EDIT STEPPER (CEO, Jul 29 2026). Read mode and edit mode
   are the same surface one keypress apart, so the two rows now have the same geometry:
   `flex:1` here is what `.dv-steps{flex:1}` already did below. It used to be `flex:0 1 auto`
   (hug the labels), which made the tab row a different width from the stepper on the very
   same pane. The (...) keeps its place at the right end of the row. */
#mhDetail .dv-tabwrap{position:relative;flex:1;min-width:0}
#mhDetail .pane-head{flex:none;padding:22px 36px 20px}
#mhDetail .pane-title{font-size:27px;font-weight:800;letter-spacing:-.025em;color:var(--ink-1);margin:0;line-height:1.08;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#mhDetail .pane-sub{font-size:15px;color:var(--ink-3);margin:9px 0 0;font-weight:500;line-height:1.45}
#mhDetail .pane .m-body{padding:0 36px 22px}

/* tab pill: one grid for every host - fills the pane in equal columns while the labels fit,
   holds each label's own width and scrolls with edge fades when they do not (brief 2.2) */
/* THE TAB ROW IS THE EDIT STEPPER'S TWIN (CEO, Jul 29 2026). The stepper below is
   `repeat(var(--dv-tabs),1fr)` filling the pane, and the read tabs are the same row on the
   same pane, so they get the same rule. Two earlier attempts each failed one host:
     - repeat(N,1fr) alone forced every column to the WIDEST label, which is fine when the
       row fills the pane but squashed Client Detail's 8 tabs below their own words;
     - grid-auto-columns:max-content + width:max-content sized each tab to its label but shrank
       the whole pill away from the stepper's width.
   `minmax(max-content,1fr)` is both: every column is at least its own label, and any space
   left over is shared out EQUALLY, so <=5-tab hosts (Program, Student, Housing Subsidy) fill
   the row in equal columns exactly like the stepper, while Client Detail's 8 tabs keep their
   labels intact and overflow into the scroll variant below. --dv-tabs is read again here.
   Applies to all four shell hosts: Program, Student, Client and Housing Subsidy.
   `overflow-x:auto` lives HERE, not only on .scroll, because "<=5 tabs always fits" was never
   true: Student Detail's five labels come to 766px in a 764px pill, and with the old
   overflow:visible the last tab poked 2px past the pill's own rounded edge. Any variant that
   runs out of room now scrolls inside the pill instead of spilling outside it - the scrollbar
   is hidden on every variant for the same reason. */
#mhDetail .pd-tabs{display:grid;grid-template-columns:repeat(var(--dv-tabs,3),minmax(max-content,1fr));gap:4px;padding:5px;border-radius:14px;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);width:auto;max-width:100%;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
#mhDetail .pd-tabs::-webkit-scrollbar{width:0;height:0;display:none}
/* TAB LABELS ARE UPPERCASE (CEO, Jul 27 2026). Done in CSS, not by rewriting the Label
   strings, so the C# tab definitions stay readable and every host inherits it for free. */
#mhDetail .pd-tabs button{border:none;background:none;cursor:pointer;font-family:var(--font-sans);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.045em;color:var(--ink-3);padding:11px 14px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;transition:background var(--t),color var(--t),box-shadow var(--t)}
#mhDetail .pd-tabs button:hover{color:var(--ink-1);background:rgba(40,60,80,.05)}
#mhDetail .pd-tabs button .n{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(40,60,80,.1);color:var(--ink-3)}
body.dark #mhDetail .pd-tabs button .n{background:rgba(180,210,235,.14);color:var(--ink-2)}
#mhDetail .pd-tabs button[aria-selected="true"]{background:var(--brand);color:#fff;box-shadow:0 4px 12px -2px var(--brand-glow)}
#mhDetail .pd-tabs button[aria-selected="true"] .n{background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));color:#fff}
/* STILL A GRID (Jul 29 2026). This used to swap to `display:flex; justify-content:safe center`,
   which threw away the equal columns for every 6+ tab host - a 6-tab row that DID fit the pane
   sat centred and hugging instead of filling, so one shell rendered two different tab looks
   depending on how many tabs a host declared. Keeping the grid means the sizing rule above is
   the ONLY one: fill equally while there is room, overflow when there is not. Nothing is
   centred here on purpose - the grid's first column starts at scrollLeft:0, so the first tab
   can never be stranded off the left edge (which is what `safe` was guarding against).
   All this adds over the base rule now is smooth scrolling: overflow-x and the hidden
   scrollbar moved up to .pd-tabs, where every variant needs them. */
#mhDetail .pd-tabs.scroll{scroll-behavior:smooth}
/* ONE padding value for BOTH variants (Jul 29 2026). This used to carry its own 11px 13px,
   because the grid variant was 11px 6px back when equal 1fr columns supplied the width. Now
   that both variants are the same grid, a separate value here would make the 6+ tab hosts
   (Client Detail) sit 2px tighter per tab than the <=5 hosts (Program, Student, Housing
   Subsidy). It inherits the base padding instead, so every tab in the app fits its label with
   exactly the same breathing room. The old `flex:none` went with the flex variant - the grid's
   `minmax(max-content,...)` is what stops a button being squeezed now. */
#mhDetail .dv-fade{position:absolute;top:6px;bottom:6px;width:46px;z-index:3;pointer-events:none;opacity:0;transition:opacity var(--t)}
#mhDetail .dv-fade.l{left:2px;border-radius:11px 0 0 11px;background:linear-gradient(90deg,var(--f-rest-bg) 30%,rgba(223,228,234,0))}
#mhDetail .dv-fade.r{right:2px;border-radius:0 11px 11px 0;background:linear-gradient(270deg,var(--f-rest-bg) 30%,rgba(223,228,234,0))}
#mhDetail .dv-tabwrap[data-l="1"] .dv-fade.l,#mhDetail .dv-tabwrap[data-r="1"] .dv-fade.r{opacity:1}
body.dark #mhDetail .dv-fade.l{background:linear-gradient(90deg,var(--f-rest-bg) 30%,rgba(18,26,32,0))}
body.dark #mhDetail .dv-fade.r{background:linear-gradient(270deg,var(--f-rest-bg) 30%,rgba(18,26,32,0))}

/* =========================================================
   CARDS / STATS
   ========================================================= */
#mhDetail .pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-bottom:4px}
#mhDetail .pd-card{background:var(--f-focus-bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 19px;display:flex;flex-direction:column;min-width:0}
#mhDetail .pd-card.full{grid-column:1/-1}
/* BARE: a section whose CHILDREN are the white cards. Keeps the .pd-ch heading and the
   grid rhythm, drops the panel behind them - white inside white read as one flat slab. */
#mhDetail .pd-card.bare{background:none;border:none;padding:0}
#mhDetail .pd-ch{display:flex;align-items:center;gap:10px;margin-bottom:15px}
#mhDetail .pd-ch h4{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
#mhDetail .pd-ch svg{width:16px;height:16px;flex:none;stroke:var(--brand-600);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* THE COUNT BELONGS TO THE HEADING, NOT THE OTHER SIDE OF THE CARD (CEO, Aug 2 2026).
   `margin-left:auto` threw the tag to the far right, so "CHILDREN" and its "2" sat a
   full card-width apart and read as two unrelated things. It now sits in the flex row's
   natural 10px gap: CHILDREN (2), ALL PROGRAMS (3).
   SHARED RULE - this moves the count on EVERY detail host (Student, Program, Client,
   Household, Subsidy, My Profile), which is the point: they are the same component. */
#mhDetail .pd-ch .tag{font-size:11.5px;font-weight:700;color:var(--brand-600);background:var(--brand-tint);border-radius:999px;padding:4px 11px;white-space:nowrap}
#mhDetail .meter{height:12px;border-radius:999px;background:var(--f-rest-bg);box-shadow:var(--f-rest-sh);display:flex;overflow:hidden}
#mhDetail .meter i{display:block;background:linear-gradient(90deg,var(--brand),var(--brand-600));transition:width .5s var(--ease)}
#mhDetail .meter u{display:block;background:repeating-linear-gradient(45deg,var(--brand-tint-2) 0 5px,transparent 5px 10px);transition:width .5s var(--ease)}
#mhDetail .lgnd{display:flex;gap:16px;margin-top:11px;font-size:12px;font-weight:600;color:var(--ink-3)}
#mhDetail .lgnd span{display:flex;align-items:center;gap:7px}
#mhDetail .lgnd b{width:9px;height:9px;border-radius:3px;background:var(--brand)}
#mhDetail .lgnd .w{background:var(--brand-tint-2)}
#mhDetail .lgnd .o{background:var(--f-rest-bg);box-shadow:inset 0 0 0 1px var(--f-rest-bd)}
#mhDetail .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px}
#mhDetail .tile{background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);border-radius:var(--r-md);padding:12px 13px}
#mhDetail .tile .v{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1);line-height:1;overflow-wrap:anywhere}
#mhDetail .tile .v .sub{font-size:14px;color:var(--ink-4)}
#mhDetail .tile .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-top:7px}
#mhDetail .terms{display:flex;flex-direction:column;gap:10px}
#mhDetail .term{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-md);background:var(--f-rest-bg);border:1px solid var(--f-rest-bd)}
#mhDetail .term>div{min-width:0}
#mhDetail .term .tic{width:36px;height:36px;flex:none;border-radius:10px;background:var(--brand-tint);color:var(--brand-600);display:grid;place-items:center}
#mhDetail .term .tic svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .term .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
#mhDetail .term .v{font-size:15px;font-weight:700;color:var(--ink-1);margin-top:2px;overflow-wrap:anywhere}
#mhDetail .term .v.none{color:var(--ink-4);font-weight:600}
#mhDetail .term .rt{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--brand-600);background:var(--brand-tint);border-radius:999px;padding:4px 10px;white-space:nowrap}
#mhDetail .pd-desc{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;text-wrap:pretty}
#mhDetail .kv{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px}
#mhDetail .kv .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
#mhDetail .kv .v{font-size:14.5px;font-weight:700;color:var(--ink-1);margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
#mhDetail .kv .v.off{color:var(--ink-4);font-weight:600}
#mhDetail .dv-sub{font-weight:500;color:var(--ink-3)}
#mhDetail .flag{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--brand-tint);color:var(--brand-600)}
#mhDetail .flag svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .flag.no{background:var(--f-rest-bg);color:var(--ink-4)}

/* =========================================================
   LIST ROWS (roster + schedule)

   NAME CHANGE, and the only one in this file: the mock calls this row ".row".
   Bootstrap (loaded app-wide, App.razor line 10) owns .row and .row>* - it sets
   flex-wrap:wrap, -12px side margins, and width:100%/max-width:100%/flex-shrink:0
   on EVERY child. Those are different properties from the ones the mock sets, so
   #mhDetail specificity never overrode them: each cell took a full line and the
   roster/schedule rows rendered as stacked blocks instead of one line. Renamed to
   .dv-row/.dv-rows so the framework can never reach them again. Rules are the
   mock's, byte for byte, with only the selector renamed.
   ========================================================= */
#mhDetail .dv-rows{display:flex;flex-direction:column;gap:8px}
#mhDetail .dv-row{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:var(--r-md);background:var(--f-focus-bg);border:1px solid var(--line);transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
#mhDetail .dv-row:hover{border-color:var(--f-focus-bd);transform:translateX(2px)}
#mhDetail .dv-row>div{min-width:0}
#mhDetail .dv-row.act{cursor:pointer}
#mhDetail .dv-row.act:hover{box-shadow:0 12px 26px -18px rgba(28,39,51,.75)}
body.dark #mhDetail .dv-row.act:hover{box-shadow:0 12px 26px -18px #000}
#mhDetail .dv-row.act:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
#mhDetail .dv-row .go{width:18px;height:18px;flex:none;color:var(--ink-4);display:grid;place-items:center;transition:transform var(--t),color var(--t)}
#mhDetail .dv-row .go svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .dv-row.act:hover .go{transform:translateX(3px);color:var(--brand-600)}
#mhDetail .av-btn{flex:none;position:relative;border:none;padding:0;background:none;cursor:pointer;border-radius:999px;line-height:0;transition:transform var(--t),box-shadow var(--t)}
#mhDetail .av-btn:hover{transform:scale(1.07);box-shadow:0 0 0 3px var(--brand-tint)}
#mhDetail .av-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-glow)}
#mhDetail .av{width:38px;height:38px;flex:none;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(150deg,#6E9C92,#4E7C72);overflow:hidden}
#mhDetail .av img{width:100%;height:100%;object-fit:cover;display:block}
#mhDetail .av.w{background:linear-gradient(150deg,#8b9fa6,#637980)}
body.dark #mhDetail .av.w{background:linear-gradient(150deg,#5B6C75,#3E4C55)}
#mhDetail .qr-mini{width:36px;height:36px;flex:none;border-radius:10px;border:1px solid var(--f-rest-bd);background:var(--f-rest-bg);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:background var(--t),color var(--t),border-color var(--t),box-shadow var(--t)}
#mhDetail .qr-mini:hover{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 7px 16px -5px var(--brand-glow)}
#mhDetail .qr-mini svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .dv-row .nm{font-size:14.5px;font-weight:700;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mhDetail .dv-row .mt{font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mhDetail .dv-row .sp{flex:1}
#mhDetail .chip,
#hhDetail .chip{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--brand-tint);color:var(--brand-600);white-space:nowrap}
#mhDetail .chip.grey,
#hhDetail .chip.grey{background:var(--f-rest-bg);color:var(--ink-3)}
#mhDetail .dv-row .att{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
#mhDetail .more{text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-3);padding:12px 0 2px}
#mhDetail .sec-lbl{display:flex;align-items:center;gap:10px;margin:20px 0 11px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
#mhDetail .sec-lbl:first-child{margin-top:0}
#mhDetail .sec-lbl .rule{flex:1;height:1px;background:var(--line)}
#mhDetail .day{width:60px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:12px;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);padding:9px 0 8px}
#mhDetail .day .w{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600);line-height:1}
#mhDetail .day .d{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1);line-height:1}
#mhDetail .day .m{display:block;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);line-height:1}
#mhDetail .dv-row.next{border-color:var(--brand);box-shadow:0 6px 18px -10px var(--brand-glow)}
#mhDetail .dv-row.next .day{background:var(--brand);border-color:var(--brand)}
#mhDetail .dv-row.next .day .d,#mhDetail .dv-row.next .day .m{color:#fff}
#mhDetail .dv-row.next .day .w{color:rgba(255,255,255,.75)}
#mhDetail .bars{display:flex;align-items:flex-end;gap:3px;height:26px;margin-right:2px}
#mhDetail .bars i{width:5px;height:18px;border-radius:2px;background:var(--brand-tint-2)}
#mhDetail .bars i.on{background:var(--brand)}

/* =========================================================
   EMPTY STATES (brief 2.4)
   ========================================================= */
#mhDetail .dv-empty,
#hhDetail .dv-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:54px 24px 58px}
#mhDetail .dv-eic,
#hhDetail .dv-eic{width:62px;height:62px;border-radius:20px;margin-bottom:16px;display:grid;place-items:center;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);color:var(--ink-4)}
#mhDetail .dv-eic svg,
#hhDetail .dv-eic svg{width:25px;height:25px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .dv-empty h5,
#hhDetail .dv-empty h5{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink-2)}
#mhDetail .dv-empty p,
#hhDetail .dv-empty p{margin:7px 0 0;max-width:360px;font-size:13.5px;font-weight:500;line-height:1.55;color:var(--ink-4);text-wrap:pretty}
#mhDetail .dv-empty .ui-btn{margin-top:21px}
#mhDetail .dv-empty.inline,
#hhDetail .dv-empty.inline{align-items:flex-start;text-align:left;padding:2px 0 0}
#mhDetail .dv-empty.inline .dv-eic,
#hhDetail .dv-empty.inline .dv-eic{width:40px;height:40px;border-radius:12px;margin-bottom:12px}
#mhDetail .dv-empty.inline .dv-eic svg,
#hhDetail .dv-empty.inline .dv-eic svg{width:18px;height:18px}
#mhDetail .dv-empty.inline h5,
#hhDetail .dv-empty.inline h5{font-size:14.5px}
#mhDetail .dv-empty.inline .ui-btn{margin-top:14px;height:38px;padding:0 15px;font-size:13px}

/* =========================================================
   BUTTONS + OVERFLOW MENU (brief 2.7)
   ========================================================= */
#mhDetail .ui-btn{height:48px;padding:0 22px;border-radius:var(--r-md);font-family:var(--font-sans);font-size:14.5px;font-weight:700;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;transition:background var(--t),border-color var(--t),box-shadow var(--t),color var(--t),transform var(--t)}
#mhDetail .ui-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .ui-btn.primary{background:var(--brand);color:#fff;box-shadow:0 8px 18px -4px var(--brand-glow)}
#mhDetail .ui-btn.primary:hover{background:var(--brand-600);box-shadow:0 10px 22px -4px var(--brand-glow)}
#mhDetail .ui-btn.primary:active{transform:translateY(1px)}
#mhDetail .ui-btn.secondary{background:var(--f-focus-bg);color:var(--brand-600);border-color:var(--f-focus-bd);box-shadow:0 1px 2px rgba(40,60,80,.06)}
#mhDetail .ui-btn.secondary:hover{background:var(--tg-cream,rgb(238,242,244))}
body.dark #mhDetail .ui-btn.secondary:hover{background:#2C3A46}
#mhDetail .ui-btn.is-cancel{background:transparent;color:var(--ink-2);border-color:transparent;box-shadow:none}
#mhDetail .ui-btn.is-cancel:hover{background:rgba(40,60,80,.07);color:var(--ink-1)}
#mhDetail .ui-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* No margin-left:auto - it sits immediately right of the tab pill and the pair is centred
   together by .pane-top, rather than the button being exiled to the far edge. */
#mhDetail .dv-more{position:relative;flex:none}
#mhDetail .dv-more-btn{width:48px;padding:0}
#mhDetail .dv-more-btn svg{width:20px;height:20px;fill:currentColor;stroke:none}
#mhDetail .dv-more-btn[aria-expanded="true"]{background:var(--brand-tint);border-color:transparent;color:var(--brand-600)}
#mhDetail .dv-menu{position:absolute;right:0;bottom:calc(100% + 10px);z-index:40;min-width:244px;padding:7px;border-radius:var(--r-md);background:var(--f-focus-bg);border:1px solid var(--f-focus-bd);box-shadow:var(--f-focus-sh),0 24px 52px -20px rgba(28,39,51,.4);display:flex;flex-direction:column;gap:2px;animation:mhdvUp .16s var(--ease)}
@keyframes mhdvUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* justify-content is set explicitly: a bare app-global `button{justify-content:center}`
   rule was centring the icon+label pair inside the 244px menu. text-align does not
   fix a flex container - only justify-content does. (Same trap as the Bootstrap .row
   collision: a property our rule never set is a property the global still owns.) */
#mhDetail .dv-mi{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;padding:10px 12px;border:none;border-radius:var(--r-sm);background:none;cursor:pointer;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--ink-1);text-align:left;transition:background var(--t),color var(--t)}
/* locked item - present so staff can see it is coming, but inert until the section is built */
#mhDetail .dv-mi:disabled{opacity:.42;cursor:not-allowed}
#mhDetail .dv-mi:disabled:hover{background:none}
#mhDetail .dv-mi:disabled:hover svg{color:var(--ink-3)}
#mhDetail .dv-mi .lock{margin-left:auto;flex:none;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
#mhDetail .dv-mi svg{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3)}
#mhDetail .dv-mi:hover{background:var(--f-rest-bg)}
#mhDetail .dv-mi:hover svg{color:var(--brand-600)}
#mhDetail .dv-mi.danger{color:var(--danger)}
#mhDetail .dv-mi.danger svg{color:var(--danger)}
#mhDetail .dv-mi.danger:hover{background:var(--danger-bg);color:var(--danger-ink)}
#mhDetail .dv-mi.danger:hover svg{color:var(--danger-ink)}
/* the (...) button now sits in the TAB ROW, so its menu drops DOWN from the button
   instead of rising out of the footer. Higher specificity than the base rule above. */
#mhDetail .pane-top .dv-menu{top:calc(100% + 10px);bottom:auto;animation-name:mhdvPop}
#mhDetail .dv-msep{height:1px;margin:5px 4px;background:var(--line)}
#mhDetail .dv-scrim{position:fixed;inset:0;z-index:30;background:transparent}
/* .modal carries z-index:2 -> it is a STACKING CONTEXT, so the overflow menu inside it can
   never out-rank this scrim no matter what z-index the menu is given. Lift the MODAL over the
   scrim while the menu is open; the scrim still covers everything outside it.
   Specificity matters: the z-index:2 comes from #mhDetail.dv-stage.ovr>.modal, so the override
   must match that selector or it silently loses. Page mode needs no rule - the modal has no
   z-index there, so it is not a stacking context and the menu wins on its own. */
#mhDetail.dv-stage.ovr>.modal.menu-open{z-index:31}

/* The mock's .toast is intentionally absent: save / update / remove confirmations use
   the app-standard MudBlazor snackbar, so the shell never shows a second, different
   notification of its own. */

/* =========================================================
   EDIT SHEET + STUDENT PEEK (overlays inside the shell)
   ========================================================= */
#mhDetail .ov{position:absolute;inset:0;z-index:80;display:grid;place-items:center;padding:34px;background:rgba(24,36,30,.5)}
#mhDetail .sheet{width:640px;max-height:100%;display:flex;flex-direction:column;background:var(--bg-canvas);border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -20px rgba(28,39,51,.55)}
#mhDetail .sheet .m-head{padding:24px 28px 18px}
#mhDetail .sheet .m-body{padding:4px 28px 26px;overflow:auto}
#mhDetail .sheet .m-foot{padding:16px 28px;background:var(--bg-canvas);border-top:1px solid var(--line)}
#mhDetail .sheet .fgrid{gap:17px 18px}
#mhDetail .sheet.sm{width:430px}
#mhDetail .sheet.sm .m-body{padding:2px 26px 24px;text-align:center}
#mhDetail .pk-av{width:112px;height:112px;margin:2px auto 0;border-radius:999px;overflow:hidden;background:var(--f-rest-bg);box-shadow:0 0 0 4px var(--brand-tint),0 14px 30px -14px rgba(28,39,51,.5);cursor:pointer;border:none;padding:0;display:grid;place-items:center;font-size:34px;font-weight:800;color:#fff;transition:transform var(--t)}
#mhDetail .pk-av:hover{transform:scale(1.04)}
/* display only: the peek SHOWS the photo, it does not open it.
   Named .pk-plain, not .static - a bare .static is a known MudBlazor collision
   (see this file's header) and generic names are what the .row bug was made of. */
#mhDetail .pk-av.pk-plain{cursor:default;transition:none}
#mhDetail .pk-av.pk-plain:hover{transform:none}
#mhDetail .pk-av img{width:100%;height:100%;object-fit:cover;display:block}
#mhDetail .pk-nm{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1);margin:15px 0 0}
#mhDetail .pk-cd{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-3);margin-top:5px}
#mhDetail .pk-chips{display:flex;justify-content:center;gap:8px;margin-top:13px;flex-wrap:wrap}
#mhDetail .pk-list{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;text-align:left;background:var(--f-focus-bg)}
#mhDetail .pk-list .r{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;font-size:13.5px}
#mhDetail .pk-list .r+.r{border-top:1px solid var(--line)}
#mhDetail .pk-list .r .k{color:var(--ink-3);font-weight:600}
#mhDetail .pk-list .r .v{color:var(--ink-1);font-weight:700;overflow-wrap:anywhere;text-align:right}

/* QR / avatar zoom lightbox */
/* The photo lightbox DOES close on click, so it keeps a cursor - but `pointer`, not the
   zoom-out glass (CEO: no zoom icon anywhere in the app). */
#mhDetail .qr-zoom{position:absolute;inset:0;z-index:120;display:grid;place-items:center;padding:28px;background:rgba(24,36,30,.55);cursor:pointer}
#mhDetail .qr-zoom-card{background:#fff;border-radius:20px;padding:26px;display:flex;flex-direction:column;align-items:center;gap:13px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
body.dark #mhDetail .qr-zoom-card{background:var(--f-focus-bg)}
/* the DEFAULT QR view - same card as #pgWiz .qr-zoom-card, logo and all */
#mhDetail .qr-zoom-card .qr-frame{width:min(300px,44vmin);height:min(300px,44vmin);display:block;position:relative;border-radius:10px;background:#fff;padding:6px}/* QRFILL29: was 10px */
#mhDetail .qr-zoom-card .qr-frame svg{width:100%;height:100%;display:block}
#mhDetail .qr-zoom-card .qr-logo{width:46px;height:46px;border-radius:11px;box-shadow:0 0 0 6px #fff}
#mhDetail .qr-zoom-card .qr-logo img{width:30px;height:30px;display:block;object-fit:contain}
#mhDetail .qr-zoom-code{font-family:var(--font-mono);font-size:20px;font-weight:600;letter-spacing:.04em;color:var(--ink-1)}
#mhDetail .qr-zoom-hint{font-size:12px;color:var(--ink-4)}
#mhDetail .qr-zoom-card .zc-av{width:min(220px,34vmin);height:min(220px,34vmin);border-radius:999px;overflow:hidden;box-shadow:0 0 0 5px var(--brand-tint);display:grid;place-items:center;background:linear-gradient(150deg,#6E9C92,#4E7C72);color:#fff;font-size:64px;font-weight:800}
#mhDetail .qr-zoom-card .zc-av img{width:100%;height:100%;object-fit:cover;display:block}
#mhDetail .qr-zoom-card .zc-nm{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1)}

/* =========================================================
   FIELDS (the MH DEFAULT FIELD standard - inset cool shell)
   ========================================================= */
#mhDetail .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
#mhDetail .fgrid .full{grid-column:1/-1}
#mhDetail .field{display:flex;flex-direction:column;gap:8px;min-width:0}
#mhDetail .field>label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px}
#mhDetail .field .req{color:var(--danger)}
/* SECTION HEADING inside the edit form.
   `grid-column:1/-1` is the important line: .fgrid is a two-column grid, so without it every
   heading was consuming ONE CELL and rendering beside a field instead of above the block.
   That single omission is what made the whole form unreadable - headings sitting next to
   inputs, sections impossible to tell apart. It spans, always. */
#mhDetail .fsec{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:22px 0 4px}
#mhDetail .fgrid>.fsec:first-child{margin-top:0}
#mhDetail .fsec .bub{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-600)}
#mhDetail .fsec .bub svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* UPPERCASE, like every other heading and toggle in the shell (CEO, Jul 27 2026). Done in
   CSS so the C# section titles stay readable sentences. */
#mhDetail .fsec h3{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-1);margin:0;white-space:nowrap}
#mhDetail .fsec .rule{flex:1;height:1px;background:var(--line)}
#mhDetail .divider{height:1px;background:var(--line);margin:22px 0}

/* =========================================================
   IN-PANE EDIT - the record's body becomes the form, in place. No stacked window.
   The stepper takes the tab pill's slot so the chrome never jumps; the form sits on
   the same canvas the cards sat on, capped so fields never stretch to absurd widths.
   ========================================================= */
#mhDetail .dv-steps{flex:1;min-width:0;display:grid;grid-template-columns:repeat(var(--dv-tabs,2),1fr);gap:4px;
  padding:5px;border-radius:14px;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh)}
#mhDetail .dv-steps.single{grid-template-columns:1fr}
/* Uppercase, matching the tab pill it replaces - the two occupy the same slot, so they must
   read as the same control. */
#mhDetail .dv-steps button{text-transform:uppercase;letter-spacing:.045em;font-weight:800;
  border:none;background:none;cursor:pointer;font-family:var(--font-sans);font-size:12.5px;
  font-weight:700;color:var(--ink-3);padding:11px 10px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;gap:9px;min-width:0;transition:background var(--t),color var(--t),box-shadow var(--t)}
#mhDetail .dv-steps button:hover{color:var(--ink-1);background:rgba(40,60,80,.05)}
#mhDetail .dv-steps button[aria-selected="true"]{background:var(--brand);color:#fff;box-shadow:0 4px 12px -2px var(--brand-glow)}
#mhDetail .dv-steps .stp{flex:none;width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:800;background:rgba(40,60,80,.1);color:var(--ink-3);line-height:1}
#mhDetail .dv-steps .stp svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .dv-steps button[aria-selected="true"] .stp{background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));color:#fff}
#mhDetail .dv-steps button.done .stp{background:var(--brand-tint-2);color:var(--brand-600)}
body.dark #mhDetail .dv-steps .stp{background:rgba(180,210,235,.14);color:var(--ink-2)}

/* the "you are editing" eyebrow, so the mode is never ambiguous at a glance */
#mhDetail .dv-editflag{display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;padding:5px 12px;
  border-radius:999px;background:var(--brand-tint);color:var(--brand-600);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#mhDetail .dv-editflag svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

#mhDetail .dv-form{max-width:920px;padding-bottom:6px}
#mhDetail .dv-formerr{margin:0 0 16px}
#mhDetail .dv-formnote{font-size:13px;color:var(--ink-3);margin:2px 0 0;font-weight:500;line-height:1.55}
/* a value the form shows but does not own (status) - reads as a field, is not an input */
#mhDetail .icf.locked-face{cursor:default;background:var(--f-rest-bg);opacity:.75}
#mhDetail .icf.locked-face:hover{background:var(--f-rest-bg)}

/* labelled progress bar. NOT .lgnd - that is the Program capacity KEY, whose <b> is a
   colour swatch; borrowing it for a caption drew a stray dark square with nothing to key. */
#mhDetail .sd-meterrow{margin-top:18px}
#mhDetail .sd-meter-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 9px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
#mhDetail .sd-meter-h b{font-size:13.5px;font-weight:800;color:var(--ink-1);font-variant-numeric:tabular-nums}

/* children step - a .dv-row that is also a checkbox target */
#mhDetail .sd-pickrow{cursor:pointer;user-select:none}
#mhDetail .sd-pickrow:hover{border-color:var(--brand-tint-2)}
#mhDetail .sd-pickrow.is-on{border-color:var(--brand);background:var(--brand-tint)}
#mhDetail .sd-pick{flex:none;padding:0;align-items:center}
#mhDetail .sd-addkidbtn{display:flex;flex-direction:column;justify-content:flex-end}
#mhDetail .sd-addkidbtn .ui-btn{height:50px}
#mhDetail .icf{position:relative;display:flex;align-items:center;gap:11px;min-height:50px;padding:0 15px;background:var(--f-rest-bg);
  border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);border-radius:var(--r-md);
  transition:background var(--t),border-color var(--t),box-shadow var(--t)}
#mhDetail .icf:hover:not(:focus-within){background:var(--f-hover-bg)}
#mhDetail .icf:focus-within,#mhDetail .icf.open{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)}
/* KILL the app-global .mh-app :is(input,textarea,select) skin so the visible field
   is the .icf shell ONLY (no "field inside the field" ghost, no green focus ring). */
#mhDetail .icf :is(input,select,textarea),
#mhDetail .icf :is(input,select,textarea):hover,
#mhDetail .icf :is(input,select,textarea):focus,
#mhDetail .icf :is(input,select,textarea):focus-visible{
  flex:1;min-width:0;background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;min-height:0 !important;height:auto !important;
  outline:none !important;text-align:left !important;
  font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink-1)}
#mhDetail .icf input::placeholder,#mhDetail .icf textarea::placeholder{color:var(--ink-4);font-weight:400}
/* CATCH-ALL: a control that is not inside an .icf still must not inherit the app-global
   sage placeholder (`.mh-app :is(input,textarea)::placeholder{color:var(--mh-ctrl-ico)}`,
   mh-theme.css:189 = #6E948B). That green was leaking into the document modal's notes box.
   Scoped to the id so it beats the global rule and covers every current and future host. */
#mhDetail :is(input,textarea)::placeholder{color:var(--ink-4);font-weight:400;opacity:1}
#mhDetail .icf.area{align-items:stretch;padding:13px 15px;min-height:104px}
#mhDetail .icf.area textarea{resize:none;min-height:78px;line-height:1.55}
#mhDetail .ic{width:19px;height:19px;flex:none;display:grid;place-items:center;color:var(--ink-3)}
#mhDetail .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
#mhDetail .ic.mh svg{width:19px;height:20px;fill:var(--ink-3);stroke:none}
#mhDetail .icf:focus-within .ic.mh svg,#mhDetail .icf.open .ic.mh svg{fill:var(--brand-600)}
#mhDetail .chev{transition:transform var(--t)}
#mhDetail .icf.open .chev{transform:rotate(180deg)}
/* AN ERROR OUTRANKS HOVER, FOCUS AND OPEN - it holds its red until the VALUE is fixed.
   `.field.err .icf` is (1,2,0) and lost to `.icf:hover:not(:focus-within)` (1,3,0), so
   hovering a rejected field repainted it as if nothing were wrong. */
#mhDetail .field.err .icf,
#mhDetail .field.err .icf:hover,
#mhDetail .field.err .icf:hover:not(:focus-within),
#mhDetail .field.err .icf:focus-within,
#mhDetail .field.err .icf.open{border-color:var(--danger);background:var(--danger-bg)}
#mhDetail .field.err .icf:focus-within{box-shadow:0 0 0 3px rgba(192,71,63,.24)}
#mhDetail .field-err{font-size:12px;font-weight:600;color:var(--danger)}

/* The rest of the app's DEFAULT warning design, ported from #enrollWiz (the surface the
   CEO named as the standard): the LABEL and its asterisk turn danger-ink, and the field
   carries a red line with the warning glyph underneath. Without these the red wash was
   only half the design. */
#mhDetail .field.err>label,
#mhDetail .field.err>label .req{color:var(--danger-ink)}
#mhDetail .fld-msg{display:flex;align-items:center;gap:6px;margin:7px 0 0;font-size:12.5px;font-weight:650;line-height:1.35;color:var(--danger-ink)}
#mhDetail .fld-msg svg{width:14px;height:14px;flex:none;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
#mhDetail .field:not(.err) .fld-msg{display:none}
/* An error should SNAP in, not fade: the field's own background/border transition would
   otherwise animate the wash over 200ms. */
#mhDetail .field.err .icf{transition:none}
/* One shake as the error appears. NO `both` - a retained fill-mode transform stays a
   STACKING CONTEXT for good, which traps an open dropdown (z-index:1000) inside its own
   field and lets the next field paint over the list. The rule below is the belt to that
   braces: an open field out-ranks the ones after it regardless. */
#mhDetail .field.err .icf{animation:mhFldShk .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes mhFldShk{10%,90%{transform:translateX(-1.5px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
#mhDetail .field:has(> .icf.open){position:relative;z-index:5}
#mhDetail .field.locked .icf{opacity:.62;pointer-events:none}
#mhDetail .icf .num{text-align:left !important}
#mhDetail .trail{display:flex;flex-direction:column;gap:2px;flex:none}
#mhDetail .stepper{width:26px;height:20px;flex:none;border-radius:6px;border:1px solid var(--f-rest-bd);background:rgba(var(--tg-rgb,255,255,255),calc(.5*var(--tg-k,1)));cursor:pointer;display:grid;place-items:center;color:var(--ink-2);transition:background var(--t),color var(--t)}
#mhDetail .stepper:hover{background:rgb(var(--tg-rgb,255,255,255));color:var(--brand-600)}
body.dark #mhDetail .stepper{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)))}
body.dark #mhDetail .stepper:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)))}
#mhDetail .stepper svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .stepper[data-step="up"] svg{transform:rotate(180deg)}
/* the open field (and its popup) must paint above its siblings */
#mhDetail .field:has(.icf.open){position:relative;z-index:60}

/* type-to-search dropdown (MH DEFAULT FIELD standard part 3) */
#mhDetail .icf.has-sel{cursor:pointer}
#mhDetail .sel-face{flex:1;min-width:0;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-align:left !important}
#mhDetail .sel-face.ph{color:var(--ink-4);font-weight:400}
#mhDetail .icf .sel-search{flex:1;min-width:0;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink-1);cursor:text}
#mhDetail .icf .sel-search::placeholder{color:var(--ink-4);font-weight:400}
#mhDetail .selpop,
#hhDetail .selpop,
#view-settings .selpop,
#cnPop .selpop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:1000;background:var(--f-focus-bg);border:1px solid var(--f-focus-bd);border-radius:var(--r-md);box-shadow:var(--f-focus-sh),0 22px 48px -18px rgba(28,39,51,.34);padding:7px;display:flex;flex-direction:column;gap:3px;max-height:288px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none;animation:mhdvPop .16s var(--ease)}
@keyframes mhdvPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
#mhDetail .selpop.up,
#hhDetail .selpop.up,
#view-settings .selpop.up,
#cnPop .selpop.up{top:auto;bottom:calc(100% + 8px);animation-name:mhdvUp}
#mhDetail .selpop::-webkit-scrollbar,
#hhDetail .selpop::-webkit-scrollbar,
#view-settings .selpop::-webkit-scrollbar,
#cnPop .selpop::-webkit-scrollbar{width:0;height:0;display:none}
#mhDetail .sel-opt,
#hhDetail .sel-opt,
#view-settings .sel-opt,
#cnPop .sel-opt{text-align:left !important;justify-content:flex-start !important;border:none;background:none;font-family:var(--font-sans);font-size:14.5px;font-weight:600;color:var(--ink-1);padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;display:flex !important;align-items:center;gap:10px;width:100%;transition:background var(--t),color var(--t)}
#mhDetail .sel-opt:hover,
#hhDetail .sel-opt:hover,
#view-settings .sel-opt:hover,
#cnPop .sel-opt:hover{background:var(--f-rest-bg)}
#mhDetail .sel-opt.on,
#hhDetail .sel-opt.on,
#view-settings .sel-opt.on,
#cnPop .sel-opt.on{background:var(--brand-tint);color:var(--brand-600);font-weight:700}
#mhDetail .sel-opt.on::after,
#hhDetail .sel-opt.on::after,
#view-settings .sel-opt.on::after,
#cnPop .sel-opt.on::after{content:"\2713";margin-left:auto;color:var(--brand);font-weight:800}
#mhDetail .selpop .cb-empty,
#hhDetail .selpop .cb-empty,
#view-settings .selpop .cb-empty,
#cnPop .selpop .cb-empty{padding:13px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3)}

/* checkbox (kit) */
#mhDetail .opt{display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none;padding:3px 0}
#mhDetail .opt input{position:absolute;opacity:0;width:0;height:0}
#mhDetail .box{width:22px;height:22px;flex:none;border-radius:7px;margin-top:1px;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);display:grid;place-items:center;transition:background var(--t),border-color var(--t)}
#mhDetail .box.round{border-radius:999px}
#mhDetail .box .dot{width:10px;height:10px;border-radius:999px;background:rgb(var(--tg-rgb,255,255,255));opacity:0;transform:scale(.4);transition:opacity var(--t),transform var(--t)}
#mhDetail .opt input:checked+.box{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 1px 2px rgba(0,0,0,.14)}
#mhDetail .opt input:checked+.box.round{box-shadow:inset 0 0 3px rgba(0,0,0,.12)}
#mhDetail .opt input:checked+.box .dot{opacity:1;transform:scale(1);box-shadow:0 1px 2px rgba(40,60,80,.4)}
#mhDetail .opt .opt-txt{font-size:14.5px;font-weight:500;color:var(--ink-1);line-height:1.35}

/* =========================================================
   DATE FIELD - the frozen shared MhDatePicker, reskinned to .icf.
   The mock's date field (.icf.dpk) is a masked MM/DD/YYYY input + the
   calendar icon + a chevron that opens the calendar. Unlike the enroll
   wizard's date field, this one KEEPS the chevron (mock-faithful).
   The calendar POPOVER itself is untouched.
   ========================================================= */
#mhDetail .mh-dp-d{width:100%}
#mhDetail .dp .dp-field{
  height:auto;min-height:50px;gap:11px;padding:0 15px;cursor:text;
  background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);box-shadow:var(--f-rest-sh);
  border-radius:var(--r-md);user-select:auto;
  transition:background var(--t),border-color var(--t),box-shadow var(--t)}
#mhDetail .dp:not(.open) .dp-field:hover{background:var(--f-hover-bg)}
#mhDetail .dp.open .dp-field{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)}
#mhDetail .dp .dpf-ico{width:19px;height:19px;color:var(--ink-3)}
#mhDetail .dp.open .dpf-ico{color:var(--brand-600)}
#mhDetail .dp .dpf-val{font-size:15px;font-weight:500;color:var(--ink-1);font-variant-numeric:tabular-nums}
#mhDetail .dp .dpf-val.empty{color:var(--ink-4);font-weight:400}
#mhDetail .dp .dpf-chev{width:18px;height:18px;color:var(--ink-4);transition:transform var(--t)}
#mhDetail .dp.open .dpf-chev{transform:rotate(180deg);color:var(--brand-600)}
/* the masked input: the mask string IS the value, so it never uses ::placeholder */
#mhDetail .dp .dpf-mask,
#hhDetail .dp .dpf-mask,
#mhDetail .dp .dpf-mask:hover,
#hhDetail .dp .dpf-mask:hover,
#mhDetail .dp .dpf-mask:focus,
#hhDetail .dp .dpf-mask:focus,
#mhDetail .dp .dpf-mask:focus-visible,
#hhDetail .dp .dpf-mask:focus-visible{
  flex:1;min-width:0;width:100%;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;min-height:0 !important;height:auto !important;
  outline:none !important;text-align:left !important;
  font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--ink-1);
  font-variant-numeric:tabular-nums;cursor:text;user-select:text}
#mhDetail .dp .dpf-mask.partial,
#hhDetail .dp .dpf-mask.partial{letter-spacing:.01em}
/* no animation, and reveal the popover only once the JS has PLACED it (the placed
   one carries an inline position:fixed) - otherwise Blazor paints it at its
   stylesheet default first and it visibly jumps. */
#mhDetail .dp .dp-pop{transition:none !important;transform:none !important}
#mhDetail .dp.open .dp-pop{transform:none !important;visibility:hidden;z-index:1200}
#mhDetail .dp.open .dp-pop[style*="position: fixed"]{visibility:visible}
#mhDetail .field:has(.dp.open){position:relative;z-index:80}
#mhDetail .field.err .dp .dp-field{border-color:var(--danger) !important;background:var(--danger-bg) !important;box-shadow:none !important}
#mhDetail .field.locked .dp{pointer-events:none;opacity:.62}

/* =========================================================
   RESPONSIVE - 3-column cap, stepped, never auto-filled (brief 5)
   ========================================================= */
@container (max-width:1000px){#mhDetail .kv{grid-template-columns:repeat(2,1fr)}}
@container (max-width:720px){
  #mhDetail .pd-grid,#mhDetail .kv{grid-template-columns:1fr}
  #mhDetail .tiles{grid-template-columns:repeat(2,1fr)}
  #mhDetail .fgrid{grid-template-columns:1fr}
}

/* the rail's "N more in Overview" row flashes the More details card it jumps to */
@keyframes mhdvFlash{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}25%{box-shadow:0 0 0 4px var(--brand-tint-2)}}
#mhDetail .pd-card.dv-flash{animation:mhdvFlash 1.2s var(--ease)}

/* =========================================================
   STUDENT DETAIL (host #2) - the only classes the Program host did not need:
   the children KPI card grid, the completion picker inside a list row, and the
   case-note surface. All prefixed sd- and scoped #mhDetail.

   LAW OBSERVED: no framework-generic name survives here. The Household mock's
   .mcard / .add-fam and the Client overlay's .note are NOT reused - Bootstrap
   and the app-global stylesheets own names like .note/.card/.row, and id
   scoping settles only the properties BOTH rules set.
   ========================================================= */

/* ---- children KPI cards: 3-column cap, stepped, never auto-filled ---- */
#mhDetail .sd-kids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:4px}
#mhDetail .sd-kid{
  display:flex;flex-direction:column;gap:12px;min-width:0;text-align:left;
  background:var(--f-focus-bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 15px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
#mhDetail .sd-kid:hover{border-color:var(--brand-tint-2);transform:translateY(-1px);box-shadow:0 12px 26px -20px rgba(28,39,51,.55)}
#mhDetail .sd-kid:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-glow)}
#mhDetail .sd-kid-h{display:flex;align-items:center;gap:11px;min-width:0}
#mhDetail .sd-kav{width:42px;height:42px;flex:none;border-radius:999px;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#fff;background:linear-gradient(150deg,#6E9C92,#4E7C72);overflow:hidden}
#mhDetail .sd-kav img{width:100%;height:100%;object-fit:cover;display:block}
#mhDetail .sd-kid-id{min-width:0;flex:1}
/* per-card edit: a child is a different record, so this opens a popup, not the in-pane form */
#mhDetail .sd-kedit{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--f-rest-bd);
  background:var(--f-rest-bg);color:var(--ink-3);cursor:pointer;display:grid;place-items:center;
  transition:background var(--t),color var(--t),border-color var(--t)}
#mhDetail .sd-kedit svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .sd-kedit:hover{background:var(--brand);border-color:var(--brand);color:#fff}
#mhDetail .sd-kedit:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-glow)}
#mhDetail .sd-knm{font-size:14.5px;font-weight:700;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mhDetail .sd-kmeta{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
#mhDetail .sd-kstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#mhDetail .sd-kstats .k{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4)}
#mhDetail .sd-kstats .v{font-size:14px;font-weight:600;color:var(--ink-2);margin-top:3px;overflow-wrap:anywhere}

/* the Add tile is a WALK-IN affordance only - the razor decides, this just draws it */
#mhDetail .sd-kid.sd-kadd{
  align-items:center;justify-content:center;gap:9px;text-align:center;
  background:var(--f-rest-bg);border-style:dashed;border-color:var(--f-rest-bd);color:var(--ink-3);min-height:112px}
#mhDetail .sd-kid.sd-kadd:hover{border-color:var(--brand);color:var(--brand-600);background:var(--f-hover-bg)}
#mhDetail .sd-kplus{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand-600)}
#mhDetail .sd-kplus svg{width:18px;height:18px}
#mhDetail .sd-klbl{font-size:13px;font-weight:700;letter-spacing:.01em}

/* completion picker - the app's own rounded popup, never the OS <select> menu */
/* the closed field and the open menu are the SAME width - a menu wider than its trigger
   reads as a different control popping out from under it */
#mhDetail .sd-comp{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:8px;cursor:pointer;width:190px;
  padding:7px 12px;border-radius:999px;background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);
  box-shadow:var(--f-rest-sh);transition:background var(--t),border-color var(--t)}
#mhDetail .sd-comp:hover{background:var(--f-hover-bg)}
#mhDetail .sd-comp.open{background:var(--f-focus-bg);border-color:var(--f-focus-bd);box-shadow:var(--f-focus-sh)}
#mhDetail .sd-comp-face{font-size:12.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
#mhDetail .sd-comp-chev{line-height:0;color:var(--ink-4);transition:transform var(--t)}
#mhDetail .sd-comp-chev svg{width:14px;height:14px}
#mhDetail .sd-comp.open .sd-comp-chev{transform:rotate(180deg)}
/* reuse the field kit's popup so spacing, radius and hover match every other dropdown */
/* left+right:0 with width:auto stretches to the trigger's BORDER box; width:100% measured
   the content box instead and came up 2px short. */
#mhDetail .sd-comppop{top:calc(100% + 8px);left:0;right:0;width:auto;min-width:0;box-sizing:border-box}

/* ---- completion picker living inside a .dv-row ---- */
#mhDetail .sd-setsel{position:relative;flex:none;display:flex;align-items:center}
#mhDetail .sd-setsel select{
  appearance:none;-webkit-appearance:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink-2);background:var(--f-rest-bg);border:1px solid var(--f-rest-bd);
  border-radius:999px;padding:6px 30px 6px 13px;cursor:pointer;box-shadow:var(--f-rest-sh);
  transition:background var(--t),border-color var(--t)}
#mhDetail .sd-setsel select:hover{background:var(--f-hover-bg)}
#mhDetail .sd-setsel select:focus-visible{outline:none;background:var(--f-focus-bg);border-color:var(--f-focus-bd)}
#mhDetail .sd-setchev{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-4);line-height:0}
#mhDetail .sd-setchev svg{width:14px;height:14px}

/* ---- case notes ---- */
#mhDetail .sd-noteadd{position:relative;display:flex;flex-direction:column;gap:10px;margin:2px 0 16px}
#mhDetail .sd-noteadd .icf.area textarea{min-height:88px}
/* superseded by the CASENOTES-06 block at the end of this file, which adds the
   required minutes box beside the button and keeps the same right alignment. */
#mhDetail .sd-note{border-top:1px solid var(--line);padding:14px 0 2px}
#mhDetail .sd-note:first-of-type{border-top:none;padding-top:4px}
#mhDetail .sd-note-h{display:flex;align-items:center;gap:9px}

/* EDIT REPLACED DELETE (CEO, 31 Aug 2026). The X is no longer drawn on any comment
   screen, so the old delete rule went with its button.

   margin-left:auto rather than a spacer keeps the control at the far end when the
   author's name wraps. No justify-content is needed: this button is not a flex
   container, so MudBlazor's bare `button{justify-content:center}` has nothing to
   centre - unlike the mention rows, which are. */
#mhDetail .sd-cmtedit{
  margin-left:auto; flex:none; padding:2px 9px;
  border:1px solid var(--line); border-radius:999px; background:none; cursor:pointer;
  font-family:var(--font-sans); font-size:11.5px; font-weight:700; color:var(--ink-3);
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
#mhDetail .sd-cmtedit:hover{background:var(--brand-tint); color:var(--brand); border-color:var(--brand)}

/* "edited" - a MARKER, not a badge. Readable and ignorable at once: a colleague
   scanning the thread should not have their eye pulled to it, but anyone asking "did
   this say something else?" finds the answer without leaving the row. Who and when is
   on the title attribute. */
#mhDetail .sd-note-edited{
  flex:none; font-size:11px; font-weight:650; font-style:italic; color:var(--ink-4);
  cursor:help;
}

/* THE IN-PLACE EDITOR - the body is replaced by the field, so the message stays in the
   thread it belongs to instead of jumping into a modal. */
#mhDetail .sd-cmtedit-wrap{margin-top:4px}
#mhDetail .sd-cmtedit-wrap .icf.area textarea{min-height:64px}
#mhDetail .sd-cmtedit-acts{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}
#mhDetail .sd-cmtedit-err{margin-top:6px; font-size:12px; font-weight:600; color:var(--danger-ink)}
/* SMALL BUTTONS, as asked. Save carries the weight; Cancel is quiet but never hidden -
   somebody who opens the editor and thinks better of it needs a way out that is not
   "save something". */
#mhDetail .sd-cmtedit-btn{
  padding:5px 13px; border-radius:9px; cursor:pointer;
  font-family:var(--font-sans); font-size:12px; font-weight:700;
  transition:background .14s ease, color .14s ease, border-color .14s ease, opacity .14s ease;
}
#mhDetail .sd-cmtedit-btn.ghost{border:1px solid var(--line); background:none; color:var(--ink-2)}
#mhDetail .sd-cmtedit-btn.ghost:hover{background:rgba(40,60,80,.06); color:var(--ink-1)}
#mhDetail .sd-cmtedit-btn.go{border:1px solid var(--brand); background:var(--brand); color:#fff}
#mhDetail .sd-cmtedit-btn.go:hover{filter:brightness(1.06)}
#mhDetail .sd-cmtedit-btn:disabled{opacity:.5; cursor:not-allowed}
#mhDetail .sd-note-h .sp{flex:1}
#mhDetail .sd-note-av{width:28px;height:28px;flex:none;border-radius:999px;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff}
#mhDetail .sd-note-who{font-size:13.5px;font-weight:700;color:var(--ink-1)}
#mhDetail .sd-note-when{font-size:11.5px;font-weight:600;color:var(--ink-4);white-space:nowrap}
#mhDetail .sd-note-b{font-size:14px;line-height:1.65;color:var(--ink-2);margin:8px 0 0 37px;white-space:pre-wrap;overflow-wrap:anywhere}

/* @-mention picker - anchored above the textarea, positioned by the shared mentions.js */
#mhDetail .sd-mentionpop{
  position:absolute;left:0;bottom:calc(100% + 6px);z-index:90;width:min(320px,100%);
  max-height:232px;overflow:auto;padding:6px;
  background:var(--f-focus-bg);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--f-focus-sh)}
#mhDetail .sd-mentionopt{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:none;background:none;
  border-radius:8px;cursor:pointer;font:inherit;justify-content:flex-start;text-align:left}
#mhDetail .sd-mentionopt:hover,#mhDetail .sd-mentionopt.on{background:var(--brand-tint)}
#mhDetail .sd-mentionav{width:24px;height:24px;flex:none;border-radius:999px;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#fff}
#mhDetail .sd-mentionnm{font-size:13.5px;font-weight:600;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@container (max-width:1000px){#mhDetail .sd-kids{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:720px){#mhDetail .sd-kids{grid-template-columns:1fr}}

/* =========================================================
   CHILD CARDS - ported from the Enroll Student wizard mock
   (_handoff/Student Enrollment Wizard/Program Wizards/Enroll Student Wizard.html,
   .kids-grid / .kid-card / .kc-av / .kc-nm / .kc-meta / .kc-act / .kid-add).
   Centred column, avatar on top, Edit at the BOTTOM CENTRE - not a corner glyph.
   ========================================================= */
#mhDetail .kids-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
#mhDetail .kid-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:9px;padding:18px 14px;border:1px solid var(--line);border-radius:16px;background:var(--f-focus-bg);
  cursor:pointer;font:inherit;color:inherit;transition:box-shadow var(--t),border-color var(--t)}
#mhDetail .kid-card:hover{border-color:var(--f-focus-bd);box-shadow:0 12px 26px -16px rgba(28,39,51,.4)}
#mhDetail .kid-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-glow)}
#mhDetail .kc-av{width:64px;height:64px;border-radius:99px;overflow:hidden;background:var(--f-rest-bg);
  box-shadow:inset 0 0 0 1px var(--f-rest-bd);display:grid;place-items:center;flex:none}
#mhDetail .kc-av img{width:100%;height:100%;object-fit:cover;display:block}
#mhDetail .kc-av .mh-ini{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-4)}
#mhDetail .kc-av .mh-ini svg{width:52%;height:52%}
#mhDetail .kc-nm{font-size:14.5px;font-weight:800;color:var(--ink-1);letter-spacing:-.01em;overflow-wrap:anywhere}
#mhDetail .kc-meta{font-size:12px;color:var(--ink-3);font-weight:600}
#mhDetail .kc-act{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:8px;
  border:1px solid var(--f-rest-bd);background:var(--f-focus-bg);color:var(--ink-2);font-size:11.5px;
  font-weight:700;font-family:var(--font-sans);cursor:pointer;transition:color var(--t),border-color var(--t)}
#mhDetail .kc-act svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mhDetail .kc-act:hover{color:var(--brand-600);border-color:var(--brand)}
#mhDetail .kc-edit-b{margin-top:4px}
#mhDetail .kid-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  min-height:158px;padding:18px;border:1.6px dashed var(--f-rest-bd);border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.24*var(--tg-k,1)));color:var(--ink-3);cursor:pointer;font-family:var(--font-sans);
  transition:border-color var(--t),background var(--t),color var(--t)}
#mhDetail .kid-add:hover{border-color:var(--brand);background:var(--f-hover-bg);color:var(--brand-600)}
#mhDetail .kid-plus{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:var(--brand-tint);color:var(--brand-600);font-size:22px;font-weight:700;line-height:1}
#mhDetail .kid-add-l{font-size:13px;font-weight:700}
@container (max-width:1000px){#mhDetail .kids-grid{grid-template-columns:repeat(2,1fr)}}
@container (max-width:720px){#mhDetail .kids-grid{grid-template-columns:1fr}}

/* =========================================================
   THE CHILD WIZARD - ported from the Enroll Student wizard mock
   (_handoff/Student Enrollment Wizard/Program Wizards/Enroll Student Wizard.html,
   lines 142-182 + 664-671: .kid-ov / .kid-shell / .kid-rail / .kid-pane).

   Rail + pane, exactly like the record shell one layer down: the rail is the
   CHILD's identity while you fill it in, the pane is the two steps. It sits over
   the student's pane on purpose - the pane belongs to the student, and a child is
   a different person, so it can never take it over (the one exception to the
   in-pane edit law).

   Scoped #mhDetail and kid- prefixed. .kid-card / .kc-* / .kid-add above are the
   CARD grid from the same mock and are untouched by these rules.
   ========================================================= */
/* flex centring, not grid, to match #mhDetail.dv-stage.ovr exactly: a grid track auto-sizes
   to its item, so max-width:100% resolved against a track that had already grown and the
   shell could overflow the overlay. A flex item clamps. */
#mhDetail .kid-ov{position:absolute;inset:0;z-index:84;display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:20px;
  background:rgba(12,24,20,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  container-type:inline-size;opacity:0;transition:opacity .2s var(--ease)}
#mhDetail .kid-ov.in{opacity:1}
/* THE SAME BOX AS THE RECORD SHELL it sits on top of - width/height copied from
   #mhDetail.dv-stage.ovr>.modal, which in turn matches Client Detail's .cdbox. A child is a
   whole person; giving its wizard a smaller window made it read as a dialog about the
   student rather than a record of its own. --mh-vw/--mh-vh, never bare vw/vh: the app-wide
   zoom inflates the bare units (see the Display resolution law). */
#mhDetail .kid-shell{display:flex;width:min(1520px,calc(97 * var(--mh-vw)));
  height:min(calc(93 * var(--mh-vh)),920px);max-width:100%;max-height:100%;
  background:var(--bg-canvas);border-radius:20px;overflow:hidden;
  box-shadow:0 50px 110px -22px rgba(8,18,14,.62)}

/* ---- rail: 340px and the SAME gradient as the record shell's rail (--dv-rail-a/b), not a
   second green. It also makes the camera button's ring - which is drawn in --dv-rail-a so it
   reads as punched out of the rail - land on the colour it was designed for. ---- */
#mhDetail .kid-rail{width:340px;flex:none;overflow:auto;scrollbar-width:none;
  background:radial-gradient(120% 55% at 90% 3%,rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1))),transparent 42%),
             linear-gradient(162deg,var(--dv-rail-a) 0%,var(--dv-rail-b) 100%);
  color:#fff;padding:32px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
#mhDetail .kid-rail::-webkit-scrollbar{width:0;display:none}
/* NO .kid-photo rules. The child rail renders the app's canonical .mh-photo control (see
   RAIL PROFILE PHOTO above), so the gradient circle, the person glyph, the hover veil, the
   clay camera button and the popover z-index are all inherited, not restated. The one thing
   that needs saying here is the spacing inside THIS rail. */
#mhDetail .kid-rail .mh-photo{margin:0 0 2px}
#mhDetail .kid-photo-ini{font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff}
#mhDetail .kid-photo-ph{display:grid;place-items:center;color:rgba(255,255,255,.85)}
#mhDetail .kid-photo-ph svg{width:40px;height:40px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
#mhDetail .kid-rnm{margin-top:14px;font-size:19px;font-weight:800;letter-spacing:-.01em;color:#fff;
  overflow-wrap:anywhere}
#mhDetail .kid-rnm.empty{color:rgba(255,255,255,.55)}
#mhDetail .kid-rsub{margin-top:4px;font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
#mhDetail .kid-rfacts{margin-top:18px;width:100%;border-top:1px solid rgba(255,255,255,.16);
  padding-top:6px;display:flex;flex-direction:column}
#mhDetail .kid-rfact{display:flex;align-items:center;gap:11px;padding:9px 0;text-align:left}
#mhDetail .kid-rfact .ic{width:30px;height:30px;flex:none;border-radius:9px;background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);display:grid;place-items:center}
#mhDetail .kid-rfact .ic svg{width:15px;height:15px;stroke:rgba(255,255,255,.85);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
#mhDetail .kid-rfact .k{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
#mhDetail .kid-rfact .v{font-size:13.5px;font-weight:700;color:#fff;margin-top:2px;overflow-wrap:anywhere}

/* ---- pane ---- */
/* min-HEIGHT:0 as well as min-width: when the shell stacks (narrow), the pane is a flex
   ITEM in a column and would refuse to shrink below its content - which pushed the footer
   out of the overflow:hidden shell and made Cancel / Continue unclickable. */
#mhDetail .kid-pane{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-canvas)}
#mhDetail .kid-head{flex:none;padding:26px 32px 4px}
#mhDetail .kid-top{display:flex;align-items:center;gap:16px;margin-bottom:16px}
#mhDetail .kid-top .prog-count{font-size:12.5px;font-weight:700;color:var(--brand-600);
  letter-spacing:.01em;white-space:nowrap}
#mhDetail .kid-top .prog-bar{flex:1;min-width:0;height:7px;border-radius:99px;
  background:var(--f-rest-bg);overflow:hidden}
#mhDetail .kid-top .prog-bar i{display:block;height:100%;border-radius:99px;background:var(--brand);
  transition:width .35s var(--ease)}
#mhDetail .kid-ey{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand-600)}
/* WIZARD TITLES ARE UPPERCASE, APP-WIDE (CEO, Jul 31 2026).
   Owned by CSS, never by the string. The same child wizard reached "EDIT CHILD" from the
   Enroll wizard (hardcoded caps in the markup) and "Edit child" from here (sentence case),
   because two hosts each spelled their own title. A transform makes the casing a property
   of the CHROME, so it holds for dynamic titles too and cannot drift again.
   Tracking goes slightly POSITIVE: the sentence-case setting used -.01em, and negative
   tracking on capitals closes the letters up until the word reads as one shape. */
#mhDetail .kid-head h3{font-size:20px;font-weight:800;letter-spacing:.02em;margin:6px 0 0;color:var(--ink-1);
  text-transform:uppercase}
#mhDetail .kid-head p{font-size:13px;color:var(--ink-3);margin:6px 0 0;line-height:1.45}
#mhDetail .kid-body{flex:1;min-height:0;overflow:auto;padding:20px 32px 24px;scrollbar-width:none}
#mhDetail .kid-body::-webkit-scrollbar{width:0;display:none}
#mhDetail .kid-foot{flex:none;display:flex;align-items:center;gap:12px;padding:16px 32px;
  border-top:1px solid var(--line);background:var(--bg-canvas)}
#mhDetail .kid-foot .spacer{flex:1}
#mhDetail .kid-same{margin:0 0 16px}

/* ---- review ---- */
#mhDetail .kid-rev{border:1px solid var(--line);border-radius:14px;overflow:hidden}
#mhDetail .kid-rev .h{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);padding:10px 14px;background:var(--f-rest-bg);border-bottom:1px solid var(--line)}
#mhDetail .kid-rrow{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;font-size:13.5px}
#mhDetail .kid-rrow+.kid-rrow{border-top:1px solid var(--line)}
#mhDetail .kid-rrow .k{color:var(--ink-3);font-weight:600;flex:none}
#mhDetail .kid-rrow .v{color:var(--ink-1);font-weight:700;text-align:right;overflow-wrap:anywhere}
#mhDetail .kid-rrow .v.off{color:var(--ink-4);font-weight:500}

/* ---- a field this surface can SEE but not write ---- */
/* The mock's .field.locked: greyed and inert, never removed. A field that vanishes
   reads as "we hold no value"; a greyed one reads as "this is the value, elsewhere". */
#mhDetail .field.locked>label{opacity:.62}
#mhDetail .field.locked .icf{pointer-events:none;background:var(--f-rest-bg);opacity:.62;box-shadow:none}

/* Below ~840px of overlay width the rail cannot hold its 320px and the form at once.
   Container query, not @media: the app-wide zoom (mh.scale) makes viewport units lie. */
@container (max-width:840px){
  #mhDetail .kid-shell{flex-direction:column}
  #mhDetail .kid-rail{width:auto;flex:none;padding:20px 22px;flex-direction:row;text-align:left;
    align-items:center;gap:16px;overflow:visible}
  #mhDetail .kid-rail .mh-photo{width:60px;height:60px;margin:0;border-width:2px}
  #mhDetail .kid-rail .mh-btn{width:20px;height:20px;box-shadow:0 0 0 2px var(--dv-rail-a)}
  #mhDetail .kid-rail .mh-btn svg{width:10px;height:10px}
  #mhDetail .kid-rail .mh-ov{font-size:0;gap:0}
  #mhDetail .kid-rail .mh-ov svg{width:18px;height:18px}
  #mhDetail .kid-photo-ph svg{width:22px;height:22px}
  #mhDetail .kid-rnm{margin-top:0;font-size:16px}
  #mhDetail .kid-rfacts{display:none}
  #mhDetail .kid-head{padding:20px 22px 2px}
  #mhDetail .kid-body{padding:16px 22px 20px}
  #mhDetail .kid-foot{padding:14px 22px}
  #mhDetail .kid-body .fgrid{grid-template-columns:1fr}
}

/* =============================================================================
   AN OPEN ROW-LEVEL PICKER MUST OUT-RANK THE ROWS BELOW IT (CEO, Aug 2 2026)
   -----------------------------------------------------------------------------
   The completion picker in Student Details > Enrollment > ALL PROGRAMS opened
   BEHIND the next two rows: you could see their "In Progress" chips painted over
   its options, so the list was there but half of it was unreachable.

   `.dv-row` carries `transition: ... transform ...` and `:hover{transform:...}`.
   A transform makes an element a STACKING CONTEXT, so the moment a later row is
   hovered - which is exactly what happens while the user moves the mouse down the
   open list - that row is promoted above the popup, no matter that the popup
   carries z-index:1000. The popup was never "behind" in source order; it lost to a
   sibling that got promoted underneath the pointer.

   Same shape as the two `:has(.icf.open)` rules further up (lines ~707/718) that
   fixed this for the edit-form fields. Lifting the ROW lifts the popup with it,
   because the popup lives inside it.
   ============================================================================= */
#mhDetail .dv-row:has(.sd-comp.open),
#mhDetail .dv-row:has(.icf.open),
#mhDetail .dv-row:has(.selpop),
#hhDetail .dv-row:has(.selpop),
#view-settings .dv-row:has(.selpop),
#cnPop .dv-row:has(.selpop){position:relative;z-index:70}
/* ...and the row must not be promoted over it by a hover while the list is open. */
#mhDetail .dv-rows:has(.sd-comp.open) .dv-row:hover{transform:none}


/* ============================================================================
   SESSION-CANCEL-01 (CEO, Aug 4 2026) - cancel ONE day of a term.
   Arizona heat days: the class on the 6th is called off, the rest of the term
   runs. The row stays on the list, visibly cancelled, because a session that
   silently vanished here would still appear in the attendance matrix and the
   reports - and staff would just see an unexplained gap.
   ============================================================================ */

/* the per-row action. Quiet until hovered: this list is read far more often than
   it is acted on, and a column of red buttons would make a normal schedule look
   like a problem. */
#mhDetail .dv-row .dv-sx{display:inline-flex;align-items:center;gap:6px;flex:none;
  font-family:var(--font-sans);font-size:11.5px;font-weight:700;padding:5px 10px;
  border-radius:999px;border:1px solid var(--line);background:var(--f-rest-bg);
  color:var(--ink-3);cursor:pointer;opacity:.55;
  transition:opacity var(--t),background var(--t),border-color var(--t),color var(--t)}
#mhDetail .dv-row:hover .dv-sx{opacity:1}
#mhDetail .dv-row .dv-sx:focus-visible{opacity:1;outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
#mhDetail .dv-row .dv-sx svg{width:13px;height:13px;stroke-width:2.4}
#mhDetail .dv-row .dv-sx.danger:hover{background:#fdecec;border-color:#f3c4c3;color:#b0312f}
body.dark #mhDetail .dv-row .dv-sx.danger:hover{background:rgba(176,49,47,.18);border-color:rgba(243,196,195,.3);color:#f0a9a6}
#mhDetail .dv-row .dv-sx:not(.danger):hover{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-600)}

/* a cancelled day. Dimmed, not hidden - and the date badge keeps its colour so
   the row is still scannable by date. */
#mhDetail .dv-row.is-cancelled{background:var(--f-rest-bg);border-style:dashed}
#mhDetail .dv-row.is-cancelled .nm{text-decoration:line-through;color:var(--ink-3)}
#mhDetail .dv-row.is-cancelled .day{opacity:.6}
#mhDetail .chip.warn,
#hhDetail .chip.warn{background:#fff3e0;color:#9a5b12}
body.dark #mhDetail .chip.warn,
body.dark #hhDetail .chip.warn{background:rgba(154,91,18,.24);color:#f0c48a}

/* THE CONFIRM, inline under the row it belongs to. Amber, not red: cancelling a
   heat day is a normal decision, not an accident being caught. It sits under its
   own row so the date being cancelled is never off-screen behind a backdrop -
   which is exactly what a modal would have done. */
#mhDetail .dv-confirm{margin:-2px 0 2px 0;padding:12px 14px;border-radius:var(--r-md);
  background:#fff8e6;border:1px solid #f0d9a0;display:flex;flex-direction:column;gap:9px}
body.dark #mhDetail .dv-confirm{background:rgba(154,110,18,.16);border-color:rgba(240,217,160,.28)}
#mhDetail .dv-confirm-q{font-size:13px;font-weight:600;color:#7a5510;line-height:1.45}
body.dark #mhDetail .dv-confirm-q{color:#f0c48a}
#mhDetail .dv-confirm-in{font-family:var(--font-sans);font-size:13px;padding:8px 12px;
  border-radius:var(--r-sm);border:1px solid #e2d3ae;background:rgb(var(--tg-rgb,255,255,255));color:var(--ink-1);width:100%;box-sizing:border-box}
body.dark #mhDetail .dv-confirm-in{background:var(--f-rest-bg);border-color:rgba(240,217,160,.24);color:var(--ink-1)}
#mhDetail .dv-confirm-in:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
#mhDetail .dv-confirm-err{font-size:12.5px;font-weight:600;color:#b0312f}
#mhDetail .dv-confirm-acts{display:flex;gap:8px;flex-wrap:wrap}
#mhDetail .dv-cf{font-family:var(--font-sans);font-size:12.5px;font-weight:700;
  border-radius:var(--r-sm);padding:7px 13px;cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t)}
#mhDetail .dv-cf.no{background:rgb(var(--tg-rgb,255,255,255));border:1px solid #e2d3ae;color:#7a5510}
#mhDetail .dv-cf.no:hover{background:#fdf3df}
body.dark #mhDetail .dv-cf.no{background:transparent;border-color:rgba(240,217,160,.3);color:#f0c48a}
#mhDetail .dv-cf.yes{background:#b0312f;border:1px solid #b0312f;color:#fff}
#mhDetail .dv-cf.yes:hover{background:#962825;border-color:#962825}
#mhDetail .dv-cf.yes:disabled{opacity:.6;cursor:default}

/* =============================================================================
   CASENOTES-06 (Aug 20 2026) - THE REQUIRED MINUTES BOX ON THE TWO QUICK-NOTE
   COMPOSERS (Client Notes tab and Student Notes tab).

   RULING 5, CEO Aug 20: time spent is required on every new case note. It is
   enforced in sp_SaveCaseNote, so this field is not a hint - without it the note
   is refused. It sits INLINE with the Add button rather than above the textarea,
   because these two composers are the fast path in the app (type, add) and a
   second full-width field would turn a jotting into a form.

   Scoped under #mhDetail with the rest of the detail shell, where its local
   tokens (--f-rest-bg, --line, --ink-*, --r-sm, --danger) are defined. A control
   written outside that scope loses every one of them and renders unstyled.
   ============================================================================= */
#mhDetail .sd-noteact,
#mhDetail .cl-noterow{
  display:flex; align-items:flex-end; justify-content:flex-end; gap:12px; flex-wrap:wrap;
}
#mhDetail .sd-notemins,
#mhDetail .cl-notemins{
  display:flex; flex-direction:column; gap:6px; flex:none; min-width:0;
}
#mhDetail .sd-notemins label,
#mhDetail .cl-notemins label{
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:5px;
}
#mhDetail .sd-notemins .req,
#mhDetail .cl-notemins .req{ color:var(--danger); }

#mhDetail .sd-notemins input,
#mhDetail .cl-notemins input{
  width:104px; height:44px; padding:0 12px;
  font-family:inherit; font-size:15px; font-weight:600; color:var(--ink-1);
  background:var(--f-rest-bg); border:1px solid var(--f-rest-bd); border-radius:var(--r-sm);
  box-shadow:var(--f-rest-sh); transition:background .18s, border-color .18s, box-shadow .18s;
}
#mhDetail .sd-notemins input:hover,
#mhDetail .cl-notemins input:hover{ background:var(--f-hover-bg); }
#mhDetail .sd-notemins input:focus,
#mhDetail .cl-notemins input:focus{
  outline:none; background:var(--f-focus-bg); border-color:var(--f-focus-bd); box-shadow:var(--f-focus-sh);
}
/* The browser's spinner arrows are 44px of decoration on a 104px control and they
   fight the app's own field kit, which has no spinners anywhere else. */
#mhDetail .sd-notemins input::-webkit-outer-spin-button,
#mhDetail .sd-notemins input::-webkit-inner-spin-button,
#mhDetail .cl-notemins input::-webkit-outer-spin-button,
#mhDetail .cl-notemins input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#mhDetail .sd-notemins input,
#mhDetail .cl-notemins input{ -moz-appearance:textfield; appearance:textfield; }

@media (max-width:620px){
  #mhDetail .sd-noteact,
  #mhDetail .cl-noterow{ justify-content:stretch; }
  #mhDetail .sd-notemins input,
  #mhDetail .cl-notemins input{ width:100%; }
}


/* =============================================================================
   CASENOTES-09 - THE STUDENT NOTES TAB, IDENTICAL TO THE CLIENT ONE.

   Both tabs read sp_GetClientCaseNotes - a student IS a client here - so if the two
   presented a note differently, the more permissive one would be a side door round
   the stricter. Everything is indented 37px to sit under the avatar, matching
   .sd-note-b, which is the only thing that differs from the Client tab's copy.
   ============================================================================= */
#mhDetail .sd-notelink{display:flex;justify-content:flex-end;margin:-2px 0 10px}
#mhDetail .sd-note-t{margin:8px 0 0 37px;font-size:14px;font-weight:800;color:var(--ink-1)}
#mhDetail .sd-note-out{margin:9px 0 0 37px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--f-rest-bg);border:1px solid var(--f-rest-bd)}
#mhDetail .sd-note-out label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:3px}
#mhDetail .sd-note-out>div{font-size:13.5px;line-height:1.55;color:var(--ink-2);
  white-space:pre-wrap;overflow-wrap:anywhere}
#mhDetail .sd-note-f{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px 37px}
#mhDetail .sd-note-f:empty{display:none}
#mhDetail .sd-note .cn-stub{margin:9px 0 0 37px}

#mhDetail .sd-note.done{background:var(--f-rest-bg);border-radius:var(--r-md);
  border-top:none;padding:13px 12px 6px;margin:9px -12px 0}
#mhDetail .sd-note.done .sd-note-b,
#mhDetail .sd-note.done .sd-note-t{opacity:.72}

/* =========================================================
   MINT MIST - RECORD DETAIL SECTION.  4 September 2026.
   Verbatim port of "Mint Mist Record Detail" (index.html + styles.css),
   his mock, deployed to ONE card only for approval: Client Detail >
   PERSONAL > Personal Information. When he confirms it, this block is the
   recipe every other .pd-card in every DetailShell host moves onto - which
   is why it lives HERE, in the app-wide shell sheet, and not in
   client-detail-view.css. Nothing below is Client-specific.

   OPT-IN BY CLASS. Every rule needs `.mint` on the card, so the ~40 other
   cards across Client / Household / Program / Student / Subsidy / My Profile
   keep the existing .pd-card + .kv treatment untouched until he says go.

   THE MOCK'S FONT IS ALREADY THE APP'S FONT. styles.css pulls Hanken Grotesk
   from Google Fonts; --mh-font-body has been 'Hanken Grotesk' since the design
   system was locked, self-hosted in wwwroot/fonts. So no <link> was added and
   no @font-face was written - the mock inherits the exact face it asked for.

   THE MOCK'S CANVAS IS ALREADY THE APP'S CANVAS. Its stage is #EAECEF; the
   detail pane is --bg-canvas #E8EBF0. The frosted panel is translucent, so it
   only reads correctly over the ground it was drawn on - it happens to be the
   same ground, so the glass, the shadow and the white-on-white borders land
   exactly as designed with no re-tuning.

   The mock's literal colours are kept as literals ON PURPOSE: this is a
   design being judged by eye, and swapping them for the shell's tokens
   (--brand #2E4A43 vs the mock's #2F6B57) would show him something that is
   not what he approved. Dark mode is the one place tokens could not be
   copied - the mock has none - so it is re-keyed to body.dark below.
   ========================================================= */
#mhDetail .pd-card.mint,
#hhDetail .pd-card.mint,
#view-settings .pd-card.mint,
#cnPop .pd-card.mint,
#view-help .pd-card.mint {
  /* THE HOVER LIFT, DEFINED ONCE.  5 September 2026.

     He reported it: "the shadow looks rectengle the bottom". He is right, and the cause
     is geometry, not clipping. A single `0 16px 30px -16px` layer on a row ~500px wide
     draws a band that is very wide and only ~15px deep - at that ratio a 30px blur has
     no room to fade, so it reads as a BAR with a straight bottom edge rather than a
     glow. It looked fine on a small tile and wrong the moment rows became full-width.

     TWO LAYERS FIX IT: a tight contact shadow just under the edge, and a wide soft one
     that has the blur radius to actually dissolve. Lower opacity on both, because two
     layers stack.

     AND IT IS A VARIABLE BECAUSE IT WAS WRITTEN OUT NINE TIMES. Field tiles, programme
     rows, subsidy rows, comments, document alerts, the collected panel, timeline rows
     and two focus rings each carried their own copy of the same literal - so "soften the
     hover" meant editing nine places and hoping. That is the same "two homes for one
     value" trap that made the orange fail earlier today, nine-fold. One definition now. */
  --mint-lift:0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30);

  container-type:inline-size;container-name:mintcard;
  padding:22px;border-radius:22px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 22px 54px -26px rgba(30,55,48,.42);
}

/* the header capsule - title on the left, completion meter on the right */
#mhDetail .mint-ph,
#hhDetail .mint-ph,
#view-settings .mint-ph,
#cnPop .mint-ph,
#view-help .mint-ph {
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;margin-bottom:14px;border-radius:999px;
  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);
}
#mhDetail .mint-tab,
#hhDetail .mint-tab,
#view-settings .mint-tab,
#cnPop .mint-tab,
#view-help .mint-tab {
  display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;
  font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#2A4C41;
}
#mhDetail .mint-tab > svg,
#hhDetail .mint-tab > svg,
#view-settings .mint-tab > svg,
#cnPop .mint-tab > svg,
#view-help .mint-tab > svg {
  width:18px;height:18px;flex:none;
  stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
  /* OPTICALLY CENTRED WITH THE TITLE, not box-centred.  5 September 2026.

     He pointed at HOUSING SUPPORT: "can you center both HOUSING SUPPORT text with
     it's icon?" It was not that icon - MEASURED, all four heads on the Overview
     reported the SAME 0.88px, and the capsule already had align-items:center.

     THE CAUSE IS THE UPPERCASE TITLE. .mint-tab is 12.5px uppercase in an 18.75px
     line box, and capitals have no descenders, so the letters sit HIGH inside that
     box - their glyph box measures 17px against the line's 18.75. align-items
     centres the icon against the LINE, which leaves it sitting 0.88px below the
     letters it is meant to sit beside.

     A translate rather than a margin so nothing in the flex row re-lays-out, and
     it corrects all 22 card heads at once, not just this one. Re-measured after:
     0.02px, which is nothing. */
  transform:translateY(-.9px);
}
#mhDetail .mint-chip,
#hhDetail .mint-chip,
#view-settings .mint-chip,
#cnPop .mint-chip,
#view-help .mint-chip {
  flex:none;display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;color:#2A4C41;
}
#mhDetail .mint-bar,
#hhDetail .mint-bar,
#view-settings .mint-bar,
#cnPop .mint-bar,
#view-help .mint-bar {width:88px;height:5px;border-radius:99px;background:rgba(30,55,48,.16);overflow:hidden}
#mhDetail .mint-bar i,
#hhDetail .mint-bar i,
#view-settings .mint-bar i,
#cnPop .mint-bar i,
#view-help .mint-bar i {
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#2F6B57,#5FCFA4);
  transition:width .5s var(--ease);
}

/* THE CROWN. His ask, and the one deliberate addition to the mock: the head of
   the household used to be a grey text pill reading "Head of household". A pill
   is what a status is; being the head of a family is an identity, so it is a
   real crown now - gold, jewelled, sitting in the capsule beside the title.
   It is drawn ONLY for the head. Every other member's relationship is not lost:
   "Relationship to head" is one of the eighteen tiles below, where it always was. */
#mhDetail .mint-crown,
#hhDetail .mint-crown,
#view-settings .mint-crown,
#cnPop .mint-crown,
#view-help .mint-crown {
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(145deg,#F9E9B4 0%,#E5B647 52%,#C68D1E 100%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 4px 10px -4px rgba(150,105,20,.55), inset 0 1px 0 rgba(255,255,255,.75);
}
#mhDetail .mint-crown svg,
#hhDetail .mint-crown svg,
#view-settings .mint-crown svg,
#cnPop .mint-crown svg,
#view-help .mint-crown svg {width:14px;height:14px;display:block;fill:#6A4708}

/* the field tiles - filled tile carries a solid dot, empty tile goes dashed
   with a hollow one, which is the whole idea of the design: what is missing
   is visible without being loud */
#mhDetail .mint-grid,
#hhDetail .mint-grid,
#view-settings .mint-grid,
#cnPop .mint-grid,
#view-help .mint-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
#mhDetail .mint-w,
#hhDetail .mint-w,
#view-settings .mint-w,
#cnPop .mint-w,
#view-help .mint-w {
  position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:12px 16px 14px 30px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
#mhDetail .mint-w::before,
#hhDetail .mint-w::before,
#view-settings .mint-w::before,
#cnPop .mint-w::before,
#view-help .mint-w::before {
  content:"";position:absolute;left:14px;top:17px;width:7px;height:7px;border-radius:50%;
  background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.16);
}
#mhDetail .mint-w:has(.un),
#hhDetail .mint-w:has(.un),
#view-settings .mint-w:has(.un),
#cnPop .mint-w:has(.un),
#view-help .mint-w:has(.un) {
  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:has(.un)::before,
#hhDetail .mint-w:has(.un)::before,
#view-settings .mint-w:has(.un)::before,
#cnPop .mint-w:has(.un)::before,
#view-help .mint-w:has(.un)::before {background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
#mhDetail .mint-w:hover,
#hhDetail .mint-w:hover,
#view-settings .mint-w:hover,
#cnPop .mint-w:hover,
#view-help .mint-w:hover {transform:translateY(-3px);box-shadow:var(--mint-lift)}
#mhDetail .mint-lb,
#hhDetail .mint-lb,
#view-settings .mint-lb,
#cnPop .mint-lb,
#view-help .mint-lb {font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7A8A84}
#mhDetail .mint-vl,
#hhDetail .mint-vl,
#view-settings .mint-vl,
#cnPop .mint-vl,
#view-help .mint-vl {
  font-size:16px;font-weight:650;color:#1C2A25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#mhDetail .mint-vl.un,
#hhDetail .mint-vl.un,
#view-settings .mint-vl.un,
#cnPop .mint-vl.un,
#view-help .mint-vl.un {font-weight:500;color:#9CA8A3}
/* A-Number, I-94, passport, licence, reference number. These are IDENTIFIERS - they get
   read out, typed into a federal form and checked digit by digit, so they keep the mono
   face the .kv grid already gave them. Losing it in the port would have made an 0/O or a
   1/l ambiguous on exactly the fields where that matters most. */
#mhDetail .mint-vl.mono,
#hhDetail .mint-vl.mono,
#view-settings .mint-vl.mono,
#cnPop .mint-vl.mono,
#view-help .mint-vl.mono {font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:14.5px;letter-spacing:.01em}

/* CONTAINER queries, never @media - the app has a global zoom, so viewport width
   is not the pane's width (--mh-vh/--mh-vw law).

   AND THEY MEASURE THE CARD, NOT THE PANE, WHICH IS WHY .pd-card.mint DECLARES
   `container-name:mintcard` ABOVE. The pane is one container for the whole tab, so
   a pane-width query cannot tell a full-width card from a half-width one: at a
   1178px pane BOTH would keep 3 columns, and the half-width cards - Info, Contact,
   Origin address, the two Language cards - would be laying 3 tiles into ~560px,
   about 180px each. Every value would ellipsise. Named so it is unambiguous which
   container answers, since the pane is still a container above it.

   3-col cap, stepped, never auto-filled (brief 5). */
@container mintcard (max-width:760px){#mhDetail .mint-grid,#hhDetail .mint-grid,
#view-settings .mint-grid,
#cnPop .mint-grid,
#view-help .mint-grid {grid-template-columns:repeat(2,1fr)}}
@container mintcard (max-width:470px){#mhDetail .mint-grid,#hhDetail .mint-grid,
#view-settings .mint-grid,
#cnPop .mint-grid,
#view-help .mint-grid {grid-template-columns:1fr}}
@container mintcard (max-width:430px){#mhDetail .mint-ph,#hhDetail .mint-ph,
#view-settings .mint-ph,
#cnPop .mint-ph,
#view-help .mint-ph {border-radius:18px;flex-wrap:wrap;row-gap:8px}}

/* DARK - the mock is light-only, so this is re-keyed, not ported. The recipe is
   held: a translucent panel over the canvas, a lighter capsule on it, tiles
   lighter again, and the filled/hollow dot pair carrying the same meaning. */
body.dark #mhDetail .pd-card.mint,
body.dark #hhDetail .pd-card.mint,
body.dark #view-settings .pd-card.mint,
body.dark #view-help .pd-card.mint {
  --mint-lift:0 4px 10px -6px rgba(0,0,0,.4), 0 18px 38px -18px rgba(0,0,0,.55);
  background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));
  border-color:rgba(180,210,235,.14);
  box-shadow:0 22px 54px -26px rgba(0,0,0,.7);
}
body.dark #mhDetail .mint-ph,
body.dark #hhDetail .mint-ph,
body.dark #view-settings .mint-ph,
body.dark #view-help .mint-ph {
  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);
}
body.dark #mhDetail .mint-tab,
body.dark #hhDetail .mint-tab,
body.dark #mhDetail .mint-chip,
body.dark #hhDetail .mint-chip,
body.dark #view-settings .mint-tab,
body.dark #view-settings .mint-chip,
body.dark #view-help .mint-tab,
body.dark #view-help .mint-chip {color:#B7D6C8}
body.dark #mhDetail .mint-bar,
body.dark #hhDetail .mint-bar,
body.dark #view-settings .mint-bar,
body.dark #view-help .mint-bar {background:rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)))}
body.dark #mhDetail .mint-w,
body.dark #hhDetail .mint-w,
body.dark #view-settings .mint-w,
body.dark #view-help .mint-w {
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark #mhDetail .mint-w::before,
body.dark #hhDetail .mint-w::before,
body.dark #view-settings .mint-w::before,
body.dark #view-help .mint-w::before {background:#5FCFA4;box-shadow:0 0 0 3px rgba(95,207,164,.18)}
body.dark #mhDetail .mint-w:has(.un),
body.dark #hhDetail .mint-w:has(.un),
body.dark #view-settings .mint-w:has(.un),
body.dark #view-help .mint-w:has(.un) {
  background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));border-color:rgba(180,210,235,.16);box-shadow:none;
}
body.dark #mhDetail .mint-w:has(.un)::before,
body.dark #hhDetail .mint-w:has(.un)::before,
body.dark #view-settings .mint-w:has(.un)::before,
body.dark #view-help .mint-w:has(.un)::before {background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)}
body.dark #mhDetail .mint-lb,
body.dark #hhDetail .mint-lb,
body.dark #view-settings .mint-lb,
body.dark #view-help .mint-lb {color:#8C9AA5}
body.dark #mhDetail .mint-vl,
body.dark #hhDetail .mint-vl,
body.dark #view-settings .mint-vl,
body.dark #view-help .mint-vl {color:#EAF0F4}
body.dark #mhDetail .mint-vl.un,
body.dark #hhDetail .mint-vl.un,
body.dark #view-settings .mint-vl.un,
body.dark #view-help .mint-vl.un {color:#6E7E88}

/* THE TAG - the right-hand slot on a card that has NO fields, so no meter.
   His rule for this pass: the COMPLETE bar goes on cards that are a set of fields;
   a list, a timeline, a comment stream or a document grid has nothing to be
   complete ABOUT, so it keeps the caption it already had and no bar.

   NOT uppercase and NOT letterspaced, unlike the meter's .mint-chip. The captions
   here are real language of different lengths - "Not enrolled", "3 of 6 collected",
   and the Notes tab's full sentence - and the meter's treatment would turn the long
   ones into a wall. It wraps rather than overflowing the capsule for the same reason. */
#mhDetail .mint-tag,
#hhDetail .mint-tag,
#view-settings .mint-tag,
#cnPop .mint-tag,
#view-help .mint-tag {
  flex:0 1 auto;min-width:0;text-align:right;
  font-size:11.5px;font-weight:700;line-height:1.35;color:#5E7268;
  text-transform:none;letter-spacing:normal;
}
/* the same caption when it sits BESIDE the title instead of opposite it (Housing support,
   which carries a caption and a meter). .mint-tab is uppercase and letterspaced and those
   inherit, which is why the reset above is on the base class and not only here. */
#mhDetail .mint-tab .mint-tag,
#hhDetail .mint-tab .mint-tag,
#view-settings .mint-tab .mint-tag,
#cnPop .mint-tab .mint-tag,
#view-help .mint-tab .mint-tag {text-align:left;padding-left:2px}
/* "Need Attention!" is the one caption that is a WARNING, not a label. Dropping it
   into the same muted grey as the rest would have quietly disarmed it. */
#mhDetail .mint-tag.warn,
#hhDetail .mint-tag.warn,
#view-settings .mint-tag.warn,
#cnPop .mint-tag.warn,
#view-help .mint-tag.warn {color:#B4472F}
body.dark #mhDetail .mint-tag,
body.dark #hhDetail .mint-tag,
body.dark #view-settings .mint-tag,
body.dark #view-help .mint-tag {color:#93A79D}
body.dark #mhDetail .mint-tag.warn,
body.dark #hhDetail .mint-tag.warn,
body.dark #view-settings .mint-tag.warn,
body.dark #view-help .mint-tag.warn {color:#E8A08C}

/* ============================================================================
   NO BACKGROUND INSIDE THE BACKGROUND.  His call, 5 September 2026.

   "it has a big glassy background which is that is great and you see that it's
   showing No Program enrollment yet it has another darker background so that
   looks really bad background inside the background so remove that background
   ... the title of the KPI cards are good don't touch them."

   THE RULE THIS SETTLES: when a card's whole body is ONE piece of content - an
   empty state, a status row, a stat panel - the glass IS the container. Painting
   a second panel inside it draws a box around content that already has a box,
   and the two edges read as a hole rather than as depth. On 4 Sep these blocks
   were LIFTED off the flat #DFE4EA onto white glass, which fixed the hole; he is
   right that the answer was to remove the panel, not to re-tint it.

   IT DOES NOT TOUCH THE METERED FIELD CARDS, in his words: "not for those KPI
   cards that has the Information and Complete bars leave them alone." .mint-w
   (the field tiles) and .mint-ph (the title capsule) are untouched everywhere -
   a field card is a SET of values and the tile edge is what separates one value
   from the next. Here there is nothing to separate.

   Scoped to .pd-card.mint, so this is Client Detail only, like the rest of Mint
   Mist. Household, Program, Student, Subsidy and My Profile are untouched.
   ============================================================================ */

/* THE EMPTY STATES - six of them: Programs & enrollments (Overview and Services),
   Housing support, Emergency contact, Language notes, Notes.
   .dv-eic, the icon bubble, STAYS. It is a glyph chip, not a panel, and with the
   slab gone it is the only thing anchoring a centred message. */
#mhDetail .pd-card.mint .dv-empty.inline,
#hhDetail .pd-card.mint .dv-empty.inline,
body.dark #mhDetail .pd-card.mint .dv-empty.inline,
body.dark #hhDetail .pd-card.mint .dv-empty.inline,
#view-settings .pd-card.mint .dv-empty.inline,
#cnPop .pd-card.mint .dv-empty.inline,
body.dark #view-settings .pd-card.mint .dv-empty.inline,
#view-help .pd-card.mint .dv-empty.inline,
body.dark #view-help .pd-card.mint .dv-empty.inline {background:transparent}

/* THE DOCUMENT STATUS CARD, the third one he sent. .cl-alert (a status row) and
   .cl-docprog (the stat panel beside it) each carry an INSET HAIRLINE as well as
   a fill - clearing only the fill would have left a ghost outline exactly where
   the panel used to be, which is the same defect one shade quieter. Both go.

   The clickable rows keep a hover, and it now carries the whole "this is a link"
   signal on its own, so it is stronger than the one it replaces.

   .cl-doc IS DELIBERATELY LEFT ON ITS WHITE TILE. A document tile is not a
   background behind a message - it is an object in a grid with its own status
   pill, file size and two buttons, and dissolving its edge would run the tiles
   into each other. Different thing, different decision, and his to make. */
/* THE DOCUMENT STATUS ROWS AND THE COLLECTED PANEL WEAR THE TILE AGAIN.  5 Sep 2026,
   later the same day. Earlier he had these stripped bare - "background inside the
   background" - and he is now asking for them back on THIS card: "add the white
   background with it's mouse hover behavior."

   NOT A REVERSAL, A NARROWING. The earlier rule was right about a card whose body is one
   message sitting on the glass. These are neither: they are a LIST OF ROWS you click and a
   STAT PANEL, both of which need an edge to be clickable objects rather than loose text.
   Everything else that rule cleared - the empty states, the Housing support message - stays
   cleared, and .mint-w / .mint-ph are untouched as always.

   IT IS THE SAME RECIPE AS .mint-prow, deliberately: a live row is white with the hairline
   and lifts on hover, a "nothing here" panel is dashed and grey. One vocabulary. */
#mhDetail .pd-card.mint .cl-alert,
#mhDetail .pd-card.mint .cl-docprog{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
  transition:transform .18s ease,box-shadow .18s ease,background var(--t);
}
#mhDetail .pd-card.mint .cl-alert.clk:hover,
#mhDetail .pd-card.mint .cl-docprog:not(.off):hover{
  background:rgba(var(--tg-rgb,255,255,255),.92);
  transform:translateY(-3px);
  box-shadow:var(--mint-lift);
}

/* NOTHING ON FILE = the "Not set" tile. His words: "if there is no documents the Not Set
   border and background must set there". Same values as an empty field tile, and no hover
   lift, because there is nothing there to open. */
#mhDetail .pd-card.mint .cl-docprog.off{
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  border:1px dashed rgba(30,55,48,.18);
  box-shadow:none;
}

body.dark #mhDetail .pd-card.mint .cl-alert,
body.dark #mhDetail .pd-card.mint .cl-docprog{
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));
  box-shadow:inset 0 0 0 1px rgba(180,210,235,.14);
}
body.dark #mhDetail .pd-card.mint .cl-alert.clk:hover,
body.dark #mhDetail .pd-card.mint .cl-docprog:not(.off):hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));
  box-shadow:var(--mint-lift);
}
body.dark #mhDetail .pd-card.mint .cl-docprog.off{
  background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));
  border-color:rgba(180,210,235,.16);
  box-shadow:none;
}

/* ============================================================================
   THE FLASHING LIGHT.  His call, 5 September 2026:
   "when documents are about to expire the color will change to orange add flashing
   orange pill and when it's expired add the red flashing light like you did on
   IMMIGRATION."

   IT IS THE SAME ANIMATION Key Dates and Deadlines already uses (kdFlash), re-keyed per
   severity, so a flashing light means one thing everywhere on this record. Two states
   only, matching the list itself: ORANGE about to expire, RED already expired - and the
   orange is the exact orange the Immigration timeline dot uses, not a new one.

   prefers-reduced-motion is honoured. A pulsing dot is decoration on top of a row that
   already says "expired" in words and colour; for anyone who has asked the system to stop
   moving, the light simply sits still and nothing is lost.
   ============================================================================ */
@keyframes dsPulse{
  0%,100%{box-shadow:0 0 0 0 var(--ds-pulse); opacity:1}
  50%    {box-shadow:0 0 0 5px rgba(0,0,0,0); opacity:.45}
}
#mhDetail .cl-doccard .cl-alert .ic{position:relative}
#mhDetail .cl-doccard .cl-alert .ds-pulse{display:none}
#mhDetail .cl-doccard .cl-alert.d .ds-pulse,
#mhDetail .cl-doccard .cl-alert.w .ds-pulse{
  display:block;position:absolute;top:-3px;right:-3px;
  width:8px;height:8px;border-radius:50%;
  animation:dsPulse 1.25s ease-in-out infinite;
}
#mhDetail .cl-doccard .cl-alert.d .ds-pulse{background:#C0392F;--ds-pulse:rgba(192,57,47,.55)}
#mhDetail .cl-doccard .cl-alert.w .ds-pulse{background:#C97B5A;--ds-pulse:rgba(201,123,90,.55)}

/* The "about to expire" ORANGE is NOT here - it lives beside the other severity colours in
   client-detail-view.css, which loads after this file. Writing it here as well was my first
   go and it silently lost on load order; two homes for one colour is how a colour drifts. */

@media (prefers-reduced-motion: reduce){
  #mhDetail .cl-doccard .cl-alert .ds-pulse{animation:none}
}

/* .cl-doc keeps the lifted tile it was given on 4 Sep. */
#mhDetail .pd-card.mint .cl-doc{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
}
#mhDetail .pd-card.mint .cl-doc:hover{background:rgba(var(--tg-rgb,255,255,255),.9)}
body.dark #mhDetail .pd-card.mint .cl-doc{
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));
  box-shadow:inset 0 0 0 1px rgba(180,210,235,.14);
}
body.dark #mhDetail .pd-card.mint .cl-doc:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)))}

/* =============================================================================
   THE REST OF THE FLAT BLOCKS.  4 September 2026.

   He pointed at the comment composer on the Notes tab - a grey slab sitting on the
   glass - and asked for the same sweep across the record: "if you find same format
   on fields change it too cause we want to completely change the format and
   interface."

   SO IT WAS SWEPT, NOT GUESSED. Every element inside every .pd-card.mint on all
   eight tabs was walked and its COMPUTED background read. Four opaque blocks came
   back, and only four:
     .icf              the comment composer, and the inline comment editor
     .dv-eic           the empty-state icon bubble (Overview x2, Personal, Language,
                       Services, Notes)
     .cl-table thead th   the six header cells of the movement/audit table
     .cl-alert .ic     LEFT ALONE - rgb(247,227,225) is the danger TINT on a document
                       alert icon. It is semantic, not chrome; flattening it to glass
                       would delete the warning colour.

   THE EDIT FORM IS THE SAME .icf KIT AND IS DELIBERATELY NOT REACHED. Every rule
   here is scoped inside .pd-card.mint, and entering Edit replaces the pane body with
   the form - its 43 fields are not inside a mint card, so nothing below touches them.
   That is on purpose: the edit form is the MH DEFAULT FIELD standard (masked dates,
   type-to-search selects, error and locked states, documented in
   _handoff/MATTHEW_HOUSE_FIELD_STANDARD.md) and restyling it is its own job with its
   own risks, not a side effect of a read-surface pass. It is his call.
   ============================================================================= */

/* THE COMPOSER. A field has states a tile does not, so it gets three, in the mock's
   own palette: rest sits lighter than a filled tile so it reads as enterable, hover
   matches a tile, and focus goes near-solid with the mint accent ring. The inset
   shadow that gave it its "recessed" look is removed - the mock has no inset
   shadows anywhere; depth there comes from soft drop shadows and translucency. */
#mhDetail .pd-card.mint .icf{
  background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
#mhDetail .pd-card.mint .icf:hover:not(:focus-within){background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)))}
#mhDetail .pd-card.mint .icf:focus-within,
#mhDetail .pd-card.mint .icf.open{
  background:rgba(var(--tg-rgb,255,255,255),.95);
  border-color:rgba(47,107,87,.45);
  box-shadow:0 0 0 3px rgba(47,107,87,.14), 0 10px 24px -16px rgba(30,55,48,.45);
}

/* the empty-state icon bubble, and the audit table's header row */
#mhDetail .pd-card.mint .dv-eic,
#hhDetail .pd-card.mint .dv-eic,
#mhDetail .pd-card.mint .cl-table thead th,
#view-settings .pd-card.mint .dv-eic,
#cnPop .pd-card.mint .dv-eic,
#view-help .pd-card.mint .dv-eic {
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
}

body.dark #mhDetail .pd-card.mint .icf{
  background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));
  border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark #mhDetail .pd-card.mint .icf:hover:not(:focus-within){background:rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1)))}
body.dark #mhDetail .pd-card.mint .icf:focus-within,
body.dark #mhDetail .pd-card.mint .icf.open{
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));
  border-color:rgba(95,207,164,.45);
  box-shadow:0 0 0 3px rgba(95,207,164,.16), 0 10px 24px -16px rgba(0,0,0,.6);
}
body.dark #mhDetail .pd-card.mint .dv-eic,
body.dark #hhDetail .pd-card.mint .dv-eic,
body.dark #mhDetail .pd-card.mint .cl-table thead th,
body.dark #view-settings .pd-card.mint .dv-eic,
body.dark #view-help .pd-card.mint .dv-eic {
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));
}

/* STATUS HISTORY INSIDE A MINT CARD (his call, 4 Sep 2026 - see the note at the card).
   The component draws its own .sh-head - an icon, an h3 reading "Status History" and a
   divider rule - which was right when it sat bare on the canvas and is a duplicate now
   that the Mint capsule says the same thing directly above it. Hidden, not deleted, and
   ONLY where a Mint card is the parent: .sh-card itself is untouched, so every host that
   still draws the timeline bare keeps the flat treatment the Jul 29 ruling gave it.

   UPDATED 7 Sep 2026: THE HOUSEHOLD RECORD IS NO LONGER ONE OF THEM. It asked for the same
   card ("some section dosn't have KPI cards style like HOUSING Subsidy and STATUS HISTORY"),
   so #hhDetail is on these selectors too and its timeline now sits inside a Mint card exactly
   as the client's does. Subsidy and the rest are unchanged. The sentence above used to name
   Household as an example of what was NOT converted, and leaving it would have been a rule's
   corpse describing a behaviour that had moved - grep the WORDING, not only the logic.

   .sh-body's 16px top padding was measured against a divider that is no longer drawn, so
   it is retuned to sit under the capsule instead. */
#mhDetail .pd-card.mint .sh-head,
#hhDetail .pd-card.mint .sh-head,
#view-settings .pd-card.mint .sh-head,
#cnPop .pd-card.mint .sh-head,
#view-help .pd-card.mint .sh-head {display:none}
#mhDetail .pd-card.mint .sh-body,
#hhDetail .pd-card.mint .sh-body,
#view-settings .pd-card.mint .sh-body,
#cnPop .pd-card.mint .sh-body,
#view-help .pd-card.mint .sh-body {padding:2px 0 0}
#mhDetail .pd-card.mint .sh-empty,
#hhDetail .pd-card.mint .sh-empty,
#view-settings .pd-card.mint .sh-empty,
#cnPop .pd-card.mint .sh-empty,
#view-help .pd-card.mint .sh-empty {padding:6px 2px}


/* =============================================================================
   KEY DATES AND DEADLINES - THE RENEWAL STATUS.  F1-F3, 4 September 2026.
   Migration_DocumentRenewal_Sep04.sql supplies the data.

   THE DOT FLASHES, AND IT STOPS FOR A REASON. His instruction: "that big orange
   dot or any dot after that appears must flushing". A dot pulses while its
   deadline is inside the attention window AND nobody has recorded anything that
   suppresses it. Recording "Submitted" stops it; "Rejected" does not, because a
   rejected renewal is more urgent than one nobody has touched.

   THAT PAIRING IS THE WHOLE FEATURE. Flashing everything forever is what caused
   the reminder fatigue this item exists to fix - staff stop seeing a warning that
   never changes. A dot that stops the moment somebody says "I sent it to DES" is
   a signal again.

   prefers-reduced-motion is honoured: the dot keeps a solid ring instead of
   pulsing, so the state is still visible to someone who cannot take the movement.
   ============================================================================= */
@keyframes kdFlash{
  0%,100%{box-shadow:0 0 0 0 rgba(192,57,47,.55); opacity:1}
  50%    {box-shadow:0 0 0 6px rgba(192,57,47,0);  opacity:.55}
}
#mhDetail .cl-tldot.kd-flash{animation:kdFlash 1.25s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  #mhDetail .cl-tldot.kd-flash{animation:none; box-shadow:0 0 0 3px rgba(192,57,47,.35)}
}

/* THE ROW. It keeps the timeline grid it already had; the title cell simply becomes
   a button. A <button> and not a clickable div, so it is reachable by keyboard and
   announced as an action - the row is the only way into this feature. */
#mhDetail .kd-row{position:relative}
#mhDetail .kd-open{
  display:block; width:100%; text-align:left; padding:0; border:0; background:none;
  font:inherit; color:inherit; cursor:pointer;
  text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:rgba(47,107,87,.4); text-underline-offset:3px;
  transition:color var(--t), text-decoration-color var(--t);
}
#mhDetail .kd-open:hover{color:var(--brand-600); text-decoration-color:var(--brand-600)}
#mhDetail .kd-open:focus-visible{
  outline:none; border-radius:6px;
  box-shadow:0 0 0 3px rgba(47,107,87,.22);
}

/* THE RECORDED STATUS, ON THE RIGHT OF THE SAME ROW - his spec exactly. It is a
   quiet pill, not a loud one: the row's own dot carries the urgency, and this is
   the reassurance that somebody has it in hand. --c comes from the lookup's
   ColorHex, so a new status added in SQL styles itself with no deploy. */
#mhDetail .kd-stat{
  /* INSET TO THE TILE'S OWN PADDING, not to its corner.  5 September 2026:
     "the Status are attached to the corner and it looks very bad".

     He is right, and I caused it earlier the same day. This was top:0/right:0 against
     a row that had NO BOX - the chip simply sat at the right-hand end of the line. The
     moment .cl-tl became a white TILE, "0" started meaning the tile's inner edge, so
     the chip jammed into the corner against the border with nothing around it.

     An absolutely-positioned child is placed against its ancestor's PADDING box, so it
     ignores the padding that every other child of that tile respects. Matching the
     tile's own 12px/16px puts it back in line with the date beside it.

     THE LESSON, since this will happen again as more rows become tiles: giving an
     element a box RE-ANCHORS every absolutely-positioned child inside it. Check them. */
  position:absolute; top:12px; right:16px;
  max-width:calc(100% - 56px);
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--c) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
  font-size:11px; font-weight:800; letter-spacing:.03em; color:var(--c);
  white-space:nowrap;
}
#mhDetail .kd-stat i{width:6px; height:6px; border-radius:50%; background:var(--c); flex:none}
#mhDetail .kd-stat em{font-style:normal; font-weight:700; opacity:.75}

/* =============================================================================
   THE POPUP. Same glass as a Mint card - the .icf lift is scoped inside
   .pd-card.mint and cannot reach a modal, so the recipe is written again here for
   .kd-icf rather than the scope being loosened. Loosening it would have pulled
   every other modal in the app into a design he has not approved yet.
   ============================================================================= */
#mhDetail .kd-modal{
  position:absolute; inset:0; z-index:1400;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,32,28,.42); backdrop-filter:blur(3px);
}
#mhDetail .kd-box{
  width:min(560px,100%); max-height:100%; display:flex; flex-direction:column;
  border-radius:22px; overflow:hidden;
  background:color-mix(in srgb, rgb(var(--tg-rgb,255,255,255)) 78%, var(--bg-canvas));
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 34px 80px -30px rgba(20,40,34,.6);
}
#mhDetail .kd-head{
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(30,55,48,.1);
}
#mhDetail .kd-htx{min-width:0}
#mhDetail .kd-head h3{
  margin:0; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#2A4C41;
}
#mhDetail .kd-head p{margin:6px 0 0; font-size:13px; font-weight:600; color:var(--ink-3)}
/* THE X IS GONE (his call, 4 Sep 2026): "we do have the Cancel button". Two controls
   doing one job, and the footer's Cancel is the one that says what it does.

   THE INERT-BACKDROP LAW STILL HOLDS - every dialog needs a VISIBLE way out, never
   just a backdrop click. Cancel is that way out, so removing the X takes nothing
   away; the backdrop click stays as a convenience on top of it, not instead of it.
   The header is a single text block now and no longer needs the flex row it had to
   hold the button. */
#mhDetail .kd-body{padding:18px 22px; overflow:auto; display:flex; flex-direction:column; gap:16px}

/* AN OPEN DROPDOWN MUST NOT BE CLIPPED BY THE THING IT SITS IN. Two ancestors clip
   it: .kd-body scrolls, and .kd-box hides overflow to keep its 22px corners. With
   both clipping, the status list lost its last two options ("Not eligible", "Not
   needed") behind the footer - measured, not guessed. Both stand down only while a
   list is actually open, so the corners and the scrolling are unaffected the rest
   of the time. The calendar gets the same treatment, for the same reason. */
#mhDetail .kd-body:has(.icf.open),
#mhDetail .kd-body:has(.dp.open){overflow:visible}
#mhDetail .kd-box:has(.icf.open),
#mhDetail .kd-box:has(.dp.open){overflow:visible}

/* AND IT MUST NOT BE PAINTED OVER EITHER. Un-clipping was only half of it: the
   footer comes LATER in the DOM, so with no z-index anywhere it still painted on
   top and swallowed the last option - elementFromPoint over "Not needed" returned
   .kd-foot, not the option. Proven that way rather than by eye, because the option
   was VISIBLE the whole time; it simply was not clickable. The open field is raised
   above the footer, and only while it is open. */
#mhDetail .kd-box .field:has(.icf.open),
#mhDetail .kd-box .field:has(.dp.open){position:relative; z-index:90}

/* THE PHANTOM SCROLLBAR, AND WHY THE OBVIOUS FIX WAS WRONG.
   The dialog showed a scrollbar for three fields that fit exactly - measured:
   content 365px in a 365px body. The overflow was invisible: MhDatePicker keeps
   its calendar in the DOM while closed as position:absolute, opacity:0, but
   display:block and visibility:visible - 337px of real layout hanging below the
   field. A scroll container counts that. (Same law as the QR card's decorative
   watermark: in a scroll container, absolute overflow becomes scrollable.)

   FIRST ATTEMPT WAS `display:none` ON THE CLOSED CALENDAR, AND IT BROKE THE
   PICKER. The scrollbar went, but the calendar then opened at y=929 in a 914px
   viewport - entirely off screen - because it is positioned from a measurement
   taken while it is still closed, and a display:none element measures as nothing.
   Caught by measuring its rect; it would have looked like the date field simply
   stopped working.

   So the SCROLLER is removed instead of the content. The body does not need to
   scroll: its content is 365px and the dialog has 866px available, and even the
   Renewed state only adds one more field. The box keeps max-height:100%, so this
   is bounded, not open-ended. */
#mhDetail .kd-body{overflow:visible}

/* SHORT SCREENS - A LAPTOP THAT IS NOT TALL (owner, 18 Sep 2026: "make sure the screen tall
   compatibility must work with none graphical laptops too ... the roller must open and they
   can navigate up and down").

   MEASURED on a 1366x640 screen with the school popup open: the content needed 966px, the box
   was clipped at 592px, and Save and Cancel sat at y=888 - off the screen, with NOTHING able to
   scroll. The dialog was unusable, not merely cramped: the box is max-height:100% with
   overflow:hidden, and the body deliberately does not scroll (the phantom-scrollbar fix above).

   So on a short screen the BACKDROP becomes the scroller instead: the box is allowed its full
   height and `margin:auto` keeps it centred while it fits, then the page scrolls to reach the
   rest. Nothing changes on a tall screen - this only applies under 900px of height - so the
   phantom-scrollbar fix and the date picker keep behaving exactly as they were measured to. */
@media (max-height: 900px){
  #mhDetail .kd-modal{align-items:flex-start; overflow:auto; overscroll-behavior:contain}
  #mhDetail .kd-box{max-height:none; margin:auto}
}

/* =============================================================================
   ONE FIELD VOCABULARY IN THIS DIALOG.  4 September 2026.

   His words: "mix field designs are there I don't like that". He was right. The
   first version had three different field looks in one small box - a bespoke
   glass shell on the status, the app's grey inset on the date picker, and a
   third treatment on the notes - and the status was a NATIVE <select>, so
   opening it dropped an unstyled browser list into a designed dialog.

   The markup now uses the app's own kit throughout (.field + label + .icf, and
   the real type-to-search dropdown instead of a select). The Mint skin is
   applied HERE, once, to .icf / .dp-field / .selpop TOGETHER - so the three
   cannot drift apart again. One recipe, three controls, identical result:

       rest   translucent white, hairline, soft drop shadow, NO inset
       hover  a shade more solid
       focus  near-solid with the mint ring

   .dp-field is included by name because MhDatePicker draws its own shell rather
   than sitting inside an .icf - it is the same tokens (--f-rest-bg etc), which
   is exactly why it looked like a different field once .icf was re-skinned.
   ============================================================================= */
#mhDetail .kd-box .field > label{
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7A8A84;
}
#mhDetail .kd-box .field > label .req{color:#C0392F}
#mhDetail .kd-box .fld-note{margin:0; font-size:11.5px; font-weight:600; color:var(--ink-4)}

/* THE BORDER IS THE MATTHEW HOUSE PINE (his call, 4 Sep 2026), at the opacity he
   approved. #2F6B57 is the green the Mint Mist mock is already built on - the filled
   tile dot, the completion bar and this dialog's own focus ring are all that colour -
   so the resting border joins them instead of introducing a second green.

   THE BORDER HAS TO BE VISIBLE, OR IT IS NOT A FIELD. His words: "right now it looks
   like washed ... add a border on the fields that we can recognize it easily".
   He was right and the cause was specific: the border was rgba(255,255,255,.9) -
   white - on a near-white field. It reads on the frosted CARD, where a white
   hairline catches the glass; in a solid dialog it disappears completely and the
   inputs read as floating text with no edge.

   So it is a real hairline in the ink family now, at one weight, on ALL THREE
   controls at once - the same single recipe, which is what "the border must match"
   requires. It deepens on hover and goes brand green on focus, so the three states
   are legible without the field ever shouting. */
#mhDetail .kd-box .icf,
#mhDetail .kd-box .dp .dp-field{
  border-radius:14px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));
  border:1.5px solid rgba(47,107,87,.22);
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
#mhDetail .kd-box .icf:hover:not(:focus-within),
#mhDetail .kd-box .dp:not(.open) .dp-field:hover{
  background:rgba(var(--tg-rgb,255,255,255),.8); border-color:rgba(47,107,87,.38);
}
#mhDetail .kd-box .icf:focus-within,
#mhDetail .kd-box .icf.open,
#mhDetail .kd-box .dp.open .dp-field{
  background:rgb(var(--tg-rgb,255,255,255)); border-color:rgba(47,107,87,.75);
  box-shadow:0 0 0 3px rgba(47,107,87,.14), 0 10px 24px -16px rgba(30,55,48,.45);
}

/* the dropdown LIST, so the open state belongs to the dialog too - this is the
   part a native select could never give us */
#mhDetail .kd-box .selpop{
  border-radius:14px;
  background:color-mix(in srgb, rgb(var(--tg-rgb,255,255,255)) 92%, var(--bg-canvas));
  border:1.5px solid rgba(47,107,87,.22);
  box-shadow:0 20px 46px -22px rgba(20,40,34,.5);
}
#mhDetail .kd-box .sel-opt{border-radius:10px}
#mhDetail .kd-box .sel-opt:hover{background:rgba(47,107,87,.09)}
#mhDetail .kd-box .sel-opt.on{background:rgba(47,107,87,.14); color:var(--brand-700)}

body.dark #mhDetail .kd-box .field > label{color:#8C9AA5}
body.dark #mhDetail .kd-box .icf,
body.dark #mhDetail .kd-box .dp .dp-field{
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); border-color:rgba(95,207,164,.30);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark #mhDetail .kd-box .icf:hover:not(:focus-within),
body.dark #mhDetail .kd-box .dp:not(.open) .dp-field:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.09*var(--tg-k,1))); border-color:rgba(95,207,164,.44);
}
body.dark #mhDetail .kd-box .icf:focus-within,
body.dark #mhDetail .kd-box .icf.open,
body.dark #mhDetail .kd-box .dp.open .dp-field{
  background:rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1))); border-color:rgba(95,207,164,.45);
  box-shadow:0 0 0 3px rgba(95,207,164,.16), 0 10px 24px -16px rgba(0,0,0,.6);
}
body.dark #mhDetail .kd-box .selpop{
  background:color-mix(in srgb, #223039 94%, #000); border-color:rgba(95,207,164,.30);
}
#mhDetail .kd-err{
  padding:10px 12px; border-radius:12px; font-size:12.5px; font-weight:700;
  background:var(--danger-bg); color:var(--danger);
}
#mhDetail .kd-foot{
  display:flex; justify-content:flex-end; gap:10px; padding:15px 22px 18px;
  border-top:1px solid rgba(30,55,48,.1);
}

body.dark #mhDetail .kd-box{
  background:color-mix(in srgb, #223039 88%, var(--bg-canvas));
  border-color:rgba(180,210,235,.16);
}
body.dark #mhDetail .kd-head,
body.dark #mhDetail .kd-foot{border-color:rgba(180,210,235,.12)}
body.dark #mhDetail .kd-head h3{color:#B7D6C8}
body.dark #mhDetail .kd-icf{
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark #mhDetail .kd-icf:hover:not(:focus-within){background:rgba(var(--tg-rgb,255,255,255),calc(.09*var(--tg-k,1)))}
body.dark #mhDetail .kd-icf:focus-within{
  background:rgba(var(--tg-rgb,255,255,255),calc(.13*var(--tg-k,1))); border-color:rgba(95,207,164,.45);
  box-shadow:0 0 0 3px rgba(95,207,164,.16), 0 10px 24px -16px rgba(0,0,0,.6);
}
body.dark #mhDetail .kd-fld > label{color:#8C9AA5}

/* =============================================================================
   A PROGRAM ROW WEARS THE FIELD TILE.  His call, 5 September 2026.

   "when a program is active that white background must be there and when a
   program is completed or suspended or other status must be grayed like Not Set
   background with those border styles ... check it's US Arrival it has a green
   light on but when nothing set grayed."

   So the enrolment list borrows the tile's EXACT recipe rather than a lookalike:
   live = rgba(255,255,255,.72) + the white hairline + the soft drop shadow and a
   solid pine dot; not live = rgba(255,255,255,.4), DASHED, no shadow, hollow dot.
   The same two states the field grid already teaches, so "grey and dashed means
   nothing live here" means one thing across the whole record.

   THE DOT SITS AFTER THE NAME, NOT AT THE LEFT EDGE like .mint-w::before. The
   left of this row is the programme avatar, and a second marker beside it would
   read as a bullet on the avatar rather than as a status light.

   SCOPED TO .mint-prow, NOT .cl-prow. Three lists share .cl-prow - the two
   enrolment lists and the CONSENT list on its own tab. He asked for Programs &
   Enrolments and said the rest comes "one by one", so consent is untouched.
   ============================================================================= */
#mhDetail .pd-card.mint .mint-prow,
#hhDetail .pd-card.mint .mint-prow,
#view-settings .pd-card.mint .mint-prow,
#cnPop .pd-card.mint .mint-prow,
#view-help .pd-card.mint .mint-prow {
  padding:12px 16px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
#mhDetail .pd-card.mint .mint-prow + .mint-prow,
#hhDetail .pd-card.mint .mint-prow + .mint-prow,
#view-settings .pd-card.mint .mint-prow + .mint-prow,
#cnPop .pd-card.mint .mint-prow + .mint-prow,
#view-help .pd-card.mint .mint-prow + .mint-prow {margin-top:11px}

/* NOT LIVE - completed, suspended, dropped, pending, waitlisted, on hold,
   transferred, withdrawn. */
#mhDetail .pd-card.mint .mint-prow.off,
#hhDetail .pd-card.mint .mint-prow.off,
#view-settings .pd-card.mint .mint-prow.off,
#cnPop .pd-card.mint .mint-prow.off,
#view-help .pd-card.mint .mint-prow.off {
  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;
}

/* THE HOVER LIFT IS FOR BOTH STATES, and it is declared AFTER .off on purpose.
   His correction, 5 Sep: "if you check both Active and Not Set they both have
   same effect so add the effect". He is right and I was wrong - I had killed the
   lift on a completed row, reasoning that a lift means "current". The tiles do
   not work that way: .mint-w:hover carries no state test, so an empty "Not set"
   tile lifts exactly like a filled one. The hover is a POINTER response - "you
   are on this row" - not a status.

   ORDER MATTERS HERE. .mint-prow.off and .mint-prow:hover carry identical
   specificity (one id, four classes), so the later rule wins. With :hover above
   .off, the off row's box-shadow:none would beat the lift's shadow and only half
   the effect would land. This is the same order .mint-w already uses. */
#mhDetail .pd-card.mint .mint-prow:hover,
#hhDetail .pd-card.mint .mint-prow:hover,
#view-settings .pd-card.mint .mint-prow:hover,
#cnPop .pd-card.mint .mint-prow:hover,
#view-help .pd-card.mint .mint-prow:hover {transform:translateY(-3px);box-shadow:var(--mint-lift)}

/* the light beside the name - the same 7px dot and 3px halo the tiles use */
#mhDetail .mint-pdot,
#hhDetail .mint-pdot,
#view-settings .mint-pdot,
#cnPop .mint-pdot,
#view-help .mint-pdot {
  display:inline-block;vertical-align:middle;
  width:7px;height:7px;margin-left:9px;border-radius:50%;
  background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.16);
}
#mhDetail .mint-prow.off .mint-pdot,
#hhDetail .mint-prow.off .mint-pdot,
#view-settings .mint-prow.off .mint-pdot,
#cnPop .mint-prow.off .mint-pdot,
#view-help .mint-prow.off .mint-pdot {background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}

body.dark #mhDetail .pd-card.mint .mint-prow,
body.dark #hhDetail .pd-card.mint .mint-prow,
body.dark #view-settings .pd-card.mint .mint-prow,
body.dark #view-help .pd-card.mint .mint-prow {
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark #mhDetail .pd-card.mint .mint-prow.off,
body.dark #hhDetail .pd-card.mint .mint-prow.off,
body.dark #view-settings .pd-card.mint .mint-prow.off,
body.dark #view-help .pd-card.mint .mint-prow.off {
  background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));border-color:rgba(180,210,235,.16);box-shadow:none;
}
body.dark #mhDetail .mint-pdot,
body.dark #hhDetail .mint-pdot,
body.dark #view-settings .mint-pdot,
body.dark #view-help .mint-pdot {background:#5FCFA4;box-shadow:0 0 0 3px rgba(95,207,164,.18)}
body.dark #mhDetail .mint-prow.off .mint-pdot,
body.dark #hhDetail .mint-prow.off .mint-pdot,
body.dark #view-settings .mint-prow.off .mint-pdot,
body.dark #view-help .mint-prow.off .mint-pdot {background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)}

/* A CLICKABLE PROGRAM ROW.  5 September 2026.
   .clk is added only when the row actually has a ProgramID to open, so the pointer
   never promises a destination that is not there. The keyboard focus ring is the
   card's own pine, not the browser default - the row is a div with role=button, and
   a tab stop with no visible focus is a trap for anyone not using a mouse. */
#mhDetail .pd-card.mint .mint-prow.clk,
#hhDetail .pd-card.mint .mint-prow.clk,
#view-settings .pd-card.mint .mint-prow.clk,
#cnPop .pd-card.mint .mint-prow.clk,
#view-help .pd-card.mint .mint-prow.clk {cursor:pointer}
#mhDetail .pd-card.mint .mint-prow.clk:focus-visible,
#hhDetail .pd-card.mint .mint-prow.clk:focus-visible,
#view-settings .pd-card.mint .mint-prow.clk:focus-visible,
#cnPop .pd-card.mint .mint-prow.clk:focus-visible,
#view-help .pd-card.mint .mint-prow.clk:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px rgba(47,107,87,.28), var(--mint-lift);
}
body.dark #mhDetail .pd-card.mint .mint-prow.clk:focus-visible,
body.dark #hhDetail .pd-card.mint .mint-prow.clk:focus-visible,
body.dark #view-settings .pd-card.mint .mint-prow.clk:focus-visible,
body.dark #view-help .pd-card.mint .mint-prow.clk:focus-visible {
  box-shadow:0 0 0 3px rgba(95,207,164,.32), var(--mint-lift);
}

/* THE EARLIER-SUBSIDIES LABEL AND ICON.  5 September 2026.
   .mint-sub is a quiet separator inside a card, NOT a second title: the capsule above
   already names the card, and giving this the same weight would read as two cards
   fighting. It borrows .mint-lb's exact type so it belongs to the same family. */
#mhDetail .pd-card.mint .mint-sub{
  margin:18px 2px 10px;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7A8A84;
}
body.dark #mhDetail .pd-card.mint .mint-sub{color:#8C9AA5}

/* A subsidy has no initials, so its avatar slot carries the card's own home glyph
   instead of two letters. Muted, because every row it appears on has ENDED. */
#mhDetail .pd-card.mint .cl-av.mint-sav,
#hhDetail .pd-card.mint .cl-av.mint-sav,
#view-settings .pd-card.mint .cl-av.mint-sav,
#cnPop .pd-card.mint .cl-av.mint-sav,
#view-help .pd-card.mint .cl-av.mint-sav {
  background:rgba(30,55,48,.07);
  color:#5E7268;
  display:grid;place-items:center;
}
#mhDetail .pd-card.mint .cl-av.mint-sav svg,
#hhDetail .pd-card.mint .cl-av.mint-sav svg,
#view-settings .pd-card.mint .cl-av.mint-sav svg,
#cnPop .pd-card.mint .cl-av.mint-sav svg,
#view-help .pd-card.mint .cl-av.mint-sav svg {
  width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
body.dark #mhDetail .pd-card.mint .cl-av.mint-sav,
body.dark #hhDetail .pd-card.mint .cl-av.mint-sav,
body.dark #view-settings .pd-card.mint .cl-av.mint-sav,
body.dark #view-help .pd-card.mint .cl-av.mint-sav {background:rgba(var(--tg-rgb,255,255,255),calc(.07*var(--tg-k,1)));color:#93A79D}

/* =============================================================================
   A LIST INSIDE A CARD SCROLLS. IT DOES NOT PUSH THE CARD TALLER.
   His call, 5 September 2026:

     "on the KEY DATES and DEADLINES if multiple documents are expired so it
      shouldn't expand the KPI cards must open a vertical ruler and staff can go
      down and up got the theory? if it expand down the design will broke."

   He is describing a real limit, not a preference. These cards sit in a 2-up grid
   with `grid-auto-rows:1fr`, so one card growing drags its NEIGHBOUR to the same
   height and leaves it half empty - the taller the list, the worse the pair looks.
   A capped body with its own scrollbar keeps the grid honest however many rows
   arrive.

   WHICH LISTS, AND WHY ONLY THESE. The two that are unbounded AND time-critical:
   Key dates and deadlines and Journey (both .trail), and the Document Status list
   (.cl-dslist). Notes and the enrolment lists are deliberately NOT capped - a
   comment stream is read by scrolling the pane, and nesting a second scrollbar
   inside it makes both worse.

   THE CAP IS IN `em`, not px, so it tracks the row height rather than a guess, and
   it is a MAX - a card with two rows is still two rows tall and nothing changes for
   the common case. Only a long list is asked to scroll.

   `scrollbar-gutter:stable` reserves the track, so a card does not shift sideways by
   the scrollbar's width at the moment it becomes scrollable.
   ============================================================================= */
#mhDetail .pd-card.mint .trail,
#hhDetail .pd-card.mint .trail,
#mhDetail .pd-card.mint .cl-dslist,
#view-settings .pd-card.mint .trail,
#cnPop .pd-card.mint .trail,
#view-help .pd-card.mint .trail {
  max-height:22em;
  overflow-y:auto;
  scrollbar-gutter:stable;

  /* THE PADDING IS THE HOVER FIX, AND IT IS NOT COSMETIC.  5 September 2026.

     He reported the Journey hover as "not smooth ... it looks like broken", and it
     was MY scroller doing it. Measured: the container was 87px tall against a row
     of 87px - ZERO gap above and below. So on hover the translateY(-3px) had its
     top 3px SLICED OFF by the clip box, and the drop shadow (which falls about 15px
     BELOW the row) was clipped away completely. The row appeared to jump and lose
     its edge instead of lifting.

     An overflow container clips its own children. Any child that lifts or casts a
     shadow needs that distance as PADDING inside the scroller, or the effect is
     drawn and immediately cut off:
       top    4px  - covers the 3px lift
       bottom 26px - covers the softened shadow, which now reaches ~19px down
       sides  4px  - lateral blur, and keeps a tile off the scrollbar

     max-height went 20.5em -> 22em to give the padding back, so the same number of
     rows still fits before it scrolls.

     WORTH REMEMBERING: `overflow-y:auto` alone also forces overflow-x from `visible`
     to `auto`, so the sides clip too even though only the vertical axis was asked
     for. That is why the horizontal padding is here as well. */
  padding:4px 4px 26px;
}

/* The scrollbar itself, in the card's own material rather than the browser default -
   a grey system bar on frosted glass is the same "hole in the card" the 5 Sep pass
   removed everywhere else. */
#mhDetail .pd-card.mint .trail::-webkit-scrollbar,
#hhDetail .pd-card.mint .trail::-webkit-scrollbar,
#mhDetail .pd-card.mint .cl-dslist::-webkit-scrollbar,
#view-settings .pd-card.mint .trail::-webkit-scrollbar,
#cnPop .pd-card.mint .trail::-webkit-scrollbar,
#view-help .pd-card.mint .trail::-webkit-scrollbar {width:8px}
#mhDetail .pd-card.mint .trail::-webkit-scrollbar-track,
#hhDetail .pd-card.mint .trail::-webkit-scrollbar-track,
#mhDetail .pd-card.mint .cl-dslist::-webkit-scrollbar-track,
#view-settings .pd-card.mint .trail::-webkit-scrollbar-track,
#cnPop .pd-card.mint .trail::-webkit-scrollbar-track,
#view-help .pd-card.mint .trail::-webkit-scrollbar-track {background:transparent}
#mhDetail .pd-card.mint .trail::-webkit-scrollbar-thumb,
#hhDetail .pd-card.mint .trail::-webkit-scrollbar-thumb,
#mhDetail .pd-card.mint .cl-dslist::-webkit-scrollbar-thumb,
#view-settings .pd-card.mint .trail::-webkit-scrollbar-thumb,
#cnPop .pd-card.mint .trail::-webkit-scrollbar-thumb,
#view-help .pd-card.mint .trail::-webkit-scrollbar-thumb {
  background:rgba(30,55,48,.18);border-radius:99px;
  border:2px solid transparent;background-clip:content-box;
}
#mhDetail .pd-card.mint .trail:hover::-webkit-scrollbar-thumb,
#hhDetail .pd-card.mint .trail:hover::-webkit-scrollbar-thumb,
#mhDetail .pd-card.mint .cl-dslist:hover::-webkit-scrollbar-thumb,
#view-settings .pd-card.mint .trail:hover::-webkit-scrollbar-thumb,
#cnPop .pd-card.mint .trail:hover::-webkit-scrollbar-thumb,
#view-help .pd-card.mint .trail:hover::-webkit-scrollbar-thumb {background:rgba(30,55,48,.3);background-clip:content-box}
#mhDetail .pd-card.mint .trail,
#hhDetail .pd-card.mint .trail,
#mhDetail .pd-card.mint .cl-dslist,
#view-settings .pd-card.mint .trail,
#cnPop .pd-card.mint .trail,
#view-help .pd-card.mint .trail {scrollbar-width:thin;scrollbar-color:rgba(30,55,48,.25) transparent}
body.dark #mhDetail .pd-card.mint .trail::-webkit-scrollbar-thumb,
body.dark #hhDetail .pd-card.mint .trail::-webkit-scrollbar-thumb,
body.dark #mhDetail .pd-card.mint .cl-dslist::-webkit-scrollbar-thumb,
body.dark #view-settings .pd-card.mint .trail::-webkit-scrollbar-thumb,
body.dark #view-help .pd-card.mint .trail::-webkit-scrollbar-thumb {background:rgba(180,210,235,.22);background-clip:content-box}
body.dark #mhDetail .pd-card.mint .trail,
body.dark #hhDetail .pd-card.mint .trail,
body.dark #mhDetail .pd-card.mint .cl-dslist,
body.dark #view-settings .pd-card.mint .trail,
body.dark #view-help .pd-card.mint .trail {scrollbar-color:rgba(180,210,235,.28) transparent}

/* =============================================================================
   A POSTED COMMENT WEARS THE TILE.  His call, 5 September 2026: "on the NOTES
   section when you added a note it must get that white background and the effect
   too." Same recipe as a live programme row and a current subsidy - white, the
   hairline, and the lift on hover - so a comment reads as an object on the card
   rather than text loose on the glass.

   NO .off STATE HERE: a comment is never "not set". It exists or it does not.
   ============================================================================= */
#mhDetail .pd-card.mint .cl-note{
  padding:14px 16px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
  transition:transform .18s ease,box-shadow .18s ease,background var(--t);
}
#mhDetail .pd-card.mint .cl-note + .cl-note{margin-top:11px}
#mhDetail .pd-card.mint .cl-note:hover{
  background:rgba(var(--tg-rgb,255,255,255),.92);
  transform:translateY(-3px);
  box-shadow:var(--mint-lift);
}
body.dark #mhDetail .pd-card.mint .cl-note{
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark #mhDetail .pd-card.mint .cl-note:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));
  box-shadow:var(--mint-lift);
}

/* PROSE IN A CARD WEARS THE TILE TOO.  5 September 2026.
   Language notes was the last thing on the record still sitting bare on the glass - a
   paragraph of text with nothing under it, next to a Notes tab where every comment is a
   white tile. He asked to see Language notes populated; populated is exactly when the
   difference shows. Same recipe, no hover: a note is not clickable, so lifting it would
   promise something. */
#mhDetail .pd-card.mint .pd-desc,
#hhDetail .pd-card.mint .pd-desc,
#view-settings .pd-card.mint .pd-desc,
#cnPop .pd-card.mint .pd-desc,
#view-help .pd-card.mint .pd-desc {
  margin:0;padding:14px 16px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
body.dark #mhDetail .pd-card.mint .pd-desc,
body.dark #hhDetail .pd-card.mint .pd-desc,
body.dark #view-settings .pd-card.mint .pd-desc,
body.dark #view-help .pd-card.mint .pd-desc {
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}

/* =============================================================================
   A TIMELINE EVENT WEARS THE TILE TOO.  His call, 5 September 2026:
   "on the HISTORY section the JOURNEY AND ADDRESS HISTORY KPI card I am seeing the
   Intake dosn't have the white background so it means it's not matching our design
   so apply the white background with it's effect."

   It was the last row type on the record still sitting bare on the glass.

   THE SPINE HAD TO GO, AND THAT IS THE ONE REAL CHANGE HERE. `.cl-tl` is not a
   plain row: it draws a 2px border-left as the connecting line between events, and
   hangs its dot OUTSIDE the row at left:-7px so the dot sits ON that line. Put a
   tile behind that and the dot floats off the left edge of the card while the spine
   becomes a stray rule down the side of a white box. So the dot moves INSIDE and the
   connecting line is dropped: each event becomes an object, exactly like a programme
   row and a subsidy row.

   NOTHING MEANINGFUL IS LOST. The dot still carries every state it did - pine for
   the newest, muted for older, orange for a warning, and the kd-flash pulse on an
   expiring document. The date, title and subtitle are untouched. What goes is a
   decorative rule, and it was already invisible on the last row (border-left-color
   was transparent there).

   BOTH TIMELINES, NOT JUST THE ONE HE POINTED AT. Journey and address history and
   Key dates and deadlines are the same element in the same kind of card. Tiling one
   and leaving the other would make Key Dates the odd card out - which is the exact
   complaint he raised, one card over.
   ============================================================================= */
#mhDetail .pd-card.mint .cl-tl{
  margin-left:0;
  border-left:none;
  padding:12px 16px 12px 34px;
  border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
  transition:transform .18s ease,box-shadow .18s ease,background var(--t);
}
#mhDetail .pd-card.mint .cl-tl + .cl-tl{margin-top:11px}
#mhDetail .pd-card.mint .cl-tl:last-child{padding-bottom:12px}
#mhDetail .pd-card.mint .cl-tl:hover{
  background:rgba(var(--tg-rgb,255,255,255),.92);
  transform:translateY(-3px);
  box-shadow:var(--mint-lift);
}
/* the dot comes in off the edge and sits with the date it belongs to */
#mhDetail .pd-card.mint .cl-tldot{left:14px;top:16px}

body.dark #mhDetail .pd-card.mint .cl-tl{
  background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);
  box-shadow:0 6px 16px -12px rgba(0,0,0,.55);
}
body.dark #mhDetail .pd-card.mint .cl-tl:hover{
  background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));
  box-shadow:var(--mint-lift);
}

/* =============================================================================
   THE SMALL CHROME JOINS THE MINT PALETTE.  His call, 6 September 2026:
   "you see the Consent Form Icon and Collected background with add document
   background? they are not matching with our new KPI card new design ... check
   other KPI cards if you do have similar thing you can do that too."

   HE IS POINTING AT A ROOT CAUSE, not three one-off greys. Swept every element
   inside every .pd-card.mint on all eight tabs and read the computed background;
   what came back was one shared mistake wearing different class names.

   `--brand-tint` is `rgba(46,74,67,.12)` - a dark SLATE-pine. At 12% over a white
   tile it has no chroma left, so it renders as GREY. It was correct on the old
   opaque #DFE4EA panels, where it read as a gentle brand wash. On frosted glass it
   is simply a grey smudge, and every piece of small chrome that asked for it -
   the document icon bubble, the "Collected" pill, the "Completed" chip, the file
   size, the row buttons - inherited the same problem.

   THE MINT PINE IS rgba(47,107,87,...), a real green, and it is what the dot, the
   meter and the focus ring already use. So inside a Mint card these switch onto it,
   with a hairline instead of a fill-only block. Everything OUTSIDE a Mint card is
   untouched: --brand-tint itself is not redefined, so the Program, Household,
   Student and Subsidy records keep the exact chrome they have today.

   TWO STATES, THE SAME TWO AS EVERYTHING ELSE ON THIS RECORD:
     something IS there   -> pine tint + pine hairline
     nothing is there yet -> white translucent + dashed, the "Not set" recipe
   ============================================================================= */

/* --- the "yes, we have this" pill: Collected, Active, On file ---------------- */
#mhDetail .pd-card.mint .chip,
#hhDetail .pd-card.mint .chip,
#hhDetail .pd-card.mint .chip,
#mhDetail .pd-card.mint .cl-pillst.ps-ok,
#view-settings .pd-card.mint .chip,
#cnPop .pd-card.mint .chip,
#view-settings .pd-card.mint .chip,
#cnPop .pd-card.mint .chip,
#view-help .pd-card.mint .chip,
#view-help .pd-card.mint .chip {
  background:rgba(47,107,87,.13);
  color:#2A5F4D;
  box-shadow:inset 0 0 0 1px rgba(47,107,87,.22);
}

/* --- the "no, not yet / finished" pill: Completed, Pending, Not collected ----
   A grey pill was flat #DFE4EA - the one colour this whole pass exists to remove.
   It takes the same white-translucent treatment a "Not set" tile does, so "quiet"
   looks the same everywhere on the record. */
#mhDetail .pd-card.mint .chip.grey,
#hhDetail .pd-card.mint .chip.grey,
#hhDetail .pd-card.mint .chip.grey,
#mhDetail .pd-card.mint .cl-pillst.ps-missing,
#view-settings .pd-card.mint .chip.grey,
#cnPop .pd-card.mint .chip.grey,
#view-settings .pd-card.mint .chip.grey,
#cnPop .pd-card.mint .chip.grey,
#view-help .pd-card.mint .chip.grey,
#view-help .pd-card.mint .chip.grey {
  background:rgba(var(--tg-rgb,255,255,255),calc(.62*var(--tg-k,1)));
  color:#6E7F78;
  box-shadow:inset 0 0 0 1px rgba(30,55,48,.16);
}

/* --- the document tile's icon bubble ---------------------------------------- */
#mhDetail .pd-card.mint .cl-doc .ic{
  background:rgba(47,107,87,.12);
  color:#2A5F4D;
  box-shadow:inset 0 0 0 1px rgba(47,107,87,.18);
}

/* --- the file-size badge and the row buttons -------------------------------- */
#mhDetail .pd-card.mint .cl-doc .file-size{
  background:rgba(var(--tg-rgb,255,255,255),calc(.66*var(--tg-k,1)));
  box-shadow:inset 0 0 0 1px rgba(30,55,48,.12);
}
#mhDetail .pd-card.mint .cl-dbtn{
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(30,55,48,.10);
}
#mhDetail .pd-card.mint .cl-dbtn:hover{background:rgba(47,107,87,.13);border-color:rgba(47,107,87,.3)}
#mhDetail .pd-card.mint .cl-dbtn.danger:hover{background:rgba(192,71,63,.13);border-color:rgba(192,71,63,.32)}

/* --- the document tile itself: the white hairline, not a grey rule ----------- */
#mhDetail .pd-card.mint .cl-doc{border-color:rgba(255,255,255,.85)}
#mhDetail .pd-card.mint .cl-doc:hover{box-shadow:var(--mint-lift);transform:translateY(-3px)}

/* --- ADD DOCUMENT IS AN EMPTY SLOT, so it wears the "Not set" recipe ---------
   This is the one that makes the tab read correctly: the add tile is literally a
   place where nothing is yet, which is exactly what a dashed, faded tile means
   everywhere else on this record. It was a plain dashed box with a grey circle -
   the same shape, saying it in a different language. No lift at rest, because the
   dashed state never lifts; the pine only arrives on hover, when it becomes an
   action you are about to take. */
#mhDetail .pd-card.mint .cl-docadd{
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  border-color:rgba(30,55,48,.18);
  box-shadow:none;
}
#mhDetail .pd-card.mint .cl-docadd:hover{
  background:rgba(47,107,87,.10);
  border-color:rgba(47,107,87,.35);
  transform:none;
}
#mhDetail .pd-card.mint .cl-docadd .plus{
  background:rgba(47,107,87,.14);
  box-shadow:inset 0 0 0 1px rgba(47,107,87,.22);
}

/* --- dark ------------------------------------------------------------------- */
body.dark #mhDetail .pd-card.mint .chip,
body.dark #hhDetail .pd-card.mint .chip,
body.dark #hhDetail .pd-card.mint .chip,
body.dark #mhDetail .pd-card.mint .cl-pillst.ps-ok,
body.dark #mhDetail .pd-card.mint .cl-doc .ic,
body.dark #mhDetail .pd-card.mint .cl-docadd .plus,
body.dark #view-settings .pd-card.mint .chip,
body.dark #view-settings .pd-card.mint .chip,
body.dark #view-help .pd-card.mint .chip,
body.dark #view-help .pd-card.mint .chip {
  background:rgba(95,207,164,.16);color:#8FD9BC;box-shadow:inset 0 0 0 1px rgba(95,207,164,.24);
}
body.dark #mhDetail .pd-card.mint .chip.grey,
body.dark #hhDetail .pd-card.mint .chip.grey,
body.dark #hhDetail .pd-card.mint .chip.grey,
body.dark #mhDetail .pd-card.mint .cl-pillst.ps-missing,
body.dark #mhDetail .pd-card.mint .cl-doc .file-size,
body.dark #mhDetail .pd-card.mint .cl-dbtn,
body.dark #view-settings .pd-card.mint .chip.grey,
body.dark #view-settings .pd-card.mint .chip.grey,
body.dark #view-help .pd-card.mint .chip.grey,
body.dark #view-help .pd-card.mint .chip.grey {
  background:rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1)));color:#9FB2AA;box-shadow:inset 0 0 0 1px rgba(180,210,235,.16);
}
body.dark #mhDetail .pd-card.mint .cl-doc{border-color:rgba(180,210,235,.14)}
body.dark #mhDetail .pd-card.mint .cl-docadd{
  background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));border-color:rgba(180,210,235,.16);box-shadow:none;
}
body.dark #mhDetail .pd-card.mint .cl-docadd:hover{background:rgba(95,207,164,.10);border-color:rgba(95,207,164,.35)}

/* CHILDREN & SCHOOLS -> the child's Schools card (18 Sep 2026): the card flashes once so the eye lands on it,
   the same brand ring the household record uses for a deep-linked tile (hhTileFlash). */
#mhDetail .pd-card.card-flash{animation:cdCardFlash 1.4s ease}
@keyframes cdCardFlash{0%{box-shadow:0 0 0 0 rgba(47,107,87,0)}25%{box-shadow:0 0 0 5px rgba(47,107,87,.30)}100%{box-shadow:0 0 0 0 rgba(47,107,87,0)}}
@media (prefers-reduced-motion:reduce){#mhDetail .pd-card.card-flash{animation:none;box-shadow:0 0 0 4px rgba(47,107,87,.26)}}

/* THE SCHOOL PICKER (18 Sep 2026) - each school on two lines: the name, then city - type - grades, so two schools
   with the same name are told apart at a glance. The list scrolls inside itself and loads 50 more near its end. */
#mhDetail .sch-pop{max-height:340px;overflow:auto}
#mhDetail .sel-opt.sch-opt{padding:9px 14px}
#mhDetail .sch-opt .sch-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:1px}
#mhDetail .sch-opt .sch-nm{font-size:14px;font-weight:700;line-height:1.3;white-space:normal;text-align:left}
#mhDetail .sch-opt .sch-sub{font-size:11.5px;font-weight:600;color:var(--ink-3, #7a8a93);line-height:1.3;white-space:normal;text-align:left}
#mhDetail .sch-more{font-size:12px;padding:8px 14px}
/* ROOM TO WORK ON A SHORT SCREEN (owner, 18 Sep 2026: "it shouldn't cover all screen from up and
   down and staff can't work"). MEASURED on 1024x576 once the scroll was fixed: the chrome above the
   content - rail strip 90, pane top 91, head 42, tabs 63, footer 85 - left only 225px of record to
   read through. The chrome is only PADDING-heavy, so trimming the padding (nothing is removed or
   hidden) gives back about 90px, and the box may use more of the screen. Tall screens are untouched. */
@media (max-height: 760px){
  #mhDetail.dv-stage.ovr{padding:10px}
  #mhDetail.dv-stage.ovr>.modal{height:calc(98 * var(--mh-vh))}
  #mhDetail .rail-strip{padding:9px 22px}
  #mhDetail .pane-top{padding:14px 36px 0}
  #mhDetail .pane-head{padding:10px 36px 10px}
  #mhDetail .m-foot{padding:10px 36px}
}