/* ─────────────────────────────────────────────────────────────────────────
   Crossroads Mobile — primitive class library
   ─────────────────────────────────────────────────────────────────────────

   Every class below mirrors a mobile-product primitive in the
   clinician-mobile-main prototype (React Native / TSX). The kit consumes
   these classes instead of hand-rolling per-page CSS.

   Authority: this file is downstream of CDS (`colors_and_type.css`,
   `components.css`). Never invent new values; mirror the product.

   NOTE ON CITATIONS: the component names in the section headers below are
   the DS's own recipe names — NOT verified prototype paths. The prototype
   is TSX (e.g. Buttons.tsx, JobCard.tsx, AssignmentIcon.tsx; tabs come from
   @locumtenens-com/crossroads-native). Verify against the prototype before
   signing off.
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SURFACES — LTCard
   ═══════════════════════════════════════════════════════════════ */

.lt-card {
  background: var(--bg);
  border: 1px solid var(--c-neutral-100);
  border-radius: var(--r-2);                    /* 4 px card surface */
  box-shadow: var(--shadow-xs);
  padding: 14px 16px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.lt-card--accent {
  padding-left: 20px;                           /* cardPadX + 4 px rail */
}
.lt-card--accent::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--lt-card-accent, var(--c-journey-500));
  border-radius: var(--r-2) 0 0 var(--r-2);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON — inherits directly from CDS
   Foundation: _foundation/components.css :: .btn (+ .btn--{variant},
   .btn--{size}, .intent-{intent}, :hover/:active/:focus-visible/[disabled]).
   ───────────────────────────────────────────────────────────────
   Mobile re-declares NOTHING about buttons — sizing, intents, focus
   halo, press scale, and disabled state all come from the parent.
   The ONLY mobile-local addition is the Secondary white-fill modifier
   below (.btn--white), the canonical pair-partner for filled primary
   in submit / confirm flows. CDS candidate: proposed for absorption
   into components.css as a canonical Secondary recipe.
   ═══════════════════════════════════════════════════════════════ */

.btn--white          { background: var(--bg); }                 /* Secondary (variant="secondary") */
.btn--white:hover    { background: var(--c-neutral-50); }
.btn--white:active   { background: var(--c-neutral-100); }

/* ═══════════════════════════════════════════════════════════════
   TABS (in-screen filter) — inherited verbatim from Crossroads.
   The product imports `Tabs` directly from
   @locumtenens-com/crossroads-native (TabItem = { title, children }).
   There is NO mobile-specific tab component and NO count-pill slot.
   Mobile adds nothing here — do not declare a .tab-count or MobileTabs.
   Distinct from the Bottom Nav Bar (.lt-tab-bar — the 5 root tabs).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   APP BAR — LTAppBar
   ═══════════════════════════════════════════════════════════════ */

.lt-app-bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--c-neutral-100);
}
.lt-app-bar__title {
  flex: 1; min-width: 0;
  margin-left: var(--s-1);
}
.lt-app-bar__title b {
  display: block;
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--c-neutral-900);
  line-height: 18px;
  letter-spacing: -0.2px;
}
.lt-app-bar__title span {
  display: block;
  font-size: 12px;
  color: var(--c-neutral-600);
  line-height: 14px;
}
/* NOTE: .lt-app-bar__logo / .lt-app-bar__util removed (2026-06-09 usage
   cleanup) — the product's LTAppBar renders its logo via a <Logo> component
   and emits no util container. The kit-demo header (preview/mobile/
   mobile-headers.html) carries those layout rules inline. */

/* ═══════════════════════════════════════════════════════════════
   TAB BAR — LTTabBar
   ═══════════════════════════════════════════════════════════════ */

.lt-tab-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--s-2) var(--s-1);
  background: var(--bg);
  border-top: 1px solid var(--c-neutral-100);
  box-shadow: var(--shadow-sm);
}
.lt-tab-bar__item {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-1);
  padding: var(--s-2) 0;
  background: transparent; border: 0;
  cursor: pointer;
  color: var(--c-neutral-600);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.lt-tab-bar__item.is-active {
  color: var(--c-journey-500);
  font-weight: var(--fw-bold);
}
.lt-tab-bar__item svg {
  width: 22px; height: 22px;
  stroke-width: 1.75;
}
.lt-tab-bar__item.is-active svg {
  stroke-width: 2;
}

/* ═══════════════════════════════════════════════════════════════
   ICON BUTTON — LTIconButton
   ═══════════════════════════════════════════════════════════════ */

