/* style.css - v6.0 Baseline for UI/UX Refactor */

/* --- START: Base & App Shell --- */

/* START: Modern CSS Reset */
*, *::before, *::after {
    box-sizing: border-box;
}
/* END: Modern CSS Reset */

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
    /* CRITICAL: The document itself does NOT scroll. */
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    /* The safe area padding is still correct for this layout */
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}

#app-scroll-container {
    /* This is the ONLY element that grows and scrolls */
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    /* This is now redundant but harmless. The overflow:hidden on html/body is the real fix. */
    overscroll-behavior-y: contain;
}

/* CRITICAL: Prevent scrolling during initial page load */
#app-scroll-container.scroll-locked {
    overflow: hidden !important;
    /* Don't use position:fixed as it breaks flexbox layout */
    /* Just prevent scrolling with overflow:hidden */
}
/* --- END: Base & App Shell --- */


/* --- START: General & Layout --- */
:root {
    --page-bg: #ffffff; --text-color: #333; --header-bg: #ffffff;
    --border-color: #ddd; --link-color: #0056b3; --card-bg: #f9f9f9; --footer-bg: #f1f1f1;

    /* START: New Accent Color Variables */
    --highlight-left-bg: #e0e8ff;
    --highlight-left-border: #8ab4f8;
    --highlight-right-bg: #ffe0e0;
    --highlight-right-border: #f28b82;
    /* END: New Accent Color Variables */
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6; color: var(--text-color); background-color: var(--page-bg); margin: 0;
}
.container { max-width: 800px; margin: 20px auto; padding: 0 15px; }
/* --- END: General & Layout --- */


