/* Page-level layout system, applied by .stage to every screen (search-setup, loading,
   search-confirmation, and — by default, until a future screen documents an exception —
   lead-review/saved/passed too).

   Two independent values, both sourced from Figma frame measurements (not visual estimation):
   - Horizontal page padding: the inset from the viewport edge to the usable content column.
   - Vertical page gap: the space between major top-level groups on a screen (Global Nav Header
     to first content group, between sibling top-level groups, last content group to Global Nav
     Footer). Global Nav Header/Footer are page chrome rendered once in the shell (outside
     .stage), so this gap/padding is what reproduces their Figma spacing now that they're no
     longer nested inside each screen.

   This is intentionally different from a *screen-composition frame's own local gap* (see
   .lead-experience below) — Figma groups some modules into their own Auto Layout frame with a
   fixed gap that does NOT scale by breakpoint; only the page-level gap here does. See CLAUDE.md
   "Layout & composition system" for the full breakdown. */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 32px 16px; /* Mobile: 16px sides, 32px top/bottom */
  gap: 32px;
}

/* Tablet: 768-1279px */
@media (min-width: 768px) {
  .stage {
    padding: 48px 40px;
    gap: 48px;
  }
}

/* Laptop: 1280-1439px (vertical gap stays 48px — only horizontal padding changes here) */
@media (min-width: 1280px) {
  .stage {
    padding: 48px 80px;
  }
}

/* Desktop: 1440px+ */
@media (min-width: 1440px) {
  .stage {
    padding: 64px 120px;
    gap: 64px;
  }
}

/* "Lead experience" — Content Banner + Search Prompt screen-composition frame (Figma's own
   layer name; Loading's equivalent frame is named "Loading State" but is the same pattern:
   Loading indicator + Content Banner). This grouping's own internal gap is a fixed 32px at
   every breakpoint — verified against Figma frame measurements at Mobile/Tablet/Laptop/Desktop,
   all four measure 32px. It does NOT scale with the page-level gap above, because it's a
   distinct Auto Layout frame with its own local spacing, not "space between major page groups."
   Shared by Search Setup, Loading, and Search Confirmation. */
.lead-experience {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* Search Prompt fills its container up through Tablet; only Laptop/Desktop cap its width
   (Figma: 740px laptop, 792px desktop) so it doesn't stretch the full Lead experience row. */
@media (min-width: 1280px) {
  .lead-experience .search-prompt {
    max-width: 740px;
  }
}

@media (min-width: 1440px) {
  .lead-experience .search-prompt {
    max-width: 792px;
  }
}

/* Search Parameter (Search Confirmation only) narrows at every breakpoint above Mobile
   (Figma: 512px tablet, 550px laptop, 588px desktop). Scoped to its one screen context here,
   rather than baked into the module's own default width, per the module/screen split in
   CLAUDE.md ("screen controls placement, module controls internal presentation"). */
@media (min-width: 768px) {
  #search-confirmation .search-parameter {
    max-width: 512px;
  }
}

@media (min-width: 1280px) {
  #search-confirmation .search-parameter {
    max-width: 550px;
  }
}

@media (min-width: 1440px) {
  #search-confirmation .search-parameter {
    max-width: 588px;
  }
}

/* Screen / Lead Review — "Lead experience" here groups Content Banner + Undo CTA + Lead Card.
   Its local gap is 24px at Mobile but 32px at Tablet and above — confirmed via Figma frame
   measurements. This is a genuine per-screen exception to the otherwise-constant 32px used by
   Search Setup/Loading/Search Confirmation's own "Lead experience" frame (verified constant
   there at every breakpoint) — do not assume the two screens share one rule. */
#lead-review .lead-experience {
  gap: 24px;
}

@media (min-width: 768px) {
  #lead-review .lead-experience {
    gap: 32px;
  }
}

/* Lead Card narrows above Mobile, reusing the same breakpoint scale already established for
   Search Parameter's card (512 tablet / 550 laptop / 588 desktop) rather than inventing a new
   one — confirmed as an identical scale via Figma measurements. Scoped to this one screen
   context, not baked into the module's own default width. */
@media (min-width: 768px) {
  #lead-review .lead-card {
    max-width: 512px;
  }
}

@media (min-width: 1280px) {
  #lead-review .lead-card {
    max-width: 550px;
  }
}

@media (min-width: 1440px) {
  #lead-review .lead-card {
    max-width: 588px;
  }
}

