/* ============================================================
   RAR PHYSIOLOGY · Mechanics of Ventilation styles
   SCAFFOLD pass — only the placeholder-marker styling lives here for
   now (mirrors the Lung Volumes & Capacities scaffold in lvc.css).
   Real page styles (interactives, the P-V curves, compliance drill)
   arrive with their content prompts.
   Scoped to .rar-topic-content so it never leaks into other pages.
   The .rar-topic-content grid/gap is defined once in lvc.css (loaded
   globally) — no need to redeclare it here.
   ============================================================ */

.rar-topic-content .mov-page-intent {
    margin: 0 0 4px;
    color: var(--text, #111318);
    font-size: 0.95rem;
    font-style: italic;
}

/* Muted "content TBD" marker that sits under every scaffold section. */
.rar-topic-content .mov-tbd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: 12px;
    background: var(--surface-muted, rgba(148, 163, 184, 0.08));
    color: var(--text, #111318);
    font-size: 0.9rem;
}

.rar-topic-content .mov-tbd-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Larger placeholder for an interactive / game / figure mount point. */
.rar-topic-content .mov-mount-placeholder {
    margin-top: 12px;
    padding: 32px 20px;
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: 14px;
    background: var(--surface-muted, rgba(148, 163, 184, 0.08));
    color: var(--text, #111318);
    text-align: center;
    font-size: 0.92rem;
}

.rar-topic-content .mov-mount-placeholder strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text, #334155);
}

/* ============================================================
   Page-1 content styling (Ventilation & the Muscles).
   Compact reference tables + mnemonic + cross-ref, reusing the
   Lung Volumes look (borders, palette, sentence case).
   ============================================================ */
.rar-topic-content .mov-def { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text, #111318); }
.rar-topic-content .mov-def + .mov-def { margin-top: 7px; }
.rar-topic-content .mov-def strong { font-weight: 800; }
.rar-topic-content .mov-aside { margin: 8px 0 0; font-size: 12.5px; font-style: italic; color: var(--muted-strong, #475467); }

/* generic compact table (muscle cast + testing) */
.rar-topic-content .mov-table-wrap { margin-top: 4px; overflow: visible; }
.rar-topic-content .mov-table {
    width: 100%; border-collapse: collapse; font-size: 16px;
}
.rar-topic-content .mov-table th,
.rar-topic-content .mov-table td {
    padding: 12px 15px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--line, rgba(15, 23, 42, 0.08));
    color: var(--text, #111318); line-height: 1.5;
}
.rar-topic-content .mov-table thead th {
    font-size: 17px; font-weight: 850;
    background: rgba(15, 23, 42, 0.04);
    border-bottom: 2px solid var(--line, rgba(15, 23, 42, 0.16));
}
.rar-topic-content .mov-table tbody th {
    font-size: 15px; font-weight: 800;
    background: rgba(15, 23, 42, 0.02);
    color: var(--muted-strong, #475467);
}
.rar-topic-content .mov-table td strong { font-weight: 800; }
.rar-topic-content .mov-table .mov-forced { color: var(--muted-strong, #475467); font-style: italic; }
.rar-topic-content .mov-table .mov-dash { color: var(--muted, #98a2b3); }
/* highlight the money numbers in the testing table */
.rar-topic-content .mov-table .mov-num {
    display: inline-block; padding: 1px 7px; border-radius: 6px;
    background: rgba(10, 132, 255, 0.1); color: var(--accent-strong, #0066cc);
    font-weight: 800; white-space: nowrap;
}

.rar-topic-content .mov-table .mov-forced { font-size: 14px; }

/* two-column muscle cast — colored, prominent column headers */
.rar-topic-content .mov-cast thead th { font-size: 18px; }
.rar-topic-content .mov-cast thead th:nth-child(1) { color: #0e7c86; }
.rar-topic-content .mov-cast thead th:nth-child(2) { color: #c0392b; }
.rar-topic-content .mov-cast td { font-size: 15px; }

/* flagged "key / NBME" note — bigger than a plain aside, with a tag */
.rar-topic-content .mov-flag {
    display: flex; align-items: baseline; gap: 9px;
    margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text, #111318);
}
.rar-topic-content .mov-flag strong { font-weight: 800; }
.rar-topic-content .mov-flag-tag {
    flex-shrink: 0; padding: 3px 11px; border-radius: 999px;
    background: #ff9f0a; color: #3d2a00;
    font-size: 11px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase;
}
.rar-topic-content .mov-flag-tag--nbme { background: var(--accent, #0a84ff); color: #fff; }

/* innervation — two soft boxes (phrenic + intercostal) */
.rar-topic-content .mov-nerve-grid {
    display: grid; grid-template-columns: 1.65fr 1fr; gap: 12px; margin-top: 12px;
    align-items: start;
}
/* both boxes share one soft-blue treatment */
.rar-topic-content .mov-nerve-box {
    padding: 14px 16px;
    border: 1px solid rgba(10, 132, 255, 0.24);
    border-radius: var(--radius-sm, 14px);
    background: rgba(10, 132, 255, 0.05);
}
/* the intercostal box is smaller / lighter */
.rar-topic-content .mov-nerve-box--sm { padding: 12px 13px; }
.rar-topic-content .mov-nerve-name {
    font-size: 15px; font-weight: 850; color: var(--accent-strong, #0066cc); margin-bottom: 6px;
}
.rar-topic-content .mov-nerve-box--sm .mov-nerve-name { font-size: 13.5px; }
.rar-topic-content .mov-nerve-origin {
    font-size: 11.5px; font-weight: 700; color: var(--muted-strong, #475467); letter-spacing: 0;
}
.rar-topic-content .mov-nerve-mnemonic {
    margin: 0 0 7px; padding: 8px 11px;
    border-radius: 10px; background: rgba(10, 132, 255, 0.12);
    font-size: 13.5px; font-weight: 800; color: var(--text, #111318);
}
.rar-topic-content .mov-nerve-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text, #111318); }
.rar-topic-content .mov-nerve-box--sm .mov-nerve-body { font-size: 12.5px; }
.rar-topic-content .mov-nerve-body strong { font-weight: 800; }
@media (max-width: 560px) {
    .rar-topic-content .mov-nerve-grid { grid-template-columns: 1fr; }
}

/* cross-reference chip (Valsalva → CAV) */
.rar-topic-content .mov-xref {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 12px; padding: 10px 13px;
    border: 1px solid rgba(255, 159, 10, 0.45);
    border-radius: var(--radius-sm, 12px);
    background: rgba(255, 159, 10, 0.09);
    font-size: 12.5px; line-height: 1.5; color: var(--text, #111318);
}
.rar-topic-content .mov-xref strong { font-weight: 800; }

@media (max-width: 560px) {
    /* shrink (do NOT scroll) so the wrap can stay overflow:visible and
       .cav-term tooltips are never clipped */
    .rar-topic-content .mov-table { font-size: 11.5px; }
    .rar-topic-content .mov-table th,
    .rar-topic-content .mov-table td { padding: 6px 5px; }
    .rar-topic-content .mov-table .mov-num { padding: 1px 4px; }
}

/* ============================================================
   Shared interactive atoms (readout, buttons, slider, metrics) —
   reused by every Mechanics interactive so later pages don't
   redefine them. Plus Page-2 pieces (transmural star, effusion
   cause boxes, small schematic).
   ============================================================ */
.rar-topic-content .mov-readout {
    margin-top: 14px; text-align: center;
    font-size: 16.5px; font-weight: 600; line-height: 1.5;
}
.rar-topic-content .mov-readout strong { font-weight: 800; }

.rar-topic-content .mov-btn {
    appearance: none; cursor: pointer;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.14));
    background: #fff; color: var(--text, #111318);
    font-size: 13px; font-weight: 750; padding: 8px 15px; border-radius: 999px;
    transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, filter 0.14s ease;
}
.rar-topic-content .mov-btn:hover { border-color: var(--accent, #0a84ff); color: var(--accent-strong, #0066cc); }
.rar-topic-content .mov-btn--ghost { color: var(--muted-strong, #475467); }
.rar-topic-content .mov-btn--danger { background: var(--danger, #ff453a); border-color: var(--danger, #ff453a); color: #fff; }
.rar-topic-content .mov-btn--danger:hover { filter: brightness(1.06); color: #fff; }

.rar-topic-content .mov-slider { flex: 1 1 140px; accent-color: var(--accent, #0a84ff); cursor: pointer; }

.rar-topic-content .mov-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rar-topic-content .mov-metric {
    flex: 1 1 120px; padding: 9px 12px; text-align: center;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.1)); border-radius: 12px;
    background: var(--surface-soft, rgba(255, 255, 255, 0.6));
}
.rar-topic-content .mov-metric-k {
    display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted, #667085);
}
.rar-topic-content .mov-metric-v { display: block; margin-top: 3px; font-size: 18px; font-weight: 850; color: var(--text, #111318); }
.rar-topic-content .mov-metric-v.is-neg { color: var(--accent-strong, #0066cc); }
.rar-topic-content .mov-metric-v.is-pos { color: #c0392b; }

/* transmural — the star (transpulmonary) highlighted block */
.rar-topic-content .mov-star {
    margin-top: 4px; padding: 16px 18px; border-radius: 14px;
    border: 1px solid rgba(255, 159, 10, 0.5); background: rgba(255, 159, 10, 0.1);
}
.rar-topic-content .mov-star-tag {
    display: inline-block; margin-bottom: 8px; padding: 3px 11px; border-radius: 999px;
    background: #ff9f0a; color: #3d2a00; font-size: 11px; font-weight: 850;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.rar-topic-content .mov-star-title { font-size: 18px; font-weight: 850; color: var(--text, #111318); }
.rar-topic-content .mov-star-title .mov-star-eq { color: #a35e00; }
.rar-topic-content .mov-star p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text, #111318); }
.rar-topic-content .mov-star p strong { font-weight: 800; }

/* the other three transmurals — compact list */
.rar-topic-content .mov-tm-list { margin: 12px 0 0; padding-left: 18px; }
.rar-topic-content .mov-tm-list li { font-size: 13.5px; line-height: 1.55; color: var(--text, #111318); margin-bottom: 4px; }
.rar-topic-content .mov-tm-list b { font-weight: 800; }

/* effusion cause boxes (transudate / exudate) — same soft-box idiom */
.rar-topic-content .mov-cause-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rar-topic-content .mov-cause {
    padding: 13px 15px; border: 1px solid var(--line, rgba(15, 23, 42, 0.1));
    border-radius: 14px; background: var(--surface-soft, rgba(255, 255, 255, 0.6));
}
.rar-topic-content .mov-cause-h { font-size: 14px; font-weight: 850; color: var(--text, #111318); margin-bottom: 4px; }
.rar-topic-content .mov-cause p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text, #111318); }

/* small code-drawn schematic (Card 3) */
.rar-topic-content .mov-schematic { display: block; width: 100%; max-width: 300px; height: auto; margin: 6px auto 0; }

/* static figure (baked-in labels — no overlays) — kept compact */
.rar-topic-content .mov-figure { display: block; width: 100%; max-width: 400px; height: auto; margin: 8px auto 4px; }

/* tiny inline PL sparkline (Card 3, Page 3) */
.rar-topic-content .mov-pl-spark { display: block; width: 100%; max-width: 240px; height: auto; margin: 10px 0 2px; }

/* small reused disease icon inside a table row header (Page 4) */
.rar-topic-content .mov-dz-icon { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; margin-right: 8px; }

/* bulleted body inside a solid-text-card (one point per line) */
.rar-topic-content .mov-bullets { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.rar-topic-content .mov-bullets li { font-size: 16px; line-height: 1.55; color: var(--muted-strong, #475467); }
.rar-topic-content .mov-bullets li strong { color: var(--text, #111318); font-weight: 800; }
@media (max-width: 700px) { .rar-topic-content .mov-bullets li { font-size: 15px; } }

@media (max-width: 560px) {
    .rar-topic-content .mov-cause-grid { grid-template-columns: 1fr; }
}