/* docs.css -- the Hadrian documentation shell
   ---------------------------------------------------------------------------
   Every value here is lifted from the prototype in ../html/: apple-docs-app.jsx
   for the shell (topbar, rail, sidebar, article column, TOC, pager) and
   apple-docs-kit.jsx for the content components. Colour comes from
   apple-theme.css tokens, which already carry the dark palette.

   Two deliberate departures from the prototype:

   1. The prototype hardcodes `const blue = '#0071e3'` in ~40 places. That is
      the LIGHT accent, so in dark mode every link, bullet and active state kept
      rendering the light-mode blue against a black background. Here it is
      var(--color-accent), which flips to #2997ff.
   2. The prototype has no layout below 1404px (92 + 232 + 880 + 200 of fixed
      columns). The breakpoints at the bottom are new.
*/

/* -- page --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }

.doc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent); color: #fff;
  padding: 10px 16px; border-radius: 0 0 10px 0;
  font: 600 14px var(--font); text-decoration: none;
}
.doc-skip:focus { left: 0; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* -- topbar ------------------------------------------------------------- */

.doc-topbar {
  position: sticky; top: 0; z-index: 40;
  height: 60px;
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
}

.doc-burger {
  display: none;
  width: 38px; height: 38px; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; cursor: pointer; color: var(--color-text-primary);
}

.doc-brand {
  display: flex; align-items: center; gap: 10px;
  width: 220px; flex-shrink: 0;
  text-decoration: none;
}
.doc-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: #1d1d1f; position: relative; overflow: hidden;
  display: inline-block; flex-shrink: 0;
}
/* The prototype tints the silhouette through a canvas at runtime. A filter gets
   the same near-white bust out of the same PNG with no script. */
