/*
 * Pickle developer documentation: this site's own layer.
 *
 * It loads after tokens.css, base.css, components.css and motion.css, and it
 * consumes all four rather than restating them. Every colour, size, duration
 * and radius below comes from a --pickle-* token; there is no literal hex in
 * this file except where a value is a deliberate one-off, and each of those
 * says why.
 *
 * TWO KINDS OF RULE LIVE HERE, and the distinction is what keeps the shared
 * layer safe:
 *
 *   1. `dx-*` classes. This site's own components. They carry no obligation to
 *      any other site and nothing outside docs-ui/ may depend on them.
 *
 *   2. Scoped overrides of `ex-*` components, every one of them nested under
 *      [data-app="docs"]. shared-ui/components.css is the structural layer for
 *      all eight sites, so an edit there ripples into every one of them and is
 *      not a local decision. Scoping means the override is this origin's alone.
 *
 * The rule for anyone extending this file: if you find yourself wanting to
 * change an .ex-* rule in shared-ui, add a scoped override here instead, and if
 * a scoped override starts looking like a general improvement, raise it as a
 * change to the shared layer rather than making it quietly.
 */

/* =========================================================== the page shell
 *
 * Three columns: sections, article, on-page contents. THE DOCUMENT SCROLLS and
 * the two asides are sticky - the columns are deliberately NOT independent
 * scroll panes.
 *
 * That is a correctness choice as much as a taste one. A scroll-timeline in
 * motion.css resolves against the subject's nearest ancestor scroll container,
 * so wrapping the article in its own `overflow-y: auto` pane would silently
 * re-parent every timeline inside it to a box with a different scroll position
 * - the class of bug that leaves an animation stuck at its end state. Letting
 * the document scroll keeps one scroll position on the page.
 */

.dx-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 13rem;
  gap: 0 var(--pickle-space-6);
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--pickle-gutter);
}

/* The bar centres itself on --pickle-content (1240px), which is narrower than
 * this site's shell. Left alone, the brand would sit inboard of the sidebar it
 * belongs above. */
[data-app="docs"] .ex-nav {
  padding-inline: max(var(--pickle-gutter), calc((100vw - 96rem) / 2));
}

.dx-brand-tag {
  margin-left: var(--pickle-space-2);
  padding: 3px 7px;
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-weight: 400;
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
  border: 1px solid var(--pickle-mint-line);
  border-radius: var(--pickle-radius);
}

/* ------------------------------------------------------------- the two asides
 *
 * `top` clears the sticky bar; the height calculation is what lets a long
 * section list scroll on its own without the page scrolling under it.
 */

.dx-side,
.dx-toc {
  position: sticky;
  top: var(--pickle-nav-h);
  align-self: start;
  max-height: calc(100dvh - var(--pickle-nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* base.css gives the document a 10px scrollbar with a visible thumb, which is
 * right for the page and too loud for a column of quiet labels - it reads as a
 * border between the sidebar and the article. These two get a hairline thumb
 * that only appears while the column is hovered.
 *
 * scrollbar-gutter: stable holds the space either way, so the labels do not
 * shift sideways when the thumb appears. */
.dx-side,
.dx-toc { scrollbar-gutter: stable; }

/* ========================================== the documentation switcher
 *
 * Two links, segmented, at the top of the sidebar. It is the mechanism that
 * lets `/` be a chooser without trapping a reader in whichever half a search
 * result dropped them into.
 *
 * A segmented pair rather than a dropdown: there are exactly two, both fit, and
 * a control that shows the alternative is worth more here than one that hides
 * it - the reader is being told the other documentation EXISTS, not just given
 * a way to reach it.
 */

.dx-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: var(--pickle-space-5);
  padding: 1px;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.dx-switch a {
  padding: 7px var(--pickle-space-2);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-xs);
  text-align: center;
  background: var(--pickle-bg);
  transition: color var(--pickle-fast) var(--pickle-ease),
    background-color var(--pickle-fast) var(--pickle-ease);
}

.dx-switch a:hover { color: var(--pickle-text); background: var(--pickle-surface-2); }

.dx-switch a.on {
  color: var(--pickle-mint-ink);
  font-weight: 500;
  background: var(--pickle-mint);
}

/* ================================================ the chooser and the 404
 *
 * Neither uses the three-column shell: there is no tree to show until the
 * reader has chosen one. So they get their own centred measure instead of
 * inheriting a sidebar column that would be empty.
 */

.dx-choose {
  display: flex;
  justify-content: center;
  padding: var(--pickle-space-8) var(--pickle-gutter);
}

.dx-choose-inner { width: 100%; max-width: 60rem; }

.dx-choose-head { margin-bottom: var(--pickle-space-7); max-width: 44rem; }

.dx-choose-head h1 {
  margin: var(--pickle-space-4) 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: var(--pickle-tracking-display);
  line-height: var(--pickle-leading-display);
}

.dx-choose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--pickle-space-4);
}

