/* ============================================================
   MINTHOUSE DOCUMENTATION — the reference volume.

   This file sits ON TOP of css/site.css and adds nothing to the
   house's vocabulary. Every colour here is one of the four
   themes' own tokens; every space is on the 4px grid the house
   already states; the masthead, the foil rule, the dark footer
   band, the buttons and the theme picker are the site's, not
   copies of the site's.

   What is new is the SHAPE of a reference document, which the
   auction site has no page for: a permanent table of contents on
   the left, a column of prose narrow enough to read, a rail on
   the right that says where you are in the page, and code set as
   a specimen plate rather than as a grey box.

   The reference reads as a bound volume in the same house style:
   serif headings over hairline rules, brass as the one accent,
   square controls, and nothing that moves unless it is saying
   something. The auction floor gets the foil; the manual gets
   the margin.
   ============================================================ */

/* ---------- docs-scoped tokens ----------
   Two things the house has no token for, because no page needed
   them until this one: the sticky offset every column measures
   from, and a syntax palette.

   RETUNED FOR THE COLLECTOR'S SALON. The first version of this
   block was measured against the previous tonal ladder, where
   paper's panel was flat #ffffff and the holo family was pastel.
   The salon rebrand warms every ground, deepens both night rooms
   and takes the holo colours to full saturation, so the old
   values sat on surfaces that no longer exist.

   The palette is stated per theme rather than derived, for the
   reason site.css states its category tints per theme: a derived
   colour that clears 4.5:1 on paper lands at 2.8:1 on vault, and
   the derivation gives no warning. Each of these was measured
   against that theme's own code plate rather than judged, and the
   hues now answer to the room's holo family instead of ignoring
   it: sky for types, lilac for keywords, mint for strings. */
:root {
  --docs-stick: 70px;          /* under the sticky chapter strip */
  --docs-maxw: 1304px;
  --docs-rail: 254px;
  --docs-toc: 212px;

  /* the code plate: a leaf of paper laid into the room, a shade
     lighter than the panel it sits on rather than a grey box */
  --code-bg: #fdfaf3;
  --code-line: #ddd2bd;
  --tok-comment: #6d6255;
  --tok-keyword: #6a3f86;
  --tok-type: #14566f;
  --tok-string: #1f5c42;
  --tok-number: #8a4715;
  --tok-fn: #7d5312;
}
html[data-theme="porcelain"] {
  --code-bg: #fdfdfc;
  --code-line: #d3dae1;
  --tok-comment: #5d6771;
  --tok-keyword: #653a80;
  --tok-type: #13536c;
  --tok-string: #1b5940;
  --tok-number: #85440f;
  --tok-fn: #714d0d;
}
html[data-theme="midnight"] {
  --code-bg: #0a1322;
  --code-line: #2b3d57;
  --tok-comment: #8996a9;
  --tok-keyword: #c3aaff;
  --tok-type: #7fd0ff;
  --tok-string: #74e6b6;
  --tok-number: #f4cc67;
  --tok-fn: #f1dba6;
}
html[data-theme="vault"] {
  --code-bg: #120d07;
  --code-line: #40311f;
  --tok-comment: #9a8d76;
  --tok-keyword: #c9aeef;
  --tok-type: #8bcbec;
  --tok-string: #84dcae;
  --tok-number: #f1ca68;
  --tok-fn: #f4dca8;
}

/* ---------- the skip link ----------
   Off-screen until focused, then a real control in the top-left.
   A docs site is where keyboard readers arrive most, and walking
   a masthead, a chapter strip and an eighteen-entry sidebar to
   reach a paragraph is the tax this removes. */
.skiplink {
  position: fixed;
  top: 10px;
  left: -9999px;
  z-index: 200;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-d);
  font-weight: 700;
  font-size: var(--fs-200);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.skiplink:focus { left: 10px; }

/* ---------- masthead ---------- */
/* The wordmark carries a docs tag. Not an eyebrow above it and not
   a second line: a reader who lands here from a search result has
   to learn in one glance that this is Minthouse and that it is the
   manual rather than the floor, and the lockup is where that
   belongs. */
