/* biome-ignore-all format: design 5.8 keeps one rule per line; the text is the design's, verbatim */
/* biome-ignore-all lint/complexity/noImportantStyles: [hidden] and the reduced-motion guard must win over every later rule (design 5.8) */
/* biome-ignore-all lint/style/noDescendingSpecificity: rules follow design 5.8's order, not specificity */
/* MuCRM stylesheet: design 5.8 verbatim, with the 5.8 edits of docs/combobox.md 5.2.11. Order: fonts, tokens, base,
   typography, layout, components, pages, preference queries. */

/* IBM Plex Sans, self-hosted: the six @font-face blocks of pac.bz site.css, verbatim */
/* latin-ext */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url(/assets/fonts/ibm-plex-sans-400-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	font-stretch: 100%;
	font-display: swap;
	src: url(/assets/fonts/ibm-plex-sans-400-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-stretch: 100%;
	font-display: swap;
	src: url(/assets/fonts/ibm-plex-sans-600-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 600;
	font-stretch: 100%;
	font-display: swap;
	src: url(/assets/fonts/ibm-plex-sans-600-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	font-display: swap;
	src: url(/assets/fonts/ibm-plex-sans-700-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 700;
	font-stretch: 100%;
	font-display: swap;
	src: url(/assets/fonts/ibm-plex-sans-700-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--font: 'IBM Plex Sans', system-ui, sans-serif;
	--pac-purple: #aca3d3;          /* pac.bz accent: borders, chips, skip link; 8.9:1 under black text, 2.3:1 on white, so never text on white */
	--pac-purple-dark: #554795;     /* pac.bz heading and link colour; 7.7:1 on white */
	--heading-text-color: var(--pac-purple-dark);
	--link-text-color: var(--pac-purple-dark);
	--text: #1a1a1a;
	--text-muted: #595959;          /* 7.0:1 on white */
	--bg: #fff;
	--bg-tint: #f3f1f9;             /* table stripes, notices, group labels */
	--border: #767676;              /* 4.5:1: control borders */
	--border-light: #d9d6e6;        /* table rules */
	--header-bg: #000;
	--header-text: #fff;
	--primary-bg: #000;             /* pac.bz .primary pill */
	--primary-text: #fff;
	--accent-text: #000;            /* text on --pac-purple */
	--error: #a4262c;               /* 7.3:1 on white */
	--focus: #1a1a1a;
	--focus-halo: #fff;
	--space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
	--content-max: 75em;            /* pac.bz header width */
	--measure: 70ch;
	--control-min: 2.75rem;         /* 44 px at 16 px */
	--radius: .2em;
}

[hidden] { display: none !important; }      /* so no later display rule can un-hide a hidden element */
html { font-family: var(--font); font-size: 100%; line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-4); box-sizing: border-box; overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--font); line-height: 1.3; margin: 1.5em 0 .5em; }   /* closer to what follows than to what precedes */
h1 { font-size: 1.75rem; font-weight: 700; color: var(--text); margin-top: .5em; }
h2 { font-size: 1.375rem; font-weight: 600; color: var(--heading-text-color); }
h3 { font-size: 1.125rem; font-weight: 600; color: var(--heading-text-color); }
p, li, dd { max-width: var(--measure); }
.lede { font-size: 1.125rem; margin-top: 0; }
.muted { color: var(--text-muted); }
main a { color: var(--link-text-color); text-decoration: underline 1px; text-underline-offset: 2px; }
main a:hover { text-decoration-thickness: 3px; }
.visually-hidden { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
/* anywhere, not break-word: only anywhere reduces min-content, which is what keeps a 43-character email or a 60-character organization name inside 288 px */
h1, .lede, .facts dd, .timeline > *, .notes p, .suggest-context, .error-summary a { overflow-wrap: anywhere; }

/* Focus: two rings so the indicator is visible on black, white, purple and photographs; no border-radius, the outline follows the element */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); }
.site-header :focus-visible { outline-color: var(--header-text); box-shadow: 0 0 0 6px var(--focus); }
.skip-link { position: absolute; z-index: 20; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { top: var(--space-2); left: var(--space-2); width: auto; height: auto; clip-path: none; white-space: normal; padding: .5em 1em; background: var(--pac-purple); color: var(--accent-text); border: 1px solid var(--header-text); }

/* Header: two rows at every width. From 56em: logo and search on row 1, nav on row 2 (eight nav items at 1.125rem do not fit beside a usable search field). Below 56em: logo and Menu on row 1, search on row 2, nav (when open) on row 3. */
.site-header { background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--header-text); padding: var(--space-4); }
.site-header__inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.site-brand { flex: none; display: flex; align-items: center; gap: var(--space-4); }   /* MuCRM's home link, then PAC's logo: one unit that never splits across rows */
.mucrm-logo { display: inline-block; color: var(--header-text); text-decoration: none; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }   /* the text wordmark until Sina's logo arrives (MUCRM_LOGO_READY in layout.tsx) */
.mucrm-logo:hover { text-decoration: underline 2px var(--pac-purple); text-underline-offset: .2em; }
.mucrm-logo img { display: block; height: 3.125rem; width: auto; }   /* the PAC logo's desktop height */
.pac-logo { flex: none; display: block; width: 6.375em; height: auto; }   /* pac.bz desktop size; scales with text; an image, not a link */
.menu-toggle { display: none; margin-left: auto; }        /* shown only when the script is ready and the width is narrow */
.site-search { flex: 1 1 24em; max-width: 40em; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.site-search label { font-weight: 600; }
.site-search__field { position: relative; flex: 1 1 14em; display: flex; gap: var(--space-2); }
.site-search input { flex: 1 1 8em; min-width: 0; min-height: var(--control-min); font: inherit; padding: 0 .6em; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.site-nav { flex-basis: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.site-nav a, .site-nav .linklike { display: inline-block; color: var(--header-text); text-decoration: none; padding: .5em .625em; font-size: 1.125rem; }
.site-nav a:hover, .site-nav .linklike:hover { text-decoration: underline 1px var(--pac-purple); text-underline-offset: .4em; }
.site-nav a[aria-current] { text-decoration: underline 2px var(--pac-purple); text-underline-offset: .4em; font-weight: 600; }
.linklike { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
@media (max-width: 55.99em) {
	.site-search { flex-basis: 100%; max-width: none; }
	.site-header__inner { column-gap: var(--space-3); }   /* with the three below, wordmark, PAC logo and Menu share row 1 at 320 px */
	.site-brand { gap: var(--space-2); }
	.mucrm-logo { font-size: 1.25rem; }
	.pac-logo { width: 4.6875em; }   /* pac.bz phone size */
	.menu-toggle[data-disclosure-ready] { display: inline-flex; align-items: center; gap: .4em; min-height: var(--control-min); font: inherit; color: var(--header-text); background: none; border: 1px solid var(--pac-purple); border-radius: 2em; padding: .5em 1em; }
	.menu-toggle:hover { background: var(--pac-purple); color: var(--accent-text); }
	.menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
	.site-nav[data-disclosure-ready][data-open="false"] { display: none; }
	.site-nav ul { flex-direction: column; }
}
.pac-triangle { width: 1em; height: 1em; fill: currentColor; margin-left: .4em; vertical-align: -.1em; }
.point-right .pac-triangle { transform: rotate(270deg); }

/* Combobox */
/* biome-ignore lint/suspicious/noDuplicateProperties: 60vh is the fallback where svh is unknown (docs/combobox.md 5.2.11) */
.site-search [role="listbox"] { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: var(--space-1); max-height: min(24rem, 60vh); max-height: min(24rem, 60svh); overflow-y: auto; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); text-align: left; }
.suggest-group { font-size: .875rem; font-weight: 600; color: var(--text-muted); background: var(--bg-tint); padding: .4em .75em; }
[role="option"] { padding: .55em .75em; min-height: var(--control-min); box-sizing: border-box; cursor: pointer; overflow-wrap: anywhere; }
[role="option"]:hover:not([aria-selected="true"]) { background: var(--bg-tint); }
[role="option"][aria-selected="true"] { background: var(--pac-purple-dark); color: var(--primary-text); outline: 2px solid currentColor; outline-offset: -4px; }
#q-listbox:not([data-stale]) [role="option"][data-sole] { border-inline-start: .25rem solid currentColor; }
.suggest-context { color: var(--text-muted); }
[role="option"][aria-selected="true"] .suggest-context { color: inherit; }

/* Multi-select (docs/multiselect.md): the chosen people as chips in the Selections listbox, then the input and its popup. In the popup aria-selected means chosen (a ticked box) and data-active marks the active option (filled), so the combobox's aria-selected fill is undone inside .multiselect. */
.multiselect { margin-bottom: var(--space-6); }
.multiselect__selections { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.multiselect__selections [role="option"], .multiselect__selections [role="option"][aria-selected="true"] { display: inline-flex; align-items: center; max-width: 100%; padding: .25em .9em; border: 1px solid var(--border); border-radius: 1.5em; background: var(--bg-tint); color: var(--text); outline: 0; }
.multiselect__selections [role="option"]:hover { background: var(--bg); }
.multiselect__selections [role="option"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-halo); }
.multiselect__field { position: relative; }
/* biome-ignore lint/suspicious/noDuplicateProperties: 50vh is the fallback where svh is unknown, as for the search listbox */
.multiselect__popup { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: var(--space-1); max-height: min(20rem, 50vh); max-height: min(20rem, 50svh); overflow-y: auto; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25); }
.multiselect__popup [role="option"], .multiselect__popup [role="option"][aria-selected="true"] { display: flex; align-items: center; gap: var(--space-3); background: var(--bg); color: var(--text); outline: 0; }
.multiselect__popup [role="option"]:hover { background: var(--bg-tint); }
.multiselect__popup [role="option"][data-active] { background: var(--pac-purple-dark); color: var(--primary-text); outline: 2px solid currentColor; outline-offset: -4px; }
.multiselect__check { flex: none; position: relative; width: 1.125em; height: 1.125em; box-sizing: border-box; border: 2px solid currentColor; border-radius: 2px; }
[aria-selected="true"] > .multiselect__check::after { content: ""; position: absolute; left: .3em; top: .05em; width: .3em; height: .6em; border: solid currentColor; border-width: 0 .15em .15em 0; transform: rotate(45deg); }
@media (forced-colors: active) {
	.multiselect__selections [role="option"], .multiselect__selections [role="option"][aria-selected="true"], .multiselect__popup [role="option"], .multiselect__popup [role="option"][aria-selected="true"] { forced-color-adjust: auto; background: Canvas; color: CanvasText; border-color: CanvasText; }
	.multiselect__popup [role="option"][data-active] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
	.multiselect__popup { border-color: CanvasText; }
}

/* Buttons: :where() keeps the generic rule at zero specificity so .button-primary (0,1,0) wins; without it button:not(.a):not(.b) at (0,2,1) would paint every primary button white */
button:where(:not(.linklike, .menu-toggle)), .button-primary { font: inherit; min-height: var(--control-min); padding: .5em 1.1em; border-radius: 2em; border: 1px solid var(--text); background: var(--bg); color: var(--text); cursor: pointer; }
.button-primary { background: var(--primary-bg); color: var(--primary-text); border-color: transparent; }
.button-primary:hover { background: var(--bg); color: var(--primary-bg); border-color: var(--primary-bg); }
.site-header .button-primary { border-color: var(--header-text); }                     /* a black pill on the black header needs its white ring */
.site-header .button-primary:hover { background: var(--header-text); color: var(--header-bg); }
a.button-primary { display: inline-block; text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-6); }
.record-actions { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* Tables */
.table-scroll { position: relative; overflow-x: auto; margin: var(--space-4) 0; }   /* relative: a visually hidden span in a cell is absolutely positioned and would escape the scroll clip and widen the page at 320 px */
.table-scroll:focus-visible { outline-offset: -2px; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: 600; padding: 0 0 var(--space-2); }
th, td { text-align: left; vertical-align: top; padding: .5em .75em; border-bottom: 1px solid var(--border-light); }
thead th { padding: 0; border-bottom: 2px solid var(--pac-purple); }
thead th > a, thead th > span { display: block; padding: .625em .75em; }                /* the whole header cell is the target, about 44 px */
tbody tr:nth-child(even) { background: var(--bg-tint); }
th[scope="row"] { min-width: 10em; }
th[aria-sort="ascending"] .sort-mark::before { content: " \25B2"; }
th[aria-sort="descending"] .sort-mark::before { content: " \25BC"; }

/* Forms */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-end; margin-bottom: var(--space-4); }
.filters h2 { flex-basis: 100%; margin: 0; }
.filters .field { flex: 1 1 12em; margin: 0; }
.filters .error-summary { flex-basis: 100%; box-sizing: border-box; margin-bottom: 0; }   /* a failed filter's summary takes its own row under the h2 */
.field { margin-bottom: var(--space-4); max-width: 36em; }
.field label, legend { display: block; font-weight: 600; margin-bottom: var(--space-1); }
legend { font-size: 1.125rem; color: var(--heading-text-color); padding: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); min-width: 0; }
.hint { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: .9375rem; }
.error { margin: 0 0 var(--space-1); color: var(--error); font-weight: 600; }
.field--error { border-left: 4px solid var(--error); padding-left: var(--space-3); }
input, select, textarea { font: inherit; width: 100%; max-width: 100%; box-sizing: border-box; min-height: var(--control-min); padding: .4em .6em; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); }
[aria-invalid="true"] { border: 2px solid var(--error); }
/* A date as Day, Month and Year spinners (src/web/date-fields.tsx): the legend reads as a field label, each sized for its digits. */
.date-fields { margin-bottom: var(--space-4); }
.date-fields > legend { font-size: inherit; color: inherit; }
.date-fields__parts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.date-fields__part label { display: block; font-weight: 400; margin-bottom: var(--space-1); }
.date-fields__day, .date-fields__month { width: 4.5em; }                                  /* room for two digits and the spin buttons */
.date-fields__year { width: 6em; }
.filters .date-fields { margin: 0; }                                                     /* a filter row aligns the boxes with the selects beside them */
.field--check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.field--check input { width: 1.25em; height: 1.25em; min-height: 0; margin: 0; accent-color: var(--pac-purple-dark); }
.field--check label { font-weight: 400; margin: 0; }
.error-summary { border: 3px solid var(--error); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-6); }
.error-summary h2, .error-summary h3 { margin-top: 0; color: var(--error); }
/* Form sections (src/web/form-sections.tsx; Sina, 2026-10-24: add forms start simple): a native details whose summary is the button that names the section; pac.bz's triangle points right while it is closed and down once open. */
.form-section { max-width: 36em; margin: 0; border-top: 1px solid var(--border-light); }
.form-section:last-of-type { border-bottom: 1px solid var(--border-light); }
.form-section > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-min); padding: var(--space-2) 0; font-size: 1.125rem; font-weight: 600; color: var(--heading-text-color); cursor: pointer; list-style: none; }
.form-section > summary::-webkit-details-marker { display: none; }
.form-section > summary:hover { text-decoration: underline 1px; text-underline-offset: .2em; }
.form-section > summary .pac-triangle { flex: none; margin: 0; transform: rotate(270deg); }
.form-section[open] > summary .pac-triangle { transform: none; }
.form-section__body { padding: var(--space-2) 0 var(--space-2); }

