/* Common Styles - Shared across all pages */

/* ============================================
   CSS VARIABLES - Design Tokens
   ============================================ */
:root {
    /* Primary Brand Colors: Helvetia, from Sanzo Wada combination 218
       (Helvetia Blue #005b8d, Grayish Lavender #b5b1d8, Plumbeous #70727c) */
    --color-primary: #005b8d;
    --color-primary-dark: #00466d;
    --color-secondary: #70727c;
    --color-primary-light: #e7e6f4;
    /* Solid fills behind white text; defaults to primary, dark themes override */
    --color-fill-primary: var(--color-primary);
    --color-fill-primary-hover: var(--color-primary-dark);
    --color-header-bg: var(--color-fill-primary);
    --color-text-on-primary: #ffffff;
    --color-on-primary-subtle: rgba(255, 255, 255, 0.2);
    --color-on-primary-muted: rgba(255, 255, 255, 0.3);

    /* Gradient */
    --gradient-primary: linear-gradient(135deg, #005b8d 0%, #70727c 100%);
    --gradient-primary-dark: linear-gradient(135deg, #00466d 0%, #5a5c66 100%);
    --gradient-subtle: linear-gradient(135deg, #f6f5fb 0%, #dcdaee 100%);

    /* Text Colors */
    --color-text-primary: #2e3036;
    --color-text-secondary: #4a4c55;
    --color-text-tertiary: #5c5e67;
    --color-text-light: #6c6e78;
    --color-text-dark: #10344d;
    --color-text-darker: #0a2738;

    /* Background Colors */
    --color-bg-page: #f4f3f9;
    --color-bg-white: #fdfdff;
    --color-bg-light: #eeedf6;
    --color-bg-gray: #d9d8e6;

    /* Accent Colors */
    --color-accent-blue: #5e58a0;
    --color-accent-blue-light: #edecf7;
    --color-accent-blue-dark: #48437f;
    --color-accent-blue-border: rgba(181, 177, 216, 0.6);
    --color-accent-yellow: #b5b1d8;
    --color-accent-yellow-light: #e9e7f5;
    --color-accent-yellow-dark: #45407a;
    --color-accent-red: #ef5350;
    --color-accent-red-light: #ffebee;
    --color-accent-red-dark: #c62828;
    --color-accent-orange: #f39c12;
    --color-badge: #005b8d;

    /* Border Colors */
    --color-border-light: #dcdbe8;
    --color-border-primary: var(--color-primary);

    /* Special Colors */
    --color-code-bg: #eeedf6;
    --color-code-text: #005b8d;
    --color-highlight: #e3e1f3;
    --color-footer-bg: #2c2e35;

    /* Spacing Scale */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 20px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 8px rgba(0, 91, 141, 0.25);
    --shadow-primary-lg: 0 8px 16px rgba(0, 91, 141, 0.35);

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-md: 1.1rem;
    --font-size-lg: 1.3rem;
    --font-size-xl: 1.6rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    --font-size-4xl: 3rem;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Transitions & Animations
       - Fast (0.2s): Quick feedback (hover states, color changes)
       - Base (0.3s): Standard transitions (transforms, opacity)
       - Slow (0.5s): Deliberate animations (modal open/close)
       All transitions use ease timing function by default */
    --transition-fast: 0.2s;
    --transition-base: 0.3s;
    --transition-slow: 0.5s;

    /* Z-Index Scale */
    --z-base: 1;
    --z-elevated: 10;
    --z-header: 100;
    --z-modal: 1000;

    /* Container Max Width */
    --container-max-width: 1200px;

    /* Breakpoints (for reference in media queries) */
    --breakpoint-mobile: 768px;
}

/* Dark mode (Helvetia Dark). theme-switcher.js sets <html data-mode="dark">
   from the saved choice or the OS setting before the page renders. */
:root[data-mode="dark"] {
    color-scheme: dark;

    --color-primary: #5aa9d6;
    --color-primary-dark: #84c1e3;
    --color-secondary: #9a9ca6;
    --color-primary-light: #1d3344;
    --color-fill-primary: #005b8d;
    --color-fill-primary-hover: #0a6ea6;
    --color-header-bg: #00466d;
    --color-on-primary-subtle: rgba(255, 255, 255, 0.14);
    --color-on-primary-muted: rgba(255, 255, 255, 0.26);

    --gradient-primary: linear-gradient(135deg, #00466d 0%, #3d3f48 100%);
    --gradient-primary-dark: linear-gradient(135deg, #003a5a 0%, #34363e 100%);
    --gradient-subtle: linear-gradient(135deg, #1b1e25 0%, #262a3a 100%);

    --color-text-primary: #e3e4ea;
    --color-text-secondary: #c3c5cf;
    --color-text-tertiary: #a6a8b2;
    --color-text-light: #858893;
    --color-text-dark: #f1f2f7;
    --color-text-darker: #ffffff;

    --color-bg-page: #121419;
    --color-bg-white: #1b1e25;
    --color-bg-light: #22262f;
    --color-bg-gray: #2e323c;

    --color-accent-blue: #b5b1d8;
    --color-accent-blue-light: #24233a;
    --color-accent-blue-dark: #d3d0ec;
    --color-accent-blue-border: rgba(181, 177, 216, 0.3);
    --color-accent-yellow: #b5b1d8;
    --color-accent-yellow-light: #262538;
    --color-accent-yellow-dark: #d6d3ee;
    --color-accent-red: #ff6b6b;
    --color-accent-red-light: #3a1a1d;
    --color-accent-red-dark: #ff9e9e;
    --color-badge: #005b8d;

    --color-border-light: #2f343f;
    --color-code-bg: #15181e;
    --color-code-text: #8cc8ea;
    --color-highlight: #2f2d47;
    --color-footer-bg: #0b0d11;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 4px 12px rgba(90, 169, 214, 0.25);
    --shadow-primary-lg: 0 8px 20px rgba(90, 169, 214, 0.35);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ============================================
   HEADER
   ============================================ */
.header {
    background: var(--color-header-bg);
    color: var(--color-text-on-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    box-shadow: var(--shadow-lg);
}

.header-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    color: var(--color-text-on-primary);
}

.nav {
    display: flex;
    gap: var(--spacing-md);
    margin-left: auto;
    margin-right: var(--spacing-lg);
}

.nav a {
    color: var(--color-text-on-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: opacity var(--transition-base);
}

.nav a:hover {
    opacity: 0.8;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background: var(--color-footer-bg);
    color: var(--color-text-on-primary);
    padding: var(--spacing-lg);
    text-align: center;
    margin-top: var(--spacing-xxl);
}

.footer p {
    margin: 0;
}

.footer-title {
    margin-bottom: var(--spacing-sm);
}

.footer-description {
    margin-bottom: var(--spacing-xs);
}

.footer-disclaimer {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.footer-links {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
}

.footer-links a {
    color: var(--color-text-on-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.footer-links a:hover {
    opacity: 0.8;
}

/* Light/dark toggle (header, after .nav) */
.theme-switcher {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.theme-switcher-label {
    opacity: 0.8;
}

.theme-btn {
    background: transparent;
    color: var(--color-text-on-primary);
    border: 1px solid var(--color-on-primary-muted);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.8rem;
    font: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.theme-btn:hover {
    background: var(--color-on-primary-subtle);
}

/* A darker fill keeps white text at AA contrast (a lighter one fell to 3.7:1) */
.theme-btn.active {
    background: rgba(0, 0, 0, 0.32);
    border-color: var(--color-text-on-primary);
}

/* System / Light / Dark as one segmented pill */
.mode-switch {
    gap: 0;
    padding: 2px;
    border: 1px solid var(--color-on-primary-muted);
    border-radius: var(--radius-pill);
}

.mode-switch .theme-btn {
    border-color: transparent;
}

.mode-switch .theme-btn.active {
    border-color: transparent;
}

/* ============================================
   CONTENT AREA - Shared Typography
   ============================================ */
.content-area {
    line-height: 1.8;
    color: var(--color-text-primary);
    /* Long unbroken strings (URLs, file paths) wrap instead of widening the page on phones */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Headings */
.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4 {
    color: var(--color-text-dark);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-bold);
}

.content-area h1 {
    font-size: var(--font-size-2xl);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--spacing-xs);
}

.content-area h2 {
    font-size: var(--font-size-xl);
    border-bottom: 2px solid var(--color-border-light);
    padding-bottom: 0.4rem;
}

.content-area h3 {
    font-size: var(--font-size-lg);
}

.content-area h4 {
    font-size: var(--font-size-md);
}

/* Paragraphs */
.content-area p {
    margin: var(--spacing-sm) 0;
}

/* Lists */
.content-area ul,
.content-area ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.content-area li {
    margin: var(--spacing-xs) 0;
}

/* Links */
.content-area a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

.content-area a:hover {
    border-bottom-color: var(--color-primary);
}

/* Links inside paragraphs and list items need more than color to stand
   out from the text around them (WCAG 1.4.1) */
.content-area p a,
.content-area li a,
.content-area h2 a,
.content-area h3 a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* Lists that are all links (session episode rows) don't need it */
.content-area .session-episodes a {
    text-decoration: none;
}

/* Code */
.content-area code {
    background: var(--color-code-bg);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-code-text);
}

.content-area pre {
    background: var(--color-bg-light);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    overflow-x: auto;
    border-left: 4px solid var(--color-primary);
}

.content-area pre code {
    background: none;
    padding: 0;
    color: var(--color-text-primary);
}

/* Blockquotes */
.content-area blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
    color: var(--color-text-secondary);
    font-style: italic;
    background: var(--color-bg-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
}

/* Tables */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.content-area table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-md) 0;
}

.content-area table th,
.content-area table td {
    border: 1px solid var(--color-border-light);
    padding: 0.75rem;
    text-align: left;
}

.content-area table th {
    background: var(--color-bg-light);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
}

.content-area table tr:hover {
    background: var(--color-bg-light);
}

/* Images */
.content-area img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--spacing-md) 0;
    box-shadow: var(--shadow-md);
}

/* Horizontal Rules */
.content-area hr {
    border: none;
    border-top: 2px solid var(--color-border-light);
    margin: var(--spacing-lg) 0;
}

/* Strong/Bold */
.content-area strong {
    color: var(--color-text-dark);
    font-weight: var(--font-weight-semibold);
}

/* Emphasis/Italic */
.content-area em {
    font-style: italic;
}

/* ============================================
   BUTTON SYSTEM
   ============================================ */
/* Base Button */
.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}

.btn:hover {
    transform: translateY(-2px);
}

/* Button Sizes */
.btn-lg {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-md);
}

.btn-sm {
    padding: 0.75rem var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Button Color Variants */
.btn-primary {
    background: var(--color-fill-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-fill-primary);
}

.btn-primary:hover {
    background: var(--color-fill-primary-hover);
    border-color: var(--color-fill-primary-hover);
    box-shadow: var(--shadow-primary);
}

.btn-secondary {
    background: var(--color-on-primary-subtle);
    color: var(--color-text-on-primary);
    border-color: var(--color-text-on-primary);
}

.btn-secondary:hover {
    background: var(--color-on-primary-muted);
    box-shadow: var(--shadow-md);
}

.btn-outline {
    background: var(--color-bg-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-bg-light);
}

.btn-light {
    background: var(--color-bg-white);
    color: var(--color-primary);
    border-color: transparent;
}

.btn-light:hover {
    box-shadow: var(--shadow-lg);
}

.btn-disabled {
    background: var(--color-bg-gray);
    color: var(--color-text-tertiary);
    border-color: var(--color-bg-gray);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-disabled:hover {
    transform: none;
}

/* ============================================
   HERO SECTION PATTERN
   ============================================ */
.hero-section {
    background: var(--gradient-primary);
    color: var(--color-text-on-primary);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    text-align: center;
}

.hero-section h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.2;
}

.hero-section .subtitle,
.hero-section .hero-subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero variant for homepage with larger text */
.hero-section.hero-large h1 {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-sm);
}

.hero-section.hero-large .subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
}

/* ============================================
   CARD SYSTEM
   ============================================ */
/* Base Card */
.card {
    background: var(--color-bg-white);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.card:hover {
    transform: translateY(-3px);
}

/* Card Variants */
.card-elevated {
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
}

.card-elevated:hover {
    box-shadow: var(--shadow-lg);
}

.card-bordered {
    padding: var(--spacing-lg);
    border: 2px solid var(--color-border-light);
    border-left: 4px solid var(--color-primary);
}

.card-bordered:hover {
    border-color: var(--color-primary);
    border-left-color: var(--color-primary);
    box-shadow: var(--shadow-primary-lg);
}

/* Card Container - Grid layout for cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* browsers without min() */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

/* Card Content - Typography inside cards */
.card h2,
.card h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-dark);
    border-bottom: 0;
    padding-bottom: 0;
}

.card h2 a,
.card h3 a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.card h2 a:hover,
.card h3 a:hover {
    color: var(--color-primary);
}

.card p {
    margin: var(--spacing-xs) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
}

.card a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

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

/* ============================================
   SECTION CONTAINER PATTERN
   ============================================ */
/* Base Section Container */
.section-container {
    background: var(--color-bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin: var(--spacing-lg) auto;
}

/* Section Container Variants */
.section-container-lg {
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Section Header Styling */
.section-container h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-dark);
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: var(--spacing-xs);
    display: inline-block;
}

.section-container h3 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
    color: var(--color-text-darker);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================
   Breakpoint Strategy:
   - Mobile: max-width 768px (--breakpoint-mobile)
   - All @media queries use this consistent breakpoint
   - Page-specific responsive styles in individual CSS files
   - Common responsive patterns consolidated below

   Common Patterns:
   - Hero headings: Reduce to var(--font-size-xl) or var(--font-size-2xl)
   - Subtitles: Reduce to var(--font-size-base) or var(--font-size-md)
   - Grids: Collapse to single column (grid-template-columns: 1fr)
   - Flex: Stack vertically (flex-direction: column)
   - Sections: Reduce padding (1.5rem)
   ============================================ */
@media (max-width: 768px) {
    /* Header: title, then nav links in one wrapping row, then theme buttons */
    .header {
        padding: var(--spacing-sm);
    }

    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    .nav {
        flex-wrap: wrap;
        gap: 0.25rem var(--spacing-sm);
        margin: 0;
    }

    .theme-switcher {
        gap: 0.35rem;
        font-size: var(--font-size-xs);
    }

    .theme-btn {
        padding: 0.15rem 0.6rem;
    }

    /* Layout: 16px gutters and lighter section padding so text gets the width */
    .container {
        padding: 0 var(--spacing-sm);
    }

    .section-container,
    .section-container-lg {
        padding: var(--spacing-md) 1.25rem;
        margin: var(--spacing-sm) auto;
    }

    .section-container h2 {
        font-size: var(--font-size-xl);
    }

    .footer {
        padding: var(--spacing-md) var(--spacing-sm);
        margin-top: var(--spacing-xl);
    }

    /* Hero responsive */
    .hero-section h1 {
        font-size: var(--font-size-xl);
    }

    .hero-section .subtitle,
    .hero-section .hero-subtitle {
        font-size: var(--font-size-base);
    }

    .hero-section.hero-large h1 {
        font-size: var(--font-size-2xl);
    }

    .hero-section.hero-large .subtitle {
        font-size: var(--font-size-md);
    }

    /* Content Area responsive */
    .content-area h1 {
        font-size: var(--font-size-xl);
    }

    .content-area h2 {
        font-size: var(--font-size-lg);
    }

    .content-area h3 {
        font-size: var(--font-size-md);
    }

    .content-area ul,
    .content-area ol {
        padding-left: var(--spacing-md);
    }

    /* Wide tables scroll sideways inside the content instead of widening the
       page. scroll-regions.js wraps each table in .table-scroll (keeping the
       table a real table for screen readers); without JS the table scrolls itself. */
    .content-area table:not(.is-wrapped) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .content-area table th,
    .content-area table td {
        min-width: 9rem;
    }

    /* Responsive Utilities */
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-full-width {
        width: 100% !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-stack {
        flex-direction: column !important;
    }

    .mobile-single-column {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   ICONS (Tabler, assets/icons.svg via _includes/icon.html)
   Sized to the surrounding text and drawn in its color.
   ============================================ */
.icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

/* ============================================
   FLEX GAP FALLBACKS (Safari < 14.1)
   theme-switcher.js adds html.no-flex-gap when flex `gap` is unsupported.
   Margins mirror the gap values above, per breakpoint.
   ============================================ */
.no-flex-gap .nav > * + * {
    margin-left: var(--spacing-md);
}

.no-flex-gap .theme-switcher > * {
    margin-right: var(--spacing-xs);
}

.no-flex-gap .theme-switcher > :last-child,
.no-flex-gap .mode-switch > * {
    margin-right: 0;
}

@media (max-width: 768px) {
    .no-flex-gap .header-content > * + * {
        margin-top: var(--spacing-xs);
    }

    /* Wrapping rows: right/bottom margins, cancelled on the container */
    .no-flex-gap .nav {
        margin-bottom: -0.25rem;
    }

    .no-flex-gap .nav > *,
    .no-flex-gap .nav > * + * {
        margin: 0 var(--spacing-sm) 0.25rem 0;
    }

    .no-flex-gap .theme-switcher > * {
        margin-right: 0.35rem;
    }
}

/* Phones: shorten labels (e.g. "Previous Episode" -> "Previous") */
@media (max-width: 480px) {
    .hide-mobile {
        display: none;
    }
}

/* Desktop-only utility (hide on mobile) */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* "Skip to main content": first thing a keyboard or screen reader user
   reaches; hidden until focused */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--spacing-sm);
    z-index: 1000;
    padding: 0.6rem 1rem;
    background: var(--color-bg-white);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.skip-link:focus {
    top: var(--spacing-sm);
}

/* The skip target takes focus without showing an outline around the page */
main:focus {
    outline: none;
}

/* A visible focus ring for every keyboard-focusable control */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* On the blue header and hero, a white ring shows up */
.header a:focus-visible,
.header button:focus-visible,
.hero a:focus-visible,
.page-hero a:focus-visible,
.episode-hero a:focus-visible,
.episode-hero button:focus-visible {
    outline-color: var(--color-text-on-primary);
}

/* Respect the system "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .card:hover,
    .btn:hover {
        transform: none !important;
    }
}

/* ============================================
   PRINT (all pages)
   Paper is ~700 CSS px wide, so the max-width: 768px rules also apply when
   printing; anything that only suits small screens is undone here or in the
   page stylesheets.
   ============================================ */
.print-only {
    display: none;
}

@page {
    margin: 1.5cm 1.6cm;
}

@media print {
    /* Always print light, whatever the screen mode */
    :root,
    :root[data-mode="dark"] {
        color-scheme: light;
        --color-primary: #000;
        --color-primary-dark: #000;
        --color-primary-light: #fff;
        --color-text-primary: #111;
        --color-text-secondary: #222;
        --color-text-tertiary: #333;
        --color-text-light: #555;
        --color-text-dark: #000;
        --color-text-darker: #000;
        --color-text-on-primary: #000;
        --color-bg-page: #fff;
        --color-bg-white: #fff;
        --color-bg-light: #fff;
        --color-border-light: #bbb;
        --color-accent-blue: #000;
        --color-accent-blue-light: #fff;
        --color-accent-yellow-light: #fff;
        --color-accent-yellow-dark: #000;
        --color-code-bg: #f2f2f2;
        --color-code-text: #000;
        --color-highlight: #eee;
        --gradient-primary: none;
        --gradient-subtle: none;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
    }

    html {
        font-size: 11pt;
    }

    body {
        background: #fff;
        color: #111;
        line-height: 1.45;
    }

    .header,
    .footer,
    .theme-switcher,
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block;
    }

    /* Rounded corners turn accent borders into brackets on paper */
    *,
    *::before,
    *::after {
        border-radius: 0 !important;
    }

    /* Icons are decorative; the text labels stay */
    .icon {
        display: none;
    }

    .container {
        max-width: none;
        padding: 0;
    }

    .section-container,
    .section-container-lg {
        padding: 0;
        margin: 0 0 1.2em;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }

    a {
        color: inherit;
    }

    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
    }

    p, li, blockquote {
        orphans: 3;
        widows: 3;
    }

    tr, img, pre, blockquote {
        break-inside: avoid;
    }

    /* Undo the small-screen table scrolling: on paper it would cut columns off */
    .table-scroll {
        overflow: visible;
    }

    .content-area table {
        display: table;
        max-width: none;
        overflow: visible;
    }

    .content-area table th,
    .content-area table td {
        min-width: 0;
        border-color: #999;
    }
}