/* ==========================================================================
   Reading shell: docs, blog, search, legal, errors
   --------------------------------------------------------------------------
   Long text sits straight on the ambient field. The only filled surfaces
   inside content are code blocks, tables, callouts, the pager and lists of
   rows; the docs sidebar is a static group and the phone local nav is the
   one piece of real glass (it floats over the article).
   ========================================================================== */

/* ==========================================================================
   Prose
   ========================================================================== */

.prose {
  max-width: var(--col-reading);
  font: 400 var(--step-0)/var(--lh-body) var(--font);
  color: var(--text-soft);
}
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.1em; }

.prose h2 {
  position: relative;
  margin: 2.6em 0 .7em;
  padding-top: 1.3em;
  box-shadow: inset 0 1px 0 var(--hairline);
  font: 700 clamp(1.375rem, 1.2rem + .6vw, 1.625rem)/1.2 var(--font);
  letter-spacing: var(--track-h2);
  color: var(--text);
}
.prose > h2:first-child { margin-top: 0; padding-top: 0; box-shadow: none; }
.prose h3 {
  position: relative;
  margin: 2em 0 .5em;
  font: 700 1.1875rem/1.3 var(--font);
  letter-spacing: var(--track-title);
  color: var(--text);
}
/* Headings take focus only as jump targets (tabindex -1: a deep link or a
   TOC click); they are not controls, so no ring. */
.prose :is(h2, h3)[tabindex='-1']:focus { outline: none; }
.prose h4 { margin: 1.6em 0 .4em; font: 700 var(--step-0s)/1.4 var(--font); color: var(--text); }
.prose strong { color: var(--text); font-weight: 600; }

/* Classless links only: pages that borrow .prose (download, sources) put
   buttons and chips inside it. */
/* A tenth of --text: void's grey --link measured 4.49:1 on its own field. */
.prose a:not([class]) {
  color: color-mix(in srgb, var(--link) 90%, var(--text));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
  transition: text-decoration-color var(--dur-chip) linear;
}
.prose a:not([class]):hover { text-decoration-color: currentColor; }

.prose :is(ul, ol) { padding-left: 1.25em; }
.prose li + li { margin-top: .45em; }
.prose li > :is(ul, ol) { margin-top: .45em; }
.prose li::marker { color: var(--ink-2); }
.prose hr { border: 0; height: 1px; background: var(--hairline); margin: 2.4em 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-control); outline: 1px solid var(--hairline); outline-offset: -1px; }

/* The anchor hangs in the margin left of the heading, on its first line
   (an h2's first line starts below its hairline padding). */
.prose .heading-anchor {
  position: absolute;
  top: 0;
  /* Below 1280px .prose runs edge to edge inside the page gutter, with no
     margin outside it for the anchor to hang in, so the offset never goes
     past the gutter's own inner edge (clipping a focused anchor off-canvas). */
  left: max(-1em, calc(-1 * var(--gutter-page) + 4px));
  width: 1em;
  opacity: 0;
  font-weight: 500;
  color: var(--eyebrow-ink);
  text-decoration: none;
  transition: opacity var(--dur-chip) linear;
}
.prose :is(h2, h3):hover .heading-anchor,
.prose .heading-anchor:focus-visible { opacity: 1; }
.prose h2 .heading-anchor { top: 1.3em; }
.prose > h2:first-child .heading-anchor { top: 0; }

/* ==========================================================================
   Code, inline code, keys
   ========================================================================== */

pre.code-block,
.prose pre {
  position: relative;
  margin: 20px 0;
  padding: 18px 20px;
  overflow-x: auto;
  border-radius: var(--r-control);
  background: var(--mat-neutral);
  box-shadow: var(--glass-rim);
  font: 400 .875rem/1.7 var(--mono);
  color: var(--text);
  tab-size: 2;
}
.prose > pre.code-block { margin-block: 20px; }
pre.code-block code { font: inherit; color: inherit; background: none; box-shadow: none; padding: 0; }
pre.code-block[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  right: 52px;
  font: 700 .6875rem/1 var(--font);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
  pointer-events: none;
}

