.docs-nav-mobile {
  display: none;
  margin-bottom: var(--sp-space-4);
}

.docs-nav-mobile__details {
  border: 1px solid var(--sp-color-border-subtle);
  border-radius: var(--sp-corners-sm);
  background: transparent;
}

.docs-nav-mobile__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-space-2) var(--sp-space-3);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.docs-nav-mobile__summary::marker,
.docs-nav-mobile__summary::-webkit-details-marker {
  display: none;
}

.docs-nav-mobile__label {
  font-size: var(--sp-text-xs);
  font-weight: var(--sp-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sp-color-text-muted);
}

.docs-nav-mobile__chevron {
  transition: transform var(--sp-duration-fast) var(--sp-ease-default);
  color: var(--sp-color-text-muted);
}

.docs-nav-mobile__details[open] .docs-nav-mobile__chevron {
  transform: rotate(180deg);
}

.docs-nav-mobile__content {
  padding: var(--sp-space-1) var(--sp-space-3) var(--sp-space-3);
  border-top: 1px solid var(--sp-color-border-subtle);
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs-nav-mobile__section {
  padding-top: var(--sp-space-2);
}

.docs-nav-mobile__section-title {
  font-size: 0.65rem;
  font-weight: var(--sp-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sp-color-text-muted);
  margin-bottom: var(--sp-space-1);
}

.docs-nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-nav-mobile__link {
  display: block;
  padding: 0.25rem 0 0.25rem var(--sp-space-2);
  color: var(--sp-color-text-secondary);
  text-decoration: none;
  font-size: var(--sp-text-xs);
  line-height: 1.6;
  border-left: 2px solid transparent;
  transition: color var(--sp-duration-fast) var(--sp-ease-default);
}

.docs-nav-mobile__link:hover {
  color: var(--sp-color-text-primary);
  border-left-color: var(--sp-color-primary);
}

.docs-nav-mobile__link[aria-current="page"],
.docs-nav-mobile__link--active {
  color: var(--sp-color-primary);
  border-left-color: var(--sp-color-primary);
  font-weight: var(--sp-font-weight-medium);
}

@media (max-width: 1200px) {
  .docs-layout {
    grid-template-columns: var(--sp-sidebar-left-width) 1fr;
  }

  .docs-toc {
    display: none;
  }
}

@media (max-width: 900px) {
  .docs-tabs {
    position: static;
  }

  .docs-layout,
  .docs-layout--list {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    display: none;
  }

  .docs-nav-mobile {
    display: block;
  }

  .docs-layout {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .docs-main {
    padding: var(--sp-space-6);
    overflow-x: hidden;
  }

  .docs-header h1 {
    font-size: var(--sp-text-2xl);
  }
}

@media (max-width: 768px) {
  .docs-content pre {
    margin-left: calc(var(--sp-space-4) * -1);
    margin-right: calc(var(--sp-space-4) * -1);
    border-radius: 0;
    border-top: 1px solid var(--sp-color-border-subtle);
    border-bottom: 1px solid var(--sp-color-border-subtle);
  }

  .docs-content .code-copy-button {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .docs-nav {
    flex-direction: column;
  }

  .docs-card-grid {
    grid-template-columns: 1fr;
  }

  .docs-pagination {
    flex-direction: column;
  }

  .docs-pagination-link {
    max-width: 100%;
  }

  .docs-pagination-next {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-background::before,
  .docs-background::after,
  .docs-shape-left {
    animation: none;
  }

  .docs-back-to-top {
    transition: none;
  }
}

@media (prefers-color-scheme: dark) {
  .docs-content blockquote {
    background: oklch(0.75 0.16 52 / 0.08);
  }
}