/* ======================================================================
   assets/css/reference.css: the API reference in Signal (docs/DESIGN-SIGNAL.md §4.5–4.11,
   §4.18, §4.21).

   The reading column (white, the page's own depth) beside a sticky code column on the
   `bedrock` depth: `<aside class="ref-code" data-depth="bedrock">` is deep moss in the light
   theme and night moss (#112812) in the dark one, and tokens.css switches every token inside
   it, so the same rules draw its labels, chips and links in white and lime. Its code panels
   are near-black green. Every selector here is `ref-`-prefixed, or a shared-contract class
   scoped inside a ref- element; every colour is a token (the raw-colour gate).
   ====================================================================== */

.ref-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--code-col-w, clamp(380px, 36vw, 560px));
  min-width: 0;
}

.ref-layout-wide { grid-template-columns: minmax(0, 1fr); }

.ref-main {
  min-width: 0;
  padding: 40px var(--gutter, clamp(16px, 3.2vw, 48px)) 96px;
}

/* An endpoint or worked example page (build/reference.mjs, build/examples.mjs) is written in
   reading order: its head (.ref-top), the code column, then the sections (.ref-main), so
   keyboard and screen-reader order match what one column shows (WCAG 1.3.2, 2.4.3). On a wide
   screen the head and the sections share the first column and the code column runs beside
   both; its extra height goes to the sections' flexible row, never between head and sections. */
.ref-layout:not(.ref-layout-wide) { grid-template-rows: auto 1fr; }
.ref-top {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: 40px var(--gutter, clamp(16px, 3.2vw, 48px)) 0;
}
.ref-top ~ .ref-code { grid-column: 2; grid-row: 1 / span 2; }
.ref-top ~ .ref-main { grid-column: 1; grid-row: 2; padding-top: 0; }

/* width: 100%: without it the column sized itself to its content's min-content width and a
   wide table pushed the page past a phone's viewport (the WHOIS examples index: 439 px at 375) */
.ref-layout-wide .ref-main { max-width: calc(var(--content-max, 46rem) + 120px); width: 100%; }

/* ---------- head ---------------------------------------------------- */

/* breadcrumbs → h1 16px, as on every other page */
.ref-main > .crumbs,
.ref-top > .crumbs { margin-bottom: 16px; }

.ref-head h1 {
  margin: 0 0 16px;
  font-size: var(--fs-h1);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.04em;
  word-spacing: -0.02em;
  text-wrap: balance;
  color: var(--fg);
}

/* the endpoint line (Signal's api__line): no box, a `rule-2` line above and below, the method
   chip at its large size, the URL in mono (host `fg-3`, path 600), Copy as a small line button */
.ref-endpoint {
  display: flex;
  align-items: center;
  gap: 12px 14px;
  min-height: 52px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}

.ref-endpoint > .method {
  flex: none;
  height: 24px;
  min-width: 44px;
  padding: 0 8px;
  font-size: 12px;
}

.ref-endpoint-url {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.5;
  overflow-wrap: break-word;
  color: var(--fg);
}

/* The line shows the URL without its scheme ("api.deepinfo.com/v1/easm/assets/search"), so it
   fits on one line far more often; the scheme is still in the element's text, which Copy
   copies (build/reference.mjs). A URL that is still too long wraps between its segments. */
.ref-endpoint-url .ref-scheme { display: none; }

.ref-endpoint-url .ref-host { color: var(--fg-3); font-size: 0.9em; }
.ref-endpoint-url .ref-path { font-weight: 600; }

/* A URL wraps only between its segments (`/v1` `/easm` `/issues`), never at a hyphen inside
   one; a segment longer than the whole line still wraps inside itself as a last resort. */
.ref-endpoint-url .ref-host,
.ref-seg {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Copy on the endpoint line: a small line button (Signal .btn--line.btn--sm) */
.ref-endpoint .ref-copy {
  height: 36px;
  padding: 0 14px;
  gap: 8px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.ref-endpoint .ref-copy:hover {
  border-color: var(--rule-3);
  background: var(--panel-2);
  color: var(--fg);
}

.ref-endpoint .ref-copy .ico { width: 16px; height: 16px; }

.ref-lede {
  margin: 16px 0 0;
  max-width: var(--measure, 36rem);
  font-size: var(--fs-lede);
  line-height: 1.55;
  letter-spacing: -0.02em;
  color: var(--fg-2);
}

.ref-lede > :first-child { margin-top: 0; }
.ref-lede > :last-child { margin-bottom: 0; }
/* A module's description can run to several paragraphs (export options, pagination): the
   first one is the lede, the rest read as body text at the article measure, so their code
   chips stay at body size. */
.ref-lede:has(> * + *) { max-width: var(--measure-wide); }
.ref-lede > :first-child { max-width: var(--measure); }
.ref-lede > * + * {
  font-size: var(--fs-base);
  line-height: 1.65;
  letter-spacing: -0.012em;
}

/* Description prose that comes before its first heading (warnings, scope notes). */
.ref-intro {
  margin: 16px 0 0;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--fg-2);
}

.ref-intro > :first-child { margin-top: 0; }
.ref-intro > :last-child { margin-bottom: 0; }

/* Inline code in reference prose is Signal's code chip: `code-bg`, 5px radius, and the chip
   shape survives a line break. */
.ref-lede :not(pre) > code,
.ref-intro :not(pre) > code,
.ref-prose :not(pre) > code,
.ref-section > p code,
.ref-group-desc :not(pre) > code,
.ref-hint code,
.ref-p-desc code,
.ref-c-desc code,
.ref-fact-note code {
  padding: 0.1em 0.38em;
  border: 0;
  border-radius: 5px;
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--fg);
  overflow-wrap: break-word;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Links in reference prose (the base stylesheet resets every <a>): Signal's in-text link,
   from the --link-* tokens (tokens.css; docs.css `.prose a:not([class])` is the same): the
   depth's link colour, the text's own weight, a 1px underline at 40% that is always there;
   on hover and focus the underline turns full colour and 2px. A link around inline code keeps
   the chip, its text in the link colour. */
.ref-lede a:not(.go),
.ref-intro a,
.ref-prose a:not(.heading-anchor):not(.ref-anchor):not(.go),
.ref-p-desc a,
.ref-c-desc a,
.ref-group-desc a,
.ref-section > p a:not(.go),
.ref-fact-note a,
.ref-facts dd > a,
.ref-status-note a,
.ref-exs-featured a,
.ref-exs-list a {
  color: var(--link);
  font-weight: var(--link-weight, inherit);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-thickness, 1px);
  text-underline-offset: var(--link-offset, 0.2em);
  text-decoration-color: var(--link-underline);
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 0.2s var(--ease), text-decoration-thickness 0.2s var(--ease);
}

.ref-lede a:not(.go):hover,
.ref-intro a:hover,
.ref-prose a:not(.heading-anchor):not(.ref-anchor):not(.go):hover,
.ref-p-desc a:hover,
.ref-c-desc a:hover,
.ref-group-desc a:hover,
.ref-section > p a:not(.go):hover,
.ref-fact-note a:hover,
.ref-facts dd > a:hover,
.ref-status-note a:hover,
.ref-exs-featured a:hover,
.ref-exs-list a:hover,
.ref-lede a:not(.go):focus-visible,
.ref-intro a:focus-visible,
.ref-prose a:not(.heading-anchor):not(.ref-anchor):not(.go):focus-visible,
.ref-p-desc a:focus-visible,
.ref-c-desc a:focus-visible,
.ref-group-desc a:focus-visible,
.ref-section > p a:not(.go):focus-visible,
.ref-fact-note a:focus-visible,
.ref-facts dd > a:focus-visible,
.ref-status-note a:focus-visible,
.ref-exs-featured a:focus-visible,
.ref-exs-list a:focus-visible {
  color: var(--link);
  text-decoration-color: currentColor;
}

