/* ============================================================
   ARCANIUM · PATHOLOGY PAGE KIT  (pk-)
   Implements PATHOLOGY_PAGE_DESIGN_SYSTEM.md — one visual treatment
   per content type, so a block's container tells you what kind of
   information it holds before you read a word.

   ADDITIVE AND OPT-IN. Every rule is namespaced `pk-` and scoped to
   .rar-topic-content. Nothing here restyles .atl-*, .topic-section-card
   or any existing component, so the five already-shipped pathology
   pages are untouched. A page adopts the kit by putting `pk-section`
   on its <article> and using pk- blocks inside.

   Contents
     0  Type scale + density tokens
     1  Section shell            (pk-section)
     2  Definition / anchor      (type 1)
     3  Sequence flow            (type 2)
     4  Organism chip grid       (type 3)
     5  Finding tile row         (type 4)
     6  Numbered finding cards   (type 5)
     7  Risk group cards         (type 6)
     8  Comparator table         (type 7)
     9  Sign readout             (type 8)
    10  Route branch diagram     (type 9)
    11  High-yield callout tune  (type 10)
    12  Stat strip               (type 11)
    13  Link strip               (type 12)
    14  Disclosure primitive
   ============================================================ */

/* ---------- 0 · TYPE SCALE + DENSITY ----------
   Semantic sizes only. If something needs emphasis it changes ROLE,
   never pixels. Declared on the page container: harmless to existing
   pages because only pk- classes consume them. */
.rar-topic-content {
    --text-section-title: 32px;
    --text-block-title: 22px;
    --text-finding: 20px;
    --text-body: 17px;
    --text-detail: 15px;
    --text-meta: 13px;

    --pk-measure: 75ch;      /* line-length cap */
    --pk-gap-block: 24px;    /* between blocks */
    --pk-gap-section: 48px;  /* between sections */

    --pk-ink: var(--text, #111318);
    --pk-hair: rgba(15, 23, 42, .10);
    --pk-rule: rgba(15, 23, 42, .16);
    --pk-surface: #fff;
    --pk-accent: #5e5ce6;      /* kit accent — steppers, numerals */
    --pk-caution: #f5a623;     /* amber = careful */
    --pk-danger: #d6336c;      /* consolidation / danger */
}

/* ---------- 1 · SECTION SHELL ----------
   Opt-in: <article class="topic-section-card full-width pk-section"> */
.rar-topic-content .pk-section { padding: 26px 28px; }

.rar-topic-content .pk-section + .pk-section { margin-top: 0; }

.rar-topic-content .pk-section > h3 {
    font-size: var(--text-section-title);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--pk-ink);
    margin: 8px 0 14px;
}

/* Consistent vertical rhythm between blocks inside a section. */
.rar-topic-content .pk-section > * + * { margin-top: var(--pk-gap-block); }

/* Prose inside a section is measure-capped so it stops reading as a wall. */
.rar-topic-content .pk-section p { max-width: var(--pk-measure); }

/* ---------- 2 · DEFINITION / ANCHOR (type 1) ----------
   No container. One per section. Sits directly under the title. */
.rar-topic-content .pk-def {
    font-size: var(--text-body);
    line-height: 1.62;
    color: var(--pk-ink);
    max-width: var(--pk-measure);
    margin: 0;
}

.rar-topic-content .pk-def strong { font-weight: 800; }

/* ---------- 3 · SEQUENCE FLOW (type 2) ----------
   A → B → C causal chain. Never prose paragraphs.
   Horizontal on desktop, vertical stacked on narrow. */
