/* ============================================================
   world-wide-radios.com — Editorial Design System
   NYT/Guardian-inspired premium look
   Mobile-first, RTL-ready, Pico CSS compatible

   Breakpoints:
     - Base:    0-575px   (mobile)
     - SM:      576px+    (large phone / small tablet)
     - MD:      768px+    (tablet)
     - LG:      1024px+   (desktop)
     - XL:      1280px+   (wide desktop)

   Vertical rhythm — 3-tier whitespace system:
     --space-tight:   0.5  / 0.75 / 0.875 / 1rem     (items that belong together)
     --space-between: 1.5  / 2    / 2.25  / 2.5rem    (peer sections)
     --space-major:   2.5  / 3.5  / 4     / 4.5rem    (major page zones)
     Columns: mobile (<576) / base / MD (768) / LG (1024).

   Granular spacing (for internal element padding, gaps):
     0.25rem  0.5rem  0.75rem  1rem  1.25rem
   ============================================================ */


/* ============================================================
   1. CUSTOM PROPERTIES — EDITORIAL COLOR SYSTEM
   ============================================================ */

:root {
    /* --- Typography --- */
    --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pico-font-family: var(--font-sans);

    /* --- Type scale (major third ~1.25) --- */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.3125rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    /* --- Layout --- */
    --player-height: 3.5rem;
    --player-height-active: 4.5rem;
    --container-padding-inline: 1rem;
    --container-max-width: 56rem;
    --grid-min-tile: 9rem;
    --grid-gap: 0.5rem;

    /* --- Vertical rhythm — 3-tier whitespace system ---
       tight:   items that belong together (heading -> content, filter bar -> grid)
       between: peer sections (grid to next section, sidebar sections)
       major:   major page zones (masthead -> body, content -> footer, around ads)
       Overridden at max-width:575px (tighter) and min-width:768/1024 (more generous) */
    --space-tight: 0.75rem;
    --space-between: 2rem;
    --space-major: 3.5rem;

    /* --- Radii --- */
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;

    /* --- Transitions --- */
    --transition-fast: 160ms ease;
    --transition-normal: 220ms ease;
    --transition-slow: 350ms ease;

    /* --- Borders --- */
    --border-thin: 1px;
    --border-rule: 2px;

    /* --- Editorial Colors (Light mode) ---
       Warm newsprint palette — aged ivory paper, dried-ink reds, warm
       brown-blacks.  Every value has a yellow/brown undertone so the page
       reads like a broadsheet on a cafe table, not a CSS framework demo. */
    --ed-bg: #F6F3EC;
    --ed-bg-warm: #F0EDE5;
    --ed-bg-card: #F6F3EC;
    --ed-bg-hover: #EAE6DC;
    --ed-text: #2C2A25;
    --ed-text-secondary: #52504A;
    --ed-text-muted: #7A776E;
    --ed-text-faint: #9E9A90;
    --ed-border: #DDD9CE;
    --ed-border-strong: #C4C0B4;
    --ed-border-rule: #2C2A25;
    --ed-accent: #8B1A2B;
    --ed-accent-hover: #6E1422;
    --ed-accent-subtle: rgba(139, 26, 43, 0.07);
    --ed-accent-text: #F6F3EC;
    --ed-link: #2C2A25;
    --ed-link-hover: #8B1A2B;
    --ed-player-bg: #1E1C17;
    --ed-player-text: #E8E3D8;
    --ed-player-muted: #938F84;
    --ed-player-accent: #A3253A;
    --ed-shadow-sm: none;
    --ed-shadow-md: none;
    --ed-shadow-lg: none;
    --ed-shadow-hover: none;
    --ed-live-dot: #3D8C5C;
}

[data-theme="dark"] {
    /* Warm dark palette — brown-black surfaces, parchment-tinted text,
       muted reds.  Mirrors the light mode warmth instead of going cold-gray. */
    --ed-bg: #141310;
    --ed-bg-warm: #1A1916;
    --ed-bg-card: #1C1A16;
    --ed-bg-hover: #28261F;
    --ed-text: #E5E0D4;
    --ed-text-secondary: #B8B3A6;
    --ed-text-muted: #8D887C;
    --ed-text-faint: #6B665C;
    --ed-border: #2A2820;
    --ed-border-strong: #3D3A30;
    --ed-border-rule: #CCC8BC;
    --ed-accent: #C4495A;
    --ed-accent-hover: #D86070;
    --ed-accent-subtle: rgba(196, 73, 90, 0.10);
    --ed-accent-text: #F6F3EC;
    --ed-link: #E5E0D4;
    --ed-link-hover: #C4495A;
    --ed-player-bg: #0E0D0A;
    --ed-player-text: #E5E0D4;
    --ed-player-muted: #6B665C;
    --ed-player-accent: #C4495A;
    --ed-shadow-sm: none;
    --ed-shadow-md: none;
    --ed-shadow-lg: none;
    --ed-shadow-hover: none;
    --ed-live-dot: #5AAF72;
}


/* ============================================================
   2. PICO CSS OVERRIDES — Integrate editorial colors
   ============================================================ */

:root {
    --pico-background-color: var(--ed-bg);
    --pico-color: var(--ed-text);
    --pico-muted-color: var(--ed-text-muted);
    --pico-muted-border-color: var(--ed-border);
    --pico-card-background-color: var(--ed-bg-card);
    --pico-primary: var(--ed-accent);
    --pico-primary-background: var(--ed-accent);
    --pico-primary-hover: var(--ed-accent-hover);
    --pico-primary-hover-background: var(--ed-accent-hover);
    --pico-primary-inverse: var(--ed-accent-text);
    --pico-secondary-background: var(--ed-bg-hover);
    --pico-secondary-inverse: var(--ed-text);
    --pico-contrast: var(--ed-text);
}

[data-theme="dark"] {
    --pico-background-color: var(--ed-bg);
    --pico-color: var(--ed-text);
    --pico-muted-color: var(--ed-text-muted);
    --pico-muted-border-color: var(--ed-border);
    --pico-card-background-color: var(--ed-bg-card);
    --pico-primary: var(--ed-accent);
    --pico-primary-background: var(--ed-accent);
    --pico-primary-hover: var(--ed-accent-hover);
    --pico-primary-hover-background: var(--ed-accent-hover);
    --pico-primary-inverse: var(--ed-accent-text);
    --pico-secondary-background: var(--ed-bg-hover);
    --pico-secondary-inverse: var(--ed-text);
    --pico-contrast: var(--ed-text);
}

/* Tighter rhythm on small mobile — less generous than the base,
   but still proportional. Prevents spacing from feeling oversized
   on 320-375px viewports where every pixel counts. */
@media (max-width: 575px) {
    :root {
        --space-tight: 0.5rem;
        --space-between: 1.5rem;
        --space-major: 2.5rem;
    }
}

@media (min-width: 576px) {
    :root {
        --container-padding-inline: 1.5rem;
        --grid-min-tile: 10rem;
    }
}

@media (min-width: 768px) {
    :root {
        --container-padding-inline: 2rem;
        --space-tight: 0.875rem;
        --space-between: 2.25rem;
        --space-major: 4rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding-inline: 2.5rem;
        --grid-min-tile: 11rem;
        --grid-gap: 0.625rem;
        --space-tight: 1rem;
        --space-between: 2.5rem;
        --space-major: 4.5rem;
    }
}

body {
    background-color: var(--ed-bg);
    color: var(--ed-text);
}


/* ============================================================
   3. CONTAINER
   ============================================================ */

.container {
    padding-inline: var(--container-padding-inline);
    max-width: var(--container-max-width);
    margin-inline: auto;
}


/* ============================================================
   3b. FOLIO LINE — thin domain + edition strip above masthead
   The quietest element on the page: barely visible, like the
   Vol./No. line on a broadsheet. Anchors the masthead to the
   top of the viewport without drawing any attention.
   ============================================================ */

.folio {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-block: 0.25rem;
    padding-inline: var(--container-padding-inline, 1rem);
    border-block-end: 1px solid var(--ed-border);
    font-family: var(--font-sans);
    font-size: 0.625rem;                 /* 10px — quieter than 11px */
    line-height: 1.4;
    color: var(--ed-text-faint);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.7;                         /* extra hush — barely there */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.folio-domain {
    font-weight: 600;
    opacity: 1;                           /* slightly more present than edition */
}

.folio-edition {
    font-weight: 400;
    opacity: 0.85;
}

/* RTL: flexbox mirrors automatically; strip Latin typographic treatments */
[dir="rtl"] .folio {
    text-transform: none;
    letter-spacing: 0;
}

/* Dark mode: bump faint text for contrast at small size */
[data-theme="dark"] .folio {
    color: #7D7768;
}

/* Mobile: both elements on one line; hide domain on very narrow screens */
@media (max-width: 359px) {
    .folio-domain {
        display: none;
    }
    .folio {
        justify-content: center;
    }
}

@media print {
    .folio {
        opacity: 1;
        color: #999;
        border-block-end-color: #ccc;
        font-size: 9px;
    }
}

/* ============================================================
   4. MASTHEAD / HEADER — Editorial newspaper-style
   ============================================================ */

.site-header {
    border-block-end: var(--border-rule) solid var(--ed-border-rule);
    background: var(--ed-bg);
    position: relative;
}

.site-header .container {
    padding-block: 0;
}

/* Top utility bar (language, theme) */
.header-utility {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
    padding-block: 0.375rem;
    border-block-end: var(--border-thin) solid var(--ed-border);
    font-size: var(--text-xs);
}

.header-utility a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.125rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ed-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.header-utility a:hover {
    color: var(--ed-text);
    background: var(--ed-bg-hover);
}

.lang-active {
    position: relative;
    font-weight: 700 !important;
    color: var(--ed-accent) !important;
    background: var(--ed-accent-subtle) !important;
    border-radius: var(--radius-sm);
}

.lang-active::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ed-accent);
}

/* Theme toggle button — clean override */
.header-utility .theme-toggle-btn,
.header-utility .theme-toggle-btn:hover,
.header-utility .theme-toggle-btn:focus,
.header-utility .theme-toggle-btn:active {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    --pico-background-color: transparent !important;
}

.header-utility .theme-toggle-btn {
    cursor: pointer;
    font-size: 1.05rem;
    padding: 0.25rem;
    color: var(--ed-text-muted) !important;
    line-height: 1;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.header-utility .theme-toggle-btn:hover {
    color: var(--ed-text) !important;
}

.header-utility .theme-toggle-btn:focus-visible {
    outline: 2px solid var(--ed-accent) !important;
    outline-offset: 2px;
}

/* Masthead — the site name, big and editorial */
.masthead {
    text-align: center;
    padding-block: 1rem 0.75rem;
}

.masthead-title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--ed-text);
}

.masthead-title a {
    color: inherit;
    text-decoration: none;
}

.masthead-title a:hover {
    color: var(--ed-accent);
}

.masthead-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--ed-text-muted);
    margin-block: 0.25rem 0;
    margin-inline: 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.masthead-subtitle::before,
.masthead-subtitle::after {
    content: '';
    flex: 1;
    height: 1px;
    max-width: 5rem;
    background: var(--ed-border-strong);
}

@media (min-width: 576px) {
    .masthead-title {
        font-size: var(--text-4xl);
    }
    .masthead-subtitle {
        font-size: var(--text-sm);
        letter-spacing: 0.06em;
        gap: 0.75rem;
    }
}

@media (min-width: 768px) {
    .masthead {
        padding-block: 1.25rem 1rem;
    }
    .masthead-title {
        font-size: 2.75rem;
    }
    .masthead-subtitle::before,
    .masthead-subtitle::after {
        max-width: 5.5rem;
    }
}

@media (max-width: 575px) {
    .masthead-subtitle::before,
    .masthead-subtitle::after {
        display: none;
    }
}

/* Dateline — NYT date bar below masthead, with global search */
.dateline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ed-text-muted);
    padding-block: 0.375rem;
    border-block-end: var(--border-thin) solid var(--ed-border);
    letter-spacing: 0.02em;
    gap: 1rem;
}

.dateline-text {
    flex-shrink: 0;
    white-space: nowrap;
}

[dir="rtl"] .dateline {
    letter-spacing: 0;
}

/* ---- Global Search ---- */

.global-search {
    position: relative;
    flex: 0 1 16rem;
    max-width: 18rem;
}

.global-search-input {
    width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--ed-text);
    background: transparent;
    border: none;
    border-block-end: 1px solid var(--ed-border);
    border-radius: 0;
    outline: none;
    transition: border-color var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
    /* Override Pico CSS defaults for input[type="search"] */
    --pico-form-element-spacing-vertical: 0;
    --pico-form-element-spacing-horizontal: 0;
    --pico-border-radius: 0;
    margin-block-end: 0;
    height: auto;
    line-height: 1.5;
}

.global-search-input::placeholder {
    color: var(--ed-text-faint);
    font-style: italic;
    opacity: 1;
}

/* Focus: thicken bottom border, editorial underline emphasis */
.global-search-input:focus {
    border-block-end-color: var(--ed-border-rule);
    border-block-end-width: 2px;
    padding-block-end: calc(0.25rem - 1px); /* compensate for thicker border */
    box-shadow: none;
    outline: none;
    /* Override Pico focus glow */
    --pico-box-shadow: none;
}

/* Keyboard-only focus: accessible outline */
.global-search-input:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}

/* Clear the browser's default search cancel button styling */
.global-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 0.75rem;
    width: 0.75rem;
    cursor: pointer;
    background: var(--ed-text-muted);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Results dropdown — newspaper lookup panel */
.global-search-results {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    width: 20rem;
    max-height: 24rem;
    overflow-y: auto;
    scrollbar-width: thin;
    background: var(--ed-bg-card);
    border: 1px solid var(--ed-border);
    border-block-start: 2px solid var(--ed-border-rule);
    z-index: 1000;

    /* Default: hidden until HTMX populates content */
    opacity: 0;
    transform: translateY(-0.25rem);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal),
        visibility 0s var(--transition-normal);
}

/* When HTMX swaps in content, show the dropdown */
.global-search-results:not(:empty) {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal),
        visibility 0s 0s;
}

/* Force-hide when dismissed via JS (overrides :not(:empty)) */
.global-search-results.is-hidden {
    opacity: 0;
    transform: translateY(-0.25rem);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--transition-normal),
        transform var(--transition-normal),
        visibility 0s var(--transition-normal);
}

.global-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Individual result item — compact editorial row */
.global-search-item {
    margin: 0;
    padding: 0;
}

.global-search-item a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--ed-text);
    font-size: var(--text-sm);
    font-weight: 400;
    border-block-end: 1px solid var(--ed-border);
    transition: background-color var(--transition-fast);
    min-height: 2.75rem; /* tap target >= 44px */
    /* Override Pico anchor styles */
    --pico-text-decoration: none;
}

.global-search-item:last-child a {
    border-block-end: none;
}

.global-search-item a:hover,
.global-search-item a:focus,
.global-search-item a[aria-selected="true"] {
    background: var(--ed-bg-hover);
    color: var(--ed-text);
    outline: none;
}

/* Flag emoji in search result */
.global-search-flag {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1;
    width: 1.25rem;
    text-align: center;
}

/* Station name in search result */
.global-search-name {
    flex: 1 1 auto;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Frequency metadata */
.global-search-freq {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--ed-text-faint);
    font-variant-numeric: tabular-nums;
}

/* No results state */
.global-search-empty {
    padding: 1rem 0.75rem;
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
    font-style: italic;
    text-align: center;
}

/* --- Mobile: full-width search below dateline text --- */
@media (max-width: 575px) {
    .dateline {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dateline-text {
        width: 100%;
        text-align: center;
    }

    .global-search {
        flex: 1 1 100%;
        max-width: none;
    }

    .global-search-input {
        font-size: var(--text-sm);
        padding: 0.375rem 0;
    }

    /* Dropdown covers full container width on mobile */
    .global-search-results {
        width: calc(100vw - 2 * var(--container-padding-inline));
        inset-inline-start: 50%;
        inset-inline-end: auto;
        transform: translateX(-50%) translateY(-0.25rem);
    }

    .global-search-results:not(:empty) {
        transform: translateX(-50%) translateY(0);
    }

    .global-search-results.is-hidden {
        transform: translateX(-50%) translateY(-0.25rem);
    }

    /* RTL mobile: mirror the centering transform */
    [dir="rtl"] .global-search-results {
        inset-inline-start: auto;
        inset-inline-end: 50%;
        transform: translateX(50%) translateY(-0.25rem);
    }

    [dir="rtl"] .global-search-results:not(:empty) {
        transform: translateX(50%) translateY(0);
    }

    [dir="rtl"] .global-search-results.is-hidden {
        transform: translateX(50%) translateY(-0.25rem);
    }
}

/* --- Tablet+ tweaks --- */
@media (min-width: 576px) {
    .global-search {
        flex: 0 1 18rem;
    }
}

@media (min-width: 768px) {
    .global-search {
        flex: 0 1 20rem;
        max-width: 22rem;
    }

    .global-search-results {
        width: 24rem;
    }
}

/* --- RTL: input text direction and alignment --- */
[dir="rtl"] .global-search-input {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
    text-align: start;
}

[dir="rtl"] .global-search-input::placeholder {
    font-style: normal; /* italic can look off in Arabic */
}

[dir="rtl"] .global-search-name {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
}

[dir="rtl"] .global-search-empty {
    font-style: normal;
    letter-spacing: 0;
}

/* --- Dark mode: ensure dropdown contrast --- */
[data-theme="dark"] .global-search-results {
    border-color: var(--ed-border-strong);
    border-block-start-color: var(--ed-border-rule);
}

[data-theme="dark"] .global-search-input::-webkit-search-cancel-button {
    background: var(--ed-text-faint);
}

/* Legacy Pico header nav compatibility — hide default Pico header */
header.container {
    padding-block: 0;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ============================================================
   5. MAIN CONTENT AREA
   ============================================================ */

main {
    padding-block-start: var(--space-between);
    padding-block-end: var(--space-major);
}


/* HTMX page transitions — fast fade on hx-boost navigation */
#content {
    transition: opacity 150ms ease;
}

#content.htmx-swapping {
    opacity: 0;
}


/* ============================================================
   6. TYPOGRAPHY — Serif headings, sans body
   ============================================================ */

main h1 {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    margin-block-end: 1rem;
    color: var(--ed-text);
    letter-spacing: -0.01em;
}

main h2 {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
    margin-block-end: var(--space-tight);
    color: var(--ed-text);
}

main h3 {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    margin-block-end: 0.5rem;
    color: var(--ed-text);
}

main p {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ed-text-secondary);
}

main a {
    color: var(--ed-link);
    text-decoration: underline;
    text-decoration-color: var(--ed-border-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-normal), text-decoration-color var(--transition-normal);
}

main a:hover {
    color: var(--ed-link-hover);
    text-decoration-color: var(--ed-link-hover);
}

@media (min-width: 576px) {
    main h1 {
        font-size: var(--text-3xl);
    }
    main h2 {
        font-size: var(--text-2xl);
    }
}

@media (min-width: 768px) {
    main h1 {
        font-size: var(--text-4xl);
        margin-block-end: 1.25rem;
    }
    main h2 {
        font-size: var(--text-2xl);
    }
}

/* Section dividers — thin editorial rules */
.section-rule {
    border: 0;
    border-block-start: var(--border-thin) solid var(--ed-border);
    margin-block: var(--space-between);
}


/* ============================================================
   7. COUNTRY TABS — Newspaper section navigation
   ============================================================ */

.country-tabs {
    display: flex;
    gap: 0;
    padding-block-end: 0;
    margin-block-end: var(--space-tight);
    border-block-end: var(--border-thin) solid var(--ed-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}

/* Hide scrollbar visually */
.country-tabs::-webkit-scrollbar {
    display: none;
}

.country-tab {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.5rem 0.875rem;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--ed-text-muted);
    background: transparent;
    border: none;
    border-block-end: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
    min-height: 2.5rem;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.country-tab:hover {
    color: var(--ed-text);
    background: transparent;
    border-block-end-color: var(--ed-border-strong);
}

.country-tab.active {
    color: var(--ed-text);
    font-weight: 700;
    background: transparent;
    border-block-end-color: var(--ed-border-rule);
}

/* Station count in country tabs — tiny muted parenthetical. */
.country-tab-count {
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--ed-text-faint);
}

.country-tab.active .country-tab-count {
    color: var(--ed-text-muted);
}

