/**
 * cjc1295 mastery course styles
 *
 * extends the base learn page styles with course-specific theming,
 * paywall ui, loading states, and interactive visualization containers.
 * aligned to the shared mountain-meadow interactive palette.
 *
 * unit-1 (free) bespoke widget vocabulary (appended at the bottom of
 * this file, mirroring the sermorelin widget set):
 *
 *   .cjc-subhead              -- light eyebrow above prose blocks
 *   .cjc-variant-split        -- no-DAC vs DAC two-column comparison
 *                                  <div class="cjc-variant-split">
 *                                    <div class="cjc-variant-card cjc-variant-card--nodac">
 *                                      .cjc-variant-pill + .cjc-variant-title
 *                                      + .cjc-variant-list
 *                                    <div class="cjc-variant-card cjc-variant-card--dac">
 *   .cjc-dac-anchor           -- horizontal 3-step diagram for the
 *                                maleimide-Cys34 albumin docking story
 *                                  <div class="cjc-dac-anchor">
 *                                    <div class="cjc-dac-step">
 *                                      .cjc-dac-step-num
 *                                      .cjc-dac-step-body
 *                                        (.cjc-dac-step-name + .cjc-dac-step-note)
 *                                    <span class="cjc-dac-arrow">&gt;</span>
 *   .cjc-popularity-grid      -- 3-up "why community stacks pick CJC-1295"
 *                                  <div class="cjc-popularity-grid">
 *                                    <div class="cjc-popularity-card">
 *                                      <h4> + <p>
 *   .cjc-quote-callout        -- regulatory pull-quote (WADA, FDA)
 *                                  <blockquote class="cjc-quote-callout">
 *                                    .cjc-quote-source + .cjc-quote-body
 *                                    + .cjc-quote-attrib
 *   .cjc-evidence-grid + tiers (solid/moderate/weak/missing) +
 *     .cjc-evidence-pill -- mirror sermorelin evidence-* shape
 *                                  <div class="cjc-evidence-grid">
 *                                    <div class="cjc-evidence-tier cjc-evidence-tier--solid">
 *                                      .cjc-evidence-header
 *                                        (.cjc-evidence-pill + .cjc-evidence-headline)
 *                                      <p>
 *                                      <ul class="cjc-evidence-claims">
 *   .cjc-roadmap-list         -- unit 2-9 preview list, mirror
 *                                .cjc-roadmap-item children carrying
 *                                .cjc-roadmap-num + .cjc-roadmap-body
 *                                (h3.cjc-roadmap-title + p.cjc-roadmap-desc).
 */

/* ============================================================
   course header badge
   ============================================================ */

.cjc-course-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    background: linear-gradient(
        135deg,
        rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18),
        rgba(var(--meadow-400-rgb, 52, 211, 158), 0.1)
    );
    color: var(--meadow-300, #6ee7bf);
    border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.24);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 2px 8px rgba(var(--meadow-500-rgb, 16, 185, 129), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cjc-course-badge i {
    width: 14px;
    height: 14px;
}

/* ============================================================
   loading skeleton for paid content
   ============================================================ */

.cjc-loading {
    position: relative;
    min-height: 120px;
}

.cjc-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(90deg,
            var(--color-bg-card, rgba(255, 255, 255, 0.03)) 25%,
            rgba(255, 255, 255, 0.06) 50%,
            var(--color-bg-card, rgba(255, 255, 255, 0.03)) 75%);
    background-size: 200% 100%;
    animation: cjc-shimmer 1.5s ease-in-out infinite;
}

@keyframes cjc-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* light mode loading skeleton */
[data-theme="light"] .cjc-loading::after {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.04) 25%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
}

/* ============================================================
   paywall cta
   ============================================================ */

.cjc-paywall {
    text-align: center;
    padding: 48px 24px;
    border-radius: 16px;
    background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    margin: 32px 0;
}

.cjc-paywall-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.12);
    color: var(--meadow-400, #34d39e);
}

.cjc-paywall-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.cjc-paywall-title--success {
    color: var(--meadow-400, #34d39e);
}

.cjc-paywall-desc {
    font-size: 0.9rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 520px;
    margin-inline: auto;
}

.cjc-paywall--cert {
    border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.2);
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.04);
}

/* ============================================================
   stat grid
   ============================================================ */

.cjc-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.cjc-stat-card {
    text-align: center;
    padding: 16px 12px;
    border-radius: 12px;
    background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.cjc-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--meadow-400, #34d39e);
    margin-bottom: 4px;
}

.cjc-stat-label {
    font-size: 0.72rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.3;
}

/* ============================================================
   interactive area styling
   ============================================================ */

.cjc-interactive-header {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--meadow-400, #34d39e);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.2);
}

.cjc-interactive-body {
    min-height: 200px;
    position: relative;
}

.cjc-interactive-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #a3a3a3);
    text-align: center;
    margin-top: 12px;
    font-style: italic;
}

/* neurotransmitter detail panel */
.cjc-neuro-detail {
    margin-top: 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    animation: cjc-fade-in 0.3s ease;
}

.cjc-neuro-detail-header {
    font-size: 0.9rem;
    padding-left: 12px;
    margin-bottom: 8px;
}

.cjc-neuro-detail-text {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary, #a3a3a3);
    margin: 0;
}

@keyframes cjc-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   cert input
   ============================================================ */

.cjc-cert-form {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.cjc-cert-input {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.15));
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fafafa);
    font-size: 0.9rem;
    min-width: 200px;
}

[data-theme="light"] .cjc-cert-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
}

/* ============================================================
   key terms grid
   ============================================================ */

.cjc-terms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 12px;
    margin: 18px 0;
}

.cjc-term-card {
    position: relative;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.cjc-term-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(52,211,158,0.9), rgba(16,185,129,0.5));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cjc-term-card:hover {
    border-color: rgba(52,211,158,0.22);
    background: linear-gradient(135deg, rgba(52,211,158,0.06), rgba(255,255,255,0.02));
    transform: translateY(-1px);
}

.cjc-term-card[open] {
    border-color: rgba(52,211,158,0.35);
    background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(255,255,255,0.02));
}

.cjc-term-card[open]::before {
    opacity: 1;
}.cjc-term-card[open] .cjc-term-chev,
.cjc-term-card[open] .cjc-term-chevron {
    transform: rotate(90deg);
}

.cjc-term-summary {
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

.cjc-term-summary::-webkit-details-marker { display: none; }
.cjc-term-summary::marker { display: none; content: ''; }

.cjc-term-monogram {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(52,211,158,0.15), rgba(16,185,129,0.06));
    border: 1px solid rgba(52,211,158,0.22);
    color: var(--meadow-400, #34d39e);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.cjc-term-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cjc-term-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #fff);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.cjc-term-cat {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.62);
    font-weight: 500;
}.cjc-term-chev,
.cjc-term-chevron {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}.cjc-term-card:hover .cjc-term-chev,
.cjc-term-card:hover .cjc-term-chevron,
.cjc-term-card[open] .cjc-term-chev,
.cjc-term-card[open] .cjc-term-chevron {
    color: var(--meadow-400, #34d39e);
}

.cjc-term-body {
    padding: 4px 16px 16px 16px;
    font-size: 0.84rem;
    line-height: 1.65;
    color: var(--color-muted, rgba(255,255,255,0.7));
}

[data-theme="light"] .cjc-term-card {
    background: linear-gradient(135deg, rgba(15,23,42,0.02), rgba(15,23,42,0.005));
    border-color: rgba(15,23,42,0.08);
}

[data-theme="light"] .cjc-term-card:hover {
    border-color: rgba(16,185,129,0.3);
    background: linear-gradient(135deg, rgba(16,185,129,0.04), rgba(15,23,42,0.005));
}

[data-theme="light"] .cjc-term-card[open] {
    border-color: rgba(16,185,129,0.4);
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(15,23,42,0.005));
}

[data-theme="light"] .cjc-term-monogram {
    display: none;
    background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04));
    border-color: rgba(16,185,129,0.25);
    color: #047852;
}

[data-theme="light"] .cjc-term-name { color: #1a1a1a; }
[data-theme="light"] .cjc-term-cat { color: rgba(15,23,42,0.5); }[data-theme="light"] .cjc-term-chev,
[data-theme="light"] .cjc-term-chevron { color: rgba(15,23,42,0.4); }
[data-theme="light"] .cjc-term-body { color: rgba(15,23,42,0.7); }

/* ============================================================
   comparison layout
   ============================================================ */

.cjc-comparison-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 16px 0;
}

.cjc-comparison-card {
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
}

.cjc-comparison-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cjc-comparison-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text, #fff);
    margin: 0;
}

.cjc-comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cjc-comparison-list li {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-muted, rgba(255,255,255,0.6));
    padding-left: 12px;
    position: relative;
}

.cjc-comparison-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--meadow-400, #34d39e);
}

/* ============================================================
   light theme overrides
   ============================================================ */

[data-theme="light"] .cjc-term-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .cjc-term-card[open] { border-color: rgba(16,185,129,0.3); }

[data-theme="light"] .cjc-comparison-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .cjc-stat-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 600px) {
    .cjc-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cjc-terms-grid { grid-template-columns: 1fr; }
    .cjc-comparison-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   dosing snapshot -- free preview block above paywall
   ============================================================ */

.cjc-dosing-snapshot .cjc-comparison-card {
    background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(52,211,158,0.02));
    border-color: rgba(52,211,158,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .cjc-dosing-snapshot .cjc-comparison-card {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
    border-color: rgba(16,185,129,0.2);
}

/* ============================================================
   unit 2 -- tuftsin to cjc1295 derivation chain
   ============================================================ */

.cjc-derivation-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding: 8px 4px;
}

.cjc-derivation-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.cjc-derivation-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--meadow-300, #6ee7bf);
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.12);
    border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.22);
    white-space: nowrap;
}

.cjc-derivation-tag--child {
    color: #fff;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.55), rgba(52, 211, 158, 0.4));
    border-color: rgba(52, 211, 158, 0.5);
}

[data-theme="light"] .cjc-derivation-tag {
    color: #047852;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .cjc-derivation-tag--child {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: #10b981;
}

.cjc-residue-chain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.cjc-residue {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 8px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(52, 211, 158, 0.18), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(52, 211, 158, 0.3);
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cjc-residue::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(52, 211, 158, 0.5);
    transform: translateY(-50%);
}

