/* Shared viewer styling. Each concept sets --lb-bg, --lb-fg, --lb-font. */
html.lb-open { overflow: hidden; }
.lb {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--lb-bg, #fff); color: var(--lb-fg, #111);
  font-family: var(--lb-font, inherit);
  opacity: 0; transition: opacity .25s ease;
}
.lb[hidden] { display: none; }
.lb.in { opacity: 1; }
.lb-top, .lb-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
}
.lb-bottom { padding: 8px 12px max(10px, env(safe-area-inset-bottom)); }
.lb-count { font-size: 12px; letter-spacing: .12em; padding-left: 4px; font-variant-numeric: tabular-nums; }
.lb-cap { margin: 0; font-size: 13px; line-height: 1.35; text-align: center; opacity: .75; flex: 1; }
.lb-btn {
  min-width: 44px; min-height: 44px; padding: 0 12px;
  background: none; border: 0; color: inherit; font: inherit;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.lb-btn:focus-visible { outline: 1px solid currentColor; outline-offset: -6px; }
.lb-btn[hidden] { visibility: hidden; display: inline-block; }
.lb-stage {
  position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; touch-action: pan-y;
}
.lb-media {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain; display: block;
}
.lb-film { width: min(100%, 1280px); max-height: 100%; background: #000; }
@media (min-width: 900px) {
  .lb-top, .lb-bottom { padding-left: 28px; padding-right: 28px; }
  .lb-stage { padding: 0 28px; }
}
@media (prefers-reduced-motion: reduce) { .lb { transition: none; } }