/* 2px on hover in running text only (Signal: prose and ledes) */
.ref-lede a:not(.go):hover,
.ref-intro a:hover,
.ref-prose p a:hover,
.ref-prose li a:hover { text-decoration-thickness: var(--link-thickness-hover, 2px); }

.ref-lede a code,
.ref-intro a code,
.ref-prose a code,
.ref-p-desc a code,
.ref-c-desc a code,
.ref-group-desc a code,
.ref-section > p a code,
.ref-fact-note a code,
.ref-facts dd > a code {
  color: inherit;
}

/* ---------- sections ------------------------------------------------ */

.ref-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.ref-section > h2,
.ref-group > h2 {
  margin: 0 0 16px;
  font-size: var(--fs-h2);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--fg);
}

.ref-group > h3 {
  margin: 0 0 12px;
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.ref-group > h4 {
  margin: 0 0 12px;
  font-size: var(--fs-base);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.ref-anchor { color: inherit; text-decoration: none; }
.ref-anchor::after {
  content: "#";
  margin-left: 8px;
  font-weight: 400;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.ref-anchor:hover::after,
.ref-anchor:focus-visible::after { opacity: 1; }

/* the description's own prose inside a section */
.ref-prose {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--fg-2);
}

.ref-prose h3,
.ref-prose h4 {
  margin: 32px 0 12px;
  color: var(--fg);
  font-weight: 600;
}

.ref-prose h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.02em; }
.ref-prose h4 { font-size: var(--fs-base); line-height: 1.4; letter-spacing: -0.01em; }

.ref-hint {
  margin: 0 0 16px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-2);
}

.ref-empty {
  margin: 0;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--code-tab);
}

/* ---------- parameter and field tables --------------------------------
   Signal's spec table (docs/DESIGN-SIGNAL.md §4.5, §4.6): hairline rows, no box, no radius,
   no fill; a `rule-2` line on top, a `rule` line under every row; heads are labels. The first
   cell of a row is its header (`th scope="row"`). */

.ref-params,
.ref-endpoints {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid var(--rule-2);
  font-size: var(--fs-md);
  line-height: 1.55;
  text-align: left;
}

.ref-params thead th,
.ref-endpoints thead th {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  vertical-align: bottom;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

.ref-params tbody th,
.ref-params td,
.ref-endpoints td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
  color: var(--fg-2);
}

.ref-params :is(th, td):last-child,
.ref-endpoints :is(th, td):last-child { padding-right: 0; }

/* the parameter table: Parameter · Required/Optional (a head with no visible text) · Description */
.ref-param-table .ref-c-name { width: 30%; }
.ref-param-table .ref-c-req { width: 96px; white-space: nowrap; }
/* the name, Required/Optional and the description's first line share one baseline */
.ref-param-table tbody th,
.ref-param-table td { vertical-align: baseline; }

.ref-params .ref-c-name { width: 30%; }
.ref-params .ref-c-type { width: 16%; }

/* The collection's own field tables (Request Body, Response Fields, a Filtering block's
   "Field | Operators"; build/reference.mjs fieldTableHtml) are this component too: Parameter or
   Field · Type · Required/Optional · Description, a column only where some row has a value.
   They sit inside a prose section, whose inline-code chip must not reach the name or the type. */
.ref-field-table { margin: 0 0 var(--s-5); }
.ref-field-table:last-child { margin-bottom: 0; }
/* the collection's types are a few words ("array of string"): one line, never broken */
.ref-field-table .ref-c-type { width: 20%; }
.ref-field-table .ref-p-type { white-space: nowrap; }
/* a name and a type only (Field · Type): the name gets half */
.ref-field-table:not(.has-desc):not(.has-ops) .ref-c-name { width: 50%; }
.ref-params .ref-p-name {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--fs-sm);
  color: var(--fg);
}
/* a field path: the parent muted, the leaf strong (docs/DESIGN-SIGNAL.md §4.6) */
.ref-p-name .ref-p-parent { font-weight: 400; color: var(--fg-3); }
/* an enum type (`light` | `full`) reads as type text, not as chips */
.ref-params .ref-p-type code {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--fg-2);
}

/* A field table is never flush against the example body under it. */
.ref-section table + .code-block,
.ref-section .table-scroll + .code-block,
.ref-prose-block + .code-block { margin-top: 24px; }
.ref-prose-block > :last-child { margin-bottom: 0; }

/* Names wrap after `.` and `_` (the markup carries <wbr>); only a single run longer than
   the whole column is ever broken inside a word. */
.ref-p-name {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-weight: 600;
  color: var(--fg);
  overflow-wrap: break-word;
}

.ref-p-type {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg-3);
}

/* Required in `hi`, Optional in `fg-3`: spelled out, a label (mono 11px, capitals by CSS) */
.ref-req,
.ref-opt {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ref-req { color: var(--hi); }
.ref-opt { color: var(--fg-3); }

.ref-p-desc { color: var(--fg-2); }
.ref-p-desc > :first-child { margin-top: 0; }
.ref-p-desc > :last-child { margin-bottom: 0; }

.ref-p-ex {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ref-p-ex-l {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- endpoint tables (module pages) -------------------------- */

/* a module's own endpoints right under its head: a gap, not the facts' hairline doubled */
.ref-head + .ref-endpoints { margin-top: 40px; }

.ref-endpoints .ref-c-method { width: 84px; }
.ref-endpoints .ref-c-path { width: 40%; }

.ref-c-path code,
.ref-ep-path {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg);
}

/* The path folded into the endpoint cell on narrow screens (see the 700px block). */
.ref-endpoints .ref-ep-path { display: none; }

.ref-endpoints .ref-c-ep a {
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}

.ref-endpoints .ref-c-ep a:hover,
.ref-endpoints .ref-c-ep a:focus-visible {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.ref-ep-sum {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg-2);
}

.ref-group { margin-top: 48px; }
.ref-group .ref-group { margin-top: 40px; }
.ref-group-desc { margin: 0 0 16px; color: var(--fg-2); }
.ref-group-desc > :first-child { margin-top: 0; }
.ref-group-desc > :last-child { margin-bottom: 0; }

/* ---------- /reference/ and module pages ---------------------------- */

/* facts (Base URL · Authentication · Request ID): hairline rows, a label and its value */
.ref-facts {
  margin: 32px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-2);
}

.ref-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: 6px 24px;
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.ref-facts dt {
  padding-top: 3px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ref-facts dd {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--fg);
}

.ref-facts dd > code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg);
}

.ref-facts dd > a code {
  padding: 0.1em 0.38em;
  border-radius: 5px;
  background: var(--code-bg);
  font-size: 0.875em;
}

.ref-fact-wide dd > code {
  font-size: var(--fs-md);
  font-weight: 600;
}

.ref-fact-note {
  display: block;
  max-width: var(--measure, 36rem);
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-2);
}

.ref-fact-note b { font-weight: 600; color: var(--fg); }

/* "Before you start": a label, then Signal text links (docs.css .go) */
.ref-before { margin: 32px 0 0; }

