/* =============================================================================
   Matthew House - LAND DESIGN Pass 2: glass "Change client status" modal.
   Ported from _handoff/dashboard-sections/statusmenu.css, with two adaptations:
     - DESIGN's .cs-stage is showcase-only; the live modal supplies its OWN dimmed
       scrim (.cs-scrim) because it renders as a SIBLING of #clDetail (the D14
       pattern - escapes #clDetail's backdrop-filter + .cdbox overflow clip so the
       glass actually frosts). High z-index, above #clDetail (120).
     - DESIGN's .mode-dark is re-keyed to body.dark (our CSS-only dark mechanism).
   Tokens resolved to fixed DESIGN values for the light modal; body.dark handles dark.
   ============================================================================= */

.mh-app .cs-scrim {
  position: fixed; inset: 0; z-index: 100048;
  display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(58,67,65,.5) 0%, rgba(33,42,38,.62) 70%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: cs-fade .18s ease;
}
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }

.mh-app .cs-modal {
  --fg-1: #1E2A2E; --fg-3: #6B787C; --fg-4: #97A3A5;
  width: 100%; max-width: 380px; border-radius: 22px; padding: 18px;
  font-family: var(--mh-font-body); animation: cs-pop .2s cubic-bezier(.22,1,.36,1);
}
@keyframes cs-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.mh-app .cs-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 0; margin-bottom: 14px; }
.mh-app .cs-title { margin: 0; font-size: 17.5px; font-weight: 700; color: var(--fg-1); letter-spacing: -.01em; }
.mh-app .cs-x { width: 30px; height: 30px; border-radius: 9px; border: none; background: transparent; color: var(--fg-3); cursor: pointer; display: grid; place-items: center; }
.mh-app .cs-x:hover { background: rgba(0,0,0,.05); color: var(--fg-1); }
.mh-app .cs-x svg { width: 18px; height: 18px; }
.mh-app .cs-note {
  display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: 12px;
  color: var(--fg-3); font-size: 12.5px; line-height: 1.45; margin-bottom: 14px;
}
.mh-app .cs-note svg { flex: none; margin-top: 1px; color: var(--fg-4); width: 16px; height: 16px; }
.mh-app .cs-list { display: flex; flex-direction: column; gap: 8px; }
.mh-app .cs-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--fg-1);
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.mh-app .cs-label { flex: 1; }
.mh-app .cs-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.mh-app .cs-check { display: none; flex: none; width: 17px; height: 17px; }
.mh-app .cs-row.is-selected .cs-check { display: block; }

