/* File: /assets/css/dark-mode.css
   Module: Dark Theme Color System
   Scope: every rule lives under html[data-theme="dark"], stamped pre-paint by the boot
   script in core-ui.php. Section numbering mirrors style.css for maintainability.
   Surfaces ladder (dark): page #0F172A (Slate 900) > cards #1E293B (Slate 800) > wells #0F172A
   > deep accents #020617 (Slate 950). Hover lift: #273449. */

/* ==========================================================================
   1. ROOT VARIABLES (dark values)
   ========================================================================== */
html[data-theme="dark"] {
    --ch-text-main: #F1F5F9;                       /* Slate 100 */
    --ch-text-muted: #94A3B8;                      /* Slate 400 */
    --ch-bg-main: #0F172A;                         /* Slate 900 - page background */
    --ch-bg-card: #1E293B;                         /* Slate 800 - elevated surface: cards, dialogs, popovers */
    --ch-accent: #60A5FA;                          /* Blue 400 - links (AA on dark) */
    --ch-accent-hover: #93C5FD;                    /* Blue 300 */
    --ch-cta: #10B981;                             /* Emerald 500 - unchanged brand anchor */
    --ch-cta-text: #10B981;                        /* Emerald text: 5.3:1 on the Slate 800 card */
    --ch-code-bg: #1E293B;                         /* Slate 800 */
    --ch-border: #334155;                          /* Slate 700 */
    --ch-highlight: rgba(37, 99, 235, 0.14);       /* Blue tint - blockquotes, works on any surface */

    /* Premium button: the same fill (white text needs it no lighter than
       #2563EB), a pale hairline that reads on slate and a stronger glow. */
    --ch-pro-glow:    inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px -8px rgba(59, 130, 246, 0.6);
    --ch-pro-glow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 32px -10px rgba(99, 102, 241, 0.75);
    --ch-pro-line:    rgba(147, 197, 253, 0.38);

    background-color: #0F172A;                     /* overscroll glow fix */
    color-scheme: dark;                            /* native scrollbars, form controls, pickers */
}

/* ==========================================================================
   2. GENERATEPRESS CONTAINERS (parent theme card surfaces)
   ========================================================================== */
html[data-theme="dark"] .separate-containers .inside-article,
html[data-theme="dark"] .separate-containers .comments-area,
html[data-theme="dark"] .separate-containers .page-header,
html[data-theme="dark"] .separate-containers .paging-navigation,
html[data-theme="dark"] .one-container .site-content,
html[data-theme="dark"] .inside-page-header {
    background-color: #1E293B;
}

/* Global footer: elevated slate surface anchors the page bottom (mirrors the
   light system: page #F8FAFC / footer #FFFFFF becomes page #0F172A / footer #1E293B).
   Borders and text flip automatically via --ch-border / --ch-text-* tokens. */
html[data-theme="dark"] .site-footer {
    background-color: #1E293B;
}

/* Mobile nav panel links (nav surfaces are globally transparent; sticky header paints the bg) */
html[data-theme="dark"] .main-navigation .main-nav ul li a {
    color: #CBD5E1;
}

html[data-theme="dark"] .main-navigation .menu-toggle,
html[data-theme="dark"] .main-navigation .menu-toggle:hover,
html[data-theme="dark"] .main-navigation .menu-toggle:focus {
    background-color: #1E293B;
    color: #F1F5F9;
}

/* Headings inherit our tokens even if GP customizer inline CSS pins its own colors */
html[data-theme="dark"] .entry-content h2,
html[data-theme="dark"] .entry-content h3,
html[data-theme="dark"] .entry-content h4,
html[data-theme="dark"] .entry-title {
    color: var(--ch-text-main);
}

/* ==========================================================================
   3. CONTENT: LINKS, BLOCKQUOTES, TABLES
   ========================================================================== */
html[data-theme="dark"] .entry-content a:not(.ch-btn):not(.wp-block-image a):not(.wp-block-button__link) {
    text-decoration-color: rgba(96, 165, 250, 0.4);
}

