/* ============================================================
   RAR MEDICAL MICROBIOLOGY · Diphtheria Toxin step-walkthrough styles
   Scoped to .rar-topic-content. Region shapes live in the ZoomableFigure
   SVG overlay; the transport + DtxR toggle live in .zf-controls.
   ============================================================ */

/* SVG step regions (native in the image viewBox — track zoom) */
.rar-topic-content .dts-region {
    fill: rgba(10, 132, 255, 0.02);
    stroke: rgba(10, 132, 255, 0.28);
    stroke-width: 3;
    stroke-dasharray: 12 10;
    cursor: pointer;
    transition: fill .18s, stroke .18s, stroke-width .18s;
    outline: none;
}
.rar-topic-content .dts-region.is-active {
    fill: rgba(10, 132, 255, 0.16);
    stroke: #0a84ff;
    stroke-width: 6;
    stroke-dasharray: none;
}
.rar-topic-content .dts-region:focus-visible { stroke: #0066cc; stroke-dasharray: none; }
.rar-topic-content .dts-region--dtxr.is-on { fill: rgba(34, 160, 107, 0.14); stroke: #22a06b; stroke-dasharray: none; }
.rar-topic-content .dts-region--dtxr.is-off { fill: rgba(148, 163, 184, 0.14); stroke: #94a3b8; stroke-dasharray: none; }

/* transport player */
.rar-topic-content .dts-player {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 12px 16px;
}
.rar-topic-content .dts-transport { display: inline-flex; align-items: center; gap: 8px; }
.rar-topic-content .dts-btn {
    min-width: 34px; height: 34px; padding: 0 9px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.16);
    background: #fff; color: #111111; font-size: 15px; cursor: pointer;
}
.rar-topic-content .dts-btn:hover { border-color: rgba(15, 23, 42, 0.34); }
.rar-topic-content .dts-btn--pp { font-size: 12px; letter-spacing: 1px; }
.rar-topic-content .dts-dots { display: inline-flex; gap: 7px; margin-left: 4px; }
.rar-topic-content .dts-dot {
    width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px;
    background: #cfd6e2; cursor: pointer; transition: width .2s, background .2s;
}
.rar-topic-content .dts-dot.is-active { width: 24px; background: #0a84ff; }

.rar-topic-content .dts-toggle {
    padding: 7px 13px; border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(148, 163, 184, 0.12); color: #111111;
    font-size: 12.5px; font-weight: 750; cursor: pointer;
}
.rar-topic-content .dts-toggle.is-on { border-color: #22a06b; background: rgba(34, 160, 107, 0.12); color: #157a4e; }

.rar-topic-content .dts-cap-n {
    display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px;
    background: rgba(10, 132, 255, 0.12); color: #0066cc; font-size: 11px; font-weight: 800;
}