@scope ([data-tac-scope="docs-feature"]) {
/* The group, above the title, linking back to where this was found. */
.feature-group {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .6;
  margin-bottom: .25rem;
}

.feature-group a {
  color: inherit;
  text-decoration: none;
}

.feature-group a:hover {
  text-decoration: underline;
}
}
@scope ([data-tac-scope="docs-layout"]) {
/* Two wrappers sit between the shell and the article it should lay out: the
   element Tachyon mounts a component into, and the component's own root. Both
   are dissolved, so the article and the contents list become the shell's
   second and third grid items instead of being stacked inside the first.
 *
 * This lives here rather than in site.css because that file is `@layer brand`
 * and the runtime's rule for a mounted component is unlayered — a layered rule
 * loses to an unlayered one whatever its specificity, so the same declaration
 * there had no effect at all.
 *
 * The mount element is named by its `data-tachyon-component` rather than by
 * its tag: every component on the page is a `<tachyon-component>`, and
 * dissolving all of them would take every other component's layout with it. */
.docs-shell > [data-tachyon-component='docs-topic'],
.docs-shell > [data-tachyon-component='docs-feature'],
.docs-shell > [data-tachyon-component='docs-catalog'],
.docs-shell > [data-tachyon-component='docs-home'],
.docs-shell .docs-page {
  display: contents;
}
}
@scope ([data-tac-scope="docs-pagelinks"]) {
/* Above the title, where they are findable without competing with it. */
.docs-pagelinks {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: .8125rem;
}

.docs-pagelinks__link {
  color: inherit;
  opacity: .6;
  text-decoration: none;
}

.docs-pagelinks__link:hover {
  opacity: 1;
  text-decoration: underline;
}
}
@scope ([data-tac-scope="docs-pager"]) {
/* Two cards, each naming where it goes. `margin-left: auto` on the next link
   is what keeps it right-aligned when there is no previous one — a page at the
   start of the order should not pull "Next" over to the left as though it were
   going backwards. */
.docs-pager {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--w-border, currentColor);
}

.docs-pager__link {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  flex: 1 1 12rem;
  padding: .75rem 1rem;
  border: 1px solid var(--w-border, currentColor);
  border-radius: var(--w-radius-lg, 12px);
  color: inherit;
  text-decoration: none;
}

.docs-pager__link:hover {
  background: var(--w-hover, rgb(128 128 128 / 8%));
}

.docs-pager__link--next {
  margin-left: auto;
  text-align: right;
}

.docs-pager__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .6;
}

.docs-pager__title {
  font-weight: 600;
  text-wrap: balance;
}
}
@scope ([data-tac-scope="docs-sidebar"]) {
/* One navigation for the whole documentation, in collapsible sections.
   Forty-four links do not belong on screen at once, so a section is a
   <details>: the one holding the current page is open and the rest are shut
   until asked for. */
.docs-nav {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  font-size: .875rem;
}
.docs-nav__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .375rem .5rem;
  border-radius: var(--w-radius-md, 8px);
  font-weight: 600;
  cursor: pointer;
  /* The disclosure triangle is replaced by the chevron below, which can be
     rotated and coloured with the rest of the row. */
  list-style: none;
}

.docs-nav__summary::-webkit-details-marker {
  display: none;
}

.docs-nav__summary:hover {
  background: var(--w-hover, rgb(128 128 128 / 8%));
}

.docs-nav__chevron {
  opacity: .5;
  transition: transform .15s ease;
}

.docs-nav__section[open] > .docs-nav__summary .docs-nav__chevron {
  transform: rotate(90deg);
}

/* Scoped to the open state, and this is not a style choice.
 *
 * A closed <details> hides its content through the UA's own display rule, and
 * an author `display` on a direct child overrides it: the list was invisible
 * but still laid out, so a "collapsed" navigation still put forty-four links
 * in the tab order and in the accessibility tree. */
.docs-nav__section[open] > .docs-nav__list {
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  /* Aligned under the section label rather than indented from the column edge,
     so the rule reads as the section's own spine. */
  margin: .125rem 0 .5rem .5rem;
  padding-left: .5rem;
  border-left: 1px solid var(--w-border, currentColor);
}

