/* File: /style.css
Theme Name: CartHacker Core
Theme URI: https://carthacker.com
Description: Advanced Custom Logic & Architecture for CartHacker
Author: Adrian Wadowski
Template: generatepress
Version: 1.5.0
Text Domain: carthacker-core
*/

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */
:root {
    --ch-text-main: #0F172A;       /* Slate 900 */
    --ch-text-muted: #64748B;      /* Slate 500 */
    --ch-bg-main: #F8FAFC;         /* Lightest Gray/Blue for reading */
    --ch-bg-card: #FFFFFF;         /* Elevated surface above --ch-bg-main: cards, dialogs, popovers */
    --ch-accent: #2563EB;          /* Blue 600 - Links */
    --ch-accent-hover: #1E40AF;    /* Blue 800 */
    --ch-cta: #10B981;             /* Emerald 500 - Action Buttons */
    --ch-cta-text: #047857;        /* Emerald 700 - emerald TEXT on light surfaces: 5.5:1 on white, where #10B981 is 2.5:1 */
    --ch-code-bg: #1E293B;         /* Slate 800 - Prism Override */
    --ch-border: #E2E8F0;          /* Slate 200 */
    --ch-highlight: #EFF6FF;       /* Blue 50 - Blockquotes & Highlights */

    /* THE PREMIUM BUTTON. Every button that sells or opens CartHacker Premium
       (header, mobile menu, /premium/, dashboard upsells, the article modal)
       paints from these, so the one action that pays for the site looks the
       same everywhere (Adrian, 2026-10-03). Royal blue into indigo; white text
       is 5.2:1 on the lightest stop (#2563EB) and 6.3:1 on #4F46E5. */
    --ch-pro-fill:    linear-gradient(135deg, #1D4ED8 0%, #2563EB 48%, #4F46E5 100%);
    --ch-pro-fill-hi: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 48%, #4338CA 100%);
    --ch-pro-sweep:   linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    --ch-pro-glow:    inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 20px -8px rgba(37, 99, 235, 0.65);
    --ch-pro-glow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 28px -10px rgba(67, 56, 202, 0.7);
    --ch-pro-line:    rgba(30, 64, 175, 0.55);
    --ch-pro-ring:    rgba(96, 165, 250, 0.6);
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & SMOOTHING
   ========================================================================== */
body {
    background-color: var(--ch-bg-main);
    color: var(--ch-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { 
    color: var(--ch-accent); 
    transition: color 0.2s ease-in-out; 
}

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

/* ==========================================================================
   3. SINGLE POST CONTENT UX (E-E-A-T Optimized)
   ========================================================================== */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4,
.single-post .entry-content > table {
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
}

.single-post .entry-content > p { 
    font-size: 1.125rem; 
    margin-bottom: 1.5rem; 
    line-height: 1.65; 
}

/* Fluid Typography dla Głównego Tytułu Artykułu (H1) */
.single-post header.entry-header .entry-title {
    font-size: clamp(1.8rem, 3.5vw + 0.5rem, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    color: var(--ch-text-main);
    word-break: break-word;
}

/* Fluid Typography dla H2 */
.single-post .entry-content h2 {
    font-weight: 800; 
    margin-top: 3rem; 
    margin-bottom: 1rem; 
    font-size: clamp(1.5rem, 4vw + 0.5rem, 1.8rem);
    border-bottom: 1px solid var(--ch-border); 
    padding-bottom: 0.5rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* Fluid Typography dla H3 */
.single-post .entry-content h3 { 
    font-weight: 700; 
    margin-top: 2rem; 
    margin-bottom: 0.75rem; 
    font-size: clamp(1.25rem, 3vw + 0.5rem, 1.4rem); 
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* --- Links Inside Content (Technical & Clean) --- */
.entry-content a:not(.ch-btn):not(.wp-block-image a):not(.wp-block-button__link) {
    color: var(--ch-accent);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(37, 99, 235, 0.3);
    text-underline-offset: 3px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.entry-content a:not(.ch-btn):not(.wp-block-image a):not(.wp-block-button__link):hover {
    color: var(--ch-accent-hover);
    text-decoration-color: var(--ch-accent-hover);
    background-color: rgba(37, 99, 235, 0.08);
    border-radius: 2px;
}

/* --- Content Buttons (CSS Variables Injection System) --- */
.entry-content .ch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-color, var(--ch-accent));
    color: #ffffff !important;
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    margin: 0.5rem 0;
    white-space: nowrap;
}

.entry-content .ch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    filter: brightness(1.1);
}

.entry-content .ch-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* --- Base Structural Styles (Animations in heat-engine.css) ---
   Heat-reactive signal card: the tint, border, glow AND the copy color are all
   mixed from --ch-ekg-color, so the whole quote warms up with the reader
   (emerald -> blue -> amber -> red). Plain fallbacks precede every color-mix()
   declaration for legacy engines. Field notes ([ch_note], an <aside>, since a
   first-hand note is not a quotation) wear the same card and trace. */
.entry-content blockquote,
.entry-content .ch-note {
    max-width: 75ch;
    margin: 2.5rem auto;
    padding: 1.75rem 2.25rem 1.75rem 3.4rem;
    position: relative;
    background-color: var(--ch-highlight);
    background-color: color-mix(in srgb, var(--ch-ekg-color) 6%, var(--ch-bg-main));
    background-image: radial-gradient(ellipse 120% 130% at 0% 0%, color-mix(in srgb, var(--ch-ekg-color) 9%, transparent), transparent 62%);
    border: 1px solid var(--ch-border);
    border-color: color-mix(in srgb, var(--ch-ekg-color) 24%, var(--ch-border));
    border-left: none;
    border-radius: 0 12px 12px 0;
    font-style: normal;
    overflow: hidden;
    box-shadow: 0 14px 30px -18px var(--ch-ekg-glow);
    transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Oversized closing quote watermark - tinted by the live heat color */
.entry-content blockquote::after {
    content: '\201D';
    position: absolute;
    top: -0.4rem;
    right: 0.9rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ch-ekg-color);
    opacity: 0.13;
    pointer-events: none;
    z-index: 1;
    transition: color 0.5s ease;
}

.entry-content blockquote p,
.entry-content .ch-note p {
    margin-bottom: 0;
    color: #047857;
    color: color-mix(in srgb, var(--ch-ekg-color) 52%, var(--ch-text-main));
    font-weight: 500;
    font-size: 1.16rem;
    line-height: 1.65;
    position: relative;
    z-index: 2;
    transition: color 0.5s ease;
}

.entry-content blockquote p + p,
.entry-content .ch-note p + p {
    margin-top: 1rem;
}

/* Zrekonstruowana struktura list (Wymagane do EKG Node System) */
.entry-content ul { 
    list-style-type: none; 
    padding-left: 1rem; 
}

.entry-content ul > li { 
    position: relative; 
    padding-left: 2rem; 
    margin-bottom: 0.75rem; 
    font-size: 1.125rem; 
    line-height: 1.6; 
}

.entry-content ol { 
    list-style-type: none; 
    padding-left: 1rem; 
    counter-reset: ch-ordered-list; 
}

.entry-content ol > li { 
    position: relative; 
    padding-left: 3.5rem; 
    margin-bottom: 1.5rem; 
    font-size: 1.125rem; 
    line-height: 1.6; 
}

/* Zrekonstruowana struktura tabeli (Wymagane do Thead Overlay System & Responsive Scroll) */
.ch-table-container {
    position: relative;
    margin: 2rem auto;
    width: 100%;
    max-width: 100%;
}

.ch-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--ch-border);
    box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.28);
    background-color: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #64748B var(--ch-bg-main);
}

.ch-table-responsive::-webkit-scrollbar { 
    height: 8px; 
}

.ch-table-responsive::-webkit-scrollbar-track { 
    background: var(--ch-bg-main); 
    border-radius: 0 0 6px 6px; 
}

.ch-table-responsive::-webkit-scrollbar-thumb { 
    background: #64748B; 
    border-radius: 6px; 
}

.ch-table-responsive::-webkit-scrollbar-thumb:hover { 
    background: #475569; 
}

.type-post .entry-content table {
    width: 100%;
    min-width: 100%; /* Usunięto 750px hard-lock, aby uniknąć fałszywych scrolli */
    border-collapse: collapse;
    margin: 0;
    font-size: 0.95rem;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.type-post .entry-content table thead { 
    position: relative; 
}

/* Command-deck header: hardcoded slate panel identical in both themes (brand
   rule), with JetBrains Mono uppercase labels mirroring the site's kickers. */
.type-post .entry-content table thead th {
    background-color: #0F172A;
    background-image: linear-gradient(180deg, #0F172A 0%, #1E293B 160%);
    color: #E2E8F0;
    text-align: left;
    padding: 0.95rem 1rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #334155;
    white-space: nowrap; /* To w pełni zabezpiecza przed nadmiernym łamaniem struktury kolumn */
}

.type-post .entry-content table tbody td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid var(--ch-border);
    color: #334155;
    vertical-align: middle;
    transition: box-shadow 0.25s ease;
}

/* First column reads as the row's label */
.type-post .entry-content table tbody td:first-child {
    font-weight: 600;
    color: var(--ch-text-main);
}

.type-post .entry-content table tbody tr {
    transition: background-color 0.25s ease;
}

.type-post .entry-content table tbody tr:nth-child(even) {
    background-color: var(--ch-bg-main);
}

/* Heat-reactive row hover: tint + inset accent bar in the live EKG color */
.type-post .entry-content table tbody tr:hover {
    background-color: #F1F5F9;
    background-color: color-mix(in srgb, var(--ch-ekg-color) 7%, transparent);
}

.type-post .entry-content table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--ch-ekg-color);
}

/* Wskaznik mozliwosci scrollowania w tabeli (Pill) */
.ch-table-scroll-pill {
    position: absolute; 
    top: -14px; 
    right: 16px; 
    background-color: var(--ch-cta); 
    color: #ffffff;
    font-family: 'Inter', sans-serif; 
    font-size: 0.75rem; 
    font-weight: 700; 
    padding: 0.35rem 0.85rem;
    border-radius: 20px; 
    display: flex; 
    align-items: center; 
    gap: 0.35rem; 
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease, transform 0.3s ease; 
    transform: translateY(8px); 
    z-index: 20;
}

.ch-table-container.is-scrollable:not(.is-scrolled) .ch-table-scroll-pill {
    opacity: 1; 
    transform: translateY(0); 
    animation: ch-pill-bounce 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-table-scroll-pill svg { 
    width: 14px; 
    height: 14px; 
}

@keyframes ch-pill-bounce { 
    0%, 100% { transform: translateX(0); } 
    50% { transform: translateX(5px); } 
}

/* ==========================================================================
   4. IMAGES & SEMANTIC CAPTIONS (STRICT FRAME ARCHITECTURE)
   ========================================================================== */
.entry-content .ch-image-wrapper { 
    margin: 3rem auto 2rem; 
    width: 100%; 
    max-width: 1200px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    position: relative; 
}

.entry-content .ch-image-frame {
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ch-border);
    border-bottom: 4px solid var(--ch-ekg-color);
    box-shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.28);
    transition: border-color 0.5s ease, box-shadow 0.4s ease;
}

/* Ambient sheen: a light band sweeps across the photo on hover (same living
   effect as the auth deck). No base transition = instant, invisible reset. */
.entry-content .ch-image-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.22) 50%, transparent 58%);
    transform: translateX(-130%);
    pointer-events: none;
    z-index: 3;
}

.entry-content .ch-image-wrapper:hover .ch-image-frame::after {
    transform: translateX(130%);
    transition: transform 0.9s ease;
}

.entry-content .ch-image-wrapper:hover .ch-image-frame {
    box-shadow: 0 18px 40px -18px var(--ch-ekg-glow), 0 10px 26px -16px rgba(15, 23, 42, 0.28);
}

.entry-content .ch-image-frame img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.001);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* A straight, slow zoom on hover (Adrian, 2026-10-05: the old tilt with a
   bouncing overshoot made screenshots harder to read). The figure opens in
   the image viewer on click (assets/js/image-zoom.js), so the hover only
   hints at it and never crops more than 1.5% off an edge. */
.entry-content .ch-image-wrapper:hover .ch-image-frame img {
    transform: scale(1.03);
}

.entry-content > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--ch-border);
    border-bottom: 4px solid var(--ch-ekg-color);
    box-shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.28);
    transition: border-color 0.5s ease, box-shadow 0.4s ease;
}

.entry-content .ch-image-caption, 
.wp-caption-text, 
.wp-element-caption { 
    display: block; 
    text-align: center; 
    font-size: 0.875rem; 
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace; 
    color: var(--ch-text-muted); 
    margin-top: 1rem; 
    padding-bottom: 0.5rem; 
    border-bottom: 1px solid var(--ch-border); 
    max-width: 80%; 
}

.entry-content .ch-image-caption::before, 
.wp-element-caption::before { 
    content: 'Fig. '; 
    font-weight: 700; 
    color: var(--ch-ekg-color); 
    transition: color 0.5s ease; 
}

.entry-content .wp-block-gallery, 
.entry-content .gallery { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.5rem; 
    margin: 3rem auto; 
    padding: 0; 
    list-style: none; 
    max-width: 1200px; 
}

/* Gallery tiles share the figure DNA: bordered frame, EKG-colored base edge,
   lift + heat glow on hover, inner zoom masked by the tile. */
.entry-content .wp-block-gallery .wp-block-image,
.entry-content .gallery-item {
    margin: 0;
    width: 100%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ch-border);
    border-bottom: 3px solid var(--ch-ekg-color);
    background-color: var(--ch-bg-main);
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.18);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.5s ease;
}

.entry-content .wp-block-gallery .wp-block-image:hover,
.entry-content .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px -16px var(--ch-ekg-glow), 0 10px 24px -14px rgba(15, 23, 42, 0.22);
}

.entry-content .wp-block-gallery .wp-block-image img,
.entry-content .gallery-item img {
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4/3;
    border-radius: 0;
    box-shadow: none;
    transform: scale(1.001);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.entry-content .wp-block-gallery .wp-block-image:hover img,
.entry-content .gallery-item:hover img {
    transform: scale(1.06);
}

.entry-content .wp-block-gallery figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(4px);
    color: #F8FAFC;
    padding: 0.7rem 0.75rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    text-align: center;
    border-radius: 0;
    margin: 0;
    border: none;
    max-width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 20;
}

.entry-content .wp-block-gallery .wp-block-image:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

/* 'Fig.' prefix on the dark overlay: heat color lifted toward white for contrast */
.entry-content .wp-block-gallery figcaption::before {
    color: #A7F3D0;
    color: color-mix(in srgb, var(--ch-ekg-color) 55%, #FFFFFF);
}

/* ==========================================================================
   5. PRISM.JS CODE BLOCKS & INLINE CODE
   ========================================================================== */
.entry-content p code, 
.entry-content li code, 
.entry-content td code, 
.entry-content span code {
    background-color: #F1F5F9; 
    color: #0F172A; 
    padding: 0.2em 0.4em; 
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace; 
    font-size: 0.85em; 
    font-weight: 600;
    border: 1px solid #CBD5E1; 
    box-shadow: 0 2px 0 0 rgba(203, 213, 225, 0.4); 
    word-break: break-word;
}

pre[class*="language-"], 
code[class*="language-"] { 
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace !important; 
    font-size: 0.9rem !important; 
}

div.code-toolbar {
    position: relative;
    max-width: 800px;
    margin: 2.75rem auto;
    border-radius: 12px;
    box-shadow: 0 18px 40px -20px rgba(2, 6, 23, 0.55), 0 8px 30px -14px var(--ch-ekg-glow);
    transition: box-shadow 0.5s ease;
}

.entry-content div.code-toolbar pre {
    background-color: var(--ch-code-bg) !important;
    border-radius: 0 0 12px 12px;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 1px solid #334155;
    border-top: none;
    overflow-x: auto;
}

/* --- Terminal chrome (injected by heat-engine.js): traffic lights + language
   + line count. Hardcoded deep slate, identical in light and dark mode. --- */
.ch-code-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    height: 2.4rem;
    background-color: #0B1120;
    border: 1px solid #334155;
    border-bottom: 1px solid #1E293B;
    border-radius: 12px 12px 0 0;
    padding: 0 6rem 0 1rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    user-select: none;
}

