/* ============================================================
   RAR PHYSIOLOGY · Mechanics · Page 1 — thorax pump interactive.
   Scoped under .mov-thorax / .rar-topic-content. Reuses the shared
   .spg-readout box; adds only the toggle, SVG overlay, and note.
   ============================================================ */

.mov-thorax { display: block; margin-top: 6px; }

/* segmented Inspiration / Expiration toggle */
.mov-thorax-toggle {
    display: inline-flex;
    border: 1px solid var(--line, rgba(15, 23, 42, 0.12));
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-soft, rgba(255, 255, 255, 0.58));
    margin-bottom: 12px;
}
.mov-thorax-btn {
    appearance: none; border: 0; background: transparent;
    color: var(--muted-strong, #475467);
    font-size: 13px; font-weight: 700; padding: 8px 20px; cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mov-thorax-btn.is-on { background: var(--accent, #0a84ff); color: #fff; }

/* stage / figure */
.mov-thorax-stage {
    border: 1px solid var(--line, rgba(15, 23, 42, 0.08));
    border-radius: var(--radius-sm, 14px);
    background: #fff;
    padding: 6px;
}
.mov-thorax-svg { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }

/* diaphragm curve (the moving element) — bold, with a white halo so it
   reads over both the red muscle and the white background */
.mov-thorax-diaphragm {
    fill: none;
    stroke: #c0392b;
    stroke-width: 5;
    stroke-linecap: round;
    paint-order: stroke;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
    transition: stroke 0.2s ease;
}

/* abdomen fill beneath the diaphragm — masks the baked-in low dome so
   raising the curve leaves no ghost */
.mov-thorax-abdomen { fill: #e8cabb; fill-opacity: 0.82; }

/* motion arrows — cross-fade between states */
#movArrowHead path { fill: #0a6dd6; }
.mov-thorax-arrow {
    stroke: #0a6dd6;
    stroke-width: 4;
    stroke-linecap: round;
    paint-order: stroke;
    filter: drop-shadow(0 0 1.4px rgba(255, 255, 255, 0.95));
}
.mov-thorax-arrows { transition: opacity 0.4s ease; }
.mov-thorax .mov-thorax-arrows--exp { opacity: 0; }
.mov-thorax.is-expiration .mov-thorax-arrows--exp { opacity: 1; }
.mov-thorax.is-expiration .mov-thorax-arrows--insp { opacity: 0; }

.mov-thorax-lbl {
    fill: #0a3d6b;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 3.5px;
    stroke-linejoin: round;
}

.mov-thorax-readout {
    margin-top: 14px;
    text-align: center;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.5;
}

.mov-thorax-note {
    display: flex; align-items: baseline; gap: 8px;
    margin: 8px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--text, #111318);
}
.mov-thorax-note-tag {
    flex-shrink: 0;
    padding: 2px 9px; border-radius: 999px;
    background: #ff9f0a; color: #3d2a00;
    font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.mov-thorax-note strong { font-weight: 800; }

@media (max-width: 560px) {
    .mov-thorax-svg { max-width: 100%; }
}