/* ============================================================
   CareTrust - layouts.css v2.2
   Three shells only: splash, wallet, console, widget.
   All media queries live here. Four zones:
     mobile   <48em          (default, mobile-first)
     tablet   48em – 63.99em
     desktop  64em – 89.99em
     wide     >=90em
   ============================================================ */

/* ── UTILITY LAYOUTS ─────────────────────────────────────── */
.l-container {
  width: min(100% - 2 * var(--sp-lg), 68rem);
  margin-inline: auto;
  padding-block: var(--sp-lg);
}
.l-container--sm { width: min(100% - 2 * var(--sp-lg), 42rem); }
.l-container--wide { width: min(100% - 2 * var(--sp-lg), 90rem); }

.l-stack { display: flex; flex-direction: column; gap: var(--sp-lg); }
.l-stack--tight { gap: var(--sp-xs); }
.l-stack--loose { gap: var(--sp-xl); }
.l-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); }
.l-grid { display: grid; gap: var(--sp-md); grid-template-columns: repeat(auto-fit, minmax(min(14rem,100%),1fr)); }
.l-grid--2 { grid-template-columns: repeat(2, 1fr); }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); }
.l-grid--4 { grid-template-columns: repeat(4, 1fr); }
.l-cover  { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-lg); }

/* ── SPLASH SHELL (public / pre-auth) ────────────────────────
   Form LEFT 1/3, image RIGHT 2/3 on desktop.
   Below tablet, image hides and form goes full-width.
   ============================================================ */
.l-splash {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;                 /* mobile: form only */
}
.l-splash__form {
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--sp-xl) var(--sp-lg);
  background: var(--bg);
  order: 1;
}
.l-splash__form-inner {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  gap: var(--sp-md);
  max-width: 24rem;
  margin-inline: auto;
  width: 100%;
}
.l-splash__image {
  order: 2;
  position: relative;
  overflow: hidden;
  min-height: 40vh;
  background: linear-gradient(135deg, var(--action-pale) 0%, var(--action) 55%, var(--action-deep) 140%);
}
.l-splash__image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.l-splash__caption {
  position: absolute; left: var(--sp-lg); bottom: var(--sp-lg);
  max-width: 22rem;
  color: var(--text);
}

@media (min-width: 48em) {
  .l-splash {
    grid-template-columns: 1fr 2fr;             /* form 1/3, image 2/3 */
    height: 100dvh; overflow: hidden;
  }
  .l-splash__form { overflow-y: auto; padding: var(--sp-2xl) var(--sp-xl); }
  .l-splash__image { min-height: 0; }
}
@media (max-width: 47.99em) {
  .l-splash__image { display: none; }             /* image dropped on narrow */
}

/* ── WALLET SHELL (end-user post-auth) ──────────────────────
   Fixed appbar top + fixed bottomnav bottom, body scrolls.
   ============================================================ */
.l-wallet {
  height: 100dvh;
  overflow: hidden;                 /* fixed appbar + fixed bottom nav; only the body scrolls */
  display: flex; flex-direction: column;
}
.l-wallet__body {
  flex: 1 1 auto;
  overflow-y: auto;                 /* the body is the single scroll region (TopBar rule 6) */
  padding: var(--sp-md);
  padding-bottom: calc(var(--bottomnav-h) + var(--sp-md) + env(safe-area-inset-bottom));
}
@media (min-width: 48em) {
  /* Authenticated browser wallet: interface left 1/3, image right 2/3.
     The existing wallet chrome stays inside the interface panel. */
  .l-wallet {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "appbar image"
      "main image"
      "nav image";
  }
  .l-wallet > .c-appbar { grid-area: appbar; }
  .l-wallet > .l-wallet__body {
    grid-area: main;
    overflow-y: auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-bottom: var(--sp-md);
  }
  .l-wallet > .c-bottomnav { grid-area: nav; position: static; }
  .l-wallet > .l-splash__image { grid-area: image; min-height: 0; }
  /* step progress is a mobile-first onboarding cue; the desktop split grid
     places named areas only, so keep the thin bar out of the grid there. */
  .l-wallet > [data-step-progress] { display: none; }
}