/* The lockup is ONE row: mark, wordmark, rule, DOCS.

   It carried a second line reading "Legal and technical documentation",
   which the auction site's own wordmark does not have, and which made
   the two mastheads different heights for no reason a reader benefits
   from. With it gone the row centres in the masthead the way the
   auction site's does, and the one thing distinguishing this site is
   the word at the end of the lockup.

   No box. The salon states a label of this kind as .salenum does, in
   letterspaced small caps with nothing drawn around it; a bordered chip
   beside a wordmark is the badge every generated header reaches for. */
.docs-masthead .wordmark { display: flex; align-items: center; }
.docs-masthead .wordmark .wm-row { align-items: center; gap: 10px; }
/* The lockup carries two links now (see build.mjs). They inherit the
   wordmark's ink and keep its baseline: the seam between them is the
   hairline the DOCS label already draws, not an underline or a colour
   change, so the pair still reads as one mark. */
.docs-masthead .wm-home { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.docs-masthead .wm-docs { text-decoration: none; }
.docs-masthead .wm-home:hover .wm-main, .docs-masthead .wm-docs:hover { color: var(--brass); }
.docs-masthead .wm-home:focus-visible, .docs-masthead .wm-docs:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.wm-docs {
  /* Optically centred rather than baseline-aligned. The wordmark is set
     in a heavy display face whose cap height sits above the small caps
     beside it, so matching baselines leaves the label looking low. */
  align-self: center;
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid var(--line2);
  color: var(--brass-ink);
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  transform: translateY(0.5px);
}

/* Search: the auction site's field, restated here rather than
   borrowed by adding a class to site.css — that file is the
   deployed stylesheet of a different site and this one must not
   need an edit to it. */
.docs-searchbox { position: relative; max-width: 520px; width: 100%; justify-self: center; }
/* Below 1000px site.css turns the masthead into a FLEX row and orders its
   three children explicitly — wordmark 1, actions 2, search 3 — so that a
   narrow viewport spends one more line on the house's name rather than
   clipping anything. That rule names `.searchbox`, and this field is
   `.docs-searchbox`, so it inherited `order: 0` and jumped ahead of the
   wordmark: a reader on a phone met a search box before they met the
   masthead. Same mechanism, same numbers, rather than a grid override
   that a flex container ignores. */
@media (max-width: 1000px) {
  .docs-searchbox { flex: 1 0 100%; order: 3; max-width: none; min-width: 0; }
}
.docs-searchbox input {
  width: 100%;
  padding: 11px 44px 11px 40px;
  border: 1px solid var(--line2);
  border-radius: var(--r-0);
  background: var(--wash);
  font-size: var(--fs-300);
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.docs-searchbox input::placeholder { color: var(--mut); }
.docs-searchbox input:focus { outline: none; border-color: var(--ink); background: var(--panel); }
.docs-searchbox input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.docs-searchbox .sicon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--mut); pointer-events: none;
}
.docs-searchbox .sicon svg { width: 100%; height: 100%; }
.searchkey {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  min-width: 19px; padding: 2px 5px;
  border: 1px solid var(--line2);
  background: var(--panel);
  color: var(--mut);
  font-family: var(--font-m); font-size: 11px; line-height: 1.4; text-align: center;
}
.docs-searchbox input:focus ~ .searchkey { opacity: 0; }

