/* ============================================================
   CAV PATHOLOGY · Edema: Mechanisms and Causes
   In-SPA topic page styles. Scoped to `.cpa-edema-topic` so it
   never touches anything outside this view.
   Extends tokens from styles.css and the CAV physiology stylesheet.
   ============================================================ */

.cpa-edema-topic {
    --cpa-pc:    #dc2626;
    --cpa-pc-soft: rgba(220,38,38,0.10);
    --cpa-onc:   #7c3aed;
    --cpa-onc-soft: rgba(124,58,237,0.10);
    --cpa-kf:    #ec4899;
    --cpa-kf-soft: rgba(236,72,153,0.10);
    --cpa-lymph: #0d9488;
    --cpa-lymph-soft: rgba(13,148,136,0.12);
    --cpa-na:    #d97706;
    --cpa-na-soft: rgba(217,119,6,0.12);

    display: grid;
    gap: 18px;
}

.cpa-edema-topic .cpa-section {
    scroll-margin-top: 24px;
}

.cpa-anchor-stub {
    position: relative;
    top: -120px;
    height: 0;
    visibility: hidden;
}

/* ---------- Prereq button ---------- */
.cpa-prereq-row {
    margin-top: 14px;
    display: grid;
}

.cpa-prereq-btn {
    display: grid;
    gap: 4px;
    padding: 16px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(240,247,255,0.96), rgba(255,255,255,0.92));
    border: 1px solid rgba(10,132,255,0.16);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cpa-prereq-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(10,132,255,0.12);
    border-color: rgba(10,132,255,0.32);
}

.cpa-prereq-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.cpa-prereq-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--accent-strong);
}

.cpa-prereq-sub {
    font-size: 13px;
    color: var(--muted-strong);
    line-height: 1.5;
}

/* ============================================================
   Hide the shared topic-workspace meta pills only when the
   Edema topic page is the visible content. They duplicate the
   breadcrumb; other topic pages keep them.
   ============================================================ */
.topic-workspace-page:has(#cavEdemaTopicContent:not([hidden])) .topic-detail-meta {
    display: none;
}

/* ============================================================
   Terminology dropdown — collapsible block, pill cards inside
   ============================================================ */
.cpa-terms {
    margin-top: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--line);
    box-shadow: 0 12px 26px rgba(15,23,42,0.05);
    overflow: hidden;
}

.cpa-terms-summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transition: background 0.2s ease;
}

.cpa-terms-summary::-webkit-details-marker { display: none; }

.cpa-terms-summary:hover {
    background: rgba(248,250,252,0.92);
}

.cpa-terms-summary-text {
    display: grid;
    gap: 4px;
}

.cpa-terms-summary-text .section-label {
    color: var(--accent-strong);
}

.cpa-terms-summary-text strong {
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--text);
}

.cpa-terms-summary-sub {
    font-size: 12px;
    color: var(--muted);
}

.cpa-terms-chevron {
    flex: 0 0 auto;
    font-size: 22px;
    color: var(--muted-strong);
    transition: transform 0.25s ease;
}

.cpa-terms[open] .cpa-terms-chevron {
    transform: rotate(180deg);
}

.cpa-terms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 0 22px 22px;
    animation: cpa-terms-fade 0.25s ease;
}

@keyframes cpa-terms-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pill term card — collapsed state mirrors CAV's .cav-pressure-def
   compact rhythm; expanded state reveals body copy and a Classic
   finding line. */
.cpa-term-card {
    position: relative;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96));
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 8px 18px rgba(15,23,42,0.05);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
    display: grid;
    gap: 6px;
    outline: 0;
}

.cpa-term-card:hover,
.cpa-term-card:focus-visible,
.cpa-term-card.is-open {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(15,23,42,0.10);
    border-color: rgba(10,132,255,0.32);
}

.cpa-term-card h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: var(--text);
}

.cpa-term-short {
    margin: 0;
    color: var(--muted-strong);
    font-size: 13px;
    line-height: 1.45;
}

.cpa-term-expand {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease, margin 0.2s ease;
    display: grid;
    gap: 6px;
}

.cpa-term-card:hover .cpa-term-expand,
.cpa-term-card:focus-visible .cpa-term-expand,
.cpa-term-card.is-open .cpa-term-expand {
    max-height: 260px;
    opacity: 1;
    margin-top: 4px;
}

.cpa-term-expand p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
}

.cpa-term-classic {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.cpa-term-classic em {
    font-style: italic;
    font-weight: 800;
    margin-right: 4px;
}

/* ============================================================
   Effusion locator — compact silhouette + sticky detail panel
   ============================================================ */
.cpa-locator {
    margin-top: 18px;
    display: grid;
    gap: 14px;
}

.cpa-locator-head {
    display: grid;
    gap: 4px;
}

.cpa-locator-h {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.03em;
    color: var(--text);
}

.cpa-locator-sub {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    line-height: 1.5;
}

.cpa-locator-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: start;
}

.cpa-locator-stage {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248,250,252,0.96), rgba(255,255,255,0.94));
    border: 1px solid var(--line);
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 12px;
}

/* The marker percentages are relative to the image, so the markers
   must live inside a wrapper that is sized to match the image
   exactly — not the stage card (which is wider). */
.cpa-locator-imgwrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 420px;
    line-height: 0;
}

.cpa-locator-img {
    display: block;
    width: 100%;
    max-height: 560px;
    height: auto;
    object-fit: contain;
}

.cpa-locator-marker {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    background: transparent;
    border: 1.5px dashed rgba(220,38,38,0.55);
    box-shadow: 0 0 0 0 rgba(220,38,38,0.4);
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
    animation: cpa-marker-pulse 2.4s ease-in-out infinite;
}

@keyframes cpa-marker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

.cpa-locator-marker:hover,
.cpa-locator-marker:focus-visible,
.cpa-locator-marker.is-active {
    outline: 0;
    animation: none;
    border: 2px solid rgba(220,38,38,0.85);
    background: rgba(220,38,38,0.12);
    box-shadow: 0 0 0 3px rgba(220,38,38,0.22), 0 0 12px rgba(220,38,38,0.5);
    transform: translate(-50%,-50%) scale(1.12);
}