.ch-code-dots {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.ch-code-dots i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ch-code-dots i:nth-child(1) { background-color: #F87171; }
.ch-code-dots i:nth-child(2) { background-color: #FBBF24; }
.ch-code-dots i:nth-child(3) {
    background-color: #34D399;
    animation: ch-code-live 2.4s ease-out infinite;
}

@keyframes ch-code-live {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* Language label follows the live heat color, lifted toward white for contrast */
.ch-code-lang {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #F8FAFC;
    color: color-mix(in srgb, var(--ch-ekg-color) 60%, #F8FAFC);
    transition: color 0.5s ease;
}

.ch-code-lines {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #64748B;
    white-space: nowrap;
}

pre::-webkit-scrollbar { 
    height: 8px; 
} 

pre::-webkit-scrollbar-track { 
    background: #0F172A; 
    border-radius: 0 0 8px 8px; 
} 

pre::-webkit-scrollbar-thumb { 
    background: #475569; 
    border-radius: 8px; 
} 

pre::-webkit-scrollbar-thumb:hover { 
    background: #64748B; 
}

/* Copy button lives inside the terminal chrome; half-visible at rest so it is
   discoverable, fully lit on hover. The toolbar spans exactly the header's
   2.4rem and centers the button in it: Prism wraps the button in an
   inline-block, whose baseline used to push it 2px off the header's bottom
   edge. A fixed min-width keeps "Copy" and "Copied!" the same size, and the
   header reserves that width (padding-right 6rem), so the confirmation never
   covers the line count. */
div.code-toolbar > .toolbar {
    position: absolute;
    top: 0;
    right: 0.6rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    opacity: 0.55;
    transition: opacity 0.25s ease-in-out;
    z-index: 12;
}

div.code-toolbar > .toolbar > .toolbar-item {
    display: flex;
    align-items: center;
}

div.code-toolbar:hover > .toolbar {
    opacity: 1;
}

div.code-toolbar > .toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.65rem;
    min-width: 4.6rem;
    line-height: 1;
    white-space: nowrap;
    background: #1E293B;
    color: #E2E8F0;
    border: 1px solid #475569;
    border-radius: 6px;
    padding: 0 0.65rem;
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Hover and focus: the heat color lights the border and glow, the fill is that
   color sunk into the terminal slate. White on the raw phase color failed
   contrast on emerald (2.5:1) and amber (2.1:1); on the sunk fill it clears
   10:1 in every phase. */
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus-visible {
    background: #0C403B;
    background: color-mix(in srgb, var(--ch-ekg-color) 28%, #0B1120);
    color: #FFFFFF;
    border-color: var(--ch-ekg-color);
    box-shadow: 0 0 12px var(--ch-ekg-glow);
    outline: none;
}

/* ==========================================================================
   6. COMMENTS SECTION
   ========================================================================== */
.comments-area { 
    max-width: 75ch; 
    margin: 4rem auto 2rem; 
    border-top: 2px solid var(--ch-border); 
    padding-top: 3rem; 
}

.comment-author .fn { 
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace; 
    font-weight: 700; 
    font-size: 1.05rem; 
}

.comment-meta { 
    font-size: 0.85rem; 
    color: var(--ch-text-muted); 
}

.comment-content { 
    background: #FFFFFF; 
    border: 1px solid var(--ch-border); 
    padding: 1.5rem; 
    border-radius: 8px; 
    margin-top: 1rem; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}

.comment .avatar { 
    border-radius: 4px; 
}

/* ==========================================================================
   7. HEADER, NAV & SIDEBAR
   ========================================================================== */
.site-header { 
    position: sticky; 
    top: 0; 
    z-index: 100; 
    background-color: rgba(255, 255, 255, 0.98); 
    backdrop-filter: blur(8px); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}

.ch-back-to-top { 
    display: none; 
    align-items: center; 
    justify-content: center; 
    background-color: var(--ch-border); 
    color: var(--ch-text-main); 
    padding: 0.4rem; 
    border-radius: 6px; 
    transition: background-color 0.2s ease, transform 0.2s ease; 
}

.ch-back-to-top:hover { 
    background-color: #CBD5E1; 
    color: var(--ch-text-main); 
    transform: translateY(-2px); 
}

.site-header.is-scrolled .ch-back-to-top {
    display: flex;
}

/* --- Dark/Light Theme Toggle --- */
/* Shared pill (desktop utility nav + mobile header), same visual language as .ch-back-to-top */
.ch-theme-toggle-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ch-border);
    color: var(--ch-text-main);
    padding: 0.4rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    line-height: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ch-theme-toggle-pill:hover {
    background-color: #CBD5E1;
    color: var(--ch-text-main);
    transform: translateY(-2px);
}

/* Light theme active: offer the moon (switch to dark). Flipped in dark-mode.css. */
.ch-theme-toggle .ch-icon-sun {
    display: none;
}

/* Pro badge: global scope - used in the header utility nav, mobile menu, and footer */
.ch-badge {
    background: #1E40AF;
    color: white;
    font-size: 0.65rem;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* --- Navigation Surface: fully transparent, the sticky header paints the background.
   Kills GeneratePress inline nav backgrounds (the white side-strips visible in dark mode). --- */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation ul,
.main-navigation .main-nav ul {
    background-color: transparent;
}

/* --- Native SVG Logo Styles --- */
.site-logo {
    display: flex;
    align-items: center;
}

.ch-logo-link {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* EKSTREMALNIE zacieśniona luka, ikona łączy się z tekstem */
    text-decoration: none !important;
    color: var(--ch-text-main) !important;
}

.ch-logo-link:hover,
.ch-logo-link:focus,
.ch-logo-link:active {
    color: var(--ch-text-main) !important;
}

.ch-logo-icon {
    flex-shrink: 0;
    display: block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-logo-link:hover .ch-logo-icon {
    transform: scale(1.03);
}

/* Płynne dziedziczenie kolorów po nowym atrybucie fill */
.ch-logo-path-main {
    fill: var(--ch-text-main);
    transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-logo-path-cta,
.ch-logo-node-cta {
    fill: var(--ch-cta);
    transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.5vw, 1.7rem); /* Lekka korekta fontu by dać "masę" koszykowi */
    letter-spacing: -1px;
    color: var(--ch-text-main);
    line-height: 1;
    margin-top: 0;
}

@media (min-width: 769px) {
    .hide-on-desktop { 
        display: none !important; 
    }
    
    body.nav-float-right .inside-header { 
        display: flex !important; 
        flex-wrap: wrap !important; 
        align-items: center; 
        justify-content: space-between; 
        max-width: 1200px; 
        margin: 0 auto; 
        padding: 0.5rem 2rem 0 !important; 
        transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .site-logo { 
        flex: 0 0 250px !important; 
        max-width: 250px; 
        margin-right: auto; 
    }
    
    .ch-utility-nav { 
        flex: 1 1 auto; 
        display: flex; 
        align-items: center; 
        justify-content: flex-end; 
        gap: 1.5rem; 
    }
    
    /* overflow stays visible so the Tools flyout can escape the nav bar; the
       collapse animation only needs clipping while is-scrolled is applied */
    #site-navigation {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-top: 0.5rem !important;
        border-top: 1px solid var(--ch-border);
        clear: both !important;
        float: none !important;
        transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease, border 0.3s ease !important;
        max-height: 100px;
        opacity: 1;
        overflow: visible;
    }
    
    .site-header.is-scrolled #site-navigation {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        border-top-color: transparent !important;
        overflow: hidden;
    }
    
    .site-header.is-scrolled .inside-header {
        padding: 0.85rem 2rem !important;
    }
    
    #site-navigation .inside-navigation { 
        display: block !important; 
        width: 100% !important; 
        max-width: 1000px !important; 
        margin: 0 auto !important; 
        padding: 0 !important; 
    }
    
    .main-nav { 
        width: 100% !important; 
    }
    
    .main-nav > ul { 
        display: flex !important; 
        align-items: center; 
        justify-content: space-between !important; 
        gap: 0 !important; 
        list-style: none; 
        margin: 0; 
        padding: 0; 
        width: 100%; 
    }
    
    .main-nav > ul > li { 
        flex: 0 1 auto; 
        margin: 0 !important; 
        clear: none !important; 
        float: none !important; 
    }
    
    /* Category nav states: muted base > main on hover > main + emerald indicator when active.
       #site-navigation prefix outguns GeneratePress customizer inline CSS on current-menu-item. */
    #site-navigation .main-nav > ul > li > a {
        position: relative;
        font-weight: 600;
        color: var(--ch-text-muted);
        text-decoration: none;
        transition: color 0.2s ease;
        line-height: 1;
        white-space: nowrap;
        font-size: clamp(12px, 1.2vw, 14px) !important;
        padding: 0.5rem 0.25rem 0.85rem !important;
        letter-spacing: -0.2px;
    }

    #site-navigation .main-nav > ul > li > a::after {
        content: '';
        position: absolute;
        left: 0.25rem;
        right: 0.25rem;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background-color: var(--ch-cta);
        transform: scaleX(0);
        transform-origin: center;
        opacity: 0;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    }

    #site-navigation .main-nav > ul > li > a:hover {
        color: var(--ch-text-main);
        background: none;
    }

    #site-navigation .main-nav > ul > li > a:hover::after {
        transform: scaleX(1);
        opacity: 1;
    }

    #site-navigation .main-nav > ul > li.current-menu-item > a,
    #site-navigation .main-nav > ul > li.current-menu-ancestor > a,
    #site-navigation .main-nav > ul > li.current_page_item > a,
    #site-navigation .main-nav > ul > li.current-cat > a {
        color: var(--ch-text-main);
        font-weight: 700;
    }

    #site-navigation .main-nav > ul > li.current-menu-item > a::after,
    #site-navigation .main-nav > ul > li.current-menu-ancestor > a::after,
    #site-navigation .main-nav > ul > li.current_page_item > a::after,
    #site-navigation .main-nav > ul > li.current-cat > a::after {
        transform: scaleX(1);
        opacity: 1;
    }
    
    .ch-utility-nav a { 
        font-size: 0.85rem; 
        font-weight: 600; 
        text-decoration: none; 
    }
    
    .ch-link-login { 
        color: var(--ch-text-muted); 
        transition: color 0.2s; 
    }
    
    .ch-link-login:hover { 
        color: var(--ch-text-main); 
    }
    
    /* Premium and Newsletter are the two header buttons, defined once for the
       desktop row and the mobile menu in 7.0b. A tighter gap inside the pair
       reads them as one group next to the plain Log In link. */
    .ch-utility-nav .ch-btn-premium {
        margin-left: -0.75rem;
    }
}

/* --- 7.0b HEADER BUTTONS: Premium (primary) and Newsletter (secondary) -------
   Adrian, 2026-10-03: Premium is the more important action, so it is the one
   filled button, in the Premium blue every Premium mark uses (tokens in :root),
   with a sparkle, the Pro chip, a glow and a light sweep on hover. Newsletter
   steps down to a soft emerald button with an envelope: still green, still
   clearly clickable, never competing with Premium. Both carry a:hover at
   0,2,1 so the global a:hover blue (0,1,1) never repaints them, and declare
   color and background on every state in both themes (dark-mode.css). */
a.ch-btn-premium,
a.ch-btn-premium:visited {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 0.8rem 0 0.75rem;
    border: 1px solid var(--ch-pro-line);
    border-radius: 10px;
    background-color: #2563EB;
    background-image: var(--ch-pro-fill);
    color: #FFFFFF;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--ch-pro-glow);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.2s ease;
}

/* The sweep: a skewed band of light that crosses the face on hover. ::after,
   because the mobile menu already uses ::before for its edge marker. */
a.ch-btn-premium::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: var(--ch-pro-sweep);
    transform: skewX(-18deg);
    transition: left 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

a.ch-btn-premium:hover,
a.ch-btn-premium:focus-visible,
a.ch-btn-premium:active {
    color: #FFFFFF;
    background-color: #1D4ED8;
    background-image: var(--ch-pro-fill-hi);
    box-shadow: var(--ch-pro-glow-hi);
    text-decoration: none;
    transform: translateY(-1px);
}

a.ch-btn-premium:hover::after,
a.ch-btn-premium:focus-visible::after {
    left: 130%;
}

a.ch-btn-premium:active {
    transform: translateY(0);
}

a.ch-btn-premium:focus-visible {
    outline: 3px solid var(--ch-pro-ring);
    outline-offset: 2px;
}

a.ch-btn-premium .ch-sparkle {
    flex-shrink: 0;
    color: #BFDBFE;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

a.ch-btn-premium:hover .ch-sparkle,
a.ch-btn-premium:focus-visible .ch-sparkle {
    color: #FFFFFF;
    transform: rotate(18deg) scale(1.12);
}

/* The Pro chip inverts inside the blue: white with royal blue text (8.7:1),
   the same chip the dashboard plan badge carries. */
a.ch-btn-premium .ch-badge {
    padding: 0.14rem 0.34rem;
    border-radius: 4px;
    background: #FFFFFF;
    color: #1E40AF;
    font-size: 0.6rem;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

a.ch-btn-newsletter,
a.ch-btn-newsletter:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0 0.9rem 0 0.8rem;
    border: 1px solid #A7F3D0;
    border-radius: 10px;
    background-color: #ECFDF5;
    color: #047857;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

a.ch-btn-newsletter svg {
    flex-shrink: 0;
    color: #059669;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
}

/* #047857 on #ECFDF5 is 5.5:1 at rest, #065F46 on #D1FAE5 7.0:1 on hover. */
a.ch-btn-newsletter:hover,
a.ch-btn-newsletter:focus-visible,
a.ch-btn-newsletter:active {
    border-color: #6EE7B7;
    background-color: #D1FAE5;
    color: #065F46;
    text-decoration: none;
    transform: translateY(-1px);
}

a.ch-btn-newsletter:hover svg,
a.ch-btn-newsletter:focus-visible svg {
    color: #047857;
    transform: translateY(-1px) rotate(-8deg);
}

a.ch-btn-newsletter:active {
    transform: translateY(0);
}

a.ch-btn-newsletter:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.4);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    a.ch-btn-premium,
    a.ch-btn-premium::after,
    a.ch-btn-premium .ch-sparkle,
    a.ch-btn-newsletter,
    a.ch-btn-newsletter svg {
        transition: none;
    }

    a.ch-btn-premium:hover,
    a.ch-btn-premium:focus-visible,
    a.ch-btn-newsletter:hover,
    a.ch-btn-newsletter:focus-visible {
        transform: none;
    }

    a.ch-btn-premium:hover::after,
    a.ch-btn-premium:focus-visible::after {
        left: -80%;
    }

    a.ch-btn-premium:hover .ch-sparkle,
    a.ch-btn-newsletter:hover svg {
        transform: none;
    }
}

/* --- 7.0c "ALSO IN CARTHACKER PREMIUM" STRIP -----------------------------------
       carthacker_core_premium_also(): the compact list of Premium pillars under
       a tool-specific upsell. Blue, because every Premium mark is blue (7.0b).
       Static chips, no link, so there is no hover state to audit. Blue 800 on
       Blue 50 is about 9:1; the label in Blue 700 is about 6.7:1 on white.
       Selectors are doubled (0,2,0) so a host list rule such as
       ".ch-cwv-plan li" (0,1,1) cannot restyle the chips. */
.ch-pro-also {
    margin-top: 1rem;
    text-align: left;
}

.ch-pro-also .ch-pro-also-label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1D4ED8;
}

.ch-pro-also .ch-pro-also-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-pro-also .ch-pro-also-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.28rem 0.6rem;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    background-color: #EFF6FF;
    color: #1E3A8A;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.ch-pro-also .ch-pro-also-item::before {
    content: none;
}

.ch-pro-also .ch-pro-also-item svg {
    flex: 0 0 auto;
    color: #2563EB;
}

/* Inside a flex-row lock card (dashboard Core Web Vitals, Trust Badges) the
   strip takes a row of its own under the text and the button. */
.ch-mon-lock > .ch-pro-also,
.chb-locked > .ch-pro-also {
    flex: 1 1 100%;
    margin-top: 0;
}

/* --- 7.1 MOBILE HEADER BAR + SLIDE-DOWN MENU PANEL --------------------------
   Built ON TOP of GeneratePress, not against it. GP with nav-float-right stamps
   body.has-inline-mobile-toggle and ships TWO toggle buttons:

     1. #mobile-menu-control-wrapper > .menu-toggle   - icon only, THE hamburger
     2. #site-navigation .inside-navigation > .menu-toggle - icon + "Menu" label

   GP hides #2 on mobile via
   `.has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav)`
   and drives #1 through data-nav="site-navigation". Forcing #2 visible is what
   produced two hamburgers, so nothing here touches its display - #1 is styled
   and #2 stays exactly as GP left it.

   The bar is a fixed-height flex row (logo | theme + identity | hamburger) and
   the whole nav is lifted OUT of flow, anchored under the bar. GP's own greys
   (rgba(0,0,0,0.02) on the toggle and on #site-navigation.toggled) are cleared -
   the controls read as bordered ghost buttons, the panel as a white sheet.
   Every rule is inside the max-width query; desktop never sees this. */
