/* site/assets/css/curate.css
   The private curate view (review/curate.php). It loads style.css and gallery.css first, so this
   file only adds what curating needs: the bar at the top, the Hidden badge and dimming, the row
   toggle and the lightbox's Hide button. */

.curate-body {
  /* The page has no site header, so give the title the same breathing room the other pages have. */
  padding-top: env(safe-area-inset-top, 0px);
}

/* The public pages dress .page-head as a vellum band on a ghosted photograph.
   The curate tool keeps its head plain. */
.curate-head {
  overflow: visible;
  padding: 40px 0 24px;
  margin-bottom: 0;
  background: none;
}

.curate-head::before,
.curate-head::after,
.curate-head .page-title::before { content: none; }

/* The bar: how many are hidden, the filter, and the way back. Same cream panel as the toolbar. */
.curate-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px clamp(12px, 2vw, 20px);
  margin-bottom: 10px;
  border-radius: 16px;
  background: var(--color-cream);
}

.curate-summary {
  margin: 0;
  margin-right: auto;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text);
}

.curate-summary strong {
  font-weight: 500;
  font-size: 21px;
}

.curate-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-brown);
  border-radius: 999px;
  background: transparent;
  color: var(--color-brown);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.curate-filter:hover { background: var(--gallery-hover, #e3d7cc); }

.curate-filter[aria-pressed="true"],
.curate-filter[aria-pressed="true"]:hover {
  background: var(--color-brown);
  color: var(--color-cream);
}

.curate-filter:focus-visible,
.curate-toggle:focus-visible,
.curate-back:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.curate-back {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-brown);
}

.curate-empty-filter {
  margin: 0 0 16px;
  padding: 0 4px;
  font-family: var(--font-body);
  font-style: italic;
  color: var(--gallery-muted, #5a553d);
}

/* How many of a section's photos are hidden, next to its heading. */
.curate-section-count {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-brown);
  color: var(--color-cream);
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.curate-section-count[hidden] { display: none; }

/* Each photo is wrapped, because a button cannot sit inside the thumbnail's link. */
.curate-item {
  position: relative;
  min-width: 0;
}

/* Show only hidden. The selector carries data-filter as well as the class so that it outweighs
   the list view's .gallery[data-view="list"] .curate-item rule, which would otherwise put a
   filtered-out row back on screen. */
.gallery[data-filter="hidden"] .curate-item.is-filtered-out { display: none; }
.gallery-section.is-filtered-empty,
.gallery-chip.is-filtered-empty { display: none; }

/* A hidden photo is dimmed and drained of colour, so a glance down the grid finds them. */
.curate-item.is-hidden .gallery-thumb img {
  opacity: 0.38;
  filter: grayscale(1);
}

/* Choosing several photos at once.
   The checkbox is a real input laid over the little square the eye sees, at full opacity in the
   list and only when it is wanted in the grid: while the mouse is over a photo, while the keyboard
   is on it, once anything at all is selected, and always on a touch screen, which has no hover to
   ask with. It is placed absolutely in the grid, so nothing moves when it appears. */
.curate-select {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.curate-check {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.curate-box {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-brown);
  border-radius: 6px;
  background: var(--color-cream);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* The tick: drawn in the stylesheet so there is no second file to load. */
.curate-check:checked + .curate-box {
  background: var(--color-brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.3L13 5' fill='none' stroke='%23fdf6eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.curate-check:focus-visible + .curate-box {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.curate-item:hover .curate-select,
.curate-item:focus-within .curate-select,
.gallery.has-selection .curate-select {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .curate-select { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .curate-select { transition: none; }
}

/* A selected photo is ringed rather than dimmed: dimming already means hidden. */
.curate-item.is-selected .gallery-thumb {
  outline: 3px solid var(--color-brown);
  outline-offset: -3px;
}

/* Select all for one section, on its own row under the heading so that it can never be mistaken
   for the open and close toggle, or steal that click. */
.curate-section-tools {
  display: flex;
  align-items: center;
  margin: -4px 0 6px;
}

.curate-select-all {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--color-brown);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.curate-select-all:hover { color: var(--color-text); }

.curate-select-all:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.curate-badge {
  display: none;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-brown);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.curate-item.is-hidden .curate-badge { display: block; }

/* In the grid the top-left corner belongs to the checkbox, so the badge sits at the foot of the
   photo instead. In a list row the checkbox is outside the thumbnail, so nothing moves. */
.gallery[data-view="grid"] .curate-badge {
  top: auto;
  bottom: 6px;
}

/* The row toggle. In the grid the photos speak for themselves and the lightbox does the hiding,
   so the button only appears in the list view, where there is room for a real label. */
.curate-toggle { display: none; }

.curate-toggle[disabled] {
  opacity: 0.55;
  cursor: default;
}

/* The badge belongs to the photo, so it is measured from the thumbnail's link rather than from
   the row, which in the list view is wider than the photo. */
.curate-item .gallery-thumb { position: relative; }

/* List view: the row is one cluster, left aligned, in the order the owner asked for:
   the photo, the button that hides or shows it, then its name. The name used to sit inside the
   link and the button at the far right edge of a 1140px row, which put a metre of empty space
   between a photo and its own button. */
.gallery[data-view="list"] .curate-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--gallery-hairline, #e7dcd2);
}

.gallery[data-view="list"] .curate-item:last-child { border-bottom: none; }

/* In a row the checkbox has a column of its own at the left, always on screen. */
.gallery[data-view="list"] .curate-select {
  position: relative;
  flex: none;
  opacity: 1;
  pointer-events: auto;
}

.gallery[data-view="list"] .curate-item.is-selected {
  background: var(--gallery-hover, #e3d7cc);
}

.gallery[data-view="list"] .curate-item .gallery-thumb {
  flex: none;
  min-width: 0;
  border-bottom: none;
}

/* The name is a sibling of the link now, so it takes the rest of the row itself. Clicking it
   still opens the photo: curate.js passes the click on to the link beside it. */
.gallery[data-curate][data-view="list"] .curate-item > .gallery-thumb-label {
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

.gallery[data-curate][data-view="list"] .curate-item:hover > .gallery-thumb-label {
  color: var(--color-brown);
}

/* In a row the badge stays on the thumbnail rather than taking a column of its own: at phone
   width a third column pushed the photo's name onto three lines. Smaller type so it fits
   inside the 56px thumbnail. */
.gallery[data-view="list"] .curate-badge {
  top: 2px;
  left: 2px;
  padding: 1px 5px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* One line per row, whatever the photo is called. */
.gallery[data-curate][data-view="list"] .gallery-thumb-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gallery[data-view="list"] .curate-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 84px;
  min-height: 44px;
  margin: 4px 0;
  padding: 0 16px;
  border: 1px solid var(--color-brown);
  border-radius: 999px;
  background: transparent;
  color: var(--color-brown);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.gallery[data-view="list"] .curate-item.is-hidden .curate-toggle {
  background: var(--color-brown);
  color: var(--color-cream);
}

/* A curate list row is the same 57px tall as a public one, measured in the browser: the 44px
   button and its margins are shorter than the 56px thumbnail beside it, and the row's border
   replaces the one the thumbnail gives up. So the space each section reserves while it is off
   screen (--photo-h in gallery.css) still holds and long scrolls do not jump. Check this again
   if the button or the thumbnail grows. */

/* The lightbox's Hide button: the one big control while curating, not a quiet text link like
   Download next to it. The row is only centred while that button is actually on screen, so the
   public lightbox is left exactly as it was. */
.lightbox-actions:has(.lightbox-hide:not([hidden])) { align-items: center; }

.lightbox-actions .lightbox-hide {
  order: -1;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid var(--color-cream);
  border-radius: 999px;
  background: var(--color-cream);
  color: #2c2a20;
  font-family: var(--font-body);
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
}

.lightbox-actions .lightbox-hide.is-hidden-photo {
  background: transparent;
  color: var(--color-cream);
}

.lightbox-actions .lightbox-hide[disabled] {
  opacity: 0.6;
  cursor: default;
}

.lightbox-actions .lightbox-hide[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .curate-filter { transition: none; }
}

/* Phones. The bar stacks. */
@media (max-width: 480px) {
  .curate-bar { gap: 10px 12px; padding: 12px 10px; }
  .curate-summary { flex: 1 1 100%; margin-right: 0; }
  .curate-filter { flex: 1 1 auto; }
  .curate-back { flex: none; }
  .lightbox-actions .lightbox-hide { font-size: 17px; padding: 0 20px; }
  /* The row keeps the same order on a phone, drawn tighter: there is still the checkbox, the
     photo, the button and the name, and the name takes whatever is left. */
  .gallery[data-view="list"] .curate-item { gap: 8px; }
  .gallery[data-view="list"] .curate-toggle { min-width: 72px; padding: 0 12px; }
  .gallery[data-curate][data-view="list"] .gallery-thumb-label { font-size: 16px; }
}

/* Said only to a screen reader: on screen the photo itself carries the change, with the dimming,
   the Hidden badge and the button that now reads Show. */
.curate-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* Curating on the public gallery: the counts and the filter sit in the toolbar, on their own row
   under Size, View and Photos, and the row is simply not there while viewing. */
.gallery-curate-row {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid var(--gallery-hairline, #e7dcd2);
}

.gallery-curate-row[hidden] { display: none; }
.gallery-curate-row .curate-summary { font-size: 16px; }
.gallery-curate-row .curate-summary strong { font-size: 19px; }
.gallery-curate-row .curate-filter { min-height: 44px; font-size: 14px; }
.gallery-curate-row .curate-empty-filter { margin: 0; }

/* The neighbours in the strip carry their state too, so a run of near-identical photographs can
   be sorted out without opening each one. */
.lightbox-strip-item.is-hidden-photo img {
  opacity: 0.38;
  filter: grayscale(1);
}

.lightbox-strip-tag {
  position: absolute;
  left: 2px;
  bottom: 2px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--color-brown);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* A failed save, the only thing the curator announces on screen. */
.curate-failure {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  max-width: min(92vw, 460px);
  margin: 0;
  padding: 14px 22px;
  border-radius: 999px;
  background: #2c2a20;
  color: #fdf6eb;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.curate-failure.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .curate-failure { transition: none; }
}

/* The action bar for a selection: a pill fixed at the foot of the screen while anything is chosen. */
.curate-bar {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 8px 10px 8px 18px;
  border: 1px solid rgba(44, 42, 32, 0.2);
  border-radius: 999px;
  background: var(--color-cream);
  box-shadow: 0 10px 30px rgba(44, 42, 32, 0.22);
  color: var(--color-text);
  transform: translate(-50%, 24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.curate-bar.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.curate-bar-count { margin-right: 6px; font-size: 14px; white-space: nowrap; }

.curate-bar-button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brown);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.curate-bar-button:disabled { opacity: 0.5; cursor: default; }
.curate-bar-clear { background: transparent; color: var(--color-brown); text-decoration: underline; text-underline-offset: 3px; }
.curate-bar-button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }

@media (max-width: 520px) {
  .curate-bar { gap: 4px; padding: 6px 6px 6px 12px; }
  .curate-bar-count { margin-right: 2px; font-size: 13px; }
  .curate-bar-button { padding: 0 11px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .curate-bar { transition: none; }
}