.doc-mark img {
  position: absolute; left: 7%; top: 7%; width: 86%; height: 86%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
.doc-brand-name {
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.doc-brand-chip {
  font-size: 12px; font-weight: 600;
  color: var(--color-text-tertiary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px; padding: 2px 7px;
}

.doc-search {
  position: relative;
  flex: 1; max-width: 420px;
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text-tertiary);
}
.doc-search:focus-within { border-color: var(--color-accent); }
.doc-search input {
  flex: 1; min-width: 0;
  border: none; background: transparent;
  /* Scoped: a bare outline:none here (0,1,1) beat the :where() focus ring
     (0,1,0), so the search box was the one control with no visible focus. */
  outline: none;
  font-family: var(--font); font-size: 14px;
  color: var(--color-text-primary);
}
.doc-search input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.doc-search input::-webkit-search-cancel-button { display: none; }
.doc-search-clear {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-tertiary); display: flex; padding: 2px;
}

.doc-search-results {
  position: absolute; top: 46px; left: 0; right: 0;
  max-height: min(420px, 70vh); overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14);
  padding: 6px;
}
.doc-search-hit {
  display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
}
.doc-search-hit:hover,
.doc-search-hit.is-cursor { background: var(--color-surface-secondary); }
.doc-search-hit-t {
  display: block; font-size: 14.5px; font-weight: 600;
  color: var(--color-text-primary);
}
.doc-search-hit-c {
  display: block; font-size: 12.5px; margin-top: 2px;
  color: var(--color-text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-search-hit mark {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: inherit; border-radius: 3px;
}
.doc-search-none {
  padding: 14px 12px; font-size: 13.5px; color: var(--color-text-tertiary);
}

.doc-theme {
  margin-left: auto; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer; color: var(--color-text-primary);
}
.doc-theme-moon { display: none; }
[data-theme="dark"] .doc-theme-sun { display: none; }
[data-theme="dark"] .doc-theme-moon { display: flex; }

/* -- shell -------------------------------------------------------------- */

.doc-shell { display: flex; align-items: flex-start; }

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

.doc-rail {
  width: 92px; flex-shrink: 0;
  position: sticky; top: 60px; align-self: flex-start;
  height: calc(100vh - 60px);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  padding: 20px 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.doc-rail-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 12px;
  text-decoration: none;
}
.doc-rail-item.is-on {
  background: var(--color-surface);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.doc-rail-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.doc-rail-item.is-on .doc-rail-icon {
  background: var(--color-accent-light);
  color: var(--color-accent);
}
.doc-rail-label {
  font-size: 10.5px; font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--color-text-tertiary);
}
.doc-rail-item.is-on .doc-rail-label { color: var(--color-accent); }
.doc-rail-dot {
  position: absolute; top: 8px; right: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  /* #ff9f0a was 1.89:1 against the rail. This is the only marker of
     "coming soon" in the rail, so it is information, not decoration. */
  background: #b26a00;
}
[data-theme="dark"] .doc-rail-dot { background: #ff9f0a; }

/* Paired with the dot so the same fact reaches a screen reader. */
.doc-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

.doc-sidebar {
  width: 232px; flex-shrink: 0;
  position: sticky; top: 60px; align-self: flex-start;
  height: calc(100vh - 60px); overflow-y: auto;
  padding: 26px 16px 40px;
  border-right: 1px solid var(--color-border);
  background: var(--color-bg);
}
.doc-sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; margin-bottom: 22px;
}
.doc-sidebar-title {
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.doc-badge-soon {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  /* #b8860b measured 2.85:1 on its own composited tint. #7a5800 clears AA. */
  color: #7a5800; background: rgba(255, 159, 10, 0.14);
  border-radius: 6px; padding: 2px 7px;
}
[data-theme="dark"] .doc-badge-soon { color: #ffc861; }

.doc-sidebar-empty { font-size: 13px; color: var(--color-text-tertiary); padding: 8px 12px; }
.doc-sidebar-group { margin-bottom: 24px; }
.doc-sidebar-group-name {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 0 12px; margin-bottom: 8px;
}
.doc-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; margin-bottom: 1px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  color: var(--color-text-secondary);
}
.doc-sidebar-link svg { flex-shrink: 0; }
.doc-sidebar-link:hover { background: var(--color-surface-secondary); }
.doc-sidebar-link.is-on {
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-weight: 600;
}

/* Hidden by DEFAULT, not just above the mobile breakpoint. The rule that hid
   it used to live inside the max-width:980px block, so on desktop this div
   covered the whole page below the header and swallowed every click. */
.doc-scrim {
  display: none;
  position: fixed; inset: 60px 0 0; z-index: 25;
  background: rgba(0, 0, 0, 0.35);
}

/* -- article column ----------------------------------------------------- */

.doc-main {
  flex: 1; min-width: 0;
  padding: 44px 56px 80px;
  max-width: 880px; margin: 0 auto;
}
.doc-crumb {
  display: flex; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--color-accent);
  margin-bottom: 10px;
}
.doc-crumb a { color: inherit; text-decoration: none; }
.doc-crumb a:hover { text-decoration: underline; }
.doc-crumb span:not(:last-child) { color: var(--color-text-quaternary); }
.doc-crumb span:last-child { color: var(--color-text-tertiary); font-weight: 500; }

.doc-h1 {
  font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}
.doc-lead {
  font-size: 19px; line-height: 1.6; color: var(--color-text-secondary);
  margin: 0 0 12px;
}
.doc-rule {
  height: 1px; border: 0; background: var(--color-border);
  margin: 28px 0 36px;
}

/* -- content components ------------------------------------------------- */

.doc-h2 {
  font-size: 28px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--color-text-primary);
  margin: 52px 0 18px; scroll-margin-top: 80px;
}
.doc-h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin: 34px 0 12px; scroll-margin-top: 80px;
}
/* Per-heading permalink. Hidden until hover, but ALWAYS shown once focused,
   so it is reachable by keyboard; and always shown on coarse pointers, where
   there is no hover to reveal it. */
.doc-anchor {
  margin-left: 0.4em;
  color: var(--color-text-quaternary);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.doc-h2:hover .doc-anchor,
.doc-h3:hover .doc-anchor,
.doc-h4:hover .doc-anchor,
.doc-anchor:focus-visible { opacity: 1; }
.doc-anchor:hover { color: var(--color-accent); }
@media (hover: none) {
  .doc-anchor { opacity: 0.4; }
}

.doc-h4 {
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 28px 0 10px; scroll-margin-top: 80px;
}

.doc-p {
  font-size: 16px; line-height: 1.7; color: var(--color-text-secondary);
  margin: 0 0 18px;
}
.doc-article a { color: var(--color-accent); }

.doc-code-inline {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 5px; padding: 1px 5px;
  color: var(--color-text-primary);
}

.doc-ul {
  margin: 0 0 20px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.doc-ul-tight { gap: 6px; margin: 6px 0 0; }
.doc-ul li {
  display: flex; gap: 12px;
  font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary);
}
.doc-dot {
  flex-shrink: 0; margin-top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
}
.doc-ul strong, .doc-steps strong { color: var(--color-text-primary); }

.doc-steps {
  margin: 0 0 22px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 14px;
}
.doc-steps li { display: flex; gap: 14px; align-items: flex-start; }
.doc-step-n {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-light); color: var(--color-accent);
  font-size: 13px; font-weight: 700;
}
.doc-step-t {
  font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary);
  padding-top: 2px;
}

