/* ── /photos ──────────────────────────────────────────────────────────
   Guest drop point. Inherits every token from /css/style.css.

   The one signature element is the DEVELOPING TILE: an unprocessed photo
   shows a champagne wash that resolves into the image once the worker
   finishes. That state is real, not decorative -- it is thumb_ready=0
   rendered honestly.
   ─────────────────────────────────────────────────────────────────── */

.photos-body { background: var(--off-white); }

/* The HTML `hidden` attribute is only `display:none` in the browser's default
   stylesheet, so ANY class rule that sets `display` silently beats it on
   specificity. .gate, .lb and .facerow all do, which left the lightbox painted
   over the whole page from load and swallowing every click. Keep `hidden`
   authoritative. */
[hidden] { display: none !important; }

/* ── thank you ────────────────────────────────────── */
.ty {
  text-align: center;
  padding: 140px clamp(24px, 6vw, 48px) 56px;
  background:
    radial-gradient(900px 520px at 50% 0%, var(--sage-ultra), transparent 72%),
    var(--off-white);
}
.ty-date {
  font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--champagne);
}
.ty-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 15vw, 7rem); line-height: 1;
  letter-spacing: 0.04em; color: var(--sage-deeper);
  margin: 18px 0 6px;
}
.ty-names {
  font-family: var(--font-names); font-size: clamp(2rem, 8vw, 3.2rem);
  line-height: 1.4; color: var(--sage-deep);
}
.ty-names .amp { color: var(--champagne); }
.ty-copy {
  max-width: 520px; margin: 18px auto 0;
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.22rem); line-height: 1.75; color: var(--text-mid);
}
.ty-rule {
  width: 64px; height: 1px; margin: 40px auto 0;
  background: var(--champagne);
}

/* ── carousel ─────────────────────────────────────── */
.reel { margin: 0 0 34px; }
.reel-track {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel-slide {
  flex: 0 0 min(86%, 760px); scroll-snap-align: center;
  aspect-ratio: 3 / 2; overflow: hidden; cursor: pointer;
  background: var(--champagne-pale); border: none; padding: 0;
}
.reel-slide img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease;
}
.reel-slide img.is-in { opacity: 1; }
.reel-dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.reel-dot {
  width: 6px; height: 6px; border-radius: 50%; padding: 0; border: none;
  background: var(--border-mid); cursor: pointer; transition: background var(--transition);
}
.reel-dot.is-on { background: var(--champagne); }

@media (max-width: 640px) {
  .ty { padding-top: 104px; padding-bottom: 40px; }
  .reel-slide { flex-basis: 92%; aspect-ratio: 4 / 3; }
}

/* ── gate ─────────────────────────────────────────── */
.gate {
  display: grid; place-items: center;
  padding: 0 24px 90px;
  background: var(--off-white);
}
.gate-card {
  width: min(460px, 100%); text-align: center;
  padding: clamp(32px, 7vw, 56px) clamp(24px, 6vw, 44px);
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  box-shadow: 0 24px 60px -32px rgba(45, 74, 107, 0.35);
}
.gate-eyebrow {
  font-family: var(--font-body); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--champagne);
  margin-bottom: 18px;
}
.gate-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.6rem); line-height: 1.1;
  color: var(--sage-deeper); letter-spacing: 0.01em;
}
.gate-sub {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.12rem; color: var(--text-mid); margin: 14px 0 32px;
}
.gate-form { display: grid; gap: 12px; }
.gate-label {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-light);
}
.gate-input {
  font-family: var(--font-body); font-size: 1.15rem; text-align: center;
  letter-spacing: 0.06em;
  padding: 15px 16px; width: 100%;
  border: 1px solid var(--border-mid); border-radius: 2px;
  background: var(--sage-ultra); color: var(--charcoal);
  transition: border-color var(--transition), background var(--transition);
}
.gate-input:focus {
  outline: none; border-color: var(--sage); background: var(--white);
  box-shadow: 0 0 0 3px rgba(123, 158, 197, 0.18);
}
.gate-btn, .add-btn {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 15px 22px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--sage-deep); background: var(--sage-deep); color: var(--white);
  transition: background var(--transition), border-color var(--transition), opacity .2s;
}
.gate-btn:hover, .add-btn:hover { background: var(--sage-deeper); border-color: var(--sage-deeper); }
.gate-btn[disabled], .add-btn[disabled] { opacity: .55; cursor: default; }
.gate-error {
  font-size: 0.86rem; color: #9B3B3B; margin-top: 2px;
}

