/* photo-labels.css — REVIEW-PHASE FURNITURE. Two things:
 *   .wss-plabel  the ID chip drawn over the bottom-left corner of every static
 *                filler photograph (src/js/photo-labels.js)
 *   .pmap        /photo-map/, the index of all of them (src/js/photo-map.js)
 *
 * Both are scoped, so this file does nothing until a chip is drawn or the map
 * page is opened. The whole feature is one constant away from gone — PHOTO_LABELS
 * in src/js/photo-labels.js — and this stylesheet's <link> in templates/base.js
 * goes with it.
 *
 * THE CHIP'S ONE RULE: it must be readable on any photograph and must never
 * become the thing you look at. Hence a near-black chip rather than a coloured
 * one (the site's gold on a warm photo is camouflage), monospace so the code
 * reads as a code, 11px, and the bottom-LEFT corner — the site's own captions
 * and CTAs sit centre and bottom-right, and faces sit in the middle.
 */

.wss-plabel {
  position: absolute;
  z-index: 40; /* over photos; under the sticky header (50) and chat (61) */
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  max-width: 60vw;
  padding: 3px 7px;
  background: rgba(12, 12, 12, 0.82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-align: left;
  /* Never intercepts a tap: the photo underneath stays clickable, and the chip
     cannot break a link the site depends on. Hover still works — pointer-events
     on the chip would be the only way to make it interactive, and it is not. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity var(--dur-fast, 160ms) ease;
}
.wss-plabel__id {
  font-weight: 600;
  white-space: nowrap;
}
/* The filename is the second line. Hidden by default so the chip stays small,
   revealed when the pointer is anywhere over the image's corner region — and
   always shown on touch devices, which have no hover to offer. */
.wss-plabel__file {
  display: none;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.75;
  font-size: 10px;
}
@media (hover: none) {
  .wss-plabel__file {
    display: block;
  }
}
@media (hover: hover) {
  .wss-plabel:hover .wss-plabel__file {
    display: block;
  }
}
@media print {
  .wss-plabel {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   /photo-map/ — the index. Phone-first: one column of cards, thumbnail left,
   details right, nothing that needs a wide screen to read.
   ───────────────────────────────────────────────────────────────────────────── */
.pmap {
  --edge: clamp(1rem, 4vw, 3rem);
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--edge) clamp(4rem, 10vw, 7rem);
  color: var(--ink);
}
.pmap-head {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.pmap-head__eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--sans);
  font-size: var(--fs-100);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-deep);
}
.pmap-head__title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
.pmap-head__intro {
  margin: var(--space-4) 0 0;
  max-width: 46rem;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.pmap-how {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem)
    clamp(2.5rem, 6vw, 3rem);
  background: var(--sand);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.pmap-how {
  list-style: disc;
}
.pmap-how li + li {
  margin-top: var(--space-3);
}
.pmap-how strong {
  color: var(--ink);
  font-weight: var(--fw-medium);
}
/* Inline sample of the amber flag, so the instruction and the thing it names
   look identical. */
.pmap-flag {
  display: inline-block;
  padding: 1px 7px;
  background: #fdf1dc;
  border: 1px solid #e6c893;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: #8a5d16;
}
.pmap-chip {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(12, 12, 12, 0.85);
  color: #fff;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}
.pmap-status,
.pmap-summary {
  margin: 0 0 var(--space-5);
  font-family: var(--sans);
  font-size: var(--fs-200);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.pmap-summary {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.pmap-page {
  margin-top: clamp(2rem, 5vw, 3rem);
}
.pmap-page__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.pmap-page__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-500);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}
.pmap-page__link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-100);
  color: var(--gold-deep);
}
.pmap-page__code {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-100);
  color: var(--ink-soft);
  opacity: 0.7;
}
.pmap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.pmap-item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (min-width: 640px) {
  .pmap-item {
    grid-template-columns: 128px 1fr;
  }
}
.pmap-item__thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  line-height: 0;
}
.pmap-item__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pmap-item__body {
  min-width: 0;
}
.pmap-item__id {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(12, 12, 12, 0.88);
  color: #fff;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.pmap-item__file {
  margin: var(--space-3) 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pmap-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-2) 0 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.pmap-item__also {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--sand);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* ── Replacing a photo ───────────────────────────────────────────────────────
   Phone-first and unapologetically so: she does this standing up, one thumb, on
   an iPhone. 44px minimum tap height, full-width buttons until there is room for
   two side by side, and the status line lives directly under the button that
   produced it so an error is never off-screen.
   ─────────────────────────────────────────────────────────────────────────── */
