/* Newsreader covers Latin only (the wordmark and Latin words in headlines).
   Self-hosted because Google Fonts is unreachable from mainland China. CJK,
   Cyrillic and Persian fall through to each system's own serif in --font-serif. */
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/newsreader-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --primary-color: #1F1A17;
    --accent-color: #1E40AF;
    --text-color: #292524;
    --text-muted: #57534E;
    --bg-color: #FBF8F3;
    --card-bg: #fff;
    --border-color: #DDD6CC;
    --rule-strong: #1F1A17;
    --shadow: none;
    --radius: 4px;
    --blocked: #B91C1C;
    --accessible: #1E40AF;
    /* SimSun is left out on purpose: its synthetic bold is poor at headline
       sizes, so Windows falls back to YaHei (sans) instead. */
    --font-serif: 'Newsreader', Georgia, 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'Noto Serif SC', 'Microsoft YaHei', 'Noto Naskh Arabic', 'Times New Roman', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', Tahoma, sans-serif;
}

/* One colour per story-mix category, from all-blocked (red) to all-accessible (blue). */
[data-story-mix="only_blocked"] { --mix: #B91C1C; }
[data-story-mix="mostly_blocked"] { --mix: #C2410C; }
[data-story-mix="everyone"] { --mix: #7C3AED; }
[data-story-mix="mostly_accessible"] { --mix: #2563EB; }
[data-story-mix="only_accessible"] { --mix: #1E40AF; }

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

body {
    font-family: var(--font-sans);
    line-height: 1.55;
    color: var(--text-color);
    background-color: var(--bg-color);
}

:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Masthead ──────────────────────────────────────────────────────────── */

.site-header {
    color: var(--primary-color);
    padding: 12px 0 0;
    margin-bottom: 8px;
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 3px double var(--rule-strong);
}

.site-header--full .header-bar {
    display: block;
    padding-bottom: 0;
}

.masthead-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.masthead {
    text-align: center;
    padding: 28px 0 20px;
}

.masthead h1 {
    font-size: inherit;
    line-height: 1;
}

.wordmark {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--primary-color);
    text-decoration: none;
}

.masthead .wordmark {
    font-size: clamp(2.6rem, 7vw, 4.5rem);
}

.wordmark--compact {
    font-size: 1.75rem;
}

.masthead-tagline {
    margin-top: 12px;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: var(--text-muted);
}

.header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-inline-start: auto;
}

.header-suggest-btn {
    white-space: nowrap;
    padding: 5px 12px;
    font-size: 0.82rem;
}

.header-lang-select select {
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-color);
    background: var(--card-bg);
    cursor: pointer;
}

header nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
}

header nav a:hover {
    color: var(--accent-color);
}

@media (max-width: 600px) {
    .masthead { padding: 20px 0 14px; }
    .masthead-tagline { font-size: 0.95rem; }
}

/* ─── Home news feed ────────────────────────────────────────────────────── */

/* A newspaper grid: the first visible story spans the full width as the lead,
   the rest flow into columns separated by hairline rules. Each card draws its
   own leading rule and is pulled 1px over its neighbour; the feed clips the
   rule of whichever card starts a row, so the rules work for any column count
   and any set of hidden (filtered-out) cards. */
.news-feed {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 -20px;
    padding-bottom: 80px;
    overflow: clip;
}

.news-feed > :not(.story-cluster) {
    grid-column: 1 / -1;
    margin-inline: 20px;
}

.story-cluster {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 24px 20px 26px;
    border-bottom: 1px solid var(--border-color);
    border-inline-start: 1px solid var(--border-color);
    margin-inline-start: -1px;
    /* Skip layout and paint for cards below the fold; the `auto` keyword makes
       the browser remember each card's real height once measured, so the
       scrollbar stays honest. */
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
}

.story-cluster--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 32px;
    align-items: start;
    padding-top: 28px;
    padding-bottom: 32px;
    border-bottom-color: var(--rule-strong);
    contain-intrinsic-size: auto 640px;
}

.story-cluster--lead:not(:has(.story-image)) {
    grid-template-columns: minmax(0, 1fr);
}

.story-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #ECE6DC;
}

.story-cluster--lead .story-image {
    aspect-ratio: 16 / 10;
}

/* <picture> only exists to offer a WebP variant; it must not take part in
   layout, so sizing rules keep applying to the <img> as if it were a child. */
