/* FORRE.NU — pulse-viewer.css
 *
 * Stilen för den gemensamma bildvisaren (pulse-viewer.js). Ersätter tre
 * separata uppsättningar: .wlb i forre_pulse.css, .tw-gal-lb inline i
 * themes/FORRE_DARK/views/widgets/profile-gallery.php, och avatar-viewer.js
 * egna injicerade CSS.
 *
 * z-index sätts av JS (en enda konstant, 100100) — inte här. Pulse har redan
 * lager upp till 100048 och den gamla avatarvisaren låg på 100060, så ett värde
 * "strax över stabsdäckets 70" hade hamnat under halva sajten.
 */

/* Scrollås för den EGNA visaren. (Rättelse 2026-08-04: mitt första påstående
   att väggens visare saknade scrollås var fel — den använder nm-lock. Alla tre
   befintliga visare låser bakgrunden.) */
html.pv-lock { overflow: hidden; }
html.pv-lock body { overflow: hidden; }

.pv { position: fixed; inset: 0; display: flex; }
.pv[hidden] { display: none !important; }

.pv-bd { position: absolute; inset: 0; background: rgba(6, 8, 11, .92); }

.pv-shell {
  position: relative; display: flex; width: 100%; height: 100%;
}

/* ── Bildytan ──────────────────────────────────────────────────────────── */
.pv-media {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: grid; place-items: center; overflow: hidden;
}
.pv-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  transition: transform .18s ease; cursor: zoom-in;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.pv-img.is-zoom { transform: scale(2); cursor: zoom-out; }
.pv-har-side .pv-media { padding-bottom: 0; }

/* Stängkrysset ligger ALLTID överst i bildytan, aldrig i sidopanelen —
   annars flyttar det sig beroende på om det finns kommentarer. */
.pv-x {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(255, 255, 255, .10); color: #fff; font-size: 14px;
  transition: background .12s ease;
}
.pv-x:hover { background: rgba(255, 255, 255, .2); }
.pv-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pv-count {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(0, 0, 0, .5); padding: 3px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.pv-count[hidden] { display: none !important; }

.pv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 16px;
  transition: background .12s ease;
}
.pv-nav:hover { background: rgba(0, 0, 0, .78); }
.pv-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pv-nav[hidden] { display: none !important; }
.pv-l { left: 14px; } .pv-r { right: 14px; }

/* Metaraden tonar in ur botten. Ingen egen platta — bilden ska inte ramas in. */
.pv-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 9px;
  padding: 26px 16px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  color: #fff; pointer-events: none;
}
.pv-meta[hidden] { display: none !important; }
.pv-meta .pv-act { pointer-events: auto; }
.pv-av { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; flex: none; }
.pv-who { display: flex; flex-direction: column; line-height: 1.25; }
.pv-who b { font-size: 12.5px; font-weight: 800; }
.pv-when { font-size: 10.5px; color: #b9c3d1; }
.pv-act {
  margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px;
}
.pv-act:hover { background: rgba(255, 255, 255, .22); }

/* Filmremsan — renderas BARA vid fler än en bild (JS sätter hidden). */
.pv-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; gap: 6px; padding: 10px 12px;
  background: rgba(6, 8, 11, .92);
  overflow-x: auto; scrollbar-width: thin;
}
.pv-strip[hidden] { display: none !important; }
.pv-th {
  width: 58px; height: 42px; flex: none; padding: 0; border: 0; cursor: pointer;
  border-radius: 3px; overflow: hidden; background: #12161d; opacity: .45;
  transition: opacity .12s ease;
}
.pv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-th:hover { opacity: .8; }
.pv-th.on { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.pv-th:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Metaraden får inte hamna under filmremsan. */
.pv-strip:not([hidden]) ~ .pv-meta,
.pv-media:has(.pv-strip:not([hidden])) .pv-meta { bottom: 62px; }

/* ── Sidopanelen (förslag B, villkorad) ────────────────────────────────── */
.pv-side {
  width: 320px; flex: none; display: flex; flex-direction: column;
  background: var(--card); border-left: 1px solid var(--line);
}
.pv-side[hidden] { display: none !important; }
.pv-side-h {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.pv-side-b { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 11px; }
.pv-c { display: flex; gap: 9px; }
.pv-c-a { width: 24px; height: 24px; border-radius: 999px; flex: none; background: var(--line2); object-fit: cover; }
.pv-c-t { font-size: 12.5px; color: var(--ink2); line-height: 1.45; }
.pv-c-t b { display: block; font-size: 11.5px; color: var(--ink); font-weight: 800; }

/* ── Mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .pv-shell { flex-direction: column; }
  .pv-side { width: auto; max-height: 42vh; border-left: 0; border-top: 1px solid var(--line); }
  .pv-nav { width: 34px; height: 34px; font-size: 14px; }
  .pv-l { left: 8px; } .pv-r { right: 8px; }
  .pv-th { width: 48px; height: 36px; }
}

/* Respektera systeminställningen — men bara för rörelse, aldrig för synlighet. */
@media (prefers-reduced-motion: reduce) {
  .pv-img { transition: none; }
}


/* ── attachChrome: zoom på en visare vi INTE äger ───────────────────────────
   Klassen sätts av PulseViewer.attachChrome() på ytans egen <img>. Egen
   prefix (pvz-) så den aldrig kan krocka med ytans befintliga .is-*-klasser.
   Gäller idag profilgalleriets .tw-gal-lb-stage img. */
.pvz-zoom { transform: scale(2); cursor: zoom-out !important; transition: transform .18s ease; }
.tw-gal-lb-stage img,
[data-wlb-img] { cursor: zoom-in; transition: transform .18s ease;
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .pvz-zoom, .tw-gal-lb-stage img, [data-wlb-img] { transition: none; } }