/* ============================================================================
   SWORT responsive layer
   ---------------------------------------------------------------------------
   Loaded after tokens.css and after page-level styles, so it can correct
   layouts that were authored with fixed values.

   Two rules govern everything here:
     1. Nothing may cause horizontal scrolling at 320 CSS pixels.
     2. Components respond to the space they are GIVEN (container queries),
        not only to the viewport, so the same card behaves correctly in a
        sidebar, a two-column grid, and a full-bleed row.
   ========================================================================= */

/* ── Global overflow safety ─────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body { max-width: 100%; overflow-x: clip; }

/* Media and embeds can never exceed their box. */
img, svg, video, canvas, iframe, model-viewer {
  max-width: 100%;
  height: auto;
}

/* Tables and pre are the classic 320px overflow sources. */
pre, table { max-width: 100%; overflow-x: auto; }

/* ── Fluid container ────────────────────────────────────────────────────── */

.container,
.l-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Body copy must not stretch across ultrawide displays. */
.s-lede, .p-hero-body, .c-hero-body, .net-copy, .part-lede,
.affil-lede, .lab-lede, .found-note, .t-founder-bio p, .p-cell-body {
  max-inline-size: var(--measure-prose);
}

/* ── Container queries ──────────────────────────────────────────────────── */

.p-grid, .c-theme-grid, .c-work-grid, .c-signal-list,
.capabilities-grid, .standards-grid, .engage-grid,
.found-grid, .affil-grid, .part-grid, .t-affil-list,
.p-form-grid, .form-grid, .c-opp-list {
  container-type: inline-size;
}

/* Cards reflow on the width they actually receive. */
@container (max-width: 560px) {
  .p-cell, .c-theme, .c-work, .found-item, .affil-item, .part-card, .t-affil {
    padding-inline: var(--space-md);
    padding-block: var(--space-md);
  }
}

@container (max-width: 420px) {
  .p-cell-title, .c-theme-title, .affil-mark-text, .found-v {
    font-size: var(--type-body-large);
    line-height: var(--leading-snug);
  }
}

/* Forms collapse to one column on the space they are given, not the viewport. */
@container (max-width: 620px) {
  .p-form-grid, .form-grid { grid-template-columns: 1fr !important; }
  .p-field.full, .form-field.full { grid-column: 1 !important; }
}

/* Definition rows stack when narrow. */
.p-rows, .g-entity { container-type: inline-size; }
@container (max-width: 600px) {
  .p-row, .g-row { grid-template-columns: 1fr !important; gap: var(--space-2xs) !important; }
}

/* ── Grid fallbacks. Applied where container queries are unsupported and as
      an outer bound regardless. ─────────────────────────────────────────── */

@media (max-width: 1000px) {
  .p-grid-3, .c-work-grid, .c-signal-list, .affil-grid, .t-affil-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .found-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .p-grid-2, .p-grid-3,
  .c-theme-grid, .c-work-grid, .c-signal-list,
  .capabilities-grid, .standards-grid, .engage-grid,
  .found-grid, .affil-grid, .part-grid, .t-affil-list,
  .net-row, .p-form-grid, .form-grid {
    grid-template-columns: 1fr;
  }
  .p-field.full, .form-field.full { grid-column: 1; }
}

/* ── Typography scale binding ───────────────────────────────────────────── */

body { font-size: var(--type-body); line-height: var(--leading-body); }

.p-title, .c-hero-title { font-size: var(--type-section); line-height: var(--leading-tight); }
.s-head, .affil-title, .part-title, .lab-title,
.section-title, .ssil-intro-head, .net-head {
  font-size: var(--type-subhead);
  line-height: var(--leading-snug);
}
.p-eyebrow, .s-label, .section-kicker, .c-label,
.found-k, .affil-mark-full, .t-founder-role {
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-mega);
}

/* ── Section rhythm ─────────────────────────────────────────────────────── */

.s-paper, .s-black, .s-charcoal,
#capabilities, #process, #standards, #ssil, #ssil-sim,
#pricing, #intake, #foundation, #partnerships, #affiliations,
#network, #careers, #mission, #how-we-work, #opportunities,
#signal, #application, #entity, #procurement, #requirement,
#thesis, #evidence, #milestones, #capital, #investor-access,
#paths, #areas, #sponsor, #proposal, #also, #founder, #structure, #join {
  padding-block: var(--section-pad-block);
}