.docs-nav__section:not([open]) > .docs-nav__list {
  display: none;
}

.docs-nav__link {
  display: block;
  padding: .3125rem .5rem;
  border-radius: var(--w-radius-md, 8px);
  color: inherit;
  opacity: .75;
  text-decoration: none;
  /* A long feature title wraps rather than widening the column or being cut:
     the sidebar is a fixed track, and an ellipsis hides the word that tells
     two similar entries apart. */
  overflow-wrap: anywhere;
}

.docs-nav__link:hover {
  background: var(--w-hover, rgb(128 128 128 / 8%));
  opacity: 1;
}

.docs-nav__link[aria-current='page'] {
  background: var(--w-primary-container, rgb(128 128 128 / 12%));
  color: var(--w-on-primary-container, inherit);
  font-weight: 600;
  opacity: 1;
}

/* ── The narrow-shell drawer ──────────────────────────────────────────────
 *
 * Below the width where the shell has a column for it, the navigation is a
 * drawer rather than a block above the article. In flow it pushed the article
 * a whole screen down, so every documentation page opened on its own
 * navigation instead of on what the reader came for.
 *
 * The toggle and the scrim are hidden by default and revealed by the narrow
 * container query, rather than the reverse: the wide layout is the one with no
 * extra furniture, and it is the one that must not depend on a query matching.
 */
.docs-nav-toggle,
.docs-nav-scrim {
  display: none;
}

@container (max-width: 51.999rem) {
  .docs-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* WCAG 2.5.8: this is the control that reaches the whole documentation. */
    min-height: 2.75rem;
    padding: .5rem .875rem;
    border: 1px solid var(--w-border, currentColor);
    border-radius: var(--w-radius-md, 8px);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
  }

  .docs-nav-scrim:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgb(0 0 0 / 45%);
  }

  .docs-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 41;
    width: min(20rem, 86vw);
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--w-surface, canvas);
    border-right: 1px solid var(--w-border, currentColor);
    /* Off-canvas, and out of the tab order with it: a drawer that is closed
       but still focusable is a list of links a keyboard walks into from
       nowhere. `visibility` is what removes it; the transform only moves it. */
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform .2s ease, visibility 0s linear .2s;
  }

  .docs-nav[data-open='true'] {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }
}
}
@scope ([data-tac-scope="docs-toc"]) {
.docs-toc__heading {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .55;
  margin-bottom: .5rem;
}

.docs-toc__list {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  font-size: .8125rem;
}

.docs-toc__link {
  display: block;
  padding: .25rem 0 .25rem .75rem;
  border-left: 2px solid var(--w-border, currentColor);
  color: inherit;
  opacity: .7;
  text-decoration: none;
  text-wrap: pretty;
}

.docs-toc__link:hover {
  border-left-color: currentColor;
  opacity: 1;
}
}
@scope ([data-tac-scope="home-languages"]) {
/* Every handler sample is a different length, and a card that resizes as the
   reader clicks through them makes the page jump under the cursor. So the
   height is pinned — to the longest sample, measured from the data by the
   companion, which is the one value that both stops the jump and leaves
   nothing to scroll. */
.language-sample,
.demo-code .code-block[style*="--lines"] {
  /* Tall enough for the longest sample, so there is never a vertical
     scrollbar. Horizontal scrolling stays: a long line has to move inside the
     block, or it pushes the whole page sideways on a phone. */
  min-height: calc(var(--lines, 12) * 1lh + 2rem);
  overflow: auto;
}

/* What the handler does, under the code rather than in the label beside its
   name: it is a sentence, and a sentence in a label row is a paragraph with no
   measure — which is what the responsive gate caught it being. */
.demo-code-note {
  margin: 0 1rem 1rem;
  max-width: 72ch;
  font-size: .8125rem;
  opacity: .7;
  text-wrap: pretty;
}
}
@scope ([data-tac-scope="home-pillars"]) {
/* Three across, then two, then one — decided by the space a card needs to stay
   readable rather than by a device width.
 *
 * The floor is `max(17rem, one third of the row)` rather than a plain 17rem:
 * with only a minimum, `auto-fit` keeps adding columns as the page widens and
 * six cards land as four-and-two. Making a third of the row the floor caps the
 * count at three without naming a breakpoint, and the 17rem still wins on a
 * narrow screen where a third of the row would be unreadable. */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(17rem, (100% - 2rem) / 3), 1fr));
  gap: 1rem;
  /* Every row as tall as its tallest card, so a three-line body does not leave
     the two cards beside it short. */
  grid-auto-rows: 1fr;
}