.story-image picture,
.story-mix-preview-thumb picture {
    display: contents;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.story-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.story-mix-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mix);
    flex-shrink: 0;
}

.story-mix-type-tag {
    font-weight: 700;
    color: var(--mix);
}

.story-time {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.story-title {
    font-family: var(--font-serif);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-color);
}

.story-cluster--lead .story-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

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

.story-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.wiki-context {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
}

.wiki-context:hover .wiki-title {
    text-decoration: underline;
}

.wiki-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    font: 700 0.65rem/1 var(--font-serif);
    color: var(--card-bg);
    background: var(--text-muted);
    border-radius: 2px;
}

.wiki-title {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 200px;
}

.wiki-sep {
    flex-shrink: 0;
}

.wiki-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Coverage bar: blocked share on the left, accessible on the right, always
   in that order regardless of page direction. */
.cluster-coverage {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
    font-size: 0.76rem;
    font-weight: 600;
}

.coverage-label {
    white-space: nowrap;
}

.coverage-label--blocked {
    color: var(--blocked);
}

.coverage-label--accessible {
    color: var(--accessible);
}

.cluster-mix-strip {
    flex: 1;
    display: flex;
    min-width: 48px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--border-color);
}

.cluster-mix-segment {
    min-width: 2px;
}

.cluster-mix-blocked {
    background: var(--blocked);
}

.cluster-mix-accessible {
    background: var(--accessible);
}

/* Source columns. In a grid card each side is a single pull-quote; the lead
   shows both sides next to each other with up to three headlines each. */
.cluster-source-columns {
    display: flex;
    flex-direction: column;
    direction: ltr;
    gap: 14px;
}

.story-cluster--lead .cluster-source-columns {
    flex-direction: row;
    gap: 20px;
    margin-top: 6px;
}

.cluster-source-column {
    --side: var(--blocked);
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cluster-source-column--accessible {
    --side: var(--accessible);
}

.story-cluster:not(.story-cluster--lead) .cluster-source-column {
    border-left: 3px solid var(--side);
    padding-left: 10px;
}

.group-header {
    display: flex;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--side);
}

.story-cluster--lead .group-header {
    padding-bottom: 8px;
    border-bottom: 2px solid var(--side);
}

.group-count {
    font-weight: 500;
}

.source-links-grid {
    display: flex;
    flex-direction: column;
}

.source-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
}

.story-cluster--lead .source-item {
    padding: 9px 0;
    border-bottom: 1px solid var(--border-color);
}

.story-cluster--lead .source-item:last-child {
    border-bottom: 0;
}

.source-item:hover .source-headline {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cluster-source-column--collapsed .source-item:nth-child(n + 2) {
    display: none;
}

.story-cluster--lead .cluster-source-column--collapsed .source-item:nth-child(n + 2) {
    display: flex;
}

.story-cluster--lead .cluster-source-column--collapsed .source-item:nth-child(n + 4) {
    display: none;
}

.source-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.source-favicon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
}

/* Discreet marker shown next to video (YouTube) sources so they can be told
   apart from text articles at a glance. */
.source-type-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    color: #c4302b;
    background: rgba(196, 48, 43, 0.12);
    flex-shrink: 0;
    vertical-align: middle;
}

.source-type-video svg {
    display: block;
    margin-left: 0.5px;
}

.source-item-headline-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.source-item-headline-row .source-headline {
    flex: 1;
    min-width: 0;
}

.source-item-headline-row .story-time {
    flex-shrink: 0;
    white-space: nowrap;
}

.source-headline {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cluster-show-all-sources {
    align-self: flex-start;
    margin-top: 4px;
    padding: 2px 0;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--side);
    background: none;
    border: 0;
    cursor: pointer;
}

.cluster-show-all-sources:hover {
    text-decoration: underline;
}

.story-cluster--lead .cluster-show-all-sources--few {
    display: none;
}

.cluster-source-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 0;
}

.cluster-source-empty p {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.cluster-source-empty .cluster-suggest-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: underline;
    cursor: pointer;
    text-align: start;
}

.cluster-source-empty .cluster-suggest-link:hover {
    color: var(--primary-color);
}

.cluster-report-clustering-wrap {
    margin-top: 12px;
}

