/**
 * ipamorelin mastery course styles
 *
 * extends the base learn page styles with course-specific theming,
 * paywall ui, loading states, and interactive visualization containers.
 * deep-indigo primary, soft-amber accent on the dark site shell.
 */

:root {
    --ipa-primary: #3F3D9D;
    --ipa-primary-light: #5E5BC0;
    --ipa-primary-dark: #2D2B7A;
    --ipa-primary-rgb: 63, 61, 157;
    --ipa-accent: #FFB454;
    --ipa-accent-dark: #E89C3A;
    --ipa-accent-rgb: 255, 180, 84;
}

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

.ipa-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(--ipa-primary-rgb), 0.22),
        rgba(var(--ipa-accent-rgb), 0.12)
    );
    color: #c9c7ff;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 2px 8px rgba(var(--ipa-primary-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

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

[data-theme="light"] .ipa-course-badge {
    color: var(--ipa-primary-dark);
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.1), rgba(var(--ipa-accent-rgb), 0.08));
    border-color: rgba(var(--ipa-primary-rgb), 0.25);
}

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

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

.ipa-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(var(--ipa-primary-rgb), 0.08) 50%,
            var(--color-bg-card, rgba(255, 255, 255, 0.03)) 75%);
    background-size: 200% 100%;
    animation: ipa-shimmer 1.5s ease-in-out infinite;
}

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

[data-theme="light"] .ipa-loading::after {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.04) 25%,
            rgba(var(--ipa-primary-rgb), 0.08) 50%,
            rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
}

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

.ipa-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;
}

.ipa-paywall-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 16px;
    background: rgba(var(--ipa-primary-rgb), 0.16);
    color: var(--ipa-primary-light);
}

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

.ipa-paywall-title--success { color: var(--ipa-accent); }

.ipa-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;
}

.ipa-paywall--cert {
    border-color: rgba(var(--ipa-accent-rgb), 0.28);
    background: rgba(var(--ipa-accent-rgb), 0.05);
}

.ipa-paywall-trigger {
    cursor: pointer;
}

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

.ipa-stat-grid {
    display: grid;
    /* auto-fit (not auto-fill) so 4 cards on a 5-column-wide track expand
       to fill the row instead of leaving phantom empty cells on the right
       (drewbo flagged this on the ipamorelin index 2026-05-15). */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin: 24px 0;
}

.ipa-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));
}

.ipa-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ipa-accent);
    margin-bottom: 4px;
}

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

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

[data-theme="light"] .ipa-stat-value { color: var(--ipa-accent-dark); }

/* ============================================================
   snapshot grid (free-preview cards above paywall)
   ============================================================ */

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

.ipa-snapshot-card {
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.1), rgba(var(--ipa-accent-rgb), 0.03));
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.24);
}

.ipa-snapshot-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--ipa-accent);
    margin: 0 0 8px;
}

.ipa-snapshot-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-muted, rgba(255, 255, 255, 0.7));
    margin: 0;
}

[data-theme="light"] .ipa-snapshot-card {
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.05), rgba(var(--ipa-accent-rgb), 0.04));
    border-color: rgba(var(--ipa-primary-rgb), 0.2);
}

[data-theme="light"] .ipa-snapshot-title { color: var(--ipa-accent-dark); }
[data-theme="light"] .ipa-snapshot-text { color: rgba(15, 23, 42, 0.75); }

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

.ipa-interactive-header {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--ipa-accent);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--ipa-primary-rgb), 0.28);
}

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

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

.ipa-detail-panel {
    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: ipa-fade-in 0.3s ease;
}

.ipa-detail-header {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ipa-accent);
}

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

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

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

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

.ipa-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;
}

.ipa-term-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ipa-primary-light), var(--ipa-accent));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ipa-term-card:hover {
    border-color: rgba(var(--ipa-primary-rgb), 0.32);
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.08), rgba(255,255,255,0.02));
    transform: translateY(-1px);
}

.ipa-term-card[open] {
    border-color: rgba(var(--ipa-primary-rgb), 0.45);
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.1), rgba(var(--ipa-accent-rgb), 0.03));
}

.ipa-term-card[open]::before { opacity: 1; }

.ipa-term-card[open] .ipa-term-chev {
    transform: rotate(90deg);
}

.ipa-term-summary {
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    /* 2 columns: 1fr name+category meta | auto chevron. matches selank's
       slk-term-summary canonical (drewbo 2026-05-15 -- key terms should look
       like selank, not the custom monogram pill I had on first pass). the
       .ipa-term-monogram span in the markup is hidden below; selank does the
       same -- the letter is kept in markup but not shown in the canonical
       layout. */
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

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

/* hidden to match selank's canonical key-terms look. the html keeps the
   span so the visual identity is reversible without an html sweep. */
.ipa-term-monogram { display: none; }

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

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

.ipa-term-cat {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.62);
    font-weight: 500;
}

.ipa-term-chev {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.4);
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.ipa-term-card:hover .ipa-term-chev,
.ipa-term-card[open] .ipa-term-chev {
    color: var(--ipa-accent);
}

.ipa-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"] .ipa-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"] .ipa-term-card:hover {
    border-color: rgba(var(--ipa-primary-rgb), 0.35);
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.05), rgba(15,23,42,0.005));
}

[data-theme="light"] .ipa-term-card[open] {
    border-color: rgba(var(--ipa-primary-rgb), 0.5);
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.07), rgba(var(--ipa-accent-rgb), 0.03));
}

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

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

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

.ipa-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);
}

.ipa-comparison-card--highlight {
    border-color: rgba(var(--ipa-accent-rgb), 0.4);
    background: linear-gradient(135deg, rgba(var(--ipa-accent-rgb), 0.08), rgba(var(--ipa-primary-rgb), 0.04));
}

.ipa-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);
}

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

.ipa-comparison-sub {
    font-size: 0.72rem;
    color: var(--text-secondary, #a3a3a3);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

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

.ipa-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;
}

.ipa-comparison-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ipa-accent);
}

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

[data-theme="light"] .ipa-comparison-title { color: #1a1a1a; }
[data-theme="light"] .ipa-comparison-list li { color: rgba(15, 23, 42, 0.7); }

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

.ipa-dosing-snapshot .ipa-comparison-card {
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.12), rgba(var(--ipa-accent-rgb), 0.03));
    border-color: rgba(var(--ipa-primary-rgb), 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .ipa-dosing-snapshot .ipa-comparison-card {
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.06), rgba(var(--ipa-accent-rgb), 0.04));
    border-color: rgba(var(--ipa-primary-rgb), 0.22);
}

/* ============================================================
   evidence-ceiling tier grid (canonical green/amber/red/purple pattern)
   ============================================================ */

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

.ipa-tier-card {
    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));
    border-left-width: 4px;
}

