/*
 * Documentation application chrome (website/docs.html + docs.js).
 *
 * The documentation is laid out like the applications it documents: the navigation column sits on
 * the chrome tone, the reading canvas on the surface, and tone rather than lines separates them.
 * Current is neutral (the current fill, the text colour, a heavier label), labels are sentence
 * case and quieter than what they label, and dividers use the subtle border.
 */

#docs-app {
  flex: 1 0 auto;
}

/* The documentation is an application shell, not a marketing page. Its sidebar and "On this page"
   rail are anchored to the viewport edges, so the header and footer have to be anchored there too:
   a centred 1200px band stacked on a full-bleed grid reads as two different pages. The gutter is
   the sidebar's own padding, which lines the wordmark up with the navigation and the theme toggle
   up with the rail. */
.site-page--app .site-header__inner,
.site-page--app .site-footer__inner,
.site-page--app .site-footer__stamp {
  inline-size: 100%;
  padding-inline: var(--zx-space-5);
}

/* Global documentation search occupies the flexible centre of the application header. */
.docs-global-search {
  min-inline-size: 0;
}

.docs-global-search .zx-search {
  inline-size: 100%;
}

.docs-global-search .zx-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* The results are a menu: the library's compact overlay material, rows inset from its edge with
   the smallest radius, and a neutral highlight that follows the keyboard and the pointer. */
.docs-global-search__popover {
  position: absolute;
  z-index: 40;
  inset-block-start: calc(100% + var(--zx-space-1));
  inset-inline: 0;
  max-block-size: min(70dvh, 32rem);
  overflow-y: auto;
  padding: var(--zx-space-1);
  border: 1px solid var(--zx-color-overlay-border);
  border-radius: var(--zx-radius-lg);
  background-color: var(--zx-color-overlay-surface);
  background-image: var(--zx-overlay-surface-image);
  background-clip: padding-box;
  -webkit-backdrop-filter: var(--zx-glass-filter-overlay);
  backdrop-filter: var(--zx-glass-filter-overlay);
  box-shadow: var(--zx-glass-overlay-shadow);
}

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

/* A caption above the rows, like a menu's section label. */
.docs-global-search__status {
  padding: var(--zx-space-1) var(--zx-space-2);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-xs);
  font-weight: var(--zx-weight-medium);
}

.docs-global-search__status:empty {
  display: none;
}

.docs-global-search__result {
  display: grid;
  gap: 1px;
  padding: var(--zx-space-2);
  border-radius: var(--zx-radius-sm);
  color: var(--zx-color-text);
  text-decoration: none;
}

.docs-global-search__result:hover {
  background: var(--zx-color-overlay-hover);
}

/* The active option is where the keyboard is, not something picked: the same neutral step. */
.docs-global-search__result[data-active="true"] {
  background: var(--zx-color-overlay-hover);
}

.docs-global-search__result:focus-visible {
  outline: 0;
  box-shadow: inset var(--zx-focus-ring);
}

.docs-global-search__label {
  font-weight: var(--zx-weight-medium);
}

.docs-global-search__meta,
.docs-global-search__description {
  overflow: hidden;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-xs);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-global-search__description {
  color: var(--zx-color-text-subtle);
}

.docs-shell {
  --docs-header: 57px;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 232px;
  min-block-size: calc(100dvh - var(--docs-header));
  background: var(--zx-color-bg-surface);
}

/* ------------------------------------------------------------------ sidebar -- */

.docs-sidebar {
  position: sticky;
  inset-block-start: var(--docs-header);
  block-size: calc(100dvh - var(--docs-header));
  overflow-y: auto;
  padding: var(--zx-space-4) var(--zx-space-3) var(--zx-space-7);
  border-inline-end: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-chrome);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.docs-filter {
  inline-size: 100%;
  margin-block-end: var(--zx-space-4);
}

.docs-navigation__empty {
  margin: 0;
  padding: var(--zx-space-2) var(--zx-space-2);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
}