.prose :not(pre) > code {
  padding: .12em .42em;
  border-radius: var(--r-inline);
  font: 500 .875em/1 var(--mono);
  background: rgb(var(--ink) / .08);
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / .10);
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Element selector on purpose: the header's .search-kbd rules (hidden on
   focus and on touch) must keep winning over this. */
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  font: 600 .6875rem/1 var(--font);
  color: var(--ink-2);
  background: var(--mat-etched);
  box-shadow: var(--rim-etched), inset 0 -1px 0 rgb(var(--ink) / .14);
}

/* site.js injects this button with a text label ("Copy", then "Copied"
   with a tick svg). The label stays as the accessible name; the glyph is
   drawn here. Not glass, so its opacity may fade. */
.copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mat-etched);
  box-shadow: var(--rim-etched);
  color: var(--ink-2);
  font-size: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-chip) linear, color var(--dur-chip) linear;
}
.copy-button::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5.5 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5'/%3E%3Cpath d='M5.5 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.copy-button.is-copied::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.copy-button .copy-tick { display: none; }
.code-block:hover .copy-button,
.copy-button:focus-visible,
.copy-button.is-copied { opacity: 1; }
@media (hover: none) { .copy-button { opacity: 1; } }
.copy-button:hover { color: var(--text); }
.copy-button.is-copied,
.copy-button.is-copied:hover { color: var(--status-safe-ink); background: var(--mat-etched); }

/* Syntax tokens: fixed hexes, each measured on the code surface in both
   themes and ten palettes; comments take --ink-2, which holds 4.5:1 on glass. */