.doc-callout {
  display: flex; gap: 14px;
  padding: 16px 18px; border-radius: 12px; margin: 0 0 22px;
}
.doc-callout-glyph {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
}
.doc-callout-body {
  font-size: 14.5px; line-height: 1.6;
  /* Not --color-text-secondary. #6e6e73 measured 4.41:1 on the info tint,
     4.49 on tip and 4.44 on warn -- all three miss AA. Four values darker
     clears every one (4.67 / 4.77 / 4.71) and is imperceptible. Dark mode
     is unaffected, so it keeps the token. */
  color: #6a6a6f;
}
[data-theme="dark"] .doc-callout-body { color: var(--color-text-secondary); }
.doc-callout-body strong { display: block; margin-bottom: 2px; color: var(--color-text-primary); }

.doc-callout-info { background: var(--color-accent-light); }
.doc-callout-info .doc-callout-glyph { background: var(--color-accent); }
.doc-callout-tip { background: rgba(48, 209, 88, 0.12); }
.doc-callout-tip .doc-callout-glyph { background: #146945; }
.doc-callout-warn { background: rgba(255, 159, 10, 0.14); }
.doc-callout-warn .doc-callout-glyph { background: #7a5800; }
/* The two literal greens/ambers are picked for white text on a light tint; on
   black they need lifting or the glyph disc disappears into its own panel. */
[data-theme="dark"] .doc-callout-tip .doc-callout-glyph { background: #30d158; color: #0b2416; }
[data-theme="dark"] .doc-callout-warn .doc-callout-glyph { background: #ff9f0a; color: #2a1a00; }

.doc-codeblock {
  margin: 0 0 22px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--color-border);
}
.doc-codeblock-lang {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--color-text-tertiary);
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.doc-codeblock pre {
  margin: 0; padding: 16px; background: var(--color-surface); overflow-x: auto;
}
.doc-codeblock code {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65;
  color: var(--color-text-primary); white-space: pre;
}

/* A real screenshot. Bordered and radiused like the placeholder frame it
   replaces, so a page mixing the two reads as one thing. Click opens the full
   resolution -- these are captured at 2x and shown at half, so detail a reader
   wants to zoom into is genuinely there. */
.doc-figure {
  margin: 0 0 22px;
}
/* inline-block so the frame hugs a crop narrower than the column instead of
   drawing a full-width box around a small image. */
.doc-figure a {
  display: inline-block;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-surface-secondary);
  line-height: 0;
}
/* No width property at all. The builder writes width/height ATTRIBUTES in CSS
   pixels, which the browser applies as a presentational hint -- the weakest
   kind of rule -- so a 182px crop renders at 182px and a 890px one is capped by
   max-width. Declaring width:auto here overrode that hint and sent the browser
   back to raw pixel dimensions, doubling every 2x crop; width:100% before that
   stretched a 182px rail across the whole column. */
.doc-figure img {
  display: block;
  max-width: 100%;
  height: auto;
}
.doc-figure figcaption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-top: 8px;
}

.doc-shot {
  margin: 0 0 22px; height: 220px;
  border-radius: 12px; border: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.doc-shot-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
}
.doc-shot figcaption { font-size: 13px; color: var(--color-text-tertiary); }

.doc-props {
  margin: 0 0 22px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--color-border);
}
/* Laid out as a real table, sized by its own content. The fixed 1fr 1fr 2fr
   grid it used before assumed one shape -- name / default / description -- and
   every table that does not have that shape came out wrong: a two-column table
   squeezed both columns into 1fr and left the 2fr track empty, and a
   Setting / What it does / Default table put the sentence in 1fr and gave 2fr
   to the word "Off". Auto tracks put the width where the prose is, whatever
   order the columns arrive in. */
.doc-props-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.doc-props-table thead tr {
  background: var(--color-surface-secondary);
  border-bottom: 1px solid var(--color-border);
}
.doc-props-table th {
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-tertiary); padding: 12px 16px;
}
.doc-props-table tbody tr + tr { border-top: 1px solid var(--color-border); }
.doc-props-c0 { font-family: var(--font-mono); font-size: 13px; color: var(--color-accent); padding: 12px 16px; }
.doc-props-c1 { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-tertiary); padding: 12px 16px; }
.doc-props-c2 { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); padding: 12px 16px; }