html[data-theme="dark"] .entry-content a:not(.ch-btn):not(.wp-block-image a):not(.wp-block-button__link):hover {
    background-color: rgba(96, 165, 250, 0.12);
}

/* Blockquote copy: heat color lifted toward Slate 100 stays readable on the
   dark tinted well at every heat band (emerald -> blue -> amber -> red). */
html[data-theme="dark"] .entry-content blockquote p,
html[data-theme="dark"] .entry-content .ch-note p {
    color: #A7F3D0;                                /* fallback: Emerald 200 */
    color: color-mix(in srgb, var(--ch-ekg-color) 34%, var(--ch-text-main));
}

html[data-theme="dark"] .ch-table-responsive {
    background-color: #1E293B;
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.6);
    scrollbar-color: #64748B #1E293B;
}

html[data-theme="dark"] .ch-table-responsive::-webkit-scrollbar-track {
    background: #1E293B;
}

html[data-theme="dark"] .type-post .entry-content table thead th {
    background-color: #020617;                     /* Slate 950 - keeps the authoritative dark head */
    background-image: linear-gradient(180deg, #020617 0%, #0F172A 160%);
    color: #F1F5F9;
    border-bottom-color: #334155;
}

html[data-theme="dark"] .type-post .entry-content table tbody td {
    color: #CBD5E1;
}

html[data-theme="dark"] .type-post .entry-content table tbody td:first-child {
    color: var(--ch-text-main);
}

html[data-theme="dark"] .type-post .entry-content table tbody tr:hover {
    background-color: #273449;                     /* fallback */
    background-color: color-mix(in srgb, var(--ch-ekg-color) 12%, transparent);
}

/* ==========================================================================
   4. IMAGES & CAPTIONS
   ========================================================================== */
html[data-theme="dark"] .entry-content .ch-image-frame,
html[data-theme="dark"] .entry-content > img {
    box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.55);
}

/* Softer sheen band on dark photos (white would flash too hard) */
html[data-theme="dark"] .entry-content .ch-image-frame::after {
    background: linear-gradient(105deg, transparent 42%, rgba(148, 163, 184, 0.16) 50%, transparent 58%);
}