@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }

    /* 7.1.1 The bar ------------------------------------------------------- */
    .inside-header {
        position: relative;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.4rem;
        padding: 0.55rem 1rem !important;
        text-align: left !important;
    }

    .site-logo {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-logo .ch-logo-icon {
        width: 36px;
        height: 36px;
    }

    .ch-logo-text {
        font-size: 1.24rem;
        letter-spacing: -0.8px;
    }

    /* 7.1.2 Control cluster: one shape for theme, identity and hamburger.
       42px square, hairline border, transparent fill - no grey blocks. */
    .ch-mobile-actions {
        order: 2;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .ch-theme-toggle-mobile,
    .ch-mobile-login,
    #mobile-menu-control-wrapper .menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        height: 42px;
        min-width: 42px;
        padding: 0;
        border: 1px solid var(--ch-border);
        border-radius: 12px;
        background-color: transparent !important;
        color: var(--ch-text-main) !important;
        line-height: 0;
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .ch-theme-toggle-mobile:hover,
    .ch-theme-toggle-mobile:focus-visible,
    .ch-mobile-login:hover,
    .ch-mobile-login:focus-visible,
    #mobile-menu-control-wrapper .menu-toggle:hover,
    #mobile-menu-control-wrapper .menu-toggle:focus-visible {
        border-color: var(--ch-cta);
        background-color: rgba(16, 185, 129, 0.08) !important;
        color: var(--ch-cta) !important;
        transform: none;
    }

    .ch-mobile-login {
        gap: 0.4rem;
        padding: 0 0.8rem;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none !important;
    }

    /* 7.1.3 Hamburger: GP's inline toggle is the only one on the page ------- */
    #mobile-menu-control-wrapper {
        order: 3;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

    #mobile-menu-control-wrapper .menu-toggle {
        flex-grow: 0 !important;
        margin: 0 !important;
        font-size: 0;
    }

    /* GP sizes its icons off font-size (svg is 1em) */
    #mobile-menu-control-wrapper .menu-toggle .gp-icon {
        font-size: 21px;
    }

    /* GP nudges nav icons down by .125em for text baselines - not wanted in a
       square icon button */
    #mobile-menu-control-wrapper .menu-toggle .gp-icon svg {
        top: 0;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #mobile-menu-control-wrapper.toggled .menu-toggle {
        border-color: var(--ch-cta);
        background-color: rgba(16, 185, 129, 0.1) !important;
        color: var(--ch-cta) !important;
    }

    #mobile-menu-control-wrapper.toggled .menu-toggle .gp-icon svg {
        transform: rotate(90deg);
    }

    /* 7.1.4 Identity: avatar dropdown opens leftward, never off-screen ------ */
    .ch-account.is-mobile .ch-account-trigger {
        height: 42px;
        padding: 0 0.15rem 0 0;
    }

    .ch-account.is-mobile .ch-account-avatar {
        width: 34px;
        height: 34px;
    }

    .ch-account.is-mobile .ch-account-dropdown {
        width: 250px;
        max-width: calc(100vw - 2rem);
    }

    /* 7.1.5 The panel ------------------------------------------------------
       Out of flow, so the bar height is constant open or closed. */
    #site-navigation.main-navigation {
        position: absolute !important;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        order: 4;
        flex-basis: auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background-color: transparent !important;
        z-index: 300;
    }

    #site-navigation .inside-navigation {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
    }

    #site-navigation:not(.toggled) .main-nav > ul {
        display: none;
    }

    #site-navigation.toggled .main-nav > ul {
        display: block;
        /* svh, not dvh: the small viewport height is the one unit that does NOT
           re-resolve when the mobile browser chrome slides in or out, so the
           panel cannot resize itself mid-interaction. */
        max-height: calc(100vh - 4.6rem);
        max-height: calc(100svh - 4.6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: 0.5rem 0 0.85rem;
        list-style: none;
        background-color: #FFFFFF;
        border-bottom: 1px solid var(--ch-border);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 26px 44px -22px rgba(15, 23, 42, 0.42);
        animation: chNavPanelIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Full-bleed scrim: the header (z-index 100) stays lit above it.
       .ch-nav-open is mirrored off #site-navigation.toggled by main-ui.js -
       GP's own html.mobile-menu-open only exists in recent releases.

       NO scroll lock here, deliberately. `overflow: hidden` on html/body kills
       `position: sticky` on .site-header: the bar drops back to its static
       position at the top of the document, which is off-screen once the reader
       has scrolled. The panel is anchored to .inside-header, so it follows the
       bar out of view - hamburger unreachable AND the page frozen. Tapping the
       scrim closes the menu; that is the whole dismissal contract. */
    html.ch-nav-open body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 90;
        background-color: rgba(15, 23, 42, 0.45);
        animation: chNavScrimIn 0.28s ease both;
    }

    /* 7.1.6 Rows ----------------------------------------------------------- */
    #site-navigation .main-nav ul li {
        width: 100%;
        margin: 0;
        border: 0;
    }

    /* Direct child only - the Tools flyout rows are anchors too and own their
       geometry in section 7.2. */
    #site-navigation .main-nav ul li > a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.82rem 1.35rem !important;
        font-size: 0.96rem;
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--ch-text-main);
        background: none;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    /* Emerald edge marker instead of a heavy filled row */
    #site-navigation .main-nav ul li > a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.45rem;
        bottom: 0.45rem;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background-color: var(--ch-cta);
        transform: scaleY(0);
        transform-origin: center;
        opacity: 0;
        transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    }

    /* Emerald 700 text, not the brand #10B981: on the white sheet the brand
       emerald was 2.4:1. The edge marker keeps the brand color. Dark mode
       restates its own pair (#6EE7B7) in dark-mode.css. */
    #site-navigation .main-nav ul li > a:hover,
    #site-navigation .main-nav ul li > a:focus {
        color: #047857;
        background-color: rgba(16, 185, 129, 0.06);
    }

    #site-navigation .main-nav ul li.current-menu-item > a,
    #site-navigation .main-nav ul li.current-menu-ancestor > a,
    #site-navigation .main-nav ul li.current_page_item > a,
    #site-navigation .main-nav ul li.current-cat > a {
        color: #047857;
        font-weight: 700;
    }

    #site-navigation .main-nav ul li > a:hover::before,
    #site-navigation .main-nav ul li > a:focus::before,
    #site-navigation .main-nav ul li.current-menu-item > a::before,
    #site-navigation .main-nav ul li.current-menu-ancestor > a::before,
    #site-navigation .main-nav ul li.current_page_item > a::before,
    #site-navigation .main-nav ul li.current-cat > a::before {
        transform: scaleY(1);
        opacity: 1;
    }

    /* 7.1.7 Utility rows appended by carthacker_core_mobile_utility_nav() --- */
    #site-navigation .main-nav ul li.ch-mobile-group-start {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--ch-border);
    }

    /* The two header buttons as full-width rows: Premium first and filled,
       Newsletter under it and soft (7.0b). The row rules above outrank the
       button classes, so geometry and color are restated here at row weight;
       ::before is the edge marker and stays off, ::after is the Premium sweep. */
    #site-navigation .main-nav ul li.ch-mobile-premium > a,
    #site-navigation .main-nav ul li.ch-mobile-cta > a {
        justify-content: center;
        min-height: 48px;
        margin: 0.6rem 1.35rem 0;
        padding: 0 1rem !important;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 700;
    }

    #site-navigation .main-nav ul li.ch-mobile-premium > a::before,
    #site-navigation .main-nav ul li.ch-mobile-cta > a::before {
        content: none;
    }

    #site-navigation .main-nav ul li.ch-mobile-premium > a {
        background-color: #2563EB;
        background-image: var(--ch-pro-fill);
        color: #FFFFFF;
        box-shadow: var(--ch-pro-glow);
    }

    #site-navigation .main-nav ul li.ch-mobile-premium > a:hover,
    #site-navigation .main-nav ul li.ch-mobile-premium > a:focus {
        background-color: #1D4ED8;
        background-image: var(--ch-pro-fill-hi);
        color: #FFFFFF;
    }

    #site-navigation .main-nav ul li.ch-mobile-cta > a {
        border: 1px solid #A7F3D0;
        background-color: #ECFDF5;
        color: #047857;
    }

    #site-navigation .main-nav ul li.ch-mobile-cta > a:hover,
    #site-navigation .main-nav ul li.ch-mobile-cta > a:focus {
        border-color: #6EE7B7;
        background-color: #D1FAE5;
        color: #065F46;
    }

    /* 7.1.8 Entrance choreography: the sheet drops, the rows cascade behind it.
       Cheap enough to stay on the compositor - opacity and transform only. */
    #site-navigation.toggled .main-nav > ul > li {
        animation: chNavRowIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    #site-navigation.toggled .main-nav > ul > li:nth-child(1)  { animation-delay: 0.03s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(2)  { animation-delay: 0.06s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(3)  { animation-delay: 0.09s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(4)  { animation-delay: 0.12s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(5)  { animation-delay: 0.15s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(6)  { animation-delay: 0.18s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(7)  { animation-delay: 0.21s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(8)  { animation-delay: 0.24s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(9)  { animation-delay: 0.27s; }
    #site-navigation.toggled .main-nav > ul > li:nth-child(n+10) { animation-delay: 0.3s; }
}

@keyframes chNavPanelIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes chNavRowIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes chNavScrimIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #site-navigation.toggled .main-nav > ul,
    #site-navigation.toggled .main-nav > ul > li,
    html.ch-nav-open body::after {
        animation: none !important;
    }
}

/* Sub-390px: the login pill drops its label so the wordmark never truncates */
@media (max-width: 390px) {
    .ch-mobile-login-label {
        display: none;
    }

    .ch-mobile-login {
        padding: 0;
    }

    .inside-header {
        gap: 0.3rem;
        padding: 0.55rem 0.8rem !important;
    }
}

/* --- Tools flyout: registry-driven dropdown under the Tools menu item --------
   Markup injected by carthacker_core_tools_dropdown() in core-ui.php. Pure CSS
   disclosure: :hover and :focus-within open it on desktop, so keyboard users
   get it for free and there is no JS to fail. On mobile it renders as a static
   indented list of LIVE tools inside the slide-down menu. */

/* Row grammar (shared by both breakpoints).
   The rows live inside a nav <li>, and GeneratePress paints EVERY .main-nav
   anchor (display: block, line-height: 60px, padding: 0 20px) with a selector
   that outranks a bare class - unreclaimed, the row stacks icon over text with
   60px of dead space. The geometry therefore has to be declared at nav
   specificity; the cosmetics below can stay on the plain class. */
#site-navigation .main-nav .ch-tools-flyout a.ch-tools-flyout-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: auto;
    height: auto;
    padding: 0.7rem 0.75rem;
    line-height: normal;
}

.ch-tools-flyout-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

a.ch-tools-flyout-link:hover {
    background-color: color-mix(in srgb, var(--ch-cta) 7%, transparent);
    transform: translateX(3px);
}

.ch-tools-flyout-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: var(--ch-cta);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

a.ch-tools-flyout-link:hover .ch-tools-flyout-ico {
    transform: translateY(-2px) rotate(-5deg);
}

.ch-tools-flyout-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ch-tools-flyout-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ch-text-main);
    line-height: 1.3;
}

.ch-tools-flyout-flag {
    flex-shrink: 0;
    padding: 0.08rem 0.4rem;
    border-radius: 5px;
    background-color: rgba(16, 185, 129, 0.12);
    color: #047857;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Slate 600 rather than the muted token: the muted gray on its own gray wash
   was 4.1:1 at this 0.58rem size. */
.ch-tools-flyout-flag.is-soon {
    background-color: rgba(100, 116, 139, 0.12);
    color: #475569;
}

/* Slate 600 in light: the muted token measured 4.45:1 on the emerald hover
   wash of its row (painted #EEFAF6), under AA at this 0.76rem size. */
.ch-tools-flyout-desc {
    font-size: 0.76rem;
    line-height: 1.45;
    color: #475569;
}

html[data-theme="dark"] .ch-tools-flyout-desc {
    color: var(--ch-text-muted);
}

.ch-tools-flyout-arrow {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
    color: var(--ch-text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
}

a.ch-tools-flyout-link:hover .ch-tools-flyout-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--ch-cta);
}

/* Soon rows are anchors pointing at '#' so the markup stays one shape, but
   they must keep reading as inert: no lift, no tint, no arrow, a grey icon
   and a muted name. They used to be dimmed to 55% opacity as well, which put
   the description at about 2.5:1; since 2026-10-03 these rows carry the
   roadmap (what ships next, and when), so they stay readable at full opacity. */
.ch-tools-flyout-link.is-soon {
    cursor: default;
}

.ch-tools-flyout-link.is-soon .ch-tools-flyout-name {
    color: var(--ch-text-muted);
}

a.ch-tools-flyout-link.is-soon:hover {
    background-color: transparent;
    transform: none;
}

a.ch-tools-flyout-link.is-soon:hover .ch-tools-flyout-ico {
    transform: none;
}

.ch-tools-flyout-link.is-soon .ch-tools-flyout-ico {
    background-color: rgba(100, 116, 139, 0.1);
    border-color: var(--ch-border);
    color: var(--ch-text-muted);
}

/* Desktop: floating panel anchored to the right edge of the Tools item */
@media (min-width: 769px) {
    .main-nav > ul > li.ch-tools-item {
        position: relative;
    }

    .ch-tools-flyout {
        position: absolute;
        top: calc(100% + 2px);
        right: -0.5rem;
        z-index: 320;
        width: 384px;
        padding: 0.75rem;
        background-color: #FFFFFF;
        border: 1px solid var(--ch-border);
        border-radius: 14px;
        box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.35), 0 6px 18px -8px rgba(15, 23, 42, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
    }

    /* Emerald hairline: the same system signal every panel carries */
    .ch-tools-flyout::before {
        content: '';
        position: absolute;
        top: 0;
        left: 14px;
        right: 14px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--ch-cta), rgba(16, 185, 129, 0));
    }

    .ch-tools-item:hover > .ch-tools-flyout,
    .ch-tools-item:focus-within > .ch-tools-flyout {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }

    /* Keep the emerald indicator lit while the panel is open */
    #site-navigation .main-nav > ul > li.ch-tools-item:hover > a,
    #site-navigation .main-nav > ul > li.ch-tools-item:focus-within > a {
        color: var(--ch-text-main);
    }

    #site-navigation .main-nav > ul > li.ch-tools-item:hover > a::after,
    #site-navigation .main-nav > ul > li.ch-tools-item:focus-within > a::after {
        transform: scaleX(1);
        opacity: 1;
    }

    /* Hover bridge: the 2px gap between anchor and panel must not close it */
    .ch-tools-flyout::after {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 10px;
    }
}

/* --- 7.2 Mobile: Tools is an accordion row inside the slide-down panel -------
   Collapsed by CSS, so the menu can NEVER render pre-expanded even if the script
   never runs. main-ui.js flips .is-open on the li when the row is tapped. The
   descriptions, the arrows and the contact foot are desktop furniture. */
@media (max-width: 768px) {
    #site-navigation .main-nav li.ch-tools-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    #site-navigation .main-nav li.ch-tools-item > a {
        flex: 1 1 auto;
    }

    #site-navigation .main-nav li.ch-tools-item.is-open > a {
        color: #047857;
    }

    .ch-tools-caret {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 0.82rem 1.35rem 0.82rem 0.4rem;
        color: var(--ch-text-muted);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
    }

    .ch-tools-item.is-open > .ch-tools-caret {
        transform: rotate(180deg);
        color: var(--ch-cta);
    }

    .ch-tools-flyout {
        /* basis discounts the indent margins - a flat 100% would push the row
           2.7rem past the panel and hand the menu a horizontal scrollbar */
        flex: 0 0 calc(100% - 2.7rem);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin: 0 1.35rem;
        padding: 0;
        border-left: 2px solid var(--ch-border);
        transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, padding 0.3s ease;
    }

    .ch-tools-item.is-open > .ch-tools-flyout {
        max-height: 420px;
        opacity: 1;
        padding: 0.3rem 0 0.5rem;
    }

    .ch-tools-flyout-desc,
    .ch-tools-flyout-arrow {
        display: none;
    }

    #site-navigation .main-nav .ch-tools-flyout a.ch-tools-flyout-link {
        align-items: center;
        gap: 0.6rem;
        padding: 0.5rem 0.7rem;
    }

    .ch-tools-flyout-link {
        border-radius: 8px;
    }

    /* :hover sticks after a tap on touch hardware - no lift on mobile */
    a.ch-tools-flyout-link:hover {
        transform: none;
    }

    a.ch-tools-flyout-link:hover .ch-tools-flyout-ico {
        transform: none;
    }

    .ch-tools-flyout-ico {
        width: 30px;
        height: 30px;
    }

    .ch-tools-flyout-name {
        font-size: 0.85rem;
    }
}

/* Dark theme */
html[data-theme="dark"] .ch-tools-flyout {
    background-color: #1E293B;
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7), 0 6px 18px -8px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .ch-tools-flyout-flag {
    background-color: rgba(16, 185, 129, 0.16);
    color: #6EE7B7;
}

/* The rule above outranks .ch-tools-flyout-flag.is-soon, which painted the
   Soon flag emerald (the Free color) in dark mode. */
html[data-theme="dark"] .ch-tools-flyout-flag.is-soon {
    background-color: rgba(148, 163, 184, 0.14);
    color: #CBD5E1;
}

/* --- 7.2b The Plugins flyout foot: the two pages behind the panel -----------
   Same nav-specificity reclaim as the rows (GeneratePress paints every
   .main-nav anchor 60px tall), and color plus background on every state
   (the GeneratePress hover trap). */
.ch-plugins-flyout-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.6rem 0.35rem 0.1rem;
    border-top: 1px solid var(--ch-border);
}

#site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    height: auto;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    line-height: normal;
    color: #475569;
    background-color: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

#site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more svg {
    color: var(--ch-cta);
}

#site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more:hover,
#site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more:focus,
#site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more:active {
    color: #047857;
    background-color: rgba(16, 185, 129, 0.09);
}

#site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more::after {
    display: none;
}

html[data-theme="dark"] #site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more {
    color: #CBD5E1;
}

html[data-theme="dark"] #site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more:hover,
html[data-theme="dark"] #site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more:focus,
html[data-theme="dark"] #site-navigation .main-nav .ch-tools-flyout a.ch-plugins-flyout-more:active {
    color: #6EE7B7;
    background-color: rgba(16, 185, 129, 0.14);
}

#right-sidebar .widget { 
    background: transparent; 
    padding: 0; 
    margin-bottom: 2rem; 
}

/* --- Sidebar widget shell: one card grammar for every slot ------------------
   Branded top edge, mono kicker + meta head, hairline rule. The Learning Center
   rail, the author box, the Recommended slot and the TOC all inherit from here, so
   the column reads as one system instead of three unrelated boxes. */
.ch-sidebar-widget {
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
    border: 1px solid var(--ch-border);
    border-radius: 14px;
    padding: 1.3rem 1.35rem 1.35rem;
    margin-bottom: 2rem;
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.5);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.ch-sidebar-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ch-cta) 0%, rgba(16, 185, 129, 0.35) 35%, rgba(16, 185, 129, 0) 70%);
}

.ch-sidebar-widget:hover {
    box-shadow: 0 20px 34px -24px rgba(15, 23, 42, 0.28);
}

.ch-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.7rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--ch-border);
}

.ch-widget-label {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ch-cta-text);
}

.ch-widget-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-widget-meta-sep {
    margin: 0 0.25rem;
    opacity: 0.45;
}

.ch-widget-verified {
    color: var(--ch-cta-text);
}

.ch-author-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* The portrait: the author dossier's orbital ring at sidebar scale, kept
   quiet because the article and the Recommended card are what should draw
   the eye (Adrian, 2026-10-05).
   - The link and the image are exactly 70px square and the image is a
     block. An inline image left a few pixels of line box under the photo,
     the link grew taller than wide, and the old halo (inset -5px on that
     box) became an oval that hung below the chin.
   - At rest: a grayscale portrait in a thin emerald hairline.
   - On hover the photo warms to color, a soft halo opens and one emerald arc
     travels once around the portrait and stops. Nothing loops and nothing
     scales: the sidebar sits beside the article for the whole read. */
.ch-author-avatar-link {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.ch-author-avatar-link::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(16, 185, 129, 0) 0deg, var(--ch-cta) 70deg, rgba(16, 185, 129, 0) 150deg, rgba(16, 185, 129, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    opacity: 0;
    transform: rotate(-110deg);
    transition: opacity 0.5s ease, transform 1.7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.ch-sidebar-widget:hover .ch-author-avatar-link::before,
.ch-author-avatar-link:focus-visible::before {
    opacity: 1;
    transform: rotate(250deg);
}

/* Without mask support the arc would paint a solid disc: leave it out. */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
    .ch-author-avatar-link::before { display: none; }
}

.ch-author-avatar-link:focus-visible {
    outline: 2px solid var(--ch-cta);
    outline-offset: 9px;
}

.ch-author-avatar {
    position: relative;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFFFFF;
    filter: grayscale(100%);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.38), 0 6px 14px -6px rgba(15, 23, 42, 0.35);
    transition: filter 0.6s ease, box-shadow 0.45s ease;
}

.ch-sidebar-widget:hover .ch-author-avatar,
.ch-author-avatar-link:focus-visible .ch-author-avatar {
    filter: grayscale(0%);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.6), 0 0 0 3px rgba(16, 185, 129, 0.12), 0 8px 18px -8px rgba(15, 23, 42, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .ch-author-avatar-link::before {
        transform: none;
        transition: opacity 0.3s ease;
    }

    .ch-sidebar-widget:hover .ch-author-avatar-link::before {
        transform: none;
    }
}

.ch-author-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ch-author-name {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 0.28rem;
    line-height: 1.25;
    color: var(--ch-text-main);
}

.ch-author-bio {
    font-size: 0.825rem;
    line-height: 1.55;
    color: var(--ch-text-muted);
    margin: 0;
}

