/*
 * The documentation area — its own shell, and the only part of this site
 * with two themes.
 *
 * Why it is not the marketing chrome:
 *
 * `decisions.md` chose **Visual 2 — Board**: a dark surface, hairline
 * panels, the state dots the board itself draws. That choice was made for
 * a decision-maker reading five screens. It also rejected **Structure 3 —
 * a persistent rail**, and the reason it gave is the reason to use one
 * here: *"a rail says reference material before a word is read."* For
 * documentation, saying reference material before a word is read is the
 * whole job.
 *
 * And two themes, where the rest of the site has one. The brief asks for
 * light and dark, and the product's own deepest document —
 * `docs/guides/setting-up-a-document-agent.html`, the guide this area's
 * tutorials are held to — is **light, on paper, with A4 print rules**.
 * Somebody following a twelve-step install reads for an hour and then
 * prints it. The marketing pages are untouched: they keep `site.css` and
 * stay dark.
 *
 * Both themes are declared three times, the way the platform's own GUI
 * standard requires: the light values on `:root`, the dark values under
 * `prefers-color-scheme: dark` guarded by `:root:not([data-theme="light"])`
 * so a reader who has chosen light keeps it, and again under
 * `:root[data-theme="dark"]` so a reader who has chosen dark gets it on a
 * light machine. A declaration in one block only reads as present and
 * leaves the other two untouched.
 */

:root {
  color-scheme: light;

  /* --- paper ------------------------------------------------------- */
  --d-bg: #ffffff;
  --d-raise: #f6f7f9;      /* the reference guide's own --paper */
  --d-sink: #eef0f4;
  --d-hair: #d9dce3;       /* the reference guide's own --rule */
  --d-hair-soft: #e8eaef;

  --d-ink: #16181d;        /* the reference guide's own --ink */
  --d-muted: #5b616e;      /* its --slate */
  /*
   * The third weight of text, and the one place this sheet shipped a
   * guess. `#767d8b` was picked to sit between the slate and the rule,
   * and measured **4.14 on paper and 3.86 on a raised panel** — under
   * the 4.5 that body text needs, on the rail's group labels and the
   * footer's version line, both of which are 12.5px.
   *
   * `#656c7a` measures 5.28 on paper and 4.92 on a panel. It is a
   * narrower gap below `--d-muted` (5.80 on a panel) than the dark
   * theme manages, and that is the honest constraint rather than a
   * compromise: on paper there is very little room under the muted
   * weight before AA stops you, where on a dark surface there is a lot.
   * Three weights of text, and the third is only just a third.
   */
  --d-faint: #656c7a;

  /*
   * The accent is the reference guide's blue, not the site's cyan.
   *
   * `#38bdf8` measures 9.34 on the site's near-black and **2.26 on
   * white**, so the one colour that carries every link in the dark
   * cannot carry one on paper. `#2f4bd8` is the blue
   * `setting-up-a-document-agent.html` already uses for its rules and
   * its where-badges, and it measures 5.93 on white — so the light
   * theme is the product's own paper blue rather than a tint invented
   * for it.
   */
  --d-accent: #2f4bd8;
  --d-accent-soft: rgba(47, 75, 216, 0.09);
  /* Type on a filled accent. It goes to paper in light and to the page's
     own dark in dark, which is the one token that inverts. */
  --d-accent-ink: #ffffff;

  --d-ok: #1d6b3f;
  --d-warn: #8a5a05;
  --d-bad: #b4231f;

  --d-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --d-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* --- the six-step type scale and seven-step spacing scale -------- */
  --d-t1: 2rem;
  --d-t2: 1.5rem;
  --d-t3: 1.175rem;
  --d-t4: 1rem;
  --d-t5: 0.875rem;
  --d-t6: 0.78rem;

  --d-s1: 0.25rem;
  --d-s2: 0.5rem;
  --d-s3: 0.75rem;
  --d-s4: 1rem;
  --d-s5: 1.5rem;
  --d-s6: 2rem;
  --d-s7: 3rem;

  --d-rail: 17.5rem;
  --d-aside: 14rem;
  --d-read: 48rem;
  --d-head: 3.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --d-bg: #050811;        /* the site's own --bg, so the two agree at the seam */
    --d-raise: #0b0f19;     /* its --panel  */
    --d-sink: #111729;      /* its --panel-2 */
    --d-hair: #1e2240;
    --d-hair-soft: #161a30;

    --d-ink: #ffffff;
    --d-muted: #94a3b8;
    --d-faint: #7281a0;

    --d-accent: #38bdf8;    /* 9.34 on --bg, measured, not computed */
    --d-accent-soft: rgba(56, 189, 248, 0.12);
    --d-accent-ink: #050811;

    --d-ok: #39d98a;
    --d-warn: #f2b44c;
    --d-bad: #ef5f6b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --d-bg: #050811;
  --d-raise: #0b0f19;
  --d-sink: #111729;
  --d-hair: #1e2240;
  --d-hair-soft: #161a30;

  --d-ink: #ffffff;
  --d-muted: #94a3b8;
  --d-faint: #7281a0;

  --d-accent: #38bdf8;
  --d-accent-soft: rgba(56, 189, 248, 0.12);
  --d-accent-ink: #050811;

  --d-ok: #39d98a;
  --d-warn: #f2b44c;
  --d-bad: #ef5f6b;
}