@media (min-width: 768px) {
    .country-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

[dir="rtl"] .country-tab {
    text-transform: none;
    letter-spacing: 0;
}


/* ============================================================
   8. FILTER BAR
   ============================================================ */

.filter-bar {
    margin-block-end: var(--space-tight);
    padding-block-end: 1.25rem;
    border-block-end: var(--border-thin) solid var(--ed-border);
}

/* --- Filter controls row: dropdowns + search input --- */
.filter-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-select,
.filter-search {
    width: 100%;
    margin-block-end: 0;
    font-size: var(--text-sm);
    background: transparent;
    border: none;
    border-block-end: 1px solid var(--ed-border);
    border-radius: 0;
    color: var(--ed-text);
    transition: border-color var(--transition-fast);
}

.filter-select:focus,
.filter-search:focus {
    border-block-end-color: var(--ed-text);
    box-shadow: none;
    outline: none;
}

@media (min-width: 576px) {
    .filter-controls {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .filter-select {
        flex: 0 1 auto;
        width: auto;
        min-width: 10rem;
        max-width: 14rem;
    }

    .filter-search {
        flex: 1 1 12rem;
        width: auto;
        min-width: 10rem;
        max-width: 22rem;
    }
}


/* ============================================================
   8b. MOOD FILTER PILLS — Editorial section markers
   Horizontal row of quick-filter buttons above the station grid.
   NYT section-tab aesthetic: flat, uppercase (Latin), inverted active.
   ============================================================ */

.mood-pills {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block-start: 0.875rem;
    flex-wrap: nowrap;
}

.mood-pills::-webkit-scrollbar { display: none; }

.mood-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    min-height: 2.75rem; /* 44px tap target */
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    border: var(--border-thin) solid var(--ed-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ed-text-muted);
    cursor: pointer;
    white-space: nowrap;
    /* Override Pico CSS button defaults */
    --pico-background-color: transparent;
    box-shadow: none;
    text-decoration: none;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background-color var(--transition-fast);
}

.mood-pill:hover {
    color: var(--ed-text);
    border-color: var(--ed-text);
}

/* Active state: inverted — dark bg, light text */
.mood-pill.active {
    color: var(--ed-bg);
    background: var(--ed-text);
    border-color: var(--ed-text);
}

.mood-pill.active:hover {
    color: var(--ed-bg);
    background: var(--ed-text);
    border-color: var(--ed-text);
}

/* Keyboard focus ring */
.mood-pill:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}

/* RTL: Arabic text must never have letter-spacing or uppercase */
[dir="rtl"] .mood-pill {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-sm);
}


/* ============================================================
   9. STATION GRID & TILES — Premium editorial cards
   ============================================================ */

.station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-tile), 1fr));
    gap: var(--grid-gap);
    margin-block-end: var(--space-between);
}

.station-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 0.75rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-base);
    text-align: center;
    color: var(--ed-text);
    background: var(--ed-bg-card);
    border: var(--border-thin) solid var(--ed-border);
    transition:
        border-color var(--transition-normal),
        background-color var(--transition-normal),
        transform 150ms ease;
    cursor: pointer;
    gap: 0.375rem;
    word-break: break-word;
    hyphens: auto;

    /* Fade-in stagger — tiles start invisible, animate in sequentially */
    opacity: 0;
    animation: tileReveal 0.3s ease forwards;
}

/* Staggered delay: each tile waits 30ms more than the previous, capped at 15 */
.station-tile:nth-child(1)  { animation-delay:   0ms; }
.station-tile:nth-child(2)  { animation-delay:  30ms; }
.station-tile:nth-child(3)  { animation-delay:  60ms; }
.station-tile:nth-child(4)  { animation-delay:  90ms; }
.station-tile:nth-child(5)  { animation-delay: 120ms; }
.station-tile:nth-child(6)  { animation-delay: 150ms; }
.station-tile:nth-child(7)  { animation-delay: 180ms; }
.station-tile:nth-child(8)  { animation-delay: 210ms; }
.station-tile:nth-child(9)  { animation-delay: 240ms; }
.station-tile:nth-child(10) { animation-delay: 270ms; }
.station-tile:nth-child(11) { animation-delay: 300ms; }
.station-tile:nth-child(12) { animation-delay: 330ms; }
.station-tile:nth-child(13) { animation-delay: 360ms; }
.station-tile:nth-child(14) { animation-delay: 390ms; }
.station-tile:nth-child(15) { animation-delay: 420ms; }
.station-tile:nth-child(n+16) { animation-delay: 0ms; }

@keyframes tileReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .station-tile {
        opacity: 1;
        animation: none;
    }
    .station-tile:active {
        transform: none;
    }
}

.station-tile:hover {
    border-color: var(--ed-border-rule);
    color: var(--ed-text);
    background: var(--ed-bg-warm);
}

.station-tile:active {
    color: var(--ed-text);
    transform: scale(0.95);
}

.station-tile-name {
    line-height: 1.35;
}

/* Frequency subtitle — tiny muted line below the station name (e.g. "97.1 FM").
   Visually subordinate to the name, same weight hierarchy as .station-tile-listeners. */
.station-tile-freq {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--ed-text-faint);
    line-height: 1;
    margin-block-start: -0.125rem;
    white-space: nowrap;
}

.station-tile:hover .station-tile-freq {
    color: var(--ed-accent);
}

[data-theme="dark"] .station-tile-freq {
    color: #7D7768;
}

/* #1 Today badge — editorial "editor's pick" label */
.station-badge-top {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    font-family: var(--font-sans);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ed-bg);
    background: var(--ed-border-rule);
    padding: 0.125rem 0.25rem;
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[dir="rtl"] .station-badge-top {
    text-transform: none;
    letter-spacing: 0;
}

@media (min-width: 576px) {
    .station-badge-top {
        font-size: var(--text-xs);
        padding: 0.25rem 0.4375rem;
    }
}

/* "New" badge — quiet editorial section marker, bottom-left of tile */
.station-badge-new {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ed-text-faint);
    padding: 0.1875rem 0.25rem;
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-block-start: var(--border-thin) solid var(--ed-border);
}

[dir="rtl"] .station-badge-new {
    text-transform: none;
    letter-spacing: 0;
}

@media (min-width: 576px) {
    .station-badge-new {
        font-size: 0.625rem;
        padding: 0.25rem 0.3125rem;
    }
}

/* Live indicator — green dot + "X listening" for stations with active listeners.
   Sits in the tile flex column between the frequency and the badges/play-count.
   The pulsing dot draws the eye without being distracting — a heartbeat cadence.

   Hierarchy: station-tile-name (primary) > freq (secondary) > live-indicator
   (tertiary, colored) > listeners (quaternary, faintest).

   Intentionally keeps --ed-live-dot green on hover and active states — the
   color is semantic ("live") and should not shift to accent on interaction.
   Contrast: ~4.3:1 on light card bg, ~6:1 on dark — adequate for supplementary
   metadata at 10px. */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;             /* 10px — smallest text in the tile hierarchy */
    font-weight: 400;                /* normal weight, matching other metadata lines */
    color: var(--ed-live-dot);
    white-space: nowrap;
    line-height: 1;
    margin-block-start: -0.0625rem;  /* tighten into tile flex gap, like freq/listeners */
    max-inline-size: 100%;           /* contain within tile padding box on narrow tiles */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep green on hover — semantic color, not decorative */
.station-tile:hover .live-indicator {
    color: var(--ed-live-dot);
}

/* Keep green on active (playing) tile — "live" trumps "active" state */
.station-tile.station-active .live-indicator {
    color: var(--ed-live-dot);
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ed-live-dot);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Dark mode: add a faint glow around the dot for visibility on dark card bg */
[data-theme="dark"] .live-dot {
    box-shadow: 0 0 3px rgba(90, 175, 114, 0.4);
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
}

/* Listener count — quiet metadata below station name, newspaper caption style.
   "X listeners today" sits in the tile flex column under station-tile-name.
   Must stay visually subordinate: smaller, lighter, capped to one line. */
.station-tile-listeners {
    display: block;
    font-size: 0.6875rem;            /* 11px — below --text-xs to stay truly quiet */
    font-weight: 400;                /* normal weight vs tile's 500 for clear hierarchy */
    color: var(--ed-text-faint);
    line-height: 1;                  /* tight: minimize vertical contribution to tile */
    margin-block-start: -0.0625rem;  /* pull closer to name, partially offsetting flex gap */
    white-space: nowrap;             /* cap to one line — no wrapping on small tiles */
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;           /* contain within tile padding box */
    transition: color var(--transition-fast);
}

.station-tile:hover .station-tile-listeners {
    color: var(--ed-accent);
}

/* Dark mode: --ed-text-faint (#6B665C) is ~3:1 on dark card bg at 11px.
   Nudge to #7D7768 for ~3.7:1 — still faint, but legible. */
[data-theme="dark"] .station-tile-listeners {
    color: #7D7768;
}

/* Print: tile listeners — see consolidated @media print block at end of file */

/* Now-on-air label — current program name from schedule data.
   Green italic, tiny, truncated with ellipsis. Only appears on tiles
   where a show is currently airing (JS injects span via now-batch API).
   Styled like a live indicator credit line: quiet, green, semantic.

   Design decisions:
   - 9px italic green — reads like a newspaper byline / live ticker
   - Keeps green on hover and active states (semantic "live" color,
     same rationale as .live-indicator)
   - Zero top margin + negative pull to avoid increasing tile height
   - :empty hides the element entirely when JS clears it
   - RTL: no italic (Arabic has no italic tradition), Arabic font,
     slightly larger for legibility */
.tile-now-on-air {
    display: block;
    font-size: 0.5625rem;           /* 9px — smallest in the tile hierarchy */
    font-style: italic;
    font-weight: 400;
    color: var(--ed-live-dot);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-inline-size: 100%;
    line-height: 1;
    margin-block-start: -0.0625rem; /* pull closer into flex gap, like freq/listeners */
    transition: color var(--transition-fast);
}

/* Vanish when JS has not populated or clears the text */
.tile-now-on-air:empty {
    display: none;
}

/* Keep green on hover — semantic color ("on air"), not decorative */
.station-tile:hover .tile-now-on-air {
    color: var(--ed-live-dot);
}

/* Keep green on active (playing) tile — "on air" trumps "active" state */
.station-tile.station-active .tile-now-on-air {
    color: var(--ed-live-dot);
}

/* Dark mode: nudge green brighter for legibility on dark card bg.
   Uses same enhanced green as .live-indicator in dark mode. */
[data-theme="dark"] .tile-now-on-air {
    color: var(--ed-live-dot);
}

/* Print: hide now-on-air — see consolidated @media print block at end of file */

/* Favorite star button — top-left corner of station tile */
.favorite-btn {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.375rem;
    border: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.station-tile:hover .favorite-btn,
.station-tile:focus-within .favorite-btn,
.favorite-btn.is-favorited {
    opacity: 1;
}

.favorite-icon {
    fill: none;
    stroke: var(--ed-text-muted);
    stroke-width: 1.5;
    transition:
        fill var(--transition-fast),
        stroke var(--transition-fast),
        transform var(--transition-fast);
}

.favorite-btn:hover .favorite-icon {
    stroke: var(--ed-accent);
    transform: scale(1.15);
}

.favorite-btn.is-favorited .favorite-icon {
    fill: var(--ed-accent);
    stroke: var(--ed-accent);
}

/* On the favorites page, always show the star button */
.favorites-page .favorite-btn {
    opacity: 1;
}

/* No results */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ed-text-muted);
    padding: 3rem 1rem;
    font-size: var(--text-base);
    font-style: italic;
}

/* Active station highlight */
.station-tile.station-active {
    border-color: var(--ed-accent);
    border-width: 2px;
    background: var(--ed-accent-subtle);
}

.station-tile.station-active .station-tile-listeners {
    color: var(--ed-accent);
}

/* "Now playing" pulsing dot — small accent-colored indicator outside the tile border */
.station-tile.station-active::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ed-accent);
    transform: translateY(-50%);
    animation: pulse-now-playing 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse-now-playing {
    0%   { transform: translateY(-50%) scale(1);   opacity: 0.7; }
    50%  { transform: translateY(-50%) scale(1.4); opacity: 1; }
    100% { transform: translateY(-50%) scale(1);   opacity: 0.7; }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .station-tile.station-active::before {
        animation: none;
        opacity: 1;
    }
}

.trending-item.station-active {
    border-color: var(--ed-accent);
    background: var(--ed-accent-subtle);
    color: var(--ed-text);
}

.trending-item.station-active .trending-count {
    color: var(--ed-accent);
}

/* Mini equalizer overlay on active playing tile — disabled now that the
   inline play/pause button occupies the same bottom-right corner and the
   pause icon already communicates "currently playing" state.
   Kept as comment for reference; remove tile-eq keyframes when confident. */
/* .station-tile-playing::after { ... } */

@keyframes tile-eq {
    0%   { background-size: 3px 2px,  3px 3px,  3px 2px; }
    15%  { background-size: 3px 10px, 3px 4px,  3px 8px; }
    30%  { background-size: 3px 5px,  3px 11px, 3px 4px; }
    45%  { background-size: 3px 9px,  3px 6px,  3px 11px; }
    60%  { background-size: 3px 3px,  3px 10px, 3px 5px; }
    75%  { background-size: 3px 11px, 3px 3px,  3px 9px; }
    90%  { background-size: 3px 4px,  3px 8px,  3px 3px; }
    100% { background-size: 3px 2px,  3px 3px,  3px 2px; }
}

/* Inline play/pause button — bottom-right (logical end) of station tile.
   NYT editorial: subtle, no radius, appears on hover (desktop), always
   visible on touch devices. Play triangle swaps to pause bars when active.
   Positioned to not conflict with: favorite star (top-left), #1 badge
   (top-right), NEW badge (bottom-left). */
.tile-play-btn {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ed-text-muted);
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
    opacity: 0;
    transition:
        opacity var(--transition-fast),
        color var(--transition-fast),
        background-color var(--transition-fast);
}

/* Desktop: reveal on tile hover or keyboard focus-within */
.station-tile:hover .tile-play-btn,
.station-tile:focus-within .tile-play-btn {
    opacity: 1;
}

/* Focus-visible: editorial understate — thin accent outline */
.tile-play-btn:focus-visible {
    opacity: 1;
    outline: 1px solid var(--ed-accent);
    outline-offset: -1px;
}

/* Hover: subtle background fill, accent color text */
.tile-play-btn:hover {
    color: var(--ed-accent);
    background: var(--ed-accent-subtle);
}

/* Active press: quiet scale-down feedback */
.tile-play-btn:active {
    transform: scale(0.92);
}

/* Icon sizing — small, subordinate to tile text */
.tile-play-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Optical centering: play triangle is visually left-heavy, nudge right */
.tile-play-btn .icon-play {
    margin-inline-start: 1px;
}

/* Default: show play, hide pause */
.tile-play-btn .icon-pause { display: none; }

/* Active tile (station playing): swap to pause icon */
.station-tile-playing .tile-play-btn .icon-play { display: none; }
.station-tile-playing .tile-play-btn .icon-pause { display: block; }

/* Active tile: always show the button (not just on hover) */
.station-tile.station-active .tile-play-btn,
.station-tile.station-tile-playing .tile-play-btn {
    opacity: 1;
    color: var(--ed-accent);
}

/* Touch devices: always visible, prominently sized for fat-finger
   tapping.  44px minimum meets WCAG 2.5.5 Target Size (Enhanced).
   Positioned at the bottom-inline-end corner with a subtle circular
   background so the play triangle reads as a button, not decoration. */
@media (hover: none), (pointer: coarse) {
    .tile-play-btn {
        opacity: 0.85;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        background: var(--ed-accent-subtle, rgba(0, 0, 0, 0.06));
        color: var(--ed-accent, #1a1a1a);
    }

    .tile-play-icon {
        width: 20px;
        height: 20px;
    }

    /* Active / playing tile: accent-filled circle for pause icon */
    .station-tile.station-active .tile-play-btn,
    .station-tile.station-tile-playing .tile-play-btn {
        opacity: 1;
        background: var(--ed-accent-subtle, rgba(0, 0, 0, 0.08));
    }
}

/* Dark mode touch: ensure the circle is visible on dark cards */
@media (hover: none), (pointer: coarse) {
    [data-theme="dark"] .tile-play-btn {
        background: rgba(255, 255, 255, 0.08);
        color: #b0a998;
    }

    [data-theme="dark"] .station-tile.station-active .tile-play-btn,
    [data-theme="dark"] .station-tile.station-tile-playing .tile-play-btn {
        color: var(--ed-accent);
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Dark mode: ensure contrast on dark card backgrounds */
[data-theme="dark"] .tile-play-btn {
    color: #9A9588;
}

[data-theme="dark"] .tile-play-btn:hover {
    color: var(--ed-accent);
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .station-tile.station-active .tile-play-btn,
[data-theme="dark"] .station-tile.station-tile-playing .tile-play-btn {
    color: var(--ed-accent);
}

/* Reduced motion: disable transform transition */
@media (prefers-reduced-motion: reduce) {
    .tile-play-btn { transition: none; }
}

@media (min-width: 576px) {
    .station-tile {
        padding: 1rem 0.875rem;
        font-size: var(--text-md);
    }
}


/* ============================================================
   10. TRENDING / POPULAR SECTIONS — Editorial feature boxes
   ============================================================ */

.trending-section {
    margin-block-end: var(--space-between);
    border-block-start: 2px solid var(--ed-border-rule);
    padding-block-start: var(--space-tight);
    background: transparent;
    position: relative;
}

.trending-section h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: var(--space-tight);
    color: var(--ed-text-muted);
}

[dir="rtl"] .trending-section h2 {
    text-transform: none;
    letter-spacing: 0;
}

.section-timestamp {
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
    font-size: 0.85em;
    margin-inline-start: 0.25em;
}

.trending-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.trending-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ed-text);
    background: var(--ed-bg-card);
    border: var(--border-thin) solid var(--ed-border);
    transition:
        border-color var(--transition-normal);
    min-height: 2.375rem;
}

.trending-item:hover {
    border-color: var(--ed-border-rule);
    color: var(--ed-text);
    background: var(--ed-bg-card);
}

.trending-count {
    font-size: var(--text-xs);
    color: var(--ed-text-faint);
}

.trending-item:hover .trending-count {
    color: var(--ed-accent);
}

/* On small mobile, stack trending items vertically */
@media (max-width: 575px) {
    .trending-list {
        flex-direction: column;
    }

    .trending-item {
        width: 100%;
    }
}

/* Station of the Day — accent top border to distinguish from regular sidebar sections */
.station-of-the-day {
    border-block-start-color: var(--ed-accent);
}

.sotd-item {
    font-size: var(--text-base);
    font-weight: 600;
}


/* ============================================================
   10a. LISTENING STREAK — Consecutive days counter
   ============================================================ */

.listening-streak .streak-display {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-block-start: 0.25rem;
}

.listening-streak .streak-number {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ed-text);
}

.listening-streak .streak-label {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
}

[dir="rtl"] .listening-streak .streak-number {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] .listening-streak .streak-label {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}


/* ============================================================
   10a-2. SESSION LISTENING TIME — Daily accumulated counter
   ============================================================ */

.session-time .session-time-display {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-block-start: 0.25rem;
}

.session-time .session-time-value {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ed-text-muted);
}

[dir="rtl"] .session-time .session-time-value {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}


/* ============================================================
   10b. HOME TWO-COLUMN LAYOUT — Main + sidebar on desktop
   ============================================================ */

.home-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-between);
}

.home-sidebar .trending-section {
    margin-block-end: var(--space-between);
}

@media (min-width: 1024px) {
    .home-layout {
        grid-template-columns: 1fr 17rem;
        column-gap: 2.5rem;
        align-items: start;
    }

    .home-sidebar {
        position: sticky;
        inset-block-start: 1rem;
        border-inline-start: var(--border-thin) solid var(--ed-border);
        padding-inline-start: 1.25rem;
    }

    .home-sidebar .trending-list {
        flex-direction: column;
    }

    .home-sidebar .trending-item {
        width: 100%;
    }
}


/* ============================================================
   10c. HOME HERO CTA — Editorial invitation above the station grid.

   Centered, text-only, generous whitespace. Feels like a broadsheet
   section opener that invites the reader in — NOT a SaaS landing hero.
   Serif subtitle + accent-outlined CTA button (matches station detail
   hero play button). Collapses gracefully when a station starts
   playing (handled in player.js).
   ============================================================ */

.hero-cta {
    text-align: center;
    padding-block: var(--space-between) var(--space-tight);
    margin-block-end: var(--space-tight);
    border-block-end: var(--border-thin) solid var(--ed-border);
}

/* Subtitle: serif, warm, inviting — like a newspaper section intro.
   Shows station count for credibility ("Discover 50+ stations"). */
.hero-subtitle {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: var(--ed-text-secondary);
    margin-block-end: 1.25rem;
}

/* CTA button: accent-outlined, matches .station-hero-play on station
   detail pages. Full-width on mobile, inline on desktop. */
.hero-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.75rem 2rem;
    min-height: 2.75rem;
    border: 2px solid var(--ed-accent);
    border-radius: 0;
    background: transparent;
    color: var(--ed-accent);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal);
}

.hero-play-btn:hover {
    background: var(--ed-accent);
    color: var(--ed-accent-text);
    border-color: var(--ed-accent);
}

.hero-play-btn:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}

.hero-play-btn:active {
    background: var(--ed-accent-hover);
    border-color: var(--ed-accent-hover);
    color: var(--ed-accent-text);
}

/* Icon inside the CTA */
.hero-cta-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Desktop: shrink button to content width, centered */
@media (min-width: 576px) {
    .hero-play-btn {
        display: inline-flex;
        width: auto;
    }

    .hero-subtitle {
        font-size: var(--text-xl);
    }
}