/* A whole card as one link, so the target is the size of the decision rather
 * than the size of a word. */
.dx-choose-card {
  display: flex;
  flex-direction: column;
  padding: var(--pickle-space-5);
  color: var(--pickle-text);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  transition: border-color var(--pickle-base) var(--pickle-ease),
    background-color var(--pickle-base) var(--pickle-ease);
}

.dx-choose-card:hover {
  color: var(--pickle-text);
  background: var(--pickle-surface-2);
  border-color: var(--pickle-mint-line);
}

.dx-choose-card h2 {
  margin-bottom: var(--pickle-space-3);
  font-size: var(--pickle-text-xl);
  letter-spacing: -.02em;
}

.dx-choose-card > p {
  margin: 0 0 var(--pickle-space-4);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

/* The section list is a table of contents, not navigation - it tells the reader
 * what is behind the card before they commit to it. */
.dx-choose-card ul {
  margin: 0 0 var(--pickle-space-5);
  padding: 0;
  list-style: none;
  /* Pushes the call to action to the bottom edge whatever the list length, so
     two cards with different amounts of content still align. */
  flex: 1 1 auto;
}

.dx-choose-card li {
  padding: 5px 0 5px var(--pickle-space-3);
  color: var(--pickle-subtle);
  font-size: var(--pickle-text-xs);
  border-left: 1px solid var(--pickle-line);
}

.dx-choose-go {
  color: var(--pickle-accent-text);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.dx-choose-note { margin-top: var(--pickle-space-7); max-width: 46rem; }

.dx-side::-webkit-scrollbar,
.dx-toc::-webkit-scrollbar { width: 6px; }

.dx-side::-webkit-scrollbar-thumb,
.dx-toc::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 2px solid transparent;
  transition: background-color var(--pickle-base) var(--pickle-ease);
}

.dx-side:hover::-webkit-scrollbar-thumb,
.dx-toc:hover::-webkit-scrollbar-thumb { background-color: var(--pickle-surface-4); }

.dx-side-inner { padding: var(--pickle-space-6) 0 var(--pickle-space-8); }
.dx-toc-inner { padding: var(--pickle-space-6) 0 var(--pickle-space-8); }

.dx-side-group + .dx-side-group { margin-top: var(--pickle-space-5); }

.dx-side-title {
  display: flex;
  align-items: baseline;
  gap: var(--pickle-space-2);
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.dx-soon {
  color: var(--pickle-faint);
  font-size: var(--pickle-text-2xs);
  letter-spacing: 0;
  text-transform: none;
}

.dx-side-list,
.dx-toc-list,
.dx-foot-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dx-side-list a,
.dx-side-pending {
  display: block;
  padding: 6px var(--pickle-space-3);
  /* The hairline is the whole indication of position: a 1px rule that moves to
   * mint on the current page. A filled pill would be a second surface inside a
   * column that is already a list of quiet labels. */
  border-left: 1px solid var(--pickle-line);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  transition: color var(--pickle-fast) var(--pickle-ease),
    border-color var(--pickle-fast) var(--pickle-ease);
}

.dx-side-list a:hover {
  color: var(--pickle-text);
  border-left-color: var(--pickle-subtle);
}

.dx-side-list a.on {
  color: var(--pickle-accent-text);
  border-left-color: var(--pickle-mint);
}

/* A section that is listed but not written. Not a link, and it must not look
 * like one - a dimmed entry that responds to a hover is a link that appears
 * broken. */
.dx-side-pending {
  color: var(--pickle-faint);
  cursor: default;
}

.dx-toc-list a {
  display: block;
  padding: 5px 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-xs);
  line-height: 1.5;
}

.dx-toc-list a:hover { color: var(--pickle-text); }
.dx-toc-list a.on { color: var(--pickle-accent-text); }
.dx-toc-list li.sub a { padding-left: var(--pickle-space-3); }

/* =============================================================== the article
 *
 * 46rem is a measure, not a container width: at this site's body size it lands
 * around 75 characters, which is the range a paragraph of technical prose stays
 * readable in. Tables and code samples break out of it on purpose - see below.
 */

.dx-main { min-width: 0; }

.dx-article {
  max-width: 46rem;
  padding: var(--pickle-space-7) 0 var(--pickle-space-8);
}

.dx-head { margin-bottom: var(--pickle-space-6); }

/* base.css sets h1 to --pickle-text-display, which clamps up to 4.4rem. That is
 * the size for a scene headline on a marketing page, not for the title of a
 * reference page whose job is to be found and scanned. */
.dx-pagehead h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  letter-spacing: var(--pickle-tracking-display);
  line-height: 1.05;
}

