/* ==========================================================================
   The guide as a documentation site (dist/docs/). Loaded after styles.css, whose
   tokens it uses and never restates: no colour is named here either.

   Three columns on a wide screen, like any product documentation: the chapters on
   the left, the text in the middle, the sections of the current chapter on the
   right. The rail goes first as the screen narrows, then the sidebar becomes a
   drawer. The text column keeps a reading measure whatever the screen does.
   ========================================================================== */

.docs {
  --docs-header-h: 3.75rem;
  --docs-sidebar-w: 17.5rem;
  --docs-rail-w: 14.5rem;
  font-size: 16px;
  line-height: 1.65;
}
/* Spelled out: the header height is declared on body, which html cannot read. */
html:has(.docs) {
  scroll-padding-top: 4.25rem;
}

/* ------------------------------------------------------------- masthead --- */
.docs-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-veil);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .docs-header {
    background: var(--paper);
  }
}
.docs-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--docs-header-h);
  padding-inline: 1.25rem;
  max-width: 96rem;
  margin-inline: auto;
}
.docs .brand {
  font-size: 1.15rem;
}
.docs-product {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
  font-weight: 650;
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.docs-product span {
  font-weight: 500;
  color: var(--ink-faint);
}
.docs-product:hover {
  color: var(--accent-text);
}

.docs-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  width: min(22rem, 100%);
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}
.docs-search-trigger:hover {
  border-color: var(--rule-action);
  background: var(--paper);
}
.docs-search-trigger[hidden] {
  display: none;
}
.docs-search-label {
  flex: 1;
  text-align: left;
}
.docs kbd {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink-soft);
}

.docs-header-links {
  display: flex;
  gap: 0.25rem;
}
.docs-header-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.docs-header-links a:hover {
  color: var(--accent-text);
  background: var(--sky);
}
/* Without the script there is no search button to push the links right. */
.docs-search-trigger[hidden] + .docs-header-links {
  margin-left: auto;
}

.docs-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: -0.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.docs-menu:hover {
  background: var(--sky);
}

/* ---------------------------------------------------------------- shell --- */
.docs-shell {
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-rail-w);
  max-width: 96rem;
  margin-inline: auto;
}