@media (min-width: 769px) {
    /* Two-column split is scoped to single posts only - the sole template that renders our
       custom sidebar (carthacker_core_build_sidebar is gated by is_singular('post')).
       Home, category and archive pages keep GeneratePress full-width content (1200px). */
    .single-post .site-content {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch !important;
    }

    .single-post .site-content .content-area {
        width: 70%;
        flex: 0 0 70%;
    }

    .single-post .site-content .is-right-sidebar {
        width: 30%;
        flex: 0 0 30%;
    }

    .single-post .inside-right-sidebar {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

/* The sidebar stack. Plain flow by default; it only becomes a sticky, self
   scrolling column on the widths where it is actually a COLUMN. */
.ch-sticky-sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Sticky column: three widgets can outgrow the viewport, so the stack scrolls
   inside itself rather than pushing the Table of Contents out of reach.

   SCOPED TO 769px AND UP, AND THAT IS LOAD BEARING. Below this width the
   sidebar is not beside the article, it is stacked underneath it, and these
   three declarations together built a trap: max-height turned the stack into a
   scroll container roughly one screen tall, overflow-y gave it its own
   scrollbar, and overscroll-behavior:contain stopped a touch drag inside it
   from ever chaining back to the document.
   The result on a phone was a region you could scroll INTO and not out of -
   the page would not move again unless a finger happened to land on the few
   pixels of margin outside the box - and the author card at the bottom of the
   stack was clipped out of existence by the same max-height. A sidebar that
   is a full width block in the normal flow needs none of this. */
@media (min-width: 769px) {
    .ch-sticky-sidebar-wrapper {
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
        z-index: 10;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 1.5rem;
        scrollbar-width: thin;
        scrollbar-color: var(--ch-border) transparent;
    }
}

.ch-sticky-sidebar-wrapper::-webkit-scrollbar {
    width: 5px;
}

.ch-sticky-sidebar-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.ch-sticky-sidebar-wrapper::-webkit-scrollbar-thumb {
    background: var(--ch-border);
    border-radius: 5px;
}

.ch-sticky-sidebar-wrapper .ch-sidebar-widget {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* --- Table of Contents: a reading rail, not a bullet list -------------------
   One continuous hairline down the left with an emerald segment that grows into
   place on the section you are in (scrollspy stamps .active-toc from main-ui.js). */
.ch-toc-list {
    position: relative;
    list-style: none;
    padding: 0 0 0 0.85rem;
    margin: 0;
}

.ch-toc-list::before {
    content: '';
    position: absolute;
    top: 0.3rem;
    bottom: 0.3rem;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background-color: var(--ch-border);
}

.ch-toc-list li {
    margin-bottom: 0.1rem;
    line-height: 1.45;
}

.ch-toc-list li::before {
    display: none;
}

.ch-toc-list a {
    position: relative;
    display: block;
    text-decoration: none;
    border-radius: 0 7px 7px 0;
    transition: color 0.25s, background-color 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The emerald tick that grows on the rail for hover and the active section */
.ch-toc-list a::before {
    content: '';
    position: absolute;
    left: -0.85rem;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 2px;
    background-color: var(--ch-cta);
    transform: translateY(-50%);
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-toc-h2 a {
    padding: 0.34rem 0.5rem 0.34rem 0.55rem;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--ch-text-muted);
}

.ch-toc-h3 a {
    padding: 0.28rem 0.5rem 0.28rem 1.35rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #94A3B8;
}

.ch-toc-list a:hover {
    color: var(--ch-text-main);
    transform: translateX(3px);
}

.ch-toc-list a:hover::before {
    height: 55%;
}

.ch-toc-list a.active-toc {
    color: var(--ch-cta);
    font-weight: 700;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0) 90%);
}

.ch-toc-list a.active-toc::before {
    height: 78%;
}

/* ==========================================================================
   8. POST FOOTER (BREADCRUMBS & NAVIGATION)
   ========================================================================== */
footer.entry-meta { 
    display: none !important; 
}

.ch-post-footer {
    max-width: 75ch;
    margin: 2.5rem auto 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ch-border);
}

/* --- Breadcrumb trail: a mono path, same kicker language as the sidebar
   widget heads and the Learning Center deck. Ancestors are uppercase; the
   current article keeps its own casing because titles are long. --- */
.ch-breadcrumbs {
    width: 100%;
    padding: 0 0 1.25rem;
    margin-bottom: 1.5rem;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--ch-border);
    border-radius: 0;
    box-shadow: none;
}

.ch-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    margin: 0;
}

.ch-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

.ch-breadcrumbs li a {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    color: var(--ch-text-muted);
    text-decoration: none !important;
    transition: color 0.2s, background-color 0.2s;
}

.ch-breadcrumbs li a:hover {
    color: var(--ch-cta);
    background-color: rgba(16, 185, 129, 0.09);
}

.ch-breadcrumbs li a.ch-bc-current {
    color: var(--ch-text-main);
    text-transform: none;
    letter-spacing: 0.2px;
}

.ch-breadcrumbs li a.ch-bc-current:hover {
    color: var(--ch-cta);
}

.ch-breadcrumbs .ch-bc-sep {
    flex-shrink: 0;
    color: var(--ch-cta);
    opacity: 0.5;
}

/* --- Prev/Next cards: the same card grammar as the Learning Center "Up Next"
   tile, mirrored so the thumbnail always sits on the outer edge. Tokens are
   re-pointed in dark-mode.css section 8. --- */
.ch-post-navigation {
    --ch-nav-surface: #FFFFFF;
    --ch-nav-border: #E2E8F0;
    --ch-nav-media: #EDF2F7;
    --ch-nav-sheen: rgba(255, 255, 255, 0.9);
    --ch-nav-shadow: 0 18px 30px -18px rgba(15, 23, 42, 0.28);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

.ch-nav-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--ch-nav-surface);
    border: 1px solid var(--ch-nav-border);
    border-radius: 14px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.ch-nav-card:hover {
    border-color: var(--ch-cta);
    transform: translateY(-3px);
    box-shadow: var(--ch-nav-shadow);
    color: inherit;
}

/* Diagonal sheen, identical to the Up Next tile and the sidebar ad slot */
.ch-nav-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, var(--ch-nav-sheen) 50%, transparent 62%);
    opacity: 0;
    transform: translateX(-100%);
}

.ch-nav-card:hover::after {
    animation: ch-lc-sweep 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Full-bleed media at the site-wide card ratio (matches the homepage grid) */
.ch-nav-media {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 1200 / 630;
    background-color: var(--ch-nav-media);
}

.ch-nav-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-nav-card:hover .ch-nav-media img {
    transform: scale(1.06);
}

.ch-nav-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #CBD5E1;
}

/* Scrim: keeps the floating chip legible on bright photography and seats the
   image against the body instead of letting it float. */
.ch-nav-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0) 42%, rgba(15, 23, 42, 0) 66%, rgba(15, 23, 42, 0.28) 100%);
}

/* Direction chip, floated over the outer corner of the image */
.ch-post-navigation .ch-nav-label {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.34rem 0.6rem;
    border-radius: 6px;
    background-color: rgba(15, 23, 42, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #6EE7B7;
    transition: background-color 0.25s, color 0.25s;
}

.ch-nav-next .ch-nav-label {
    left: auto;
    right: 12px;
}

.ch-nav-next .ch-nav-label .ch-nav-arrow {
    order: 2;
}

.ch-nav-card:hover .ch-nav-label {
    background-color: var(--ch-cta);
    color: #FFFFFF;
}

.ch-nav-arrow {
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-nav-prev:hover .ch-nav-arrow {
    transform: translateX(-3px);
}

.ch-nav-next:hover .ch-nav-arrow {
    transform: translateX(3px);
}

.ch-nav-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.85rem 1rem 1rem;
}

/* Grid stretches both cards to the taller one; pinning the meta to the bottom
   keeps the two footers on one line instead of floating at different heights. */
.ch-nav-meta {
    margin-top: auto;
}

/* Next card mirrors: copy hugs the outer edge, same as its chip */
.ch-nav-next {
    text-align: right;
}

.ch-nav-next .ch-nav-meta {
    justify-content: flex-end;
}

.ch-post-navigation .ch-nav-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ch-text-main);
    transition: color 0.2s;
}

.ch-nav-card:hover .ch-nav-title {
    color: var(--ch-cta);
}

.ch-nav-meta {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.73rem;
    color: var(--ch-text-muted);
}

.ch-nav-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.55;
    margin: 0 0.12rem;
}

/* Kept as a real grid cell: on the newest and oldest posts only one card
   exists, and the placeholder is what keeps "Next post" anchored right. */
.ch-post-navigation .ch-nav-empty {
    display: block;
}

@media (max-width: 768px) {
    .ch-post-navigation {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, there is no column to hold - drop it so no empty row appears */
    .ch-post-navigation .ch-nav-empty {
        display: none;
    }

    /* Stacked: both cards read left to right again */
    .ch-nav-next {
        text-align: left;
    }

    .ch-nav-next .ch-nav-label {
        left: 12px;
        right: auto;
    }

    .ch-nav-next .ch-nav-label .ch-nav-arrow {
        order: 0;
    }

    .ch-nav-next .ch-nav-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .ch-breadcrumbs li a {
        padding: 0.28rem 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch-nav-card:hover::after {
        animation: none !important;
    }

    .ch-nav-card,
    .ch-nav-media img,
    .ch-nav-arrow {
        transition: none !important;
    }
}

/* ==========================================================================
   9. ENTRY META (READ TIME & AUTHOR)
   ========================================================================== */
.single-post header.entry-header .entry-meta { 
    display: none !important; 
}

/* Byline: a full-width data row under the H1, sharing the mono kicker language
   of the sidebar heads and the breadcrumb trail.
   NOTE: no max-width here. `ch` resolves against the element's OWN font, so a
   75ch cap on a 0.85rem mono row produced a much narrower column than the
   article body and left the byline floating, centred and detached. It now spans
   the header width, so it lines up with the title and the featured image. */
.ch-custom-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 1.1rem;
    margin: 1.15rem 0 2.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--ch-border);
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

.ch-meta-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 1.1rem;
}

.ch-meta-date,
.ch-meta-author,
.ch-meta-readtime {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

/* Hairline divider instead of a second icon cluster floating in space */
.ch-meta-author {
    padding-left: 1.1rem;
    border-left: 1px solid var(--ch-border);
}

.ch-meta-date svg {
    color: var(--ch-text-muted);
    opacity: 0.7;
}

.ch-meta-author svg,
.ch-meta-readtime svg {
    color: var(--ch-cta);
}

.ch-meta-author a {
    color: var(--ch-text-main);
    font-weight: 700;
    text-decoration: none !important;
    transition: color 0.2s;
}

.ch-meta-author a:hover {
    color: var(--ch-cta);
    background: none;
}

/* Reading time reads as a value, not a badge: weight and the emerald glyph
   carry it, no pill needed. */
.ch-meta-right {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.ch-meta-readtime {
    color: var(--ch-text-main);
}

@media (max-width: 600px) {
    /* Wrapped onto its own line, a left rule would read as a stray tick */
    .ch-meta-author {
        padding-left: 0;
        border-left: 0;
    }
}

/* ==========================================================================
   10. HOMEPAGE (FRONT-PAGE TEMPLATE)
   ========================================================================== */
.ch-home .site-main {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

/* --- Hero ---
   template-parts/home-hero.php, styled by assets/css/home-hero.css, which
   loads on the front page only (2026-10-05). */

/* --- Shared buttons (usable on every template) --- */
.ch-btn-primary {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--ch-cta);
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.75rem 1.75rem;
    border-radius: 6px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* Diagonal light sweep that glides across the face on hover. */
.ch-btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.ch-btn-primary:hover {
    background-color: #059669;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.42);
}

.ch-btn-primary:hover::before {
    left: 120%;
}

.ch-btn-primary svg {
    transition: transform 0.25s ease;
}

.ch-btn-primary:hover svg {
    transform: translateX(3px);
}

.ch-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ch-text-main);
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--ch-border);
    border-radius: 6px;
    text-decoration: none !important;
    transition: color 0.2s, border-color 0.2s, transform 0.2s;
}

.ch-btn-ghost:hover {
    color: var(--ch-accent);
    border-color: var(--ch-accent);
    transform: translateY(-2px);
}

/* --- Section head --- */
.ch-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid var(--ch-border);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}

.ch-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ch-cta);
    margin-bottom: 0.5rem;
}

.ch-section-title {
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.ch-section-title a {
    color: var(--ch-text-main);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-section-title a:hover {
    color: var(--ch-accent);
}

.ch-section-desc {
    color: var(--ch-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0.5rem 0 0;
    max-width: 62ch;
}

.ch-section-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ch-accent);
    text-decoration: none;
    padding-bottom: 0.15rem;
}

/* --- Who runs CartHacker (home page, inc/home-ui.php section 7) --- */
.ch-home-author {
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ch-home-author-card {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2rem);
    background: var(--ch-bg-card);
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.ch-home-author-photo {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ch-border);
}

.ch-home-author-photo-link {
    flex: 0 0 auto;
}

.ch-home-author-name {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}

.ch-home-author-name a {
    color: var(--ch-text-main);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-home-author-name a:hover,
.ch-home-author-name a:focus-visible {
    color: var(--ch-accent);
}

.ch-home-author-role {
    color: var(--ch-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.25rem 0 0.75rem;
}

.ch-home-author-bio {
    color: var(--ch-text-main);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0 0 1.1rem;
    max-width: 68ch;
}

@media (max-width: 600px) {
    .ch-home-author-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.ch-section-more svg {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-section-more:hover svg {
    transform: translateX(4px);
}

/* --- Post cards --- */
.ch-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.ch-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #FFFFFF;
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}

.ch-card:hover {
    transform: translateY(-4px);
    border-color: var(--ch-cta);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.15);
}

.ch-card-media {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--ch-bg-main);
}

.ch-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ch-card:hover .ch-card-media img {
    transform: scale(1.04);
}

.ch-card-media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1200 / 630;
    color: var(--ch-border);
}

.ch-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(4px);
    color: #F8FAFC;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    z-index: 2;
}

.ch-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem 1.4rem 1.35rem;
    flex: 1;
}

.ch-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0;
}