.dx-pagehead { align-items: flex-start; }

.dx-lede {
  margin-top: var(--pickle-space-4);
  max-width: 40rem;
}

.dx-status { text-decoration: none; }

/* --------------------------------------------------------------- sections
 *
 * The hairline above each section is the page's rhythm. A documentation page is
 * a sequence of answers, and the rule is what tells a reader scrolling past
 * that one answer has ended and another has begun.
 */

.dx-section {
  margin-top: var(--pickle-space-7);
  padding-top: var(--pickle-space-5);
  border-top: 1px solid var(--pickle-line);
}

.dx-h2 {
  margin-bottom: var(--pickle-space-4);
  font-size: var(--pickle-text-xl);
  letter-spacing: -.02em;
}

.dx-section h3 {
  margin-top: var(--pickle-space-5);
  margin-bottom: var(--pickle-space-3);
  font-size: var(--pickle-text-lg);
}

.dx-section p { margin-bottom: var(--pickle-space-4); }
.dx-section p:last-child { margin-bottom: 0; }

.dx-section ul,
.dx-section ol {
  margin: 0 0 var(--pickle-space-4);
  padding-left: var(--pickle-space-5);
  color: var(--pickle-muted);
}

.dx-section li { margin-bottom: var(--pickle-space-2); }
.dx-section li::marker { color: var(--pickle-subtle); }

.dx-section p,
.dx-section li { color: var(--pickle-muted); }

/* Inline code inside prose. Not a surface - a surface behind two words in the
 * middle of a sentence breaks the line's rhythm. Colour and family carry it. */
.dx-section :not(pre) > code {
  padding: 1px 4px;
  color: var(--pickle-text);
  font-size: .88em;
  background: rgb(255 255 255 / 5%);
  border-radius: var(--pickle-radius);
}

/* The heading anchor. Visible only as the heading itself until hovered, when a
 * hash appears in the margin - discoverable without decorating every heading
 * with permanent punctuation. */
.dx-anchor { color: inherit; }
.dx-anchor:hover { color: var(--pickle-accent-text); }

.dx-anchor::after {
  content: " #";
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: .7em;
  font-weight: 400;
  opacity: 0;
  transition: opacity var(--pickle-fast) var(--pickle-ease);
}

.dx-anchor:hover::after,
.dx-anchor:focus-visible::after { opacity: 1; }

/* ==================================================================== code
 *
 * .ex-code as shipped is built for a short live readout: 16rem tall, and
 * `white-space: pre-wrap` with `overflow-wrap: anywhere` so a long hash folds
 * inside a narrow panel. Both are wrong for a documentation sample - the height
 * truncates it, and the wrapping breaks a command mid-token, which is how a
 * reader ends up pasting something that does not run.
 *
 * Scoped, so the six sites that rely on the shipped behaviour keep it.
 */
[data-app="docs"] .ex-code {
  max-height: none;
  overflow-x: auto;
  white-space: pre;
  overflow-wrap: normal;
  margin: 0;
  padding: var(--pickle-space-4);
  color: var(--pickle-text);
  font-size: var(--pickle-text-xs);
  line-height: 1.7;
  border: 0;
  border-radius: 0;
  /* Tab stops at 2, because a Solidity or JSON sample indented at 8 wastes a
   * third of a narrow column. */
  tab-size: 2;
}

