/* ============================================================
   SHARED · ZoomableFigure styles
   Scoped to .zf. The figure shows at natural size inline; a "⤢ Zoom"
   corner button opens a full-screen lightbox that shows the SAME figure
   enlarged (the node is moved, so it stays interactive). No in-figure
   pan/zoom. Reader text #111111.
   ============================================================ */

.zf { color: #111111; }

.zf-stage {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    outline: none;
}
.zf-stage:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }

.zf-svg { display: block; width: 100%; height: 100%; }
.zf-svg image { -webkit-user-drag: none; user-select: none; }

/* "⤢ Zoom" corner button (matches the static-figure expand affordance) */
.zf-expand {
    position: absolute; top: 8px; right: 8px; z-index: 6;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 11px; border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.94); color: #111111;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
}
.zf-expand:hover { background: #fff; border-color: rgba(15, 23, 42, 0.32); }
.zf-expand:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.zf--big .zf-expand { display: none; }   /* already enlarged in the lightbox */

/* caption strip (fixed below the figure — legible at any size) */
.zf-caption {
    box-sizing: border-box;
    margin: 10px auto 0;
    max-width: 760px;
    /* reserve space for ~2 lines so stepping a StepFigure never resizes the
       figure/lightbox (single-line steps keep the same height as the long ones) */
    min-height: 64px;
    padding: 10px 13px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.02);
    font-size: 13.5px; line-height: 1.5; color: #111111;
}
.zf-caption[hidden] { display: none; }
.zf-caption strong { font-weight: 800; }

/* extra controls (step player / toggles) appended by the builder */
.zf-controls { margin: 12px auto 0; max-width: 760px; }
.zf-controls:empty { display: none; }

/* ---- lightbox (full-screen popup of the moved figure) ---- */
.zf-lightbox {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.zf-lightbox__backdrop {
    position: absolute; inset: 0;
    background: rgba(8, 12, 24, 0.72);
    backdrop-filter: blur(2px);
}
.zf-lightbox__panel {
    position: relative; z-index: 1;
    max-width: min(1400px, 96vw); max-height: 94vh;
    overflow: auto;
    background: #fff; border-radius: 18px;
    padding: 44px 26px 24px;
    box-shadow: 0 24px 70px rgba(8, 12, 24, 0.5);
}
.zf-lightbox__x {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: #fff; color: #111111; font-size: 17px; cursor: pointer;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
}
.zf-lightbox__x:hover { border-color: rgba(15, 23, 42, 0.34); }
body.zf-lightbox-open { overflow: hidden; }

/* the moved figure, enlarged.
   DEFINITE width on the wrap so the lightbox size is fixed and DOESN'T follow
   the (per-step) caption text width — otherwise a short StepFigure caption
   shrink-wraps the panel and the figure jumps size between steps. */
.zf--big { width: min(1320px, 94vw); margin: 0 auto; }
.zf--big .zf-stage { width: 100%; max-width: min(1320px, 94vw); }
.zf--big .zf-caption,
.zf--big .zf-controls { max-width: min(1320px, 94vw); }

@media (max-width: 640px) {
    .zf-lightbox { padding: 10px; }
    .zf-lightbox__panel { padding: 40px 12px 14px; border-radius: 14px; }
}