/* Token stack copied from examples/theannoying-degoog-extensions/themes/LiterallyGoogle/style.css */
@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap");

* {
    font-family: "Google Sans";
}

:root {
    /* Repo-only: results grid / layout (not in the upstream example file). */
    --literallygoogle-results-content-inline-start: calc(
        1.25rem + 0.75rem + 1rem + 3.35 * clamp(1.875rem, 3rem - 2.5vw, 2.5rem)
    );
    --literallygoogle-results-layout-max: 76rem;
    --literallygoogle-results-main-col-max: 48rem;
    --literallygoogle-results-sidebar-min: 19rem;
    --literallygoogle-results-sidebar-max: 24rem;
    --primary: #4285f4;
    --primary-hover: #5a95f5;
    --primary-rgb: 66, 133, 244;
    --danger: #ea4335;
    --warning: #fbbc05;
    --success: #34a853;
    --bg: #1f1f1f;
    --bg-light: #303134;
    --bg-hover: #3c4043;
    --border: #5f6368;
    --border-light: #444746;
    --text-primary: #e8eaed;
    --text-secondary: #80868b;
    --text-link: #99c3ff;
    --text-link-visited: #c58af9;
    --text-cite: #bdc1c6;
    --text-snippet: #bdc1c6;
    --search-bar-bg: #4d5156;
    --search-bar-bg-hover: #5f6368;
    --search-bar-focused: #303134;
    --search-bar-icon: #e8e8e8;
    --btn-bg: #303134;
    --btn-text: #e8eaed;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --white: #fff;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme=dark]) {
        --primary: #4285f4;
        --primary-hover: #5a95f5;
        --primary-rgb: 66, 133, 244;
        --danger: #ea4335;
        --warning: #fbbc05;
        --success: #34a853;
        --bg: #fff;
        --bg-light: #f8f9fa;
        --bg-hover: #e8eaed;
        --border: #dadce0;
        --border-light: #d2d2d2;
        --text-primary: #202124;
        --text-secondary: #70757a;
        --text-link: #1a0dab;
        --text-link-visited: #681da8;
        --text-cite: #202124;
        --text-snippet: #4d5156;
        --search-bar-bg: #ebebeb;
        --search-bar-bg-hover: #ebebeb;
        --search-bar-focused: white;
        --search-bar-icon: #1f1f1f;
        --btn-bg: #f8f9fa;
        --btn-text: #3c4043;
        --overlay-bg: rgba(0, 0, 0, 0.4);
        --white: #fff;
    }
}

[data-theme="light"] {
    --primary: #4285f4;
    --primary-hover: #5a95f5;
    --primary-rgb: 66, 133, 244;
    --danger: #ea4335;
    --warning: #fbbc05;
    --success: #34a853;
    --bg: #fff;
    --bg-light: #f8f9fa;
    --bg-hover: #e8eaed;
    --border: #dadce0;
    --border-light: #d2d2d2;
    --text-primary: #202124;
    --text-secondary: #70757a;
    --text-link: #1a0dab;
    --text-link-visited: #681da8;
    --text-cite: #202124;
    --text-snippet: #4d5156;
    --search-bar-bg: #ebebeb;
    --search-bar-bg-hover: #ebebeb;
    --search-bar-focused: white;
    --search-bar-icon: #1f1f1f;
    --btn-bg: #f8f9fa;
    --btn-text: #3c4043;
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --white: #fff;
}

[data-theme="dark"] {
    --primary: #4285f4;
    --primary-hover: #5a95f5;
    --primary-rgb: 66, 133, 244;
    --danger: #ea4335;
    --warning: #fbbc05;
    --success: #34a853;
    --bg: #1f1f1f;
    --bg-light: #303134;
    --bg-hover: #3c4043;
    --border: #5f6368;
    --border-light: #444746;
    --text-primary: #e8eaed;
    --text-secondary: #80868b;
    --text-link: #99c3ff;
    --text-link-visited: #c58af9;
    --text-cite: #bdc1c6;
    --text-snippet: #bdc1c6;
    --search-bar-bg: #4d5156;
    --search-bar-bg-hover: #5f6368;
    --search-bar-focused: #303134;
    --search-bar-icon: #e8e8e8;
    --btn-bg: #303134;
    --btn-text: #e8eaed;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --white: #fff;
}

/* Home multicolor wordmark: only force plain white in dark UI (matches dark home). */
[data-theme="dark"] .logo-d,
[data-theme="dark"] .logo-e,
[data-theme="dark"] .logo-g1,
[data-theme="dark"] .logo-o1,
[data-theme="dark"] .logo-o2,
[data-theme="dark"] .logo-g2 {
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-d,
    :root:not([data-theme="light"]) .logo-e,
    :root:not([data-theme="light"]) .logo-g1,
    :root:not([data-theme="light"]) .logo-o1,
    :root:not([data-theme="light"]) .logo-o2,
    :root:not([data-theme="light"]) .logo-g2 {
        color: #fff !important;
    }
}

.logo {
    letter-spacing: -4px;
    font-size: 92px;
}

