/* ============================================================
   Ethan Lab — Mobile Responsive Layer  (lab-mobile.css)
   ------------------------------------------------------------
   Loaded on the 6 lab pages (today / asset / destiny /
   methodology / strategy / archive) via the
   <!-- mobile-css-start --> block, AFTER lab.css.

   Cascade note: on destiny & strategy this file is linked in
   <head> BEFORE their large inline <style> block, so component
   overrides for those two pages MUST use !important to win.
   This mirrors the house style of assets/mobile-fixes.css
   (the product-page mobile layer). Universal guards that don't
   collide with inline styles are left un-!important.

   Target: zero horizontal scroll at 320px–768px,
   iOS Safari + Android Chrome.
   ============================================================ */

/* ── 1. Universal guards (all lab pages, all widths) ───────── */

html, body {
  overflow-x: hidden;                 /* root safety net vs. any stray fixed-px child */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Media never wider than its column. SVGs all carry a viewBox,
   so height:auto preserves aspect ratio instead of distorting. */
.lab-page img,
.lab-page canvas,
.lab-page video { max-width: 100%; height: auto; }

/* Touch-target compliance — scoped to lab chrome only so the
   product pages' own mobile-fixes.css stays authoritative there. */
.lab-page a.btn,
.lab-page button,
.lab-page .btn,
.lab-page [role="button"] { min-height: 44px; }

/* iOS auto-zoom prevention: any lab input >=16px on phones. */
@media (max-width: 768px) {
  .lab-page input,
  .lab-page select,
  .lab-page textarea,
  .lab-match-form input[type="email"] { font-size: 16px !important; }
}

/* ── 2. Shared lab layout gaps (≤768px) ────────────────────── */
/* lab.css uses inconsistent breakpoints (600/640/720/760px) and
   has no single mobile contract. These rules give every lab page
   a predictable 768px breakpoint floor. */

@media (max-width: 768px) {
  /* Tighten section gutters so content gains usable width. */
  .lab-section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Any fixed-px SVG visual in lab.css scales to its column. */
  .lab-md-radar,
  .lab-sr-radar,
  .lab-match-rings-svg,
  .lab-match-gauge-svg { width: 100% !important; max-width: 360px !important; height: auto !important; }

  /* Email-match input had a hard 280px width. */
  .lab-match-form input[type="email"] { width: 100% !important; max-width: 100% !important; }

  /* Wide data tables: keep readable, scroll inside their wrapper
     rather than blowing out the page. */
  .lab-page table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── 3. Task 2 — destiny page (.lab-destiny) ───────────────── */
/* Root cause: flex children pinned at min-width:330px and a
   300px hero orb — both exceed the content box on 320–360px
   phones, forcing horizontal scroll. */

@media (max-width: 768px) {
  /* Hero orb: inner rings/core use inset:* so the whole orb
     scales cleanly from a single width/height change. */
  .lab-destiny .td-orb {
    width: min(300px, 76vw) !important;
    height: min(300px, 76vw) !important;
    flex: 0 0 auto !important;
  }

  /* Flex columns must be allowed to shrink & stack on phones. */
  .lab-destiny .td-sig,
  .lab-destiny .td-typecard,
  .lab-destiny .td-radar-side {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Reduce oversized flex gaps that pushed total width out. */
  .lab-destiny .td-hero { gap: 24px !important; }
  .lab-destiny .td-base,
  .lab-destiny .td-orbit-legs { gap: 16px !important; }

  /* Prose / chart blocks: never exceed the viewport. */
  .lab-destiny .td-narr,
  .lab-destiny .td-sum,
  .lab-destiny .td-bars { max-width: 100% !important; }

  /* 3 tiny stat tiles stay 3-up (collapsing looks worse) but
     tighten the gap so they fit a ~290px column. */
  .lab-destiny .td-cards { gap: 8px !important; }
}

/* Very small phones (≤360px): give the orb a touch more slack. */
@media (max-width: 360px) {
  .lab-destiny .td-orb {
    width: min(280px, 72vw) !important;
    height: min(280px, 72vw) !important;
  }
}

/* ── 4. Task 3 — strategy page (.lab-strategy) ─────────────── */
/* Root cause: hex-stage guas (min-width:170px) + 150px fixed
   yao SVGs, a 230px gauge SVG, and a 680px-min table. */

@media (max-width: 768px) {
  /* Hexagram stage: stack the two guas, let each gua shrink. */
  .lab-strategy .os-hex-stage { gap: 14px !important; }
  .lab-strategy .os-gua { min-width: 0 !important; width: 100% !important; max-width: 220px !important; }

  /* Yao bars: viewBox 0 0 150 16 → fluid width, height:auto
     keeps the thin-line aspect ratio. */
  .lab-strategy .os-yao,
  .lab-strategy .os-yao svg {
    width: clamp(110px, 56vw, 150px) !important;
    height: auto !important;
  }

  /* Gauge: viewBox 0 0 230 130 → scale proportionally. */
  .lab-strategy .os-gauge svg {
    width: min(230px, 66vw) !important;
    height: auto !important;
  }

  /* The 680px table already sits in .os-tbl-wrap{overflow-x:auto};
     pin the wrapper to the viewport so it scrolls, not the page. */
  .lab-strategy .os-tbl-wrap {
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Recover horizontal space: 22px → 16px side padding. */
  .lab-strategy .os-wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* Countdown: allow the digit clock to wrap/shrink instead of
     forcing a fixed row width. */
  .lab-strategy .os-cd { max-width: 100% !important; }
  .lab-strategy .os-cd-clock { flex-wrap: wrap !important; }
  .lab-strategy .os-cd-foot { gap: 8px !important; }
}