.docs-navigation__empty[hidden],
.docs-navigation__row[hidden],
.docs-navigation__group[hidden],
.docs-navigation__section[hidden] {
  display: none;
}

/* Sections and groups are separated by space, never by rules. */
.docs-navigation__section + .docs-navigation__section {
  margin-block-start: var(--zx-space-6);
}

.docs-navigation__section-title {
  margin: 0 0 var(--zx-space-1);
  padding-inline: var(--zx-space-2);
  color: var(--zx-color-text);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-semibold);
  line-height: 1.4;
}

/* A group label is a caption: sentence case, small, muted, quieter than the rows it heads. */
.docs-navigation__group {
  margin: var(--zx-space-4) 0 var(--zx-space-1);
  padding-inline: var(--zx-space-2);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-xs);
  font-weight: var(--zx-weight-medium);
  line-height: 1.4;
}

.docs-navigation__list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-navigation__item {
  display: flex;
  align-items: center;
  min-block-size: calc(var(--zx-control-height) - 2px);
  padding: var(--zx-space-1) var(--zx-space-2);
  border-radius: var(--zx-radius-md);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-md);
  font-weight: var(--zx-weight-medium);
  line-height: 1.35;
  text-decoration: none;
}

.docs-navigation__item:hover {
  background: var(--zx-color-bg-hover);
  color: var(--zx-color-text);
}

/* Where the reader is: the neutral current fill, the full text colour, a heavier label. */
.docs-navigation__item[aria-current="page"] {
  background: var(--zx-color-bg-current);
  color: var(--zx-color-text);
  font-weight: var(--zx-weight-semibold);
}

.docs-navigation__item:focus-visible {
  outline: 0;
  box-shadow: var(--zx-focus-ring);
}

@media (pointer: coarse) {
  .docs-navigation__item {
    min-block-size: 40px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .docs-navigation__item {
    transition: background-color var(--zx-dur-fast) var(--zx-ease), color var(--zx-dur-fast) var(--zx-ease);
  }
}

/* --------------------------------------------------------------------- main -- */

.docs-main {
  min-inline-size: 0;
  padding: var(--zx-space-7) var(--zx-space-8) 96px;
}

/* Code needs width — Zx examples routinely run past 80 columns — so the article is wider than the
   78ch measure used for prose, and the prose keeps its own cap inside it. */
.docs-article {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 62rem;
}

/* ---------------------------------------------------------------------- rail -- */

.docs-rail {
  min-inline-size: 0;
  padding: var(--zx-space-7) var(--zx-space-5) var(--zx-space-8) 0;
}

.docs-toc {
  position: sticky;
  inset-block-start: calc(var(--docs-header) + var(--zx-space-6));
  max-block-size: calc(100dvh - var(--docs-header) - var(--zx-space-8));
  overflow-y: auto;
  scrollbar-width: thin;
}

.docs-toc__title {
  margin: 0 0 var(--zx-space-2);
  color: var(--zx-color-text);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-semibold);
}

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

.docs-toc__link {
  display: block;
  padding: 3px 0;
  border-radius: var(--zx-radius-sm);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  line-height: 1.45;
  text-decoration: none;
}

.docs-toc__link--nested {
  padding-inline-start: var(--zx-space-3);
}

.docs-toc__link:hover {
  color: var(--zx-color-text);
}

/* The section being read: the text colour and a heavier label — no bar, no accent. */
.docs-toc__link--current {
  color: var(--zx-color-text);
  font-weight: var(--zx-weight-semibold);
}

.docs-header {
  max-inline-size: 78ch;
  margin-block-end: var(--zx-space-7);
}

.docs-title {
  margin: 0;
  font-size: var(--zx-text-3xl);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: var(--zx-tracking-title);
}

.docs-blurb {
  margin: var(--zx-space-2) 0 0;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-lg);
  line-height: 1.55;
}

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

/* ------------------------------------------------------------------ sections -- */

/* A component page is one scrolling document. Every block in it is a `.docs-section`: it owns an
   anchor the rail can link to, and enough scroll margin to clear the sticky site header. */