.results-search-bar,
.search-bar {
    display: flex;
    align-items: center;
}

.results-search-bar,
.search-bar {
    font-family: "Google Sans" !important;
    font-weight: 100;
    height: 50px;
}

.results-search-bar {
    position: relative;
    box-sizing: border-box;
}

.results-search-bar .search-bar-actions {
    flex-shrink: 0;
}

.results-search-bar .search-submit-btn {
    flex-shrink: 0;
}



.search-input {
    flex: 1;
    width: 100%;
    font-family: "Google Sans" !important;
    font-weight: 100;
    height: 50px;
    background: transparent;
    border: none;
    outline: none;
}

.search-icon {
    display: block !important;
    flex-shrink: 0;
}

.search-submit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 14px;
    height: 100%;
    display: flex;
    align-items: center;
}

.results-search-bar:has(.search-input:focus),
.search-bar:has(.search-input:focus) {
    background: var(--search-bar-focused);
}

.results-search-bar:focus-within,
.search-bar:focus-within {
    background: var(--search-bar-focused);
}

[data-theme="light"] .results-search-bar,
[data-theme="light"] .search-bar {
    /* Match examples/theannoying-degoog-extensions/themes/LiterallyGoogle (AGENTS.md: examples/ is reference). */
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
    transition:
        box-shadow 0.16s ease,
        border-color 0.16s ease,
        border-radius 0.16s ease;
}

[data-theme="light"] .results-search-bar:hover,
[data-theme="light"] .search-bar:hover {
    box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
}

/* Merged bar + dropdown when the AC panel is visibly open. Inline display toggles
   are brittle; extra :has() branches cover common open values. If core moves to
   hidden/class-only, revisit against degoog autocomplete markup. */
[data-theme="light"]
    .results-search-bar:is(
        :has(> .ac-dropdown:not([style*="display: none"])),
        :has(> .bang-ac-dropdown:not([style*="display: none"])),
        :has(> .ac-dropdown[style*="display: block"]),
        :has(> .bang-ac-dropdown[style*="display: block"]),
        :has(> .ac-dropdown[style*="display: flex"]),
        :has(> .bang-ac-dropdown[style*="display: flex"]),
        :has(> .ac-dropdown[style*="display:flex"]),
        :has(> .bang-ac-dropdown[style*="display:flex"]),
        :has(> .ac-dropdown[style*="display: grid"]),
        :has(> .bang-ac-dropdown[style*="display: grid"]),
        :has(> .ac-dropdown[style*="display:grid"]),
        :has(> .bang-ac-dropdown[style*="display:grid"])
    ),
[data-theme="light"]
    .search-bar:is(
        :has(> .ac-dropdown:not([style*="display: none"])),
        :has(> .bang-ac-dropdown:not([style*="display: none"])),
        :has(> .ac-dropdown[style*="display: block"]),
        :has(> .bang-ac-dropdown[style*="display: block"]),
        :has(> .ac-dropdown[style*="display: flex"]),
        :has(> .bang-ac-dropdown[style*="display: flex"]),
        :has(> .ac-dropdown[style*="display:flex"]),
        :has(> .bang-ac-dropdown[style*="display:flex"]),
        :has(> .ac-dropdown[style*="display: grid"]),
        :has(> .bang-ac-dropdown[style*="display: grid"]),
        :has(> .ac-dropdown[style*="display:grid"]),
        :has(> .bang-ac-dropdown[style*="display:grid"])
    ) {
    border-color: #dadce0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    /* Single elevation (multi-layer shadow read as a double halo). */
    box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
}

[data-theme="light"] .results-search-bar.ac-open,
[data-theme="light"] .search-bar.ac-open {
    border-color: #dadce0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
}

/* Dark / default: no separate bar shadow while AC is open (dropdown carries depth). */
[data-theme="dark"] .results-search-bar.ac-open,
[data-theme="dark"] .search-bar.ac-open {
    box-shadow: none !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .results-search-bar.ac-open,
    :root:not([data-theme="light"]) .search-bar.ac-open {
        box-shadow: none !important;
    }
}

.ac-dropdown,
.bang-ac-dropdown {
    background: var(--search-bar-focused);
    /* Bottom + sides only (negative spread trims upward blur). */
    box-shadow:
        5px 10px 14px -8px rgba(0, 0, 0, 0.45),
        -5px 10px 14px -8px rgba(0, 0, 0, 0.45),
        0 12px 18px -8px rgba(0, 0, 0, 0.4) !important;
}

/*
 * Suggestions (`.ac-dropdown`) and bang AC (`.bang-ac-dropdown`) are siblings under the bar.
 * If both are `display: block` briefly or due to a race, two identical shadows stack. Only the
 * pane that is “active” should cast elevation; the other drops shadow (merged bar shadow on light
 * already carries depth).
 */
.results-search-bar:has(> .ac-dropdown[style*="display: block"])
    > .bang-ac-dropdown,
.results-search-bar:has(> .ac-dropdown[style*="display:block"])
    > .bang-ac-dropdown,