.lt-icon-button {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-neutral-700);
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--t-fast) var(--ease-out);
}
.lt-icon-button:hover {
  background: var(--c-neutral-50);
}
/* Mobile icon-button sizes — touch-tuned (NOT the web .btn ladder).
   All three are in live use: sm 32 (bottom-sheet close) · md 36 (app-bar
   utility icons) · lg 44 (default — HIG tap target, standalone icon button). */
.lt-icon-button--sm { width: 32px; height: 32px; font-size: 16px; }
.lt-icon-button--md { width: 36px; height: 36px; font-size: 19px; }
.lt-icon-button--lg { width: 44px; height: 44px; font-size: 22px; }   /* default */

.lt-icon-button--ghost        { background: transparent;              color: var(--c-neutral-700); }
.lt-icon-button--ghost:hover  { background: var(--c-neutral-50); }
.lt-icon-button--soft         { background: var(--c-neutral-50);      color: var(--c-neutral-700); }
.lt-icon-button--soft:hover   { background: var(--c-neutral-100); }
/* Square shape + glass tones (glass tones read on a dark backdrop — the
   camera UI's Close / flash buttons; --glass-active is the flash-on state). */
.lt-icon-button--square { border-radius: var(--r-4); }

.lt-icon-button--glass        { background: var(--c-lt-glass-soft);   color: var(--bg); }
.lt-icon-button--glass:hover  { background: var(--c-lt-glass-strong); }
.lt-icon-button--glass-active        { background: var(--c-sunflower-300); color: var(--c-sunflower-700); }
.lt-icon-button--glass-active:hover  { background: var(--c-sunflower-400); }


.lt-icon-button__badge {
  box-sizing: border-box;
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  min-width: 16px; height: 16px;
  padding: 0 var(--s-1);
  border-radius: var(--r-4);
  background: var(--danger);            /* CDS error anchor (#EA3219) — re-anchored away from raw --c-pepper-500 */
  color: var(--bg);
  font-size: 9px;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bg);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   MINI ICON BUTTON
   ═══════════════════════════════════════════════════════════════ */

.lt-mini-icon-button {
  width: 28px; height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-full);
  color: var(--c-journey-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* NOTE: the prototype's mini-icon-button has no hover background */
}
/* Size + tone modifiers. --sm (24px, neutral) folds in the former DotMenu —
   a 24px kebab that opened a card action sheet. Standardizes its rounded-
   square on the canonical circular mini-button shape. */
.lt-mini-icon-button--sm      { width: 24px; height: 24px; }
.lt-mini-icon-button--neutral { color: var(--c-neutral-700); }

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL — LTCarousel + CarouselMoreTile
   ═══════════════════════════════════════════════════════════════ */

.lt-carousel {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding: 0 0 var(--s-4) 0;
  margin-right: calc(var(--s-4) * -1);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  align-items: stretch;
}
.lt-carousel::-webkit-scrollbar { display: none; }
.lt-carousel > * {
  flex: 0 0 86%;
  scroll-snap-align: start;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
}
.lt-carousel > .lt-carousel-more-tile {
  flex: 0 0 56%;
}

.lt-carousel-more-tile {
  width: 100%; height: 100%;
  align-self: stretch;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-3);
  background: var(--bg);
  border: 1px dashed var(--c-neutral-200);
  border-radius: var(--r-4);
  padding: var(--s-5);
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease;
  font-family: var(--font-sans);
}
.lt-carousel-more-tile:hover {
  background: var(--c-journey-100);
  border-color: var(--c-journey-500);
  transform: translateY(-1px);
}
.lt-carousel-more-tile__badge {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: var(--c-journey-50);
  color: var(--c-journey-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lt-carousel-more-tile__badge svg {
  width: 26px; height: 26px;
  stroke-width: 2.25;
}
.lt-carousel-more-tile__label { text-align: center; }
.lt-carousel-more-tile__title {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-900);
  letter-spacing: -0.1px;
  line-height: 1.2;
}
.lt-carousel-more-tile__count {
  margin-top: var(--s-1);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--c-neutral-700);
}

/* ═══════════════════════════════════════════════════════════════
   SUB-HEADER — pushed-screen header
   ═══════════════════════════════════════════════════════════════ */