.rar-topic-content .pk-flow {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rar-topic-content .pk-flow__node {
    flex: 1 1 190px;
    min-width: 180px;
    background: var(--pk-surface);
    border: 1px solid var(--pk-hair);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

.rar-topic-content .pk-flow__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(94, 92, 230, .12);
    color: #4a3ea8;
    font-size: var(--text-meta);
    font-weight: 850;
    margin-bottom: 8px;
}

.rar-topic-content .pk-flow__label {
    display: block;
    font-size: var(--text-block-title);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
    margin-bottom: 6px;
}

.rar-topic-content .pk-flow__detail {
    font-size: var(--text-detail);
    line-height: 1.5;
    color: var(--pk-ink);
    margin: 0;
}

/* Arrow between nodes — decorative, hidden from AT. */
.rar-topic-content .pk-flow__arrow {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pk-accent);
    font-size: 20px;
    font-weight: 700;
}

/* Terminal node — the payoff. Visually the strongest thing in the flow. */
.rar-topic-content .pk-flow__node.is-terminal {
    background: linear-gradient(180deg, rgba(214, 51, 108, .07), rgba(255, 255, 255, .97));
    border-color: rgba(214, 51, 108, .30);
    box-shadow: 0 12px 26px rgba(214, 51, 108, .10);
}

.rar-topic-content .pk-flow__node.is-terminal .pk-flow__n {
    background: rgba(214, 51, 108, .14);
    color: #b01050;
}

.rar-topic-content .pk-flow__node.is-terminal .pk-flow__label { font-weight: 800; }

/* Converging variant: two parents meeting one child (two-insult timeline). */
.rar-topic-content .pk-converge { display: grid; gap: 0; justify-items: center; }

.rar-topic-content .pk-converge__parents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    width: 100%;
}

.rar-topic-content .pk-converge__join {
    width: 100%;
    height: 34px;
    color: var(--pk-accent);
}

.rar-topic-content .pk-converge__child { width: 100%; max-width: 560px; }

/* Timing eyebrow above a parent node. */
.rar-topic-content .pk-flow__when {
    display: block;
    font-size: var(--text-meta);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pk-ink);
    opacity: .55;
    margin-bottom: 6px;
}

@media (max-width: 720px) {
    .rar-topic-content .pk-flow { flex-direction: column; }
    .rar-topic-content .pk-flow__arrow { flex-basis: 26px; transform: rotate(90deg); }
}

/* ---------- 4 · ORGANISM CHIP GRID (type 3) ----------
   One organism per line, never a prose run of species names.
   Every organism carries a hover/focus card. */
.rar-topic-content .pk-orgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    align-items: start;
    overflow: visible;          /* hover cards must not clip */
}

.rar-topic-content .pk-orgs__group { min-width: 0; }

/* Real header, not a card title. */
.rar-topic-content .pk-orgs__head {
    font-size: var(--text-block-title);
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
    margin: 0 0 10px;
    padding-bottom: 7px;
    border-bottom: 2px solid var(--pk-rule);
}

.rar-topic-content .pk-orgs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.rar-topic-content .pk-organism {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: help;
}

.rar-topic-content .pk-organism:hover,
.rar-topic-content .pk-organism:focus-visible {
    background: rgba(10, 132, 255, .05);
    border-color: rgba(10, 132, 255, .18);
    outline: none;
}

.rar-topic-content .pk-organism:focus-visible {
    outline: 3px solid rgba(10, 132, 255, .5);
    outline-offset: 2px;
}

.rar-topic-content .pk-organism__icon { font-size: 16px; line-height: 1.35; }

.rar-topic-content .pk-organism__name {
    display: block;
    font-size: var(--text-detail);
    font-weight: 800;
    font-style: italic;
    color: var(--pk-ink);
}

.rar-topic-content .pk-organism__tag {
    display: block;
    font-size: var(--text-meta);
    color: var(--pk-ink);
    opacity: .62;
    margin-top: 1px;
}

/* Hover card. Sits above by default; PathologyKit flips it below by adding
   .is-below when there isn't room above (first row of a list, top of the
   viewport). Without the flip the card clips off-screen and is unreadable. */
.rar-topic-content .pk-organism__card {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    width: max-content;
    max-width: min(320px, 78vw);
    padding: 12px 14px;
    border-radius: 14px;
    background: #14161c;
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
}

.rar-topic-content .pk-organism__card.is-below {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateY(-4px);
}