.results-search-bar:has(> .ac-dropdown[style*="display: flex"])
    > .bang-ac-dropdown,
.search-bar:has(> .ac-dropdown[style*="display: block"]) > .bang-ac-dropdown,
.search-bar:has(> .ac-dropdown[style*="display:block"]) > .bang-ac-dropdown,
.search-bar:has(> .ac-dropdown[style*="display: flex"]) > .bang-ac-dropdown {
    box-shadow: none !important;
}

.results-search-bar:has(> .bang-ac-dropdown[style*="display: block"])
    > .ac-dropdown,
.results-search-bar:has(> .bang-ac-dropdown[style*="display:block"])
    > .ac-dropdown,
.results-search-bar:has(> .bang-ac-dropdown[style*="display: flex"])
    > .ac-dropdown,
.search-bar:has(> .bang-ac-dropdown[style*="display: block"]) > .ac-dropdown,
.search-bar:has(> .bang-ac-dropdown[style*="display:block"]) > .ac-dropdown,
.search-bar:has(> .bang-ac-dropdown[style*="display: flex"]) > .ac-dropdown {
    box-shadow: none !important;
}

#apps-pocket-panel {
    border-top: 1px solid #5f6368;
    background: var(--search-bar-focused);
    box-shadow:
        5px 10px 14px -8px rgba(0, 0, 0, 0.45),
        -5px 10px 14px -8px rgba(0, 0, 0, 0.45),
        0 12px 18px -8px rgba(0, 0, 0, 0.4) !important;
}

/* Autocomplete: align panel edges to the bar border box (no fractional nudging). */
.results-search-bar > .ac-dropdown,
.results-search-bar > .bang-ac-dropdown,
.search-bar > .ac-dropdown,
.search-bar > .bang-ac-dropdown {
    margin-top: 0;
    inset-inline-start: -1px;
    inset-inline-end: -1px;
    width: auto;
    box-sizing: border-box;
}

/* If `.ac-open` lingers while both panes are hidden/absent, restore rounded bar. */
.results-search-bar.ac-open:not(
        :has(> .ac-dropdown:not([style*="display: none"]))
    ):not(:has(> .bang-ac-dropdown:not([style*="display: none"]))),
.search-bar.ac-open:not(:has(> .ac-dropdown:not([style*="display: none"]))):not(
        :has(> .bang-ac-dropdown:not([style*="display: none"]))
    ) {
    border-end-start-radius: 24px;
    border-end-end-radius: 24px;
}

/* Short rule between bar and list (not full width). Core adds `.ac-open` on the bar when AC is open. */
.results-search-bar.ac-open::after,
.search-bar.ac-open::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline: 4%;
    height: 1.5px;
    background: var(--border-light);
    opacity: 0.9;
    pointer-events: none;
    z-index: 101;
}

/* Suggestions are plain `.ac-item` text; history rows include `.ac-item-icon` (search-history plugin). */
.results-search-bar .ac-item:not(:has(.ac-item-icon)),
.search-bar .ac-item:not(:has(.ac-item-icon)) {
    position: relative;
    padding-inline-start: 2.75rem;
}

.results-search-bar .ac-item:not(:has(.ac-item-icon))::before,
.search-bar .ac-item:not(:has(.ac-item-icon))::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--text-secondary);
    opacity: 0.75;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 1 0 3.9 12.8L20.6 22l1.4-1.4-6.7-6.7A7 7 0 0 0 10 3Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3a7 7 0 1 0 3.9 12.8L20.6 22l1.4-1.4-6.7-6.7A7 7 0 0 0 10 3Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Light: upstream-style shadow on suggestions/history (examples/LiterallyGoogle). */
[data-theme="light"] .ac-dropdown,
[data-theme="light"] .bang-ac-dropdown,
[data-theme="light"] #apps-pocket-panel {
    background: var(--search-bar-focused);
    border: 1px solid var(--border);
    border-top: none;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: 24px;
    border-end-end-radius: 24px;
    /* Depth comes from the merged bar rule above; avoid double shadow on light. */
    box-shadow: none;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .ac-dropdown,
    :root:not([data-theme="dark"]) .bang-ac-dropdown,
    :root:not([data-theme="dark"]) #apps-pocket-panel {
        background: var(--search-bar-focused);
        border: 1px solid var(--border);
        border-top: none;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-end-start-radius: 24px;
        border-end-end-radius: 24px;
        box-shadow: none;
    }
}