/* ── header ───────────────────────────────────────── */
.shell { max-width: 1240px; margin: 0 auto; padding: 8px clamp(14px, 4vw, 40px) 80px; }
.head { text-align: center; margin-bottom: 26px; }
.head-eyebrow {
  font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--champagne); margin-bottom: 12px;
}
.head-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 5.4vw, 2.7rem); color: var(--sage-deeper);
}
.head-count {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.02rem; color: var(--text-light); margin-top: 8px;
}

/* ── add ──────────────────────────────────────────── */
.addwrap { display: grid; justify-items: center; gap: 14px; margin-bottom: 30px; }
.add-btn { display: inline-flex; align-items: center; gap: 12px; min-width: 280px; justify-content: center; }
/* Videos are the slow path, so they get the quieter button. Separating them
   means a batch of photos is never held up behind one clip. */
.add-btn--second {
  background: transparent; color: var(--sage-deep); border-color: var(--sage);
}
.add-btn--second:hover { background: var(--sage-pale); color: var(--sage-deeper); border-color: var(--sage-deep); }
.add-plus { font-size: 1.3rem; line-height: 1; margin-top: -2px; font-weight: 400; }
.ask {
  max-width: 520px; margin: 22px auto 0;
  font-family: var(--font-heading); font-size: 1.06rem; line-height: 1.75;
  color: var(--text-mid);
}
.ask strong {
  display: block; margin-bottom: 4px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.06rem; letter-spacing: 0.01em; color: var(--sage-deeper);
}

.head-note {
  max-width: 470px; margin: 16px auto 0;
  font-size: 0.8rem; line-height: 1.65; color: var(--text-light);
}
.head-note-help { display: block; margin-top: 6px; color: var(--sage-mid); }
/* Shown while the OS photo picker is preparing files. The browser gets no event
   during that window, so this is the only feedback possible before the first
   byte moves. */
.waiting {
  display: flex; align-items: center; gap: 10px;
  max-width: 420px; margin: 0 auto 4px; padding: 12px 14px;
  border: 1px solid var(--border-light); border-left: 2px solid var(--champagne);
  background: var(--champagne-pale);
  font-size: 0.82rem; line-height: 1.5; color: var(--text-mid); text-align: left;
}
/* A ticking clock is the whole point: it proves the page is alive during a
   window where the browser genuinely cannot report progress. */
.waiting-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--champagne); animation: waitpulse 1.3s ease-in-out infinite;
}
@keyframes waitpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.waiting-timer {
  flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: 0.86rem; color: var(--sage-deep);
}
.who {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.74rem; letter-spacing: 0.08em; color: var(--text-light);
}
.who-input {
  font-family: var(--font-body); font-size: 0.95rem; text-align: center;
  padding: 9px 14px; width: 240px;
  border: 1px solid var(--border-light); border-radius: 2px;
  background: var(--white); color: var(--charcoal);
}
.who-input:focus { outline: none; border-color: var(--sage); }