.ipa-tier-card--green   { border-left-color: #34d39e; }
.ipa-tier-card--amber   { border-left-color: var(--ipa-accent); }
.ipa-tier-card--red     { border-left-color: #ef4444; }
.ipa-tier-card--purple  { border-left-color: #a78bfa; }

.ipa-tier-grade {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.ipa-tier-card--green  .ipa-tier-grade { color: #34d39e; }
.ipa-tier-card--amber  .ipa-tier-grade { color: var(--ipa-accent); }
.ipa-tier-card--red    .ipa-tier-grade { color: #ef4444; }
.ipa-tier-card--purple .ipa-tier-grade { color: #a78bfa; }

.ipa-tier-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text, #fff);
    margin: 0 0 8px;
}

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

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

[data-theme="light"] .ipa-tier-title { color: #1a1a1a; }
[data-theme="light"] .ipa-tier-text  { color: rgba(15, 23, 42, 0.7); }

/* ============================================================
   unit 3 -- residue derivation visualizer
   ============================================================ */

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

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

.ipa-derivation-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: #c9c7ff;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(var(--ipa-primary-rgb), 0.18);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.32);
    white-space: nowrap;
}

.ipa-derivation-tag--child {
    color: #1a1335;
    background: linear-gradient(135deg, var(--ipa-accent), var(--ipa-accent-dark));
    border-color: var(--ipa-accent);
}

[data-theme="light"] .ipa-derivation-tag {
    color: var(--ipa-primary-dark);
    background: rgba(var(--ipa-primary-rgb), 0.08);
    border-color: rgba(var(--ipa-primary-rgb), 0.28);
}

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

.ipa-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(var(--ipa-primary-rgb), 0.22), rgba(var(--ipa-primary-rgb), 0.06));
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ipa-residue::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(var(--ipa-primary-rgb), 0.55);
    transform: translateY(-50%);
}

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

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

.ipa-residue-aa {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #c9c7ff;
    line-height: 1.2;
    margin-top: 2px;
}

.ipa-residue--unnatural {
    background: linear-gradient(135deg, rgba(var(--ipa-accent-rgb), 0.22), rgba(var(--ipa-accent-rgb), 0.06));
    border-color: rgba(var(--ipa-accent-rgb), 0.55);
}

.ipa-residue--unnatural .ipa-residue-aa { color: var(--ipa-accent); }
.ipa-residue--unnatural::after { background: rgba(var(--ipa-accent-rgb), 0.55); }

.ipa-residue.is-active,
.ipa-residue:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--ipa-accent-rgb), 0.85);
    box-shadow: 0 4px 14px rgba(var(--ipa-primary-rgb), 0.25);
}

[data-theme="light"] .ipa-residue {
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.08), rgba(var(--ipa-primary-rgb), 0.02));
}

[data-theme="light"] .ipa-residue-pos { color: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .ipa-residue-aa  { color: var(--ipa-primary-dark); }

[data-theme="light"] .ipa-residue--unnatural {
    background: linear-gradient(135deg, rgba(var(--ipa-accent-rgb), 0.1), rgba(var(--ipa-accent-rgb), 0.03));
}

[data-theme="light"] .ipa-residue--unnatural .ipa-residue-aa { color: var(--ipa-accent-dark); }

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

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

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

.ipa-derivation-swatch--natural {
    background: rgba(var(--ipa-primary-rgb), 0.25);
    border-color: rgba(var(--ipa-primary-rgb), 0.5);
}

.ipa-derivation-swatch--unnatural {
    background: rgba(var(--ipa-accent-rgb), 0.28);
    border-color: rgba(var(--ipa-accent-rgb), 0.55);
}

/* ============================================================
   shared SVG / chart base for unit modules
   ============================================================ */

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

.ipa-axis { stroke: rgba(255, 255, 255, 0.15); stroke-width: 1; }
.ipa-grid {
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

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

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

[data-theme="light"] .ipa-axis  { stroke: rgba(15, 23, 42, 0.18); }
[data-theme="light"] .ipa-grid  { stroke: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .ipa-tick  { fill: rgba(15, 23, 42, 0.55); }
[data-theme="light"] .ipa-axis-label { fill: rgba(15, 23, 42, 0.65); }

/* ============================================================
   slider widget (dose response, dose timing)
   ============================================================ */

.ipa-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
}

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

.ipa-slider-readout {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ipa-accent);
}

.ipa-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--ipa-primary-rgb), 0.15);
    outline: none;
    cursor: pointer;
}

.ipa-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ipa-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(var(--ipa-accent-rgb), 0.45);
    cursor: grab;
}

.ipa-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ipa-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(var(--ipa-accent-rgb), 0.45);
    cursor: grab;
}

[data-theme="light"] .ipa-slider { background: rgba(var(--ipa-primary-rgb), 0.12); }

/* ============================================================
   tabs (applications dashboard)
   ============================================================ */

.ipa-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ipa-tab {
    background: transparent;
    border: none;
    padding: 10px 16px;
    color: var(--text-secondary, #a3a3a3);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ipa-tab:hover { color: var(--ipa-accent); }

.ipa-tab.is-active {
    color: var(--ipa-accent);
    border-bottom-color: var(--ipa-accent);
}

.ipa-tab-panel { display: none; }
.ipa-tab-panel.is-active { display: block; animation: ipa-fade-in 0.25s ease; }

[data-theme="light"] .ipa-tabs { border-bottom-color: rgba(15, 23, 42, 0.1); }

/* ============================================================
   timeline (regulatory milestones)
   ============================================================ */

.ipa-timeline {
    position: relative;
    padding: 24px 0 12px;
    margin: 12px 0;
}

.ipa-timeline-track {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--ipa-primary-light), var(--ipa-accent));
    border-radius: 2px;
    transform: translateY(-50%);
}

.ipa-timeline-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    gap: 8px;
    flex-wrap: wrap;
}

.ipa-timeline-item {
    flex: 1 1 100px;
    min-width: 100px;
    text-align: center;
    position: relative;
    padding-top: 28px;
}

.ipa-timeline-item::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ipa-accent);
    border: 2px solid var(--ipa-primary-dark);
    transform: translateX(-50%);
}

.ipa-timeline-year {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ipa-accent);
    margin: 0;
}

.ipa-timeline-label {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--color-muted, rgba(255, 255, 255, 0.7));
    margin-top: 4px;
}

[data-theme="light"] .ipa-timeline-item::before { border-color: #fff; }
[data-theme="light"] .ipa-timeline-label { color: rgba(15, 23, 42, 0.7); }

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

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

.ipa-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"] .ipa-cert-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
}

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

@media (max-width: 600px) {
    .ipa-stat-grid       { grid-template-columns: repeat(2, 1fr); }
    .ipa-terms-grid      { grid-template-columns: 1fr; }
    .ipa-comparison-layout { grid-template-columns: 1fr; }
    .ipa-snapshot-grid   { grid-template-columns: 1fr; }
    .ipa-tier-grid       { grid-template-columns: 1fr; }
    .ipa-timeline-list   { flex-direction: column; align-items: stretch; }
    .ipa-timeline-track  { display: none; }
    .ipa-timeline-item   { padding-top: 12px; text-align: left; padding-left: 28px; }
    .ipa-timeline-item::before { left: 8px; top: 18px; }
}

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

@media (prefers-reduced-motion: reduce) {
    .ipa-loading::after    { animation: none; }
    .ipa-detail-panel      { animation: none; }
    .ipa-tab-panel.is-active { animation: none; }
    .ipa-gbc-fill          { transition: none; }
    .ipa-gbc-rationale     { animation: none; }
    .ipa-rb-slot           { transition: none; }
    .ipa-sd-circle         { transition: none; }
    .ipa-igf-callout       { animation: none; }
    .ipa-recon-card        { animation: none; }
    .ipa-radar-section     { animation: none; }
}