/* OS “follow system” light: same merged-bar shadow when AC panel is open. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .results-search-bar:is(
            :has(> .ac-dropdown:not([style*="display: none"])),
            :has(> .bang-ac-dropdown:not([style*="display: none"])),
            :has(> .ac-dropdown[style*="display: block"]),
            :has(> .bang-ac-dropdown[style*="display: block"]),
            :has(> .ac-dropdown[style*="display: flex"]),
            :has(> .bang-ac-dropdown[style*="display: flex"]),
            :has(> .ac-dropdown[style*="display:flex"]),
            :has(> .bang-ac-dropdown[style*="display:flex"]),
            :has(> .ac-dropdown[style*="display: grid"]),
            :has(> .bang-ac-dropdown[style*="display: grid"]),
            :has(> .ac-dropdown[style*="display:grid"]),
            :has(> .bang-ac-dropdown[style*="display:grid"])
        ),
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .search-bar:is(
            :has(> .ac-dropdown:not([style*="display: none"])),
            :has(> .bang-ac-dropdown:not([style*="display: none"])),
            :has(> .ac-dropdown[style*="display: block"]),
            :has(> .bang-ac-dropdown[style*="display: block"]),
            :has(> .ac-dropdown[style*="display: flex"]),
            :has(> .bang-ac-dropdown[style*="display: flex"]),
            :has(> .ac-dropdown[style*="display:flex"]),
            :has(> .bang-ac-dropdown[style*="display:flex"]),
            :has(> .ac-dropdown[style*="display: grid"]),
            :has(> .bang-ac-dropdown[style*="display: grid"]),
            :has(> .ac-dropdown[style*="display:grid"]),
            :has(> .bang-ac-dropdown[style*="display:grid"])
        ) {
        border-color: #dadce0;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"])
        .results-search-bar.ac-open,
    :root:not([data-theme="dark"]):not([data-theme="light"])
        .search-bar.ac-open {
        border-color: #dadce0;
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
    }
}

.search-btn {
    border-radius: 8px;
    font-weight: 500;
    font-family: "Google Sans";
}

.lucky-btn {
    width: auto !important;
    min-width: 0 !important;
    padding-inline: 1rem !important;
}

.lucky-long {
    font-size: 0.85em !important;
}

#home-footer a {
    color: #fff;
    font-size: 14px;
}

.footer {
    border-top: 1px solid #444746;
    background: #171717;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .footer {
        border-top: 1px solid #e8eaed;
        background: #fff;
    }

    :root:not([data-theme="dark"]) #home-footer a {
        color: var(--text-secondary);
    }
}

[data-theme="light"] .footer {
    border-top: 1px solid #e8eaed;
    background: #fff;
}

[data-theme="light"] #home-footer a {
    color: var(--text-secondary);
}

/* RESULTS PAGE */

.btn {
    border-radius: 8px;
    font-family: "Google Sans";
    user-select: none;
    border: 1px solid var(--border);
}

.glance-link {
    color: var(--text-link) !important;
}

.wiki-desc {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.sidebar-panel,
.results-slot-panel {
    border-radius: 1rem !important;
}

.results-tab {
    font-weight: 500;
}

.glance-box {
    margin: 0;
    border-radius: 12px;
}

.result-title {
    margin-top: 10px;
}

.result-url-row {
    gap: 12px;
}

.result-favicon {
    border: 1px solid var(--border-light);
}

.result-engine-tag {
    user-select: none;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--text-link);
    border: 1px solid var(--border-light);
    background: var(--bg);
    border-radius: 999px;
    padding: 6px 12px;
}

.result-engine-tag:hover {
    color: var(--text-primary);
    background: var(--bg-light);
    border-color: var(--bg-hover);
}

.sidebar-accordion-body:has(.wiki-card),
.sidebar-accordion-body:has(.kp-title),
.sidebar-accordion-body:has(.kp-description),
.sidebar-accordion-body:has(.kp-image) {
    background: var(--bg-light);
    margin: 20px;
}

.sidebar-accordion-body {
    background: var(--bg);
    padding: 0;
}

/* Results sidebar: strip core panel border/shadow; card rows match examples/LiterallyGoogle. */
#results-sidebar .sidebar-panel {
    border: none !important;
    box-shadow: none !important;
}

.engine-stat-row {
    border-radius: 4px;
    background: var(--bg-light);
    padding: 14px;
    margin-bottom: 2px;
}

