/* =============================================================================
   Matthew House - LAND DESIGN Pass 2: the glass status pill, app-wide.
   ONE canonical definition (lifted out of mh-frostedsage.css, where Pass 1 had it
   scoped under .mh-fs for the Home families list). Every status pill in the app -
   client lists, member cards, household cards, the two detail heroes, the QR pass,
   and the Home families list - is now this pill.

   Single source of color: --c is always the lookup ColorHex (lkp_ClientStatus /
   lkp_HouseholdStatus). No status color literal lives in the UI.

   Dark mode is our CSS-only mechanism (body.dark), never round-tripped to Blazor
   (same approach as Pass 1). Three context variants:
     .st--glass   adapts to the page (light glass on light surfaces, dark in body.dark)
     .st--hero    always the on-dark glass, larger - the two detail heroes sit on a
                  dark rail / dark gradient in BOTH app modes
     .st--onlight always the light glass - the QR pass card is fixed-light
   ============================================================================= */

.mh-app .st {
  display: inline-flex; align-items: center; gap: 7px; justify-self: start; vertical-align: middle;
  font-family: var(--mh-font-body); font-size: 13px; font-weight: 600; line-height: 1;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
}
.mh-app .st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }

/* ---- base glass (light surfaces) ---- */
.mh-app .st--glass {
  background: color-mix(in srgb, var(--c) 20%, rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(8px) saturate(1.5); backdrop-filter: blur(8px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.65);
  color: color-mix(in srgb, var(--c) 80%, #15201d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
/* ---- base glass, dark page (body.dark) ---- */
body.dark .mh-app .st--glass {
  background: color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.06));
  border: 1px solid color-mix(in srgb, var(--c) 32%, rgba(255,255,255,.16));
  color: color-mix(in srgb, var(--c) 46%, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
body.dark .mh-app .st--glass .st-dot { box-shadow: 0 0 8px var(--c); background: color-mix(in srgb, var(--c) 70%, #fff); }

/* ---- on-dark glass, locked (forced) ---- */
.mh-app .st--glass.st--ondark,
.mh-app .st--hero {
  background: color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.08));
  border: 1px solid color-mix(in srgb, var(--c) 34%, rgba(255,255,255,.20));
  color: color-mix(in srgb, var(--c) 30%, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px) saturate(1.5); backdrop-filter: blur(8px) saturate(1.5);
}
.mh-app .st--glass.st--ondark .st-dot,
.mh-app .st--hero .st-dot { box-shadow: 0 0 8px var(--c); background: color-mix(in srgb, var(--c) 70%, #fff); }

/* ---- light glass, locked (forced) - for fixed-light cards in any app mode ---- */
.mh-app .st--onlight,
body.dark .mh-app .st--onlight {
  background: color-mix(in srgb, var(--c) 20%, rgba(255,255,255,.55));
  border: 1px solid rgba(255,255,255,.65);
  color: color-mix(in srgb, var(--c) 80%, #15201d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
body.dark .mh-app .st--onlight .st-dot { box-shadow: none; background: var(--c); }

/* ---- hero variant: prominent, larger (Client Detail + Household Detail heroes) ---- */
.mh-app .st--hero { font-size: 14.5px; font-weight: 700; padding: 9px 16px; gap: 8px; }
.mh-app .st--hero .st-dot { width: 8px; height: 8px; }

/* keep the pill from stretching inside the card/list grid + flex rows (was .status) */
.mh-app .cl-row .st, .mh-app .idc-nrow .st, .mh-app .idc-stats .st { flex: none; }