/* ============================================================
   unit 8 -- igf1 timeline + safety radar (ipa-igf-*, ipa-radar-*)
   ============================================================ */

.ipa-igf-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #a3a3a3);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ipa-igf-swatch {
    display: inline-block;
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: var(--c, #3F3D9D);
    margin-right: 4px;
    vertical-align: middle;
}

.ipa-igf-callout {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(63, 61, 157, 0.08);
    border-left: 3px solid #3F3D9D;
    font-size: 0.85rem;
    color: var(--text-primary, #e5e5e5);
}

[data-theme="light"] .ipa-igf-callout { color: #1a1a1a; background: rgba(63, 61, 157, 0.06); }

.ipa-igf-table {
    width: 100%;
    margin-top: 14px;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ipa-igf-table th,
.ipa-igf-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.ipa-igf-table th {
    font-weight: 700;
    color: var(--ipa-accent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ipa-radar-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px dashed rgba(15, 23, 42, 0.12);
}

.ipa-radar-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--text-primary, #e5e5e5);
}

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

.ipa-radar-legend {
    font-size: 0.8rem;
    color: var(--text-secondary, #a3a3a3);
    margin-bottom: 12px;
}

.ipa-radar-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(220px, 1fr);
    gap: 18px;
    align-items: center;
}

.ipa-radar-svg-wrap { width: 100%; }

.ipa-radar-tip {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 180, 84, 0.08);
    border-left: 3px solid #FFB454;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-secondary, #c8c8c8);
    min-height: 100px;
}

[data-theme="light"] .ipa-radar-tip { color: #1a1a1a; }

[data-axis] { transition: fill 0.2s ease; }
[data-axis]:hover, [data-axis]:focus { fill: #3F3D9D; outline: none; }

/* ============================================================
   unit 9 -- pulse-timing calculator (ipa-ptc-*, ipa-recon-*, ipa-wada-*)
   ============================================================ */

.ipa-ptc-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin-bottom: 14px;
}

.ipa-ptc-caption {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 180, 84, 0.10);
    border-left: 3px solid #FFB454;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary, #e5e5e5);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="light"] .ipa-ptc-caption { color: #1a1a1a; }

.ipa-recon-card {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(63, 61, 157, 0.08), rgba(255, 180, 84, 0.04));
    border: 1px solid rgba(63, 61, 157, 0.18);
    animation: ipa-fade-in 0.3s ease;
}

.ipa-recon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    color: var(--text-primary, #e5e5e5);
}

[data-theme="light"] .ipa-recon-head { color: #1a1a1a; }

.ipa-recon-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(63, 61, 157, 0.18);
    color: #3F3D9D;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ipa-recon-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ipa-recon-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-secondary, #c8c8c8);
}

[data-theme="light"] .ipa-recon-step {
    background: rgba(255, 255, 255, 0.6);
    color: #1a1a1a;
}

.ipa-recon-step strong {
    color: var(--ipa-accent);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.82rem;
}

.ipa-recon-step-n {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3F3D9D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
}

.ipa-recon-foot {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary, #a3a3a3);
    font-style: italic;
}

.ipa-wada-callout {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-left: 4px solid #ef4444;
}

.ipa-wada-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0 10px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.ipa-wada-body {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-primary, #e5e5e5);
}

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

@media (max-width: 600px) {
    .ipa-radar-grid    { grid-template-columns: 1fr; }
    .ipa-ptc-controls  { grid-template-columns: 1fr; }
    .ipa-recon-grid    { grid-template-columns: 1fr; }
}

/* ============================================================
   unit 1 -- gh-booster numeric comparison (.ipa-gbc-*)
   ============================================================ */

.ipa-gbc {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ipa-gbc-header {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: end;
}

.ipa-gbc-header-cells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ipa-gbc-col-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    background: rgba(var(--ipa-primary-rgb), 0.08);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.18);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ipa-gbc-col-header:hover { background: rgba(var(--ipa-primary-rgb), 0.16); }
.ipa-gbc-col-header.is-active {
    background: rgba(var(--ipa-accent-rgb), 0.18);
    border-color: rgba(var(--ipa-accent-rgb), 0.5);
}

.ipa-gbc-col-unit {
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: lowercase;
    color: var(--color-muted, rgba(255, 255, 255, 0.55));
}

.ipa-gbc-col-arrow { font-size: 0.7rem; opacity: 0.7; }

.ipa-gbc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ipa-gbc-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: stretch;
    background: var(--color-bg-card, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 10px;
    transition: border-color 0.15s ease;
}

.ipa-gbc-row.is-expanded { border-color: rgba(var(--ipa-accent-rgb), 0.45); }

.ipa-gbc-label {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding: 4px 6px;
    font: inherit;
    border-radius: 6px;
}

.ipa-gbc-label:hover { background: rgba(var(--ipa-primary-rgb), 0.08); }

.ipa-gbc-swatch {
    width: 12px; height: 12px;
    border-radius: 3px;
    grid-row: 1 / span 2;
}

.ipa-gbc-name { font-weight: 700; font-size: 0.88rem; grid-column: 2; grid-row: 1; }
.ipa-gbc-sub  { font-size: 0.72rem; color: var(--color-muted, rgba(255,255,255,0.6)); grid-column: 2; grid-row: 2; }
.ipa-gbc-chev { grid-column: 3; grid-row: 1 / span 2; font-size: 1.1rem; opacity: 0.7; align-self: center; }

.ipa-gbc-cells {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    align-items: center;
}

.ipa-gbc-cell { padding: 4px 0; }

.ipa-gbc-track {
    position: relative;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.ipa-gbc-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    border-radius: 6px;
    opacity: 0.85;
    transition: width 0.35s ease;
}

.ipa-gbc-value {
    position: relative;
    z-index: 1;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.ipa-gbc-rationale {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 14px;
    padding: 10px 6px 4px;
    margin-top: 6px;
    border-top: 1px dashed rgba(var(--ipa-primary-rgb), 0.28);
    animation: ipa-gbc-fade 0.22s ease;
}

@keyframes ipa-gbc-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.ipa-gbc-rationale-item { font-size: 0.78rem; line-height: 1.5; color: var(--color-muted, rgba(255,255,255,0.78)); }
.ipa-gbc-rationale-item strong { color: var(--text-primary, #fafafa); text-transform: lowercase; }

.ipa-gbc-footer {
    margin-top: 6px;
    padding: 10px 12px;
    background: rgba(var(--ipa-primary-rgb), 0.05);
    border: 1px dashed rgba(var(--ipa-primary-rgb), 0.22);
    border-radius: 8px;
    font-size: 0.74rem;
    line-height: 1.55;
    color: var(--color-muted, rgba(255,255,255,0.66));
}

.ipa-gbc-footer p { margin: 0 0 6px 0; }
.ipa-gbc-footer p:last-child { margin-bottom: 0; }

[data-theme="light"] .ipa-gbc-value { color: #fff; }
[data-theme="light"] .ipa-gbc-track { background: rgba(0,0,0,0.05); }
[data-theme="light"] .ipa-gbc-col-header { color: #1a1a1a; }
[data-theme="light"] .ipa-gbc-row { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ipa-gbc-rationale-item { color: rgba(0,0,0,0.7); }
[data-theme="light"] .ipa-gbc-rationale-item strong { color: #1a1a1a; }

/* ============================================================
   unit 3 -- residue builder (.ipa-rb-*)
   ============================================================ */

.ipa-rb { display: flex; flex-direction: column; gap: 14px; }

.ipa-rb-slots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-items: start;
}

.ipa-rb-slot-wrap { display: flex; flex-direction: column; gap: 6px; }

.ipa-rb-slot {
    position: relative;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px dashed rgba(var(--ipa-primary-rgb), 0.35);
    border-radius: 10px;
    background: rgba(var(--ipa-primary-rgb), 0.05);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

.ipa-rb-slot.is-filled {
    border-style: solid;
    border-color: #34d39e;
    background: rgba(52, 211, 158, 0.12);
}

.ipa-rb-slot.is-incorrect {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    animation: ipa-rb-shake 0.3s ease;
}

@keyframes ipa-rb-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

.ipa-rb-slot-pos {
    font-size: 0.7rem;
    color: var(--color-muted, rgba(255,255,255,0.55));
    margin-bottom: 4px;
}

.ipa-rb-slot-aa {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary, #fafafa);
}

.ipa-rb-slot.is-filled .ipa-rb-slot-aa { color: #34d39e; }

.ipa-rb-slot-sar {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--color-muted, rgba(255,255,255,0.72));
    padding: 8px 10px;
    background: rgba(52, 211, 158, 0.06);
    border-left: 2px solid #34d39e;
    border-radius: 0 6px 6px 0;
}

.ipa-rb-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ipa-rb-palette-label {
    font-size: 0.74rem;
    color: var(--color-muted, rgba(255,255,255,0.6));
}

.ipa-rb-reset {
    background: transparent;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.3);
    color: var(--text-primary, #fafafa);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.74rem;
    cursor: pointer;
}

.ipa-rb-reset:hover { background: rgba(var(--ipa-primary-rgb), 0.12); }

.ipa-rb-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ipa-rb-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    background: rgba(var(--ipa-primary-rgb), 0.1);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.28);
    border-radius: 8px;
    color: var(--text-primary, #fafafa);
    cursor: pointer;
    font: inherit;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.ipa-rb-chip:hover { transform: translateY(-1px); background: rgba(var(--ipa-primary-rgb), 0.2); }
.ipa-rb-chip:disabled,
.ipa-rb-chip.is-placed { opacity: 0.35; cursor: not-allowed; transform: none; }

.ipa-rb-chip--unnatural { border-color: rgba(var(--ipa-accent-rgb), 0.5); background: rgba(var(--ipa-accent-rgb), 0.08); }
.ipa-rb-chip--distractor { border-style: dashed; border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.04); }

.ipa-rb-chip-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 0.82rem; }
.ipa-rb-chip-formula { font-size: 0.66rem; color: var(--color-muted, rgba(255,255,255,0.55)); }

.ipa-rb-hover {
    padding: 8px 12px;
    background: rgba(var(--ipa-accent-rgb), 0.08);
    border: 1px solid rgba(var(--ipa-accent-rgb), 0.35);
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.5;
}

.ipa-rb-hover-formula { color: var(--color-muted, rgba(255,255,255,0.55)); font-size: 0.72rem; }
.ipa-rb-hover-sar    { margin-top: 4px; color: var(--color-muted, rgba(255,255,255,0.72)); }

.ipa-rb-note {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
}
.ipa-rb-note.ok   { background: rgba(52, 211, 158, 0.1); border: 1px solid rgba(52, 211, 158, 0.4); color: #34d39e; }
.ipa-rb-note.warn { background: rgba(255, 180, 84, 0.1); border: 1px solid rgba(255, 180, 84, 0.4); color: #FFB454; }
.ipa-rb-note.err  { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.4); color: #ef4444; }

.ipa-rb-caption {
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.18), rgba(var(--ipa-accent-rgb), 0.12));
    border: 1px solid rgba(var(--ipa-accent-rgb), 0.4);
    border-radius: 10px;
}

.ipa-rb-caption-title { font-weight: 700; color: #34d39e; margin-bottom: 6px; }
.ipa-rb-caption-seq {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #fafafa);
    margin-bottom: 8px;
}
.ipa-rb-caption-body { font-size: 0.82rem; line-height: 1.55; color: var(--color-muted, rgba(255,255,255,0.78)); }

[data-theme="light"] .ipa-rb-slot-aa { color: #1a1a1a; }
[data-theme="light"] .ipa-rb-chip { color: #1a1a1a; }
[data-theme="light"] .ipa-rb-caption-seq { color: #1a1a1a; }
[data-theme="light"] .ipa-rb-slot-sar { color: rgba(0,0,0,0.72); }

/* ============================================================
   unit 3 -- pentapeptide diagram (.ipa-pep-*)
   ============================================================ */

.ipa-pep-diagram {
    background: rgba(var(--ipa-primary-rgb), 0.04);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.18);
    border-radius: 12px;
    padding: 16px;
}

.ipa-pep-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.ipa-pep-res {
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
    background: rgba(var(--ipa-primary-rgb), 0.1);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.28);
    position: relative;
}

.ipa-pep-res--star { border-color: rgba(var(--ipa-accent-rgb), 0.6); background: rgba(var(--ipa-accent-rgb), 0.12); }

.ipa-pep-pos { font-size: 0.66rem; color: var(--color-muted, rgba(255,255,255,0.55)); }
.ipa-pep-aa  { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 0.92rem; margin: 4px 0; }
.ipa-pep-mw  { font-size: 0.66rem; color: var(--color-muted, rgba(255,255,255,0.55)); }
.ipa-pep-tag { font-size: 0.66rem; margin-top: 4px; color: var(--color-muted, rgba(255,255,255,0.7)); line-height: 1.35; }

.ipa-pep-summary {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(var(--ipa-primary-rgb), 0.28);
    font-size: 0.76rem;
    color: var(--color-muted, rgba(255,255,255,0.7));
    flex-wrap: wrap;
    gap: 8px;
}

.ipa-pep-callout {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(var(--ipa-accent-rgb), 0.1);
    border-left: 3px solid var(--ipa-accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ============================================================
   unit 4 -- selectivity dashboard (.ipa-sd-*)
   ============================================================ */

.ipa-sd { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }

.ipa-sd-grid { display: flex; flex-direction: column; gap: 6px; }

.ipa-sd-row {
    display: grid;
    grid-template-columns: 130px repeat(4, 1fr);
    gap: 6px;
    align-items: stretch;
}

.ipa-sd-row--header .ipa-sd-row-header-spacer { background: transparent; }

.ipa-sd-row-header,
.ipa-sd-col-header {
    background: rgba(var(--ipa-primary-rgb), 0.08);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.18);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    text-align: left;
    cursor: pointer;
}

.ipa-sd-row-header:hover,
.ipa-sd-col-header:hover { background: rgba(var(--ipa-primary-rgb), 0.18); }

.ipa-sd-row.is-active .ipa-sd-row-header,
.ipa-sd-col-header.is-active {
    background: rgba(var(--ipa-accent-rgb), 0.2);
    border-color: rgba(var(--ipa-accent-rgb), 0.55);
}

.ipa-sd-col-tag {
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: lowercase;
    margin-top: 2px;
}

.ipa-sd-cell {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ipa-sd-cell:hover { background: rgba(255,255,255,0.04); }
.ipa-sd-cell.is-focused { background: rgba(var(--ipa-accent-rgb), 0.18); outline: 2px solid var(--ipa-accent); }
.ipa-sd-cell.is-dimmed { opacity: 0.3; }

.ipa-sd-circle {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ipa-sd-cell:hover .ipa-sd-circle { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }

.ipa-sd-value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.ipa-sd-panel {
    background: var(--color-bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--color-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    padding: 14px;
    font-size: 0.8rem;
    line-height: 1.55;
}

.ipa-sd-panel--pinned { border-color: rgba(var(--ipa-accent-rgb), 0.45); }
.ipa-sd-panel--empty  { color: var(--color-muted, rgba(255,255,255,0.6)); font-style: italic; }

.ipa-sd-panel-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; color: var(--color-muted, rgba(255,255,255,0.6)); }
.ipa-sd-panel-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: var(--text-primary, #fafafa); }
.ipa-sd-panel-value { font-size: 0.78rem; margin-bottom: 8px; color: var(--color-muted, rgba(255,255,255,0.7)); }
.ipa-sd-panel-body { margin: 6px 0; color: var(--color-muted, rgba(255,255,255,0.78)); }
.ipa-sd-panel-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.76rem; display: flex; flex-direction: column; gap: 4px; }
.ipa-sd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

[data-theme="light"] .ipa-sd-row-header,
[data-theme="light"] .ipa-sd-col-header { color: #1a1a1a; }
[data-theme="light"] .ipa-sd-panel-title { color: #1a1a1a; }

/* ============================================================
   unit 4 -- selectivity scorecard (.ipa-scorecard-*)
   ============================================================ */

.ipa-scorecard {
    background: rgba(var(--ipa-primary-rgb), 0.04);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.18);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ipa-scorecard-row {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    gap: 12px;
    align-items: center;
}

.ipa-scorecard-name { font-weight: 600; font-size: 0.84rem; }

.ipa-scorecard-bar {
    height: 18px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    position: relative;
    overflow: hidden;
}

.ipa-scorecard-fill {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ipa-primary), var(--ipa-accent));
}

.ipa-scorecard-score {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 700;
    text-align: right;
}

.ipa-scorecard-rationale {
    grid-column: 1 / -1;
    font-size: 0.74rem;
    color: var(--color-muted, rgba(255,255,255,0.7));
    padding-left: 132px;
    line-height: 1.45;
}

/* ============================================================
   responsive overrides for new modules
   ============================================================ */

@media (max-width: 720px) {
    .ipa-gbc-header,
    .ipa-gbc-row { grid-template-columns: 1fr; }
    .ipa-gbc-header-cells { grid-template-columns: repeat(2, 1fr); }
    .ipa-gbc-cells { grid-template-columns: repeat(2, 1fr); }
    .ipa-gbc-rationale { grid-template-columns: 1fr; }

    .ipa-rb-slots { grid-template-columns: repeat(2, 1fr); }
    .ipa-pep-row  { grid-template-columns: repeat(2, 1fr); }
    .ipa-sd       { grid-template-columns: 1fr; }
    .ipa-sd-row,
    .ipa-sd-row--header { grid-template-columns: 1fr; }
    .ipa-sd-row-header,
    .ipa-sd-col-header { text-align: center; }
    .ipa-scorecard-row { grid-template-columns: 1fr; }
    .ipa-scorecard-rationale { padding-left: 0; }
}

/* ============================================================
   unit 2 -- GH pulse timeline (ipa-pulse-*)
   ============================================================ */

.ipa-pulse-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 0.82rem;
    color: var(--text-secondary, #a3a3a3);
}

.ipa-pulse-overlay-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.ipa-pulse-overlay-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--ipa-accent);
    cursor: pointer;
}

.ipa-pulse-keyhint {
    font-size: 0.72rem;
    opacity: 0.6;
    font-style: italic;
}

.ipa-pulse-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
    align-items: start;
}

.ipa-pulse-stage { min-width: 0; }

.ipa-pulse-panel {
    background: rgba(63, 61, 157, 0.10);
    border: 1px solid rgba(63, 61, 157, 0.28);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.ipa-pulse-panel-clock {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    color: var(--ipa-accent);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.ipa-pulse-panel-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin-bottom: 10px;
}

.ipa-pulse-panel-amp {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ipa-pulse-panel-amp-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 180, 84, 0.12);
    border-radius: 3px;
    overflow: hidden;
    display: block;
}

.ipa-pulse-panel-amp-fill {
    display: block;
    height: 100%;
    background: var(--ipa-accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ipa-pulse-panel-amp-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--text-secondary, #a3a3a3);
    white-space: nowrap;
}

.ipa-pulse-panel-row { margin-bottom: 10px; }
.ipa-pulse-panel-row:last-child { margin-bottom: 0; }

.ipa-pulse-panel-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ipa-accent);
    font-weight: 700;
    margin-bottom: 4px;
    opacity: 0.85;
}

.ipa-pulse-panel-body {
    color: var(--text-primary, #d4d4d8);
    font-size: 0.86rem;
}

.ipa-pulse-marker { outline: none; }
.ipa-pulse-marker:focus-visible circle:first-child {
    stroke: var(--ipa-accent);
    stroke-width: 2;
}

.ipa-pulse-sleep-overlay[data-on="0"] { display: none; }

[data-theme="light"] .ipa-pulse-panel {
    background: rgba(63, 61, 157, 0.06);
    border-color: rgba(63, 61, 157, 0.22);
}

/* ============================================================
   unit 2 -- circadian dial infographic (ipa-circadian-*)
   ============================================================ */

.ipa-circadian-dial-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
}

.ipa-circadian-dial {
    width: 100%;
    max-width: 340px;
    height: auto;
}

.ipa-dial-pulse {
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease;
    transform-origin: center;
}

.ipa-dial-pulse:hover circle,
.ipa-dial-pulse:focus-visible circle { transform: scale(1.15); }

.ipa-circadian-dial-tooltip {
    min-height: 22px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ipa-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ipa-circadian-dial-tooltip.is-on { opacity: 1; }

.ipa-circadian-dial-caption {
    font-size: 0.78rem;
    color: var(--text-secondary, #a3a3a3);
    text-align: center;
    max-width: 380px;
    margin: 0;
}

/* ============================================================
   unit 5 -- dual-receptor stack (ipa-stack-*)
   ============================================================ */

.ipa-stack-toggles {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ipa-stack-tog {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px solid rgba(63, 61, 157, 0.35);
    background: rgba(63, 61, 157, 0.10);
    color: var(--text-primary, #fff);
    font-family: inherit;
    cursor: pointer;
    min-width: 130px;
    transition: border-color 0.2s, background 0.2s;
}

.ipa-stack-tog:hover { border-color: var(--ipa-accent); }

.ipa-stack-tog.is-active {
    border-color: var(--ipa-accent);
    background: rgba(255, 180, 84, 0.16);
}

.ipa-stack-tog-name {
    font-weight: 700;
    font-size: 0.88rem;
}

.ipa-stack-tog-state {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: var(--ipa-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ipa-stack-cell { outline: none; }
.ipa-stack-cell:focus-visible ellipse:first-child {
    stroke: var(--ipa-accent);
    stroke-width: 2.5;
}

.ipa-stack-dac {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(63, 61, 157, 0.28);
    border-radius: 10px;
    background: rgba(63, 61, 157, 0.08);
}

.ipa-stack-dac-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.ipa-stack-dac-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #a3a3a3);
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

.ipa-stack-dac-readout {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.82rem;
    color: var(--ipa-accent);
    font-weight: 700;
}

.ipa-stack-dac-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ipa-stack-dac-end {
    font-size: 0.72rem;
    color: var(--text-secondary, #a3a3a3);
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ipa-stack-dac-slider { flex: 1; }

.ipa-stack-trace-wrap {
    margin-top: 14px;
    padding: 6px 0;
}

.ipa-stack-output {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 180, 84, 0.28);
    border-radius: 10px;
    background: rgba(255, 180, 84, 0.06);
}

.ipa-stack-output-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.ipa-stack-output-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #a3a3a3);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ipa-stack-output-val {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--ipa-accent);
}

.ipa-stack-output-track {
    position: relative;
    height: 12px;
    background: rgba(255, 180, 84, 0.08);
    border-radius: 6px;
    overflow: visible;
    margin-bottom: 8px;
}

.ipa-stack-output-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 180, 84, 0.6), var(--ipa-accent));
    border-radius: 6px;
    transition: width 0.35s ease;
}

.ipa-stack-output-tick {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.4);
    transform: translateX(-50%);
}

.ipa-stack-output-foot {
    font-size: 0.72rem;
    color: var(--text-secondary, #a3a3a3);
    text-align: center;
}

[data-theme="light"] .ipa-stack-tog { background: rgba(63, 61, 157, 0.05); }
[data-theme="light"] .ipa-stack-tog.is-active { background: rgba(255, 180, 84, 0.14); }
[data-theme="light"] .ipa-stack-dac { background: rgba(63, 61, 157, 0.04); }
[data-theme="light"] .ipa-stack-output { background: rgba(255, 180, 84, 0.05); }
[data-theme="light"] .ipa-stack-output-tick { background: rgba(15, 23, 42, 0.25); }

@keyframes ipa-stack-flow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -16; }
}

/* ============================================================
   unit 5 -- stack-timing chart (ipa-stack-timing-*)
   ============================================================ */

.ipa-stack-timing-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
}

.ipa-stack-timing-bar {
    position: relative;
    width: 100%;
    height: 64px;
    background: rgba(63, 61, 157, 0.08);
    border: 1px solid rgba(63, 61, 157, 0.22);
    border-radius: 10px;
    overflow: visible;
}

.ipa-stack-timing-zone {
    position: absolute;
    top: 4px;
    bottom: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: filter 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.ipa-stack-timing-zone:hover,
.ipa-stack-timing-zone:focus-visible {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.ipa-stack-timing-zone-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    padding: 0 6px;
}

.ipa-stack-timing-good {
    background: linear-gradient(180deg, rgba(52, 211, 158, 0.65), rgba(52, 211, 158, 0.45));
    border: 1px solid rgba(52, 211, 158, 0.85);
}

.ipa-stack-timing-warn {
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.55), rgba(239, 68, 68, 0.38));
    border: 1px solid rgba(239, 68, 68, 0.8);
}

.ipa-stack-timing-prime {
    background: linear-gradient(180deg, rgba(255, 180, 84, 0.85), rgba(255, 180, 84, 0.55));
    border: 1.5px solid #FFB454;
    box-shadow: 0 0 0 2px rgba(255, 180, 84, 0.18);
}

.ipa-stack-timing-axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    pointer-events: none;
}

.ipa-stack-timing-axis span {
    position: absolute;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: var(--text-secondary, #a3a3a3);
    top: 2px;
}

.ipa-stack-timing-tooltip {
    min-height: 38px;
    padding: 8px 12px;
    background: rgba(63, 61, 157, 0.10);
    border: 1px solid rgba(63, 61, 157, 0.28);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-primary, #d4d4d8);
    line-height: 1.45;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ipa-stack-timing-tooltip.is-on { opacity: 1; }

.ipa-stack-timing-caption {
    font-size: 0.76rem;
    color: var(--text-secondary, #a3a3a3);
    text-align: center;
    margin: 0;
}

[data-theme="light"] .ipa-stack-timing-bar { background: rgba(63, 61, 157, 0.04); }
[data-theme="light"] .ipa-stack-timing-tooltip { background: rgba(63, 61, 157, 0.06); }

@media (max-width: 600px) {
    .ipa-pulse-layout { grid-template-columns: 1fr; }
    .ipa-stack-timing-zone-label { font-size: 0.6rem; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
    .ipa-pulse-panel-amp-fill,
    .ipa-stack-output-fill,
    .ipa-stack-timing-zone,
    .ipa-dial-pulse { transition: none; }
    .ipa-stack-trace path,
    .ipa-stack-svg line { animation: none !important; }
}

/* ============================================================
   unit 6 -- trial timeline + evidence-tier ladder
   (agent C: clinical-evidence.html)
   ============================================================ */

.ipa-trial-timeline-wrap {
    position: relative;
    padding: 18px 4px 8px;
}

.ipa-trial-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--ipa-primary-rgb), 0.4), rgba(var(--ipa-accent-rgb), 0.4));
    border-radius: 2px;
}

.ipa-trial-nodes {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.ipa-trial-node {
    flex: 1 1 110px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    outline: none;
}

.ipa-trial-node:hover,
.ipa-trial-node:focus-visible {
    background: rgba(var(--ipa-primary-rgb), 0.06);
    border-color: rgba(var(--ipa-primary-rgb), 0.25);
}

.ipa-trial-node.is-active {
    background: rgba(var(--ipa-primary-rgb), 0.12);
    border-color: rgba(var(--ipa-primary-rgb), 0.45);
    transform: translateY(-2px);
}

.ipa-trial-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.ipa-trial-node--mechanism .ipa-trial-dot { background: #34d39e; }
.ipa-trial-node--ambiguous .ipa-trial-dot { background: #FFB454; }
.ipa-trial-node--negative .ipa-trial-dot  { background: #ef4444; }

.ipa-trial-year {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ipa-primary);
}

[data-theme="dark"] .ipa-trial-year { color: var(--ipa-accent); }

.ipa-trial-mini {
    font-size: 0.7rem;
    color: rgba(15, 23, 42, 0.6);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

[data-theme="dark"] .ipa-trial-mini { color: rgba(255, 255, 255, 0.6); }

.ipa-trial-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 4px 4px;
    font-size: 0.74rem;
    color: rgba(15, 23, 42, 0.7);
}

[data-theme="dark"] .ipa-trial-legend { color: rgba(255, 255, 255, 0.7); }

.ipa-trial-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ipa-trial-legend .ipa-trial-dot {
    width: 10px;
    height: 10px;
    border-width: 1px;
}

.ipa-trial-panel {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.22);
    background: rgba(var(--ipa-primary-rgb), 0.05);
    animation: ipaTrialFadeIn 220ms ease;
    border-left-width: 4px;
}

.ipa-trial-panel--mechanism { border-left-color: #34d39e; }
.ipa-trial-panel--ambiguous { border-left-color: #FFB454; }
.ipa-trial-panel--negative  { border-left-color: #ef4444; }

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

.ipa-trial-panel-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ipa-trial-panel-year {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ipa-primary);
}

[data-theme="dark"] .ipa-trial-panel-year { color: var(--ipa-accent); }

.ipa-trial-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.ipa-trial-pin {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    background: rgba(var(--ipa-accent-rgb), 0.2);
    color: var(--ipa-accent-dark);
}

.ipa-trial-panel-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 6px 14px;
    margin: 0 0 10px;
    font-size: 0.85rem;
    line-height: 1.45;
}

.ipa-trial-panel-grid dt {
    font-weight: 600;
    color: rgba(15, 23, 42, 0.7);
    text-transform: lowercase;
}

[data-theme="dark"] .ipa-trial-panel-grid dt { color: rgba(255, 255, 255, 0.7); }

.ipa-trial-panel-grid dd { margin: 0; }

.ipa-trial-callout {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(var(--ipa-accent-rgb), 0.12);
    border-left: 3px solid var(--ipa-accent);
    font-size: 0.85rem;
    line-height: 1.5;
}

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

.ipa-ladder-rung {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.18);
    background: rgba(var(--ipa-primary-rgb), 0.04);
}

.ipa-ladder-rung--reg {
    border-style: dashed;
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.3);
}

.ipa-ladder-rung-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ipa-ladder-rung-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ipa-primary);
}

[data-theme="dark"] .ipa-ladder-rung-label { color: var(--ipa-accent); }

.ipa-ladder-rung-sub {
    font-size: 0.75rem;
    color: rgba(15, 23, 42, 0.65);
}

[data-theme="dark"] .ipa-ladder-rung-sub { color: rgba(255, 255, 255, 0.65); }

.ipa-ladder-rung-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ipa-ladder-chip {
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(var(--ipa-primary-rgb), 0.08);
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.3);
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    transition: background 140ms ease, border-color 140ms ease;
}

.ipa-ladder-chip:hover,
.ipa-ladder-chip:focus-visible {
    background: rgba(var(--ipa-primary-rgb), 0.18);
}

.ipa-ladder-chip.ipa-trial-node--mechanism { border-left: 4px solid #34d39e; }
.ipa-ladder-chip.ipa-trial-node--ambiguous { border-left: 4px solid #FFB454; }
.ipa-ladder-chip.ipa-trial-node--negative  { border-left: 4px solid #ef4444; }

.ipa-ladder-chip.is-active {
    background: rgba(var(--ipa-accent-rgb), 0.25);
    border-color: var(--ipa-accent);
}

.ipa-ladder-empty {
    font-size: 0.78rem;
    color: rgba(15, 23, 42, 0.5);
    font-style: italic;
}

[data-theme="dark"] .ipa-ladder-empty { color: rgba(255, 255, 255, 0.5); }

.ipa-ladder-punchline {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(var(--ipa-accent-rgb), 0.1);
    border-left: 3px solid var(--ipa-accent);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* ============================================================
   unit 7 -- claim-vs-evidence dashboard
   (agent C: clinical-applications.html)
   ============================================================ */

.ipa-claim-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid rgba(var(--ipa-primary-rgb), 0.25);
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ipa-claim-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    border-bottom: 3px solid transparent;
    transition: background 140ms ease, border-color 140ms ease;
}

.ipa-claim-tab:hover,
.ipa-claim-tab:focus-visible {
    background: rgba(var(--ipa-primary-rgb), 0.08);
}

.ipa-claim-tab.is-active {
    border-bottom-color: var(--ipa-accent);
    background: rgba(var(--ipa-accent-rgb), 0.1);
}

.ipa-claim-gauge-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ipa-gauge-label {
    display: flex;
    flex-direction: column;
}

.ipa-gauge-caption {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(15, 23, 42, 0.6);
}

[data-theme="dark"] .ipa-gauge-caption { color: rgba(255, 255, 255, 0.6); }

.ipa-gauge-verdict {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ipa-primary);
}

[data-theme="dark"] .ipa-gauge-verdict { color: var(--ipa-accent); }

.ipa-gauge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.3);
    background: rgba(var(--ipa-primary-rgb), 0.06);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: background 140ms ease;
}

.ipa-gauge:hover,
.ipa-gauge:focus-visible {
    background: rgba(var(--ipa-primary-rgb), 0.14);
}

.ipa-gauge-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ipa-accent-dark);
}

[data-theme="dark"] .ipa-gauge-num { color: var(--ipa-accent); }

.ipa-gauge-out-of {
    font-size: 0.85rem;
    color: rgba(15, 23, 42, 0.55);
}

[data-theme="dark"] .ipa-gauge-out-of { color: rgba(255, 255, 255, 0.55); }

.ipa-gauge-track {
    display: inline-flex;
    gap: 2px;
}

.ipa-gauge-seg {
    display: inline-block;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: rgba(var(--ipa-primary-rgb), 0.18);
}

.ipa-gauge-seg.is-filled { background: var(--ipa-accent); }

.ipa-gauge-toggle {
    font-size: 1.1rem;
    line-height: 1;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--ipa-accent-rgb), 0.2);
}