@media (min-width: 768px) {
    .hero-cta {
        padding-block: var(--space-between);
    }

    .hero-subtitle {
        font-size: var(--text-2xl);
    }
}

/* RTL/Arabic overrides: Noto Sans Arabic for serif role,
   no letter-spacing or text-transform on any element. */
[dir="rtl"] .hero-subtitle {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    font-style: normal;
    letter-spacing: 0;
}

[dir="rtl"] .hero-play-btn {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
}


/* ============================================================
   11. STATION DETAIL PAGE — NYT editorial layout
   Normal document flow. Typography and whitespace do the work.
   ============================================================ */

/* --- Article container: two-column on desktop --- */
.station-detail {
    max-width: 48rem;
    margin-inline: auto;
}

/* Genre accent line — muted editorial color coding on station detail,
   like newspaper section markers. Applied via genre-accent-{slug} class. */
.genre-accent-generaliste  { border-block-start: 3px solid #74808A; }
.genre-accent-musique      { border-block-start: 3px solid #8498AA; }
.genre-accent-info         { border-block-start: 3px solid #8C7B6B; }
.genre-accent-religieux    { border-block-start: 3px solid #7B8C6B; }
.genre-accent-culture      { border-block-start: 3px solid #96788A; }
.genre-accent-jeunes       { border-block-start: 3px solid #728C96; }
.genre-accent-sport        { border-block-start: 3px solid #8C6B6B; }
.genre-accent-internationale { border-block-start: 3px solid #7E7E96; }
.genre-accent-regionale    { border-block-start: 3px solid #8C8B6B; }

@media (min-width: 1024px) {
    .station-detail {
        max-width: 60rem;
        display: grid;
        grid-template-columns: 1fr 16rem;
        column-gap: 2.5rem;
        align-items: start;
    }
    .station-detail > * { grid-column: 1 / -1; }
    .station-header,
    .station-detail > .ad-slot-leaderboard,
    .station-description,
    .station-schedule,
    .station-tags,
    .station-listener-geo,
    .station-share,
    .station-embed-section,
    .related-stations,
    .cross-country-stations { grid-column: 1 / 2; }
    .station-info { grid-column: 2 / 3; grid-row: 1 / 5; }
    .station-detail > .ad-slot-rectangle { grid-column: 2 / 3; }
}

/* --- Station header: normal flow, NOT flex (so inline <p> stats work) --- */
.station-header {
    padding-block-end: 1.25rem;
    margin-block-end: var(--space-between);
    border-block-end: var(--border-thin) solid var(--ed-border);
}

/* Kill all Pico default margins inside header */
.station-header > * {
    margin: 0;
}

.station-header h1 {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ed-text);
}

@media (min-width: 768px) {
    .station-header h1 {
        font-size: var(--text-4xl);
        line-height: 1.08;
        letter-spacing: -0.015em;
    }
}

@media (min-width: 1024px) {
    .station-header h1 {
        font-size: 2.625rem;
    }
}

/* --- Slogan --- */
.station-slogan {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ed-text-secondary);
    font-size: var(--text-md);
    line-height: 1.4;
    margin-block-start: 0.375rem !important;
}

@media (min-width: 768px) {
    .station-slogan {
        font-size: var(--text-lg);
    }
}

/* --- Stats: inline text with middots — NYT byline style --- */
/* These are <p> tags — display:inline makes them flow on one line */
.station-play-count {
    display: inline !important;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--ed-text-muted);
    line-height: 2;
}

.station-play-count + .station-play-count::before {
    content: '\2009\00b7\2009';
    color: var(--ed-border-strong);
}

/* --- Hero play button: accent-outlined CTA on station detail.
   Prominent but editorial — like a newspaper "Subscribe" CTA.
   Outline in accent color, inverts fully on hover + playing state. --- */
.station-hero-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 2rem;
    margin-block-start: 1.25rem;
    min-height: 2.75rem;
    border: 2px solid var(--ed-accent);
    border-radius: 0;
    background: transparent;
    color: var(--ed-accent);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal);
}

/* Desktop: shrink to content width */
@media (min-width: 576px) {
    .station-hero-play {
        display: inline-flex;
        justify-content: flex-start;
    }
}

.station-hero-play:hover {
    background: var(--ed-accent);
    color: var(--ed-accent-text);
    border-color: var(--ed-accent);
}

.station-hero-play:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}

.station-hero-play:active {
    background: var(--ed-accent-hover);
    border-color: var(--ed-accent-hover);
    color: var(--ed-accent-text);
}

/* Playing state: filled accent background, stays inverted */
.station-hero-play.is-playing {
    background: var(--ed-accent);
    border-color: var(--ed-accent);
    color: var(--ed-accent-text);
}

.station-hero-play.is-playing:hover {
    background: var(--ed-accent-hover);
    border-color: var(--ed-accent-hover);
}

.hero-play-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

/* Default: show play, hide pause */
.station-hero-play .icon-pause {
    display: none;
}

/* Playing state: show pause, hide play */
.station-hero-play.is-playing .icon-play {
    display: none;
}

.station-hero-play.is-playing .icon-pause {
    display: inline;
}

.hero-play-label {
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* RTL: never use letter-spacing or text-transform on Arabic */
[dir="rtl"] .hero-play-label {
    text-transform: none;
    letter-spacing: 0;
}

/* --- Description --- */
.station-description {
    margin-block-end: var(--space-between);
    line-height: 1.7;
    font-size: var(--text-md);
    color: var(--ed-text-secondary);
}

/* Drop-cap on first paragraph of station description */
.station-description p:first-of-type::first-letter {
    font-size: 3.5em;
    float: inline-start;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 0.8;
    padding-inline-end: 0.1em;
    padding-block-start: 0.05em;
    color: var(--ed-text);
}

/* Disable drop-cap for Arabic — connected script doesn't work with drop-caps */
[dir="rtl"] .station-description p:first-of-type::first-letter {
    font-size: inherit;
    float: none;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
}

@media (min-width: 768px) {
    .station-description {
        font-size: 1.0625rem;
        line-height: 1.75;
    }
}


/* --- Program schedule table: NYT/newspaper TV-guide style ---
   Thin hairline borders, alternating row tints, monospace time column,
   "now on air" highlight row.  Table scrolls horizontally on mobile.
   Time values stay LTR even in RTL layouts. --- */

.station-schedule {
    margin-block-start: var(--space-between);
    margin-block-end: 0;
    padding-block-start: var(--space-tight);
    border-block-start: 2px solid var(--ed-text);
}

/* Section heading: editorial label — matches .station-daily-chart h2 */
.station-schedule h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text);
    margin-block-end: 0;
}

/* RTL: Arabic heading — drop uppercase and letter-spacing */
[dir="rtl"] .station-schedule h2 {
    text-transform: none;
    letter-spacing: 0;
}

/* Day label (e.g. "Mercredi — Aujourd'hui") — quiet italic caption */
.schedule-day-label {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
    margin-block-start: 0.125rem;
    margin-block-end: var(--space-tight);
}

/* Scrollable wrapper for mobile — keeps table from blowing out page width */
.schedule-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
}

/* The table itself — full-width, collapsed borders, editorial hairlines */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Thin hairline between all rows — not heavy borders */
.schedule-table th,
.schedule-table td {
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--ed-border);
    text-align: start;
    vertical-align: top;
}

/* Header row: 2px bottom border (editorial ruling line), muted label text */
.schedule-table thead th {
    font-weight: 700;
    font-size: var(--text-xs);
    color: var(--ed-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-block-end: 2px solid var(--ed-text);
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
}

/* RTL: Arabic table headers — drop uppercase and letter-spacing */
[dir="rtl"] .schedule-table thead th {
    text-transform: none;
    letter-spacing: 0;
}

/* Alternating row tints — subtle newsprint zebra stripe */
.schedule-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .schedule-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* --- Time column: monospace, muted, fixed-width for clean alignment --- */
.schedule-time {
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    font-size: var(--text-xs);
    color: var(--ed-text-muted);
    white-space: nowrap;
    min-width: 6.5rem;
}

/* Time always reads left-to-right, even in RTL */
.schedule-time span[dir="ltr"] {
    unicode-bidi: isolate;
}

/* --- Show name column: primary, slightly bolder --- */
.schedule-show {
    font-weight: 600;
    color: var(--ed-text);
}

/* --- Host column: muted secondary, italic for editorial voice --- */
.schedule-host {
    color: var(--ed-text-secondary);
    font-weight: 400;
    font-style: italic;
}

/* RTL: enforce LTR direction on the entire time cell (belt-and-suspenders
   with the inner span[dir="ltr"]) so numbers never reorder in Arabic */
[dir="rtl"] .schedule-time {
    direction: ltr;
    text-align: end;
}

/* --- "Now on air" highlight: warm accent tint + inset accent stripe ---
   Uses box-shadow instead of border-inline-start to avoid layout shift
   in collapsed-border tables. The inset shadow creates a 3px accent
   stripe on the start edge without disturbing cell widths. */
.schedule-row.schedule-now {
    background: var(--ed-accent-subtle);
    box-shadow: inset 3px 0 0 var(--ed-accent);
}

[dir="rtl"] .schedule-row.schedule-now {
    box-shadow: inset -3px 0 0 var(--ed-accent);
}

.schedule-row.schedule-now .schedule-time {
    color: var(--ed-accent);
    font-weight: 700;
}

.schedule-row.schedule-now .schedule-show {
    color: var(--ed-accent);
}

/* Dark mode: strengthen the "now" highlight for visibility */
[data-theme="dark"] .schedule-row.schedule-now {
    background: rgba(196, 73, 90, 0.15);
}

/* --- Mobile (< 576px): tighter padding, smaller text --- */
@media (max-width: 575px) {
    .schedule-table {
        font-size: var(--text-xs);
        min-width: 28rem;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 0.375rem 0.5rem;
    }

    .schedule-time {
        font-size: 0.6875rem;
        min-width: 5.5rem;
    }
}

/* --- Desktop (>= 1024px): schedule stays in main column --- */
@media (min-width: 1024px) {
    .station-schedule {
        grid-column: 1 / 2;
    }
}


/* --- Station info: right-rail sidebar --- */
.station-info {
    margin-block-end: var(--space-between);
}

.station-info h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: 0.625rem;
    padding-block-end: 0.5rem;
    border-block-end: 2px solid var(--ed-text);
}

.station-info-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.station-info-list dt {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--ed-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-block-start: 0.5rem;
    border-block-start: var(--border-thin) solid var(--ed-border);
    margin: 0;
}

.station-info-list dt:first-child {
    border-block-start: none;
    padding-block-start: 0;
}

.station-info-list dd {
    margin-inline-start: 0;
    font-size: var(--text-sm);
    color: var(--ed-text);
    padding-block-end: 0.5rem;
    padding-block-start: 0.125rem;
    line-height: 1.35;
}

.station-info-list dd a {
    color: var(--ed-text);
    text-decoration: underline;
    text-decoration-color: var(--ed-border-strong);
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color var(--transition-fast);
}

.station-info-list dd a:hover {
    text-decoration-color: var(--ed-text);
}

@media (min-width: 1024px) {
    .station-info {
        padding-inline-start: 1.25rem;
        border-inline-start: var(--border-thin) solid var(--ed-border);
        position: sticky;
        inset-block-start: 1rem;
    }
}

@media (max-width: 1023px) {
    .station-info {
        margin-block-start: var(--space-between);
        padding-block-start: var(--space-tight);
        border-block-start: var(--border-thin) solid var(--ed-border);
    }
}

/* --- Ad slots: hidden until ads load --- */
.station-detail .ad-slot {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
}

.station-detail .ad-slot.ad-loaded {
    max-height: 20rem;
    margin-block: var(--space-major);
    padding-block: var(--space-tight);
    border-block-start: var(--border-thin) solid var(--ed-border);
    border-block-end: var(--border-thin) solid var(--ed-border);
}

/* --- Related stations --- */
.related-stations {
    margin-block-start: var(--space-major);
    margin-block-end: var(--space-tight);
    padding-block-start: var(--space-tight);
    border-block-start: 2px solid var(--ed-text);
}

.related-stations h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text);
    margin-block-end: var(--space-tight);
}

.related-stations .station-grid {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
}

.related-stations .station-tile {
    padding: 0.625rem 0.5rem;
    min-height: 2.75rem;
    font-size: var(--text-sm);
}

.related-stations .station-badge-new {
    display: none;
}

/* --- Cross-country stations ("Also in {genre}") ---
   Editorial "See also" recommendation. Visually distinct from related
   stations above: serif heading, prominent country flags on tiles,
   thicker rule separator.  4-6 tiles for discovery, not exhaustive. */
.cross-country-stations {
    margin-block-start: var(--space-between);
    margin-block-end: var(--space-tight);
    padding-block-start: var(--space-tight);
    border-block-start: var(--border-rule) solid var(--ed-border-rule);
}

.cross-country-stations h2 {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 700;
    font-style: italic;
    color: var(--ed-text);
    margin-block-end: var(--space-tight);
    line-height: 1.3;
}

.cross-country-stations .station-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.625rem;
}

.cross-country-stations .station-tile {
    padding: 0.75rem 0.5rem 0.625rem;
    min-height: 3.5rem;
    font-size: var(--text-sm);
    gap: 0.25rem;
}

.cross-country-stations .station-badge-new {
    display: none;
}

/* Country flag — the primary visual signal for cross-country discovery.
   Displayed as a block element above the station name, large enough to
   catch the eye and communicate "this is from another country." */
.station-tile-flag {
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    margin-block-end: 0.125rem;
    /* Prevent flag from being squished by flex layout */
    flex-shrink: 0;
}

/* On mobile, slightly smaller flag but still prominent */
@media (max-width: 575px) {
    .cross-country-stations .station-grid {
        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    }
    .station-tile-flag {
        font-size: 1.375rem;
    }
}

/* Dark mode: no changes needed for emoji flags, but ensure heading
   contrast matches the editorial intent */
[data-theme="dark"] .cross-country-stations {
    border-block-start-color: var(--ed-border-strong);
}

/* --- Share section: supplementary, not dominant --- */
.station-share {
    margin-block-start: var(--space-tight);
    margin-block-end: 0;
    padding-block-start: var(--space-tight);
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.station-share h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: 0.625rem;
}

.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    margin: 0;
    border: none;
    border-inline-end: var(--border-thin) solid var(--ed-border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ed-text-muted);
    text-decoration: none;
    line-height: 1;
    transition: color var(--transition-fast);
    min-height: 2.75rem;
    /* Override Pico button defaults */
    --pico-background-color: transparent;
}

.share-btn:first-child {
    padding-inline-start: 0;
}

.share-btn:last-child {
    border-inline-end: none;
}

.share-btn:hover {
    color: var(--ed-text);
}

.share-btn:active {
    color: var(--ed-text-secondary);
}

/* SVG icon sizing and alignment */
.share-btn-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.share-btn-label {
    white-space: nowrap;
}

/* Copy link — feedback state */
.share-btn-copy.copied {
    color: var(--ed-link);
}

/* WhatsApp — muted olive-green, not the garish brand green */
.share-btn-whatsapp:hover {
    color: #4A7558;
}

[data-theme="dark"] .share-btn-whatsapp:hover {
    color: #6B9E78;
}

/* Twitter/X — muted slate, not brand blue */
.share-btn-twitter:hover {
    color: var(--ed-text);
}

/* RTL: neutralize text-transform and letter-spacing for Arabic */
[dir="rtl"] .station-share h2 {
    text-transform: none;
    letter-spacing: 0;
}

/* Mobile: tighter inline padding */
@media (max-width: 575px) {
    .share-btn {
        padding-inline: 0.625rem;
    }
}

/* --- Station tags: genre/country pill links --- */
.station-tags {
    margin-block-start: var(--space-tight);
    margin-block-end: 0;
    padding-block-start: var(--space-tight);
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.station-tags h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: 0.625rem;
}

.station-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.station-tag {
    display: inline-flex;
    align-items: center;
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
    border: var(--border-thin) solid var(--ed-border-strong);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ed-text-secondary);
    text-decoration: none;
    line-height: 1.3;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.station-tag:hover {
    color: var(--ed-accent);
    border-color: var(--ed-accent);
    background: var(--ed-accent-subtle);
}

/* RTL: neutralize text-transform and letter-spacing for Arabic */
[dir="rtl"] .station-tags h2 {
    text-transform: none;
    letter-spacing: 0;
}