.cpa-locator-tooltip {
    position: absolute;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(15,23,42,0.95);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity 0.18s ease;
    z-index: 4;
    white-space: nowrap;
}

.cpa-locator-tooltip.is-visible { opacity: 1; }

/* Sticky / persistent detail panel */
.cpa-locator-card {
    padding: 20px 22px;
    border-radius: 20px;
    background: rgba(255,255,255,0.98);
    border: 1px solid var(--line);
    box-shadow: 0 16px 28px rgba(15,23,42,0.06);
    position: sticky;
    top: 100px;
    min-height: 280px;
    transition: border-color 0.25s ease;
}

.cpa-locator-card .section-label {
    color: var(--accent-strong);
}

.cpa-locator-card h4 {
    margin: 6px 0 8px;
    font-size: 22px;
    letter-spacing: -0.03em;
    color: var(--text);
}

.cpa-locator-card-default p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 14px;
    line-height: 1.55;
}

.cpa-locator-pill {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cpa-locator-alt {
    margin: -4px 0 8px !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-style: italic;
    line-height: 1.4 !important;
}

.cpa-locator-alt:empty { display: none; }

.cpa-locator-def {
    margin: 0 0 12px !important;
    color: var(--text) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.cpa-locator-line {
    margin: 0 0 6px !important;
    color: var(--text) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.cpa-locator-line strong {
    color: var(--muted-strong);
    font-weight: 800;
    margin-right: 4px;
}

/* Embedded chest zoom inside the detail panel — floats right of the
   text so the surrounding lines wrap around it. Sized to hug the
   image so there's no empty rectangular box. */
.cpa-locator-zoom {
    float: right;
    width: 200px;
    margin: 0 0 10px 16px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 14px rgba(15,23,42,0.05);
}

.cpa-locator-zoom-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-image: url("assets/chest-effusions-zoom.png");
    background-repeat: no-repeat;
    background-size: 170% auto;
    background-position: 50% 60%;
    transition: background-position 0.3s ease, background-size 0.3s ease;
}

.cpa-locator-zoom-frame[data-cpa-zoom-region="pericardial"] {
    background-position: 48% 65%;
    background-size: 180% auto;
}

.cpa-locator-zoom-frame[data-cpa-zoom-region="pleural"] {
    background-position: 72% 62%;
    background-size: 180% auto;
}

.cpa-locator-zoom-caption {
    margin: 0 !important;
    padding: 7px 10px;
    color: var(--muted-strong) !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    border-top: 1px solid var(--line);
    background: rgba(248,250,252,0.92);
}

/* NBME clue clears the floated zoom so it never sits beside the image. */
.cpa-locator-clue {
    clear: both;
}

/* Mini NBME-trap callout inside the detail panel */
.cpa-locator-clue {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(254,243,199,0.55), rgba(255,255,255,0.92));
    border: 1px solid rgba(245,158,11,0.32);
}

.cpa-locator-clue-icon {
    color: #b45309;
    font-size: 16px;
    line-height: 1.4;
}

.cpa-locator-clue-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #92400e;
}

.cpa-locator-clue p {
    margin: 2px 0 0 !important;
    color: var(--text) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Subtle ring on the silhouette card when populated */
.cpa-locator-card[data-cpa-active-region]:not([data-cpa-active-region=""]) {
    border-color: rgba(220,38,38,0.32);
}

/* ---------- Trap callout (re-uses CAV trap shell) ---------- */
.cpa-edema-topic .cpa-trap {
    margin-top: 18px !important;
    padding: 20px 22px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(254,243,199,0.45), rgba(255,255,255,0.92)) !important;
    border: 1px solid rgba(245,158,11,0.32) !important;
    display: grid !important;
    gap: 8px !important;
}

.cpa-edema-topic .cpa-trap h4 {
    margin: 4px 0 4px;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--text);
}

.cpa-edema-topic .cpa-trap p {
    margin: 0;
    color: var(--muted-strong);
    font-size: 14px;
    line-height: 1.55;
}

/* ============================================================
   SECTION 2 · Transudate vs. Exudate
   ============================================================ */
/* Section 2 orientation paragraph — bumped weight for the strong/em pieces */
.cpa-te-orient {
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: var(--text) !important;
}

.cpa-te-orient strong {
    color: var(--text);
    font-weight: 800;
}

.cpa-te-orient em {
    font-style: italic;
    color: var(--accent-strong);
    font-weight: 700;
}

/* Particle legend strip — small inline key for the animations */
.cpa-te-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 12px 0 -2px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(248,250,252,0.92);
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted-strong);
    width: fit-content;
}

.cpa-te-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.cpa-te-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cpa-te-legend-dot.is-water   { background: #60a5fa; }
.cpa-te-legend-dot.is-protein { background: #7c3aed; }
.cpa-te-legend-dot.is-cell {
    background: #ef4444;
    box-shadow:
        -4px -2px 0 -2px #ef4444,
         4px -2px 0 -2px #ef4444,
         0    4px 0 -2px #ef4444;
}

.cpa-te-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 12px;
}

.cpa-te-panel {
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--line);
    display: grid;
    gap: 12px;
}

.cpa-te-panel--trans {
    background: linear-gradient(180deg, rgba(240,247,255,0.85), rgba(255,255,255,0.96));
    border-color: rgba(10,132,255,0.2);
}

.cpa-te-panel--exu {
    background: linear-gradient(180deg, rgba(254,242,242,0.85), rgba(255,255,255,0.96));
    border-color: rgba(220,38,38,0.2);
}

.cpa-te-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cpa-te-panel h4 {
    margin: 0;
    font-size: 19px;
    letter-spacing: -0.03em;
    color: var(--text);
}

