/* ===============================================================
   Santa Cruz palette -- single source of truth for both themes.

   Every surface colour is a token, so dark mode redefines tokens
   only and no component rule needs a dark-specific counterpart.

   --ink-rgb is the "ink" the design draws borders, dividers and
   hover washes with; it inverts in dark mode so those low-alpha
   details stay visible. --shadow-rgb stays dark in both themes,
   because a shadow is cast light, not inverted ink.

   Theme resolution is three-state: bare :root is light, the
   prefers-color-scheme block handles visitors who never chose,
   and [data-theme] wins over both when ?style= forces a theme.
   =============================================================== */
:root {
    --ink-rgb: 74, 46, 43; /* Deep Redwood, as raw channels */
    --shadow-rgb: 74, 46, 43;
    --bg-color: #F5EBE0; /* Bleached Sand - warm, soft off-white background */
    --card-bg: #FAF6F0; /* Soft sand-tinted white for cards */
    --card-border: rgba(var(--ink-rgb), 0.12); /* Thin Redwood border with low opacity */
    --text-primary: #4A2E2B; /* Deep Redwood - rich grounding dark brown */
    --text-secondary: rgba(var(--ink-rgb), 0.72); /* Muted Redwood for summary/credits */
    --accent-sage: #6B8272; /* Eucalyptus Green - muted sage for active states */
    --accent-poppy: #C2410C; /* California Poppy - vibrant sunset orange/gold for visual pop */
    /* Newsroom colours. Each source pill is an outbound link to the paper that
       did the reporting, so the two are held apart visually and given enough
       contrast to read as clickable rather than as a label. */
    --source-sentinel: #1D6A8C;   /* Monterey Bay blue */
    --source-herald:   #8A5A16;   /* Salinas Valley bronze */
    --tag-event-bg: rgba(107, 130, 114, 0.12); /* Light Eucalyptus Sage background */
    --tag-event-text: #4A5F51; /* Darker Eucalyptus Sage for text contrast */
    --tag-school-bg: rgba(var(--ink-rgb), 0.08); /* Light Redwood background */
    --tag-school-text: #4A2E2B; /* Deep Redwood text */
    --on-accent: #fff; /* Text sitting on a filled sage/poppy surface */
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Dark tokens, shared by the auto and forced paths below. The palette is
   the same redwood/poppy/sage brand after dark -- a warm brown-black
   ground rather than a neutral grey -- not a second visual identity.
   Poppy and sage are lifted a few steps so they hold contrast on it. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
    --dark-ink-rgb: 245, 235, 224;
    --dark-shadow-rgb: 0, 0, 0;
    --dark-bg-color: #191110;
    --dark-card-bg: #241A18;
    --dark-text-primary: #F5EBE0;
    --dark-accent-sage: #8FA894;
    --dark-accent-poppy: #FF7A45;
    --dark-source-sentinel: #62B6DA;
    --dark-source-herald:   #E3A857;
    --dark-tag-event-bg: rgba(143, 168, 148, 0.18);
    --dark-tag-event-text: #A8C0AD;
    --dark-tag-school-text: #E8DDD2;
    /* Sage and poppy are lightened for dark, so white on them would be
       low-contrast -- filled buttons take dark text instead. */
    --dark-on-accent: #191110;
}

/* Visitors who never picked a theme follow their OS setting. Guarded so an
   explicit ?style=santacruz/light still wins over a dark OS preference. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink-rgb: var(--dark-ink-rgb);
        --shadow-rgb: var(--dark-shadow-rgb);
        --bg-color: var(--dark-bg-color);
        --card-bg: var(--dark-card-bg);
        --text-primary: var(--dark-text-primary);
        --accent-sage: var(--dark-accent-sage);
        --accent-poppy: var(--dark-accent-poppy);
    --source-sentinel: var(--dark-source-sentinel);
    --source-herald: var(--dark-source-herald);
        --tag-event-bg: var(--dark-tag-event-bg);
        --tag-event-text: var(--dark-tag-event-text);
        --tag-school-text: var(--dark-tag-school-text);
        --on-accent: var(--dark-on-accent);
    }
}

/* ?style=dark forces dark regardless of OS setting. */
:root[data-theme="dark"] {
    --ink-rgb: var(--dark-ink-rgb);
    --shadow-rgb: var(--dark-shadow-rgb);
    --bg-color: var(--dark-bg-color);
    --card-bg: var(--dark-card-bg);
    --text-primary: var(--dark-text-primary);
    --accent-sage: var(--dark-accent-sage);
    --accent-poppy: var(--dark-accent-poppy);
    --source-sentinel: var(--dark-source-sentinel);
    --source-herald: var(--dark-source-herald);
    --tag-event-bg: var(--dark-tag-event-bg);
    --tag-event-text: var(--dark-tag-event-text);
    --tag-school-text: var(--dark-tag-school-text);
    --on-accent: var(--dark-on-accent);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-stack);
    line-height: 1.6;
    padding: 1.5rem 1.5rem 3rem 1.5rem;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Masthead: two-tone wordmark reads as a publication nameplate rather than
   a gradient app title. "831" carries the poppy accent so the area code --
   the part locals recognize -- is what the eye lands on first. */