.rar-topic-content .pk-organism:hover .pk-organism__card,
.rar-topic-content .pk-organism:focus .pk-organism__card,
.rar-topic-content .pk-organism:focus-visible .pk-organism__card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rar-topic-content .pk-organism__card dl { margin: 0; display: grid; gap: 7px; }
.rar-topic-content .pk-organism__card dt {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    opacity: .6;
}
.rar-topic-content .pk-organism__card dd {
    margin: 1px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #fff;
}

/* ---------- 5 · FINDING TILE ROW (type 4) ----------
   Clinical findings as icon tiles. Never a bulleted list in a box. */
.rar-topic-content .pk-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rar-topic-content .pk-tile {
    background: var(--pk-surface);
    border: 1px solid var(--pk-hair);
    border-radius: 16px;
    padding: 14px 15px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.rar-topic-content .pk-tile__icon { display: block; font-size: 24px; line-height: 1; margin-bottom: 9px; }

.rar-topic-content .pk-tile__term {
    display: block;
    font-size: var(--text-finding);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
    margin-bottom: 5px;
}

.rar-topic-content .pk-tile__line {
    font-size: var(--text-detail);
    line-height: 1.5;
    color: var(--pk-ink);
    margin: 0;
}

/* ---------- 6 · NUMBERED FINDING CARDS (type 5) ----------
   "You see three things" → three unmissable findings. */
.rar-topic-content .pk-findings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: pkfind;
}

.rar-topic-content .pk-finding {
    position: relative;
    background: var(--pk-surface);
    border: 1px solid var(--pk-hair);
    border-radius: 18px;
    padding: 18px 18px 18px 20px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}

.rar-topic-content .pk-finding__n {
    display: block;
    font-size: 34px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--pk-accent);
    opacity: .32;
    margin-bottom: 8px;
}

/* The finding NAME is a heading, not the first words of a paragraph. */
.rar-topic-content .pk-finding__name {
    display: block;
    font-size: var(--text-finding);
    font-weight: 650;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
    margin: 0 0 7px;
}

.rar-topic-content .pk-finding__body {
    font-size: var(--text-detail);
    line-height: 1.52;
    color: var(--pk-ink);
    margin: 0;
}

/* Paired figure sits BENEATH the card row, centred — never floated left. */
.rar-topic-content .pk-figure-centre {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.rar-topic-content .pk-figure-centre .atl-figure { flex: 0 1 340px; max-width: 380px; }

/* ---------- 7 · RISK GROUP CARDS (type 6) ---------- */
.rar-topic-content .pk-risk {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: start;
}

.rar-topic-content .pk-risk__card {
    background: var(--pk-surface);
    border: 1px solid var(--pk-hair);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}

.rar-topic-content .pk-risk__title {
    font-size: var(--text-block-title);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
    margin: 0 0 10px;
}

.rar-topic-content .pk-risk__principle {
    font-size: var(--text-detail);
    font-style: italic;
    line-height: 1.5;
    color: var(--pk-ink);
    opacity: .78;
    margin: 0 0 12px;
}

/* The highest-yield item is elevated: first, bold, larger, ruled off. */
.rar-topic-content .pk-risk__top {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: var(--text-finding);
    font-weight: 700;
    line-height: 1.3;
    color: var(--pk-ink);
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--pk-rule);
}

.rar-topic-content .pk-risk__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 7px;
}

.rar-topic-content .pk-risk__list li {
    position: relative;
    padding-left: 26px;
    font-size: var(--text-detail);
    line-height: 1.5;
    color: var(--pk-ink);
}

/* Hanging marker — NEVER display:flex on the li (it shatters inline text). */
.rar-topic-content .pk-risk__list li > .pk-ico {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.5;
}

/* ---------- 8 · COMPARATOR TABLE (type 7) ---------- */
.rar-topic-content .pk-comparator { display: grid; gap: 12px; }

.rar-topic-content .pk-comparator__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rar-topic-content .pk-comparator__hint {
    font-size: var(--text-meta);
    color: var(--pk-ink);
    opacity: .6;
    margin: 0;
}

