/* Skip link */
.site-skip-link {
  position: absolute;
  inset-block-start: var(--qf-space-2);
  inset-inline-start: var(--qf-space-2);
  z-index: var(--qf-z-tooltip);
  padding: var(--qf-space-2) var(--qf-space-3);
  border-radius: var(--qf-radius-control);
  background: var(--qf-surface);
  color: var(--qf-ink);
  box-shadow: var(--qf-shadow-md);
  transform: translateY(-200%);
}
/* The ring alone: the skin's shadow tokens are `none`, and `none` in a shadow list made the whole
   declaration invalid, so the skip link showed no focus indicator (2.4.7). */
.site-skip-link:focus-visible {
  transform: none;
  box-shadow: var(--qf-focus-ring);
}

/* Frame */
.qf-shell[data-ds-frame] > * {
  visibility: visible;
}
[data-ds-frame] .qf-content {
  padding: var(--qf-space-6);
}
[data-ds-frame] .qf-content [id] {
  scroll-margin-top: var(--qf-space-6);
}
[data-theme='dark'] .site-logo-light,
:root:not([data-theme='dark']) .site-logo-dark {
  display: none;
}
.qf-button.site-nav-toggle {
  display: none;
}
[data-ds-nav] .qf-nav__subitems > .qf-nav__row {
  padding-inline-start: var(--qf-space-3);
}
[data-ds-nav] .qf-nav__subitems > .qf-nav__row > .qf-nav__item {
  padding-inline-start: var(--qf-nav-item-pad);
}
[data-ds-nav] .qf-nav__subitems .qf-nav__subitems .qf-nav__item {
  padding-inline-start: calc(var(--qf-space-3) + var(--qf-nav-gutter) + var(--qf-nav-item-pad) + var(--qf-space-3));
}
[data-ds-nav] .qf-nav__item[aria-current='location'] {
  color: var(--qf-ink);
  box-shadow: inset calc(var(--qf-space-1) / 2) 0 0 var(--qf-color-primary-main);
}

/* Frame: narrow */
@media (max-width: 833px) {
  .qf-button.site-nav-toggle {
    display: inline-flex;
  }
  [data-ds-frame] [data-ds-nav] {
    background: var(--qf-surface);
    transition:
      transform var(--qf-duration-normal) var(--qf-ease-standard),
      visibility 0s linear var(--qf-duration-normal);
  }
  .qf-shell[data-ds-frame]:not([data-nav='open']) > [data-ds-nav] {
    visibility: hidden;
  }
  .qf-shell[data-ds-frame][data-nav='open'] > [data-ds-nav] {
    transition: transform var(--qf-duration-normal) var(--qf-ease-standard);
  }
  .qf-shell[data-ds-frame][data-nav='open']::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: calc(var(--qf-z-drawer) - 1);
    background: var(--qf-surface-scrim);
  }  [data-ds-frame] .qf-content {
    padding: var(--qf-space-4);
  }
}

/* Prose */
.site-prose a,
.site-table a {
  text-decoration: underline;
}
.site-prose code,
.site-table code {
  padding: 0 var(--qf-space-1);
  border-radius: var(--qf-radius-xs);
  background: var(--qf-color-info-100);
  color: var(--qf-ink);
}
.site-table :is(th, td) {
  white-space: normal;
  overflow-wrap: break-word;
}
.site-table td,
.site-table tbody th {
  vertical-align: top;
}

/* Tiles */
/* Focus scrolls a tile fully into view with a margin, not to a sub-pixel edge (2.4.11). */
.site-tile {
  scroll-margin-block: var(--qf-space-4);
}
.site-tile,
.site-tile:hover {
  color: var(--qf-ink);
  text-decoration: none;
}

/* Specimen canvas */
/* A specimen wider or taller than its card at 200% zoom scrolls inside the card instead of being cut
   off; so does a window area, whose windows can be dragged past its edge (1.4.4). */
.qf-card[data-ds-specimen],
[data-ds-canvas] [data-window-area] {
  overflow: auto;
}
[data-ds-canvas] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--qf-space-3);
  padding: var(--qf-space-6);
  background: var(--qf-surface);
}
[data-ds-canvas][data-block] {
  display: block;
}
[data-ds-canvas][data-stack] {
  flex-direction: column;
  align-items: stretch;
}
[data-ds-canvas][data-tall] {
  display: block;
  height: calc(var(--qf-space-10) * 14);
  padding: 0;
}
[data-ds-canvas][data-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--qf-space-5) * 13), 1fr));
  align-items: stretch;
}
[data-ds-canvas][data-dots] {
  background-image: radial-gradient(var(--qf-color-info-200) var(--qf-border-width), transparent var(--qf-border-width));
  background-size: var(--qf-space-4) var(--qf-space-4);
}

/* Code block */
[data-ds-code] {
  margin: 0;
  padding: var(--qf-space-3) var(--qf-space-4);
  overflow-x: auto;
  background: var(--qf-surface-sunken);
  color: var(--qf-ink);
  font-size: var(--qf-text-xs);
  line-height: var(--qf-leading-normal);
  white-space: pre;
}
[data-ds-canvas] + [data-ds-code] {
  border-top: var(--qf-border-width) solid var(--qf-border);
}

/* Full-screen composite pages */
.site-topbar {
  position: sticky;
  top: 0;
  min-height: var(--qf-appbar-height);
  border-radius: 0;
}
.site-full {
  display: flex;
  flex-direction: column;
  gap: var(--qf-space-4);
  min-height: calc(100vh - var(--qf-appbar-height));
  padding: var(--qf-space-4);
  background: var(--qf-surface-sunken);
}
.site-full [data-ds-canvas][data-tall] {
  height: auto;
  min-height: calc(100vh - var(--qf-appbar-height) - var(--qf-space-16));
}
.site-full .qf-shell[data-embedded] {
  height: calc(100vh - var(--qf-appbar-height) - var(--qf-space-16)) !important;
}