.docs-section {
  scroll-margin-block-start: calc(var(--docs-header) + var(--zx-space-5));
}

.docs-section + .docs-section {
  margin-block-start: var(--zx-space-8);
}

.docs-section__title {
  margin: 0 0 var(--zx-space-4);
  font-size: 1.25rem;
  font-weight: var(--zx-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--zx-tracking-title);
}

.docs-section__anchor {
  color: inherit;
  text-decoration: none;
}

/* The self-link on an example heading is how a reader hands someone a URL that lands on this one
   example, so it announces itself on hover rather than sitting there as permanent chrome. */
.docs-section__anchor::after {
  content: "#";
  margin-inline-start: var(--zx-space-2);
  color: var(--zx-color-text-subtle);
  font-weight: 400;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .docs-section__anchor::after {
    transition: opacity var(--zx-dur-fast) var(--zx-ease);
  }
}

.docs-section__anchor:hover::after,
.docs-section__anchor:focus-visible::after {
  opacity: 1;
}

.docs-section__anchor:focus-visible {
  outline: 0;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------------------- api -- */

.docs-summary {
  margin-block-start: var(--zx-space-4);
}

.docs-signature {
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-sm);
}

/* ------------------------------------------------------------------ api tables -- */

/* The API card is tables, not running prose, so it takes the whole content column instead of the
   78ch reading measure — four columns squeezed into a measure wrap every description onto three
   lines. Specificity beats `.docs-prose`, which is set further down the file. Whatever in the card
   really is prose keeps the measure. */
.docs-prose.docs-api {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: none;
  overflow-x: clip;
}

.docs-api > :is(p, ul) {
  max-inline-size: 78ch;
}

/* "Options", "Methods", "Events": a sub-heading in sentence case, not a letter-spaced label. */
.docs-api__group {
  margin: var(--zx-space-6) 0 var(--zx-space-2);
  color: var(--zx-color-text);
  font-size: var(--zx-text-md);
  font-weight: var(--zx-weight-semibold);
}

.docs-api > .docs-api__group:first-child {
  margin-block-start: 0;
}

.docs-api__scroller {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  contain: inline-size;
}

.docs-api__scroller:focus-visible {
  outline: 0;
  box-shadow: var(--zx-focus-ring);
}

.docs-api__table {
  inline-size: 100%;
  border-collapse: collapse;
}

/* Generated tables carry a colgroup; the parsed ones size themselves to their two columns. */
.docs-api__table:has(colgroup) {
  table-layout: fixed;
}

/* The header is the refined Table's: no band, the muted colour at a medium weight, the ordinary
   border under it and the subtle one between rows. */
.docs-api__head {
  padding: 0 var(--zx-space-5) var(--zx-space-2) 0;
  border-block-end: 1px solid var(--zx-color-border);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-medium);
  text-align: start;
  white-space: nowrap;
}

.docs-api__head:last-child {
  padding-inline-end: 0;
}

/* Under a fixed layout the shares decide the widths, so the cells only have to say how their
   content may break. Signatures and types are long and unbreakable at spaces. */
