.docs-site {
  display: grid;
  grid-template-columns: calc(var(--space-1) * 60) minmax(0, 1fr);
  min-height: 100dvh;
}

.docs-site > .sp-sr-only-focusable:focus {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 20;
  padding: var(--space-2) var(--space-3);
  color: var(--foreground);
  background: var(--card);
}

.docs-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: var(--space-5) var(--space-3) var(--space-3);
  color: var(--sidebar-foreground);
  background: var(--sidebar);
  border-right: var(--border-width) solid var(--border);
}

.docs-brand {
  padding-inline: var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--text-subheading);
  font-weight: 600;
  color: var(--foreground);
  text-decoration: none;
}

.docs-brand span {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--brand-text);
}

.docs-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.docs-version {
  margin: var(--space-1) var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.docs-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: calc(var(--space-1) * 9);
  justify-content: space-between;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  margin-bottom: var(--space-4);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--accent);
}

.docs-sidebar nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  color-scheme: inherit;
}

.docs-nav-link,
.docs-nav-group > summary,
.docs-theme {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--muted-foreground);
  text-decoration: none;
  border-radius: var(--radius-btn);
}

.docs-nav-link:hover,
.docs-nav-group > summary:hover,
.docs-theme:hover {
  color: var(--foreground);
  background: var(--accent);
}

.docs-nav-link[aria-current="page"] {
  color: var(--brand-text);
  background: var(--accent);
  font-weight: 600;
  box-shadow: inset var(--ring-width) 0 var(--brand-text);
}

.docs-nav-label {
  margin: var(--space-5) var(--space-3) var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.docs-nav-group {
  margin: 0;
}

.docs-nav-group > summary {
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.docs-nav-group > summary::-webkit-details-marker {
  display: none;
}

.docs-nav-group > summary::after {
  content: "›";
  font-size: var(--text-lg);
}

.docs-nav-group[open] > summary::after {
  transform: rotate(90deg);
}

.docs-nav-items {
  margin-left: var(--space-3);
  padding-left: var(--space-2);
  border-left: var(--border-width) solid var(--border);
}

.docs-sidebar-bottom {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border);
}

.docs-theme {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.docs-sidebar-footer {
  display: block;
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  text-decoration: none;
}

.docs-main {
  min-width: 0;
  width: 100%;
  max-width: var(--page-width);
  padding: var(--space-8) var(--space-10);
}

.docs-page-header {
  margin-bottom: var(--space-3);
}

.docs-page-header h1 {
  margin: 0;
  font-size: var(--text-heading);
  line-height: var(--leading-tight);
}

.docs-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.docs-content > p,
.docs-content > nav {
  margin: 0;
}

.docs-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.docs-example > h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
}

.docs-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
  scroll-margin-top: var(--space-16);
}

.docs-section > h2 {
  margin: var(--space-2) 0 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.docs-section > p {
  margin: 0;
}

.docs-lead {
  max-width: 80ch;
  color: var(--muted-foreground);
}

.docs-content p a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.docs-page-links {
  font-size: var(--text-sm);
}

.docs-section .sp-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
}

.docs-layer {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--brand-text);
}

.docs-component-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.docs-component-links a {
  display: inline-block;
  padding-block: var(--space-1);
}

.docs-example-stage {
  position: relative;
  min-width: 0;
  padding: var(--space-6);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
}

.docs-example-stage pre {
  max-width: 100%;
  overflow-x: auto;
}

.docs-example-stage cookie-banner {
  display: block;
}

.docs-example-stage .sp-cookie-banner {
  position: static;
}

.docs-section > details,
.docs-content > details {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.docs-section > details > summary,
.docs-content > details > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
}

.docs-section > details[open] > summary,
.docs-content > details[open] > summary {
  margin-bottom: var(--space-3);
}

.docs-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.docs-mobile-bar,
.docs-nav-backdrop,
.docs-sidebar-close {
  display: none;
}

.docs-sidebar [hidden] {
  display: none;
}

@media (max-width: 48rem) {
  .docs-site {
    display: block;
  }

  .docs-mobile-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--space-16);
    padding-inline: var(--space-4);
    color: var(--sidebar-foreground);
    background: var(--sidebar);
  }

  .docs-mobile-bar .docs-brand {
    padding: 0;
    font-size: var(--text-lg);
  }

  .docs-mobile-version {
    margin-left: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted-foreground);
  }

  .docs-menu,
  .docs-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: calc(var(--space-1) * 11);
    min-height: calc(var(--space-1) * 11);
    color: var(--foreground);
    background: transparent;
    border: 0;
    border-radius: var(--radius-btn);
    cursor: pointer;
  }

  .docs-menu:hover,
  .docs-sidebar-close:hover {
    background: var(--accent);
  }

  .docs-menu .sp-icon,
  .docs-sidebar-close .sp-icon {
    width: var(--space-5);
    height: var(--space-5);
  }

  .docs-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    width: calc(var(--space-1) * 70);
    max-width: 85vw;
    padding: var(--space-5) var(--space-6) var(--space-3);
    visibility: hidden;
    transform: translateX(-100%);
  }

  .docs-sidebar .docs-brand,
  .docs-sidebar .docs-version {
    padding-inline: 0;
    margin-inline: 0;
  }

  .docs-sidebar > :not(nav) {
    flex-shrink: 0;
  }

  .docs-nav-link,
  .docs-nav-group > summary,
  .docs-theme,
  .docs-search {
    min-height: calc(var(--space-1) * 11);
  }

  .docs-sidebar nav {
    overscroll-behavior: contain;
  }

  .docs-site[data-nav-open] {
    overflow: hidden;
  }

  .docs-site[data-nav-open] .docs-sidebar {
    visibility: visible;
    transform: none;
  }

  .docs-site[data-nav-open] .docs-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: block;
    background: color-mix(in srgb, var(--brand-navy) 65%, transparent);
    backdrop-filter: blur(var(--space-2));
    border: 0;
  }

  .docs-main {
    padding: var(--space-5) var(--space-4);
  }

  .docs-example-stage {
    padding: var(--space-4);
  }
}

@media (pointer: coarse) {
  .docs-nav-link,
  .docs-nav-group > summary,
  .docs-theme,
  .docs-search,
  .docs-search-close {
    min-width: calc(var(--space-1) * 11);
    min-height: calc(var(--space-1) * 11);
  }
}

.docs-search-dialog {
  width: min(calc(100% - var(--space-8)), calc(var(--space-1) * 140));
  max-height: 80dvh;
  margin: 12dvh auto auto;
  padding: 0;
  color: var(--foreground);
  background: var(--popover);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.docs-search-dialog::backdrop {
  background: var(--field-dark);
}

.docs-site:has(.docs-search-dialog[open]) {
  overflow: hidden;
}

.docs-search-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: var(--border-width) solid var(--border);
}

.docs-search-header input {
  min-width: 0;
  flex: 1;
}

.docs-search-close {
  padding: var(--space-1) var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  cursor: pointer;
}

.docs-search-dialog .sp-command-palette-body {
  max-height: 50dvh;
}

.docs-search-dialog [hidden] {
  display: none;
}