header {
    margin-bottom: 2rem;
    text-align: left;
    border-left: 3px solid var(--accent-poppy);
    padding-left: 1.5rem;
}

header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-bottom: 0.55rem;
    display: block;
}

header h1 a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
}

.brand-mark {
    color: var(--accent-poppy);
    font-weight: 800;
    margin-right: 0.06em;
}

.brand-name {
    color: var(--text-primary);
}

/* Subtle lift on hover so the wordmark still reads as a home link */
header h1 a:hover .brand-name {
    color: var(--accent-sage);
    transition: var(--transition);
}

header p,
.masthead-tagline {
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.5;
    max-width: 54ch;
}

/* ---------------------------------------------------------------
   Search landing page (bare homepage)
   Brand + search centered in open space. No article feed here: the
   value proposition is "find and follow an athlete", not "browse an
   endless headline river", so the first screen asks for a name.
   --------------------------------------------------------------- */
.container.is-home {
    min-height: calc(100vh - 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 720px;
}

.container.is-home header {
    border-left: none;
    padding-left: 0;
    text-align: center;
    margin-bottom: 2.5rem;
}

.container.is-home header h1 {
    font-size: clamp(2.75rem, 8vw, 4.25rem);
    margin-bottom: 0.4rem;
}

.container.is-home .masthead-tagline {
    font-size: 1.15rem;
    max-width: none;
}

/* Sticky is for the scrolling result views; on the landing page the bar
   is the centerpiece and must sit still. */
.container.is-home .discovery-bar {
    position: static;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 28px rgba(var(--shadow-rgb), 0.07);
}

.container.is-home .discovery-bar-fields {
    flex-wrap: wrap;
    min-width: 0;
}

.container.is-home .search-group {
    flex: 1 1 100%;
}

.container.is-home .discovery-input-group.always-float {
    flex: 1 1 0;
    min-width: 8rem;
}

/* Go sits centered under the fields rather than stranded at the left edge */
.container.is-home .discovery-bar-actions {
    width: 100%;
    justify-content: center;
}

/* The Clear link is always irrelevant on the landing page (it's never
   filtered here), but .is-hidden elsewhere uses visibility:hidden rather
   than display:none -- it reserves its own width + gap so the sticky
   results toolbar doesn't reflow when Clear toggles on/off. That reserved
   space is exactly what was pulling Go off-center: justify-content:center
   was centering the (button + invisible link) pair, not the button alone.
   Removing it from layout entirely here is safe because home never
   toggles this link live -- submitting always leaves the page. */
.container.is-home .discovery-clear-btn.is-hidden {
    display: none;
}

/* Coverage scope footnote: quiet by design, so it informs without
   competing with the search card above it. */
.coverage-footnote {
    margin-top: 1.75rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: center;
}

/* Alert notifications */
.alert {
    background: rgba(var(--ink-rgb), 0.05);
    border: 1px solid rgba(var(--ink-rgb), 0.15);
    color: var(--text-primary);
    padding: 1.25rem;
    border-radius: 12px;
    text-align: center;
    margin: 2rem 0;
}

/* Grid Layout (minimal asymmetrical look) */
.articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card Styling - minimal, elegant, soft sand cards */
.article-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    box-shadow: 0 4px 20px rgba(var(--shadow-rgb), 0.03);
}

.article-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--ink-rgb), 0.25);
    box-shadow: 0 12px 30px rgba(var(--shadow-rgb), 0.08);
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: rgba(var(--ink-rgb), 0.04);
    overflow: hidden;
}