.ref-before-title {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ref-before ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the module groups' labels ("Deep Search & Insights (DSI)", "Platform APIs") above their
   ledger rows (docs.css .ledger: `rule-2` on top, a hover panel behind a row, an arrow) */
.ref-cards-h {
  margin: 32px 0 12px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ref-section > h2 + .ref-cards-h { margin-top: 8px; }

/* a module row's title is an h4 (under its group's h3): the ledger's title, same values */
.ref-ledger h4.ledger-title {
  grid-area: title;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.ref-ledger h4.ledger-title .ref-badges { font-size: var(--fs-base); letter-spacing: normal; }

/* ---------- status chips ----------------------------------------------
   Every status says its code and its word ("200 OK"); a 2xx is `ok`, every other status a
   neutral chip (never the exposure colour, docs/DESIGN-SIGNAL.md §4.7). */

.ref-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--rule-3);
  border-radius: var(--radius-tag);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.ref-status b { font-weight: 500; }

.ref-status-ok {
  color: var(--ok);
  border-color: currentColor;
}

/* a request template (build/request-template.mjs) has no response: a neutral "Request" chip
   with a dashed edge (Signal §4.3: a neutral tag, the dashed edge of "Inferred from examples") */
.ref-status-req { border-style: dashed; }

/* inside a code panel (near-black green): `code-tab` for everything that is not a 2xx */
:is(.ref-card, .ref-tryit, .code-block) .ref-status:not(.ref-status-ok) {
  color: var(--code-tab);
  border-color: color-mix(in srgb, var(--code-fg) 40%, transparent);
}

/* ---------- the content column's Examples list ----------------------- */

.ref-resp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-2);
}

.ref-resp-list li {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  min-height: 46px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-md);
  color: var(--fg);
}

.ref-resp-list .ref-status { justify-self: start; }

/* the panel-less second tab group in the content column: hairline rows; the selected one
   carries aria-selected (a `panel-2` ground and a 2px `hi` bar) */
.ref-ex-list,
.tabs-list.ref-ex-list {
  display: grid;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule-2);
  background: none;
}

.ref-ex-item,
.tab.ref-ex-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name status" "path status";
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
  /* .tab (docs.css) is a 28px chip; these rows are two-line rows */
  height: auto;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  /* .tab sets `white-space: nowrap`; these rows carry a full request path with its query
     string and must wrap instead of pushing the page sideways */
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ref-ex-item:hover { background: var(--panel-2); color: var(--fg-2); }

/* A lone example is listed, not a tab: nothing to pick. */
.ref-ex-static { margin: 0; padding: 0; list-style: none; }
.ref-ex-static .ref-ex-item { cursor: default; }
.ref-ex-static .ref-ex-item:hover { background: transparent; }

.tab.ref-ex-item[aria-selected="true"] {
  background: var(--panel-2);
  color: var(--fg-2);
  box-shadow: inset 2px 0 0 var(--hi);
}

.ref-ex-name { grid-area: name; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }

.ref-ex-path {
  grid-area: path;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 20px;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

/* the path text next to the method chip: it may shrink to nothing and wrap */
.ref-ex-path > span:not(.method) { min-width: 0; }

.ref-ex-item > .ref-status { grid-area: status; }

.ref-ex-path .method { flex: none; margin-top: 1px; }

/* ---------- the code column (bedrock) -------------------------------- */

.ref-code {
  min-width: 0;
  background: var(--bg);
  color: var(--fg);
}

/* the light theme needs no edge (the tone does it); on the dark page a hairline */
[data-theme='dark'] .ref-code { border-left: 1px solid var(--rule); }

.ref-code-sticky {
  position: sticky;
  top: var(--header-h, 64px);
  max-height: calc(100vh - var(--header-h, 64px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  /* A single very long response line (a raw WHOIS record, say) must never widen this
     column: everything below is width-capped and only the <pre> scrolls. */
  min-width: 0;
}

.ref-code-sticky > * { min-width: 0; max-width: 100%; }

/* "Example", "Request", "Response": labels (mono 11px, capitals by CSS, `fg-3`) */
.ref-card-label {
  flex: none;
  margin: 0 0 -4px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ref-card + .ref-card-label { margin-top: 8px; }

/* an endpoint with no saved example but captured worked examples: a `.go` link to them
   below the request card (build/reference.mjs codeColumn) */
.ref-code-more { flex: none; margin: 4px 0 0; }

/* a request template's panel: the request card, then this line where a response would be */
.ref-template-note {
  flex: none;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
}

/* The example switcher is a `.tabs` group: the label, the list of examples, then the panel of
   the selected one (its request card and response card). A flex column whose items are
   width-capped (min-width: 0), so one 7,000px response line never widens the column. */
.ref-ex-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

/* one hairline row per example: its status chip and its name; the selected row has a
   `panel-2` ground and a 2px `accent` bar (lime on bedrock) */
.ref-ex-tabs,
.tabs-list.ref-ex-tabs {
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--rule-2);
  border-radius: 0;
  background: none;
}

.ref-ex-tab,
.tab.ref-ex-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  height: auto;
  padding: 7px 10px 7px 12px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-align: left;
  /* the name may wrap inside its row rather than widen the list */
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.tab.ref-ex-tab:hover { color: var(--fg); background: var(--panel); }

.tab.ref-ex-tab[aria-selected="true"] {
  color: var(--fg);
  background: var(--panel-2);
  box-shadow: inset 2px 0 0 var(--accent);
}

.ref-ex-tab-name { min-width: 0; }

/* Every panel shares the rest of the column; all but the selected one are [hidden]. */
.ref-ex-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

/* `display: flex` above would otherwise defeat the [hidden] attribute. */
.ref-ex-panel[hidden] { display: none; }

/* cards: Signal code panels ------------------------------------------- */

.ref-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  border: 1px solid var(--depth-code-bd);
  border-radius: var(--radius-code);
  background: var(--depth-code);
  color: var(--code-fg);
  overflow: hidden;
  box-shadow: var(--panel-shadow);
}

.ref-card-req { flex: 0 0 auto; }
.ref-card-res { flex: 1 1 auto; min-height: 180px; overflow: auto; }

/* As a flex item the code block would shrink instead of letting the card scroll. It keeps
   its full height (every line shows: no clamp); the card's own overflow scrolls. */
.ref-card > .code-block { flex: none; }

/* the bar on top of a panel: the language tabs (or the response's one title) and Copy, a
   `code-rule` hairline under it */
.ref-card-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding-right: 6px;
  border-bottom: 1px solid var(--code-rule);
}

.ref-card-req .tabs {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

/* the language tabs: one row that scrolls sideways, beside Copy */
.ref-card-bar .tabs-list {
  flex: 1 1 0;
  display: flex;
  flex-wrap: nowrap;
  align-self: stretch;
  align-items: center;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 0 4px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.ref-card-bar .tabs-list::-webkit-scrollbar { display: none; }

.ref-card-bar .tab {
  flex: none;
  height: auto;
  margin: 6px 0 6px 6px;
  padding: 6px 11px;
  border-radius: 7px;
  background: none;
  color: var(--code-tab);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.ref-card-bar .tab:hover { color: var(--code-fg); }

/* the selected tab: white (the column's `fg`) on `code-tab-on`, as in Signal's code block */
.ref-card-bar .tab[aria-selected="true"] {
  background: var(--code-tab-on);
  color: var(--fg);
}

/* One copy button in the bar copies the visible snippet (docs.js). */
.ref-card-copy { flex: none; margin-left: auto; }

/* The language is already the selected tab, and the response's bar is its title: the code
   block's own head would repeat them. (A raw WHOIS text block keeps its head: .ref-exs-raw.) */
.ref-card .tab-panel > .code-block > .code-head,
.ref-card-res > .code-block > .code-head { display: none; }

.ref-card-req .tab-panel {
  flex: 1 0 auto;
  min-width: 0;
  max-height: 42vh;
  margin-top: 0;
  overflow: auto;
}

/* Code blocks inside the column are flush with their panel. */
.ref-code .ref-card .code-block {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The <pre> is the one element allowed to scroll sideways. */
.ref-code .code-block pre {
  margin: 0;
  max-width: 100%;
  padding: 16px 18px;
  overflow: auto;
  overscroll-behavior-x: contain;
  background: transparent;
  color: var(--code-fg);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.7;
  tab-size: 4;
}

/* Long lines wrap instead of running off the right edge of the column (overlay scrollbars
   give no hint that a line continues): a curl URL, a long JSON string, a raw WHOIS record.
   Indentation survives (`pre-wrap`), and a wrapped line hangs 4ch in from its start where
   the browser supports `text-indent: hanging each-line`. Copying is unaffected. */
.ref-code .code-block pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-indent: 4ch hanging each-line;
}

.ref-code .code-block pre code { display: block; min-width: 0; padding: 0; }

/* the response's one title: "200 OK · application/json" (a 2xx in the panel's `ok`) */
.ref-res-bar { padding-left: 16px; }

.ref-res-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--code-tab);
  overflow-wrap: anywhere;
}

.ref-res-code-ok { color: var(--ok); }

/* after the body (the body first, so it is on screen when the card opens): every saved
   header, one hairline row each */
.ref-res-headers {
  display: grid;
  margin: 0 18px 16px;
  padding: 0;
  border-top: 1px solid var(--code-rule);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
}

.ref-res-headers > div {
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--code-rule);
}

.ref-res-headers dt { color: var(--code-tab); overflow-wrap: anywhere; }
.ref-res-headers dd { margin: 0; color: var(--code-fg); overflow-wrap: anywhere; }

/* ---------- language tabs: eight languages in one scrolling row ------------
   curl, Python, JavaScript, Go, Java, C#, PHP and Ruby do not fit the bar of a ~480px
   column. The row scrolls sideways (no scrollbar). While there is more to scroll to, the tab
   labels at that edge FADE OUT (a mask on the row: the labels themselves go transparent over
   the last 28px, so a cut label reads as "more this way"). tryit.js sets .can-scroll-left /
   -right from the scroll position (and keeps the selected tab in view, clear of the fade:
   its 32px pad = scroll-padding-inline). Without JavaScript the row simply scrolls. */
.ref-card-req .tabs-list {
  scroll-behavior: smooth;
  scroll-padding-inline: 32px;
  --ref-fade: 28px;
}
.ref-card-req .tabs-list.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--ref-fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--ref-fade)), transparent);
}
.ref-card-req .tabs-list.can-scroll-left {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ref-fade));
  mask-image: linear-gradient(to right, transparent, #000 var(--ref-fade));
}
.ref-card-req .tabs-list.can-scroll-left.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ref-fade), #000 calc(100% - var(--ref-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--ref-fade), #000 calc(100% - var(--ref-fade)), transparent);
}