.cpa-te-pill {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cpa-te-pill.is-trans { background: rgba(10,132,255,0.14); color: var(--accent-strong); }
.cpa-te-pill.is-exu   { background: rgba(220,38,38,0.14); color: #b91c1c; }

.cpa-te-stage {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(248,250,252,0.92);
    border: 1px solid var(--line);
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

/* Image is centered at ~66% of the stage so the particles have buffer
   space around the capillary to drift into and fade. The SVG overlay
   stays at full stage size so it can host particles flowing into that
   buffer zone. */
.cpa-te-stage img {
    position: absolute;
    inset: 17%;
    width: auto;
    height: auto;
    max-width: 66%;
    max-height: 66%;
    margin: auto;
    object-fit: contain;
}

.cpa-te-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cpa-te-tag {
    position: absolute;
    left: var(--tx);
    top: var(--ty);
    padding: 3px 7px;
    border-radius: 7px;
    background: rgba(15,23,42,0.78);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 3;
}

/* ============================================================
   PARTICLE ANIMATION SYSTEM (Section 2)
   ============================================================ */

/* Slim outward "pressure" arrows on the wall — pulse subtly. */
.cpa-te-arrow {
    transform-origin: center;
    transform-box: fill-box;
    animation: cpa-arrow-pulse 3.6s ease-in-out infinite;
    opacity: 0.7;
}

.cpa-te-arrow:nth-of-type(2) { animation-delay: -0.9s; }
.cpa-te-arrow:nth-of-type(3) { animation-delay: -1.8s; }
.cpa-te-arrow:nth-of-type(4) { animation-delay: -2.7s; }

.cpa-te-arrow.is-exu {
    animation-name: cpa-arrow-pulse-exu;
    opacity: 0.85;
}

@keyframes cpa-arrow-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.55; }
    50%      { transform: scale(1.05); opacity: 0.85; }
}

@keyframes cpa-arrow-pulse-exu {
    0%, 100% { transform: scale(1);    opacity: 0.6; }
    50%      { transform: scale(1.08); opacity: 1;   }
}

/* Particles — JS sets --sx, --sy, --ex, --ey, --dur per element. */
.cpa-te-particle {
    transform: translate(var(--sx), var(--sy));
    opacity: 0;
    animation: cpa-particle-flow var(--dur, 4s) linear forwards;
    transform-box: fill-box;
}

@keyframes cpa-particle-flow {
    0%   { transform: translate(var(--sx), var(--sy)); opacity: 0; }
    12%  { opacity: 1; }
    78%  { opacity: 0.85; }
    100% { transform: translate(var(--ex), var(--ey)); opacity: 0; }
}

/* Bouncing intra-luminal protein (transudate side — never escapes) */
.cpa-te-bounce {
    transform-origin: center;
    transform-box: fill-box;
    animation: cpa-bounce var(--dur, 6s) ease-in-out infinite alternate;
    opacity: 0.85;
}

@keyframes cpa-bounce {
    from { transform: translate(var(--sx), var(--sy)); }
    to   { transform: translate(var(--ex), var(--ey)); }
}

/* Inflammatory mediator labels (exudate side) */
.cpa-te-mediator {
    font-size: 14px;
    font-weight: 800;
    fill: #be185d;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: cpa-mediator-fade 1.6s ease-in-out forwards;
}

@keyframes cpa-mediator-fade {
    0%, 100% { opacity: 0; transform: translateY(0); }
    20%, 70% { opacity: 1; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .cpa-te-arrow,
    .cpa-te-arrow.is-exu {
        animation: none;
        opacity: 0.7;
    }
    .cpa-te-particle,
    .cpa-te-bounce {
        animation-duration: calc(var(--dur, 4s) * 2);
    }
}

.cpa-te-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.cpa-te-facts li {
    display: flex;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted-strong);
}

.cpa-te-facts li strong {
    color: var(--text);
    font-weight: 800;
}

/* Light's reference card */
.cpa-lights-card {
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(240,247,255,0.7), rgba(255,255,255,0.96));
    border: 1px solid rgba(10,132,255,0.2);
}

.cpa-lights-card h4 {
    margin: 6px 0 8px;
    font-size: 18px;
    letter-spacing: -0.03em;
    color: var(--accent-strong);
}

.cpa-lights-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
}

/* Causes table */
.cpa-te-causes {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cpa-te-cause-col {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(248,250,252,0.92);
    border: 1px solid var(--line);
}

.cpa-te-cause-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cpa-te-cause-eyebrow.is-trans { color: var(--accent-strong); }
.cpa-te-cause-eyebrow.is-exu   { color: #b91c1c; }

/* Cause list with hover-pearl disease + color-coded mechanism tag */
.cpa-te-cause-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.cpa-te-cause-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
}

.cpa-mech-tag {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.cpa-mech-tag.is-pc    { background: var(--cpa-pc-soft);    color: var(--cpa-pc); }
.cpa-mech-tag.is-onc   { background: var(--cpa-onc-soft);   color: var(--cpa-onc); }
.cpa-mech-tag.is-kf    { background: var(--cpa-kf-soft);    color: var(--cpa-kf); }
.cpa-mech-tag.is-lymph { background: var(--cpa-lymph-soft); color: var(--cpa-lymph); }
.cpa-mech-tag.is-na    { background: var(--cpa-na-soft);    color: var(--cpa-na); }

/* Multiple tags on one row (e.g. Cirrhosis: ↓πc + ↑Pc) — only the
   first should claim the auto margin; subsequent tags sit next to it. */
.cpa-mech-tag + .cpa-mech-tag {
    margin-left: 0;
}

/* When a mech-tag is also a hover-pearl (cav-term), strip cav-term's
   underline + accent color and let the pill keep its mech color. */
.cpa-mech-tag.cav-term {
    border-bottom: 0;
    color: inherit;
    cursor: help;
    font-weight: 800;
}
.cpa-mech-tag.cav-term.is-pc    { color: var(--cpa-pc); }
.cpa-mech-tag.cav-term.is-onc   { color: var(--cpa-onc); }
.cpa-mech-tag.cav-term.is-kf    { color: var(--cpa-kf); }
.cpa-mech-tag.cav-term.is-lymph { color: var(--cpa-lymph); }
.cpa-mech-tag.cav-term.is-na    { color: var(--cpa-na); }

/* Light's Criteria — heavier ratio values + commit-rule footer */
.cpa-lights-card ul li strong {
    font-size: 15px;
    font-weight: 850;
    color: var(--accent-strong);
}

.cpa-lights-rule {
    margin: 12px 0 0 !important;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(10,132,255,0.08);
    color: var(--accent-strong) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 700;
}

.cpa-lights-rule strong {
    font-weight: 900;
    color: var(--accent-strong);
}

/* Try-this decision-point block */
.cpa-trythis {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(248,250,252,0.96);
    border: 1px dashed rgba(15,23,42,0.18);
}

.cpa-trythis-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-strong);
    margin-bottom: 6px;
}

