/* ============================================================
   SHARED · StepFigure styles
   Transport (.stepfig-*) + a default step-region look. Pages usually
   pass their own regionClass to style active vs dimmed regions; the
   transport + caption chip are shared. Reader text #111111.
   ============================================================ */

/* default step region (overridable via opts.regionClass) */
.stepfig-region {
    fill: rgba(10, 132, 255, 0.02);
    stroke: rgba(10, 132, 255, 0.28);
    stroke-width: 3;
    stroke-dasharray: 12 10;
    cursor: pointer; outline: none;
    transition: fill .18s, stroke .18s, stroke-width .18s;
}
.stepfig-region.is-active {
    fill: rgba(10, 132, 255, 0.16);
    stroke: #0a84ff; stroke-width: 6; stroke-dasharray: none;
}
.stepfig-region:focus-visible { stroke: #0066cc; stroke-dasharray: none; }

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

.stepfig-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;
}