.ch-card-title a {
    color: var(--ch-text-main);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-card-title a:hover {
    color: var(--ch-accent);
}

.ch-card-excerpt {
    color: var(--ch-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ch-card-meta {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--ch-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.75rem;
    color: var(--ch-text-muted);
}

.ch-card-readtime {
    color: var(--ch-cta);
    font-weight: 700;
}

/* --- Free tools CTA panel -------------------------------------------------
   template-parts/cta-tools.php. Prints on the homepage, every PDF tool page,
   the PDF hub, the QR Code Generator and the Store Speed Test, so it is one of
   the most-seen components on the site.

   Rebuilt 2026-10-05 around the two products the business is built on: Store
   Speed Test and Trust Seals & Badges lead as feature cards, each with a
   picture of what it produces and its own action (a store address field, a
   builder button); PDF Tools and the QR Code Generator follow as an "Also
   free" row. Light card in light mode, deep panel in dark (CLAUDE.md: light
   mode has no dark panels).

   Everything resolves through the local --ch-tp-* tokens, declared once here
   for light and once at the foot of dark-mode.css. TOKEN SCOPE TRAP, already
   paid for once elsewhere in this project: a background-color reading a custom
   property that resolves to nothing is an INVALID declaration, dropped in
   silence, and the element paints transparent. Both token blocks carry every
   name. Adding one here without adding it there ships an invisible surface. */

.ch-tools-panel {
    --ch-tp-surface:      #FFFFFF;
    --ch-tp-wash:         linear-gradient(168deg, #FFFFFF 0%, #F6FBF9 58%, #F1F7F5 100%);
    --ch-tp-border:       #D8E2EC;
    --ch-tp-title:        #0F172A;
    --ch-tp-body:         #475569;
    --ch-tp-card:         #FFFFFF;
    --ch-tp-card-hi:      #FFFFFF;
    --ch-tp-card-border:  #E2E8F0;
    --ch-tp-name:         #0F172A;
    --ch-tp-desc:         #475569;
    --ch-tp-hint:         #64748B;
    --ch-tp-aurora:       rgba(16, 185, 129, 0.22);
    --ch-tp-aurora-2:     rgba(59, 130, 246, 0.10);
    --ch-tp-tex:          rgba(15, 23, 42, 0.055);
    --ch-tp-shadow:       0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -30px rgba(15, 23, 42, 0.45);
    --ch-tp-card-shadow:  0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 44px -28px rgba(15, 23, 42, 0.45);
    --ch-tp-accent:       #047857;
    --ch-tp-pro:          #1E40AF;
    --ch-tp-visual-speed: radial-gradient(120% 90% at 0% 0%, rgba(16, 185, 129, 0.16), transparent 60%), linear-gradient(160deg, #F0FDF4 0%, #ECFEFF 100%);
    --ch-tp-visual-badge: radial-gradient(120% 90% at 100% 0%, rgba(59, 130, 246, 0.14), transparent 60%), linear-gradient(160deg, #EFF6FF 0%, #F0FDF4 100%);
    --ch-tp-mock:         #FFFFFF;
    --ch-tp-mock-line:    #E2E8F0;
    --ch-tp-mock-ink:     #0F172A;
    --ch-tp-mock-mute:    #64748B;
    --ch-tp-mock-shadow:  0 14px 30px -18px rgba(15, 23, 42, 0.35);
    --ch-tp-skel:         #E2E8F0;
    --ch-tp-good:         #047857;
    --ch-tp-poor:         #B91C1C;
    --ch-tp-atc-bg:       #0F172A;
    --ch-tp-atc-ink:      #FFFFFF;
    --ch-tp-chip:         #F1F5F9;
    --ch-tp-chip-ink:     #334155;
    --ch-tp-input:        #FFFFFF;
    --ch-tp-input-line:   #CBD5E1;
    --ch-tp-more:         #F8FAFC;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Colour AND image: the gradient is the character, the colour the fallback
       under it if a token ever resolves to nothing. */
    background-color: var(--ch-tp-surface);
    background-image: var(--ch-tp-wash);
    border: 1px solid var(--ch-tp-border);
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.75rem);
    box-shadow: var(--ch-tp-shadow);
}

/* Emerald bloom top right, a colder one bottom left: two light sources read
   as a lit surface rather than a forgotten gradient. */
.ch-tools-aurora {
    position: absolute;
    top: -46%;
    right: -14%;
    width: min(680px, 92%);
    aspect-ratio: 2 / 1;
    background: radial-gradient(closest-side, var(--ch-tp-aurora), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.ch-tools-panel::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: min(520px, 70%);
    aspect-ratio: 2 / 1;
    background: radial-gradient(closest-side, var(--ch-tp-aurora-2), transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.ch-tools-grid-tex {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--ch-tp-tex) 1px, transparent 1px),
        linear-gradient(90deg, var(--ch-tp-tex) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 70% 60% at 20% 10%, #000 5%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 10%, #000 5%, transparent 72%);
    z-index: -1;
    pointer-events: none;
}

/* --- Head -------------------------------------------------------------- */

.ch-tools-head {
    position: relative;
    max-width: 62ch;
    margin: 0 auto 2.1rem;
    text-align: center;
}

.ch-tools-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid rgba(16, 185, 129, 0.42);
    border-radius: 99px;
    background-color: rgba(16, 185, 129, 0.1);
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ch-tp-accent);
    margin-bottom: 1rem;
}

.ch-tools-title {
    color: var(--ch-tp-title);
    font-size: clamp(1.55rem, 3.2vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 0.85rem;
}

.ch-tools-desc {
    color: var(--ch-tp-body);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0;
}

.ch-tools-desc strong { color: var(--ch-tp-title); font-weight: 700; }

/* --- Feature cards: the two lead products --------------------------------- */

.ch-tools-feature-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.ch-tool-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background-color: var(--ch-tp-card);
    border: 1px solid var(--ch-tp-card-border);
    border-radius: 16px;
    box-shadow: var(--ch-tp-card-shadow);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}

.ch-tool-feature:hover,
.ch-tool-feature:focus-within {
    transform: translateY(-3px);
    border-color: rgba(16, 185, 129, 0.55);
}

/* The picture of what the tool produces. Decorative (aria-hidden), labelled
   Example where it shows numbers. */
.ch-tool-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 212px;
    padding: 1.25rem;
    border-bottom: 1px solid var(--ch-tp-card-border);
}

.is-speed .ch-tool-visual  { background: var(--ch-tp-visual-speed); }
.is-badges .ch-tool-visual { background: var(--ch-tp-visual-badge); }

/* Speed: a miniature report */
.ch-tv-report {
    width: min(100%, 360px);
    padding: 0.8rem 0.85rem 0.85rem;
    background-color: var(--ch-tp-mock);
    border: 1px solid var(--ch-tp-mock-line);
    border-radius: 12px;
    box-shadow: var(--ch-tp-mock-shadow);
    transform: rotate(-1.2deg);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-tool-feature:hover .ch-tv-report { transform: rotate(0deg) translateY(-2px); }

.ch-tv-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}

.ch-tv-dial {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
}

.ch-tv-dial svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.ch-tv-dial circle { fill: none; stroke-width: 4.5; }
.ch-tv-dial-track { stroke: var(--ch-tp-skel); }
.ch-tv-dial-arc {
    stroke: #F59E0B;
    stroke-linecap: round;
    stroke-dasharray: 57 100;
}

.ch-tv-dial b {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ch-tp-mock-ink);
}

.ch-tv-head-text {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
}

.ch-tv-k {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ch-tp-mock-mute);
}

.ch-tv-url {
    overflow: hidden;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ch-tp-mock-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ch-tv-chip {
    flex-shrink: 0;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--ch-tp-mock-line);
    border-radius: 99px;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ch-tp-mock-mute);
}

.ch-tv-vitals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.ch-tv-vitals span {
    display: grid;
    gap: 0.1rem;
    padding: 0.4rem 0.45rem;
    border: 1px solid var(--ch-tp-mock-line);
    border-left-width: 3px;
    border-radius: 7px;
}

.ch-tv-vitals span.is-poor { border-left-color: #EF4444; }
.ch-tv-vitals span.is-good { border-left-color: #10B981; }

.ch-tv-vitals i {
    overflow: hidden;
    font-style: normal;
    font-size: 0.58rem;
    color: var(--ch-tp-mock-mute);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ch-tv-vitals b { font-size: 0.86rem; font-weight: 800; }
.ch-tv-vitals .is-poor b { color: var(--ch-tp-poor); }
.ch-tv-vitals .is-good b { color: var(--ch-tp-good); }

.ch-tv-apps {
    display: grid;
    gap: 0.4rem;
}

.ch-tv-apps span {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    font-size: 0.7rem;
}

.ch-tv-apps span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: var(--w, 50%);
    height: 3px;
    border-radius: 99px;
    background-image: linear-gradient(90deg, #F59E0B, #EF4444);
}

.ch-tv-apps i { font-style: normal; font-weight: 600; color: var(--ch-tp-mock-ink); }
.ch-tv-apps b { font-family: 'JetBrains Mono', 'Roboto Mono', monospace; font-size: 0.66rem; color: var(--ch-tp-poor); }

/* Badges: a product page with the badge row under Add to cart */
.ch-tv-product {
    display: flex;
    gap: 0.8rem;
    width: min(100%, 360px);
    padding: 0.75rem;
    background-color: var(--ch-tp-mock);
    border: 1px solid var(--ch-tp-mock-line);
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
}

.ch-tv-photo {
    flex: 0 0 74px;
    height: 74px;
    border-radius: 8px;
    background-image: linear-gradient(135deg, #A7F3D0 0%, #BFDBFE 100%);
}

.ch-tv-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.ch-tv-line { display: block; height: 7px; border-radius: 99px; background-color: var(--ch-tp-skel); }
.ch-tv-line.is-title { width: 82%; height: 9px; }
.ch-tv-line.is-short { width: 54%; }

.ch-tv-price { font-size: 0.82rem; font-weight: 800; color: var(--ch-tp-mock-ink); }

.ch-tv-atc {
    display: block;
    margin-top: auto;
    padding: 0.38rem 0.5rem;
    border-radius: 6px;
    background-color: var(--ch-tp-atc-bg);
    color: var(--ch-tp-atc-ink);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}

.ch-tv-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    width: min(100%, 360px);
    margin-top: -0.75rem;
    padding: 0.7rem 0.75rem 0.8rem;
    background-color: var(--ch-tp-mock);
    border: 1px solid var(--ch-tp-mock-line);
    border-top: 1px dashed var(--ch-tp-mock-line);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--ch-tp-mock-shadow);
}

.ch-tv-badges span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    color: var(--ch-tp-accent);
    animation: chTvBadgeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ch-tv-badges span:nth-child(2) { animation-delay: 0.12s; }
.ch-tv-badges span:nth-child(3) { animation-delay: 0.24s; }

.ch-tv-badges i {
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ch-tp-mock-ink);
}

@keyframes chTvBadgeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Feature body ----------------------------------------------------------- */

.ch-tool-feature-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.4rem 1.5rem 1.5rem;
}

.ch-tool-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ch-tp-accent);
}

.ch-tool-feature-q {
    margin: 0.55rem 0 0.5rem;
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.22;
    color: var(--ch-tp-name);
}

.ch-tool-feature-d {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ch-tp-desc);
}

.ch-tool-feature-d strong { color: var(--ch-tp-name); font-weight: 700; }

.ch-tool-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.ch-tool-facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.3rem 0.65rem;
    border-radius: 99px;
    background-color: var(--ch-tp-chip);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ch-tp-chip-ink);
}

.ch-tool-facts li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10B981;
}

/* Premium fact: Premium is blue (CLAUDE.md). */
.ch-tool-facts li.is-pro { color: var(--ch-tp-pro); }
.ch-tool-facts li.is-pro::before { background-color: #2563EB; }

/* Store address field: the test starts on arrival (cwv-tool.js reads ?url=). */
.ch-tool-speed {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.ch-tools-panel .ch-tool-speed-input,
.ch-tools-panel .ch-tool-speed-input:hover,
.ch-tools-panel .ch-tool-speed-input:focus {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    margin: 0;
    padding: 0 0.95rem;
    border: 1px solid var(--ch-tp-input-line);
    border-radius: 10px;
    background-color: var(--ch-tp-input);
    color: var(--ch-tp-name);
    font-size: 0.98rem;
    box-shadow: none;
}

.ch-tools-panel .ch-tool-speed-input::placeholder { color: var(--ch-tp-hint); opacity: 1; }

.ch-tools-panel .ch-tool-speed-input:focus {
    outline: none;
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

/* The action. White on Emerald 700 is 5.48:1 and holds on either theme's card;
   colour AND background on every state, because GeneratePress paints its own
   button:hover/:focus at (0,1,1). */
.ch-tools-panel .ch-tool-btn,
.ch-tools-panel .ch-tool-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 50px;
    margin: 0;
    padding: 0 1.3rem;
    border: 1px solid #065F46;
    border-radius: 10px;
    background-color: #047857;
    /* Starts at Emerald 700: a #059669 top stop put the label at 3.77:1. */
    background-image: linear-gradient(180deg, #047857 0%, #065F46 100%);
    color: #FFFFFF;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 10px 22px -12px rgba(4, 120, 87, 0.8);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.ch-tools-panel .ch-tool-btn:hover,
.ch-tools-panel .ch-tool-btn:focus,
.ch-tools-panel .ch-tool-btn:focus-visible,
.ch-tools-panel .ch-tool-btn:active {
    background-color: #065F46;
    background-image: linear-gradient(180deg, #065F46 0%, #064E3B 100%);
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 26px -12px rgba(4, 120, 87, 0.9);
}

.ch-tools-panel .ch-tool-btn:focus-visible {
    outline: 3px solid rgba(16, 185, 129, 0.5);
    outline-offset: 2px;
}

.ch-tools-panel .ch-tool-btn svg { transition: transform 0.25s; }
.ch-tools-panel .ch-tool-btn:hover svg { transform: translateX(3px); }

.ch-tool-feature-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: auto;
}

.ch-tool-feature-note {
    font-size: 0.84rem;
    color: var(--ch-tp-hint);
}

/* One featured tool (on the other one's own page): body left, picture right. */
.ch-tools-feature-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.ch-tools-feature-grid.is-single .ch-tool-feature {
    flex-direction: row-reverse;
}

.ch-tools-feature-grid.is-single .ch-tool-visual {
    flex: 0 0 42%;
    border-bottom: 0;
    border-left: 1px solid var(--ch-tp-card-border);
}

/* --- Also free: PDF Tools and QR Code Generator ----------------------------- */

.ch-tools-more {
    position: relative;
    margin-top: 1.75rem;
}

.ch-tools-more-label {
    display: block;
    margin-bottom: 0.7rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ch-tp-hint);
}

.ch-tools-more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ch-tools-more-grid.is-single { grid-template-columns: minmax(0, 1fr); }

.ch-tool-mini {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
    padding: 1.1rem 1.2rem;
    background-color: var(--ch-tp-more);
    border: 1px solid var(--ch-tp-card-border);
    border-radius: 14px;
}

.ch-tool-mini-ico {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--ch-tp-accent);
}

.ch-tool-mini-body { min-width: 0; }

.ch-tools-panel .ch-tool-mini-name,
.ch-tools-panel .ch-tool-mini-name:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ch-tp-name);
    text-decoration: none;
}

.ch-tools-panel .ch-tool-mini-name:hover,
.ch-tools-panel .ch-tool-mini-name:focus-visible,
.ch-tools-panel .ch-tool-mini-name:active {
    color: var(--ch-tp-accent);
    background-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ch-tool-mini-d {
    margin: 0.3rem 0 0.65rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ch-tp-desc);
}

.ch-tool-mini-d strong { color: var(--ch-tp-name); font-weight: 700; }

.ch-tool-mini-links,
.ch-tool-mini-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-tool-mini-links li,
.ch-tool-mini-chips li { margin: 0; }

.ch-tools-panel .ch-tool-mini-links a,
.ch-tools-panel .ch-tool-mini-links a:visited {
    display: inline-block;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--ch-tp-card-border);
    border-radius: 99px;
    background-color: var(--ch-tp-card);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ch-tp-chip-ink);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.ch-tools-panel .ch-tool-mini-links a:hover,
.ch-tools-panel .ch-tool-mini-links a:focus-visible,
.ch-tools-panel .ch-tool-mini-links a:active {
    border-color: #10B981;
    background-color: var(--ch-tp-card);
    color: var(--ch-tp-accent);
    text-decoration: none;
}

.ch-tool-mini-chips li {
    padding: 0.28rem 0.6rem;
    border-radius: 99px;
    background-color: var(--ch-tp-chip);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ch-tp-chip-ink);
}

.ch-tools-panel a:focus-visible {
    outline: 2px solid #10B981;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ch-tv-badges span { animation: none; }
    .ch-tv-report,
    .ch-tool-feature { transition: none; }
}

/* --- Homepage responsive --- */
@media (max-width: 1024px) {
    .ch-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ch-home .site-main {
        gap: 2.5rem;
    }

    .ch-card-grid {
        grid-template-columns: 1fr;
    }

    .ch-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .ch-tools-panel {
        padding: 1.75rem 1rem;
    }

    .ch-tools-head { text-align: left; margin-bottom: 1.5rem; }
    .ch-tool-visual { min-height: 0; padding: 1rem 0.85rem; }
    .ch-tool-feature-body { padding: 1.2rem 1.1rem 1.25rem; }

    /* Field above button: a 390px row leaves the address about 150px. */
    .ch-tool-speed { flex-direction: column; }
    .ch-tools-panel .ch-tool-btn { width: 100%; }
    .ch-tool-feature-cta { flex-direction: column; align-items: stretch; }
    .ch-tool-feature-note { text-align: center; }
    .ch-tool-mini { padding: 1rem; }
}

/* Feature cards stack before the reading width gets cramped; the single
   (side by side) card turns back into picture over text. */
@media (max-width: 900px) {
    .ch-tools-feature-grid,
    .ch-tools-more-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ch-tools-feature-grid.is-single .ch-tool-feature { flex-direction: column; }

    .ch-tools-feature-grid.is-single .ch-tool-visual {
        flex: 0 0 auto;
        border-left: 0;
        border-bottom: 1px solid var(--ch-tp-card-border);
    }
}

/* ==========================================================================
   11. CATEGORY & ARCHIVE LISTINGS (GeneratePress loop restyle)
   .blog:not(.home) keeps a future static posts page consistent without
   touching the custom front-page template (body: home + blog).
   ========================================================================== */
.archive .site-main,
.search .site-main,
.blog:not(.home) .site-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.archive .site-main > *,
.search .site-main > *,
.blog:not(.home) .site-main > * {
    margin: 0 !important;
}

.archive .page-header,
.search .page-header,
.blog:not(.home) .page-header {
    grid-column: 1 / -1;
    padding: 2.25rem 2.5rem;
    border-radius: 12px;
    border: 1px solid var(--ch-border);
}

.archive .page-title,
.search .page-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}

.ch-archive-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ch-cta);
    margin-bottom: 0.75rem;
}

.ch-archive-desc {
    margin: 0.85rem 0 0;
    color: var(--ch-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 70ch;
}

.archive .site-main article,
.search .site-main article,
.blog:not(.home) .site-main article {
    height: 100%;
}

.archive .inside-article,
.search .inside-article,
.blog:not(.home) .inside-article {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ch-border);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}

.archive article:hover .inside-article,
.search article:hover .inside-article,
.blog:not(.home) article:hover .inside-article {
    transform: translateY(-4px);
    border-color: var(--ch-cta);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.15);
}

.archive .post-image,
.search .post-image,
.blog:not(.home) .post-image {
    order: -1;
    margin: 0;
    overflow: hidden;
}

.archive .post-image img,
.search .post-image img,
.blog:not(.home) .post-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.archive article:hover .post-image img,
.search article:hover .post-image img,
.blog:not(.home) article:hover .post-image img {
    transform: scale(1.04);
}

.archive .entry-header,
.search .entry-header,
.blog:not(.home) .entry-header {
    padding: 1.25rem 1.4rem 0;
}

.archive h2.entry-title,
.search h2.entry-title,
.blog:not(.home) h2.entry-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.archive h2.entry-title a,
.search h2.entry-title a,
.blog:not(.home) h2.entry-title a {
    color: var(--ch-text-main);
    transition: color 0.2s;
}

.archive h2.entry-title a:hover,
.search h2.entry-title a:hover,
.blog:not(.home) h2.entry-title a:hover {
    color: var(--ch-accent);
}

.archive .entry-header .entry-meta,
.search .entry-header .entry-meta,
.blog:not(.home) .entry-header .entry-meta {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.75rem;
    color: var(--ch-text-muted);
    margin-top: 0;
}

.archive .entry-summary,
.search .entry-summary,
.blog:not(.home) .entry-summary {
    padding: 0.75rem 1.4rem 1.35rem;
    color: var(--ch-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.archive .entry-summary p,
.search .entry-summary p,
.blog:not(.home) .entry-summary p {
    margin: 0;
}

.archive .read-more,
.search .read-more,
.blog:not(.home) .read-more {
    font-weight: 700;
    color: var(--ch-accent);
}

.archive .paging-navigation,
.search .paging-navigation,
.blog:not(.home) .paging-navigation {
    grid-column: 1 / -1;
}

/* --- Archive responsive --- */
@media (max-width: 1024px) {
    .archive .site-main,
    .search .site-main,
    .blog:not(.home) .site-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .archive .site-main,
    .search .site-main,
    .blog:not(.home) .site-main {
        grid-template-columns: 1fr;
    }

    .archive .page-header,
    .search .page-header,
    .blog:not(.home) .page-header {
        padding: 1.5rem;
    }
}

/* ==========================================================================
   12. LISTING GUTTERS (front page + archives below the 1200px canvas)
   GP's .grid-container centers itself above 1200px but has no side padding,
   so listing grids hit the viewport edge below that. Single post is immune
   (its .inside-article cards carry their own inner padding). Gutter values
   mirror .inside-header (2rem desktop / 1rem mobile) so sections align with
   the logo.
   ========================================================================== */
@media (max-width: 1260px) {
    .ch-home .site-main,
    .ch-page .site-main,
    .archive .site-main,
    .search .site-main,
    .blog:not(.home) .site-main {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 768px) {
    .ch-home .site-main,
    .ch-page .site-main,
    .archive .site-main,
    .search .site-main,
    .blog:not(.home) .site-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ==========================================================================
   13. STATIC PAGES: LEGAL DOCUMENTS & CONTACT
   ========================================================================== */
.ch-page .site-main {
    padding-top: 2.5rem;
    padding-bottom: 3.5rem;
}

/* --- Legal document card --- */
.ch-legal {
    max-width: 860px;
    margin: 0 auto;
    background-color: #FFFFFF;
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    padding: 3rem;
}

.ch-legal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ch-cta);
    margin-bottom: 0.75rem;
}

.ch-legal-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.ch-legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--ch-border);
}

.ch-legal-chip {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ch-text-muted);
    background-color: var(--ch-bg-main);
    border: 1px solid var(--ch-border);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

.ch-legal-body {
    padding-top: 0.75rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ch-text-main);
}

.ch-legal-body h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ch-border);
}

.ch-legal-body h3 {
    font-size: 1.08rem;
    font-weight: 800;
    margin: 1.75rem 0 0.75rem;
}

.ch-legal-body p {
    margin: 0 0 1rem;
}

.ch-legal-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.ch-legal-body li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.6rem;
}

.ch-legal-body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--ch-cta);
    opacity: 0.85;
}