.ipa-gauge-method {
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(var(--ipa-accent-rgb), 0.1);
    border-left: 3px solid var(--ipa-accent);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.ipa-claim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 12px;
}

.ipa-claim-col {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.2);
}

.ipa-claim-col--claim {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.25);
}

.ipa-claim-col--evidence {
    background: rgba(52, 211, 158, 0.05);
    border-color: rgba(52, 211, 158, 0.25);
}

.ipa-claim-col-title {
    margin: 0 0 10px;
    font-size: 0.85rem;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}

.ipa-claim-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ipa-claim-row,
.ipa-evidence-row {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 8px;
    align-items: start;
}

.ipa-claim-pill,
.ipa-evidence-pill {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 100px;
    font-weight: 700;
    text-align: center;
    height: fit-content;
}

.ipa-claim-pill {
    background: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

[data-theme="dark"] .ipa-claim-pill { color: #fca5a5; }

.ipa-evidence-pill {
    background: rgba(52, 211, 158, 0.2);
    color: #047857;
}

[data-theme="dark"] .ipa-evidence-pill { color: #6ee7b7; }

.ipa-claim-head,
.ipa-evidence-head {
    margin: 0 0 4px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.ipa-claim-detail,
.ipa-evidence-detail {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(15, 23, 42, 0.7);
}

[data-theme="dark"] .ipa-claim-detail,
[data-theme="dark"] .ipa-evidence-detail { color: rgba(255, 255, 255, 0.7); }

.ipa-needed {
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.25);
    border-radius: 10px;
    padding: 0;
    background: rgba(var(--ipa-primary-rgb), 0.04);
}

.ipa-needed-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ipa-needed-summary::-webkit-details-marker { display: none; }

.ipa-needed-chev {
    font-size: 1.1rem;
    line-height: 1;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--ipa-accent-rgb), 0.2);
}

.ipa-needed[open] .ipa-needed-chev::before { content: '−'; }
.ipa-needed:not([open]) .ipa-needed-chev::before { content: '+'; }

.ipa-needed-list {
    list-style: disc;
    padding: 0 14px 14px 36px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
}

.ipa-needed-list li { margin-bottom: 6px; }

.ipa-axis-table {
    display: grid;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.25);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--ipa-primary-rgb), 0.03);
}

