/* Shared styles for Facts, Stories, and Diaries pages */
/* Swiss Design System Integration */

/* Page Navigation - matches stats.css style */
.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    /* No bottom margin/padding — the parent <header> already handles
       spacing. Extra space here pushed the nav children up relative to
       the centered logo, causing a visual misalignment. */
    margin: 0;
    padding: 0;
    align-items: center;
}

.page-nav a {
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.15s;
}

.page-nav a:hover {
    color: var(--ink);
}

.page-nav a.active {
    color: var(--ink);
}

/* Dropdown Menu Styles */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    color: var(--ink-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}

.nav-dropdown-trigger:hover {
    color: var(--ink);
}

.nav-dropdown-trigger::after {
    content: '▾';
    font-size: 10px;
    transition: transform 0.15s;
}

.nav-dropdown:hover .nav-dropdown-trigger::after {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    min-width: 160px;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s;
    z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Keyboard users should get the same menu affordance as pointer users. */
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
    transition: all 0.15s;
}

.nav-dropdown-menu a:hover {
    background: var(--paper-dark);
    color: var(--ink);
}

.nav-dropdown-menu a.active {
    color: var(--ink);
    background: var(--paper-dark);
}

/* Keep the rightmost desktop dropdown inside the page frame. Hidden menus
   still contribute to scrollable overflow when they open toward the viewport
   edge, so anchor this final menu from its right side. */
.page-nav > .nav-dropdown:last-of-type .nav-dropdown-menu {
    left: auto;
    right: 0;
}

