/* Mobile fix-up sheet — bypasses Next/Turbopack lightningcss which silently
   rewrites @media (max-width: X) to (width <= X), a CSS Media Queries
   Level 4 syntax not supported by iOS Safari < 16.4. Served as a static
   asset so the browser parses the original syntax directly. */

@media (max-width: 700px) {
  :root { --d-h1: clamp(28px, 7.5vw, 44px) !important; }
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  .h1 { line-height: 1.1 !important; overflow-wrap: break-word !important; }
  .hero { padding: 40px 0 56px !important; }
  .req-head { flex-wrap: wrap !important; gap: 6px !important; padding: 10px 12px !important; font-size: 11px !important; }
  .req-head > span:nth-of-type(4) { flex-basis: 100% !important; min-width: 0 !important; overflow: hidden !important; }
  .req-url { word-break: break-all !important; }
  .req-body { padding: 10px 12px !important; font-size: 11px !important; max-height: 320px !important; overflow-x: hidden !important; }
  .req-stream-line { white-space: pre-wrap !important; word-break: break-all !important; }
  .req-preview { min-width: 0 !important; max-width: 100% !important; }
  .pg-endpoint-tabs { flex-wrap: wrap !important; max-width: 100% !important; }
}

@media (max-width: 600px) {
  .pg-endpoint-method { display: none !important; }
  .pg-endpoint-tab { padding: 6px 10px !important; font-size: 11px !important; gap: 4px !important; }
}

@media (max-width: 480px) {
  :root { --d-h1: clamp(24px, 7vw, 36px) !important; }
  .lede { font-size: 16px !important; }
  .hero-actions .btn { font-size: 13px !important; padding: 10px 14px !important; }
}