/* ============================================================
   RAR PATHOLOGY · "Aspiration, Abscess & Chronic Pneumonias" styles.

   Scoped to .rar-topic-content. Inherits the .atl-* card / figure /
   stepper system from atelectasis.css (which must load first).
   Only page-specific bits belong here.

   SCAFFOLD pass — collapse the empty interactive slot so it leaves no
   gap until its component is built, and hold the line on black body
   copy (never grey).
   ============================================================ */

.rar-topic-content #aspiration-position-selector-slot:empty { display: none; }

.rar-topic-content .solid-text-card p { color: var(--text, #111318); }

/* Section lead / body prose. Black, never muted. */
.rar-topic-content .asp-copy {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text, #111318);
    margin: 0 0 14px;
}

/* The one-line principle under a risk-factor card heading. */
.rar-topic-content .asp-principle {
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text, #111318);
    opacity: .78;
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px dashed rgba(15, 23, 42, .12);
}

/* Cards in these grids have very uneven content (2 bullets vs 6), so top-align
   them — grid's default `stretch` would blow the short cards up to match the
   tallest and leave them mostly empty. */
.rar-topic-content .asp-grid { align-items: start; }

.rar-topic-content .asp-grid--three {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.rar-topic-content .asp-grid--four {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* ---------- Recall game mount (section 11) ----------
   Section 11 already carries its own <h3> "Work the Patterns" from the
   scaffold, and the engine renders a second <h3 class="prg-title"> of its
   own. Hide the engine's copy here rather than modifying the shared engine.
   Same call made in BUILD 02 for the position selector's duplicate heading. */
.rar-topic-content .asp-recall-mount .prg-title { display: none; }

/* ---------- Cavity differential table (mirrors .ards-berlin) ----------
   The wrapper scrolls horizontally rather than letting the table squash or
   truncate; min-width keeps the columns legible on a narrow viewport. */
.rar-topic-content .asp-dx-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 4px 0 0;
}

.rar-topic-content .asp-dx {
    border-collapse: collapse;
    width: 100%;
    min-width: 620px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.rar-topic-content .asp-dx th,
.rar-topic-content .asp-dx td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    color: var(--text, #111318);
    font-size: 13.5px;
    line-height: 1.45;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.rar-topic-content .asp-dx thead th {
    background: rgba(94, 92, 230, 0.08);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Row-label column — the spine of the comparison. */
.rar-topic-content .asp-dx tbody th {
    background: rgba(15, 23, 42, 0.025);
    font-weight: 850;
    white-space: nowrap;
}

.rar-topic-content .asp-dx__corner {
    opacity: .55;
    font-weight: 800;
}

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