/* HCN Management — shared components (badges, buttons, cards, flash, status). Token-driven; no raw brand hex. */

/* --- Status badges --- */
.hcn-badge { display: inline-block; padding: 3px 10px; border-radius: var(--hcn-radius-pill); font-size: .85em; font-weight: 600; }
.hcn-badge--sm { padding: 2px 8px; font-size: var(--hcn-fs-xs); text-transform: uppercase; letter-spacing: .03em; }
.hcn-badge--ok, .hcn-badge--ready, .hcn-badge--approved { background: var(--hcn-color-success-bg); color: var(--hcn-color-success); }
.hcn-badge--warning, .hcn-badge--incomplete { background: var(--hcn-color-warning-bg); color: var(--hcn-color-warning); }
.hcn-badge--critical, .hcn-badge--action_required, .hcn-badge--rejected { background: var(--hcn-color-error-bg); color: var(--hcn-color-error); }
.hcn-badge--info, .hcn-badge--pending_review { background: var(--hcn-color-info-bg); color: var(--hcn-color-info); }
.hcn-badge--not_configured, .hcn-badge--missing, .hcn-badge--replaced { background: var(--hcn-color-neutral-bg); color: var(--hcn-color-neutral); }

/* --- Status text --- */
.hcn-status { font-weight: 600; }
.hcn-status--dead, .hcn-tampered, .hcn-error { color: var(--hcn-color-error); }
.hcn-status--failed { color: var(--hcn-color-warning); }
.hcn-status--done, .hcn-verified { color: var(--hcn-color-success); }
.hcn-req { color: var(--hcn-color-error); font-weight: 700; }

/* --- Buttons (front-end) --- */
.hcn-btn {
    display: inline-block; padding: 12px 20px; border-radius: var(--hcn-radius-lg);
    background: #eef1f5; color: var(--hcn-color-heading); text-decoration: none; font-weight: 600;
    border: 1px solid var(--hcn-color-border); cursor: pointer; min-height: var(--hcn-input-min-h); line-height: 24px;
}
.hcn-btn--primary { background: var(--hcn-color-brand); color: var(--hcn-color-brand-text); border-color: var(--hcn-color-brand); }
.hcn-btn--small { padding: 6px 12px; min-height: auto; font-size: .9em; }
.hcn-btn:focus-visible { outline: var(--hcn-focus-ring); }

/* --- Cards / tiles --- */
.hcn-cards { display: flex; flex-wrap: wrap; gap: var(--hcn-space-3); margin: var(--hcn-space-4) 0; }
.hcn-cards--top { align-items: flex-start; }
.hcn-card { background: var(--hcn-color-surface); border: 1px solid var(--hcn-color-border); border-radius: var(--hcn-radius-sm); padding: 12px 16px; min-width: 140px; display: flex; flex-direction: column; gap: var(--hcn-space-1); }
.hcn-card--wide { min-width: 320px; }
.hcn-card__value { font-size: 22px; font-weight: 600; line-height: 1.2; }
.hcn-card__label { color: var(--hcn-color-muted); font-size: var(--hcn-fs-sm); text-transform: uppercase; letter-spacing: .03em; }

/* --- Layout utilities (replace former inline styles) --- */
.hcn-w-narrow { max-width: var(--hcn-width-narrow); }
.hcn-w-portal { max-width: var(--hcn-width-portal); }
.hcn-w-wide { max-width: var(--hcn-width-wide); }
.hcn-col-status { width: 130px; }
.hcn-col-check { width: 260px; }
.hcn-col-badge { width: 120px; }
.hcn-input-num { width: 6em; }

/* ══════════════════════════════════════════════════════════════════════════
   HCN admin UI primitives  (.hcn-ui-*)
   ══════════════════════════════════════════════════════════════════════════

   An ADDITIVE layer. Nothing above this line is modified, no generic selector
   (button, table, input, .wp-core-ui, …) is touched, and no screen changes
   appearance until it opts in by using these class names. First adopted by
   Communication Center → Templates (list view).

   The look: white surfaces, hairline neutral borders, charcoal typography,
   gold used only for identity and the one primary action per view. No nested
   cards around ordinary rows, no decorative blue, no coloured left borders,
   no gradients, no metric tiles.

   Contrast rule from tokens.css holds: a filled gold surface carries BLACK
   text (5.70:1). White on gold is never used. P4: inside the HCN admin shell
   `.hcn-ui-btn--primary` is re-skinned to dark gold with WHITE text (4.68:1)
   by admin-shell.css — the owner's admin button rule.
   ────────────────────────────────────────────────────────────────────────── */