.doc-table-wrap { margin: 0 0 22px; overflow-x: auto; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-table th {
  text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 12px 16px; background: var(--color-surface-secondary);
  border-bottom: 1px solid var(--color-border);
}
.doc-table td {
  padding: 12px 16px; color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

/* -- pager -------------------------------------------------------------- */

.doc-pager {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--color-border);
}
.doc-pager-btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px; border-radius: 12px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  min-width: 160px; text-decoration: none;
}
.doc-pager-btn:hover { border-color: var(--color-accent); }
.doc-pager-next { text-align: right; align-items: flex-end; }
.doc-pager-dim { font-size: 12.5px; color: var(--color-text-tertiary); }
.doc-pager-strong { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }

/* -- on this page ------------------------------------------------------- */

.doc-toc {
  width: 200px; flex-shrink: 0;
  position: sticky; top: 60px; align-self: flex-start;
  padding: 40px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.doc-toc-head {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-tertiary); margin-bottom: 10px;
}
.doc-toc a {
  font-size: 13.5px; line-height: 1.5;
  padding: 4px 10px;
  border-left: 2px solid var(--color-border);
  /* The prototype used --color-text-tertiary here, which measures 3.51:1 on the
     page background -- these are navigation links, so they are text and need
     4.5. --color-text-secondary is the next step up at 4.91:1. */
  color: var(--color-text-secondary);
  text-decoration: none;
}
.doc-toc a.is-on {
  border-left-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 600;
}

/* -- responsive -----------------------------------------------------------
   The prototype is 1404px of fixed columns and has no story below that. The
   TOC is the first thing to go (the sidebar still gives you the whole article
   list), then the rail and sidebar fold into one drawer. */

@media (max-width: 1240px) {
  .doc-toc { display: none; }
  .doc-main { padding: 44px 40px 80px; }
}

@media (max-width: 980px) {
  .doc-burger { display: flex; }
  .doc-brand { width: auto; }
  .doc-brand-chip { display: none; }

  /* A translated element keeps its place in the tab order, so with the drawer
     closed its ten links still took keyboard focus and painted the focus ring
     off the left edge of the screen. That is fixed with the inert attribute
     from docs.js, NOT with visibility here: visibility needs a transition delay
     to survive the slide-out, and a delayed value is not applied synchronously,
     so focusing the first link on open silently failed. */
  .doc-rail, .doc-sidebar {
    position: fixed; top: 60px; z-index: 30;
    height: calc(100vh - 60px);
    transform: translateX(-100%);
    transition: transform 0.24s ease;
  }
  .doc-rail { left: 0; }
  .doc-sidebar { left: 92px; width: 262px; box-shadow: 8px 0 28px rgba(0, 0, 0, 0.12); }

  body.doc-nav-open .doc-rail,
  body.doc-nav-open .doc-sidebar { transform: translateX(0); }
  body.doc-nav-open .doc-scrim { display: block; }
  body.doc-nav-open { overflow: hidden; }

  .doc-main { padding: 32px 24px 72px; }
  .doc-h1 { font-size: 32px; }
  .doc-lead { font-size: 17px; }
  .doc-h2 { font-size: 24px; margin-top: 40px; }
}

@media (max-width: 640px) {
  .doc-topbar { gap: 12px; padding: 0 14px; }
  .doc-brand-name { display: none; }
  .doc-main { padding: 24px 18px 64px; }
  .doc-h1 { font-size: 28px; }

  /* Stacked, because 1fr 1fr 2fr of Setting/Default/Description is unreadable
     at 320px. The header row is hidden visually, so each cell carries its own
     label from the data-label the builder emits -- previously column 2 got a
     hardcoded "Default: " prefix and the other two got nothing. */
  .doc-props-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  /* display:grid is set HERE, not on the base rule: desktop is a real table
     laid out on its own content, and only the stack needs one column. */
  .doc-props-table tbody tr { display: grid; grid-template-columns: 1fr; padding: 12px 16px; }
  .doc-props-table td { padding: 2px 0; }
  .doc-props-c1::before,
  .doc-props-c2::before {
    content: attr(data-label) ": ";
    color: var(--color-text-quaternary);
  }

  .doc-pager { flex-direction: column; }
  .doc-pager-next { text-align: left; align-items: flex-start; }
  .doc-shot { height: 160px; }
}

/* Respect the OS setting: the drawer slide and smooth scroll are the only
   motion here, and neither carries meaning. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .doc-topbar, .doc-rail, .doc-sidebar, .doc-toc, .doc-pager, .doc-scrim { display: none; }
  .doc-main { max-width: none; padding: 0; }
}