/* ============================================================
   gallery-room.css — K87 (+K95 favorites, +K99 caption disclosure + Prints section, +K101 video section, +K104 video theater).
   Shared room chrome for /gallery/ and
   the category sub-rooms. gallery.css?v=K30 stays byte-held;
   everything K83 carried page-local moves here, plus the
   category index block and video cards. No animation anywhere
   => prefers-reduced-motion safe by construction. Dark-only
   surface (image grid is not a heavy-read container).
   ============================================================ */

/* ---------- Withheld cards + empty state (K83, relocated) ---------- */
.gallery-plate-withheld { border-style: dashed; }
.gallery-withheld-inner { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.gallery-withheld-note { font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-default); color: var(--c-fg-dim); margin: 0; letter-spacing: 0.01em; }
.gallery-empty { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--c-fg-dim); margin: 0; padding: var(--s-7) 0; grid-column: 1 / -1; text-align: center; letter-spacing: var(--ls-wide); }

/* ---------- Consent interstitial (K83, relocated) ---------- */
.gallery-consent { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(10, 10, 10, 0.92); }
.gallery-consent[data-open="true"] { display: flex; align-items: center; justify-content: center; padding: var(--s-5); }
.gallery-consent-box { max-width: 34rem; background: var(--c-bg); border: var(--bw-thin) solid var(--c-accent); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.gallery-consent-label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--c-accent); margin: 0; }
.gallery-consent-text { font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-default); color: var(--c-fg); margin: 0; }
.gallery-consent-fine { font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-default); color: var(--c-fg-dim); margin: 0; }
.gallery-consent-actions { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.gallery-consent-btn { font-family: var(--font-mono); font-size: var(--t-sm); background: none; border: var(--bw-thin) solid var(--c-border); color: var(--c-fg); padding: var(--s-3) var(--s-4); cursor: pointer; }
.gallery-consent-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.gallery-consent-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gallery-consent-btn--confirm { border-color: var(--c-accent); color: var(--c-accent); }

/* ---------- Category index block (main room only) ---------- */
.gallery-category-index { margin: var(--s-7) 0; }
.gallery-category-index-heading { font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--c-fg); margin: 0 0 var(--s-3) 0; }
.gallery-category-index-aside { font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-default); color: var(--c-fg-dim); margin: 0 0 var(--s-4) 0; }
.gallery-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s-4); }
.gallery-cat-card { display: flex; flex-direction: column; gap: var(--s-2); border: var(--bw-thin) solid var(--c-border); padding: var(--s-4); text-decoration: none; background: none; }
.gallery-cat-card:hover { border-color: var(--c-accent); }
.gallery-cat-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gallery-cat-name { font-family: var(--font-headline); font-size: var(--t-lg); color: var(--c-fg); }
.gallery-cat-meta { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); color: var(--c-fg-dim); }

/* ---------- Video cards ---------- */
.gallery-plate-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; border: 0; cursor: pointer; }
.gallery-plate-video[poster] { aspect-ratio: auto; }

/* ---------- Sub-room back link ---------- */
.gallery-room-back { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); margin: 0 0 var(--s-5) 0; }
.gallery-room-back a { color: var(--c-fg-dim); text-decoration: none; border-bottom: var(--bw-thin) solid var(--c-border); }
.gallery-room-back a:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ---------- K94 navigability: controls bar (search + series chips) ---------- */
.gallery-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3) var(--s-4); margin: 0 0 var(--s-5) 0; padding: 0 0 var(--s-4) 0; border-bottom: var(--bw-thin) solid var(--c-border); }
.gallery-search-label { display: flex; flex-direction: column; gap: var(--s-2); flex: 1 1 18rem; }
.gallery-search-tag { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--c-fg-dim); }
.gallery-search { font-family: var(--font-mono); font-size: var(--t-sm); background: var(--c-bg); color: var(--c-fg); border: var(--bw-thin) solid var(--c-border); padding: var(--s-3) var(--s-4); width: 100%; }
.gallery-search::placeholder { color: var(--c-fg-dim); }
.gallery-search:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-color: var(--c-accent); }
.gallery-result-count { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); color: var(--c-fg-dim); white-space: nowrap; padding-top: var(--s-2); }
.gallery-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); flex: 1 1 100%; }
.gallery-chip { display: inline-flex; align-items: baseline; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); background: none; color: var(--c-fg-dim); border: var(--bw-thin) solid var(--c-border); padding: var(--s-2) var(--s-3); cursor: pointer; }
.gallery-chip:hover { border-color: var(--c-accent); color: var(--c-fg); }
.gallery-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gallery-chip.is-active { border-color: var(--c-accent); color: var(--c-accent); }
.gallery-chip-count { opacity: 0.6; }
.gallery-plate-room { display: inline-block; margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-accent); }

/* ---------- K95 favorites: per-plate star + Saved toggle ---------- */
.gallery-plate { position: relative; }
.gallery-star { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 3; width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-family: var(--font-mono); font-size: var(--t-base); line-height: 1; background: rgba(10, 10, 10, 0.72); color: var(--c-fg-dim); border: var(--bw-thin) solid var(--c-border); cursor: pointer; }
.gallery-star:hover { color: var(--c-fg); border-color: var(--c-accent); }
.gallery-star:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gallery-star.is-saved { color: var(--c-accent); border-color: var(--c-accent); }
.gallery-saved-toggle { display: inline-flex; align-items: baseline; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; background: none; color: var(--c-fg-dim); border: var(--bw-thin) solid var(--c-border); padding: var(--s-2) var(--s-3); cursor: pointer; white-space: nowrap; }
.gallery-saved-toggle:hover { border-color: var(--c-accent); color: var(--c-fg); }
.gallery-saved-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gallery-saved-toggle.is-active { border-color: var(--c-accent); color: var(--c-accent); }
.gallery-saved-star { font-size: var(--t-sm); }
.gallery-saved-label { letter-spacing: var(--ls-wide); }
.gallery-saved-count { opacity: 0.6; }

