html {
  height: 100%;
}

.table-scroll:focus-visible {
  outline: 0.18rem solid var(--focus-ring);
  outline-offset: 0.18rem;
}

.pwa-update {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.pwa-update[hidden] {
  display: none;
}

header {
  flex-wrap: wrap;
  height: auto;
}

.reference-search[role="search"] {
  display: grid;
  gap: var(--spacing-3);
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin: var(--spacing-8) 0;
  min-width: 0;
  width: 100%;
}

.reference-search[role="search"] label,
.reference-search[role="search"] [data-search-status],
.reference-search[role="search"] [data-search-results] {
  grid-column: 1 / -1;
}

.search-results section + section {
  margin-top: var(--spacing-8);
}

.search-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results a {
  border-top: 1px solid var(--border-subtle);
  display: block;
  min-height: var(--site-target-min);
  padding: var(--spacing-2) 0;
}

.search-results :is(strong, span, small) {
  display: block;
}

.search-results span,
.search-results small {
  color: var(--text-secondary);
  line-height: 1.45;
}

.desktop-navigation[data-toolbar] {
  flex-wrap: wrap;
}

.locale-selector {
  display: flex;
  margin-inline-start: auto;
}

.empty-state {
  padding: clamp(2rem, 6vw, 6rem) var(--spacing-6);
}

.home-band {
  border-bottom: 1px solid var(--border-subtle);
  overflow-wrap: anywhere;
  padding: clamp(4rem, 8vw, 8rem) var(--spacing-6);
}

.hero-inner > * {
  flex-shrink: 0;
}

.lede {
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
  line-height: 1.6;
  margin-inline: auto;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  justify-content: center;
  margin-inline: auto;
}

.first-example-inner {
  display: grid;
  gap: var(--spacing-6);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.first-example-copy {
  grid-column: 1 / span 4;
}

.first-example .code-block {
  align-self: stretch;
  grid-column: 5 / span 8;
  grid-row: 1 / span 2;
  margin: 0;
}

.first-example-inner > .secondary-link {
  align-self: start;
  grid-column: 1 / span 4;
}

.adoption {
  background: var(--surface-muted);
}

.home :is(h2, h3) {
  line-height: 1.15;
}

.home h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.035em;
  margin: 0;
}

.home h3 {
  font-size: var(--font-size-xl);
  margin: 0;
}

.capability-list {
  display: grid;
  gap: 0 var(--spacing-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: var(--spacing-12) 0 0;
  padding: 0;
}

.capability-list li {
  border-top: 1px solid var(--border-default);
  min-width: 0;
  padding: var(--spacing-5) 0;
}

.capability-list p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.home-learning-paths {
  margin: var(--spacing-12) 0 0;
}

.home-learning-paths :is(strong, small) {
  display: block;
}

.home-learning-paths small {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: var(--spacing-1);
}

.reference-definitions code {
  border: 0;
}

.documentation {
  padding: var(--spacing-8) var(--spacing-6) var(--spacing-16);
}

.hub {
  padding: var(--spacing-8) var(--spacing-6) var(--spacing-16);
}

.hub-category-nav[data-toolbar] {
  flex-wrap: wrap;
  margin: var(--spacing-8) 0;
}

.hub-groups > section {
  margin-top: var(--spacing-10);
}

.hub-groups h2 {
  padding-bottom: var(--spacing-3);
}

.hub-group-introduction {
  color: var(--text-secondary);
  max-width: 70ch;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.editorial-list {
  list-style-position: inside;
  margin: var(--spacing-8) 0 0;
  padding: 0;
}

.editorial-list li {
  border-top: 1px solid var(--border-default);
  min-height: var(--site-target-min);
  padding: var(--spacing-4) 0;
}

.editorial-list h3,
.editorial-list p {
  margin: 0;
}

.guide-list li {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) minmax(0, 2fr);
}

.learning-stepper {
  margin-top: var(--spacing-8);
  max-width: 70ch;
}

.learning-step-link {
  display: grid;
  flex: 1 1 auto;
  gap: var(--spacing-1);
  min-width: 0;
  padding: 0 var(--spacing-3) var(--spacing-6);
}

.learning-step-link small {
  color: var(--text-secondary);
  line-height: 1.5;
}

.reference-index ul {
  display: grid;
  gap: 0 var(--spacing-8);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
}

.reference-index li {
  border-top: 1px solid var(--border-default);
  padding: var(--spacing-4) 0;
}

.reference-index p {
  color: var(--text-secondary);
}

.reference-symbol {
  font-family: var(--site-font-mono);
}

.document-sidebar,
.document-toc {
  align-self: start;
  display: grid;
  position: sticky;
  top: var(--spacing-4);
}

.document-sidebar a,
.document-toc a {
  color: var(--text-secondary);
  min-height: var(--site-target-min);
  padding: var(--spacing-2) var(--spacing-3);
}

.document-group-links,
.document-navigation-group {
  display: grid;
}

.document-group-title {
  padding: var(--spacing-2) var(--spacing-3);
}

.document-all-link {
  border-bottom: 1px solid var(--border-default);
  font-weight: 650;
  margin-bottom: var(--spacing-2);
  padding-bottom: var(--spacing-4);
}

.document-category-summary[aria-current="location"] {
  color: var(--text-primary);
  font-weight: 650;
}

.document-navigation-group .document-group-links a {
  padding-inline-start: var(--spacing-6);
}

.document-sidebar a[aria-current="page"] {
  border-left: 0.2rem solid var(--primary);
  color: var(--text-primary);
  font-weight: 650;
}

.document-sidebar .ancestor-current {
  color: var(--text-primary);
  font-weight: 650;
}

[data-toc-link][aria-current="location"] {
  border-left: 0.2rem solid var(--primary);
  color: var(--text-primary);
  font-weight: 650;
}

.document-menu,
.toc-mobile {
  display: none;
}

.document {
  min-width: 0;
}

.structured-document {
  line-height: 1.7;
}

.breadcrumb {
  gap: var(--spacing-2);
}

.breadcrumb > :not(:first-child) {
  align-items: center;
  display: inline-flex;
  gap: var(--spacing-2);
  padding: var(--spacing-1);
}

.breadcrumb > :not(:first-child)::before {
  border-block-end: var(--border-size-1) solid currentColor;
  border-inline-end: var(--border-size-1) solid currentColor;
  color: var(--text-secondary);
  content: "";
  height: 0.4em;
  opacity: 0.45;
  transform: rotate(-45deg);
  width: 0.4em;
}

.structured-document > h1 {
  font-size: var(--font-size-3xl);
  line-height: 1.15;
}

.structured-document > section:not([data-notification]) > h2 {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--spacing-10);
  padding-top: var(--spacing-6);
}

.structured-document dt {
  font-family: var(--site-font-mono);
}

.editorial-notice {
  margin-top: var(--spacing-10);
}

.markdown {
  font-size: var(--font-size-base);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.markdown h1 {
  font-size: var(--font-size-3xl);
  line-height: 1.15;
}

.markdown h2 {
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-size-2xl);
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-8);
}

