/* Photo viewer styles, copied from titanx.css (Bootstrap variables replaced).
   Full-screen on a phone; caption beside the photo on wide screens. */
.txlb { position: fixed; inset: 0; z-index: 2200; display: flex; background: rgba(8,10,14, calc(.98 * var(--txlb-fade, 1))); color: #fff; }
.txlb[hidden] { display: none; }
html.txlb-open { overflow: hidden; }
.txlb-stage { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.txlb.zoomed .txlb-stage { cursor: grab; }
.txlb-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; }
.txlb-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .25rem; padding: calc(.5rem + env(safe-area-inset-top, 0px)) .75rem .5rem; z-index: 3; pointer-events: none; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.txlb-top > * { pointer-events: auto; }
.txlb-grow { flex: 1; }
.txlb-count { font-size: .9rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.txlb-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; text-decoration: none; cursor: pointer; }
.txlb-btn:hover, .txlb-btn:focus-visible { background: rgba(255,255,255,.28); color: #fff; }
.txlb-btn:focus-visible, .txlb-post:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.txlb-prev, .txlb-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.txlb-prev { left: .75rem; }
.txlb-next { right: .75rem; }
.txlb-prev[hidden], .txlb-next[hidden] { display: none; }
.txlb-cap { flex: 0 0 340px; background: var(--bg); color: var(--ink); padding: 4.5rem 1.25rem 1.25rem; overflow-y: auto; }
.txlb-cap[hidden] { display: none; }
@media (min-width: 900px) { .txlb.has-cap .txlb-top { right: 340px; } .txlb.has-cap .txlb-next { right: calc(340px + .75rem); } }
.txlb-title { font-weight: 700; }
.txlb-meta { font-size: .8rem; color: var(--ink-2); margin-bottom: .75rem; }
.txlb-text { white-space: pre-wrap; word-wrap: break-word; margin-bottom: 1rem; }
.txlb-post { font-weight: 600; font-size: .9rem; }
/* Phones and narrow windows: caption becomes a strip over the bottom of the photo. */
@media (max-width: 899.98px) {
  .txlb { flex-direction: column; }
  .txlb-cap { position: absolute; left: 0; right: 0; bottom: 0; flex: none; max-height: 34vh; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(0,0,0,.82) 30%); color: #fff; }
  .txlb-meta { color: rgba(255,255,255,.75); }
  .txlb-post { color: #fff; }
  .txlb-prev, .txlb-next { display: none; }
  .txlb.bare .txlb-top, .txlb.bare .txlb-cap { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .txlb-img { transition: none !important; } }