.rar-topic-content .pk-quiz-btn {
    font: inherit;
    font-size: var(--text-detail);
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(94, 92, 230, .35);
    background: rgba(94, 92, 230, .08);
    color: #4a3ea8;
    cursor: pointer;
    transition: .16s;
}

.rar-topic-content .pk-quiz-btn:hover { background: rgba(94, 92, 230, .15); }
.rar-topic-content .pk-quiz-btn:focus-visible { outline: 3px solid rgba(10, 132, 255, .5); outline-offset: 2px; }
.rar-topic-content .pk-quiz-btn[aria-pressed="true"] { background: var(--pk-accent); color: #fff; border-color: var(--pk-accent); }

.rar-topic-content .pk-comparator__scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    border: 1px solid var(--pk-hair);
}

.rar-topic-content .pk-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 660px;
    background: var(--pk-surface);
}

.rar-topic-content .pk-table th,
.rar-topic-content .pk-table td {
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
    font-size: var(--text-detail);
    line-height: 1.45;
    color: var(--pk-ink);
    border-bottom: 1px solid var(--pk-hair);
}

/* Sticky header row. */
.rar-topic-content .pk-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eeeefb;
    font-size: var(--text-meta);
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid rgba(94, 92, 230, .22);
}

.rar-topic-content .pk-table tbody th[scope="row"] {
    font-size: var(--text-detail);
    font-weight: 800;
    white-space: nowrap;
    background: rgba(15, 23, 42, .025);
}

.rar-topic-content .pk-table tbody tr:last-child th,
.rar-topic-content .pk-table tbody tr:last-child td { border-bottom: none; }

/* Row hover. */
.rar-topic-content .pk-table tbody tr:hover td,
.rar-topic-content .pk-table tbody tr:hover th[scope="row"] { background: rgba(94, 92, 230, .06); }

/* Click-to-focus a row: dim the others so one axis is read at a time. */
.rar-topic-content .pk-table.is-focusing tbody tr:not(.is-focused) { opacity: .32; }
.rar-topic-content .pk-table tbody tr.is-focused td,
.rar-topic-content .pk-table tbody tr.is-focused th[scope="row"] {
    background: rgba(94, 92, 230, .10);
    box-shadow: inset 0 0 0 2px rgba(94, 92, 230, .30);
}

/* Row-header buttons are real buttons. */
.rar-topic-content .pk-rowbtn {
    font: inherit;
    font-weight: 800;
    color: var(--pk-ink);
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer;
    width: 100%;
}
.rar-topic-content .pk-rowbtn:focus-visible { outline: 3px solid rgba(10, 132, 255, .5); outline-offset: 2px; }

/* Rows that actually discriminate carry a visible marker — meaning is not
   conveyed by colour alone: the ✦ glyph and the "carries" label do the work. */
.rar-topic-content .pk-table tr[data-pk-discriminates="yes"] th[scope="row"] {
    box-shadow: inset 3px 0 0 var(--pk-accent);
}

.rar-topic-content .pk-disc-mark {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: var(--pk-accent);
}

/* Rows that discriminate nothing are visibly de-emphasised. */
.rar-topic-content .pk-table tr[data-pk-discriminates="no"] td,
.rar-topic-content .pk-table tr[data-pk-discriminates="no"] th[scope="row"] {
    opacity: .58;
    font-style: italic;
}

.rar-topic-content .pk-table tr[data-pk-discriminates="no"] th[scope="row"]::after {
    content: " · discriminates nothing";
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .7;
    white-space: normal;
}

/* Quiz mode. */
.rar-topic-content .pk-table td.pk-blank {
    background: rgba(94, 92, 230, .10);
    box-shadow: inset 0 0 0 2px var(--pk-accent);
    border-radius: 8px;
}

.rar-topic-content .pk-quizpanel {
    border: 1px solid rgba(94, 92, 230, .28);
    background: rgba(94, 92, 230, .05);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    gap: 10px;
}

