/*
  Stitch "Search & Results page" clone styles.
  Translated 1:1 from the embedded Tailwind config of
    src/Template/search_results_page_desktop/code.html
    src/Template/search_results_page_tablet/code.html
    src/Template/search_results_page_mobile/code.html

  Stitch produced three structurally different artifacts, so this file is
  mobile-first and layers the tablet (>=768px) and desktop (>=1024px) layouts
  on top. Class names match the export 1:1 where practical.

  Scoped (prefixed) so it cannot restyle other CAF-Info pages.
*/

.stitch .sr-page {
    --sr-accent: #C8102E;
    --sr-accent-hover: #A60D26;
    --sr-navy: #0B192C;
    --sr-primary-container: #0e1c2f;
    --sr-secondary-container: #d5e3fd;
    --sr-on-secondary-fixed: #0d1c2f;
    --sr-on-tertiary-container: #f63949;
    --sr-surface-bright: #f7f9fb;
    --sr-surface-variant: #e0e3e5;

    width: 100%;
    background-color: var(--st-background);
}

/* Only the desktop artifact has this white band; hidden on tablet/mobile. */
.sr-hero-band { display: none; }
.sr-ribbon { display: none; }
.sr-tablet-only { display: none; }
.sr-desktop-only { display: none; }
.sr-mobile-only { display: block; }

.sr-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* The desktop artifact nests its own .sr-container inside the page-level one that
   SearchPage already renders, so the page gutter is applied twice and the header
   sits 80px inside the content edge that every other section aligns to. The
   1:1 Stitch translation kept that wrapper, but the landing convention
   (stitch-landing.css .st-hero-inner) is that hero content spans the full width
   of the single .st-max-w-1280 / .st-px wrapper. Drop the duplicate gutters and
   let the band reuse the outer container's. */
.sr-hero-band > .sr-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   MOBILE  (< 768px)  — search_results_page_mobile/code.html
   ============================================================ */

/* ---- search control area (white card, full-bleed) ---- */
.sr-m-searcharea {
    width: 100%;
    padding: 16px 16px 8px;
    background-color: var(--st-surface-container-lowest);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sr-m-label {
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: var(--st-secondary);
    text-transform: uppercase;
}
.sr-m-form { display: flex; align-items: center; gap: 4px; width: 100%; }
.sr-m-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    background-color: var(--st-surface-container-low);
    border-radius: 0.75rem;
    padding-left: 8px;
    padding-right: 8px;
    height: 48px;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
}
.sr-m-field .material-symbols-outlined { font-size: 20px; color: var(--st-secondary); margin-right: 4px; user-select: none; }
.sr-m-input {
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--st-on-surface);
    font-size: 1rem;
    line-height: 1.625rem;
    font-family: inherit;
    padding-right: 28px;
    text-overflow: ellipsis;
}
.sr-m-input::placeholder { color: var(--st-text-muted); }
.sr-m-clear {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--st-text-muted);
}
.sr-m-clear .material-symbols-outlined { font-size: 18px; }
.sr-m-submit {
    height: 48px;
    padding: 0 16px;
    border-radius: 0.75rem;
    /* Brand red, matching the tablet/desktop submit. The mobile artifact originally
       used --sr-on-tertiary-container (#f63949), which is a lighter red: white text on
       it only reaches 3.75:1 and fails WCAG AA for normal-size text, and its jump to
       the shared hover red read as a colour change rather than a hover. */
    background-color: var(--sr-accent);
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
    flex-shrink: 0;
}
.sr-m-submit .material-symbols-outlined { font-size: 18px; }
.sr-m-submit:hover { background-color: var(--sr-accent-hover); }

.sr-m-clear-btn {
    height: 48px;
    padding: 0 16px;
    border-radius: 0.75rem;
    background-color: var(--st-surface-container);
    color: var(--st-on-surface);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
    flex-shrink: 0;
}
.sr-m-clear-btn .material-symbols-outlined { font-size: 18px; color: var(--st-on-surface); }
.sr-m-clear-btn:hover { background-color: var(--st-surface-container-high); }

.sr-t-clear-btn,
.sr-d-clear-btn {
    height: 48px;
    padding: 0 20px;
    border-radius: 0.25rem;
    background-color: var(--st-surface-container);
    color: var(--st-on-surface);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
    flex-shrink: 0;
}
.sr-t-clear-btn:hover,
.sr-d-clear-btn:hover { background-color: var(--st-surface-container-high); }

