/* Staff / portal help manual screenshots */
.staff-help-page .help-figures {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.staff-help-page .help-figure,
.help-section-block .help-figure {
    margin: 0;
}

/* Discourage save / open-image / drag-out of help screenshots (not a security boundary). */
.help-figure-frame {
    position: relative;
    display: block;
    max-width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

.help-figure-shield {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: default;
}

.staff-help-page .help-figure img,
.help-section-block .help-figure img,
.staff-help-page .help-step-figure img,
.help-section-block .help-step-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    background: var(--bs-body-bg, #fff);
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.staff-help-page .help-figure figcaption,
.help-section-block .help-figure figcaption {
    margin-top: 0.35rem;
    font-size: 0.875rem;
}

/* Captions follow .page data-theme (same as site.css text-muted fixes), not html[data-bs-theme] alone */
.page[data-theme="light"] .main .staff-help-page .help-figure figcaption,
.page[data-theme="light"] .main .help-section-block .help-figure figcaption {
    color: #495057 !important;
}

.page[data-theme="dark"] .main .staff-help-page .help-figure figcaption,
.page[data-theme="dark"] .main .help-section-block .help-figure figcaption {
    color: #adb5bd !important;
}

.portal-shell .help-figure figcaption {
    color: #adb5bd !important;
}

.staff-help-page .help-steps,
.help-section-block .help-steps {
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
}

.staff-help-page .help-steps > li,
.help-section-block .help-steps > li {
    margin-bottom: 1rem;
}

.staff-help-page .help-steps > li:last-child,
.help-section-block .help-steps > li:last-child {
    margin-bottom: 0;
}

.staff-help-page .help-step-figure,
.help-section-block .help-step-figure {
    margin: 0.5rem 0 0 0;
}