/* ─────────────────────────────────────────────
   Covenant — shared mobile layer (loaded LAST on every page)
   Works with mobile.js, which injects .cv-burger + .cv-panel
   on pages that have a .nav-links but no native hamburger.
   ───────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
pre, code { overflow-wrap: anywhere; }
pre { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

/* Touch devices: no custom cursor, no hover-only affordances */
@media (hover: none), (pointer: coarse) {
  html, body, a, button { cursor: auto !important; }
  [id^="cursor"], .cursor, .cursor-ring, .cursor-dot { display: none !important; }
}

/* ── Injected hamburger + panel ────────────── */
.cv-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 44px; height: 44px; margin-left: auto; flex-shrink: 0; gap: 5px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; cursor: pointer; z-index: 1001; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.cv-burger span {
  display: block; width: 18px; height: 1.5px; background: #fff; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.cv-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cv-burger.open span:nth-child(2) { opacity: 0; }
.cv-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.cv-panel {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  flex-direction: column; gap: 6px; overflow-y: auto;
  background: rgba(0,0,0,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.cv-panel.open { display: flex; }
.cv-panel a, .cv-panel button {
  display: flex; align-items: center; min-height: 48px; padding: 12px 16px;
  font: 500 16px/1.2 Inter, -apple-system, system-ui, sans-serif; text-align: left;
  color: rgba(255,255,255,.78); background: transparent;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer; text-decoration: none;
}
.cv-panel a:active, .cv-panel a.active, .cv-panel button:active { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.cv-panel .cv-cta {
  justify-content: center; margin-top: 10px; color: #000; background: #fff; font-weight: 600;
}
.cv-panel.light { background: rgba(245,244,240,.98); border-top-color: rgba(0,0,0,.08); }
.cv-panel.light a, .cv-panel.light button { color: rgba(0,0,0,.7); }
.cv-panel.light a:active, .cv-panel.light a.active { color: #111; background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.1); }
.cv-panel.light .cv-cta { color: #fff; background: #111; }
.cv-burger.light { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.15); }
.cv-burger.light span { background: #111; }
body.cv-lock { overflow: hidden; }

/* ── Phones & small tablets ────────────────── */
@media (max-width: 720px) {
  .cv-burger { display: flex; }

  /* desktop nav bits move into the panel */
  html.cv-on .nav-links,
  html.cv-on .nav-switch,
  html.cv-on .nav-cta,
  html.cv-on .nav-back,
  html.cv-on .nav-right { display: none !important; }

  /* nav bars: compact padding, never overflow */
  .nav, nav { max-width: 100vw; }
  .nav-inner { padding-left: 20px !important; padding-right: 20px !important; gap: 12px !important; }
  nav.nav:not(:has(.nav-inner)) { padding-left: 20px !important; padding-right: 20px !important; gap: 12px; }
  nav:not(.nav):not(.mobile-nav) { padding-left: 20px !important; padding-right: 20px !important; }

  /* tap targets */
  .btn, button, [role="button"], .nav-cta { min-height: 44px; }
  input, select, textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */

  /* tables scroll instead of breaking layout */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* home page */
  .stats-row { padding: 40px 20px !important; gap: 28px !important; }
  .stats { gap: 28px 20px !important; width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
  .stat { text-align: left; }
  .inception-card { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 12px 16px; }
  .inception-sep { display: none; }
}

@media (max-width: 420px) {
  h1 { word-break: break-word; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .reg-block { text-align: left; }
}

/* ── Safety net + per-page fixes (≤720px) ──── */
@media (max-width: 720px) {
  html, body { overflow-x: clip; max-width: 100vw; }

  /* grid/flex children must be allowed to shrink */
  .co-layout > *, .terminal-grid > *, .modules-grid > *, .cases-table > *,
  .features-grid > *, .product-grid-smart > *, .price-cards > * { min-width: 0; }

  /* enterprise: contract editor */
  #contractText { min-width: 0; overflow-wrap: anywhere; }
  #lineNums { min-width: 32px !important; padding-left: 8px !important; padding-right: 8px !important; }

  /* live-events: 4-up feature grid -> 2-up */
  .features-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .feature-card { padding: 1.25rem 1rem !important; }

  /* soro: remove negative bleed that causes sideways scroll */
  .vine-container { margin-left: 0 !important; margin-right: 0 !important; }
  .story-gate-text { max-width: 100%; overflow-wrap: anywhere; padding-left: 20px; padding-right: 20px; }

  /* spotless studio: stack nav controls and the app */
  .nav:has(.mode-tabs) { height: auto !important; flex-wrap: wrap; padding: 10px 16px !important; gap: 10px !important; }
  .nav:has(.mode-tabs) .nav-sp { display: none; }
  .nav:has(.mode-tabs) .mode-tabs { order: 3; flex: 1 1 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
  .nav:has(.mode-tabs) .shr-btn { margin-left: auto; }
  .app { flex-direction: column !important; height: auto !important; }
  .stage { min-height: 56vh; padding: 56px 16px 20px !important; border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.06); }
  .panel { width: 100% !important; overflow-y: visible !important; }

  /* home: inception card + stats */
  .inception-row { width: 100%; }
}

@media (max-width: 400px) {
  .features-grid { grid-template-columns: 1fr !important; }
}
/* ── Round 2 fixes (≤720px) ─────────────────── */
@media (max-width: 720px) {
  /* enterprise: inline 2-col grids (editor+sidebar, nav+content) stack */
  .cv-split, .cv-split-side { grid-template-columns: 1fr !important; min-height: 0 !important; }

  /* home: left-align metrics so they line up with their labels */
  .stat-n { justify-content: flex-start !important; }

  /* spotless: share section padding + mock grid */
  .share-inner { padding: 48px 20px !important; gap: 32px !important; }
  .share-mock { padding: 14px; }
  .share-mock-apps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 360px) {
  .co-box { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .co-grid { grid-template-columns: 1fr !important; }
}

/* ── CSS-only nav safety (no JS cv-on dependency) ─────────────────────────
   These rules guarantee nav items collapse at mobile widths even when
   mobile.js hasn't run yet (SSR screenshots, slow connections, etc.).
   Only applies on pages where NO native .hamburger exists (home, soro,
   enterprise, live-events, risk, spotless, spotless-studio, steganography).
   Pages with native hamburger (company, developer, etc.) handle this in
   style.css already.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Collapse nav-links & nav-cta when no native hamburger is present */
  body:not(:has(.hamburger)) nav.nav .nav-links,
  body:not(:has(.hamburger)) nav .nav-links { display: none !important; }

  body:not(:has(.hamburger)) nav.nav .nav-cta,
  body:not(:has(.hamburger)) nav .nav-cta   { display: none !important; }

  /* Ensure nav never exceeds viewport */
  nav.nav, nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden;
    max-width: 100vw;
    box-sizing: border-box;
  }
}

/* When JS has run and cv-on is set, same rules (redundant but explicit) */
@media (max-width: 720px) {
  html.cv-on nav.nav .nav-links,
  html.cv-on nav .nav-links { display: none !important; }
  html.cv-on nav.nav .nav-cta,
  html.cv-on nav .nav-cta   { display: none !important; }
}