/* "View image" viewer (assets/image-viewer.js) and the buttons that open it.
   After Meetup's photo modal and Telegram's media viewer toolbar on Mobbin. Colours: Brand Style Guide tokens only. */
.iv-view-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid color-mix(in srgb,var(--brand-bg,#fff) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--brand-dark,#170a24) 55%,transparent);color:var(--brand-bg,#fff);font:600 15px/1 var(--brand-font-body,inherit);letter-spacing:.01em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,border-color .2s,transform .2s}
.iv-view-btn:hover{background:color-mix(in srgb,var(--brand-dark,#170a24) 75%,transparent);border-color:var(--brand-accent,#d9b24c)}
.iv-view-btn:focus-visible{outline:2px solid var(--brand-accent,#d9b24c);outline-offset:3px}
.iv-view-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* On light backgrounds (below a video, in the Featured player's details) */
.iv-view-btn--light{border-color:var(--brand-line,#e4e3e6);background:var(--brand-bg,#fff);color:var(--brand-text,#1d1a21);-webkit-backdrop-filter:none;backdrop-filter:none}
.iv-view-btn--light:hover{background:var(--brand-surface,#f5f4f6);border-color:var(--brand-primary-2,#542675)}
/* Small pill over a list thumbnail */
.iv-view-btn--chip{position:absolute;z-index:2;min-height:34px;padding:0 12px;font-size:13px;gap:6px}
.iv-view-btn--chip svg{width:15px;height:15px}

.iv-view-btn[hidden]{display:none}
.page-hero-actions{margin-top:1.5rem;display:flex;justify-content:center}
.vh-actions{margin:18px 0 0}
.fa-actions .iv-view-btn{min-height:48px;flex:1 1 auto;justify-content:center;font-weight:700}

/* The viewer */
.iv{width:min(1200px,calc(100vw - 32px));height:min(900px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:18px;background:var(--brand-dark,#170a24);color:var(--brand-bg,#fff);display:none;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.iv[open]{display:flex}
.iv::backdrop{background:color-mix(in srgb,var(--brand-dark,#170a24) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.iv.is-full,.iv:fullscreen{width:100vw;height:100dvh;border-radius:0;background:#000}
.iv-bar{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;border-bottom:1px solid color-mix(in srgb,var(--brand-bg,#fff) 12%,transparent)}
.iv-title{flex:1;min-width:0;margin:0;font:700 16px/1.3 var(--brand-font-body,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-tools{display:flex;align-items:center;gap:6px;flex:none}
.iv-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;min-width:40px;padding:0 14px;border:1px solid color-mix(in srgb,var(--brand-bg,#fff) 22%,transparent);border-radius:999px;background:color-mix(in srgb,var(--brand-bg,#fff) 8%,transparent);color:inherit;font:600 14px/1 var(--brand-font-body,inherit);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.iv-btn:hover{background:color-mix(in srgb,var(--brand-bg,#fff) 16%,transparent)}
.iv-btn[aria-pressed="true"]{border-color:var(--brand-accent,#d9b24c);color:var(--brand-accent-light,#ead59d)}
.iv-btn:focus-visible{outline:2px solid var(--brand-accent,#d9b24c);outline-offset:2px}
.iv-btn--icon{padding:0}
.iv-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.iv-btn[hidden]{display:none}
.iv-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:16px;overflow:hidden;touch-action:pinch-zoom}
.iv-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;cursor:zoom-in;opacity:0;transition:opacity .25s;user-select:none;-webkit-user-select:none}
.iv-stage.is-ready .iv-img{opacity:1}
.iv-stage.is-ready .iv-loading{display:none}
.iv-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:color-mix(in srgb,var(--brand-bg,#fff) 70%,transparent)}
.iv-stage.is-zoomed{place-items:safe center;overflow:auto;padding:0;cursor:grab;touch-action:pan-x pan-y pinch-zoom}
.iv-stage.is-zoomed .iv-img{max-width:none;max-height:none;border-radius:0;cursor:zoom-out}
.iv-stage.is-dragging,.iv-stage.is-dragging .iv-img{cursor:grabbing}
.iv-hint{margin:0;padding:10px 16px 14px;text-align:center;font-size:13px;color:color-mix(in srgb,var(--brand-bg,#fff) 62%,transparent)}
.iv-hint[hidden]{display:none}

@media (max-width:640px){
  .iv{width:100vw;height:100dvh;border-radius:0}
  .iv-bar{padding:10px 10px 10px 16px;padding-top:max(10px,env(safe-area-inset-top))}
  .iv-btn span{display:none}
  .iv-btn{padding:0}
  .iv-stage{padding:8px}
  .iv-hint{padding-bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.iv-img,.iv-view-btn,.iv-btn{transition:none}}