.search-pop {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 120;
  max-height: min(66vh, 520px);
  overflow-y: auto;
  border: 1px solid var(--line2);
  background: var(--panel);
  box-shadow: var(--shadow-2);
}
.search-pop::before {
  content: ""; position: sticky; display: block; left: 0; right: 0; top: 0;
  height: 2px; background: var(--salon-edge);
}
.search-pop.open { display: block; }
.sr-item { display: block; padding: 9px 14px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.sr-item:last-child { border-bottom: 0; }
/* The section, on the row rather than over a group of them — see the
   note in docs.js render(). */
.sr-ctx {
  display: block; margin-bottom: 3px;
  color: var(--brass-ink);
  font: 700 9px/1.3 var(--font-d); letter-spacing: 0.16em; text-transform: uppercase;
}
.sr-item .sr-t { display: block; font-size: var(--fs-300); font-weight: 600; color: var(--ink); }
.sr-item .sr-d { display: block; margin-top: 2px; font-size: var(--fs-200); color: var(--mut); line-height: 1.45; }
/* A function result carries its signature, which is code and is set as
   code. One line: the reader is scanning a list, and a wrapped
   five-argument declaration turns a row into a paragraph. */
.sr-fn .sr-t { font-family: var(--font-m); font-size: 13px; }
.sr-sig {
  font-family: var(--font-m);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-item:hover, .sr-item[aria-selected="true"] { background: var(--wash); }
.sr-item[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--brass); }
.sr-empty { padding: 18px 14px; color: var(--mut); font-size: var(--fs-300); }
.sr-empty b { color: var(--ink); font-weight: 600; }
/* The match, marked rather than coloured: a highlight that changes the
   text colour competes with the four themes, and this one only has to
   say "here". */
.sr-mark { background: var(--warn-tint); box-shadow: 0 1px 0 var(--brass-soft); color: inherit; }

/* The one link in the utility bar that leaves this site says so with a
   mark. site.css sizes svg inside .iconbtn and .btn, which is every
   icon the auction site puts in this bar; a bare svg here inherits only
   the global `max-width:100%` reset and paints at its own box. */
.utilbar nav a { display: inline-flex; align-items: center; gap: 6px; }
.utilbar nav a svg { width: 11px; height: 11px; flex: none; opacity: 0.75; }
/* Below 760px the three utility links take the whole bar and the ticker
   is left with about 45px, which the house's ellipsis renders as
   "Do…" — a truncation that reads as a broken string rather than as a
   label. The strip carries no information the page does not repeat (the
   revision and the network are both in the footer's fine line), so it
   goes rather than shrinks. */
@media (max-width: 760px) {
  .utilbar .ticker { display: none; }
}

/* ---------- the chapter strip ---------- */
/* The house catnav, carrying four chapters instead of five sale
   channels, plus the control that opens the contents on a phone. */
.docs-chapters .wrap { gap: var(--s-1); }
.docs-chapters a { padding: 12px 13px 10px; }
.sb-toggle {
  display: none;
  align-items: center; gap: 8px;
  margin-right: 6px; padding: 11px 12px 9px;
  border-right: 1px solid var(--line);
  font-family: var(--font-d); font-weight: 700; font-size: var(--fs-300);
  color: var(--ink2);
}
.sb-toggle svg { width: 16px; height: 16px; }
.sb-toggle:hover { color: var(--ink); }

/* ---------- the three columns ---------- */
.docs-shell {
  display: grid;
  grid-template-columns: var(--docs-rail) minmax(0, 1fr) var(--docs-toc);
  gap: 0 48px;
  align-items: start;
  max-width: var(--docs-maxw);
  margin: 0 auto;
  padding: 0 24px 96px;
}

/* ---------- the contents ---------- */
/* A printed table of contents, not a control panel: no boxes, no
   fills, no chevrons. Group names in small caps over a hairline;
   entries as a plain list; the page you are on marked by a brass
   rule in the margin, which is the same mark the Conditions of
   Sale page already uses for its current section. */
.docs-sidebar {
  position: sticky;
  top: var(--docs-stick);
  max-height: calc(100vh - var(--docs-stick) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 34px 0 40px;
  scrollbar-width: thin;
}
.sb-group + .sb-group { margin-top: 26px; }
.sb-label {
  padding: 0 0 9px 13px;
  border-bottom: 1px solid var(--line2);
  color: var(--brass-ink);
  font: 700 9px/1 var(--font-d);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sb-list { list-style: none; margin-top: 7px; display: grid; gap: 1px; }
.sb-list a {
  display: block;
  padding: 7px 12px;
  border-left: 1px solid var(--line);
  color: var(--mut);
  font-size: var(--fs-300);
  line-height: 1.36;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.sb-list a:hover { color: var(--ink); border-left-color: var(--ink2); }
.sb-list a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--brass);
  background: color-mix(in srgb, var(--wash) 66%, transparent);
}

/* ---------- the reading column ---------- */
.docs-main { min-width: 0; padding: 34px 0 0; }

.docs-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-bottom: 22px;
  color: var(--mut);
  font-size: var(--fs-200);
}
.docs-crumb a { color: var(--mut); }
.docs-crumb a:hover { color: var(--ink); }
.docs-crumb .cr-sep { color: var(--faint); }
.docs-crumb .cr-here { color: var(--ink2); }

.docs-body { max-width: 72ch; font-size: 16px; }

.docs-body h1 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
/* The standfirst: one sentence at reading size that says what the
   page is for. Every page has one, and it is the line the search
   results and the overview cards quote. */
.docs-body .lede {
  max-width: 62ch;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line2);
  color: var(--mut);
  font-size: 18px;
  line-height: 1.55;
}