.engine-stat-row:first-child {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.engine-stat-row:last-child {
    margin-bottom: 0;
    border-end-end-radius: 12px;
    border-end-start-radius: 12px;
}

.related-search-link {
    display: block;
    padding: 14px;
    border-bottom: 0;
    margin-bottom: 2px;
    font-size: 14px;
    background: var(--bg-light);
    border-radius: 4px;
}

.related-search-link:first-child {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

.related-search-link:last-child {
    margin-bottom: 0;
    border-end-start-radius: 12px;
    border-end-end-radius: 12px;
}

body {
    animation: fade 0.4s forwards;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY HEADER
   Desktop only — on mobile the header scrolls normally.
   ══════════════════════════════════════════════════════════════════════════ */

/* Above-results slots (e.g. OSM Leaflet) must not paint over the search bar / AC. */
#results-header {
    position: relative;
    z-index: 120;
}

@media (min-width: 768px) {
    /* Sticky media preview `top` / `height` — matches header block below. */
    #results-page {
        --literallygoogle-sticky-header-offset: calc(50px + 1.5rem);
    }

    #results-header {
        position: sticky;
        top: 0;
        z-index: 120;
        background-color: var(--bg);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    #results-header.scrolled {
        border-bottom: 1px solid var(--border-light);
    }

    #results-page #results-tabs,
    #results-page #results-meta {
        margin-inline-start: 0;
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULTS LAYOUT (DESKTOP)
   Two-column grid + optional full-width above-results slot.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {
    /*
     * Two-column grid: main column (slot + results) never shares width with the
     * sidebar. Absolute sidebar overlap is avoided — column 2 is reserved.
     */
    #results-layout {
        position: relative;
        display: grid;
        grid-template-columns:
            minmax(0, var(--literallygoogle-results-main-col-max))
            minmax(
                var(--literallygoogle-results-sidebar-min),
                var(--literallygoogle-results-sidebar-max)
            );
        column-gap: 2rem;
        row-gap: 0;
        align-items: start;
        max-width: var(--literallygoogle-results-layout-max);
        margin-top: 0.5rem;
        margin-inline-start: 0;
        margin-inline-end: auto;
        padding-block: 0;
        padding-inline-start: var(
            --literallygoogle-results-content-inline-start
        );
        padding-inline-end: 1.25rem;
    }

    #slot-above-results {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        max-width: var(--literallygoogle-results-main-col-max);
        margin: 0;
    }

    #results-page #results-main {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: var(--literallygoogle-results-main-col-max);
    }

    #sidebar-col {
        position: static;
        grid-column: 2;
        grid-row: 1 / span 2;
        width: 100%;
        max-width: var(--literallygoogle-results-sidebar-max);
        justify-self: stretch;
    }

    /* No above-results slot: single main row beside the sidebar. */
    #results-layout:has(#slot-above-results:empty) #results-main {
        grid-row: 1;
    }

    #results-layout:has(#slot-above-results:empty) #sidebar-col {
        grid-row: 1;
    }

    /* Full-width above-results plugin: only when it's the sole panel.
       Prevent sibling panels (e.g. GitHub slot) from being stretched. */
    #results-layout:has(
            #slot-above-results
                > .results-slot-panel:only-child
                .slot-full-width
        )
        #slot-above-results {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: none;
        justify-self: stretch;
    }

    #results-layout:has(
            #slot-above-results
                > .results-slot-panel:only-child
                .slot-full-width
        )
        #results-main {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    #results-layout:has(
            #slot-above-results
                > .results-slot-panel:only-child
                .slot-full-width
        )
        #sidebar-col {
        grid-column: 2;
        grid-row: 2;
    }

    /* Panel shell fills the spanned column for any plugin whose root uses `.slot-full-width`. */
    #results-layout:has(
            #slot-above-results
                > .results-slot-panel:only-child
                .slot-full-width
        )
        #slot-above-results
        > .results-slot-panel,
    #results-layout:has(
            #slot-above-results
                > .results-slot-panel:only-child
                .slot-full-width
        )
        #slot-above-results
        .results-slot-panel-body {
        max-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    #results-sidebar,
    #slot-above-sidebar,
    #slot-below-sidebar {
        margin-top: 0;
    }

    /* Core caps .glance-box / skeletons at 40.75rem — match main column width. */
    #results-page .glance-box {
        max-width: var(--literallygoogle-results-main-col-max);
    }

    #results-page .skeleton-card {
        max-width: var(--literallygoogle-results-main-col-max);
    }

    /* Images/videos: flex row for media-preview (core .media-mode). Padding/gap
       come from degoog core `#results-layout` / `.media-mode` — see
       examples/theannoying-degoog-extensions/themes/LiterallyGoogle (no overrides). */
    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #results-layout {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        max-width: none;
        margin-inline: 0;
        margin-top: 0.5rem;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #results-main {
        flex: 1;
        min-width: 0;
        max-width: none;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="images"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="images"][aria-selected="true"]
            ),
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .image-card),
            :has(#results-list .video-card)
        )
        #sidebar-col {
        display: none;
    }

    /*
     * Videos tab only: slow/narrow resize can overflow the flex row because the
     * preview panel stays at 26.25rem. Images tab does not hit this in practice.
     */
    #results-page:is(
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .video-card)
        )
        #results-layout {
        max-width: 100%;
        box-sizing: border-box;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .video-card)
        )
        #results-main {
        flex: 1 1 0;
        min-width: 0;
        overflow-x: hidden;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .video-card)
        )
        #slot-above-results {
        min-width: 0;
    }

    #results-page:is(
            :has(#results-tabs .results-tab[data-type="videos"].active),
            :has(
                #results-tabs
                    .results-tab[data-type="videos"][aria-selected="true"]
            ),
            :has(#results-list .video-card)
        )
        #media-preview-panel.open {
        flex: 0 1 26.25rem;
        min-width: 0;
        width: auto;
        max-width: 26.25rem;
    }
}

/*
 * Video grid: degoog core uses multi-column (column-count), which lays out
 * top-to-bottom within each column. Document order then follows that column
 * flow, so keyboard / preview “next” moves vertically. Use row-major grid
 * so order matches left-to-right, top-to-bottom (same reading order as the
 * image grid’s flex columns).
 */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 1rem 0;
    column-count: unset;
}