.cpa-trythis p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

.cpa-trythis em {
    font-style: italic;
    color: var(--muted-strong);
}

/* Stronger NBME trap variant — used on the Borderline Light's trap */
.cpa-trap.cpa-trap--strong {
    padding: 22px 24px !important;
}

.cpa-trap.cpa-trap--strong h4 {
    font-size: 21px !important;
    margin: 4px 0 8px !important;
}

.cpa-trap.cpa-trap--strong p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--text) !important;
}

.cpa-trap.cpa-trap--strong p strong {
    font-weight: 850;
    color: #92400e;
}

.cpa-te-cause-col ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}

/* ============================================================
   SECTION 3 · Five-mechanism visualizer (independent panels)
   Architecture: tab bar + 5 sibling sections, only one with .is-active.
   ============================================================ */
.cpa-m3 {
    margin-top: 14px;
    display: grid;
    gap: 14px;
}

/* ---------- Tab bar ---------- */
.cpa-m3-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cpa-m3-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--line);
    color: var(--muted-strong);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.cpa-m3-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(15,23,42,0.06);
    color: var(--muted-strong);
    font-size: 11px;
    font-weight: 800;
}

.cpa-m3-tab:hover { transform: translateY(-1px); }

/* Inactive hover tint by accent */
.cpa-m3-tab.is-pc:hover    { border-color: var(--cpa-pc);    color: var(--cpa-pc); }
.cpa-m3-tab.is-onc:hover   { border-color: var(--cpa-onc);   color: var(--cpa-onc); }
.cpa-m3-tab.is-kf:hover    { border-color: var(--cpa-kf);    color: var(--cpa-kf); }
.cpa-m3-tab.is-lymph:hover { border-color: var(--cpa-lymph); color: var(--cpa-lymph); }
.cpa-m3-tab.is-na:hover    { border-color: var(--cpa-na);    color: var(--cpa-na); }

/* Active = filled */
.cpa-m3-tab.is-active { color: #fff; border-color: transparent; }
.cpa-m3-tab.is-active span { background: rgba(255,255,255,0.28); color: #fff; }

.cpa-m3-tab.is-pc.is-active    { background: var(--cpa-pc); }
.cpa-m3-tab.is-onc.is-active   { background: var(--cpa-onc); }
.cpa-m3-tab.is-kf.is-active    { background: var(--cpa-kf); }
.cpa-m3-tab.is-lymph.is-active { background: var(--cpa-lymph); }
.cpa-m3-tab.is-na.is-active    { background: var(--cpa-na); }

.cpa-m3-orient {
    margin: -2px 0 0 !important;
    color: var(--muted) !important;
    font-size: 13px !important;
    font-style: italic;
    line-height: 1.5;
}

/* ---------- Panel container & panels ---------- */
.cpa-m3-panels {
    position: relative;
}

.cpa-m3-panel {
    display: none;
    border-radius: 22px;
    padding: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.96);
    animation: cpa-m3-fade 0.22s ease;
    scroll-margin-top: 24px;
}

.cpa-m3-panel.is-active { display: block; }

.cpa-m3-panel.is-pc    { background: linear-gradient(180deg, rgba(254,242,242,0.55), rgba(255,255,255,0.98)); border-color: rgba(220,38,38,0.22); }
.cpa-m3-panel.is-onc   { background: linear-gradient(180deg, rgba(245,243,255,0.7),  rgba(255,255,255,0.98)); border-color: rgba(124,58,237,0.22); }
.cpa-m3-panel.is-kf    { background: linear-gradient(180deg, rgba(253,242,248,0.7),  rgba(255,255,255,0.98)); border-color: rgba(236,72,153,0.22); }
.cpa-m3-panel.is-lymph { background: linear-gradient(180deg, rgba(236,253,245,0.7),  rgba(255,255,255,0.98)); border-color: rgba(13,148,136,0.22); }
.cpa-m3-panel.is-na    { background: linear-gradient(180deg, rgba(255,247,237,0.7),  rgba(255,255,255,0.98)); border-color: rgba(217,119,6,0.22); }

@keyframes cpa-m3-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Two-column grid inside each panel ---------- */
.cpa-m3-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.cpa-m3-schematic {
    position: relative;
    padding: 12px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
}

.cpa-m3-schematic > svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Particles + arrows + bouncing proteins + mediators ---------- */
.cpa-m3-particle {
    transform: translate(var(--sx), var(--sy));
    opacity: 0;
    animation: cpa-m3-flow var(--dur, 4s) linear forwards;
    transform-box: fill-box;
}

@keyframes cpa-m3-flow {
    0%   { transform: translate(var(--sx), var(--sy)); opacity: 0; }
    14%  { opacity: 1; }
    78%  { opacity: 0.85; }
    100% { transform: translate(var(--ex), var(--ey)); opacity: 0; }
}

/* Lymph panel — particles linger (don't fully fade) to suggest pooling */
.cpa-m3-particle.is-pool {
    animation-name: cpa-m3-pool;
}

@keyframes cpa-m3-pool {
    0%   { transform: translate(var(--sx), var(--sy)); opacity: 0; }
    20%  { opacity: 1; }
    70%  { opacity: 0.9; }
    100% { transform: translate(var(--ex), var(--ey)); opacity: 0; }
}

.cpa-m3-protein {
    transform: translate(var(--p1x, 200px), var(--p1y, 140px));
    transform-box: fill-box;
    animation: cpa-m3-bounce var(--dur, 6s) ease-in-out infinite alternate;
}

.cpa-m3-protein.cpa-m3-protein-fade {
    animation: cpa-m3-bounce var(--dur, 6s) ease-in-out infinite alternate, cpa-m3-protein-fade-cycle 5s ease-in-out infinite;
}

@keyframes cpa-m3-bounce {
    from { transform: translate(var(--p1x), var(--p1y)); }
    to   { transform: translate(var(--p2x), var(--p2y)); }
}

@keyframes cpa-m3-protein-fade-cycle {
    0%, 100% { opacity: 0.95; }
    50%      { opacity: 0.25; }
}

.cpa-m3-arrow {
    transform-origin: center;
    transform-box: fill-box;
    animation: cpa-m3-arrow-pulse 3.6s ease-in-out infinite;
    opacity: 0.85;
}

.cpa-m3-arrow.is-fast {
    animation-duration: 2.2s;
}

.cpa-m3-arrow:nth-of-type(2) { animation-delay: -0.6s; }
.cpa-m3-arrow:nth-of-type(3) { animation-delay: -1.2s; }
.cpa-m3-arrow:nth-of-type(4) { animation-delay: -1.8s; }
.cpa-m3-arrow:nth-of-type(5) { animation-delay: -2.4s; }
.cpa-m3-arrow:nth-of-type(6) { animation-delay: -3.0s; }

@keyframes cpa-m3-arrow-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%      { transform: scale(1.08); opacity: 1;   }
}