.rar-topic-content .pk-quizpanel__q {
    font-size: var(--text-detail);
    font-weight: 700;
    color: var(--pk-ink);
    margin: 0;
}

.rar-topic-content .pk-quizpanel__opts { display: flex; flex-wrap: wrap; gap: 8px; }

.rar-topic-content .pk-quizopt {
    font: inherit;
    font-size: var(--text-detail);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--pk-rule);
    background: #fff;
    color: var(--pk-ink);
    cursor: pointer;
    text-align: left;
}
.rar-topic-content .pk-quizopt:hover { border-color: var(--pk-accent); }
.rar-topic-content .pk-quizopt:focus-visible { outline: 3px solid rgba(10, 132, 255, .5); outline-offset: 2px; }
.rar-topic-content .pk-quizopt.is-correct { background: rgba(52, 199, 89, .16); border-color: #1f8f43; color: #14612d; font-weight: 700; }
.rar-topic-content .pk-quizopt.is-wrong  { background: rgba(255, 69, 58, .12); border-color: #c92a2a; color: #a3231d; text-decoration: line-through; }

.rar-topic-content .pk-quizpanel__fb {
    font-size: var(--text-detail);
    color: var(--pk-ink);
    margin: 0;
    min-height: 1.4em;
}

.rar-topic-content .pk-quizpanel__score { font-size: var(--text-meta); opacity: .7; }

/* ---------- 9 · SIGN READOUT (type 8) ---------- */
.rar-topic-content .pk-sign {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--pk-hair);
    border-left: 4px solid var(--pk-accent);
    background: var(--pk-surface);
}

.rar-topic-content .pk-sign__row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
}

.rar-topic-content .pk-sign__k {
    font-size: var(--text-meta);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pk-ink);
    opacity: .62;
}

.rar-topic-content .pk-sign__v {
    font-size: var(--text-detail);
    line-height: 1.5;
    color: var(--pk-ink);
    margin: 0;
}

@media (max-width: 560px) {
    .rar-topic-content .pk-sign__row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- 10 · ROUTE BRANCH DIAGRAM (type 9) ---------- */
.rar-topic-content .pk-branch { display: grid; gap: 12px; justify-items: center; }
.rar-topic-content .pk-branch svg { width: 100%; height: auto; max-width: 760px; display: block; }

.rar-topic-content .pk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: var(--text-meta);
    font-weight: 700;
    background: rgba(94, 92, 230, .10);
    color: #4a3ea8;
    border: 1px solid rgba(94, 92, 230, .22);
}

/* ---------- 11 · HIGH-YIELD CALLOUT TUNE (type 10) ----------
   The shared callout is reused as-is; the kit only enlarges the badge
   labels, which is the explicit ask — the sub-titles must pop.
   Scoped to pk-section so existing pages keep their current sizing. */
.rar-topic-content .pk-section .hy-callout__sub {
    font-size: var(--text-finding);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pk-ink);
    opacity: 1;
}

.rar-topic-content .pk-section .hy-callout__item > p {
    font-size: var(--text-detail);
    line-height: 1.55;
}

.rar-topic-content .pk-section .hy-tag {
    font-size: var(--text-meta);
    font-weight: 800;
    letter-spacing: .04em;
}

/* ---------- 12 · STAT STRIP (type 11) ----------
   Compact inline row. No tinted box. */
.rar-topic-content .pk-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding: 14px 2px;
    margin: 0;
    border-top: 1px solid var(--pk-hair);
    border-bottom: 1px solid var(--pk-hair);
}

.rar-topic-content .pk-stat { display: grid; gap: 2px; }

.rar-topic-content .pk-stat__k {
    font-size: var(--text-meta);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pk-ink);
    opacity: .55;
}

.rar-topic-content .pk-stat__v {
    font-size: var(--text-detail);
    font-weight: 700;
    color: var(--pk-ink);
}

/* ---------- 13 · LINK STRIP (type 12) ----------
   One sentence should look like one sentence. */