/* --- Embed snippet: collapsible iframe code section --- */
.station-embed-section {
    margin-block-start: var(--space-tight);
    margin-block-end: var(--space-tight);
    padding-block-start: var(--space-tight);
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.embed-snippet summary {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    cursor: pointer;
    list-style: none;
    padding-block: 0.375rem;
}

.embed-snippet summary::-webkit-details-marker { display: none; }
.embed-snippet summary::marker { content: ''; }

.embed-snippet summary::before {
    content: '+';
    display: inline-block;
    width: 1.25em;
    font-weight: 400;
}

.embed-snippet[open] summary::before {
    content: '\2013';
}

.embed-snippet-content {
    margin-block-start: 0.5rem;
}

.embed-snippet-code {
    display: block;
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    font-size: var(--text-xs);
    padding: 0.625rem 0.75rem;
    background: var(--ed-bg-offset, #EFECE4);
    border: var(--border-thin) solid var(--ed-border);
    color: var(--ed-text-secondary);
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
    border-radius: 0;
}

[data-theme="dark"] .embed-snippet-code {
    background: #1A1916;
}

.embed-copy-btn {
    display: inline-flex;
    align-items: center;
    margin-block-start: 0.5rem;
    padding-block: 0.375rem;
    padding-inline: 0.75rem;
    border: var(--border-thin) solid var(--ed-border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ed-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    --pico-background-color: transparent;
}

.embed-copy-btn:hover {
    color: var(--ed-text);
    border-color: var(--ed-text-muted);
}

.embed-copy-btn.copied {
    color: var(--ed-link);
    border-color: var(--ed-link);
}

/* RTL: neutralize text-transform and letter-spacing for Arabic */
[dir="rtl"] .embed-snippet summary {
    text-transform: none;
    letter-spacing: 0;
}


/* ============================================================
   12. GENRE PAGE — COUNTRY GROUPS
   ============================================================ */

.genre-country-group {
    margin-block-end: var(--space-between);
    padding-block-start: var(--space-tight);
    border-block-start: 2px solid var(--ed-border-rule);
}

.genre-country-group:first-of-type {
    padding-block-start: var(--space-tight);
    border-block-start: 2px solid var(--ed-border-rule);
}

.genre-country-group h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: var(--space-tight);
}

[dir="rtl"] .genre-country-group h2 {
    text-transform: none;
    letter-spacing: 0;
}

.genre-country-group .station-grid {
    gap: 0.5rem;
}

.genre-country-group h2 a {
    text-decoration: none;
    color: var(--ed-text);
    transition: color var(--transition-fast);
}

.genre-country-group h2 a:hover {
    color: var(--ed-accent);
}


/* ============================================================
   13. COUNTRY DESCRIPTION
   ============================================================ */

.country-description {
    margin-block-start: var(--space-major);
    padding-block-start: var(--space-between);
    border-block-start: var(--border-thin) solid var(--ed-border);
    color: var(--ed-text-muted);
    line-height: 1.7;
    font-size: var(--text-base);
}

/* --- Region links nav below country description ---
   Reuses station-tag pill style for each region link. */
.country-regions {
    margin-block-start: var(--space-between);
    padding-block-start: var(--space-tight);
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.country-regions h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: 0.625rem;
}

[dir="rtl"] .country-regions h2 {
    text-transform: none;
    letter-spacing: 0;
}

.country-regions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* ============================================================
   14. PLAYER BAR — Enhanced with 20 improvements
   ============================================================ */

/* #15 Gradient animation — REMOVED for NYT editorial restraint */

/* #2 Slide-up entrance animation */
@keyframes player-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* #18 Bounce animation — REMOVED for NYT editorial restraint */

/* #1 Equalizer bar animation */
@keyframes eq-bar-1 { 0%,100%{height:3px}25%{height:14px}50%{height:8px}75%{height:16px} }
@keyframes eq-bar-2 { 0%,100%{height:5px}30%{height:16px}60%{height:4px}80%{height:12px} }
@keyframes eq-bar-3 { 0%,100%{height:2px}20%{height:12px}45%{height:6px}70%{height:15px} }
@keyframes eq-bar-4 { 0%,100%{height:4px}35%{height:10px}55%{height:14px}85%{height:6px} }

/* #9 Pulsing LIVE dot */
@keyframes pulse-live {
    0%   { box-shadow: 0 0 0 0 rgba(34, 170, 85, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 170, 85, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 170, 85, 0); }
}

@keyframes pulse-error {
    0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* #3 Loading spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* #10 Play/pause icon morph */
@keyframes icon-morph-in {
    0%   { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

/* #19 Toast fade in/out */
@keyframes toast-in {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}

.player-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    background: var(--ed-player-bg);
    border-block-start: none;
    padding-block: 0.5rem;
    z-index: 100;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Player content inherits global --container-max-width (56rem) */

/* #15 Gradient animation — disabled for editorial restraint */
.player-bar.player-playing-gradient {
    background: var(--ed-player-bg);
}

/* #2 Slide-up entrance */
.player-bar.player-entering {
    animation: player-slide-up 350ms ease forwards;
}

/* #18 Bounce removed — use slide-up for first load too */
.player-bar.player-bounce {
    animation: player-slide-up 350ms ease forwards;
}

/* Ambient genre color pulse — barely perceptible genre-colored tint on the
   player bar when a station is playing.  Think newspaper section color coding:
   each genre gets a distinct hue, but all at very low saturation/opacity so the
   tint enhances the dark editorial surface without distracting or affecting
   text readability.  The ::after overlay sits behind all player content. */

.player-bar {
    /* Transition for the ambient box-shadow fade-in/out (criterion 8). */
    transition: box-shadow 250ms ease;
}

.player-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 250ms ease;
}

/* Lift player bar content above the ::after overlay */
.player-bar > .container,
.player-bar > .player-toast,
.player-bar > .autocontinue-toast {
    position: relative;
    z-index: 1;
}

body.ambient-active .player-bar {
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.05),
        inset 0 1px 0 hsl(var(--ambient-hue, 0) 30% 50% / 0.12);
}

body.ambient-active .player-bar::after {
    background: linear-gradient(
        to bottom,
        hsl(var(--ambient-hue, 0) 25% 50% / 0.05),
        transparent 50%
    );
    opacity: 1;
}

/* Dark mode: surface is darker (#0E0D0A), nudge tint slightly brighter */
[data-theme="dark"] body.ambient-active .player-bar {
    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.03),
        inset 0 1px 0 hsl(var(--ambient-hue, 0) 30% 55% / 0.14);
}

[data-theme="dark"] body.ambient-active .player-bar::after {
    background: linear-gradient(
        to bottom,
        hsl(var(--ambient-hue, 0) 25% 55% / 0.06),
        transparent 50%
    );
    opacity: 1;
}

/* prefers-reduced-motion: remove the fade transition but keep the static tint.
   The tint itself is not an animation — it is a static visual cue.  Only the
   250ms fade in/out is motion that should be suppressed. */
@media (prefers-reduced-motion: reduce) {
    .player-bar,
    .player-bar::after {
        transition: none;
    }
}

/* Audio visualizer canvas — ambient frequency bars behind the player bar.
   Positioned absolutely within the fixed player-bar so it fills the entire
   footer.  Very low opacity (0.12 = 12%) keeps it barely perceptible — like
   a watermark that breathes.  pointer-events: none ensures it never
   intercepts clicks.  z-index 0 places it behind player content (z-index 1)
   and at the same layer as the ambient genre color ::after overlay.

   The canvas JS draws thin bars with gaps using the accent color at very low
   alpha (0.18 light / 0.25 dark), combined with this CSS opacity for an
   effective visibility of ~2-3%.  The result: you notice it only when you
   look for it, like realizing the wallpaper is alive.

   Custom property --visualizer-color provides the bar fill to JS.  It
   defaults to the editorial accent and shifts to the ambient genre hue when
   a station is playing, mirroring the genre color pulse pattern. */

.player-visualizer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    /* Fade in/out when playback starts/stops — slow and gentle. */
    transition: opacity 800ms ease;
}

/* Dark mode: the darker surface (#0E0D0A) makes the bars slightly more
   visible, so we nudge opacity down a tick for parity with light mode. */
[data-theme="dark"] .player-visualizer {
    opacity: 0.10;
}

/* Provide accent color as a CSS custom property that visualizer.js can read
   via getComputedStyle.  Light mode uses the muted editorial red; dark mode
   a slightly brighter variant for contrast against the near-black surface. */
.player-bar {
    --visualizer-color: rgba(139, 26, 43, 0.18);
}

[data-theme="dark"] .player-bar {
    --visualizer-color: rgba(196, 73, 90, 0.25);
}

/* When ambient genre color is active, tint the visualizer bars to match
   the genre hue — same pattern as the ::after overlay, unifying the
   visual language.  The hue comes from --ambient-hue set by player.js. */
body.ambient-active .player-bar {
    --visualizer-color: hsl(var(--ambient-hue, 0) 30% 50% / 0.18);
}

[data-theme="dark"] body.ambient-active .player-bar {
    --visualizer-color: hsl(var(--ambient-hue, 0) 30% 55% / 0.25);
}

/* prefers-reduced-motion: hide the canvas entirely.  The animated bars
   are continuous motion — not a one-shot transition — so they must be
   suppressed, not merely frozen. */
@media (prefers-reduced-motion: reduce) {
    .player-visualizer { display: none; }
}

/* Mobile / low-power devices: disable the visualizer on small touch
   screens.  The canvas animation loop (requestAnimationFrame + canvas
   draw 60fps) is an unnecessary battery drain on phones.  The subtle
   effect is barely perceptible on a small screen anyway. */
@media (max-width: 575px) and (pointer: coarse) {
    .player-visualizer { display: none; }
}

/* Idle state */
.player-idle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 0.25rem;
}

.player-text {
    color: var(--ed-player-muted);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* Active player controls */
.player-controls {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto auto auto auto auto auto;
    grid-template-areas: "buttons info eq status volume sleep alarm random help expand";
    align-items: center;
    gap: 0.75rem;
    /* #2 smooth transitions for max-height/opacity */
    max-height: 200px;
    opacity: 1;
    overflow: visible;
    transition: max-height 350ms ease, opacity 350ms ease;
}

/* #2 Hidden state for slide-up entrance */
.player-controls.player-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.player-station-info {
    grid-area: info;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-station-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* #4 Station name as clickable link */
.player-station-name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--ed-player-text);
    text-decoration: none;
    display: block;
    transition: color var(--transition-fast), opacity 0.3s ease;
}

[dir="rtl"] .player-station-name {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

.player-station-name:hover {
    color: var(--ed-accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Buffering pulse — station name pulses while the stream is loading */
@keyframes bufferPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.player-bar.player-loading .player-station-name {
    animation: bufferPulse 1.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .player-bar.player-loading .player-station-name {
        animation: none;
    }
}

/* ── Radio Roulette spin ──
   Slot-machine spin on the station name when random is triggered.
   Names cycle at decelerating speed (fast -> slow -> land) with a
   vertical slide direction, like flipping through newspaper pages.

   Editorial, not gamified: no neon, no bounce.  The accent color is
   the site's own muted burgundy, dialed back to 70 % opacity so it
   reads as "processing" rather than "celebration."

   The landing is a subtle vertical overshoot (page laying flat) plus
   a tiny opacity shift — no scale bounce.  prefers-reduced-motion
   skips entirely (JS jumps straight to the callback). */

/* During the spin: each tick slides a new name in from below.
   JS applies .spin-tick for each name swap; the transition gives
   the vertical motion.  Color shifts to a muted accent so the user
   knows something is happening without it screaming. */
#player-station-name.spin-active {
    color: var(--ed-player-accent);
    opacity: 0.7;
    transition: none;
}

/* Per-tick vertical slide: JS toggles .spin-tick off/on per cycle.
   The name drops in from 6 px above (translate) and fades in. */
#player-station-name.spin-tick {
    transform: translateY(-4px);
    opacity: 0.4;
    transition: none;
}

#player-station-name.spin-tick-in {
    transform: translateY(0);
    opacity: 0.7;
    transition: transform 60ms ease-out, opacity 60ms ease-out;
}

/* Landing: the final name slides in from a slightly larger offset,
   overshoots by 1 px, then settles — like a page laying flat. */
@keyframes spinLand {
    0%   { transform: translateY(-6px); opacity: 0.6; }
    65%  { transform: translateY(1px);  opacity: 1; }
    100% { transform: translateY(0);    opacity: 1; }
}

#player-station-name.spin-landed {
    animation: spinLand 0.32s cubic-bezier(0.22, 0.68, 0.36, 1);
    color: var(--ed-player-text);
}

/* prefers-reduced-motion: all animation stripped.
   JS already skips the spin loop entirely, but this is defense
   in depth for the CSS classes. */
@media (prefers-reduced-motion: reduce) {
    #player-station-name.spin-active,
    #player-station-name.spin-tick,
    #player-station-name.spin-tick-in,
    #player-station-name.spin-landed {
        animation: none !important;
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
}

/* ── Auto-resume: "ready to play" restored state ──
   When a returning user loads the site, their last-played station appears
   in the player bar in a muted, inviting state.  The station name is
   slightly dimmed, and the play button pulses gently as the clear CTA.
   All opacity changes transition smoothly so the shift from restored
   to playing feels polished rather than snapping.
   This state is removed as soon as actual playback begins. */

.player-bar.player-restored .player-station-name {
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.player-bar.player-restored .player-station-meta {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Play button gentle pulse — draws the eye without being distracting.
   Uses a warm glow that matches the accent color in each mode. */
@keyframes resumePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(163, 37, 58, 0.35); }
    50%      { box-shadow: 0 0 0 7px rgba(163, 37, 58, 0); }
}

@keyframes resumePulseDark {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 73, 90, 0.35); }
    50%      { box-shadow: 0 0 0 7px rgba(196, 73, 90, 0); }
}

.player-bar.player-restored .player-btn-play {
    animation: resumePulse 2.5s ease-in-out infinite;
    /* Slight scale-up to make the CTA feel more prominent */
    transform: scale(1.06);
}

[data-theme="dark"] .player-bar.player-restored .player-btn-play {
    animation-name: resumePulseDark;
}

@media (prefers-reduced-motion: reduce) {
    .player-bar.player-restored .player-btn-play {
        animation: none;
        /* Keep the slight scale-up even without animation */
        transform: scale(1.06);
    }
}

/* Fav/share buttons: muted but visible, non-interactive until playing */
.player-bar.player-restored .player-fav-btn,
.player-bar.player-restored .player-share-btn {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Stop button hidden in restored state — nothing to stop yet */
.player-bar.player-restored .player-btn-stop {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Skip buttons: subdued until a stream is active */
.player-bar.player-restored .player-btn-skip {
    opacity: 0.25;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Name row — inline name + favorite toggle.
   overflow:hidden clips the vertical slide during roulette spin. */
.player-name-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

/* Favorite toggle in player bar */
.player-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--ed-player-muted);
    transition: color var(--transition-fast), transform var(--transition-fast), opacity 0.3s ease;
}

.player-fav-btn:hover {
    color: var(--ed-accent);
    transform: scale(1.15);
}

.player-fav-btn:active {
    transform: scale(0.9);
}

.player-fav-btn.is-favorited {
    color: var(--ed-accent);
}

.player-fav-btn.is-favorited .player-fav-icon {
    fill: var(--ed-accent);
}

.player-fav-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: fill var(--transition-fast);
}

/* Share button in player bar — mirrors .player-fav-btn sizing and style.
   Positioned in the name row alongside the station name and fav toggle.
   Uses an upload/share arrow icon, not a social media logo. */
.player-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    color: var(--ed-player-muted);
    transition: color var(--transition-fast), transform var(--transition-fast), opacity 0.3s ease;
    /* Override Pico CSS button defaults */
    --pico-background-color: transparent;
}

.player-share-btn:hover {
    color: var(--ed-accent-text);
    transform: scale(1.15);
}

.player-share-btn:active {
    transform: scale(0.9);
}

.player-share-btn:focus-visible {
    outline: 2px solid var(--ed-player-accent);
    outline-offset: 2px;
}

.player-share-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* "Now on Air" show name — a small italic byline below the station name.
   Styled like a newspaper credit line: quiet, unobtrusive, purely
   informational. Uses :empty to vanish when no show data is available,
   and text-overflow: ellipsis for long program names. Must not add any
   height to the player bar — the tight line-height and zero-margin
   design keeps it within the existing vertical space between the name
   row and the metadata line. */
.player-current-show {
    display: block;
    font-style: italic;
    font-size: 0.6875rem;          /* 11px — deliberately below --text-xs */
    line-height: 1.2;              /* tight to avoid expanding player bar */
    color: var(--ed-player-muted);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Vanish when JS has not populated it or clears it */
.player-current-show:empty {
    display: none;
}

/* RTL: use Arabic font, inherit italic direction naturally */
[dir="rtl"] .player-current-show {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-style: normal;            /* Arabic has no italic tradition */
    font-size: 0.75rem;            /* Slightly larger for Arabic legibility */
}

/* Restored (paused) state: dim further to match the muted idle feel */
.player-bar.player-restored .player-current-show {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

/* #5 Country flag + #14 Duration — metadata line */
.player-station-meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--ed-player-muted);
    transition: opacity 0.3s ease;
}

.player-flag {
    font-size: 0.875rem;
    line-height: 1;
}

.player-frequency {
    font-size: var(--text-xs);
    color: var(--ed-player-muted);
}

/* #14 Listening duration */
.player-duration {
    font-size: var(--text-xs);
    color: var(--ed-player-muted);
    font-variant-numeric: tabular-nums;
}

/* Listening from {country} badge — quieter than frequency/duration,
   hidden when empty, truncated to prevent overflow on narrow screens.
   Middot separator keeps it visually distinct from adjacent metadata. */
.player-location {
    font-size: var(--text-xs);
    color: var(--ed-player-muted);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
    min-width: 0;
}

.player-location:empty {
    display: none;
}

/* Middot separator before location badge — matches NYT byline pattern */
.player-location:not(:empty)::before {
    content: '\00b7';
    margin-inline-end: 0.25rem;
    opacity: 0.6;
}

/* #16 Station logo thumbnail */
.player-logo {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

/* Player buttons */
.player-buttons {
    grid-area: buttons;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.player-icon {
    width: 1em;
    height: 1em;
    display: block;
    flex-shrink: 0;
}

.player-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color var(--transition-fast), transform var(--transition-fast), opacity 0.3s ease;
    padding: 0;
    margin: 0;
}

.player-btn:hover {
    transform: scale(1.05);
}

.player-btn:active {
    transform: scale(0.95);
}

.player-btn-play {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.25rem;
    background: var(--ed-player-accent);
    color: var(--ed-accent-text);
}

.player-btn-play:hover {
    background: var(--ed-accent-hover);
}

.player-btn-play .player-icon {
    margin-inline-start: 0.1em;
}

.player-btn-play.playing {
    background: var(--ed-player-accent);
}

/* #10 Play/pause icon morph animation */
.player-btn-play.icon-morphing .player-icon {
    animation: icon-morph-in 150ms ease forwards;
}

.player-btn-stop {
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--ed-player-text);
}

.player-btn-stop:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Skip prev/next buttons — small transport controls for channel-surfing.
   Styled like the stop button: subtle translucent bg, no border-radius.
   Disabled when no station is loaded or fewer than 2 stations on page. */
.player-btn-skip {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    color: var(--ed-player-text);
    border-radius: 0;
}

.player-btn-skip:hover {
    background: rgba(255, 255, 255, 0.2);
}

.player-btn-skip[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.player-btn-skip .player-icon {
    width: 0.9em;
    height: 0.9em;
}

.player-btn-skip:focus-visible {
    outline: 2px solid var(--ed-player-accent);
    outline-offset: 2px;
}

/* RTL: skip icons must NOT mirror — prev/next are universal media conventions */
[dir="rtl"] .player-skip-icon {
    transform: none;
}

.player-btn-mute {
    background: transparent;
    color: var(--ed-player-text);
    font-size: 1.15rem;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.player-btn-mute:hover {
    color: var(--ed-accent-text);
}

.player-btn-mute .player-icon {
    width: 1.2em;
    height: 1.2em;
}

.player-btn-mute.muted {
    opacity: 0.4;
}

/* #1 Equalizer bars */
.player-eq {
    grid-area: eq;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
}

.player-eq-bar {
    display: block;
    width: 3px;
    height: 3px;
    background: var(--ed-live-dot);
    border-radius: 1px;
    transition: height 200ms ease;
}

/* Animate when playing — slower for editorial restraint */
.player-eq.eq-playing .player-eq-bar:nth-child(1) { animation: eq-bar-1 1.05s ease-in-out infinite; }
.player-eq.eq-playing .player-eq-bar:nth-child(2) { animation: eq-bar-2 0.9s ease-in-out infinite 0.1s; }
.player-eq.eq-playing .player-eq-bar:nth-child(3) { animation: eq-bar-3 1.15s ease-in-out infinite 0.2s; }
.player-eq.eq-playing .player-eq-bar:nth-child(4) { animation: eq-bar-4 1.0s ease-in-out infinite 0.05s; }

/* Paused: freeze at low height */
.player-eq.eq-paused .player-eq-bar {
    height: 3px;
}

/* Volume */
.player-volume {
    grid-area: volume;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

/* #17 Volume on hover (desktop) — slider hidden by default, revealed on hover */
@media (min-width: 576px) {
    .player-volume {
        position: relative;
    }
    .player-volume .player-volume-slider {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width 250ms ease, opacity 250ms ease;
    }
    .player-volume:hover .player-volume-slider,
    .player-volume:focus-within .player-volume-slider {
        max-width: 6rem;
        opacity: 1;
    }
}

.player-bar .player-volume-slider {
    width: 5rem;
    height: 1.25rem;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    margin: 0;
    margin-bottom: 0;
    padding: 0;
    border: none;
    cursor: pointer;
}

/* #7 Volume track fill — Webkit */
.player-bar .player-volume-slider::-webkit-slider-runnable-track {
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0;
}

/* #7 Volume track fill — Firefox (supports range-progress natively) */
.player-bar .player-volume-slider::-moz-range-track {
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0;
    border: none;
}

.player-bar .player-volume-slider::-moz-range-progress {
    height: 2px;
    background: var(--ed-player-accent);
    border-radius: 0;
}

.player-bar .player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ed-player-accent);
    cursor: pointer;
    margin-top: -4.5px;
    border: none;
    box-shadow: none;
    transition: transform 120ms ease;
}

.player-bar .player-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.player-bar .player-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ed-player-accent);
    cursor: pointer;
    border: none;
    box-shadow: none;
}

/* #9 Player status — LIVE dot, loading spinner, error */
.player-status {
    grid-area: status;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ed-live-dot);
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* #9 Status dot — green/red/amber */
.player-status-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.player-status-dot.dot-live {
    display: inline-block;
    background: var(--ed-live-dot);
    animation: pulse-live 1.5s infinite;
}

.player-status-dot.dot-error {
    display: inline-block;
    background: #dc3545;
    animation: pulse-error 1.5s infinite;
}

.player-status-dot.dot-loading {
    display: inline-block;
    background: #f0ad4e;
    animation: pulse-live 1s infinite;
}

/* Auto-resume: "last listened" restored state
   A small muted dot signals the station is ready but not yet playing.
   The text uses the player muted color for an understated, editorial feel. */
.player-status-dot.dot-restored {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--ed-player-muted);
}

.player-status-text.status-restored {
    color: var(--ed-player-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-xs);
}

/* #3 Loading spinner */
.player-status-text.status-loading::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: var(--ed-player-accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-inline-end: 0.375rem;
    vertical-align: middle;
}

.player-status-text {
    display: inline-flex;
    align-items: center;
}

/* #8 Explicit retry button */
.player-retry-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ed-player-text);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    margin-inline-start: 0.375rem;
}

.player-retry-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
}

/* #11 Sleep timer */
.player-sleep-wrap {
    grid-area: sleep;
    position: relative;
    display: flex;
    align-items: center;
}

.player-btn-sleep {
    background: transparent;
    color: var(--ed-player-muted);
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.player-btn-sleep:hover {
    color: var(--ed-player-text);
}

.player-btn-sleep.sleep-active {
    color: var(--ed-player-accent);
}

.player-sleep-menu {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-end: 0;
    margin-block-end: 0.5rem;
    background: var(--ed-player-bg);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 7rem;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
    z-index: 110;
}

.player-sleep-opt {
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ed-player-text);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    text-align: start;
    white-space: nowrap;
    transition: background-color var(--transition-fast);
}

.player-sleep-opt:hover {
    background: rgba(255,255,255,0.1);
}

.player-sleep-opt-off {
    color: var(--ed-player-accent);
    border-block-start: 1px solid rgba(255,255,255,0.1);
    padding-block-start: 0.5rem;
    margin-block-start: 0.125rem;
}