/* ---------- lifecycle badges: Deprecated / Beta ----------------------------
   A word in a neutral tag (Signal .tag: mono 11px capitals, `panel` fill, `rule-2` border,
   `fg-2` text), never colour alone; the same tag in the h1, module tables, group headings
   and the /reference/ rows (build/reference.mjs statusBadges). */
/* The gap before and between badges is the space in the markup, widened here: a space
   at the end of a line is dropped, so a group that wraps under a long h1 starts flush
   with the title (a margin would indent it). */
.ref-badges { word-spacing: 0.15em; }
.ref-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  word-spacing: normal;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-tag);
  background: var(--panel);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.2em;
}

.ref-head h1 .ref-badge { height: 24px; font-size: var(--fs-xs); vertical-align: 0.4em; letter-spacing: 0.08em; }
.ref-group > h2 .ref-badge,
.ref-group > h3 .ref-badge,
.ref-group > h4 .ref-badge { vertical-align: 0.15em; letter-spacing: 0.08em; }
.ref-endpoints .ref-c-ep .ref-badges { word-spacing: 0.45em; }
.ref-endpoints .ref-c-ep .ref-badge { vertical-align: 0.08em; }

.ref-status-notes { margin: 16px 0 0; }
.ref-status-notes .callout { margin: 0; }
.ref-status-notes .callout + .callout { margin-top: 12px; }
.ref-status-notes + .ref-lede { margin-top: 16px; }
.ref-head > .ref-status-note { margin: 0 0 16px; }
.ref-group > .ref-status-note { margin: 0 0 16px; }
.ref-status-note :not(pre) > code {
  padding: 0.1em 0.38em;
  border-radius: 5px;
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--fg);
}

/* ---------- response schema (inferred from the saved 2xx examples) --------- */

/* "Inferred from examples": a neutral tag with a dashed edge (Signal .tag, `rule-3` dashes) */
.ref-inferred {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-right: 8px;
  padding: 0 8px;
  border: 1px dashed var(--rule-3);
  border-radius: var(--radius-tag);
  background: var(--panel);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.1em;
}

/* Field gets the room (long dotted paths), then Example. Type is sized for its longest
   word, `array<object>` (13 mono characters, 10% of the rows); the rest are "string",
   "number", "string | null". Present holds "2 of 3", and its heading, PRESENT (at 12% of a
   475px table it ran into EXAMPLE, QA). */
.ref-schema-table { table-layout: fixed; }
.ref-schema-table thead th:first-child { width: 44%; }
.ref-schema-table thead th:nth-child(2) { width: 22%; }
.ref-schema-table.has-seen thead th:first-child { width: 36%; }
.ref-schema-table.has-seen thead th:nth-child(2) { width: 22%; }
.ref-schema-table.has-seen thead th:nth-child(3) { width: 14%; }
.ref-schema-table thead th { padding-right: 10px; }
.ref-schema-table tbody th,
.ref-schema-table td { padding: 10px 10px 10px 0; }
.ref-schema-table :is(th, td):last-child { padding-right: 0; }
/* the field path: the parent in `fg-3` (<span>), the leaf `fg` 600; a line may break after
   every dot and underscore (<wbr>, build/reference.mjs schemaName), never inside a word,
   unless a single segment is wider than the column */
.ref-schema-table tbody th code,
.ref-field-list tbody th code {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-weight: 600;
  color: var(--fg);
  overflow-wrap: break-word;
}
.ref-schema-table tbody th code span,
.ref-field-list tbody th code span { font-weight: 400; color: var(--fg-3); }
/* a type breaks at its spaces (`string | null`); `array<object>` only after its `<` (a <wbr>
   the build puts there), and only where the column is narrower than the word */
.ref-schema-table td:nth-child(2) {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fg-3);
  overflow-wrap: normal;
  word-break: normal;
}
.ref-schema-table.has-seen td:nth-child(3) { font-family: var(--sans); font-size: 12px; color: var(--fg-3); white-space: nowrap; }
/* an example is a short hint (at most 36 characters, build/reference.mjs schemaExample): it
   wraps inside its chip instead of being cut, so it is readable at every width */