.cluster-report-clustering {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.cluster-report-clustering:hover:not(:disabled) {
    color: var(--accent-color);
}

.cluster-report-clustering:disabled {
    cursor: default;
    text-decoration: none;
}

@media (max-width: 900px) {
    .news-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .story-cluster--lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .news-feed {
        grid-template-columns: minmax(0, 1fr);
    }
    .story-cluster--lead .cluster-source-columns {
        flex-direction: column;
        gap: 16px;
    }
    .story-cluster--lead .cluster-source-column--collapsed .source-item:nth-child(n + 2) {
        display: none;
    }
    .story-cluster--lead .cluster-show-all-sources--few {
        display: block;
    }
}

/* Full Article View */
.full-article {
    background: #fff;
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.article-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 16px 0;
    line-height: 1.2;
}

.article-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.article-content {
    font-size: 1.15rem;
    line-height: 1.7;
}

.article-content p {
    margin-bottom: 24px;
}

/* Clusters List */
.cluster-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--accent-color);
}

.source-tag {
    background: #f0f4f8;
    color: #444;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Evaluation / Sources Table */
.evaluation-table-container {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    overflow-x: auto;
}

.evaluation-table {
    width: 100%;
    border-collapse: collapse;
}

.evaluation-table th {
    padding: 16px;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--text-muted);
}

.evaluation-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
}