.markdown h3 {
  font-size: var(--font-size-xl);
  margin-top: var(--spacing-10);
}

.markdown blockquote {
  background: var(--surface-muted);
  border-left: 0.25rem solid var(--border-strong);
  margin-left: 0;
  padding: var(--spacing-3) var(--spacing-4);
}

.code-block {
  margin: var(--spacing-6) 0;
  min-width: 0;
}

.code-block pre {
  margin: 0;
}

.copy-status {
  display: block;
  min-height: 1.5em;
}

.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  min-width: 36rem;
}

.previous-next {
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-6);
}

.previous-next a {
  min-height: var(--site-target-min);
  padding: var(--spacing-3);
}

.previous-next small {
  color: var(--text-secondary);
  display: block;
}

.site-footer {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  display: block;
  height: auto;
  padding: var(--spacing-6);
  text-align: center;
}

@media (width < 75rem) {
  .document-sidebar,
  .document-toc {
    display: none;
  }

  .document-menu,
  .toc-mobile {
    display: block;
  }

  .document-menu nav,
  .toc-mobile nav {
    display: grid;
    padding: var(--spacing-2);
  }

  .document-menu a,
  .toc-mobile a {
    min-height: var(--site-target-min);
    padding: var(--spacing-2);
  }

  .first-example-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .first-example-copy,
  .first-example .code-block,
  .first-example-inner > .secondary-link {
    grid-column: 1;
    grid-row: auto;
  }

  .first-example .code-block {
    order: 2;
  }

  .first-example-inner > .secondary-link {
    order: 3;
  }
}

@media (width < 48rem) {
  .home-band,
  .empty-state,
  .hub,
  .documentation {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }

  .hero.home-band {
    padding-bottom: var(--spacing-10);
    padding-top: var(--spacing-10);
  }

  .home [data-button] {
    white-space: normal;
  }

  .first-example .code-block {
    font-size: var(--font-size-sm);
  }

  .previous-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .capability-list,
  .reference-index ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .reference-search[role="search"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .reference-search[role="search"] > * {
    grid-column: 1;
  }

}

@media (max-width: 599px) {
  .desktop-navigation[data-toolbar] {
    font-size: var(--font-size-xs);
  }
}