/* ── upload tray ──────────────────────────────────── */
.tray {
  max-width: 620px; margin: 0 auto 30px; background: var(--white);
  border: 1px solid var(--border-light); border-radius: 2px; overflow: hidden;
}
.tray-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sage-deep);
}
.tray-hide {
  background: none; border: none; cursor: pointer; color: var(--text-light);
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Overall progress across the whole selection. Weighted by BYTES, not by file
   count, so one long video does not read as "1 of 200" while consuming most of
   the time. This is the number that matters when someone drops 300 photos in. */
.tray-overall { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-light); }
.tray-overall-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tray-overall-pct {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--sage-deeper);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.tray-overall-eta { font-size: 0.78rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.tray-overall-bar { height: 6px; background: var(--sage-pale); margin-top: 10px; border-radius: 3px; overflow: hidden; }
.tray-overall-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--sage), var(--sage-deep));
  transition: width .3s linear;
}
.tray-overall.is-done .tray-overall-fill { background: var(--champagne); }
.tray-overall-meta { margin-top: 8px; font-size: 0.76rem; color: var(--text-light); font-variant-numeric: tabular-nums; }

.tray-list { list-style: none; max-height: 240px; overflow-y: auto; }
.tray-row { padding: 10px 16px; border-bottom: 1px solid var(--sage-ultra); }
.tray-row:last-child { border-bottom: none; }
.tray-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.84rem; }
.tray-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-mid);
}
.tray-pct { color: var(--text-light); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tray-bar { height: 2px; background: var(--sage-pale); margin-top: 7px; }
.tray-fill { height: 100%; width: 0; background: var(--sage); transition: width .25s linear; }
.tray-row.is-done .tray-fill { background: var(--champagne); }
.tray-row.is-bad  .tray-fill { background: #C98A8A; }
.tray-row.is-bad  .tray-pct  { color: #9B3B3B; }
.tray-retry {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font-body); font-size: 0.78rem;
  color: var(--sage-mid); text-decoration: underline;
}
.tray-note { padding: 10px 16px; font-size: 0.76rem; color: var(--text-light); }

/* ── admin bar ────────────────────────────────────── */
.adminbar {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto 22px; padding: 10px 16px; max-width: 420px;
  border: 1px solid rgba(155, 59, 59, 0.28); border-radius: 2px;
  background: rgba(155, 59, 59, 0.04);
}
.adminbar-label {
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-light);
}
.adminbar-btn {
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  padding: 8px 16px; border-radius: 2px;
  border: 1px solid rgba(155, 59, 59, 0.45); background: transparent; color: #9B3B3B;
  transition: background var(--transition), color var(--transition);
}
.adminbar-btn:hover { background: #9B3B3B; color: var(--white); border-color: #9B3B3B; }

/* ── chips ────────────────────────────────────────── */
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 18px; cursor: pointer; border-radius: 2px;
  border: 1px solid var(--border-mid); background: transparent; color: var(--text-mid);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip:hover { border-color: var(--sage); color: var(--sage-deep); }
.chip.is-on { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--white); }

.people-note {
  max-width: 560px; margin: 0 auto 18px; padding: 12px 16px;
  border-left: 2px solid var(--champagne); background: var(--champagne-pale);
  font-size: 0.8rem; line-height: 1.65; color: var(--text-mid);
}
.people-note em { font-family: var(--font-heading); font-style: italic; color: var(--sage-deep); }

/* ── people row ───────────────────────────────────── */
.facerow {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 18px;
  scrollbar-width: thin;
}
.face { flex: 0 0 auto; width: 84px; text-align: center; }
.face-img {
  display: block; width: 84px; height: 84px; padding: 0;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border-mid); background: var(--champagne-pale);
  background-repeat: no-repeat;
  transition: border-color var(--transition), transform var(--transition);
}
.face-img.is-loaded { background-color: transparent; }
.face-img.is-initials, .unsorted-img.is-initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--sage-deep);
  background: var(--champagne-pale);
}
.unsorted-img.is-initials { font-size: 1.2rem; }
.face.is-on .face-img, .face-img:hover { border-color: var(--champagne); }
.face.is-on .face-img { border-width: 2px; transform: scale(1.04); }
.face-name {
  display: block; width: 100%; margin-top: 8px; padding: 0;
  font-family: var(--font-body); font-size: 0.7rem; color: var(--text-light);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: none; text-align: center;
}
.face-name.is-named { color: var(--sage-deep); font-weight: 500; }
.face-name.is-editable { cursor: pointer; text-decoration: underline dotted var(--border-mid); }
.face-name.is-editable:hover { color: var(--champagne); }
.face-n { font-size: 0.64rem; color: var(--text-light); margin-top: 1px; }