.pillar {
  padding: 1.25rem;
  border: 1px solid var(--w-border, currentColor);
  border-radius: var(--w-radius-lg, 12px);
  background: var(--w-surface-container-low, transparent);
}

.pillar__title {
  font-weight: 600;
  margin-bottom: .5rem;
}

.pillar__body {
  font-size: .9375rem;
  opacity: .75;
  text-wrap: pretty;
}
}
@scope ([data-tac-scope="home-quickstart"]) {
/* A grid item defaults to min-width:auto, so the long install command inside
   the first card refused to shrink and dragged the page sideways on a phone.
   The <pre> already scrolls on its own once it is allowed to. */
.quickstart-step {
  min-width: 0;
}

/* The install command is one long line. Wrapping it is better than a
   scrollbar on a card the reader is meant to copy from at a glance. */
.quickstart-step .code-block {
  overflow-x: visible;
}

.quickstart-step .code-block code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Room for the copy button pinned in the corner, so a wrapped command never
   runs under it. The block wraps rather than scrolls (above), so without this
   the last line would sit behind the button rather than past it. */
.quickstart-step .code-block {
  position: relative;
  padding-right: 4.5rem;
}
}
@scope ([data-tac-scope="site-header"]) {
/* The bar stays one row at every width.
 *
 * Wrapping is the wrong failure for an app bar: a second row pushes the page
 * down and leaves the brand stranded above a stray button. Instead the nav is
 * the one part allowed to shrink, and it scrolls when it runs out of room, so
 * the wordmark and the two actions keep their positions from 320px up.
 */
.site-bar {
  flex-wrap: nowrap;
}

.site-bar__nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}

.site-bar__nav::-webkit-scrollbar {
  display: none;
}

/* Neither the brand nor the actions may be the thing that gets squeezed. */
.site-bar__brand,
.site-bar__actions {
  flex-shrink: 0;
}

/* Hidden only where the bar genuinely cannot spare the width. */
.site-bar__wordmark {
  display: none;
}

@media (min-width: 30rem) {
  .site-bar__wordmark {
    display: inline;
  }
}
}
@scope ([data-tac-scope="site-search"]) {
.search-scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--w-text) 45%, transparent);
  z-index: 60;
}

.search-panel {
  position: fixed;
  z-index: 61;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(40rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--w-surface);
  border: 1px solid var(--w-border, color-mix(in srgb, var(--w-text) 14%, transparent));
  border-radius: var(--w-radius-xl);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--w-text) 22%, transparent);
}

.search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--w-border, color-mix(in srgb, var(--w-text) 14%, transparent));
  background: transparent;
  color: var(--w-text);
  font: inherit;
  font-size: 1.0625rem;
}

.search-input:focus-visible {
  outline: 2px solid var(--w-primary, #65d9f7);
  outline-offset: -2px;
}

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

.search-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1.25rem;
  color: inherit;
  text-decoration: none;
}

.search-hit:hover,
.search-hit:focus-visible { background: var(--w-surface-container-high); }

/* The palette opens with ⌘K, so its trigger is worth bar space exactly where
   there is a keyboard to press. Keyed to the pointer rather than to a width:
   a 1024px tablet has the room and still has no ⌘ key, and a narrow desktop
   window has the key and not much room. */
.site-search__trigger {
  display: none;
}

@media (pointer: fine) {
  .site-search__trigger {
    display: inline-flex;
  }
}
}