.tok-comment { color: var(--ink-2); font-style: italic; }
.tok-string { color: #7fd6a6; }
.tok-number, .tok-literal, .tok-variable { color: #f2b263; }
.tok-keyword { color: #a79bff; font-weight: 600; }
.tok-flag, .tok-tag { color: #a79bff; }
.tok-function, .tok-key { color: #79b8ff; }
.tok-property, .tok-attribute, .tok-type { color: #8fd2e8; }
/* Light string, number and type hexes darkened a step: on the light code
   glass under void's grey wash they measured 4.14, 4.19 and 4.55:1. */
:root[data-theme='light'] .tok-string { color: #136f45; }
:root[data-theme='light'] :is(.tok-number, .tok-literal, .tok-variable) { color: #8c5205; }
:root[data-theme='light'] :is(.tok-keyword, .tok-flag, .tok-tag) { color: #5b3ed6; }
:root[data-theme='light'] :is(.tok-function, .tok-key) { color: #1758b8; }
:root[data-theme='light'] :is(.tok-property, .tok-attribute, .tok-type) { color: #0e6880; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-scroll {
  overflow-x: auto;
  margin: 20px 0;
  border-radius: var(--r-control);
  background: var(--mat-neutral);
  box-shadow: var(--glass-rim);
}
.prose > .table-scroll { margin-block: 20px; }
.table-scroll table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font: 400 var(--step-0s)/1.45 var(--font);
  color: var(--text-soft);
}
.table-scroll th {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  font: 700 .6875rem/1.4 var(--font);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.table-scroll td { padding: 12px 16px; vertical-align: middle; box-shadow: inset 0 1px 0 var(--hairline); }
.table-scroll td.col-number,
.table-scroll th.col-number { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll tbody tr:has(a):hover td { background: var(--row-hover); }
.table-scroll td code { white-space: nowrap; }

/* ==========================================================================
   Breadcrumbs and pager
   ========================================================================== */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  font: 500 var(--step--1)/1.4 var(--font);
  color: var(--ink-2);
}
.breadcrumbs a { color: var(--ink-2); text-decoration: none; transition: color var(--dur-chip) linear; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs .sep { flex: none; width: 12px; height: 12px; color: rgb(var(--ink) / .35); stroke-width: 2.25; }
.breadcrumbs [aria-current='page'],
.breadcrumbs > span:last-child { color: var(--text-soft); }

.doc-pager,
.post-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 56px;
  padding-top: 24px;
  box-shadow: inset 0 1px 0 var(--hairline);
}
@media (min-width: 640px) {
  .doc-pager, .post-nav { grid-template-columns: 1fr 1fr; }
}
.doc-pager a,
.post-nav a {
  display: grid;
  gap: 2px;
  padding: 12px 16px 14px;
  border-radius: var(--r-control);
  text-decoration: none;
  background: var(--mat-neutral);
  box-shadow: var(--glass-rim);
  transition: background var(--dur-chip) linear;
}
.doc-pager a:hover,
.post-nav a:hover { background: var(--mat-neutral-hover); }
.doc-pager .direction,
.post-nav .direction {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 700 .6875rem/1.4 var(--font);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}
.doc-pager strong,
.post-nav strong { font: 600 var(--step-0s)/1.35 var(--font); color: var(--text); transition: color var(--dur-chip) linear; }
.doc-pager a:hover strong,
.post-nav a:hover strong { color: var(--link); }
.doc-pager .next-link,
.post-nav .next-link { grid-column: 2; text-align: right; }
.doc-pager .next-link .direction,
.post-nav .next-link .direction { justify-content: flex-end; }
@media (max-width: 639.98px) {
  .doc-pager .next-link, .post-nav .next-link { grid-column: auto; }
  .doc-pager > span:empty, .post-nav > span:empty { display: none; }
}
/* A chevron on the side each link travels to, nudged 3px on hover. The
   mask's own stroke colour is irrelevant; only its alpha is used. */
.doc-pager a:not(.next-link) .direction::before,
.post-nav a:not(.next-link) .direction::before,
.doc-pager .next-link .direction::after,
.post-nav .next-link .direction::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-chip) var(--ease-decel);
}
.doc-pager .next-link .direction::after,
.post-nav .next-link .direction::after { transform: scaleX(-1); }
.doc-pager a:not(.next-link):hover .direction::before,
.post-nav a:not(.next-link):hover .direction::before { transform: translateX(-3px); }
.doc-pager .next-link:hover .direction::after,
.post-nav .next-link:hover .direction::after { transform: scaleX(-1) translateX(-3px); }

/* ==========================================================================
   Docs shell
   --------------------------------------------------------------------------
   Sidebar group docked from 960px, outline from 1280px; below those, the
   two fold into the local nav capsules at the top of the article. Sticky
   blocks sit 16px under the 68px header strip (84, the scroll padding).
   Nothing between a sticky block and the viewport may clip or scroll.
   ========================================================================== */

.docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 40px;
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--page-top) var(--gutter-page) 0;
}
.docs-sidebar,
.docs-toc { display: none; min-width: 0; }
@media (min-width: 960px) {
  .docs-layout { grid-template-columns: 256px minmax(0, 1fr); }
  .docs-sidebar { display: block; }
}
@media (min-width: 1280px) {
  .docs-layout { grid-template-columns: 256px minmax(0, 752px) 224px; justify-content: center; }
  .docs-toc { display: block; }
  /* The index has no outline column, so it drops the reserved third track
     instead of leaving it empty, and the content absorbs the freed width. */
  .docs-layout.is-index { grid-template-columns: 256px minmax(0, 1fr); justify-content: initial; }
}
.docs-article { min-width: 0; max-width: 752px; }
.docs-layout.is-index .docs-article { max-width: none; }

/* Sidebar: one static group; the current doc is the accent capsule. */
.docs-sidebar-inner {
  position: sticky;
  top: calc(var(--header-height, var(--header-clear)) + 16px);
  max-height: calc(100dvh - var(--header-height, var(--header-clear)) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 8px;
  border-radius: var(--r-group);
  background: var(--mat-neutral);
  box-shadow: var(--glass-rim);
}
.docs-nav-group + .docs-nav-group { margin-top: 6px; padding-top: 6px; box-shadow: inset 0 1px 0 var(--hairline); }
.docs-nav-group > summary,
.docs-nav-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 10px 10px 6px;
  border-radius: 18px;
  font: 700 .6875rem/1.4 var(--font);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--dur-chip) linear;
}
.docs-nav-label { margin: 0; cursor: default; }
.docs-nav-group > summary::-webkit-details-marker { display: none; }
.docs-nav-group > summary:hover { color: var(--text); }
.docs-nav-group > summary:focus-visible { outline-offset: -2px; }
.docs-nav-group > summary svg { flex: none; width: 12px; height: 12px; stroke-width: 2.25; transition: transform var(--dur-chip) var(--ease-decel); }
.docs-nav-group[open] > summary svg { transform: rotate(90deg); }
:is(.docs-sidebar, .docs-local-panel) ul { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 1px; }
:is(.docs-sidebar, .docs-local-panel) a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 18px;
  font: 500 .875rem/1.35 var(--font);
  color: var(--text-soft);
  text-decoration: none;
  transition: background var(--dur-chip) linear, color var(--dur-chip) linear;
}
:is(.docs-sidebar, .docs-local-panel) a svg { flex: none; width: 16px; height: 16px; color: var(--ink-2); transition: color var(--dur-chip) linear; }
:is(.docs-sidebar, .docs-local-panel) a:hover { background: var(--row-hover); color: var(--text); }
:is(.docs-sidebar, .docs-local-panel) a:focus-visible { outline-offset: -2px; }
:is(.docs-sidebar, .docs-local-panel) a[aria-current='page'] {
  background: var(--mat-accent);
  color: var(--on-accent);
  text-shadow: var(--on-accent-shadow);
  font-weight: 600;
  box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .22);
}
:is(.docs-sidebar, .docs-local-panel) a[aria-current='page'] svg { color: inherit; }
/* Named on the sidebar copy only: two elements with one name abort the
   whole transition. */
.docs-sidebar a[aria-current='page'] { view-transition-name: docs-active; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(docs-active) {
    animation-duration: var(--dur-segment);
    animation-timing-function: var(--ease-out-cubic);
    border-radius: 18px;
    overflow: clip;
  }
  ::view-transition-old(docs-active),
  ::view-transition-new(docs-active) { animation-duration: var(--dur-fade); height: 100%; object-fit: none; object-position: left center; }
}

/* Outline: unboxed text on a hairline rail; the marker is a line, so it
   never competes with the sidebar capsule. site.js writes --toc-y, --toc-h
   and --toc-on on the list and toggles .is-active. */
.docs-toc-inner {
  position: sticky;
  top: calc(var(--header-height, var(--header-clear)) + 16px);
  max-height: calc(100dvh - var(--header-height, var(--header-clear)) - 32px);
  overflow: auto;
  scrollbar-width: none;
  padding-top: 8px;
}
.docs-toc-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font: 700 var(--step--1)/1.4 var(--font);
  color: var(--text);
}
.docs-toc-heading svg { flex: none; width: 14px; height: 14px; color: var(--ink-2); stroke-width: 2; }
.docs-toc ul {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  box-shadow: inset 1px 0 0 var(--hairline);
}
.docs-toc ul::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: var(--toc-h, 0px);
  border-radius: 1px;
  background: var(--grad-select);
  opacity: var(--toc-on, 0);
  transform: translateY(var(--toc-y, 0px));
  transition: transform var(--dur-marker) var(--ease-marker), height var(--dur-marker) var(--ease-marker), opacity var(--dur-marker) linear;
}
.docs-toc a {
  display: block;
  padding: 5px 0;
  font: 400 .84375rem/1.45 var(--font);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-chip) linear;
}
.docs-toc a.toc-3 { padding-left: 12px; }
.docs-toc a:hover { color: var(--text); }
.docs-toc a.is-active { color: var(--text); font-weight: 600; }
.docs-local-outline .docs-local-panel a.is-active { color: var(--text); font-weight: 600; }