.ipa-axis-row {
    display: grid;
    grid-template-columns: 160px repeat(3, 1fr);
    border-bottom: 1px solid rgba(var(--ipa-primary-rgb), 0.12);
}

.ipa-axis-row:last-child { border-bottom: none; }

.ipa-axis-cell {
    padding: 12px 14px;
    font-size: 0.85rem;
    line-height: 1.45;
    border-right: 1px solid rgba(var(--ipa-primary-rgb), 0.08);
}

.ipa-axis-cell:last-child { border-right: none; }

.ipa-axis-row--head .ipa-axis-cell {
    font-weight: 700;
    font-size: 0.9rem;
    background: rgba(var(--ipa-primary-rgb), 0.08);
}

.ipa-axis-cell--label {
    font-weight: 600;
    background: rgba(var(--ipa-primary-rgb), 0.06);
    text-transform: lowercase;
}

.ipa-axis-cell--good { border-top: 3px solid #34d39e; }
.ipa-axis-cell--mid  { border-top: 3px solid #FFB454; }
.ipa-axis-cell--bad  { border-top: 3px solid #ef4444; }

/* ============================================================
   unit 10 -- jurisdictional map + status box
   (agent C: regulatory-landscape.html)
   ============================================================ */

.ipa-status-box {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--ipa-primary-rgb), 0.1), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-left: 5px solid #ef4444;
}

.ipa-status-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border: 2px dashed rgba(239, 68, 68, 0.55);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    transform: rotate(-3deg);
}