html[data-theme="dark"] .entry-content .wp-block-gallery .wp-block-image,
html[data-theme="dark"] .entry-content .gallery-item {
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   5. CODE (inline; Prism blocks are natively dark and stay untouched)
   ========================================================================== */
html[data-theme="dark"] .entry-content p code,
html[data-theme="dark"] .entry-content li code,
html[data-theme="dark"] .entry-content td code,
html[data-theme="dark"] .entry-content span code {
    background-color: #0F172A;
    color: #E2E8F0;
    border-color: #475569;
    box-shadow: 0 2px 0 0 rgba(51, 65, 85, 0.5);
}

/* ==========================================================================
   6. COMMENTS & FORMS
   ========================================================================== */
html[data-theme="dark"] .comment-content {
    background: #1E293B;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .comment-form input:not([type="submit"]):not([type="checkbox"]),
html[data-theme="dark"] .comment-form textarea {
    background-color: #1E293B;
    border: 1px solid #334155;
    color: var(--ch-text-main);
}

html[data-theme="dark"] .comment-form input[type="submit"] {
    background-color: #334155;
    color: #F1F5F9;
}

html[data-theme="dark"] .comment-form input[type="submit"]:hover {
    background-color: var(--ch-cta);
    color: #FFFFFF;
}

/* ==========================================================================
   7. HEADER, NAV & SIDEBAR
   ========================================================================== */
html[data-theme="dark"] .site-header {
    background-color: rgba(15, 23, 42, 0.95);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .ch-back-to-top:hover,
html[data-theme="dark"] .ch-theme-toggle-pill:hover {
    background-color: #475569;
}

/* Dark theme active: offer the sun (switch back to light) */
html[data-theme="dark"] .ch-theme-toggle .ch-icon-sun {
    display: block;
}

html[data-theme="dark"] .ch-theme-toggle .ch-icon-moon {
    display: none;
}

/* The global Pro badge (footer, plain links). #1E40AF all but sinks into a
   Slate 900 page; #2563EB is the brightest stop of the Premium fill that
   still holds white text at 5.2:1. */
html[data-theme="dark"] .ch-badge {
    background: #2563EB;
}

/* Header buttons (style.css 7.0b). The rule above would turn the Pro chip
   inside the Premium button blue-on-blue, so it is restated white here. */
html[data-theme="dark"] a.ch-btn-premium .ch-badge {
    background: #FFFFFF;
    color: #1E40AF;
}

/* Newsletter on slate: a translucent emerald wash with Emerald 300 text
   (about 10:1 on the header), Emerald 200 on hover. */
html[data-theme="dark"] a.ch-btn-newsletter,
html[data-theme="dark"] a.ch-btn-newsletter:visited {
    border-color: rgba(52, 211, 153, 0.32);
    background-color: rgba(16, 185, 129, 0.1);
    color: #6EE7B7;
}

html[data-theme="dark"] a.ch-btn-newsletter svg {
    color: #34D399;
}

html[data-theme="dark"] a.ch-btn-newsletter:hover,
html[data-theme="dark"] a.ch-btn-newsletter:focus-visible,
html[data-theme="dark"] a.ch-btn-newsletter:active {
    border-color: rgba(52, 211, 153, 0.55);
    background-color: rgba(16, 185, 129, 0.18);
    color: #A7F3D0;
}

html[data-theme="dark"] a.ch-btn-newsletter:hover svg,
html[data-theme="dark"] a.ch-btn-newsletter:focus-visible svg {
    color: #6EE7B7;
}

/* "Also in CartHacker Premium" strip (style.css 7.0c): a blue wash on slate,
   Blue 200 text (about 11:1 on the dark card) and Blue 300 icons. */
html[data-theme="dark"] .ch-pro-also-label {
    color: #93C5FD;
}

html[data-theme="dark"] .ch-pro-also-item {
    border-color: rgba(147, 197, 253, 0.3);
    background-color: rgba(59, 130, 246, 0.12);
    color: #BFDBFE;
}

html[data-theme="dark"] .ch-pro-also-item svg {
    color: #93C5FD;
}

/* --- 7.1 Mobile header bar + slide-down panel (style.css sections 7.1 / 7.2).
   Scoped to the mobile query: the desktop nav keeps its muted-to-main ladder,
   which an unscoped rule here would outrank and flatten. The three header
   controls are borders over transparent fills, so only the border, the panel
   surfaces and the hardcoded hover values need flipping. */
@media (max-width: 768px) {
    html[data-theme="dark"] #site-navigation.toggled .main-nav > ul {
        background-color: #1E293B;
        border-color: #334155;
        box-shadow: 0 26px 44px -20px rgba(0, 0, 0, 0.9);
    }

    html[data-theme="dark"] #site-navigation .main-nav ul li > a {
        color: #E2E8F0;
    }

    html[data-theme="dark"] #site-navigation .main-nav ul li > a:hover,
    html[data-theme="dark"] #site-navigation .main-nav ul li > a:focus {
        color: #6EE7B7;
        background-color: rgba(16, 185, 129, 0.1);
    }

    html[data-theme="dark"] #site-navigation .main-nav ul li.current-menu-item > a,
    html[data-theme="dark"] #site-navigation .main-nav ul li.current-menu-ancestor > a,
    html[data-theme="dark"] #site-navigation .main-nav ul li.current_page_item > a,
    html[data-theme="dark"] #site-navigation .main-nav ul li.current-cat > a,
    html[data-theme="dark"] #site-navigation .main-nav li.ch-tools-item.is-open > a {
        color: #6EE7B7;
    }

    /* The two button rows. The dark row rules above (1,2,4 and 1,3,4) would
       paint the Premium row slate-on-blue and the Newsletter row with the
       generic hover wash, so both restate their own pair at row weight. */
    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-premium > a,
    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-premium > a:hover,
    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-premium > a:focus {
        color: #FFFFFF;
    }

    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-premium > a:hover,
    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-premium > a:focus {
        background-color: #1D4ED8;
        background-image: var(--ch-pro-fill-hi);
    }

    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-cta > a {
        border-color: rgba(52, 211, 153, 0.32);
        background-color: rgba(16, 185, 129, 0.1);
        color: #6EE7B7;
    }

    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-cta > a:hover,
    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-cta > a:focus {
        border-color: rgba(52, 211, 153, 0.55);
        background-color: rgba(16, 185, 129, 0.18);
        color: #A7F3D0;
    }

    html[data-theme="dark"] #site-navigation .main-nav ul li.ch-mobile-group-start {
        border-top-color: #334155;
    }

    /* Ghost controls: hairline only, emerald wash on press */
    html[data-theme="dark"] .ch-theme-toggle-mobile,
    html[data-theme="dark"] .ch-mobile-login,
    html[data-theme="dark"] #mobile-menu-control-wrapper .menu-toggle {
        border-color: #334155;
        color: #E2E8F0 !important;
    }

    html[data-theme="dark"] .ch-theme-toggle-mobile:hover,
    html[data-theme="dark"] .ch-theme-toggle-mobile:focus-visible,
    html[data-theme="dark"] .ch-mobile-login:hover,
    html[data-theme="dark"] .ch-mobile-login:focus-visible,
    html[data-theme="dark"] #mobile-menu-control-wrapper .menu-toggle:hover,
    html[data-theme="dark"] #mobile-menu-control-wrapper .menu-toggle:focus-visible,
    html[data-theme="dark"] #mobile-menu-control-wrapper.toggled .menu-toggle {
        border-color: var(--ch-cta);
        background-color: rgba(16, 185, 129, 0.14) !important;
        color: #6EE7B7 !important;
    }

    html[data-theme="dark"].ch-nav-open body::after {
        background-color: rgba(2, 6, 23, 0.6);
    }

    /* Inside the panel the flyout is a nested row group, not a floating card */
    html[data-theme="dark"] .ch-tools-flyout {
        background-color: transparent;
        border-left-color: #334155;
        box-shadow: none;
    }
}