.cpa-m3-mediator {
    font-size: 13px;
    font-weight: 800;
    fill: #ec4899;
    font-style: italic;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: cpa-m3-mediator-fade 1.6s ease-in-out forwards;
}

@keyframes cpa-m3-mediator-fade {
    0%, 100% { opacity: 0; }
    20%, 70% { opacity: 1; }
}

/* Pause animations when the panel is inactive (display:none already kills
   them, but explicit is better when JS toggles via class). */
.cpa-m3-panel:not(.is-active) .cpa-m3-arrow,
.cpa-m3-panel:not(.is-active) .cpa-m3-protein,
.cpa-m3-panel:not(.is-active) .cpa-m3-particle {
    animation-play-state: paused;
}

/* ---------- Lymph cause toggle ---------- */
.cpa-m3-lymph-toggle {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 5px;
    border-radius: 999px;
    background: rgba(13,148,136,0.06);
    border: 1px solid rgba(13,148,136,0.18);
    width: fit-content;
}

.cpa-m3-lymph-toggle button {
    padding: 7px 12px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--cpa-lymph);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.cpa-m3-lymph-toggle button.is-active {
    background: var(--cpa-lymph);
    color: #fff;
}

/* ---------- Info column ---------- */
.cpa-m3-info {
    display: grid;
    gap: 12px;
    align-content: start;
}

.cpa-m3-info-head {
    display: grid;
    gap: 4px;
}

.cpa-m3-info-head h4 {
    margin: 4px 0 0;
    font-size: 22px;
    letter-spacing: -0.03em;
    color: var(--text);
}

.cpa-m3-info-sub {
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cpa-m3-info-sub.is-pc    { color: var(--cpa-pc); }
.cpa-m3-info-sub.is-onc   { color: var(--cpa-onc); }
.cpa-m3-info-sub.is-kf    { color: var(--cpa-kf); }
.cpa-m3-info-sub.is-lymph { color: var(--cpa-lymph); }
.cpa-m3-info-sub.is-na    { color: var(--cpa-na); }

.cpa-m3-info-body {
    margin: 0;
    color: var(--muted-strong);
    font-size: 14.5px;
    line-height: 1.6;
}

.cpa-m3-info-section {
    display: grid;
    gap: 6px;
}

.cpa-m3-info-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.cpa-m3-info-section p {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Disease pills (re-using .cav-term hover-pearl pattern) */
.cpa-m3-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cpa-m3-pills li { display: inline-block; }

.cpa-m3-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border-bottom: 0;
    font-size: 13px;
    font-weight: 700;
    cursor: help;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.cpa-m3-pill.is-pc    { border: 1px solid rgba(220,38,38,0.32);  color: var(--cpa-pc); }
.cpa-m3-pill.is-onc   { border: 1px solid rgba(124,58,237,0.32); color: var(--cpa-onc); }
.cpa-m3-pill.is-kf    { border: 1px solid rgba(236,72,153,0.32); color: var(--cpa-kf); }
.cpa-m3-pill.is-lymph { border: 1px solid rgba(13,148,136,0.32); color: var(--cpa-lymph); }
.cpa-m3-pill.is-na    { border: 1px solid rgba(217,119,6,0.32);  color: var(--cpa-na); }

.cpa-m3-pill.is-pc:hover    { background: var(--cpa-pc-soft); }
.cpa-m3-pill.is-onc:hover   { background: var(--cpa-onc-soft); }
.cpa-m3-pill.is-kf:hover    { background: var(--cpa-kf-soft); }
.cpa-m3-pill.is-lymph:hover { background: var(--cpa-lymph-soft); }
.cpa-m3-pill.is-na:hover    { background: var(--cpa-na-soft); }

/* Trap callout in panel — same as Section 2's strong trap */
.cpa-m3-trap {
    margin-top: 4px;
}

/* Key-concept callout for Na+ panel (light blue, distinct from yellow trap) */
.cpa-m3-key {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(240,247,255,0.92), rgba(255,255,255,0.96));
    border: 1px solid rgba(10,132,255,0.22);
}

.cpa-m3-key-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 4px;
}

.cpa-m3-key p {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------- RAAS cascade (Panel 5) ---------- */
.cpa-m3-cascade-host {
    background: linear-gradient(180deg, rgba(255,247,237,0.7), rgba(255,255,255,0.96));
    border-color: rgba(217,119,6,0.22);
}

.cpa-m3-cascade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.cpa-m3-cascade-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(217,119,6,0.18);
    opacity: 0;
    transform: translateY(6px);
    animation: cpa-m3-cascade-fade 0.4s ease forwards;
    animation-delay: calc(var(--idx, 0) * 0.18s);
}