[data-theme="dark"] .ipa-status-stamp { color: #fca5a5; }

.ipa-status-stamp-month {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.ipa-status-stamp-year {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 2px;
}

.ipa-status-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ipa-primary);
}

[data-theme="dark"] .ipa-status-title { color: var(--ipa-accent); }

.ipa-status-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
}

.ipa-juris-svg {
    width: 100%;
    height: auto;
    max-height: 360px;
    border-radius: 12px;
    background: rgba(var(--ipa-primary-rgb), 0.04);
}

.ipa-juris-bg { fill: rgba(var(--ipa-primary-rgb), 0.04); }

.ipa-juris-title {
    font-size: 11px;
    font-weight: 600;
    fill: rgba(15, 23, 42, 0.5);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}

[data-theme="dark"] .ipa-juris-title { fill: rgba(255, 255, 255, 0.5); }

.ipa-region { cursor: pointer; }

.ipa-region ellipse {
    stroke-width: 2;
    transition: stroke-width 140ms ease;
}

.ipa-region--approved ellipse  { fill: rgba(52, 211, 158, 0.2); stroke: #34d39e; }
.ipa-region--research ellipse  { fill: rgba(255, 180, 84, 0.2);  stroke: #FFB454; }
.ipa-region--prohibited ellipse { fill: rgba(239, 68, 68, 0.2);  stroke: #ef4444; }

.ipa-region:hover ellipse,
.ipa-region:focus ellipse { stroke-width: 3.5; }

.ipa-region.is-active ellipse {
    stroke-width: 4;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}

.ipa-region-name {
    text-anchor: middle;
    font-size: 14px;
    font-weight: 700;
    fill: var(--ipa-primary);
}

[data-theme="dark"] .ipa-region-name { fill: #fff; }

.ipa-region-badge {
    text-anchor: middle;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    fill: rgba(15, 23, 42, 0.7);
}

[data-theme="dark"] .ipa-region-badge { fill: rgba(255, 255, 255, 0.75); }

.ipa-region:focus { outline: none; }

.ipa-juris-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 10px 4px;
    font-size: 0.78rem;
}

.ipa-juris-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ipa-juris-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid;
}

.ipa-juris-swatch.ipa-region--approved   { background: rgba(52, 211, 158, 0.2); border-color: #34d39e; }
.ipa-juris-swatch.ipa-region--research   { background: rgba(255, 180, 84, 0.2);  border-color: #FFB454; }
.ipa-juris-swatch.ipa-region--prohibited { background: rgba(239, 68, 68, 0.2);   border-color: #ef4444; }

.ipa-juris-panel {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.25);
    background: rgba(var(--ipa-primary-rgb), 0.05);
    border-left-width: 4px;
    animation: ipaTrialFadeIn 220ms ease;
}

.ipa-juris-panel.ipa-region--approved   { border-left-color: #34d39e; }
.ipa-juris-panel.ipa-region--research   { border-left-color: #FFB454; }
.ipa-juris-panel.ipa-region--prohibited { border-left-color: #ef4444; }

.ipa-juris-panel-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.ipa-juris-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.ipa-juris-panel-status {
    font-size: 0.78rem;
    padding: 2px 10px;
    border-radius: 100px;
    background: rgba(var(--ipa-accent-rgb), 0.2);
    color: var(--ipa-accent-dark);
    font-weight: 600;
}

.ipa-juris-panel-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.ipa-juris-panel-grid dt {
    font-weight: 600;
    color: rgba(15, 23, 42, 0.65);
    text-transform: lowercase;
}

[data-theme="dark"] .ipa-juris-panel-grid dt { color: rgba(255, 255, 255, 0.65); }

.ipa-juris-panel-grid dd { margin: 0; }

.ipa-datestrip-wrap {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--ipa-primary-rgb), 0.18);
}

.ipa-datestrip-title {
    margin: 0 0 10px;
    font-size: 0.85rem;
    text-transform: lowercase;
    font-weight: 700;
    color: var(--ipa-primary);
    letter-spacing: 0.03em;
}

[data-theme="dark"] .ipa-datestrip-title { color: var(--ipa-accent); }

.ipa-datestrip {
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.ipa-datestrip-item {
    flex: 0 0 auto;
    min-width: 180px;
    max-width: 220px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--ipa-primary-rgb), 0.22);
    border-left: 3px solid var(--ipa-accent);
    background: rgba(var(--ipa-primary-rgb), 0.04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ipa-datestrip-year {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ipa-primary);
}

[data-theme="dark"] .ipa-datestrip-year { color: var(--ipa-accent); }

.ipa-datestrip-label {
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(15, 23, 42, 0.75);
}

[data-theme="dark"] .ipa-datestrip-label { color: rgba(255, 255, 255, 0.75); }

/* mobile collapses for agent C units */

@media (max-width: 600px) {
    .ipa-trial-nodes      { flex-direction: column; gap: 6px; }
    .ipa-trial-track      { display: none; }
    .ipa-trial-node       { flex-direction: row; justify-content: flex-start; gap: 10px; }
    .ipa-trial-panel-grid { grid-template-columns: 1fr; }
    .ipa-ladder-rung      { grid-template-columns: 1fr; }
    .ipa-claim-grid       { grid-template-columns: 1fr; }
    .ipa-axis-row         { grid-template-columns: 1fr 1fr; }
    .ipa-axis-row--head   { display: none; }
    .ipa-axis-cell--label { grid-column: 1 / -1; background: rgba(var(--ipa-primary-rgb), 0.12); }
    .ipa-status-box       { grid-template-columns: 1fr; text-align: center; }
    .ipa-status-stamp     { justify-self: center; transform: none; }
    .ipa-juris-panel-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ipa-trial-panel,
    .ipa-juris-panel { animation: none; }
    .ipa-trial-node,
    .ipa-region,
    .ipa-claim-tab,
    .ipa-ladder-chip,
    .ipa-gauge { transition: none; }
}