/**
 * Unified Search — Input, Filter Pills, Badges, Progressive Disclosure
 */

/* ═══════════════════════════════════════
   SEARCH INPUT WRAPPER
   ═══════════════════════════════════════ */

.ps-unified-search {
    max-width: 720px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

/* Single-field layout: Tom Select flush-joined to submit button */
.ps-unified-search__field {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
}

/* Custom search control: chips + text input in one row.
   The input field stays white (on the otherwise dark page) so the user's
   typed text is maximally legible. */
.ps-search-control {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid transparent;
    border-right: none;
    border-radius: 4px 0 0 4px;
    background: #fff;
    padding: 6px 12px;
    min-height: 44px;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ps-search-control:focus-within {
    border-color: var(--ps-red);
    box-shadow: 0 0 0 2px var(--ps-red-soft);
}

.ps-search-chips {
    display: contents; /* chips flow inline with input */
}

/* Scoped under .ps-search-control so specificity is 0,2,0 in BOTH rest and
   focus states. With the bare class (0,1,0), the global form rules (our
   style.css input[type="text"] at 0,1,1, plus the Ollie parent theme's
   input globals) styled the input at rest while .ps-search-input:focus
   (0,2,0) won on focus - so the box changed padding, border, and size the
   moment it was clicked (issue #285). */
.ps-search-control .ps-search-input,
.ps-search-control .ps-search-input:focus {
    flex: 1 1 120px;
    min-width: 120px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;

    /* Must compute to at least 16px: iOS Safari zooms the viewport when a
       focused input is under 16px, and there is no way back out without a
       manual pinch. 1rem resolves to 16px here because nothing in the theme
       sets html { font-size }; keep it at or above that (issue #296). */
    font-size: 1rem;
    font-family: inherit;
    color: #000; /* input sits inside the white .ps-search-control */
    line-height: 1.5;
    padding: 2px 0;
}

.ps-search-control .ps-search-input::placeholder {
    color: var(--wp--preset--color--muted, #757575);
    opacity: 1;
}

.ps-unified-search__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    background: var(--ps-red);
    color: #fff;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.5rem;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ps-unified-search__submit:hover {
    background: var(--ps-red-dark);
}

.ps-unified-search__submit:active {
    opacity: 0.9;
    transform: scale(0.98);
}

/* Autocomplete dropdown */
.ps-search-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    border: 1px solid var(--wp--preset--color--border, #ddd);
    border-radius: 8px;
    background: var(--wp--preset--color--bg, #fff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 100;
}

.ps-search-dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background 0.1s ease;
}

.ps-search-dropdown__option:hover,
.ps-search-dropdown__option--active {
    background: var(--ps-scrim-08);
}

/* Facet chip inside the search control */
.ps-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--facet-color, #6366f1) 25%, #222);
    color: #eee;
    border: 1px solid color-mix(in srgb, var(--facet-color, #6366f1) 40%, transparent);
    border-radius: 16px;
    padding: 2px 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.ps-search-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: 2px;
    opacity: 0.5;
    transition: opacity 0.1s ease;
}

.ps-search-chip__remove:hover {
    opacity: 1;
}

/* Dropdown option part styles (reused by custom dropdown) */
.ps-ts-option__type {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.ps-ts-option__label {
    flex: 1;
    font-size: 0.875rem;
}

.ps-ts-option__count {
    color: var(--wp--preset--color--muted, #999);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════
   HERO VARIANT (front page)
   Match the existing Figma spec: flush rectangular inputs,
   white bg, red button joined on the right, left-aligned.
   ═══════════════════════════════════════ */

.ps-hero__search.ps-unified-search {
    max-width: 864px;
    margin: 0 0 var(--ps-space-3, 12px);
    padding: 0;
}

.ps-hero__search .ps-search-control {
    background: #fff;
    border: none;
    border-radius: 4px 0 0 4px;
    padding: 10px 20px;
    min-height: 56px;
    cursor: text;
    transition: box-shadow 0.15s ease;
}

.ps-hero__search .ps-search-control:focus-within {
    box-shadow: none;
}

/* :focus arm keeps the hero size winning over the base
   .ps-search-control .ps-search-input:focus rule (see issue #285).

   This is also the declaration that actually governs the hero field: it
   matches .ps-search-control .ps-search-input at the same 0,2,0 specificity
   and wins on source order, so the floor comment on that base rule does not
   reach here. Same at-least-16px requirement applies (issue #296). */
.ps-hero__search .ps-search-input,
.ps-hero__search .ps-search-input:focus {
    font-size: 1rem;
    color: #000;
    line-height: 1.5;
}

.ps-hero__search .ps-search-input::placeholder {
    color: #757575;
    opacity: 1;
}

.ps-hero__search .ps-search-dropdown {
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    color: #333;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.ps-hero__search .ps-search-dropdown__option:hover,
.ps-hero__search .ps-search-dropdown__option--active {
    background: #e8e8e8;
}

.ps-hero__search .ps-unified-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: auto;
    padding: 16px 32px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    border: none;
    border-radius: 0 4px 4px 0;
    background: var(--ps-red);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ps-hero__search .ps-unified-search__submit:hover {
    background: var(--ps-red-dark);
}

.ps-hero__search .ps-unified-search__submit:active {
    opacity: 0.9;
    transform: scale(0.98);
}

/* Mobile: button shrinks, hide label text, stack on small screens */
@media (max-width: 768px) {
    .ps-hero__search .ps-unified-search__submit {
        padding: 16px;
        gap: 0;
    }

    .ps-hero__search .ps-unified-search__submit-label {
        display: none;
    }

    .ps-hero__search .ps-search-control {
        min-height: 48px;
        padding: 8px 14px;
    }
}

@media (max-width: 480px) {
    .ps-hero__search .ps-unified-search__field {
        flex-direction: column;
    }

    .ps-hero__search .ps-search-control {

        /* Stacked: round only the top corners so the field joins flush with
           the button below it (issue #232 - both being fully rounded made the
           abutting edges look broken). */
        border-radius: 4px 4px 0 0;
        border-right: none;
    }

    .ps-hero__search .ps-unified-search__submit {

        /* Round only the bottom corners to meet the field cleanly. */
        border-radius: 0 0 4px 4px;
        padding: 14px;
        font-size: 18px;
        justify-content: center;
        gap: 10px;
    }

    .ps-hero__search .ps-unified-search__submit-label {
        display: inline;
    }
}

/* Spacing between persistent search bar and results header */
.ps-unified-search + .ps-search-header {
    margin-top: 1.5rem;
}

/* ═══════════════════════════════════════
   "SECRETS FOR" HEADER + REFINE BUTTON
   ═══════════════════════════════════════ */

/* Two-line header: small label + large query */
.ps-search-for-label {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--wp--preset--color--text, #fff);
    margin-bottom: var(--ps-space-4, 16px);
}

.ps-search-for-query {
    display: block;
    font-size: clamp(28px, 3.05vw, 44px);
    font-weight: 500;
    line-height: 1.1;
    color: var(--wp--preset--color--text, #fff);
}

/* Edit pencil icon next to search query */
.ps-search-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    padding: 0;
    border: none;
    background: none;
    color: var(--wp--preset--color--muted, #999);
    font-size: 0.5em;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s ease;
}

.ps-search-edit-btn:hover {
    color: var(--wp--preset--color--text, #fff);
}

/* Results count */
.ps-search-results-count {
    display: block;
    margin-top: var(--ps-space-10, 40px);
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--wp--preset--color--text, #fff);
}

/* ═══════════════════════════════════════
   QUERY UNDERSTANDING
   ═══════════════════════════════════════ */

.ps-search-understanding {
    text-align: center;
    color: var(--wp--preset--color--muted, #666);
    font-size: 0.9375rem;
    font-style: italic;
    margin: 0 0 1rem;
    padding: 0 1rem;
}

/* ═══════════════════════════════════════
   TOPIC SUGGESTIONS
   ═══════════════════════════════════════ */

.ps-topic-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    padding: 0 1rem;
}

.ps-topic-suggestions__label {
    color: var(--wp--preset--color--muted, #999);
    font-size: 0.8125rem;
    margin-right: 0.25rem;
}

.ps-topic-chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--ps-scrim-08);
    border: 1px solid var(--ps-scrim-15);
    border-radius: 16px;
    color: var(--wp--preset--color--text, #333);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ps-topic-chip:hover {
    background: var(--ps-red);
    color: #fff;
    border-color: var(--ps-red);
}

.ps-topic-chip:active {
    opacity: 0.85;
}

/* ═══════════════════════════════════════
   FILTER PILLS
   ═══════════════════════════════════════ */

.ps-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.ps-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--ps-scrim-20);
    border-radius: 20px;
    background: transparent;
    color: var(--wp--preset--color--text, #eee);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ps-filter-pill:hover {
    border-color: var(--ps-red);
    color: var(--ps-red);
}

.ps-filter-pill--active {
    background: var(--ps-red);
    color: #fff;
    border-color: var(--ps-red);
}

.ps-filter-pill--active:hover {
    background: var(--ps-red-dark);
    border-color: var(--ps-red-dark);
    color: #fff;
}

.ps-filter-pill__count {
    opacity: 0.7;
    font-weight: 400;
}

/* ═══════════════════════════════════════
   MATCH BADGES
   ═══════════════════════════════════════ */

/* Card wrapper — used in search results to hold card + badge + snippet */
.ps-card-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Card fills its wrapper so row sizing applies correctly */
.ps-card-wrapper > .ps-card {
    width: 100%;
}

/* #202: normalize postcard thumbnail scale in search results. Scans differ in
   resolution, so without a constraint the SERP rendered postcards at
   inconsistent sizes/ratios. Match the homepage multi-card treatment
   (.ps-row--duo/.ps-row--step in ps-stream.css): size by `width: auto` capped at
   `max-height: min(75vh, 500px)` so the box hugs the image at its natural ratio
   and centers via `margin: 0 auto`. The previous `width: 100%` forced a
   full-width box, which letterboxed portrait scans (empty side bands) instead of
   hugging them like the website posts - the exact inconsistency this fixes.

   SCOPED to #ps-unified-results (the search-results container, search.html):
   `.ps-card-wrapper` is ALSO the homepage stream row wrapper (ps-stream.css), and
   both stylesheets load on the front page with unified-search.css last, so an
   unscoped rule would override the homepage's own row rules (e.g. solo's 85vh
   cap). The ID scope keeps this strictly SERP-only. */
#ps-unified-results .ps-card-wrapper .ps-card__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(75vh, 500px);
    margin: 0 auto;
    object-fit: contain;
}

.ps-match-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Match badge variants — background tint + WCAG-AA text color for the
   dark surface. Backgrounds are translucent so the parent card's color
   bleeds through; text uses the tint-400 step for 4.5:1 contrast. */
.ps-match-badge--text {
    background: var(--ps-badge-text-bg);
    color: var(--ps-badge-text-fg);
}

.ps-match-badge--semantic {
    background: var(--ps-badge-semantic-bg);
    color: var(--ps-badge-semantic-fg);
}

.ps-match-badge--topic {
    background: var(--ps-badge-topic-bg);
    color: var(--ps-badge-topic-fg);
}

.ps-match-badge--facet {
    background: var(--ps-badge-facet-bg);
    color: var(--ps-badge-facet-fg);
}

.ps-match-badge i {
    font-size: 0.625rem;
}

/* ═══════════════════════════════════════
   TEXT SNIPPET
   ═══════════════════════════════════════ */

.ps-card-snippet {
    margin-top: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--wp--preset--color--muted, #666);
    line-height: 1.5;
    text-align: center;
    max-width: 600px;
}

.ps-card-snippet mark {
    background: var(--ps-red-medium);
    color: var(--ps-highlight-fg);
    padding: 0.0625rem 0.125rem;
    border-radius: 2px;
    font-weight: 600;
}

/* ═══════════════════════════════════════
   PROGRESSIVE DISCLOSURE DIVIDER
   ═══════════════════════════════════════ */

.ps-results-divider {
    width: 100%;
    text-align: center;
    padding: 1.5rem 1rem;
    position: relative;
}

.ps-results-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ps-scrim-10);
}

.ps-results-divider__text {
    position: relative;
    display: inline-block;
    padding: 0.375rem 1rem;
    background: var(--wp--preset--color--bg, #fff);
    color: var(--wp--preset--color--muted, #666);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════
   LOADING + ERROR STATES
   ═══════════════════════════════════════ */

.ps-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--wp--preset--color--muted, #757575);
    font-size: 0.9375rem;
}

.ps-search-loading i {
    font-size: 1.25rem;
    color: var(--ps-red);
}

.ps-search-error-msg {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--wp--preset--color--muted, #666);
}

.ps-search-error-msg p {
    font-size: 0.9375rem;
    margin: 0;
}

/* ═══════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════ */

.ps-no-results {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--wp--preset--color--muted, #666);
}

.ps-no-results p {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
}

.ps-no-results__headline {
    font-size: 1.0625rem !important;
    font-weight: 600;
    color: var(--wp--preset--color--fg, #ddd);
}

/* A6: suggested redirect terms when a query has no real match.
 * Visual treatment is intentionally minimal — Sonja owns the final
 * style; this is the placeholder so the empty-state isn't broken
 * while we wait on her pass. */
.ps-no-results__suggestions {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

.ps-no-results__suggestion {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--wp--preset--color--fg, #ddd);
    border: 1px solid var(--wp--preset--color--muted, #555);
    border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.ps-no-results__suggestion:hover,
.ps-no-results__suggestion:focus {
    color: var(--ps-red, #ff5a5f);
    border-color: var(--ps-red, #ff5a5f);
    text-decoration: none;
}

/* A6 banner mode: the empty-state envelope is set BUT items exist
 * (e.g. low-confidence semantic results that squeaked past the ANN
 * floor). The banner sits above the grid so the user reads "no
 * direct match" before scanning the cards. Visually quieter than
 * the full-takeover empty state to avoid looking like an error. */
.ps-no-results-banner {
    margin: 0 auto 1.5rem;
    max-width: 640px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    border: 1px solid var(--wp--preset--color--muted, #555);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.ps-no-results-banner .ps-no-results {
    padding: 0;
}

.ps-no-results-banner .ps-no-results__headline {
    font-size: 1rem !important;
    margin-bottom: 0.375rem;
}

.ps-no-results-banner .ps-no-results__suggestions {
    margin-top: 0.875rem;
}

.ps-search-hint {
    color: var(--wp--preset--color--muted, #999);
    font-size: 0.875rem !important;
}

/* A7 (Tier 2): the .ps-match-badge--{text|semantic|topic|facet}
 * styling above (~line 493) is the existing pre-Tier-1 design that
 * was stripped from rendering during launch prep. We're restoring
 * the badge in the card template (parts/card-mustache-template.php)
 * with the same class names so the existing variants apply.
 *
 * The badge is rendered AS A SIBLING of the card link, anchored at
 * the bottom-left of the card via absolute positioning. Sonja owns
 * the final visual weight; this is the placeholder for now — quiet
 * by default, more visible on hover/focus. */
.ps-card .ps-match-badge {
    position: absolute;
    bottom: 0.625rem;
    left: 0.625rem;

    /* Above `.ps-card__overlay` (z-index 2 in ps-stream.css), not level
       with it. The badge and the #316 hover scrim reveal on the same
       `:hover`, and the overlay is the later sibling in the card markup,
       so at equal z-index the scrim would paint on top and the badge
       would only ever be seen through 40% black. That drops its
       already-quiet contrast below the level A7 tuned it to. */
    z-index: 3;
    margin-top: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ps-card:hover .ps-match-badge,
.ps-card:focus-within .ps-match-badge {
    opacity: 1;
}

/* Same condition as the overlay's touch block in ps-stream.css, and for the
   same reason: plain `(hover: none)` misses devices reporting `hover: hover`
   with `pointer: coarse` (iPad with a trackpad, TV browsers, stylus
   tablets), which would leave the badge at `opacity: 0` from the base rule
   above and only surface it under a hover the user can't reliably produce.
   Both touch fallbacks now agree. */
@media not all and (hover: hover) and (pointer: fine) {
    .ps-card .ps-match-badge {
        opacity: 0.9;
    }

    /* The #232 rule that force-revealed `.ps-card-wrapper .ps-card__more-link`
       on touch lived here. #316 renamed that element to
       `.ps-card__overlay-btn--secondary` and moved its touch handling into
       ps-stream.css, where it is now covered for every non-hover device
       rather than only for SERP cards. The affordance itself is unchanged. */
}

.ps-link-btn {
    background: none;
    border: none;
    color: var(--ps-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
    padding: 0;
    transition: color 0.15s ease;
}

.ps-link-btn:hover {
    color: var(--ps-red-dark);
    text-decoration: none;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
    .ps-unified-search {
        padding: 0 0.75rem;
    }

    .ps-search-control {
        min-height: 40px;
        padding: 4px 10px;
    }

    .ps-filter-pills {
        gap: 0.375rem;
    }

    .ps-filter-pill {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }

    .ps-match-badge {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.5rem;
    }
}

@media (max-width: 480px) {
    .ps-topic-suggestions {
        justify-content: flex-start;
        padding: 0 0.75rem;
    }

    /* Stack input + button on very small screens */
    .ps-unified-search__field {
        flex-direction: column;
    }

    .ps-search-control {
        border-right: 1px solid var(--wp--preset--color--border, #ddd);
        border-radius: 4px;
    }

    .ps-unified-search__submit {
        border-radius: 4px;
        padding: 0.625rem;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════
   FOCUS VISIBLE (keyboard users)
   ═══════════════════════════════════════ */

.ps-filter-pill:focus-visible,
.ps-topic-chip:focus-visible,
.ps-link-btn:focus-visible,
.ps-unified-search__submit:focus-visible {
    outline: 2px solid var(--ps-red);
    outline-offset: 2px;
}

.ps-card-wrapper:focus-visible {
    outline: none;
}

/* Remove default outline since we use focus-visible */
.ps-filter-pill:focus:not(:focus-visible),
.ps-topic-chip:focus:not(:focus-visible),
.ps-link-btn:focus:not(:focus-visible),
.ps-unified-search__submit:focus:not(:focus-visible),
.ps-card-wrapper:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════
   CONTRAST FIXES (WCAG AA)
   ═══════════════════════════════════════ */

/* Noscript fallback */
.ps-search-noscript {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--wp--preset--color--muted, #666);
    font-size: 1.125rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ps-topic-chip,
    .ps-filter-pill,
    .ps-unified-search__submit,
    .ps-search-chip,
    .ps-link-btn,
    .ps-search-control {
        transition: none !important;
    }

    .ps-unified-search__submit:active,
    .ps-hero__search .ps-unified-search__submit:active {
        transform: none;
    }

    /* Stop the search loading spinner's rotation (Font Awesome fa-spin) for
       reduced-motion users. The static icon + the "Searching..." text and the
       aria-live announcement still communicate the loading state without motion
       (#127). */
    .ps-search-loading i,
    .ps-search-loading-more i {
        animation: none !important;
    }
}

/* Public eval voting styles lived here until #320 removed the vote
   buttons from the SERP. Only the UI was removed: /psai/v1/eval-feedback,
   PublicEvalRepository, the admin Public Feedback panel and
   wp_psai_search_eval_feedback are all still in place and still hold the
   votes collected while the buttons shipped. If the UI is ever brought
   back, docs/public_search_eval_voting.md is the spec. */

/* ═══════════════════════════════════════
   SERP FOOTER NAV (#284)
   Load More / More like these / Secrets about {tag}
   Three equal-weight options after the results grid: one vertical
   (more of this search) and two horizontal (semantic drift, tag jump).
   ═══════════════════════════════════════ */

.ps-serp-footer {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 720px;
    margin: 2.5rem auto 3rem;
    padding: 0 1rem;
}

.ps-serp-footer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* mobile tap target */
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid var(--ps-scrim-20);
    border-radius: 4px;
    color: var(--wp--preset--color--text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ps-serp-footer__btn:hover:not(:disabled) {
    border-color: var(--ps-red);
    background: var(--ps-red-soft);
}

.ps-serp-footer__btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.ps-serp-footer__btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Card wrappers receive tabindex="-1" when focused after Load More;
   suppress the default ring on that programmatic focus (the moved
   focus is announced, not visually navigated). Keyboard navigation
   into cards still shows focus on the interactive elements inside. */
.ps-card-wrapper:focus {
    outline: none;
}

@media (max-width: 480px) {
    .ps-serp-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ps-serp-footer__btn {
        width: 100%;
    }
}