.docs-api__table:has(colgroup) :is(.docs-api__term, .docs-api__type) {
  inline-size: auto;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Type and default sit between the name and the prose: narrow, monospaced, and never the column
   that absorbs slack — the description does that. */
.docs-api__type {
  inline-size: 1%;
  padding: var(--zx-space-2) var(--zx-space-5) var(--zx-space-2) 0;
  border-block-end: 1px solid var(--zx-color-border-subtle);
  vertical-align: baseline;
  white-space: nowrap;
}

/* Names, types, and defaults are code already; a chip around every cell only adds noise. */
.docs-prose .docs-api__term code,
.docs-prose .docs-api__type code {
  padding: 0;
  background: none;
}

.docs-api__type code {
  color: var(--zx-color-text-muted);
}

.docs-api__table tr:last-child .docs-api__type {
  border-block-end: 0;
}

/* The name column sizes to its content so the notes get the rest, and never wraps mid-signature. */
.docs-api__term {
  inline-size: 1%;
  padding: var(--zx-space-2) var(--zx-space-5) var(--zx-space-2) 0;
  border-block-end: 1px solid var(--zx-color-border-subtle);
  font-weight: var(--zx-weight-medium);
  text-align: start;
  vertical-align: baseline;
  white-space: nowrap;
}

.docs-api__note {
  padding: var(--zx-space-2) 0;
  border-block-end: 1px solid var(--zx-color-border-subtle);
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  line-height: 1.6;
  vertical-align: baseline;
}

.docs-api__table tr:last-child :is(.docs-api__term, .docs-api__note) {
  border-block-end: 0;
}

/* Small reference lists such as getters are labels, not data grids. Row rules only add visual
   noise immediately before the next section; generated multi-column API tables keep theirs. */
.docs-api__table:not(:has(colgroup)) :is(.docs-api__term, .docs-api__type, .docs-api__note) {
  border-block-end: 0;
}

.docs-note {
  margin: 0 0 var(--zx-space-4);
  max-inline-size: 78ch;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  line-height: 1.7;
}

.docs-note a {
  color: var(--zx-color-accent);
}

/* --------------------------------------------------------- presets & examples -- */

.docs-example-group {
  margin-block-start: var(--zx-space-8);
}

/* "Presets" and "Examples" are page sections like the others, so they share the section title. */
.docs-example-group > .docs-section__title {
  margin-block-end: var(--zx-space-5);
}

/* One example: the heading and blurb sit on the page, the running component and its source share
   one hairline-framed card below them — the stage, the event log when there is one, and the code
   bar, stacked and divided by the subtle border. Keeping the prose outside the frame lets the card
   read as a specimen rather than as a box of mixed content. */
.docs-example + .docs-example {
  margin-block-start: var(--zx-space-8);
}

.docs-example .docs-section__title {
  margin-block-end: var(--zx-space-1);
  font-size: var(--zx-text-lg);
  font-weight: var(--zx-weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--zx-tracking-tight);
}

.docs-example__blurb {
  margin: 0 0 var(--zx-space-4);
  max-inline-size: 78ch;
  color: var(--zx-color-text-muted);
  line-height: 1.6;
}

.docs-example__stage {
  padding: var(--zx-space-6);
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-surface);
}

/* The stage does the arranging, so an example's source is a list of components rather than the
   flex and grid wrappers around them. */
.docs-example__stage--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zx-space-3);
}

.docs-example__stage--stack {
  display: grid;
  gap: var(--zx-space-4);
  align-content: start;
}

/* Specimen galleries and anything else that supplies its own frame fill the card edge to edge. */
.docs-example__stage--full {
  padding: 0;
  overflow: hidden;
}

/* An example that names a width keeps the full card: the trailing padding narrows what the stage
   holds to that width instead (the stage is border-box, so the width includes its own padding,
   exactly as a max-inline-size on the stage would). */
.docs-example__stage--sized {
  padding-inline-end: max(var(--zx-space-6), 100% - var(--docs-stage-width) + var(--zx-space-6));
}

/* Events a demo reports, directly under the thing that reported them. */
.docs-example__log {
  display: block;
  min-block-size: 40px;
  padding: var(--zx-space-3) var(--zx-space-6);
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-surface);
  color: var(--zx-color-text-muted);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* The parts of one card join: whatever follows the stage hangs from it, and the seam between two
   parts is the subtle divider rather than a second frame. */