.cjc-residue:last-child::after { display: none; }

.cjc-residue-pos {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    line-height: 1;
}

.cjc-residue-aa {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--meadow-300, #6ee7bf);
    line-height: 1.2;
    margin-top: 2px;
}

.cjc-residue--added {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.22), rgba(167, 139, 250, 0.06));
    border-color: rgba(167, 139, 250, 0.5);
    animation: cjc-residue-grow 0.45s ease-out backwards;
}

.cjc-residue--added .cjc-residue-aa { color: #c4b5fd; }
.cjc-residue--added::after { background: rgba(167, 139, 250, 0.55); }

.cjc-residue-chain--child .cjc-residue--added:nth-child(5) { animation-delay: 0.05s; }
.cjc-residue-chain--child .cjc-residue--added:nth-child(6) { animation-delay: 0.2s; }
.cjc-residue-chain--child .cjc-residue--added:nth-child(7) { animation-delay: 0.35s; }

@keyframes cjc-residue-grow {
    from { opacity: 0; transform: translateX(-12px) scale(0.85); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.cjc-residue:hover {
    transform: translateY(-2px);
    border-color: rgba(52, 211, 158, 0.7);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
}

.cjc-residue--added:hover {
    border-color: rgba(167, 139, 250, 0.85);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.2);
}

.cjc-residue[data-tip]:hover::before {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 200px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .cjc-residue {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.03));
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .cjc-residue-pos { color: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .cjc-residue-aa { color: #047852; }

[data-theme="light"] .cjc-residue--added {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.03));
    border-color: rgba(139, 92, 246, 0.35);
}

[data-theme="light"] .cjc-residue--added .cjc-residue-aa { color: #6d28d9; }

.cjc-derivation-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(167, 139, 250, 0.85);
}

.cjc-derivation-bridge-line {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgba(52, 211, 158, 0.6), rgba(167, 139, 250, 0.7));
}

.cjc-derivation-bridge-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #c4b5fd;
}

[data-theme="light"] .cjc-derivation-bridge-label { color: #6d28d9; }

.cjc-derivation-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-secondary, #a3a3a3);
}

.cjc-derivation-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cjc-derivation-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid;
}

.cjc-derivation-swatch--parent {
    background: rgba(52, 211, 158, 0.25);
    border-color: rgba(52, 211, 158, 0.5);
}

.cjc-derivation-swatch--added {
    background: rgba(167, 139, 250, 0.28);
    border-color: rgba(167, 139, 250, 0.55);
}

/* ============================================================
   unit 3 -- GABA-A pentamer with binding sites
   ============================================================ */

.cjc-gaba-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 4px;
}