/* -------------------------------------------------------------- sidebar --- */
.docs-sidebar {
  position: sticky;
  top: var(--docs-header-h);
  height: calc(100vh - var(--docs-header-h));
  height: calc(100dvh - var(--docs-header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--rule);
}
.docs-nav-inner {
  padding: 1.5rem 1rem 2rem 1.25rem;
}
.docs-nav-group {
  margin-top: 1.5rem;
}
.docs-nav-part {
  margin: 0 0 0.4rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.docs-sidebar ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.docs-nav-link {
  display: flex;
  gap: 0.55rem;
  padding: 0.38rem 0.6rem;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-body);
  text-decoration: none;
}
.docs-nav-link:hover {
  background: var(--sky);
  color: var(--ink);
}
.docs-nav-link[aria-current] {
  background: var(--sky-strong);
  color: var(--accent-text);
  font-weight: 600;
}
.docs-nav-num {
  flex: none;
  min-width: 1.3rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.docs-nav-link[aria-current] .docs-nav-num {
  color: var(--accent-text);
}
.docs-nav-foot {
  display: grid;
  gap: 0.2rem;
  margin-top: 1.75rem;
  padding: 1rem 0.6rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

/* ----------------------------------------------------------------- main --- */
.docs-main {
  min-width: 0;
  padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 3rem;
}
.doc {
  max-width: 46rem;
  margin-inline: auto;
}
.docs-kicker {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.doc h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.9rem;
}
.doc-num {
  color: var(--ink-faint);
  font-weight: 600;
  margin-right: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.doc h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0.75rem;
}
.doc h3 {
  position: relative;
  font-size: 1.28rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 2.75rem 0 0.8rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.doc h4 {
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
  margin: 1.75rem 0 0.5rem;
}
.doc-anchor {
  margin-left: 0.45rem;
  color: var(--ink-faint);
  text-decoration: none;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.doc h3:hover .doc-anchor,
.doc-anchor:focus-visible {
  opacity: 1;
}
.doc p,
.doc li {
  max-width: 44rem;
}
.doc ul,
.doc ol {
  padding-left: 1.3rem;
  margin: 0 0 1.15em;
}
.doc li {
  margin-bottom: 0.4em;
}
.doc li::marker {
  color: var(--ink-faint);
}
.doc .lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

.doc code {
  font-size: 0.86em;
  padding: 0.12em 0.38em;
  border-radius: 5px;
  background: var(--sky);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.doc pre {
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink);
}

/* The guide's tables have no thead: the first row holds th cells, which styles.css
   would otherwise treat as row headers. */
.doc .table-scroll {
  margin: 1.25rem 0 1.75rem;
}
.doc table {
  min-width: 34rem;
  font-size: 0.9rem;
}
.doc th,
.doc td {
  padding: 0.7rem 0.95rem;
}
.doc tr:first-child th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  white-space: normal;
  background: var(--paper-sunken);
}
.doc td:first-child {
  color: var(--ink);
  font-weight: 500;
}
.doc tr:last-child td {
  border-bottom: 0;
}
.doc td code {
  background: none;
  padding: 0;
}

/* Callouts: one neutral, one marked. The guide's PDF draws the second in orange,
   which on this site means an unfilled value and nothing else. */
.doc .note,
.doc .warn {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-wash);
  font-size: 0.95rem;
}
.doc .warn {
  border-left-color: var(--ink);
  background: var(--sky-strong);
}
.doc .note > b,
.doc .warn > b {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}
.doc .note p:last-child,
.doc .warn p:last-child {
  margin-bottom: 0;
}

.doc figure.shot {
  margin: 1.5rem 0 2rem;
}
.doc figure.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.doc figure.shot.narrow {
  max-width: 28rem;
}
.doc figure.shot figcaption {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------- inline contents --- */
.docs-inline-toc {
  display: none;
  margin: 0 0 2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}
.docs-inline-toc summary {
  padding: 0.7rem 1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.docs-inline-toc ol {
  margin: 0;
  padding: 0 1rem 0.9rem 2.2rem;
}

/* ------------------------------------------------------------------ rail --- */
.docs-rail {
  position: sticky;
  top: var(--docs-header-h);
  align-self: start;
  max-height: calc(100vh - var(--docs-header-h));
  overflow-y: auto;
  padding: 2.6rem 1.25rem 2rem 0.5rem;
  font-size: 0.85rem;
}
.docs-rail-title {
  margin: 0 0 0.6rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.docs-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule);
}
.docs-rail a {
  display: block;
  margin-left: -1px;
  padding: 0.3rem 0 0.3rem 0.85rem;
  border-left: 2px solid transparent;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
}
.docs-rail a:hover {
  color: var(--ink);
}
.docs-rail a[aria-current] {
  border-left-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

/* ----------------------------------------------------------------- pager --- */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 46rem;
  margin: 3.5rem auto 0;
}
.docs-pager-card {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    border-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
.docs-pager-card:hover {
  border-color: var(--rule-action);
  box-shadow: var(--shadow-card);
}
.docs-pager-next {
  text-align: right;
}
.docs-pager-label {
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.docs-pager-prev .docs-pager-label::before {
  content: "← ";
}
.docs-pager-next .docs-pager-label::after {
  content: " →";
}
.docs-pager-title {
  font-weight: 600;
  color: var(--accent-text);
}

.docs-footer {
  max-width: 46rem;
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.docs-footer p {
  margin-bottom: 0.4rem;
  color: inherit;
}

/* -------------------------------------------------------------- overview --- */
.doc-overview {
  max-width: 54rem;
}
.doc-overview h1 {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
}
.docs-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.docs-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 0 0 2.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-sunken);
}
.docs-facts dt {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.docs-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  color: var(--ink);
}
.docs-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.25rem;
}
.docs-part-card {
  padding: 1.4rem 1.5rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow-card);
}
.docs-part-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}
.docs-part-card > p:not(.docs-kicker) {
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.docs-part-card ol {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.docs-part-card li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.docs-part-card li a {
  display: flex;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
}
.docs-part-card li a:hover {
  text-decoration: underline;
}
.docs-part-summary {
  display: block;
  padding-left: 1.8rem;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------- search --- */
.docs-search {
  width: min(40rem, calc(100% - 2rem));
  max-height: min(36rem, calc(100dvh - 6rem));
  margin: 4.5rem auto auto;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.docs-search[open] {
  display: flex;
  flex-direction: column;
}
.docs-search::backdrop {
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  backdrop-filter: blur(2px);
}
.docs-search-box {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-faint);
}
.docs-search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
}
.docs-search-box input::-webkit-search-cancel-button {
  display: none;
}
.docs-search-close {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper-sunken);
  color: var(--ink-soft);
  cursor: pointer;
}
.docs-search-results {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  overflow-y: auto;
}
.docs-search-results:empty {
  display: none;
}
.docs-search-results a {
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-body);
}
.docs-search-results [aria-selected="true"] a,
.docs-search-results a:hover {
  background: var(--sky-strong);
}
.docs-search-hit-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.docs-search-hit-page {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.docs-search-hit-text {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.docs-search mark {
  background: var(--sky-strong);
  color: var(--accent-text);
  font-weight: 600;
  border-radius: 2px;
}
.docs-search-results [aria-selected="true"] mark,
.docs-search-results a:hover mark {
  background: var(--paper);
}
.docs-search-empty {
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--ink-faint);
}

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 80rem) {
  .docs-shell {
    grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr);
  }
  .docs-rail {
    display: none;
  }
  .docs-inline-toc {
    display: block;
  }
}

@media (max-width: 60rem) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Without the script the sidebar simply sits above the text. */
  .docs-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  html[data-docs-js] .docs-menu {
    display: inline-flex;
  }
  html[data-docs-js] .docs-sidebar {
    position: fixed;
    z-index: 40;
    top: var(--docs-header-h);
    left: 0;
    bottom: 0;
    width: min(20rem, 86vw);
    height: auto;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    border-bottom: 0;
    box-shadow: var(--shadow-raised);
    transform: translateX(-105%);
    visibility: hidden;
    transition:
      transform 0.22s var(--ease),
      visibility 0s linear 0.22s;
  }
  html[data-docs-js] .docs-sidebar.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.22s var(--ease);
  }
  .docs-header-links a:not(:first-child) {
    display: none;
  }
}

@media (max-width: 40rem) {
  .docs-product {
    padding-left: 0;
    border-left: 0;
  }
  .docs .brand {
    display: none;
  }
  .docs-search-trigger {
    width: auto;
  }
  .docs-search-label,
  .docs-search-trigger kbd {
    display: none;
  }
  .docs-main {
    padding-top: 1.75rem;
  }
  .docs-pager {
    grid-template-columns: 1fr;
  }
  .doc figure.shot.narrow {
    max-width: none;
  }
}