.docs-example__stage:has(+ :is(.docs-example__log, .docs-disclosure)),
.docs-example__log:has(+ .docs-disclosure) {
  border-block-end-color: var(--zx-color-border-subtle);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

:is(.docs-example__stage, .docs-example__log) + :is(.docs-example__log, .docs-disclosure) {
  margin-block-start: 0;
  border-block-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* ------------------------------------------------- demo layout utilities -- */

/* Structure a few examples genuinely need — a labelled matrix, a bordered mini-panel — without
   putting a wall of inline styles into every snippet. The `demo-` prefix keeps it obvious that
   these are documentation classes rather than anything Zx ships. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zx-space-2) var(--zx-space-3);
}

.demo-stack {
  display: grid;
  gap: var(--zx-space-4);
  align-content: start;
}

.demo-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--zx-space-2) var(--zx-space-4);
}

.demo-caption {
  color: var(--zx-color-text-muted);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-sm);
}

.demo-field {
  display: grid;
  gap: var(--zx-space-1);
}

.demo-field > span {
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
}

/* A frame the reader can drag narrower, for demonstrating overflow behaviour. */
.demo-resizable {
  resize: horizontal;
  overflow: auto;
  inline-size: 100%;
  min-inline-size: 180px;
  max-inline-size: 100%;
  border: 1px dashed var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  padding: var(--zx-space-3);
}

.demo-card {
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-surface);
  padding: var(--zx-space-4);
}

.demo-aurora-surface {
  display: grid;
  min-block-size: 13rem;
  overflow: hidden;
  place-items: center;
  padding: var(--zx-space-6);
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-page);
}

.demo-aurora-surface--compact {
  min-block-size: 10rem;
  padding: var(--zx-space-4);
}

.demo-aurora-surface--large {
  min-block-size: 18rem;
  padding: var(--zx-space-7);
}

.demo-aurora-surface > .zx-card {
  max-inline-size: 28rem;
}

/* --------------------------------------------------------------- disclosure -- */

/* The source lives under its demo, folded away. Disclosing it grows the card downward, so the
   component stays on screen and the code is never a view the reader has to come back from. The
   bar is the card's quiet footer; the code below it sits on the chrome tone, like every code
   block on the page. */
.docs-disclosure {
  overflow: hidden;
  margin-block-start: var(--zx-space-2);
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-surface);
}

.docs-disclosure__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zx-space-3);
  min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
  padding: var(--zx-space-1) var(--zx-space-2);
}

.docs-disclosure__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: calc(var(--zx-control-height) - 4px);
  padding-inline: var(--zx-space-2);
  border: 0;
  border-radius: var(--zx-radius-md);
  background: none;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-medium);
  cursor: pointer;
}

.docs-disclosure__toggle:hover {
  background: var(--zx-color-bg-hover);
  color: var(--zx-color-text);
}

.docs-disclosure__toggle:focus-visible {
  outline: 0;
  box-shadow: var(--zx-focus-ring);
}

.docs-disclosure__toggle .zx-icon {
  display: block;
  flex: none;
  color: var(--zx-color-text-subtle);
}

@media (prefers-reduced-motion: no-preference) {
  .docs-disclosure__toggle .zx-icon {
    transition: transform var(--zx-dur-fast) var(--zx-ease);
  }
}

.docs-disclosure--open .docs-disclosure__toggle .zx-icon {
  transform: rotate(180deg);
}

.docs-disclosure--open .docs-disclosure__toggle {
  color: var(--zx-color-text);
}

/* What the folded block holds besides the example itself — the demo data behind it. Once the tabs
   are on screen they say it better, so the hint steps aside. */
.docs-disclosure__hint {
  overflow: hidden;
  min-inline-size: 0;
  margin-inline-end: auto;
  color: var(--zx-color-text-subtle);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-disclosure--open .docs-disclosure__hint {
  visibility: hidden;
}

.docs-disclosure__body {
  border-block-start: 1px solid var(--zx-color-border-subtle);
  background: var(--zx-color-bg-chrome);
}

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

/* File tabs over the code, drawn like a line Tabbox: the selected file in the text colour over a
   text-coloured rule, the others muted — no folder tabs, no band. */
.docs-disclosure__tabs {
  display: flex;
  gap: var(--zx-space-1);
  overflow-x: auto;
  padding: 0 var(--zx-space-3);
  border-block-end: 1px solid var(--zx-color-border-subtle);
  scrollbar-width: thin;
}

.docs-disclosure__tab {
  flex: none;
  min-block-size: calc(var(--zx-control-height) + 2px);
  padding-inline: var(--zx-space-2);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 -2px 0 transparent;
  color: var(--zx-color-text-muted);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
  white-space: nowrap;
  cursor: pointer;
}

.zx-scope .docs-disclosure__tab:hover {
  background: none;
  color: var(--zx-color-text);
}

.docs-disclosure__tab[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--zx-color-text);
  color: var(--zx-color-text);
}