@media (min-width: 800px) {
    .video-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .video-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.video-grid .video-card {
    margin-bottom: 0;
    min-width: 0;
}

/* Mobile: single column, no custom offsets */
@media (max-width: 767px) {
    #results-layout {
        padding-block: 0;
        padding-inline: 0.75rem;
    }
}

#slot-above-results:empty {
    display: none;
}

/* Keep spacing between the above-results slot and results-main consistent
   with the spacing inside results-main (e.g. at-a-glance → results-list). */
#slot-above-results:not(:empty) {
    margin-bottom: 1rem;
}

/* Flatten outer slot chrome only when the full-width panel is alone.
   Keep normal panel framing when multiple above-results plugins are stacked. */
#slot-above-results
    > .results-slot-panel:only-child:has(.slot-full-width):not(
        :has(.uxs-wrap)
    ) {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    overflow: visible;
}

#slot-above-results
    > .results-slot-panel:only-child:has(.slot-full-width):not(:has(.uxs-wrap))
    .results-slot-panel-body {
    padding: 0;
}

/* Unit slot: one visible frame — outer app panel, inner sections only. */
#slot-above-results .results-slot-panel:has(.uxs-wrap) {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
}

#slot-above-results .results-slot-panel:has(.uxs-wrap) .uxs-main {
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

#slot-above-results .results-slot-panel-body:has(.uxs-wrap) {
    padding: 0;
}

/* Spell check: appended dynamically to #results-meta to sit side-by-side */
#results-meta {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    max-width: calc(var(--literallygoogle-results-main-col-max) + var(--literallygoogle-results-content-inline-start));
}

#results-meta .spell-check-notice {
    margin: 0;
    line-height: inherit;
}

#results-meta .spell-check-notice br {
    display: none;
}

#results-meta .spell-check-notice a {
    margin-left: 0.5rem;
    color: var(--text-link);
}

#results-meta .spell-check-notice a::before {
    content: "•";
    margin-right: 0.75rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: inline-block;
}

#sidebar-col > div:empty {
    display: none;
}

#results-main,
#sidebar-col,
#slot-above-results,
#slot-below-results,
#pagination {
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULTS-PAGE LOGO
   Matches default degoog / `style_002.css`: responsive clamp + `padding-inline-end`
   between wordmark and search. A previous 22px + extra left padding made the
   mark read smaller than upstream and shoved the bar right of the tabs row.
   ══════════════════════════════════════════════════════════════════════════ */

