/* =============================================================================
   Matthew House - LAND DESIGN Pass 1: "Frosted Sage" Home dashboard.
   Ported verbatim from the handoff (_handoff/dashboard-sections/sections.css +
   the .st--glass pill from status.css), with two repo-driven adaptations:

   1. TOKENS: the handoff imports ../colors_and_type.css (not shipped). Instead of
      raw values, DESIGN's token contract is resolved on the .mh-fs container,
      aliased to our real brand tokens from mh-theme.css (single source). Only the
      mid-grey fg-2/3/4 use fixed values (DESIGN handles dark explicitly below).

   2. SCOPING + DARK: every selector is prefixed `.mh-app .mh-fs` so it cleanly
      wins over the legacy `.mh-app .kpi/.kpis/.rem-*` dashboard rules without
      deleting any shared CSS. DESIGN's `.theme-sage` (light) lives on the
      container; DESIGN's `.theme-sage-dark` rules are re-keyed to `body.dark`
      because our dark toggle (MHtoggleDark) is CSS-only and never re-renders
      Blazor - so the container keeps a stable class and the cascade does the work.

   UI ONLY. No schema, SP, or query changes. Loaded after mh-theme.css.
   ============================================================================= */

/* ---------- DESIGN token contract, scoped to the Home glass frame ---------- */
.mh-fs {
  --font-sans:  var(--mh-font-body);
  --font-mono:  var(--mono);
  --font-serif: var(--mh-font-serif);
  --fg-1: var(--mh-ink);     /* strongest text; flips dark-safe via the ink token */
  --fg-2: #3E4B4F;           /* body strong  (dark handled by explicit rules below) */
  --fg-3: #6B787C;           /* secondary text */
  --fg-4: #97A3A5;           /* faint labels */
  --slate-900: var(--mh-slate);
  --sage-600:  var(--mh-green);
  --border:    var(--mh-line);
  --cream-soft:var(--mh-cream-2);
  --success-bg: rgba(78,124,114,.13);  --success-ink: var(--mh-green-d);
  --danger-bg:  rgba(176,70,60,.13);   --danger-ink:  var(--mh-danger);
  --shadow-sm: var(--mh-shadow-sm);
  --shadow-md: var(--mh-shadow);
}

/* ---------- greeting line (sits above the glass frame) ----------
   Whole line bold; the dynamic username is brand pine->green gradient text.
   Dark mode lightens the gradient toward the dark link-green so the name stays
   readable on the slate background. */
