/* ╔══════════════════════════════════════════════════════════════════╗
   ║ PRODUCT-LOCAL CSS — NOT PART OF ANY DESIGN SYSTEM                   ║
   ║ Owned by the LT Mobile product. Loads AFTER the five DS mirrors so  ║
   ║ it can layer product-only chrome on top of Crossroads / Crossroads  ║
   ║ Mobile. Consumes DS tokens via var(--*); declares no tokens of its  ║
   ║ own. Shared by every HTML entry point (replaces per-page duplication ║
   ║ of product-local rules in inline <style> blocks).                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ─── FaIcon box (icons.jsx) ───
   Constant layout for the <i>/<svg> an icon renders as: a centered square
   that holds its line in flex/grid rows. The icon's SIZE and COLOR are
   runtime values (from the `size`/`color` props) and stay inline on the
   element; only these invariant layout rules live here. When `size` is
   omitted the box defers to a governing rule (e.g. `.lt-meta-row > i`). */
.lt-fa-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─── Scroll-container utility ───
   Hides the scrollbar on internal scroll regions (the in-phone body
   scrolls but must not show a desktop scrollbar). `.lt-carousel`'s own
   scrollbar-hide ships in the CMDS recipe (_mobile-primitives.css); this
   is the generic content-region version, shared across entry points. */
.lt-noscroll::-webkit-scrollbar { display: none; }
.lt-noscroll { scrollbar-width: none; }

/* ─── Crossroads badge typography ───
   Museo Sans at the spec weight; LTBadge inlines only its size. */
.lt-badge { font-weight: var(--fw-medium); }

/* ─── Callout width override ───
   The canonical `.callout` (chrome, sub-elements, variant tints) ships in
   the parent CDS `components.css`. The ONLY product-local override is
   width:100% — mobile callouts fill their narrow scroll-container column.
   (Previously duplicated as a full inline copy in three entry points; the
   inline copies drifted to --r-2 radius. Removed — this is the single home.) */
.callout { width: 100%; }

/* ─── Simulated new-alert drop-in toast — white surface + pepper border ───
   The top-drop "New Notification" toast (app.jsx) reuses LTCallout type=
   "error", but as a FLOATING surface it reads better white-filled with a
   pepper outline than the inline pepper-tinted `.callout.err`. The DS has
   no white-fill alert callout variant, so this is product-local: a wrapper
   `.lt-alert-toast` overrides the err variant's tint to a white surface,
   keeps the 4px pepper left rail, and adds a hairline pepper border so the
   toast stays enclosed against the app background. NOT PART OF ANY DS. */
.lt-alert-toast .callout.err {
  background: var(--bg);
  border: 1px solid var(--c-pepper-200);
  border-left: 4px solid var(--c-pepper-400);
  box-shadow: var(--shadow-lg);
}

/* ─── Notification Center — white-surface callouts ───
   In place of the tinted .callout fills, each notification row is a white
   card with a neutral hairline and a tone-colored 4px left rail (the per-type
   icon + title still carry the tone). Mirrors the home critical-alert card
   language. NOT PART OF ANY DS — product-local. */
.lt-notif-list .callout {
  background: var(--bg);
  border: 1px solid var(--c-journey-200);
  border-radius: var(--r-6);
  box-shadow: var(--shadow-xs);
}
/* Facelift 2026-10-22: no rail — the edge takes a light tint of the tone,
   the icon + title still carry it. */
.lt-notif-list .callout.critical { border-color: var(--c-pepper-200); }
.lt-notif-list .callout.err     { border-color: var(--c-pepper-200); }
.lt-notif-list .callout.warn    { border-color: var(--c-sunflower-300); }
.lt-notif-list .callout.info    { border-color: var(--c-journey-200); }
.lt-notif-list .callout.success { border-color: var(--c-emerald-200); }