/* Local nav (below 1280px): two chrome capsules that stick under the header
   and open glass panels. The strip and the details carry no glass, so the
   summary and the panel each blur the page as siblings. */
.docs-local-nav {
  position: sticky;
  top: calc(var(--header-height, var(--header-clear)) + 8px);
  z-index: var(--z-local-nav);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 24px;
  pointer-events: none;
}
.docs-local-nav > details { position: relative; pointer-events: auto; }
.docs-local-nav > details > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  list-style: none;
  cursor: pointer;
  font: 600 var(--step--1)/1 var(--font);
  color: var(--text);
  background: var(--mat-chrome);
  -webkit-backdrop-filter: var(--blur-chrome);
          backdrop-filter: var(--blur-chrome);
  box-shadow: var(--glass-rim), var(--shadow-float);
}
.docs-local-nav > details > summary::-webkit-details-marker { display: none; }
.docs-local-nav > details > summary svg { flex: none; width: 16px; height: 16px; color: var(--text-soft); }
.docs-local-outline > summary svg { width: 14px; height: 14px; stroke-width: 2.25; transition: transform var(--dur-chip) var(--ease-decel); }
.docs-local-outline[open] > summary svg { transform: rotate(90deg); }
.docs-local-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: 60vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 8px;
  border-radius: var(--r-group);
  background: var(--mat-pane);
  -webkit-backdrop-filter: var(--blur-pane);
          backdrop-filter: var(--blur-pane);
  box-shadow: var(--glass-rim), var(--shadow-pop);
  transform-origin: top left;
}
.docs-local-outline .docs-local-panel { left: auto; right: 0; transform-origin: top right; }
.docs-local-panel a.toc-3 { padding-left: 24px; }
a.docs-local-top { color: var(--link); }
a.docs-local-top svg { color: inherit; }
.docs-local-top + ul { margin-top: 4px; padding-top: 4px; box-shadow: inset 0 1px 0 var(--hairline); }
/* With the sidebar docked only the outline capsule is left; it floats at
   the right of the breadcrumb row instead of taking a row of its own. */