/* ---------- K95 lightbox randomizer (injected button) ---------- */
.gallery-lightbox-random { position: absolute; right: calc(-1 * var(--s-6)); top: calc(50% + 3.25rem); transform: translateY(-50%); z-index: 2; background: var(--c-bg); color: var(--c-fg); border: var(--bw-base) solid var(--c-border-strong); font-family: var(--font-mono); font-size: var(--t-base); padding: var(--s-2) var(--s-4); cursor: pointer; }
.gallery-lightbox-random:hover { color: var(--c-bg); background: var(--c-accent); border-color: var(--c-accent); }
.gallery-lightbox-random:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (max-width: 760px) {
  .gallery-lightbox-random { top: calc(-1 * var(--s-5)); left: 0; right: auto; bottom: auto; transform: none; }
}

/* ---------- K105 lightbox/theater [ share ] (injected button; rides the
   .gallery-lightbox-random base class above with OWN offsets — the base is
   absolutely positioned, two same-class buttons would overlap; same
   specificity, later in the cascade wins) ---------- */
.gallery-lightbox-share { top: calc(50% + 6.5rem); }
@media (max-width: 760px) {
  .gallery-lightbox-share { top: calc(-1 * var(--s-5)); left: 50%; right: auto; bottom: auto; transform: translateX(-50%); }
}

/* --- K96: per-plate print buy-link (renders only when manifest plate.print_url
   is present; link-out only) --- */
.gallery-print-link {
  display: inline-block;
  margin: 0.3rem 0.75rem 0.65rem;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--c-accent, #c41e3a);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.gallery-print-link:hover,
.gallery-print-link:focus-visible {
  color: var(--c-fg, #f0ebe5);
}

/* ---------- K99 caption disclosure ([ more ]/[ less ] toggle) ---------- */
.gallery-plate-caption.is-collapsed .gallery-cap-extra { display: none; }
.gallery-cap-toggle { display: inline-block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); background: none; border: 0; border-bottom: var(--bw-thin) solid var(--c-border); color: var(--c-fg-dim); padding: 0 0 1px 0; margin: var(--s-2) 0 0 0; cursor: pointer; }
.gallery-cap-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); }
.gallery-cap-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- K99 Prints section (lobby; membership = plate.print_url presence) ---------- */
.gallery-prints { margin: var(--s-7) 0; padding-top: var(--s-5); border-top: var(--bw-thin) solid var(--c-border); }
.gallery-prints-heading { font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--c-fg); margin: 0 0 var(--s-3) 0; }
.gallery-prints-aside { font-family: var(--font-mono); font-size: var(--t-xs); line-height: var(--lh-default); color: var(--c-fg-dim); margin: 0 0 var(--s-4) 0; }

/* ---------- K101 video section (own sub-grid below the image grid in mixed-kind rooms) ---------- */
.gallery-videos { margin: var(--s-7) 0 0 0; padding-top: var(--s-5); border-top: var(--bw-thin) solid var(--c-border); }
.gallery-videos-heading { font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: var(--ls-mega); text-transform: uppercase; color: var(--c-fg); margin: 0 0 var(--s-4) 0; }

/* ---------- K104 video theater (stage video; chrome classes are the images-
   lightbox ones from gallery.css?v=K30, byte-held; the dim is the static
   lightbox backdrop — zero animation added here) ---------- */
.gallery-theater-video { display: block; max-width: min(100vw - 4rem, 1100px); max-height: calc(100vh - 10rem); min-width: min(60vw, 36rem); height: auto; background: #000; border: var(--bw-thin) solid var(--c-border-strong); }
@media (max-width: 760px) {
  .gallery-theater-video { min-width: 0; max-width: calc(100vw - 2rem); }
}

/* ---------- K106 pagination + browse-all (mono pager; static chrome;
   the browse toggle reuses .gallery-chip -- .gallery-browse-toggle is an
   unstyled hook, K103 precedent) ---------- */
.gallery-pager { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); color: var(--c-fg-dim); margin: var(--s-4) 0; }
.gallery-pager-btn { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); background: none; border: var(--bw-thin) solid var(--c-border); color: var(--c-fg-dim); padding: var(--s-2) var(--s-3); cursor: pointer; }
.gallery-pager-btn:hover:not(:disabled) { color: var(--c-accent); border-color: var(--c-accent); }
.gallery-pager-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gallery-pager-btn:disabled { opacity: 0.4; cursor: default; }
.gallery-pager-state { color: var(--c-fg-dim); }

/* ---------- K106 back-to-top (fixed above the ambient bar; under the overlays) ---------- */
.gallery-top-btn { position: fixed; right: var(--s-4); bottom: 3.5rem; z-index: 30; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--ls-wide); background: var(--c-bg); border: var(--bw-thin) solid var(--c-border-strong); color: var(--c-fg-dim); padding: var(--s-2) var(--s-3); cursor: pointer; }
.gallery-top-btn:hover { color: var(--c-accent); border-color: var(--c-accent); }
.gallery-top-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.gallery-top-btn[hidden] { display: none; }