.docs-disclosure__tab:focus-visible {
  outline: 0;
  box-shadow: inset var(--zx-focus-ring);
}

.docs-disclosure__body [role="tabpanel"]:focus-visible {
  outline: 0;
  box-shadow: inset var(--zx-focus-ring);
}

/* --------------------------------------------------------------------- code -- */

/* Code sits on the chrome tone inside a hairline: a recessed well in either theme. The filename
   and the copy button share its first row instead of a header band of their own. */
.docs-code {
  margin: 0 0 var(--zx-space-5);
  overflow: hidden;
  border: 1px solid var(--zx-color-border-subtle);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-chrome);
}

.docs-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zx-space-3);
  padding: var(--zx-space-1) var(--zx-space-1) 0 var(--zx-space-4);
}

.docs-code__name {
  overflow: hidden;
  color: var(--zx-color-text-muted);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Copy is a quiet action: no frame until it is pointed at. */
.docs-code__copy {
  flex: none;
  min-block-size: calc(var(--zx-control-height) - 4px);
  padding-inline: var(--zx-space-2);
  border: 0;
  border-radius: var(--zx-radius-md);
  background: none;
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-xs);
  font-weight: var(--zx-weight-medium);
  cursor: pointer;
}

.zx-scope .docs-code__copy:hover {
  background: var(--zx-color-bg-hover);
  color: var(--zx-color-text);
}

/* Inside a disclosure the card already supplies the frame, the tone, and the copy button. */
.docs-code--bare {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.docs-code--compact {
  margin-block-end: var(--zx-space-5);
}

.docs-code--compact .docs-code__body {
  padding: var(--zx-space-2) var(--zx-space-4) var(--zx-space-3);
}

.docs-code__body {
  max-block-size: 72vh;
  margin: 0;
  overflow: auto;
  padding: var(--zx-space-2) var(--zx-space-4) var(--zx-space-4);
  color: var(--zx-color-text);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-sm);
  line-height: 1.7;
  letter-spacing: 0;
  tab-size: 2;
}

.docs-code--bare .docs-code__body {
  padding-block-start: var(--zx-space-4);
}

/* Syntax colour is categorical, so it comes from the tone palette — never the accent, and never
   the status colours, which mean something else on the same page. */
.tok-comment {
  color: var(--zx-color-text-subtle);
  font-style: italic;
}

.tok-string {
  color: var(--zx-color-tone-green-fg);
}

.tok-number {
  color: var(--zx-color-tone-orange-fg);
}

.tok-keyword {
  color: var(--zx-color-tone-violet-fg);
}

/* -------------------------------------------------------------------- prose -- */

.docs-guide,
.docs-prose {
  max-inline-size: 78ch;
}

.docs-guide h2 {
  margin: var(--zx-space-8) 0 var(--zx-space-3);
  font-size: 1.25rem;
  font-weight: var(--zx-weight-semibold);
  letter-spacing: var(--zx-tracking-title);
}

.docs-guide > h2:first-child {
  margin-block-start: 0;
}

.docs-guide h3,
.docs-prose h3 {
  margin: var(--zx-space-6) 0 var(--zx-space-3);
  font-size: var(--zx-text-lg);
  font-weight: var(--zx-weight-semibold);
  letter-spacing: var(--zx-tracking-tight);
}

.docs-prose h4,
.docs-prose h5 {
  margin: var(--zx-space-6) 0 var(--zx-space-2);
  color: var(--zx-color-text);
  font-size: var(--zx-text-md);
  font-weight: var(--zx-weight-semibold);
}