html[data-theme="dark"] .ch-sidebar-widget {
    background-color: #1E293B;
    box-shadow: 0 18px 36px -30px rgba(0, 0, 0, 0.85);
}

html[data-theme="dark"] .ch-sidebar-widget:hover {
    box-shadow: 0 20px 34px -22px rgba(0, 0, 0, 0.7);
}

/* The avatar ring sits on the card surface, not on white */
html[data-theme="dark"] .ch-author-avatar {
    border-color: #1E293B;
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.4), 0 6px 14px -6px rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .ch-sidebar-widget:hover .ch-author-avatar,
html[data-theme="dark"] .ch-author-avatar-link:focus-visible .ch-author-avatar {
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.65), 0 0 0 3px rgba(16, 185, 129, 0.18), 0 8px 18px -8px rgba(0, 0, 0, 0.75);
}

html[data-theme="dark"] .ch-sticky-sidebar-wrapper {
    scrollbar-color: #475569 transparent;
}

html[data-theme="dark"] .ch-sticky-sidebar-wrapper::-webkit-scrollbar-thumb {
    background: #475569;
}

html[data-theme="dark"] .ch-toc-list::before {
    background-color: #334155;
}

html[data-theme="dark"] .ch-toc-h3 a {
    color: #94A3B8;
}

/* ==========================================================================
   8. POST FOOTER (BREADCRUMBS & NAVIGATION)
   The prev/next cards resolve through local --ch-nav-* tokens declared in
   style.css section 8; re-pointing them here flips both cards at once.
   ========================================================================== */
html[data-theme="dark"] .ch-post-navigation {
    --ch-nav-surface: #0F172A;
    --ch-nav-border: #334155;
    --ch-nav-media: #020617;
    --ch-nav-sheen: rgba(148, 163, 184, 0.20);
    --ch-nav-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.65);
}

html[data-theme="dark"] .ch-nav-fallback {
    color: #475569;
}

/* ==========================================================================
   9. HEAT ENGINE: CONVERSION MODAL
   (EKG accent colors are JS-driven and calibrated to read on both themes)
   ========================================================================== */