.docs-body h2 {
  position: relative;
  margin: 56px 0 var(--s-2);
  padding-top: 20px;
  border-top: 1px solid var(--line2);
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--docs-stick) + 16px);
}
.docs-body h2::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 72px; height: 1px; background: var(--salon-edge);
}
.docs-body h3 {
  margin: 36px 0 var(--s-2);
  font-family: var(--font-d);
  font-size: 16.5px;
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: 0.005em;
  color: var(--ink);
  scroll-margin-top: calc(var(--docs-stick) + 16px);
}
.docs-body h4 {
  margin: 26px 0 6px;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mut);
}

.docs-body p, .docs-body li { color: var(--ink2); line-height: 1.68; }
.docs-body p { margin-bottom: var(--s-5); }
.docs-body ul, .docs-body ol { padding-left: 22px; margin: var(--s-3) 0 var(--s-5); }
.docs-body li { margin-bottom: 9px; }
.docs-body li > ul, .docs-body li > ol { margin: 8px 0 4px; }
.docs-body ul { list-style: none; padding-left: 20px; }
.docs-body ul > li { position: relative; }
/* A ruled mark, not a dot. Every list on this site used a 5px brass
   square, which is the bullet a generated page draws; the salon's own
   vocabulary is the engraved hairline, and at this size it reads as a
   margin mark rather than as decoration. */
.docs-body ul > li::before {
  content: ""; position: absolute; left: -18px; top: 0.78em;
  width: 9px; height: 1px; background: var(--brass);
  opacity: .85;
}
.docs-body ol > li::marker { color: var(--mut); font-variant-numeric: tabular-nums; }
.docs-body b, .docs-body strong { color: var(--ink); font-weight: 600; }
.docs-body a:not(.btn):not(.hanchor):not(.pn-card) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3.5px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line2);
  transition: text-decoration-color var(--dur-base) var(--ease);
}
.docs-body a:not(.btn):not(.hanchor):not(.pn-card):hover { text-decoration-color: var(--brass); }
.docs-body hr {
  height: 1px; border: 0; margin: 42px 0;
  background: var(--salon-edge);
}

/* Inline code. Not a chip and not a badge — the surrounding line
   still has to read as a sentence, so this is a tint and a
   typeface change and nothing else. */
/* No `white-space: nowrap`. It reads well on a desktop column and it
   scrolls the entire PAGE sideways on a phone: `2 × withdrawDelay +
   SETTLE_DELAY` is 440px of unbreakable text in a 375px viewport, and
   this reference is full of them. `break-word` breaks only when the
   run genuinely does not fit, so a name that fits still never splits. */
.docs-body code {
  font-family: var(--font-m);
  font-size: 0.885em;
  padding: 0.12em 0.36em;
  background: var(--wash);
  border: 1px solid var(--line);
  color: var(--ink);
  overflow-wrap: break-word;
}
.docs-body a code { color: inherit; }
.docs-body h2 code, .docs-body h3 code { font-size: 0.9em; padding: 0.06em 0.3em; }
.codeblock code { padding: 0; background: none; border: 0; white-space: pre; font-size: inherit; }

/* ---------- heading permalinks ---------- */
/* --mut, not --faint. This is a real control with a real accessible
   name, and --faint measured 2.85:1 on paper and 2.92:1 on porcelain —
   under the 4.5:1 floor in the two themes where it is most often seen.
   Hiding it at rest does not exempt it: the moment it appears is the
   moment somebody has to read it. */
