/* ---------- post-import review screen ---------- */
.review-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; padding: 26px 26px 6px; flex-wrap: wrap; }
.review-title { font-family: 'Fredoka', sans-serif; font-size: 28px; margin: 0 0 3px; }
.review-sub { color: var(--muted); font-size: 14px; margin: 0; }
.review-sub b { color: var(--mint); }
/* Review toolbar: one wrapping bar of small, consistent controls, grouped by
   purpose (selection · bulk-edit · destructive). Groups are pill-shaped panels
   so the row reads as three tidy clusters rather than a scatter of controls. */
/* Sticky under the topbar so bulk actions stay reachable while scrolling a long
   run. top offset = measured topbar height (--topbar-h, set at runtime since the
   topbar height varies with wrapping/zoom). Opaque bg + blur so thumbs scroll
   cleanly underneath; z-index below the topbar (20) but above the grid cards. */
.review-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 26px;
  position: sticky; top: calc(var(--topbar-h, 64px) - 1px); z-index: 15;
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); }
.rtb-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); }
.rtb-actions { margin-left: auto; }        /* destructive cluster to the right */
.rtb-edit { flex: 1 1 auto; min-width: 0; }
/* compact styled checkbox rows (Select all / Scenery only) */
.rtb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text); cursor: pointer; white-space: nowrap; margin: 0; }
.rtb-check input { width: 15px; height: 15px; accent-color: var(--coral); cursor: pointer; }
.rtb-count { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 64px; }
.rtb-scenery { padding-left: 8px; border-left: 1px solid var(--border); }
.rtb-input { flex: 0 0 auto; width: 150px; padding: 5px 12px; border-radius: 999px; border-bottom-right-radius: 0; border-top-right-radius: 0;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 12.5px; outline: none; }
.rtb-input:focus { border-color: var(--coral); }
/* The bulk-edit group is what flexes as the toolbar tightens; within it, only the
   "label people" field is allowed to shrink (it's over-long) -- the tag field and
   the type select keep their size. */
.rtb-input.rtb-grow { flex: 1 1 120px; width: auto; min-width: 90px; }
.rtb-type { flex: 0 0 auto; }
.rtb-group .btn-danger, .rtb-group .btn-accent, .rtb-group .btn-ghost { margin: 0; }

/* Input + its action button, joined into ONE connected pill so it reads as a
   field-with-a-submit rather than two loose controls. Used by both the review
   toolbar and the browse/search select bar (Tag / Label). The input's right side
   and the button's left side flatten and share a seam. */
.field-btn { display: inline-flex; align-items: stretch; }
.field-btn-grow { flex: 1 1 auto; min-width: 0; }
.field-btn > input,
.gallery-bulkbar .field-btn > input { border-top-right-radius: 0;
  border-bottom-right-radius: 0; border-right: none; }
.rtb-group .field-btn > button,
.gallery-bulkbar .field-btn > button { border-top-left-radius: 0; border-bottom-left-radius: 0;
  border: 1px solid var(--border); border-left: none;
  background: var(--surface-2); align-self: stretch; }
.rtb-group .field-btn > button:hover,
.gallery-bulkbar .field-btn > button:hover { background: var(--surface); border-color: var(--coral); color: var(--coral); }
/* keep the input's focus ring reading across the seam */
.field-btn > input:focus { border-color: var(--coral); position: relative; z-index: 1; }

/* ---------- gallery select-mode bulk bar (main grid) ----------
   The action bar only exists while Select is toggled on, so default browse stays
   clean. Mirrors the review toolbar's pill look for consistency. */
/* Sticky under the topbar (like the review toolbar). Deliberately does NOT
   include the browserbar (tags + sort) above it -- only the bulk action bar
   sticks, so the tag/sort area scrolls away normally. */
.gallery-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 26px;
  position: sticky; top: calc(var(--topbar-h, 64px) - 1px); z-index: 15;
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border); }
.gallery-bulkbar .bulk-count { font-size: 12px; color: var(--muted);
  white-space: nowrap; min-width: 68px; font-weight: 600; }
.gallery-bulkbar .bulk-sep { width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--border); }
.gallery-bulkbar .bulk-tag-input { flex: 0 1 220px; min-width: 140px; padding: 5px 12px;
  border-radius: 999px; border-bottom-right-radius: 0; border-top-right-radius: 0; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-family: inherit; font-size: 12.5px; outline: none; }
.gallery-bulkbar .bulk-tag-input:focus { border-color: var(--coral); }
/* in the joined Tag/Label pill the input carries the group's flex */
.gallery-bulkbar .field-btn { flex: 0 1 260px; min-width: 150px; }
.gallery-bulkbar .field-btn > .bulk-tag-input { flex: 1 1 auto; min-width: 0; }
.gallery-bulkbar .btn-danger { margin: 0; margin-left: auto; }   /* zero the base 16px top so it aligns with siblings; destructive stays right */

/* Select-mode cards: the base .photo-card hover (stationary box + image zoom) is
   already click-friendly; here we just surface the check + suppress the pointer
   cursor confusion. The .review-check overlay CSS (below) is shared. */