/* --- surface: a quiet panel. One border, no shadow, no inner card. --- */
.hcn-ui-surface {
    background: var(--hcn-color-surface);
    border: 1px solid var(--hcn-color-border-soft);
    border-radius: var(--hcn-radius-md);
}

/* --- buttons: admin-sized. Separate from .hcn-btn, which is the 48px
       front-end control, and from WordPress's own .button-primary blue. --- */
.hcn-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--hcn-color-border);
    border-radius: var(--hcn-radius-sm);
    background: var(--hcn-color-surface);
    color: var(--hcn-color-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.hcn-ui-btn:hover { border-color: var(--hcn-color-border-strong); color: var(--hcn-color-heading); }
.hcn-ui-btn:focus-visible { outline: var(--hcn-focus-ring); outline-offset: 2px; }

.hcn-ui-btn--primary {
    background: var(--hcn-color-brand);
    border-color: var(--hcn-color-brand);
    color: var(--hcn-color-brand-text);
}

.hcn-ui-btn--primary:hover {
    background: var(--hcn-color-brand-hover);
    border-color: var(--hcn-color-brand-hover);
    color: var(--hcn-color-brand-text);
}

/* quiet: a maintenance action that must not compete with the primary one */
.hcn-ui-btn--quiet {
    min-height: 30px;
    padding: 0 10px;
    border-color: transparent;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hcn-color-brand-strong);
}

.hcn-ui-btn--quiet:hover { border-color: var(--hcn-color-border); background: var(--hcn-color-surface); color: var(--hcn-color-brand-strong); }

.hcn-ui-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* icon-only button: the row-action trigger, and any future square control.
   Compound selector on purpose — admin-shell.css styles `.hcn-row-actions-toggle`
   later in the cascade, and the shared component must keep working unchanged for
   the pages (Pilgrims, Seasons) that still pair it with WordPress's `.button`. */
.hcn-ui-iconbtn,
.hcn-ui-iconbtn.hcn-row-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--hcn-radius-sm);
    background: none;
    color: var(--hcn-color-muted);
    box-shadow: none;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.hcn-ui-iconbtn:hover,
.hcn-ui-iconbtn.hcn-row-actions-toggle:hover {
    border-color: var(--hcn-color-border);
    background: var(--hcn-color-surface);
    color: var(--hcn-color-heading);
}

.hcn-ui-iconbtn:focus-visible { outline: var(--hcn-focus-ring); outline-offset: 2px; }
.hcn-ui-iconbtn svg { width: 18px; height: 18px; }

/* --- toolbar: one compact row. Search flexes, everything else stays small. --- */
.hcn-ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hcn-space-2) var(--hcn-space-3);
    margin: 0 0 var(--hcn-space-4);
    padding: 10px 12px;
}

.hcn-ui-toolbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    min-width: 0;
    max-width: 460px;
    padding: 0 11px;
    min-height: 34px;
    border: 1px solid var(--hcn-color-border);
    border-radius: var(--hcn-radius-sm);
    background: var(--hcn-color-subtle-bg);
}

.hcn-ui-toolbar__search:focus-within {
    border-color: var(--hcn-color-brand);
    background: var(--hcn-color-surface);
    box-shadow: 0 0 0 3px rgba(179, 143, 100, .15);
}

.hcn-ui-toolbar__search svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--hcn-color-muted); }

.hcn-ui-toolbar__search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    outline: none;
    font-size: 13.5px;
    color: var(--hcn-color-text);
}

.hcn-ui-toolbar__search input[type="search"]:focus { border: 0; box-shadow: none; outline: none; }

.hcn-ui-toolbar__spacer { flex: 1 1 0; min-width: 0; }
.hcn-ui-toolbar__end { display: flex; align-items: center; gap: var(--hcn-space-2); }

/* --- filter group: visible on wide screens, disclosed on narrow ones.
       Pure CSS, so every field stays usable with JavaScript unavailable. --- */
.hcn-ui-filters { display: contents; }

.hcn-ui-filters__toggle { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }

.hcn-ui-filters__label {
    display: none;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--hcn-color-border);
    border-radius: var(--hcn-radius-sm);
    background: var(--hcn-color-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--hcn-color-text);
    cursor: pointer;
}

.hcn-ui-filters__label svg { width: 14px; height: 14px; color: var(--hcn-color-muted); }
.hcn-ui-filters__toggle:focus-visible + .hcn-ui-filters__label { outline: var(--hcn-focus-ring); outline-offset: 2px; }
.hcn-ui-filters__toggle:checked + .hcn-ui-filters__label { border-color: var(--hcn-color-brand); color: var(--hcn-color-brand-strong); }

.hcn-ui-filters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--hcn-radius-pill);
    background: var(--hcn-color-brand-soft);
    color: var(--hcn-color-brand-strong);
    font-size: var(--hcn-fs-xs);
    font-weight: 700;
}

.hcn-ui-filters__panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hcn-space-2); }
.hcn-ui-filters__apply { display: inline-flex; align-items: center; gap: var(--hcn-space-2); }

/* width-exclusive copies of one fact. Exactly one is rendered at any width, so
   nothing is announced twice and nothing is lost. */
.hcn-ui-narrow { display: none; }

.hcn-ui-field { display: inline-flex; align-items: center; gap: 6px; }
.hcn-ui-field > span { font-size: var(--hcn-fs-sm); font-weight: 600; color: var(--hcn-color-muted); }

.hcn-ui-field select {
    min-height: 34px;
    max-width: 150px;
    margin: 0;
    border-radius: var(--hcn-radius-sm);
    border-color: var(--hcn-color-border);
    font-size: 13px;
    color: var(--hcn-color-text);
}

.hcn-ui-field select:focus { border-color: var(--hcn-color-brand); box-shadow: 0 0 0 3px rgba(179, 143, 100, .15); }

/* --- table: a quiet data list. Hairline row rules, no outer box, no zebra. --- */
.hcn-ui-tablewrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.hcn-ui-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 560px;
    background: none;
}

.hcn-ui-table thead th {
    padding: 0 12px 8px;
    border: 0;
    border-bottom: 1px solid var(--hcn-color-border);
    background: none;
    text-align: left;
    font-size: var(--hcn-fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hcn-color-muted);
    white-space: nowrap;
}

.hcn-ui-table tbody td {
    padding: 13px 12px;
    border: 0;
    border-bottom: 1px solid var(--hcn-color-border-faint);
    vertical-align: top;
    font-size: 13.5px;
    color: var(--hcn-color-text);
}

.hcn-ui-table tbody tr:last-child td { border-bottom: 0; }
.hcn-ui-table tbody tr:hover td { background: var(--hcn-color-subtle-bg); }

.hcn-ui-table__title {
    display: inline-block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--hcn-color-heading);
    text-decoration: none;
}

.hcn-ui-table__title:hover { color: var(--hcn-color-brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.hcn-ui-table__title:focus-visible { outline: var(--hcn-focus-ring); outline-offset: 2px; border-radius: 3px; }

.hcn-ui-table__sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--hcn-color-muted); max-width: 62ch; }
.hcn-ui-table__num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hcn-ui-table__end { width: 1%; white-space: nowrap; text-align: right; }

/* --- metadata line: small facts under a title, separated by middots. --- */
.hcn-ui-meta { margin: 4px 0 0; font-size: var(--hcn-fs-sm); line-height: 1.5; color: var(--hcn-color-muted); }
.hcn-ui-meta > * + *::before { content: "·"; margin: 0 7px; color: var(--hcn-color-border-strong); }

/* --- empty state --- */
.hcn-ui-empty { padding: 36px 24px; text-align: center; }
.hcn-ui-empty__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--hcn-color-heading); }
.hcn-ui-empty__note { margin: 6px auto 0; max-width: 52ch; font-size: 13px; line-height: 1.6; color: var(--hcn-color-muted); }
.hcn-ui-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hcn-space-2); margin: var(--hcn-space-4) 0 0; }
.hcn-ui-empty__actions form { margin: 0; }

/* --- footnote row: quiet maintenance actions and help text under a list. --- */
.hcn-ui-footnote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hcn-space-2) var(--hcn-space-3);
    margin: var(--hcn-space-4) 0 0;
    padding-top: var(--hcn-space-3);
    border-top: 1px solid var(--hcn-color-border-faint);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--hcn-color-muted);
}