/* ── Touch targets ──────────────────────────────────────────────────────── */

.p-btn, .c-btn, .p-btn-full, .btn-primary, .btn-secondary, .btn-full,
.net-btn, .found-cta, .part-cta, .c-opp-cta, .t-link, .swc-btn, .swl-btn,
.nav-cta, .p-nav-cta, .mobile-nav-link, button[type="submit"] {
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buttons must never exceed the viewport. */
.p-btn, .c-btn, .btn-primary, .btn-secondary {
  max-width: 100%;
  overflow-wrap: break-word;
}

.p-field input, .p-field select, .p-field textarea,
.form-field input, .form-field select, .form-field textarea,
.net-input {
  min-height: var(--control-min-height);
  font-size: max(1rem, var(--type-data));  /* >=16px stops iOS zoom-on-focus */
}
.p-field textarea, .form-field textarea { min-height: calc(var(--control-min-height) * 2.5); }

/* Coarse pointers get more generous hit areas. */
@media (pointer: coarse) {
  .p-nav-links a, .nav-links a, .footer-legal-link, .p-foot-col a, .l-nav-links a {
    padding-block: var(--space-xs);
    display: inline-block;
  }
}

/* ── Sticky nav must not hide anchor targets or focused controls ─────────── */

:root { --nav-h: 68px; }

[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-sm)); }

/* WCAG 2.2 focus-not-obscured: give focused elements room under sticky nav. */
main :focus-visible { scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }

/* At short viewports and high zoom a sticky bar eats the screen. Release it. */
@media (max-height: 520px), (max-width: 380px) {
  nav, .p-nav, .l-nav { position: static; }
}

/* ── Hero sizing that survives 320px and landscape phones ───────────────── */

#hero, .p-hero, .c-hero {
  min-height: auto;
  padding-block: var(--space-2xl) var(--space-xl);
}
@media (orientation: landscape) and (max-height: 520px) {
  #hero, .p-hero, .c-hero { padding-block: var(--space-lg); }
  .p-title, .c-hero-title { font-size: var(--type-subhead); }
}

/* ── Canvas: aspect-ratio boxes, never full-screen on phones ─────────────── */

#sim-canvas, #proc-rocket, #sensor-canvas, .nav-backdrop {
  max-width: 100%;
  display: block;
}

@media (max-width: 720px) {
  /* Cap decorative canvas height so it never dominates a phone screen. */
  #sensor-canvas { height: clamp(180px, 42vw, 240px) !important; }
  #sim-canvas    { max-height: 52vh; }
  /* The GNSS backdrop is decoration; drop it where it costs more than it adds. */
  .nav-backdrop  { display: none; }
}

/* Reduced motion: keep the visuals, remove the animation. */
@media (prefers-reduced-motion: reduce) {
  .nav-backdrop { display: none; }
}

/* ── Zoom and reflow ────────────────────────────────────────────────────── */

/* At 320 CSS px (equivalent to 400% zoom on a 1280 viewport) every multi-column
   layout must be single column and nothing may overflow. */
@media (max-width: 400px) {
  [class*="grid"] { grid-template-columns: 1fr !important; }
  .p-hero-cta, .c-hero-cta, .pricing-cta-wrap, .p-rows { flex-direction: column; }
  .p-btn, .c-btn, .btn-primary, .btn-secondary { width: 100%; }
  .p-identity { flex-direction: column; align-items: flex-start; }
  .p-identity-rule { display: none; }
  .container, .l-container { padding-inline: var(--space-sm); }
}

/* ── Ultrawide: cap, do not stretch ─────────────────────────────────────── */

@media (min-width: 2000px) {
  .container, .l-container { max-width: var(--content-max-wide); }
  body { font-size: clamp(1.05rem, 0.6vw, 1.25rem); }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  nav, .p-nav, .l-nav, footer, .p-foot, .l-foot,
  .nav-backdrop, canvas, .swc-banner, .swl-backdrop, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .container { max-width: none; padding-inline: 0; }
}