/* --- START: Site Header --- */
.site-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    /* flex-shrink: 0; can be added here for extra safety */
    flex-shrink: 0;
}
.header-content { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 10px 15px; 
    height: 60px; 
    padding: 10px calc(15px + env(safe-area-inset-right)) 10px calc(15px + env(safe-area-inset-left));
    gap: 15px;
}
.menu-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.menu-trigger:hover {
    opacity: 0.7;
}
.menu-trigger svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}
.site-title {
    flex: 0 0 auto;
}
.site-title a { text-decoration: none; color: #111; font-size: 1.5em; font-weight: bold; }
.beta-label { background-color: #0056b3; color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 0.7em; font-weight: bold; margin-left: 10px; vertical-align: middle; }
.header-actions {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
/* --- END: Site Header --- */


/* --- START: Header Actions (Desktop & Mobile) --- */
.header-actions { display: flex; align-items: center; gap: 15px; }
.search-form { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 20px; background-color: var(--page-bg); overflow: hidden; }
.search-input { border: none; background: none; outline: none; padding: 8px 0 8px 15px; font-size: 0.9em; color: var(--text-color); width: 150px; transition: width 0.3s ease; }
.search-input:focus { width: 200px; }
.search-button { background: none; border: none; padding: 8px 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.search-button svg { width: 18px; height: 18px; fill: var(--text-color); }
.mobile-search-trigger { display: none; background: none; border: none; cursor: pointer; padding: 0; }
.mobile-search-trigger svg { width: 24px; height: 24px; fill: var(--text-color); }
/* --- END: Header Actions (Desktop & Mobile) --- */


/* --- START: NEW Mobile Search Modal --- */
.mobile-search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    padding-top: 20vh;
    z-index: 2000; /* Revert to the original z-index */
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-search-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.search-modal-content {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 90%;
    max-width: 500px;
}

/* ... (all the other .search-form-modal etc. rules are unchanged) ... */
.search-form-modal { flex-grow: 1; display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: 25px; background-color: var(--page-bg); overflow: hidden; }
.search-input-modal { flex-grow: 1; border: none; background: none; outline: none; padding: 12px 20px; font-size: 1.1em; color: var(--text-color); }
.search-button-modal { background: none; border: none; padding: 12px 15px; cursor: pointer; }
.search-button-modal svg { width: 20px; height: 20px; fill: var(--text-color); }
.close-modal-button { background: none; border: none; cursor: pointer; padding: 5px; flex-shrink: 0; }
.close-modal-button svg { width: 28px; height: 28px; fill: #fff; }


/* --- END: NEW Mobile Search Modal --- */

/* --- START: Side Drawer Navigation --- */
.side-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 300px;
    background-color: var(--card-bg);
    z-index: 2000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.drawer-header {
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: opacity 0.2s ease;
}

.drawer-close:hover {
    opacity: 0.7;
}

.drawer-close svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.drawer-nav {
    flex: 1;
    padding: 20px 0;
}

.drawer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drawer-nav li {
    margin: 0;
    padding: 0;
}

.drawer-nav li.nav-separator {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.drawer-nav a {
    display: block;
    padding: 15px 20px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
}

.drawer-nav a:hover {
    background-color: var(--page-bg);
    border-left-color: var(--link-color);
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Menu open state */
body.menu-open .side-drawer {
    transform: translateX(0);
}

body.menu-open .drawer-backdrop {
    opacity: 1;
    visibility: visible;
}

body.menu-open {
    overflow: hidden;
}

/* Mobile styles */
@media (max-width: 768px) {
    .side-drawer {
        width: 85vw;
    }
    
    .drawer-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 15px 20px;
    }
}
/* --- END: Side Drawer Navigation --- */

/* --- START: Spectrum Explainer Modal --- */
.spectrum-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.spectrum-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.spectrum-modal-content {
    background-color: var(--page-bg);
    border-radius: 8px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

.spectrum-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.spectrum-modal-close:hover {
    opacity: 1;
}

.spectrum-modal-close svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.spectrum-modal-content h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.spectrum-intro {
    margin-bottom: 25px;
    color: #666;
    line-height: 1.6;
}

.spectrum-section {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: 4px;
    background-color: var(--card-bg);
}

.spectrum-section:last-of-type {
    margin-bottom: 20px;
}

.spectrum-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    font-weight: bold;
}

.spectrum-goal {
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--text-color);
}

.spectrum-goal strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.spectrum-goal em {
    font-style: italic;
    font-weight: 600;
}

.spectrum-lens {
    line-height: 1.6;
    color: var(--text-color);
}

.spectrum-lens strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.spectrum-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.spectrum-footer a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.spectrum-footer a:hover {
    color: var(--link-color);
    text-decoration: underline;
}

.spectrum-left {
    border-left-color: #0056b3;
}

.spectrum-center {
    border-left-color: #666;
}

.spectrum-right {
    border-left-color: #dc3545;
}

/* --- START: Spectrum Guide Page Styles --- */
.spectrum-page-header {
    margin-bottom: 40px;
    text-align: center;
}

.spectrum-page-header h1 {
    font-size: 3em;
    margin: 0;
    color: var(--text-color);
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* Shared column rhythm */
.spectrum-intro-section,
.spectrum-conclusion-section,
.spectrum-summary-section,
.spectrum-trap-section {
    max-width: 720px;
    margin: 0 auto 50px;
    line-height: 1.9;
}

.spectrum-intro-text,
.spectrum-conclusion-text {
    font-size: 1.2em;
    color: var(--text-color);
    margin: 0;
}

/* Core Definitions — Left/Right side-by-side, with semantic blue/red left accents.
   These cards are kept because the side-by-side comparison is the core content. */
.spectrum-definitions-section {
    max-width: 900px;
    margin: 0 auto 50px;
}

.spectrum-definitions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.spectrum-definition-block {
    padding: 25px;
    border-radius: 6px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
}

.spectrum-definition-block h2 {
    margin: 0 0 15px 0;
    font-size: 1.4em;
    font-weight: 500;
    color: var(--text-color);
}

.spectrum-definition-focus {
    font-size: 1em;
    margin: 0 0 20px 0;
    color: var(--text-color);
    line-height: 1.6;
    opacity: 0.85;
}

.spectrum-definition-block h3 {
    margin: 20px 0 12px 0;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-color);
    opacity: 0.7;
}

.spectrum-definition-block ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    line-height: 1.7;
    color: var(--text-color);
}

.spectrum-definition-block li {
    margin-bottom: 8px;
}

.spectrum-definition-block li:last-child {
    margin-bottom: 0;
}

.spectrum-definition-left {
    border-left-color: #0056b3;
}

.spectrum-definition-right {
    border-left-color: #dc3545;
}

/* One Line Summary — plain copy, no box */
.spectrum-summary-section {
    text-align: center;
}

.spectrum-summary-left,
.spectrum-summary-right {
    margin: 0 0 8px 0;
    font-size: 1.15em;
    line-height: 1.6;
    color: var(--text-color);
}

.spectrum-summary-right {
    margin-bottom: 0;
}

/* The Modern Trap — hairline-divided list, matching FAQ pattern */
.spectrum-trap-section h2 {
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.01em;
    margin: 0 0 20px 0;
    color: var(--text-color);
}

.spectrum-trap-intro {
    font-size: 1.1em;
    margin: 0 0 30px 0;
    color: var(--text-color);
    opacity: 0.85;
}

.spectrum-trap-points {
    display: flex;
    flex-direction: column;
}

.spectrum-trap-point {
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.spectrum-trap-point:last-child {
    border-bottom: 1px solid var(--border-color);
}

.spectrum-trap-point h3 {
    margin: 0 0 8px 0;
    font-size: 1.15em;
    font-weight: 500;
    color: var(--text-color);
}

.spectrum-trap-point p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.85;
}

.dark-mode .spectrum-definition-block,
:root:not(.light-mode) .spectrum-definition-block {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Mobile styles */
@media (max-width: 768px) {
    .spectrum-page-header h1 {
        font-size: 2.2em;
    }

    .spectrum-definitions-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .spectrum-definition-block {
        padding: 20px;
    }

    .spectrum-definition-block h2 {
        font-size: 1.25em;
    }

    .spectrum-trap-section h2 {
        font-size: 1.4em;
    }

    .spectrum-intro-section,
    .spectrum-conclusion-section,
    .spectrum-definitions-section,
    .spectrum-summary-section,
    .spectrum-trap-section {
        padding: 0 15px;
    }

    .spectrum-intro-text,
    .spectrum-conclusion-text {
        font-size: 1.1em;
    }

    .spectrum-summary-left,
    .spectrum-summary-right {
        font-size: 1.05em;
    }
}
/* --- END: Spectrum Guide Page Styles --- */

/* --- START: Resources Page Styles --- */
.resources-page-header {
    margin-bottom: 40px;
    text-align: center;
}

.resources-page-header h1 {
    font-size: 3em;
    margin: 0;
    color: var(--text-color);
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* Shared column rhythm, matching the About page */
.resources-hero-section,
.resources-tools-section {
    max-width: 720px;
    margin: 0 auto 50px;
}

.resources-hero-section h2,
.resources-tools-section h2 {
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.01em;
    margin: 0 0 20px 0;
    color: var(--text-color);
}

.resources-hero-section p {
    font-size: 1.2em;
    line-height: 1.9;
    color: var(--text-color);
    margin: 0;
}

.resources-tools-intro {
    font-size: 1.1em;
    margin: 0 0 30px 0;
    line-height: 1.8;
    color: var(--text-color);
    opacity: 0.85;
}

/* Tools rendered as a hairline-divided list, no card chrome */
.resources-tools-list {
    display: flex;
    flex-direction: column;
}

.resources-tool-item {
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.resources-tool-item:last-child {
    border-bottom: 1px solid var(--border-color);
}

.resources-tool-item h3 {
    margin: 0 0 8px 0;
    font-size: 1.15em;
    font-weight: 500;
}

.resources-tool-item h3 a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.15s ease;
}

.resources-tool-item h3 a:hover {
    text-decoration: underline;
}

.resources-tool-item p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.85;
}

/* Mobile styles */
@media (max-width: 768px) {
    .resources-page-header h1 {
        font-size: 2.2em;
    }

    .resources-hero-section,
    .resources-tools-section {
        padding: 0 15px;
    }

    .resources-hero-section p {
        font-size: 1.1em;
    }

    .resources-hero-section h2,
    .resources-tools-section h2 {
        font-size: 1.4em;
    }

    .resources-tool-item h3 {
        font-size: 1.05em;
    }
}
/* --- END: Resources Page Styles --- */

/* --- START: About Page Styles --- */
.about-page-header {
    margin-bottom: 40px;
    text-align: center;
}

.about-page-header h1 {
    font-size: 3em;
    margin: 0;
    color: var(--text-color);
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* Shared column rhythm — every section is the same width so the page reads as one column */
.about-intro-section,
.about-mission-section,
.about-philosophy-section,
.about-faq-section,
.about-cta-section {
    max-width: 720px;
    margin: 0 auto 50px;
}

.about-intro-section,
.about-philosophy-section {
    line-height: 1.9;
}

.about-intro-text {
    font-size: 1.2em;
    color: var(--text-color);
    margin: 0 0 25px 0;
}

.about-intro-text:last-child {
    margin-bottom: 0;
}

.about-mission-section {
    text-align: center;
}

.about-mission-text {
    font-size: 1.6em;
    line-height: 1.5;
    color: var(--text-color);
    margin: 0 0 18px 0;
    font-weight: 500;
}

.about-mission-text:last-child {
    margin-bottom: 0;
}

.about-philosophy-text {
    font-size: 1.2em;
    color: var(--text-color);
    margin: 0;
}

/* FAQ — custom disclosure styling to match the rest of the page */
.about-faq-section h2 {
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 0 0 30px 0;
    color: var(--text-color);
}

.about-faq-section details {
    border-top: 1px solid var(--border-color);
    padding: 4px 0;
}

.about-faq-section details:last-of-type {
    border-bottom: 1px solid var(--border-color);
}

.about-faq-section summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 36px 18px 0;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--text-color);
    position: relative;
    transition: color 0.15s ease;
}

.about-faq-section summary::-webkit-details-marker {
    display: none;
}

.about-faq-section summary:hover {
    color: var(--link-color);
}

/* Custom caret marker */
.about-faq-section summary::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
}

.about-faq-section details[open] summary::after {
    transform: translateY(-25%) rotate(-135deg);
}

.about-faq-section details p {
    margin: 0 0 18px 0;
    padding-right: 36px;
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.85;
}

/* CTA — promoted into a proper closing block with a hairline above */
.about-cta-section {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.about-cta-text {
    font-size: 1.4em;
    color: var(--text-color);
    margin: 0;
    font-weight: 500;
    font-style: italic;
    opacity: 0.85;
}

/* Mobile styles */
@media (max-width: 768px) {
    .about-page-header h1 {
        font-size: 2.2em;
    }

    .about-intro-section,
    .about-mission-section,
    .about-philosophy-section,
    .about-faq-section,
    .about-cta-section {
        padding: 0 15px;
    }

    .about-intro-text,
    .about-philosophy-text {
        font-size: 1.1em;
    }

    .about-mission-text {
        font-size: 1.3em;
    }

    .about-faq-section summary {
        font-size: 1em;
        padding: 16px 30px 16px 0;
    }

    .about-cta-text {
        font-size: 1.2em;
    }
}
/* --- END: About Page Styles --- */

/* --- START: Methodology Page Styles --- */
.methodology-page-header {
    margin-bottom: 40px;
    text-align: center;
}

.methodology-page-header h1 {
    font-size: 3em;
    margin: 0;
    color: var(--text-color);
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* Shared column rhythm */
.methodology-intro-section,
.methodology-pipeline-section,
.methodology-standard-section {
    max-width: 720px;
    margin: 0 auto 50px;
}

.methodology-intro-section {
    line-height: 1.9;
}

.methodology-intro-text {
    font-size: 1.2em;
    color: var(--text-color);
    margin: 0;
}

/* Pipeline — hairline-divided list, numbered circles retained as content marker */
.methodology-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.methodology-step {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.methodology-step:last-child {
    border-bottom: 1px solid var(--border-color);
}

.methodology-step-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 1px solid var(--link-color);
    color: var(--link-color);
    border-radius: 50%;
    font-size: 1em;
    font-weight: 600;
}

.methodology-step-content {
    flex: 1;
}

.methodology-step-content h3 {
    margin: 0 0 8px 0;
    font-size: 1.15em;
    font-weight: 500;
    color: var(--text-color);
}

.methodology-step-content p {
    margin: 0;
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.85;
}

/* "The BiasFeed Standard" — plain copy with hairline-divided principles, no box */
.methodology-standard-section h2 {
    font-size: 1.6em;
    font-weight: 300;
    letter-spacing: -0.01em;
    margin: 0 0 20px 0;
    color: var(--text-color);
}

.methodology-standard-intro {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-color);
    margin: 0 0 30px 0;
    opacity: 0.85;
}

.methodology-standard-principles {
    display: flex;
    flex-direction: column;
}

.methodology-standard-principle {
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
}

.methodology-standard-principle:last-child {
    border-bottom: 1px solid var(--border-color);
}

.methodology-standard-principle h3 {
    font-size: 1.15em;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: var(--text-color);
}

.methodology-standard-principle p {
    font-size: 1em;
    color: var(--text-color);
    margin: 0;
    line-height: 1.7;
    opacity: 0.85;
}

/* Mobile styles */
@media (max-width: 768px) {
    .methodology-page-header h1 {
        font-size: 2.2em;
    }

    .methodology-intro-section,
    .methodology-pipeline-section,
    .methodology-standard-section {
        padding: 0 15px;
    }

    .methodology-intro-text {
        font-size: 1.1em;
    }

    .methodology-step {
        gap: 15px;
    }

    .methodology-step-number {
        width: 30px;
        height: 30px;
        font-size: 0.9em;
    }

    .methodology-standard-section h2 {
        font-size: 1.4em;
    }
}
/* --- END: Methodology Page Styles --- */

.dark-mode .spectrum-section,
:root:not(.light-mode) .spectrum-section {
    background-color: rgba(255, 255, 255, 0.05);
}

.dark-mode .spectrum-intro,
:root:not(.light-mode) .spectrum-intro {
    color: #aaa;
}

@media (max-width: 768px) {
    .spectrum-modal-content {
        padding: 20px;
        max-height: 85vh;
    }
    
    .spectrum-modal-content h2 {
        font-size: 1.3em;
        padding-right: 30px;
    }
    
    .spectrum-section {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .spectrum-section h3 {
        font-size: 1.1em;
        margin-bottom: 12px;
    }
    
    .spectrum-goal,
    .spectrum-lens {
        font-size: 0.95em;
    }
    
    .spectrum-footer {
        margin-top: 25px;
        padding-top: 15px;
    }
    
    .spectrum-footer a {
        font-size: 0.95em;
    }
}
/* --- END: Spectrum Explainer Modal --- */


/* --- START: Responsive Header Logic --- */
@media (max-width: 768px) {
    .header-actions .search-form, .header-actions .theme-toggle { display: none; }
    .mobile-search-trigger { display: block; }
}
/* --- END: Responsive Header Logic --- */


/* --- START: Footer --- */
.site-footer {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--border-color);
    padding: 15px;
    flex-shrink: 0; /* CRITICAL: Prevents the footer from being compressed */
}
.footer-content {
    max-width: 800px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    font-size: 0.8em; 
    color: #555;
    gap: 15px;
}
.footer-nav { 
    text-align: center;
}
.footer-nav a { color: #555; text-decoration: none; margin: 0 8px; white-space: nowrap; }
.footer-nav a:hover { text-decoration: underline; }
.footer-copyright {
    margin: 0;
}
@media (min-width: 768px) {
    .site-footer { padding: 0 15px; }
    .footer-content { flex-direction: row; justify-content: space-between; height: 50px; }
}
/* --- END: Footer --- */

/* --- START: How It Works Section --- */
.how-it-works {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px 30px;
    margin-bottom: 30px;
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
    overflow: hidden;
}
/* State for when the section is hidden by JavaScript */
.how-it-works.is-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
    opacity: 0;
    transform: scaleY(0.9);
}
.how-it-works-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.how-it-works-header h2 {
    margin: 0;
    font-size: 1.8em;
}
.how-it-works-intro {
    margin-top: 0;
    color: #555;
}
.dark-mode .how-it-works-intro {
    color: #aaa;
}
.dismiss-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.dismiss-button:hover {
    opacity: 1;
}
.how-it-works .dismiss-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.steps-container {
    display: flex;
    gap: 25px;
    margin-top: 20px;
}
.step {
    flex: 1; /* Each step takes up equal space */
}
.step-icon {
    background-color: var(--link-color);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.dark-mode .step-icon {
    background-color: var(--link-color);
    color: var(--page-bg);
}
.how-it-works .step-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}
.step h3 {
    margin-bottom: 5px;
}
.step p {
    font-size: 0.9em;
    color: #555;
}
.dark-mode .step p {
    color: #aaa;
}

/* Responsive stacking for mobile */
@media (max-width: 768px) {
    .how-it-works-header h2 {
        font-size: 1.5em;
    }
    .steps-container {
        flex-direction: column;
    }
}
/* --- END: How It Works Section --- */

/* --- START: List Header --- */
.list-header {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}
.list-header h2 {
    margin-bottom: 5px;
    font-size: 1.8em;
}
.list-header p {
    color: #555;
    margin-top: 0;
    font-size: 1.1em;
}
.dark-mode .list-header p {
    color: #aaa;
}
/* --- END: List Header --- */


/* --- START: Article Page Tabs & Content --- */
.sticky-tabs-header {
    /* This is our new sticky element */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    
    /* Give it a background so content scrolls cleanly underneath */
    background-color: var(--page-bg);
    
    /* Desktop: Center the tabs */
    display: flex;
    justify-content: center;
    align-items: end;
    border-bottom: 2px solid var(--border-color);
}

.tab-buttons {
    display: flex; 
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.tab-buttons::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.tab-button { 
    padding: 10px 15px; 
    cursor: pointer; 
    background: #f1f1f1; 
    border: 1px solid var(--border-color); 
    border-bottom: none; 
    border-radius: 5px 5px 0 0; 
    margin-right: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-button.active { 
    background-color: var(--link-color); /* The dark blue from the fact cards */
    color: #fff; /* Explicitly white text for high contrast */
    border-color: var(--link-color);
    border-bottom: 1px solid var(--link-color);
    position: relative; 
    top: 1px;
    font-weight: bold;
}

/* Hidden tab for info button - matches background, no visual styling */
.tab-button-info {
    background: var(--page-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    margin-right: 0;
    padding: 10px 15px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s ease;
}

.tab-button-info:hover {
    color: var(--link-color);
    background: var(--page-bg) !important; /* Keep background on hover */
}

.tab-button-info svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.dark-mode .tab-button-info,
:root:not(.light-mode) .tab-button-info {
    color: #999;
}

.dark-mode .tab-button-info:hover,
:root:not(.light-mode) .tab-button-info:hover {
    color: var(--link-color);
}

/* Prevent the info tab from ever being active */
.tab-button-info.active {
    background: var(--page-bg) !important;
    color: #666 !important;
    border: none !important;
    top: 0 !important;
}

.dark-mode .tab-button-info.active,
:root:not(.light-mode) .tab-button-info.active {
    color: #999 !important;
}

/* Bias toggle container - positioned below tab bar, sticky */
.bias-toggle-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0; /* Will be set dynamically via JavaScript to match tab bar height */
    z-index: 99; /* Just below sticky-tabs-header (z-index: 100) */
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--page-bg);
}

/* Mobile: Single row with scrollable tabs */
@media (max-width: 768px) {
    .sticky-tabs-header {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        border-bottom: 2px solid var(--border-color);
    }
    
    .tab-buttons {
        grid-column: auto; /* Reset grid positioning for mobile */
        flex: 1;
        min-width: 0; /* Allow shrinking */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding-left: 0;
        padding-right: 0;
    }
    
    .bias-toggle-container {
        padding: 15px;
    }
}

.tab-panel { 
    display: none; 
    padding: 20px; 
    /* The panel itself no longer needs a border */
    border: none;
}
.tab-panel.active { 
    display: block; 
}
.article-content {
    white-space: pre-wrap; /* This respects line breaks and paragraphs */
}
.tab-content-area {
    /* This is the container for all tab panels. It gets the border. */
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 0 5px 5px; /* Round the bottom corners */
}
/* --- END: Article Page Tabs & Content --- */


/* --- START: NEW Highlight Bias Toggle --- */
.highlight-toggle {
    visibility: hidden; 
    display: flex; /* Use display:none to completely remove it from the layout when hidden */
    align-items: center;
    gap: 10px;
    background: none;
    border: 1px solid transparent;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9em;
    color: var(--text-color);
    transition: background-color 0.2s ease;
}

.highlight-toggle.is-visible {
    display: flex !important; /* This is the key: we restore the display property */
    opacity: 1 !important;
    visibility: visible !important;
}

.highlight-toggle:hover {
    background-color: var(--card-bg);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    background-color: #ccc;
    border-radius: 11px;
    /* CORRECTED SYNTAX: No semicolon after property name */
    transition: background-color 0.3s ease;
}

.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.highlight-toggle[aria-checked="true"] .toggle-switch {
    background-color: var(--link-color);
}
.highlight-toggle[aria-checked="true"] .toggle-knob {
    transform: translateX(18px);
}

/* Mobile Floating Action Button (FAB) styles */
@media (max-width: 768px) {
    /* This is the final version, using the user-proven bottom position. */
    
    .highlight-toggle.is-visible {
        /* 1. Use the positioning that YOU proved works to clear the footer. */
        position: fixed;
        bottom: 100px; /* This is the correct value to clear the footer. */
        right: 20px;
        
        /* 2. Use a z-index high enough to be on top of the footer. */
        z-index: 9999;
        
        /* 3. Apply the final styling. */
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        padding: 10px 15px;
        border-radius: 25px;
        width: auto;
        height: auto;
        
        /* 4. Use the sledgehammer to guarantee visibility. */
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* --- START: New Toggle Color Logic --- */

/* --- INACTIVE STATE (Default when on a bias tab) --- */
/* Light Mode, Inactive */
.highlight-toggle.is-left {
    background-color: var(--card-bg);
    border: 1px solid var(--highlight-left-border) !important; /* Be specific and forceful */
}
.highlight-toggle.is-right {
    background-color: var(--card-bg);
    border: 1px solid var(--highlight-right-border) !important; /* Be specific and forceful */
}
/* Dark Mode, Inactive */
.dark-mode .highlight-toggle.is-left,
.dark-mode-preload .highlight-toggle.is-left {
    background-color: var(--card-bg);
    border-color: var(--highlight-left-border);
    color: var(--text-color); /* Reset text color to default */
}
.dark-mode .highlight-toggle.is-right,
.dark-mode-preload .highlight-toggle.is-right {
    background-color: var(--card-bg);
    border-color: var(--highlight-right-border);
    color: var(--text-color); /* Reset text color to default */
}


/* --- ACTIVE STATE (When aria-checked="true") --- */
/* Light Mode, Active */
.highlight-toggle.is-left[aria-checked="true"] {
    background-color: var(--highlight-left-bg);
    border-color: var(--highlight-left-border);
}
.highlight-toggle.is-right[aria-checked="true"] {
    background-color: var(--highlight-right-bg);
    border-color: var(--highlight-right-border);
}
/* Dark Mode, Active */
.dark-mode .highlight-toggle.is-left[aria-checked="true"],
.dark-mode-preload .highlight-toggle.is-left[aria-checked="true"] {
    background-color: var(--highlight-left-border); /* Use the bolder border color for bg */
    color: #121212; /* Dark text for contrast */
    border-color: var(--highlight-left-border);
}
.dark-mode .highlight-toggle.is-right[aria-checked="true"],
.dark-mode-preload .highlight-toggle.is-right[aria-checked="true"] {
    background-color: var(--highlight-right-border); /* Use the bolder border color for bg */
    color: #121212; /* Dark text for contrast */
    border-color: var(--highlight-right-border);
}
/* In DARK MODE, when the toggle is ON, change the switch's background color. */
.dark-mode .highlight-toggle[aria-checked="true"] .toggle-switch,
.dark-mode-preload .highlight-toggle[aria-checked="true"] .toggle-switch {
    background-color: var(--text-color); /* Use the light grey text color for contrast */
}
/* NEW RULE: In DARK MODE, make the knob dark. */
.dark-mode .toggle-knob,
.dark-mode-preload .toggle-knob {
    background-color: #121212; /* Use the main dark background color */
}
/* --- START: Compare Tab (The Fusion Style) --- */

    /* Inactive State: Purple Border */
    .highlight-toggle.is-compare {
        background-color: var(--card-bg);
        border: 1px solid #9d6dbf !important; /* Medium purple */
    }
    
    /* Dark Mode Inactive */
    .dark-mode .highlight-toggle.is-compare,
    .dark-mode-preload .highlight-toggle.is-compare {
        background-color: var(--card-bg);
        border: 1px solid #a890f0 !important; /* Lighter purple */
        color: var(--text-color);
    }

    /* Active State: Blue-to-Red Gradient */
    .highlight-toggle.is-compare[aria-checked="true"] {
        /* Smooth gradient from Left (Blue) to Right (Red) */
        background-image: linear-gradient(90deg, var(--highlight-left-border), var(--highlight-right-border));
        border: 1px solid transparent !important;
        color: white; /* White text stands out best on the gradient */
    }

    /* Dark Mode Active */
    .dark-mode .highlight-toggle.is-compare[aria-checked="true"],
    .dark-mode-preload .highlight-toggle.is-compare[aria-checked="true"] {
        background-image: linear-gradient(90deg, var(--highlight-left-border), var(--highlight-right-border));
        border: 1px solid transparent !important;
        color: white; 
    }
    /* --END: Compare Tab (The Fusion Style) --- */
/* --- END: New Toggle Color Logic --- */
/* --- START: Toggle Button Sizing Fix --- */
.toggle-label {
    /* Give the text container a minimum width to prevent the button from resizing. */
    /* This value is chosen to comfortably fit the longer "Show Bias" text. */
    min-width: 75px; 
    
    /* Right-align the text so that "Hide Bias" sits cleanly next to the switch. */
    text-align: right;
    
    /* Add a small transition for the text change, if the browser supports it */
    transition: width 0.2s ease;
}
/* --- END: Toggle Button Sizing Fix --- */


/* --- END: NEW Highlight Bias Toggle --- */


/* --- START: Other Component Styles --- */
.source-link { font-size: 0.9em; color: #555; margin-bottom: 20px; } .source-link a { color: var(--link-color); }
.highlight-left, .highlight-right { background-color: transparent; transition: background-color 0.3s ease; }
.highlights-on .highlight-left { background-color: #e0e8ff; } .highlights-on .highlight-right { background-color: #ffe0e0; }
.fact-list-container { padding-top: 10px; }
.fact-card { background-color: var(--card-bg); border-left: 4px solid var(--link-color); padding: 15px; margin-bottom: 12px; border-radius: 4px; }
.article-list { list-style-type: none; padding: 0; }
.article-item { margin-bottom: 20px; border: 1px solid var(--border-color); padding: 15px; border-radius: 5px; }
.article-item a { display: flex; align-items: center; text-decoration: none; color: var(--link-color); font-size: 1.2em; }
.article-item a:hover { text-decoration: underline; }
.article-item .date { font-size: 0.9em; color: #666; margin-top: 5px; }
.content-type-icon { margin-right: 10px; flex-shrink: 0; line-height: 0; }
.content-type-icon svg { width: 1.2em; height: 1.2em; fill: currentColor; }
.fact-source-link { margin-top: 25px; padding-top: 15px; border-top: 1px solid var(--border-color); font-size: 0.9em; }
.fact-source-link strong { color: var(--text-color); }
/* --- Compact Pagination Styles --- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 40px;
    padding-bottom: 20px;
}

.pagination a {
    color: var(--link-color);
    text-decoration: none;
    
    /* Fixed dimensions for uniform look */
    min-width: 36px;
    height: 36px;
    
    /* Center text */
    display: flex;
    align-items: center;
    justify-content: center;
    
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: bold;
    font-size: 1.1em; /* Make arrows readable */
}

.pagination a:hover {
    background-color: #f1f1f1;
    border-color: #bbb;
}

.pagination a.active {
    background-color: var(--link-color);
    color: white;
    border-color: var(--link-color);
    cursor: default;
}

/* Dark Mode Support */
.dark-mode .pagination a {
    border-color: #444;
    color: var(--text-color);
}
.dark-mode .pagination a:hover {
    background-color: #333;
}
.dark-mode .pagination a.active {
    background-color: var(--link-color);
    color: #121212;
    border-color: var(--link-color);
}

/* Mobile optimization: Shrink buttons slightly */
@media (max-width: 600px) {
    .pagination {
        gap: 4px;
    }
    .pagination a {
        padding: 6px 10px; /* Reduced padding for small screens */
        font-size: 0.9em;
    }
}
.tag-result-count { color: #666; margin-top: -10px; }
.tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag-pill { display: inline-block; padding: 4px 12px; border: 1px solid var(--border-color); border-radius: 16px; font-size: 0.8em; font-weight: 500; text-decoration: none; color: var(--text-color); transition: background-color 0.2s ease; }
.tag-pill:hover { background-color: var(--card-bg); }
.share-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 20px; padding: 20px 0; border-top: 1px solid var(--border-color); }
.share-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-color); border-radius: 50%; text-decoration: none; color: var(--text-color); background-color: transparent; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; position: relative; }
.share-button:hover { background-color: var(--card-bg); transform: translateY(-2px); }
.share-button svg { width: 20px; height: 20px; fill: currentColor; }
#copied-icon { display: none; }
.share-button.copied #copy-icon { display: none; }
.share-button.copied #copied-icon { display: block; fill: #28a745; }
.homepage-banner-container { margin-top: 20px; margin-bottom: 30px; }
.homepage-banner-image { width: 100%; aspect-ratio: 1200 / 630; border-radius: 8px; border: 1px solid var(--border-color); background-image: url('/social-preview.png'); background-size: cover; background-position: center; transition: border-color 0.3s ease; }
.banner-caption { text-align: center; font-size: 0.9em; color: #666; margin-top: 15px; }
.contact-email-link { color: var(--link-color); text-decoration: none; }
.contact-email-link:hover { text-decoration: underline; }
.video-embed-container { position: relative; overflow: hidden; width: 100%; max-width: 560px; padding-top: 56.25%; margin: 25px auto; border-radius: 8px; border: 1px solid var(--border-color); }
.video-embed-container iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }
/* --- Methodology Note Styles --- */
.methodology-note {
    background-color: #f8f9fa; /* Very light grey */
    border: 1px solid var(--border-color);
    border-left: 4px solid #6c757d; /* Grey accent line to denote "meta data" */
    padding: 15px;
    margin-top: 30px;
    border-radius: 4px;
    font-size: 0.9em; /* Slightly smaller text */
    color: #555;
}

.methodology-note h4 {
    margin: 0 0 8px 0;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #333;
}

.methodology-note p {
    margin: 0;
    line-height: 1.5;
}

/* Dark Mode adjustments */
.dark-mode .methodology-note,
.dark-mode-preload .methodology-note {
    background-color: #1e1e1e; /* Match card bg */
    color: #aaa;
    border-left-color: #555;
}

.dark-mode .methodology-note h4,
.dark-mode-preload .methodology-note h4 {
    color: #e0e0e0;
}

/* Article-page AI-content disclaimer — lighter grey than the Facts-tab methodology note */
.article-disclaimer {
    border-left: none;
    font-size: 0.8em;
}
.article-disclaimer p {
    font-style: italic;
}
.article-disclaimer,
.article-disclaimer p,
.article-disclaimer h4 {
    color: #777;
}
.article-disclaimer a {
    color: #777;
    text-decoration: underline;
}
.dark-mode .article-disclaimer,
.dark-mode-preload .article-disclaimer,
.dark-mode .article-disclaimer p,
.dark-mode-preload .article-disclaimer p,
.dark-mode .article-disclaimer h4,
.dark-mode-preload .article-disclaimer h4 {
    color: #888;
}
.dark-mode .article-disclaimer a,
.dark-mode-preload .article-disclaimer a {
    color: #888;
}
/* --- START: Hero Image Styles --- */
.hero-image-container {
    position: relative;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);

    /* THE FIX: Center the image and provide a background */
    background-color: #000000; /* Black background looks best for photos */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;
}

.hero-image {
    /* THE FIX: Allow natural width, but cap the height */
    width: auto; 
    max-width: 100%;   /* Ensure it doesn't overflow width */
    height: auto;
    max-height: 500px; /* Cap the height so it fits on one screen */
    display: block;
    
    /* Ensure the image is never distorted */
    object-fit: contain; 
}

/* Update the credit to stay legible on the black/image background */
.image-credit {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    font-size: 0.75em;
    border-top-left-radius: 6px;
    z-index: 2; /* Ensure it sits on top of the image */
}

.image-credit a {
    color: #fff;
    text-decoration: underline;
}

.image-credit a:hover {
    text-decoration: none;
}
/* --- END: Hero Image Styles --- */
/* --- END: Other Component Styles --- */


/* --- START: Dark Mode --- */

/* 0. Preload Classes (Highest Priority - Applied before CSS loads to prevent flash) */
/* These classes are added by inline script in <head> before CSS loads */
.dark-mode-preload {
    --page-bg: #121212; --text-color: #e0e0e0; --header-bg: #1e1e1e;
    --border-color: #333; --link-color: #8ab4f8; --card-bg: #1e1e1e; --footer-bg: #1e1e1e;
}

.light-mode-preload {
    --page-bg: #ffffff; --text-color: #333; --header-bg: #ffffff;
    --border-color: #ddd; --link-color: #0056b3; --card-bg: #f9f9f9; --footer-bg: #f1f1f1;
}

/* 1. OS-level Preference (Lowest Priority) */
/* This applies dark mode variables by default ONLY if no manual override class is present. */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode):not(.light-mode-preload) {
    --page-bg: #121212; --text-color: #e0e0e0; --header-bg: #1e1e1e;
    --border-color: #333; --link-color: #8ab4f8; --card-bg: #1e1e1e; --footer-bg: #1e1e1e;
  }
}

/* 2. Manual .dark-mode Class (Medium Priority) */
/* This class is added by JS when the user manually chooses "Dark". */
.dark-mode {
    --page-bg: #121212; --text-color: #e0e0e0; --header-bg: #1e1e1e;
    --border-color: #333; --link-color: #8ab4f8; --card-bg: #1e1e1e; --footer-bg: #1e1e1e;
}

/* 3. Manual .light-mode Class (Highest Priority Override) */
/* This class is added by JS when the user manually chooses "Light". */
.light-mode {
    --page-bg: #ffffff; --text-color: #333; --header-bg: #ffffff;
    --border-color: #ddd; --link-color: #0056b3; --card-bg: #f9f9f9; --footer-bg: #f1f1f1;
}


/* --- General Element Styling for Dark Mode --- */

/* This transition applies to all theme changes */
body, .site-header, .site-footer, .fact-card, .article-item, .tab-button, .site-title a { 
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; 
}

/* These specific element styles apply when dark mode is active (either by OS or manually) */
.dark-mode .site-title a,
:root:not(.light-mode) .site-title a { 
    color: var(--text-color); 
}

.dark-mode .tab-button,
:root:not(.light-mode) .tab-button { 
    background-color: #2a2a2a; 
    color: var(--text-color); 
    border-color: var(--border-color); 
}

.dark-mode .tab-button.active,
:root:not(.light-mode) .tab-button.active { 
    background-color: var(--link-color); 
    color: #121212; 
    border-color: var(--link-color); 
}

.dark-mode .highlights-on .highlight-left,
:root:not(.light-mode) .highlights-on .highlight-left { 
    background-color: #8ab4f8; 
    color: #121212; 
}

.dark-mode .highlights-on .highlight-right,
:root:not(.light-mode) .highlights-on .highlight-right { 
    background-color: #f28b82; 
    color: #121212; 
}

.dark-mode .homepage-banner-image,
:root:not(.light-mode) .homepage-banner-image { 
    background-image: url('/social-preview_dark.png'); 
}

.dark-mode .share-button.copied #copied-icon { 
    fill: #34c759; 
}

/* START: Dark Mode Toggle Switch Contrast Fix */
/* In DARK MODE, when the toggle is ON, change the switch's background color. */
.dark-mode .highlight-toggle[aria-checked="true"] .toggle-switch,
:root:not(.light-mode) .highlight-toggle[aria-checked="true"] .toggle-switch {
    background-color: var(--text-color); /* Use the light grey text color for contrast */
}
/* In DARK MODE, make the knob dark. */
.dark-mode .toggle-knob,
:root:not(.light-mode) .toggle-knob {
    background-color: #121212; /* Use the main dark background color */
}
/* END: Dark Mode Toggle Switch Contrast Fix */

/* --- END: Dark Mode --- */

/* --- START: Options Page Styles --- */
.options-group {
    margin-top: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.options-group h2 {
    margin-bottom: 5px;
}
.option-description {
    color: #555;
    font-size: 0.9em;
    margin-top: 0;
}
.dark-mode .option-description {
    color: #aaa;
}
.option-controls {
    display: flex;
    gap: 10px;
}
.option-button {
    font-family: inherit;
    font-size: 0.9em;
    font-weight: bold;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.option-button:hover {
    border-color: var(--link-color);
}
.option-button.active {
    background-color: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}
.dark-mode .option-button.active {
    color: var(--page-bg);
}
.option-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--border-color);
    background-color: var(--card-bg);
    color: #999;
}
/* Sub-options for Bias Defaults */
.sub-option {
    margin-top: 15px;
    margin-bottom: 15px;
}
.sub-option h4 {
    margin: 0 0 8px 0;
    font-size: 1em;
    color: var(--text-color);
}
/* --- END: Options Page Styles --- */



/* --- START: Comparison Mode Styles --- */

/* --- Base (Desktop) Styles --- */
.compare-container {
    display: flex;
    gap: 30px;
}
.compare-column {
    flex: 1;
    min-width: 0;
}
.compare-column h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.article-content-wrapper {
    height: 70vh;
    overflow-y: auto;
    padding-right: 15px;
}
.comparison-slider {
    display: none; /* The slider is never displayed in this version */
}

/* --- END: Comparison Mode Styles --- */

/* --- START: Mobile Slider Override Styles --- */
@media (max-width: 768px) {
    #compare.tab-panel {
        padding: 0;
    }

    /* THE KEY CHANGE: The container is now a Grid */
    .compare-container {
        display: grid; /* Use Grid for layering */
        position: relative;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Tell both columns to occupy the exact same grid cell */
    .compare-column {
        grid-area: 1 / 1; /* Both columns are in row 1, column 1 */
        padding: 20px;
    }

    /* The right column is still on the bottom layer */
    .compare-column#compare-right {
        z-index: 1;
    }

    /* The left column is still on the top layer with a background and clip-path */
    .compare-column#compare-left {
        z-index: 2;
        background-color: var(--page-bg);
        clip-path: inset(0 50% 0 0);
    }

    .article-content-wrapper {
        height: auto;
        overflow-y: visible;
        padding-right: 0;
    }

    /* --- Slider Handle Styles (Mobile Only) --- */
    .comparison-slider {
        display: block;
        grid-area: 1 / 1; /* The slider also lives in the same grid cell */
        position: absolute;
        top: 0;
        bottom: 0;
        width: 44px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        touch-action: none; /* Prevent scrolling when dragging */
        cursor: ew-resize;
        --handle-top: 50vh; /* CSS variable for handle vertical position */
    }
    /* The visible line - spans full height */
    .comparison-slider::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        background-color: var(--link-color);
        transform: translateX(-50%);
    }
    /* The visible handle - sticky to viewport, position controlled by CSS variable */
    .comparison-slider::after {
        content: '';
        position: sticky;
        top: var(--handle-top, 50vh);
        left: 50%;
        width: 44px;
        height: 44px;
        background: white;
        border: 3px solid var(--link-color);
        border-radius: 50%;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        transform: translate(-50%, -50%);
        display: block;
    }
    .dark-mode .comparison-slider::after {
        background-color: #2a2a2a;
        border-color: #fff;
    }
}