.docs-prose > h3:first-child,
.docs-prose > h4:first-child {
  margin-block-start: 0;
}

/* The reference lists are label/value pairs — a lead-in naming Options, Methods, Events, or the
   keyboard map, then the detail. Space separates them; the bullet glyph and edge rules go. */
.docs-prose > ul {
  padding-inline-start: 0;
  list-style: none;
}

.docs-prose > ul > li {
  margin-block-end: var(--zx-space-4);
}

.docs-prose > ul > li > strong:first-child {
  display: block;
  margin-block-end: 2px;
  color: var(--zx-color-text);
  font-size: var(--zx-text-sm);
  font-weight: var(--zx-weight-semibold);
}

.docs-prose ul ul {
  margin-block-start: var(--zx-space-2);
  padding-inline-start: var(--zx-space-5);
  list-style: disc;
}

.docs-prose .docs-code {
  margin-block: var(--zx-space-4);
}

.docs-prose .docs-code code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.docs-guide p,
.docs-prose p {
  margin: 0 0 var(--zx-space-4);
  line-height: 1.7;
}

.docs-guide ul,
.docs-guide ol,
.docs-prose ul {
  margin: 0 0 var(--zx-space-4);
  padding-inline-start: var(--zx-space-6);
  line-height: 1.7;
}

.docs-guide li,
.docs-prose li {
  margin-block-end: var(--zx-space-2);
}

.docs-guide a,
.docs-prose a {
  color: var(--zx-color-accent);
  text-underline-offset: 2px;
}

.docs-guide code,
.docs-prose code,
.docs-blurb code {
  padding: 0.1em 0.35em;
  border-radius: var(--zx-radius-sm);
  background: var(--zx-color-bg-hover);
  font-family: var(--zx-font-mono);
  font-size: 0.88em;
  letter-spacing: 0;
}

.docs-guide .docs-code code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* Guide tables are the refined Table: no header band, a medium muted header, subtle row rules. */
.docs-guide table {
  inline-size: 100%;
  margin-block-end: var(--zx-space-5);
  border-collapse: collapse;
  font-size: var(--zx-text-sm);
}

.docs-guide th,
.docs-guide td {
  padding: var(--zx-space-2) var(--zx-space-3);
  border-block-end: 1px solid var(--zx-color-border-subtle);
  text-align: start;
  vertical-align: top;
}

.docs-guide th:first-child,
.docs-guide td:first-child {
  padding-inline-start: 0;
}

.docs-guide th {
  border-block-end-color: var(--zx-color-border);
  color: var(--zx-color-text-muted);
  font-weight: var(--zx-weight-medium);
}

.docs-guide tbody tr:last-child td {
  border-block-end: 0;
}

.docs-guide td code {
  white-space: nowrap;
}

/* A note set apart by tone, not by a frame. */
.docs-callout {
  margin: 0 0 var(--zx-space-5);
  padding: var(--zx-space-4) var(--zx-space-5);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-chrome);
}

.docs-callout p:last-child {
  margin-block-end: 0;
}

/* A label/value summary, used by the Finder demo's preview pane. */
.summary-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--zx-space-2) var(--zx-space-5);
  margin: 0;
}

.summary-list dt {
  color: var(--zx-color-text-muted);
  font-size: var(--zx-text-sm);
}

.summary-list dd {
  margin: 0;
}

/* The documentation app replaces this placeholder once its modules have loaded. */
.loading-copy {
  margin: 0;
  padding: var(--zx-space-8);
  color: var(--zx-color-text-muted);
  text-align: center;
}

/* -------------------------------------------------------- material fallbacks -- */

/* The search results are glass, like every menu; readers who ask for less transparency or more
   contrast get an opaque panel instead. */
@media (prefers-reduced-transparency: reduce) {
  .docs-global-search__popover {
    border-color: var(--zx-color-border);
    background: var(--zx-color-bg-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--zx-overlay-shadow);
  }
}