html[data-theme="dark"] .ch-heart-attack-modal {
    background: #1E293B;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 40px rgba(16, 185, 129, 0.15);
}

/* ==========================================================================
   10. HOMEPAGE & ARCHIVE GRIDS
   (cards, hero, tools panel; archive .inside-article surface is already
   covered by the GP container override in section 2)
   ========================================================================== */
/* The hero carries its own dark tokens (assets/css/home-hero.css). */
html[data-theme="dark"] .ch-card {
    background-color: #1E293B;
}

html[data-theme="dark"] .ch-card:hover,
html[data-theme="dark"] .archive article:hover .inside-article,
html[data-theme="dark"] .search article:hover .inside-article,
html[data-theme="dark"] .blog:not(.home) article:hover .inside-article {
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .ch-card-media {
    background-color: #0F172A;
}

html[data-theme="dark"] .ch-card-media-fallback {
    color: #334155;
}

/* FREE TOOLS CTA PANEL, DARK.
   The light values live on .ch-tools-panel in style.css. This block redefines
   every one of them, and it has to stay complete: a token named there and
   missing here resolves to nothing, and a background-color reading nothing is
   an invalid declaration that the browser drops in silence, leaving a
   transparent surface with no error anywhere to explain it.

   The panel drops below the page rather than sitting on it. The dark page is
   Slate 900, so a Slate 900 panel would dissolve into it with no boundary.
   #0B1220 sits under the page and the hairline finishes the edge. Text accents
   flip to their 300-400 steps: Emerald 700 and Blue 800 fail on slate. */
html[data-theme="dark"] .ch-tools-panel {
    --ch-tp-surface:      #0B1220;
    --ch-tp-wash:         linear-gradient(168deg, #101B2E 0%, #0B1220 55%, #080E1A 100%);
    --ch-tp-border:       #1E293B;
    --ch-tp-title:        #F8FAFC;
    --ch-tp-body:         #CBD5E1;
    --ch-tp-card:         #131E33;
    --ch-tp-card-hi:      #1B2A46;
    --ch-tp-card-border:  #26344B;
    --ch-tp-name:         #F1F5F9;
    --ch-tp-desc:         #A8B3C4;
    --ch-tp-hint:         #94A3B8;
    --ch-tp-aurora:       rgba(16, 185, 129, 0.26);
    --ch-tp-aurora-2:     rgba(59, 130, 246, 0.16);
    --ch-tp-tex:          rgba(148, 163, 184, 0.07);
    --ch-tp-shadow:       0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 52px -34px rgba(0, 0, 0, 0.9);
    --ch-tp-card-shadow:  0 1px 2px rgba(0, 0, 0, 0.35), 0 22px 44px -28px rgba(0, 0, 0, 0.9);
    --ch-tp-accent:       #34D399;
    --ch-tp-pro:          #93C5FD;
    --ch-tp-visual-speed: radial-gradient(120% 90% at 0% 0%, rgba(16, 185, 129, 0.18), transparent 60%), linear-gradient(160deg, #0F1D2E 0%, #0D1828 100%);
    --ch-tp-visual-badge: radial-gradient(120% 90% at 100% 0%, rgba(59, 130, 246, 0.18), transparent 60%), linear-gradient(160deg, #0E1A30 0%, #0D1828 100%);
    --ch-tp-mock:         #1B2840;
    --ch-tp-mock-line:    #2C3B55;
    --ch-tp-mock-ink:     #F1F5F9;
    --ch-tp-mock-mute:    #94A3B8;
    --ch-tp-mock-shadow:  0 14px 30px -18px rgba(0, 0, 0, 0.8);
    --ch-tp-skel:         #2C3B55;
    --ch-tp-good:         #6EE7B7;
    --ch-tp-poor:         #FCA5A5;
    --ch-tp-atc-bg:       #F1F5F9;
    --ch-tp-atc-ink:      #0F172A;
    --ch-tp-chip:         rgba(148, 163, 184, 0.12);
    --ch-tp-chip-ink:     #CBD5E1;
    --ch-tp-input:        #0F172A;
    --ch-tp-input-line:   #334155;
    --ch-tp-more:         #101A2D;
}

html[data-theme="dark"] .ch-tools-kicker {
    background-color: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.42);
}

html[data-theme="dark"] .ch-tool-mini-ico {
    background-color: rgba(16, 185, 129, 0.14);
}

html[data-theme="dark"] .ch-tool-facts li.is-pro::before { background-color: #60A5FA; }

/* ==========================================================================
   11. STATIC PAGES: LEGAL DOCUMENTS & CONTACT
   (form fields inherit dark surfaces automatically via --ch-bg-main/--ch-border)
   ========================================================================== */
html[data-theme="dark"] .ch-legal,
html[data-theme="dark"] .ch-contact-card {
    background-color: #1E293B;
}

html[data-theme="dark"] .ch-legal-body a,
html[data-theme="dark"] .ch-email {
    border-bottom-color: rgba(96, 165, 250, 0.4);
}

html[data-theme="dark"] .ch-field-error {
    color: #F87171;
}

html[data-theme="dark"] .ch-form-alert {
    color: #FCA5A5;
    background-color: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
}

/* The support scope card is the DevSecOps panel in dark only; light mode is
   a white card (style.css). Every colour the light rules set is restated. */
html[data-theme="dark"] .ch-scope-card {
    background-color: #0F172A;
    background-image: none;
    border-color: #334155;
    border-top-color: #10B981;
    box-shadow: none;
}

html[data-theme="dark"] .ch-scope-card h2 { color: #F8FAFC; }
html[data-theme="dark"] .ch-scope-card h2 svg { color: #34D399; }
html[data-theme="dark"] .ch-scope-card p { color: #94A3B8; }
html[data-theme="dark"] .ch-scope-card li { color: #CBD5E1; }
html[data-theme="dark"] .ch-scope-exception { border-top-color: #334155; }

/* ==========================================================================
   12. AUTHOR E-E-A-T SYSTEM
   Every panel on the dossier page resolves through the --ch-dos-* tokens
   declared in style.css section 15.2; re-pointing them here flips the hero AND
   the contact panel (surface, tiles, rules, type, glow, shadows) in one block.
   Values follow the standard ladder: page #0F172A > card #1E293B > well
   #0F172A, hover lift #273449. */
html[data-theme="dark"] .ch-author-page {
    --ch-fp-sheen: rgba(226, 232, 240, 0.07);      /* a white wash would blow out on slate */

    --ch-dos-surface: #1E293B;
    --ch-dos-surface-2: #172032;
    --ch-dos-tile: #0F172A;
    --ch-dos-tile-hover: #273449;
    --ch-dos-border: #334155;
    --ch-dos-border-soft: #475569;
    --ch-dos-name: #F8FAFC;
    --ch-dos-body: #CBD5E1;
    --ch-dos-muted: #94A3B8;
    --ch-dos-faint: #64748B;
    --ch-dos-accent: #10B981;                      /* Emerald 500 reads AA on slate */
    --ch-dos-accent-bg: rgba(16, 185, 129, 0.12);
    --ch-dos-accent-bg-hi: rgba(16, 185, 129, 0.2);
    --ch-dos-accent-line: rgba(16, 185, 129, 0.32);
    --ch-dos-grid: rgba(148, 163, 184, 0.07);
    --ch-dos-glow: rgba(16, 185, 129, 0.16);
    --ch-dos-shadow: 0 26px 50px -36px rgba(0, 0, 0, 0.85);
    --ch-dos-shadow-lift: 0 16px 28px -16px rgba(0, 0, 0, 0.6);
    --ch-dos-ring: rgba(16, 185, 129, 0.15);
    --ch-dos-avatar-shadow: 0 10px 26px -12px rgba(2, 6, 23, 0.9);
}

html[data-theme="dark"] .ch-footprint-card {
    background-color: #1E293B;
}

html[data-theme="dark"] .ch-footprint-card:hover {
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .ch-footprint-icon {
    background-color: #0F172A;
}

html[data-theme="dark"] .ch-eeat-icon:hover {
    background-color: rgba(16, 185, 129, 0.12);
}

html[data-theme="dark"] .ch-author-page .page-numbers {
    background-color: #1E293B;
}

html[data-theme="dark"] .ch-author-page .page-numbers.current {
    background-color: var(--ch-cta);
    color: #FFFFFF;
}

/* ==========================================================================
   13. ACCOUNT SYSTEM (header dropdown + Learning Center deck & gate)
   ========================================================================== */
html[data-theme="dark"] .ch-account-dropdown {
    background-color: #1E293B;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .ch-account-links a:hover,
html[data-theme="dark"] .ch-account-links a:focus-visible {
    background-color: #273449;
    color: #34D399 !important;
}

html[data-theme="dark"] .ch-account-links a:hover svg,
html[data-theme="dark"] .ch-account-links a:focus-visible svg {
    color: #34D399;
}

html[data-theme="dark"] .ch-account-plan {
    background-color: #0F172A;
}

/* The rule above outranks .ch-account-plan.is-premium and used to flatten the
   Premium chip to a near-black slab; restate the blue fill at this weight. */
html[data-theme="dark"] .ch-account-plan.is-premium {
    color: #FFFFFF;
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%);
    border-color: rgba(147, 197, 253, 0.4);
    box-shadow: none;
}

html[data-theme="dark"] .ch-account-signout:hover {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #F87171 !important;
}

html[data-theme="dark"] .ch-account-signout:hover svg {
    color: #F87171;
}

html[data-theme="dark"] .ch-account-initial {
    background: linear-gradient(135deg, #334155, #0F172A);
}

/* --- 13.1 Learning Center deck ---------------------------------------------
   The deck is a recessed well inside the article card (#1E293B), so it drops to
   Slate 900 and its Up Next card rises back to Slate 800. Re-pointing the local
   tokens flips every surface, border and shadow in the section 16.3 block. */
html[data-theme="dark"] .ch-lc-deck {
    --ch-lc-surface: #0F172A;
    --ch-lc-raised: #1E293B;
    --ch-lc-border: #334155;
    --ch-lc-border-strong: #475569;
    --ch-lc-track: #1E293B;
    --ch-lc-hatch: rgba(148, 163, 184, 0.22);
    --ch-lc-media: #020617;
    --ch-lc-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.8);
    --ch-lc-shadow-lift: 0 18px 30px -14px rgba(0, 0, 0, 0.6);
    --ch-lc-sheen: rgba(148, 163, 184, 0.20);
}

/* Emerald 700 has no contrast left on Slate 900 - lift the completed state */
html[data-theme="dark"] .ch-lc-toggle.is-read,
html[data-theme="dark"] .ch-lc-toggle.is-read:focus {
    background-color: rgba(16, 185, 129, 0.14) !important;
    color: #6EE7B7 !important;
}

html[data-theme="dark"] .ch-lc-next-index {
    background-color: rgba(2, 6, 23, 0.88);
}

/* --- 13.2 Learning Center rail (sidebar) --- */
html[data-theme="dark"] .ch-lc-rail-widget {
    --ch-lc-raised: #0F172A;
    --ch-lc-border: #334155;
    --ch-lc-border-strong: #475569;
    --ch-lc-track: #0F172A;
    --ch-lc-hatch: rgba(148, 163, 184, 0.22);
    --ch-lc-spine: #334155;
    --ch-lc-node: #1E293B;
}

html[data-theme="dark"] a.ch-lc-rail-link:hover {
    background-color: rgba(16, 185, 129, 0.10);
}

/* --- 13.3 Registration gate --- */
html[data-theme="dark"] .ch-lc-gate {
    --ch-gate-surface: #1E293B;
    --ch-gate-well: #0F172A;
    --ch-gate-border: #334155;
}

html[data-theme="dark"] .ch-lc-gate-veil {
    background-color: rgba(2, 6, 23, 0.82);
}

html[data-theme="dark"] .ch-lc-gate-card {
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 60px -20px rgba(16, 185, 129, 0.28);
}