/* ─── Critical callout banner — mirrors CMDS .lt-callout--critical ───
   The CMDS ships a `critical` callout tone (preview/mobile/mobile-callout.html
   + _mobile-primitives.css :: .lt-callout--critical): white fill, full neutral
   hairline + a cherry (danger) left rail, cherry icon + headline, and
   primary-ink (neutral-900) body. It reads at a HIGHER severity than `.err`'s
   fully red-tinted surface — used for blocking/destructive states (license
   lapse, credentialing expiry, removed from schedule). The product routes
   callouts through the parent CDS `.callout` (not `.lt-callout`), so the
   critical tone is bridged onto `.callout.critical` here until CDS/CMDS ship
   a canonical `.callout.critical`. Flag for the CMDS owner. NOT PART OF ANY DS. */
.callout.critical {
  background: var(--bg);
  border: 1px solid var(--c-pepper-200);
  border-radius: var(--r-6);
  color: var(--c-neutral-900);
  box-shadow: var(--shadow-xs);
}
.callout.critical .callout-icon  { color: var(--danger); }
.callout.critical .callout-title { color: var(--danger); }
.callout.critical .callout-sub   { color: var(--c-neutral-900); opacity: 1; }

/* ─── Secondary Button (.btn--white) — product-local ───
   CDS `.btn--outlined` is transparent across intents; the product's
   Secondary is outlined-with-white-fill. The CMDS mirror now carries the
   base surface (`.btn--white { background: var(--bg) }`), but the full
   product recipe — transition, pressed scale, focus halo, disabled, and
   crucially the TOUCH (no-hover) behavior — is product-local until CMDS
   absorbs it (handoff: cmds-handoff/). NOT PART OF CDS. The base surface
   (`background: var(--bg)`) is NOT redeclared here — it comes from the CMDS
   mirror, to avoid a duplicate.

   Hover === tapped: the CMDS mirror set `.btn--white:hover {background:
   neutral-50}`, a different shade from the pressed state. Product decision —
   hover and tap should read identically — so we fold hover into the pressed
   style (neutral-100 + scale). REMOVE this once CMDS aligns hover to the
   pressed style at source. */
.btn--white          { transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.btn--white:hover,
.btn--white:active   { background: var(--c-neutral-100); transform: scale(0.985); }   /* hover === tapped */
.btn--white:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-neutral-600) 20%, transparent);
}
/* Disabled holds the resting white surface — base .btn[disabled] (opacity
   0.45 + not-allowed) does the rest. */
.btn--white[disabled],
.btn--white.is-disabled { background: var(--bg); }

/* ─── Home screen (screens-home.jsx) ───
   Static chrome for the Home tab. The screen-head TOP padding is a runtime
   density value (LT_DENSITY.sectionGap) and stays inline; everything here is
   constant. */
.home-screen { padding-bottom: var(--s-5); }
.home-title  { color: var(--c-journey-600); text-wrap: pretty; }
.home-alert  { padding-bottom: var(--s-4); }

/* ─── Per-screen title ink overrides (base <h1> is journey-700) ─── */
.expense-title,
.time-title { color: var(--c-foundation-500); }

/* ─── Standard screen head ───
   Title block at the top of a tab/list screen. Replaces a hardcoded
   `22px 0 10px` magic-number padding with the --s grid. */
.lt-screen-head { padding: var(--s-6) 0 var(--s-2); }

/* ─── Section status card — SectionLoading / SectionError (screens-home.jsx) ───
   Shared icon + title + subtitle card shown while a Home carousel is loading
   or after it errors. The --error modifier swaps the rail + title ink to
   pepper. Bottom padding matches LTCarousel's so section rhythm is preserved. */
.lt-section-status { padding-bottom: var(--s-4); }
.lt-section-status__card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--c-neutral-100);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-xs);
  padding: var(--s-4);
}
.lt-section-status__card--error {
  border-color: var(--c-pepper-100);
  border-left: 4px solid var(--c-pepper-500);
}
.lt-section-status__icon { flex-shrink: 0; }
.lt-section-status__body { flex: 1; min-width: 0; }
.lt-section-status__title {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: var(--c-journey-600);
  line-height: var(--lh-tight);
  margin-bottom: var(--s-1);
}
.lt-section-status__card--error .lt-section-status__title { color: var(--c-pepper-600); }
.lt-section-status__sub {
  font-size: var(--fs-12);
  color: var(--c-neutral-700);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}