@media (prefers-contrast: more) {
  .docs-global-search__popover {
    border-color: var(--zx-color-border-strong);
    background: var(--zx-color-bg-raised);
  }

  .docs-sidebar {
    border-inline-end-color: var(--zx-color-border-strong);
  }
}

/* ----------------------------------------------------- design-token specimens -- */

.token-section + .token-section {
  margin-block-start: var(--zx-space-8);
}

.token-section__title {
  margin: 0 0 var(--zx-space-4);
  font-size: var(--zx-text-xl);
  font-weight: var(--zx-weight-semibold);
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--zx-space-3);
}

.token-card {
  overflow: hidden;
  border: 1px solid var(--zx-color-border);
  border-radius: var(--zx-radius-lg);
  background: var(--zx-color-bg-surface);
}

.token-card__swatch {
  block-size: 72px;
  border-block-end: 1px solid var(--zx-color-border-subtle);
}

.token-card__meta {
  display: grid;
  gap: var(--zx-space-1);
  padding: var(--zx-space-3);
}

.token-card__name,
.token-card__value {
  overflow-wrap: anywhere;
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
}

.token-card__value {
  color: var(--zx-color-text-muted);
}

.token-specimens {
  display: grid;
  gap: var(--zx-space-4);
}

.token-specimen {
  display: flex;
  align-items: center;
  gap: var(--zx-space-4);
  min-block-size: 40px;
}

.token-specimen__label {
  flex: 0 0 150px;
  color: var(--zx-color-text-muted);
  font-family: var(--zx-font-mono);
  font-size: var(--zx-text-xs);
}

.token-specimen__space {
  block-size: 16px;
  background: var(--zx-color-accent);
}

.token-specimen__radius {
  inline-size: 64px;
  block-size: 36px;
  background: var(--zx-color-bg-selected);
  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
}

.token-native-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zx-space-3);
}

/* --------------------------------------------------------------- responsive -- */

/* The rail is a convenience, not a requirement: below the width where it can sit beside a
   comfortable content column it goes away, and every section it linked to is still in the page. */
@media (max-width: 1180px) {
  .docs-shell {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  .docs-rail {
    display: none;
  }
}

@media (max-width: 900px) {
  .docs-shell {
    display: block;
  }

  /* The sidebar becomes a short scrollable index above the content rather than a column, so it
     never pushes the entry itself off the first screen. */
  .docs-sidebar {
    position: static;
    max-block-size: 210px;
    block-size: auto;
    padding: var(--zx-space-3) var(--zx-space-3) var(--zx-space-4);
    border-inline-end: 0;
    border-block-end: 1px solid var(--zx-color-border-subtle);
  }

  .docs-filter {
    inline-size: 100%;
    margin-block-end: var(--zx-space-3);
  }

  .docs-navigation__section + .docs-navigation__section {
    margin-block-start: var(--zx-space-4);
  }

  .docs-main {
    padding: var(--zx-space-6) var(--zx-space-4) 120px;
  }

  .site-page--app .site-header__inner {
    padding-inline: var(--zx-space-4);
  }

  .docs-header,
  .docs-guide,
  .docs-prose,
  .docs-note,
  .docs-example__blurb {
    max-inline-size: none;
  }

  .docs-title {
    font-size: var(--zx-text-2xl);
  }

  .docs-example__stage {
    padding: var(--zx-space-4);
  }

  .docs-example__stage--sized {
    padding-inline-end: max(var(--zx-space-4), 100% - var(--docs-stage-width) + var(--zx-space-4));
  }

  .docs-example__stage--full {
    padding: 0;
  }
}

@media (max-width: 600px) {
  /* Keep generated signatures, types, defaults, and notes as four readable columns. Their named
     wrapper is keyboard-scrollable, so a phone gets deliberate horizontal inspection instead of
     character-wide wrapping. */
  .docs-api__table:has(colgroup) {
    min-inline-size: 42rem;
  }
}

@media (max-width: 780px) {
  .site-page--app .site-actions {
    margin-inline-start: auto;
  }

  .docs-global-search__popover {
    max-block-size: min(62dvh, 28rem);
  }
}