.cpa-m3-panel.is-na:not(.is-active) .cpa-m3-cascade-step {
    animation: none;
    opacity: 1;
    transform: none;
}

@keyframes cpa-m3-cascade-fade {
    to { opacity: 1; transform: translateY(0); }
}

.cpa-m3-cascade-num {
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cpa-na);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
}

.cpa-m3-cascade-step strong {
    display: block;
    font-size: 14px;
    color: var(--text);
}

.cpa-m3-cascade-step em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.cpa-m3-cascade-step.is-result {
    background: linear-gradient(180deg, rgba(255,247,237,0.95), rgba(255,255,255,0.96));
    border-color: var(--cpa-na);
    border-width: 2px;
}

.cpa-m3-cascade-arrow {
    text-align: center;
    font-size: 18px;
    color: var(--cpa-na);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cpa-m3-arrow, .cpa-m3-protein, .cpa-m3-protein.cpa-m3-protein-fade {
        animation: none;
        opacity: 0.85;
    }
    .cpa-m3-particle, .cpa-m3-particle.is-pool {
        animation-duration: calc(var(--dur, 4s) * 2);
    }
    .cpa-m3-panel { animation: none; }
    .cpa-m3-cascade-step {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   SECTION 4 · Pattern recognition + spotter
   ============================================================ */
.cpa-qr-table-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--line);
}

.cpa-qr-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 13px;
}

.cpa-qr-table thead {
    background: rgba(248,250,252,0.96);
}

.cpa-qr-table th,
.cpa-qr-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    vertical-align: top;
}

.cpa-qr-table thead th {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.cpa-qr-table tbody th {
    font-weight: 800;
}

.cpa-qr-table tr:last-child th,
.cpa-qr-table tr:last-child td {
    border-bottom: 0;
}

.cpa-mini-pill {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.cpa-mini-pill.is-pc    { background: var(--cpa-pc-soft);    color: var(--cpa-pc); }
.cpa-mini-pill.is-onc   { background: var(--cpa-onc-soft);   color: var(--cpa-onc); }
.cpa-mini-pill.is-kf    { background: var(--cpa-kf-soft);    color: var(--cpa-kf); }
.cpa-mini-pill.is-lymph { background: var(--cpa-lymph-soft); color: var(--cpa-lymph); }
.cpa-mini-pill.is-na    { background: var(--cpa-na-soft);    color: var(--cpa-na); }

/* ============================================================
   SECTION 4 · Quick Recall mini-game
   ============================================================ */

/* CTA strip — pointer to the game below */
.qr-cta {
    margin-top: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(245,158,11,0.10), rgba(255,255,255,0.85));
    border: 1px solid rgba(245,158,11,0.22);
    color: var(--muted-strong);
    font-size: 14px;
}

.qr-cta strong { color: var(--text); }

.qr-cta-arrow {
    margin-left: auto;
    color: #b45309;
    font-weight: 800;
    animation: qr-cta-bob 2.4s ease-in-out infinite;
}

@keyframes qr-cta-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* Collapsible game container */
.qr-game {
    margin-top: 14px;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(15,23,42,0.06);
}

/* Header (always visible) — flex with lead block on left + Play on right. */
.qr-game-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background:
        linear-gradient(135deg, rgba(245,158,11,0.10), rgba(220,38,38,0.06) 60%, rgba(255,255,255,0.96));
    border-bottom: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.qr-game-summary::-webkit-details-marker { display: none; }

.qr-game-summary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15,23,42,0.10);
}

.qr-game[open] .qr-game-summary {
    border-bottom-color: var(--line);
}

.qr-game-summary-lead {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.qr-game-summary-icon {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
}

.qr-game-summary-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qr-game-summary-text strong {
    font-size: 20px;
    letter-spacing: -0.03em;
    color: var(--text);
}

.qr-game-summary-text span {
    font-size: 12.5px;
    color: var(--muted-strong);
    font-weight: 600;
}

.qr-game-summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.qr-play-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
    font-weight: 850;
    font-size: 15px;
    letter-spacing: -0.01em;
    box-shadow: 0 10px 22px rgba(217,119,6,0.36);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.qr-game-summary:hover .qr-play-pill {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(217,119,6,0.46);
}

.qr-game-chevron {
    font-size: 18px;
    color: var(--muted-strong);
    transition: transform 0.25s ease;
}

.qr-game[open] .qr-game-chevron { transform: rotate(180deg); }

/* Game body */
.qr-game-body {
    padding: 22px 20px 26px;
    display: grid;
    gap: 12px;
    animation: qr-game-fade 0.3s ease;
}

@keyframes qr-game-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qr-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Top strip: progress + score */
.qr-strip {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.qr-strip-progress {
    flex: 1 1 240px;
    min-width: 200px;
}

.qr-strip-progress-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.qr-strip-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(15,23,42,0.06);
    overflow: hidden;
}

.qr-strip-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #d97706, #f59e0b);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.qr-strip-score {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 700;
}

