/* ============================================================
   RAR PHYSIOLOGY · Mechanics · Page 3 — breathing-cycle graph.
   Interactive-specific only; shared atoms (.mov-btn/.mov-slider/
   .mov-metrics/.mov-readout) live in mechanics.css.
   ============================================================ */

.rar-topic-content .mov-cycle-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px;
}
.rar-topic-content .mov-cycle-controls .mov-btn.is-on {
    background: var(--accent, #0a84ff); border-color: var(--accent, #0a84ff); color: #fff;
}

.rar-topic-content .mov-cyc-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-cyc-svg { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; touch-action: none; cursor: ew-resize; }

/* two-lobe lung (right gutter) — inflates/deflates with the volume trace */
.rar-topic-content .mov-cyc-lung { transition: transform 0.08s linear; transform-box: view-box; }
.rar-topic-content .mov-cyc-lung-lobe { fill: rgba(14, 124, 134, 0.16); stroke: #0e7c86; stroke-width: 2.2; }
.rar-topic-content .mov-cyc-lung-tr { fill: #f0e6da; stroke: #d9c7b0; stroke-width: 1.4; }
.rar-topic-content .mov-cyc-lung-br { stroke: #d9c7b0; stroke-width: 3; stroke-linecap: round; }
.rar-topic-content .mov-cyc-lung-label { fill: #0e7c86; font-size: 10px; font-weight: 800; }

/* clickable variable labels + traces (focus/isolate) */
.rar-topic-content .mov-cyc-plabel { cursor: pointer; }
.rar-topic-content .mov-cyc-plabel:hover { text-decoration: underline; }
.rar-topic-content .mov-cyc-trace { cursor: pointer; }

.rar-topic-content .mov-cyc-frame { fill: none; stroke: var(--line, rgba(15, 23, 42, 0.14)); stroke-width: 1; }
.rar-topic-content .mov-cyc-grid { stroke: rgba(15, 23, 42, 0.06); stroke-width: 1; }
.rar-topic-content .mov-cyc-zero { stroke: rgba(15, 23, 42, 0.28); stroke-width: 1; stroke-dasharray: 2 2; }
.rar-topic-content .mov-cyc-ynum { fill: var(--muted, #667085); font-size: 9px; font-weight: 600; }
.rar-topic-content .mov-cyc-xnum { fill: var(--muted, #667085); font-size: 10px; font-weight: 600; }
.rar-topic-content .mov-cyc-xlabel { fill: var(--muted-strong, #475467); font-size: 10.5px; font-weight: 700; }
.rar-topic-content .mov-cyc-plabel { font-size: 11px; font-weight: 800; }
.rar-topic-content .mov-cyc-trace { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* no-flow markers */
.rar-topic-content .mov-cyc-marker { stroke: rgba(255, 159, 10, 0.7); stroke-width: 1.4; stroke-dasharray: 4 3; }

/* playhead + dots */
.rar-topic-content .mov-cyc-playhead { stroke: #111318; stroke-width: 1.6; }
.rar-topic-content .mov-cyc-dot { stroke: #fff; stroke-width: 1.6; }

/* subtle emphasis when frozen on a no-flow point */
.rar-topic-content .mov-cyc.is-noflow .mov-cyc-marker { stroke: #ff9f0a; stroke-width: 2; }
.rar-topic-content .mov-cyc.is-noflow .mov-cyc-playhead { stroke: #ff9f0a; }