/* THE `hidden` ATTRIBUTE HAS TO WIN. Every state on this page is toggled with
   `el.hidden = true/false`, and the browser implements that as a UA rule
   `[hidden] { display: none }` — which ANY author `display` declaration beats.
   Without this block, `.pmap-pill { display: inline-block }` and
   `.pmap-btn { display: inline-flex }` quietly outrank it and every row shows a
   "Replaced ✓" pill and a revert button whether or not the photo was ever
   touched. That shipped for exactly one screenshot. Asserted on computed style
   now, not on the property, because the property was true the whole time. */
[hidden] {
  display: none !important;
}

.pmap-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.pmap-item__name {
  font-family: var(--serif);
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.pmap-pill {
  display: inline-block;
  padding: 2px 9px;
  background: #e8f4ec;
  border: 1px solid #a8cfb8;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.03em;
  color: #26603c;
}
.pmap-item.is-replaced {
  border-color: #a8cfb8;
  background: linear-gradient(0deg, rgba(232, 244, 236, 0.35), rgba(232, 244, 236, 0.35)), var(--card);
}
.pmap-item__lowres {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: #fdf1dc;
  border-left: 2px solid #e0ab52;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  color: #8a5d16;
}
.pmap-item__thumb.is-empty {
  border: 1px dashed var(--line);
}

.pmap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* The real <input type=file> is never shown: it is triggered by the button, so
   the button can carry a disabled state (a <label> cannot). */
.pmap-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pmap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 var(--space-5);
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--fs-200);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-fast, 160ms) ease, background var(--dur-fast, 160ms) ease;
}
@media (min-width: 480px) {
  .pmap-btn {
    flex: 0 0 auto;
  }
}
.pmap-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.pmap-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.pmap-btn__spin {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pmap-spin 0.7s linear infinite;
}
.pmap-actions.is-busy .pmap-btn__spin {
  display: inline-block;
}
@keyframes pmap-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pmap-btn__spin {
    animation-duration: 2s;
  }
}
.pmap-actions__msg {
  flex: 1 0 100%;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pmap-actions__msg:empty {
  display: none;
}
.pmap-actions__msg.is-bad {
  padding: var(--space-2) var(--space-3);
  background: #fdeceb;
  border-left: 2px solid #c9483c;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #8f2e25;
}

.pmap-page__note {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

/* ── The password sheet ──────────────────────────────────────────────────────
   Raised only on the first upload that comes back 401, never on page load. Bottom
   sheet on a phone (thumb reach, above the keyboard), centred card on a laptop.
   ─────────────────────────────────────────────────────────────────────────── */
.pmap-auth {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(12, 12, 12, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@media (min-width: 560px) {
  .pmap-auth {
    align-items: center;
  }
}
.pmap-auth__panel {
  width: 100%;
  max-width: 26rem;
  padding: clamp(1.25rem, 4vw, 1.75rem);
  background: var(--card, #fff);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.pmap-auth__title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-500);
  font-weight: var(--fw-regular);
}
.pmap-auth__note {
  margin: var(--space-2) 0 var(--space-4);
  font-family: var(--sans);
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.pmap-auth__input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--space-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 16px; /* < 16px makes iOS Safari zoom the whole page on focus */
  color: var(--ink);
}
.pmap-auth__error {
  margin: var(--space-2) 0 0;
  min-height: 1.2em;
  font-family: var(--sans);
  font-size: 12px;
  color: #8f2e25;
}
.pmap-auth__row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.pmap-auth__row .pmap-btn {
  flex: 1 1 0;
}

.pmap-dump {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.pmap-dump__toggle {
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--fs-200);
  color: var(--gold-deep);
}
.pmap-dump__pre {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  max-height: 60vh;
  overflow: auto;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.6;
  white-space: pre;
}