/*
 * OmniStrat mobile enhancement layer.
 *
 * Included from every product page (foundry / agora / cohorts /
 * matchmaking / compliance / taskforces / passport). Handles what
 * per-page media queries miss: nav, touch targets, form density,
 * grid reflow, safe-area insets, prevents horizontal scroll.
 *
 * Load ORDER matters — link this AFTER the page's inline <style>
 * so these rules win when they need to.
 */

/* ─── Global protections ──────────────────────────────────────── */
html, body {
  overflow-x: hidden;                             /* no horizontal jitter */
  -webkit-text-size-adjust: 100%;                 /* prevent iOS auto-zoom */
  text-size-adjust: 100%;
}
* { -webkit-tap-highlight-color: rgba(0,0,0,0);  /* no blue flash on tap */ }
a, button { touch-action: manipulation; }         /* faster tap response */

/* Respect iOS notch + Android nav bar */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  nav { padding-top: env(safe-area-inset-top) !important; }
  footer { padding-bottom: max(env(safe-area-inset-bottom), 32px) !important; }
}

/* ─── Tablet breakpoint (≤900px) ──────────────────────────────── */
@media (max-width: 900px) {
  /* Any 2/3/4 col grid collapses to single column */
  .stats-grid, .stat-cell,
  .cards, .actions, .sides, .verticals, .entry-grid,
  .form-row, .form-row.wide, .price, .scope-grid,
  .why-grid, .promise-grid, .pillars, .tiers,
  .flow, .how, .prov-grid {
    grid-template-columns: 1fr !important;
  }
  /* Reduce hero font weight for readability */
  .hero h1, .head h1 { font-size: clamp(28px, 8vw, 44px) !important; letter-spacing: -0.02em !important; }
  .hero .lede, .head .lede { font-size: 15px !important; }
}