.hanchor {
  margin-left: 9px;
  color: var(--mut);
  font-family: var(--font-m);
  font-size: 0.7em;
  font-weight: 400;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
h2:hover .hanchor, h3:hover .hanchor, .hanchor:focus-visible { opacity: 1; }
.hanchor:hover { color: var(--brass-ink); }
/* No hover on a touch screen, so the permalink is simply present. Full
   opacity rather than the 0.4 it carried: 0.4 of a token that only just
   clears the floor does not clear it. */
@media (hover: none) { .hanchor { opacity: 1; } }

/* ---------- code, set as a specimen plate ---------- */
.codeblock {
  position: relative;
  margin: var(--s-4) 0 var(--s-5);
  border: 1px solid var(--line2);
  background: var(--code-bg);
  box-shadow: var(--shadow-1);
}
/* The salon's accent is a 2px spectral edge, the same one it draws across
   the top of a modal and down the side of a category tile. A plain brass
   hairline was the pre-rebrand answer and reads as flat beside it. */
.codeblock::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--salon-edge);
}
.cb-head {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--code-line);
  background: color-mix(in srgb, var(--panel) 56%, transparent);
}
.cb-lang {
  color: var(--mut);
  font: 700 9px/1 var(--font-d);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cb-copy {
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid var(--line2);
  color: var(--mut);
  font-family: var(--font-d); font-weight: 700; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cb-copy:hover { color: var(--ink); border-color: var(--ink2); }
.cb-copy.done { color: var(--up); border-color: var(--up); }
.codeblock pre {
  margin: 0;
  padding: 15px 16px 17px;
  overflow-x: auto;
  font-family: var(--font-m);
  font-size: 12.8px;
  line-height: 1.62;
  color: var(--ink2);
  -webkit-overflow-scrolling: touch;
}
.tok-c { color: var(--tok-comment); font-style: italic; }
.tok-k { color: var(--tok-keyword); font-weight: 500; }
.tok-t { color: var(--tok-type); }
.tok-s { color: var(--tok-string); }
.tok-n { color: var(--tok-number); }
.tok-fn { color: var(--tok-fn); font-weight: 500; }

/* ---------- the signature block ----------
   A function's name, its selector and its one-line contract, set
   above the prose that explains it. This is the unit the
   reference chapter is built from, so it gets a real shape: brass
   hairline at the top, the signature in mono at reading size, the
   modifiers as plain marks rather than as pills. */
.sig {
  position: relative;
  margin: 40px 0 var(--s-4);
  padding: 16px 17px 16px;
  border: 1px solid var(--line2);
  /* the salon's panel formula, from .bidbox */
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-1);
  scroll-margin-top: calc(var(--docs-stick) + 16px);
}
.sig::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 2px; background: var(--salon-edge);
}
.sig-name {
  font-family: var(--font-m);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
  padding-bottom: 2px;
}
.sig-marks {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-d);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mut);
}
.sig-marks .m-caller { color: var(--brass-ink); }
.sig-marks .m-pausable { color: var(--warn); }
.sig-marks .m-open { color: var(--up); }

/* ---------- tables ----------
   The house feetable, widened for reference use: a column of
   names in mono, a column of prose. Wrapped by docs.js in a
   scroller so a wide row never scrolls the page sideways. */
.docs-body table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0 var(--s-5); font-size: 14px; }
.docs-body th {
  padding: 0 14px 9px;
  border-bottom: 1px solid var(--line2);
  color: var(--mut);
  font-family: var(--font-d);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.docs-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink2);
  line-height: 1.55;
  vertical-align: top;
}
.docs-body tbody tr:last-child td { border-bottom: 0; }
.docs-body td:first-child, .docs-body th:first-child { padding-left: 0; }
.docs-body td:last-child, .docs-body th:last-child { padding-right: 0; }
.docs-body td code { white-space: nowrap; }
.tablewrap { overflow-x: auto; margin: var(--s-3) 0 var(--s-5); -webkit-overflow-scrolling: touch; }
.tablewrap table { margin: 0; }
/* A column of identifiers reads as a column when it is set as one. */
.docs-body td.t-mono, .docs-body td.t-num { font-family: var(--font-m); font-size: 12.6px; white-space: nowrap; }
.docs-body td.t-num { text-align: right; font-variant-numeric: tabular-nums; }
.docs-body th.t-num { text-align: right; }