.ch-legal-body a,
.ch-email {
    color: var(--ch-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.4);
    transition: color 0.2s, border-color 0.2s;
}

.ch-legal-body a:hover,
.ch-email:hover {
    color: var(--ch-accent-hover);
    border-bottom-style: solid;
}

/* --- Contact page --- */
.ch-contact-head {
    margin: 0 0 2rem;
}

.ch-contact-title {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.ch-contact-sub {
    color: var(--ch-text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 62ch;
    margin: 0;
}

.ch-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 1.5rem;
    align-items: start;
}

.ch-contact-card {
    background-color: #FFFFFF;
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    padding: 2rem;
}

.ch-contact-card h2 {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin: 0 0 1.25rem;
}

.ch-contact-aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Form fields */
.ch-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ch-field {
    margin-bottom: 1.1rem;
}

.ch-field label {
    display: block;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ch-text-muted);
    margin-bottom: 0.4rem;
}

.ch-field input,
.ch-field select,
.ch-field textarea {
    width: 100%;
    background-color: var(--ch-bg-main);
    border: 1px solid var(--ch-border);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: var(--ch-text-main);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ch-field textarea {
    resize: vertical;
    min-height: 140px;
}

.ch-field input:focus,
.ch-field select:focus,
.ch-field textarea:focus {
    outline: none;
    border-color: var(--ch-cta);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.ch-field.has-error input,
.ch-field.has-error select,
.ch-field.has-error textarea {
    border-color: #EF4444;
}

.ch-field-error {
    display: none;
    color: #DC2626;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.35rem;
}

.ch-field.has-error .ch-field-error {
    display: block;
}

/* Honeypot: visually removed, still present for bots */
.ch-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Submit button states */
.ch-form-submit {
    width: 100%;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}

.ch-form-submit.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.ch-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: ch-spin 0.7s linear infinite;
}

.ch-form-submit.is-loading .ch-spinner {
    display: inline-block;
}

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

.ch-form-alert {
    display: none;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #B91C1C;
    background-color: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.ch-form-alert.is-visible {
    display: block;
}

.ch-recaptcha-note {
    margin: 0.9rem 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

.ch-recaptcha-note a {
    color: var(--ch-text-muted);
    text-decoration: underline;
}

/* Google requires this attribution text when the badge is hidden */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Success panel */
.ch-form-success {
    text-align: center;
    padding: 2rem 1rem;
}

.ch-success-icon {
    display: inline-flex;
    color: var(--ch-cta);
    margin-bottom: 1rem;
}

.ch-form-success h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.ch-form-success p {
    color: var(--ch-text-muted);
    margin: 0;
}

/* Company info rows */
.ch-info-rows {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ch-info-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ch-info-label {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ch-text-muted);
}

.ch-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ch-text-main);
    line-height: 1.5;
}

/* Direct channels */
.ch-channel {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 0;
    border-top: 1px dashed var(--ch-border);
}

.ch-channel:first-of-type {
    border-top: none;
    padding-top: 0;
}

.ch-channel:last-of-type {
    padding-bottom: 0;
}

.ch-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--ch-cta);
}

.ch-channel-body h3 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.ch-channel-body p {
    font-size: 0.85rem;
    color: var(--ch-text-muted);
    line-height: 1.5;
    margin: 0.25rem 0 0.4rem;
}

.ch-channel-body .ch-email {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.85rem;
}

/* Support scope: a light card with an emerald rule in light mode, the
   DevSecOps panel in dark only (dark-mode.css). It was #0F172A in both themes
   until 2026-10-04; Adrian ruled out dark panels on a light page. */
.ch-scope-card {
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, #F0FDF4 0%, rgba(240, 253, 244, 0) 40%);
    border: 1px solid var(--ch-border);
    border-top: 3px solid #10B981;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 32px -24px rgba(15, 23, 42, 0.25);
}

.ch-scope-card h2 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #0F172A;
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 0.75rem;
}

.ch-scope-card h2 svg {
    color: #047857;
}

.ch-scope-card p {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 0.9rem;
}

.ch-scope-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
}

.ch-scope-card li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0.5rem;
    color: #334155;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ch-scope-card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background-color: var(--ch-cta);
}

.ch-scope-exception {
    border-top: 1px dashed #CBD5E1;
    padding-top: 0.9rem;
    margin-bottom: 0 !important;
}

/* --- Static pages responsive --- */
@media (max-width: 900px) {
    .ch-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .ch-legal {
        padding: 1.75rem 1.25rem;
    }

    .ch-contact-card {
        padding: 1.5rem 1.25rem;
    }

    .ch-form-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   14. GLOBAL FOOTER
   Custom semantic footer injected on generate_footer (GP .site-info removed).
   Light: white surface over the #F8FAFC page. Dark override in dark-mode.css.
   ========================================================================== */
.site-footer {
    position: relative;
    background-color: #FFFFFF;
    border-top: 1px solid var(--ch-border);
    margin-top: 2.5rem;
}

/* Emerald hairline: the same system signal every panel carries, stretched
   across the top edge of the last thing a visitor scrolls past. Same recipe
   as .ch-dossier-rail (transparent > cta > faint tail > transparent, 220%
   tile, ping-pong background-position) but kept as its own keyframe rather
   than sharing ch-dos-rail, since this one runs unconditionally on every
   page instead of behind the dossier's JS motion gate. */
.site-footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    background-image: linear-gradient(90deg, transparent 0%, var(--ch-cta) 20%, rgba(16, 185, 129, 0.3) 58%, transparent 100%);
    background-size: 220% 100%;
    background-position: 130% 0;
    animation: ch-footer-rail 9s ease-in-out infinite;
}

@keyframes ch-footer-rail {
    0%, 100% { background-position: 130% 0; }
    50%      { background-position: -30% 0; }
}

.ch-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 2rem 0;
}

.ch-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 3.6fr) repeat(4, minmax(0, 2fr));
    gap: 2.25rem;
    padding-bottom: 2.75rem;
}

/* --- Brand & corporate column --- */
.ch-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none !important;
    margin-bottom: 1rem;
}

.ch-footer-logo .ch-logo-text {
    font-size: 1.35rem;
    color: var(--ch-text-main);
}

.ch-footer-mission {
    color: var(--ch-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
    max-width: 34ch;
}

.ch-footer-mission strong {
    color: var(--ch-text-main);
    font-weight: 700;
}

/* Company profiles (carthacker_core_org_profiles): a quiet outline pill under
   the mission. Muted at rest so it never competes with the guide and tool
   columns; emerald on hover, focus and press, never blue (blue marks Premium).
   Every state declares color AND background: the global a:hover paints links
   blue at 0,1,1, these selectors sit at 0,3,0. The icon tile repeats the
   corporate fact tiles below it. Tokens flip both themes. */
.ch-footer-social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.5rem 0 1.25rem;
    padding: 0;
}

.ch-footer-social li {
    margin: 0;
}

.ch-footer-brand .ch-footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.28rem 0.8rem 0.28rem 0.28rem;
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    background-color: transparent;
    color: var(--ch-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ch-footer-brand .ch-footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: rgba(16, 185, 129, 0.14);
    color: var(--ch-cta-text);
}

.ch-footer-brand .ch-footer-social-link:hover,
.ch-footer-brand .ch-footer-social-link:focus-visible,
.ch-footer-brand .ch-footer-social-link:active {
    color: var(--ch-cta-text);
    background-color: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.45);
    text-decoration: none;
}

.ch-footer-brand .ch-footer-social-link:focus-visible {
    outline: 2px solid var(--ch-cta-text);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ch-footer-brand .ch-footer-social-link {
        transition: none;
    }
}

/* Recessed "well" surface: one step darker/duller than the footer card it sits
   on, same ladder dark-mode.css documents for the rest of the site (page > card
   > well). Themed via tokens, not hardcoded, so it reads as an inset technical
   panel in both light and dark instead of a fixed-black box that only fits dark mode. */
.ch-footer-corp {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--ch-bg-main);
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    padding: 1.1rem 1.15rem 1.25rem;
    font-style: normal;
}

.ch-footer-corp::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ch-cta), rgba(16, 185, 129, 0) 75%);
}

.ch-footer-corp-name {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ch-text-main);
    margin-bottom: 0.9rem;
}

.ch-footer-corp-name svg {
    flex-shrink: 0;
    color: var(--ch-cta);
}

.ch-footer-corp-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ch-footer-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.ch-footer-fact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    margin-top: 0.05rem;
    background-color: rgba(16, 185, 129, 0.14);
    color: var(--ch-cta);
}

.ch-footer-fact-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ch-footer-fact-label {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--ch-text-muted);
}

.ch-footer-fact-value {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ch-text-main);
}

/* --- Link columns --- */
.ch-footer-heading {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--ch-text-main);
    margin: 0.35rem 0 1.1rem;
}

.ch-footer-heading::before {
    content: '// ';
    color: var(--ch-cta);
}

.ch-footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.ch-footer-col a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ch-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover, keyboard focus and press read the same. GeneratePress paints
   a:focus and a:active #000, which on the dark footer was 1.44:1. */
.ch-footer-col a:hover,
.ch-footer-col a:focus,
.ch-footer-col a:active {
    color: var(--ch-accent);
    background-color: transparent;
    transform: translateX(4px);
}

/* Tools still in build: named but not linked, so the footer never points a
   crawler (or a person) at a URL that does not resolve yet */
/* Inline, not inline-flex: a long name such as Volume Discounts Engine wraps
   in the narrow column, and as a flex item the Soon pill was pushed to the
   far edge beside the second line. Inline, it follows the last word. Full
   opacity since 2026-10-03: at 65% the row was about 3.5:1 in dark mode, and
   these rows now carry the roadmap. */
.ch-footer-soon-item {
    display: inline;
    color: var(--ch-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.ch-footer-soon {
    display: inline-block;
    margin-left: 0.4rem;
    vertical-align: 0.1em;
    padding: 0.08rem 0.4rem;
    border-radius: 5px;
    border: 1px solid var(--ch-border);
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Bottom legal bar --- */
.ch-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    border-top: 1px solid var(--ch-border);
    padding: 1.25rem 0;
}

.ch-footer-copy {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.75rem;
    color: var(--ch-text-muted);
}

.ch-footer-legal {
    display: flex;
    gap: 1.5rem;
}

.ch-footer-legal a {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ch-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ch-footer-legal a:hover,
.ch-footer-legal a:focus,
.ch-footer-legal a:active {
    color: var(--ch-accent);
    background-color: transparent;
}

/* --- Footer responsive: brand + 4 cols > 4 cols under a full-width brand >
   2 cols > 1 col --- */
@media (max-width: 1024px) {
    .ch-footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ch-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .ch-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ch-footer-inner {
        padding: 2.5rem 1rem 0;
    }

    .ch-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .ch-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ==========================================================================
   15. AUTHOR E-E-A-T SYSTEM (Sidebar Box + Dossier Archive)
   Sidebar: identity row wraps, bio sits full-width below, compact verified strip.
   Dossier: light panel in light mode, slate in dark (--ch-dos-* tokens, 15.2).
   ========================================================================== */

/* --- 15.1 Sidebar author box --- */
.ch-author-box .ch-author-wrapper {
    align-items: center;
    flex-wrap: wrap;
}

.ch-author-name a {
    color: var(--ch-text-main);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-author-name a:hover {
    color: var(--ch-cta-text);
}

.ch-author-role {
    display: block;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ch-cta-text);
    line-height: 1.4;
}

.ch-author-box .ch-author-bio {
    margin-top: 0.85rem;
}

.ch-author-eeat {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ch-border);
}

.ch-eeat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ch-border);
    border-radius: 8px;
    color: var(--ch-text-muted);
    transition: color 0.2s, border-color 0.2s, transform 0.2s, background-color 0.2s;
}

.ch-eeat-icon:hover,
.ch-eeat-icon:focus-visible {
    color: var(--ch-cta-text);
    border-color: var(--ch-cta);
    background-color: rgba(16, 185, 129, 0.08);
    transform: translateY(-2px);
}

.ch-eeat-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.ch-eeat-more:hover,
.ch-eeat-more:focus-visible {
    color: var(--ch-cta-text);
}

.ch-eeat-more svg {
    transition: transform 0.2s;
}

.ch-eeat-more:hover svg {
    transform: translateX(3px);
}

/* --- 15.2 Author archive layout + alignment grid ---
   .archive .site-main is a 3-col grid (default archives); the dossier template
   owns its own internal grids, so the author archive falls back to block flow.

   --ch-author-gutter is the page's single alignment grid: it is the dossier
   panel's horizontal padding AND the inset of every section below it, so the
   hero copy, the competency tiles, the footprint cards and the publication
   grid all share one left/right edge down the whole page. */
.author .site-main {
    display: block;
}

/* Design tokens for every panel on this page. dark-mode.css section 12
   re-points the same names, so the dossier hero and the contact panel are each
   a fully designed light surface AND a fully designed dark surface without a
   single duplicated rule.

   Light ladder: page #F8FAFC < panel #FFFFFF > tile #F1F5F9, hover lift back
   to #FFFFFF - the mirror of the dark ladder. Emerald drops to 600 here
   because #10B981 on white is a 2.6:1 label. */
.ch-author-page {
    --ch-author-gutter: clamp(1.4rem, 3.4vw, 2.6rem);
    --ch-fp-sheen: rgba(255, 255, 255, 0.62);

    --ch-dos-surface: #FFFFFF;
    --ch-dos-surface-2: #F8FAFC;
    --ch-dos-tile: #F1F5F9;
    --ch-dos-tile-hover: #FFFFFF;
    --ch-dos-border: #E2E8F0;
    --ch-dos-border-soft: #CBD5E1;
    --ch-dos-name: #0F172A;
    --ch-dos-body: #334155;
    --ch-dos-muted: #64748B;
    --ch-dos-faint: #94A3B8;
    --ch-dos-accent: #059669;
    --ch-dos-accent-bg: rgba(16, 185, 129, 0.09);
    --ch-dos-accent-bg-hi: rgba(16, 185, 129, 0.16);
    --ch-dos-accent-line: rgba(5, 150, 105, 0.28);
    --ch-dos-grid: rgba(15, 23, 42, 0.05);
    --ch-dos-glow: rgba(16, 185, 129, 0.16);
    --ch-dos-shadow: 0 26px 50px -36px rgba(15, 23, 42, 0.55);
    --ch-dos-shadow-lift: 0 16px 28px -16px rgba(15, 23, 42, 0.26);
    --ch-dos-ring: rgba(16, 185, 129, 0.16);
    --ch-dos-avatar-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.45);
}

/* !important required: .archive .site-main > * zeroes margins with !important */
.ch-author-page > .site-main > section {
    margin-bottom: 3rem !important;
}

.ch-author-page > .site-main > section:not(.ch-dossier),
.ch-author-plain-header {
    padding-left: var(--ch-author-gutter);
    padding-right: var(--ch-author-gutter);
}

/* --- 15.3 Motion layer (opt-in) ---
   html.ch-anim is stamped pre-paint by carthacker_core_motion_boot() in
   core-ui.php, and only when the browser supports IntersectionObserver AND the
   reader allows motion. Gating in <head> rather than from the deferred script
   is deliberate: these surfaces start at opacity 0, so a late class would let
   the finished page paint and then blink out. Without the class every surface
   below renders in its finished state - exactly what no-JS, legacy and
   reduced-motion visitors get. */
html.ch-anim .ch-author-page [data-ch-reveal] {
    opacity: 0;
    transform: translateY(14px);
}

html.ch-anim .ch-author-page [data-ch-reveal].is-inview {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered children, driven by the --i index the script stamps on each one.
   Deliberately an animation, not a transition: grid children own :hover
   transforms, and a transition on the same properties would swallow them.
   .is-done is stamped once the cascade finishes and drops the whole ruleset,
   handing transform/opacity back to the hover layer. */
html.ch-anim .ch-author-page [data-ch-stagger]:not(.is-done) > * {
    opacity: 0;
}

html.ch-anim .ch-author-page [data-ch-stagger].is-inview:not(.is-done) > * {
    animation: ch-dos-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 65ms) both;
}

@keyframes ch-dos-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* --- 15.4 Dossier hero (tokens live on .ch-author-page, section 15.2) --- */
.ch-dossier {
    /* Spotlight origin: static by default, pointer-tracked by
       author-dossier.js when it finds a fine pointer */
    --ch-dos-mx: 22%;
    --ch-dos-my: -8%;

    position: relative;
    overflow: hidden;
    background-color: var(--ch-dos-surface);
    background-image: linear-gradient(180deg, var(--ch-dos-surface) 0%, var(--ch-dos-surface-2) 100%);
    border: 1px solid var(--ch-dos-border);
    border-radius: 16px;
    padding: clamp(1.75rem, 4vw, 2.9rem) var(--ch-author-gutter);
    box-shadow: var(--ch-dos-shadow);
}

/* Emerald spotlight */
.ch-dossier::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 52% at var(--ch-dos-mx) var(--ch-dos-my), var(--ch-dos-glow), transparent 68%);
}

/* Blueprint grid: engineering substrate. Near-invisible, but it is what stops
   the light panel from reading as a flat empty box. */
.ch-dossier::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--ch-dos-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ch-dos-grid) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 0%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 78% 62% at 50% 0%, #000 0%, transparent 80%);
}

.ch-dossier > * {
    position: relative;
    z-index: 1;
}

/* Top rail: the same "system online" hairline the Learning Center deck uses */
.ch-dossier-rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(90deg, transparent 0%, var(--ch-cta) 20%, rgba(16, 185, 129, 0.3) 58%, transparent 100%);
    background-size: 220% 100%;
    background-position: 120% 0;
}

html.ch-anim .ch-author-page .ch-dossier.is-inview .ch-dossier-rail {
    animation: ch-dos-rail 8s ease-in-out 0.6s infinite;
}

@keyframes ch-dos-rail {
    0%, 100% { background-position: 130% 0; }
    50%      { background-position: -30% 0; }
}

.ch-dossier-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-bottom: 2rem;
}

/* --- Portrait: orbital emerald sweep behind a hard emerald ring --- */
.ch-dossier-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 132px;
    height: 132px;
    border-radius: 50%;
}

.ch-dossier-avatar-wrap::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--ch-cta) 55deg, transparent 130deg, transparent 360deg);
    opacity: 0.6;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

/* No mask support means the conic gradient would paint a solid disc: hide it */
@supports not ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
    .ch-dossier-avatar-wrap::before { display: none; }
}

html.ch-anim .ch-author-page .ch-dossier-avatar-wrap::before {
    animation: ch-dos-orbit 9s linear infinite;
}