/* ─── Phone breakpoint (≤640px) — the main work ────────────────── */
@media (max-width: 640px) {

  /* Container padding tightens on phone so content isn't squeezed */
  .container { padding: 0 16px !important; }

  /* ── NAV — collapse horizontal to compact, still-usable strip ── */
  nav .row {
    padding: 12px 16px !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  nav .logo { font-size: 14px !important; }
  nav .logo .mark { width: 18px !important; height: 18px !important; }
  nav .right {
    gap: 10px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav .right::-webkit-scrollbar { display: none; }
  nav .right a { font-size: 13px !important; white-space: nowrap; }
  nav .right a.btn-nav, nav .right .btn-nav {
    padding: 6px 10px !important; font-size: 12px !important;
  }
  /* Hide low-priority nav items on tiny screens if the container is very narrow */
  @media (max-width: 380px) {
    nav .right a:not(.btn-nav):first-of-type { display: none; }
  }

  /* ── HERO / HEAD — tighter typography, tighter margins ─────────── */
  .hero, .head { padding-top: 40px !important; margin-bottom: 32px !important; }
  .hero h1, .head h1 {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }
  .hero .lede, .head .lede { font-size: 14.5px !important; line-height: 1.5 !important; }
  .hero .cta { flex-direction: column; align-items: stretch; gap: 8px !important; }
  .hero .cta .btn, .hero .cta a { width: 100%; text-align: center; }

  /* ── SECTION HEADS ─────────────────────────────────────────────── */
  .sect { margin-top: 40px !important; }
  .sect-head { padding-bottom: 10px !important; margin-bottom: 16px !important; }
  .sect-head h2 { font-size: 19px !important; }
  .sect-head .sub { font-size: 10.5px !important; }

  /* ── CARDS / STATS — mobile density ────────────────────────────── */
  .card, .stat-cell, .action, .entry, .vertical, .scope, .price-tile, .moat,
  .chain-preview, .chain-preview .row {
    padding: 18px 18px !important;
  }
  .stat-cell .value { font-size: 24px !important; }
  .stat-cell .label { font-size: 10.5px !important; margin-bottom: 10px !important; }
  .stat-cell .meta { font-size: 11px !important; }

  /* ── BUTTONS — hit target ≥44px per Apple HIG ──────────────────── */
  .btn, button.btn, .btn-primary, .btn-signout, .btn-nav, .btn-amber {
    min-height: 44px !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
  }
  /* Compact buttons still need reasonable height */
  .btn[style*="padding: 4px"], .btn[style*="padding: 5px"],
  .btn[style*="padding: 6px"], .btn[style*="padding: 7px"] {
    min-height: 36px !important;
    padding: 8px 12px !important;
  }

  /* ── FORM CONTROLS — mobile-native sizing ──────────────────────── */
  input, select, textarea {
    font-size: 16px !important;                    /* prevents iOS auto-zoom on focus */
    padding: 12px 14px !important;
    min-height: 44px !important;
  }
  textarea { min-height: 100px !important; }
  label { display: block; margin-bottom: 12px; }

  /* ── PASSPORT CARD — scale gracefully ──────────────────────────── */
  .passport-card {
    max-width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 220px !important;
  }
  .passport-card .card-layer { padding: 20px 20px !important; }
  .passport-card .card-body { grid-template-columns: 60px 1fr !important; gap: 12px !important; }
  .passport-card .identicon { width: 60px !important; height: 60px !important; }
  .passport-card .identity .name { font-size: 18px !important; }
  .passport-card .identity .email { font-size: 10.5px !important; }
  .passport-card .card-tier { font-size: 9px !important; padding: 3px 8px !important; }
  .passport-card .card-brand { font-size: 10px !important; }
  .passport-card .ent-chip { font-size: 9px !important; padding: 2px 6px !important; }
  .passport-card .field-mini { font-size: 8px !important; }
  .passport-card .field-mini .v { font-size: 10.5px !important; }
  .passport-card .watermark { font-size: 140px !important; }

  /* ── FEATURE LIST rows (Your Access) ───────────────────────────── */
  .feat-item {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 16px 18px !important;
  }
  .feat-item .body { min-width: 0; }
  .feat-item .nm { font-size: 14.5px !important; }
  .feat-item .det { font-size: 12.5px !important; line-height: 1.5 !important; }
  .feat-item .show-passport { width: 100%; text-align: center; }

  /* ── LISTS (attestations, cohorts, matches, apps) ──────────────── */
  .att-row, .cohort, .match-row, .tf-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px 16px !important;
  }

  /* ── PRICING TIER CARDS ────────────────────────────────────────── */
  .tier { padding: 20px 22px !important; }
  .tier .price { font-size: 24px !important; }
  .cathedral, .cta-strip {
    padding: 24px 22px !important;
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
  .cath-features { grid-template-columns: 1fr !important; }

  /* ── FOOTER stacked vertically ─────────────────────────────────── */
  footer .row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }
  footer { padding: 24px 0 !important; }

  /* ── CODE BLOCKS scroll horizontally on mobile ────────────────── */
  .code, .codeblock, pre {
    font-size: 12px !important;
    padding: 14px 16px !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── INLINE DRAWERS (charter/join forms) tighten ──────────────── */
  #startForm, #joinForm, #candidateForm, #roleForm,
  #chainArtifactForm, #urlArtifactForm, #charterForm,
  #approvalForm, #memoryForm {
    padding: 18px 18px !important;
  }

  /* ── TAG CHIPS / STATUS PILLS remain legible ──────────────────── */
  .chip, .status, .tier-chip, .locked-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
    letter-spacing: 0.06em !important;
  }

  /* ── DIALOG / MODAL scroll containers respect viewport ────────── */
  main { padding-bottom: 64px !important; }
}

/* ─── Small phone (≤380px) — final tightening ─────────────────── */
@media (max-width: 380px) {
  .container { padding: 0 12px !important; }
  .hero h1, .head h1 { font-size: 26px !important; }
  .sect-head h2 { font-size: 17px !important; }
  .card, .stat-cell, .action, .entry, .vertical, .scope, .price-tile {
    padding: 14px 14px !important;
  }
  .stat-cell .value { font-size: 22px !important; }
  nav .logo { font-size: 13px !important; }
  nav .logo span:not(.mark) { display: none; }        /* logo mark only, no wordmark */
  nav .right a:not(.btn-nav) { display: none; }        /* only Passport btn remains */
}

/* ─── Landscape orientation on phone — reclaim vertical space ── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero, .head { padding-top: 20px !important; margin-bottom: 20px !important; }
  .sect { margin-top: 28px !important; }
  main { padding-top: 20px !important; padding-bottom: 40px !important; }
}

/* ─── High-DPI displays: tighten borders + shadows ─────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card, .stat-cell, .action, .entry, .vertical, .scope, .price-tile { border-width: 0.5px; }
}

/* ─── Prefers-reduced-motion respected everywhere ──────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}