/* --- END: Mobile Slider Override Styles --- */

/* --- START: Tag Index Styles --- */
.tags-index-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* More breathing room than the article header */
    margin-bottom: 40px;
}

.tag-pill-large {
    font-size: 1em; /* Slightly larger text */
    padding: 8px 16px; /* Larger touch target */
}

.tag-count {
    font-size: 0.85em;
    opacity: 0.7;
    margin-left: 5px;
    font-weight: normal;
}

/* Dark mode adjustment for the count */
.dark-mode .tag-count {
    opacity: 0.6;
}
/* --- END: Tag Index Styles --- */

/* --- Updated Article List Image Styles --- */

/* This container replaces the old .content-type-icon span */
.article-list-image {
    flex-shrink: 0;
    width: 80px;  /* Fixed width */
    height: 50px; /* Fixed height (approx 16:9 ratio) */
    margin-right: 15px;
    border-radius: 4px;
    overflow: hidden;
    
    /* Center content (for fallback icons) */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; /* Light grey background for icons/loading */
    border: 1px solid var(--border-color);
}

/* The image itself */
.article-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; /* THE MAGIC: Crops the image to fill the box */
    display: block;
}

/* Fallback Icons (SVG) inside the box */
.article-list-image svg {
    width: 24px;
    height: 24px;
    fill: #888; /* Softer grey for icons */
}

