/*
 * The photo lightbox (Sngine's .lightbox from _js_templates.tpl, opened by core.js; niguro-lightbox.js adds the
 * parts in __ng_lightbox.tpl and marks it .ng-lb). niguroapp's Cafe lightbox (niguro template-parts/lightbox.php,
 * niguroapp skins/popups.css): a dark stage, the photo fitted with rounded corners, 40px round glass controls
 * (white at .14, .24 on hover), the post's photos as a strip of rounded thumbnails with a ring on the current one,
 * a short fade/scale in. Facebook's structure around it: the post (header, caption, post bar, comments) in a card
 * panel on the right with the comment box pinned at its foot.
 * Phones and tablets (under 1024px): the photo fills the screen, the author, caption and post bar sit over its
 * foot on a dark wash, and the comments come up as a bottom sheet (the theme's sheet: handle, 24px corners).
 * Colours: the stage is the reels viewer's (#0b0c0e, niguro.css "Reels"); everything else is a Niguro token.
 * The video (live) lightbox is left as Sngine's.
 */

/* ------------------------------- */
/* The frame */
/* ------------------------------- */

.lightbox.ng-lb { --ng-lb-panel: 380px; --ng-lb-bar: 64px; overflow: hidden; overscroll-behavior: contain; background: #0b0c0e; color: #fff; }
@media (min-width: 1440px) { .lightbox.ng-lb { --ng-lb-panel: 400px; } }
@media (min-width: 1024px) and (max-width: 1279.98px) { .lightbox.ng-lb { --ng-lb-panel: 360px; } }
.ng-lb .lightbox-container { display: flex; width: 100%; height: 100%; padding: 0; box-shadow: none; }
.ng-lb.is-closing { opacity: 0 !important; transition: opacity .16s ease; }
/* a popup opened from the viewer (who reacted, reshare, report) dims the viewer too */
body.lightbox-open .modal-backdrop { z-index: 10000; }

/* the stage: the photo, the bar, the arrows, the strip */
.ng-lb .lightbox-preview {
  position: relative; display: block; flex: 1 1 auto; min-width: 0; width: auto; max-width: none; height: 100%;
  overflow: hidden; background: transparent; text-align: left; touch-action: none; -webkit-user-select: none; user-select: none; outline: 0;
}
.ng-lb__canvas { position: absolute; inset: var(--ng-lb-bar) 76px 24px; display: flex; align-items: center; justify-content: center; }
.ng-lb.has-thumbs .ng-lb__canvas { bottom: 96px; }
.ng-lb .ng-lb__canvas > img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0; object-fit: contain;
  border-radius: var(--ng-r-md); transform-origin: 50% 50%; will-change: transform;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .15s ease; cursor: zoom-in; -webkit-user-drag: none;
  animation: ng-lb-in .2s cubic-bezier(.2, .8, .2, 1) both;
}
.ng-lb.is-zoomed .ng-lb__canvas > img { cursor: grab; }
.ng-lb.is-moving .ng-lb__canvas > img { transition: none; }
.ng-lb.is-zoomed.is-moving .ng-lb__canvas > img { cursor: grabbing; }
.ng-lb.is-loading .ng-lb__canvas > img { opacity: .35; }
.ng-lb .lightbox-preview.x-blured .ng-lb__canvas > img, .ng-lb__thumb.is-blur { filter: blur(18px); }
@keyframes ng-lb-in { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }

/* loading: a small ring in the middle of the stage */
.ng-lb__spin { position: absolute; z-index: 2; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 3px solid hsl(0 0% 100% / .2); border-top-color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s; animation: ng-lb-spin .8s linear infinite; }
.ng-lb.is-loading .ng-lb__spin { opacity: 1; transition-delay: .15s; }
@keyframes ng-lb-spin { to { rotate: 360deg; } }

