/* Mobile lock — stop sideways page motion on phones.
   Loaded last on every page. Do not invent palette colors.
   Standalone article HTML (Gemini / Vercel / R2) must still link this file. */

html {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  /* Transparent html + overflowing children = white iOS/PWA gutter */
  background-color: #05070f;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* Inline article site-nav: logo + links + Subscribe is too wide on phones */
nav.site-nav,
body > nav.site-nav {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: clamp(12px, 3vw, 24px) !important;
  padding-right: clamp(12px, 3vw, 24px) !important;
  /* Keep x-lock. Homepage .nav-links.open must stay in-flow or this clips it. */
  overflow: hidden;
}

nav.site-nav > div,
.site-nav-inner {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

nav.site-nav a,
.site-nav a {
  min-width: 0;
}

/* PR8 standalone articles: chip row + vercel top-nav grow with nowrap links */
.section-nav,
.article-section-nav,
.top-nav,
.read-mode-bar {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.section-nav-inner,
.top-nav-inner,
.article-section-nav {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.nav-links,
.top-nav-links {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}

:not(pre) > code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Wide tables must scroll inside themselves, not the page */
table.comparison-table,
.comparison-table {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  box-sizing: border-box;
}

.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* ASCII diagrams + code */
.architecture-diagram,
.diagram-code,
.code-block,
.ansi-wordmark,
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  box-sizing: border-box;
}

/* Hidden subscribe modal is still laid out at 480px + padding */
#subscribeModal,
.modal-overlay {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
}

#modalBox,
.modal {
  max-width: min(480px, calc(100% - 24px)) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#readProgress {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: auto !important;
}

#ad-cookie-banner {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  nav.site-nav,
  body > nav.site-nav,
  .top-nav {
    height: auto !important;
    min-height: 52px;
  }

  .top-nav-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    gap: 8px !important;
  }

  .two-col,
  .feature-grid,
  .flow-container {
    grid-template-columns: 1fr !important;
  }

  header,
  .container,
  .header-content {
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
    max-width: 100%;
    box-sizing: border-box;
  }

  nav.site-nav > div > div[style*="display:flex"] {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Hide extra chrome that forces the bar past the viewport */
  nav.site-nav button[onclick*="Subscribe"],
  nav.site-nav button[onclick*="openSubscribe"],
  .top-nav-links a[onclick*="Subscribe"],
  .top-nav-links a[onclick*="openSubscribe"] {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .component:hover,
  .feature-item:hover,
  .flow-step:hover,
  .article-card:hover {
    transform: none !important;
  }
}