/* ==========================================================================
   VisualEyes — responsive.css
   SHARED responsive foundation. Loaded by EVERY page AFTER that page's own
   stylesheet(s) / inline <style> so its mobile @media rules can layer on top.

   CONTRACT (do not break — 6 page agents depend on this):
     Breakpoints:  phone  <= 480px
                   tablet 481px .. 1024px
                   desktop > 1024px
     The exact media boundaries to copy verbatim are documented in
     docs/RESPONSIVE_SPEC.md.

   DESIGN RULE: additive + low-specificity only. Desktop (> 1024px) must look
   EXACTLY as before. All appearance changes are gated behind @media (mobile
   widths) or @media (pointer:coarse) so pointer-precise desktops are untouched.
   Palette is NOT redefined here — colours stay owned by the page stylesheets.
   ========================================================================== */

/* ---- 1. Universal safety (harmless on desktop) --------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  overflow-x: hidden;            /* kill sideways scroll from stray wide nodes */
  -webkit-text-size-adjust: 100%;/* stop iOS auto-inflating text on rotate     */
}

img,
svg,
video,
canvas { max-width: 100%; height: auto; }

/* Media that must keep an intrinsic aspect (icons in flex rows) can opt out
   with .ve-fixed — height:auto above would otherwise squash them. */
.ve-fixed { max-width: none; height: revert; }

/* ---- 2. Safe-area insets (iPhone notch / home indicator) ----------------- *
 * Requires the page viewport meta to include ", viewport-fit=cover".
 * We pad the BODY by the inset amount so fixed/edge content clears the notch.
 * Values are added to whatever margin/padding the page already sets, via the
 * safe-area env(); on non-notched devices env() resolves to 0 -> no change.
 * A page that wants a specific element (sticky header, bottom bar) to honour
 * the inset should use the .ve-safe-* helpers below instead of relying on body. */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* Opt-in helpers for edge-anchored UI (sticky headers, bottom action bars): */
.ve-safe-top    { padding-top:    env(safe-area-inset-top, 0px); }
.ve-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.ve-safe-x {
  padding-left:  env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ---- 3. Fluid typography -------------------------------------------------- *
 * Root scale that GROWS toward desktop and never drops the desktop size below
 * the historical 16px. clamp(min, fluid, max): on wide screens it pins at 16px
 * (== today's default), only shrinking gently on very narrow phones. Because
 * page CSS mostly sizes in px this is a gentle backstop, not a redesign. */
:root { font-size: clamp(15px, 0.9rem + 0.25vw, 16px); }

/* ---- 4. Overflow-safe wide content --------------------------------------- *
 * Wrap any wide table / <pre> / diagram in <div class="ve-scroll-x"> … </div>
 * to get local horizontal scrolling instead of blowing out the viewport. */
.ve-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
}

/* Base backstop so raw <pre>/<table>/<code> can't force a wider-than-viewport
   page even if an agent forgets to wrap them. */
pre,
table { max-width: 100%; }
pre,
code { overflow-wrap: anywhere; word-break: break-word; }
pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- 5. Touch targets (coarse pointers only — desktop untouched) --------- *
 * Guarded behind pointer:coarse so mouse/trackpad desktops keep exact sizing.
 * Gives buttons, link-buttons, inputs and challenge tiles a >= 44x44 hit area
 * (Apple HIG / Material minimum). Uses min-height + min-width, not fixed size,
 * so existing padding/label layout is preserved; only grows undersized targets. */
@media (pointer: coarse) {
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  a.btn,
  .ve-tap {
    min-height: 44px;
    min-width: 44px;
  }

  /* Text inputs / selects: comfortable height + 16px font so iOS Safari does
     NOT zoom the page when the field is focused (its <16px zoom trigger). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    min-height: 44px;
    font-size: max(16px, 1em);
  }

  /* Challenge grid tiles — the core interaction. Keep them tappable. */
  .tile,
  .cell,
  .ve-tile {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ---- 6. Layout utility classes (opt-in — agents apply these) ------------- */

/* Collapse any multi-column grid/flex row to a single column on phones. */
@media (max-width: 480px) {
  .ve-stack-phone {
    display: block !important;
  }
  .ve-stack-phone > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Grid variant: keep it a grid but force one column (preserves gap). */
  .ve-grid-1-phone {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Per-device show/hide. Paired with device.js html classes for JS-free use we
   rely on width; combine with .ve-phone etc. if you need pointer/OS nuance. */
.ve-only-phone,
.ve-only-tablet { display: none; }
@media (max-width: 480px)                        { .ve-only-phone  { display: revert; } .ve-hide-phone  { display: none !important; } }
@media (min-width: 481px) and (max-width:1024px) { .ve-only-tablet { display: revert; } .ve-hide-tablet { display: none !important; } }
@media (min-width: 1025px)                       { .ve-hide-desktop{ display: none !important; } }

/* Full-width block button pattern for phones (opt-in). */
@media (max-width: 480px) {
  .ve-block-phone { display: block; width: 100%; }
}

/* ---- 7. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}