/* Change Mode Button in Nav */
.page-nav a.nav-mode-btn {
    background: var(--ink);
    color: var(--paper) !important;
    padding: 4px 14px;
    border: 1px solid var(--ink);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    margin-left: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Shared page frame: line length should stay editorial on wide screens while
   the enclosing .container still controls the outer gutter. */
.page-content {
    /* Matches the dashboard: fill the .container, no narrower cap. */
    max-width: none;
    margin: 0;
}

.page-nav a.nav-mode-btn:hover {
    background: transparent;
    color: var(--ink) !important;
    border-color: var(--ink);
}

/* Chat button — brand yellow, paired tight with the Home button to its right. */
.page-nav a.nav-mode-btn.chat {
    background: #e8c065;
    color: var(--ink) !important;
    border-color: #e8c065;
    margin-left: 16px;          /* breathing room from preceding nav links */
}
.page-nav a.nav-mode-btn.chat:hover {
    background: #dab050;
    border-color: #dab050;
    color: var(--ink) !important;
}
.page-nav a.nav-mode-btn.chat.active {
    background: #d4a030;
    border-color: #d4a030;
    color: var(--ink) !important;
}

/* Section Title */
.section-title {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
}

.section-intro {
    color: var(--ink-muted);
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* Facts Section */
.facts-section {
    margin-bottom: 48px;
}

/* Fact Cards Grid */
.fact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.fact-card {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 24px 20px;
    text-align: center;
    transition: border-color 0.15s;
}

.fact-card:hover {
    border-color: var(--ink);
}

.fact-card.highlight {
    border-left: 2px solid var(--positive);
    background: var(--card-bg);
}

.fact-card.negative {
    border-left: 2px solid var(--negative);
    background: var(--card-bg);
}

.fact-number {
    font-family: var(--font-sans);
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}

.fact-card.highlight .fact-number {
    color: var(--positive);
}

.fact-card.negative .fact-number {
    color: var(--negative);
}

.fact-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.fact-detail {
    font-size: 0.9rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

.fact-detail strong {
    color: var(--ink);
}

/* Featured Fact Card with Image */
.fact-card-featured {
    display: flex;
    gap: 16px;
    text-align: left;
}

.fact-card-featured .fact-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fact-card-media {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fact-card-image {
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    object-fit: cover;
}

.fact-card-source {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fact-card-logo {
    height: 14px;
    width: auto;
    filter: grayscale(100%) opacity(0.6);
}

.fact-card-link {
    font-size: 0.75rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.fact-card-link:hover {
    color: var(--ink);
}

@media (max-width: 600px) {
    .fact-card-featured {
        flex-direction: column;
    }
    
    .fact-card-media {
        flex: none;
    }
}

/* One-Liners */
.one-liners {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.one-liner {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--ink);
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.one-liner:hover {
    background: var(--paper-dark);
    border-color: var(--ink);
}

.one-liner.copied {
    border-left-color: var(--positive);
    background: rgba(5, 150, 105, 0.05);
}

.copy-icon {
    font-size: 1.2rem;
    opacity: 0.5;
}

.one-liner:hover .copy-icon {
    opacity: 1;
}

/* ================================
   BLOG / STORIES STYLES
   ================================ */

.blog-intro {
    max-width: 700px;
    margin: 0 auto 48px;
    text-align: center;
}

.blog-intro p {
    font-size: 1.1rem;
    color: var(--ink-light);
    line-height: 1.7;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
}

.blog-card {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    transition: border-color 0.15s;
    overflow: hidden;
}

.blog-card:hover {
    border-color: var(--ink);
}

.blog-card-image {
    height: 160px;
    background: var(--paper-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    font-size: 2rem;
}

.blog-card-content {
    padding: 20px;
}

.blog-category {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.blog-card-title {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--ink);
}

.blog-card-excerpt {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.blog-card-meta {
    font-size: 11px;
    color: var(--ink-muted);
    padding-top: 12px;
    border-top: 1px solid var(--rule);
}

/* Featured Story */
.featured-story {
    background: var(--ink);
    color: var(--paper);
    padding: 48px 40px;
    margin: 0 -24px 32px;
}

.featured-story .blog-category {
    color: var(--ink-muted);
}

.featured-story-title {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 16px;
    max-width: 700px;
}

.featured-story-lead {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 600px;
    margin-bottom: 20px;
}

.featured-story-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.featured-stat {
    text-align: center;
}

.featured-stat-value {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.03em;
}

.featured-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
}

/* ================================
   DIARY STYLES
   ================================ */

.diary-section {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    margin-bottom: 16px;
    overflow: hidden;
}

.diary-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s;
}

.diary-header:hover {
    background: var(--paper-dark);
}

.diary-header::-webkit-details-marker {
    display: none;
}

.diary-stage {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--paper);
    background: var(--ink);
    padding: 6px 12px;
}

.diary-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
}

.diary-toggle {
    color: var(--ink-muted);
    transition: transform 0.2s;
}

details[open] .diary-toggle {
    transform: rotate(180deg);
}

.diary-content {
    padding: 24px;
    border-top: 1px solid var(--rule);
}

.diary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.85rem;
    color: var(--ink-muted);
}

.diary-content h3 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    margin: 20px 0 10px;
    color: var(--ink);
}

.diary-content h3:first-of-type {
    margin-top: 0;
}

.diary-content h4 {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 16px 0 8px;
    color: var(--ink-light);
}

.diary-content p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--ink-light);
    margin-bottom: 12px;
}

.diary-content ul {
    margin: 0 0 16px 20px;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--ink-light);
}

.diary-content table {
    width: 100%;
    margin: 16px 0;
    font-size: 0.85rem;
}

.diary-content th {
    background: var(--paper-dark);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diary-content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
}

.diary-content .pos {
    color: var(--positive);
    font-weight: 600;
}

.diary-content .neg {
    color: var(--negative);
    font-weight: 600;
}

.highlight-box {
    background: var(--paper-dark);
    border-left: 2px solid var(--ink);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0;
}

.highlight-box p {
    margin: 0;
    color: var(--ink);
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 16px 0;
}

@media (max-width: 600px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* Coming Soon Section */
.coming-soon {
    text-align: center;
    padding: 80px 40px;
    background: var(--card-bg);
    border: 1px solid var(--rule);
    margin: 40px 0;
}

.coming-soon h2 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    color: var(--ink);
}

.coming-soon p {
    font-size: 1rem;
    color: var(--ink-muted);
    margin-bottom: 24px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.coming-soon ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.coming-soon li {
    background: var(--paper-dark);
    padding: 8px 16px;
    font-size: 13px;
    color: var(--ink-muted);
}

/* ============================================
   Methodology, Glossary, About Pages
   ============================================ */

.method-section, .about-section {
    margin-bottom: 48px;
}

.method-section h2, .about-section h2 {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ink);
}