.results-logo {
    font-size: clamp(1.875rem, 3rem - 2.5vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -1px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-primary);
    flex-shrink: 0;
    align-self: center;
    padding-inline-start: 0;
    padding-inline-end: 1rem;
}
@media (min-width: 768px) {
    .results-logo {
        margin-top: -5px;
    }
}
.results-logo:visited {
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTAINER
   Generic page-width wrapper for the results layout.
   ══════════════════════════════════════════════════════════════════════════ */

.container {
    width: 100%;
    max-width: var(--literallygoogle-results-layout-max);
    margin: 0 auto;
    padding-block: 0;
    padding-inline: 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING
   Placeholder shimmer cards shown while results are being fetched.
   ══════════════════════════════════════════════════════════════════════════ */

.skeleton-card:first-child {
    margin-top: 0;
}

.skeleton-card {
    padding: 1rem 0;
}

.skeleton-line {
    height: 14px;
    background: var(--bg-light);
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.skeleton-line--url {
    width: 40%;
}

.skeleton-line--title {
    width: 70%;
}

.skeleton-line--snippet {
    width: 90%;
}

.skeleton-line--snippet-short {
    width: 60%;
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE
   Matches examples/theannoying-degoog-extensions/themes/LiterallyGoogle.
   ══════════════════════════════════════════════════════════════════════════ */

.settings-page button {
    font-family: "Google Sans";
}

.settings-page .btn {
    border-radius: 999px;
}

/* Use ring shadows instead of border so track/knob box model matches core CSS
   (borders on ::after shift “off” position and leave a visible left gap). */
.toggle-slider {
    border: none;
    box-shadow: inset 0 0 0 1px var(--border);
}

.toggle-slider::after {
    border: none;
    box-shadow: 0 0 0 1px var(--border-light);
}

.settings-tab-select {
    border-radius: 999px;
}

[data-theme="light"] .settings-page-body {
    background: #f0f4f9;
}

.settings-section-heading:has(+ .settings-fieldset) {
    margin-bottom: 10px;
}

.settings-nav-item {
    border-radius: 999px;
}

.settings-nav-item.active {
    box-shadow: none;
    border: none;
    font-weight: normal;
}

/* Core paints nav hover with var(--bg-light); use var(--bg-hover) so light tokens (#e8eaed) match the upstream example. */
:root:not([data-theme="dark"]) .settings-nav-item:hover {
    background: var(--bg-hover);
}

.settings-nav-search,
.settings-global-search {
    border-radius: 999px;
}

/* Settings sidebar filter may not use `.search-bar`; paint the shell like the reference theme
   so the field is not a flat white block on #f0f4f9 (see examples/theannoying-degoog-extensions). */
:root:not([data-theme="dark"]) .settings-nav-search,
:root:not([data-theme="dark"]) .settings-global-search {
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
}

:root:not([data-theme="dark"]) .settings-nav-search:hover,
:root:not([data-theme="dark"]) .settings-global-search:hover {
    box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
}

:root:not([data-theme="dark"]) .settings-nav-search:focus-within,
:root:not([data-theme="dark"]) .settings-global-search:focus-within {
    background: var(--search-bar-focused);
}

:root:not([data-theme="dark"]) .settings-nav-search input,
:root:not([data-theme="dark"]) .settings-nav-search .search-input,
:root:not([data-theme="dark"]) .settings-nav-search .ext-field-input,
:root:not([data-theme="dark"]) .settings-global-search input,
:root:not([data-theme="dark"]) .settings-global-search .search-input,
:root:not([data-theme="dark"]) .settings-global-search .ext-field-input {
    background: transparent;
    color: var(--text-primary);
    caret-color: var(--text-primary);
}

:root:not([data-theme="dark"]) .settings-nav-search input::placeholder,
:root:not([data-theme="dark"]) .settings-nav-search .search-input::placeholder,
:root:not([data-theme="dark"]) .settings-nav-search .ext-field-input::placeholder,
:root:not([data-theme="dark"]) .settings-global-search input::placeholder,
:root:not([data-theme="dark"]) .settings-global-search .search-input::placeholder,
:root:not([data-theme="dark"]) .settings-global-search .ext-field-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

[data-theme="dark"] .settings-nav-search,
[data-theme="dark"] .settings-global-search {
    background: var(--search-bar-bg);
    border: 1px solid var(--border);
}

[data-theme="dark"] .settings-nav-search:focus-within,
[data-theme="dark"] .settings-global-search:focus-within {
    background: var(--search-bar-focused);
}

[data-theme="dark"] .settings-nav-search input,
[data-theme="dark"] .settings-nav-search .search-input,
[data-theme="dark"] .settings-nav-search .ext-field-input,
[data-theme="dark"] .settings-global-search input,
[data-theme="dark"] .settings-global-search .search-input,
[data-theme="dark"] .settings-global-search .ext-field-input {
    background: transparent;
    color: var(--text-primary);
    caret-color: var(--text-primary);
}

[data-theme="dark"] .settings-nav-search input::placeholder,
[data-theme="dark"] .settings-nav-search .search-input::placeholder,
[data-theme="dark"] .settings-nav-search .ext-field-input::placeholder,
[data-theme="dark"] .settings-global-search input::placeholder,
[data-theme="dark"] .settings-global-search .search-input::placeholder,
[data-theme="dark"] .settings-global-search .ext-field-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search {
        background: var(--bg);
        border: 1px solid var(--border);
        box-shadow: 0px 3px 10px 0px rgba(31, 31, 31, 0.08);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search:hover,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search:hover {
        box-shadow: 0 2px 8px 1px rgba(64, 60, 67, 0.24);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search:focus-within,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search:focus-within {
        background: var(--search-bar-focused);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .search-input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .ext-field-input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .search-input,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .ext-field-input {
        background: transparent;
        color: var(--text-primary);
        caret-color: var(--text-primary);
    }

    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .search-input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-nav-search .ext-field-input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .search-input::placeholder,
    :root:not([data-theme="dark"]):not([data-theme="light"]) .settings-global-search .ext-field-input::placeholder {
        color: var(--text-secondary);
        opacity: 1;
    }
}

:root:not([data-theme="dark"]) .settings-nav-item.active {
    background: white;
}

:root:not([data-theme="dark"]) .settings-nav-item.active:hover {
    background: white;
}

.ext-group-label {
    text-transform: capitalize;
}

.store-updates-body,
.settings-fieldset,
.ext-cards {
    gap: 2px;
}

.store-updates-row {
    padding: 17px;
    border-radius: 4px;
    background: var(--bg);
}

.ext-card:not(.settings-section) {
    padding: 17px;
    border: none;
    border-radius: 4px;
    background: #37393b;
}

.settings-section:not(.store-catalog-section) {
    box-shadow: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 2rem;
}

#settings-search-no-results {
    background: none;
    padding: 0;
}

.store-updates-body > div:first-child,
.settings-toggle-wrap:first-child,
.ext-cards > div:first-child {
    border-start-start-radius: 20px;
    border-start-end-radius: 20px;
}

.store-updates-body > div:last-child,
.settings-toggle-wrap:last-child,
.ext-cards > div:last-child {
    border-end-start-radius: 20px;
    border-end-end-radius: 20px;
}

.store-updates-row:not(:has(+ .store-updates-row)):not(
        .store-updates-row + .store-updates-row
    ),
.settings-toggle-wrap:not(:has(+ .settings-toggle-wrap)):not(
        .settings-toggle-wrap + .settings-toggle-wrap
    ) {
    border-radius: 20px;
}

.settings-toggle-wrap:not(.settings-desc) {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.settings-toggle-wrap {
    background: #37393b;
    padding: 17px;
    border: none;
}

[data-theme="light"] .store-updates-row,
[data-theme="light"] .settings-toggle-wrap,
[data-theme="light"] .ext-card:not(.settings-section):not(.settings-desc) {
    background: white;
}

.ext-card-configure,
.ext-card-apply {
    background: #282a2c;
    border-radius: 999px;
    border: none;
}

[data-theme="light"] .ext-card-configure,
[data-theme="light"] .ext-card-apply {
    color: black;
    background: #d5dff0;
}

[data-theme="dark"] .ext-card-configure:hover,
[data-theme="dark"] .ext-card-apply:hover {
    color: white;
}

.theme-select {
    background: var(--search-bar-bg);
    border-radius: 999px;
    padding: 15px;
    border: none;
}

.theme-select:hover {
    background: var(--search-bar-bg-hover);
    border: none;
}

[data-theme="light"] .theme-select {
    background: #dde3ea;
}

[data-theme="light"] .theme-select:hover {
    background: #ced3da;
}

.store-updates-toggle {
    padding: 0;
}

.store-updates-header {
    padding: 0.75rem 1rem;
}

.store-updates-panel {
    border-radius: 25px;
}

/* Store catalog: same as degoog core (style_002) — use semantic vars only, no theme-local store-* tokens. */
.store-repo-detail {
    border-radius: 20px;
    background: var(--bg-hover);
    color: var(--text-primary);
}

.store-repo-detail .store-repo-img {
    background: var(--bg-light);
}

.store-repo-img {
    border-radius: 999px;
}

.store-search-input {
    appearance: none;
    -webkit-appearance: none;
    background: var(--search-bar-bg);
    border-radius: 999px;
    border: 1px solid transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    padding: 0.75rem 1rem;
}

.store-search-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.store-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.store-filter-select {
    border-radius: 999px;
}

.apps-pocket-panel {
    border-radius: 20px !important;
}

[data-theme="light"] .apps-pocket-panel {
    background: #e9eef6;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA PREVIEW BAR
   Custom header bar inside #media-preview-panel: favicon, domain, nav,
   more-menu, close. Scoped to .mp2-* to avoid collisions with degoog core.
   ══════════════════════════════════════════════════════════════════════════ */

/* Prevent the panel itself from scrolling so .mp2-bar stays pinned.
   Degoog's core sets overflow-y: auto on the panel, which breaks
   sticky child behaviour in most browsers. We move scrolling to
   .mp2-body instead, keeping the bar as a plain flex-shrink-0 header. */
#media-preview-panel {
    overflow-y: hidden;
}

/* Sticky preview sits below our sticky header (50px bar + 0.75rem pad × 2).
   Do not set `overflow-x: hidden` on `#results-layout` in video mode — it breaks
   sticky; clip the grid column on `#results-main` instead. */
@media (min-width: 768px) {
    #media-preview-panel {
        top: var(
            --literallygoogle-sticky-header-offset,
            calc(50px + 1.5rem)
        );
        height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
        max-height: calc(
            100vh -
                var(
                    --literallygoogle-sticky-header-offset,
                    calc(50px + 1.5rem)
                )
        );
    }

    #media-preview-panel.open {
        border-top: 1px solid var(--border);
    }
}

.mp2-bar {
    flex-shrink: 0;
    z-index: 10;
    background: var(--bg);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.5rem 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    min-height: 2.75rem;
}

.mp2-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.mp2-site {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.mp2-favicon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    /* Dark mode default: white circle so favicon pops against dark bg */
    background: var(--white);
}

/* Light mode: grey circle for subtle definition against light bg */
[data-theme="light"] .mp2-favicon-bg {
    background: var(--bg-hover);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .mp2-favicon-bg {
        background: var(--bg-hover);
    }
}

.mp2-favicon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.mp2-host {
    font-size: 0.82rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mp2-controls {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-shrink: 0;
}

.mp2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition:
        background 120ms ease,
        color 120ms ease;
}

.mp2-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.mp2-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.mp2-menu-wrap {
    position: relative;
}

.mp2-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 9.5rem;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.3rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    z-index: 30;
}

.mp2-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 100ms ease;
}

/* Author `display: flex` beats UA `[hidden]`; keep menu items actually hidden. */
button.mp2-item[hidden] {
    display: none;
}

.mp2-item:hover {
    background: var(--bg-hover);
}

/* RTL: flip the prev/next chevrons so ‹ › become › ‹ */
[dir="rtl"] #media-preview-prev svg,
[dir="rtl"] #media-preview-next svg {
    transform: scaleX(-1);
}
.mp2-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.6rem);
    padding: 0.55rem 1.15rem;
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.mp2-toast.mp2-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   Centered link row at the bottom of the results page.
   ══════════════════════════════════════════════════════════════════════════ */

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    max-width: var(--literallygoogle-results-layout-max);
    margin: 0 auto;
    font-size: 14px;
}

.footer-content a {
    color: var(--text-secondary);
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}

.footer-sep {
    color: var(--text-secondary);
}