.qr-score-correct { color: #16a34a; }
.qr-score-wrong   { color: #b91c1c; opacity: 0.85; }

.qr-score-correct b, .qr-score-wrong b {
    font-size: 16px;
    font-weight: 850;
    margin: 0 2px;
    display: inline-block;
}

.qr-score-bump b {
    animation: qr-score-bounce 0.3s ease;
}

@keyframes qr-score-bounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Stage container — owns the spacing between question card and answers */
.qr-stage {
    display: grid;
    gap: 10px;
}

/* ---------- Question / vignette card ----------
   Visual hierarchy: this card is the LOUDEST thing on the page.
   Warm amber background + strong border so the eye lands here
   before the answer buttons below. */
.qr-question-card {
    padding: 24px 32px 20px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(254,243,199,0.55), rgba(255,251,235,0.92));
    border: 2px solid rgba(217,119,6,0.42);
    box-shadow: 0 14px 32px rgba(217,119,6,0.12);
    display: grid;
    gap: 14px;
    position: relative;
}

/* Left accent bar — instantly reads as "this is the important thing." */
.qr-question-card::before {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 0;
    width: 5px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #d97706, #b45309);
}

.qr-question-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: #b45309;
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.qr-question-prompt {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.03em;
    color: var(--text);
    font-weight: 850;
    line-height: 1.2;
}

.qr-question-vignette {
    margin: 0;
    padding: 18px 22px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(217,119,6,0.28);
    color: var(--text);
    font-size: 22px;
    line-height: 1.55;
    font-weight: 500;
}

.qr-hint-link {
    width: fit-content;
    margin-top: 4px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.7);
    border: 1px dashed rgba(217,119,6,0.45);
    color: #92400e;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.qr-hint-link:hover {
    background: rgba(255,255,255,0.95);
    border-color: rgba(217,119,6,0.7);
    border-style: solid;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(217,119,6,0.14);
}

.qr-hint-text {
    margin: 4px 0 0;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(254,243,199,0.92);
    border: 1px solid rgba(245,158,11,0.42);
    box-shadow: 0 4px 10px rgba(217,119,6,0.10);
    color: #92400e;
    font-size: 13px;
    line-height: 1.45;
    font-style: italic;
    width: fit-content;
    max-width: 100%;
}

/* ---------- Answer buttons ---------- */
.qr-answers {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.qr-answer {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--line);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.qr-answer:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(15,23,42,0.10);
}

.qr-answer:active { transform: scale(0.98); }

.qr-answer:focus-visible {
    outline: 3px solid rgba(10,132,255,0.32);
    outline-offset: 2px;
}

.qr-answer-badge {
    grid-row: 1 / 3;
    align-self: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: -0.02em;
    line-height: 1;
}

.qr-answer-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