/* Dark Mode */
.dark-mode .article-list-image,
.dark-mode-preload .article-list-image {
    background-color: #2a2a2a;
    border-color: #444;
}
/* --- START: Custom Pull-to-Refresh Styles --- */
.ptr-element {
    /* THE FIX: Use relative positioning so it pushes content down */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-top: -60px; /* Hidden by default (pulled up) */
    
    background-color: var(--page-bg); /* Blend with page */
    color: var(--text-color);
    font-weight: bold;
    font-size: 0.9em;
    
    position: relative; 
    z-index: 1; /* Ensure it renders */
    overflow: hidden;
}

.ptr-element .ptr-icon {
    transition: transform 0.2s;
    margin-right: 10px;
    font-size: 1.2em;
}

.ptr-element.ptr-loading .ptr-icon {
    animation: spin 1s infinite linear;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* --- END: Custom Pull-to-Refresh Styles --- */
/* --- START: Sticky Tab Stability Fix --- */
/* 
   This forces the content area to be at least as tall as the viewport (100vh).
   This ensures that even short articles (like Centrist) have enough "scroll track"
   to allow the tabs to pin securely to the top without jumping.
*/
.tab-content-area {
    min-height: 100vh; 
    padding-bottom: 100px; /* Extra breathing room before the footer */
}
/* --- END: Sticky Tab Stability Fix --- */
/* --- END: Sticky Tab Stability Fix --- */

/* --- START: Article Sources Page Styles --- */
.sources-back-link {
    margin-bottom: 20px;
    padding-top: 20px;
}

.back-to-article {
    color: var(--link-color);
    text-decoration: none;
    font-size: 0.95em;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.back-to-article:hover {
    color: var(--text-color);
    text-decoration: underline;
}

.sources-header {
    margin-bottom: 30px;
}

.sources-header h1 {
    font-size: 1.8rem;
    margin: 0;
    color: var(--text-color);
    line-height: 1.3;
}

.sources-content {
    margin-bottom: 40px;
}

.sources-intro {
    font-size: 1.1em;
    color: var(--text-color);
    margin-bottom: 25px;
    line-height: 1.6;
}

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

.source-item {
    margin-bottom: 15px;
    padding: 15px;
    background-color: var(--card-bg);
    border-left: 4px solid var(--link-color);
    border-radius: 4px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.source-item:hover {
    background-color: var(--page-bg);
    transform: translateX(2px);
}

.source-link {
    color: var(--link-color);
    text-decoration: none;
    font-size: 1em;
    line-height: 1.5;
    display: block;
    transition: color 0.2s ease;
}

.source-link:hover {
    color: var(--text-color);
    text-decoration: underline;
}

.sources-empty {
    padding: 30px;
    text-align: center;
    background-color: var(--card-bg);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.sources-empty p {
    margin: 0;
    color: #666;
    font-size: 1em;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sources-header h1 {
        font-size: 1.5rem;
    }
    
    .sources-intro {
        font-size: 1em;
    }
    
    .source-item {
        padding: 12px;
    }
    
    .source-link {
        font-size: 0.95em;
    }
}
/* --- END: Article Sources Page Styles --- */