/* ============================================================
   RAR PHYSIOLOGY · Mechanics · Page 2 — Boyle + pneumothorax SVGs.
   Interactive-specific only; shared atoms (.mov-btn/.mov-slider/
   .mov-metrics/.mov-readout/.mov-flag) live in mechanics.css.
   ============================================================ */

/* shared control rows */
.rar-topic-content .mov-boyle-controls,
.rar-topic-content .mov-pneumo-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px;
}

.rar-topic-content .mov-boyle-stage,
.rar-topic-content .mov-pneumo-stage {
    border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
    border-radius: var(--radius-sm, 14px);
    background: #fff; padding: 8px;
}
.rar-topic-content .mov-boyle-svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; }
.rar-topic-content .mov-pneumo-svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }

/* ---- Boyle ---- */
.rar-topic-content .mov-boyle-lung {
    fill: rgba(10, 132, 255, 0.1); stroke: var(--accent, #0a84ff); stroke-width: 2.5;
    transition: ry 0.08s linear;
}
.rar-topic-content .mov-boyle-trachea { fill: #f0e6da; stroke: #d9c7b0; stroke-width: 1.5; }
.rar-topic-content .mov-boyle-airlabel { fill: var(--muted-strong, #475467); font-size: 11px; font-weight: 700; }
.rar-topic-content .mov-boyle-palabel { fill: var(--accent-strong, #0066cc); font-size: 12px; font-weight: 800; }
.rar-topic-content .mov-boyle-flow { stroke-width: 5; stroke-linecap: round; transition: opacity 0.2s ease; }
.rar-topic-content .mov-boyle-flow.is-in { stroke: #0a84ff; }
.rar-topic-content .mov-boyle-flow.is-out { stroke: #c0392b; }
#movFlowHead path { fill: #0a84ff; }
.rar-topic-content .mov-boyle-flow.is-out ~ * #movFlowHead path { fill: #c0392b; }

/* law box */
.rar-topic-content .mov-law {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
    margin-top: 12px; padding: 11px 14px;
    border: 1px solid rgba(10, 132, 255, 0.22); border-radius: 12px;
    background: rgba(10, 132, 255, 0.05);
}
.rar-topic-content .mov-law-eq { font-size: 17px; font-weight: 850; color: var(--accent-strong, #0066cc); }
.rar-topic-content .mov-law-live { font-size: 15px; font-weight: 800; color: var(--text, #111318); font-variant-numeric: tabular-nums; }
.rar-topic-content .mov-law-const { font-size: 12px; font-weight: 700; color: var(--muted-strong, #475467); }

/* ---- pneumothorax ---- */
.rar-topic-content .mov-pn-chest {
    fill: none; stroke: #d9c7b0; stroke-width: 7;
    transition: rx 0.06s linear, ry 0.06s linear;
}
.rar-topic-content .mov-pn-lung {
    fill: rgba(200, 90, 80, 0.28); stroke: #c0392b; stroke-width: 2.5;
    transition: rx 0.06s linear, ry 0.06s linear;
}
.rar-topic-content .mov-pn-ppl { fill: var(--accent-strong, #0066cc); font-size: 14px; font-weight: 850; }
.rar-topic-content .mov-pneumo.is-open .mov-pn-ppl { fill: var(--danger, #ff453a); }

#movPnHead path { fill: #667085; }
.rar-topic-content .mov-pn-arrow { stroke-width: 3.5; stroke-linecap: round; opacity: 0.4; transition: opacity 0.3s ease; }
.rar-topic-content .mov-pn-arrow--in { stroke: #c0392b; }
.rar-topic-content .mov-pn-arrow--out { stroke: #0e7c86; }
/* the opposing springs become obvious once the seal is broken */
.rar-topic-content .mov-pneumo.is-open .mov-pn-arrow { opacity: 1; }