/* ---------- the fact list ----------
   Deployment addresses, versions, constructor arguments: a label
   and a value, aligned, in a hairline grid. Not cards. */
.facts {
  margin: var(--s-4) 0 var(--s-5);
  border-top: 1px solid var(--line2);
}
/* The standfirst already closes with a rule. A fact list opening with
   its own put two hairlines 45px apart under every reference page's
   first paragraph, which reads as an empty band rather than as one
   division. */
.docs-body .lede + .facts { border-top: 0; margin-top: var(--s-5); }
.facts div {
  display: grid;
  grid-template-columns: minmax(140px, 210px) minmax(0, 1fr);
  gap: 6px 22px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  color: var(--mut);
  font-family: var(--font-d);
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.facts dd {
  color: var(--ink);
  font-family: var(--font-m);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.facts dd.plain { font-family: var(--font-b); font-size: 14.5px; color: var(--ink2); }
.facts dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }

/* ---------- callouts ----------
   Four, and each one has a job the others cannot do.

   The marginal rule is a 1px brass HAIRLINE, which is the decision
   the deployed stylesheet already made and wrote down: a 3px brass
   bar "is the single most recognisable tell of a generated
   interface and reads as a coloured tab stuck to the side of a
   note". This file was first written against an older copy of
   site.css that still had the 3px version, and the mechanical
   detector caught the divergence. Same hairline as the Conditions
   of Sale, so the two documents look like one publication; the
   semantic variants are carried by the tint behind them, which is
   the part that was doing the work anyway. */
.note, .warn, .danger, .key {
  margin: var(--s-4) 0 var(--s-5);
  padding: 14px 17px 15px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--brass-soft);
  /* A plate lifted off the room, not a slab cut into it. Flat --wash
     was right on the old flat ground; against the salon's warmer paper
     and inset-highlight shadow it reads as a grey patch laid over a
     lit surface. Mixing toward --panel puts the note on the same
     furniture as everything else the reader is looking at. */
  background: color-mix(in srgb, var(--panel) 72%, var(--wash));
  font-size: 14.5px;
  line-height: 1.62;
  box-shadow: var(--shadow-1);
}
.note > :last-child, .warn > :last-child, .danger > :last-child, .key > :last-child { margin-bottom: 0; }
.note p, .warn p, .danger p, .key p { margin-bottom: 12px; font-size: inherit; }
.note li, .warn li, .danger li, .key li { font-size: inherit; }
.co-h {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-d);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.note .co-h { color: var(--brass-ink); }
.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--panel) 55%, var(--warn-tint)); }
.warn .co-h { color: var(--warn); }
.danger { border-left-color: var(--live); background: color-mix(in srgb, var(--panel) 55%, var(--live-tint)); }
.danger .co-h { color: var(--live); }
/* The one that carries a guarantee. Green is the house's own "met"
   colour and this is the only place the docs use it as a frame. */
.key { border-left-color: var(--up); background: color-mix(in srgb, var(--panel) 55%, var(--up-tint)); }
.key .co-h { color: var(--up); }

/* ---------- the guarantee ledger ----------
   Used once, on /guarantees: a numbered list of properties, each
   with the source line that proves it. The number is information
   here — the page refers to "guarantee 3" — which is the one case
   the house style allows a numbered sequence. */
.gtee { counter-reset: gtee; margin: var(--s-5) 0; list-style: none; padding: 0; }
.gtee > li {
  position: relative;
  counter-increment: gtee;
  margin: 0 0 2px;
  padding: 20px 0 22px 58px;
  border-top: 1px solid var(--line2);
}
/* The salon sets a step numeral in serif at 400, not in the display sans
   at 800. Same numeral here, same weight, same brass. */