/* Very small screens (D-C10-246): the wallet bar keeps only the spoke mark on
   the left and drops the "CareTrust" wordmark, so the operations cluster stays
   on one row beside the logo. The brand lockup markup is untouched; only the
   word is hidden. */
@media (max-width: 26em) {
  .l-wallet > .c-appbar .c-brand__word { display: none; }
}

/* ── CONSOLE SHELL (staff, fluid) ───────────────────────────
   Single template, three chrome modes:
     mobile   - bottom nav (dark), appbar with hamburger
     tablet   - icon rail left, appbar
     desktop  - full sidebar, appbar
   ============================================================ */
.l-console {
  /* fixed chrome in every zone: the appbar and nav stay put and only
     l-console__main scrolls (mobile matched to the tablet/desktop
     zones, v2.2) */
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "appbar"
    "main"
    "nav";
}
.l-console > .c-appbar    { grid-area: appbar; }
.l-console > .c-sidebar,
.l-console > .c-rail      { display: none; }
.l-console > .l-console__main { grid-area: main; overflow-y: auto; padding: var(--sp-md); }
.l-console > .c-bottomnav { grid-area: nav; position: static; }

/* tablet: icon rail replaces bottom nav */
@media (min-width: 48em) and (max-width: 63.99em) {
  .l-console {
    grid-template-columns: var(--rail-w) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "rail appbar"
      "rail main";
    height: 100dvh; overflow: hidden;
  }
  .l-console > .c-rail    { grid-area: rail; display: flex; height: 100dvh; }
  .l-console > .c-bottomnav { display: none; }
  .l-console > .l-console__main { padding: var(--sp-lg); }
}

/* desktop + wide: full sidebar */
@media (min-width: 64em) {
  .l-console {
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "side appbar"
      "side main";
    height: 100dvh; overflow: hidden;
  }
  .l-console > .c-sidebar { grid-area: side; display: flex; height: 100dvh; }
  .l-console > .c-rail,
  .l-console > .c-bottomnav { display: none; }
  .l-console > .l-console__main { padding: var(--sp-lg) var(--sp-xl); }
}

/* content grid inside console main */
.l-console__grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr));
}

/* ── WIDGET SHELL (floating desktop, reception) ─────────────
   Three dock states: pill (min), peek (280w), expanded (340w).
   Body is a single container the shell scales; JS toggles state.
   ============================================================ */
.l-widget {
  position: fixed;               /* real app - floats on desktop */
  right: var(--sp-lg); bottom: var(--sp-lg);
  z-index: 1000;
  background: var(--raw-navy);
  color: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-widget);
  overflow: hidden;
  display: flex; flex-direction: column;
  width: var(--widget-w);
  max-height: min(90vh, 640px);
}
.l-widget[data-state="min"] {
  width: auto;
  border-radius: var(--radius-pill);
  padding: var(--sp-xs) var(--sp-md) var(--sp-xs) var(--sp-sm);
  flex-direction: row; align-items: center; gap: var(--sp-sm);
  max-height: none;
}
.l-widget[data-state="peek"] { width: 280px; }
.l-widget__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--raw-navy);
  cursor: grab;
  flex-shrink: 0;
}
.l-widget__body {
  background: var(--bg);
  color: var(--text);
  padding: var(--sp-md);
  overflow-y: auto;
  display: flex; flex-direction: column;
  gap: var(--sp-md);
}
.l-widget__foot {
  padding: var(--sp-sm) var(--sp-md);
  background: var(--bg);
  border-top: var(--border) solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--muted);
  flex-shrink: 0;
}

/* widget-preview: same shell used inline for docs (not fixed) */
.l-widget--inline { position: static; }

/* ── UTILITIES ─────────────────────────────────────────────── */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-mobile-only    { }
.u-under-desktop  { }   /* visible below 64em only */
.u-tablet-up      { display: none; }
.u-desktop-up     { display: none; }
@media (min-width: 48em) {
  .u-mobile-only  { display: none !important; }
  .u-tablet-up    { display: revert; }
}
@media (min-width: 64em) {
  .u-desktop-up   { display: revert; }
  .u-under-desktop { display: none !important; }
}