.mh-app .greet h1 { font-weight: 700; }
.mh-app .greet-name {
  background: linear-gradient(120deg, var(--mh-green), #2E4A43);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 700;
}
body.dark .mh-app .greet-name {
  background: linear-gradient(120deg, #8FC7A4, var(--mh-green));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---------- icon engine duotone styling ---------- */
.mh-app .mh-fs .mh-ico .duo { fill: currentColor; opacity: .16; }
.mh-app .mh-fs .mh-ico .ln  { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* ============================================================
   FRAME  (the frosted-sage backdrop the glass cards frost over)
   ============================================================ */
.mh-app .mh-fs {
  position: relative;
  border-radius: 26px;
  padding: 26px;
  overflow: hidden;
  font-family: var(--font-sans);
  isolation: isolate;
}
.mh-app .mh-fs * { box-sizing: border-box; }

/* ---- accent vars per KPI ---- */
.mh-app .mh-fs .kpi[data-accent="sage"]  { --a: #5E8157; --a2: #3D543A; }
.mh-app .mh-fs .kpi[data-accent="slate"] { --a: #56646A; --a2: #2A3338; }
.mh-app .mh-fs .kpi[data-accent="terra"] { --a: #C17A52; --a2: #9C5A36; }
.mh-app .mh-fs .kpi[data-accent="plum"]  { --a: #8E6E89; --a2: #6B4F67; }
/* ---- reminder tone vars ---- */
.mh-app .mh-fs .rem-row[data-tone="info"]   { --t: #3A6EA5; --tbg: #E5EDF6; }
.mh-app .mh-fs .rem-row[data-tone="warn"]   { --t: #BE842A; --tbg: #F7EDD8; }
.mh-app .mh-fs .rem-row[data-tone="danger"] { --t: #C0473F; --tbg: #F7E3E1; }

/* ============================================================
   KPI ROW
   ============================================================ */
.mh-app .mh-fs .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.mh-app .mh-fs .kpi {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 150px;
  padding: 18px;
  border-radius: 20px;
  cursor: pointer;
  outline: none;
  overflow: visible;
  /* ==== Ported verbatim from the source dashboard's .stat card (views.css): entrance
     fade + interactive transitions. --a is this card's accent (the .stat used --c). ==== */
  animation: kpiFade .34s cubic-bezier(.2,.7,.25,1);
  transition: transform .2s cubic-bezier(.2,.7,.25,1), box-shadow .2s cubic-bezier(.2,.7,.25,1), border-color .2s cubic-bezier(.2,.7,.25,1);
}
@keyframes kpiFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
/* Hover / focus: lift + shadow-pop + accent top-stripe (source: .stat:hover + .stat::after).
   The stripe rides on the hover box-shadow so it does not fight the glass-gloss ::after. */
.mh-app .mh-fs .kpi:hover, .mh-app .mh-fs .kpi:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(30,45,65,.22), inset 0 3px 0 0 var(--a);
  border-color: color-mix(in srgb, var(--a) 55%, transparent);
}
.mh-app .mh-fs .kpi:active { transform: translateY(-1px); }
/* Icon pop + value tint (source: .stat:hover .sic / .stat:hover .val). */
.mh-app .mh-fs .kpi-ico { transition: transform .2s cubic-bezier(.2,.7,.25,1), box-shadow .2s cubic-bezier(.2,.7,.25,1); }
.mh-app .mh-fs .kpi:hover .kpi-ico { transform: scale(1.07) rotate(-3deg); box-shadow: 0 8px 18px color-mix(in srgb, var(--a) 45%, transparent); }
.mh-app .mh-fs .kpi-num { transition: color .2s; }
.mh-app .mh-fs .kpi:hover .kpi-num { color: var(--a); }
/* THE LABEL NO LONGER YIELDS TO THE CTA (fixed Jul 29 2026).
   The ported source behaviour (.stat .note -> .stat-cta) faded the label out while fading a
   DIFFERENT string in at the same coordinates: measured, .kpi-label sat at 361-381 and
   .kpi-cta at 359-389 - the same band. Two strings cross-fading in one box means that for
   the whole transition BOTH are painted, so "Active Families" and "View all families" were
   superimposed and the card read as garbled text. Reported by the CEO on all four cards.
   The fix is to stop swapping text at all: the label is permanent, and the hover affordance
   is the circular arrow alone, which is not text and overlaps nothing. */
.mh-app .mh-fs .kpi-label { padding-right: 38px; }   /* never run under the hover arrow */
/* Call-to-action: now the arrow ONLY. Its wording stays in the DOM for assistive tech
   (.kpi-cta-t) but is never painted, so it can no longer collide with the label. */
.mh-app .mh-fs .kpi-cta {
  position: absolute; right: 18px; bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: var(--a);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .2s cubic-bezier(.2,.7,.25,1), transform .2s cubic-bezier(.2,.7,.25,1);
}
/* Visually hidden, still announced (the standard clip-path sr-only pattern). */
.mh-app .mh-fs .kpi-cta-t {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mh-app .mh-fs .kpi:hover .kpi-cta, .mh-app .mh-fs .kpi:focus-visible .kpi-cta { opacity: 1; transform: none; }
.mh-app .mh-fs .kpi-go {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--a); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--a) 45%, transparent);
}
.mh-app .mh-fs .kpi-go svg { width: 16px; height: 16px; }
.mh-app .mh-fs .kpi-top { display: flex; align-items: center; justify-content: space-between; }
.mh-app .mh-fs .kpi-ico {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  color: #fff; background: linear-gradient(140deg, var(--a), var(--a2)); flex: none;
}
.mh-app .mh-fs .kpi-ico svg { width: 22px; height: 22px; }
/* Unified to the search bar's "Inset Cool Field" (.bigbar.b14 in mh-theme.css): cool fill +
   hairline + inset shadow, so the neutral delta chips (the "+/- 0" and "N Families . 7 days")
   read as ONE family with the search + toolbar controls. The semantic up/down states keep
   their meaningful green/red fill, just flattened (no inset). */
.mh-app .mh-fs .kpi-delta {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: #DFE4EA; border: 1px solid rgba(40,60,80,.08); box-shadow: inset 0 1px 2px rgba(40,60,80,.10);
  color: var(--fg-3);
}
.mh-app .mh-fs .kpi-delta.is-up   { background: var(--success-bg); color: var(--success-ink); border-color: transparent; box-shadow: none; }
.mh-app .mh-fs .kpi-delta.is-down { background: var(--danger-bg);  color: var(--danger-ink); border-color: transparent; box-shadow: none; }
.mh-app .mh-fs .kpi-main { margin-top: 24px; }
.mh-app .mh-fs .kpi-num {
  font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--fg-1); font-variant-numeric: tabular-nums; font-family: var(--font-sans);
}
.mh-app .mh-fs .kpi-label { margin-top: 7px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.mh-app .mh-fs .kpi-sub { font-weight: 500; color: var(--fg-3); }

/* ============================================================
   PANELS
   ============================================================ */
.mh-app .mh-fs .cols { display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px; margin-bottom: 16px; }
.mh-app .mh-fs .panel { border-radius: 20px; padding: 20px 22px; }

/* ===== DYNAMIC DASHBOARD CARD GRID (ported from the source dashboard's bento + .whcard).
   The added cards render here below the KPIs. half = span 2, full = span 4 of a 4-col grid. ===== */
.mh-app .mh-fs .wh-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mh-app .mh-fs .whcard { grid-column: span 2; position: relative; overflow: hidden; animation: whIn .34s cubic-bezier(.2,.7,.25,1); }
.mh-app .mh-fs .whcard.wh-full { grid-column: span 4; }
@keyframes whIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
/* Corner remove tool (it@ only) - appears on hover, source: .wh-tools / .wh-rm. */
.mh-app .mh-fs .wh-tools { position: absolute; top: 12px; right: 12px; z-index: 6; opacity: 0; transform: translateY(-4px); transition: opacity .16s cubic-bezier(.2,.7,.25,1), transform .16s cubic-bezier(.2,.7,.25,1); }
.mh-app .mh-fs .whcard:hover .wh-tools { opacity: 1; transform: none; }
.mh-app .mh-fs .wh-rm { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--mh-surface); border: 1px solid var(--mh-line); color: var(--mh-muted); cursor: pointer; box-shadow: var(--mh-shadow-sm); transition: .14s; }
.mh-app .mh-fs .wh-rm:hover { color: #C0473F; border-color: color-mix(in srgb, #C0473F 40%, transparent); }
.mh-app .mh-fs .wh-rm svg { width: 15px; height: 15px; }
/* Empty state (source: .wh-empty). */
.mh-app .mh-fs .wh-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 58px 20px; text-align: center; border: 1.5px dashed color-mix(in srgb, var(--mh-ink) 18%, transparent); border-radius: 20px; }
.mh-app .mh-fs .wh-empty .we-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--mh-green) 12%, transparent); color: var(--mh-green); margin-bottom: 4px; }
.mh-app .mh-fs .wh-empty .we-ic svg { width: 24px; height: 24px; }
.mh-app .mh-fs .wh-empty p { font-size: 16px; font-weight: 800; color: var(--fg-1); }
.mh-app .mh-fs .wh-empty span { font-size: 13px; color: var(--fg-3); }
@media (max-width: 1120px) {
  .mh-app .mh-fs .wh-grid { grid-template-columns: repeat(2, 1fr); }
  .mh-app .mh-fs .whcard, .mh-app .mh-fs .whcard.wh-full { grid-column: span 2; }
}
@media (max-width: 620px) {
  .mh-app .mh-fs .wh-grid { grid-template-columns: 1fr; }
  .mh-app .mh-fs .whcard, .mh-app .mh-fs .whcard.wh-full { grid-column: span 1; }
}

/* ===== WIRED-CARD CHART + LIST STYLES (ported from the source widgets.css; tokens mapped). ===== */
/* donut */
.mh-app .mh-fs .dn-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mh-app .mh-fs .dn-wrap { position: relative; width: 128px; height: 128px; flex: none; }
.mh-app .mh-fs .dn-svg { width: 100%; height: 100%; }
.mh-app .mh-fs .dn-svg circle { transition: stroke-dasharray .5s cubic-bezier(.2,.7,.25,1); }
.mh-app .mh-fs .dn-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mh-app .mh-fs .dn-center b { font-size: 26px; font-weight: 800; color: var(--fg-1); letter-spacing: -.02em; line-height: 1; }
.mh-app .mh-fs .dn-center span { font-size: 10.5px; color: var(--fg-3); font-weight: 600; margin-top: 3px; text-transform: uppercase; letter-spacing: .05em; }
.mh-app .mh-fs .dn-legend { display: flex; flex-direction: column; gap: 11px; flex: 1; min-width: 140px; }
.mh-app .mh-fs .dn-li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--fg-2); }
.mh-app .mh-fs .dn-li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mh-app .mh-fs .dn-li .dn-ll { flex: 1; }
.mh-app .mh-fs .dn-li b { color: var(--fg-1); font-weight: 800; }
/* horizontal bars */
.mh-app .mh-fs .hb { display: flex; flex-direction: column; gap: 13px; margin-top: 2px; }
.mh-app .mh-fs .hb-row { display: flex; align-items: center; gap: 12px; }
.mh-app .mh-fs .hb-l { flex: 0 0 38%; max-width: 38%; font-size: 12.5px; font-weight: 600; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .hb-track { flex: 1; height: 9px; border-radius: 99px; background: color-mix(in srgb, var(--mh-ink) 8%, transparent); overflow: hidden; }
.mh-app .mh-fs .hb-track i { display: block; height: 100%; border-radius: 99px; transition: width .5s cubic-bezier(.2,.7,.25,1); }
.mh-app .mh-fs .hb-v { flex: none; font-size: 12px; font-weight: 800; color: var(--fg-3); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
/* area / sparkline */
.mh-app .mh-fs .ch-hero { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mh-app .mh-fs .ch-big { font-size: 32px; font-weight: 800; color: var(--fg-1); letter-spacing: -.02em; line-height: 1; }
.mh-app .mh-fs .ch-cap { font-size: 12.5px; color: var(--fg-3); font-weight: 600; }
.mh-app .mh-fs .ar-box { height: 88px; position: relative; }
.mh-app .mh-fs .ar-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Trend-line head marker: a crisp trend arrow sitting on the line's end (replaces the old
   distorted end-dot). Positioned via inline top:<y>% + centered on the line. */
.mh-app .mh-fs .ar-head { position: absolute; right: -3px; transform: translateY(-50%); width: 20px; height: 20px; display: grid; place-items: center; color: #6D5BD0; pointer-events: none; }
.mh-app .mh-fs .ar-head svg { width: 17px; height: 17px; }
.mh-app .mh-fs .ar-x { display: flex; justify-content: space-between; margin-top: 9px; }
.mh-app .mh-fs .ar-x span { font-size: 11px; font-weight: 600; color: var(--fg-3); }
.mh-app .mh-fs .delta { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 4px; }
.mh-app .mh-fs .delta svg { width: 13px; height: 13px; }
.mh-app .mh-fs .delta.up { background: color-mix(in srgb, #3E9E6B 16%, transparent); color: #2E7D54; }
.mh-app .mh-fs .delta.flat { background: color-mix(in srgb, var(--mh-ink) 7%, transparent); color: var(--fg-3); }
/* today's schedule mini-events */
.mh-app .mh-fs .mini-event { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--mh-line); cursor: pointer; }
.mh-app .mh-fs .mini-event:last-child { border-bottom: none; }
.mh-app .mh-fs .mini-event > div { min-width: 0; flex: 1; }
.mh-app .mh-fs .mini-event .bar { width: 4px; height: 30px; border-radius: 99px; flex: none; }
.mh-app .mh-fs .mini-event .et { font-size: 13.5px; font-weight: 700; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .mini-event .em { font-size: 12px; color: var(--fg-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .mini-event .ehr { font-size: 12px; font-weight: 800; color: var(--fg-2); flex: none; }
/* needs-attention alert rows */
.mh-app .mh-fs .fc-alert { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--fg-1); margin-bottom: 9px; cursor: default; }
.mh-app .mh-fs .fc-alert:last-child { margin-bottom: 0; }
.mh-app .mh-fs .fc-alert svg { width: 16px; height: 16px; flex: none; }
.mh-app .mh-fs .fc-alert.urgent { background: color-mix(in srgb, #C0473F 12%, transparent); color: #A5352E; }
.mh-app .mh-fs .fc-alert.warn { background: color-mix(in srgb, #C0902F 14%, transparent); color: #8A6516; }
.mh-app .mh-fs .fc-alert b { font-weight: 800; }
.mh-app .mh-fs .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mh-app .mh-fs .panel-title { font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: var(--fg-1); margin: 0; letter-spacing: -.01em; }
.mh-app .mh-fs .panel-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--sage-600); cursor: pointer; text-decoration: none;
  border: none; background: none; font-family: var(--font-sans);
}
.mh-app .mh-fs .panel-link .mh-ico { transition: transform .2s; }
.mh-app .mh-fs .panel-link:hover .mh-ico { transform: translate(2px, -2px); }
/* THE ACTIVITY FILTER BUTTON IS STYLED IN mh-toolbar.css, NOT HERE.
   A local `.mh-app .mh-fs .filter-btn` block used to live at this spot: a labelled pill,
   three classes deep. mh-toolbar.css claims `.filter-btn` in its header ("Dashboard's
   activity filter, brought onto the same look") and loads later - but later only breaks a
   TIE. Two classes lose to three however late they load, so this panel silently kept the
   old pill while Clients, Approvals, Requests and Housing Subsidy all moved to the kit's
   round button. The rule is deleted rather than out-shouted with !important, because the
   fix for "the wrong rule wins" is to remove the wrong rule.
   The tab-row rule (.bm-tabs.act-filter-tabs) went with it: the control is a checkbox
   popover now, and a style with no markup left to style is future confusion. */

/* ---- families ---- */
.mh-app .mh-fs .fam-head {
  display: grid; grid-template-columns: 40px minmax(0,1.6fr) minmax(0,1fr) 76px; gap: 14px;
  padding: 0 6px 9px 6px; border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-4);
}
.mh-app .mh-fs .fam-row {
  display: grid; grid-template-columns: 40px minmax(0,1.6fr) minmax(0,1fr) 76px; gap: 14px; align-items: center;
  padding: 11px 6px; border-radius: 12px; transition: background .15s; cursor: pointer;
}
/* Header grid mirrors the row grid exactly (empty 40px avatar spacer first) so each title
   sits directly above its column. FAMILY + STATUS align left with their values; ARRIVED
   centers to match the centered date. */
.mh-app .mh-fs .fam-head-spacer { display: block; }
.mh-app .mh-fs .fam-head span:nth-child(2) { text-align: left; }
.mh-app .mh-fs .fam-head span:nth-child(3) { text-align: left; }
.mh-app .mh-fs .fam-head span:nth-child(4) { text-align: center; }
.mh-app .mh-fs .fam-row .st { justify-self: start; }
.mh-app .mh-fs .fam-row:hover { background: var(--cream-soft); }
.mh-app .mh-fs .avatar {
  width: 40px; height: 40px; border-radius: 12px; color: #fff;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); flex: none; font-family: var(--font-sans);
}
/* P4 - the Recent Families avatar is a clickable photo trigger (opens the photo preview). */
.mh-app .mh-fs .avatar.fam-avatar { position: relative; cursor: pointer; overflow: hidden; transition: box-shadow .15s ease, transform .12s ease; }
.mh-app .mh-fs .avatar.fam-avatar:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 2px rgba(78,124,114,.6); transform: translateY(-1px); }
.mh-app .mh-fs .avatar.fam-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.mh-app .mh-fs .fam-name { font-size: 14.5px; font-weight: 600; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-app .mh-fs .fam-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; }
.mh-app .mh-fs .fam-date { font-size: 13px; font-weight: 600; color: var(--fg-2); text-align: center; }

/* ---- reminders ---- */
.mh-app .mh-fs .rem-list { display: flex; flex-direction: column; gap: 4px; }
.mh-app .mh-fs .rem-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 12px; transition: background .15s; cursor: pointer; }
.mh-app .mh-fs .rem-row:hover { background: var(--cream-soft); }
.mh-app .mh-fs .rem-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--t); background: var(--tbg); flex: none; }
.mh-app .mh-fs .rem-ico svg { width: 18px; height: 18px; }
.mh-app .mh-fs .rem-title { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.mh-app .mh-fs .rem-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.mh-app .mh-fs .rem-date { font-size: 12px; font-weight: 700; color: var(--t); white-space: nowrap; }

/* ---- activity ---- */
.mh-app .mh-fs .act-list { display: flex; flex-direction: column; gap: 2px; }
.mh-app .mh-fs .act-row { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; padding: 11px 8px; border-radius: 12px; transition: background .15s; cursor: pointer; }
.mh-app .mh-fs .act-row:hover { background: var(--cream-soft); }
.mh-app .mh-fs .act-ico { width: 34px; height: 34px; border-radius: 10px; color: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); flex: none; }
.mh-app .mh-fs .act-ico svg { width: 17px; height: 17px; }
.mh-app .mh-fs .act-text { font-size: 13.5px; color: var(--fg-2); line-height: 1.45; }
.mh-app .mh-fs .act-text b { color: var(--fg-1); font-weight: 600; }
.mh-app .mh-fs .act-time { font-size: 11.5px; color: var(--fg-4); margin-top: 3px; }

/* The .st / .st--glass status pill moved to the canonical global status.css
   (Pass 2). The Home families list reuses it unchanged. */

/* ============================================================
   FROSTED SAGE - LIGHT  (on the Matthew House cool-gray canvas)
   ============================================================ */
.mh-app .mh-fs.theme-sage {
  background:
    radial-gradient(1100px 520px at 50% -12%, #EFF1F5 0%, transparent 60%),
    linear-gradient(180deg, #EAECF1 0%, #E6E8ED 100%);
}
.mh-app .mh-fs.theme-sage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(460px 460px at 86% 116%, rgba(94,129,87,.10), transparent 70%),
    radial-gradient(420px 420px at 6% -8%, rgba(94,129,87,.06), transparent 70%);
}
.mh-app .mh-fs.theme-sage .kpi, .mh-app .mh-fs.theme-sage .panel {
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 12px 32px rgba(40,52,58,.10), inset 0 1px 0 rgba(255,255,255,.85);
  position: relative; z-index: 1;
}
.mh-app .mh-fs.theme-sage .kpi-ico { box-shadow: 0 6px 16px color-mix(in oklch, var(--a) 45%, transparent); }
.mh-app .mh-fs.theme-sage .kpi::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; border-radius: 20px 20px 60% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent); pointer-events: none;
}
.mh-app .mh-fs.theme-sage .fam-row:hover,
.mh-app .mh-fs.theme-sage .rem-row:hover,
.mh-app .mh-fs.theme-sage .act-row:hover { background: rgba(255,255,255,.5); }

/* ============================================================
   FROSTED SAGE - DARK  (re-keyed to body.dark; same glass language)
   ============================================================ */
body.dark .mh-app .mh-fs.theme-sage {
  background:
    radial-gradient(820px 520px at 12% -12%, #2C3D35 0%, transparent 56%),
    radial-gradient(760px 560px at 102% 8%, #243036 0%, transparent 56%),
    radial-gradient(520px 460px at 82% 118%, rgba(94,129,87,.20), transparent 68%),
    linear-gradient(165deg, #1E262A 0%, #171D21 100%);
  color: #E7EEEA;
}
body.dark .mh-app .mh-fs.theme-sage::before { background: none; }
body.dark .mh-app .mh-fs.theme-sage .kpi, body.dark .mh-app .mh-fs.theme-sage .panel {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10);
  position: relative; z-index: 1;
}
body.dark .mh-app .mh-fs.theme-sage .kpi::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%; border-radius: 20px 20px 60% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent); pointer-events: none;
}
body.dark .mh-app .mh-fs .kpi-num, body.dark .mh-app .mh-fs .panel-title { color: #F1F6F2; }
body.dark .mh-app .mh-fs .kpi-label { color: #C2D0CA; }
body.dark .mh-app .mh-fs .kpi-sub,
body.dark .mh-app .mh-fs .fam-sub,
body.dark .mh-app .mh-fs .rem-sub,
body.dark .mh-app .mh-fs .act-time { color: #8C9C9B; }
body.dark .mh-app .mh-fs .fam-name, body.dark .mh-app .mh-fs .rem-title { color: #E9F0EB; }
body.dark .mh-app .mh-fs .act-text { color: #C2D0CB; }
body.dark .mh-app .mh-fs .act-text b, body.dark .mh-app .mh-fs .fam-date { color: #DEE9E1; }
body.dark .mh-app .mh-fs .kpi-delta { background: var(--mh-ctrl-fill); border-color: var(--mh-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.22); color: #A6BAB1; }
body.dark .mh-app .mh-fs .fam-head { color: #6C807D; border-color: rgba(255,255,255,.10); }
body.dark .mh-app .mh-fs .fam-row:hover,
body.dark .mh-app .mh-fs .rem-row:hover,
body.dark .mh-app .mh-fs .act-row:hover { background: rgba(255,255,255,.05); }
body.dark .mh-app .mh-fs .panel-link { color: #8FC7A4; }
/* The dark filter-btn rules that sat here are gone for the same reason as the light ones
   above: mh-toolbar.css already carries full dark parity for .filter-btn, and these were
   three classes deep, so they beat it. Removing them is what lets that parity apply. */
body.dark .mh-app .mh-fs .kpi-ico { box-shadow: 0 0 0 4px color-mix(in oklch, var(--a) 22%, transparent), 0 8px 22px rgba(0,0,0,.4); }
body.dark .mh-app .mh-fs .rem-ico { background: color-mix(in oklch, var(--t) 26%, #1c2226); color: color-mix(in oklch, var(--t) 70%, white); }
body.dark .mh-app .mh-fs .rem-date { color: color-mix(in oklch, var(--t) 60%, white); }

/* responsive: collapse to two KPI columns + single panel column, matching the
   legacy dashboard breakpoint so the glass frame degrades gracefully. */
@media (max-width: 1100px) {
  .mh-app .mh-fs .kpis { grid-template-columns: repeat(2, 1fr); }
  .mh-app .mh-fs .cols { grid-template-columns: 1fr; }
}