.qr-answer-tag {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

/* Mechanism color variants — match Section 3 */
.qr-answer.is-pc    .qr-answer-badge { background: var(--cpa-pc); }
.qr-answer.is-onc   .qr-answer-badge { background: var(--cpa-onc); }
.qr-answer.is-kf    .qr-answer-badge { background: var(--cpa-kf); }
.qr-answer.is-lymph .qr-answer-badge { background: var(--cpa-lymph); }
.qr-answer.is-na    .qr-answer-badge { background: var(--cpa-na); }

.qr-answer.is-pc:hover    { border-color: var(--cpa-pc);    background: var(--cpa-pc-soft); }
.qr-answer.is-onc:hover   { border-color: var(--cpa-onc);   background: var(--cpa-onc-soft); }
.qr-answer.is-kf:hover    { border-color: var(--cpa-kf);    background: var(--cpa-kf-soft); }
.qr-answer.is-lymph:hover { border-color: var(--cpa-lymph); background: var(--cpa-lymph-soft); }
.qr-answer.is-na:hover    { border-color: var(--cpa-na);    background: var(--cpa-na-soft); }

/* Locked state — non-clickable answers fade */
.qr-answers.is-locked .qr-answer { cursor: default; opacity: 0.5; }
.qr-answers.is-locked .qr-answer:hover { transform: none; box-shadow: none; }

/* Correct / wrong fills */
.qr-answer.is-correct {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
    opacity: 1 !important;
}
.qr-answer.is-correct .qr-answer-name,
.qr-answer.is-correct .qr-answer-tag { color: #fff; }
.qr-answer.is-correct .qr-answer-badge { background: rgba(255,255,255,0.28); }

.qr-answer.is-wrong {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    opacity: 1 !important;
}
.qr-answer.is-wrong .qr-answer-name,
.qr-answer.is-wrong .qr-answer-tag { color: #fff; }
.qr-answer.is-wrong .qr-answer-badge { background: rgba(255,255,255,0.28); }

.qr-answer.is-correct-pulse {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 4px rgba(22,163,74,0.28);
    animation: qr-correct-pulse 0.6s ease;
}

@keyframes qr-correct-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
    50%      { box-shadow: 0 0 0 8px rgba(22,163,74,0.36); }
}

.qr-answer-icon {
    grid-column: 1 / 3;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
}

/* ---------- Feedback card ---------- */
.qr-feedback {
    padding: 22px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1.5px solid var(--line);
    display: grid;
    gap: 14px;
    animation: qr-feedback-in 0.3s ease;
}

.qr-feedback.is-correct { border-color: rgba(22,163,74,0.45); background: linear-gradient(180deg, rgba(220,252,231,0.45), #fff); }
.qr-feedback.is-wrong   { border-color: rgba(220,38,38,0.40); background: linear-gradient(180deg, rgba(254,226,226,0.45), #fff); }

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

.qr-feedback-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.qr-feedback-result {
    margin: 0;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.03em;
}

.qr-feedback.is-correct .qr-feedback-result { color: #15803d; }
.qr-feedback.is-wrong   .qr-feedback-result { color: #b91c1c; }

.qr-feedback-mid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.qr-feedback-explain {
    margin: 0;
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.65;
}

.qr-feedback-mini {
    border-radius: 12px;
    background: rgba(248,250,252,0.92);
    border: 1px solid var(--line);
    padding: 10px;
    align-self: center;
}

.qr-feedback-mini svg {
    display: block;
    width: 100%;
    height: auto;
}

.qr-feedback-pearl {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(10,132,255,0.06);
    border: 1px solid rgba(10,132,255,0.18);
}

.qr-feedback-pearl-icon {
    color: var(--accent-strong);
    font-size: 16px;
    line-height: 1;
}

.qr-feedback-pearl-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    font-weight: 600;
}

.qr-advance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(217,119,6,0.32);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    align-self: flex-start;
    justify-self: end;
}

.qr-advance:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(217,119,6,0.42);
}

/* Mini-viz tube + bits (used inside feedback SVGs) */
.qr-mini-arrow { transform-origin: center; transform-box: fill-box; animation: qr-mini-pulse 2s ease-in-out infinite; }

@keyframes qr-mini-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

.qr-mini-dot { animation: qr-mini-flow 2.4s ease-in-out infinite; }

@keyframes qr-mini-flow {
    0%   { transform: translate(0, 0); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(var(--dx, 0), var(--dy, -22px)); opacity: 0; }
}

/* ---------- End screen ---------- */
.qr-end {
    padding: 28px 30px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
    text-align: center;
    display: grid;
    gap: 14px;
}

.qr-end-result {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.03em;
    color: var(--text);
    font-weight: 850;
    animation: qr-result-pop 0.45s cubic-bezier(.34, 1.56, .64, 1);
}

.qr-end-result b {
    color: var(--accent-strong);
}

@keyframes qr-result-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.qr-end-tier {
    margin: 0;
    color: var(--muted-strong);
    font-size: 15px;
    line-height: 1.5;
}

.qr-end-misses {
    text-align: left;
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.qr-end-misses-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.qr-end-miss {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(254,226,226,0.30);
    border: 1px solid rgba(220,38,38,0.22);
    display: grid;
    gap: 6px;
}

.qr-end-miss-vignette {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
    line-height: 1.5;
}

.qr-end-miss-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--muted-strong);
}

.qr-end-miss-row b { color: var(--text); }

.qr-end-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.qr-end-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.qr-end-btn.is-primary {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(217,119,6,0.32);
}

.qr-end-btn:hover { transform: translateY(-2px); }
.qr-end-btn.is-primary:hover { box-shadow: 0 14px 28px rgba(217,119,6,0.42); }

/* ============================================================
   REUSABLE COMPONENT — Cross-Module Pearl
   Inline term that signals "this concept lives in another module."
   Distinct from the regular .cav-term hover-pearl: blue ↗ marker,
   two-zone popup with a tinted footer naming the home module.
   Drop into any markup with the BEM-style classes below.
   ============================================================ */

.cross-module-pearl {
    position: relative;
    display: inline;
    color: var(--accent-strong);
    border-bottom: 1px dotted rgba(10, 132, 255, 0.55);
    cursor: help;
    font-weight: 700;
    outline: 0;
}

.cross-module-pearl:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.cross-module-pearl__term {
    color: inherit;
}

.cross-module-pearl__icon {
    display: inline-block;
    margin-left: 1px;
    font-size: 0.68em;
    vertical-align: super;
    line-height: 0;
    color: var(--accent);
    font-weight: 800;
}

.cross-module-pearl__popup {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 6px);
    width: max-content;
    max-width: min(340px, 80vw);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(15, 23, 42, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 30;
    font-style: normal;
    font-weight: 400;
    color: var(--text);
    text-align: left;
    overflow: hidden;
    white-space: normal;
}

.cross-module-pearl:hover .cross-module-pearl__popup,
.cross-module-pearl:focus .cross-module-pearl__popup,
.cross-module-pearl:focus-within .cross-module-pearl__popup,
.cross-module-pearl:focus-visible .cross-module-pearl__popup {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cross-module-pearl__definition {
    display: block;
    padding: 12px 14px;
    background: #fff;
}

.cross-module-pearl__title {
    display: block;
    font-size: 14px;
    font-weight: 850;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.cross-module-pearl__body {
    display: block;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text);
    font-weight: 500;
}

.cross-module-pearl__body strong {
    color: var(--text);
    font-weight: 850;
}

.cross-module-pearl__module-info {
    display: block;
    padding: 10px 14px 12px;
    background: rgba(10, 132, 255, 0.08);
    border-top: 1px solid rgba(10, 132, 255, 0.18);
}

.cross-module-pearl__module-label {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 3px;
}

.cross-module-pearl__home-module {
    display: block;
    font-size: 12.5px;
    color: var(--text);
    font-weight: 600;
    line-height: 1.4;
}

.cross-module-pearl__home-module strong {
    color: var(--accent-strong);
    font-weight: 850;
}

.cross-module-pearl__yield-note {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--muted-strong);
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .cross-module-pearl__popup {
        transition: opacity 0.18s ease;
        transform: translate(-50%, 0);
    }
}

@media (max-width: 1023px) {
    .qr-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .qr-game-summary {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }
    .qr-game-summary-mid { display: none; }
    .qr-game-summary-actions { justify-content: center; }

    .qr-answers { grid-template-columns: 1fr; }
    .qr-feedback-mid { grid-template-columns: 1fr; }

    .qr-question-card { padding: 20px; }
    .qr-question-prompt { font-size: 18px; }
    .qr-question-vignette { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .qr-cta-arrow,
    .qr-game-body,
    .qr-feedback,
    .qr-end-result,
    .qr-mini-arrow,
    .qr-mini-dot,
    .qr-score-bump b {
        animation: none !important;
    }
    .qr-strip-progress-fill { transition: none; }
}

/* Back row */
.cpa-back-row {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .cpa-locator-grid,
    .cpa-te-grid,
    .cpa-te-causes,
    .cpa-m3-grid {
        grid-template-columns: 1fr;
    }

    .cpa-m3-tab    { font-size: 12px; padding: 7px 12px; }
    .cpa-m3-tab span { width: 18px; height: 18px; font-size: 10px; }

    .cpa-m3-lymph-toggle {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .cpa-m3-lymph-toggle button { text-align: center; }

    .cpa-locator-card {
        position: static;
        top: auto;
    }

    .cpa-locator-img {
        max-width: 320px;
    }

    .cpa-terms-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 600px) {
    .cpa-terms-grid {
        grid-template-columns: 1fr;
    }

    .cpa-te-legend {
        font-size: 11px;
        gap: 10px;
    }

    .cpa-te-cause-list li {
        font-size: 13px;
    }

    .cpa-trap.cpa-trap--strong h4 { font-size: 18px !important; }
    .cpa-trap.cpa-trap--strong p  { font-size: 14px !important; }
}

@media (max-width: 560px) {
    .cpa-te-facts { grid-template-columns: 1fr; }
}