/* ------------------------------------------------------------------ *
 * The page.
 * ------------------------------------------------------------------ */

* { box-sizing: border-box; }

html.docs { scroll-behavior: smooth; }
html.docs body {
  margin: 0;
  background: var(--d-bg);
  color: var(--d-ink);
  font: 400 var(--d-t4)/1.65 var(--d-sans);
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--d-s4);
  top: var(--d-s2);
  z-index: 60;
  background: var(--d-accent);
  color: var(--d-accent-ink);
  padding: var(--d-s2) var(--d-s4);
  border-radius: 6px;
}

/* --- the header --------------------------------------------------- */

.doc-head {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--d-s4);
  height: var(--d-head);
  padding: 0 var(--d-s4);
  /* The opaque value first, so a browser without `color-mix` gets a header
     with a background rather than one you can read the page through. */
  background: var(--d-bg);
  background: color-mix(in srgb, var(--d-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--d-hair);
}
.doc-head .mark {
  display: flex;
  align-items: center;
  gap: var(--d-s2);
  font-weight: 650;
  font-size: var(--d-t5);
  color: var(--d-ink);
  text-decoration: none;
  white-space: nowrap;
}
.doc-head .mark img { height: 22px; width: auto; display: block; }
.doc-head .mark span { color: var(--d-muted); font-weight: 450; }
.doc-head .grow { flex: 1 1 auto; }

.doc-head .tool {
  display: inline-flex;
  align-items: center;
  gap: var(--d-s2);
  height: 2rem;
  padding: 0 var(--d-s3);
  font: 500 var(--d-t5)/1 var(--d-sans);
  color: var(--d-muted);
  background: transparent;
  border: 1px solid var(--d-hair);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.doc-head .tool:hover { color: var(--d-ink); border-color: var(--d-accent); }

.rail-toggle { display: none; }

/* --- the three columns -------------------------------------------- */

.doc-shell {
  display: grid;
  grid-template-columns: var(--d-rail) minmax(0, 1fr) var(--d-aside);
  gap: var(--d-s6);
  max-width: 94rem;
  margin: 0 auto;
  padding: 0 var(--d-s4);
  align-items: start;
}

.doc-rail {
  position: sticky;
  top: var(--d-head);
  max-height: calc(100vh - var(--d-head));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--d-s5) var(--d-s2) var(--d-s7) 0;
  font-size: var(--d-t5);
}
.doc-rail h2 {
  margin: var(--d-s5) 0 var(--d-s2);
  font-size: var(--d-t6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-faint);
  font-weight: 650;
}
.doc-rail h2:first-child { margin-top: 0; }
.doc-rail a {
  display: block;
  padding: 0.3rem var(--d-s3);
  margin-left: calc(var(--d-s3) * -1);
  color: var(--d-muted);
  text-decoration: none;
  border-radius: 5px;
  border-left: 2px solid transparent;
}
.doc-rail a:hover { color: var(--d-ink); background: var(--d-raise); }
.doc-rail a[aria-current="page"] {
  color: var(--d-accent);
  background: var(--d-accent-soft);
  border-left-color: var(--d-accent);
  font-weight: 600;
}
.doc-rail .sub { padding-left: var(--d-s5); font-size: var(--d-t5); }

.doc-main {
  min-width: 0;
  padding: var(--d-s6) 0 var(--d-s7);
}