.player-sleep-countdown {
    font-size: var(--text-xs);
    color: var(--ed-player-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    margin-inline-start: 0.25rem;
}

/* ── Wake-up alarm button ──
   Sits between sleep timer and random in the player bar grid.
   Same 2rem touch target as the sleep button. The alarm-active-dot
   is a tiny accent indicator (like the lang-active dot) positioned
   at the top-right of the button to signal an active alarm. */
.player-btn-alarm {
    grid-area: alarm;
    position: relative;
    background: transparent;
    color: var(--ed-player-muted);
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.player-btn-alarm:hover {
    color: var(--ed-player-text);
}

.player-btn-alarm.alarm-active {
    color: var(--ed-player-accent);
}

/* Active alarm indicator dot — top-right, like lang-active::after */
.alarm-active-dot {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ed-player-accent);
    pointer-events: none;
}

/* Subtle pulse when alarm is active — draws gentle attention */
@keyframes alarm-dot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.alarm-active-dot[style*="display:none"] {
    animation: none;
}

.alarm-active-dot:not([style*="display:none"]) {
    animation: alarm-dot-pulse 2s ease-in-out infinite;
}


/* ============================================================
   WAKE-UP ALARM DIALOG — native <dialog> overlay

   Matches the shortcuts modal exactly: flat, hairline borders,
   no border-radius, no shadows. Uses the native <dialog> element
   with showModal()/close() for focus trapping and Escape key.

   Design: editorial card with form fields. The time input is
   styled flat to match the system. The "station" display shows
   the currently-loaded station name (read-only). Action buttons
   sit in a full-width bar at the bottom, separated by a hairline.
   ============================================================ */

/* --- Dialog element: override Pico/UA defaults for editorial look --- */
#alarm-dialog {
    background: var(--ed-bg-card);
    color: var(--ed-text);
    border: var(--border-thin) solid var(--ed-border-rule);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 22rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 0;
    margin: auto;
}

#alarm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* --- Content wrapper --- */
.alarm-dialog-content {
    display: flex;
    flex-direction: column;
    position: relative;
}

.alarm-dialog-content h2 {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--ed-text);
    margin: 0;
    line-height: 1.2;
    padding: 1.25rem 1.5rem 0.75rem;
    border-block-end: var(--border-rule) solid var(--ed-border-rule);
}

/* --- Form area --- */
.alarm-form {
    padding: 1rem 1.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.alarm-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-end: 0.25rem;
    margin-block-start: 0.75rem;
}

.alarm-label:first-child {
    margin-block-start: 0;
}

/* --- Time input: flat editorial styling, not browser chrome ---
   Override UA and Pico defaults. Hairline border, square corners,
   monospace-feeling numerals. Large enough for mobile tap targets. */
.alarm-time-input {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ed-text);
    background: var(--ed-bg-warm);
    border: var(--border-thin) solid var(--ed-border);
    border-radius: 0;
    padding: 0.625rem 0.75rem;
    width: 100%;
    line-height: 1.3;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-fast);
    /* Large enough for mobile tap — min 44px height */
    min-height: 2.75rem;
}

.alarm-time-input:focus {
    border-color: var(--ed-border-rule);
}

/* Remove spin buttons on WebKit */
.alarm-time-input::-webkit-inner-spin-button,
.alarm-time-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Subtle webkit clock icon override */
.alarm-time-input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    filter: var(--alarm-picker-filter, none);
}

/* --- Station display: shows "current station" or "--" ---
   Read-only display, not a form control. Shows the station name
   that the alarm will play. If no station is loaded, shows "--". */
.alarm-station-display {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--ed-text);
    background: var(--ed-bg-warm);
    border: var(--border-thin) solid var(--ed-border);
    border-radius: 0;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}

.alarm-station-display:empty::before,
.alarm-station-display:has(only-child)::before {
    content: '--';
    color: var(--ed-text-faint);
}

/* --- Tab warning text --- */
.alarm-tab-warning {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ed-text-faint);
    margin: 0.5rem 0 0;
    line-height: 1.5;
    font-style: italic;
}

/* --- Action buttons: full-width bar at bottom, hairline separator ---
   Two buttons side by side: Save (primary) and Cancel (when alarm active).
   Cancel only appears when an alarm is set. */
.alarm-actions {
    display: flex;
    gap: 0;
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.alarm-action-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 0.75rem 1.5rem;
    margin: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    /* 44px minimum touch target */
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alarm-action-save {
    color: var(--ed-accent);
}

.alarm-action-save:hover {
    color: var(--ed-accent-hover);
    background: var(--ed-accent-subtle);
}

.alarm-action-cancel {
    color: var(--ed-text-muted);
    border-inline-start: var(--border-thin) solid var(--ed-border);
}

.alarm-action-cancel:hover {
    color: var(--ed-text);
    background: var(--ed-bg-hover);
}

/* --- Close button: positioned at top-right, subtle X ---
   Unlike the shortcuts modal (which uses a bottom close bar),
   the alarm dialog has a small top-right X since the bottom is
   occupied by the action buttons. */
.alarm-close-btn {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
    background: none;
    border: none;
    color: var(--ed-text-muted);
    font-size: var(--text-xl);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: color var(--transition-fast);
    line-height: 1;
}

.alarm-close-btn:hover {
    color: var(--ed-text);
}

.alarm-close-btn:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: -2px;
}


/* --- Dark mode: alarm dialog --- */
[data-theme="dark"] #alarm-dialog {
    border-color: var(--ed-border-strong);
}

[data-theme="dark"] #alarm-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .alarm-time-input {
    background: var(--ed-bg-hover);
    border-color: var(--ed-border-strong);
    color: var(--ed-text);
    /* Invert the clock picker icon for dark mode */
    --alarm-picker-filter: invert(0.8);
}

[data-theme="dark"] .alarm-time-input:focus {
    border-color: var(--ed-text-muted);
}

[data-theme="dark"] .alarm-station-display {
    background: var(--ed-bg-hover);
    border-color: var(--ed-border-strong);
    color: var(--ed-text);
}

[data-theme="dark"] .alarm-close-btn {
    color: var(--ed-text-muted);
}

[data-theme="dark"] .alarm-close-btn:hover {
    color: var(--ed-text);
}


/* --- RTL: alarm dialog --- */
[dir="rtl"] .alarm-dialog-content h2 {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    letter-spacing: 0;
}

[dir="rtl"] .alarm-label {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
}

[dir="rtl"] .alarm-tab-warning {
    font-family: 'Noto Sans Arabic', var(--font-sans);
}

[dir="rtl"] .alarm-action-btn {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    letter-spacing: 0;
}

[dir="rtl"] .alarm-close-btn {
    /* In RTL, inset-inline-end already flips to the left side */
}



/* Random station button — idle state CTA
   Prominent but flat: editorial invitation, not gamified.
   Matches the player bar's dark surface; uses muted text
   with a thin border, exactly like the help button scaled up. */
.random-station-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    color: var(--ed-player-muted);
    border: var(--border-thin) solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    padding: 0.375rem 0.75rem;
    margin-inline-start: 0.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    line-height: 1;
    min-height: 2rem;
}

[dir="rtl"] .random-station-btn {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
}

.random-station-btn:hover {
    color: var(--ed-player-text);
    border-color: rgba(255, 255, 255, 0.35);
}

.random-station-btn:focus-visible {
    outline: 2px solid var(--ed-player-accent);
    outline-offset: 2px;
}

/* Loading state: subtle disabled appearance, no spinner */
.random-station-btn[disabled],
.random-station-btn.random-loading {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.random-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    display: block;
}

.random-label {
    display: inline;
}

/* Random station button — player control (small)
   Matches the help button and sleep timer: transparent bg,
   muted color, 1.5rem square with thin border. */
.player-btn-random {
    grid-area: random;
    background: transparent;
    color: var(--ed-player-muted);
    font-size: 0.8125rem;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border: var(--border-thin) solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    padding: 0;
    margin: 0;
}

.player-btn-random:hover {
    color: var(--ed-player-text);
    border-color: rgba(255, 255, 255, 0.35);
    transform: none;
}

.player-btn-random:active {
    transform: none;
}

.player-btn-random:focus-visible {
    outline: 2px solid var(--ed-player-accent);
    outline-offset: 2px;
}

.player-btn-random[disabled],
.player-btn-random.random-loading {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

.player-btn-random .player-icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* #12 Mobile expand button */
.player-btn-expand {
    grid-area: expand;
    background: transparent;
    color: var(--ed-player-muted);
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    transition: transform 200ms ease, color var(--transition-fast);
    display: none; /* Only shown on mobile */
}

.player-btn-expand:hover {
    color: var(--ed-player-text);
}

.player-btn-expand.expanded {
    transform: rotate(180deg);
}

/* #19 Toast notification for station switch */
.player-toast {
    position: absolute;
    inset-block-start: -2rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--ed-player-bg);
    color: var(--ed-player-text);
    font-size: var(--text-xs);
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255,255,255,0.1);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 105;
}

[dir="rtl"] .player-toast {
    transform: translateX(50%);
}

.player-toast.toast-show {
    animation: toast-in 200ms ease forwards;
}

.player-toast.toast-hide {
    animation: toast-out 300ms ease forwards;
}

/* Auto-continue countdown toast — calm, informative, not alarming.
   Sits directly above the player bar as a full-width strip. Uses the
   player's dark surface with a subtle warm top border. The layout is a
   single centered row: label text + bold countdown number + flat cancel
   button. Separate from the station-switch toast (#19) so they never
   fight for the same element. */

.autocontinue-toast {
    position: absolute;
    inset-block-end: 100%;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--ed-player-bg);
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: 0.5rem;
    padding-inline: 1rem;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    z-index: 105;
}

.autocontinue-toast.autocontinue-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    animation: autocontinue-slide-in 250ms ease forwards;
}

.autocontinue-toast.autocontinue-hide {
    pointer-events: none;
    animation: autocontinue-slide-out 200ms ease forwards;
}

@keyframes autocontinue-slide-in {
    0%   { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes autocontinue-slide-out {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(100%); }
}

.autocontinue-text {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ed-player-muted);
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocontinue-label {
    color: var(--ed-player-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Countdown number: slightly larger and bold for quick scanability */
.autocontinue-countdown {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--ed-player-text);
    font-variant-numeric: tabular-nums;
    min-width: 1.25em;
    text-align: center;
    flex-shrink: 0;
}

/* Cancel button: flat, accent-colored, minimum 44px touch target */
.autocontinue-cancel {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ed-player-accent);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.autocontinue-cancel:hover,
.autocontinue-cancel:focus-visible {
    color: var(--ed-player-text);
}

.autocontinue-cancel:active {
    opacity: 0.8;
}

/* #20 Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Mobile player layout */
@media (max-width: 575px) {
    .player-controls {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas:
            "buttons info status expand";
        gap: 0.5rem;
    }

    /* #12 On mobile, volume/sleep/eq/random/alarm are in expanded area; help hidden (no keyboard) */
    .player-volume,
    .player-sleep-wrap,
    .player-eq,
    .player-btn-alarm,
    .player-btn-random {
        display: none;
    }

    .player-btn-help {
        display: none;
    }

    /* #12 Show expand button on mobile */
    .player-btn-expand {
        display: inline-flex;
    }

    /* #12 Expanded mobile player shows extra controls (no help — no keyboard on mobile) */
    .player-controls.player-expanded {
        grid-template-columns: auto 1fr auto auto auto;
        grid-template-areas:
            "buttons info status . expand"
            "eq volume sleep alarm random";
    }

    .player-controls.player-expanded .player-volume,
    .player-controls.player-expanded .player-sleep-wrap,
    .player-controls.player-expanded .player-eq,
    .player-controls.player-expanded .player-btn-alarm,
    .player-controls.player-expanded .player-btn-random {
        display: inline-flex;
    }

    /* On mobile expanded, random + alarm buttons get 44px touch target minimum */
    .player-controls.player-expanded .player-btn-random,
    .player-controls.player-expanded .player-btn-alarm {
        width: 2.75rem;
        height: 2.75rem;
    }

    .player-controls.player-expanded .player-btn-random .player-icon,
    .player-controls.player-expanded .player-btn-alarm .player-icon {
        width: 1rem;
        height: 1rem;
    }

    .player-controls.player-expanded .player-volume .player-volume-slider {
        display: block;
        max-width: none;
        opacity: 1;
    }

    .player-station-name {
        font-size: var(--text-sm);
    }

    /* Show name: slightly smaller on mobile, cap width to prevent overflow */
    .player-current-show {
        font-size: 0.625rem;       /* 10px on mobile */
        max-width: 12rem;
    }

    /* Share + fav buttons: enlarge touch target on mobile (44px minimum)
       without consuming extra horizontal space. Uses min-height and padding
       so the tappable area extends vertically; the icon stays 14px. */
    .player-share-btn,
    .player-fav-btn {
        min-height: 2.75rem;
        padding-inline: 0.375rem;
    }

    /* Hide listener location badge on mobile — metadata line is too tight */
    .player-location {
        display: none;
    }

    .player-btn-play {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .player-btn-stop {
        width: 2rem;
        height: 2rem;
        font-size: 0.8rem;
    }

    .player-btn-skip {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }

    /* #16 Hide logo on very small screens */
    .player-logo {
        width: 24px;
        height: 24px;
    }

    /* Idle-state random CTA: stack vertically on mobile for tap target */
    .player-idle {
        flex-direction: column;
        gap: 0.375rem;
    }

    .random-station-idle {
        margin-inline-start: 0;
        min-height: 2.75rem;
        padding: 0.5rem 1rem;
    }

    /* Auto-continue toast: allow text wrapping on small screens */
    .autocontinue-text {
        white-space: normal;
        min-width: 0;
    }

    .autocontinue-toast {
        gap: 0.5rem;
        padding-inline: 0.75rem;
    }

    /* Auto-resume mobile: fully hide stop/skip buttons to save space.
       On mobile the play button is the only action that makes sense
       in restored state; dimmed ghost buttons just waste pixels. */
    .player-bar.player-restored .player-btn-stop,
    .player-bar.player-restored .player-btn-skip {
        display: none;
    }

    /* Give play button slightly more prominence on mobile restored */
    .player-bar.player-restored .player-btn-play {
        width: 2.75rem;
        height: 2.75rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .player-volume-slider {
        width: 4rem;
    }

    /* #12 Hide expand button on tablet+ */
    .player-btn-expand {
        display: none;
    }
}

@media (min-width: 768px) {
    .player-btn-expand {
        display: none;
    }
}

@media (min-width: 1024px) {
    .player-btn-play {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }

    .player-btn-skip {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.9rem;
    }

    .player-volume-slider {
        width: 6rem;
    }

    .player-station-name {
        font-size: var(--text-md);
    }

    /* On wide screens the show name can breathe a little more */
    .player-current-show {
        max-width: 20rem;
    }
}


/* ============================================================
   15. STATIC PAGES (about, privacy, terms)
   ============================================================ */

.static-page {
    max-width: 42rem;
    line-height: 1.75;
}

.static-page h1 {
    font-family: var(--font-serif);
    margin-block-end: var(--space-between);
    padding-block-end: var(--space-tight);
    border-block-end: var(--border-thin) solid var(--ed-border);
}

/* Section label pattern — thin top rule (1px) for subsections within articles.
   Uses --text-sm (not --text-xs) because these are article subsection headings,
   not decorative labels. Follows the same uppercase/letter-spacing pattern as
   .trending-section h2, .stats-section h2, etc. */
.static-page h2 {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    border-block-start: var(--border-thin) solid var(--ed-border);
    padding-block-start: var(--space-tight);
    margin-block-start: var(--space-between);
    margin-block-end: var(--space-tight);
}

/* First h2 after h1 — reduce top margin since h1 border provides separation */
.static-page h1 + h2,
.static-page h1 + p + h2 {
    margin-block-start: 0.5rem;
}

[dir="rtl"] .static-page h2 {
    text-transform: none;
    letter-spacing: 0;
}

.static-page h3 {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--ed-text);
    margin-block-start: var(--space-between);
    margin-block-end: 0.5rem;
}

.static-page p {
    margin-block-end: 1.25rem;
    font-size: var(--text-md);
    color: var(--ed-text-secondary);
}

/* Lists inside static pages (privacy/terms often use bullet points) */
.static-page ul,
.static-page ol {
    margin-block-end: 1.25rem;
    padding-inline-start: 1.5rem;
    color: var(--ed-text-secondary);
    font-size: var(--text-md);
}

.static-page li {
    margin-block-end: 0.375rem;
    line-height: 1.65;
}

/* Contact page email link — prominent mailto with editorial hover treatment.
   Larger than body text to give it visual weight as the primary CTA.
   Accent underline appears on hover for a subtle, professional feel. */
.contact-email {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--ed-text);
    text-decoration: underline;
    text-decoration-color: var(--ed-border);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast),
                text-decoration-color var(--transition-fast);
}

.contact-email:hover,
.contact-email:focus-visible {
    color: var(--ed-accent);
    text-decoration-color: var(--ed-accent);
}

/* On mobile, ensure the email address doesn't overflow on narrow viewports.
   25 chars is fine at --text-xl but guard against future longer addresses. */
@media (max-width: 575px) {
    .contact-email {
        font-size: var(--text-lg);
        word-break: break-all;
    }
}

/* Contact page "alternate email" section — tighter paragraph spacing than
   generic .static-page p so the email address and response-time note read
   as a compact group, not two loosely separated paragraphs. */
.contact-alt p {
    margin-block-end: 0.375rem;
}

.text-muted {
    color: var(--ed-text-muted);
    font-size: var(--text-sm);
}


/* ============================================================
   15b. SUBMIT FORM — Editorial classified-ad submission
   Newspaper-style: flat inputs with bottom-border emphasis,
   clear label hierarchy, accent-outlined CTA. Professional and
   trustworthy, like a broadsheet classified submission form.
   ============================================================ */

/* --- Page container inherits .static-page max-width (42rem) --- */
.submit-page .page-intro {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--ed-text-secondary);
    margin-block-end: var(--space-between);
}

/* --- Form layout: stacked fields with consistent spacing --- */
.submit-form {
    margin-block-end: var(--space-between);
}

.submit-field {
    margin-block-end: 1.5rem;
}

/* --- Labels: clear, above inputs, editorial weight --- */
.submit-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ed-text);
    margin-block-end: 0.375rem;
    line-height: 1.4;
}

/* Required asterisk in accent color */
.submit-required {
    color: var(--ed-accent);
    text-decoration: none;
    font-style: normal;
    font-weight: 700;
}

/* Optional tag: muted, lighter weight */
.submit-optional {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--ed-text-muted);
    margin-inline-start: 0.25rem;
}

/* --- Inputs: flat, bottom-border-only for editorial look ---
   Override Pico CSS form styling completely: no rounded borders,
   no padded boxes, no colored backgrounds. Just a clean bottom rule. */
.submit-form input[type="text"],
.submit-form input[type="url"],
.submit-form input[type="email"],
.submit-form select,
.submit-form textarea {
    display: block;
    width: 100%;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--ed-text);
    background: transparent;
    background-color: transparent;
    border: none;
    border-block-end: var(--border-thin) solid var(--ed-border-strong);
    padding-block: 0.5rem;
    padding-inline: 0;
    transition: border-color var(--transition-fast),
                color var(--transition-fast);
    /* Reset Pico CSS form element spacing and border variables */
    --pico-form-element-spacing-vertical: 0;
    --pico-form-element-spacing-horizontal: 0;
    --pico-form-element-border-color: transparent;
    --pico-form-element-active-border-color: var(--ed-accent);
    --pico-form-element-focus-color: var(--ed-accent);
    border-radius: 0;
    outline: none;
    margin-block-end: 0;
    box-shadow: none;
}

.submit-form input::placeholder,
.submit-form textarea::placeholder {
    color: var(--ed-text-faint);
    font-style: italic;
}

/* Placeholder option in select (first empty-value option) */
.submit-form select option[value=""] {
    color: var(--ed-text-faint);
}

/* Focus: accent bottom-border, no box shadow */
.submit-form input:focus,
.submit-form select:focus,
.submit-form textarea:focus {
    border-block-end-color: var(--ed-accent);
    box-shadow: none;
    outline: none;
    background-color: transparent;
}

/* Invalid state (server-side validation): warm red bottom border.
   Covers inputs, selects, AND textareas (contact form message field). */
.submit-form input[aria-invalid="true"],
.submit-form select[aria-invalid="true"],
.submit-form textarea[aria-invalid="true"] {
    border-block-end-color: #A0392D;
}

[data-theme="dark"] .submit-form input[aria-invalid="true"],
[data-theme="dark"] .submit-form select[aria-invalid="true"],
[data-theme="dark"] .submit-form textarea[aria-invalid="true"] {
    border-block-end-color: #D86B5E;
}

/* --- Select dropdowns: match input styling + custom arrow --- */
.submit-form select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Custom dropdown arrow using editorial-colored SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A776E' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-color: transparent;
    padding-inline-end: 1.5rem;
}

/* RTL: flip arrow to left side */
[dir="rtl"] .submit-form select {
    background-position: left 0 center;
    padding-inline-end: 0;
    padding-inline-start: 1.5rem;
}

[data-theme="dark"] .submit-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238D887C' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* --- Textarea: bottom-border only, but taller for multi-line --- */
.submit-form textarea {
    resize: vertical;
    min-height: 5rem;
}

/* --- Help text: muted, small, below input --- */
.submit-help {
    display: block;
    font-size: var(--text-xs);
    color: var(--ed-text-muted);
    margin-block-start: 0.25rem;
    line-height: 1.5;
}

/* --- Submit button: accent-outlined CTA, matches .hero-play-btn --- */
.submit-actions {
    margin-block-start: var(--space-between);
    padding-block-start: var(--space-tight);
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: 1.75rem;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1;
    color: var(--ed-accent);
    background: transparent;
    border: var(--border-rule) solid var(--ed-accent);
    border-radius: 0;
    cursor: pointer;
    transition: background var(--transition-normal),
                color var(--transition-normal),
                border-color var(--transition-normal);
}