/* ── unsorted faces (admin) ───────────────────────── */
.unsorted {
  margin: 4px 0 22px; padding: 14px 16px;
  border: 1px solid var(--border-light); border-radius: 2px;
  background: var(--sage-ultra);
}
.unsorted-head { margin-bottom: 12px; }
.unsorted-title {
  display: block; font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sage-deep);
}
.unsorted-hint {
  display: block; margin-top: 4px; font-size: 0.76rem; color: var(--text-light);
}
.unsorted-row {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
}
.unsorted-face { flex: 0 0 auto; width: 66px; text-align: center; }
.unsorted-img {
  display: block; width: 66px; height: 66px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px dashed var(--border-mid);
  background: var(--champagne-pale); background-repeat: no-repeat;
  transition: border-color var(--transition), transform var(--transition);
}
.unsorted-img:hover { border-color: var(--champagne); transform: scale(1.06); }
.unsorted-n { margin-top: 5px; font-size: 0.62rem; color: var(--text-light); }

/* ── bulk select ──────────────────────────────────── */
.selbar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; margin: 0 0 14px;
}
.sel-toggle, .sel-btn {
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 8px 15px; border-radius: 2px; cursor: pointer;
  background: none; border: 1px solid var(--border-mid); color: var(--text-mid);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.sel-toggle:hover, .sel-btn:hover { border-color: var(--sage); color: var(--sage-deep); }
.sel-go { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--white); }
.sel-go:hover { background: var(--sage-deeper); color: var(--white); }
.sel-go[disabled] { opacity: .45; cursor: default; }
.sel-count {
  font-family: var(--font-heading); font-style: italic; font-size: 1rem;
  color: var(--sage-deep);
}
.sel-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* a tick in the corner while choosing */
.grid.is-selecting .tile { cursor: copy; }
.tile-pick {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(16,28,46,.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8rem; line-height: 1;
}
.tile.is-picked .tile-pick { background: var(--champagne); border-color: var(--champagne); color: #2b2110; }
.tile.is-picked img { transform: scale(.92); }
.tile.is-picked::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border: 3px solid var(--champagne);
}

/* ── grid ─────────────────────────────────────────── */
.grid {
  display: grid; gap: clamp(4px, 1vw, 10px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}
.moment-head {
  grid-column: 1 / -1; margin: 26px 0 4px;
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.2rem; color: var(--sage-deep);
}
.moment-head:first-child { margin-top: 0; }
.moment-head span { font-family: var(--font-body); font-style: normal;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-light); margin-left: 10px; }

.tile {
  position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  background: var(--sage-ultra); border: none; padding: 0; display: block; width: 100%;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .5s ease, transform .6s var(--transition);
}
.tile img.is-in { opacity: 1; }
.tile:hover img { transform: scale(1.04); }
.tile-vid {
  position: absolute; right: 7px; bottom: 7px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 2px;
  background: rgba(30, 53, 88, 0.72); color: #fff;
  font-size: 0.64rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}

/* THE SIGNATURE: a photo that has landed but has not been processed yet.
   Champagne wash with a slow sweep. This is the honest rendering of a real
   pipeline state, which is why it earns its place. */
.tile.is-developing { background: var(--champagne-pale); }
.tile.is-developing::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg,
    transparent 20%, rgba(255,255,255,.85) 50%, transparent 80%);
  background-size: 260% 100%;
  animation: develop 2.4s ease-in-out infinite;
}
.tile.is-developing::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 46%,
    rgba(201,168,122,.30) 0 22%, transparent 23%);
}
@keyframes develop {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

.empty { text-align: center; padding: 70px 20px; }
.empty-big {
  font-family: var(--font-heading); font-style: italic;
  font-size: 1.5rem; color: var(--sage-deep);
}
.empty-small { font-size: 0.92rem; color: var(--text-light); margin-top: 8px; }
.sentinel { height: 1px; }
.gridend {
  text-align: center; padding: 40px 0 0;
  font-family: var(--font-heading); font-style: italic; color: var(--text-light);
}

/* ── lightbox ─────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: 400;
  background: #101C2E;   /* fully opaque: at 0.96 the nav and the upload bar ghosted through */
  display: grid;
  /* minmax(0, 1fr), NOT 1fr. A plain 1fr is minmax(auto, 1fr), which GROWS to
     fit a tall photo instead of constraining it -- the image's max-height:100%
     then resolves against an oversized row and the photo renders cropped at the
     top. The 0 minimum lets the row shrink to the viewport. */
  grid-template-rows: minmax(0, 1fr) auto;
  touch-action: pan-y;
}
/* FLEX, not grid. As a grid container with an auto-sized implicit row, the
   image's max-height:100% resolved against that row's own content height --
   circular, so it constrained nothing and tall photos rendered full size and
   clipped. A flex container has a definite height here, so the percentage
   finally means what it looks like it means. */
