/* ============================================================
   People replica (/capabilities/people)
   crew phossil-capability-showcase, 2026-07-26

   The together-filter rebuilt in marketing markup. Read the
   "Working replicas" section of capability.css first: this is the
   real mechanism driven by a sample family, not a picture of it.

   REQUIRES marketing-template.css (tokens) and capability.css
   (the .cap-replica shell) to be linked BEFORE this file. Every
   color here is a token or a translucency over the replica's dark
   surface, in the same rgba() idiom capability.css already uses for
   hairlines on that surface. Zero raw hex.

   Naming: `plr` = people replica, sibling to `wlr` (worldlines).
   ============================================================ */

.plr {
  display: grid;
  grid-template-columns: 1fr;
  /* Tighter than the section rhythm on purpose: the hint and the summary both
     hold space open for text they do not always have, so a wide gap on top of
     two reserved boxes reads as a hole rather than as breathing room. */
  gap: var(--space-sm);
}

/* --- The chip rail ---------------------------------------- *

   Mirrors the person chips the real grid renders: a name, the number
   of photos carrying that name, sorted by count descending. Each one
   is a real button so it is reachable by keyboard and announces its
   own selected state; aria-pressed is the whole toggle contract.
   ---------------------------------------------------------- */

.plr__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.plr__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-light);
  background: transparent;
  border: 1px solid rgba(243, 240, 230, 0.28);
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.plr__chip-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.plr__chip:hover {
  border-color: var(--color-accent-hover);
}
.plr__chip:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/* Selected. The inset ring rather than a fill keeps the count legible
   and matches the chip treatment already shipping on the landing page. */
.plr__chip[aria-pressed="true"] {
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.plr__chip[aria-pressed="true"] .plr__chip-count {
  color: var(--color-accent);
}

/* The tail of the rail: people the sample has but the demo does not
   list. Deliberately NOT a button. Nothing behind it is selectable, and
   a control that does nothing when pressed is worse than a label. */
.plr__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* --- The mode toggle -------------------------------------- *

   Appears at two or more selections, the same threshold the real grid
   uses to reveal its mode control. Below two people there is no
   difference between "any" and "all", so the control would be a lie.
   ---------------------------------------------------------- */

.plr__mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.plr__mode[hidden] {
  display: none;
}
.plr__mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.plr__mode-btn:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.plr__mode-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.plr__mode-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
/* One line of guidance that moves with the state: pick someone, add a
   second, then switch the mode. It empties itself once the together
   result is on screen, because at that point the grid is the sentence. */
.plr__hint {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
  min-height: 1.5em; /* held open so the summary below does not hop */
}

/* --- The filter summary ----------------------------------- */

.plr__summary {
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(243, 240, 230, 0.14);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--color-accent);
  /* The line rewraps as names are added. Reserving two lines stops the
     grid below it hopping up and down on every chip press. */
  min-height: 3.2em;
}
.plr__summary strong {
  font-weight: 700;
}

/* --- The result grid -------------------------------------- *

   Square tiles, the shape a photo grid is read in. The images are
   authored in the markup with their own alt text and are never
   rewritten by script, so a tile cannot be relabeled as somebody it
   does not show. Read the comment above the grid in people.html.
   ---------------------------------------------------------- */

.plr__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
}
.plr__grid[hidden] {
  display: none;
}
.plr__grid img {
  display: block;
  width: 100%;
  height: auto; /* beat the height attribute so aspect-ratio applies */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-canvas);
}

/* Shown in place of the grid for any selection the sample has no
   photographs for. A count with nothing under it needs one line saying
   why, or it reads as a grid that failed to load. */
.plr__note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.plr__note[hidden] {
  display: none;
}

/* --- Responsive ------------------------------------------- */

@media (max-width: 719px) {
  .plr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plr__chip,
  .plr__more {
    font-size: 0.9rem;
    padding: 0 var(--space-xs);
  }
}

/* --- Reduced motion --------------------------------------- *
   Everything here is a state change rather than an animation, so
   there is nothing to sit through. The transitions still go, because
   a color easing in under the finger is motion to someone who asked
   for none of it. */

@media (prefers-reduced-motion: reduce) {
  .plr__chip,
  .plr__mode-btn {
    transition: none;
  }
}