@media (min-width: 960px) {
  .docs-local-menu { display: none; }
  .docs-local-nav { justify-content: flex-end; margin-bottom: -40px; }
  .docs-local-nav:not(:has(.docs-local-outline)) { display: none; }
  .docs-local-nav:has(.docs-local-outline) + .doc-header .breadcrumbs { min-height: 40px; margin-bottom: 12px; padding-right: 180px; }
}
@media (min-width: 1280px) {
  .docs-local-nav { display: none; }
  .docs-local-nav:has(.docs-local-outline) + .doc-header .breadcrumbs { min-height: 0; margin-bottom: 20px; padding-right: 0; }
}
/* The capsules cover the top 40px under the header here, so an anchor
   jump lands its heading below them. */
@media (max-width: 1279.98px) {
  .docs-article .prose :is(h2, h3) { scroll-margin-top: 40px; }
}
/* The shell only scales (opacity on a blurred element resets its backdrop
   root mid-animation); its children fade. Close is instant. */
@media (prefers-reduced-motion: no-preference) {
  .docs-local-nav > details[open] > .docs-local-panel { animation: local-pop var(--dur-fade) var(--ease-out-cubic); }
  .docs-local-nav > details[open] > .docs-local-panel > * { animation: local-fade var(--dur-fade) linear; }
}
@keyframes local-pop { from { transform: scale(.96) translateY(-4px); } }
@keyframes local-fade { from { opacity: 0; } }

/* Article header */
.doc-header { margin: 0 0 32px; }
.doc-header .doc-mark { margin-bottom: 18px; }
.doc-header h1 {
  margin: 0;
  font: 700 var(--step-3)/1.08 var(--font);
  letter-spacing: var(--track-h1);
  color: var(--text);
}
.doc-header > p:not([class]) {
  margin: 14px 0 0;
  font: 400 var(--step-0l)/1.55 var(--font);
  color: var(--text-soft);
  max-width: 62ch;
}
.doc-meta,
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 16px 0 0;
  font: 700 var(--step--3)/1.4 var(--font);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
/* Every item opens with its own dot. The line is shifted left by one dot
   and clipped at its real edge, so the dot of whichever item starts a line
   (the first included) falls outside it: no line ever starts on a dot. */
.meta-dot { display: inline-block; flex: none; width: 1.5em; text-align: center; letter-spacing: 0; }
:is(.doc-meta, .post-meta):has(.meta-dot) { margin-left: -1.5em; clip-path: inset(-8px -8px -8px 1.5em); }