@keyframes ch-dos-orbit {
    to { transform: rotate(360deg); }
}

.ch-dossier-avatar {
    display: block;
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ch-cta);
    box-shadow: 0 0 0 6px var(--ch-dos-ring), var(--ch-dos-avatar-shadow);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.ch-dossier-avatar-wrap:hover .ch-dossier-avatar {
    transform: scale(1.04);
    box-shadow: 0 0 0 10px var(--ch-dos-ring), var(--ch-dos-avatar-shadow);
}

/* --- Identity block --- */
.ch-dossier-kicker {
    display: inline-block;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ch-dos-accent);
    margin-bottom: 0.6rem;
}

/* Terminal caret: DevSecOps signature, pure decoration */
.ch-dossier-kicker::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 12px;
    margin-left: 7px;
    vertical-align: -1px;
    background-color: var(--ch-dos-accent);
}

html.ch-anim .ch-author-page .ch-dossier-kicker::after {
    animation: ch-dos-caret 1.15s steps(1) infinite;
}

@keyframes ch-dos-caret {
    0%, 50%    { opacity: 1; }
    51%, 100%  { opacity: 0; }
}

.ch-dossier-name {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ch-dos-name);
    margin: 0 0 0.4rem;
}

.ch-dossier-role {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ch-dos-muted);
    margin: 0 0 0.9rem;
}

.ch-dossier-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ch-dossier-tags span {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ch-dos-muted);
    background-color: var(--ch-dos-tile);
    border: 1px solid var(--ch-dos-border);
    border-radius: 6px;
    padding: 0.32rem 0.62rem;
    white-space: nowrap;
    transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-dossier-tags span:hover {
    color: var(--ch-dos-accent);
    background-color: var(--ch-dos-accent-bg);
    border-color: var(--ch-dos-accent-line);
    transform: translateY(-2px);
}

/* --- Telemetry stats --- */
.ch-dossier-stats {
    display: flex;
    gap: 1.75rem;
    margin-left: auto;
}

.ch-dossier-stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--ch-dos-border);
}

.ch-dossier-stat-value {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ch-dos-accent);
}

.ch-dossier-stat-label {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-dos-faint);
}

/* --- Biography --- */
.ch-dossier-bio {
    max-width: 78ch;
}

.ch-dossier-bio p {
    color: var(--ch-dos-body);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 1.1rem;
}

.ch-dossier-bio p:first-child {
    font-size: 1.08rem;
}

.ch-dossier-bio p:last-child {
    margin-bottom: 0;
}

.ch-dossier-bio strong {
    color: var(--ch-dos-name);
    font-weight: 700;
}

/* --- 15.5 Competency matrix --- */
.ch-dossier-expertise {
    border-top: 1px dashed var(--ch-dos-border-soft);
    margin-top: 2rem;
    padding-top: 1.75rem;
}

.ch-dossier-subhead {
    display: inline-block;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ch-dos-accent);
    margin-bottom: 1.25rem;
}

.ch-expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.ch-expertise-item {
    position: relative;
    overflow: hidden;
    padding: 1.05rem 1.1rem 1.15rem;
    background-color: var(--ch-dos-tile);
    border: 1px solid var(--ch-dos-border);
    border-radius: 12px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}

/* Emerald ignition line across the top edge on hover */
.ch-expertise-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ch-cta), rgba(16, 185, 129, 0));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-expertise-item:hover {
    transform: translateY(-4px);
    background-color: var(--ch-dos-tile-hover);
    border-color: var(--ch-dos-accent-line);
    box-shadow: var(--ch-dos-shadow-lift);
}

.ch-expertise-item:hover::before {
    transform: scaleX(1);
}

.ch-expertise-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background-color: var(--ch-dos-accent-bg);
    border: 1px solid var(--ch-dos-accent-line);
    color: var(--ch-dos-accent);
    margin-bottom: 0.7rem;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;
}

.ch-expertise-item:hover .ch-expertise-icon {
    transform: translateY(-2px) rotate(-6deg);
    background-color: var(--ch-dos-accent-bg-hi);
}

.ch-expertise-title {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ch-dos-name);
    margin: 0 0 0.35rem;
}

.ch-expertise-desc {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--ch-dos-muted);
    margin: 0;
}

/* --- 15.6 Section heads on the dossier page ---
   The emerald segment draws itself in under each head as the section arrives. */
.ch-author-page .ch-section-head {
    position: relative;
}

.ch-author-page .ch-section-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 84px;
    background-color: var(--ch-cta);
}

html.ch-anim .ch-author-page .ch-section-head::after {
    width: 0;
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

html.ch-anim .ch-author-page .ch-section-head.is-inview::after {
    width: 84px;
}

/* --- 15.7 Verified footprint grid --- */
.ch-footprint-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.ch-footprint-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #FFFFFF;
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    padding: 1.05rem 1.2rem;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
}

/* Sheen sweep: the card reads as a physical, verified credential */
.ch-footprint-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 42%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transform: skewX(-18deg);
    background: linear-gradient(105deg, transparent, var(--ch-fp-sheen), transparent);
}

.ch-footprint-card:hover::before {
    animation: ch-dos-sheen 0.8s ease-out;
}

@keyframes ch-dos-sheen {
    0%   { left: -60%; opacity: 1; }
    100% { left: 118%; opacity: 0; }
}

.ch-footprint-card:hover {
    transform: translateY(-3px);
    border-color: var(--ch-cta);
    box-shadow: 0 10px 20px -8px rgba(15, 23, 42, 0.15);
}

.ch-footprint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background-color: var(--ch-bg-main);
    border: 1px solid var(--ch-border);
    color: var(--ch-text-main);
    transition: color 0.25s, border-color 0.25s, background-color 0.25s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-footprint-card:hover .ch-footprint-icon {
    color: var(--ch-cta);
    border-color: var(--ch-cta);
    transform: translateY(-2px) scale(1.05);
}

.ch-footprint-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ch-footprint-name {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ch-text-main);
}

.ch-footprint-desc {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-footprint-arrow {
    position: relative;
    z-index: 1;
    margin-left: auto;
    color: var(--ch-text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s, transform 0.25s, color 0.25s;
}

.ch-footprint-card:hover .ch-footprint-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--ch-cta);
}

/* --- 15.8 Direct contact panel ---
   Same token system as the dossier hero, so it reads as the closing half of
   the same document rather than a bolted-on CTA. Two columns: what to write
   about on the left, the two protected mailboxes on the right. */
.ch-engage-panel {
    /* The gap is spent twice - once as the grid gap, once as the right
       column's padding - which lands the dashed rule dead centre between the
       two columns instead of hugging the mailboxes. */
    --ch-engage-gap: clamp(1.1rem, 2.2vw, 1.9rem);

    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--ch-engage-gap);
    position: relative;
    overflow: hidden;
    background-color: var(--ch-dos-surface);
    background-image: linear-gradient(180deg, var(--ch-dos-surface) 0%, var(--ch-dos-surface-2) 100%);
    border: 1px solid var(--ch-dos-border);
    border-radius: 16px;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    box-shadow: var(--ch-dos-shadow);
}

/* Emerald wash anchored to the mailbox column - the eye goes right */
.ch-engage-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 60% at 100% 0%, var(--ch-dos-glow), transparent 70%);
}

.ch-engage-panel > * {
    position: relative;
    z-index: 1;
}

.ch-engage-subhead {
    display: inline-block;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ch-dos-accent);
    margin-bottom: 1.1rem;
}

/* --- Left column: what to write about --- */
.ch-engage-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
}

.ch-engage-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
}

.ch-engage-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background-color: var(--ch-dos-accent-bg);
    border: 1px solid var(--ch-dos-accent-line);
    color: var(--ch-dos-accent);
}

.ch-engage-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ch-engage-item-title {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ch-dos-name);
}

.ch-engage-item-desc {
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--ch-dos-muted);
}

/* --- Right column: the two protected mailboxes --- */
.ch-engage-contact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-left: 1px dashed var(--ch-dos-border-soft);
    padding-left: var(--ch-engage-gap);
}

.ch-engage-mail {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background-color: var(--ch-dos-tile);
    border: 1px solid var(--ch-dos-border);
    border-radius: 12px;
    padding: 0.95rem 1.1rem;
    margin-bottom: 0.75rem;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.ch-engage-mail:hover {
    transform: translateY(-3px);
    background-color: var(--ch-dos-tile-hover);
    border-color: var(--ch-cta);
    box-shadow: var(--ch-dos-shadow-lift);
}

.ch-engage-mail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--ch-dos-accent-bg);
    border: 1px solid var(--ch-dos-accent-line);
    color: var(--ch-dos-accent);
    transition: background-color 0.3s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-engage-mail:hover .ch-engage-mail-icon {
    background-color: var(--ch-dos-accent-bg-hi);
    transform: translateY(-1px) scale(1.05);
}

.ch-engage-mail-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.ch-engage-mail-label {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-dos-faint);
}

/* Pre-reveal this reads "reveal protected email"; email-guard.js swaps in the
   real address once the DOM is up. Wrapping is allowed so long mailboxes do
   not blow out the card on narrow viewports. */
.ch-engage-mail-addr {
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ch-dos-name);
    overflow-wrap: anywhere;
    transition: color 0.25s;
}

.ch-engage-mail:hover .ch-engage-mail-addr {
    color: var(--ch-dos-accent);
}

.ch-engage-mail-arrow {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--ch-dos-faint);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s, transform 0.25s, color 0.25s;
}

.ch-engage-mail:hover .ch-engage-mail-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--ch-cta);
}

.ch-engage-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ch-dos-faint);
}

.ch-engage-note svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: var(--ch-dos-accent);
}

/* --- 15.9 Publications feed + pagination --- */
.ch-author-empty {
    color: var(--ch-text-muted);
    font-size: 1rem;
}

.ch-author-page .navigation.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.ch-author-page .nav-links {
    display: flex;
    gap: 0.5rem;
}

.ch-author-page .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.75rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ch-text-main);
    background-color: #FFFFFF;
    border: 1px solid var(--ch-border);
    border-radius: 8px;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.ch-author-page a.page-numbers:hover {
    color: var(--ch-cta);
    border-color: var(--ch-cta);
}

.ch-author-page .page-numbers.current {
    background-color: var(--ch-cta);
    border-color: var(--ch-cta);
    color: #FFFFFF;
}

/* --- 15.10 Responsive --- */
@media (max-width: 1024px) {
    .ch-expertise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ch-engage-panel {
        grid-template-columns: 1fr;
    }

    /* Stacked: the rule flips from a column divider to a horizontal one */
    .ch-engage-contact {
        border-left: 0;
        padding-left: 0;
        border-top: 1px dashed var(--ch-dos-border-soft);
        padding-top: 1.5rem;
    }

    .ch-footprint-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ch-dossier-stats {
        margin-left: 0;
        width: 100%;
        gap: 2rem;
        border-top: 1px dashed var(--ch-dos-border-soft);
        padding-top: 1.5rem;
    }
}

@media (max-width: 640px) {
    .ch-expertise-grid {
        grid-template-columns: 1fr;
    }

    .ch-footprint-grid {
        grid-template-columns: 1fr;
    }

    .ch-dossier-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ch-dossier-avatar-wrap,
    .ch-dossier-avatar {
        width: 104px;
        height: 104px;
    }

    .ch-dossier-stats {
        flex-wrap: wrap;
        gap: 1.25rem 2rem;
    }
}

/* Hard stop for the ambient loops: the JS motion gate covers entrance
   choreography, this covers everything CSS drives on its own. */
@media (prefers-reduced-motion: reduce) {
    .ch-dossier-rail,
    .ch-dossier-avatar-wrap::before,
    .ch-dossier-kicker::after,
    .ch-footprint-card:hover::before,
    .site-footer::before {
        animation: none !important;
    }
}

/* ==========================================================================
   16. ACCOUNT SYSTEM (GLOBAL): HEADER AVATAR DROPDOWN + LEARNING CENTER DECK
   Loaded site-wide via style.css because the header and single posts render
   these surfaces on every template (portal.css only loads on /dashboard/).
   ========================================================================== */

/* --- 16.1 Header avatar dropdown --- */
.ch-account {
    position: relative;
}

.ch-account-trigger,
.ch-account-trigger:hover,
.ch-account-trigger:focus {
    appearance: none;
    background: transparent !important;
    border: 0;
    box-shadow: none;
    color: var(--ch-text-muted) !important;
}

.ch-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 3px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s;
}

.ch-account-trigger:hover {
    color: var(--ch-cta) !important;
}

.ch-account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ch-border);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ch-account-trigger:hover .ch-account-avatar,
.ch-account.is-open .ch-account-avatar {
    border-color: var(--ch-cta);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.ch-account-initial {
    background: linear-gradient(135deg, #0F172A, #334155);
    color: #F8FAFC;
    font-size: 0.9rem;
    font-weight: 800;
}

.ch-account-caret {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-account.is-open .ch-account-caret {
    transform: rotate(180deg);
}

.ch-account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    background-color: #FFFFFF;
    border: 1px solid var(--ch-border);
    border-radius: 12px;
    padding: 0.55rem;
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.25);
    z-index: 1001;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-account.is-open .ch-account-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ch-account-head {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.5rem 0.6rem 0.7rem;
    border-bottom: 1px solid var(--ch-border);
    margin-bottom: 0.45rem;
}

.ch-account-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--ch-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-account-email {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.68rem;
    color: var(--ch-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-account-plan {
    align-self: flex-start;
    margin-top: 0.35rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    color: var(--ch-text-muted);
    background-color: var(--ch-bg-main);
    border: 1px solid var(--ch-border);
}

/* Premium is blue sitewide: the /premium/ fill, the dashboard plan badge's
   twin at dropdown scale. */
.ch-account-plan.is-premium {
    color: #FFFFFF;
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%);
    border-color: #1E40AF;
    box-shadow: 0 1px 2px rgba(30, 64, 175, 0.22);
}

.ch-account-links {
    display: flex;
    flex-direction: column;
}

.ch-account-links a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ch-text-main) !important;
    text-decoration: none !important;
    transition: background-color 0.15s, color 0.15s;
}

/* Emerald 700 on hover: brand #10B981 text on the #F8FAFC hover wash was
   2.4:1. Dark mode restates its own pair in dark-mode.css. */
.ch-account-links a:hover,
.ch-account-links a:focus-visible {
    background-color: var(--ch-bg-main);
    color: #047857 !important;
}

.ch-account-links a svg {
    color: var(--ch-text-muted);
    transition: color 0.15s;
}

.ch-account-links a:hover svg,
.ch-account-links a:focus-visible svg {
    color: #047857;
}

.ch-account-signout,
.ch-account-signout:focus {
    appearance: none;
    width: 100%;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px dashed var(--ch-border) !important;
    border-radius: 0 0 8px 8px;
    color: var(--ch-text-main) !important;
    box-shadow: none;
}

.ch-account-signout {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.45rem;
    padding: 0.65rem 0.6rem 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

/* Red 700, not 600: #DC2626 on its own red wash was 4.3:1. */
.ch-account-signout:hover {
    background-color: rgba(220, 38, 38, 0.07) !important;
    color: #B91C1C !important;
}

.ch-account-signout svg {
    color: var(--ch-text-muted);
    transition: color 0.15s;
}

.ch-account-signout:hover svg {
    color: #B91C1C;
}

/* --- 16.2 Shared micro spinner (portal.css is not loaded outside /dashboard/) --- */
.ch-account-signout .ch-btn-spinner,
.ch-lc-toggle .ch-btn-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(16, 185, 129, 0.25);
    border-top-color: var(--ch-cta);
    border-radius: 50%;
    animation: ch-spin-global 0.7s linear infinite;
}

.ch-account-signout.is-loading .ch-btn-spinner,
.ch-lc-toggle.is-loading .ch-btn-spinner {
    display: inline-block;
}

.ch-account-signout.is-loading,
.ch-lc-toggle.is-loading {
    pointer-events: none;
}

.ch-account-signout.is-loading .ch-btn-label,
.ch-lc-toggle.is-loading .ch-btn-label {
    opacity: 0.7;
}

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

/* --- 16.3 Learning Center deck on single posts ------------------------------
   Every surface resolves through the local --ch-lc-* tokens declared on the
   deck root, and dark-mode.css section 13 re-points those same tokens - so the
   whole block flips theme without a single duplicated rule.
   Motion is opt-in: learning-center.js stamps [data-lc-anim] only when the
   browser supports IntersectionObserver AND the reader allows motion, which
   means the no-JS state renders fully visible with the meter already filled. */
.ch-lc-deck {
    --ch-lc-surface: #F8FAFC;
    --ch-lc-raised: #FFFFFF;
    --ch-lc-border: #E2E8F0;
    --ch-lc-border-strong: #CBD5E1;
    --ch-lc-track: #E2E8F0;
    --ch-lc-hatch: rgba(100, 116, 139, 0.20);
    --ch-lc-media: #EDF2F7;
    --ch-lc-shadow: 0 20px 40px -32px rgba(15, 23, 42, 0.55);
    --ch-lc-shadow-lift: 0 18px 30px -16px rgba(15, 23, 42, 0.26);
    --ch-lc-sheen: rgba(255, 255, 255, 0.9);
    --ch-lc-fill: 0%;

    position: relative;
    overflow: hidden;
    max-width: 75ch;
    margin: 2.75rem auto 0;
    padding: 1.4rem 1.55rem 1.55rem;
    background-color: var(--ch-lc-surface);
    border: 1px solid var(--ch-lc-border);
    border-radius: 14px;
    box-shadow: var(--ch-lc-shadow);
}

/* Emerald rail: the same "you are inside a system" signal the sidebar and
   dossier surfaces use, fading out down the card. */
.ch-lc-deck::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ch-cta) 0%, rgba(16, 185, 129, 0.35) 45%, rgba(16, 185, 129, 0) 100%);
    z-index: 0;
}

.ch-lc-deck::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 46% 56% at 0% 0%, rgba(16, 185, 129, 0.13), transparent 62%);
}

.ch-lc-deck > * {
    position: relative;
    z-index: 1;
}

/* Staggered entrance, driven by the --i index JS stamps on each direct child */
.ch-lc-deck[data-lc-anim] > * {
    opacity: 0;
    transform: translateY(12px);
}

.ch-lc-deck[data-lc-anim].is-inview > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 90ms),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 90ms);
}

/* --- Head: kicker + module position --- */
.ch-lc-deck-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.55rem;
}

.ch-lc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ch-cta);
}

.ch-lc-kicker svg {
    animation: ch-lc-breathe 3.6s ease-in-out infinite;
}

