/* ════════════════════════════════════════════════════════════════════
   HypeCity — Mobile Experience Layer
   dashboard/assets/css/mobile.css

   Created 2026-05-28 — end-to-end mobile overhaul (RASHMASH feedback:
   "the mobile experience is hard, it feels built for desktop").

   DESIGN CONTRACT — this file is purely ADDITIVE and DESKTOP-SAFE:
     • Every layout rule is gated by `@media (max-width: 640px)`
       (phones) so nothing here can affect the desktop layout.
     • The /analyze wizard rules are gated by the `.wizard-active`
       class, which mobile-wizard.js adds ONLY when the mobile media
       query matches — so desktop keeps the single-scroll form.
     • Loaded LAST on every surface (just before </head>, after each
       page's inline <style>) so it wins ties by document order — no
       !important needed except where a runtime-injected stylesheet
       (nav.js) would otherwise out-cascade us; those are noted inline.

   Standards enforced (WCAG 2.2 + mobile best practice):
     1. Touch targets >= 44x44px on standard interactive controls.
     2. Zero page-level horizontal scroll (overflow-x:clip — preserves
        position:sticky, unlike overflow:hidden which creates a scroll
        container and would break the sticky nav).
     3. Readable type — 16px body + 16px form controls (the 16px input
        floor is what stops iOS Safari from auto-zooming on focus).
     4. Thumb-zone primary CTAs (the /analyze wizard nav bar).
     5. Tap-not-hover (concept-terms are already click-to-open via
        concept-term.js; nav drawers are click; nothing here relies on
        :hover for primary interaction).
     6. Correct mobile keyboards (inputmode set in analyze.html markup).
   ════════════════════════════════════════════════════════════════════ */

/* ── Universal media fluidity (safe at all widths) ──────────────────── */
img, video, svg, canvas, iframe { max-width: 100%; }

/* ════════════════════════════════════════════════════════════════════
   PHONE LAYER  (<= 640px)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* 1 ── Zero page-level horizontal scroll.
         overflow-x:clip (not hidden) so the sticky nav keeps working.
         Inner scrollers like .compare-table-wrap keep their own
         overflow-x:auto and are unaffected. */
  body { overflow-x: clip; }

  /* 2 ── Readable type. 16px body floor; long strings wrap instead of
         pushing width. Intentional mono micro-labels keep their own
         explicit size (eyebrows, ticker, data-cell labels). */
  body { font-size: 16px; line-height: 1.55; overflow-wrap: break-word; }

  /* 3 ── Form controls: 16px floor (stops iOS zoom-on-focus) + 44px
         height. Selector specificity (0,3,1) beats .field-input (0,1,0),
         so no !important. Radios/checkboxes/range keep native sizing. */
  input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 96px; }

  /* 4 ── Touch targets >= 44px on the site's standard buttons + the
         standalone CTA links. Inline text links are left alone. */
  .btn-primary, .btn-secondary, .btn-ghost, .nav-cta,
  button[type="submit"], button[type="reset"],
  .tier-cta, .hc-mk-drawer-cta, .mp-alerts__cta, .founding-soft-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Filter pills / radio pills — chips: widen the hit area. */
  .pill { min-height: 38px; padding: 8px 16px; }
  .radio-pill label { min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* Footer + standalone nav link rows — enlarge tap area. */
  .tycoon-footer__link,
  footer nav a,
  .footer-col a,
  .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Details/summary accordions (founding FAQ, etc.) — tappable rows. */
  summary { min-height: 44px; }

  /* ── Homepage ──────────────────────────────────────────────────── */
  /* Hero CTAs stack vertically, full-width, thumb-friendly. */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas > a, .hero-ctas > button { width: 100%; }
  .hero-tertiary { text-align: center; }
  /* Trust strip + founding strip never exceed the viewport. */
  .trust-strip, .founding-soft-strip { max-width: 100%; }
  /* Site footer collapses to a single column on phones (was 2-col @720). */
  .footer-grid { grid-template-columns: 1fr; }

  /* ── Pricing / index tiers ─────────────────────────────────────── */
  /* Tiers already collapse to 1 column at <=560px; ensure each card's
     CTA is full-width and comfortably tall. (.tier-cta is width:100%
     already; min-height handled above.) */

  /* ── Market Pulse ──────────────────────────────────────────────── */
  /* Mover board to a single comfortable column on phones. */
  .mp-board { grid-template-columns: 1fr; }

  /* ════════════════════════════════════════════════════════════════
     /ANALYZE — sticky submit bar colour fix.
     The page's own @media(max-width:700px) makes .submit-sticky a fixed
     bottom bar but paints it with a LEFTOVER DARK-THEME background
     (rgba(8,13,10,.96)) — a dark slab on the cream theme. Repaint it to
     match. (When the wizard is active the wizard bar replaces it; this
     keeps it correct on the >640..700px sliver and as a fallback.) */
  .submit-sticky {
    background: var(--bg-paper, #F1EEE7);
    border-top: 1px solid var(--rule-default, #BFB6A4);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   /ANALYZE — PROGRESSIVE-DISCLOSURE WIZARD
   Gated entirely by `.wizard-active`, which mobile-wizard.js toggles on
   the <form> ONLY while the (max-width:640px) media query matches. On
   desktop the class is never present, so the form stays single-scroll.
   ════════════════════════════════════════════════════════════════════ */

/* Hide all step groups; reveal only the current one. Two sections can
   share a step (Goals + Compliance = step 4) — JS marks every element of
   the current step with .wiz-current. */
.wizard-active [data-wizard-step] { display: none; }
.wizard-active [data-wizard-step].wiz-current { display: block; }

/* The in-flow submit bar (Clear + Analyze) is superseded by the wizard
   bar's primary button — hide it while the wizard drives the form. */
.wizard-active .submit-bar { display: none; }

/* Extra bottom room so the fixed wizard bar never covers field content. */
.wizard-active { padding-bottom: 96px; }

/* ── Wizard navigation bar (thumb zone, fixed bottom) ──────────────── */
.wiz-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-paper, #F1EEE7);
  border-top: 1px solid var(--rule-default, #BFB6A4);
  box-shadow: 0 -6px 18px rgba(31, 29, 26, 0.10);
}
.wiz-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wiz-step-label {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-tertiary, #8B847A);
  white-space: nowrap;
}
.wiz-dots { display: flex; gap: 6px; flex: 1; justify-content: flex-end; }
.wiz-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule-default, #BFB6A4);
  transition: background .15s, transform .15s;
}
.wiz-dot.is-done { background: var(--brass, #8B6F3D); }
.wiz-dot.is-current { background: var(--brass, #8B6F3D); transform: scale(1.4); }
.wiz-actions { display: flex; gap: 10px; }
.wiz-back {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 20px;
}
.wiz-next {
  flex: 1 1 auto;
  min-height: 48px;
  justify-content: center;
}
/* When Back is hidden (step 1) Next spans the full bar. */
.wiz-back[hidden] + .wiz-next { width: 100%; }

/* Belt-and-suspenders: the wizard bar must never appear on desktop, even
   if the class lingers after a resize race. */
@media (min-width: 641px) {
  .wiz-bar { display: none !important; }
}