/* Docs index */
.docs-index-chips { margin: 0 0 8px; }
.docs-index-section { margin-top: 32px; padding-top: 40px; box-shadow: inset 0 1px 0 var(--hairline); }
.docs-index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 4px 16px;
}
.docs-index-head h2 { margin: 0; font: 700 var(--step-1)/1.25 var(--font); letter-spacing: var(--track-title); color: var(--text); }
.docs-index-head span { flex: none; font: 500 var(--step--1)/1.4 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.docs-index-section .group-row-title { font-weight: 600; }

/* ==========================================================================
   List pages: blog index, search
   ========================================================================== */

.list-page {
  max-width: calc(var(--col-page) + 2 * var(--gutter-page));
  padding: var(--page-top) var(--gutter-page) 0;
}
.list-empty { margin: 0; color: var(--ink-2); }

.blog-tags { margin: 0 0 20px; padding-block: 2px; }
/* The row scrolls at every width (DESIGN 5.6); a chip cut off at the edge
   would read as a fault, so the edge fades instead of wrapping to a second
   row. */
@media (min-width: 760px) {
  .blog-tags.is-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }
}
.blog-tags .tag.is-active { view-transition-name: active-filter; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(active-filter) {
    animation-duration: var(--dur-segment);
    animation-timing-function: var(--ease-out-cubic);
    border-radius: var(--r-chip);
    overflow: clip;
  }
  ::view-transition-old(active-filter),
  ::view-transition-new(active-filter) { animation-duration: var(--dur-fade); height: 100%; object-fit: none; }
}

/* Post card: the list-item card, an icon mark beside the text. */
.post-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--r-group);
  background: var(--mat-neutral);
  box-shadow: var(--glass-rim);
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-chip) linear, transform var(--dur-release) var(--ease-out-back);
}
.post-card:hover { background: var(--mat-neutral-hover); }
.post-card:active { transform: scale(.99); transition-duration: var(--dur-press); }
.post-card.post-featured { background: var(--mat-card); }
.post-card.post-featured:hover { background: var(--wash-30), var(--tint-layer); }
.post-card > .icon-mark { margin-top: 1px; }
.post-card-body { min-width: 0; }
.post-card h3 { margin: 8px 0 4px; font: 700 1.0625rem/1.3 var(--font); letter-spacing: -0.01em; color: var(--text); }
.post-card.post-featured h3 { font-size: var(--step-0l); }
.post-card p { margin: 0; font: 400 var(--step-0s)/1.55 var(--font); color: var(--ink-2); }
.post-card.post-featured p,
.post-card.post-featured .post-meta { color: var(--ink-2-strong); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-block: 0;
  min-height: 26px;
  font: 700 var(--step--3)/1.4 var(--font);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.post-meta time,
.post-meta > span { white-space: nowrap; }
.post-meta-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  letter-spacing: 0;
  text-transform: none;
}
.post-meta-tags > .meta-dot { margin-right: -6px; }

/* ==========================================================================
   Blog post
   ========================================================================== */

.post-layout {
  max-width: calc(var(--col-reading) + 2 * var(--gutter-page));
  padding: var(--page-top) var(--gutter-page) 0;
}
.post-header { margin: 0 0 40px; padding: 0 0 28px; box-shadow: inset 0 -1px 0 var(--hairline); }
.post-header .post-icon { margin: 0 0 18px; }
.post-header h1 {
  margin: 0;
  font: 700 var(--step-3)/1.08 var(--font);
  letter-spacing: var(--track-h1);
  color: var(--text);
}
.post-lede { margin: 14px 0 0; font: 400 var(--step-0l)/1.55 var(--font); color: var(--text-soft); }
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }

.post-related {
  max-width: calc(var(--col-reading) + 2 * var(--gutter-page));
  padding: 56px var(--gutter-page) 0;
}
@media (max-width: 759.98px) {
  .related-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ==========================================================================
   Search page
   ========================================================================== */

.search-page .section-head { margin-bottom: 24px; }
.search-page-form { position: relative; }
.search-page-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  translate: 0 -50%;
  width: 20px;
  height: 20px;
  color: var(--ink-2);
  stroke-width: 2;
  pointer-events: none;
}
.search-page-input {
  width: 100%;
  min-height: 52px;
  padding: 0 20px 0 48px;
  border: 0;
  border-radius: 26px;
  font: 400 1.0625rem/1.4 var(--font);
  color: var(--text);
  background: var(--mat-neutral);
  box-shadow: var(--glass-rim);
  -webkit-appearance: none;
          appearance: none;
  transition: box-shadow var(--dur-chip) linear;
}
.search-page-input::placeholder { color: var(--ink-2); opacity: 1; }
.search-page-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
.search-page-input:focus {
  outline: none;
  box-shadow: var(--glass-rim), 0 0 0 3px color-mix(in srgb, var(--focus-ring) 35%, transparent);
}