.gallery.select-mode .photo-card { cursor: pointer; user-select: none; -webkit-user-select: none; }
.gallery.select-mode .photo-card .review-check { display: flex; }
/* Select-mode card layout (matches the review screen's corners):
     top-left    = select check      (shared .review-check rule, z-index 3)
     top-right   = media/type badge  (gif/art/type -- shifted here off the check)
     bottom-left = "likely X" source guess
     bottom-right= enlarge (⛶) button, on hover
   The .card-people names row is hidden in select mode so nothing collides with
   the bottom-left likely badge -- names aren't needed while bulk-selecting. */
.gallery.select-mode .card-people { display: none; }
.gallery.select-mode .photo-card .media-badge:not(.seq):not(.likely-badge) {
  top: 9px; bottom: auto; left: auto; right: 9px; }
.gallery.select-mode .photo-card .media-badge.likely-badge {
  top: auto; bottom: 9px; left: 9px; right: auto; }
.gallery.select-mode .photo-card .select-view { display: block; }
.gallery.select-mode .photo-card:hover .select-view { opacity: 1; }
/* the enlarge button only exists in select mode; keep it hidden everywhere else
   (a plain gallery card has no use for it -- a click already opens the photo). */
.photo-card .select-view { display: none; }
/* "likely X" is only meaningful while confirming/rejecting source guesses, i.e.
   in select mode (and on review cards, which have their own always-on badge). On
   a plain browse gallery card it's noise, so hide it unless we're in select mode.
   .review-card is excluded so the review screen keeps showing it. */
.gallery:not(.select-mode) .photo-card:not(.review-card) .likely-badge { display: none; }
/* Hide the check only on PLAIN gallery cards outside select-mode. Review cards
   (.review-card) are always selectable, so they must be excluded here -- without
   the :not(.review-card) they matched this rule and the check vanished on the
   entire review / "just imported" screen. */
.gallery:not(.select-mode) .photo-card:not(.review-card) .review-check { display: none; }
.photo-card.selected { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.photo-card.selected .review-check { opacity: 1; background: var(--coral); color: var(--ink); border-color: var(--coral); }

.review-card { cursor: pointer; user-select: none; -webkit-user-select: none; }
/* the thumbnail must not be draggable/selectable -- a tiny pointer drag would
   start an image drag and swallow the click, another cause of "didn't register". */
.review-card img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* The stationary-box hover + inner image zoom that makes cards smooth click
   targets now lives on the base .photo-card rule (promoted from here so the whole
   gallery benefits). Review cards inherit it; only the select-check + selected
   state below are review-specific. */
/* Shared by review cards and gallery select-mode cards. */
/* z-index keeps the select check ABOVE any media/type badge that shares the
   top-left corner -- otherwise a badge appended later in the DOM (match card,
   art, gif) paints over the check and it looks like the checkmark "disappeared"
   in select/review mode. Left-anchored badges are dropped to the bottom in
   select/review contexts (below) so they don't crowd the check either. */
.review-card .review-check, .photo-card .review-check { position: absolute; top: 8px; left: 8px;
  z-index: 3;
  width: 24px; height: 24px;
  border-radius: 50%; background: rgba(23,18,42,0.7); border: 2px solid #fff; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0.35;
  transition: opacity 0.12s, background 0.12s; }
/* On REVIEW cards the top-left corner belongs to the select check. Review never
   shows sequence/group cards, so the top-RIGHT corner is free -- park the type
   badge there. Bottom-left stays clear for the "likely X" badge (they used to
   both sit bottom-left and overlap); bottom-right is the ⛶ view button. */
.review-card .media-badge:not(.seq):not(.nobody):not(.likely-badge):not(.restored-badge) {
  top: 9px; bottom: auto; left: auto; right: 9px; }

.review-card.selected { border-color: var(--coral); box-shadow: 0 0 0 2px var(--coral); }
.review-card.selected .review-check { opacity: 1; background: var(--coral); color: var(--ink); border-color: var(--coral); }
.review-view { position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; border: none;
  border-radius: 50%; background: rgba(23,18,42,0.7); color: #fff; cursor: pointer; font-size: 13px;
  opacity: 0; transition: opacity 0.12s; }
.review-card:hover .review-view { opacity: 1; }
.review-view:hover { background: var(--lavender); color: var(--ink); }
.media-badge.nobody { left: auto; right: 9px; background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border); }
/* resurrected-from-tombstone: bottom-right so it never collides with the select
   check (top-left) or the type/gif/art badges (bottom-left in review context). */
.media-badge.restored-badge { top: auto; bottom: 9px; left: auto; right: 9px;
  background: var(--butter); color: var(--ink); }

/* load more / infinite scroll */
.load-sentinel { height: 1px; }
.load-more { display: block; margin: 8px auto 50px; }
.load-more.hidden { display: none; }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (max-width: 720px) {
  .search-chips { display: none; }
  .hero-title { font-size: 48px; }
  .brand-sub { display: none; }
}

/* photo modal close sits above the image */
.modal-photo .modal-close { position: absolute; top: 8px; right: 14px; z-index: 3;
  background: rgba(23,18,42,0.7); width: 34px; height: 34px; border-radius: 50%; }