.hcn-ui-footnote form { display: contents; }
.hcn-ui-footnote p { margin: 0; max-width: 78ch; }

/* --- narrow widths: the three filters fold behind one compact control ---
 *
 * Search, Filters and the primary action stay on ONE row. The disclosed fields drop to a line of their
 * own below, which is what a disclosure is for — but the three controls that are always there do not
 * get pushed apart by it. `order` puts the primary action back beside Filters visually while the DOM
 * order, and therefore the tab order, stays search → Filters → fields → Apply → action. */
@media (max-width: 1024px) {
    .hcn-ui-filters__label { display: inline-flex; }
    .hcn-ui-filters__panel { display: none; order: 2; flex: 1 1 100%; padding-top: 2px; }
    .hcn-ui-filters__toggle:checked ~ .hcn-ui-filters__panel { display: flex; }
    .hcn-ui-toolbar__spacer { display: none; }
    .hcn-ui-toolbar__search { flex: 1 1 160px; max-width: none; }
    .hcn-ui-toolbar__end { order: 1; }
}

@media (max-width: 782px) {
    .hcn-ui-toolbar { padding: 10px; gap: var(--hcn-space-2); }
    .hcn-ui-filters__panel { flex: 1 1 100%; }
    .hcn-ui-filters__apply { flex: 1 1 100%; padding-top: 2px; }
    .hcn-ui-field { flex: 1 1 140px; }
    .hcn-ui-field select { max-width: none; width: 100%; }

    /*
     * The row becomes a data list and stops pretending to be six columns.
     * Still ONE surface with row separators — not a stack of cards — and still
     * semantic <table> markup: only the presentation changes.
     *
     *   name                                      status
     *   description
     *   channel · purpose · Dutch (NL)
     *   Updated 2 Oct 2026, 00:37                      ⋯
     */
    .hcn-ui-table { min-width: 0; }
    .hcn-ui-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hcn-ui-table,
    .hcn-ui-table tbody { display: block; }

    .hcn-ui-table tbody tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "main main main status"
            "chan purp .    ."
            "upd  upd  upd  act";
        align-items: center;
        gap: 6px 8px;
        padding: 14px 10px;
        border-bottom: 1px solid var(--hcn-color-border-faint);
    }

    .hcn-ui-table tbody tr:last-child { border-bottom: 0; }
    .hcn-ui-table tbody tr:hover { background: var(--hcn-color-subtle-bg); }
    .hcn-ui-table tbody tr:hover td { background: none; }
    /* the desktop column sizing must not survive into the grid: a 1% actions
       cell collapses to 1px and pushes the row past its own surface. */
    .hcn-ui-table tbody td { display: block; min-width: 0; padding: 0; border: 0; }
    .hcn-ui-table tbody td.hcn-ui-table__end { width: auto; text-align: left; white-space: normal; }

    .hcn-ui-table tbody td[data-hcn-cell="main"] { grid-area: main; align-self: start; }
    .hcn-ui-table tbody td[data-hcn-cell="status"] { grid-area: status; align-self: start; justify-self: end; }
    .hcn-ui-table tbody td[data-hcn-cell="channel"] { grid-area: chan; }
    .hcn-ui-table tbody td[data-hcn-cell="purpose"] { grid-area: purp; }
    .hcn-ui-table tbody td[data-hcn-cell="updated"] { grid-area: upd; }
    .hcn-ui-table tbody td[data-hcn-cell="actions"] { grid-area: act; justify-self: end; }

    /* the metadata line reads as one sentence, though it is three cells */
    .hcn-ui-table tbody td[data-hcn-cell="channel"],
    .hcn-ui-table tbody td[data-hcn-cell="purpose"],
    .hcn-ui-table tbody td[data-hcn-cell="updated"] {
        font-size: var(--hcn-fs-sm);
        color: var(--hcn-color-muted);
        white-space: nowrap;
    }

    .hcn-ui-table tbody td[data-hcn-cell="channel"]::after {
        content: "·";
        margin-left: 8px;
        color: var(--hcn-color-border-strong);
    }

    .hcn-ui-table__sub { margin-top: 4px; max-width: none; }
    .hcn-ui-wide { display: none; }
    .hcn-ui-narrow { display: inline; }
}