.ref-schema-table.has-ex td:last-child code {
  display: inline-block;
  max-width: 100%;
  padding: 0.1em 0.38em;
  border: 0;
  border-radius: 5px;
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

/* Filtering › "Searchable Fields" / "Sortable Fields" (build/reference.mjs fieldListHtml):
   one field per row, every row open, so the rows are compact. The field path reads like the
   schema's (parent `fg-3`, leaf `fg` 600, a break only after a dot); the verified operators
   are `code-bg` chips that wrap; the example is a link. */
.ref-field-list-h {
  margin: 32px 0 8px;
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ref-field-list-note { margin: 0 0 16px; font-size: var(--fs-md); line-height: 1.55; color: var(--fg-2); }
.ref-field-list { table-layout: fixed; font-size: var(--fs-sm); }
.ref-field-list thead th { padding: 10px 12px 10px 0; white-space: nowrap; }
.ref-field-list tbody th,
.ref-field-list td { padding: 8px 12px 8px 0; line-height: 1.5; }
.ref-field-list :is(th, td):last-child { padding-right: 0; }
.ref-field-list.has-ops:not(.has-desc) thead th:first-child { width: 40%; }
.ref-field-list.has-ops.has-ex:not(.has-desc) thead th:first-child { width: 34%; }
.ref-field-list.has-ops.has-ex:not(.has-desc) thead th:nth-child(2) { width: 36%; }
.ref-field-list.has-ex:not(.has-ops):not(.has-desc) thead th:first-child { width: 55%; }
/* with a Description column (Field, Description[, Operators][, Example]): the description
   takes what the other columns leave, and it is always there as text, never a tooltip.
   The Field column stays wide enough for a field segment to break only after a dot or an
   underscore (fieldListHtml: <wbr>), never mid-word, at 1024 px and up (QA 2026-09-24: at
   24% a 139 px column split `cvss_metric_v3|0` and `source_identif|ier`; measured after: 0
   mid-word breaks in 8 search pages at 1024 / 1280 / 1440 / 1600 px, Field 27% broke 32 at 1280) */
.ref-field-list.has-desc thead th:first-child { width: 36%; }
.ref-field-list.has-desc.has-ops thead th:first-child,
.ref-field-list.has-desc.has-ex thead th:first-child { width: 32%; }
.ref-field-list.has-desc.has-ops thead th:nth-child(3) { width: 18%; }
.ref-field-list.has-desc.has-ex:not(.has-ops) thead th:nth-child(3) { width: 26%; }
/* Field, Description, Operators and Example (recheck 2026-09-24: at 15% the Operators chips ran
   into the Example column at 900–1440 px). Operators get the room of their longest name part
   (`contains_any` breaks only after an underscore: fieldListHtml <wbr>), the description gives
   it. */
.ref-field-list.has-desc.has-ops.has-ex thead th:first-child { width: 29%; }
.ref-field-list.has-desc.has-ops.has-ex thead th:nth-child(2) { width: 32%; }
.ref-field-list.has-desc.has-ops.has-ex thead th:nth-child(3) { width: 20%; }
.ref-field-list.has-desc.has-ops.has-ex thead th:nth-child(4) { width: 19%; }
.ref-field-list.has-desc td:nth-child(2) { overflow-wrap: break-word; color: var(--fg-2); }
.ref-field-list.has-desc td:nth-child(2) code {
  padding: 0.1em 0.38em;
  border-radius: 5px;
  background: var(--code-bg);
  font-size: 0.9em;
  color: var(--fg);
}
.ref-field-list.has-ops:not(.has-desc) td:nth-child(2) code,
.ref-field-list.has-ops.has-desc td:nth-child(3) code {
  display: inline-block;
  max-width: 100%;
  margin: 1px 2px 1px 0;
  padding: 0.05em 0.4em;
  border: 0;
  border-radius: 5px;
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg);
  /* a chip stays inside its cell: it wraps after an underscore (<wbr>), a part longer than the
     cell (never at today's widths) as a last resort anywhere */
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}
/* every cell holds its content */
.ref-field-list td { min-width: 0; overflow-wrap: break-word; }
.ref-field-list.has-ex td:last-child { overflow-wrap: anywhere; }
.ref-field-list.has-ex td:last-child a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--link-underline);
}
.ref-field-list.has-ex td:last-child a:hover,
.ref-field-list.has-ex td:last-child a:focus-visible { text-decoration-color: currentColor; }
/* A grouped list (build/reference.mjs fieldGroupsHtml, the collection's measured operator
   groups since 2026-09-27): one table per group under its label, "Operators" (a `label`) and
   the group's operators as `code-bg` chips, said once; the table is labelled by it. The tables
   of one list share their columns, so their rows line up from group to group. */
.ref-op-group + .ref-op-group { margin-top: var(--s-5); }
.ref-op-group-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 10px;
}
.ref-op-group-key {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ref-op-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ref-op-chips code {
  padding: 0.05em 0.4em;
  border: 0;
  border-radius: 5px;
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--fg);
  white-space: normal;
  overflow-wrap: anywhere;
}
.ref-op-none { font-size: var(--fs-sm); color: var(--fg-2); }

/* every worked example of the field, one per line (no "+N more": show everything, open) */
.ref-field-list ul.ref-field-list-exs { margin: 0; padding: 0; list-style: none; }
.ref-field-list ul.ref-field-list-exs li { margin: 0; padding: 0; }
.ref-field-list ul.ref-field-list-exs li + li { margin-top: 6px; }
.ref-field-list ul.ref-field-list-exs li::before { content: none; }

/* ---------- Try It (assets/js/tryit.js builds the console) ------------------
   On the bedrock column (docs/DESIGN-SIGNAL.md §4.10): a view switch "Examples | Try it"
   (the pressed view a filled chip), then the console as a code panel. Fields have a `field-bd`
   border (3:1 or better on the panel), placeholders `fg-3`, a 2px `accent` focus ring; an
   invalid field a 2px `hi` border and a message in `fg` after Signal's triangle, never the
   exposure colour. "Send request" is the one solid button. */

/* whatever the view switch hides stays hidden, whatever its own display rule */
.ref-code-sticky > [hidden] { display: none !important; }

.ref-tryit-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3);
}

.ref-tryit-bar {
  display: flex;
  flex: none;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
}

.ref-tryit-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ref-tryit-view:hover { color: var(--fg); }
.ref-tryit-view[aria-pressed="true"] {
  background: var(--solid-bg);
  color: var(--solid-fg);
}

.ref-tryit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--depth-code-bd);
  border-radius: var(--radius-code);
  background: var(--depth-code);
  color: var(--fg);
  font-size: 13px;
}

.ref-tryit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ref-tryit-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.ref-tryit-title:focus { outline: none; }
.ref-tryit-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the environment's name, a label: no colour, the word says it */
.ref-tryit-env {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.ref-tryit-url {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-2);
}
.ref-tryit-url .method { flex: none; margin-top: 0; }
.ref-tryit-url-text {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg);
  /* tryit.js puts a <wbr> after every '/', '?' and '&': those are the breaks; a single
     segment wider than the line is the only thing broken inside */
  overflow-wrap: break-word;
}

.ref-tryit-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ref-tryit-group > legend {
  margin-bottom: 10px;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ref-tryit-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ref-tryit-field + .ref-tryit-field { margin-top: 4px; }

/* a field's label: a label (capitals by CSS), the parameter's name as code, Required in `hi` */
.ref-tryit-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ref-tryit-label code {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}
.ref-tryit-req { color: var(--hi); }
.ref-tryit-meta { color: var(--fg-3); }

.ref-tryit-input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--field-bd);
  border-radius: var(--radius);
  background: var(--code-bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  transition: border-color 0.2s var(--ease);
}
.ref-tryit-input::placeholder { color: var(--fg-3); opacity: 1; }
.ref-tryit-input:hover { border-color: var(--fg-3); }
.ref-tryit-input:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.ref-tryit-input[aria-invalid="true"] { border: 2px solid var(--hi); padding-inline: 11px; }
.ref-tryit-json {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.6;
  resize: vertical;
  white-space: pre;
  tab-size: 2;
}
.ref-tryit-json[aria-invalid="true"] { padding: 9px 11px; }