.doc-aside {
  position: sticky;
  top: var(--d-head);
  max-height: calc(100vh - var(--d-head));
  overflow-y: auto;
  padding: var(--d-s6) 0 var(--d-s7);
  font-size: var(--d-t5);
}
.doc-aside h2 {
  margin: 0 0 var(--d-s2);
  font-size: var(--d-t6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-faint);
  font-weight: 650;
}
.doc-aside a {
  display: block;
  padding: 0.22rem 0 0.22rem var(--d-s3);
  border-left: 2px solid var(--d-hair);
  color: var(--d-muted);
  text-decoration: none;
}
.doc-aside a:hover { color: var(--d-ink); border-left-color: var(--d-accent); }
.doc-aside a.h3 { padding-left: var(--d-s5); }
.doc-aside a.h4 { padding-left: calc(var(--d-s5) + var(--d-s3)); }

/* ------------------------------------------------------------------ *
 * The reading column.
 * ------------------------------------------------------------------ */

.doc-main > * { max-width: var(--d-read); }
.doc-main > .wide, .doc-main > .table-scroll, .doc-main > figure { max-width: none; }

.doc-main h1 {
  font-size: var(--d-t1);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--d-s3);
  font-weight: 680;
}
.doc-main h2 {
  font-size: var(--d-t2);
  line-height: 1.3;
  margin: var(--d-s7) 0 var(--d-s3);
  padding-bottom: var(--d-s2);
  border-bottom: 1px solid var(--d-hair);
  font-weight: 650;
  scroll-margin-top: calc(var(--d-head) + var(--d-s4));
}
.doc-main h3 {
  font-size: var(--d-t3);
  margin: var(--d-s6) 0 var(--d-s2);
  font-weight: 640;
  scroll-margin-top: calc(var(--d-head) + var(--d-s4));
}
.doc-main h4 {
  font-size: var(--d-t4);
  margin: var(--d-s5) 0 var(--d-s2);
  font-weight: 640;
  color: var(--d-muted);
  scroll-margin-top: calc(var(--d-head) + var(--d-s4));
}
.doc-main h5, .doc-main h6 { font-size: var(--d-t5); margin: var(--d-s4) 0 var(--d-s2); font-weight: 640; }

