/* SiftingSignal mobile CSS layer
 * ---------------------------------------------------------------------
 * Loaded on all user-facing pages; NOT on admin pages.
 *
 * Purpose:
 *   1. iOS safe-area handling for sticky/fixed elements
 *   2. Touch-action: manipulation (kills 300ms tap delay)
 *   3. Tap-highlight color sane defaults
 *   4. Mobile-only utilities (.mobile-only / .desktop-only / .mobile-stack)
 *   5. Mobile rhythm overrides (16px base, denser spacing)
 *   6. Sticky-bottom CTA pattern
 *
 * Hard constraints (BRAND_GUIDE.md):
 *   - No layout breakage at desktop (≥ 600px) — overrides are scoped to <600px
 *   - No "feature inertia" on small screens (no slide-out drawers, no FABs)
 *   - Touch targets ≥ 44×44, primary CTAs ≥ 48 tall
 *   - Don't undo A11Y agent's work (focus rings, prefers-reduced-motion)
 */

/* ---------- 1. iOS safe-area + viewport semantics ---------- */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Pages that lock 100vh need this for iOS dynamic toolbar */
@supports (height: 100dvh) {
  .mobile-vh100 { min-height: 100dvh; }
}
@supports not (height: 100dvh) {
  .mobile-vh100 { min-height: 100vh; }
}

/* Sticky elements: respect iOS home indicator */
.sticky-bottom {
  position: sticky;
  bottom: 0;
  padding-bottom: max(12px, var(--safe-bottom));
}
.sticky-bottom-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: max(12px, var(--safe-bottom));
  padding-left: max(0px, var(--safe-left));
  padding-right: max(0px, var(--safe-right));
}

/* Status-bar-area padding for top sticky elements */
.with-safe-top { padding-top: max(env(safe-area-inset-top), 0px); }

/* ---------- 2. Tap behavior ---------- */
button, a, [role="button"], input[type="submit"], input[type="button"], .ss-share__btn, .ss-bookmark__btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* For purely visual buttons, kill the highlight; for branded primary, keep a subtle one */
.btn-primary, .btn-secondary, .ss-share__btn {
  -webkit-tap-highlight-color: rgba(20, 184, 166, 0.12);
}

/* iOS scroll momentum on horizontal scrollers (timeline filter strip, sift table) */
.h-scroll, .mobile-h-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.h-scroll::-webkit-scrollbar, .mobile-h-scroll::-webkit-scrollbar { height: 4px; }
.h-scroll::-webkit-scrollbar-thumb, .mobile-h-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 2px;
}

/* ---------- 3. Utility classes ---------- */
.mobile-only { display: none; }
.desktop-only { display: initial; }
@media (max-width: 599px) {
  .mobile-only { display: initial; }
  .desktop-only { display: none !important; }
}

/* Stack child elements vertically below 600px */
.mobile-stack { display: flex; gap: 12px; }
@media (max-width: 599px) {
  .mobile-stack { flex-direction: column; align-items: stretch; }
}

/* Hide scrollbars on filter chips while keeping wheel-scroll working */
.mobile-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.mobile-chip-row::-webkit-scrollbar { display: none; }
.mobile-chip-row > * { scroll-snap-align: start; flex-shrink: 0; }

/* ---------- 4. Mobile rhythm overrides ---------- */
@media (max-width: 599px) {
  /* Bigger base font on mobile so iOS doesn't auto-zoom on inputs (need >= 16px) */
  html { font-size: 16px; }

  /* Tighter container gutters */
  .container, main { padding-left: 16px; padding-right: 16px; }

  /* Headings dial down 1 step so 320-px lines don't wrap awkwardly */
  h1 { font-size: 1.625rem; line-height: 1.25; letter-spacing: -0.015em; }
  h2 { font-size: 1.25rem; line-height: 1.3; }
  h3 { font-size: 1.0625rem; line-height: 1.35; }

  /* Body inputs must be >= 16px to prevent iOS auto-zoom */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* CTAs ≥ 48 tall on mobile (vs 40 desktop) */
  .btn-primary, .btn-secondary, .btn-cta, .btn {
    min-height: 48px;
    padding: 12px 20px;
  }

  /* Generic interactive targets ≥ 44 */
  nav a, footer a, .nav-link, .footer-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- 5. iOS auto-zoom prevention guard (defensive) ---------- */
/* Some pages declare their own font-size on inputs; this is a backstop. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 599px) {
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

/* ---------- 6. Sticky bottom CTA pattern ---------- */
.mobile-sticky-cta {
  position: sticky;
  bottom: 0;
  background: rgba(250, 250, 250, 0.96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-top: 1px solid #E4E4E7;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom)) 16px;
  z-index: 30;
}
@media (min-width: 600px) {
  .mobile-sticky-cta {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    padding: 0;
  }
}

/* ---------- 7. Horizontal overflow prevention ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
pre, code {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- 8. font-display: swap belt-and-braces ---------- */
/* Google Fonts already sets display=swap via the URL ?display=swap, but for any
 * locally-declared @font-face that future agents add, this rule serves as a
 * style-stage default. */

/* ---------- 9. prefers-reduced-motion safeguard ---------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-cta { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- 10. Off-canvas/menu safe-area utilities ---------- */
.with-safe-bottom { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.with-safe-pad {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-right: max(env(safe-area-inset-right), 16px);
  padding-bottom: max(env(safe-area-inset-bottom), 16px);
  padding-left: max(env(safe-area-inset-left), 16px);
}

/* ---------- 11. Tap-target padding helper ---------- */
/* Wrap small visual icons in a 44px hit area without growing visual size. */
.tap-target-44 {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 12. Bottom-nav offset for content ---------- */
/* When .has-bottom-nav is on <body>, give the main element enough breathing
 * room so the fixed nav doesn't overlap the last content row. */
@media (max-width: 599px) {
  body.has-bottom-nav main {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  body.has-bottom-nav .mobile-sticky-cta {
    bottom: calc(56px + env(safe-area-inset-bottom));
  }
}