.card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
    filter: sepia(0.1) contrast(0.95); /* Subtle organic/warm filter */
}

.article-card:hover .card-image-wrapper img {
    transform: scale(1.02);
    filter: sepia(0);
}

.card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Tags Container */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tag-event {
    background-color: var(--tag-event-bg);
    color: var(--tag-event-text);
}

.tag-school {
    background-color: var(--tag-school-bg);
    color: var(--tag-school-text);
}

/* Title link */
.card-title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.card-title a:hover {
    color: var(--accent-poppy);
}

/* Summary */
.card-summary {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
    flex-grow: 1;
}

/* Metas (Author & Photographer) */
.card-meta {
    border-top: 1px solid rgba(var(--ink-rgb), 0.08);
    padding-top: 1.25rem;
    margin-top: auto;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.meta-item {
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
}

.meta-item strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 0.4rem;
}

/* Pagination - minimal style */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 3rem;
}

.btn {
    background-color: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-primary);
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn:hover:not(.disabled) {
    background-color: var(--accent-poppy);
    color: var(--bg-color);
    border-color: var(--accent-poppy);
}

.btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.page-info {
    color: var(--text-secondary);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

/* Interactive tag hover effects */
.tag {
    text-decoration: none;
    transition: var(--transition);
}
.tag-event:hover {
    background-color: var(--accent-sage);
    color: var(--on-accent);
}
.tag-school:hover {
    background-color: var(--text-primary);
    color: var(--bg-color);
}

/* 🔎 Discovery Bar 🔎 */
.discovery-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.3s ease-in-out;
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.discovery-bar.scroll-hidden {
    transform: translateY(-150%);
}

.discovery-bar-fields {
    display: flex;
    gap: 1.25rem;
    flex-grow: 1;
    align-items: flex-end;
}

.discovery-input-group {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
}

/* Floating Label */
.discovery-input-group label.floating-label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: var(--transition);
    pointer-events: none;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    z-index: 2;
}

.discovery-input-group input[type="text"],
.discovery-input-group select {
    width: 100%;
    height: 48px;
    background-color: var(--bg-color);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.15rem 1rem 0.25rem 1rem;
    font-size: 0.95rem;
    font-family: var(--font-stack, inherit);
    color: var(--text-primary);
    outline: none;
    transition: var(--transition);
    box-sizing: border-box;
}

.discovery-input-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234A2E2B' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.discovery-input-group input[type="text"]:focus,
.discovery-input-group select:focus {
    border-color: var(--accent-poppy, var(--accent-blue));
    box-shadow: 0 0 0 3px var(--focus-ring-color, rgba(194, 65, 12, 0.15));
}

.discovery-input-group select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--card-bg);
}

/* Float states */
.discovery-input-group.is-focused label.floating-label,
.discovery-input-group.has-value label.floating-label,
.discovery-input-group.always-float label.floating-label {
    top: 10px;
    transform: scale(0.72) translateY(0);
    transform-origin: left top;
    font-weight: 600;
}

.discovery-input-group.is-focused label.floating-label {
    color: var(--accent-poppy, var(--accent-blue)) !important;
}

.discovery-bar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.discovery-go-btn {
    height: 48px;
    background-color: var(--accent-sage, var(--accent-green));
    color: var(--on-accent);
    border: 1px solid var(--accent-sage, var(--accent-green));
    padding: 0 1.75rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-stack, inherit);
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discovery-go-btn:hover {
    background-color: var(--accent-poppy, var(--accent-blue));
    border-color: var(--accent-poppy, var(--accent-blue));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-color, rgba(194, 65, 12, 0.15));
}

.discovery-clear-btn {
    color: var(--accent-sage, var(--accent-green));
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px dashed var(--accent-sage, var(--accent-green));
    transition: var(--transition);
    white-space: nowrap;
    height: 48px;
    display: inline-flex;
    align-items: center;
}

.discovery-clear-btn:hover {
    color: var(--accent-poppy, var(--accent-blue));
    border-bottom-color: var(--accent-poppy, var(--accent-blue));
}