.doc-main p { margin: 0 0 var(--d-s4); }
.doc-main a { color: var(--d-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.doc-main hr { border: 0; border-top: 1px solid var(--d-hair); margin: var(--d-s6) 0; }

.doc-main ul, .doc-main ol { margin: 0 0 var(--d-s4); padding-left: var(--d-s5); }
.doc-main li { margin: 0 0 var(--d-s2); }
.doc-main li > ul, .doc-main li > ol { margin-top: var(--d-s2); }

.doc-main .lede {
  font-size: var(--d-t3);
  line-height: 1.55;
  color: var(--d-muted);
  margin-bottom: var(--d-s5);
}

/* A line under a table or a figure saying where its contents came from.
   Quieter than the body and smaller, but `--d-muted` rather than
   `--d-faint`: a caption that says a table was derived rather than typed
   is the sentence that makes the table trustworthy, so it is not the
   thing to make hardest to read. */
.doc-main .caption {
  font-size: var(--d-t5);
  line-height: 1.5;
  color: var(--d-muted);
  margin-top: var(--d-s2);
}

/* The provenance note at the top of a rendered reference document. It
   carries `.note` too and takes that family's whole appearance; this rule
   is what makes it the *first* thing on the page and slightly apart from
   the prose it introduces, because it is about the page rather than part
   of it. `check.mjs` asserts one on every rendered page — it is the
   sentence that makes the engine's internal names defensible here. */
.doc-main .source-note {
  margin-bottom: var(--d-s6);
}

/* A list of documents, each a link and a sentence. Unbulleted, because
   every item is a two-line block and a bullet beside a two-line block
   reads as a bullet beside the first line only. */
.doc-main .doc-list {
  list-style: none;
  padding-left: 0;
}

.doc-main .doc-list > li {
  padding: var(--d-s3) 0;
  border-bottom: 1px solid var(--d-hair-soft);
}

.doc-main .doc-list > li:last-child { border-bottom: 0; }

/* "rendered from <path>" — the provenance line. This is the one place
   `--d-faint` is right: it is a path somebody reads once to check, not
   prose. It is still measured at AA against the page background, like
   every other colour here. */
.doc-main .from {
  font-size: var(--d-t6);
  color: var(--d-faint);
}

/* The anchor beside a heading: present for everyone, quiet until the
   heading is hovered or the link itself has focus. A control that only
   exists on hover cannot be reached from a keyboard. */
.anchor {
  margin-left: var(--d-s2);
  color: var(--d-faint);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
}
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor,
h5:hover .anchor, h6:hover .anchor, .anchor:focus { opacity: 1; }

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

.doc-main code {
  font-family: var(--d-mono);
  /*
   * Relative, with a floor at the scale's smallest step.
   *
   * `0.875em` is deliberate: a monospace face at the same declared size
   * as the sans around it reads noticeably larger, so inline code is set
   * down a little to sit level with its sentence. Relative is what makes
   * that true in a heading as well as in a paragraph.
   *
   * But relative compounds. Measured on this page: `agents.manage`
   * inside a 14px table row computed **12.25px**, which is below
   * `--d-t6` (12.48) — the scale's smallest step — so the smallest text
   * on the site was a size the standard does not declare. The floor
   * keeps the relative behaviour everywhere it is wanted and stops it
   * one step short of leaving the scale.
   */
  font-size: max(0.875em, var(--d-t6));
  background: var(--d-raise);
  border: 1px solid var(--d-hair-soft);
  border-radius: 4px;
  padding: 0.08em 0.3em;
  overflow-wrap: break-word;
}

figure.code {
  position: relative;
  margin: 0 0 var(--d-s4);
  background: var(--d-raise);
  border: 1px solid var(--d-hair);
  border-left: 3px solid var(--d-accent);
  border-radius: 7px;
  overflow: hidden;
}
figure.code pre {
  margin: 0;
  padding: var(--d-s3) var(--d-s4);
  overflow-x: auto;
  font-family: var(--d-mono);
  font-size: var(--d-t5);
  line-height: 1.55;
  tab-size: 2;
}
figure.code code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}
figure.code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0;
  right: 4.6rem;
  padding: 0.1rem var(--d-s2);
  font: 600 var(--d-t6)/1.5 var(--d-mono);
  letter-spacing: 0.04em;
  color: var(--d-faint);
  text-transform: lowercase;
}
figure.code .copy {
  position: absolute;
  top: var(--d-s2);
  right: var(--d-s2);
  padding: 0.18rem var(--d-s2);
  font: 600 var(--d-t6)/1.4 var(--d-sans);
  color: var(--d-muted);
  background: var(--d-bg);
  border: 1px solid var(--d-hair);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
}
figure.code:hover .copy, figure.code .copy:focus { opacity: 1; }
figure.code .copy:hover { color: var(--d-accent); border-color: var(--d-accent); }
figure.code .copy[data-done] { color: var(--d-ok); border-color: var(--d-ok); }

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

.table-scroll { overflow-x: auto; margin: 0 0 var(--d-s4); }
.doc-main table { border-collapse: collapse; width: 100%; font-size: var(--d-t5); }
.doc-main th, .doc-main td {
  border: 1px solid var(--d-hair);
  padding: var(--d-s2) var(--d-s3);
  text-align: left;
  vertical-align: top;
}
.doc-main th { background: var(--d-raise); font-weight: 650; }

.doc-main blockquote {
  margin: 0 0 var(--d-s4);
  padding: var(--d-s1) var(--d-s4);
  border-left: 3px solid var(--d-hair);
  color: var(--d-muted);
}
.doc-main blockquote > :last-child { margin-bottom: 0; }

/*
 * A screen's name, and a field's.
 *
 * The reference guide's own two classes, kept because they do a real
 * job: in a sentence like *open Settings and choose the MCP servers
 * tab*, the words that are labels on the screen have to be
 * distinguishable from the words that are English, or a reader hunts
 * for a button called "choose". Weight rather than colour, so they do
 * not read as links.
 */
.doc-main .screen, .doc-main .field { font-weight: 640; color: var(--d-ink); }

/* ------------------------------------------------------------------ *
 * The tutorial form.
 *
 * Numbered steps, a where-badge on every step, and note/warn/check —
 * the form `docs/guides/setting-up-a-document-agent.html` established
 * and `test/guides.test.js` holds. The class names are that document's,
 * so a reader moving between the two meets one vocabulary.
 * ------------------------------------------------------------------ */

