:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --nav-height: 60px;
  --telemetry-height: 0px;
  --app-height: 100vh;
}

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

body {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: none;
  padding-bottom: var(--mobile-safe-bottom);
}

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

img,
video,
canvas {
  height: auto;
}

video {
  display: block;
}

main,
section,
article,
aside,
header,
footer,
nav,
div {
  min-width: 0;
}

body.touch-device {
  cursor: auto !important;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
}

body.touch-device *,
body.touch-device a,
body.touch-device button,
body.touch-device input,
body.touch-device textarea,
body.touch-device select {
  cursor: auto !important;
}

body.touch-device .cursor,
body.touch-device .cursor-ring {
  display: none !important;
}

body.touch-device::before,
body.touch-device::after {
  background-attachment: scroll !important;
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  body {
    background-attachment: scroll !important;
  }

  nav {
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-left: max(1rem, calc(1rem + var(--mobile-safe-left))) !important;
    padding-right: max(1rem, calc(1rem + var(--mobile-safe-right))) !important;
    padding-top: max(0.85rem, calc(0.85rem + var(--mobile-safe-top))) !important;
  }

  nav[data-mobile-menu="ready"] {
    align-items: center !important;
  }

  nav[data-mobile-menu="ready"] .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    min-width: 42px;
    min-height: 42px;
    padding: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    appearance: none;
    border-radius: 999px;
  }

  nav[data-mobile-menu="ready"] .mobile-nav-toggle-bar {
    display: block;
    width: 16px;
    height: 1px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  nav[data-mobile-menu="ready"] .mobile-nav-toggle-inner {
    display: grid;
    gap: 4px;
  }

  nav[data-mobile-menu="ready"].menu-open .mobile-nav-toggle-bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  nav[data-mobile-menu="ready"].menu-open .mobile-nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  nav[data-mobile-menu="ready"].menu-open .mobile-nav-toggle-bar:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  nav[data-mobile-menu="ready"] > ul,
  nav[data-mobile-menu="ready"] > .nav-right {
    order: 3;
    width: 100%;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
    padding-top: 0.85rem;
    margin-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  nav[data-mobile-menu="ready"].menu-open > ul,
  nav[data-mobile-menu="ready"].menu-open > .nav-right {
    display: flex !important;
  }

  nav[data-mobile-menu="ready"] > ul li,
  nav[data-mobile-menu="ready"] > .nav-right > * {
    width: 100%;
  }

  nav[data-mobile-menu="ready"] a,
  nav[data-mobile-menu="ready"] .nav-link {
    display: block !important;
    width: 100%;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }

  .telemetry {
    top: var(--nav-height, 60px) !important;
    padding-left: max(1rem, calc(1rem + var(--mobile-safe-left))) !important;
    padding-right: max(1rem, calc(1rem + var(--mobile-safe-right))) !important;
  }

  .filter-bar {
    top: calc(var(--nav-height, 60px) + var(--telemetry-height, 0px)) !important;
  }

  .hero,
  #hero,
  main,
  section,
  footer,
  .doc-content {
    max-width: 100%;
  }

  .hero,
  #hero {
    padding-left: max(1rem, calc(1rem + var(--mobile-safe-left))) !important;
    padding-right: max(1rem, calc(1rem + var(--mobile-safe-right))) !important;
  }

  .hero-inner,
  .mission-grid,
  .deployment-grid,
  .manifest,
  .configure-grid,
  .papers-grid,
  .browse-grid,
  .specs-grid,
  .agents-grid,
  .doc-layout,
  .grid,
  .catalog-grid {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  h1,
  .hero h1,
  .doc-title,
  .paper-title {
    overflow-wrap: anywhere;
  }

  .doc-layout,
  .mission-grid,
  .deployment-grid,
  .manifest,
  .papers-grid,
  .configure-grid,
  .browse-grid,
  .specs-grid,
  .agents-grid,
  .catalog-grid,
  .grid {
    grid-template-columns: 1fr !important;
  }

  .card-meta,
  .ref-line,
  .def-row,
  footer {
    grid-template-columns: 1fr !important;
  }

  .ref-line {
    gap: 0.35rem !important;
  }

  .ref-line-num,
  .ref-line-key {
    min-width: 0 !important;
    text-align: left !important;
  }

  .hero-meta {
    width: 100%;
  }

  .hero-meta-item {
    min-width: calc(50% - 1px) !important;
  }
}

@media (max-width: 480px) {
  body {
    font-size: clamp(15px, 3.8vw, 16px);
  }

  nav .brand,
  nav .nav-brand {
    max-width: calc(100% - 4.5rem);
  }

  .hero-meta-item {
    min-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .hero-meta-item:last-child {
    border-bottom: none !important;
  }
}

@supports (height: 100svh) {
  body.touch-device .hero,
  body.touch-device #hero {
    min-height: 100svh !important;
  }
}