footer {
    text-align: center;
    padding: 0 0 48px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

footer .container {
    padding-top: 20px;
    border-top: 3px double var(--rule-strong);
}

/* Language Badges */
.language-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.language-badge.chinese {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.language-badge.english {
    background: #e3f2fd;
    color: #0d47a1;
    border: 1px solid #90caf9;
}

.language-badge.german {
    background: #f3e5f5;
    color: #4a148c;
    border: 1px solid #ce93d8;
}

.language-badge.french {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #a5d6a7;
}

.language-badge.unknown {
    background: #f5f5f5;
    color: #616161;
    border: 1px solid #e0e0e0;
}

/* Language Filter */
.language-filter {
    background: var(--card-bg);
    padding: 10px 20px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.language-filter label {
    font-weight: 600;
    margin-right: 8px;
    color: var(--text-color);
    font-size: 0.9rem;
}

.language-filter select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    min-width: 150px;
}

.language-filter select:hover {
    border-color: var(--accent-color);
}

.language-filter select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.language-stats {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.lang-stat {
    display: inline-block;
}

.lang-stat strong {
    color: var(--text-color);
}

.clusters-header {
    margin-bottom: 24px;
}

.clusters-header h2 {
    margin-bottom: 8px;
}

.stats-info {
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Articles Page */
.articles-page { padding-bottom: 60px; }
.articles-page h2 { margin-bottom: 16px; }

.articles-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    font-size: 0.9rem;
}
.articles-stats .stat { color: var(--text-muted); }
.articles-stats .stat strong { color: var(--text-color); }
.articles-stats .stat.valid strong { color: #2e7d32; }
.articles-stats .stat.warning strong { color: #f57c00; }
.articles-stats .stat.error strong { color: #c62828; }

.articles-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.articles-filters label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.articles-filters select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    cursor: pointer;
}

.articles-table-wrapper {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}

.articles-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.articles-table th {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--card-bg);
}
.articles-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.articles-table tbody tr:hover { background: #f8f9ff; }

.row-error { background: #fff5f5; }
.row-warning { background: #fffdf5; }

.col-source { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.78rem; }
.col-title { max-width: 300px; }
.col-title a { color: var(--text-color); text-decoration: none; font-weight: 500; }
.col-title a:hover { color: var(--accent-color); text-decoration: underline; }
.col-lang { white-space: nowrap; }
.col-clusters { text-align: center; }
.col-date { white-space: nowrap; font-size: 0.78rem; }
.col-image { text-align: center; }
.col-method { font-size: 0.75rem; }
.col-issues { font-size: 0.75rem; color: var(--text-muted); max-width: 200px; }
.col-validation { text-align: center; width: 50px; }

.thumb {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.badge-valid { background: #e8f5e9; color: #2e7d32; }
.badge-warning { background: #fff3e0; color: #f57c00; }
.badge-error { background: #ffebee; color: #c62828; }

.missing { color: #c62828; font-weight: 600; }
.not-scraped { color: #bdbdbd; }

.method-fetch { color: #2e7d32; }
.method-playwright { color: #1565c0; }

.issues-list { color: #e65100; }

.articles-count {
    margin-top: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.empty-row { text-align: center; padding: 40px; color: var(--text-muted); }

/* ─── Article Reader ──────────────────────────────────────────────────── */

.read-article {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 60px;
}

.article-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.article-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 12px 0;
    letter-spacing: -0.3px;
    color: var(--primary-color);
}

.article-meta {
    display: flex;
    gap: 15px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.article-meta .source-name {
    font-weight: 600;
    color: var(--accent-color);
}

.article-body {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--text-color);
}

.read-article .share-row {
    max-width: 720px;
    margin-inline: auto;
}

.article-body p {
    margin: 0 0 1.2em 0;
}

.article-body h1, .article-body h2, .article-body h3 {
    font-family: var(--font-serif);
    font-weight: 700;
    margin: 1.5em 0 0.5em;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--primary-color);
}

.article-body h1 { font-size: 1.75rem; }
.article-body h2 { font-size: 1.5rem; }
.article-body h3 { font-size: 1.25rem; }

.article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
    border-radius: 2px;
}

.article-body a {
    color: var(--accent-color);
    text-decoration: underline;
}

.article-body blockquote {
    border-inline-start: 3px solid var(--rule-strong);
    margin: 1.5em 0;
    padding: 0.25em 0;
    padding-inline-start: 1.25em;
    font-family: var(--font-serif);
    color: var(--text-muted);
}

.article-body ul, .article-body ol {
    padding-left: 1.5em;
    margin: 0 0 1.2em 0;
}

.article-body figure {
    margin: 20px 0;
}

.no-content {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    background: var(--card-bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.no-content-title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--text-color);
    margin-bottom: 16px;
    line-height: 1.4;
}

.no-content-image {
    margin-bottom: 16px;
}

.no-content-image img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    object-fit: cover;
}

.no-content-date {
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.no-content p {
    margin: 8px 0;
}

.no-content-link {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 24px;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.95rem;
}

.no-content-link:hover {
    background: #3F3833;
}

/* Article Navigation */
.article-nav {
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.article-nav .back-link,
.article-nav .original-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 6px 0;
}

.article-nav .back-link:hover {
    color: var(--accent-color);
}

.article-nav .original-link {
    color: var(--accent-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.article-nav .original-link .source-favicon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.read-article > .article-nav:last-child {
    margin: 32px 0 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 0;
}

.article-nav .original-link:hover {
    text-decoration: underline;
}

.original-link-short {
    display: none;
}

@media (max-width: 768px) {
    .original-link-full {
        display: none;
    }
    .original-link-short {
        display: inline;
    }
}

/* Related Articles */
.related-articles {
    margin-top: 40px;
    padding: 24px 0;
    border-top: 1px solid var(--rule-strong);
}

/* Cluster Bar (top of article page) */
.cluster-bar {
    margin-bottom: 28px;
    border-bottom: 1px solid var(--rule-strong);
}

.cluster-bar-top {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 0 24px;
    text-align: center;
}

.cluster-title {
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 12px 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.cluster-bar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.cluster-sources-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-color);
    overflow-wrap: anywhere;
}

.cluster-time {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Grouped source tabs (article page) */
.cluster-source-groups {
    display: flex;
    gap: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.cluster-source-groups::-webkit-scrollbar { height: 4px; }
.cluster-source-groups::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.cluster-src-group {
    display: flex;
    flex-direction: column;
    flex: 1 0 max-content;
}

.cluster-src-group + .cluster-src-group {
    border-left: 2px solid var(--border-color);
}

.cluster-src-group {
    --side: var(--blocked);
}

.cluster-src-accessible {
    --side: var(--accessible);
}

.cluster-src-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 7px 14px 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--side);
    border-top: 3px solid var(--side);
    border-bottom: 1px solid var(--border-color);
}

.cluster-src-tabs {
    display: flex;
    gap: 0;
    align-items: stretch;
    min-width: max-content;
}

.cluster-src-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    text-decoration: none;
    color: var(--text-color);
    border-right: 1px solid var(--border-color);
    transition: background 0.15s;
    flex: 1 0 52px;
    cursor: pointer;
    min-width: 52px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.cluster-src-tab:last-child { border-right: none; }

.cluster-src-tab:hover { background: var(--bg-color); }

.cluster-src-tab-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.cluster-src-tab-icon img {
    width: 24px;
    height: 24px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 4px;
    object-fit: contain;
    background: #fff;
}

/* Small play badge in the corner of a video source's avatar. */
.cluster-src-tab-video {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c4302b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1.5px #fff;
}

.cluster-src-tab-video svg {
    display: block;
    margin-left: 0.5px;
}

.cluster-src-tab-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #e8e8e8;
    color: #555;
}

.cluster-src-tab.active {
    cursor: default;
    background: var(--card-bg);
}

.cluster-src-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.cluster-src-tab.active {
    background: var(--bg-color);
}

.cluster-src-tab.active::after {
    background: var(--side);
}

.related-articles h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 16px 0;
}

.related-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color);
    transition: background 0.15s;
}

.related-item:hover {
    background: #f5f5f5;
}

.related-source {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-color);
    min-width: 120px;
}

.related-title {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ─── Tags ──────────────────────────────────────────────────────────────── */

.tag-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 0.78em;
    font-weight: 600;
    background: #e8eaf6;
    color: #3949ab;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

.tag-pill:hover {
    background: #c5cae9;
}

.tag-pill.active {
    background: #3949ab;
    color: #fff;
}

.tag-pill.small {
    font-size: 0.7em;
    padding: 1px 7px;
    cursor: default;
}

.index-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.home-top-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    padding: 18px 0 22px;
    border-bottom: 1px solid var(--border-color);
}

.story-mix-panel {
    width: 100%;
    max-width: 100%;
    flex: none;
}

.story-mix-intro {
    margin: 0 0 14px;
    max-width: 72ch;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Red→blue axis under the filter: the five buttons run from all-blocked to
   all-accessible coverage. */
.story-mix-axis {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.story-mix-axis-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blocked), #7C3AED 50%, var(--accessible));
}

@media (max-width: 640px) {
    .story-mix-axis { display: none; }
}

/* One row: buttons grow to fill toolbar width (first flush left, last flush right); text wraps inside each */
.story-mix-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* One column per filter: the button, plus a preview of the top story it shows */
.story-mix-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.story-mix-btn {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    border-radius: var(--radius);
    padding: 10px 8px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
    line-height: 1.35;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-mix-preview {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    transition: border-color 0.15s ease;
}

.story-mix-preview:hover {
    border-color: var(--primary-color);
}

.story-mix-preview-thumb {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #ECE6DC;
}

.story-mix-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-mix-preview-count {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.5;
}

.story-mix-preview-title {
    display: block;
    padding: 7px 8px 8px;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--primary-color);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Previews of filters that are currently off recede, so the visible feed and
   the highlighted previews always match. */
.story-mix-col:has(.story-mix-btn[aria-pressed="false"]) .story-mix-preview {
    opacity: 0.5;
}

.story-mix-col:has(.story-mix-btn[aria-pressed="false"]) .story-mix-preview:hover {
    opacity: 1;
}

/* Five columns share one row on desktop; at phone widths that leaves ~60px each,
   too narrow to read a thumbnail. Instead the row scrolls sideways at a fixed
   card width, with the next card half in view to show there is more. */
@media (max-width: 640px) {
    .story-mix-toolbar {
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .story-mix-toolbar::-webkit-scrollbar {
        display: none;
    }

    .story-mix-col {
        flex: 0 0 148px;
        scroll-snap-align: start;
    }
}

/* Labels wrap to different line counts (badly so in Russian), which with plain
   flex leaves each thumbnail at its own height. A subgrid sizes the button row
   and the card row across all five columns at once, so the images line up.
   Browsers without subgrid keep the flex layout above. */
@supports (grid-template-rows: subgrid) {
    .story-mix-toolbar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 0;
    }

    .story-mix-col {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        row-gap: 8px;
    }

    @media (max-width: 640px) {
        .story-mix-toolbar {
            grid-auto-columns: 148px;
            justify-content: start;
        }
    }
}

/* Feed pagination: the sentinel sits after the last card and pulls the next
   page in as it comes into view. */
.feed-sentinel {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feed-sentinel[hidden] {
    display: none;
}

.feed-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.feed-sentinel--loading .feed-spinner {
    opacity: 1;
    animation: feed-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .feed-sentinel--loading .feed-spinner { animation: none; }
}

.story-mix-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Active filters keep the paper background and gain an ink border plus a bar
   in the category's colour, so on/off is not signalled by colour alone. */
.story-mix-btn.story-mix-btn--active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: inset 0 -4px 0 var(--mix);
}

@media (prefers-reduced-motion: reduce) {
    .story-mix-btn,
    .story-mix-preview { transition: none; }
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid var(--primary-color);
    padding: 7px 12px;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
}

.btn-primary:hover {
    background: #3F3833;
}

.btn-secondary {
    background: var(--card-bg);
    color: var(--primary-color);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
}

.tag-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Segmented "all | <tag>" switch above the feed. */
.tag-modes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px;
}

.tag-mode {
    padding: 4px 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.tag-mode:hover {
    color: var(--primary-color);
}

.tag-mode.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tag-clear {
    font-size: 0.78em;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    margin-left: 4px;
}

.tag-clear:hover {
    color: var(--text-color);
}

.tags-display {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.cluster-tags {
    display: inline-flex;
    gap: 4px;
    margin-left: 4px;
}

/* ─── Source Suggestions ─────────────────────────────────────────────────── */

.suggest-source-page,
.source-suggestions-page {
    max-width: 900px;
}

body.suggest-modal-open,
body.cluster-report-modal-open {
    overflow: hidden;
}

.suggest-modal-root {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-sizing: border-box;
}

.suggest-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 22, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.suggest-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    max-height: min(90vh, 100% - 32px);
    overflow: auto;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    border-radius: 12px;
}

.suggest-modal-close {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggest-modal-close:hover {
    background: var(--border-color);
    color: var(--text-color);
}

.suggest-form-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
    padding-inline-end: 44px;
    margin-bottom: 0;
}

.suggest-modal-dialog .suggest-form-panel {
    border-radius: 12px;
    box-shadow: none;
}

.suggest-modal-dialog.cluster-report-modal-dialog {
    width: min(100%, 640px);
}

.cluster-report-modal-heading {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 32px 8px 0;
    line-height: 1.35;
    color: var(--text-color);
}

.cluster-report-modal-hint {
    margin: 0 32px 12px 0;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.cluster-report-pick-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(50vh, 360px);
    overflow-y: auto;
    margin: 8px 0 16px;
    padding: 4px 0;
}

.cluster-report-pick-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    text-align: start;
    padding: 8px 12px 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
}

.cluster-report-pick-row:hover {
    border-color: var(--accent-color);
}

.cluster-report-pick-row input {
    margin-top: 4px;
    flex-shrink: 0;
    margin-inline-end: 2px;
}

.cluster-report-pick-title {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-color);
}

.cluster-report-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.clustering-reports-table .clustering-reports-misplaced-cell {
    vertical-align: top;
    max-width: 420px;
}

.clustering-reports-misplaced-list {
    margin: 0;
    padding-left: 1.1em;
    font-size: 0.88rem;
    line-height: 1.45;
}

.clustering-reports-misplaced-list li {
    margin-bottom: 4px;
}

.suggest-form-panel label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.suggest-form-panel input[type="text"] {
    border: 1px solid #cfd4da;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.95rem;
    min-width: 300px;
    flex: 1;
}

.suggest-banner {
    border-radius: 8px;
    padding: 10px 12px;
    margin: 12px 0;
    font-size: 0.92rem;
}

.suggest-success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}

.suggest-error {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}

.suggest-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.suggest-form label {
    font-weight: 600;
}

.suggest-form input[type="text"] {
    border: 1px solid #cfd4da;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.95rem;
}

.suggest-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.source-suggestions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.suggestions-count {
    color: var(--text-muted);
    margin-bottom: 10px;
}

.source-suggestions-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.source-suggestions-table th,
.source-suggestions-table td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.source-suggestions-table th {
    background: #f8f9fa;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.suggestion-date {
    white-space: nowrap;
    color: var(--text-muted);
}

/* Share buttons: hidden until the script resolves the current URL */
.share-row {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 24px;
}

.share-row--ready {
    display: flex;
}

.share-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 2px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.share-btn:hover {
    color: #fff;
    border-color: transparent;
}

.share-btn--telegram:hover {
    background: #229ed9;
}

.share-btn--x:hover {
    background: #000;
}

.share-btn--whatsapp:hover {
    background: #25d366;
}

.share-btn--facebook:hover {
    background: #1877f2;
}

.share-btn--copy:hover {
    background: var(--accent-color);
}