AND writes pixel widths
inline onto every | / | (e.g. style="width: 130px"). With width:100%
on the table the browser stretches those pixel widths by ratio — so a
130px / 260px split renders as 33% / 67% on desktop and ~35% / 65% on
mobile. The author's editor-time guess gets baked into every viewport,
regardless of viewport, regardless of label length.
Two real problems this caused:
- Short labels ("Payment No") wasted 33% of the table on desktop.
- Short labels CROPPED on mobile when the resized width fell below the
label's natural width (e.g. "Vendor Name" forced to two lines).
Fix: switch resized tables to table-layout:auto so columns size from
their content, neutralise the inline widths, and give the first column
a sensible min/max band so it doesn't waste space or crush. */
.aud-prose figure.wysiwyg-table table.wysiwyg-table-resized {
table-layout: auto !important;
}
.aud-prose figure.wysiwyg-table table.wysiwyg-table-resized th[style*="width"],
.aud-prose figure.wysiwyg-table table.wysiwyg-table-resized td[style*="width"],
.aud-prose figure.wysiwyg-table table.wysiwyg-table-resized th[width],
.aud-prose figure.wysiwyg-table table.wysiwyg-table-resized td[width] {
width: auto !important;
}
.aud-prose figure.wysiwyg-table table.wysiwyg-table-resized th:first-child,
.aud-prose figure.wysiwyg-table table.wysiwyg-table-resized td:first-child {
min-width: 140px;
max-width: 240px;
}
/* When an author resizes an image in the editor, Zendesk wraps it in
.
The figure has a percentage width (e.g., 65%) but no auto margin, so
it sits left-anchored in the column instead of centered. This makes
the image appear "left-aligned" even when the author intended center.
We center the figure with auto margins. The base .aud-prose figure
rule sets width: 100%, but figures with inline width: NN% will keep
the inline value (inline beats class) and just use the auto margins. */
.aud-prose figure.wysiwyg-image,
.aud-prose figure.wysiwyg-image-resized {
margin-left: auto !important;
margin-right: auto !important;
}
.aud-prose div[data-layout] > div {
display: block;
width: 100%;
}
/* Zendesk WYSIWYG editor uses these classes when authors set alignment.
Honor them so author intent (center, right) survives in the rendered
article. The !important is needed because these paragraphs sometimes
live inside Zendesk's wrappers which can constrain
the paragraph's effective width and prevent text-align from working. */
.aud-prose .wysiwyg-text-align-center {
text-align: center !important;
display: block;
width: 100%;
}
.aud-prose .wysiwyg-text-align-right {
text-align: right !important;
display: block;
width: 100%;
}
.aud-prose .wysiwyg-text-align-left {
text-align: left !important;
display: block;
width: 100%;
}
/* Spacing for figures, images, captions is handled by the unified rhythm
block earlier in this file (search "UNIFIED RHYTHM"). Don't add
margin/padding rules for those elements here — keep all spacing in one
place to avoid regressing back to the v5.8 inconsistency. */
/* ----------------------------------------------------------------------------
Article body tables — TRADITIONAL bordered style (v5.9.4).
Every cell has a visible 1px border on all four sides. Outer table border
and header divider are slightly stronger to bracket the table cleanly.
Header keeps a subtle background tint so the title row reads as a
different rank from data cells.
Color hierarchy:
- var(--aud-color-rule) #e5e7eb — light gray, body cell borders
- var(--aud-color-rule-strong) #cdd2d8 — medium gray, outer + header
The Zendesk WYSIWYG editor often injects inline border="1" or
style="border:..." on author-created tables. Inline attributes always beat
CSS class selectors regardless of source order, which is why the rules
below use !important — it's the only mechanism that overrides inline
styles. Removing !important here will cause editor-injected styles to
leak through.
---------------------------------------------------------------------------- */
.aud-prose table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: var(--aud-fs-3);
border: 1px solid var(--aud-color-rule-strong) !important;
/* No margin here — outer rhythm comes from the parent
(figure / data-layout / .aud-prose > table from Rule 1). */
}
.aud-prose table[border] { border: 1px solid var(--aud-color-rule-strong) !important; }
.aud-prose table th,
.aud-prose table td {
text-align: left;
padding: 10px 14px;
border: 1px solid var(--aud-color-rule) !important;
vertical-align: top;
line-height: 1.5;
}
.aud-prose table thead th,
.aud-prose table tr:first-child > th {
font-weight: 600;
color: var(--aud-color-text);
background: var(--aud-color-bg-alt) !important;
border: 1px solid var(--aud-color-rule-strong) !important;
/* No font-size override — inherit the table's 15px so headers are not
visually smaller than body cells. */
letter-spacing: 0.01em;
}
/* Perimeter reinforcement (v5.9.5).
With border-collapse: collapse, when a cell's border meets the table's
outer border at the same 1px / solid spec, browsers fall back to color
conflict resolution — and cells generally win over tables. That made the
table's outer edge render at the lighter cell color (#e5e7eb) instead of
the stronger outer color (#cdd2d8), so the bottom edge looked thinner /
weaker than the row dividers. Forcing the outermost cells' edge color to
the stronger gray makes the resolution come out the way we want. */
.aud-prose table tr:first-child > th,
.aud-prose table tr:first-child > td {
border-top-color: var(--aud-color-rule-strong) !important;
}
.aud-prose table tr:last-child > td,
.aud-prose table tr:last-child > th {
border-bottom-color: var(--aud-color-rule-strong) !important;
}
.aud-prose table tr > td:first-child,
.aud-prose table tr > th:first-child {
border-left-color: var(--aud-color-rule-strong) !important;
}
.aud-prose table tr > td:last-child,
.aud-prose table tr > th:last-child {
border-right-color: var(--aud-color-rule-strong) !important;
}
/* Hide truly-empty tables that the WYSIWYG editor sometimes leaves behind.
With v5.9.4's border style, an empty renders as a stray bordered
rectangle. JS cleanup in script.js handles tables with empty rows; this
covers the literal :empty case synchronously with no flash. */
.aud-prose table:empty {
display: none;
}
/* Lists inside cells should hug their cell, not float far below. */
.aud-prose table td ul,
.aud-prose table td ol {
margin: 4px 0 0;
padding-left: 18px;
}
.aud-prose table td li {
margin-bottom: 2px;
line-height: 1.45;
}
/* ----------------------------------------------------------------------------
Paragraphs inside table cells inherit the article's default margins
(~16px top + 16px bottom), which collapse to a 16px gap between sibling
paragraphs. Inside one cell that gap reads as two unrelated answers
rather than one continuous explanation (e.g. the Status row in the
Payments fields article had "Current state of the payment." floating
16px above "Possible values include:"). Tighten to 6px so multi-paragraph
cells read as one block. */
.aud-prose table td p,
.aud-prose table th p {
margin: 0;
}
.aud-prose table td p + p,
.aud-prose table th p + p {
margin-top: 6px;
}
.aud-prose table td p + ul,
.aud-prose table td p + ol {
margin-top: 4px;
}
/* Table caption pattern: a paragraph immediately preceding a table acts
as the table's label (e.g., "Table 2. Common Payments Filter Fields").
See the UNIFIED RHYTHM block earlier in this file for caption / figure /
table spacing — kept in one place to avoid the v5.8 inconsistency where
different patterns produced different gaps. */
.aud-prose .table-caption {
font-size: var(--aud-fs-2);
color: var(--aud-color-text-subtle);
text-align: right;
font-style: italic;
margin-top: var(--aud-space-1);
}
/* Callouts — toned-down colored variants */
.aud-prose blockquote {
margin: var(--aud-space-4) 0;
padding: var(--aud-space-3) var(--aud-space-4);
border-left: 2px solid var(--aud-color-note-bar);
background: var(--aud-color-note-bg);
color: var(--aud-color-text);
}
.aud-prose blockquote p { margin-bottom: 0; line-height: var(--aud-lh-prose); }
.aud-prose blockquote.aud-callout--tip {
border-left-color: var(--aud-color-tip-bar);
background: var(--aud-color-tip-bg);
}
.aud-prose blockquote.aud-callout--important {
border-left-color: var(--aud-color-important-bar);
background: var(--aud-color-important-bg);
}
.aud-prose blockquote.aud-callout--warning {
border-left-color: var(--aud-color-important-bar);
background: var(--aud-color-important-bg);
}
.aud-prose blockquote em strong:first-child,
.aud-prose blockquote strong:first-child {
font-style: normal;
color: var(--aud-color-text);
font-weight: 600;
}
/* Inline code & pre inside prose */
.aud-prose code { font-size: 0.9em; }
/* Anchor links on headings */
.aud-anchor {
margin-left: var(--aud-space-2);
color: var(--aud-color-text-subtle);
opacity: 0;
transition: opacity 120ms;
font-weight: 400;
text-decoration: none;
font-size: 0.85em;
}
.aud-prose h2:hover .aud-anchor,
.aud-prose h3:hover .aud-anchor,
.aud-prose h4:hover .aud-anchor { opacity: 1; }
/* Code-block copy button */
.aud-code-wrap { position: relative; }
.aud-code-copy {
position: absolute;
top: 6px;
right: 6px;
background: #fff;
border: 1px solid var(--aud-color-rule);
padding: 2px 8px;
font-size: var(--aud-fs-1);
color: var(--aud-color-text-muted);
cursor: pointer;
border-radius: var(--aud-radius-sm);
}
.aud-code-copy:hover { color: var(--aud-color-link); border-color: var(--aud-color-link); }
/* Was this topic helpful — bottom-of-article trigger button */
.aud-feedback-trigger {
margin-top: var(--aud-space-7);
padding-top: var(--aud-space-5);
border-top: 1px solid var(--aud-color-rule);
text-align: center;
}
.aud-feedback-trigger__btn {
background: none;
border: none;
padding: var(--aud-space-2) var(--aud-space-3);
display: inline-flex;
align-items: center;
gap: var(--aud-space-2);
font-size: var(--aud-fs-3);
font-weight: 600;
color: var(--aud-color-text);
cursor: pointer;
}
.aud-feedback-trigger__btn:hover { color: var(--aud-color-link); }
.aud-feedback-trigger__btn svg { color: var(--aud-color-text-subtle); }
/* Feedback modal */
.aud-feedback-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--aud-space-4);
}
.aud-feedback-modal[hidden] { display: none; }
.aud-feedback-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
}
.aud-feedback-modal__panel {
position: relative;
background: #fff;
border-radius: var(--aud-radius-md);
width: 100%;
max-width: 540px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
max-height: 90vh;
}
.aud-feedback-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--aud-space-4) var(--aud-space-5) var(--aud-space-3);
border-bottom: none;
}
.aud-feedback-modal__title {
margin: 0;
font-size: var(--aud-fs-6);
font-weight: 600;
}
.aud-feedback-modal__close {
background: none;
border: none;
color: var(--aud-color-text-subtle);
cursor: pointer;
padding: 4px;
border-radius: var(--aud-radius-sm);
}
.aud-feedback-modal__close:hover { color: var(--aud-color-text); background: var(--aud-color-bg-alt); }
.aud-feedback-modal__body {
padding: 0 var(--aud-space-5) var(--aud-space-4);
overflow-y: auto;
}
.aud-feedback-modal__rate-label,
.aud-feedback-modal__review-label {
display: block;
font-size: var(--aud-fs-3);
font-weight: 600;
margin-bottom: var(--aud-space-2);
color: var(--aud-color-text);
}
.aud-feedback-modal__review-label {
margin-top: var(--aud-space-5);
}
.aud-feedback-modal__buttons {
display: inline-flex;
border: 1px solid var(--aud-color-rule-strong);
border-radius: 24px;
overflow: hidden;
margin-bottom: 4px;
}
.aud-feedback-vote {
background: #fff;
border: none;
padding: 8px var(--aud-space-4);
font-size: var(--aud-fs-3);
font-weight: 600;
color: var(--aud-color-text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.aud-feedback-vote + .aud-feedback-vote { border-left: 1px solid var(--aud-color-rule-strong); }
.aud-feedback-vote svg { color: var(--aud-color-text-subtle); }
.aud-feedback-vote:hover { background: var(--aud-color-bg-alt); }
.aud-feedback-vote.is-selected {
background: var(--aud-color-topbar-utility-bg);
color: #fff;
}
.aud-feedback-vote.is-selected svg { color: #fff; }
.aud-feedback-modal__rated {
margin: 4px 0 0;
font-size: var(--aud-fs-2);
color: var(--aud-color-text-subtle);
}
.aud-feedback-modal__textarea {
width: 100%;
min-height: 100px;
padding: var(--aud-space-3);
border: 1px solid var(--aud-color-rule-strong);
border-radius: var(--aud-radius-md);
font-family: inherit;
font-size: var(--aud-fs-3);
resize: vertical;
}
.aud-feedback-modal__textarea:focus {
outline: 2px solid var(--aud-color-link);
outline-offset: 1px;
border-color: transparent;
}
/* Optional email field shown to anonymous users below the textarea. */
.aud-feedback-modal__email-label {
display: block;
margin: var(--aud-space-3) 0 var(--aud-space-2);
font-weight: 600;
font-size: var(--aud-fs-3);
}
.aud-feedback-modal__email-label[hidden] { display: none; }
.aud-feedback-modal__email-hint {
margin-left: 6px;
font-weight: 400;
color: var(--aud-color-text-muted);
font-size: var(--aud-fs-2);
}
.aud-feedback-modal__email {
width: 100%;
padding: var(--aud-space-3);
border: 1px solid var(--aud-color-rule-strong);
border-radius: var(--aud-radius-md);
font-family: inherit;
font-size: var(--aud-fs-3);
box-sizing: border-box;
}
.aud-feedback-modal__email:focus {
outline: 2px solid var(--aud-color-link);
outline-offset: 1px;
border-color: transparent;
}
.aud-feedback-modal__email[hidden] { display: none; }
.aud-feedback-modal__success,
.aud-feedback-modal__error {
margin: var(--aud-space-3) 0 0;
font-size: var(--aud-fs-3);
}
.aud-feedback-modal__success { color: #2d7a3d; }
.aud-feedback-modal__error { color: #c0392b; }
.aud-feedback-modal__footer {
display: flex;
justify-content: flex-end;
gap: var(--aud-space-2);
padding: var(--aud-space-3) var(--aud-space-5) var(--aud-space-4);
border-top: 1px solid var(--aud-color-rule);
}
.aud-feedback-modal__footer .aud-btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ----------------------------------------------------------------------------
Category & Section pages — flat list
---------------------------------------------------------------------------- */
.aud-cat-header {
margin-bottom: var(--aud-space-5);
padding-bottom: var(--aud-space-4);
border-bottom: 1px solid var(--aud-color-rule);
}
.aud-cat-header h1 {
font-size: 28px;
margin: 0 0 var(--aud-space-2);
}
.aud-cat-header p {
color: var(--aud-color-text-muted);
font-size: var(--aud-fs-4);
margin: 0;
max-width: 700px;
}
.aud-sec-list {
list-style: none;
padding: 0;
margin: 0;
}
.aud-sec-list li { margin: 0; }
.aud-sec-row {
padding: var(--aud-space-4) 0;
border-bottom: 1px solid var(--aud-color-rule);
}
.aud-sec-row__title {
font-size: var(--aud-fs-6);
font-weight: 600;
margin: 0 0 4px;
}
.aud-sec-row__title a { color: var(--aud-color-link); }
.aud-sec-row__meta {
font-size: var(--aud-fs-2);
color: var(--aud-color-text-subtle);
display: flex;
gap: var(--aud-space-3);
flex-wrap: wrap;
}
.aud-sec-row__desc {
margin: 4px 0 0;
color: var(--aud-color-text-muted);
font-size: var(--aud-fs-3);
max-width: 700px;
}
.aud-article-row {
padding: var(--aud-space-3) 0;
border-bottom: 1px solid var(--aud-color-rule);
}
.aud-article-row__title {
font-size: var(--aud-fs-5);
font-weight: 500;
margin: 0 0 2px;
}
.aud-article-row__title a { color: var(--aud-color-link); }
.aud-article-row__meta {
font-size: var(--aud-fs-2);
color: var(--aud-color-text-subtle);
}
/* ----------------------------------------------------------------------------
Search results
---------------------------------------------------------------------------- */
.aud-search-page {
max-width: var(--aud-content-max);
margin: 0 auto;
padding: var(--aud-space-5) var(--aud-space-5) var(--aud-space-8);
display: grid;
grid-template-columns: var(--aud-rail-w) 1fr;
gap: var(--aud-space-7);
}
.aud-search-page__main { min-width: 0; }
.aud-search-page__refine {
border-right: 1px solid var(--aud-color-rule);
padding-right: var(--aud-space-5);
font-size: var(--aud-fs-3);
}
/* Refine sidebar styles consolidated below in the v5.9.14 design refresh
block — using single-class selectors so they don't lose to descendant
selectors elsewhere in the cascade. */
/* Search page header */
.aud-search-page__header {
margin-bottom: var(--aud-space-5);
padding-bottom: var(--aud-space-4);
border-bottom: 1px solid var(--aud-color-rule);
}
.aud-search-page__title {
font-size: var(--aud-fs-7);
margin: 0 0 var(--aud-space-2);
}
.aud-search-page__meta {
color: var(--aud-color-text-muted);
margin: 0;
font-size: var(--aud-fs-3);
}
.aud-search-page__query {
color: var(--aud-color-text);
}
/* ============================================================================
Search page — v5.9.14 design refresh
Goals:
• Promote the search input into the page itself (was only top-right,
too small for a refine action)
• Result cards instead of plain text rows — clearer scan affordance,
hover lift, "Read article →" cue
• Refine sidebar: cleaner spacing, count chip on the right, active
state via filled pill
• Quick Overview block: more visual weight, clearer hierarchy
• Pagination: styled buttons instead of raw text links
============================================================================ */
/* --- Results column: card layout ----------------------------------------- */
.aud-results {
list-style: none;
margin: 0;
padding: 0;
}
.aud-result {
margin: 0 0 var(--aud-space-3);
padding: 0;
border: 1px solid var(--aud-color-rule);
border-radius: var(--aud-radius-md);
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.aud-result:hover {
border-color: var(--aud-color-link);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transform: translateY(-1px);
}
.aud-result__link {
display: block;
padding: var(--aud-space-4) var(--aud-space-5);
color: inherit;
text-decoration: none;
position: relative;
}
.aud-result__link:hover,
.aud-result__link:focus-visible {
text-decoration: none;
outline: none;
}
.aud-result__link:focus-visible {
box-shadow: inset 0 0 0 2px var(--aud-color-link);
border-radius: var(--aud-radius-md);
}
.aud-result__title {
font-size: var(--aud-fs-5);
font-weight: 600;
margin: 0 0 var(--aud-space-2);
color: var(--aud-color-link);
line-height: 1.35;
}
.aud-result__link:hover .aud-result__title {
text-decoration: underline;
}
.aud-result__text {
margin: 0;
color: var(--aud-color-text-muted);
font-size: var(--aud-fs-3);
line-height: var(--aud-lh-prose);
/* Cap snippet at 2 lines to keep result cards consistent height —
long snippets pushed result count below the fold. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aud-result__cta {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: var(--aud-space-3);
font-size: var(--aud-fs-2);
font-weight: 500;
color: var(--aud-color-link);
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.aud-result__link:hover .aud-result__cta,
.aud-result__link:focus-visible .aud-result__cta {
opacity: 1;
transform: translateX(0);
}
/* Search-term highlight (client-side wrapping). The default
yellow background is too loud on a documentation surface — use a soft
tint of the brand link color so highlights feel like UI affordance, not
construction tape. */
.aud-result__highlight {
background: rgba(0, 102, 214, 0.12);
color: inherit;
padding: 0 1px;
border-radius: 2px;
font-style: normal; /* Override Zendesk's default italic on matches */
}
/* --- Featured excerpt block (v5.9.16) ----------------------------------
Sits ABOVE the Quick Overview. Reads the first paragraph from the top
result's actual article body (via Zendesk API). Deterministic content
— no AI, no synthesis, just a verbatim excerpt grounded in a single
named article so users get immediate context. Design weight is higher
than the Quick Overview because this is the most useful element on
the page for understanding what the docs actually say about the term.
*/
.aud-search-featured {
margin: var(--aud-space-2) 0 var(--aud-space-3);
padding: var(--aud-space-5) var(--aud-space-5) var(--aud-space-4);
background: #fff;
border: 1px solid var(--aud-color-rule);
border-left: 4px solid var(--aud-color-link);
border-radius: var(--aud-radius-md);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.aud-search-featured[hidden] { display: none; }
.aud-search-featured__header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--aud-space-2);
margin-bottom: var(--aud-space-2);
}
.aud-search-featured__label {
font-size: var(--aud-fs-1);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--aud-color-link);
}
.aud-search-featured__source {
font-size: var(--aud-fs-3);
font-weight: 500;
color: var(--aud-color-text);
text-decoration: none;
}
.aud-search-featured__source:hover {
color: var(--aud-color-link);
text-decoration: underline;
}
.aud-search-featured__source::before {
content: "from ";
color: var(--aud-color-text-muted);
font-weight: 400;
}
.aud-search-featured__excerpt {
margin: 0 0 var(--aud-space-3);
font-size: var(--aud-fs-3);
line-height: 1.6;
color: var(--aud-color-text);
}
.aud-search-featured__cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--aud-fs-2);
font-weight: 500;
color: var(--aud-color-link);
text-decoration: none;
}
.aud-search-featured__cta:hover {
text-decoration: underline;
}
.aud-search-page__form {
position: relative;
display: block;
margin: var(--aud-space-3) 0 var(--aud-space-3);
max-width: 640px;
}
.aud-search-page__form-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--aud-color-text-subtle);
pointer-events: none;
transition: color 0.15s ease;
}
.aud-search-page__form:focus-within .aud-search-page__form-icon {
color: var(--aud-color-link);
}
.aud-search-page__form-input {
width: 100%;
padding: 12px 16px 12px 48px;
font-size: var(--aud-fs-4);
font-family: inherit;
border: 1px solid var(--aud-color-rule-strong);
border-radius: var(--aud-radius-md);
background: #fff;
color: var(--aud-color-text);
-webkit-appearance: none;
appearance: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.aud-search-page__form-input::-webkit-search-decoration,
.aud-search-page__form-input::-webkit-search-cancel-button,
.aud-search-page__form-input::-webkit-search-results-button,
.aud-search-page__form-input::-webkit-search-results-decoration {
-webkit-appearance: none;
}
.aud-search-page__form-input:focus {
outline: none;
border-color: var(--aud-color-link);
box-shadow: 0 0 0 3px rgba(0, 102, 214, 0.15);
}
/* --- Refine sidebar ----------------------------------------------------- */
.aud-results__refine-group h3 {
font-size: var(--aud-fs-1);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--aud-color-text-muted);
margin: 0 0 var(--aud-space-2);
padding: 0 var(--aud-space-2);
}
.aud-results__refine-group ul {
list-style: none;
margin: 0 0 var(--aud-space-5);
padding: 0;
}
.aud-results__refine-group li {
margin: 1px 0;
}
.aud-results__refine-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--aud-space-2);
padding: 6px var(--aud-space-2);
border-radius: var(--aud-radius-sm);
color: var(--aud-color-text);
text-decoration: none;
font-size: var(--aud-fs-3);
line-height: 1.3;
transition: background 0.12s ease, color 0.12s ease;
}
.aud-results__refine-link:hover {
background: var(--aud-color-bg-alt);
text-decoration: none;
}
.aud-results__refine-link.is-selected {
background: rgba(0, 102, 214, 0.1);
color: var(--aud-color-link);
font-weight: 500;
}
.aud-results__refine-name {
flex: 1;
min-width: 0;
}
.aud-results__refine-count {
flex-shrink: 0;
font-size: var(--aud-fs-2);
color: var(--aud-color-text-subtle);
font-variant-numeric: tabular-nums;
}
.aud-results__refine-link.is-selected .aud-results__refine-count {
color: var(--aud-color-link);
}
/* --- Quick Overview ----------------------------------------------------- */
.aud-search-summary {
margin: var(--aud-space-2) 0 var(--aud-space-4);
padding: var(--aud-space-4) var(--aud-space-5);
background: linear-gradient(180deg, rgba(0,102,214,0.03) 0%, rgba(0,102,214,0.01) 100%);
border: 1px solid var(--aud-color-rule);
border-left: 3px solid var(--aud-color-link);
border-radius: var(--aud-radius-md);
}
.aud-search-summary__header {
margin-bottom: var(--aud-space-2);
}
.aud-search-summary__label {
font-size: var(--aud-fs-1);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--aud-color-link);
}
.aud-search-summary__line {
margin: 0;
font-size: var(--aud-fs-3);
color: var(--aud-color-text);
line-height: 1.5;
}
.aud-search-summary__line strong {
font-weight: 600;
color: var(--aud-color-text);
}
.aud-search-summary__top {
margin-top: var(--aud-space-3);
padding-top: var(--aud-space-3);
border-top: 1px solid var(--aud-color-rule);
}
.aud-search-summary__top-label {
display: block;
font-size: var(--aud-fs-2);
font-weight: 500;
color: var(--aud-color-text-muted);
margin-bottom: var(--aud-space-1);
}
.aud-search-summary__top-list {
margin: 0;
padding-left: 1.25em;
font-size: var(--aud-fs-3);
}
.aud-search-summary__top-list li {
margin: 2px 0;
}
.aud-search-summary__top-list a {
color: var(--aud-color-link);
text-decoration: none;
}
.aud-search-summary__top-list a:hover,
.aud-search-summary__top-list a:focus-visible {
text-decoration: underline;
}
/* AI summary mount point — hidden by default. */
.aud-ai-summary {
margin-top: var(--aud-space-3);
padding-top: var(--aud-space-3);
border-top: 1px solid var(--aud-color-rule);
font-size: var(--aud-fs-3);
color: var(--aud-color-text);
line-height: 1.5;
}
.aud-ai-summary[hidden] { display: none; }
/* --- Pagination --------------------------------------------------------- */
/* Zendesk's {{pagination}} renders |