.cjc-gaba-svg-wrap {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.cjc-gaba-svg { width: 100%; height: auto; display: block; }

.cjc-gaba-subunit {
    fill: rgba(52, 211, 158, 0.18);
    stroke: rgba(52, 211, 158, 0.55);
    stroke-width: 1.5;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

[data-theme="light"] .cjc-gaba-subunit {
    fill: rgba(16, 185, 129, 0.1);
    stroke: rgba(16, 185, 129, 0.5);
}

.cjc-gaba-label {
    fill: var(--meadow-300, #6ee7bf);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

[data-theme="light"] .cjc-gaba-label { fill: #047852; }

.cjc-gaba-pore {
    fill: rgba(15, 23, 42, 0.6);
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
}

[data-theme="light"] .cjc-gaba-pore {
    fill: rgba(15, 23, 42, 0.05);
    stroke: rgba(15, 23, 42, 0.15);
}

.cjc-gaba-pore-label {
    fill: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

[data-theme="light"] .cjc-gaba-pore-label { fill: rgba(15, 23, 42, 0.55); }

.cjc-gaba-site {
    cursor: pointer;
    transition: filter 0.2s ease;
}

.cjc-gaba-site circle {
    transition: stroke-width 0.2s ease;
}

.cjc-gaba-site:hover { filter: brightness(1.18); }
.cjc-gaba-site:hover circle { stroke-width: 2.5; }

.cjc-gaba-site-bzd circle {
    fill: rgba(251, 191, 36, 0.85);
    stroke: #fbbf24;
}

.cjc-gaba-site-cjc1295 circle {
    fill: rgba(167, 139, 250, 0.85);
    stroke: #a78bfa;
}

.cjc-gaba-site-gaba circle {
    fill: rgba(52, 211, 158, 0.95);
    stroke: var(--meadow-400, #34d39e);
}

.cjc-gaba-site-label {
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    fill: #0f172a;
}

.cjc-gaba-legend {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 10px;
    font-size: 0.74rem;
}

.cjc-gaba-legend-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: 10px;
    background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.cjc-gaba-legend-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--color-text, #fff);
}

.cjc-gaba-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cjc-gaba-legend-dot--bzd { background: #fbbf24; }
.cjc-gaba-legend-dot--cjc1295 { background: #a78bfa; }
.cjc-gaba-legend-dot--gaba { background: var(--meadow-400, #34d39e); }

.cjc-gaba-legend-text {
    font-size: 0.72rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.45;
}

[data-theme="light"] .cjc-gaba-legend-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .cjc-gaba-legend-head { color: #1a1a1a; }
[data-theme="light"] .cjc-gaba-legend-text { color: rgba(15, 23, 42, 0.7); }

@media (max-width: 600px) {
    .cjc-gaba-legend { grid-template-columns: 1fr; }
}

/* ============================================================
   unit 4 -- BDNF cascade chart
   ============================================================ */

.cjc-bdnf-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 4px;
}

.cjc-bdnf-svg-wrap { width: 100%; }
.cjc-bdnf-svg { width: 100%; height: auto; display: block; }

.cjc-bdnf-axis {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
}

[data-theme="light"] .cjc-bdnf-axis { stroke: rgba(15, 23, 42, 0.18); }

.cjc-bdnf-grid {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

[data-theme="light"] .cjc-bdnf-grid { stroke: rgba(15, 23, 42, 0.06); }

.cjc-bdnf-tick {
    fill: rgba(255, 255, 255, 0.5);
    font-size: 10px;
}

[data-theme="light"] .cjc-bdnf-tick { fill: rgba(15, 23, 42, 0.55); }

.cjc-bdnf-axis-label {
    fill: var(--text-secondary, #a3a3a3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

[data-theme="light"] .cjc-bdnf-axis-label { fill: rgba(15, 23, 42, 0.65); }

.cjc-bdnf-baseline {
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

[data-theme="light"] .cjc-bdnf-baseline { stroke: rgba(15, 23, 42, 0.3); }

.cjc-bdnf-baseline-label {
    fill: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    font-style: italic;
}

[data-theme="light"] .cjc-bdnf-baseline-label { fill: rgba(15, 23, 42, 0.55); }

.cjc-bdnf-area {
    fill: url(#slkBdnfGrad);
    opacity: 0.85;
}

.cjc-bdnf-line {
    fill: none;
    stroke: var(--meadow-400, #34d39e);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.cjc-bdnf-point {
    fill: var(--meadow-400, #34d39e);
    stroke: #fff;
    stroke-width: 2;
    cursor: pointer;
}

[data-theme="light"] .cjc-bdnf-point { stroke: #fff; }

.cjc-bdnf-value {
    fill: var(--meadow-300, #6ee7bf);
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
    pointer-events: none;
}

[data-theme="light"] .cjc-bdnf-value { fill: #047852; }

.cjc-bdnf-caption {
    font-size: 0.74rem;
    color: var(--text-secondary, #a3a3a3);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

[data-theme="light"] .cjc-bdnf-caption { color: rgba(15, 23, 42, 0.7); }

.cjc-bdnf-region-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--meadow-300, #6ee7bf);
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.14);
    border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.25);
    margin: 0 4px;
}

[data-theme="light"] .cjc-bdnf-region-pill {
    color: #047852;
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.22);
}

/* ============================================================
   unit 5 -- cytokine dose slider
   ============================================================ */

.cjc-cyto-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px 4px;
}

.cjc-cyto-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cjc-cyto-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary, #a3a3a3);
}

.cjc-cyto-slider-readout {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--meadow-300, #6ee7bf);
}

[data-theme="light"] .cjc-cyto-slider-readout { color: #047852; }

.cjc-cyto-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    cursor: pointer;
}

[data-theme="light"] .cjc-cyto-slider { background: rgba(15, 23, 42, 0.08); }

.cjc-cyto-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--meadow-400, #34d39e);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    cursor: grab;
}

.cjc-cyto-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--meadow-400, #34d39e);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    cursor: grab;
}

.cjc-cyto-slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-secondary, #a3a3a3);
}

.cjc-cyto-bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cjc-cyto-bar {
    padding: 12px;
    border-radius: 12px;
    background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-theme="light"] .cjc-cyto-bar {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.cjc-cyto-bar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.cjc-cyto-bar-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text, #fff);
    letter-spacing: -0.01em;
}

[data-theme="light"] .cjc-cyto-bar-name { color: #1a1a1a; }

.cjc-cyto-bar-tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, #a3a3a3);
}

.cjc-cyto-bar-track {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

[data-theme="light"] .cjc-cyto-bar-track { background: rgba(15, 23, 42, 0.06); }

.cjc-cyto-bar-fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(var(--cjc-cyto-fill, 0.5));
    border-radius: 6px;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.cjc-cyto-bar-baseline {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 1px;
    left: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: translateX(-0.5px);
}

[data-theme="light"] .cjc-cyto-bar-baseline { background: rgba(15, 23, 42, 0.4); }

.cjc-cyto-bar--pro .cjc-cyto-bar-fill {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.cjc-cyto-bar--anti .cjc-cyto-bar-fill {
    background: linear-gradient(90deg, var(--meadow-400, #34d39e), #6ee7bf);
}

.cjc-cyto-bar-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    color: var(--text-secondary, #a3a3a3);
}

.cjc-cyto-bar-arrow {
    font-size: 0.78rem;
    font-weight: 700;
}

.cjc-cyto-bar-arrow--down { color: #34d39e; }
.cjc-cyto-bar-arrow--up { color: #34d39e; }
.cjc-cyto-bar-arrow--neutral { color: var(--text-secondary, #a3a3a3); }

.cjc-cyto-note {
    font-size: 0.74rem;
    color: var(--text-secondary, #a3a3a3);
    text-align: center;
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.06);
    border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
}

[data-theme="light"] .cjc-cyto-note {
    color: rgba(15, 23, 42, 0.7);
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.18);
}

@media (max-width: 600px) {
    .cjc-cyto-bars { grid-template-columns: 1fr; }
}

/* ============================================================
   unit 1 -- subhead eyebrow
   ============================================================ */

.cjc-subhead {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--meadow-400, #34d39e);
    margin: 22px 0 10px;
}

[data-theme="light"] .cjc-subhead { color: #047852; }

/* ============================================================
   unit 1 -- no-DAC vs DAC variant split
   ============================================================ */

.cjc-variant-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.cjc-variant-card {
    padding: 18px;
    border-radius: 14px;
    background: var(--color-bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-top-width: 3px;
}

[data-theme="light"] .cjc-variant-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

.cjc-variant-card--nodac {
    border-top-color: #34d39e;
    background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(16,185,129,0.02));
}

[data-theme="light"] .cjc-variant-card--nodac {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
}

.cjc-variant-card--dac {
    border-top-color: #a78bfa;
    background: linear-gradient(135deg, rgba(167,139,250,0.1), rgba(167,139,250,0.02));
}

[data-theme="light"] .cjc-variant-card--dac {
    background: linear-gradient(135deg, rgba(139,92,246,0.06), rgba(139,92,246,0.015));
}

.cjc-variant-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255,255,255,0.06);
    color: var(--meadow-300, #6ee7bf);
    margin-bottom: 8px;
}

.cjc-variant-card--dac .cjc-variant-pill {
    background: rgba(167,139,250,0.18);
    color: #c4b5fd;
}

[data-theme="light"] .cjc-variant-card--nodac .cjc-variant-pill {
    background: rgba(16,185,129,0.12);
    color: #047852;
}

[data-theme="light"] .cjc-variant-card--dac .cjc-variant-pill {
    background: rgba(139,92,246,0.12);
    color: #6d28d9;
}

.cjc-variant-title {
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--color-text, #fff);
}

[data-theme="light"] .cjc-variant-title { color: #1a1a1a; }

.cjc-variant-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cjc-variant-list li {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-muted, rgba(255,255,255,0.7));
    padding-left: 12px;
    position: relative;
}

[data-theme="light"] .cjc-variant-list li { color: rgba(15,23,42,0.72); }

.cjc-variant-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--meadow-400, #34d39e);
}

.cjc-variant-card--dac .cjc-variant-list li::before {
    background: #a78bfa;
}

/* ============================================================
   unit 1 -- DAC anchor diagram (3-step horizontal flow)
   ============================================================ */

.cjc-dac-anchor {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin: 18px 0 6px;
    padding: 16px 12px;
    border-radius: 12px;
    background: var(--color-bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

[data-theme="light"] .cjc-dac-anchor {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

.cjc-dac-step {
    flex: 1 1 160px;
    min-width: 160px;
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(52,211,158,0.14), rgba(16,185,129,0.04));
    border: 1px solid rgba(52,211,158,0.3);
}

[data-theme="light"] .cjc-dac-step {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
    border-color: rgba(16,185,129,0.28);
}

.cjc-dac-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(52,211,158,0.25);
    color: var(--meadow-300, #6ee7bf);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 700;
}

[data-theme="light"] .cjc-dac-step-num {
    background: rgba(16,185,129,0.18);
    color: #047852;
}

.cjc-dac-step-body { min-width: 0; }

.cjc-dac-step-name {
    margin: 0 0 4px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--meadow-300, #6ee7bf);
}

[data-theme="light"] .cjc-dac-step-name { color: #047852; }

.cjc-dac-step-note {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-secondary, #a3a3a3);
}

[data-theme="light"] .cjc-dac-step-note { color: rgba(15,23,42,0.65); }

.cjc-dac-arrow {
    display: flex;
    align-items: center;
    color: rgba(52,211,158,0.7);
    font-weight: 700;
    font-size: 1.1rem;
}

[data-theme="light"] .cjc-dac-arrow { color: rgba(16,185,129,0.7); }

/* ============================================================
   unit 1 -- popularity grid (3-up "why this matters")
   ============================================================ */

.cjc-popularity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.cjc-popularity-card {
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
}

[data-theme="light"] .cjc-popularity-card {
    background: linear-gradient(135deg, rgba(0,0,0,0.025), rgba(0,0,0,0.005));
    border-color: rgba(0,0,0,0.08);
}

.cjc-popularity-card h4 {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--color-text, #fff);
}

[data-theme="light"] .cjc-popularity-card h4 { color: #1a1a1a; }

.cjc-popularity-card p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-muted, rgba(255,255,255,0.65));
}

[data-theme="light"] .cjc-popularity-card p { color: rgba(15,23,42,0.72); }

/* ============================================================
   unit 1 -- regulatory pull-quote
   ============================================================ */

.cjc-quote-callout {
    margin: 20px 0;
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(52,211,158,0.08), rgba(52,211,158,0.02));
    border: 1px solid rgba(52,211,158,0.22);
    border-left-width: 3px;
}

[data-theme="light"] .cjc-quote-callout {
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.015));
    border-color: rgba(16,185,129,0.22);
}

.cjc-quote-source {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--meadow-300, #6ee7bf);
}

[data-theme="light"] .cjc-quote-source { color: #047852; }

.cjc-quote-body {
    margin: 0 0 10px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--color-text, #fff);
    font-style: italic;
}

[data-theme="light"] .cjc-quote-body { color: #1a1a1a; }

.cjc-quote-attrib {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    color: var(--text-secondary, #a3a3a3);
}

[data-theme="light"] .cjc-quote-attrib { color: rgba(15,23,42,0.65); }

/* ============================================================
   unit 1 -- evidence ceiling grid (mirrors sermorelin pattern)
   ============================================================ */

.cjc-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.cjc-evidence-tier {
    padding: 18px;
    border-radius: 14px;
    background: var(--color-bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-top-width: 3px;
}

[data-theme="light"] .cjc-evidence-tier {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

.cjc-evidence-tier--solid    { border-top-color: #10b981; }
.cjc-evidence-tier--moderate { border-top-color: #34d39e; }
.cjc-evidence-tier--weak     { border-top-color: #f59e0b; }
.cjc-evidence-tier--missing  { border-top-color: #ef4444; }

.cjc-evidence-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.cjc-evidence-pill {
    align-self: flex-start;
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cjc-evidence-pill--solid    { background: rgba(16,185,129,0.18); color: var(--meadow-300, #6ee7bf); }
.cjc-evidence-pill--moderate { background: rgba(52,211,158,0.18); color: var(--meadow-300, #6ee7bf); }
.cjc-evidence-pill--weak     { background: rgba(245,158,11,0.18); color: #fbbf24; }
.cjc-evidence-pill--missing  { background: rgba(239,68,68,0.18); color: #fca5a5; }

[data-theme="light"] .cjc-evidence-pill--solid    { color: #047852; }
[data-theme="light"] .cjc-evidence-pill--moderate { color: #047852; }
[data-theme="light"] .cjc-evidence-pill--weak     { color: #b45309; }
[data-theme="light"] .cjc-evidence-pill--missing  { color: #b91c1c; }

.cjc-evidence-headline {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text, #fff);
}

[data-theme="light"] .cjc-evidence-headline { color: #1a1a1a; }

.cjc-evidence-claims {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-muted, rgba(255,255,255,0.7));
}

[data-theme="light"] .cjc-evidence-claims { color: rgba(15,23,42,0.72); }

.cjc-evidence-claims li { margin-bottom: 6px; }

/* ============================================================
   unit 1 -- roadmap list (mirrors sermorelin shape)
   ============================================================ */

.cjc-roadmap-list {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cjc-roadmap-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--color-bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
}

[data-theme="light"] .cjc-roadmap-item {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

.cjc-roadmap-num {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(52,211,158,0.18), rgba(16,185,129,0.06));
    border: 1px solid rgba(52,211,158,0.3);
    color: var(--meadow-300, #6ee7bf);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 700;
}

[data-theme="light"] .cjc-roadmap-num {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
    border-color: rgba(16,185,129,0.28);
    color: #047852;
}

.cjc-roadmap-body { min-width: 0; }

.cjc-roadmap-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--color-text, #fff);
}

[data-theme="light"] .cjc-roadmap-title { color: #1a1a1a; }

.cjc-roadmap-desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-muted, rgba(255,255,255,0.65));
}

[data-theme="light"] .cjc-roadmap-desc { color: rgba(15,23,42,0.7); }

@media (max-width: 600px) {
    .cjc-variant-split,
    .cjc-evidence-grid,
    .cjc-popularity-grid { grid-template-columns: 1fr; }
    .cjc-dac-anchor { flex-direction: column; }
    .cjc-dac-arrow { transform: rotate(90deg); align-self: center; }
}

/* ============================================================
   reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .cjc-loading::after {
        animation: none;
    }

    .cjc-neuro-detail {
        animation: none;
    }

    .cjc-residue--added {
        animation: none;
    }

    .cjc-cyto-bar-fill {
        transition: none;
    }
}

/* ============================================================
   bespoke widgets per unit -- assembled from css/_cjc1295-fragments/
   ============================================================ */

/* --- 02-chemistry --- */
/* ============================================================
   cjc1295 unit 2 (chemistry) -- bespoke widget vocabulary
   ----------------------------------------------------------------
   four new vocabularies, all scoped under .cjc- to live alongside
   the free-unit classes already in css/cjc1295.css. these widgets
   are referenced from supabase/_cjc1295-fragments/02-chemistry.sql.

   vocabulary:
     - .cjc-grf-substitutions      -- 4-residue swap grid (D-Ala2/Gln8/Ala15/Leu27)
     - .cjc-residue-modifications  -- residue-level modification card
     - .cjc-linker-anatomy         -- maleimide-propionic-acid-lysine anatomy
     - .cjc-no-dac-vs-dac          -- molecular-level split (no-DAC vs DAC chemistry)
   ============================================================ */

/* ----- 4-residue substitution grid -------------------------- */
.cjc-grf-substitutions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin: 20px 0 24px;
}

.cjc-grf-sub-card {
    padding: 16px;
    border-radius: 14px;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.06);
    border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cjc-grf-sub-pos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--meadow-300, #6ee7bf);
    font-weight: 600;
}

.cjc-grf-sub-swap {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary, #f4f4f5);
}

.cjc-grf-sub-fix {
    font-size: 0.88rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.5;
}

[data-theme="light"] .cjc-grf-sub-card {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.16);
}
[data-theme="light"] .cjc-grf-sub-pos { color: #047852; }
[data-theme="light"] .cjc-grf-sub-swap { color: #1f2937; }
[data-theme="light"] .cjc-grf-sub-fix { color: #4b5563; }

/* ----- residue modification card ---------------------------- */
.cjc-residue-modifications {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px 0 22px;
}

.cjc-residue-mod-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cjc-residue-mod-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.16);
    color: var(--meadow-300, #6ee7bf);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 700;
    font-size: 1.15rem;
}

.cjc-residue-mod-body { min-width: 0; }

.cjc-residue-mod-name {
    font-weight: 600;
    color: var(--text-primary, #f4f4f5);
    margin-bottom: 4px;
}

.cjc-residue-mod-role {
    font-size: 0.88rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.55;
}

[data-theme="light"] .cjc-residue-mod-row {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .cjc-residue-mod-letter {
    background: rgba(16, 185, 129, 0.1);
    color: #047852;
}
[data-theme="light"] .cjc-residue-mod-name { color: #111827; }
[data-theme="light"] .cjc-residue-mod-role { color: #4b5563; }

/* ----- linker anatomy (maleimide-propionate-lysine) --------- */
.cjc-linker-anatomy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 18px 0 22px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.04);
    border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.14);
}

.cjc-linker-anatomy-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: start;
}

.cjc-linker-anatomy-part {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.92rem;
    color: var(--meadow-300, #6ee7bf);
    font-weight: 600;
}

.cjc-linker-anatomy-text {
    font-size: 0.92rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.55;
}

.cjc-linker-anatomy-caption {
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary, #a3a3a3);
    font-style: italic;
}

[data-theme="light"] .cjc-linker-anatomy {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.16);
}
[data-theme="light"] .cjc-linker-anatomy-part { color: #047852; }
[data-theme="light"] .cjc-linker-anatomy-text,
[data-theme="light"] .cjc-linker-anatomy-caption { color: #4b5563; }

/* ----- no-DAC vs DAC molecular split ------------------------ */
.cjc-no-dac-vs-dac {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 18px 0 22px;
}

.cjc-no-dac-vs-dac-card {
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cjc-no-dac-vs-dac-card--nodac {
    border-color: rgba(165, 180, 252, 0.32);
    background: rgba(99, 102, 241, 0.05);
}

.cjc-no-dac-vs-dac-card--dac {
    border-color: rgba(110, 231, 191, 0.32);
    background: rgba(16, 185, 129, 0.05);
}

.cjc-no-dac-vs-dac-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 8px;
}

.cjc-no-dac-vs-dac-card--nodac .cjc-no-dac-vs-dac-tag {
    background: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
}

.cjc-no-dac-vs-dac-card--dac .cjc-no-dac-vs-dac-tag {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7bf;
}

.cjc-no-dac-vs-dac-formula {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.82rem;
    color: var(--text-secondary, #a3a3a3);
    margin: 6px 0 10px;
    word-break: break-all;
}

.cjc-no-dac-vs-dac-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cjc-no-dac-vs-dac-list li {
    font-size: 0.88rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
}

.cjc-no-dac-vs-dac-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--meadow-300, #6ee7bf);
}

[data-theme="light"] .cjc-no-dac-vs-dac-card--nodac {
    background: rgba(99, 102, 241, 0.04);
    border-color: rgba(99, 102, 241, 0.2);
}
[data-theme="light"] .cjc-no-dac-vs-dac-card--nodac .cjc-no-dac-vs-dac-tag {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}
[data-theme="light"] .cjc-no-dac-vs-dac-card--dac {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.2);
}
[data-theme="light"] .cjc-no-dac-vs-dac-card--dac .cjc-no-dac-vs-dac-tag {
    background: rgba(16, 185, 129, 0.14);
    color: #047852;
}
[data-theme="light"] .cjc-no-dac-vs-dac-formula,
[data-theme="light"] .cjc-no-dac-vs-dac-list li { color: #4b5563; }

@media (max-width: 640px) {
    .cjc-residue-mod-row,
    .cjc-linker-anatomy-row {
        grid-template-columns: 1fr;
    }
}

/* --- 03-dac-mechanism --- */
/* ============================================================
   cjc1295 unit 3 (dac-mechanism) -- bespoke widget vocabulary
   ----------------------------------------------------------------
   four new vocabularies. all classes live under .cjc- so they
   coexist with the free-unit visual system in css/cjc1295.css.
   referenced from supabase/_cjc1295-fragments/03-dac-mechanism.sql.

   vocabulary:
     - .cjc-maleimide-binding    -- michael-addition step diagram (free + thiol -> adduct)
     - .cjc-albumin-cargo        -- albumin domain map + Cys34 highlight
     - .cjc-halflife-comparison  -- horizontal half-life bars (DAC vs no-DAC vs albumin vs sermorelin)
     - .cjc-cysteine-bond        -- thiosuccinimide bond + ring-opening fate
   ============================================================ */

/* ----- maleimide-thiol Michael addition --------------------- */
.cjc-maleimide-binding {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px 0 22px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.05);
    border: 1px solid rgba(var(--meadow-500-rgb, 16, 185, 129), 0.16);
}

.cjc-maleimide-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
}

.cjc-maleimide-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.22);
    color: var(--meadow-300, #6ee7bf);
    font-weight: 700;
    font-size: 0.95rem;
}

.cjc-maleimide-step-body { min-width: 0; }

.cjc-maleimide-step-title {
    font-weight: 600;
    color: var(--text-primary, #f4f4f5);
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.cjc-maleimide-step-text {
    font-size: 0.88rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.55;
}

.cjc-maleimide-step-chem {
    margin-top: 6px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.82rem;
    color: var(--meadow-300, #6ee7bf);
}

[data-theme="light"] .cjc-maleimide-binding {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.18);
}
[data-theme="light"] .cjc-maleimide-step-num {
    background: rgba(16, 185, 129, 0.14);
    color: #047852;
}
[data-theme="light"] .cjc-maleimide-step-title { color: #111827; }
[data-theme="light"] .cjc-maleimide-step-text { color: #4b5563; }
[data-theme="light"] .cjc-maleimide-step-chem { color: #047852; }

/* ----- albumin cargo + Cys34 domain map --------------------- */
.cjc-albumin-cargo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 22px;
}

.cjc-albumin-cargo-domain {
    padding: 14px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

.cjc-albumin-cargo-domain--cys34 {
    background: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.12);
    border-color: rgba(var(--meadow-500-rgb, 16, 185, 129), 0.32);
}

.cjc-albumin-cargo-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #a3a3a3);
    margin-bottom: 6px;
}

.cjc-albumin-cargo-domain--cys34 .cjc-albumin-cargo-label {
    color: var(--meadow-300, #6ee7bf);
}

.cjc-albumin-cargo-name {
    font-weight: 600;
    color: var(--text-primary, #f4f4f5);
    margin-bottom: 4px;
}

.cjc-albumin-cargo-text {
    font-size: 0.82rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.45;
}

.cjc-albumin-cargo-caption {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--text-secondary, #a3a3a3);
    font-style: italic;
    margin-top: 4px;
}

[data-theme="light"] .cjc-albumin-cargo-domain {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .cjc-albumin-cargo-domain--cys34 {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.32);
}
[data-theme="light"] .cjc-albumin-cargo-label { color: #6b7280; }
[data-theme="light"] .cjc-albumin-cargo-domain--cys34 .cjc-albumin-cargo-label { color: #047852; }
[data-theme="light"] .cjc-albumin-cargo-name { color: #111827; }
[data-theme="light"] .cjc-albumin-cargo-text,
[data-theme="light"] .cjc-albumin-cargo-caption { color: #4b5563; }

/* ----- half-life comparison bars ---------------------------- */
.cjc-halflife-comparison {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 22px;
}

.cjc-halflife-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    align-items: center;
}

.cjc-halflife-label {
    font-size: 0.88rem;
    color: var(--text-primary, #f4f4f5);
    font-weight: 500;
}

.cjc-halflife-track {
    position: relative;
    height: 22px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.cjc-halflife-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, rgba(var(--meadow-500-rgb, 16, 185, 129), 0.4), rgba(var(--meadow-500-rgb, 16, 185, 129), 0.72));
    border-radius: 8px;
}

.cjc-halflife-fill--minutes {
    background: linear-gradient(90deg, rgba(165, 180, 252, 0.45), rgba(99, 102, 241, 0.7));
}

.cjc-halflife-fill--hours {
    background: linear-gradient(90deg, rgba(252, 211, 77, 0.45), rgba(245, 158, 11, 0.7));
}

.cjc-halflife-note {
    font-size: 0.82rem;
    color: var(--text-secondary, #a3a3a3);
    margin-top: 4px;
    grid-column: 2 / 3;
}

[data-theme="light"] .cjc-halflife-label { color: #111827; }
[data-theme="light"] .cjc-halflife-track { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .cjc-halflife-note { color: #4b5563; }

/* ----- thiosuccinimide cysteine bond panel ------------------ */
.cjc-cysteine-bond {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}

.cjc-cysteine-bond-card {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cjc-cysteine-bond-stage {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--meadow-300, #6ee7bf);
    font-weight: 600;
}

.cjc-cysteine-bond-title {
    font-weight: 600;
    color: var(--text-primary, #f4f4f5);
    font-size: 0.95rem;
}

.cjc-cysteine-bond-formula {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.82rem;
    color: var(--meadow-300, #6ee7bf);
}

.cjc-cysteine-bond-text {
    font-size: 0.85rem;
    color: var(--text-secondary, #a3a3a3);
    line-height: 1.5;
}

[data-theme="light"] .cjc-cysteine-bond-card {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .cjc-cysteine-bond-stage,
[data-theme="light"] .cjc-cysteine-bond-formula { color: #047852; }
[data-theme="light"] .cjc-cysteine-bond-title { color: #111827; }
[data-theme="light"] .cjc-cysteine-bond-text { color: #4b5563; }

@media (max-width: 640px) {
    .cjc-albumin-cargo { grid-template-columns: 1fr; }
    .cjc-halflife-row { grid-template-columns: 1fr; }
    .cjc-halflife-note { grid-column: 1 / -1; }
}

/* --- 04-pulsatility --- */
/* ============================================================
   cjc-1295 unit 4 -- pulsatility vs sustained GH bespoke widgets
   ------------------------------------------------------------
   widget vocabulary introduced in this fragment:
     .cjc-pulse-vs-sustained        -- 2-up no-DAC pulses vs DAC bleed
                                       visual contrast card pair
     .cjc-somatotrope-state         -- 3-up "ready / firing / refractory"
                                       cell-state strip for somatotrope
                                       physiology under sustained stim
     .cjc-tachyphylaxis-curve       -- horizontal week-by-week response
                                       decay rail (8-12 week cycle)
   ============================================================ */

/* ------------------------------------------------------------
   .cjc-pulse-vs-sustained
   2-column contrast: no-DAC pulses vs DAC continuous bleed
   ------------------------------------------------------------ */

.cjc-pulse-vs-sustained {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.cjc-pulse-vs-sustained-card {
    padding: 1.15rem 1.3rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-pulse-vs-sustained-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-pulse-vs-sustained-card--pulse     { border-top: 3px solid #10b981; }
.cjc-pulse-vs-sustained-card--sustained { border-top: 3px solid #f59e0b; }

.cjc-pulse-vs-sustained-tag {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.35rem;
}

.cjc-pulse-vs-sustained-card--pulse     .cjc-pulse-vs-sustained-tag { color: rgba(94, 234, 212, 0.95); }
.cjc-pulse-vs-sustained-card--sustained .cjc-pulse-vs-sustained-tag { color: rgba(252, 211, 77, 0.95); }

.cjc-pulse-vs-sustained-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-pulse-vs-sustained-title { color: rgba(15, 23, 42, 0.92); }

.cjc-pulse-vs-sustained-body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-pulse-vs-sustained-body { color: rgba(30, 41, 59, 0.85); }

.cjc-pulse-vs-sustained-list {
    font-size: 0.88rem;
    line-height: 1.55;
    padding-left: 1.1rem;
    margin: 0.55rem 0 0;
    color: rgba(226, 232, 240, 0.85);
}

[data-theme="light"] .cjc-pulse-vs-sustained-list { color: rgba(30, 41, 59, 0.82); }

/* ------------------------------------------------------------
   .cjc-somatotrope-state
   3-up cell-state strip: ready / firing / refractory
   ------------------------------------------------------------ */

.cjc-somatotrope-state {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
    margin: 1.4rem 0;
}

.cjc-somatotrope-state-card {
    padding: 1rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    text-align: left;
}

[data-theme="light"] .cjc-somatotrope-state-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-somatotrope-state-card[data-state="ready"]      { border-left: 4px solid #10b981; }
.cjc-somatotrope-state-card[data-state="firing"]     { border-left: 4px solid #34d399; }
.cjc-somatotrope-state-card[data-state="refractory"] { border-left: 4px solid #ef4444; }

.cjc-somatotrope-state-step {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.3rem;
}

.cjc-somatotrope-state-name {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-somatotrope-state-name { color: rgba(15, 23, 42, 0.92); }

.cjc-somatotrope-state-body {
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.86);
}

[data-theme="light"] .cjc-somatotrope-state-body { color: rgba(30, 41, 59, 0.84); }

/* ------------------------------------------------------------
   .cjc-tachyphylaxis-curve
   horizontal week-by-week response decay rail
   ------------------------------------------------------------ */

.cjc-tachyphylaxis-curve {
    margin: 1.5rem 0;
    padding: 1.2rem 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-tachyphylaxis-curve {
    background: rgba(248, 250, 252, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-tachyphylaxis-curve-title {
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.75rem;
}

.cjc-tachyphylaxis-curve-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.45rem;
    align-items: end;
}

.cjc-tachyphylaxis-curve-week {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.cjc-tachyphylaxis-curve-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #10b981 0%, #047857 100%);
    transition: height 0.4s ease;
}

.cjc-tachyphylaxis-curve-week[data-phase="early"] .cjc-tachyphylaxis-curve-bar {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
}
.cjc-tachyphylaxis-curve-week[data-phase="mid"] .cjc-tachyphylaxis-curve-bar {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}
.cjc-tachyphylaxis-curve-week[data-phase="late"] .cjc-tachyphylaxis-curve-bar {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
}

.cjc-tachyphylaxis-curve-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.95);
}

.cjc-tachyphylaxis-curve-value {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-tachyphylaxis-curve-value { color: rgba(30, 41, 59, 0.88); }

.cjc-tachyphylaxis-curve-caption {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(148, 163, 184, 0.95);
    margin-top: 0.75rem;
}

@media (max-width: 640px) {
    .cjc-pulse-vs-sustained { grid-template-columns: 1fr; }
    .cjc-somatotrope-state  { grid-template-columns: 1fr; }
    .cjc-tachyphylaxis-curve-row { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .cjc-tachyphylaxis-curve-bar { transition: none; }
}

/* --- 05-clinical-evidence --- */
/* ============================================================
   cjc-1295 unit 5 -- clinical evidence MARQUEE bespoke widgets
   ------------------------------------------------------------
   widget vocabulary introduced in this fragment:
     .cjc-trial-timeline             -- vertical chronological rail
                                        (2005 Phase I -> 2024 procedural)
     .cjc-phase2-results-grid        -- 3-up Phase II design / cohort /
                                        halt readout strip
     .cjc-case-grid (+ -card / -pill /
                     -title / -body /
                     -takeaway)      -- case-based teaching widget
                                        mirrored from sml-case-grid
                                        (4 cases A/B/C/D from dossier
                                        §60)
     .cjc-hiv-lipodystrophy-context  -- 2-column HIV-lipodystrophy
                                        pathobiology context card pair
     .cjc-halt-narrative             -- single bordered narrative card
                                        for the July 2006 halt event
     .cjc-translation-gap-rail       -- vertical inventory rail for
                                        the §46 translation gaps
   ============================================================ */

/* ------------------------------------------------------------
   .cjc-trial-timeline -- vertical historical rail
   ------------------------------------------------------------ */

.cjc-trial-timeline {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    border-left: 3px solid rgba(94, 234, 212, 0.45);
    background: rgba(15, 23, 42, 0.4);
    border-radius: 0 14px 14px 0;
}

[data-theme="light"] .cjc-trial-timeline {
    background: rgba(248, 250, 252, 0.85);
    border-left-color: rgba(16, 185, 129, 0.6);
}

.cjc-trial-timeline-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 0.6rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
}

.cjc-trial-timeline-row:last-child { border-bottom: none; }

.cjc-trial-timeline-year {
    font-weight: 700;
    color: rgba(94, 234, 212, 0.95);
    font-size: 0.95rem;
}

[data-theme="light"] .cjc-trial-timeline-year { color: rgba(6, 95, 70, 0.95); }

.cjc-trial-timeline-event {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.92);
}

[data-theme="light"] .cjc-trial-timeline-event { color: rgba(30, 41, 59, 0.88); }

.cjc-trial-timeline-row[data-tone="halt"] .cjc-trial-timeline-year { color: rgba(252, 165, 165, 0.95); }
[data-theme="light"] .cjc-trial-timeline-row[data-tone="halt"] .cjc-trial-timeline-year { color: rgba(185, 28, 28, 0.95); }

/* ------------------------------------------------------------
   .cjc-phase2-results-grid -- 3-up design / cohort / halt strip
   ------------------------------------------------------------ */

.cjc-phase2-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
    margin: 1.4rem 0;
}

.cjc-phase2-results-card {
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #60a5fa;
}

[data-theme="light"] .cjc-phase2-results-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-phase2-results-card[data-slot="design"] { border-top-color: #60a5fa; }
.cjc-phase2-results-card[data-slot="cohort"] { border-top-color: #10b981; }
.cjc-phase2-results-card[data-slot="halt"]   { border-top-color: #ef4444; }

.cjc-phase2-results-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.35rem;
}

.cjc-phase2-results-value {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-phase2-results-value { color: rgba(15, 23, 42, 0.92); }

.cjc-phase2-results-body {
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.86);
}

[data-theme="light"] .cjc-phase2-results-body { color: rgba(30, 41, 59, 0.84); }

/* ------------------------------------------------------------
   .cjc-case-grid -- case-based teaching widget (4 cases)
   ------------------------------------------------------------ */

.cjc-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.cjc-case-card {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #60a5fa;
}

[data-theme="light"] .cjc-case-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-case-card[data-case="A"] { border-top-color: #047857; }
.cjc-case-card[data-case="B"] { border-top-color: #b45309; }
.cjc-case-card[data-case="C"] { border-top-color: #1d4ed8; }
.cjc-case-card[data-case="D"] { border-top-color: #b91c1c; }

.cjc-case-pill {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(96, 165, 250, 0.15);
    color: rgba(191, 219, 254, 0.95);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.5rem;
}

[data-theme="light"] .cjc-case-pill {
    background: rgba(96, 165, 250, 0.18);
    color: rgba(30, 64, 175, 0.95);
}

.cjc-case-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-case-title { color: rgba(15, 23, 42, 0.92); }

.cjc-case-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-case-body { color: rgba(30, 41, 59, 0.85); }

.cjc-case-takeaway {
    margin-top: 0.65rem;
    font-size: 0.84rem;
    font-style: italic;
    color: rgba(148, 163, 184, 0.95);
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
    padding-top: 0.5rem;
}

/* ------------------------------------------------------------
   .cjc-hiv-lipodystrophy-context -- 2-column pathobiology pair
   ------------------------------------------------------------ */

.cjc-hiv-lipodystrophy-context {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.cjc-hiv-lipodystrophy-context-card {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #34d399;
}

[data-theme="light"] .cjc-hiv-lipodystrophy-context-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-hiv-lipodystrophy-context-tag {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(94, 234, 212, 0.95);
    margin-bottom: 0.35rem;
}

[data-theme="light"] .cjc-hiv-lipodystrophy-context-tag { color: rgba(6, 95, 70, 0.95); }

.cjc-hiv-lipodystrophy-context-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-hiv-lipodystrophy-context-title { color: rgba(15, 23, 42, 0.92); }

.cjc-hiv-lipodystrophy-context-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-hiv-lipodystrophy-context-body { color: rgba(30, 41, 59, 0.85); }

/* ------------------------------------------------------------
   .cjc-halt-narrative -- single bordered narrative card
   ------------------------------------------------------------ */

.cjc-halt-narrative {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
    background: rgba(127, 29, 29, 0.18);
}

[data-theme="light"] .cjc-halt-narrative {
    background: rgba(254, 226, 226, 0.55);
    border-color: rgba(185, 28, 28, 0.35);
}

.cjc-halt-narrative-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(252, 165, 165, 0.95);
    margin-bottom: 0.55rem;
}

[data-theme="light"] .cjc-halt-narrative-header { color: rgba(153, 27, 27, 0.95); }

.cjc-halt-narrative-body {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(254, 226, 226, 0.95);
}

[data-theme="light"] .cjc-halt-narrative-body { color: rgba(127, 29, 29, 0.95); }

/* ------------------------------------------------------------
   .cjc-translation-gap-rail -- vertical gap inventory rail
   ------------------------------------------------------------ */

.cjc-translation-gap-rail {
    margin: 1.5rem 0;
    padding: 1.2rem 1.35rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-translation-gap-rail {
    background: rgba(248, 250, 252, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-translation-gap-rail-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.85rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
    align-items: start;
}

.cjc-translation-gap-rail-row:last-child { border-bottom: none; }

.cjc-translation-gap-rail-num {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(252, 211, 77, 0.95);
}

[data-theme="light"] .cjc-translation-gap-rail-num { color: rgba(180, 83, 9, 0.95); }

.cjc-translation-gap-rail-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-translation-gap-rail-text { color: rgba(30, 41, 59, 0.88); }

@media (max-width: 640px) {
    .cjc-trial-timeline-row { grid-template-columns: 70px 1fr; gap: 0.6rem; }
    .cjc-phase2-results-grid { grid-template-columns: 1fr; }
    .cjc-case-grid { grid-template-columns: 1fr; }
    .cjc-hiv-lipodystrophy-context { grid-template-columns: 1fr; }
}

/* --- 06-stack-strategy --- */
/* ============================================================
   cjc-1295 unit 6 -- stack strategy bespoke widgets
   ------------------------------------------------------------
   widget vocabulary introduced in this fragment:
     .cjc-stack-combo-grid (+ -card / -tag /
                            -title / -body)        -- 2-up GHRH +
                                                      GHRP combo
                                                      receptor card pair
     .cjc-synergy-rail (+ -row / -bar / -bar-fill /
                        -label / -value)           -- horizontal bar
                                                      rail comparing
                                                      mean GH delta
                                                      across GHRH-only
                                                      / GHRP-only /
                                                      combo (Bowers
                                                      1990 framing)
     .cjc-stack-strategy-card (+ -tag / -title /
                               -body / -list /
                               --no-dac / --dac)   -- 2-up variant-
                                                      specific stack
                                                      protocol card
     .cjc-pulse-amplitude-bars (+ -row / -bar /
                                -label / -caption) -- illustrative
                                                      pulse-amplitude
                                                      bars (GHRH alone,
                                                      GHRP alone,
                                                      combo)
   ============================================================ */

/* ------------------------------------------------------------
   .cjc-stack-combo-grid -- 2-up GHRH + GHRP receptor card pair
   ------------------------------------------------------------ */

.cjc-stack-combo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.cjc-stack-combo-card {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #60a5fa;
}

[data-theme="light"] .cjc-stack-combo-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-stack-combo-card[data-arm="ghrh"] { border-top-color: #34d399; }
.cjc-stack-combo-card[data-arm="ghrp"] { border-top-color: #f59e0b; }

.cjc-stack-combo-tag {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.35rem;
}

.cjc-stack-combo-card[data-arm="ghrh"] .cjc-stack-combo-tag { color: rgba(94, 234, 212, 0.95); }
.cjc-stack-combo-card[data-arm="ghrp"] .cjc-stack-combo-tag { color: rgba(252, 211, 77, 0.95); }

[data-theme="light"] .cjc-stack-combo-card[data-arm="ghrh"] .cjc-stack-combo-tag { color: rgba(6, 95, 70, 0.95); }
[data-theme="light"] .cjc-stack-combo-card[data-arm="ghrp"] .cjc-stack-combo-tag { color: rgba(180, 83, 9, 0.95); }

.cjc-stack-combo-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-stack-combo-title { color: rgba(15, 23, 42, 0.92); }

.cjc-stack-combo-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-stack-combo-body { color: rgba(30, 41, 59, 0.85); }

/* ------------------------------------------------------------
   .cjc-synergy-rail -- horizontal bar rail (Bowers 1990)
   ------------------------------------------------------------ */

.cjc-synergy-rail {
    margin: 1.5rem 0;
    padding: 1.2rem 1.35rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-synergy-rail {
    background: rgba(248, 250, 252, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-synergy-rail-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.7rem;
}

.cjc-synergy-rail-row {
    display: grid;
    grid-template-columns: 130px 1fr 70px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.45rem 0;
}

.cjc-synergy-rail-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.92);
}

[data-theme="light"] .cjc-synergy-rail-label { color: rgba(30, 41, 59, 0.9); }

.cjc-synergy-rail-bar {
    height: 14px;
    border-radius: 7px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.cjc-synergy-rail-bar-fill {
    height: 100%;
    border-radius: 7px;
}

.cjc-synergy-rail-row[data-arm="ghrh"] .cjc-synergy-rail-bar-fill  { background: #34d399; }
.cjc-synergy-rail-row[data-arm="ghrp"] .cjc-synergy-rail-bar-fill  { background: #f59e0b; }
.cjc-synergy-rail-row[data-arm="combo"] .cjc-synergy-rail-bar-fill { background: linear-gradient(90deg, #34d399 0%, #f59e0b 100%); }

.cjc-synergy-rail-value {
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
    color: rgba(226, 232, 240, 0.92);
}

[data-theme="light"] .cjc-synergy-rail-value { color: rgba(30, 41, 59, 0.9); }

.cjc-synergy-rail-caption {
    font-size: 0.82rem;
    font-style: italic;
    color: rgba(148, 163, 184, 0.9);
    margin-top: 0.7rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   .cjc-stack-strategy-card -- 2-up variant-specific stack card
   ------------------------------------------------------------ */

.cjc-stack-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.cjc-stack-strategy-card {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #60a5fa;
}

[data-theme="light"] .cjc-stack-strategy-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-stack-strategy-card--no-dac { border-top-color: #10b981; }
.cjc-stack-strategy-card--dac    { border-top-color: #f59e0b; }

.cjc-stack-strategy-tag {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.35rem;
    color: rgba(148, 163, 184, 0.95);
}

.cjc-stack-strategy-card--no-dac .cjc-stack-strategy-tag { color: rgba(94, 234, 212, 0.95); }
.cjc-stack-strategy-card--dac    .cjc-stack-strategy-tag { color: rgba(252, 211, 77, 0.95); }

[data-theme="light"] .cjc-stack-strategy-card--no-dac .cjc-stack-strategy-tag { color: rgba(6, 95, 70, 0.95); }
[data-theme="light"] .cjc-stack-strategy-card--dac    .cjc-stack-strategy-tag { color: rgba(180, 83, 9, 0.95); }

.cjc-stack-strategy-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-stack-strategy-title { color: rgba(15, 23, 42, 0.92); }

.cjc-stack-strategy-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-stack-strategy-body { color: rgba(30, 41, 59, 0.85); }

.cjc-stack-strategy-list {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-stack-strategy-list { color: rgba(30, 41, 59, 0.85); }

.cjc-stack-strategy-list li { margin: 0.2rem 0; }

/* ------------------------------------------------------------
   .cjc-pulse-amplitude-bars -- illustrative pulse-amplitude rail
   ------------------------------------------------------------ */

.cjc-pulse-amplitude-bars {
    margin: 1.5rem 0;
    padding: 1.2rem 1.35rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-pulse-amplitude-bars {
    background: rgba(248, 250, 252, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-pulse-amplitude-bars-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.7rem;
}

.cjc-pulse-amplitude-bars-row {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    height: 130px;
    padding: 0.5rem 0;
}

.cjc-pulse-amplitude-bars-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.cjc-pulse-amplitude-bars-bar {
    width: 100%;
    max-width: 70px;
    border-radius: 6px 6px 0 0;
    background: rgba(96, 165, 250, 0.45);
}

.cjc-pulse-amplitude-bars-col[data-arm="ghrh"]  .cjc-pulse-amplitude-bars-bar { background: #34d399; }
.cjc-pulse-amplitude-bars-col[data-arm="ghrp"]  .cjc-pulse-amplitude-bars-bar { background: #f59e0b; }
.cjc-pulse-amplitude-bars-col[data-arm="combo"] .cjc-pulse-amplitude-bars-bar { background: linear-gradient(180deg, #f59e0b 0%, #34d399 100%); }

.cjc-pulse-amplitude-bars-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.9);
    text-align: center;
}

[data-theme="light"] .cjc-pulse-amplitude-bars-label { color: rgba(30, 41, 59, 0.88); }

.cjc-pulse-amplitude-bars-value {
    font-size: 0.74rem;
    color: rgba(148, 163, 184, 0.95);
    text-align: center;
}

.cjc-pulse-amplitude-bars-caption {
    font-size: 0.82rem;
    font-style: italic;
    color: rgba(148, 163, 184, 0.9);
    margin-top: 0.7rem;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .cjc-stack-combo-grid { grid-template-columns: 1fr; }
    .cjc-stack-strategy-grid { grid-template-columns: 1fr; }
    .cjc-synergy-rail-row { grid-template-columns: 90px 1fr 60px; gap: 0.6rem; }
    .cjc-pulse-amplitude-bars-row { gap: 0.5rem; }
}

/* --- 07-vs-other-analogs --- */
/* ============================================================
   cjc-1295 unit 7 -- vs other analogs bespoke widgets
   ------------------------------------------------------------
   widget vocabulary introduced in this fragment:
     .cjc-analog-timeline (+ -title)        -- vertical wrapper for
                                               historical milestone
                                               rail
     .cjc-milestones (+ .cjc-milestone /
                       -year / -event)      -- per-milestone row
                                               (tone-tagged for
                                               ghrh / ghrp / cjc /
                                               rhgh classes)
     .cjc-pk-comparison-grid (+ -card /
                              -name / -row /
                              -label / -value) -- per-analog PK
                                                  comparison card
                                                  (receptor /
                                                  half-life /
                                                  frequency)
     .cjc-receptor-split-grid (+ -card /
                               -tag / -title /
                               -body)       -- 2-up GHRHR vs GHSR
                                               receptor split card
                                               pair
     .cjc-stack-positioning (+ -card /
                             -niche / -title /
                             -body)         -- positioning grid (no-
                                               DAC niche / DAC niche
                                               / not-the-best-tool
                                               niche)
   ============================================================ */

/* ------------------------------------------------------------
   .cjc-analog-timeline -- vertical historical milestone rail
   ------------------------------------------------------------ */

.cjc-analog-timeline {
    margin: 1.25rem 0;
    padding: 1.25rem 1.4rem;
    border-left: 3px solid rgba(94, 234, 212, 0.45);
    background: rgba(15, 23, 42, 0.4);
    border-radius: 0 14px 14px 0;
}

[data-theme="light"] .cjc-analog-timeline {
    background: rgba(248, 250, 252, 0.85);
    border-left-color: rgba(16, 185, 129, 0.6);
}

.cjc-analog-timeline-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.7rem;
}

.cjc-milestones {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cjc-milestone {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    align-items: start;
    padding: 0.6rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.18);
}

.cjc-milestone:last-child { border-bottom: none; }

.cjc-milestone-year {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(94, 234, 212, 0.95);
}

[data-theme="light"] .cjc-milestone-year { color: rgba(6, 95, 70, 0.95); }

.cjc-milestone[data-tone="ghrh"]  .cjc-milestone-year { color: rgba(94, 234, 212, 0.95); }
.cjc-milestone[data-tone="ghrp"]  .cjc-milestone-year { color: rgba(252, 211, 77, 0.95); }
.cjc-milestone[data-tone="cjc"]   .cjc-milestone-year { color: rgba(252, 165, 165, 0.95); }
.cjc-milestone[data-tone="rhgh"]  .cjc-milestone-year { color: rgba(165, 180, 252, 0.95); }

[data-theme="light"] .cjc-milestone[data-tone="ghrh"]  .cjc-milestone-year { color: rgba(6, 95, 70, 0.95); }
[data-theme="light"] .cjc-milestone[data-tone="ghrp"]  .cjc-milestone-year { color: rgba(180, 83, 9, 0.95); }
[data-theme="light"] .cjc-milestone[data-tone="cjc"]   .cjc-milestone-year { color: rgba(185, 28, 28, 0.95); }
[data-theme="light"] .cjc-milestone[data-tone="rhgh"]  .cjc-milestone-year { color: rgba(55, 48, 163, 0.95); }

.cjc-milestone-event {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.92);
}

[data-theme="light"] .cjc-milestone-event { color: rgba(30, 41, 59, 0.88); }

/* ------------------------------------------------------------
   .cjc-pk-comparison-grid -- per-analog PK card
   ------------------------------------------------------------ */

.cjc-pk-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.cjc-pk-comparison-card {
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #60a5fa;
}

[data-theme="light"] .cjc-pk-comparison-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-pk-comparison-card[data-analog="sermorelin"]   { border-top-color: #34d399; }
.cjc-pk-comparison-card[data-analog="tesamorelin"]  { border-top-color: #10b981; }
.cjc-pk-comparison-card[data-analog="cjc-no-dac"]   { border-top-color: #60a5fa; }
.cjc-pk-comparison-card[data-analog="cjc-dac"]      { border-top-color: #f59e0b; }
.cjc-pk-comparison-card[data-analog="ipamorelin"]   { border-top-color: #a78bfa; }
.cjc-pk-comparison-card[data-analog="mk-677"]       { border-top-color: #f472b6; }
.cjc-pk-comparison-card[data-analog="rhgh"]         { border-top-color: #ef4444; }

.cjc-pk-comparison-name {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-pk-comparison-name { color: rgba(15, 23, 42, 0.92); }

.cjc-pk-comparison-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.15);
}

.cjc-pk-comparison-row:last-child { border-bottom: none; }

.cjc-pk-comparison-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(148, 163, 184, 0.95);
}

.cjc-pk-comparison-value {
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-pk-comparison-value { color: rgba(30, 41, 59, 0.88); }

/* ------------------------------------------------------------
   .cjc-receptor-split-grid -- 2-up GHRHR vs GHSR card pair
   ------------------------------------------------------------ */

.cjc-receptor-split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.cjc-receptor-split-card {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #60a5fa;
}

[data-theme="light"] .cjc-receptor-split-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-receptor-split-card[data-receptor="ghrhr"] { border-top-color: #34d399; }
.cjc-receptor-split-card[data-receptor="ghsr"]  { border-top-color: #f59e0b; }

.cjc-receptor-split-tag {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.35rem;
    color: rgba(148, 163, 184, 0.95);
}

.cjc-receptor-split-card[data-receptor="ghrhr"] .cjc-receptor-split-tag { color: rgba(94, 234, 212, 0.95); }
.cjc-receptor-split-card[data-receptor="ghsr"]  .cjc-receptor-split-tag { color: rgba(252, 211, 77, 0.95); }

[data-theme="light"] .cjc-receptor-split-card[data-receptor="ghrhr"] .cjc-receptor-split-tag { color: rgba(6, 95, 70, 0.95); }
[data-theme="light"] .cjc-receptor-split-card[data-receptor="ghsr"]  .cjc-receptor-split-tag { color: rgba(180, 83, 9, 0.95); }

.cjc-receptor-split-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-receptor-split-title { color: rgba(15, 23, 42, 0.92); }

.cjc-receptor-split-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-receptor-split-body { color: rgba(30, 41, 59, 0.85); }

/* ------------------------------------------------------------
   .cjc-stack-positioning -- positioning grid (3 niches)
   ------------------------------------------------------------ */

.cjc-stack-positioning {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.cjc-stack-positioning-card {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-left: 4px solid #60a5fa;
}

[data-theme="light"] .cjc-stack-positioning-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-stack-positioning-card[data-niche="no-dac"]      { border-left-color: #34d399; }
.cjc-stack-positioning-card[data-niche="dac"]         { border-left-color: #f59e0b; }
.cjc-stack-positioning-card[data-niche="not-the-fit"] { border-left-color: #ef4444; }

.cjc-stack-positioning-niche {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.35rem;
    color: rgba(148, 163, 184, 0.95);
}

.cjc-stack-positioning-card[data-niche="no-dac"]      .cjc-stack-positioning-niche { color: rgba(94, 234, 212, 0.95); }
.cjc-stack-positioning-card[data-niche="dac"]         .cjc-stack-positioning-niche { color: rgba(252, 211, 77, 0.95); }
.cjc-stack-positioning-card[data-niche="not-the-fit"] .cjc-stack-positioning-niche { color: rgba(252, 165, 165, 0.95); }

[data-theme="light"] .cjc-stack-positioning-card[data-niche="no-dac"]      .cjc-stack-positioning-niche { color: rgba(6, 95, 70, 0.95); }
[data-theme="light"] .cjc-stack-positioning-card[data-niche="dac"]         .cjc-stack-positioning-niche { color: rgba(180, 83, 9, 0.95); }
[data-theme="light"] .cjc-stack-positioning-card[data-niche="not-the-fit"] .cjc-stack-positioning-niche { color: rgba(185, 28, 28, 0.95); }

.cjc-stack-positioning-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-stack-positioning-title { color: rgba(15, 23, 42, 0.92); }

.cjc-stack-positioning-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-stack-positioning-body { color: rgba(30, 41, 59, 0.85); }

@media (max-width: 640px) {
    .cjc-milestone { grid-template-columns: 60px 1fr; gap: 0.6rem; }
    .cjc-pk-comparison-grid { grid-template-columns: 1fr; }
    .cjc-pk-comparison-row { grid-template-columns: 80px 1fr; }
    .cjc-receptor-split-grid { grid-template-columns: 1fr; }
    .cjc-stack-positioning { grid-template-columns: 1fr; }
}

/* --- 08-safety-quality --- */
/* ============================================================
   cjc-1295 unit 8 -- safety and product quality bespoke widgets
   ------------------------------------------------------------
   widget vocabulary introduced in this fragment:
     .cjc-ae-pyramid-svg            -- inline SVG AE pyramid wrapper
     .cjc-ae-pyramid-mount          -- container for the inline SVG
     .cjc-safety-axis-grid          -- 3-up safety-axis card strip
                                       (mechanism / monitor / mitigate)
     .cjc-vendor-mislabel-table     -- 2-row no-DAC vs DAC mislabel
                                       outcome contrast grid
     .cjc-red-flag-list             -- bordered red-flag inventory rail
     .cjc-monitoring-checklist      -- numbered monitoring practice rail
   ============================================================ */

/* ------------------------------------------------------------
   .cjc-ae-pyramid-svg / .cjc-ae-pyramid-mount
   inline SVG infographic for the AE frequency pyramid
   ------------------------------------------------------------ */

.cjc-ae-pyramid-mount {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.cjc-ae-pyramid-svg {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
}

/* ------------------------------------------------------------
   .cjc-safety-axis-grid
   3-up mechanism / monitor / mitigate strip
   ------------------------------------------------------------ */

.cjc-safety-axis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
    margin: 1.4rem 0;
}

.cjc-safety-axis-card {
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
    border-top: 3px solid #f59e0b;
}

[data-theme="light"] .cjc-safety-axis-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-safety-axis-card[data-axis="mechanism"] { border-top-color: #60a5fa; }
.cjc-safety-axis-card[data-axis="monitor"]   { border-top-color: #10b981; }
.cjc-safety-axis-card[data-axis="mitigate"]  { border-top-color: #f59e0b; }

.cjc-safety-axis-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.35rem;
}

.cjc-safety-axis-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-safety-axis-title { color: rgba(15, 23, 42, 0.92); }

.cjc-safety-axis-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-safety-axis-body { color: rgba(30, 41, 59, 0.85); }

/* ------------------------------------------------------------
   .cjc-vendor-mislabel-table
   2-row no-DAC vs DAC mislabel outcome contrast
   ------------------------------------------------------------ */

.cjc-vendor-mislabel-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.cjc-vendor-mislabel-row {
    padding: 1.15rem 1.3rem;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-left: 4px solid #ef4444;
    background: rgba(127, 29, 29, 0.18);
}

[data-theme="light"] .cjc-vendor-mislabel-row {
    background: rgba(254, 226, 226, 0.55);
    border-color: rgba(185, 28, 28, 0.32);
}

.cjc-vendor-mislabel-row[data-direction="underdose"] {
    border-left-color: #facc15;
    border-color: rgba(250, 204, 21, 0.32);
    background: rgba(120, 53, 15, 0.18);
}

[data-theme="light"] .cjc-vendor-mislabel-row[data-direction="underdose"] {
    background: rgba(254, 243, 199, 0.6);
    border-color: rgba(202, 138, 4, 0.32);
}

.cjc-vendor-mislabel-tag {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    color: rgba(252, 165, 165, 0.95);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.5rem;
}

[data-theme="light"] .cjc-vendor-mislabel-tag {
    background: rgba(239, 68, 68, 0.18);
    color: rgba(153, 27, 27, 0.95);
}

.cjc-vendor-mislabel-row[data-direction="underdose"] .cjc-vendor-mislabel-tag {
    background: rgba(250, 204, 21, 0.18);
    color: rgba(250, 204, 21, 0.95);
}

[data-theme="light"] .cjc-vendor-mislabel-row[data-direction="underdose"] .cjc-vendor-mislabel-tag {
    background: rgba(250, 204, 21, 0.22);
    color: rgba(133, 77, 14, 0.95);
}

.cjc-vendor-mislabel-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-vendor-mislabel-title { color: rgba(15, 23, 42, 0.92); }

.cjc-vendor-mislabel-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-vendor-mislabel-body { color: rgba(30, 41, 59, 0.88); }

/* ------------------------------------------------------------
   .cjc-red-flag-list
   bordered inventory rail for vendor red flags
   ------------------------------------------------------------ */

.cjc-red-flag-list {
    margin: 1.5rem 0;
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-left: 4px solid #ef4444;
    background: rgba(127, 29, 29, 0.15);
}

[data-theme="light"] .cjc-red-flag-list {
    background: rgba(254, 226, 226, 0.5);
    border-color: rgba(185, 28, 28, 0.32);
}

.cjc-red-flag-list-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(252, 165, 165, 0.95);
    margin-bottom: 0.55rem;
}

[data-theme="light"] .cjc-red-flag-list-header { color: rgba(153, 27, 27, 0.95); }

.cjc-red-flag-list-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(239, 68, 68, 0.2);
    align-items: start;
}

.cjc-red-flag-list-row:last-child { border-bottom: none; }

.cjc-red-flag-list-flag {
    font-weight: 700;
    color: rgba(252, 165, 165, 0.95);
    font-size: 1rem;
    line-height: 1.3;
}

[data-theme="light"] .cjc-red-flag-list-flag { color: rgba(185, 28, 28, 0.95); }

.cjc-red-flag-list-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-red-flag-list-text { color: rgba(30, 41, 59, 0.88); }

/* ------------------------------------------------------------
   .cjc-monitoring-checklist
   numbered monitoring-practice rail
   ------------------------------------------------------------ */

.cjc-monitoring-checklist {
    margin: 1.5rem 0;
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left: 4px solid #10b981;
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-monitoring-checklist {
    background: rgba(240, 253, 244, 0.65);
    border-color: rgba(16, 185, 129, 0.32);
}

.cjc-monitoring-checklist-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(94, 234, 212, 0.95);
    margin-bottom: 0.55rem;
}

[data-theme="light"] .cjc-monitoring-checklist-header { color: rgba(6, 95, 70, 0.95); }

.cjc-monitoring-checklist-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0.7rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
    align-items: start;
}

.cjc-monitoring-checklist-row:last-child { border-bottom: none; }

.cjc-monitoring-checklist-num {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(94, 234, 212, 0.95);
}

[data-theme="light"] .cjc-monitoring-checklist-num { color: rgba(6, 95, 70, 0.95); }

.cjc-monitoring-checklist-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-monitoring-checklist-text { color: rgba(30, 41, 59, 0.88); }

@media (max-width: 640px) {
    .cjc-safety-axis-grid { grid-template-columns: 1fr; }
    .cjc-vendor-mislabel-table { grid-template-columns: 1fr; }
}

/* --- 09-administration-regulatory --- */
/* ============================================================
   cjc-1295 unit 9 -- administration and regulatory bespoke widgets
   ------------------------------------------------------------
   widget vocabulary introduced in this fragment:
     .cjc-route-matrix          -- 2-up no-DAC vs DAC dosing matrix
     .cjc-dose-framework        -- numbered dose-interpretation rail
     .cjc-reg-status-card       -- single FDA 503A Category 2 status card
     .cjc-wada-status-card      -- single WADA S2.2 status card
     .cjc-research-roadmap      -- numbered research-priorities inventory
                                   (from dossier §66)
   ============================================================ */

/* ------------------------------------------------------------
   .cjc-route-matrix
   2-up no-DAC vs DAC dosing matrix cards
   ------------------------------------------------------------ */

.cjc-route-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.cjc-route-matrix-card {
    padding: 1.15rem 1.3rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-route-matrix-card {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-route-matrix-card[data-variant="no-dac"] { border-top: 3px solid #10b981; }
.cjc-route-matrix-card[data-variant="dac"]    { border-top: 3px solid #f59e0b; }

.cjc-route-matrix-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(148, 163, 184, 0.95);
    margin-bottom: 0.35rem;
}

.cjc-route-matrix-title {
    font-weight: 600;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-route-matrix-title { color: rgba(15, 23, 42, 0.92); }

.cjc-route-matrix-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(226, 232, 240, 0.88);
}

[data-theme="light"] .cjc-route-matrix-body { color: rgba(30, 41, 59, 0.85); }

.cjc-route-matrix-meta {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.95);
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
    padding-top: 0.5rem;
}

/* ------------------------------------------------------------
   .cjc-dose-framework
   numbered dose-interpretation rail
   ------------------------------------------------------------ */

.cjc-dose-framework {
    margin: 1.5rem 0;
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left: 4px solid #60a5fa;
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-dose-framework {
    background: rgba(239, 246, 255, 0.6);
    border-color: rgba(96, 165, 250, 0.32);
}

.cjc-dose-framework-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(147, 197, 253, 0.95);
    margin-bottom: 0.55rem;
}

[data-theme="light"] .cjc-dose-framework-header { color: rgba(30, 64, 175, 0.95); }

.cjc-dose-framework-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.85rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
    align-items: start;
}

.cjc-dose-framework-row:last-child { border-bottom: none; }

.cjc-dose-framework-num {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(147, 197, 253, 0.95);
}

[data-theme="light"] .cjc-dose-framework-num { color: rgba(30, 64, 175, 0.95); }

.cjc-dose-framework-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-dose-framework-text { color: rgba(30, 41, 59, 0.88); }

/* ------------------------------------------------------------
   .cjc-reg-status-card
   single FDA 503A Category 2 status card
   ------------------------------------------------------------ */

.cjc-reg-status-card {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
    background: rgba(127, 29, 29, 0.18);
}

[data-theme="light"] .cjc-reg-status-card {
    background: rgba(254, 226, 226, 0.55);
    border-color: rgba(185, 28, 28, 0.32);
}

.cjc-reg-status-card-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(252, 165, 165, 0.95);
    margin-bottom: 0.55rem;
}

[data-theme="light"] .cjc-reg-status-card-header { color: rgba(153, 27, 27, 0.95); }

.cjc-reg-status-card-status {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-reg-status-card-status { color: rgba(15, 23, 42, 0.95); }

.cjc-reg-status-card-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(254, 226, 226, 0.95);
}

[data-theme="light"] .cjc-reg-status-card-body { color: rgba(127, 29, 29, 0.95); }

/* ------------------------------------------------------------
   .cjc-wada-status-card
   single WADA S2.2 status card -- amber rather than red,
   since WADA prohibition is unambiguous and procedural
   rather than safety-flagged
   ------------------------------------------------------------ */

.cjc-wada-status-card {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-left: 4px solid #f59e0b;
    background: rgba(120, 53, 15, 0.16);
}

[data-theme="light"] .cjc-wada-status-card {
    background: rgba(254, 243, 199, 0.55);
    border-color: rgba(202, 138, 4, 0.32);
}

.cjc-wada-status-card-header {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(252, 211, 77, 0.95);
    margin-bottom: 0.55rem;
}

[data-theme="light"] .cjc-wada-status-card-header { color: rgba(133, 77, 14, 0.95); }

.cjc-wada-status-card-status {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.45rem;
    color: rgba(248, 250, 252, 0.95);
}

[data-theme="light"] .cjc-wada-status-card-status { color: rgba(15, 23, 42, 0.95); }

.cjc-wada-status-card-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(254, 243, 199, 0.95);
}

[data-theme="light"] .cjc-wada-status-card-body { color: rgba(120, 53, 15, 0.95); }

/* ------------------------------------------------------------
   .cjc-research-roadmap
   numbered research-priorities inventory (dossier §66)
   ------------------------------------------------------------ */

.cjc-research-roadmap {
    margin: 1.5rem 0;
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.45);
}

[data-theme="light"] .cjc-research-roadmap {
    background: rgba(248, 250, 252, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

.cjc-research-roadmap-row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.85rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
    align-items: start;
}

.cjc-research-roadmap-row:last-child { border-bottom: none; }

.cjc-research-roadmap-num {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgba(94, 234, 212, 0.95);
}

[data-theme="light"] .cjc-research-roadmap-num { color: rgba(6, 95, 70, 0.95); }

.cjc-research-roadmap-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.9);
}

[data-theme="light"] .cjc-research-roadmap-text { color: rgba(30, 41, 59, 0.88); }

@media (max-width: 640px) {
    .cjc-route-matrix { grid-template-columns: 1fr; }
}