.gtee > li::before {
  content: counter(gtee);
  position: absolute; left: 0; top: 16px;
  width: 40px;
  color: var(--brass-ink);
  font: 400 32px/.9 var(--font-serif);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.gtee > li::after {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 54px; height: 1px; background: var(--salon-edge);
}
.gtee h3 { margin: 0 0 8px; font-size: 16px; }
.gtee p { margin-bottom: 12px; }
.gtee .proof {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dotted var(--line2);
  color: var(--mut);
  font-size: 13px;
  line-height: 1.55;
}
.gtee .proof b { color: var(--ink2); font-weight: 600; }
.gtee .proof code { font-size: 12.2px; }

/* ---------- the limit ledger ----------
   The counterpart, and deliberately not styled as a warning. A
   bounded exception stated precisely is a fact about the system,
   not an alarm; dressing it in red would make the honest half of
   the page look like a disclaimer nobody reads. */
.limits { margin: var(--s-5) 0; }
.limit {
  padding: 22px 0 4px;
  border-top: 1px solid var(--line2);
}
.limit h3 { margin-top: 0; }
.limit .bound {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 5px 18px;
  margin: 14px 0 var(--s-5);
  padding: 13px 15px;
  border: 1px solid var(--line2);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-1);
  font-size: 13.5px;
}
.limit .bound dt {
  color: var(--brass-ink);
  font-family: var(--font-d);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 3px;
}
.limit .bound dd { color: var(--ink2); line-height: 1.55; }

/* ---------- the step sequence ----------
   Used for the flows: deposit, lead, outbid, win. Numbered
   because a reader following a transaction needs the order, and
   ruled rather than boxed. */