/* Floating Lead Actions — screen/page-shell positioning only; .lead-actions itself (padding,
   gap, radius, shadow) is completely untouched, per CLAUDE.md's module/screen split.

   Two distinct regimes, per product decision:
   1. While actively scrolling through the current lead ("floating/sticky review control"):
      position: sticky with bottom offset preserving 32px of clearance above the safe area —
      the dock stays pinned near the viewport bottom, which is expected to overlap card content
      while there's more of the card still to scroll through (inherent to any bottom-anchored
      floating control, not something margin tricks can or should suppress).
   2. Once scrolled to the true end of Lead Review's content ("natural/end-of-content"): the dock
      is a plain, unshifted flex item — no negative margin. It releases from sticky and settles
      into equal-spacing composition (Lead Card → Lead Actions → Footer), described below.

   No dock-specific margin/offset here (previously an ad-hoc -56px overlap + 152/160px Lead Card
   margin-bottom) — removed because the equal-spacing composition falls out of the *existing*
   page-level system for free once nothing fights it:
     - #lead-review is .stage, so its own flex `gap` (the established page-level vertical gap —
       32/48/48/64px) already sits between .lead-experience (which ends exactly at Lead Card's
       own bottom edge — Lead Card is its last child with no trailing padding) and this dock.
     - #lead-review's own padding-bottom (that same page-level gap) already sits between the dock
       and the Global Navigation Footer that follows it in the shell.
   Both gaps are therefore identically the page-level gap already derived from Figma elsewhere —
   equal by construction, not a new invented number. */
.lead-review__actions-dock {
  display: flex;
  justify-content: center;
  width: 100%;
  position: sticky;
  bottom: calc(32px + env(safe-area-inset-bottom));
  pointer-events: none;
}

.lead-review__actions-dock .lead-actions {
  pointer-events: auto;
}

/* Lead Review's Circle CTA/CTA sizing within Lead Actions now correctly follows the primitives'
   own established responsive sizing (48px Mobile / 56px Tablet+) at every breakpoint — confirmed
   via a fresh Figma re-query after the source was corrected to use the Mobile Circle CTA variant
   on Mobile screens. No override needed here; this comment just records that it was verified,
   not assumed. */

/* Screens / Saved + Passed — "Leads" list container. No screen-composition-frame override
   needed here: Content Banner → Leads spacing in Figma exactly matches the default page-level
   gap (64/48/48/32 desktop/laptop/tablet/mobile) at every breakpoint, so plain .stage flow
   already reproduces it. List items stack with zero gap between them (each Lead List Item's own
   divider/padding creates the visual separation — see components.css), and the column narrows
   above Mobile using the same breakpoint scale already established for Lead Card/Search
   Parameter (512 tablet / 550 laptop / 588 desktop), confirmed via Figma frame measurements. */
.leads-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 768px) {
  .leads-list {
    max-width: 512px;
  }
}

@media (min-width: 1280px) {
  .leads-list {
    max-width: 550px;
  }
}

@media (min-width: 1440px) {
  .leads-list {
    max-width: 588px;
  }
}

/* Lead Detail Modal's Lead Card narrows using that same established scale, matching Figma's
   Modal frame width per breakpoint (identical numbers to .leads-list/#lead-review .lead-card —
   confirmed independently, not assumed). */
.lead-detail-modal .lead-card {
  width: 100%;
}

@media (min-width: 768px) {
  .lead-detail-modal .lead-card {
    max-width: 512px;
  }
}

@media (min-width: 1280px) {
  .lead-detail-modal .lead-card {
    max-width: 550px;
  }
}

@media (min-width: 1440px) {
  .lead-detail-modal .lead-card {
    max-width: 588px;
  }
}

/* Screen / Loading — heart icon above the Content Banner (indeterminate state, no
   progress/timing implied by the mark itself). The real asset is the supplied Loading.io
   "lds-heart" animation (static/js/modules/loadingIndicator.js), sized to its own native 80x80
   box rather than the earlier 48x48 FPO placeholder — that size was explicitly a stand-in, not a
   design decision to preserve. Rules below are the supplied Loading.io CSS unmodified except for
   being scoped under .loading__icon (this screen's existing wrapper) so the generic .lds-heart
   class name can't leak into/collide with anything else; color comes from currentColor via
   .loading__icon so light/dark follow the existing --accent-base token automatically. */
.loading__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  color: var(--accent-base);
}

.loading__icon .lds-heart,
.loading__icon .lds-heart div,
.loading__icon .lds-heart div:after,
.loading__icon .lds-heart div:before {
  box-sizing: border-box;
}

.loading__icon .lds-heart {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  transform-origin: 40px 40px;
}

.loading__icon .lds-heart div {
  top: 28px;
  left: 28px;
  position: absolute;
  width: 32px;
  height: 32px;
  background: currentColor;
  animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loading__icon .lds-heart div:after,
.loading__icon .lds-heart div:before {
  content: " ";
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  background: currentColor;
}

.loading__icon .lds-heart div:before {
  left: -24px;
  border-radius: 50% 0 0 50%;
}

.loading__icon .lds-heart div:after {
  top: -24px;
  border-radius: 50% 50% 0 0;
}

@keyframes lds-heart {
  0% {
    transform: scale(0.95);
  }
  5% {
    transform: scale(1.1);
  }
  39% {
    transform: scale(0.85);
  }
  45% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading__icon .lds-heart div {
    animation: none;
  }
}