.dx-code {
  /* Samples and tables break the measure. A command line that wraps is worse
   * than one that runs past the paragraph above it. */
  width: 100%;
  max-width: min(60rem, calc(100vw - 2 * var(--pickle-gutter)));
  margin: 0 0 var(--pickle-space-5);
  background: var(--pickle-surface-input);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.dx-code-head {
  display: flex;
  gap: var(--pickle-space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--pickle-space-2) var(--pickle-space-2) var(--pickle-space-2) var(--pickle-space-4);
  border-bottom: 1px solid var(--pickle-line);
}

.dx-code-label {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

/* ================================================================== tables */

.dx-fieldtable {
  width: 100%;
  max-width: min(60rem, calc(100vw - 2 * var(--pickle-gutter)));
  margin-bottom: var(--pickle-space-3);
}

[data-app="docs"] .ex-table { width: 100%; }

/* A ROW header, not a column header.
 *
 * shared-ui styles every `th` as a column heading - uppercase, mono, 0.66rem,
 * .16em tracking, nowrap, and a padding with no top because a column heading
 * sits above the rule rather than beside its value. This site's tables are
 * field/value pairs, so the label is in the FIRST COLUMN of the body, and
 * inheriting that treatment shouted every field name in mono capitals and sat
 * it half a line above the value it labels.
 *
 * So the whole column-header treatment is undone here, not adjusted. Scoped, so
 * the seven other sites keep the behaviour they were built on.
 */
[data-app="docs"] .ex-table th[scope="row"] {
  width: 30%;
  padding: var(--pickle-space-4);
  color: var(--pickle-text);
  font-family: var(--pickle-font);
  font-size: var(--pickle-text-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  /* A field name is prose and must be allowed to wrap; nowrap is what forces a
     narrow screen to scroll a table it could have fitted. */
  white-space: normal;
  vertical-align: top;
  border-bottom: 1px solid var(--pickle-line);
}

[data-app="docs"] .ex-table tbody tr:last-child th[scope="row"] { border-bottom: 0; }

/* The value cell aligns with its label rather than centring against it, which
   matters as soon as a row carries a note under the value. */
[data-app="docs"] .ex-table td { vertical-align: top; }

[data-app="docs"] .ex-table thead th {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  font-weight: 400;
  letter-spacing: var(--pickle-tracking-caps);
  text-align: left;
  text-transform: uppercase;
}

.dx-value {
  display: block;
  color: var(--pickle-text);
}

/* The note under a value. Most rows in this site's tables have one, and it is
 * usually the part that matters - the value is the answer and the note is the
 * caveat that stops the answer being misread. */
.dx-rownote {
  display: block;
  margin-top: 4px;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-xs);
  line-height: 1.55;
}

/* Where a claim was read from. Quiet by design: present for a reader who wants
 * to check, invisible to one who does not. */
.dx-evidence {
  margin: 0 0 var(--pickle-space-5);
  color: var(--pickle-faint);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
}

/* ========================================================== method entries */

.dx-method {
  padding: var(--pickle-space-5) 0;
  border-top: 1px solid var(--pickle-line);
  scroll-margin-top: calc(var(--pickle-nav-h) + var(--pickle-space-4));
}

.dx-method-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pickle-space-3);
}

.dx-method-name {
  margin: 0;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-md);
  font-weight: 500;
  letter-spacing: 0;
}

/* The signature, as a two-column grid. dt and dd must stay direct children or
 * the grid collapses. */