.ref-tryit-keyrow { display: flex; gap: 8px; }
.ref-tryit-keyrow .ref-tryit-input { flex: 1 1 auto; }
.ref-tryit-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-2); }
.ref-tryit-check { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }

.ref-tryit-help {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-3);
}

.ref-tryit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* the console's buttons: small line buttons (Signal .btn--line.btn--sm) … */
.ref-tryit .ref-tryit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.ref-tryit .ref-tryit-btn:hover { border-color: var(--rule-3); background: var(--panel-2); color: var(--fg); }
.ref-tryit .ref-tryit-btn:disabled { opacity: 0.6; cursor: progress; }
/* … and "Send request", the one solid button of the view */
.ref-tryit .ref-tryit-send {
  border-color: var(--solid-bg);
  background: var(--solid-bg);
  color: var(--solid-fg);
}
.ref-tryit .ref-tryit-send:hover { border-color: var(--solid-hover); background: var(--solid-hover); color: var(--solid-fg); }
.ref-tryit .ref-tryit-btn .ico { width: 14px; height: 14px; }

/* a form error: a word after Signal's triangle, in `fg` (never the exposure colour) */
.ref-tryit-error {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--fg);
}
.ref-tryit-error::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  transform: translateY(1px);
  background: var(--hi);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.2 9.2 8.8H.8Z' fill='%23000' transform='translate(3 3)'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.2 9.2 8.8H.8Z' fill='%23000' transform='translate(3 3)'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
/* the live region: announced, not shown: the result, the error line and the Send
   button ("Sending…") already say the same thing on screen */
.ref-tryit-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ref-tryit-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--code-rule);
}
/* tryit.js moves focus here after a response (tabindex=-1) */
.ref-tryit-result:focus { outline: none; }
.ref-tryit-result:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.ref-tryit-res-meta { display: flex; align-items: center; gap: 10px; }
.ref-tryit-time { font-family: var(--sans); font-size: 12px; color: var(--fg-3); }
.ref-tryit .ref-tryit-headers { margin: 0; }
.ref-tryit-note-line { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--fg-3); }
.ref-tryit-fail { line-height: 1.5; }
.ref-tryit .ref-tryit-body {
  margin: 0;
  border: 1px solid var(--code-rule);
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
}
/* wide screens: the console (.ref-tryit, overflow: auto) is the ONE scroll container, so the
   response body is not a second scroller inside it (tryit.js scrolls the result into view);
   one column (< 900 px) the console is as tall as its content and the body scrolls instead */
.ref-tryit .ref-tryit-body pre { max-height: none; }