.submit-btn:hover {
    background: var(--ed-accent);
    color: var(--ed-accent-text);
    border-color: var(--ed-accent);
}

.submit-btn:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}

.submit-btn:active {
    background: var(--ed-accent-hover);
    border-color: var(--ed-accent-hover);
    color: var(--ed-accent-text);
}

/* Desktop: shrink button to content width */
@media (min-width: 576px) {
    .submit-btn {
        display: inline-flex;
        width: auto;
    }
}

/* --- Success banner: accent-tinted, prominent but not garish --- */
.submit-banner {
    padding-block: 1rem;
    padding-inline: 1.25rem;
    margin-block-end: var(--space-between);
    border-inline-start: 3px solid;
    line-height: 1.6;
}

.submit-banner p {
    margin: 0;
    font-size: var(--text-md);
}

.submit-banner-success {
    border-color: var(--ed-live-dot);
    background: rgba(61, 140, 92, 0.06);
    color: var(--ed-text);
}

[data-theme="dark"] .submit-banner-success {
    background: rgba(90, 175, 114, 0.08);
}

/* --- Error banner: warm red, clear but not alarming --- */
.submit-banner-error {
    border-color: #A0392D;
    background: rgba(160, 57, 45, 0.06);
    color: var(--ed-text);
}

[data-theme="dark"] .submit-banner-error {
    border-color: #D86B5E;
    background: rgba(216, 107, 94, 0.08);
}

/* Field error state is handled via aria-invalid="true" on individual
   inputs — see .submit-form input[aria-invalid="true"] rules above. */

/* --- Guidelines section: follows static-page h2 pattern --- */
.submit-guidelines {
    margin-block-start: var(--space-between);
}

.submit-guidelines ol {
    padding-inline-start: 1.5rem;
    color: var(--ed-text-secondary);
    font-size: var(--text-md);
}

.submit-guidelines li {
    margin-block-end: 0.375rem;
    line-height: 1.65;
}

/* --- RTL / Arabic overrides --- */
[dir="rtl"] .submit-page .page-intro {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    font-style: normal;
}

[dir="rtl"] .submit-label {
    font-family: 'Noto Sans Arabic', var(--font-sans);
}

[dir="rtl"] .submit-form input,
[dir="rtl"] .submit-form select,
[dir="rtl"] .submit-form textarea {
    font-family: 'Noto Sans Arabic', var(--font-sans);
}

[dir="rtl"] .submit-btn {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
}

/* RTL: banner border uses border-inline-start which is already
   RTL-aware (maps to border-right in RTL). No override needed. */

/* --- Mobile tightening (< 576px) --- */
@media (max-width: 575px) {
    .submit-field {
        margin-block-end: 1.25rem;
    }

    .submit-page .page-intro {
        font-size: var(--text-md);
    }
}

/* --- Tablet+ (768px): more generous spacing --- */
@media (min-width: 768px) {
    .submit-field {
        margin-block-end: 1.75rem;
    }

    .submit-actions {
        margin-block-start: 2.5rem;
    }
}


/* ============================================================
   16. SITE FOOTER — Editorial style
   ============================================================ */

.site-footer {
    padding-block: var(--space-between) var(--space-between);
    text-align: center;
    border-block-start: var(--border-rule) solid var(--ed-border-rule);
    margin-block-end: calc(var(--player-height-active) + 0.5rem);
    background: var(--ed-bg);
}

.footer-inner {
    padding-block-start: 0.5rem;
}

.footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: var(--text-sm);
}

.footer-nav a {
    color: var(--ed-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color var(--transition-fast);
}

[dir="rtl"] .footer-nav a {
    text-transform: none;
    letter-spacing: 0;
}

.footer-nav a:hover {
    color: var(--ed-text);
}

.footer-sep {
    color: var(--ed-border);
    user-select: none;
    font-size: var(--text-xs);
}

/* Hide dot separators on mobile when nav wraps — gap provides spacing */
@media (max-width: 575px) {
    .footer-sep {
        display: none;
    }

    .footer-nav {
        gap: 0.375rem 0.75rem;
    }
}

.footer-copyright {
    font-size: var(--text-xs);
    color: var(--ed-text-faint);
    margin-block-start: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: var(--border-thin) solid var(--ed-border);
    letter-spacing: 0.02em;
}

[dir="rtl"] .footer-copyright {
    letter-spacing: 0;
}


/* ============================================================
   17. VISITORS COUNTER
   ============================================================ */

.visitors-counter {
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
    text-align: center;
    margin-block: 0.75rem 1.25rem;
    font-style: italic;
}


/* ============================================================
   18. AD SLOT PLACEHOLDERS
   ============================================================ */

.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ed-bg-warm);
    border: var(--border-thin) dashed var(--ed-border);
    border-radius: var(--radius-md);
    color: var(--ed-text-faint);
    font-size: var(--text-xs);
    text-align: center;
    overflow: hidden;
    margin-block: var(--space-major);
}

.ad-slot-infeed {
    min-height: 5rem;
    max-width: 100%;
}

.ad-slot-leaderboard {
    min-height: 5.625rem;
    max-width: 45.5rem;
}

.ad-slot-rectangle {
    min-height: 15.625rem;
    max-width: 18.75rem;
}

@media (max-width: 575px) {
    .ad-slot-leaderboard {
        min-height: 3.125rem;
        max-width: 100%;
    }

    .ad-slot-rectangle {
        max-width: 100%;
    }
}


/* ============================================================
   19. COOKIE CONSENT BANNER
   ============================================================ */

.cookie-banner {
    position: fixed;
    inset-block-end: calc(var(--player-height-active) + 0.5rem);
    inset-inline: 0;
    background: var(--ed-bg-card);
    border-block-start: var(--border-thin) solid var(--ed-border);
    padding-block: 0.875rem;
    z-index: 99;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .cookie-banner {
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ed-text);
}

.cookie-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.375rem 1.125rem;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    letter-spacing: 0.02em;
}

.cookie-btn:hover {
    opacity: 0.85;
}

.cookie-btn:active {
    transform: scale(0.97);
}

.cookie-btn-accept {
    background: var(--ed-accent);
    color: var(--ed-accent-text);
}

.cookie-btn-decline {
    background: var(--ed-border);
    color: var(--ed-text);
}

/* Cookie preferences page (/{lang}/cookies) — status display + action buttons */

.cookie-status {
    font-size: var(--text-base);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-inline-start: 3px solid var(--ed-border);
    margin-block: 1rem;
}

.cookie-status-accepted {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
}

.cookie-status-declined {
    border-color: var(--ed-text-muted);
    color: var(--ed-text-muted);
}

.cookie-status-notset {
    border-color: var(--ed-border);
    color: var(--ed-text-muted);
    font-style: italic;
}

.cookie-pref-buttons {
    display: flex;
    gap: var(--space-tight);
    margin-block-start: var(--space-between);
    flex-wrap: wrap;
}

.cookie-pref-btn {
    padding: 0.625rem 1.5rem;
    border: var(--border-thin) solid var(--ed-border);
    background: var(--ed-bg-card);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cookie-pref-btn:hover {
    border-color: var(--ed-accent);
}

.cookie-pref-btn-accept {
    background: var(--ed-accent);
    color: var(--ed-accent-text);
    border-color: var(--ed-accent);
}

.cookie-pref-btn-accept:hover {
    opacity: 0.85;
}

.cookie-pref-btn-decline {
    background: var(--ed-bg-card);
    color: var(--ed-text);
}


/* ============================================================
   20. ARABIC / RTL OVERRIDES

   CRITICAL: Never use letter-spacing on Arabic text.
   CRITICAL: Never use text-transform: uppercase on Arabic text.
   ============================================================ */

[dir="rtl"] {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
    /* No serif for Arabic — Noto Sans Arabic handles heading weight */
}

[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] a {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
}

/* Override letter-spacing and text-transform for Arabic everywhere */
[dir="rtl"] .header-utility a {
    letter-spacing: 0;
    text-transform: none;
}

/* Station detail — neutralize letter-spacing/text-transform for Arabic */
[dir="rtl"] .station-header h1 {
    letter-spacing: 0;
}

[dir="rtl"] .station-info h2 {
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .station-info-list dt {
    letter-spacing: 0;
    text-transform: none;
}

[dir="rtl"] .related-stations h2 {
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .cross-country-stations h2 {
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] .masthead-subtitle {
    letter-spacing: 0;
    text-transform: none;
}

[dir="rtl"] .player-status {
    letter-spacing: 0;
    text-transform: none;
}

[dir="rtl"] .player-sleep-opt {
    letter-spacing: 0;
    text-align: end;
}

[dir="rtl"] .player-retry-btn {
    letter-spacing: 0;
}

[dir="rtl"] .player-sleep-countdown {
    letter-spacing: 0;
}

[dir="rtl"] .player-location {
    letter-spacing: 0;
}

[dir="rtl"] .cookie-btn {
    letter-spacing: 0;
}

/* Slightly larger tiles for Arabic readability */
[dir="rtl"] .station-tile {
    font-size: 0.95rem;
}

[dir="rtl"] .player-text {
    font-size: 0.95rem;
}

/* Now-on-air tile label: Arabic has no italic tradition; use normal style,
   Arabic font stack, and a slightly larger size for legibility at small scales. */
[dir="rtl"] .tile-now-on-air {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-style: normal;
    font-size: 0.625rem;            /* 10px — Arabic needs more room than Latin at small sizes */
}

@media (min-width: 576px) {
    [dir="rtl"] .station-tile {
        font-size: 1rem;
    }
}


/* ============================================================
   21. EMPTY & ERROR STATES
   ============================================================ */

.empty-state {
    text-align: center;
    padding-block: var(--space-major);
    border-block-start: var(--border-thin) solid var(--ed-border);
    border-block-end: var(--border-thin) solid var(--ed-border);
    margin-block: var(--space-between);
}

.empty-state h2 {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-block-end: 0.5rem;
    color: var(--ed-text);
}

.empty-state p {
    font-size: var(--text-base);
    color: var(--ed-text-muted);
    font-style: italic;
}

.empty-state a {
    color: var(--ed-link);
    text-decoration: underline;
    text-decoration-color: var(--ed-border-strong);
    text-underline-offset: 2px;
}


/* ============================================================
   22. ACCESSIBILITY — Skip link, focus styles
   ============================================================ */

.skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: 0;
    background: var(--ed-accent);
    color: var(--ed-accent-text);
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    z-index: 200;
    text-decoration: none;
}

.skip-link:focus {
    inset-block-start: 0;
}

/* Focus-visible outlines for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.station-tile:focus-visible,
.country-tab:focus-visible,
.trending-item:focus-visible,
.station-fav-btn:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}


/* ============================================================
   23. ERROR PAGE (404)
   ============================================================ */

.error-page {
    text-align: center;
    padding-block: 4rem 2rem;
}

.error-page-inner {
    max-width: 32rem;
    margin-inline: auto;
}

.error-page-code {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ed-text);
    opacity: 0.15;
    margin-block-end: 0.5rem;
}

.error-page-heading {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-block-end: 0.75rem;
}

.error-page-message {
    color: var(--ed-text-muted);
    margin-block-end: 1.5rem;
}

.error-page-link {
    font-weight: 500;
}

[dir="rtl"] .error-page-heading {
    font-family: var(--font-sans);
}


/* ============================================================
   24. BREADCRUMB NAVIGATION
   ============================================================ */

.breadcrumb {
    margin-block-end: var(--space-tight);
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    margin: 0;
}

.breadcrumb li {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breadcrumb li + li::before {
    content: "/";
    margin-inline: 0.5em;
    color: var(--ed-text-faint);
}

.breadcrumb a {
    color: var(--ed-text);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
    color: var(--ed-text-muted);
}

/* RTL: no uppercase, no letter-spacing for Arabic */
[dir="rtl"] .breadcrumb li {
    text-transform: none;
    letter-spacing: normal;
}


/* ============================================================
   25. PUBLIC STATS PAGE — Editorial dashboard
       CSS bar charts, summary cards, ranking lists.
       Flat design: no shadows, no border-radius, no gradients.
   ============================================================ */

/* --- Stats page container --- */
.stats-page {
    max-width: 52rem;
}

.stats-page h1 {
    font-family: var(--font-serif);
    margin-block-end: 0.375rem;
    padding-block-end: 0;
    border-block-end: none;
}

.stats-page .stats-period {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
    margin-block-end: var(--space-between);
    font-style: italic;
}

/* --- Visitor counter cards (today + month) --- */
.stats-counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--grid-gap);
    margin-block-end: var(--space-between);
    border-block-start: var(--border-rule) solid var(--ed-border-rule);
    padding-block-start: var(--space-tight);
}

.stats-counter-card {
    padding: 1rem 0.75rem;
    border: var(--border-thin) solid var(--ed-border);
    background: var(--ed-bg-card);
    text-align: center;
}

.stats-counter-value {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ed-text);
    margin-block-end: 0.25rem;
}

.stats-counter-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
}

[dir="rtl"] .stats-counter-label {
    text-transform: none;
    letter-spacing: 0;
}

@media (min-width: 576px) {
    .stats-counter-value {
        font-size: var(--text-3xl);
    }
}

/* --- Stats section (ranking block with thick top rule) --- */
.stats-section {
    margin-block-end: var(--space-between);
    border-block-start: var(--border-rule) solid var(--ed-border-rule);
    padding-block-start: var(--space-tight);
}

.stats-section h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: var(--space-tight);
}

[dir="rtl"] .stats-section h2 {
    text-transform: none;
    letter-spacing: 0;
}

/* --- CSS bar chart list — ordered list of horizontal bars --- */
.stats-bar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: stats-rank;
}

.stats-bar-item {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem 0.625rem;
    align-items: center;
    padding-block: 0.625rem;
    border-block-end: var(--border-thin) solid var(--ed-border);
    counter-increment: stats-rank;
}

.stats-bar-item:last-child {
    border-block-end: none;
}

/* Auto-generate rank numbers via CSS counter */
.stats-bar-item::before {
    content: counter(stats-rank);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ed-text-faint);
    text-align: end;
    min-width: 1.5rem;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    align-self: center;
}

/* Emphasize top 3 rank numbers */
.stats-bar-item:nth-child(-n+3)::before {
    color: var(--ed-text);
}

/* Station/item name (clickable link or plain text) */
.stats-bar-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ed-text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

a.stats-bar-label:hover {
    color: var(--ed-link);
}

/* Bar track (background) + fill (foreground) */
.stats-bar-track {
    height: 0.375rem;
    background: var(--ed-border);
    position: relative;
    overflow: hidden;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.stats-bar-fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-block-end: 0;
    /* width set via inline style: style="width: 85%" */
}

/* Bar color variants — flat, no gradients */
.stats-bar-fill-plays {
    background: var(--ed-accent);
}

.stats-bar-fill-clicks {
    background: var(--ed-text-muted);
}

.stats-bar-fill-countries {
    background: var(--ed-border-strong);
}

/* Top 3 items get accent color regardless of variant */
.stats-bar-item:nth-child(1) .stats-bar-fill {
    background: var(--ed-accent);
}

.stats-bar-item:nth-child(2) .stats-bar-fill,
.stats-bar-item:nth-child(3) .stats-bar-fill {
    background: var(--ed-text-muted);
}

/* Value label (right column, spans both rows) */
.stats-bar-value {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ed-text-secondary);
    white-space: nowrap;
    min-width: 3rem;
    text-align: end;
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    align-self: center;
}

/* --- Empty state for stats sections and favorites --- */
.stats-section .stats-empty,
.favorites-page .stats-empty {
    font-size: var(--text-base);
    color: var(--ed-text-muted);
    font-style: italic;
    padding-block: var(--space-between);
    text-align: center;
    margin-block-end: 0;
}

/* --- Mobile adjustments for stats bar charts --- */
@media (max-width: 575px) {
    .stats-counters {
        grid-template-columns: 1fr 1fr;
    }

    .stats-bar-item {
        grid-template-columns: 1.25rem 1fr auto;
        gap: 0.125rem 0.5rem;
        padding-block: 0.5rem;
    }

    .stats-bar-label {
        font-size: var(--text-xs);
    }

    .stats-bar-value {
        min-width: 2.5rem;
        font-size: 0.6875rem;
    }
}

/* Print: stats — see consolidated @media print block at end of file */


/* ============================================================
   26. STATION DAILY PLAY CHART
   ============================================================ */

.station-daily-chart {
    margin-block-start: var(--space-tight);
    margin-block-end: 0;
    padding-block-start: var(--space-tight);
    border-block-start: 2px solid var(--ed-text);
}

.station-daily-chart h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text);
    margin-block-end: var(--space-tight);
}

[dir="rtl"] .station-daily-chart h2 {
    text-transform: none;
    letter-spacing: 0;
}

.daily-chart-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.daily-chart-bars {
    display: flex;
    align-items: flex-end;
    height: 120px;
    gap: 2px;
    /* Time series always reads left-to-right, even in RTL layouts */
    direction: ltr;
}

.daily-chart-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

.daily-chart-bar {
    width: 100%;
    min-height: 1px;
    background: var(--ed-accent);
    transition: background var(--transition-fast);
}

.daily-chart-bar:hover {
    background: var(--ed-accent-hover);
}

.daily-chart-bar-empty {
    background: var(--ed-border);
    min-height: 1px;
    height: 1px !important;
}

.daily-chart-bar-empty:hover {
    background: var(--ed-border);
}

.daily-chart-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.5625rem;
    color: var(--ed-text-faint);
    white-space: nowrap;
    margin-block-start: 0.25rem;
    /* Labels are outside the chart height */
}

/* Desktop: chart in the main column */
@media (min-width: 1024px) {
    .station-daily-chart {
        grid-column: 1 / 2;
    }
}

/* Mobile: slightly thinner gap, smaller height */
@media (max-width: 575px) {
    .daily-chart-bars {
        height: 80px;
        gap: 1px;
    }

    .daily-chart-label {
        font-size: 0.5rem;
    }
}


/* --- Station listener geo breakdown (per-station country bar chart) ---
   Horizontal bar chart showing top 5 listener countries with flag + name +
   percentage bar.  Follows the same editorial bar pattern as the stats page
   (.stats-bar-*) but scoped to the station detail layout.
   Section rule matches .station-daily-chart (2px dark, data-viz sibling).
   Bars always read left-to-right, even in RTL layouts (data-viz convention). */

.station-listener-geo {
    margin-block-start: var(--space-tight);
    margin-block-end: 0;
    padding-block-start: var(--space-tight);
    border-block-start: 2px solid var(--ed-text);
}

/* Section heading: editorial label — matches .station-daily-chart h2 */
.station-listener-geo h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text);
    margin-block-end: 0;
}

/* RTL: Arabic heading — drop uppercase and letter-spacing */
[dir="rtl"] .station-listener-geo h2 {
    text-transform: none;
    letter-spacing: 0;
}

/* Period subtitle ("Last 30 days") — quiet italic caption */
.listener-geo-period {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--ed-text-muted);
    font-style: italic;
    margin-block-start: 0.125rem;
    margin-block-end: var(--space-tight);
}

/* Bar fill: accent color for all geo bars, flat, no border-radius.
   Override the stats-page nth-child rules that recolor items 2-3 to muted. */
.stats-bar-fill-geo {
    background: var(--ed-accent);
}

.station-listener-geo .stats-bar-item .stats-bar-fill {
    background: var(--ed-accent);
}

/* Bars always read left-to-right even in RTL (standard data-viz convention) */
.listener-geo-bars {
    direction: ltr;
}


/* 27. PRINT STYLES — see consolidated @media print block at end of file */


/* ============================================================
   28. PAGE INTRO — Editorial lede paragraph
   Used on Quran hub and other editorial landing pages.
   Serif in LTR, Noto Sans Arabic in RTL. NYT-style measure.
   ============================================================ */

.page-intro {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--ed-text-secondary);
    max-width: 42rem;
    margin-block-end: var(--space-between);
}

@media (min-width: 768px) {
    .page-intro {
        font-size: var(--text-xl);
        line-height: 1.65;
    }
}

/* Arabic: Noto Sans Arabic, larger line-height, no letter-spacing */
[dir="rtl"] .page-intro {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    font-size: 1.125rem;
    line-height: 1.8;
    letter-spacing: 0;
    text-transform: none;
}

@media (min-width: 768px) {
    [dir="rtl"] .page-intro {
        font-size: 1.25rem;
    }
}

/* Station count — small muted line below h1 */
.page-station-count {
    font-size: var(--text-xs);
    color: var(--ed-text-faint);
    margin-block-start: 0;
    margin-block-end: var(--space-tight);
}

[dir="rtl"] .page-station-count {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
}


/* ============================================================
   28a. CITY PAGE — Local radio directory
   Cap the tile grid so 1-3 stations don't stretch to fill
   the entire row width. The page should feel like a curated
   local directory, not a sparse filtered list.
   On mobile (< 576px), tiles use the default 1fr stretch so
   they fill the narrow viewport naturally.
   ============================================================ */

@media (min-width: 576px) {
    .city-page .station-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-tile), 14rem));
    }
}