.dx-method-sig {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 4px var(--pickle-space-4);
  margin: 0 0 var(--pickle-space-3);
  padding: var(--pickle-space-3) var(--pickle-space-4);
  font-size: var(--pickle-text-xs);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.dx-method-sig dt {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.dx-method-sig dd {
  margin: 0;
  color: var(--pickle-text);
  overflow-wrap: anywhere;
}

/* Both pairs on one row once there is room for them.
 *
 * This is worth a media query rather than being left to stack: most of the 58
 * entries carry a two-word params value and a short return, so stacked they
 * spend two lines saying almost nothing, 58 times down one page. Side by side
 * halves the height of the densest page on the site. */
@media (min-width: 760px) {
  .dx-method-sig {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
  }
}

.dx-method-summary {
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

/* A deviation is the reason this reference exists, so it is the one thing in a
 * method entry that carries a colour. Amber, because it is the palette's "this
 * will surprise you" register - and a left rule rather than a filled box, or
 * fifty of them down one page would read as fifty warnings. */
.dx-deviation {
  margin: 0 0 var(--pickle-space-3);
  padding-left: var(--pickle-space-4);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
  border-left: 2px solid var(--pickle-amber-line);
}

.dx-deviation strong { color: var(--pickle-amber); }

.dx-method-errors {
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

.dx-method-errors strong { color: var(--pickle-text); }

.dx-method .dx-evidence { margin-bottom: 0; }

/* ============================================================== callouts */

.dx-callout { margin: 0 0 var(--pickle-space-5); }

[data-app="docs"] .ex-caveat.dx-callout {
  /* The shipped caveat is a full-width editorial panel with generous padding,
   * sized for one per page. In a reference there are several, and they need to
   * read as an aside inside an argument rather than as a section of their own. */
  padding: var(--pickle-space-4) var(--pickle-space-5);
  font-size: var(--pickle-text-sm);
}

[data-app="docs"] .ex-caveat.dx-callout h3 {
  margin-top: 0;
  margin-bottom: var(--pickle-space-2);
  font-size: var(--pickle-text-md);
}

[data-app="docs"] .ex-note.dx-callout {
  padding: var(--pickle-space-4);
  font-size: var(--pickle-text-sm);
}

.dx-note-title {
  display: block;
  margin-bottom: var(--pickle-space-1);
  color: var(--pickle-text);
}

/* ================================================================= pills
 *
 * shared-ui defines .ex-pill.mint and .ex-pill.warn. These two are this site's
 * additions, for a state that is neither good news nor a warning: a method the
 * node refuses by design, and one that cannot succeed in any build.
 */

.ex-pill.dx-neutral {
  color: var(--pickle-subtle);
  border-color: var(--pickle-line);
}

.ex-pill.dx-rose {
  color: var(--pickle-rose);
  border-color: var(--pickle-rose-line);
}

/* ========================================================= contract entries
 *
 * Same skeleton as a method entry - hairline above, anchored heading, quiet
 * evidence line below - because they are the same kind of object to a reader
 * scanning for one name. What differs is that a contract carries three lists
 * (writes, views, events) where a method carries two fields, so the signature
 * grid becomes a labelled definition list instead.
 */

.dx-contract {
  padding: var(--pickle-space-5) 0;
  border-top: 1px solid var(--pickle-line);
  scroll-margin-top: calc(var(--pickle-nav-h) + var(--pickle-space-4));
}

.dx-contract-name {
  margin: 0;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-lg);
  font-weight: 500;
  letter-spacing: 0;
}

.dx-contract-file {
  margin: 0 0 var(--pickle-space-3);
  color: var(--pickle-faint);
  font-size: var(--pickle-text-2xs);
}

.dx-abi {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--pickle-space-2) var(--pickle-space-4);
  margin: 0 0 var(--pickle-space-4);
  padding: var(--pickle-space-3) var(--pickle-space-4);
  background: var(--pickle-surface-1);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

.dx-abi dt {
  color: var(--pickle-subtle);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
}

.dx-abi dd { margin: 0; }

/* A signature list rather than a label/value list: the term is a full call
 * signature, which is far too long for the 6rem label column, so these stack
 * the signature above its description instead. */
.dx-abi-sigs { grid-template-columns: minmax(0, 1fr); gap: 0; }

.dx-abi-sigs dt {
  margin-top: var(--pickle-space-3);
  color: var(--pickle-accent-text);
  font-size: var(--pickle-text-xs);
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

.dx-abi-sigs dt:first-child { margin-top: 0; }

.dx-abi-sigs dd {
  margin-top: 2px;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

/* A wrapping row of signatures rather than a bulleted column: a contract with
 * fourteen views would otherwise be fourteen lines of mostly empty width, and
 * the reader is scanning for a name rather than reading down a list. */
.dx-abi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--pickle-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dx-abi-list li {
  color: var(--pickle-text);
  font-size: var(--pickle-text-xs);
  white-space: nowrap;
}

/* The notes are the content of a contract entry, so they get body-text colour
 * and real leading rather than the compressed treatment a metadata list gets. */
.dx-notes {
  margin: 0 0 var(--pickle-space-3);
  padding-left: var(--pickle-space-5);
}

.dx-notes li {
  margin-bottom: var(--pickle-space-2);
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

.dx-notes li::marker { color: var(--pickle-subtle); }

.dx-contract .dx-evidence { margin-bottom: 0; }

/* The overview's section cards. .ex-appcard brings the surface and the border;
 * this only relaxes the fixed height it carries for an app directory. */
[data-app="docs"] .ex-appcard.dx-card {
  min-height: 0;
  padding: var(--pickle-space-4);
}

[data-app="docs"] .ex-appcard.dx-card h3 {
  margin-bottom: var(--pickle-space-2);
  font-size: var(--pickle-text-md);
}

[data-app="docs"] .ex-appcard.dx-card p {
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

@media (max-width: 620px) {
  .dx-abi { grid-template-columns: minmax(0, 1fr); gap: var(--pickle-space-1); }
  .dx-abi-list li { white-space: normal; }
}

/* ============================================== the endpoints table's extras
 *
 * The reachability pill sits inside the row header rather than in a column of
 * its own: it qualifies the name, and as a fourth column it would push the
 * addresses off a narrow screen.
 */

.dx-reach {
  margin-left: var(--pickle-space-2);
  vertical-align: middle;
}

/* The local address under the public one. Dimmer, because most readers want the
 * public one and the local is the alternative rather than the answer. */
.dx-local {
  margin-top: 2px;
  color: var(--pickle-subtle);
}

/* ================================================================ glossary
 *
 * A two-column definition list at wide widths, stacking to term-above-definition
 * on narrow ones. dt and dd stay direct children of a row wrapper rather than of
 * the <dl>, so each pair aligns independently - a single grid over the whole
 * list would size every term column to the longest term on the page.
 */

.dx-glossary {
  margin: 0;
  display: grid;
  gap: var(--pickle-space-4);
}

.dx-glossary-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--pickle-space-4);
  padding-bottom: var(--pickle-space-4);
  border-bottom: 1px solid var(--pickle-line);
}

.dx-glossary-row:last-child { border-bottom: 0; padding-bottom: 0; }

.dx-glossary dt {
  color: var(--pickle-text);
  font-weight: 500;
  scroll-margin-top: calc(var(--pickle-nav-h) + var(--pickle-space-4));
}

.dx-glossary dd {
  margin: 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

@media (max-width: 620px) {
  .dx-glossary-row { grid-template-columns: minmax(0, 1fr); gap: var(--pickle-space-1); }
}

/* ================================================================== footer */

.dx-foot {
  margin-top: var(--pickle-space-8);
  border-top: 1px solid var(--pickle-line);
}

.dx-foot-inner {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--pickle-space-6);
  max-width: 96rem;
  margin-inline: auto;
  padding: var(--pickle-space-6) var(--pickle-gutter) var(--pickle-space-7);
}

.dx-foot-list a {
  display: block;
  padding: 4px 0;
  color: var(--pickle-muted);
  font-size: var(--pickle-text-sm);
}

.dx-foot-list a:hover { color: var(--pickle-accent-text); }

.dx-foot-note {
  max-width: 46rem;
  display: grid;
  gap: var(--pickle-space-3);
}

/* ============================================================== responsive
 *
 * Two steps. At 1100px the on-page contents go - they are the least load-bearing
 * column, and the sidebar is what a reader navigates with. At 860px the sidebar
 * goes too and the burger menu takes over, which is why content/nav.js keeps a
 * short menu list: the full tree in a burger is a wall.
 */

@media (max-width: 1100px) {
  .dx-shell { grid-template-columns: 14rem minmax(0, 1fr); }
  .dx-toc { display: none; }
}

@media (max-width: 860px) {
  .dx-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .dx-side { display: none; }

  .dx-article {
    max-width: none;
    padding-top: var(--pickle-space-6);
  }

  .dx-foot-inner { grid-template-columns: minmax(0, 1fr); }
  .dx-foot-links { display: none; }
}

/* The bar's own breakpoint: the burger appears and the inline links go, at the
 * width where the sidebar disappears rather than at components.css's default,
 * so there is never a viewport with no navigation at all. */
@media (min-width: 861px) {
  [data-app="docs"] .ex-burger { display: none; }
}

@media (max-width: 860px) {
  [data-app="docs"] .ex-subnav { display: none; }
}

/* ==================================================================== print
 *
 * A reference page is a thing people print or save to PDF, and the two asides
 * are navigation - they are not content and they waste a third of the page.
 */
@media print {
  .dx-side,
  .dx-toc,
  .ex-nav,
  .ex-mobmenu,
  .skip-link,
  .ex-copy { display: none !important; }

  .dx-shell { grid-template-columns: minmax(0, 1fr); }
  .dx-article { max-width: none; }
  [data-app="docs"] .ex-code { white-space: pre-wrap; }
}