.lt-section-status__sub--gap { margin-bottom: var(--s-2); }

/* ─── Dark mode (index.html Tweaks → Dark mode) ───
   Headings are tag-driven (post-§4): h1 (Journey-700 in light) → Sunflower
   500; h2–h6 (neutral-700) → inverse. Cards go 80% opaque so the
   Journey×Emerald gradient shows through faintly. Activates only when
   [data-theme="dark"] is set, so it's inert on other entry points. */
[data-theme="dark"] h1 { color: var(--c-sunflower-500) !important; }
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 { color: var(--fg-inverse) !important; }
[data-theme="dark"] .lt-card {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* ═══════════════════════════════════════════════════════════════════════
   NOT PART OF ANY DS — product-local only.  (2026-10-22, Kevin)
   The light app background and the Home "Today" cards. The two glows are
   alpha tints of Journey-500 and Emerald-400; Foundation ships no alpha
   variants of the brand ramps, so they live here as --c-lt-app-*.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --c-lt-app-glow-journey: rgba(0, 119, 200, 0.30);   /* journey-500 @ 30% */
  --c-lt-app-glow-emerald: rgba(64, 176, 107, 0.20);  /* emerald-400 @ 20% */
  --c-lt-app-bg:
    radial-gradient(120% 50% at 0% 0%, var(--c-lt-app-glow-journey) 0%, transparent 60%),
    radial-gradient(90% 45% at 100% 30%, var(--c-lt-app-glow-emerald) 0%, transparent 65%),
    linear-gradient(180deg, var(--c-journey-100) 0%, var(--c-journey-50) 100%);
}

/* Home → Today: one card per assignment worked today. One Add button per
   card (time or expense, filed against that hospital). */
.lt-today-card {
  background: var(--bg);
  border-radius: var(--r-6);
  border: 1px solid var(--c-journey-200);
  box-shadow: var(--shadow-xs);
  padding: var(--s-4);
  cursor: pointer;
}
.lt-today-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.lt-today-card__name {
  margin: 0; font-size: var(--fs-16); font-weight: var(--fw-bold);
  color: var(--c-foundation-700); line-height: var(--lh-tight);
}
.lt-today-card__meta { margin: var(--s-1) 0 0; font-size: var(--fs-12); color: var(--c-neutral-600); }
.lt-today-card__when {
  font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--c-foundation-600);
  white-space: nowrap; text-align: right;
}
.lt-today-card__mode { display: block; font-weight: var(--fw-medium); color: var(--c-neutral-500); margin-top: 2px; }
.lt-today-card__bottom { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.lt-today-card__hours { flex: 1; min-width: 0; }
.lt-today-card__hours-row { display: flex; justify-content: space-between; font-size: var(--fs-12); color: var(--c-neutral-600); }
.lt-today-card__hours-row b { color: var(--c-foundation-700); }
.lt-today-card__track { height: 7px; border-radius: var(--r-full); background: var(--c-neutral-100); margin-top: var(--s-2); overflow: hidden; }
.lt-today-card__fill { height: 100%; border-radius: var(--r-full); background: var(--c-emerald-500); }
.lt-today-list { display: flex; flex-direction: column; gap: var(--s-2); }

/* Card facelift (2026-10-22, Kevin) — NOT PART OF ANY DS, product-local only.
   Every .lt-card: 16px corners and a light Journey edge, no 4px accent rail
   (status rides on the card's badge). Overrides the CMDS mirror's .lt-card /
   .lt-card--accent by load order; flag for the CMDS owner. */
.lt-card {
  border: 1px solid var(--c-journey-200);
  border-radius: var(--r-6);
}
.lt-card--accent { padding-left: var(--s-4); }
.lt-card--accent::before { display: none; }