/* The canonical images stay unchanged; this viewer only changes their display. */
.rm-guide-image-trigger { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--rm-home-primary-strong); cursor: zoom-in; text-align: center; }
.rm-guide-image-trigger img { display: block; width: 100%; height: auto; }
.rm-guide-image-trigger > span { display: flex; min-height: 44px; align-items: center; justify-content: center; font-size: var(--rm-type-body); font-weight: 700; }
.rm-guide-image-trigger:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.rm-guide-image-dialog { width: min(1000px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--rm-home-border-defined); border-radius: 16px; background: #fff; color: var(--rm-home-text); }
.rm-guide-image-dialog::backdrop { background: rgba(20,29,47,.55); }
html.rm-guide-image-open { overflow: hidden; }
.rm-guide-image-host > [hidden] { display: none !important; }
.rm-guide-viewer { display: flex; flex-direction: column; width: 100%; height: min(850px, calc(100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); min-height: 0; overflow: hidden; }
.rm-guide-viewer-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rm-home-border-defined); }
.rm-guide-viewer-heading h2 { min-width: 0; margin: 0; font-size: var(--rm-type-card-title); font-weight: 800; overflow-wrap: anywhere; }
.rm-guide-viewer button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #bfcee3; border-radius: 8px; background: #fff; color: var(--rm-home-primary-strong); font-size: var(--rm-type-body); font-weight: 700; cursor: pointer; }
.rm-guide-viewer-heading button { flex-shrink: 0; max-width: 140px; }
.rm-guide-viewer button:hover:not(:disabled) { background: var(--rm-home-primary-soft); }
.rm-guide-viewer button:disabled { opacity: .45; cursor: default; }
.rm-guide-viewer-tools { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px 0; }
.rm-guide-viewer-tools output { min-width: 44px; font-size: var(--rm-type-body); text-align: center; font-variant-numeric: tabular-nums; }
.rm-guide-viewer-status { flex: 0 0 auto; margin: 0; padding: 8px 18px; color: var(--rm-home-text-secondary); font-size: var(--rm-type-support); line-height: 1.5; }
.rm-guide-viewer-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; background: var(--rm-home-surface-soft, #f4f7fb); touch-action: pan-x pan-y pinch-zoom; }
.rm-guide-viewer-scroll .rm-guide-viewer-image { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.rm-guide-viewer-scroll .rm-guide-viewer-image[data-zoom="1"] { width: 175%; }
.rm-guide-viewer-scroll .rm-guide-viewer-image[data-zoom="2"] { width: 250%; }
.rm-guide-viewer-scroll .rm-guide-viewer-image[data-zoom="3"] { width: 400%; }
.rm-guide-viewer [hidden] { display: none !important; }
.rm-guide-image-trigger:focus-visible, .rm-guide-viewer :is(button,[tabindex]):focus-visible { outline: 3px solid #8babec; outline-offset: -3px; }
@media (max-width: 767px) {
    .rm-guide-viewer-heading, .rm-guide-viewer-tools { padding-inline: 12px; }
    .rm-guide-viewer-status { padding-inline: 12px; }
}