/* =============================================================================
   mobile.css — Global mobile/responsive layer for the user-facing site.

   Loaded LAST in base.html (after pwa-mobile-enhancements.css), site-wide, with
   NO media attribute so it self-gates internally and can win the cascade over
   page-specific stylesheets.

   DESIGN RULES (do not violate):
   - This file is ADDITIVE. Every rule except the opt-in utility-class
     DEFINITIONS below is wrapped in a max-width media query, so the layer is
     effectively inert on desktop (>1024px). Desktop must render unchanged.
   - Never edit existing design tokens; only consume them via var(--sf-*).
   - Prefer DELETING desktop inline style= attributes in templates (so existing
     responsive classes win) over piling on !important here. The .sf-stack-*
     utilities use scoped !important specifically to defeat inline grid styles
     that cannot be removed without template surgery.

   CANONICAL BREAKPOINTS (project convention going forward):
     PHONE        <= 640px   (primary stacking tier: 360 / 390 + large phones)
     TABLET       <= 1024px  (the 769–1024 portrait gap that breaks today)
     DESKTOP      >  1024px  (untouched)
     SMALL-PHONE  <= 400px   (true small-phone refinements only)
   Aligns with design-tokens.css --sf-breakpoint-md (768) / lg (1024). Author
   NEW rules only at 640 / 1024 / 400; do not mass-rewrite existing 480/576 rules.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. REUSABLE UTILITY CLASSES (unconditional definitions — pages opt in)
   -------------------------------------------------------------------------- */

/* Responsive page wrapper — replaces hard-coded max-width:1100/900/800 + fixed
   padding on page roots (integrations, team_dashboard, deliverability, …).
   Tune the ceiling per page with --sf-page-max. */
.sf-container-responsive {
  width: 100%;
  max-width: var(--sf-page-max, 1100px);
  margin-inline: auto;
  padding-inline: clamp(0.75rem, 4vw, 1.5rem);
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .sf-container-responsive { max-width: 100%; }
}

/* Auto-collapsing card grid. The min(floor,100%) guarantees a single column
   never overflows a 360px viewport. Override the floor with --sf-col-floor. */
.sf-grid-auto {
  display: grid;
  gap: var(--sf-grid-gap, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--sf-col-floor, 220px), 100%), 1fr));
}
@media (max-width: 640px) {
  .sf-grid-auto { grid-template-columns: 1fr; }
}

/* Force a multi-column grid to a single column. Authored WITH scoped !important
   so it defeats an inline `grid-template-columns: …` on the same element.
   Use -640 for content that may stay 2-col on small tablets, -1024 for layouts
   (e.g. list + fixed sidebar) that must stack across the whole tablet range. */
@media (max-width: 640px) {
  .sf-stack-640 { grid-template-columns: 1fr !important; }
  .sf-stack-640 > * { min-width: 0 !important; max-width: 100% !important; }
}
@media (max-width: 1024px) {
  .sf-stack-1024 { grid-template-columns: 1fr !important; }
  .sf-stack-1024 > * { min-width: 0 !important; max-width: 100% !important; }
}

/* Touch-target floor (opt-in). Apply to icon-only / small controls that fall
   below the 44px WCAG 2.5.5 target on mobile (e.g. kebab menus). */
.sf-touch {
  min-width: var(--sf-touch-target, 44px);
  min-height: var(--sf-touch-target, 44px);
}

/* Fluid type helpers (opt-in) — replace fixed mobile font-size overrides. */
.sf-fluid-h1   { font-size: clamp(1.5rem, 4.5vw, 2.5rem);  line-height: 1.15; }
.sf-fluid-h2   { font-size: clamp(1.25rem, 3.5vw, 1.875rem); line-height: 1.2; }
.sf-fluid-lead { font-size: clamp(1rem, 2.5vw, 1.25rem);   line-height: 1.5; }

/* -----------------------------------------------------------------------------
   2. SAFE GLOBAL GUARDS (low-risk, apply across the tablet range)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Replaced/embedded media should never exceed its container. */
  img, video, canvas, iframe { max-width: 100%; }
}

/* -----------------------------------------------------------------------------
   3. TABLET-PORTRAIT GAP (769–1024)  [Phase 2 — filled when pwa gating widens]
   -------------------------------------------------------------------------- */
/* (Defensive overflow/shrink mirrors land here.) */

/* -----------------------------------------------------------------------------
   4. PAGE-GROUP FIXES  (filled per phase; each keeps to targeted overrides)
   -------------------------------------------------------------------------- */
/* 4a. Marketing            — [Phase 3] */
@media (max-width: 1024px) {
  /* Footer link grid: an inline `grid-template-columns:repeat(5,1fr)` on
     .sf-mkt-footer-grid (marketing_layout.html) out-specifies the stylesheet's
     own collapse rules (tailwind-input.css L4416/L4513), so the 5-up grid never
     breaks on tablet/phone. Scoped !important restores the intended stacking;
     desktop (>1024) keeps the inline 5-column layout untouched. */
  .sf-mkt-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  /* Brand + newsletter top row stacks (inline 2fr 1fr -> single column). */
  .sf-mkt-footer-top { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
}
@media (max-width: 480px) {
  .sf-mkt-footer-grid { grid-template-columns: 1fr !important; }
}
/* 4b. Auth / Onboarding    — [Phase 4] */
/* 4c. Dashboard / Analytics— [Phase 5] */
/* 4d. Flows / Inbox        — [Phase 6] */
/* 4e. Settings / Integrations / Billing / Team — [Phase 7] */
/* Apollo/Seamless prospecting config: 2-up on desktop, single column on phones
   (replaces inline `grid-template-columns:1fr 1fr` in integrations.html). */
.sf-int-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .sf-int-form-2col { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   5. INTERACTION & SMOOTHNESS  (mobile/tablet feel; gated <=1024px so desktop
      is inert. Companion to the verified shell in tailwind-input.css 4851+.)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 5a. Snappy taps: kill the ~300ms double-tap-zoom delay and the grey tap
     flash on interactive controls (never on scroll/pan surfaces). Selectors are
     controls only; generic element selectors already cover most of the app. */
  a, button, input, select, textarea, label, summary,
  [role="button"], [role="tab"], [role="menuitem"], [tabindex],
  .sf-btn, .sf-sidebar-item, .sf-bottom-nav-item, .sf-mobile-menu-btn,
  .sf-cmdk-item, .dropdown-item {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 5b. Scroll containers: iOS momentum + overscroll containment so a fully
     scrolled menu/drawer/modal/palette never chains or rubber-bands into the
     page behind it (the "scroll feels off / page jumps" symptom). Selectors
     verified as the real scroll nodes. */
  .sf-sidebar-nav, .sf-drawer__body, .detail-panel,
  .sf-modal__body, .sf-cmdk-list, .sf-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .sf-scroll { overflow-y: auto; }

  /* 5c. Promote the elements that actually animate (transform/opacity) to their
     own GPU layer so open/close stays smooth on low-end phones. */
  .sf-sidebar, .sf-drawer, .sf-drawer-backdrop, .sf-sidebar-backdrop,
  .compose-overlay, .detail-panel {
    will-change: transform, opacity;
  }

  /* 5d. backdrop-filter: blur stutters the drawer/sidebar slide on budget GPUs;
     drop it on mobile (desktop keeps its blur). */
  .sf-drawer-backdrop, .sf-sidebar-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* 5e. Full-height sheet utility: 100dvh tracks the iOS URL-bar so a sheet never
   jumps/clips when it shows/hides. Apply to raw-100vh full-height overlays. */
.sf-fullsheet { height: 100vh; height: 100dvh; }