/* ─────────────────────────────────────────────────────────
   SCORP² / METEORSTORM, Site-Wide Responsive System
   Single source of truth: fluid type/space scale, canonical
   breakpoints, mobile chrome behaviour, widescreen overrides.
   Loaded after each page's inline <style>, so it cascades
   on top of legacy rules without rewriting them.

   Canonical breakpoints (used everywhere going forward):
     XS  ≤480     phone portrait
     SM  481–767  large phone / phablet
     MD  768–1023 tablet portrait / small landscape
     LG  1024–1439 laptop
     XL  1440–1919 desktop
     XXL ≥1920    widescreen / 4K
   ───────────────────────────────────────────────────────── */

/* === Design tokens =====================================*/
:root {
  /* Fluid type scale: clamp(min, fluid, max) */
  --fs-xs:    clamp(10.5px, 0.20vw + 9px,  12px);
  --fs-sm:    clamp(12px,   0.25vw + 10.5px, 14px);
  --fs-base:  clamp(13px,   0.35vw + 11px, 16px);
  --fs-lg:    clamp(15px,   0.45vw + 12.5px, 19px);
  --fs-xl:    clamp(18px,   0.6vw + 14px, 24px);
  --fs-2xl:   clamp(24px,   1.2vw + 16px, 36px);
  --fs-3xl:   clamp(30px,   2vw + 20px, 56px);
  --fs-h2:    clamp(32px,   3vw + 18px, 78px);
  --fs-h1:    clamp(40px,   4vw + 22px, 96px);

  /* Fluid spacing scale */
  --space-2xs: clamp(4px,  0.2vw + 3px, 6px);
  --space-xs:  clamp(6px,  0.3vw + 5px, 10px);
  --space-sm:  clamp(8px,  0.5vw + 6px, 14px);
  --space-md:  clamp(12px, 0.8vw + 9px, 22px);
  --space-lg:  clamp(18px, 1.2vw + 12px, 32px);
  --space-xl:  clamp(24px, 1.6vw + 18px, 48px);

  /* Container widths, for prose / lead paragraphs.
     Use these as the canonical replacement for inline max-width:NNch. */
  --content-narrow: min(72ch, 96%);
  --content-base:   min(92ch, 96%);
  --content-wide:   min(120ch, 96%);
  --content-xwide:  min(140ch, 96%);

  /* Touch-target minimum (Apple HIG / Material guidance) */
  --tap-min: 44px;
}

/* === Modern viewport units =============================
   The deck containers (#deck, #pres.slide) use 100vh,
   which on mobile Safari includes the address-bar gap and
   causes content to be obscured. Prefer 100dvh where supported.
*/
#deck, #pres { height: 100vh; height: 100dvh; }

/* === Lead-paragraph fluid widths =======================
   Existing slides use inline `style="max-width:92ch"` (and 60ch,
   72ch, etc.). At widescreen (≥1440 / ≥1920) those caps look
   short relative to viewport. Override the most common variants
   with attribute-selector matches so we don't touch every file.
*/
@media (min-width: 1440px) {
  .lead[style*="max-width:92ch"].lead[style*="max-width: 92ch"].lead[style*="max-width:90ch"] {
    max-width: min(110ch, 100%) !important;
  }
}
@media (min-width: 1920px) {
  .lead[style*="max-width:92ch"].lead[style*="max-width: 92ch"].lead[style*="max-width:90ch"] {
    max-width: min(124ch, 100%) !important;
  }
}

/* === Canvas padding scaling ============================ */
@media (min-width: 1920px) {
  .canvas { padding: 32px 56px; }
}
@media (min-width: 2400px) {
  .canvas {
    padding: 48px 96px;
    max-width: 2400px;
    margin-inline: auto;
  }
}

/* === Mobile / portrait small-screen behaviour ==========
   ≤720px: collapse to single column where the deck's `.two`
   class lives, hide rails, tighten HUD bars, allow the
   normally-absolute slide to flow.
   The deck uses `position:absolute; inset:0` per slide, which
   means only the active slide is visible AND it can never
   exceed viewport height. On a phone that crops content. We
   switch to relative+scrollable so the user can read top→bottom.
*/
/* Scrollable / single-column reading mode.
   Triggered for: any viewport ≤720 (phones), AND any portrait viewport
   ≤1024 (tablets in portrait). On these, the 16:9-locked deck layout
   doesn't fit and we fall back to a vertical-scroll reading layout. */