/* ============================================================
   29. KEYBOARD SHORTCUTS MODAL — native <dialog> overlay

   Uses the native <dialog> element with showModal()/close() API.
   This provides built-in focus trapping, Escape key handling,
   and the ::backdrop pseudo-element for the overlay.

   Design: newspaper reference card aesthetic.
   No border-radius, no shadows on the modal panel itself.
   <kbd> elements use monospace, hairline border, subtle fill.
   ============================================================ */

/* --- Dialog element: override Pico/UA defaults for editorial look --- */
#shortcuts-modal {
    background: var(--ed-bg-card);
    color: var(--ed-text);
    border: var(--border-thin) solid var(--ed-border-rule);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 25rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 0;
    /* Explicit margin: auto overrides Pico CSS dialog margin */
    margin: auto;
}

#shortcuts-modal::backdrop {
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* --- Content wrapper --- */
.shortcuts-content {
    display: flex;
    flex-direction: column;
}

.shortcuts-content h2 {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--ed-text);
    margin: 0;
    line-height: 1.2;
    padding: 1.25rem 1.5rem 0.75rem;
    border-block-end: var(--border-rule) solid var(--ed-border-rule);
}

/* --- Close button: full-width bottom bar, editorial divider style ---
   Sits in the natural DOM flow (after the shortcuts list).
   Visual and focus order match — no absolute positioning. */
.shortcuts-close {
    background: none;
    border: none;
    border-block-start: var(--border-thin) solid var(--ed-border);
    width: 100%;
    padding: 0.75rem 1.5rem;
    margin: 0;
    cursor: pointer;
    color: var(--ed-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: 400;
    line-height: 1;
    text-align: center;
    transition: color var(--transition-fast);
}

.shortcuts-close:hover {
    color: var(--ed-text);
}

.shortcuts-close:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: -2px;
}

/* --- Shortcuts list --- */
.shortcuts-list {
    margin: 0;
    padding: 0.25rem 1.5rem 0.5rem;
}

.shortcuts-list dt,
.shortcuts-list dd {
    margin: 0;
    padding: 0;
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.5rem;
    border-block-end: var(--border-thin) solid var(--ed-border);
    gap: 1rem;
}

.shortcut-row:last-child {
    border-block-end: none;
}

.shortcut-row dt {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.shortcut-row dd {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ed-text-secondary);
    flex: 1;
    text-align: end;
}

/* --- <kbd> elements: monospace, hairline border, subtle fill --- */
kbd {
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    color: var(--ed-text);
    background: var(--ed-bg-warm);
    border: var(--border-thin) solid var(--ed-border-strong);
    border-radius: 0;
    padding: 0.2em 0.45em;
    min-width: 1.5em;
    text-align: center;
    display: inline-block;
    vertical-align: baseline;
    /* kbd labels always render LTR, even in RTL contexts */
    direction: ltr;
    unicode-bidi: isolate;
}

/* --- Player help button: the "?" trigger in the player bar --- */
.player-btn-help {
    grid-area: help;
    background: transparent;
    color: var(--ed-player-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border: var(--border-thin) solid rgba(255, 255, 255, 0.15);
    border-radius: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    padding: 0;
    margin: 0;
}

.player-btn-help:hover {
    color: var(--ed-player-text);
    border-color: rgba(255, 255, 255, 0.35);
    transform: none;
}

.player-btn-help:active {
    transform: none;
}

.player-btn-help:focus-visible {
    outline: 2px solid var(--ed-player-accent);
    outline-offset: 2px;
}

/* --- Dark mode adjustments --- */
[data-theme="dark"] #shortcuts-modal {
    border-color: var(--ed-border-strong);
}

[data-theme="dark"] #shortcuts-modal::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] kbd {
    background: var(--ed-bg-hover);
    border-color: var(--ed-border-strong);
    color: var(--ed-text);
}

/* --- RTL overrides --- */
[dir="rtl"] .shortcuts-content h2 {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    letter-spacing: 0;
}

[dir="rtl"] .shortcut-row dd {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    letter-spacing: 0;
    text-transform: none;
    /* In RTL, descriptions sit on the start side; text-align: end becomes
       the physical left (where the dd text should flow from in Arabic) */
}

[dir="rtl"] .shortcuts-close {
    font-family: var(--font-sans);
    letter-spacing: 0;
}

/* kbd stays LTR in RTL — direction: ltr + unicode-bidi already handle this */

/* --- Mobile: full-width modal --- */
@media (max-width: 575px) {
    #shortcuts-modal {
        width: calc(100% - 1rem);
        max-width: none;
        margin: auto 0.5rem;
    }

    .shortcuts-content h2 {
        font-size: var(--text-xl);
        padding: 1rem 1rem 0.625rem;
    }

    .shortcuts-list {
        padding-inline: 1rem;
    }

    .shortcuts-close {
        padding: 0.625rem 1rem;
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 767px) {
    #shortcuts-modal {
        max-width: 22rem;
    }
}

/* --- Alarm dialog: mobile full-width --- */
@media (max-width: 575px) {
    #alarm-dialog {
        width: calc(100% - 1rem);
        max-width: none;
        margin: auto 0.5rem;
    }

    .alarm-dialog-content h2 {
        font-size: var(--text-xl);
        padding: 1rem 1rem 0.625rem;
    }

    .alarm-form {
        padding: 0.75rem 1rem 0.5rem;
    }

    .alarm-action-btn {
        padding: 0.625rem 1rem;
    }

    .alarm-close-btn {
        inset-block-start: 0.5rem;
        inset-inline-end: 0.5rem;
    }
}

/* --- Alarm dialog: tablet --- */
@media (min-width: 576px) and (max-width: 767px) {
    #alarm-dialog {
        max-width: 20rem;
    }
}


/* ============================================================
   30. SCROLL-TO-TOP BUTTON
   ============================================================ */

.scroll-top-btn {
    position: fixed;
    inset-block-end: calc(var(--player-height-active) + 1rem);
    inset-inline-end: 1rem;
    z-index: 900;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;

    background: var(--ed-bg);
    color: var(--ed-text);
    border: var(--border-thin) solid var(--ed-border-strong);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal), color var(--transition-fast), border-color var(--transition-fast);
}

.scroll-top-btn:hover {
    color: var(--ed-accent);
    border-color: var(--ed-accent);
}

.scroll-top-btn:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 2px;
}

.scroll-top-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Dark mode */
[data-theme="dark"] .scroll-top-btn {
    background: var(--ed-bg-card);
    color: var(--ed-text);
    border-color: var(--ed-border-strong);
}

[data-theme="dark"] .scroll-top-btn:hover {
    color: var(--ed-accent);
    border-color: var(--ed-accent);
}

/* Mobile: 44px touch target */
@media (max-width: 575px) {
    .scroll-top-btn {
        width: 2.75rem;
        height: 2.75rem;
        inset-inline-end: 0.75rem;
        inset-block-end: calc(var(--player-height-active) + 0.75rem);
    }
}

/* Print: see consolidated @media print block at end of file */


/* ============================================================
   STATION CLOCK — local time in station's country
   ============================================================ */

.station-clock {
    margin-block-start: 0.75rem;
    padding-block-start: 0.5rem;
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.station-clock-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ed-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-block-end: 0.125rem;
}

.station-clock-time {
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
    font-size: var(--text-sm);
    color: var(--ed-text);
    letter-spacing: 0.02em;
}

/* Arabic: no letter-spacing, no text-transform */
[dir="rtl"] .station-clock-label {
    letter-spacing: 0;
    text-transform: none;
}

[dir="rtl"] .station-clock-time {
    letter-spacing: 0;
    direction: ltr;
    unicode-bidi: isolate;
}


/* ============================================================
   PRINT STYLES — Consolidated
   All @media print rules in one block at the end of the file.
   ============================================================ */

@media print {
    /* ── Hidden elements ─────────────────────────────────────── */
    .player-bar,
    .ad-slot,
    .cookie-banner,
    #scroll-top-btn,
    .scroll-top-btn,
    .global-search,
    .favorite-btn,
    .tile-play-btn,
    .station-badge-new,
    .station-badge-top,
    .station-tile-playing::after,
    .header-utility .theme-toggle-btn,
    .filter-bar,
    .breadcrumb,
    .station-share,
    .station-hero-play,
    .hero-play-btn,
    .station-tile-listeners,
    .tile-now-on-air,
    .live-indicator,
    .station-tile-freq,
    .player-eq,
    .player-toast,
    .autocontinue-toast,
    .player-visualizer {
        display: none !important;
    }

    /* Hero CTA prints as simple text — subtitle visible, button hidden,
       bottom border removed so it reads like a plain section intro. */
    .hero-cta {
        border-block-end: none;
        padding-block-end: 0;
    }

    /* ── Force white background, black text ──────────────────── */
    body {
        background: white !important;
        color: black !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    /* ── Header ──────────────────────────────────────────────── */
    .site-header {
        border-block-end: 1px solid black;
    }

    .masthead-title,
    .masthead-title a {
        color: black !important;
    }

    .masthead-subtitle::before,
    .masthead-subtitle::after {
        background: #999;
    }

    .dateline {
        border-block-end: none;
    }

    /* ── Main content ────────────────────────────────────────── */
    main {
        padding-block-end: 0;
    }

    /* ── Station grid: single column, tiles as simple text ───── */
    .station-grid {
        display: block !important;
    }

    .station-tile {
        display: block;
        border: none !important;
        border-block-end: 1px solid #ccc !important;
        padding: 0.375rem 0;
        margin: 0;
        background: none !important;
        min-height: 0;
    }

    .station-tile:last-child {
        border-block-end: none !important;
    }

    .station-tile .station-tile-name {
        font-size: 0.875rem;
        color: black;
    }

    .station-tile::before,
    .station-tile::after {
        display: none !important;
    }

    /* ── Station detail ──────────────────────────────────────── */
    .station-detail {
        display: block;
        max-width: 100%;
    }

    /* ── Footer ──────────────────────────────────────────────── */
    .site-footer {
        margin-block-end: 0;
        border-block-start: 1px solid black;
    }

    .footer-nav a {
        color: black;
    }

    /* ── Stats bar charts: force visible fills ───────────────── */
    .stats-bar-fill {
        background: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Remove decorative borders/rules that don't print well ─ */
    .trending-section {
        border-block-start: 1px solid #ccc;
    }

    .country-tab {
        border: none !important;
    }

    .home-sidebar {
        border-inline-start: none;
    }

    /* ── Submit form: clean list of labeled fields ───────────── */
    .submit-btn {
        display: none !important;
    }

    .submit-banner {
        border: 1px solid #ccc;
        background: none !important;
    }

    .submit-input,
    .submit-select,
    .submit-textarea {
        border: none !important;
        border-block-end: 1px solid #ccc !important;
        background: none !important;
    }

    .submit-field {
        page-break-inside: avoid;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Alphabet Quick-Nav Index Bar — compact letter index above station
   grids. Newspaper column-index aesthetic: understated, tight, flat.
   Active letters are links; missing letters are dimmed but present.
   No border-radius anywhere. Dark mode via --ed-* variables.
   ══════════════════════════════════════════════════════════════════════ */

/* Container: thin top + bottom rules frame the index like a column header.
   Tight vertical padding keeps it compact and supplementary. */
.alpha-index {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: center;
    margin-block-end: var(--space-tight);
    padding-block: 0.375rem;
    border-block-start: var(--border-thin) solid var(--ed-border);
    border-block-end: var(--border-thin) solid var(--ed-border);
}

/* Individual letter cell: sized for adequate touch targets while
   keeping the bar dense. min-height ensures 44px on touch devices. */
.alpha-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    min-height: 2rem;
    padding-inline: 0.125rem;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    color: var(--ed-text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 0;
    transition: color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

/* Hover: darken to primary text, no flashy color shift */
.alpha-letter:hover {
    color: var(--ed-text);
}

/* Keyboard focus: accessible outline consistent with mood pills */
.alpha-letter:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: 1px;
}

/* Active state: applied by JS when a letter is clicked.
   Darkens to primary text with heavier weight -- understated emphasis,
   not the accent color (editorial restraint). */
.alpha-letter-active {
    color: var(--ed-text);
    font-weight: 700;
}

/* Disabled letters: dimmed but not invisible.
   Uses --ed-text-faint which is the site's lightest text token, then
   further dimmed with opacity. The letter shapes remain recognizable
   as a ghost alphabet -- you can see the full A-Z sequence. */
.alpha-letter-disabled {
    color: var(--ed-text-faint);
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

/* Dark mode: surface is much darker, so disabled letters need
   slightly higher opacity to remain discernible. */
[data-theme="dark"] .alpha-letter-disabled {
    opacity: 0.55;
}

/* Arabic: Noto Sans Arabic font, no letter-spacing, no uppercase.
   Arabic glyphs need the proper font and must never be transformed. */
[dir="rtl"] .alpha-index {
    direction: rtl;
}

[dir="rtl"] .alpha-letter {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--text-sm);
}

/* Touch devices: ensure 44px minimum tap target */
@media (pointer: coarse) {
    .alpha-letter {
        min-height: 2.75rem;
    }
}

/* Tablet+: letters can breathe a little more */
@media (min-width: 576px) {
    .alpha-letter {
        min-width: 1.75rem;
    }
}

/* Desktop: slightly wider to fill available space gracefully */
@media (min-width: 1024px) {
    .alpha-letter {
        min-width: 2rem;
    }
}

/* Reduced motion: disable hover transition */
@media (prefers-reduced-motion: reduce) {
    .alpha-letter {
        transition: none;
    }
}

/* Hide from print */
@media print {
    .alpha-index { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Letter Jump — press a letter key to scroll to the first matching
   station tile. A floating indicator shows the typed letter briefly.
   ══════════════════════════════════════════════════════════════════════ */

/* Floating letter indicator — newspaper section marker aesthetic.
   Large serif letter, thin border, no radius, no shadow.
   Positioned at inset-inline-end for correct RTL placement. */
.letter-jump-indicator {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-end: 2rem;
    transform: translateY(-50%);
    font-family: var(--font-serif);
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    color: var(--ed-text);
    background: var(--ed-bg-card);
    border: 1px solid var(--ed-border);
    border-radius: 0;
    box-shadow: none;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

/* Arabic: use Noto Sans Arabic — Playfair Display cannot render Arabic glyphs */
[dir="rtl"] .letter-jump-indicator {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-size: 2.5rem;
    line-height: 1.3;
}

.letter-jump-visible {
    opacity: 1;
}

/* Highlight on matched tile — subtle accent outline that fades out */
@keyframes jumpHighlight {
    0%   { box-shadow: 0 0 0 2px var(--ed-accent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.station-tile-jump-highlight {
    animation: jumpHighlight 1s ease forwards;
}

/* Reduced motion: show static highlight, no animation on indicator */
@media (prefers-reduced-motion: reduce) {
    .letter-jump-indicator {
        transition: none;
    }
    .station-tile-jump-highlight {
        animation: none;
        box-shadow: 0 0 0 2px var(--ed-accent);
    }
}

/* Mobile: scale down indicator so it doesn't dominate small screens */
@media (max-width: 480px) {
    .letter-jump-indicator {
        font-size: 2rem;
        padding-block: 0.375rem;
        padding-inline: 0.75rem;
        inset-inline-end: 1rem;
    }
    [dir="rtl"] .letter-jump-indicator {
        font-size: 1.75rem;
    }
}

/* 30. ALT+N STATION QUICK-LAUNCH HINTS
   Hold Alt to reveal number badges (1-9) centered over the first 9 station tiles.
   Press Alt+N to click that tile and start playback.
   Hints are dynamically injected by JS — CSS only controls visibility.
   Desktop-only: hidden on touch/pointer-coarse devices. */
.tile-key-hint {
    position: absolute;
    /* Center horizontally: stretch across tile, auto margins center the fixed-width box.
       Works identically in LTR and RTL because inset-inline resolves symmetrically. */
    inset-inline: 0;
    margin-inline: auto;
    /* Center vertically: offset 50% from top, pull back half its own height. */
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ed-bg);
    background: var(--ed-text);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.alt-hints-active .tile-key-hint {
    opacity: 0.88;
}

/* Disable transition for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tile-key-hint { transition: none; }
}

/* Desktop-only: hide on touch devices (phones, tablets) */
@media (pointer: coarse) {
    .tile-key-hint { display: none !important; }
}
@media (hover: none) {
    .tile-key-hint { display: none !important; }
}

/* Hide from print */
@media print {
    .letter-jump-indicator { display: none !important; }
    .tile-key-hint { display: none !important; }
}

/* ============================================================
   RADIO PASSPORT — "Your Radio Passport" personalized recap
   The most special page on the site: a personal stamp of the
   listener's journey. Newspaper infographic feel with large
   serif numbers, warm accent colors, and a subtle stamp-like
   double-border on each stat card.
   ============================================================ */

/* --- Page container: slightly wider than static pages for the 2x2 grid --- */
.passport-page {
    max-width: 48rem;
}

.passport-page h1 {
    font-family: var(--font-serif);
    text-align: center;
    margin-block-end: var(--space-tight);
    padding-block-end: 0;
    border-block-end: none;
}

/* Decorative double-rule below heading -- newspaper motif */
.passport-page h1::after {
    content: "";
    display: block;
    margin-block-start: 0.75rem;
    margin-inline: auto;
    width: 6rem;
    height: 0;
    border-block-start: 2px solid var(--ed-border-rule);
    border-block-end: 1px solid var(--ed-border-rule);
    padding-block-start: 3px;
}


/* --- Stat cards: 2x2 grid always (compact cards work even at 320px) --- */
.passport-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
    margin-block-start: var(--space-between);
    margin-block-end: var(--space-between);
}

@media (min-width: 576px) {
    .passport-stats {
        gap: 0.75rem;
    }
}


/* --- Individual stat card: stamp-like editorial infographic --- */
.passport-card {
    position: relative;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: var(--ed-bg-card);
    border: var(--border-thin) solid var(--ed-border);
    /* Stamp double-border: outer thin edge + inner thick via inset box-shadow */
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-border);
    transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.passport-card:hover {
    border-color: var(--ed-accent);
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-accent);
}


/* --- Large serif number: the hero of each card --- */
.passport-card-value {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ed-accent);
    margin-block-end: 0.5rem;
}

/* --- Small label: editorial section label --- */
.passport-card-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
}

/* RTL: neutralize Latin typographic treatments */
[dir="rtl"] .passport-card-label {
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] .passport-card-value {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}


/* --- Desktop: larger numbers for more visual impact --- */
@media (min-width: 576px) {
    .passport-card {
        padding: 2rem 1.5rem;
    }
    .passport-card-value {
        font-size: var(--text-4xl);
    }
}


/* --- Color accents per card: warm, celebratory but editorial --- */

/* Stations explored: default editorial red accent */
.passport-card-explored .passport-card-value {
    color: var(--ed-accent);
}

/* Listening time: warm amber/sepia -- time feels golden */
.passport-card-time .passport-card-value {
    color: #8B6914;
}
[data-theme="dark"] .passport-card-time .passport-card-value {
    color: #D4A84B;
}

/* Favorites: muted rose -- personal, warm */
.passport-card-favorites .passport-card-value {
    color: var(--ed-accent);
}

/* Streak: deep olive -- perseverance, earth tones */
.passport-card-streak .passport-card-value {
    color: #4A6741;
}
[data-theme="dark"] .passport-card-streak .passport-card-value {
    color: #7AAF6E;
}


/* --- Last played station: prominent card with play button --- */
.passport-last-played {
    margin-block-end: var(--space-between);
    border-block-start: var(--border-rule) solid var(--ed-border-rule);
    padding-block-start: var(--space-tight);
}

.passport-section-label {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: 0.75rem;
}

[dir="rtl"] .passport-section-label {
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

.passport-last-played-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ed-bg-card);
    border: var(--border-thin) solid var(--ed-border);
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-border);
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.passport-last-played-card:hover {
    border-color: var(--ed-accent);
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-accent);
}

.passport-last-played-name {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--ed-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

[dir="rtl"] .passport-last-played-name {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}


/* Play button: accent-filled circle with play triangle */
.passport-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: var(--ed-accent);
    color: var(--ed-accent-text);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.passport-play-btn:hover {
    background: var(--ed-accent-hover);
    transform: scale(1.05);
}

.passport-play-btn:active {
    transform: scale(0.97);
}

/* Optical nudge: play triangle is visually left-heavy */
.passport-play-btn svg {
    margin-inline-start: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .passport-play-btn { transition: none; }
    .passport-card { transition: none; }
    .passport-last-played-card { transition: none; }
}


/* --- Empty state: warm, inviting, encouraging --- */
.passport-empty {
    text-align: center;
    padding-block: var(--space-major);
}

.passport-empty-icon {
    display: inline-block;
    color: var(--ed-text-faint);
    margin-block-end: 1.25rem;
}

.passport-empty-icon svg {
    width: 4rem;
    height: 4rem;
}

.passport-empty-text {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-style: italic;
    color: var(--ed-text-muted);
    max-width: 24rem;
    margin-inline: auto;
    line-height: 1.6;
}

[dir="rtl"] .passport-empty-text {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}


/* --- Mobile tightening (< 576px) --- */
@media (max-width: 575px) {
    .passport-page h1 {
        font-size: var(--text-2xl);
    }

    .passport-card {
        padding: 1.125rem 1rem;
    }

    .passport-card-value {
        font-size: var(--text-2xl);
        margin-block-end: 0.375rem;
    }

    .passport-last-played-name {
        font-size: var(--text-lg);
    }

    .passport-play-btn {
        width: 2.75rem;
        height: 2.75rem;
    }
}


/* --- Dark mode: stamp border adjustments for visibility --- */
[data-theme="dark"] .passport-card {
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-border-strong);
}

[data-theme="dark"] .passport-card:hover {
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-accent);
}

[data-theme="dark"] .passport-last-played-card {
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-border-strong);
}

[data-theme="dark"] .passport-last-played-card:hover {
    box-shadow: inset 0 0 0 3px var(--ed-bg-card), inset 0 0 0 4px var(--ed-accent);
}


/* ============================================================
   SECTION NAV — horizontal section tabs (NYT-style)
   Sits between masthead and main content — the newspaper's spine.
   Thin hairline rules top and bottom, uppercase muted labels,
   accent underline on active section. Horizontal scroll on mobile.
   NOT sticky (player bar already occupies fixed space).
   ============================================================ */

.section-nav {
    border-block-start: var(--border-thin) solid var(--ed-border-strong);
    border-block-end: var(--border-thin) solid var(--ed-border-strong);
    background: var(--ed-bg);
}

.section-nav .container {
    padding-block: 0;
}

.section-nav-list {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Pull first item to align its text with content edge */
    margin-inline-start: -0.75rem;
}

.section-nav-list::-webkit-scrollbar { display: none; }

.section-nav-link {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.75rem;
    min-height: 2.75rem;               /* 44px tap target */
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;                   /* Muted weight — lighter than active */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ed-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-block-end: 2px solid transparent;  /* Reserve space — prevent layout shift */
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.section-nav-link:hover {
    color: var(--ed-text);
}

/* Keyboard focus */
.section-nav-link:focus-visible {
    outline: 2px solid var(--ed-accent);
    outline-offset: -2px;
}

/* Active section: accent underline, slightly bolder */
.section-nav-link[aria-current="page"] {
    color: var(--ed-text);
    font-weight: 600;
    border-block-end-color: var(--ed-accent);
}

/* RTL: no uppercase, no letter-spacing on Arabic text */
[dir="rtl"] .section-nav-link {
    text-transform: none;
    letter-spacing: 0;
}

/* Desktop: more generous horizontal padding between tabs */
@media (min-width: 768px) {
    .section-nav-link {
        padding-inline: 1rem;
    }

    .section-nav-list {
        margin-inline-start: -1rem;
    }
}


/* ============================================================
   BLOG INDEX — Editorial post listing
   Newspaper feature-section layout: stacked cards with
   prominent headlines, muted dates, and excerpt text.
   ============================================================ */

.blog-index {
    max-width: 42rem;
    margin-inline: auto;
}

.blog-index-header {
    padding-block-end: 1rem;
    margin-block-end: var(--space-between);
    border-block-end: 3px double var(--ed-border-rule);
}

.blog-index-header h1 {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ed-text);
    margin: 0;
}

@media (min-width: 768px) {
    .blog-index-header h1 {
        font-size: var(--text-4xl);
    }
}

/* --- Blog post list --- */
.blog-post-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* --- Blog card: newspaper article teaser --- */
.blog-card {
    padding-block: var(--space-between);
    border-block-end: var(--border-thin) solid var(--ed-border);
}

.blog-card:first-child {
    padding-block-start: 0;
}

.blog-card:last-child {
    border-block-end: none;
}

.blog-card-link {
    text-decoration: none;
    color: inherit;
}

.blog-card-link:hover .blog-card-title,
.blog-card-link:focus-visible .blog-card-title {
    color: var(--ed-accent);
}

.blog-card-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ed-text);
    margin: 0 0 0.5rem 0;
    transition: color var(--transition-normal);
}