.rar-topic-content .pk-linkstrip {
    display: flex;
    align-items: baseline;
    gap: 9px;
    font-size: var(--text-detail);
    line-height: 1.5;
    color: var(--pk-ink);
    padding: 10px 0 0;
    margin: 0;
    border-top: 1px solid var(--pk-hair);
}

.rar-topic-content .pk-linkstrip__arrow { color: var(--pk-accent); font-weight: 800; }

.rar-topic-content .pk-linkstrip button {
    font: inherit;
    font-weight: 700;
    color: var(--accent-strong, #0066cc);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rar-topic-content .pk-linkstrip button:focus-visible { outline: 3px solid rgba(10, 132, 255, .5); outline-offset: 2px; }

/* ---------- 14 · DISCLOSURE ----------
   Native <details> — keyboard operable for free. Labelled, never a bare
   chevron: the summary says what is inside. */
.rar-topic-content .pk-disclosure {
    border: 1px solid var(--pk-hair);
    border-radius: 14px;
    background: rgba(15, 23, 42, .015);
    padding: 0;
}

.rar-topic-content .pk-disclosure > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    font-size: var(--text-detail);
    font-weight: 700;
    color: var(--pk-ink);
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 14px;
}

.rar-topic-content .pk-disclosure > summary::-webkit-details-marker { display: none; }

.rar-topic-content .pk-disclosure > summary::before {
    content: "▸";
    color: var(--pk-accent);
    font-size: 13px;
    transition: transform .16s ease;
}

.rar-topic-content .pk-disclosure[open] > summary::before { transform: rotate(90deg); }
.rar-topic-content .pk-disclosure > summary:hover { background: rgba(94, 92, 230, .05); }
.rar-topic-content .pk-disclosure > summary:focus-visible { outline: 3px solid rgba(10, 132, 255, .5); outline-offset: 2px; }

.rar-topic-content .pk-disclosure__body {
    padding: 0 16px 14px;
    font-size: var(--text-detail);
    line-height: 1.55;
    color: var(--pk-ink);
}

.rar-topic-content .pk-disclosure__body > * + * { margin-top: 10px; }

/* ---------- MNEMONIC / MEMORY ANCHOR ----------
   A figure that supplements structured content rather than replacing it.
   The text on these images is baked in, so the frame carries only caption
   + credit — no label overlay. */
.rar-topic-content .pk-mnemonic {
    border: 1px solid rgba(94, 92, 230, .22);
    background: rgba(94, 92, 230, .04);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rar-topic-content .pk-mnemonic__eyebrow {
    align-self: flex-start;
    font-size: var(--text-meta);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4a3ea8;
    margin-bottom: 4px;
}

/* The figure image itself is responsive and never overflows its frame. */
.rar-topic-content .pk-mnemonic .atl-figure { width: 100%; max-width: 460px; margin: 0; }
.rar-topic-content .pk-mnemonic .atl-figure__img { height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

/* Full-width variant: centred, as a section's opening anchor. */
.rar-topic-content .pk-mnemonic--lead { margin: 0 auto; max-width: 520px; }

/* ---------- TWO-COLUMN SPLIT ----------
   Structured content on the left, mnemonic on the right (desktop); stacked
   on narrow. Each side keeps its own width so neither is squeezed. */
.rar-topic-content .pk-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.rar-topic-content .pk-split > * { min-width: 0; margin-top: 0; }

@media (max-width: 820px) {
    .rar-topic-content .pk-split { grid-template-columns: 1fr; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .rar-topic-content .pk-organism__card,
    .rar-topic-content .pk-disclosure > summary::before,
    .rar-topic-content .pk-quiz-btn { transition: none; }
}

/* ---------- narrow-viewport density ---------- */
@media (max-width: 720px) {
    .rar-topic-content {
        --text-section-title: 26px;
        --text-block-title: 20px;
        --text-finding: 18px;
        --text-body: 16px;
    }
    .rar-topic-content .pk-section { padding: 20px 18px; }
}