.mh-app .cs-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding: 0 2px; }
.mh-app .cs-confirm {
  font-family: var(--mh-font-body); font-size: 14px; font-weight: 600; color: #fff; cursor: pointer;
  padding: 11px 24px; border-radius: 12px; border: none;
  background: linear-gradient(140deg, #5E8157, #3D543A);
  box-shadow: 0 6px 16px rgba(94,129,87,.35);
  transition: filter .15s, transform .1s, box-shadow .15s;
}
.mh-app .cs-confirm:hover { filter: brightness(1.06); box-shadow: 0 8px 20px rgba(94,129,87,.42); }
.mh-app .cs-confirm:active { transform: translateY(1px); }
.mh-app .cs-confirm:disabled { opacity: .55; cursor: default; filter: none; box-shadow: none; }

/* ---- GLASS, light ---- */
.mh-app .cs--glass {
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 26px 64px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.7);
}
.mh-app .cs--glass .cs-note { background: rgba(255,255,255,.45); }
.mh-app .cs--glass .cs-row {
  background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mh-app .cs--glass .cs-row:hover { transform: translateY(-1px); background: rgba(255,255,255,.6); }
.mh-app .cs--glass .cs-row.is-selected {
  background: color-mix(in srgb, var(--c) 26%, rgba(255,255,255,.5));
  border: 1px solid color-mix(in srgb, var(--c) 50%, rgba(255,255,255,.4));
  color: color-mix(in srgb, var(--c) 82%, #15201d);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--c) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.6);
}
.mh-app .cs--glass .cs-row.is-selected .cs-dot { box-shadow: 0 0 8px var(--c); }
.mh-app .cs--glass .cs-check { color: color-mix(in srgb, var(--c) 75%, #15201d); }

/* ---- GLASS, dark (body.dark) ---- */
body.dark .mh-app .cs--glass {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 28px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
body.dark .mh-app .cs--glass .cs-title { color: #F1F6F2; }
body.dark .mh-app .cs--glass .cs-x { color: #93A6A0; }
body.dark .mh-app .cs--glass .cs-x:hover { background: rgba(255,255,255,.08); color: #EAF1EB; }
body.dark .mh-app .cs--glass .cs-note { background: rgba(255,255,255,.05); color: #93A6A0; }
body.dark .mh-app .cs--glass .cs-note svg { color: #7E908D; }
body.dark .mh-app .cs--glass .cs-row {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); color: #E5EDE8;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.dark .mh-app .cs--glass .cs-row:hover { transform: translateY(-1px); background: rgba(255,255,255,.08); }
body.dark .mh-app .cs--glass .cs-row.is-selected {
  background: color-mix(in srgb, var(--c) 30%, rgba(255,255,255,.06));
  border: 1px solid color-mix(in srgb, var(--c) 36%, rgba(255,255,255,.16));
  color: color-mix(in srgb, var(--c) 40%, #ffffff);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
body.dark .mh-app .cs--glass .cs-row.is-selected .cs-dot { box-shadow: 0 0 9px var(--c); background: color-mix(in srgb, var(--c) 70%, #fff); }
body.dark .mh-app .cs--glass .cs-check { color: color-mix(in srgb, var(--c) 45%, #ffffff); }
body.dark .mh-app .cs-confirm { box-shadow: 0 8px 20px rgba(0,0,0,.42); }

/* ---- clickable household hero status pill (LAND DESIGN cascade L1 trigger) ----
   Only the household overlay's hero pill is a trigger (.is-trigger); the client
   hero pill is unchanged (its status is edited from the rail button). */
.mh-app .st--hero.is-trigger { cursor: pointer; transition: transform .12s, box-shadow .15s, filter .15s; }
.mh-app .st--hero.is-trigger:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 4px 14px color-mix(in srgb, var(--c) 38%, transparent); }
.mh-app .st--hero.is-trigger:focus-visible { outline: 2px solid color-mix(in srgb, var(--c) 60%, #ffffff); outline-offset: 2px; }

/* ---- one-line cascade preview line (reuses the .cs-note glass look) ---- */
.mh-app .cs-preview { margin-top: 12px; margin-bottom: 0; }

/* ---- N3: optional reason box + inline result message (request dialog) ---- */
.mh-app .cs-reason {
  width: 100%; margin-top: 12px; box-sizing: border-box; resize: vertical; min-height: 44px;
  padding: 10px 12px; border-radius: 12px; font-family: inherit; font-size: 13px; line-height: 1.45;
  color: var(--fg-1); background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.55);
}
.mh-app .cs-reason::placeholder { color: var(--fg-4); }
.mh-app .cs-reason:focus { outline: 2px solid color-mix(in srgb, var(--mh-green) 45%, transparent); outline-offset: 1px; }
.mh-app .cs-msg { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--mh-green-d); }
body.dark .mh-app .cs-reason { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #E5EDE8; }
body.dark .mh-app .cs-reason::placeholder { color: #7E908D; }
body.dark .mh-app .cs-msg { color: #8FC7A6; }

/* ---- N3: admin approval inbox ---- */
.mh-app .sai-modal { max-width: 460px; }
.mh-app .sai-empty { padding: 26px 8px; text-align: center; color: var(--fg-3); font-size: 13.5px; }
.mh-app .sai-list { display: flex; flex-direction: column; gap: 11px; max-height: calc(60 * var(--mh-vh)); overflow-y: auto; padding: 2px; }
.mh-app .sai-row { padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.42); border: 1px solid rgba(255,255,255,.55); }
.mh-app .sai-toprow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mh-app .sai-entity { font-size: 13.5px; color: var(--fg-1); }
.mh-app .sai-when { font-size: 11px; color: var(--fg-4); white-space: nowrap; }
.mh-app .sai-change { display: flex; align-items: center; gap: 9px; margin: 9px 0 7px; flex-wrap: wrap; }
.mh-app .sai-arr { width: 17px; height: 17px; color: var(--fg-4); flex: none; }
.mh-app .sai-meta { font-size: 12px; color: var(--fg-3); line-height: 1.4; }
.mh-app .sai-cascade { font-size: 11.5px; color: var(--fg-4); margin-top: 4px; }
.mh-app .sai-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; }
.mh-app .sai-btn { font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.6); color: var(--fg-1); transition: filter .14s, transform .1s; }
.mh-app .sai-btn:hover:not(:disabled) { filter: brightness(.98); }
.mh-app .sai-btn:active:not(:disabled) { transform: translateY(1px); }
.mh-app .sai-btn:disabled { opacity: .5; cursor: default; }
.mh-app .sai-approve { border: none; color: #fff; background: linear-gradient(140deg,#5E8157,#3D543A); }
.mh-app .sai-deny { border: none; color: #fff; background: linear-gradient(140deg,#C2685A,#9A4A3E); }
body.dark .mh-app .cs--glass .sai-row { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.10); }
body.dark .mh-app .sai-entity { color: #E5EDE8; }
body.dark .mh-app .sai-meta { color: #A9B6B1; }
body.dark .mh-app .sai-when, body.dark .mh-app .sai-cascade { color: #7E908D; }
body.dark .mh-app .sai-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #E5EDE8; }

/* ---- N3 Step 3: read-only status-history timeline (in detail panes) ---- */
/* NO WHITE PANEL (CEO, Jul 29 2026). The timeline IS the content - a white card behind it was
   a surface inside a surface, and the section already sits on the app's one cool canvas. The
   heading keeps its rule as a divider, and the padding drops so the title and the timeline line
   up flush with whatever surrounds them. Changed on the SHARED component, not per host, so
   Household, Client and Subsidy stay identical - the Subsidy host's own bare-card override is
   gone now that this is the default. */
.mh-app .sh-card { border: none; border-radius: 0; background: none; overflow: visible; }
.mh-app .sh-head { display: flex; align-items: center; gap: 9px; padding: 0 0 12px; border-bottom: 1px solid var(--mh-line); }
.mh-app .sh-head svg { width: 18px; height: 18px; color: var(--mh-green); flex: none; }
/* UPPERCASE, matching every other section heading on these surfaces (#hhDetail .sec / .fsec h3
   and the shell's .pd-ch h4 are all uppercase + letter-spaced). */
.mh-app .sh-head h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mh-ink); }
.mh-app .sh-body { padding: 16px 0 0; }
.mh-app .sh-empty { color: var(--mh-muted); font-size: 13px; padding: 8px 2px; }
.mh-app .sh-timeline { display: flex; flex-direction: column; }
.mh-app .sh-item { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--mh-line); }
.mh-app .sh-item:last-child { border-left-color: transparent; padding-bottom: 2px; }
/* The ring used to be painted in --mh-surface (white) to mask the connector line behind the
   dot. With the card de-whited that ring became a white halo on the cool canvas - and the 12px
   dot already covers the 2px line on its own, so the mask was never needed. */
.mh-app .sh-node { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.mh-app .sh-when { font-size: 11px; color: var(--mh-muted); margin-bottom: 5px; }
.mh-app .sh-change { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.mh-app .sh-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: color-mix(in srgb, var(--c) 82%, #15201d); background: color-mix(in srgb, var(--c) 16%, transparent); }
.mh-app .sh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.mh-app .sh-arr { width: 15px; height: 15px; color: var(--mh-muted); flex: none; }
.mh-app .sh-badge { font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.mh-app .sh-badge.sh-ok { background: rgba(78,124,114,.15); color: var(--mh-green-d); }
.mh-app .sh-badge.sh-bad { background: rgba(176,70,60,.15); color: var(--mh-danger); }
.mh-app .sh-badge.sh-wait { background: rgba(216,155,61,.18); color: var(--mh-warning-d); }
.mh-app .sh-badge.sh-muted { background: rgba(138,139,131,.18); color: var(--mh-muted); }
.mh-app .sh-meta { font-size: 12px; color: var(--mh-muted); line-height: 1.45; }
.mh-app .sh-note { font-size: 12px; color: var(--mh-ink); margin-top: 4px; }
.mh-app .sh-note.sh-deny { color: var(--mh-danger); }
.mh-app .sh-cascade { font-size: 11.5px; color: var(--mh-muted); margin-top: 3px; font-style: italic; }
body.dark .mh-app .sh-pill { color: color-mix(in srgb, var(--c) 40%, #ffffff); background: color-mix(in srgb, var(--c) 22%, transparent); }