/* ---------- motion: only for readers who have not asked for less ------ */
@media screen and (prefers-reduced-motion: no-preference) {
  .ref-ex-tab,
  .ref-ex-item { transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 899px) {
  .ref-layout { grid-template-columns: minmax(0, 1fr); }
  .ref-main { padding: 24px 16px 48px; }
  /* one column: the head, the code column and the sections one after another, as written */
  .ref-layout:not(.ref-layout-wide) { grid-template-rows: none; }
  .ref-top,
  .ref-top ~ .ref-code,
  .ref-top ~ .ref-main { grid-column: auto; grid-row: auto; }
  .ref-top { padding: 24px 16px 28px; }
  .ref-top ~ .ref-main { padding-top: 0; }
  .ref-code { border-left: 0; }
  [data-theme='dark'] .ref-code { border-left: 0; }
  .ref-code-sticky { position: static; max-height: none; padding: 24px 16px 28px; }
  /* one column: code keeps its lines (as in every other code block on the site) and
     scrolls sideways, instead of breaking a URL or a JSON value in the middle */
  .ref-code .code-block pre {
    white-space: pre;
    overflow-wrap: normal;
    text-indent: 0;
  }
  .ref-card-req .tab-panel { max-height: none; }
  .ref-card-res { min-height: 0; max-height: 520px; }
  /* one column: the console is as tall as its content; its response body scrolls */
  .ref-tryit { overflow: visible; }
  .ref-tryit .ref-tryit-body pre { max-height: 60vh; }
}

/* a phone (docs/DESIGN-SIGNAL.md §4.5: 700px and below): every table row is one block. The
   column heads are not shown but stay in the accessibility tree (visually hidden, not
   display: none), so every cell keeps its header; a cell after the first shows its column's
   name before its value (data-label, or the column's name from its class for the long field
   and schema tables, which carry no attribute per cell). */
@media (max-width: 700px) {
  .ref-params thead,
  .ref-endpoints thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .ref-params,
  .ref-params tbody,
  .ref-params tr,
  .ref-params tbody th,
  .ref-params td { display: block; width: auto !important; }

  .ref-params tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .ref-params tbody th,
  .ref-params td { padding: 0; border: 0; }
  .ref-params tbody th + td { margin-top: 8px; }
  .ref-params td[data-label]::before,
  .ref-schema-table td:nth-child(2)::before,
  .ref-schema-table.has-seen td:nth-child(3)::before,
  .ref-schema-table.has-ex td:last-child::before,
  .ref-field-list.has-ops:not(.has-desc) td:nth-child(2)::before,
  .ref-field-list.has-ops.has-desc td:nth-child(3)::before,
  .ref-field-list.has-ex td:last-child::before {
    margin-right: 8px;
    font-family: var(--sans);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .ref-params td[data-label]::before { content: attr(data-label); }
  .ref-schema-table td:nth-child(2)::before { content: "Type"; }
  .ref-schema-table.has-seen td:nth-child(3)::before { content: "Present"; }
  .ref-schema-table.has-ex td:last-child::before { content: "Example"; }
  .ref-field-list.has-ops:not(.has-desc) td:nth-child(2)::before,
  .ref-field-list.has-ops.has-desc td:nth-child(3)::before { content: "Operators"; }
  .ref-field-list.has-ex td:last-child::before { content: "Example"; }

  /* the parameter table: the name and Required/Optional on one line, the description under
     them, without the column names (the row says what they are) */
  .ref-param-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .ref-param-table tbody th + td { margin-top: 0; }
  .ref-param-table td.ref-c-req { padding-top: 0; }
  .ref-param-table td.ref-c-desc { flex-basis: 100%; margin-top: 4px; }
  .ref-param-table td[data-label]::before { content: none; }
  /* a field table's row: the name, its type and Required/Optional on one line; an empty cell
     takes no line; an Operators cell keeps its column name above it (it is not a description) */
  .ref-param-table td:empty { display: none; }
  .ref-param-table td.ref-c-ops[data-label]::before { content: attr(data-label); display: block; margin: 0 0 2px; }
  /* a description reads as a paragraph, without a label */
  .ref-header-table td[data-label="Value"]::before,
  .ref-exs-params td[data-label]::before { display: block; margin: 0 0 2px; }

  .ref-endpoints td { padding: 12px 12px 12px 0; }
  .ref-endpoints .ref-c-method { width: 64px; }
  /* the path moves under the endpoint name instead of disappearing */
  .ref-endpoints .ref-c-path { display: none; }
  .ref-endpoints .ref-ep-path {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: var(--fg);
  }

  /* the inferred schema and the field lists: the name on its own line, then each value
     after its column's name */
  .ref-schema-table,
  .ref-field-list { table-layout: auto; }
  .ref-params.ref-schema-table tr,
  .ref-params.ref-field-list tr { padding: 10px 0; }
  .ref-schema-table td,
  .ref-field-list td {
    display: inline-block;
    width: auto !important;
    max-width: 100%;
    margin: 6px 16px 0 0;
    vertical-align: top;
  }
  .ref-schema-table td:empty,
  .ref-field-list td:empty { display: none; }
  /* the description reads as a paragraph under the field, across the row */
  .ref-field-list.has-desc td:nth-child(2) { display: block; margin-right: 0; }

  .ref-ex-item,
  .tab.ref-ex-item { grid-template-areas: "name status" "path path"; row-gap: 6px; padding-inline: 10px; }

  .ref-tryit-actions .ref-tryit-btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  /* the facts: the label above its value */
  .ref-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ref-endpoint { flex-wrap: wrap; }
  .ref-endpoint-url { flex-basis: calc(100% - 60px); }
}

/* Forced colors (Windows High Contrast): backgrounds and shadows are flattened, so the
   selected tabs, rows and views are marked with system-colour borders. */
@media (forced-colors: active) {
  .ref-card-bar .tab[aria-selected="true"] { border-bottom: 2px solid Highlight; }
  .tab.ref-ex-tab[aria-selected="true"],
  .tab.ref-ex-item[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ref-tryit-view[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ref-card-req .tabs-list { -webkit-mask-image: none; mask-image: none; }
  .ref-tryit-error::before { background: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .ref-endpoint .ref-copy,
  .ref-ex-item,
  .ref-ex-tab,
  .ref-tryit-view,
  .ref-card-bar .tab { transition: none; }
  .ref-card-req .tabs-list { scroll-behavior: auto; }
}

/* ---------- the code column runs down beside the footer ----------------
   The footer used to sit below the whole two-pane grid, so the sticky code
   column's containing block ended where the footer began: at the bottom of a
   long endpoint page the column was pushed up by the footer's height (-12px at
   1440x900 and 1280x720) and the example switcher slid under the header.
   On endpoint pages (build/layout.mjs adds .page-col-split) the page column is a
   two-column grid and the body's grids are subgrids of it: the content column
   ends above the footer, the code column spans the body row AND the footer row,
   and the footer sits under the content column only. Without subgrid support
   the old layout stays. */
@supports (grid-template-rows: subgrid) {
  @media screen and (min-width: 900px) {
    .page-col-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--code-col-w, clamp(380px, 36vw, 560px));
      /* the head (.ref-top), the sections (.ref-main), the footer */
      grid-template-rows: auto 1fr auto;
    }
    .page-col-split > .page-body-ref {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
    }
    .page-col-split .ref-layout {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
    }
    .page-col-split .ref-top { grid-column: 1; grid-row: 1; }
    .page-col-split .ref-main { grid-column: 1; grid-row: 2; }
    .page-col-split .ref-code { grid-column: 2; grid-row: 1 / -1; }
    .page-col-split > .footer { grid-column: 1; grid-row: 3; }
  }
}

/* ---------- print ------------------------------------------------------
   docs.css prints code dark on white (the --print-* tokens) and every tab panel one after
   another. Here: the two panes stack, the code column loses its sticky clamp and its moss
   ground (its tokens become the print ones), cards print in full (no max-height, no inner
   scroll), and the hint about picking an example goes: the example list itself (a tab list)
   is not printed, every example is. */
@media print {
  .ref-layout,
  .page-col-split,
  .page-col-split > .page-body-ref { display: block; }

  .ref-main { padding: 0 0 16px; }
  .ref-top { padding: 0 0 16px; }

  /* (0,4,0): above the dark theme's bedrock block in tokens.css */
  :root[data-theme] .ref-code[data-depth] {
    --bg: var(--print-bg);
    --bg-2: var(--print-bg);
    --fg: var(--print-fg);
    --fg-2: var(--print-muted);
    --fg-3: var(--print-muted);
    --hi: var(--print-kw);
    --ok: var(--print-kw);
    --accent: var(--print-kw);
    --rule: var(--print-rule);
    --rule-2: var(--print-rule);
    --rule-3: var(--print-rule);
    --panel: var(--print-bg);
    --panel-2: var(--print-bg);
    --code-bg: var(--print-bg);
    --field-bd: var(--print-rule);
    --depth-code: var(--print-bg);
    --depth-code-bd: var(--print-rule);
    --code-fg: var(--print-fg);
    --code-tab: var(--print-muted);
    --code-tab-on: var(--print-bg);
    --code-rule: var(--print-rule);
    --code-ok: var(--print-kw);
    border: 0;
    background: none;
    color: var(--print-fg);
  }

  .ref-code .ref-card,
  .ref-code .ref-tryit { --ok: var(--print-kw); --accent: var(--print-kw); }

  .ref-code-sticky {
    position: static;
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  .ref-card,
  .ref-card-res,
  .ref-card-req .tab-panel {
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
  }

  /* one example after another, each card only as tall as its content */
  .ref-ex-group { display: block; }
  .ref-ex-tabs,
  .ref-ex-label { display: none !important; }
  .ref-ex-panel { break-inside: auto; }
  .ref-ex-panel + .ref-ex-panel { margin-top: 18px; }
  .ref-card-res { flex: none; }
  .ref-card-label { margin: 12px 0 6px; }

  .ref-hint,
  .ref-card-copy,
  .ref-endpoint .ref-copy,
  .ref-anchor::after { display: none !important; }

  /* the console is interactive only */
  .ref-tryit-bar,
  .ref-tryit,
  .ref-tryit-note { display: none !important; }
  .ref-code-sticky > [data-tryit-hid] { display: block !important; }
  .ref-section > .ref-hint:has(.ref-inferred) { display: block !important; }
}

/* ---------- example library (build/examples.mjs EXAMPLES_CSS) ----------
   Signal (docs/DESIGN-SIGNAL.md §4.11): hairline tables and lists, a panel for the filter,
   code-bg chips for values; every colour a token. */
.ref-exs-eyebrow { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--fg-3); }
.ref-exs-eyebrow a { color: inherit; font-weight: 500; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--link-underline); }
.ref-exs-eyebrow a:hover, .ref-exs-eyebrow a:focus-visible { color: var(--fg); text-decoration-color: currentColor; }
.ref-exs-endpoint .ref-exs-ep { flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.ref-exs-endpoint .ref-exs-ep:hover .ref-path, .ref-exs-endpoint .ref-exs-ep:focus-visible .ref-path { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* PARAM / VALUE: the tag's name as a label, its values as code-bg chips (a link to the index
   filtered by the value; the underline shows on hover, no tint) */
.ref-exs-tags { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; }
.ref-exs-tags > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; max-width: 100%; }
.ref-exs-tags dt { font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.3; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
/* a long field name (cve.enrichment.vdeep_metric.cvss_data.base_severity) wraps inside its chip
   instead of widening the page: 375 px, 2026-09-24 */
.ref-exs-tags dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.ref-exs-tag { min-width: 0; max-width: 100%; color: var(--fg); text-decoration: none; }
.ref-exs-tag code { display: inline-block; max-width: 100%; padding: 0.15em 0.45em; border-radius: 5px; background: var(--code-bg); color: var(--fg); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
a.ref-exs-tag:hover code, a.ref-exs-tag:focus-visible code { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ref-exs-explain { margin-top: 24px; }
/* where a request value goes (path, query, header, body): a small label beside its name */
/* the name and its label on one line when they fit, the label under the name (not indented)
   when they do not */
.ref-exs-pn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.ref-exs-pn .ref-p-name { display: inline; }
.ref-exs-in { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.3; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.ref-exs-pname { text-decoration: none; }
.ref-exs-pname:hover code, .ref-exs-pname:focus-visible code { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ref-exs-params td code { padding: 0.1em 0.38em; border-radius: 5px; background: var(--code-bg); font-family: var(--font-mono); font-size: 12.5px; color: var(--fg); overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ref-exs-none { margin: 0; color: var(--fg-2); }
/* the related and featured examples: hairline rows */
.ref-exs-list, .ref-exs-featured { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.ref-exs-list li, .ref-exs-featured li { min-width: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ref-exs-list a, .ref-exs-featured a { font-weight: 500; }
.ref-exs-table td:first-child > a { color: var(--link); font-weight: 500; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--link-underline); }
.ref-exs-table td:first-child > a:hover, .ref-exs-table td:first-child > a:focus-visible { text-decoration-color: currentColor; }
/* long code and wide tables in an example's prose never widen the page on a phone */
.ref-exs-intro :not(pre) > code, .ref-exs-explain :not(pre) > code, .ref-exs-page .ref-lede code, .ref-exs-sum code { overflow-wrap: anywhere; }
.ref-exs-intro .table-scroll, .ref-exs-explain .table-scroll, .ref-exs .ref-group-desc .table-scroll { contain: inline-size; }
/* breakableTableCode(): table code breaks only after its dots and underscores */
.ref-exs-intro .table-scroll td code { overflow-wrap: normal; }
@media (min-width: 641px) { .ref-exs-intro td.ref-exs-nw { white-space: nowrap; } }
/* splitIntro(): the intro's sections after the list, and the line under the lead that names them */
.ref-exs-appendix { margin-top: 64px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ref-exs-jump { font-size: var(--fs-md); }
.ref-exs-intro { margin-top: 16px; font-size: var(--fs-base); line-height: 1.65; color: var(--fg-2); }
.ref-exs-intro > :first-child { margin-top: 0; }
/* relatedSection(): under the title, one line per column (its label, then its values), one line
   per value, never a comma-separated run */
.ref-exs-vals { display: block; margin-top: 4px; font-size: 13px; color: var(--fg-2); }
.ref-exs-vals code { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-2); overflow-wrap: anywhere; }
.ref-exs-kv { display: flex; align-items: baseline; gap: 8px; }
.ref-exs-k { flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.ref-exs-vs { display: flex; flex-direction: column; min-width: 0; }
.ref-exs-table td + td { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-2); overflow-wrap: break-word; }
/* the example's title may break anywhere (break-word would not lower the cell's min-content width):
   "(nic.vermögensberatung)" no longer sizes the table past a phone's width, and the short values
   beside it (".de", "generic") keep their words whole */
.ref-exs-table td:first-child > a { overflow-wrap: anywhere; }
.ref-exs-sum { display: block; margin-top: 4px; font-size: var(--fs-md); line-height: 1.55; color: var(--fg-2); }
.ref-exs-all { margin: 20px 0 0; }
.ref-exs-noresp { flex: 0 0 auto; min-height: 0; padding: 16px 18px; }
.ref-exs-noresp .ref-exs-none { color: var(--code-tab); font-size: 13px; }
.ref-exs-trim { margin: 12px 18px 0; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: var(--code-tab); background: var(--code-tab-on); }
/* leanJsonBlock(): JSON punctuation is plain text here, so it takes the punctuation colour
   (the JSON block only: the raw text under it is plain text in the text colour) */
.ref-exs-lean > .code-block pre code { color: var(--t-punc); }
/* rawTextBlock(): a WHOIS record's raw text, line by line, under the JSON */
.ref-exs-raw { flex: none; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--code-rule); }
/* nobrPunycode(): xn--… stays on one line */
.ref-exs-nobr { white-space: nowrap; }
.ref-exs-raw-note { margin: 0 18px 8px; font-size: 12.5px; line-height: 1.5; color: var(--code-tab); }
.ref-exs-raw-note code { font-family: var(--font-mono); font-size: 0.92em; color: var(--code-fg); }
/* off-screen groups skip rendering; only a block size is assumed (an inline size would widen the grid) */
/* content-visibility: auto contains paint, so nothing outside a group's padding box is drawn:
   6px of padding on every side (the margins take it back: 48px between groups, as between the
   reference's other groups) keep the whole focus ring (2px, 3px out) of the heading's anchor and
   of a first-column link (the table scroller reaches 6px out) inside it */
.ref-exs-group { content-visibility: auto; contain-intrinsic-block-size: auto 600px; padding: 6px; margin: 42px -6px -6px; }
.ref-exs-group > h2 { margin-bottom: 12px; }
.ref-exs-table td:first-child { width: 42%; }
/* the filter: one panel (not sticky: with one chip per group and per column value it can be
   half a screen tall); a search field with a 3:1 border, chips that are pressed or not, and the
   live count of the examples that match */
.ref-exs-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; margin: 32px 0 0; padding: 16px; border: 1px solid var(--panel-bd); border-radius: var(--radius-code); background: var(--panel); box-shadow: var(--panel-shadow); }
.ref-exs-q { width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px; font: inherit; font-size: var(--fs-md); color: var(--fg); background: var(--bg); border: 1px solid var(--field-bd); border-radius: var(--radius); }
.ref-exs-q::placeholder { color: var(--fg-3); opacity: 1; }
.ref-exs-q:hover { border-color: var(--fg-3); }
.ref-exs-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ref-exs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ref-exs-chips-label { margin-right: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.3; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.ref-exs-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 3px 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; text-align: left; overflow-wrap: anywhere; color: var(--fg); background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--radius-tag); cursor: pointer; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); }
.ref-exs-chip:hover { border-color: var(--rule-3); }
.ref-exs-chip span { color: var(--fg-3); font-size: 11px; }
.ref-exs-chip[aria-pressed="true"] { color: var(--solid-fg); background: var(--solid-bg); border-color: var(--solid-bg); }
.ref-exs-chip[aria-pressed="true"] span { color: inherit; }
.ref-exs-count { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-3); }
.ref-exs-empty { display: grid; justify-items: start; gap: 12px; margin: 20px 0 0; padding: 16px; border: 1px dashed var(--rule-3); border-radius: var(--radius-code); }
.ref-exs-empty[hidden] { display: none; }
.ref-exs-empty p { margin: 0; color: var(--fg-2); }
/* "Clear filters": a small line button (Signal .btn--line.btn--sm) */
.ref-exs-more-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--radius); cursor: pointer; }
.ref-exs-more-btn:hover { background: var(--panel-2); border-color: var(--rule-3); }
@media (max-width: 700px) {
  /* a phone: one block per example: the title, then its values, each after its column's label
     (the header row is visually hidden there, reference.css) instead of three or four squeezed
     columns ("gene|ric", a title one letter per line); an empty cell is not shown; the page
     never scrolls sideways */
  .ref-exs .ref-exs-table, .ref-exs .ref-exs-table tbody, .ref-exs .ref-exs-table tr, .ref-exs .ref-exs-table td { display: block; }
  .ref-exs .ref-exs-table tr[hidden] { display: none; }
  .ref-exs .ref-exs-table tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .ref-exs .ref-exs-table td { padding: 0; border: 0; }
  .ref-exs .ref-exs-table td:first-child { width: auto; }
  .ref-exs .ref-exs-table td + td { display: inline-block; margin: 8px 24px 0 0; vertical-align: top; }
  .ref-exs .ref-exs-table td:empty { display: none; }
  /* the column's label above its values, so a cell with several values (one per line) keeps
     them in one column under it */
  .ref-exs .ref-exs-table td + td::before { content: attr(data-l); display: block; margin: 0 0 2px; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.3; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
}
@media (forced-colors: active) {
  .ref-exs-chip[aria-pressed="true"] { forced-color-adjust: none; outline: 2px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-exs-chip { transition: none; }
}