.search-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 20px;
  margin: 28px 4px 10px;
  font: 500 var(--step--1)/1.4 var(--font);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.search-count strong { font-weight: 700; color: var(--text); }
.search-count em { font-style: normal; font-weight: 600; color: var(--text); }
.search-scope {
  font: 700 var(--step--3)/1.4 var(--font);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}

.result-item .group-row-body { gap: 3px; }
.result-item .search-result-kind { color: var(--ink-2); }
.result-title { font: 700 1rem/1.3 var(--font); letter-spacing: -0.01em; color: var(--text); }
.result-excerpt { font: 400 .875rem/1.5 var(--font); color: var(--ink-2); }
/* The dropdown's eyebrow ink sits on a dark pane; on these lighter rows it
   measured 3.9:1 (boundless dark), so a quarter more --text here. */
.result-excerpt mark { background: none; color: color-mix(in srgb, var(--eyebrow-ink) 75%, var(--text)); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .result-item { animation: result-in var(--dur-reveal) var(--ease-entrance) calc(min(var(--i, 0), 6) * 40ms) backwards; }
}
@keyframes result-in { from { opacity: 0; transform: translateY(6px); } }

.search-nothing { padding-block: 40px 24px; }

/* ==========================================================================
   Legal and about: one reading column
   ========================================================================== */

.legal-page {
  max-width: calc(var(--col-reading) + 2 * var(--gutter-page));
  padding: var(--page-top) var(--gutter-page) 0;
}
.legal-head { margin: 0 0 40px; }
.legal-head .eyebrow { display: flex; margin: 0 0 12px; }
.legal-head h1 {
  margin: 0;
  font: 700 var(--step-3)/1.08 var(--font);
  letter-spacing: var(--track-h1);
  color: var(--text);
}
.legal-head .lede { margin: 14px 0 0; font: 400 var(--step-0l)/1.55 var(--font); color: var(--text-soft); }

/* Link lists (about) as one group of rows with a trailing chevron. */
.prose .link-list {
  list-style: none;
  padding: 0;
  border-radius: var(--r-group);
  background: var(--mat-neutral);
  box-shadow: var(--glass-rim);
  overflow: clip;
}
.prose .link-list li { position: relative; margin: 0; }
.prose .link-list li + li::before { content: ''; position: absolute; top: 0; right: 0; left: 16px; height: 1px; background: var(--hairline); }
.prose .link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 13px 16px;
  font: 500 var(--step-0s)/1.3 var(--font);
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  transition: background var(--dur-chip) linear;
}
.prose .link-list a::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: rgb(var(--ink) / .5);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prose .link-list a:hover { background: var(--row-hover); }
.prose .link-list a:active { background: var(--row-press); }
.prose .link-list a:focus-visible { outline-offset: -2px; }

/* ==========================================================================
   Error pages (404, 500)
   ========================================================================== */

.error-page {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  max-width: calc(560px + 2 * var(--gutter-page));
  min-height: calc(100svh - var(--header-height, var(--header-clear)) - 200px);
  padding: var(--page-top) var(--gutter-page) 0;
  text-align: center;
}
/* Gradient text mixed toward --text (measured share in tokens.css), not the
   raw accent: the light stop alone fails on the light ground. */
.error-code {
  font: 700 clamp(5rem, 16vw, 9rem)/.9 var(--font);
  letter-spacing: -0.05em;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--violet) var(--error-code-ink-share), var(--text)),
    color-mix(in srgb, var(--teal) var(--error-code-ink-share), var(--text)));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  padding-right: .05em;
}
.error-page h1 { margin: 0; font: 700 var(--step-2)/1.15 var(--font); letter-spacing: var(--track-h2); color: var(--text); }
.error-page > p { margin: 0; max-width: 46ch; color: var(--text-soft); }
.error-suggestion em { font-style: normal; font-weight: 600; }
.error-search { width: min(460px, 100%); margin-top: 8px; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ==========================================================================
   Forced colours: the glass pieces this file owns get a real edge
   ========================================================================== */

@media (forced-colors: active) {
  .docs-local-nav > details > summary,
  .docs-local-panel,
  .search-page-input,
  pre.code-block,
  .doc-pager a,
  .post-nav a,
  .prose .link-list { border: 1px solid CanvasText; background: Canvas; }
}