/* Notices, chips, timeline, notes, facts, paging, footer */
.notice { border-left: 4px solid var(--pac-purple); background: var(--bg-tint); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.notice[role="alert"] { border-color: var(--error); }
.notice h2 { margin-top: 0; }
.chip { display: inline-block; border: 1px solid var(--border); border-radius: 1em; padding: 0 .6em; font-size: .875rem; background: var(--bg-tint); white-space: nowrap; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > * { position: relative; border-left: 2px solid var(--pac-purple); padding: 0 0 var(--space-4) var(--space-4); }
.timeline > *::before { content: ""; position: absolute; left: -.45em; top: .45em; width: .75em; height: .75em; border-radius: 50%; background: var(--pac-purple-dark); }
.timeline time { font-weight: 600; }
.timeline .subject, .timeline .muted { display: block; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes > * { border-bottom: 1px solid var(--border-light); padding: var(--space-3) 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }   /* minmax(0, 1fr), not 1fr: 1fr's minimum is min-content and a long email would push the grid past the viewport */
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.facts dd + dd { grid-column: 2; }
@media (max-width: 29.99em) { .facts { grid-template-columns: minmax(0, 1fr); } .facts dd, .facts dd + dd { grid-column: 1; } }
.paging { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.paging p { margin: 0; }
.paging a { display: inline-block; padding: .5em .25em; }
.site-footer { background: var(--header-bg); color: var(--header-text); padding: var(--space-4); margin-top: var(--space-8); }
.site-footer p { max-width: var(--content-max); margin: 0 auto; }
.site-footer a { color: var(--header-text); }

@media (forced-colors: active) {
	.pac-logo { forced-color-adjust: none; background: #000; padding: .5em; border-radius: 4px; }   /* pac.bz: the white letters need their black ground; the one literal colour in the file, kept for the same reason pac.bz keeps it */
	:focus-visible, .site-header :focus-visible { box-shadow: none; outline: 3px solid Highlight; }
	[role="option"][aria-selected="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
	[role="option"]:hover:not([aria-selected="true"]) { background: Canvas; outline: 1px solid CanvasText; outline-offset: -1px; }
	.chip, .notice, .error-summary, .field--error, .timeline > *, .site-search [role="listbox"] { border-color: CanvasText; }
	.site-nav a[aria-current] { text-decoration-color: CanvasText; }
	tbody tr:nth-child(even) { background: Canvas; }
}
@media (forced-colors: active) and (max-width: 55.99em) { .pac-logo { padding: .25em; } }   /* a thinner black ground, so the Menu still fits on row 1 at 320 px */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* The /api page (design 6.7): examples and long paths wrap at 320 px instead of scrolling the page sideways. */
.api-doc pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg-tint); padding: var(--space-2); }
.api-doc code, .api-doc dt { overflow-wrap: anywhere; }

/* Telephone links (design 5.4) keep ASCII hyphens for speech and braille; this keeps the number on one line instead. */
.tel { white-space: nowrap; }