.method-section h3 {
    font-size: 1.1rem;
    margin: 24px 0 12px;
    color: var(--ink);
}

.method-section p, .about-section p {
    line-height: 1.8;
    margin-bottom: 16px;
    color: var(--ink-light);
}

.method-section ul, .method-section ol,
.about-section ul, .about-section ol {
    margin-left: 24px;
    margin-bottom: 16px;
    line-height: 1.8;
    color: var(--ink-light);
}

.method-section li, .about-section li {
    margin-bottom: 8px;
}

/* Source Cards */
.source-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.source-card {
    background: var(--paper-dark);
    padding: 16px;
    border: 1px solid var(--rule);
    border-radius: 10px;
}

.source-card h3 {
    font-size: 1rem;
    margin-bottom: 8px;
    color: var(--ink);
}

.source-card p {
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.source-link {
    display: inline-block;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 12px;
}

.source-link:hover {
    text-decoration: underline;
}

.source-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.code-tag {
    background: var(--paper);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
}

/* Comparison Box */
.comparison-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 600px) {
    .comparison-box {
        grid-template-columns: 1fr;
    }
}

.compare-item {
    padding: 16px;
    border-radius: 10px;
}

.compare-item.bad {
    background: var(--paper-dark);
    border-left: 2px solid var(--negative);
}

.compare-item.good {
    background: var(--paper-dark);
    border-left: 2px solid var(--positive);
}

.compare-item h4 {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.compare-item p {
    font-size: 0.85rem;
    margin: 0;
}

/* Formula Box */
.formula-box {
    background: var(--paper-dark);
    padding: 16px;
    margin: 16px 0;
    border-left: 2px solid var(--ink);
    border-radius: 10px;
}

.formula-box code {
    display: block;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 8px;
}

.formula-box .example {
    font-size: 0.8rem;
    color: var(--ink-muted);
    margin: 0;
}

/* Warning Box */
.warning-box {
    background: var(--paper-dark);
    border-left: 2px solid var(--ink);
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
}

.warning-box h4 {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.warning-box ul {
    margin-left: 20px;
    margin-bottom: 0;
}

.warning-box li {
    font-size: 0.85rem;
}

/* Scale Visual */
.scale-visual {
    margin: 24px 0;
}

.scale-bar {
    height: 40px;
    background: linear-gradient(to right, var(--negative), var(--accent), var(--positive));
    position: relative;
}

.scale-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.scale-marker .marker-label {
    display: block;
    font-size: 0.65rem;
    color: var(--ink);
    font-weight: 600;
}

.scale-marker .marker-value {
    display: block;
    font-size: 0.75rem;
    color: var(--ink);
    font-weight: 700;
}

/* Method Steps */
.method-steps {
    counter-reset: step;
    list-style: none;
    margin-left: 0;
}

.method-steps li {
    position: relative;
    padding-left: 48px;
    margin-bottom: 24px;
}

.method-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
}

.method-steps .step-detail {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 4px;
}

.didnt-list li {
    margin-bottom: 12px;
}

.repo-box {
    background: var(--paper-dark);
    border: 1px solid var(--rule);
    padding: 20px;
    margin-top: 16px;
}

.repo-box p {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* Glossary */
.glossary-search {
    margin-bottom: 24px;
}

.glossary-search input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--rule);
    font-size: 15px;
    background: var(--paper);
    color: var(--ink);
}

.glossary-search input:focus {
    outline: none;
    border-color: var(--ink);
}

.glossary-item {
    background: var(--paper-dark);
    padding: 16px;
    margin-bottom: 12px;
    border-left: 2px solid var(--ink);
    border-radius: 10px;
}

.glossary-item h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.term-category {
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--ink);
    color: var(--paper);
    padding: 3px 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.glossary-item p {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 8px;
}

.term-usage {
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
}

.term-warning {
    font-size: 0.8rem;
    color: #8a6914;
    margin-top: 8px;
}

