……
…link to the Developer guide…
— _devdocs.js applies the
syntax highlighting (.dd-c/.dd-t/.dd-a/.dd-s/.dd-k) on wire. data-dd-run on
the lists the css/js assets the live runner injects (paths relative
to preview/); it adds the play button + editor + sandbox iframe.
TYPE SCALE (keep to these five — no other sizes in a devdocs block):
10px mono caps section labels (.devdocs__h) + table headers
10.5px mono caps the toggle strip
11.5px mono code blocks + the runner editor
11px mono inline code chips — FIXED px, never em: chip parents
legitimately vary (12px strip notes · 13px guide lists ·
12.5px guide tables · 14.5px lede), an em drifts with
each one (Tomáš review, Jun 2026)
12px sans everything else (notes, tables)
Visibility: hidden by BOTH helper-text toggles — `.devdocs` is listed in
_inspector.js HELPER_HIDE_CSS and playground.html MODAL_HELPERS_CSS (kept
in lockstep). In the playground grid it is auto-hidden by the whitelist
filter (never give it data-playground); in the Preview modal it shows
collapsed until the "Hide helper text" toggle strips it.
============================================================================ */
@layer components {
.devdocs {
margin-top: 4px;
padding-top: 10px;
border-top: 1px dashed var(--color-border-default);
}
/* Body-level fallback — React-owned-card pages (comp-table, comp-quick-tile,
comp-num, comp-filter-pills, …) can't host the section inside their .card
(React owns the root / the card closes before it), so the strip sits as a
direct child and would span edge-to-edge, wider than the card
content. Match the .card insets (24px sides + bottom breathing room) so
every page aligns the same. */
body > .devdocs { margin: 4px 24px 20px; }
/* Syntax-highlight inks — component-token contract; gov scales re-value in
dark mode, so these flip without a dark override. Declared on EVERY root
that hosts rendered blocks: the spec-page strips (.devdocs) AND the
[data-dd-copy] surfaces (Developer guide article, reference modal) — a
.devdocs__code OUTSIDE .devdocs otherwise has no inks and its .dd-* spans
paint monochrome (the "snippets not highlighted" bug, Jun 2026). */
.devdocs, [data-dd-copy] {
--dd-ink-c: var(--color-fg-tertiary); /* comments */
--dd-ink-t: var(--gov-color-primary-600); /* tags / keywords */
--dd-ink-a: var(--color-fg-default); /* attribute names */
--dd-ink-s: var(--gov-color-success-700); /* strings */
--dd-ink-k: var(--gov-color-warning-700); /* tokens / {placeholders} / --props */
}
/* ── Toggle strip ──────────────────────────────────────────────────────── */
.devdocs__toggle {
all: unset;
cursor: pointer;
user-select: none; -webkit-user-select: none; /* controls never text-select */
box-sizing: border-box;
display: flex; align-items: center; gap: 7px;
width: 100%;
padding: 5px 8px; margin: 0 -8px; /* hit area beyond the text */
border-radius: 5px;
font: 500 10.5px/1.4 var(--font-mono);
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--color-fg-tertiary);
/* Base transition incl. the focus-ring exit; entry blooms below (system
focus-bloom recipe — see notes/decisions.md). */
transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 140ms ease-out;
}
.devdocs__toggle:hover { background: var(--gov-color-neutral-50); color: var(--color-fg-secondary); }
.devdocs__toggle:focus-visible {
box-shadow: var(--shadow-focus);
transition: background-color 100ms ease-out, color 100ms ease-out,
box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}
.devdocs__toggle .bi-code-slash { font-size: 12px; color: var(--gov-color-primary-500); }
.devdocs__hint { font-weight: 400; letter-spacing: 0.05em; opacity: 0.75; text-transform: none; }
.devdocs__chev {
margin-left: auto;
font-size: 11px;
transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
}
.devdocs.is-open .devdocs__chev { transform: rotate(180deg); }
/* ── Collapsible body — grid-rows collapse (CSS transition → governor-scaled,
reduced-motion collapsed by the global policy). visibility rides a
delayed transition so collapsed content is untabbable + out of the
a11y tree without JS bookkeeping. ─────────────────────────────────── */
.devdocs__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 280ms cubic-bezier(.16, 1, .3, 1);
}
.devdocs.is-open .devdocs__body { grid-template-rows: 1fr; }
.devdocs__inner {
min-height: 0; overflow: hidden;
/* 4px inset + compensating negative margin: focus rings / borders of
edge-touching children (textarea, preview stage) render inside the clip
instead of being cut (overflow clips at the padding box). */
padding: 4px; margin: -4px;
display: flex; flex-direction: column; gap: 22px;
visibility: hidden;
transition: visibility 0s 280ms;
}
.devdocs.is-open .devdocs__inner { visibility: visible; transition: visibility 0s; }
/* Breathing room only when open (keeps the collapsed strip tight). */
.devdocs__inner > :first-child { margin-top: 10px; }
/* ── Sections — label column + content column ──────────────────────────── */
.devdocs__sect {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: 4px 20px;
align-items: start;
}
.devdocs__h {
font: 600 10px/1.5 var(--font-mono);
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--color-fg-tertiary);
padding-top: 3px; /* optical align with 12px first text line */
text-wrap: balance;
}
.devdocs__c {
min-width: 0;
display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 640px) {
.devdocs__sect { grid-template-columns: 1fr; gap: 6px; }
.devdocs__h { padding-top: 0; }
}
/* .devdocs__note / .devdocs__foot are elements — their type rules live in
the UNLAYERED block at the end of this file (the unlayered semantic base
`p { font-size: var(--fs-body) }` in colors_and_type.css beats any layered
rule, so a layered 12px declaration silently loses → 16px notes). */
/* Closing pointer to the shared conventions (Developer guide). */
.devdocs__foot a { color: var(--gov-color-primary-600); text-decoration: none; }
.devdocs__foot a:hover { text-decoration: underline; }
/* Inline code — the system "code box" chip vocabulary (mono on a quiet well).
ONE scope list, used three times below and mirrored by COPY_SCOPE in
_devdocs.js — keep all four in lockstep:
.devdocs blocks · [data-dd-copy] roots (Developer guide article,
reference modal) · the helper/doc-text classes spec pages hand-write
(.annot .see-also .hint .insp-note .note .footnote .demo-bar .label).
Spec pages must NOT re-declare their own code-chip CSS (the old per-page
copies were deleted in the Jun 2026 unification — see notes/decisions.md).
Component CONTENT code (e.g. .req-card__rid) is deliberately out of scope. */
:is(.devdocs, [data-dd-copy], .annot, .see-also, .hint, .insp-note, .note, .footnote, .demo-bar, .label) code,
.devdocs__tbl code {
font: 500 11px/1.5 var(--font-mono);
color: var(--color-fg-secondary);
background: var(--gov-color-neutral-50);
border: 1px solid var(--color-border-default);
border-radius: 4px;
padding: 0.5px 4px;
white-space: nowrap;
}
/* ── Inline-code click-to-copy (wired by _devdocs.js) ─────────────────
Chips copy their text on click — cursor signals it; a short "copied"
bubble + success tint confirm. Same scope list as the chip rule above.
Snippet blocks (.devdocs__code) keep normal text cursor — they have
their own copy button. */
:is(.devdocs, [data-dd-copy], .annot, .see-also, .hint, .insp-note, .note, .footnote, .demo-bar, .label) code {
cursor: copy;
position: relative;
/* fade the copied tint back out when the class drops */
transition: background-color 360ms ease-out, border-color 360ms ease-out, color 360ms ease-out;
}
.devdocs__code code { cursor: text; }
:is(.devdocs, [data-dd-copy], .annot, .see-also, .hint, .insp-note, .note, .footnote, .demo-bar, .label) code.dd-copied {
background: var(--gov-color-success-50);
border-color: var(--gov-color-success-500);
color: var(--gov-color-success-700);
transition: none; /* tint applies instantly, fades on removal */
}
code.dd-copied::after {
content: 'copied';
position: absolute;
left: 50%; bottom: calc(100% + 5px);
transform: translateX(-50%);
font: 600 9px/1.4 var(--font-mono);
letter-spacing: 0.05em; text-transform: uppercase;
color: var(--gov-color-success-700);
background: var(--color-bg-surface, var(--gov-color-neutral-0));
border: 1px solid var(--gov-color-success-500);
border-radius: 4px;
padding: 1px 5px;
white-space: nowrap;
pointer-events: none;
z-index: 5;
/* fade in fast · hold · fade out before the class drops */
animation: dd-copy-bubble 1.4s ease-out forwards;
}
@keyframes dd-copy-bubble {
0% { opacity: 0; transform: translateX(-50%) translateY(2px); }
10% { opacity: 1; transform: translateX(-50%) translateY(0); }
70% { opacity: 1; }
100% { opacity: 0; transform: translateX(-50%) translateY(-3px); }
}
/* ── Note list (markdown `- ` items) ────────────────────────────── */
.devdocs__list {
margin: 0;
padding-left: 18px;
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; line-height: 1.6;
color: var(--color-fg-secondary);
}
.devdocs__list b, .devdocs__list strong { color: var(--color-fg-default); font-weight: 600; }
/* ── Code block (snippet) ──────────────────────────────────────────────── */
.devdocs__code {
position: relative;
margin: 0;
padding: 12px 14px;
background: var(--gov-color-neutral-50);
border: 1px solid var(--color-border-default);
border-radius: 6px;
font: 400 11.5px/1.7 var(--font-mono);
color: var(--color-fg-secondary);
overflow-x: auto;
tab-size: 2;
}
.devdocs__code code {
/* the block IS the well — neutralize the inline-code chip inside it */
background: none; border: 0; padding: 0; white-space: pre;
font: inherit; color: inherit;
}
/* Syntax-highlight tokens — applied by _devdocs.js (escaped-text tokenizer).
`.c` kept as a legacy alias for hand-authored comment spans. */
.devdocs__code .dd-c, .devdocs__code .c { color: var(--dd-ink-c); font-style: italic; }
.devdocs__code .dd-t { color: var(--dd-ink-t); font-weight: 500; }
.devdocs__code .dd-a { color: var(--dd-ink-a); }
.devdocs__code .dd-s { color: var(--dd-ink-s); }
.devdocs__code .dd-k { color: var(--dd-ink-k); font-weight: 500; }
/* ── Snippet action buttons (injected by _devdocs.js) ──────────────────── */
.devdocs__act {
all: unset;
cursor: pointer;
user-select: none; -webkit-user-select: none;
box-sizing: border-box;
position: absolute; top: 6px; right: 6px;
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
border-radius: 5px;
font-size: 12px;
color: var(--color-fg-tertiary);
background: var(--color-bg-surface, var(--gov-color-neutral-0));
border: 1px solid var(--color-border-default);
opacity: 0;
transition: opacity 120ms ease-out, color 100ms ease-out,
background-color 100ms ease-out, box-shadow 140ms ease-out;
}
.devdocs__act--play { right: 34px; } /* sits left of the copy button */
.devdocs__code:hover .devdocs__act,
.devdocs__act:focus-visible,
.devdocs__act[aria-pressed="true"] { opacity: 1; }
.devdocs__act:hover { color: var(--gov-color-primary-600); }
.devdocs__act:focus-visible {
box-shadow: var(--shadow-focus);
transition: opacity 120ms ease-out, color 100ms ease-out,
background-color 100ms ease-out, box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}
.devdocs__act.is-ok { color: var(--gov-color-success-700); opacity: 1; }
.devdocs__act[aria-pressed="true"] {
color: var(--gov-color-primary-600);
background: var(--gov-color-primary-50);
border-color: var(--gov-color-primary-200);
}
/* ── Live runner — editor + sandbox stage (injected by _devdocs.js) ─────
Single-column by default; with a configurator (.has-builder) the strip
sits LEFT of the editor and the run bar + preview span the full width. */
.devdocs__run { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.devdocs__run[hidden] { display: none; }
.devdocs__run.has-builder { grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); align-items: stretch; }
.devdocs__run.has-builder .devdocs__runbar,
.devdocs__run.has-builder .devdocs__stage { grid-column: 1 / -1; }
@media (max-width: 860px) {
.devdocs__run.has-builder { grid-template-columns: minmax(0, 1fr); }
}
/* Editor wrapper — carries the surface + clips the diff backdrop behind a
transparent-background textarea. In side-by-side mode the editor fills
the column height (matches the builder strip). */
.devdocs__edwrap {
position: relative;
background: var(--color-bg-surface, var(--gov-color-neutral-0));
border-radius: 6px;
min-width: 0;
}
.devdocs__run.has-builder .devdocs__edwrap { display: flex; }
/* min-height only — the builder strip dictates the FLOOR, while autoSize's
inline height (and the user's manual resize drag) can still grow the
editor taller. The old `height: auto !important` killed both: the native
resize handle writes an inline height, which !important beats. */
.devdocs__run.has-builder .devdocs__src { min-height: 100%; }
.devdocs__backdrop {
position: absolute; inset: 0;
padding: 10px 12px;
border: 1px solid transparent; /* mirror the textarea's metrics */
border-radius: 6px;
font: 400 11.5px/1.7 var(--font-mono);
tab-size: 2;
white-space: pre-wrap;
overflow-wrap: break-word;
overflow: hidden;
color: transparent;
pointer-events: none;
}
/* Change flash — builder edits mark the swapped lines; flashes, then fades.
(CSS animation → reduced-motion policy + playback governor apply free.) */
.devdocs__backdrop mark {
color: transparent;
border-radius: 3px;
background: transparent;
padding: 1px;
margin: -1px; /* a one-character change still reads */
animation: dd-flash 1.4s ease-out forwards;
}
@keyframes dd-flash {
0% { background: color-mix(in srgb, var(--gov-color-primary-500) 28%, transparent); }
100% { background: transparent; }
}
.devdocs__src {
position: relative; z-index: 1;
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
min-height: 72px;
resize: vertical;
padding: 10px 12px;
background: transparent; /* the wrapper paints the surface */
color: var(--color-fg-default);
border: 1px solid var(--color-border-default);
border-radius: 6px;
font: 400 11.5px/1.7 var(--font-mono);
tab-size: 2;
transition: box-shadow 140ms ease-out, border-color 100ms ease-out;
}
.devdocs__src:focus-visible {
outline: none;
border-color: var(--gov-color-primary-400);
box-shadow: var(--shadow-focus);
transition: box-shadow 220ms cubic-bezier(.16, 1, .3, 1), border-color 100ms ease-out;
}
.devdocs__runbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.devdocs__btn {
all: unset;
cursor: pointer;
user-select: none; -webkit-user-select: none;
box-sizing: border-box;
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 11px;
border-radius: 5px;
font: 500 11px/1.5 var(--font-sans);
letter-spacing: 0.02em;
color: var(--gov-color-primary-600);
border: 1px solid var(--gov-color-primary-200);
background: transparent;
transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 140ms ease-out;
}
.devdocs__btn:hover { background: var(--gov-color-primary-50); }
.devdocs__btn:focus-visible {
box-shadow: var(--shadow-focus);
transition: background-color 100ms ease-out, color 100ms ease-out,
box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}
.devdocs__btn .bi { font-size: 11px; }
.devdocs__btn--quiet { color: var(--color-fg-secondary); border-color: var(--color-border-default); }
.devdocs__btn--quiet:hover { background: var(--gov-color-neutral-50); }
/* Animation-trigger group (Collection run-fences) — sits right after Run, set
off by a hairline separator; the buttons are filled-light so they read as a
live "replay" action distinct from the outline Run/Reset cluster. */
.devdocs__animgrp {
display: inline-flex; align-items: center; gap: 6px;
padding-left: 9px; margin-left: 1px;
border-left: 1px solid var(--color-border-default);
}
.devdocs__animgrp[hidden] { display: none; }
.devdocs__btn--anim {
color: var(--gov-color-primary-700);
border-color: var(--gov-color-primary-200);
background: var(--gov-color-primary-50);
}
.devdocs__btn--anim:hover { background: var(--gov-color-primary-100); }
.devdocs__btn--anim .bi { font-size: 12px; }
.devdocs__runhint {
font-size: 11px;
color: var(--color-fg-tertiary);
display: inline-flex; align-items: center; gap: 4px;
}
/* Preview width limiter (responsivity testing) — right-aligned group. */
.devdocs__wlim {
margin-left: auto;
display: inline-flex; align-items: center; gap: 8px;
color: var(--color-fg-tertiary);
font-size: 11px;
}
.devdocs__wlim input[type="range"] {
width: 130px;
accent-color: var(--gov-color-primary-500);
margin: 0;
}
/* Double-buffered preview stage — owns border/radius/height; two stacked
iframes crossfade so a re-run never blanks or collapses. */
.devdocs__stage {
position: relative;
box-sizing: border-box;
width: 100%;
height: 120px; /* JS re-measures after each run */
overflow: hidden;
border: 1px solid var(--color-border-default);
border-radius: 6px;
background: var(--color-bg-surface, var(--gov-color-neutral-0));
transition: height 220ms ease-out;
}
/* Popup growth snaps (no height animation) — an animating viewport races the
combo's deferred scroll rescue and pans the content out of view; toggled
around the height write by _devdocs.js (__ddNeed). Settling back eases. */
.devdocs__stage.is-snap { transition: none; }
.devdocs__stage iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
background: transparent;
opacity: 0;
/* The hidden buffer must never eat clicks — opacity:0 is still hit-testable. */
pointer-events: none;
z-index: 0;
transition: opacity 160ms ease-out;
}
.devdocs__stage iframe.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
/* ── Snippet builder — knob controls above the editor ──────────────────── */
.devdocs__builder {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 8px 14px;
align-items: center;
align-content: start; /* don't spread rows when column-stretched */
padding: 12px 14px;
background: var(--gov-color-neutral-50);
border: 1px solid var(--color-border-default);
border-radius: 6px;
}
.devdocs__brow { display: contents; }
.devdocs__bcap {
font: 500 10px/1.5 var(--font-mono);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--color-fg-tertiary);
white-space: nowrap;
justify-self: end; /* labels align TO the controls */
text-align: right;
}
@media (max-width: 560px) {
.devdocs__builder { grid-template-columns: 1fr; gap: 4px; }
.devdocs__brow { display: block; }
.devdocs__brow + .devdocs__brow { margin-top: 8px; }
/* justify-self applies to BLOCK children in modern Chrome — reset it or
the label keeps hugging the right edge in stacked mode. */
.devdocs__bcap { justify-self: auto; text-align: left; }
}
/* In the side-by-side runner the builder is a narrow column — stack each
label ABOVE its control instead of the two-column label grid. */
.devdocs__run.has-builder .devdocs__builder { grid-template-columns: minmax(0, 1fr); gap: 3px; }
.devdocs__run.has-builder .devdocs__brow { display: block; }
.devdocs__run.has-builder .devdocs__brow + .devdocs__brow { margin-top: 11px; }
.devdocs__run.has-builder .devdocs__bcap { display: block; justify-self: auto; text-align: left; margin-bottom: 4px; }
.devdocs__run.has-builder .devdocs__bsel { width: 100%; max-width: none; }
.devdocs__run.has-builder .devdocs__brange { display: flex; width: 100%; }
.devdocs__run.has-builder .devdocs__brange input[type="range"] { flex: 1 1 auto; min-width: 0; }
/* segmented (radio ≤4 options) */
.devdocs__bseg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.devdocs__bseg button {
all: unset;
cursor: pointer;
user-select: none; -webkit-user-select: none;
box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
white-space: nowrap;
font: 500 11px/1 var(--font-sans);
padding: 0 10px;
height: 26px;
border-radius: 4px;
border: 1px solid var(--color-border-default);
color: var(--color-fg-secondary);
background: var(--color-bg-surface, var(--gov-color-neutral-0));
transition: background-color 100ms ease-out, color 100ms ease-out,
border-color 100ms ease-out, box-shadow 140ms ease-out;
}
.devdocs__bseg button:hover { background: var(--gov-color-neutral-50); color: var(--color-fg-default); }
.devdocs__bseg button[aria-pressed="true"] {
background: var(--gov-color-primary-50);
border-color: var(--gov-color-primary-200);
color: var(--gov-color-primary-700);
}
.devdocs__bseg button:focus-visible {
box-shadow: var(--shadow-focus);
transition: background-color 100ms ease-out, color 100ms ease-out,
border-color 100ms ease-out, box-shadow 220ms cubic-bezier(.16, 1, .3, 1);
}
/* select + text input */
.devdocs__bsel, .devdocs__btext {
box-sizing: border-box;
font: 400 12px/1.5 var(--font-sans);
color: var(--color-fg-default);
background: var(--color-bg-surface, var(--gov-color-neutral-0));
border: 1px solid var(--color-border-default);
border-radius: 4px;
height: 28px;
padding: 0 8px;
max-width: 260px;
transition: box-shadow 140ms ease-out, border-color 100ms ease-out;
}
.devdocs__btext { width: 100%; font-family: var(--font-mono); font-size: 11px; }
.devdocs__bsel:focus-visible, .devdocs__btext:focus-visible {
outline: none;
border-color: var(--gov-color-primary-400);
box-shadow: var(--shadow-focus);
transition: box-shadow 220ms cubic-bezier(.16, 1, .3, 1), border-color 100ms ease-out;
}
/* slider */
.devdocs__brange { display: inline-flex; align-items: center; gap: 10px; }
.devdocs__brange input[type="range"] {
flex: 0 1 200px;
accent-color: var(--gov-color-primary-500);
margin: 0;
}
.devdocs__bval {
font: 500 10.5px/1.5 var(--font-mono);
color: var(--color-fg-secondary);
min-width: 6ch;
white-space: nowrap;
}
/* ── Reference table (tokens / API / modifiers) ────────────────────────── */
.devdocs__tbl {
border-collapse: collapse;
width: 100%;
font-size: 12px; line-height: 1.55;
color: var(--color-fg-secondary);
}
.devdocs__tbl th {
text-align: left;
font: 600 10px/1.5 var(--font-mono);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--color-fg-tertiary);
padding: 0 16px 6px 0;
border-bottom: 1px solid var(--color-border-default);
}
.devdocs__tbl td {
padding: 6px 16px 6px 0;
border-bottom: 1px solid var(--gov-color-neutral-100);
vertical-align: top;
}
.devdocs__tbl tr:last-child td { border-bottom: 0; }
/* Row hover highlight — global across the dev guide / reference tables. */
.devdocs__tbl tbody tr:hover td { background: var(--gov-color-neutral-50); }
.devdocs__tbl td:first-child { white-space: nowrap; }
.devdocs__tbl td:last-child, .devdocs__tbl th:last-child { padding-right: 0; }
} /* end @layer components — devdocs */
/* ── UNLAYERED — must beat the unlayered semantic base styles ─────────────
colors_and_type.css declares `p { font-size: var(--fs-body); … }` OUTSIDE
any layer; unlayered beats every layered rule regardless of specificity
(known pitfall — see notes/pitfalls.md "CSS layers"). These two classes
are
elements, so their type contract sits unlayered too (same escape
hatch as .metabox--comfort). Keep this block minimal. */
.devdocs__note {
margin: 0;
font-size: 12px; line-height: 1.6;
color: var(--color-fg-secondary);
text-wrap: pretty;
}
.devdocs__note b, .devdocs__note strong { color: var(--color-fg-default); font-weight: 600; }
.devdocs__foot {
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--gov-color-neutral-100);
font-size: 12px; line-height: 1.6;
color: var(--color-fg-tertiary);
}
/* Inline-code chip + snippet-code FONT-SIZE — unlayered for the same reason:
the semantic `code { font-size: 0.95em }` in colors_and_type.css is
unlayered and beats ANY layered size — chips drifted with their parent's
size (11–14px page-to-page) and block code shrank to 0.95 × the pre's
11.5px (`font: inherit` lost). Chips are a FIXED 11px (never em — chip
parents legitimately range 12–14.5px); blocks inherit the pre's 11.5px.
Scope mirrors the layered chip rule above + COPY_SCOPE in _devdocs.js —
keep all in lockstep. */
:is(.devdocs, [data-dd-copy], .annot, .see-also, .hint, .insp-note, .note, .footnote, .demo-bar, .label) code,
.devdocs__tbl code { font-size: 11px; }
.devdocs__code code { font-size: inherit; }