/* --- status badge: a DRAFT is work in progress, not information. Gold tint
       rather than the blue .hcn-badge--info it used to borrow. --- */
.hcn-badge--draft { background: var(--hcn-color-brand-soft); color: var(--hcn-color-brand-strong); }
.hcn-badge--retired { background: var(--hcn-color-neutral-bg); color: var(--hcn-color-neutral); }

/* --- genuinely narrow: below this the three toolbar controls no longer fit on
       one line, so the search field is given a floor and wraps instead of being
       crushed to an unusable sliver. Wrapping is allowed here; at 768 it is not. --- */
@media (max-width: 620px) {
    .hcn-ui-toolbar__search { min-width: 180px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGER  (.hcn-ui-pager)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   The HCN table pager, added to the shared layer so every paginated admin list
   can adopt it. Messages is the first and, for now, the ONLY consumer: the other
   four paginated tables are WP_List_Table subclasses that print WordPress's own
   pager, and moving them is a separate pass (see
   docs/handoffs/HCN_ADMIN_TABLE_PAGER_INVENTORY.md). Nothing here targets a
   WordPress class, so no existing screen changes by adding this block.

   Three rules it exists to enforce:

     • a pager is NOT a list of every page. First, last, current and its
       neighbours, with a gap where numbers were left out — the markup decides
       which, this file only has to make seven of them fit.
     • Previous and Next at the end of the range are <span class="is-disabled">,
       never a dead anchor. They are visibly inert and are not in the tab order,
       because a link that goes nowhere is worse than no link.
     • the current page is not merely bold. It is the one filled control on the
       row, in HCN gold with white ink, and it carries aria-current="page".

   Generic WordPress blue appears nowhere in it.
   ────────────────────────────────────────────────────────────────────────── */

.hcn-ui-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hcn-space-2) var(--hcn-space-3);
    margin: var(--hcn-space-3) 0 0;
}

.hcn-ui-pager__middle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px var(--hcn-space-3);
    flex: 1 1 auto;
    min-width: 0;
}

/* Previous / Next: the two controls an operator reaches for without reading. */
.hcn-ui-pager__step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--hcn-color-border);
    border-radius: var(--hcn-radius-sm);
    background: var(--hcn-color-surface);
    color: var(--hcn-color-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.hcn-ui-pager__step:hover {
    border-color: var(--hcn-color-border-strong);
    background: var(--hcn-color-subtle-bg);
    color: var(--hcn-color-heading);
}

.hcn-ui-pager__step:focus-visible { outline: var(--hcn-focus-ring); outline-offset: 2px; }

/* Not a link, not clickable, and honest about it. */
.hcn-ui-pager__step.is-disabled {
    border-color: var(--hcn-color-border-faint);
    background: var(--hcn-color-subtle-bg);
    color: var(--hcn-color-muted);
    opacity: .65;
    cursor: default;
    pointer-events: none;
}

.hcn-ui-pager__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hcn-ui-pager__pages li { margin: 0; }

.hcn-ui-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--hcn-color-border);
    border-radius: var(--hcn-radius-sm);
    background: var(--hcn-color-surface);
    color: var(--hcn-color-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.hcn-ui-pager__page:hover {
    border-color: var(--hcn-color-border-strong);
    background: var(--hcn-color-subtle-bg);
    color: var(--hcn-color-heading);
}

.hcn-ui-pager__page:focus-visible { outline: var(--hcn-focus-ring); outline-offset: 2px; }

.hcn-ui-pager__page.is-current {
    border-color: var(--hcn-color-btn-primary-bg);
    background: var(--hcn-color-btn-primary-bg);
    color: var(--hcn-color-btn-ink);
    cursor: default;
}

.hcn-ui-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 32px;
    color: var(--hcn-color-muted);
}

.hcn-ui-pager__count {
    margin: 0;
    font-size: var(--hcn-fs-sm);
    line-height: 1.5;
    color: var(--hcn-color-muted);
    font-variant-numeric: tabular-nums;
}

/* Narrow: the sentence drops under the numbers rather than squeezing them. */
@media (max-width: 620px) {
    .hcn-ui-pager { justify-content: center; }
    .hcn-ui-pager__middle { flex: 1 1 100%; order: 3; }
    .hcn-ui-pager__step { flex: 1 1 auto; justify-content: center; }
}