.term-link a {
    color: var(--accent);
    font-size: 0.85rem;
}

/* About Page */
.mission-quote {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    border-left: 2px solid var(--ink);
    padding-left: 16px;
    margin: 20px 0;
}

.is-isnt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 600px) {
    .is-isnt-grid {
        grid-template-columns: 1fr;
    }
}

.is-box, .isnt-box {
    padding: 16px;
}

.is-box {
    background: var(--paper-dark);
    border-left: 2px solid var(--positive);
}

.isnt-box {
    background: var(--paper-dark);
    border-left: 2px solid var(--negative);
}

.is-box h3 {
    color: var(--positive);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.isnt-box h3 {
    color: var(--negative);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.is-box ul, .isnt-box ul {
    margin-left: 16px;
    font-size: 0.85rem;
}

.principles-list {
    list-style: none;
    margin-left: 0;
    counter-reset: principle;
}

.principles-list li {
    margin-bottom: 20px;
    padding-left: 0;
}

.principles-list li strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
    color: var(--ink);
}

.principles-list li p {
    font-size: 0.9rem;
    margin: 0;
}

.tech-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.tech-item {
    background: var(--paper-dark);
    padding: 12px 16px;
    font-size: 13px;
}

.contact-box {
    background: var(--paper-dark);
    padding: 16px;
    margin: 16px 0;
    border-left: 2px solid var(--ink);
    border-radius: 10px;
}

.contact-box p {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.correction-note {
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
}

.org-link {
    margin-top: 16px;
}

.btn-link {
    display: inline-flex;
    align-items: center;
    background: var(--ink);
    color: var(--paper);
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.15s;
    min-height: 44px;
    border-radius: 10px;
}

.btn-link:hover {
    background: var(--ink-light);
}

/* ============================================
   Timeline Page
   ============================================ */

.timeline-container {
    position: relative;
    padding: 20px 0;
}

.timeline-event {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    position: relative;
}

.timeline-year {
    width: 72px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    text-align: right;
    padding-top: 4px;
}

.timeline-content {
    flex: 1;
    background: var(--paper-dark);
    padding: 16px;
    border-left: 2px solid var(--ink);
    position: relative;
}

.timeline-content.oil {
    border-left-color: var(--accent);
}

.timeline-content.political {
    border-left-color: var(--ink-muted);
}

.timeline-content.global {
    border-left-color: var(--accent);
}

.timeline-content.economic {
    border-left-color: var(--positive);
}

.timeline-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 3px 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.timeline-tag.oil { background: var(--paper-dark); color: var(--ink-muted); border: 1px solid var(--rule); }
.timeline-tag.political { background: var(--paper-dark); color: var(--ink-muted); border: 1px solid var(--rule); }
.timeline-tag.global { background: var(--paper-dark); color: var(--ink-muted); border: 1px solid var(--rule); }
.timeline-tag.economic { background: var(--paper-dark); color: var(--ink-muted); border: 1px solid var(--rule); }

.timeline-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 6px;
}

.timeline-desc {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin: 0;
}

.timeline-impact {
    font-size: 0.8rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    color: var(--ink-light);
}

/* ============================================
   Share Cards
   ============================================ */

.share-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.share-card {
    background: var(--ink);
    padding: 20px;
    color: var(--paper);
    position: relative;
    overflow: hidden;
}

.share-card::before {
    display: none;
}

.share-card-stat {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.share-card-stat.positive { color: #6fcf97; }
.share-card-stat.negative { color: #eb8a90; }
.share-card-stat.neutral { color: #f7c97e; }

.share-card-label {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    opacity: 0.9;
}

.share-card-context {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 16px;
}

.share-card-source {
    font-size: 0.65rem;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.share-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.share-btn {
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
}

.share-btn.download {
    background: rgba(255,255,255,0.15);
    color: var(--paper);
}

.share-btn.download:hover {
    background: rgba(255,255,255,0.25);
}

.share-btn.twitter {
    background: var(--paper);
    color: var(--ink);
}

.share-btn.twitter:hover {
    background: rgba(255,255,255,0.9);
}

/* ============================================
   Download Section
   ============================================ */

.download-section {
    background: var(--paper-dark);
    padding: 20px;
    margin-bottom: 20px;
    border-left: 2px solid var(--ink);
    border-radius: 10px;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

a.download-item,
a.download-item:link,
a.download-item:visited,
a.download-item:hover,
a.download-item:active {
    color: var(--ink);
    text-decoration: none;
}

a.download-item h4,
a.download-item .download-info h4 {
    color: var(--accent);
}

a.download-item .download-info p {
    color: var(--ink-muted);
}

.download-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--paper-dark);
    padding: 16px;
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: all 0.2s;
}

.download-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.download-icon {
    font-size: 2rem;
}

.download-info h4 {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.download-info p {
    font-size: 0.75rem;
    color: var(--ink-muted);
    margin: 0;
}

/* ================================
   STORY CARDS (New Data Stories)
   ================================ */

.story-card {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    margin-bottom: 32px;
    overflow: hidden;
}

.story-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--rule);
}

.story-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    margin-bottom: 12px;
}

.story-tag.economic { background: var(--paper-dark); color: var(--accent); border: 1px solid var(--accent); }
.story-tag.political { background: var(--paper-dark); color: var(--ink-muted); border: 1px solid var(--ink-muted); }
.story-tag.governance { background: var(--paper-dark); color: var(--positive); border: 1px solid var(--positive); }
.story-tag.global { background: var(--paper-dark); color: var(--ink-light); border: 1px solid var(--ink-light); }

.story-header h2 {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
    color: var(--ink);
}

.story-subtitle {
    font-size: 1rem;
    color: var(--ink-muted);
    margin: 0;
}

.story-body {
    padding: 24px;
}

.story-body p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 16px;
    color: var(--ink);
}

.story-body ul {
    margin: 16px 0;
    padding-left: 20px;
}

.story-body li {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 8px;
    color: var(--ink);
}

.story-body blockquote {
    border-left: 4px solid var(--accent);
    padding: 12px 20px;
    margin: 24px 0;
    background: var(--paper-dark);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-light);
}

.story-stat-row {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.story-stat {
    flex: 1;
    min-width: 100px;
    text-align: center;
    padding: 16px;
    background: var(--paper-dark);
    border: 1px solid var(--rule);
}

.story-stat-value {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
}

.story-stat-value.pos { color: var(--positive); }
.story-stat-value.neg { color: var(--negative); }

.story-stat-label {
    font-size: 0.75rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.story-source {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--ink-muted);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    order: 2;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
    transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
        position: relative;
        z-index: 130;
    }

    header {
        position: relative;
    }
}

@media (max-width: 768px) {
    .two-col {
        grid-template-columns: 1fr;
    }
    
    .featured-story {
        padding: 40px 24px;
        margin: 0 -16px 32px;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    /* --- Mobile nav: full-screen panel, left-aligned, dropdowns expanded
       inline so every destination is reachable without hover. --- */
    header {
        position: relative;
        z-index: 120;
        background: var(--paper);
    }

    .page-nav {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 110;
        background: var(--paper);
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        padding: 112px 0 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
    }

    .page-nav.open {
        display: flex;
    }

    /* Top-level links (Dashboard, The Index, Stories) */
    .page-nav > a:not(.nav-mode-btn) {
        padding: 15px 24px;
        font-size: 17px;
        font-weight: 600;
        color: var(--ink);
        border-bottom: 1px solid var(--rule);
    }
    .page-nav > a:not(.nav-mode-btn).active {
        color: var(--accent);
    }

    /* Dropdown groups become expanded, labelled sections */
    .nav-dropdown {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--rule);
        padding: 8px 0 10px;
    }
    .nav-dropdown-trigger {
        padding: 10px 24px 4px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-muted);
    }
    .nav-dropdown-trigger::after { display: none; }

    .nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        background: transparent;
        min-width: 0;
        padding: 0;
    }
    .nav-dropdown-menu a {
        padding: 11px 24px 11px 36px;
        font-size: 15px;
        color: var(--ink-light);
    }
    .nav-dropdown-menu a.active {
        color: var(--accent);
        background: transparent;
    }

    /* Mode buttons (Chat / Home) */
    .page-nav a.nav-mode-btn {
        margin: 18px 24px 0;
        padding: 13px;
        text-align: center;
        font-size: 15px;
        border-bottom: none;
    }
    .page-nav a.nav-mode-btn + a.nav-mode-btn {
        margin-top: 10px;
    }
    
    .comparison-box,
    .is-isnt-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline-event {
        flex-direction: column;
        gap: 8px;
    }
    
    .timeline-year {
        text-align: left;
    }
    
    .share-grid {
        grid-template-columns: 1fr;
    }
    
    .download-grid {
        grid-template-columns: 1fr;
    }
    
    .section-title {
        font-size: 1.2rem;
    }
    
    .diary-header {
        padding: 16px;
        gap: 12px;
    }
    
    .diary-title {
        font-size: 1rem;
    }
    
    .diary-content {
        padding: 16px;
    }
    
    .story-header {
        padding: 16px 16px 12px;
    }
    
    .story-header h2 {
        font-size: 1.25rem;
    }
    
    .story-body {
        padding: 16px;
    }
    
    .story-stat-row {
        gap: 12px;
    }
    
    .story-stat {
        min-width: 80px;
        padding: 12px;
    }
    
    .story-stat-value {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .fact-cards {
        grid-template-columns: 1fr;
    }
    
    .fact-number {
        font-size: 2rem;
    }
    
    .featured-story {
        padding: 24px 16px;
        margin: 0 -16px 24px;
    }
    
    .featured-story-title {
        font-size: 1.4rem;
    }
    
    .featured-story-lead {
        font-size: 1rem;
    }
    
    .featured-story-stats {
        gap: 16px;
    }
    
    .source-cards {
        grid-template-columns: 1fr;
    }
    
    .tech-details {
        grid-template-columns: 1fr;
    }
    
    .share-card-stat {
        font-size: 2rem;
    }
    
    .download-item {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .coming-soon {
        padding: 40px 20px;
    }
    
    .coming-soon h2 {
        font-size: 1.4rem;
    }
}


/* ============================================================
   MOBILE QUICK-PASS FIXES — applies across all pages
   Added 2026-05-18 to plug gaps identified in mobile audit
   ============================================================ */

/* The site header has 10+ nav items + 2 buttons. Between 768px and 1080px
   it gets too crowded. Tighten spacing in that band. */
@media (max-width: 1080px) and (min-width: 769px) {
    .page-nav {
        gap: 14px !important;
    }
    .page-nav a {
        font-size: 12.5px;
    }
    .page-nav a.nav-mode-btn {
        padding: 6px 11px;
        min-height: 32px;
        font-size: 12px;
    }
}

/* Below 600px the body padding feels cramped on some pages — give breathing
   room and ensure tables and code blocks can scroll instead of overflow. */
@media (max-width: 600px) {
    .page-content { padding: 0; }

    /* Any standalone table on the page gets a horizontal-scroll container
       fallback if the author forgot to wrap it. */
    table:not(.no-mobile-scroll) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table:not(.no-mobile-scroll) thead,
    table:not(.no-mobile-scroll) tbody { display: table-row-group; }
}

/* Newsletter signup form — stack input above button below 520px. */
@media (max-width: 520px) {
    .nl-form { flex-direction: column !important; gap: 8px !important; }
    .nl-input, .nl-submit { width: 100% !important; }
    .nl-submit { padding: 12px !important; }
}

/* API + embed code snippets — keep readable on small screens. */
@media (max-width: 600px) {
    .api-endpoint pre, .api-block pre, .em-snippet {
        font-size: 0.7rem !important;
        line-height: 1.5 !important;
    }
    .em-preview { height: 320px !important; }
}

/* Touch target minimums (Apple HIG: 44pt; Material: 48dp). The nav-mode-btn
   on chat-only mobile views is currently 24px tall — bump on tap-only widths. */
@media (max-width: 640px) and (pointer: coarse) {
    .page-nav a.nav-mode-btn {
        min-height: 36px;
        padding: 8px 16px;
    }
}