.flow { counter-reset: flow; list-style: none; padding: 0; margin: var(--s-4) 0 var(--s-5); }
.flow > li {
  position: relative;
  counter-increment: flow;
  padding: 16px 0 17px 52px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
/* A numeral, not a numeral in a box. The bordered circle-or-square is the
   step marker of every generated walkthrough; the salon draws a step as a
   hairline with a spectral accent and a serif number, and so does this. */
.flow > li::before {
  content: counter(flow);
  position: absolute; left: 0; top: 12px;
  width: 34px;
  color: var(--brass-ink);
  font: 400 23px/1 var(--font-serif);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.flow > li:last-child { border-bottom: 0; }
.flow .fl-who {
  display: block;
  margin-bottom: 3px;
  color: var(--mut);
  font-family: var(--font-d);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.flow .fl-who.house { color: var(--brass-ink); }
.flow p { margin-bottom: 10px; }
.flow > li > :last-child { margin-bottom: 0; }

/* ---------- overview cards ----------
   The one place this site uses a tile, and it is an index of
   chapters rather than a decorative grid: no icons, no equal-
   height padding games, just the chapter, its pages and a rule.
   ------------------------------------------------------------------ */
.chapters { display: grid; gap: 0; margin: var(--s-5) 0; }
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 8px 44px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--line2);
}
.chapter h3 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.chapter > div > p { margin: 0; color: var(--mut); font-size: 15px; }
.chapter ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.chapter ul li { margin: 0; }
.chapter ul li::before { display: none; }
.chapter ul a {
  display: block;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none !important;
}
.chapter ul a .ch-t { display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.chapter ul a .ch-d { display: block; margin-top: 2px; color: var(--mut); font-size: 13px; line-height: 1.5; }
.chapter ul a:hover .ch-t { color: var(--brass-ink); }
.chapter ul a:hover { border-bottom-color: var(--brass); }

/* ---------- diagrams ----------
   Authored SVG, drawn with theme tokens so the same file is right
   in all four rooms. Nothing here is an image of a diagram. */
.diagram {
  margin: var(--s-5) 0;
  padding: 22px 20px 18px;
  border: 1px solid var(--line2);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
}
.diagram svg { width: 100%; min-width: 480px; height: auto; display: block; }
.diagram figcaption {
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 13px;
  line-height: 1.55;
}
.dg-box { fill: var(--panel); stroke: var(--line2); }
.dg-box-live { fill: var(--up-tint); stroke: var(--up); }
.dg-box-house { fill: var(--warn-tint); stroke: var(--warn); }
.dg-line { stroke: var(--line2); fill: none; }
.dg-arrow { fill: var(--mut); }
.dg-t { fill: var(--ink); font-family: var(--font-d); font-size: 12px; font-weight: 700; }
.dg-s { fill: var(--mut); font-family: var(--font-m); font-size: 10.5px; }

/* ---------- the right rail ---------- */
.docs-toc {
  position: sticky;
  top: var(--docs-stick);
  max-height: calc(100vh - var(--docs-stick) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 40px 0 40px;
  scrollbar-width: thin;
}
.toc-h {
  padding: 0 0 9px 12px;
  border-bottom: 1px solid var(--line2);
  color: var(--brass-ink);
  font: 700 9px/1 var(--font-d);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.toc-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; }
.toc-list a {
  display: block;
  padding: 5px 12px;
  border-left: 1px solid var(--line);
  color: var(--mut);
  font-size: 12.5px;
  line-height: 1.4;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.toc-list .tl-3 a { padding-left: 24px; font-size: 12px; }
.toc-list a:hover { color: var(--ink); }
.toc-list a[aria-current="true"] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--brass);
}
.toc-top {
  display: block;
  margin-top: 16px; padding: 8px 12px 0;
  border-top: 1px solid var(--line);
  color: var(--mut);
  font-size: 12px;
}
.toc-top:hover { color: var(--ink); }

/* ---------- previous / next ---------- */
.docs-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 72ch;
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--line2);
}
.pn-card {
  display: block;
  padding: 15px 17px 16px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.pn-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.pn-next { text-align: right; }
.pn-dir {
  display: block; margin-bottom: 5px;
  color: var(--mut);
  font: 700 9px/1 var(--font-d);
  letter-spacing: 0.17em; text-transform: uppercase;
}
.pn-title { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.pn-empty { border-color: transparent; background: none; pointer-events: none; }

/* ---------- footer ---------- */
.docs-footer { margin-top: 0; }

/* ---------- responsive ----------
   Structural, not fluid: the rail goes first, then the contents
   collapse into a drawer under the chapter strip. The reading
   column never changes typeface or measure on the way down. */
@media (max-width: 1180px) {
  .docs-shell { grid-template-columns: var(--docs-rail) minmax(0, 1fr); gap: 0 44px; }
  .docs-toc { display: none; }
}

@media (max-width: 900px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
  .sb-toggle { display: inline-flex; }
  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    display: none;
    padding: 22px 0 26px;
    border-bottom: 1px solid var(--line2);
  }
  .docs-sidebar.open { display: block; }
  .sb-group + .sb-group { margin-top: 20px; }
  .docs-main { padding-top: 26px; }
  .docs-searchbox { max-width: none; }
  .docs-searchbox { max-width: none; }
}

@media (max-width: 620px) {
  .docs-body { font-size: 15.5px; }
  .docs-body h1 { font-size: 31px; }
  .docs-body h2 { font-size: 23px; margin-top: 44px; }
  .docs-body .lede { font-size: 16.5px; }
  .docs-pn { grid-template-columns: 1fr; }
  .pn-next { text-align: left; }
  .pn-empty { display: none; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 0; }
  .limit .bound { grid-template-columns: minmax(0, 1fr); gap: 3px 0; }
  .limit .bound dd { margin-bottom: 9px; }
  .limit .bound dd:last-child { margin-bottom: 0; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .codeblock pre { font-size: 12px; }
  .gtee > li { padding-left: 44px; }
  .gtee > li::before { font-size: 26px; width: 32px; }
  /* The tag stays. It is the one mark distinguishing this site from the
     auction site in a masthead that otherwise shows the same wordmark,
     and a phone is where a reader is most likely to have arrived from a
     search result with no idea which of the two they landed on. */
  .wm-docs { margin-left: 2px; padding-left: 10px; letter-spacing: 0.16em; font-size: 9.5px; }
}

/* The house sets a 12px floor on label type at phone widths; the
   docs labels join it rather than inventing a second floor. */
@media (max-width: 540px) {
  .sb-label, .toc-h, .cb-lang, .sr-ctx, .pn-dir, .flow .fl-who { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-card:hover { transform: none; }
}

/* Printing a reference is a real thing to want, and the default
   here is 260px of navigation on page one. */
@media print {
  .utilbar, .foil-rule, .docs-masthead, .docs-chapters, .docs-sidebar,
  .docs-toc, .docs-pn, .docs-footer, .skiplink, .hanchor { display: none !important; }
  .docs-shell { display: block; max-width: none; padding: 0; }
  .docs-body { max-width: none; font-size: 11pt; }
  .docs-body h2 { break-after: avoid; }
  .codeblock, .sig, .note, .warn, .danger, .key { break-inside: avoid; box-shadow: none; }
}