/* round glass buttons (niguroapp's lightbox controls; the reels viewer's buttons) */
.ng-lb__btn, .ng-lb .lightbox-next, .ng-lb .lightbox-prev {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: hsl(0 0% 100% / .14); color: #fff; cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  transition: background-color .15s ease, transform .1s ease, opacity .15s ease;
}
.ng-lb__btn:hover, .ng-lb .lightbox-next:hover, .ng-lb .lightbox-prev:hover { background: hsl(0 0% 100% / .24); color: #fff; }
.ng-lb__btn:active, .ng-lb .lightbox-next:active, .ng-lb .lightbox-prev:active { transform: scale(.95); }
.ng-lb__btn .ng-ico { width: 20px; height: 20px; }
.ng-lb__btn[disabled] { opacity: .4; pointer-events: none; }
.ng-lb :is(.ng-lb__btn, .ng-lb__pct, .lightbox-next, .lightbox-prev, .ng-lb__thumb, .ng-lb__sclose):focus-visible { outline: 2px solid var(--ng-brand); outline-offset: 2px; }

/* the bar: close and "2 / 7" on the left; zoom, rotate, full screen, download and the post on the right */
.ng-lb__bar {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: var(--ng-lb-bar); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: linear-gradient(180deg, hsl(0 0% 0% / .45), transparent); pointer-events: none; transition: opacity .2s ease;
}
.ng-lb__bar > * { pointer-events: auto; }
.ng-lb__start, .ng-lb__tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ng-lb__count { padding: 0 6px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: hsl(0 0% 100% / .9); white-space: nowrap; }
/* zoom: one glass pill, − 100% + */
.ng-lb__zoom { display: flex; align-items: center; height: 40px; padding: 0; border-radius: 999px; background: hsl(0 0% 100% / .14); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.ng-lb__zoom .ng-lb__btn { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ng-lb__zoom .ng-lb__btn:hover { background: hsl(0 0% 100% / .14); }
.ng-lb__pct { min-width: 52px; height: 40px; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.ng-lb__pct:hover { background: hsl(0 0% 100% / .14); }
.ng-lb__full .ng-lb__full-off, .ng-lb.is-full .ng-lb__full .ng-lb__full-on { display: none; }
.ng-lb.is-full .ng-lb__full .ng-lb__full-off { display: block; }
/* Sngine's Download links, moved into the bar: Download is a glass button; "View Original" stays for its script only */
.ng-lb .ng-lb__tools .lightbox-download { position: static; display: contents; font-size: 0; }
.ng-lb .ng-lb__tools .lightbox-download a { opacity: 1; }
.ng-lb .ng-lb__tools .lightbox-download a + a { display: none; }
.ng-lb__dl { display: none; }

/* previous / next (Sngine's own, js_lightbox-slider; it shows and hides them) */
.ng-lb .lightbox-next, .ng-lb .lightbox-prev { position: absolute; z-index: 3; top: 50%; width: 46px; height: 46px; margin-top: -23px; opacity: 1; }
.ng-lb .lightbox-next { right: 16px; left: auto; }
.ng-lb .lightbox-prev { left: 16px; right: auto; }
.ng-lb .lightbox-next .ng-ico, .ng-lb .lightbox-prev .ng-ico { width: 22px; height: 22px; }
.ng-lb .lightbox-next > .fa, .ng-lb .lightbox-prev > .fa { display: none; }
.ng-lb:not(.is-ready) :is(.lightbox-next, .lightbox-prev) { visibility: hidden; }
html[dir="rtl"] .ng-lb .lightbox-next { right: auto; left: 16px; }
html[dir="rtl"] .ng-lb .lightbox-prev { left: auto; right: 16px; }
html[dir="rtl"] .ng-lb :is(.lightbox-next, .lightbox-prev) .ng-ico { transform: scaleX(-1); }

/* the post's photos (niguroapp's rounded thumbnails, a ring on the current one) */
.ng-lb__thumbs {
  position: absolute; z-index: 3; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 8px; max-width: calc(100% - 32px);
  padding: 4px; overflow-x: auto; scrollbar-width: none; transition: opacity .2s ease;
}
.ng-lb__thumbs[hidden] { display: none; }
.ng-lb__thumb {
  flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--ng-r-sm); background: #222 center / cover no-repeat;
  opacity: .55; cursor: pointer; transition: opacity .15s ease, box-shadow .15s ease;
}
.ng-lb__thumb:hover { opacity: .85; }
.ng-lb__thumb.is-current { opacity: 1; box-shadow: 0 0 0 2px #0b0c0e, 0 0 0 4px #fff; }

/* Sngine's own close and "Download - View Original" places are not used (the bar has them) */
.ng-lb .lightbox-data > .clearfix, .ng-lb .lightbox-exit { display: none; }
.ng-lb__shead { display: none; }

/* ------------------------------- */
/* The panel: the post, its bar and comments on the card colour */
/* ------------------------------- */

.lightbox.ng-lb .lightbox-data {
  position: relative; display: flex; flex-direction: column; flex: none; width: var(--ng-lb-panel); height: 100%;
  background: var(--ng-card); color: var(--ng-ink); text-align: left; animation: ng-lb-panel .22s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ng-lb-panel { from { opacity: 0; translate: 16px 0; } to { opacity: 1; translate: none; } }
.ng-lb .lightbox-post { --ng-pg: 16px; flex: 1 1 auto; min-height: 0; height: auto; padding: 0; display: flex; flex-direction: column; }
.ng-lb .lightbox-post > .loader { margin: 24px auto; }
.ng-lb .lightbox-post > .js_scroller {
  flex: 1 1 auto; min-height: 0; height: 100% !important; display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.ng-lb .lightbox-post > .js_scroller > .loader { margin: 24px auto; }
/* the post's top: header 16px from the panel's top, caption, then the post bar */
.ng-lb .ng-lbp { flex: none; padding: 0 !important; }
.ng-lb .ng-lbp > .post-header { padding: 16px var(--ng-pg) 0; }
.ng-lb .ng-lbp > .post-text { margin: 10px 0 0; padding: 0 var(--ng-pg); font-size: 15px; line-height: 1.55; color: var(--ng-ink); overflow-wrap: anywhere; }
.ng-lb .ng-lbp > .post-text a { color: var(--ng-brand); }
.ng-lb .ng-lbp > [data-readmore-toggle] { display: inline-block; margin: 4px var(--ng-pg) 0; font-size: 14px; font-weight: 600; color: var(--ng-brand); }
.ng-lb .ng-lbp > .post-actions.ng-pbar { margin-top: 12px; border-bottom: 1px solid var(--ng-line); }
/* the comments: Sngine's list scrolls with the post; its comment box (first in Sngine's markup) is pinned at the
   foot. The two wrappers step aside (display: contents) so the box can be the scroller's last, sticky child;
   Sngine's scripts still find everything inside .post-comments. */
.ng-lb .lightbox-post .post-footer, .ng-lb .lightbox-post .post-comments { display: contents !important; }
.ng-lb .post-comments > .comments-filter { flex: none; margin: 0; padding: 10px var(--ng-pg) 0; }
.ng-lb .post-comments > .js_comments { flex: none; margin: 0; padding: 4px var(--ng-pg) 12px !important; }
.ng-lb .post-comments > .js_comments:empty { padding: 0 !important; }
.ng-lb .post-comments > .js_comments > .comment:first-child { padding-top: 8px; }
.ng-lb .post-comments > .js_see-more { flex: none; padding: 0 var(--ng-pg) 12px; }
.ng-lb .post-comments > .js_comments-filter-loader { flex: none; }
.ng-lb .post-comments > .js_comment-form {
  order: 9; position: sticky; z-index: 2; bottom: 0; flex: none; margin-top: auto !important;
  padding: 10px var(--ng-pg) 12px; border-top: 1px solid var(--ng-line); background: var(--ng-card);
}
.ng-lb .post-comments > .js_comment-form.x-hidden { display: none; }
/* the emoji menu opens upwards from the pinned box */
.ng-lb .post-comments > .js_comment-form .emoji-menu { top: auto; bottom: calc(100% + 6px); }
/* the reactions tray is not clipped by the panel's edge */
.ng-lb .ng-lbp .reactions-container { z-index: 4; }

/* ------------------------------- */
/* Phones and tablets: the photo fills the screen; the post sits over its foot; comments are a sheet */
/* ------------------------------- */

@media (max-width: 1023.98px) {
  .lightbox.ng-lb { --ng-lb-bar: calc(60px + env(safe-area-inset-top, 0px)); }
  .ng-lb .lightbox-container { display: block; position: relative; }
  .ng-lb .lightbox-preview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .ng-lb__canvas, .ng-lb.has-thumbs .ng-lb__canvas { inset: 0; }
  .ng-lb .ng-lb__canvas > img { border-radius: 0; cursor: default; }
  .ng-lb__bar { padding: calc(10px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px)); gap: 8px; }
  .ng-lb__btn, .ng-lb__zoom, .ng-lb__pct { height: 40px; }
  .ng-lb__btn { background: hsl(0 0% 0% / .32); }
  .ng-lb__zoom { background: hsl(0 0% 0% / .32); }
  .ng-lb .lightbox-next, .ng-lb .lightbox-prev { width: 40px; height: 40px; margin-top: -20px; background: hsl(0 0% 0% / .32); }
  .ng-lb .lightbox-next { right: 10px; }
  .ng-lb .lightbox-prev { left: 10px; }
  html[dir="rtl"] .ng-lb .lightbox-next { left: 10px; }
  html[dir="rtl"] .ng-lb .lightbox-prev { right: 10px; }
  .ng-lb .ng-lb__thumbs { display: none; }

  /* the post over the photo's foot (white on a dark wash) */
  .lightbox.ng-lb .lightbox-data {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; width: auto; height: auto; max-height: 52%;
    background: linear-gradient(180deg, transparent, hsl(0 0% 0% / .55) 32px, hsl(0 0% 0% / .78)); color: #fff;
    padding: 28px 0 calc(6px + env(safe-area-inset-bottom, 0px)); animation: ng-lb-foot .22s ease both; transition: opacity .2s ease;
  }
  @keyframes ng-lb-foot { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: none; } }
  .ng-lb:not(.is-sheet) .lightbox-post > .js_scroller { overflow: visible; }
  .ng-lb:not(.is-sheet) .post-comments > * { display: none !important; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-header { padding-top: 0; }
  .ng-lb:not(.is-sheet) .ng-lbp :is(.post-author, .post-time, .post-time a, .post-text, .post-text a, [data-readmore-toggle]) { color: #fff !important; }
  .ng-lb:not(.is-sheet) .ng-lbp .post-time { opacity: .82; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text { max-height: 30vh; overflow-y: auto; font-size: 14.5px; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-actions.ng-pbar { margin-top: 8px; border-color: hsl(0 0% 100% / .18); border-bottom: 0; }
  .ng-lb:not(.is-sheet) .ng-pbar :is(.action-btn, .ng-pbar__n, .ng-pbar__n--static) { color: #fff !important; }
  .ng-lb:not(.is-sheet) .ng-pbar .action-btn :is(.action-icon, .action-icon *, svg, svg *) { color: #fff !important; fill: #fff !important; }
  .ng-lb:not(.is-sheet) .ng-pbar .action-btn:hover, .ng-lb:not(.is-sheet) .ng-pbar button.action-btn:hover { background: hsl(0 0% 100% / .14); }
  .ng-lb:not(.is-sheet) .ng-rxstats__i { box-shadow: 0 0 0 2px hsl(0 0% 0% / .6); }

  /* tap the photo: the bar, arrows and post step aside (and come back on the next tap) */
  .ng-lb.is-bare :is(.ng-lb__bar, .lightbox-next, .lightbox-prev), .ng-lb.is-bare:not(.is-sheet) .lightbox-data { opacity: 0; pointer-events: none; }

  /* the comments sheet */
  .ng-lb.is-sheet .lightbox-data {
    top: auto; height: 82%; height: 82dvh; max-height: none; padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-radius: 24px 24px 0 0; background: var(--ng-card); color: var(--ng-ink); box-shadow: 0 -8px 32px hsl(0 0% 0% / .3);
    animation: ng-sheet-up .28s cubic-bezier(.2, .8, .2, 1) both;
  }
  .ng-lb.is-sheet .lightbox-data, .ng-lb .lightbox-data.is-dragging { padding-left: max(0px, calc(50% - 320px)); padding-right: max(0px, calc(50% - 320px)); }
  .ng-lb.is-sheet-closing .lightbox-data { animation: ng-sheet-down .24s cubic-bezier(.4, 0, .6, 1) both; }
  .ng-lb .lightbox-data.is-dragging { animation: none; transition: none; }
  .ng-lb.is-sheet .ng-lb__shead {
    position: relative; display: flex; align-items: center; justify-content: center; flex: none; min-height: 52px; padding: 14px 48px 8px;
    border-bottom: 1px solid var(--ng-line); touch-action: none; cursor: grab;
  }
  .ng-lb.is-sheet .ng-lb__shead::before { content: ""; position: absolute; top: 7px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--ng-line); }
  .ng-lb__shead b { font-size: 16px; font-weight: 700; color: var(--ng-ink-strong); }
  .ng-lb__sclose { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--ng-fill); color: var(--ng-ink); }
  .ng-lb__sclose:hover { background: var(--ng-fill-2); }
  .ng-lb__sclose .ng-ico { width: 18px; height: 18px; }
  .ng-lb.is-sheet .lightbox-post > .js_scroller { overflow-y: auto; }
  .ng-lb.is-sheet .ng-lbp > .post-header { padding-top: 12px; }
  /* the photo dims behind the sheet */
  .ng-lb.is-sheet .lightbox-preview::after { content: ""; position: absolute; z-index: 3; inset: 0; background: hsl(0 0% 0% / .45); animation: ng-lb-dim .2s ease both; }
  @keyframes ng-lb-dim { from { opacity: 0; } to { opacity: 1; } }
}
/* phones: zoom by pinching (the bar keeps close, "2 / 7", download and the post) */
@media (max-width: 767.98px) {
  .ng-lb__zoom, .ng-lb__rotate, .ng-lb__full { display: none !important; }
}
/* the photos without a post (comment and message photos, a profile picture with no album): the stage only */
.ng-lb--nodata .ng-lb__canvas { inset: var(--ng-lb-bar) 24px 24px; }
@media (max-width: 1023.98px) { .ng-lb--nodata .ng-lb__canvas { inset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ng-lb .ng-lb__canvas > img, .lightbox.ng-lb .lightbox-data, .ng-lb.is-sheet .lightbox-data, .ng-lb.is-sheet-closing .lightbox-data, .ng-lb.is-sheet .lightbox-preview::after { animation: none; transition: none; }
  .ng-lb.is-closing { transition: none; }
  .ng-lb__spin { animation-duration: 2s; }
}

/* [reactions fix] The panel's entrance animations (ng-lb-panel, ng-lb-foot, ng-sheet-up) kept their last frame
   (fill "both"), which leaves a translate / transform on .lightbox-data. That made the panel the containing block of
   Sngine's position: fixed reactions tray, so the tray niguro.js placed by the button was drawn off the panel (behind
   the photo, or off screen) and hovering / long-pressing React seemed to do nothing. The panel now drops the
   animation's end state; only the closing sheet keeps it (it stays down until it is removed). */
.lightbox.ng-lb .lightbox-data, .ng-lb.is-sheet .lightbox-data { animation-fill-mode: backwards; }
.ng-lb.is-sheet-closing .lightbox-data { animation-fill-mode: both; }

/* [caption clamp] Phones and tablets: the caption over the photo shows 2 lines and an ellipsis (it showed in full,
   up to 30vh, and covered the photo). niguro-lightbox.js marks a caption that runs past 2 lines (.ng-lb-cap,
   role="button", aria-expanded); a tap, Enter or Space opens it in full, scrolling within 40vh with the photo dimmed
   behind (.is-cap-open), and closes it again. Links, hashtags and mentions inside still open. Sngine's readmore
   (js_readmore) is not used here: its inline heights and "Read more" link step aside while the caption is clamped.
   Line breaks and paragraphs run on as one line of text while it is clamped, so the 2 lines are words, not a gap. */
@media (max-width: 1023.98px) {
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text.ng-lb-cap {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    height: auto !important; max-height: calc(2 * 1.55em) !important; overflow: hidden; cursor: pointer;
    -webkit-tap-highlight-color: transparent; border-radius: 4px;
  }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text.ng-lb-cap:not(.is-open) br { display: none; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text.ng-lb-cap:not(.is-open) :is(p, div) { display: inline; margin: 0; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text.ng-lb-cap:not(.is-open) :is(p, div) + :is(p, div)::before { content: " "; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text.ng-lb-cap.is-open {
    display: block; -webkit-line-clamp: unset; line-clamp: none; max-height: 40vh !important;
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text.ng-lb-cap:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-text.ng-lb-cap ~ [data-readmore-toggle] { display: none !important; }
  /* open: the foot may grow past 52% to fit the 40vh caption; the photo dims a little behind it */
  .lightbox.ng-lb.is-cap-open:not(.is-sheet) .lightbox-data { max-height: 88%; }
  .ng-lb.is-cap-open:not(.is-sheet) .lightbox-preview::after {
    content: ""; position: absolute; z-index: 2; inset: 0; background: hsl(0 0% 0% / .35); pointer-events: none; animation: ng-lb-dim .2s ease both;
  }
  /* [online dot] Sngine's .js_scroller (overflow-y: auto, inline) starts at the avatar's top edge, so the online
     dot (top: -2px, a 2px ring) lost its top 4px. The header starts 4px lower inside the scroller and the foot's
     top padding is 4px less, so nothing moves. */
  .lightbox.ng-lb:not(.is-sheet) .lightbox-data { padding-top: 24px; }
  .ng-lb:not(.is-sheet) .ng-lbp > .post-header { padding-top: 4px; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .ng-lb.is-cap-open:not(.is-sheet) .lightbox-preview::after { animation: none; }
}

/* ---- niguro [slideshow] (begin) — (owner, 2026-10-19) a set of photos moves on every 5s (niguro-lightbox.js
   "[slideshow]"). A thin line across the stage's top fills over the 5s (the reels' progress line: 2px, white .3
   track, brand fill) and dims while it holds; Play / Pause is the bar's first glass button; a post of up to 10
   photos shows dots in place of "3 / 7" (the count stays for screen readers). ---- */
.ng-lb__prog { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 2px; background: hsl(0 0% 100% / .3); direction: ltr; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.ng-lb__prog > i { position: absolute; inset: 0; background: var(--ng-brand); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.ng-lb.has-auto.is-auto-on .ng-lb__prog { opacity: 1; }
.ng-lb.has-auto.is-auto-on.is-auto-held .ng-lb__prog { opacity: .5; }
html[dir="rtl"] .ng-lb__prog > i { transform-origin: 100% 50%; }
.ng-lb__play .ng-lb__i-pause, .ng-lb.is-auto-on .ng-lb__play .ng-lb__i-play { display: none; }
.ng-lb.is-auto-on .ng-lb__play .ng-lb__i-pause { display: block; }
.ng-lb__play .ng-lb__i-play { transform: translateX(1px); }
.ng-lb__play[hidden] { display: none; }
/* the dots: the current one is a short pill */
.ng-lb__dots { display: none; align-items: center; gap: 5px; padding: 0 6px; direction: ltr; }
.ng-lb.has-dots .ng-lb__dots { display: flex; }
.ng-lb__dots > i { width: 6px; height: 6px; flex: none; border-radius: 3px; background: hsl(0 0% 100% / .45); transition: width .2s ease, background-color .2s ease; }
.ng-lb__dots > i.is-current { width: 16px; background: #fff; }
.ng-lb.has-dots .ng-lb__count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 1023.98px) {
  .ng-lb__prog { top: env(safe-area-inset-top, 0px); }
}
@media (prefers-reduced-motion: reduce) {
  .ng-lb__prog, .ng-lb__dots > i { transition: none; }
}
/* ---- niguro [slideshow] (end) ---- */

/* ---- niguro [lightbox headline] (begin) — (owner, 2026-10-19) a news story's headline in the viewer's panel
   (__ng_news_lightbox.tpl .ng-lbp__title; news.css made it 16px / 700, the phone foot's caption rule 14.5px) is the
   excerpt's size (.ng-lbp__exText: 14px, 13.5px over the photo on phones) at weight 500. The viewer only: the feed's
   cards and the story page keep their headlines. Specificity is above news.css's, which loads after this file. ---- */
.lightbox.ng-lb .ng-lbp > .ng-lbp__title { font-size: 14px; font-weight: 500; line-height: 1.45; }
@media (max-width: 1023.98px) {
  .lightbox.ng-lb:not(.is-sheet) .ng-lbp > .ng-lbp__title { font-size: 13.5px; }
}
/* ---- niguro [lightbox headline] (end) ---- */

/* ---- niguro [lightbox photo caption] (begin) — (owner, 2026-10-19) a news story picture's caption (the cover's
   cover_caption, an article picture's or gallery's figcaption) as a small pill on the photo's bottom-right corner,
   8px in, on a dark translucent wash so it reads on light photos too (the stage is dark in day and night alike).
   Up to 2 lines and 60% of the photo's width, with an ellipsis (the full text in its tooltip). niguro-news-post.js
   places it on the photo's box and, on phones, above the post over the photo's foot; hidden while zoomed and under
   the comments sheet. ---- */
.ng-lb .ng-lb__imgcap {
  position: absolute; z-index: 1; left: 6px; top: 6px; max-width: 60%; margin: 0; padding: 2px 6px; border-radius: 6px; /* (owner) top-left, smaller */
  background: hsl(0 0% 0% / .5); color: #fff; font-size: 9.5px; font-weight: 500; line-height: 1.35; text-align: left;
  text-shadow: 0 1px 1px hsl(0 0% 0% / .35); overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: auto; cursor: default;
}
.ng-lb .ng-lb__imgcap[hidden], .ng-lb.is-zoomed .ng-lb__imgcap, .ng-lb.is-sheet .ng-lb__imgcap { display: none; }
/* ---- niguro [lightbox photo caption] (end) ---- */