/* ─────────────────────────────────────────────────────────────────────────────
   Ananta — canonical responsive tokens.

   Source of truth for form-factor-aware layout across EVERY Ananta surface:
   Gurukul (reference implementation), Vidyut, the Ananta showcase, Kuber, and the
   future Satsang reader. Import once per app, then build mobile-first:

       <link rel="stylesheet" href="/static/css/responsive-tokens.css" />

   Apps that serve static from a different mount copy this file into their own static
   dir (keep it in sync — this file is the canonical version). Full pattern + the
   cross-form-factor test matrix: docs/design/responsive.md.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── breakpoints (real device widths, mobile-first) ──────────────────────────
     CSS custom properties CANNOT be used inside @media conditions, so these literal
     px values are the contract — mirror them exactly in your @media queries:
        sm   640px   large phone / small tablet
        md   768px   iPad portrait
        lg  1024px   iPad landscape / laptop
        xl  1440px   desktop
     Build base styles for the smallest screen, then layer min-width overrides up. */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* ── content container max-widths ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --reading-measure: 72ch;        /* cap long-form text columns for readability */

  /* ── spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── touch-target floor (Apple Human Interface Guidelines: 44×44 px) ── */
  --tap: 44px;

  /* ── iOS safe-area insets (notch / Dynamic Island / home indicator).
     Resolve to 0 on devices without insets, so they are always safe to add.
     Requires <meta name="viewport" content="..., viewport-fit=cover"> in the head. */
  --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);
}

/* ── reusable primitives (opt-in utility classes) ───────────────────────────── */

/* Full-height app shell that survives the iOS Safari dynamic URL bar. Plain 100vh on
   iOS counts the URL-bar area, pushing fixed footers (composers, tab bars) off-screen;
   100dvh excludes it. The 100vh line is the fallback for browsers without dvh. */
.rt-app-shell { height: 100vh; height: 100dvh; }

/* Every tappable target clears the 44px HIG floor. */
.rt-tap { min-height: var(--tap); min-width: var(--tap); }

/* The #1 mobile overflow bug: a grid/flex child has min-width:auto (= min-content), so a
   wide column refuses to shrink and forces the whole layout past the viewport (content
   then gets clipped and cut off). min-width:0 lets it shrink to its track. Apply to the
   flexible column(s) of any grid/flex layout. */
.rt-shrink { min-width: 0; }

/* Honor the notch on the leading/trailing edges and the home indicator at the bottom. */
.rt-safe-x {
  padding-left: max(var(--space-4), var(--safe-left));
  padding-right: max(var(--space-4), var(--safe-right));
}
.rt-safe-bottom { padding-bottom: max(var(--space-3), var(--safe-bottom)); }

/* Long-form text, inline math, and code must never force horizontal scroll. */
.rt-wrap { overflow-wrap: anywhere; }
.rt-scroll-x { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* Fluid headline that scales smoothly across form factors instead of stepping at
   breakpoints. Tune the middle term per surface. */
.rt-fluid-h { font-size: clamp(1.3rem, 1rem + 1.8vw, 2rem); }