@media (max-width: 720px),
       (max-width: 1024px) and (orientation: portrait) {
  /* Mobile / portrait-tablet: let the body scroll like a normal webpage
     instead of trapping scroll inside #deck. */
  html, body { overflow-x: hidden; height: auto; }
  body { overflow-y: auto; }
  #deck, #pres {
    height: auto;
    min-height: auto;
    overflow: visible;
  }
  .slide:not(.active) { display: none; }
  .slide.active {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    min-height: auto;
    overflow: visible !important;
  }

  /* Allow H1/H2 to wrap, desktop nowrap inline styles get overridden */
  .h1.h2 {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.05;
    font-size: clamp(28px, 8vw, 44px) !important;
  }
  .lead { font-size: var(--fs-base) !important; line-height: 1.45; }

  /* Canvas should not clip overflow on mobile (deck-style slides set
     overflow:hidden on .slide for transitions; mobile needs scroll) */
  .canvas { overflow: visible !important; }

  /* Tighter HUD bars */
  .hud-t { height: 38px; font-size: 10px; }
  .hud-b { height: 30px; font-size: 10px; letter-spacing: 0.12em; }

  /* Tighter canvas padding */
  .canvas { padding: 14px 14px; gap: 10px; }

  /* Hide side rails on phone */
  .rail { display: none !important; }

  /* Stage normally uses absolute positioning between fixed HUD bars
     (top:44px / bottom:36px). That collapses to 0 height when the
     slide goes relative on mobile. Switch to flow layout. */
  .stage {
    position: static !important;
    top: auto !important; bottom: auto !important;
    left: auto !important; right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    padding-top: 44px;   /* clear top HUD */
    padding-bottom: 36px;/* clear bottom HUD */
  }
  .canvas {
    position: static !important;
    width: 100% !important;
  }

  /* Force any column-grid to single column */
  .two.two.even.two.left-wide.two.right-wide,
  [data-responsive-collapse="md"] {
    grid-template-columns: 1fr !important;
    flex: 0 0 auto !important;       /* desktop uses flex:1 to fill viewport
, on mobile, content height instead */
  }
  /* Generic flex rows inside .canvas: stop trying to fill viewport vertically
     since the canvas is content-sized on mobile */
  .canvas > .r[style*="flex:1"].canvas > .r[style*="flex: 1"] {
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  /* Stop fixed widths from breaking layout */
  img, svg, video { max-width: 100%; height: auto; }
}

/* === Tablet portrait / small landscape =================
   721–1023px: keep two-up panels but tighten things.
*/
@media (min-width: 721px) and (max-width: 1023px) {
  .canvas { padding: 20px 22px; }
  [data-responsive-collapse="lg"] {
    grid-template-columns: 1fr !important;
  }
}

/* === Touch-friendly hit targets ========================
   Coarse pointer = touch device. Bump tap targets to 44px.
*/
@media (hover: none) and (pointer: coarse) {
  .menu-btn.nav-btn,
  button:not(.bare),
  a.btn.qbtn.pager > * {
    min-height: var(--tap-min);
    min-width:  var(--tap-min);
  }
}

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

/* === Print / PDF export =============================== */
@media print {
  .ambient.amb-stars.amb-grid.amb-grid-fine.amb-vignette.amb-noise.amb-corners { display: none !important; }
  .hud.nav-controls.pager { display: none !important; }
  #deck, #pres { height: auto; }
  .slide {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    page-break-after: always;
    break-after: page;
  }
  .slide:last-child { page-break-after: auto; }
}

/* === Image safety net ==================================
   Any raster image without explicit sizing should never
   overflow its parent on mobile.
*/
img { max-width: 100%; }

/* === Future: container queries =========================
   Marker for 2026-era CSS. Slides that opt-in via
   `data-cq` get container-query-based layout instead of
   viewport breakpoints. Apply on a case-by-case basis as
   the deck evolves.
*/
[data-cq] { container-type: inline-size; }