.discovery-clear-btn.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* High-Density Search-Style Layout (SERP) */
.serp-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 4rem;
}
.serp-row {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: var(--transition);
}
.serp-row:hover {
    border-color: rgba(var(--ink-rgb), 0.25);
    box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.04);
}
.serp-row-text {
    display: block;
    display: flow-root; /* Contains floated thumbnail on mobile */
}
.serp-row.has-image .serp-row-text {
    display: grid;
    grid-template-columns: 1fr 80px;
    grid-template-areas:
        "title visual"
        "summary visual"
        "tags visual";
    gap: 0.5rem 2rem;
}
.serp-row-title {
    grid-area: title;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}
.serp-row-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}
.serp-row-title a:hover {
    color: var(--accent-poppy);
}
.serp-row-metadata {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 0.75rem;
    letter-spacing: 0.02em;
}
.serp-row-summary {
    grid-area: summary;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.5;
}
.serp-row-visual {
    grid-area: visual;
    align-self: start;
    justify-self: end;
    display: block;
}
.serp-row-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(var(--ink-rgb), 0.04);
    border: 1px solid var(--card-border);
    flex-shrink: 0;
}
.serp-row-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.08) contrast(0.96);
    transition: var(--transition);
}
.serp-row:hover .serp-row-thumbnail img {
    filter: sepia(0);
}
.serp-row-thumbnail-placeholder {
    background: repeating-linear-gradient(
        45deg,
        rgba(var(--ink-rgb), 0.02),
        rgba(var(--ink-rgb), 0.02) 10px,
        rgba(var(--ink-rgb), 0.05) 10px,
        rgba(var(--ink-rgb), 0.05) 20px
    );
}
.preview-trigger-btn {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--accent-sage);
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding-bottom: 2px;
}
.preview-trigger-btn:hover {
    background: var(--accent-sage);
    color: var(--on-accent);
    border-color: var(--accent-sage);
    transform: translateX(3px);
}

/* Side Panel Drawer Styles */
.side-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(var(--ink-rgb), 0.25);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.side-panel-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    background: var(--card-bg);
    border-left: 1px solid var(--card-border);
    box-shadow: -10px 0 30px rgba(var(--shadow-rgb), 0.08);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.side-panel.open {
    transform: translateX(0);
}

.close-panel-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    z-index: 1002;
    transition: var(--transition);
}
.close-panel-btn:hover {
    color: var(--accent-poppy);
    transform: rotate(90deg);
}

.side-panel-content {
    padding: 3rem 2rem 2rem;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-image-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2rem;
    border: 1px solid var(--card-border);
    aspect-ratio: 16/10;
    background-color: rgba(var(--ink-rgb), 0.04);
}
.panel-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.05);
}

.panel-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.panel-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
    padding-bottom: 1rem;
}
.panel-meta strong {
    color: var(--text-primary);
}

.panel-summary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    flex-grow: 1;
}

.panel-action-btn {
    display: block;
    text-align: center;
    background-color: var(--accent-sage);
    color: var(--on-accent);
    border: 1px solid var(--accent-sage);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    margin-top: auto;
}
.panel-action-btn:hover {
    background-color: var(--accent-poppy);
    border-color: var(--accent-poppy);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(194, 65, 12, 0.15);
}

/* Mobile responsive media query for Discovery Bar */
@media (max-width: 768px) {
    .discovery-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        gap: 1rem;
    }
    .discovery-bar-fields {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .discovery-input-group {
        width: 100%;
        flex: none;
    }
    .discovery-bar-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-top: 0.5rem;
    }
    .discovery-go-btn {
        width: 100%;
    }
    .discovery-clear-btn {
        justify-content: center;
        border-bottom: none;
        text-align: center;
        height: auto;
        padding: 0.5rem 0;
    }
    .discovery-clear-btn.is-hidden {
        display: none !important;
    }
}

/* Mobile responsive media query for SERP list view */
@media (max-width: 600px) {
    header h1 {
        font-size: clamp(16px, 6.2vw, 36px);
        white-space: nowrap;
    }
    .serp-row {
        padding: 1.25rem;
    }
    .serp-row.has-image .serp-row-text {
        display: block; /* Disable grid on mobile */
    }
    .serp-row-visual {
        float: right;
        margin-left: 1rem;
        margin-bottom: 0.5rem;
    }
    .serp-row-metadata {
        display: block;
        margin-left: 0;
        margin-top: 0.25rem;
    }
    .side-panel {
        width: 100%;
    }
}