.lt-sub-header {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--c-neutral-100);
}
.lt-sub-header__title {
  flex: 1; min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;                              /* .t-h6 mobile-typography.css */
  line-height: 22px;
  font-weight: var(--fw-light);
  letter-spacing: -0.2px;
  color: var(--c-neutral-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════
   TILE ICON — domain glyph tile
   ═══════════════════════════════════════════════════════════════ */

.lt-tile-icon {
  width: 36px; height: 36px;                    /* domain tile — 36×36 */
  border-radius: var(--r-2);                    /* CDS small (4px) */
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.lt-tile-icon i,
.lt-tile-icon svg {
  display: block; line-height: 1; width: 1em; height: 1em;
  font-size: 20px;
  display: block; line-height: 1;
}

.lt-tile-icon--hospital { background: var(--c-emerald-100); color: var(--c-emerald-500); }
.lt-tile-icon--job      { background: var(--c-sage-100);    color: var(--c-sage-500); }
.lt-tile-icon--air      { background: var(--c-journey-100); color: var(--c-journey-500); }
.lt-tile-icon--lodging  { background: var(--c-journey-100); color: var(--c-journey-500); }
.lt-tile-icon--car      { background: var(--c-journey-100); color: var(--c-journey-500); }
.lt-tile-icon--expense  { background: var(--c-neutral-50);  color: var(--c-neutral-600); }
/* Override via CSS variables for status-tinted tiles (used by AssignmentCard) */
.lt-tile-icon[style*="--lt-tile-bg"] {
  background: var(--lt-tile-bg);
  color: var(--lt-tile-fg);
}

/* ═══════════════════════════════════════════════════════════════
   LOCATION TILE — journey-gradient globe
   ───────────────────────────────────────────────────────────────
   ⚠️ DEPRECATED — the dark-blue journey gradient is being retired.
   Do NOT use on new surfaces. Prefer a flat .lt-tile-icon (kind-paired
   tint) for location rows. Retained only so existing screens render
   until they migrate. Kept at the standardized 36×36 footprint with a
   white, centered, FA-outline (fa-light) glyph.
   ═══════════════════════════════════════════════════════════════ */

.lt-location-tile {
  width: 36px; height: 36px;                    /* location tile — 36×36 */
  border-radius: var(--r-2);                    /* CDS small (4px) */
  background: linear-gradient(180deg, var(--c-journey-400), var(--c-journey-600));
  color: var(--bg);                             /* white icon */
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.lt-location-tile i,
.lt-location-tile svg { font-size: 20px; color: var(--bg); display: block; line-height: 1; width: 1em; height: 1em; }   /* white, true center-middle glyph */

/* ═══════════════════════════════════════════════════════════════
   DATE PILL — 44×44 month/day tile
   ═══════════════════════════════════════════════════════════════ */

.lt-date-pill {
  width: 44px; height: 44px;
  border-radius: var(--r-2);                    /* CDS small (4px) */
  background: var(--c-neutral-50);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lt-date-pill__month {
  font-size: 12px;                              /* .t-caption */
  font-weight: var(--fw-medium);
  color: var(--c-neutral-700);
  line-height: 1.2;
}
.lt-date-pill__day {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--c-neutral-900);
  line-height: 16px;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   META ROW — icon + caption line ("pin + place", "calendar + dates")
   The leading icon is a fixed 12px neutral-700 glyph; the label is a
   <small> (12/16 · 500 · neutral-600 — the Secondary role). Stack rows
   in a .lt-meta-list for the standard --s-1 vertical rhythm.
   ═══════════════════════════════════════════════════════════════ */

.lt-meta-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.lt-meta-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-neutral-700);                  /* icon tone via currentColor */
}
.lt-meta-row > i,
.lt-meta-row > svg {
  font-size: 12px;
  width: 12px; height: 12px;
  flex-shrink: 0;
}
.lt-meta-row > small {
  min-width: 0;                                 /* allow truncation in flex */
}

/* LOCATION STATUS BADGE / LOCATION PILL — removed (2026-06-09 usage cleanup).
   LocationStatusBadge renders the parent .badge (handoff §4 — was already
   DEPRECATED); location pills are inline in the product's
   timesheet-tracking.jsx. preview/compositions/timesheet-card.html carries
   the V1 recipe inline for reference. */

/* ═══════════════════════════════════════════════════════════════
   EYEBROW — uppercase data-row label
   ═══════════════════════════════════════════════════════════════ */

.lt-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-neutral-700);
  line-height: 1.4;
  margin: 0;
}

/* TILE TYPOGRAPHY — removed (2026-06-09 usage cleanup). Card titles /
   subtitles come from .lt-card-header__title/__subtitle; the standalone
   .lt-card-title/-subtitle/-value/-booking atoms were not emitted by the
   product. Composition docs carry any leftover uses inline. */

/* Doc-prose guard (kept for .lt-eyebrow inside cards) — re-asserts the
   primitive against kit doc-page prose styles (.section p). */
.lt-card .lt-eyebrow { font-size: 12px; line-height: 1.4; margin: 0; }

/* BOTTOM SHEET — no shared surface recipe (2026-06-09 decision).
   The product's six sheets are bespoke surfaces — three radii (r-5/r-6/r-7),
   box-shadow: var(--shadow-md), per-surface padding. The sanctioned shared
   contract is MOTION ONLY: --t-lt-sheet / --ease-lt-sheet (+ scrim tokens)
   in _mobile-tokens.css. Do not reintroduce a .lt-sheet surface class unless
   the product consolidates its sheets first. */

/* ─── .lt-phone* (kit-only phone frame) intentionally NOT mirrored —
       CMDS §14a: "exclude from the product mirror". ─── */

/* ═══════════════════════════════════════════════════════════════
   CHIP — tonal metadata pill (match keywords, filters, attribute tags)
   ═══════════════════════════════════════════════════════════════ */

/* ── Chip ──────────────────────────────────────────────────────────
   Tonal pill for non-status metadata (match keywords, filters, attribute
   tags). Mirrors the prototype's metadata chip — visually distinct from
   .badge: NO border, tighter feel, full-radius, tones cycle by position.
   Reuses the .badge--tonal.intent-* palette (compose both classes) so the
   color rhythm is shared; .lt-chip itself owns layout + kills the border. */
.lt-chip {
  display: inline-flex; align-items: center;
  height: 22px; padding: 4px 8px;
  font-size: 12px; line-height: 1; font-weight: var(--fw-medium);
  border: none; border-radius: var(--r-full);
  white-space: nowrap; box-sizing: border-box;
}
.lt-chip--md { height: 26px; padding: 4px 10px; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   UTILITIES — single-purpose helpers that replace inline styles the
   product copy-pastes across many call sites. Pure layout/visual; no
   component identity. lt- prefixed, kebab-case (same convention as
   every block above).
   ═══════════════════════════════════════════════════════════════ */

/* Hairline divider — the 1px neutral-100 rule used to separate a card
   footer, a list row, or a section. --strong steps up to neutral-200 for
   the heavier seams (totals row, sheet headers). Use as a top border on the
   element below the seam, or as a standalone <div class="lt-divider"/>. */
.lt-divider {
  border-top: 1px solid var(--c-neutral-100);
}
.lt-divider--strong {
  border-top-color: var(--c-neutral-200);
}

/* Two-line clamp — the -webkit-box line-clamp recipe used on card titles,
   notification bodies, and expense descriptions. Truncates to 2 lines with
   an ellipsis; pair with min-width:0 inside a flex row so it can shrink. */
.lt-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   CARD COMPOSITION — the header / footer / field / price clusters the
   domain cards (Assignment · Job · Travel) and the detail screens
   copy-paste as inline flex. These compose with .lt-card and the
   utilities above; the title clamp is opt-in via .lt-clamp-2 so single-
   line titles (Travel carrier) and 2-line titles (Job/Assignment) share
   one header.
   ═══════════════════════════════════════════════════════════════ */

/* Header — leading MobileTile + title column, optional trailing slot.
   Default aligns to the top (multi-line titles); --center for a single
   title + trailing badge (AssignmentCard). */
.lt-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
  margin-bottom: var(--s-2);
}
.lt-card-header--center { align-items: center; }
.lt-card-header__text { flex: 1; min-width: 0; }   /* title + subtitle column */
.lt-card-header__title {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--c-neutral-900);
  line-height: 1.2;
  margin: 0;
}
.lt-card-header__subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-neutral-600);
  line-height: 1.4;
  margin: var(--s-1) 0 0;
}
.lt-card-header__trailing { margin-left: auto; flex-shrink: 0; }   /* badge / menu */

/* Footer — value/action row pinned under a neutral-200 seam. */
.lt-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-neutral-200);
}

/* Top accent rail — the detail-screen analogue of .lt-card--accent's left
   rail. 3px top border; hue via --lt-card-rail (defaults foundation-500). */
.lt-card--rail-top {
  border-top: 3px solid var(--lt-card-rail, var(--c-foundation-500));
}

/* Field grid — label-over-value pairs. 2-up by default; --3 for the
   detail-screen 3-up (Seat / Class / Confirm). Set columns here; the
   .lt-field atom is layout-agnostic so it also works in a flex row. */
.lt-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-2) var(--s-3);
}
.lt-field-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lt-field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-neutral-700);
  line-height: 1.3;
  margin: 0 0 var(--s-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lt-field__value {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-neutral-900);
  line-height: 1.3;
  margin: 0;
}

/* Price — amount + unit split ("$420" + "/hr"), baseline-aligned, tabular. */
.lt-price { display: inline-flex; align-items: baseline; gap: var(--s-1); }
.lt-price__amount {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--c-neutral-900);
  font-variant-numeric: tabular-nums;
}
.lt-price__unit {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-neutral-700);
}