.ch-lc-position {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-lc-position-sep {
    color: var(--ch-lc-border-strong);
}

.ch-lc-position-silo {
    padding-left: 0.55rem;
    margin-left: 0.15rem;
    border-left: 1px solid var(--ch-lc-border-strong);
    letter-spacing: 0.8px;
}

.ch-lc-lede {
    margin: 0 0 1.05rem;
    max-width: 62ch;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ch-text-muted);
}

.ch-lc-lede strong {
    color: var(--ch-text-main);
    font-weight: 700;
}

/* --- Progress meter + Mark as Read --- */
.ch-lc-track-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.15rem;
}

.ch-lc-meter {
    min-width: 0;
}

.ch-lc-meter-track {
    position: relative;
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background-color: var(--ch-lc-track);
}

.ch-lc-meter-fill {
    position: relative;
    display: block;
    height: 100%;
    width: var(--ch-lc-fill, 0%);
    border-radius: 999px;
    background: linear-gradient(90deg, #059669 0%, #10B981 55%, #34D399 100%);
    box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.65);
}

/* Held at zero until the surface enters the viewport, then it counts up.
   Scoped to [data-lc-anim] rather than the deck so the sidebar rail's meter
   inherits the same behaviour from one pair of rules. */
[data-lc-anim] .ch-lc-meter-fill {
    width: 0;
}

[data-lc-anim].is-inview .ch-lc-meter-fill {
    width: var(--ch-lc-fill, 0%);
    transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

/* Light travelling across the filled segment: motion without noise */
.ch-lc-meter-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
    background-size: 42% 100%;
    background-repeat: no-repeat;
    animation: ch-lc-drift 2.8s linear infinite;
}

/* Guest state: the rail is visibly present but switched off */
.ch-lc-meter.is-locked .ch-lc-meter-track {
    background-image: repeating-linear-gradient(-45deg, var(--ch-lc-hatch) 0 2px, transparent 2px 7px);
}

.ch-lc-meter.is-locked .ch-lc-meter-fill {
    display: none;
}

.ch-lc-meter-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.76rem;
    color: var(--ch-text-muted);
}

.ch-lc-meter-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ch-lc-meter-count strong {
    color: var(--ch-text-main);
    font-weight: 800;
}

.ch-lc-meter-pct {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ch-cta);
}

.ch-lc-meter-pct.is-muted {
    color: var(--ch-text-muted);
    opacity: 0.7;
}

.ch-lc-toggle,
.ch-lc-toggle:focus {
    appearance: none;
    background-color: var(--ch-lc-raised) !important;
    border: 1px solid var(--ch-lc-border-strong) !important;
    color: var(--ch-text-main) !important;
    box-shadow: none;
}

.ch-lc-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1.15rem;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.ch-lc-toggle:hover {
    border-color: var(--ch-cta) !important;
    transform: translateY(-2px);
    box-shadow: var(--ch-lc-shadow-lift);
}

.ch-lc-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--ch-lc-border-strong);
    color: transparent;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

/* The tick is drawn, not flashed */
.ch-lc-check polyline {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
}

.ch-lc-toggle.is-read,
.ch-lc-toggle.is-read:focus {
    background-color: rgba(16, 185, 129, 0.10) !important;
    border-color: var(--ch-cta) !important;
    color: #047857 !important;
}

.ch-lc-toggle.is-read .ch-lc-check {
    background-color: var(--ch-cta);
    border-color: var(--ch-cta);
    color: #FFFFFF;
    animation: ch-lc-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-lc-toggle.is-read .ch-lc-check polyline {
    animation: ch-lc-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}

/* Confirmation ring, fired once on the class flip */
.ch-lc-toggle.is-read .ch-lc-check::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--ch-cta);
    animation: ch-lc-burst 0.7s ease-out forwards;
}

/* --- Up Next card (featured image of the next module) --- */
.ch-lc-next {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0.95rem 0.7rem 0.7rem;
    background-color: var(--ch-lc-raised);
    border: 1px solid var(--ch-lc-border);
    border-radius: 12px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.ch-lc-next:hover {
    border-color: var(--ch-cta);
    transform: translateY(-3px);
    box-shadow: var(--ch-lc-shadow-lift);
    color: inherit;
}

/* Diagonal sheen, same grammar as the image frames and the sidebar ad slot */
.ch-lc-next::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, var(--ch-lc-sheen) 50%, transparent 62%);
    opacity: 0;
    transform: translateX(-100%);
}

.ch-lc-next:hover::after {
    animation: ch-lc-sweep 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-lc-next-media {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 9px;
    background-color: var(--ch-lc-media);
}

.ch-lc-next-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ch-lc-next:hover .ch-lc-next-media img {
    transform: scale(1.08);
}

.ch-lc-next-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ch-lc-border-strong);
}

/* Track finale: the media slot carries an icon instead of a thumbnail */
.ch-lc-next-media--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ch-cta);
    background-color: rgba(16, 185, 129, 0.10);
}

/* Module number stamped on the thumbnail: the curriculum reads as a sequence */
.ch-lc-next-index {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.15rem 0.45rem;
    border-radius: 0 6px 0 8px;
    background-color: rgba(15, 23, 42, 0.82);
    color: #F8FAFC;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.ch-lc-next-body {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}

.ch-lc-next-kicker {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ch-cta);
}

.ch-lc-next-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ch-text-main);
    transition: color 0.2s;
}

.ch-lc-next:hover .ch-lc-next-title {
    color: var(--ch-cta);
}

.ch-lc-next-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--ch-text-muted);
}

.ch-lc-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.55;
    margin: 0 0.15rem;
}

.ch-lc-next-go {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(16, 185, 129, 0.10);
    color: var(--ch-cta);
    transition: background-color 0.25s, color 0.25s, transform 0.25s;
}

.ch-lc-next-go svg {
    animation: ch-lc-nudge 3.4s ease-in-out infinite;
}

.ch-lc-next:hover .ch-lc-next-go {
    background-color: var(--ch-cta);
    color: #FFFFFF;
    transform: translateX(3px);
}

.ch-lc-next:hover .ch-lc-next-go svg {
    animation: none;
}

@keyframes ch-lc-pop {
    0%   { transform: scale(0.5); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes ch-lc-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes ch-lc-burst {
    0%   { transform: scale(1); opacity: 0.65; }
    100% { transform: scale(2.1); opacity: 0; }
}

@keyframes ch-lc-drift {
    0%   { background-position: -60% 0; }
    100% { background-position: 160% 0; }
}

@keyframes ch-lc-sweep {
    0%   { opacity: 0; transform: translateX(-100%); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}

@keyframes ch-lc-nudge {
    0%, 72%, 100% { transform: translateX(0); }
    80%           { transform: translateX(3px); }
    88%           { transform: translateX(0); }
}

@keyframes ch-lc-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(0.94); }
}

/* --- 16.4 Learning Center rail (sidebar) ------------------------------------
   A five-guide window around the article being read, drawn as a vertical
   timeline. The muted spine runs the full height; an emerald spine on top of it
   is clipped to --ch-lc-rail-fill, which PHP sets to the current node, so the
   line itself encodes position in the guide path. Tokens flip in dark-mode.css. */
.ch-lc-rail-widget {
    --ch-lc-raised: #FFFFFF;
    --ch-lc-border: #E2E8F0;
    --ch-lc-border-strong: #CBD5E1;
    --ch-lc-track: #E2E8F0;
    --ch-lc-hatch: rgba(100, 116, 139, 0.20);
    --ch-lc-spine: #E2E8F0;
    --ch-lc-node: #FFFFFF;
    --ch-lc-fill: 0%;
    --ch-lc-rail-fill: 0%;
}

.ch-lc-rail-path {
    display: block;
    margin: -0.35rem 0 0.95rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ch-text-main);
}

.ch-lc-rail {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Muted spine, top node centre to bottom node centre */
.ch-lc-rail::before,
.ch-lc-rail::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    border-radius: 2px;
    background-color: var(--ch-lc-spine);
}

/* Emerald overlay: how far down the window the current guide sits */
.ch-lc-rail::after {
    bottom: auto;
    height: calc((100% - 30px) * var(--ch-lc-rail-fill) / 100%);
    background: linear-gradient(180deg, var(--ch-cta), #34D399);
    box-shadow: 0 0 10px -2px rgba(16, 185, 129, 0.7);
}

.ch-lc-rail-item {
    position: relative;
    margin: 0;
    padding: 0;
}

.ch-lc-rail-item::before {
    display: none;
}

/* Staggered entrance, indexed by JS on each item */
[data-lc-anim] .ch-lc-rail-item {
    opacity: 0;
    transform: translateX(-8px);
}

[data-lc-anim].is-inview .ch-lc-rail-item {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 70ms),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 70ms);
}

.ch-lc-rail-link {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    padding: 0.42rem 0.5rem 0.42rem 0;
    border-radius: 0 9px 9px 0;
    text-decoration: none !important;
    color: inherit;
    transition: background-color 0.25s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

a.ch-lc-rail-link:hover {
    background-color: rgba(16, 185, 129, 0.07);
    transform: translateX(3px);
    color: inherit;
}

.ch-lc-rail-node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 0.1rem;
    border-radius: 50%;
    border: 2px solid var(--ch-lc-border-strong);
    background-color: var(--ch-lc-node);
    color: transparent;
    transition: border-color 0.25s, background-color 0.25s, color 0.25s, transform 0.25s;
}

.ch-lc-rail-tick {
    stroke-dasharray: 26;
    stroke-dashoffset: 26;
}

a.ch-lc-rail-link:hover .ch-lc-rail-node {
    border-color: var(--ch-cta);
    transform: scale(1.12);
}

/* Completed: filled emerald node with the tick drawn in */
.ch-lc-rail-item.is-done .ch-lc-rail-node {
    background-color: var(--ch-cta);
    border-color: var(--ch-cta);
    color: #FFFFFF;
}

.ch-lc-rail-item.is-done .ch-lc-rail-tick {
    animation: ch-lc-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Reading now: emerald ring with a live halo */
.ch-lc-rail-item.is-here .ch-lc-rail-node {
    border-color: var(--ch-cta);
    box-shadow: inset 0 0 0 3px var(--ch-lc-node), inset 0 0 0 20px var(--ch-cta);
}

.ch-lc-rail-item.is-here.is-done .ch-lc-rail-node {
    box-shadow: none;
}

.ch-lc-rail-item.is-here .ch-lc-rail-node::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--ch-cta);
    animation: ch-lc-halo 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.ch-lc-rail-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.ch-lc-rail-num {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Colour, never opacity: the flag chip and silo are children and must be
       able to override it (opacity on the parent would wash them out too). */
    color: var(--ch-text-muted);
}

.ch-lc-rail-flag {
    padding: 0.1rem 0.42rem;
    border-radius: 4px;
    background-color: rgba(16, 185, 129, 0.13);
    color: var(--ch-cta);
    letter-spacing: 0.8px;
}

.ch-lc-rail-silo {
    letter-spacing: 0.6px;
    text-transform: none;
    font-weight: 500;
    color: var(--ch-text-muted);
    opacity: 0.8;
}

.ch-lc-rail-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ch-text-muted);
    transition: color 0.25s;
}

a.ch-lc-rail-link:hover .ch-lc-rail-title {
    color: var(--ch-cta);
}

.ch-lc-rail-item.is-here .ch-lc-rail-title {
    font-weight: 800;
    color: var(--ch-text-main);
}

.ch-lc-rail-item.is-done .ch-lc-rail-title {
    color: var(--ch-text-muted);
}

.ch-lc-rail-foot {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--ch-lc-border);
}

.ch-lc-rail-foot .ch-lc-meter-legend {
    font-size: 0.72rem;
}

.ch-lc-rail-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--ch-cta);
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.2s;
}

.ch-lc-rail-cta:hover {
    color: var(--ch-cta);
    transform: translateX(2px);
}

@keyframes ch-lc-halo {
    0%        { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(1.65); opacity: 0; }
}

/* --- 16.5 Registration gate (guest modal raised by the deck and the rail) ----
   Same token strategy as the deck: light values here, dark values in
   dark-mode.css section 13. Sits above the heat engine modal (z-index 9999)
   because it is user-triggered and always wins the interaction. */
.ch-lc-gate {
    --ch-gate-surface: #FFFFFF;
    --ch-gate-well: #F8FAFC;
    --ch-gate-border: #E2E8F0;

    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.ch-lc-gate[hidden] {
    display: none;
}

.ch-lc-gate.is-active {
    opacity: 1;
    pointer-events: auto;
}

html.ch-lc-gate-open {
    overflow: hidden;
}

.ch-lc-gate-veil {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.74);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ch-lc-gate-card {
    position: relative;
    overflow: hidden auto;
    width: min(560px, 100%);
    max-height: min(88vh, 800px);
    padding: 2rem 2rem 1.5rem;
    background-color: var(--ch-gate-surface);
    border: 1px solid var(--ch-gate-border);
    border-radius: 18px;
    box-shadow: 0 40px 80px -30px rgba(15, 23, 42, 0.55), 0 0 60px -20px rgba(16, 185, 129, 0.35);
    opacity: 0;
    transform: translateY(22px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ch-lc-gate.is-active .ch-lc-gate-card {
    opacity: 1;
    transform: none;
}

/* The card takes focus on open purely to anchor screen readers - a ring around
   the whole modal would be noise. Its controls keep their own focus styles. */
.ch-lc-gate-card:focus {
    outline: none;
}

.ch-lc-gate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ch-cta), #34D399 50%, transparent 100%);
}

.ch-lc-gate-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 45% at 100% 0%, rgba(16, 185, 129, 0.13), transparent 70%);
}

.ch-lc-gate-card > * {
    position: relative;
    z-index: 1;
}

.ch-lc-gate-x,
.ch-lc-gate-x:focus {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent !important;
    color: var(--ch-text-muted) !important;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.ch-lc-gate-x:hover {
    background-color: var(--ch-gate-well) !important;
    color: var(--ch-text-main) !important;
    transform: rotate(90deg);
}

.ch-lc-gate-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ch-cta);
}

.ch-lc-gate-title {
    margin: 0 0 0.6rem;
    padding-right: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.35rem, 2.4vw + 0.6rem, 1.72rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--ch-text-main);
}

.ch-lc-gate-title span {
    color: var(--ch-cta);
}

.ch-lc-gate-desc {
    margin: 0 0 1.35rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ch-text-muted);
}

.ch-lc-gate-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 1.15rem 1.2rem;
    background-color: var(--ch-gate-well);
    border: 1px solid var(--ch-gate-border);
    border-radius: 12px;
}

.ch-lc-gate-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
}

.ch-lc-gate.is-active .ch-lc-gate-list li {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease calc(0.14s + var(--i, 0) * 0.07s),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(0.14s + var(--i, 0) * 0.07s);
}

.ch-lc-gate-list li:last-child {
    margin-bottom: 0;
}

.ch-lc-gate-ico {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--ch-cta);
}

.ch-lc-gate-copy {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ch-text-muted);
}

/* Scoped to the first child so it only styles the benefit heading. Inline
   <strong> inside the benefit description stays inline (see rule below). */
.ch-lc-gate-copy > strong:first-child {
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ch-text-main);
}

/* Inline emphasis inside the gate prose. Without an explicit color the bold
   text inherits --ch-text-muted and reads as flat body copy. */
.ch-lc-gate-desc b,
.ch-lc-gate-desc strong,
.ch-lc-gate-copy b,
.ch-lc-gate-copy strong:not(:first-child),
.ch-lc-gate-fine b,
.ch-lc-gate-fine strong {
    display: inline;
    font-size: inherit;
    font-weight: 700;
    color: var(--ch-text-main);
}

.ch-lc-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.ch-lc-gate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 1.5rem;
    background-color: var(--ch-cta);
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #FFFFFF !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px -12px rgba(16, 185, 129, 0.9);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    animation: ch-lc-gate-glow 3s ease-in-out infinite;
}

.ch-lc-gate-cta:hover {
    background-color: #059669;
    transform: translateY(-2px);
    animation: none;
    box-shadow: 0 16px 30px -12px rgba(16, 185, 129, 0.75);
}

.ch-lc-gate-cta svg {
    transition: transform 0.2s;
}

.ch-lc-gate-cta:hover svg {
    transform: translateX(3px);
}

.ch-lc-gate-skip,
.ch-lc-gate-skip:focus {
    appearance: none;
    padding: 0.55rem 1rem;
    background-color: transparent !important;
    border: 0 !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ch-text-muted) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s;
}

.ch-lc-gate-skip:hover {
    color: var(--ch-text-main) !important;
}

.ch-lc-gate-fine {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ch-text-muted);
    opacity: 0.85;
}

@keyframes ch-lc-gate-glow {
    0%, 100% { box-shadow: 0 10px 24px -12px rgba(16, 185, 129, 0.9); }
    50%      { box-shadow: 0 10px 30px -8px rgba(16, 185, 129, 0.75); }
}

/* --- 16.6 Learning Center responsive --- */
@media (max-width: 720px) {
    .ch-lc-deck {
        padding: 1.25rem 1.15rem 1.35rem;
    }

    .ch-lc-track-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.95rem;
    }

    .ch-lc-toggle {
        width: 100%;
        justify-content: center;
    }

    .ch-lc-next {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        gap: 0.8rem;
    }

    .ch-lc-next-title {
        font-size: 0.92rem;
    }

    .ch-lc-next-go {
        width: 30px;
        height: 30px;
    }

    .ch-lc-gate-card {
        padding: 1.75rem 1.35rem 1.35rem;
    }

    .ch-lc-gate-list {
        padding: 1rem;
    }
}

@media (max-width: 420px) {
    .ch-lc-position-silo {
        display: none;
    }

    .ch-lc-next {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .ch-lc-next-go {
        display: none;
    }
}

/* --- 16.7 Reduced motion: kill every loop, keep every final state --- */
@media (prefers-reduced-motion: reduce) {
    .ch-lc-kicker svg,
    .ch-lc-meter-fill::after,
    .ch-lc-next-go svg,
    .ch-lc-next:hover::after,
    .ch-lc-toggle.is-read .ch-lc-check,
    .ch-lc-toggle.is-read .ch-lc-check::after,
    .ch-lc-rail-item.is-here .ch-lc-rail-node::after,
    .ch-lc-gate-cta {
        animation: none !important;
    }

    .ch-lc-toggle.is-read .ch-lc-check polyline,
    .ch-lc-rail-item.is-done .ch-lc-rail-tick {
        animation: none !important;
        stroke-dashoffset: 0;
    }

    .ch-lc-deck > *,
    .ch-lc-rail-item,
    .ch-lc-gate-list li,
    .ch-lc-gate-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ch-lc-meter-fill {
        width: var(--ch-lc-fill, 0%) !important;
        transition: none !important;
    }
}