@media (min-width: 576px) {
    .blog-card-title {
        font-size: var(--text-3xl);
    }
}

/* Meta line: date + author in small muted editorial style */
.blog-card-meta {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
}

.blog-card-date {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-card-meta > :not(:first-child)::before {
    content: "\00b7\00a0";
    color: var(--ed-text-faint);
    font-weight: 400;
}

.blog-card-author {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--ed-text-secondary);
}

/* Excerpt: body text, limit to 3 lines */
.blog-card-excerpt {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--ed-text-secondary);
    margin: 0 0 0.75rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Read more link: small, underline on hover */
.blog-card-readmore {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ed-accent);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-block-end: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

.blog-card-readmore:hover,
.blog-card-readmore:focus-visible {
    border-block-end-color: var(--ed-accent);
    color: var(--ed-accent-hover);
}


/* ============================================================
   BLOG ARTICLE — Long-form editorial typography
   NYT feature-article style: serif body text, generous
   line-height, proper measure, drop-cap, editorial meta.
   ============================================================ */

.blog-article {
    max-width: 42rem;
    margin-inline: auto;
}

/* --- Article header: headline + meta --- */
.blog-article-header {
    padding-block-end: 1.5rem;
    margin-block-end: var(--space-between);
    border-block-end: var(--border-thin) solid var(--ed-border);
}

.blog-article-title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ed-text);
    margin: 0 0 1rem 0;
}

@media (min-width: 576px) {
    .blog-article-title {
        font-size: var(--text-4xl);
    }
}

@media (min-width: 768px) {
    .blog-article-title {
        font-size: 2.625rem;
        line-height: 1.1;
    }
}

/* Meta: date + byline, small editorial treatment */
.blog-article-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: var(--text-sm);
    color: var(--ed-text-muted);
}

.blog-article-date {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.blog-article-meta > :not(:first-child)::before {
    content: "\00b7\00a0";
    color: var(--ed-text-faint);
    font-weight: 400;
}

.blog-article-byline {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ed-text-secondary);
    font-size: var(--text-sm);
}



/* --- Article body: long-form serif typography --- */
.blog-article-body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--ed-text-secondary);
    margin-block-end: var(--space-major);
}

.blog-article-body p {
    margin-block-end: 1.5rem;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.blog-article-body p:last-child {
    margin-block-end: 0;
}

/* Drop-cap on first paragraph — NYT signature */
.blog-article-body > p:first-child::first-letter {
    font-size: 4em;
    float: inline-start;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 0.75;
    padding-inline-end: 0.1em;
    padding-block-start: 0.06em;
    color: var(--ed-text);
}

/* Article h2: section headers within the article */
.blog-article-body h2 {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ed-text);
    margin-block-start: 2.5rem;
    margin-block-end: 1rem;
    padding-block-start: 1.5rem;
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.blog-article-body h2:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border-block-start: none;
}

@media (min-width: 576px) {
    .blog-article-body h2 {
        font-size: var(--text-2xl);
    }
}

/* Article h3 */
.blog-article-body h3 {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ed-text);
    margin-block-start: 2rem;
    margin-block-end: 0.75rem;
}

/* Article links */
.blog-article-body a {
    color: var(--ed-accent);
    text-decoration: underline;
    text-decoration-color: var(--ed-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

.blog-article-body a:hover {
    color: var(--ed-accent-hover);
}

/* Strong text: slightly darker for emphasis */
.blog-article-body strong {
    font-weight: 600;
    color: var(--ed-text);
}

/* Blockquote: editorial pull-quote style */
.blog-article-body blockquote {
    margin-block: 2rem;
    margin-inline: 0;
    padding-inline-start: 1.5rem;
    border-inline-start: 3px solid var(--ed-border-rule);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1875rem;
    line-height: 1.7;
    color: var(--ed-text);
}

/* Lists inside article */
.blog-article-body ul,
.blog-article-body ol {
    margin-block-end: 1.5rem;
    padding-inline-start: 1.75rem;
}

.blog-article-body li {
    margin-block-end: 0.5rem;
    line-height: 1.7;
}

/* Tablet: slightly larger body text */
@media (min-width: 768px) {
    .blog-article-body {
        font-size: 1.1875rem;
        line-height: 1.85;
    }
}

/* Desktop: optimal reading measure */
@media (min-width: 1024px) {
    .blog-article-body {
        font-size: 1.25rem;
        line-height: 1.8;
    }
}


/* --- Article footer: back link --- */
.blog-article-footer {
    padding-block-start: var(--space-between);
    margin-block-start: var(--space-major);
    border-block-start: var(--border-thin) solid var(--ed-border);
}

.blog-back-link {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ed-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.blog-back-link:hover,
.blog-back-link:focus-visible {
    color: var(--ed-accent);
}

.blog-back-link::before {
    content: "\2190\00a0";
}


/* ============================================================
   BLOG — ARABIC / RTL OVERRIDES
   Arabic blog typography: Noto Sans Arabic, no drop-cap,
   no letter-spacing, no uppercase, generous line-height.
   ============================================================ */

/* Blog index: RTL text overrides */
[dir="rtl"] .blog-index-header h1 {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
}

[dir="rtl"] .blog-card-title {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
}

[dir="rtl"] .blog-card-date {
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .blog-card-readmore {
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .blog-card-excerpt {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Blog article: RTL typography */
[dir="rtl"] .blog-article-title {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
}

[dir="rtl"] .blog-article-date {
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .blog-article-byline {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* Article body: Arabic serif equivalent (Noto Sans Arabic handles it) */
[dir="rtl"] .blog-article-body {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-size: 1.125rem;
    line-height: 1.9;
}

[dir="rtl"] .blog-article-body h2,
[dir="rtl"] .blog-article-body h3 {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    letter-spacing: 0;
}

[dir="rtl"] .blog-article-body blockquote {
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    font-style: normal;
}

/* Disable drop-cap for Arabic -- connected script does not work with drop-caps */
[dir="rtl"] .blog-article-body > p:first-child::first-letter {
    font-size: inherit;
    float: none;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
}

/* RTL back link: flip arrow direction (points right = "back" in RTL) */
[dir="rtl"] .blog-back-link::before {
    content: "\2192\00a0";
}

[dir="rtl"] .blog-back-link {
    text-transform: none;
    letter-spacing: 0;
}

@media (min-width: 768px) {
    [dir="rtl"] .blog-article-body {
        font-size: 1.1875rem;
        line-height: 1.9;
    }
}

@media (min-width: 1024px) {
    [dir="rtl"] .blog-article-body {
        font-size: 1.25rem;
        line-height: 1.85;
    }
}


/* ============================================================
   BLOG — DARK MODE REFINEMENTS
   ============================================================ */

[data-theme="dark"] .blog-card:hover {
    background: var(--ed-bg-hover);
}

[data-theme="dark"] .blog-article-body blockquote {
    border-inline-start-color: var(--ed-border-strong);
}


/* ============================================================
   BLOG — MOBILE REFINEMENTS (320px-575px)
   Tighter spacing, smaller type scale on narrow screens.
   ============================================================ */

@media (max-width: 575px) {
    .blog-index-header {
        margin-block-end: var(--space-tight);
    }

    .blog-card {
        padding-block: 1.25rem;
    }

    .blog-card-title {
        font-size: var(--text-xl);
    }

    .blog-card-excerpt {
        font-size: var(--text-base);
        -webkit-line-clamp: 2;
    }

    .blog-article-title {
        font-size: var(--text-2xl);
    }

    .blog-article-body {
        font-size: 1.0625rem;
        line-height: 1.75;
    }

    .blog-article-body h2 {
        font-size: var(--text-lg);
        margin-block-start: 2rem;
        padding-block-start: 1rem;
    }

    .blog-article-body blockquote {
        font-size: 1.0625rem;
        padding-inline-start: 1rem;
    }

    /* Slightly smaller drop-cap on mobile */
    .blog-article-body > p:first-child::first-letter {
        font-size: 3.25em;
    }
}


/* ============================================================
   BLOG — PRINT STYLES
   ============================================================ */

@media print {
    .blog-article-body {
        font-size: 11pt;
        line-height: 1.6;
    }

    .blog-article-footer,
    .blog-card-readmore,
    .ad-slot {
        display: none;
    }

    .blog-article-header {
        border-block-end: 1px solid #000;
    }
}


/* --- Print: hide interactive elements --- */
@media print {
    .passport-play-btn { display: none; }
    .passport-empty { display: none; }
}


/* ============================================================
   31. LIVE DASHBOARD — "On Air Right Now"
       Bloomberg/Reuters-inspired data dashboard adapted to the
       NYT editorial aesthetic.  Large serif total, country card
       grid with flags, activity ticker like a news wire.
       Auto-refreshes via HTMX every 30s without layout shift.
   ============================================================ */

/* --- Page container --- */
.live-page {
    max-width: 52rem;
}

.live-page h1,
.live-heading {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-block-end: 0.375rem;
    padding-block-end: 0;
    border-block-end: none;
}

@media (min-width: 576px) {
    .live-heading {
        font-size: var(--text-4xl);
    }
}


/* --- Total listener count — the hero stat ---
   Large editorial serif number, centered, with a pulsing dot
   when listeners are active.  This is the focal point of the
   dashboard — it should make you want to WATCH it. */
.live-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 1.5rem 1rem;
    margin-block-end: var(--space-between);
    border-block-start: var(--border-rule) solid var(--ed-border-rule);
    border-block-end: var(--border-thin) solid var(--ed-border);
    position: relative;
}

.live-total-number {
    display: block;
    font-family: var(--font-serif);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ed-text);
    letter-spacing: -0.02em;
}

@media (min-width: 576px) {
    .live-total-number {
        font-size: 4.5rem;
    }
}

@media (min-width: 768px) {
    .live-total-number {
        font-size: 5.5rem;
    }
}

.live-total-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-start: 0.5rem;
}

[dir="rtl"] .live-total-label {
    text-transform: none;
    letter-spacing: 0;
}

/* Pulse indicator — slow, hypnotic breathing dot next to the number.
   Only rendered when TotalLive > 0.  Soft green color from the
   editorial palette's --ed-live-dot variable. */
.live-pulse {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--ed-live-dot);
    border-radius: 50%;
    margin-block-start: 0.75rem;
    animation: live-breathe 2.5s ease-in-out infinite;
}

@keyframes live-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}


/* --- Country card grid ---
   Tile-based grid of all countries.  Active countries (with live
   listeners) get an accent border and a subtle warm background
   to feel "alive."  Flags are LARGE (2rem+) to be scannable. */
.live-countries {
    margin-block-end: var(--space-between);
}

.live-country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: var(--grid-gap);
}

@media (min-width: 576px) {
    .live-country-grid {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
        gap: 0.625rem;
    }
}

@media (min-width: 768px) {
    .live-country-grid {
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }
}

.live-country-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.875rem 0.5rem;
    border: var(--border-thin) solid var(--ed-border);
    background: var(--ed-bg-card);
    text-decoration: none;
    color: var(--ed-text);
    transition: background var(--transition-fast),
                border-color var(--transition-fast);
}

.live-country-card:hover {
    background: var(--ed-bg-hover);
    text-decoration: none;
    color: var(--ed-text);
}

/* Flag emoji — large, scannable.  2rem on mobile, scaling up. */
.live-country-flag {
    font-size: 2rem;
    line-height: 1;
}

@media (min-width: 576px) {
    .live-country-flag {
        font-size: 2.5rem;
    }
}

@media (min-width: 768px) {
    .live-country-flag {
        font-size: 3rem;
    }
}

.live-country-name {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    color: var(--ed-text-secondary);
    line-height: 1.3;
}

/* Live count badge — small number with a green dot */
.live-country-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ed-live-dot);
    margin-block-start: 0.125rem;
}

.live-dot {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--ed-live-dot);
    border-radius: 50%;
    animation: live-breathe 2.5s ease-in-out infinite;
}

/* Active country card — accent left border (or right in RTL) and
   warm background tint.  Clearly different from inactive cards. */
.live-country-active {
    border-inline-start: 3px solid var(--ed-accent);
    background: var(--ed-accent-subtle);
}

.live-country-active:hover {
    background: var(--ed-bg-hover);
}

/* Inactive cards get slightly muted text to emphasize active ones */
.live-country-card:not(.live-country-active) .live-country-name {
    color: var(--ed-text-muted);
}

.live-country-card:not(.live-country-active):hover .live-country-name {
    color: var(--ed-text-secondary);
}


/* --- Activity ticker — news wire style ---
   Chronological list of recent play events.  Small, anonymous,
   monospaced timestamps.  Feels like a Reuters/AP wire feed. */
.live-ticker {
    border-block-start: var(--border-rule) solid var(--ed-border-rule);
    padding-block-start: var(--space-tight);
    margin-block-end: var(--space-between);
}

.live-ticker-heading {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ed-text-muted);
    margin-block-end: var(--space-tight);
}

[dir="rtl"] .live-ticker-heading {
    text-transform: none;
    letter-spacing: 0;
}

.live-ticker-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.live-ticker-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-block: 0.375rem;
    border-block-end: var(--border-thin) solid var(--ed-border);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--ed-text-secondary);
    line-height: 1.4;
}

.live-ticker-item:last-child {
    border-block-end: none;
}

/* Green dot marker for each ticker entry */
.live-ticker-dot {
    flex-shrink: 0;
    display: inline-block;
    width: 0.3125rem;
    height: 0.3125rem;
    background: var(--ed-live-dot);
    border-radius: 50%;
    margin-block-start: 0.375rem;
    align-self: flex-start;
}

.live-ticker-text {
    flex: 1;
    min-width: 0;
}

/* Timestamp — pushed to the end, quiet */
.live-ticker-time {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--ed-text-faint);
    white-space: nowrap;
    margin-inline-start: auto;
}

/* Empty state */
.live-ticker-empty {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ed-text-muted);
    padding-block: 1.5rem;
    text-align: center;
}


/* --- LIVE DASHBOARD: DARK MODE ---
   Ensure all elements are visible with good contrast. */
[data-theme="dark"] .live-country-card {
    background: var(--ed-bg-card);
    border-color: var(--ed-border);
}

[data-theme="dark"] .live-country-active {
    background: var(--ed-accent-subtle);
    border-inline-start-color: var(--ed-accent);
}

[data-theme="dark"] .live-country-card:hover {
    background: var(--ed-bg-hover);
}

[data-theme="dark"] .live-ticker-item {
    border-block-end-color: var(--ed-border);
}


/* --- LIVE DASHBOARD: MOBILE (320px-575px) ---
   Tighter grid, smaller flags, but still usable tap targets. */
@media (max-width: 575px) {
    .live-heading {
        font-size: var(--text-2xl);
    }

    .live-total {
        padding-block: 1rem 0.75rem;
    }

    .live-total-number {
        font-size: 3rem;
    }

    .live-country-grid {
        grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
        gap: 0.375rem;
    }

    .live-country-card {
        padding: 0.625rem 0.375rem;
        /* Ensure minimum 44px tap target */
        min-height: 2.75rem;
    }

    .live-country-flag {
        font-size: 1.75rem;
    }

    .live-country-name {
        font-size: 0.6875rem;
    }

    .live-ticker-item {
        font-size: var(--text-xs);
        gap: 0.375rem;
    }
}


/* --- LIVE DASHBOARD: RTL / ARABIC ---
   Mirror the accent border, adjust font stack. */
[dir="rtl"] .live-country-name {
    font-family: 'Noto Sans Arabic', var(--font-sans);
}

[dir="rtl"] .live-ticker-text {
    font-family: 'Noto Sans Arabic', var(--font-sans);
}

[dir="rtl"] .live-ticker-heading {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .live-total-label {
    font-family: 'Noto Sans Arabic', var(--font-sans);
    text-transform: none;
    letter-spacing: 0;
}


/* --- LIVE DASHBOARD: REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    .live-pulse,
    .live-dot {
        animation: none;
    }
}


/* --- LIVE DASHBOARD: PRINT ---
   Print the dashboard as a clean data table.  Hide interactive
   elements, pulse animations, and the auto-refresh container. */
@media print {
    .live-pulse,
    .live-dot {
        display: none;
    }

    .live-total {
        border: none;
        padding-block: 0.5rem;
    }

    .live-total-number {
        font-size: 2rem;
        color: #000;
    }

    .live-total-label {
        color: #333;
    }

    .live-country-grid {
        grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
        gap: 0.25rem;
    }

    .live-country-card {
        border: 1px solid #ccc;
        background: #fff;
        padding: 0.375rem;
    }

    .live-country-active {
        border-inline-start: 2px solid #000;
        background: #f5f5f5;
    }

    .live-country-flag {
        font-size: 1.25rem;
    }

    .live-country-name {
        color: #000;
        font-size: 8pt;
    }

    .live-country-count {
        color: #333;
    }

    .live-ticker {
        border-block-start: 1px solid #000;
    }

    .live-ticker-heading {
        color: #000;
    }

    .live-ticker-item {
        border-block-end: 1px solid #ddd;
        color: #333;
        font-size: 9pt;
    }

    .live-ticker-dot {
        background: #000;
    }

    .live-ticker-time {
        color: #666;
    }
}