.lb-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0;
  overflow: hidden; padding: 56px 12px 8px;
}
.lb-stage img, .lb-stage video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  min-width: 0; min-height: 0;
  object-fit: contain;
}
.lb-x, .lb-nav {
  position: absolute; z-index: 2; cursor: pointer;
  background: rgba(255,255,255,.08); border: none; color: #fff;
  backdrop-filter: blur(6px);
}
.lb-x { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 1.7rem; line-height: 1; border-radius: 50%; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 76px; font-size: 2.1rem; line-height: 1; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.18); }
.lb-who {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px clamp(14px, 4vw, 28px) 0;
  color: rgba(255,255,255,.72);
}
.lb-who-label {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-right: 2px;
}
.lb-who-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-who-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.9);
  font-size: 0.78rem; border: none; cursor: pointer;
}
.lb-who-chip:hover { background: rgba(255,255,255,.2); }
.lb-who-go {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem; color: inherit;
}
.lb-who-chip.is-unnamed .lb-who-go { color: rgba(255,255,255,.55); font-style: italic; }
.lb-who-x {
  background: none; border: none; cursor: pointer; padding: 0 0 0 2px;
  color: rgba(255,255,255,.5); font-size: 0.95rem; line-height: 1;
}
.lb-who-x:hover { color: #E9A0A0; }
.lb-who-add {
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px dashed rgba(255,255,255,.35);
  color: rgba(255,255,255,.75); font-family: var(--font-body); font-size: 0.76rem;
}
.lb-who-add:hover { border-color: var(--champagne); color: var(--champagne); }
.lb-who-none { font-size: 0.78rem; color: rgba(255,255,255,.4); font-style: italic; }

/* person picker -- a standalone modal, above the lightbox */
.pickwrap {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(16, 28, 46, 0.72);
}
.pickbox {
  width: min(360px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: 2px;
  background: var(--white); border: 1px solid var(--border-light);
  box-shadow: 0 30px 70px -30px rgba(16,28,46,.6);
}
.pickbox-title {
  font-family: var(--font-display); font-size: 1.1rem; color: var(--sage-deeper);
  text-align: center;
}
.picker-select, .picker-new {
  font-family: var(--font-body); font-size: 1rem; width: 100%;
  padding: 11px 12px; border-radius: 2px;
  border: 1px solid var(--border-mid); background: var(--sage-ultra); color: var(--charcoal);
}
.picker-select:focus, .picker-new:focus { outline: none; border-color: var(--sage); }
.pickbox-actions { display: flex; gap: 10px; }
.picker-go, .picker-cancel {
  flex: 1 1 0; font-family: var(--font-body); font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 12px 10px; border-radius: 2px; cursor: pointer;
}
.picker-go { background: var(--sage-deep); border: 1px solid var(--sage-deep); color: var(--white); }
.picker-go:hover { background: var(--sage-deeper); }
.picker-cancel { background: none; border: 1px solid var(--border-mid); color: var(--text-mid); }
.picker-cancel:hover { border-color: var(--sage); color: var(--sage-deep); }

/* comments */
.lb-talk { padding: 10px clamp(14px, 4vw, 28px) 0; max-height: 28vh; overflow-y: auto; }
.talk-list { list-style: none; margin-bottom: 8px; }
.talk-item {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 0; font-size: 0.84rem; color: rgba(255,255,255,.82);
}
.talk-author {
  font-family: var(--font-heading); font-style: italic;
  color: var(--champagne); flex: 0 0 auto;
}
.talk-body { word-break: break-word; }
.talk-x {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.35); font-size: 0.95rem; line-height: 1; flex: 0 0 auto;
}
.talk-x:hover { color: #E9A0A0; }
.talk-form { display: flex; gap: 8px; padding-bottom: 4px; }
.talk-who, .talk-body-input, .talk-form input {
  font-family: var(--font-body); font-size: 0.86rem; padding: 8px 10px;
  border-radius: 2px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff;
}
.talk-form .talk-who { flex: 0 0 30%; max-width: 150px; }
.talk-form .talk-body { flex: 1 1 auto; min-width: 0; }
.talk-form input::placeholder { color: rgba(255,255,255,.4); }
.talk-send {
  font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 8px 14px; cursor: pointer;
  background: none; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85);
  border-radius: 2px;
}
.talk-send:hover { border-color: var(--champagne); color: var(--champagne); }

@media (max-width: 640px) {
  .lb-talk { max-height: 24vh; }
  .talk-form { flex-wrap: wrap; }
  .talk-form .talk-who { flex: 1 1 100%; max-width: none; }
}

.lb-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px clamp(14px, 4vw, 28px) calc(14px + env(safe-area-inset-bottom));
  color: rgba(255,255,255,.72); font-size: 0.82rem;
}
.lb-by { font-family: var(--font-heading); font-style: italic; }
.lb-actions { display: flex; gap: 16px; align-items: center; }
.lb-act {
  font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
  background: none; border: none; cursor: pointer; padding: 6px 2px;
}
.lb-act:hover { color: #fff; }
.lb-del:hover { color: #E9A0A0; }
.lb-rot { font-size: 1.15rem; line-height: 1; padding: 4px 6px; }
.lb-act[disabled] { opacity: .4; cursor: default; }

.foot-admin {
  margin-top: 10px; padding: 4px 10px; cursor: pointer;
  background: none; border: none;
  font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--border-mid);
  transition: color var(--transition);
}
.foot-admin:hover { color: var(--sage-mid); }

.foot {
  text-align: center; padding: 0 24px 60px; max-width: 560px; margin: 0 auto;
  font-size: 0.78rem; line-height: 1.7; color: var(--text-light);
}

/* ── mobile ───────────────────────────────────────── */
@media (max-width: 640px) {
  .shell { padding-top: 4px; padding-bottom: 104px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 108px), 1fr)); }
  /* Put the primary action in the thumb zone, not at the top of a long scroll. */
  .head-note { font-size: 0.78rem; padding: 0 4px; }
  .ask { font-size: 1rem; padding: 0 4px; }
  .addwrap {
    position: fixed; left: 0; right: 0; z-index: 90;
    bottom: 0; margin: 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: rgba(250, 250, 248, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-light);
    gap: 0;
  }
  .add-btn { width: 100%; min-width: 0; padding: 17px 20px; }
  .who { display: none; }
  .lb-nav { width: 38px; height: 62px; font-size: 1.7rem; background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.is-developing::after { animation: none; }
  .waiting-dot { animation: none; }
  .tile img, .tile:hover img { transition: none; transform: none; }
  html { scroll-behavior: auto; }
}

:where(button, a, input):focus-visible {
  outline: 2px solid var(--champagne); outline-offset: 2px;
}