ol.steps {
  margin: 0 0 var(--d-s4);
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: var(--d-s4);
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--d-accent);
  color: var(--d-accent-ink);
  font: 700 var(--d-t6)/1.65rem var(--d-sans);
  text-align: center;
}
ol.steps ul, ol.steps ol { margin-top: var(--d-s2); }

/*
 * Where this step happens. Four places, and the badge says which before
 * the sentence does — because the single most expensive mistake in a
 * multi-component install is doing the right thing on the wrong machine.
 */
.where {
  display: inline-block;
  margin-right: var(--d-s2);
  padding: 0.08rem var(--d-s2);
  border-radius: 4px;
  font: 700 var(--d-t6)/1.5 var(--d-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 0.08em;
  background: var(--d-muted);
  color: var(--d-bg);
  white-space: nowrap;
}
.where.studio { background: #6d28d9; color: #fff; }
.where.monitor { background: #1d4ed8; color: #fff; }
.where.server { background: #0f766e; color: #fff; }
.where.machine { background: #475569; color: #fff; }
.where.chat { background: #9a3412; color: #fff; }

.note, .warn, .check {
  margin: 0 0 var(--d-s4);
  padding: var(--d-s3) var(--d-s4);
  background: var(--d-raise);
  border: 1px solid var(--d-hair);
  border-left: 3px solid var(--d-muted);
  border-radius: 7px;
}
.warn { border-left-color: var(--d-bad); }
.check { border-left-color: var(--d-ok); }
.note > b:first-child, .warn > b:first-child, .check > b:first-child {
  display: block;
  margin-bottom: var(--d-s1);
}
.note > :last-child, .warn > :last-child, .check > :last-child { margin-bottom: 0; }

/* The card at the top of a tutorial: audience, duration, what you end up
   with, what you need first. */
.card-meta {
  margin: 0 0 var(--d-s5);
  padding: var(--d-s4);
  background: var(--d-raise);
  border: 1px solid var(--d-hair);
  border-radius: 8px;
}
.card-meta dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--d-s2) var(--d-s4);
  margin: 0;
  font-size: var(--d-t5);
}
.card-meta dt { color: var(--d-faint); font-weight: 650; }
.card-meta dd { margin: 0; }

/* A status word beside a feature: what is released, and what is not. The
   brief requires the distinction on every claim, so it is a mark rather
   than a sentence somebody has to remember to write. */
.state {
  display: inline-block;
  padding: 0.04rem var(--d-s2);
  border-radius: 4px;
  font: 650 var(--d-t6)/1.6 var(--d-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.state.released { color: var(--d-ok); }
.state.beta { color: var(--d-warn); }
.state.planned { color: var(--d-faint); }
.state.design { color: var(--d-faint); }
.state.deprecated { color: var(--d-bad); }

/* --- figures and placeholders ------------------------------------ */

.doc-main figure.shot {
  margin: 0 0 var(--d-s4);
  border: 1px solid var(--d-hair);
  border-radius: 8px;
  overflow: hidden;
  background: var(--d-raise);
}
.doc-main figure.shot img { display: block; width: 100%; height: auto; }
.doc-main figure.shot figcaption {
  padding: var(--d-s2) var(--d-s3);
  font-size: var(--d-t5);
  color: var(--d-muted);
  border-top: 1px solid var(--d-hair);
}

/* A frame standing where a screenshot will go. It says which screen has
   to be captured, because an empty box tells whoever fills it nothing. */
.doc-main figure.pending {
  margin: 0 0 var(--d-s4);
  padding: var(--d-s6) var(--d-s4);
  background: repeating-linear-gradient(135deg, var(--d-raise) 0 10px, var(--d-sink) 10px 20px);
  border: 1px dashed var(--d-hair);
  border-radius: 8px;
  text-align: center;
  color: var(--d-muted);
}
.doc-main figure.pending figcaption { font-size: var(--d-t5); margin-top: var(--d-s2); }
.doc-main figure.pending .mark {
  display: inline-block;
  padding: 0.1rem var(--d-s2);
  font: 700 var(--d-t6)/1.6 var(--d-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-faint);
  border: 1px solid var(--d-hair);
  border-radius: 4px;
  background: var(--d-bg);
}

/* --- a diagram --------------------------------------------------- */

.doc-main figure.diagram {
  margin: 0 0 var(--d-s5);
  padding: var(--d-s4);
  background: var(--d-raise);
  border: 1px solid var(--d-hair);
  border-radius: 8px;
  overflow-x: auto;
}
.doc-main figure.diagram svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.doc-main figure.diagram figcaption {
  margin-top: var(--d-s3);
  font-size: var(--d-t5);
  color: var(--d-muted);
  text-align: center;
}
/* The diagrams are inline SVG and take their colours from the theme, so
   one drawing is correct on paper and on a dark panel. */
.doc-main figure.diagram svg text { fill: var(--d-ink); font-family: var(--d-sans); }
.doc-main figure.diagram svg .lbl { fill: var(--d-muted); }
.doc-main figure.diagram svg .box { fill: var(--d-bg); stroke: var(--d-hair); }
.doc-main figure.diagram svg .box-accent { fill: var(--d-accent-soft); stroke: var(--d-accent); }
.doc-main figure.diagram svg .line { stroke: var(--d-muted); fill: none; }
.doc-main figure.diagram svg .line-accent { stroke: var(--d-accent); fill: none; }
.doc-main figure.diagram svg .fill-accent { fill: var(--d-accent); }
.doc-main figure.diagram svg .fill-muted { fill: var(--d-muted); }

/* --- cards on the documentation home ----------------------------- */

.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--d-s4);
  margin: 0 0 var(--d-s5);
  padding: 0;
  list-style: none;
  max-width: none;
}
.doc-cards li { margin: 0; }
.doc-cards a {
  display: block;
  height: 100%;
  padding: var(--d-s4);
  background: var(--d-raise);
  border: 1px solid var(--d-hair);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.doc-cards a:hover { border-color: var(--d-accent); background: var(--d-accent-soft); }
.doc-cards .kicker {
  display: block;
  font: 650 var(--d-t6)/1.6 var(--d-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-faint);
}
.doc-cards b { display: block; font-size: var(--d-t3); margin: var(--d-s1) 0 var(--d-s2); color: var(--d-ink); }
.doc-cards span.say { display: block; font-size: var(--d-t5); color: var(--d-muted); }

/* --- the previous and next pair ---------------------------------- */

.doc-next {
  display: flex;
  gap: var(--d-s4);
  flex-wrap: wrap;
  margin: var(--d-s7) 0 0;
  padding-top: var(--d-s4);
  border-top: 1px solid var(--d-hair);
  max-width: var(--d-read);
}
.doc-next a {
  flex: 1 1 14rem;
  padding: var(--d-s3) var(--d-s4);
  border: 1px solid var(--d-hair);
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
}
.doc-next a:hover { border-color: var(--d-accent); }
.doc-next .kicker { display: block; font-size: var(--d-t6); color: var(--d-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.doc-next b { color: var(--d-accent); font-weight: 600; }
.doc-next .back { text-align: left; }
.doc-next .on { text-align: right; margin-left: auto; }

/* ------------------------------------------------------------------ *
 * Search.
 *
 * A generated index and a dialog over it. There is no server to ask and
 * no dependency to add, so the index is a file and the matching is in
 * the page — which is also why the index holds headings and their first
 * sentences rather than every word of every document.
 * ------------------------------------------------------------------ */

.doc-search {
  flex: 0 1 22rem;
  display: flex;
  align-items: center;
  gap: var(--d-s2);
  height: 2rem;
  padding: 0 var(--d-s3);
  background: var(--d-raise);
  border: 1px solid var(--d-hair);
  border-radius: 6px;
  color: var(--d-muted);
  font: 450 var(--d-t5)/1 var(--d-sans);
  cursor: text;
  text-align: left;
}
.doc-search:hover { border-color: var(--d-accent); }
.doc-search kbd {
  margin-left: auto;
  padding: 0.05rem 0.3rem;
  font: 600 var(--d-t6)/1.5 var(--d-mono);
  color: var(--d-faint);
  background: var(--d-bg);
  border: 1px solid var(--d-hair);
  border-radius: 4px;
}

dialog.finder {
  width: min(42rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 6rem));
  padding: 0;
  margin: 4rem auto auto;
  background: var(--d-bg);
  color: var(--d-ink);
  border: 1px solid var(--d-hair);
  border-radius: 10px;
  overflow: hidden;
}
dialog.finder::backdrop { background: rgba(2, 4, 10, 0.55); backdrop-filter: blur(2px); }
dialog.finder form { display: flex; margin: 0; border-bottom: 1px solid var(--d-hair); }
dialog.finder input {
  flex: 1 1 auto;
  padding: var(--d-s3) var(--d-s4);
  font: 450 var(--d-t3)/1.4 var(--d-sans);
  color: var(--d-ink);
  background: transparent;
  border: 0;
}
dialog.finder input:focus { outline: none; }
dialog.finder .found { max-height: 26rem; overflow-y: auto; padding: var(--d-s2); }
dialog.finder .found a {
  display: block;
  padding: var(--d-s2) var(--d-s3);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
dialog.finder .found a:hover, dialog.finder .found a[data-on] { background: var(--d-accent-soft); }
dialog.finder .found b { display: block; color: var(--d-accent); font-weight: 600; }
dialog.finder .found span { display: block; font-size: var(--d-t5); color: var(--d-muted); }
dialog.finder .found em { font-style: normal; background: var(--d-accent-soft); color: var(--d-ink); border-radius: 3px; }
dialog.finder .none { padding: var(--d-s5); text-align: center; color: var(--d-muted); font-size: var(--d-t5); }

/* ------------------------------------------------------------------ *
 * The foot of a documentation page.
 * ------------------------------------------------------------------ */

.doc-foot {
  border-top: 1px solid var(--d-hair);
  margin-top: var(--d-s7);
  padding: var(--d-s5) var(--d-s4);
  background: var(--d-raise);
  color: var(--d-muted);
  font-size: var(--d-t5);
}
.doc-foot .wrap { max-width: 94rem; margin: 0 auto; display: flex; gap: var(--d-s5); flex-wrap: wrap; align-items: baseline; }
.doc-foot a { color: var(--d-accent); }
.doc-foot .against { font-family: var(--d-mono); font-size: var(--d-t6); color: var(--d-faint); }

/* ------------------------------------------------------------------ *
 * Narrow.
 *
 * The rail becomes a disclosure and the contents column goes away; the
 * reading column is never narrower than the gutter allows, and nothing
 * scrolls sideways but a code block and a table, which are the two
 * things that have to.
 * ------------------------------------------------------------------ */

@media (max-width: 68rem) {
  .doc-shell { grid-template-columns: var(--d-rail) minmax(0, 1fr); }
  .doc-aside { display: none; }
}

@media (max-width: 52rem) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--d-s4); }
  .rail-toggle { display: inline-flex; }
  .doc-rail {
    position: static;
    max-height: none;
    padding: var(--d-s4) 0;
    border-bottom: 1px solid var(--d-hair);
  }
  .doc-rail[hidden] { display: none; }
  .doc-head .mark span { display: none; }
  .doc-search { flex: 0 0 auto; width: 2rem; padding: 0; justify-content: center; }
  .doc-search span, .doc-search kbd { display: none; }
  /* The glass stays: a 2rem box with nothing in it reads as a control
     that failed to load rather than as a search button. */
  .doc-search .glass { margin: 0; }
  .doc-main { padding-top: var(--d-s5); }
  /*
   * Headings come down a step on a phone — down the scale's own steps.
   *
   * These read `1.6rem` and `1.3rem` until they were measured at 390px:
   * 25.6 and 20.8, two sizes the standard does not declare, which is a
   * second type scale living inside a media query. Nothing looked wrong,
   * because a heading one notch off a scale looks like a heading.
   *
   * `--d-t2` and `--d-t3` are the steps below the ones these replace, so
   * the page still steps down on a narrow screen and the whole site
   * still has six sizes rather than eight.
   */
  .doc-main h1 { font-size: var(--d-t2); }
  .doc-main h2 { font-size: var(--d-t3); }
}

/* ------------------------------------------------------------------ *
 * Print. A twelve-step install gets printed, and the reference guide
 * this area is held to is an A4 document.
 * ------------------------------------------------------------------ */

@media print {
  .doc-head, .doc-rail, .doc-aside, .doc-next, figure.code .copy, .skip { display: none !important; }
  .doc-shell { display: block; max-width: none; padding: 0; }
  .doc-main { padding: 0; }
  .doc-main > * { max-width: none; }
  html.docs body { background: #fff; color: #16181d; font-size: 10.5pt; }
  .doc-main h2, ol.steps > li, .note, .warn, .check, figure.code, .doc-main table { break-inside: avoid; }
  .doc-main h2, .doc-main h3 { break-after: avoid; }
  .anchor { display: none; }
}