/* Original images open at full aspect ratio; only thumbnails retain their crops. */
html{scrollbar-gutter:stable}
html.image-preview-open{overflow:hidden}
.preview-eyebrow-button{display:inline-flex;align-items:center;gap:9px;max-width:100%;border:0;padding:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;transition:color .25s}
.preview-open-icon{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;border:1px solid currentColor;border-radius:4px;opacity:.85;transition:box-shadow .18s,background .18s}
.preview-image-button{display:block;width:100%;padding:0;border:0;border-radius:5px;background:none;color:inherit;cursor:zoom-in}
.preview-image-button img{transition:outline-color .18s;outline:1px solid transparent;outline-offset:3px}
.image-preview:hover .preview-eyebrow-button,.image-preview:focus-within .preview-eyebrow-button{color:inherit}
.image-preview:hover .preview-open-icon,.image-preview:focus-within .preview-open-icon{background:#ffffff12;border-color:#e6ecee;box-shadow:none;opacity:1}
.image-preview:hover .preview-image-button img{outline-color:transparent}
.preview-eyebrow-button:focus-visible,.preview-image-button:focus-visible,.full-preview-close:focus-visible{outline:2px solid #579fa5;outline-offset:5px}
.image-preview-dialog{width:calc(100vw - 48px);max-width:1600px;height:calc(100dvh - 48px);max-height:none;padding:0;border:1px solid #a9bec050;border-radius:8px;background:#1c2a30;color:#e1e8eb;box-shadow:0 24px 90px #0008;overflow:hidden}
.image-preview-dialog::backdrop{background:#060b0edb;backdrop-filter:blur(5px)}
.full-preview-panel{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.full-preview-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 14px 10px 20px;background:#1c2a30}
.full-preview-header p{font-size:11px;line-height:1.5;letter-spacing:.05em;margin:0;color:#d4e0e4}
.full-preview-close{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;padding:0;border:1px solid #a9bec077;border-radius:50%;background:transparent;color:#e1e8eb;cursor:pointer;transition:color .25s,border-color .18s,box-shadow .18s}
.full-preview-close:hover{color:#f0f2f3;border-color:#e6ecee;background:#ffffff12;box-shadow:none}
.full-preview-stage{min-width:0;min-height:0;padding:12px;background:linear-gradient(130deg,#8999a4,#576d7b)}
.full-preview-stage img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;box-shadow:none;border-radius:0}
@media(max-width:750px){.image-preview-dialog{width:calc(100vw - 20px);height:calc(100dvh - 24px)}.full-preview-header{padding:9px 10px 9px 14px;gap:12px}.full-preview-stage{padding:6px}.full-preview-header p{font-size:10px}.preview-eyebrow-button{gap:7px}.preview-open-icon{width:19px;height:19px;flex-basis:19px}}
@media(prefers-reduced-motion:reduce){.preview-eyebrow-button,.preview-open-icon,.preview-image-button img,.full-preview-close{transition:none}}
/* Match the client tiles' circular northeast-arrow control. */
.preview-eyebrow-button{width:100%;justify-content:space-between;gap:12px}
.preview-open-icon{width:26px;height:26px;flex-basis:26px;border-radius:50%;border-color:#d9dfe56b;color:#f0f2f3;background:#22282d20;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}
.image-preview:hover .preview-open-icon,.image-preview:focus-within .preview-open-icon{transform:translate(2px,-2px)}
@media(max-width:750px){.preview-open-icon{width:22px;height:22px;flex-basis:22px}}
/* Transparent source diagrams retain their original white canvas. */
.full-preview-stage img{background:#fff}
/* Keep existing thumbnail compositions intact when they become preview buttons. */
.detail-screen > .preview-image-button{height:100%;overflow:hidden}
.role-comparison .preview-image-button{height:350px;overflow:hidden;box-shadow:0 15px 25px #233d4c35}
.billing-visual .preview-image-button,.shortcuts-visual .preview-image-button{overflow:hidden;border-radius:7px}
.detail-visual > figcaption{font-size:10px;letter-spacing:.04em;color:#eef2f5;margin-bottom:14px}
.preview-open-icon svg{display:block;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1000px){.role-comparison .preview-image-button{height:300px}}
@media(max-width:750px){.role-comparison .preview-image-button{height:290px}}
@media(max-width:420px){.role-comparison .preview-image-button{height:240px}}
.citi-navigation-diagram .preview-image-button,.ereq-phone-crop > .preview-image-button{height:100%}
.citi-case .citi-navigation-diagram .preview-image-button img{width:100%;height:100%;max-width:100%;margin:0;object-fit:contain}

/* Scale to the viewport, then fit the frame around the image with equal padding. */
.image-preview-dialog{width:calc(100vw - 32px);max-width:none;height:calc(100dvh - 32px);max-height:none;margin:auto;min-height:0}
.full-preview-panel{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.full-preview-header{min-width:0}
.full-preview-header p{min-width:0;overflow-wrap:anywhere}
.full-preview-stage{display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;min-height:0;min-width:0}
.full-preview-stage img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;background:transparent}
@media(max-width:750px){.image-preview-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}.full-preview-stage{padding:4px}}

/* Optional close-up mode shares the standard overlay chrome and adds panning. */
.full-preview-zoom-controls{display:flex;align-items:center;gap:7px;margin-left:auto}.full-preview-zoom-controls[hidden]{display:none}
.full-preview-zoom-controls button{height:30px;min-width:30px;border:1px solid #a9bec077;border-radius:20px;padding:0 10px;background:transparent;color:#e1e8eb;font:inherit;font-size:12px;cursor:pointer}
.full-preview-zoom-controls button:focus-visible{outline:2px solid #579fa5;outline-offset:3px}
.image-preview-zoom .full-preview-stage{display:block;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a8b9c0 #576d7b}
.image-preview-zoom .full-preview-stage img{width:auto;height:auto;max-width:none;max-height:none;object-fit:initial;object-position:top left;background:white}
/* Standalone preview headings share the same rollover as figure previews. */
.preview-eyebrow-button:is(:hover,:focus-visible) .preview-open-icon{transform:translate(2px,-2px);border-color:currentColor;background:#ffffff12;box-shadow:none;opacity:1}
.full-preview-zoom-controls button:hover{border-color:#e6ecee;background:#ffffff12;color:#f0f2f3}

/* Static mobile previews retain the same image and caption layout. */
.preview-eyebrow-button.preview-static,.preview-image-button.preview-static{cursor:default}
/* Keep hover movement and focus outlines outside the artwork clipping boundary. */
figure.image-preview,figure.image-preview>figcaption{overflow:visible}
figure.image-preview>.preview-image-button{overflow:hidden}
/* Shared Deep Silver overlay palette; original image canvases stay intact. */
.image-preview-dialog{border-color:#aab8c366;background:#343c43;color:#eef1f3;box-shadow:0 24px 90px #10151b80}
.image-preview-dialog::backdrop{background:#11161cdb}
.full-preview-header{background:linear-gradient(120deg,#49545d,#343d45 65%,#303940)}
.full-preview-header p{color:#edf1f4}
.full-preview-stage{background:radial-gradient(ellipse 130% 100% at 20% -20%,#d8e1e744,transparent 70%),linear-gradient(135deg,#7f8e9a,#6e7f8d 60%,#596974)}
.full-preview-close,.full-preview-zoom-controls button{border-color:#b4c0ca88;color:#eef1f4}
.full-preview-close:hover,.full-preview-zoom-controls button:hover{border-color:#e0e7ec;background:#dfe7ed14;color:#fff}
.image-preview-zoom .full-preview-stage{scrollbar-color:#b2bfc9 #596974}