.stitch .sr-m-clear-btn,
.stitch .sr-t-clear-btn,
.stitch .sr-d-clear-btn {
    background-color: var(--st-surface-container);
    color: var(--st-on-surface);
    border: 0;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.stitch .sr-m-clear-btn:hover,
.stitch .sr-t-clear-btn:hover,
.stitch .sr-d-clear-btn:hover { background-color: var(--st-surface-container-high); }
.stitch .sr-m-clear-btn:focus-visible,
.stitch .sr-t-clear-btn:focus-visible,
.stitch .sr-d-clear-btn:focus-visible {
    outline: 2px solid var(--st-primary);
    outline-offset: 2px;
}

/* Shared submit-button behaviour. The three breakpoint artifacts each restate the
   button, so the resolved default, hover and focus states are declared once here.

   These rules are prefixed with `.stitch` deliberately. The landing reset at
   `.stitch button { background: none; color: inherit }` has specificity (0,1,1),
   which outranks a bare `.sr-d-submit` (0,1,0): the default state was being reset to a
   transparent box with inherited text, so the button rendered as a white box with
   white text while its :hover rule (0,2,0) still worked. Prefixing to (0,2,0) wins,
   matching how .st-search-submit escapes the same reset. */
.stitch .sr-m-submit,
.stitch .sr-t-submit,
.stitch .sr-d-submit {
    background-color: var(--sr-accent);
    color: #ffffff;
    border: 0;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.stitch .sr-m-submit .material-symbols-outlined,
.stitch .sr-t-submit .material-symbols-outlined,
.stitch .sr-d-submit .material-symbols-outlined { color: #ffffff; }

.stitch .sr-m-submit:hover,
.stitch .sr-t-submit:hover,
.stitch .sr-d-submit:hover { background-color: var(--sr-accent-hover); }

/* The Stitch export carried no focus-visible rule at all, which left the primary
   search action with only the UA default ring. */
.stitch .sr-m-submit:focus-visible,
.stitch .sr-t-submit:focus-visible,
.stitch .sr-d-submit:focus-visible {
    outline: 2px solid var(--st-primary);
    outline-offset: 2px;
}

/* The clear control is icon-only, so a keyboard user has no hover state to fall back on
   and no visual cue at all for where focus is. Same treatment as the submit buttons. */
.stitch .sr-m-clear:focus-visible,
.stitch .sr-t-clear:focus-visible,
.stitch .sr-d-clear:focus-visible {
    outline: 2px solid var(--st-primary);
    outline-offset: 2px;
}

/* ---- filter bar ---- */
.sr-m-filterbar { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding-top: 4px; }
.sr-m-filterbar-left { display: flex; align-items: center; gap: 4px; }
.sr-m-filter-toggle {
    height: 36px;
    padding: 0 8px;
    border-radius: 0.75rem;
    background-color: var(--sr-primary-container);
    color: var(--st-on-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
}
.sr-m-filter-toggle .material-symbols-outlined { font-size: 16px; }
.sr-m-filter-count {
    background-color: var(--st-surface-container-lowest);
    color: var(--sr-primary-container);
    padding: 2px 6px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}
.sr-m-showing { font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; color: var(--st-text-muted); }
.sr-m-reset-top {
    color: var(--sr-on-tertiary-container);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 4px 6px;
}
.sr-m-reset-top:hover { text-decoration: underline; }

/* ---- collapsible filter drawer ---- */
.sr-m-drawer {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 16px 8px 4px;
    margin-top: 8px;
    background-color: var(--st-surface-container-low);
    border-radius: 0.75rem;
}
.sr-m-drawer.open { display: flex; }
.sr-m-field-group { display: flex; flex-direction: column; gap: 4px; }
.sr-m-field-group .sr-m-label { letter-spacing: 0; }
.sr-m-selectwrap { position: relative; }
.sr-m-select {
    width: 100%;
    height: 40px;
    padding: 0 32px 0 12px;
    border: 0;
    border-radius: 0.5rem;
    background-color: var(--st-surface);
    color: var(--st-on-surface);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
    outline: none;
}
.sr-m-selectwrap .material-symbols-outlined {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    color: var(--st-secondary);
    pointer-events: none;
}
.sr-m-drawer-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.sr-m-apply {
    height: 32px;
    padding: 0 16px;
    background-color: var(--sr-primary-container);
    color: var(--st-on-primary);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* ---- active filter chips ---- */
.sr-m-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 8px; padding-bottom: 4px; }
.sr-m-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    background-color: var(--sr-secondary-container);
    color: var(--sr-on-secondary-fixed);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.sr-m-chip .material-symbols-outlined { font-size: 14px; }
.sr-m-reset-all {
    color: var(--sr-on-tertiary-container);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    padding: 4px 0;
    text-decoration: underline;
}

/* ---- feed ---- */
.sr-m-feed { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.sr-m-card {
    display: flex;
    flex-direction: column;
    background-color: var(--st-surface-container-lowest);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
    overflow: hidden;
}
.sr-m-media { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: var(--st-surface-container); }
.sr-m-media img { width: 100%; height: 100%; object-fit: cover; }
.sr-m-badges { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; }
.sr-m-lang {
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--sr-primary-container);
    padding: 2px 8px;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sr-m-sourcebadge {
    background-color: rgba(14, 28, 47, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--st-on-primary);
    padding: 2px 8px;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sr-m-sourcebadge .material-symbols-outlined { font-size: 12px; }
.sr-m-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.sr-m-attrib {
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    color: var(--st-secondary);
    line-height: 1.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sr-m-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: -0.005em;
    font-weight: 600;
    color: var(--st-on-surface);
    line-height: 1.4;
}
.sr-m-excerpt {
    font-size: 1rem;
    line-height: 1.625rem;
    color: var(--st-on-surface-variant);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sr-m-actions { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; margin-top: 4px; }
.sr-m-taggroup { display: flex; align-items: center; gap: 6px; }
.sr-m-tag {
    background-color: var(--st-surface-container-low);
    color: var(--st-secondary);
    padding: 2px 8px;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.sr-m-link {
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 600;
    color: var(--sr-on-tertiary-container);
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
}
.sr-m-link .material-symbols-outlined { font-size: 16px; }
.sr-m-link:hover { color: var(--sr-accent-hover); }

/* ---- bottom continuous-discovery indicator ---- */
.sr-m-bottom { width: 100%; padding: 4px 16px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sr-m-bottomcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 24px;
    background-color: var(--st-surface-container-lowest);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
    width: 100%;
    text-align: center;
}
.sr-m-bottomrow { display: flex; align-items: center; gap: 8px; color: var(--st-secondary); }
.sr-m-spinner { animation: sr-spin 1s linear infinite; width: 16px; height: 16px; color: var(--sr-on-tertiary-container); }
.sr-m-bottomtext { font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; color: var(--st-on-surface); }
.sr-m-hint { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.03em; font-weight: 600; color: var(--st-text-muted); }

@keyframes sr-spin { to { transform: rotate(360deg); } }

/* ---- mobile bottom tab bar lives in the shared App Shell (stitch-landing.css) ---- */

/* ============================================================
   TABLET  (768px – 1023.98px) — search_results_page_tablet
   ============================================================ */
@media (min-width: 768px) {
    .sr-mobile-only { display: none; }
    .sr-tablet-only { display: block; }

    .sr-container { padding-left: 40px; padding-right: 40px; }

    .sr-t-page {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        padding: 24px 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* header block (no white band on tablet) */
    .sr-t-header { display: flex; flex-direction: column; gap: 4px; }
    .sr-t-badgerow { display: flex; align-items: center; gap: 8px; }
    .sr-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 0.25rem;
        background-color: var(--st-surface-container-high);
        color: var(--st-on-surface-variant);
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.03em;
        font-weight: 600;
        text-transform: uppercase;
    }
    .sr-badge .sr-dot { width: 6px; height: 6px; border-radius: 9999px; background-color: var(--sr-accent-hover); }
    .sr-t-dualstream { display: inline-flex; align-items: center; font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; color: var(--st-text-muted); }
    .sr-h1 { font-size: 2.5rem; line-height: 3rem; letter-spacing: -0.025em; font-weight: 700; color: var(--st-on-surface); }
    .sr-lead {
        font-size: 1rem;
        line-height: 1.625rem;
        color: var(--st-on-surface-variant);
        /* Was max-width:768px. In this band the hero is a single full-width stacked
           column, so the lead should use the page content width instead of wrapping
           early against an unused right gutter. */
        max-width: none;
        line-height: 1.625rem;
    }

    /* search + filters card */
    .sr-t-panel {
        background-color: var(--st-surface);
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .sr-t-form { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
    .sr-t-field { position: relative; flex: 1; display: flex; align-items: center; }
    .sr-t-field > .material-symbols-outlined {
        position: absolute;
        left: 14px;
        font-size: 22px;
        color: var(--st-on-surface-variant);
        pointer-events: none;
    }
    .sr-t-input {
        width: 100%;
        height: 48px;
        padding: 0 40px 0 44px;
        border: 0;
        border-radius: 0.25rem;
        background-color: var(--st-surface-container-low);
        color: var(--st-on-surface);
        font-size: 1rem;
        line-height: 1.625rem;
        font-family: inherit;
        outline: none;
    }
    .sr-t-input::placeholder { color: var(--st-text-muted); }
    .sr-t-input:focus { background-color: var(--st-surface); box-shadow: 0 0 0 2px #0B192C; }
    .sr-t-clear {
        position: absolute;
        right: 12px;
        padding: 4px;
        border-radius: 9999px;
        color: var(--st-on-surface-variant);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sr-t-clear .material-symbols-outlined { font-size: 18px; }
    .sr-t-clear:hover { background-color: var(--sr-surface-variant); }
    .sr-t-submit {
        height: 48px;
        padding: 0 24px;
        border-radius: 0.25rem;
        background-color: var(--sr-accent);
        color: var(--st-on-primary);
        font-size: 0.875rem;
        line-height: 1.375rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
        flex-shrink: 0;
    }
    .sr-t-submit .material-symbols-outlined { font-size: 20px; }
    .sr-t-submit:hover { background-color: var(--sr-accent-hover); }

    .sr-t-filtergrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 4px; }
    .sr-t-fieldgroup { display: flex; flex-direction: column; gap: 4px; }
    .sr-t-fieldlabel {
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.03em;
        font-weight: 600;
        color: var(--st-text-muted);
        text-transform: uppercase;
    }
    .sr-t-selectwrap { position: relative; display: flex; align-items: center; }
    .sr-t-select {
        width: 100%;
        height: 40px;
        padding: 0 36px 0 12px;
        border: 0;
        border-radius: 0.25rem;
        background-color: var(--st-surface-container-low);
        color: var(--st-on-surface);
        font-size: 0.875rem;
        line-height: 1.375rem;
        font-weight: 500;
        font-family: inherit;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
        cursor: pointer;
    }
    .sr-t-select:focus { box-shadow: 0 0 0 2px #0B192C; }
    .sr-t-selectwrap .material-symbols-outlined {
        position: absolute;
        right: 10px;
        font-size: 20px;
        color: var(--st-on-surface-variant);
        pointer-events: none;
    }

    .sr-t-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 4px; }
    .sr-t-chipslabel {
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.03em;
        font-weight: 600;
        color: var(--st-on-surface-variant);
        text-transform: uppercase;
        padding-right: 4px;
    }
    .sr-t-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px 4px 12px;
        border-radius: 0.25rem;
        background-color: var(--sr-navy);
        color: #ffffff;
        font-size: 0.875rem;
        line-height: 1.375rem;
        font-weight: 500;
    }
    .sr-t-chip button {
        width: 16px;
        height: 16px;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: inherit;
    }
    .sr-t-chip button:hover { background-color: rgba(255, 255, 255, 0.2); }
    .sr-t-chip .material-symbols-outlined { font-size: 14px; }
    .sr-t-reset {
        margin-left: auto;
        font-size: 0.875rem;
        line-height: 1.375rem;
        font-weight: 600;
        color: var(--sr-accent);
        padding: 4px 8px;
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .sr-t-reset:hover { color: var(--sr-accent-hover); }

    /* feed */
    .sr-t-feed { display: flex; flex-direction: column; gap: 16px; }
    .st-recent-card {
        background-color: var(--st-surface);
        border-radius: 0.5rem;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(11, 25, 44, 0.04);
        display: flex;
        gap: 16px;
        align-items: flex-start;
        transition: box-shadow 200ms ease;
    }
    .st-recent-card:hover { box-shadow: 0 8px 16px -2px rgba(11, 25, 44, 0.06), 0 2px 4px -1px rgba(11, 25, 44, 0.03); }
    .sr-t-media {
        width: 224px;
        height: 160px;
        flex-shrink: 0;
        border-radius: 0.25rem;
        overflow: hidden;
        position: relative;
        background-color: var(--st-surface-container);
    }
    .sr-t-media img { width: 100%; height: 100%; object-fit: cover; }
    .sr-t-kind {
        position: absolute;
        top: 8px;
        left: 8px;
        padding: 2px 8px;
        border-radius: 0.25rem;
        background-color: rgba(255, 255, 255, 0.9);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        color: var(--st-on-surface);
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.03em;
        font-weight: 700;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .sr-t-langpill {
        position: absolute;
        top: 8px;
        right: 8px;
        padding: 2px 6px;
        border-radius: 0.25rem;
        background-color: var(--st-primary);
        color: var(--st-on-primary);
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.03em;
        font-weight: 700;
    }
    .sr-t-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .sr-t-attrib { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; color: var(--st-on-surface-variant); }
    .sr-t-publisher { font-weight: 600; color: var(--st-on-surface); }
    .sr-t-type { color: var(--st-text-muted); }
    .sr-t-title {
        font-size: 1.25rem;
        line-height: 1.75rem;
        letter-spacing: -0.005em;
        font-weight: 600;
        color: var(--st-on-surface);
        letter-spacing: -0.005em;
        transition: color 150ms ease;
    }
    .sr-t-card:hover .sr-t-title { color: var(--st-primary); }
    .sr-t-excerpt {
        font-size: 1rem;
        line-height: 1.625rem;
        color: var(--st-secondary);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.625rem;
    }
    .sr-t-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; margin-top: auto; }
    .sr-t-tag { padding: 2px 10px; border-radius: 0.25rem; background-color: var(--st-surface-container-high); color: var(--st-on-surface-variant); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.03em; font-weight: 600; }
    .sr-t-link { font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--sr-accent); display: inline-flex; align-items: center; gap: 4px; transition: color 150ms ease; }
    .sr-t-link .material-symbols-outlined { font-size: 16px; transition: transform 200ms ease; }
    .sr-t-card:hover .sr-t-link { color: var(--sr-accent-hover); }
    .sr-t-card:hover .sr-t-link .material-symbols-outlined { transform: translateX(2px); }

    .sr-t-loader { width: 100%; padding: 40px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
    .sr-t-loaderrow { display: flex; align-items: center; gap: 8px; color: var(--st-on-surface-variant); font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; }
    .sr-t-spinner { animation: sr-spin 1s linear infinite; width: 20px; height: 20px; color: var(--st-secondary); }
}

/* ============================================================
   DESKTOP  (>= 1024px) — search_results_page_desktop
   ============================================================ */
@media (min-width: 1024px) {
    .sr-tablet-only { display: none; }
    .sr-desktop-only { display: block; }

    .sr-container { padding-left: 80px; padding-right: 80px; }

    .sr-hero-band { display: block; width: 100%; background-color: var(--st-surface); padding: 40px 0; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
    .sr-hero-row { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
    .sr-hero-left { max-width: none; }
    .sr-hero-badgerow { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
    .sr-hero-badgerow .sr-badge { text-transform: uppercase; letter-spacing: 0.05em; }
    .sr-sep { color: var(--st-text-muted); font-size: 0.75rem; }
    .sr-hero-meta { font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; color: var(--st-text-muted); }
    .sr-hero-h1 { font-size: 2.5rem; line-height: 3rem; letter-spacing: -0.025em; font-weight: 700; color: var(--st-on-surface); margin-bottom: 4px; }
    .sr-hero-lead { font-size: 1rem; line-height: 1.625rem; color: var(--st-on-surface-variant); max-width: none; line-height: 1.625rem; }
    .sr-corpus { display: none; }

    /* search + dropdown filter toolbar */
    .sr-d-panel {
        margin-top: 24px;
        background-color: var(--st-surface-container-lowest);
        padding: 0 1rem;
        border-radius: 0.25rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }
    .sr-d-form { display: flex; flex-direction: row; align-items: center; gap: 4px; width: 100%; margin-top: 1rem; }
    .sr-d-field { position: relative; flex: 1; width: 100%; display: flex; align-items: center; background-color: var(--st-surface-container-low); border-radius: 0.25rem; }
    .sr-d-field > .material-symbols-outlined { color: var(--st-text-muted); margin-left: 12px; user-select: none; }
    .sr-d-input {
        width: 100%;
        background: transparent;
        border: 0;
        outline: none;
        padding: 12px;
        color: var(--st-on-surface);
        font-size: 1rem;
        line-height: 1.625rem;
        font-family: inherit;
    }
    .sr-d-input::placeholder { color: var(--st-text-muted); }
    .sr-d-clear { padding: 8px; margin-right: 4px; color: var(--st-text-muted); }
    .sr-d-clear .material-symbols-outlined { font-size: 20px; }
    .sr-d-clear:hover { color: var(--st-on-surface); }
    .sr-d-submit {
        width: auto;
        height: 48px;
        padding: 0 24px;
        background-color: var(--sr-accent);
        color: var(--st-on-primary);
        font-size: 0.875rem;
        line-height: 1.375rem;
        font-weight: 600;
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .sr-d-submit .material-symbols-outlined { font-size: 20px; }
    .sr-d-submit:hover { background-color: var(--sr-accent-hover); }

    .sr-d-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-top: 4px; padding-bottom: 1rem; }
    .sr-dd { position: relative; }
    .sr-dd-btn {
        height: 36px;
        padding: 0 8px;
        background-color: var(--st-surface-container);
        color: var(--st-on-surface);
        font-size: 0.875rem;
        line-height: 1.375rem;
        border-radius: 0.25rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .sr-dd-btn:hover { background-color: var(--st-surface-container-high); }
    .sr-dd-label { color: var(--st-text-muted); font-weight: 400; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
    .sr-dd-value { font-weight: 500; font-size: 0.875rem; }
    .sr-dd-btn .material-symbols-outlined { font-size: 16px; color: var(--st-text-muted); }
    .sr-dd-menu {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 4px;
        width: 224px;
        background-color: var(--st-surface);
        border-radius: 0.25rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        padding: 6px 0;
        z-index: 40;
    }
    .sr-dd-menu.narrow { width: 208px; }
    .sr-dd:hover .sr-dd-menu, .sr-dd:focus-within .sr-dd-menu { display: block; }
    .sr-dd-menuhead { padding: 4px 12px; font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.03em; font-weight: 600; color: var(--st-text-muted); text-transform: uppercase; }
    .sr-dd-opt { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; color: var(--st-on-surface-variant); cursor: pointer; }
    .sr-dd-opt:hover { background-color: var(--st-surface-container-low); }
    .sr-dd-opt.selected { color: var(--st-on-surface); font-weight: 500; }
    .sr-dd-opt input { accent-color: var(--sr-accent); width: 16px; height: 16px; }
    .sr-dd-link { display: block; padding: 6px 12px; font-size: 0.75rem; font-weight: 500; color: var(--st-on-surface-variant); }
    .sr-dd-link:hover { background-color: var(--st-surface-container-low); }
    .sr-dd-link.selected { color: var(--st-on-surface); font-weight: 600; background-color: var(--st-surface-container-low); }

    /* active filter ribbon (empty in the approved desktop artifact) */
    .sr-ribbon { display: block; width: 100%; background-color: var(--sr-surface-bright); padding: 8px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); }
    .sr-ribbon-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

    /* feed */
    .sr-d-feed { width: 100%; padding: 24px 0; }
    .sr-d-list { display: flex; flex-direction: column; gap: 16px; }
    .sr-d-card {
        background-color: var(--st-surface);
        border-radius: 0.25rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: box-shadow 200ms ease;
    }
    .sr-d-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
    .sr-d-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .sr-d-media { grid-column: span 3; position: relative; height: 100%; min-height: 190px; overflow: hidden; background-color: var(--st-surface-container-high); }
    .sr-d-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 300ms ease; }
    .sr-d-card:hover .sr-d-media img { transform: scale(1.05); }
    .sr-d-lang {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .sr-d-lang span {
        padding: 2px 8px;
        border-radius: 0.25rem;
        background-color: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        color: var(--st-on-surface);
        font-size: 0.75rem;
        line-height: 1rem;
        letter-spacing: 0.03em;
        font-weight: 700;
        text-transform: uppercase;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .sr-d-content { grid-column: span 9; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
    .sr-d-attrib { display: flex; align-items: center; gap: 4px; color: var(--st-text-muted); font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; font-size: 0.75rem; margin-bottom: 4px; }
    .sr-d-publisher { font-weight: 600; color: var(--st-on-surface-variant); }
    .sr-d-title {
        font-size: 1.25rem;
        line-height: 1.75rem;
        letter-spacing: -0.005em;
        font-weight: 600;
        color: var(--st-on-surface);
        margin-bottom: 4px;
        transition: color 150ms ease;
    }
    .sr-d-card:hover .sr-d-title { color: var(--st-primary-container); }
    .sr-d-title a:hover { text-decoration: underline; }
    .sr-d-excerpt {
        font-size: 1rem;
        line-height: 1.625rem;
        color: var(--st-on-surface-variant);
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .sr-d-cardfoot { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
    .sr-d-tags { display: flex; align-items: center; gap: 4px; }
    .sr-d-tag { padding: 2px 8px; border-radius: 0.25rem; background-color: var(--st-surface-container); color: var(--st-on-surface-variant); font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.03em; font-weight: 600; }
    .sr-d-link { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-on-surface); font-weight: 600; display: flex; align-items: center; gap: 4px; transition: color 150ms ease; }
    .sr-d-link .material-symbols-outlined { font-size: 18px; }
    .sr-d-card:hover .sr-d-link { color: var(--sr-accent); }

    /* continuous loading state */
    .sr-d-loader { width: 100%; margin-top: 40px; padding: 24px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .sr-d-loaderrow { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
    .sr-d-ping { width: 10px; height: 10px; border-radius: 9999px; background-color: var(--st-primary); animation: sr-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
    .sr-d-loadtext { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-on-surface); font-weight: 500; }
    .sr-d-hint { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.03em; font-weight: 600; color: var(--st-text-muted); }
    .sr-d-progress { width: 256px; height: 4px; background-color: var(--st-surface-container-high); border-radius: 9999px; overflow: hidden; margin-top: 8px; }
    .sr-d-progress span { display: block; width: 50%; height: 100%; background-color: var(--sr-accent); border-radius: 9999px; animation: sr-pulse 1.5s ease-in-out infinite; }

    @keyframes sr-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
    @keyframes sr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
}

@media (min-width: 1280px) {
    /* Only from this width does the hero become a two-column row with .sr-corpus beside
       it, so the text column needs its measure capped again to keep a readable line
       length and to leave room for the corpus widget. Below 1280 the hero is stacked and
       .sr-hero-left/.sr-hero-lead are intentionally full width. */
    .sr-corpus {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 8px;
        background-color: var(--st-surface-container-low);
        border-radius: 0.25rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .sr-corpus-col { display: flex; flex-direction: column; }
    .sr-corpus-label { font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.03em; font-weight: 600; color: var(--st-text-muted); text-transform: uppercase; }
    .sr-corpus-value { font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--st-on-surface); }
}

/* ============================================================
   Specificity overrides.
   stitch-landing.css resets `.stitch h1, .stitch h2 { margin: 0 }` at a higher
   specificity than the single-class rules above, which suppressed the artifact's
   heading tracking and the desktop H1 bottom margin. Re-assert them scoped to
   .stitch so the Stitch metrics win.
   ============================================================ */
.stitch .sr-hero-badgerow { margin-bottom: 1rem; }
.stitch .sr-hero-h1 { letter-spacing: -0.025em; margin-bottom: 1rem; }
.stitch .sr-h1 { letter-spacing: -0.025em; }
.stitch .sr-d-title,
.stitch .sr-t-title,
.stitch .sr-m-title { letter-spacing: -0.005em; }
.stitch .sr-d-excerpt { margin-bottom: 16px; }
.stitch .sr-corpus-label,
.stitch .sr-t-fieldlabel,
.stitch .sr-m-label,
.stitch .sr-dd-label,
.stitch .sr-badge { letter-spacing: 0.03em; }
.stitch .sr-hero-badgerow .sr-badge,
.stitch .sr-dd-label { letter-spacing: 0.05em; }

/* The global `.stitch button { background: none; color: inherit }` reset is
   (0,1,1), which outranks the single-class `.sr-dd-btn` rule (0,1,0). The
   filter buttons therefore rendered with no surface at rest and only looked
   like controls on hover, while the search field directly above them
   (.sr-d-field) and the tablet filter select (.sr-t-select) both sit on a
   filled container surface. Restating behind a `.stitch` prefix raises this to
   (0,2,0) and wins — the same remedy already applied to .st-search-submit.
   No new colours: these are the tokens the base rule already declared. */
.stitch .sr-dd-btn { background-color: var(--st-surface-container); color: var(--st-on-surface); }
/* The desktop filter buttons had no focus-visible rule of their own, so keyboard
   focus relied on the UA ring alone. Matches the treatment already used for
   .st-search-submit so every primary control in the app focuses the same way. */
.stitch .sr-dd-btn:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }