/* Named faces on a photo (#511) — MV_PhotoFaces pins, drawn inside the
   enlarged-photo viewer. The layer is positioned and transformed entirely by
   MV_PhotoViewer (it shares the image's own transform, so pins ride zoom and
   pan); everything here is what a pin *looks* like.

   House look: a person reads as a crisp white name-pill, never a pale chip —
   so the revealed name is exactly that pill, over the lightbox's warm
   near-black. The resting mark is a small cream disc: check 2 says a marker
   that annotates something renders smaller than the thing it annotates, and a
   face is the smallest thing this app has ever annotated. */

.photo-viewer__faces {
  --face-dot-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  /* The layer itself is a pass-through: clicks land on the stage (which pans,
     zooms, and dismisses) unless they hit a pin. */
  pointer-events: none;
}

/* A pin's box is its **dot and nothing else** — the name hangs off it
   absolutely (below). That's what makes `left`/`top` land the dot exactly on
   the face: anchoring the dot-plus-name row instead would push the dot left by
   half the name's width, and the name's box — invisible but still laid out —
   would swallow clicks meant for the photo. */
.face-pin {
  position: absolute;
  /* Placed in the photo's own coordinate space, then counter-scaled about the
     dot's centre so the mark keeps its on-screen size at every zoom level — a
     pin that grew with the photo would swallow the face it points at. */
  transform: translate(calc(var(--face-dot-size) / -2), -50%) scale(var(--face-pin-scale, 1));
  transform-origin: calc(var(--face-dot-size) / 2) center;
  line-height: 0;
  pointer-events: auto;
}

.face-pin__marker {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* The resting mark: a cream disc with a warm ring and a soft dark halo, so it
   reads on a bright forehead and on a dark coat alike. */
.face-pin__dot {
  position: relative;
  display: block;
  width: var(--face-dot-size);
  height: var(--face-dot-size);
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-highlight);
  box-shadow: 0 0 0 2px rgba(20, 17, 13, 0.45), var(--shadow-sm);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.face-pin__marker:hover .face-pin__dot,
.face-pin__marker:focus-visible .face-pin__dot {
  transform: scale(1.15);
  border-color: var(--color-highlight-hover);
}

.face-pin__marker:focus-visible {
  outline: none;
}

.face-pin__marker:focus-visible .face-pin__dot {
  box-shadow: 0 0 0 3px var(--color-bg), var(--shadow-md);
}

/* The name (and, for an editor, the ×) ride beside the dot, out of flow so
   they can't move it. `visibility: hidden` rather than `display: none` keeps
   the reveal a fade — and, unlike `opacity` alone, still takes the buttons out
   of the tab order and out of the way of clicks while they're hidden. */
.face-pin__label {
  position: absolute;
  left: calc(100% + var(--space-xxs));
  top: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  line-height: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast),
    visibility var(--transition-fast);
}

/* Flipped: a pin near the right edge opens its name to the left instead, so
   the name stays on the photo rather than under the stage's clip. */
.face-pin--flip .face-pin__label {
  left: auto;
  right: calc(100% + var(--space-xxs));
  flex-direction: row-reverse;
  transform: translateY(-50%) translateX(4px);
}

.face-pin--revealed .face-pin__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}

/* The name — a white pill in accent green, the app's people voice, and itself
   the button that opens that person (#415's "the name navigates"). */
.face-pin__name {
  max-width: 40vw;
  padding: 2px var(--space-xs);
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.face-pin__name:hover,
.face-pin__name:focus-visible {
  outline: none;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

/* Editor-only: take this name off the photo. Appears with the name, so it can
   never be pressed by someone who hasn't seen whose name they're removing. */
.face-pin__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.face-pin__remove:hover,
.face-pin__remove:focus-visible {
  outline: none;
  background: var(--color-error-soft);
  color: var(--color-error);
}

/* While a pin is being dragged to a better spot it follows the pointer with no
   easing — a transition here would lag the finger. */
.face-pin--dragging .face-pin__label,
.face-pin--dragging .face-pin__dot {
  transition: none;
}

/* ---- placing mode: "Name a face" is armed, waiting for a point ---- */

.photo-viewer--placing .photo-viewer__stage {
  cursor: crosshair;
}

/* The existing pins step back while a new one is being placed — they're not
   what the user is looking for, and their names would sit over the face. They
   stop taking clicks too: pointing at a spot that happens to be near an
   existing pin should still place the new one. */
.photo-viewer--placing .photo-viewer__faces {
  opacity: 0.45;
}

.photo-viewer--placing .face-pin {
  pointer-events: none;
}

.photo-viewer__btn--face[aria-pressed="true"] {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Both of these are laid out with `display: flex`, which beats the UA
   stylesheet's `[hidden] { display: none }` — without these rules a viewer who
   can't edit still sees "Name a face", and the hint never leaves the screen. */
.photo-viewer__btn--face[hidden],
.photo-viewer__hint[hidden] {
  display: none;
}

/* A single calm line at the top of the stage saying what we're waiting for.
   Same warm white pill voice as the viewer's other chrome. */
.photo-viewer__hint {
  position: absolute;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: calc(100% - var(--space-lg));
  padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.photo-viewer__hint-cancel {
  padding: var(--space-xxs) var(--space-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  touch-action: manipulation;
}

.photo-viewer__hint-cancel:hover,
.photo-viewer__hint-cancel:focus-visible {
  outline: none;
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ---- the picker dialog ---- */

.face-picker__intro {
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
}

/* ---- touch: the mark stays small, the target gets big ---- */

@media (hover: none) and (pointer: coarse) {
  /* The dot is a 14px mark inside a 44px press area — a bigger dot would cover
     the face, a smaller target would be unhittable (MOBILE TOUCH PARITY RULE).
     The box hangs off the dot itself, so it stays centred on exactly the point
     the pin marks however the name beside it wraps or grows. */
  .face-pin__dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    transform: translate(-50%, -50%);
  }

  /* The name and the × are pressed, not just read, so they take real targets
     once the name is out — the dot stays small because it marks a face. */
  .face-pin__name {
    min-height: var(--touch-target-min);
    padding: 0 var(--space-sm);
  }

  .face-pin__remove {
    width: 34px;
    height: 34px;
  }

  .photo-viewer__hint-cancel {
    min-height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .face-pin__dot,
  .face-pin__label,
  .face-pin__name,
  .face-pin__remove {
    transition: none;
  }

  .face-pin__marker:hover .face-pin__dot,
  .face-pin__marker:focus-visible .face-pin__dot {
    transform: none;
  }
}